Blok Geliştirme

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
    }