Block Authoring

export interface BlockMeta {
  /** The unique string key used in the AST */
  type: BlockType;
  /** Human-readable name shown in the palette */
  displayName: string;
  /** Lucide icon name for the palette card */
  icon: string;
  /** Category for grouping in palette search */
  category: "layout" | "content" | "media" | "conversion" | "data" | "utility";
  /** Palette tier — affects which plans can use the block */
  tier: 1 | 2 | 3;
  /** True if the block can contain child blocks */
  isContainer: boolean;
  /** True if the block requires server-side data (uses fetch in getBlockData) */
  isServerBlock: boolean;
}

{
  type: "pricing-slider",
  displayName: "Pricing Slider",
  icon: "SlidersHorizontal",
  category: "conversion",
  tier: 2,
  isContainer: false,
  isServerBlock: false,
},

import { z } from "zod";

const PricingCardSchema = z.object({
  name: z.string().min(1),
  price: z.string(), // e.g. "$9/mo"
  description: z.string(),
  features: z.array(z.string()),
  ctaLabel: z.string().default("Get started"),
  ctaHref: z.string().url().optional(),
  highlighted: z.boolean().default(false),
});

export const PricingSliderSchema = z.object({
  type: z.literal("pricing-slider"),
  cards: z.array(PricingCardSchema).min(2).max(8),
  heading: z.string().optional(),
  subheading: z.string().optional(),
});

export type PricingSliderProps = z.infer<typeof PricingSliderSchema>;

import { cn } from "@/lib/utils";
import type { PricingSliderProps } from "@/lib/pagebuilder/schemas/pricing-slider";

export function PricingSlider({ cards, heading, subheading }: PricingSliderProps) {
  return (
    <section className="py-16 px-4">
      {heading && (
        <h2 className="text-4xl font-extrabold text-center tracking-tighter mb-3">
          {heading}
        </h2>
      )}
      {subheading && (
        <p className="text-muted-foreground text-center mb-10">{subheading}</p>
      )}
      <div className="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory">
        {cards.map((card, i) => (
          <div
            key={i}
            className={cn(
              "snap-center shrink-0 w-72 rounded-2xl border p-8",
              card.highlighted
                ? "bg-foreground text-background border-foreground"
                : "bg-card border-border/60"
            )}
          >
            <p className="text-sm font-bold uppercase tracking-widest mb-2 opacity-70">
              {card.name}
            </p>
            <p className="text-4xl font-black tracking-tighter mb-4">{card.price}</p>
            <p className="text-sm opacity-80 mb-6">{card.description}</p>
            <ul className="space-y-2 mb-8 text-sm">
              {card.features.map((f, j) => (
                <li key={j} className="flex gap-2">
                  <span>✓</span> {f}
                </li>
              ))}
            </ul>
            {card.ctaHref && (
              <a
                href={card.ctaHref}
                className={cn(
                  "block text-center rounded-xl py-3 font-semibold transition-colors",
                  card.highlighted
                    ? "bg-background text-foreground hover:bg-background/90"
                    : "bg-foreground text-background hover:bg-foreground/90"
                )}
              >
                {card.ctaLabel}
              </a>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

import { PricingSlider } from "./blocks/PricingSlider";
import { PricingSliderSchema } from "@/lib/pagebuilder/schemas/pricing-slider";

// Inside the switch(block.type):
case "pricing-slider": {
  const parsed = PricingSliderSchema.safeParse(block);
  if (!parsed.success) return null;
  return <PricingSlider {...parsed.data} />;
}

import { z } from "zod";

// Common patterns used in block schemas:

// Color token (must reference CSS variable, not raw hex)
const colorToken = z.enum([
  "primary", "foreground", "muted", "background", "card",
  "destructive", "accent"
]);

// Spacing scale (matches Tailwind's 4px grid)
const spacingScale = z.union([
  z.literal(0), z.literal(4), z.literal(8), z.literal(12),
  z.literal(16), z.literal(24), z.literal(32), z.literal(48),
  z.literal(64), z.literal(96), z.literal(128),
]);

// Alignment
const alignment = z.enum(["left", "center", "right"]);

// Button variant
const buttonVariant = z.enum(["primary", "secondary", "ghost", "outline", "link"]);

// Image source (R2 URL or external HTTPS)
const imageSrc = z.string().url().or(z.string().startsWith("/"));

// Server blocks declare a getBlockData function alongside the schema.
// The renderer calls this before rendering and passes result as blockData prop.

export async function getBlockData(
  block: YourBlockSchema,
  context: { tenantId: string; siteUrl: string }
): Promise<YourBlockServerData> {
  const db = await getTenantDB(context.tenantId);
  const posts = await db.getCollection("posts").getList(1, block.limit ?? 6, {
    filter: 'status = "published"',
    sort: "-published_at",
  });
  return { posts: posts.items };
}

// In your component:
export function YourServerBlock({
  // ...block schema props
  blockData,  // YourBlockServerData | null — null if fetch failed
}: YourBlockSchema & { blockData: YourBlockServerData | null }) {
  if (!blockData) return null;  // graceful fallback
  // render with blockData
}

// Every block node in the AST follows this shape:
interface Block {
  id: string;           // nanoid — unique per page
  type: BlockType;      // matches registry entry
  props: unknown;       // validated by block's Zod schema at render time
  childrenIds: string[];// empty for non-containers
  parentId: string | null;
  locked: boolean;      // true = cannot be moved/deleted in editor
  hidden: boolean;      // true = skip render (draft element)
}

// Example post grid node:
{
  id: "blk_4xKm9",
  type: "loop-builder",
  props: {
    type: "loop-builder",
    limit: 6,
    columns: 3,
    showExcerpt: true,
    showTags: true,
    cardStyle: "default"
  },
  childrenIds: [],
  parentId: "blk_root",
  locked: false,
  hidden: false
}