@frontlit/page-builder 0.1.0-alpha.1

package/dist/chunk-MO76KZY2.js

@@ -0,0 +1,3580 @@
+"use client";
+import { blockRegistry, getAddableBlocks, getWidget, PageRenderer } from './chunk-SSQWYMQR.js';
+import { generateUniqueId, FieldGroup, TextField, ToggleField } from './chunk-7KIX4WAO.js';
+import { ThemeModeSwitcher } from './chunk-7W6Q4WA7.js';
+import { themes, cn, Button, Switch, Input, PageCard, PageCardContent, PageCardHeader, Link, Button2 } from './chunk-RBJBODQP.js';
+import React2, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import * as Icons from 'lucide-react';
+import { Smartphone, Tablet, Monitor, Palette, Globe, Plus, HelpCircle, X, ImageIcon, Sparkles, ExternalLink, Check, ChevronLeft, LayoutTemplate, Layers3, Pin, ChevronDown, FilePenLine, Brush, ChevronRight, Type, SquareMousePointer, Columns3, Pencil, Info } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/utils/debounce.ts
+function debounce(fn, wait) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn(...args);
+    }, wait);
+  };
+}
+
+// src/utils/color-mode.ts
+function resolveColorMode(mode, systemPrefersDark) {
+  if (mode === "system") return systemPrefersDark ? "dark" : "light";
+  return mode;
+}
+function toggleColorMode(resolved) {
+  return resolved === "dark" ? "light" : "dark";
+}
+
+// src/starter.ts
+function createWidgetInstance(name, overrides) {
+  const definition = blockRegistry[name];
+  return {
+    widgetId: generateUniqueId(),
+    name,
+    deletable: !["header", "footer", "data-slot"].includes(name),
+    moveable: !["header", "footer"].includes(name),
+    shared: ["header", "footer"].includes(name),
+    settings: {
+      ...definition?.getDefaultSettings?.() ?? {},
+      ...overrides ?? {}
+    }
+  };
+}
+function ensureRequiredSharedWidgets(layout) {
+  const header = layout.find((widget) => widget.name === "header") ?? createWidgetInstance("header");
+  const footer = layout.find((widget) => widget.name === "footer") ?? createWidgetInstance("footer");
+  const body = layout.filter(
+    (widget) => !["header", "footer"].includes(widget.name)
+  );
+  return [
+    {
+      ...header,
+      name: "header",
+      deletable: false,
+      moveable: false,
+      shared: true
+    },
+    ...body,
+    {
+      ...footer,
+      name: "footer",
+      deletable: false,
+      moveable: false,
+      shared: true
+    }
+  ];
+}
+function getDefaultTheme() {
+  return themes[0];
+}
+function createDefaultLayout() {
+  return ensureRequiredSharedWidgets([
+    createWidgetInstance("header", { ctaHref: "/builder" }),
+    createWidgetInstance("hero", { buttonAction: "/builder" }),
+    createWidgetInstance("featured"),
+    createWidgetInstance("content"),
+    createWidgetInstance("pricing"),
+    createWidgetInstance("faq"),
+    createWidgetInstance("email-form"),
+    createWidgetInstance("footer")
+  ]);
+}
+var DEVICES = [
+  { key: "mobile", label: "Mobile preview", icon: Smartphone },
+  { key: "tablet", label: "Tablet preview", icon: Tablet },
+  { key: "desktop", label: "Desktop preview", icon: Monitor }
+];
+function BuilderTopBar({
+  resolvedMode,
+  onModeChange,
+  device,
+  onDeviceChange,
+  onOpenTheme,
+  onOpenSeo,
+  onAddBlock,
+  allowThemeEditing = true
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: "flex h-14 w-full shrink-0 items-center justify-between border-b bg-background px-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Page builder" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex items-center gap-0.5 rounded-md border border-border p-0.5",
+          role: "group",
+          "aria-label": "Preview device",
+          children: DEVICES.map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: label,
+              "aria-label": label,
+              "aria-pressed": device === key,
+              className: cn(
+                "inline-flex h-7 w-7 items-center justify-center rounded-sm transition-colors",
+                device === key ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              onClick: () => onDeviceChange(key),
+              children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+            },
+            key
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-6 w-px bg-border",
+          role: "separator",
+          "aria-orientation": "vertical"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ThemeModeSwitcher,
+          {
+            resolved: resolvedMode,
+            onToggle: () => onModeChange(toggleColorMode(resolvedMode))
+          }
+        ),
+        allowThemeEditing && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            title: "Theme",
+            "aria-label": "Edit theme",
+            onClick: onOpenTheme,
+            children: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            title: "SEO",
+            "aria-label": "Edit SEO settings",
+            onClick: onOpenSeo,
+            children: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-6 w-px bg-border",
+          role: "separator",
+          "aria-orientation": "vertical"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          className: "gap-2 whitespace-nowrap",
+          title: "Add a new block to the page",
+          onClick: onAddBlock,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            "Add block"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var COPIED_ATTR = "data-pb-preview-style";
+var THEME_FONT_VARS = [
+  "--font-sans",
+  "--font-mono",
+  "--font-inter",
+  "--font-open-sans",
+  "--font-source-sans-3",
+  "--font-noto-sans",
+  "--font-roboto",
+  "--font-mulish",
+  "--font-nunito",
+  "--font-work-sans",
+  "--font-merriweather",
+  "--font-alegreya",
+  "--font-playfair-display",
+  "--font-roboto-slab",
+  "--font-source-serif-4",
+  "--font-montserrat",
+  "--font-poppins",
+  "--font-raleway",
+  "--font-rubik",
+  "--font-oswald",
+  "--font-bebas-neue",
+  "--font-lato",
+  "--font-pt-sans",
+  "--font-quicksand"
+];
+function readCssVar(sourceDoc, name) {
+  const view = sourceDoc.defaultView;
+  if (!view) return "";
+  const html = view.getComputedStyle(sourceDoc.documentElement).getPropertyValue(name).trim();
+  if (html) return html;
+  return view.getComputedStyle(sourceDoc.body).getPropertyValue(name).trim();
+}
+function syncFontVariables(sourceDoc, targetDoc) {
+  const root = targetDoc.documentElement;
+  for (const name of THEME_FONT_VARS) {
+    const value = readCssVar(sourceDoc, name);
+    if (value) root.style.setProperty(name, value);
+    else root.style.removeProperty(name);
+  }
+}
+function syncStyles(sourceDoc, targetDoc) {
+  targetDoc.head.querySelectorAll(`[${COPIED_ATTR}]`).forEach((node) => node.remove());
+  sourceDoc.querySelectorAll('style, link[rel="stylesheet"]').forEach((node) => {
+    const clone = node.cloneNode(true);
+    clone.setAttribute(COPIED_ATTR, "");
+    targetDoc.head.appendChild(clone);
+  });
+  syncFontVariables(sourceDoc, targetDoc);
+}
+function PreviewFrame({
+  className,
+  title = "Page preview",
+  children
+}) {
+  const iframeRef = useRef(null);
+  const [mountNode, setMountNode] = useState(null);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    let observer;
+    const init = () => {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+      if (!doc.getElementById("pb-preview-base")) {
+        const base = doc.createElement("style");
+        base.id = "pb-preview-base";
+        base.textContent = "html,body{margin:0;height:100%;}";
+        doc.head.appendChild(base);
+      }
+      syncStyles(document, doc);
+      observer?.disconnect();
+      observer = new MutationObserver(() => syncStyles(document, doc));
+      observer.observe(document.head, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+      setMountNode(doc.body);
+    };
+    if (iframe.contentDocument?.readyState === "complete") init();
+    iframe.addEventListener("load", init);
+    return () => {
+      iframe.removeEventListener("load", init);
+      observer?.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("iframe", { ref: iframeRef, title, className, children: mountNode ? createPortal(children, mountNode) : null });
+}
+function resolveIcon(name) {
+  if (name && name in Icons) {
+    return Icons[name];
+  }
+  return Icons.LayoutTemplate;
+}
+function BlockPicker({
+  blocks,
+  onPick,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex max-h-[80vh] w-full max-w-lg flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Add a block" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx(Icons.X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 overflow-y-auto p-4 sm:grid-cols-3", children: blocks.map((block) => {
+              const Icon = resolveIcon(block.metadata.icon);
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex flex-col items-center gap-2 rounded-md border border-border p-4 text-center transition-colors hover:border-primary hover:bg-muted",
+                  onClick: () => onPick(block.metadata.name),
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-foreground" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: block.metadata.displayName })
+                  ]
+                },
+                block.metadata.name
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function PanelHeader({
+  title,
+  onClose,
+  eyebrow = "Settings",
+  description,
+  icon: Icon = Layers3
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-border/80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-5 py-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-primary/15 bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsx("h2", { className: "mt-1 truncate text-base font-semibold tracking-tight text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "-mr-2 -mt-1 h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground",
+        "aria-label": `Close ${title} settings`,
+        onClick: onClose,
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+      }
+    )
+  ] }) });
+}
+function SettingsPanel({
+  title,
+  onClose,
+  children,
+  eyebrow,
+  description,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs("aside", { className: "flex h-full min-h-0 w-[min(360px,calc(100vw-2rem))] max-w-full shrink-0 flex-col overflow-hidden rounded-2xl border border-border/80 bg-background shadow-lg shadow-foreground/5", children: [
+    /* @__PURE__ */ jsx(
+      PanelHeader,
+      {
+        title,
+        onClose,
+        eyebrow,
+        description,
+        icon
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 px-5 py-5", children }) })
+  ] });
+}
+function PageBuilderPropertyHeader({
+  label,
+  tooltip
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex grow items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-xs font-semibold text-foreground", children: label }),
+    tooltip && /* @__PURE__ */ jsx("span", { title: tooltip, className: "inline-flex cursor-help", children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5 text-muted-foreground" }) })
+  ] });
+}
+function PageBuilderSlider({
+  title,
+  min,
+  max,
+  value,
+  onChange,
+  tooltip,
+  className,
+  allowsReset = false,
+  unit = "px"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(PageBuilderPropertyHeader, { label: title, tooltip }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            inputMode: "numeric",
+            min,
+            max,
+            value: Number.isFinite(value) ? value : 0,
+            onChange: (e) => {
+              const parsed = Number(e.currentTarget.value);
+              if (Number.isNaN(parsed)) return;
+              onChange(Math.min(Math.max(parsed, min), max));
+            },
+            className: "h-7 w-12 rounded-md border border-input bg-muted/20 px-1.5 py-1 text-center text-xs font-semibold text-foreground outline-none transition-colors focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/20"
+          }
+        ),
+        unit && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: unit }),
+        allowsReset && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "Reset",
+            className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            onClick: (e) => {
+              e.preventDefault();
+              onChange();
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step: 1,
+        value: Number.isFinite(value) ? value : min,
+        onChange: (e) => onChange(Number(e.currentTarget.value)),
+        "aria-label": title,
+        className: "h-1.5 w-full cursor-pointer accent-primary"
+      }
+    )
+  ] });
+}
+function ColorSelector({
+  title,
+  value,
+  onChange,
+  tooltip,
+  className,
+  allowReset = true,
+  description
+}) {
+  const [localValue, setLocalValue] = React2.useState(value);
+  React2.useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const handleChange = (newValue) => {
+    setLocalValue(newValue);
+    onChange(newValue);
+  };
+  const swatchValue = /^#[0-9a-fA-F]{6}$/.test(localValue) ? localValue : "#000000";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 items-center justify-between gap-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(PageBuilderPropertyHeader, { label: title, tooltip }),
+          description && /* @__PURE__ */ jsx("p", { className: "break-words text-xs text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: swatchValue,
+              onChange: (e) => handleChange(e.currentTarget.value),
+              className: "h-7 w-9 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5",
+              "aria-label": `${title} swatch`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: localValue ?? "",
+              placeholder: "#000000",
+              onChange: (e) => handleChange(e.currentTarget.value),
+              className: "h-7 w-20 min-w-0 rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground outline-none focus:ring-2 focus:ring-ring/20",
+              "aria-label": `${title} hex value`
+            }
+          ),
+          allowReset && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: "Reset",
+              className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md hover:bg-muted/50",
+              onClick: (e) => {
+                e.preventDefault();
+                setLocalValue("");
+                onChange();
+              },
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var MAX_WIDTH_MAP = {
+  1: "max-w-2xl",
+  2: "max-w-3xl",
+  3: "max-w-4xl",
+  4: "max-w-5xl",
+  5: "max-w-6xl"
+};
+function getMaxWidthTWClass(value) {
+  const roundedValue = Math.max(1, Math.min(5, Math.round(value)));
+  return MAX_WIDTH_MAP[roundedValue] || MAX_WIDTH_MAP[5];
+}
+function MaxWidthSelector({
+  value,
+  onChange,
+  className = "",
+  themeDefault
+}) {
+  const numericValue = Object.entries(MAX_WIDTH_MAP).find(
+    ([_, v]) => v === (value ?? themeDefault)
+  )?.[0] || "5";
+  const handleChange = (newValue) => {
+    if (newValue === void 0) {
+      onChange();
+      return;
+    }
+    onChange(getMaxWidthTWClass(newValue));
+  };
+  return /* @__PURE__ */ jsx(
+    PageBuilderSlider,
+    {
+      title: "Maximum width",
+      max: 5,
+      min: 1,
+      onChange: handleChange,
+      value: parseInt(numericValue),
+      tooltip: "Maximum width of the content",
+      className,
+      allowsReset: true,
+      unit: ""
+    }
+  );
+}
+var PADDING_MAP = {
+  0: "py-0",
+  1: "py-4",
+  2: "py-6",
+  3: "py-8",
+  4: "py-10",
+  5: "py-12",
+  6: "py-16",
+  7: "py-20",
+  8: "py-24",
+  9: "py-32",
+  10: "py-40",
+  11: "py-48",
+  12: "py-56",
+  13: "py-64"
+};
+function getVerticalPaddingTWClass(value) {
+  const roundedValue = Math.max(0, Math.min(13, Math.round(value)));
+  return PADDING_MAP[roundedValue] || PADDING_MAP[5];
+}
+function VerticalPaddingSelector({
+  value,
+  onChange,
+  className = "",
+  themeDefault
+}) {
+  const numericValue = Object.entries(PADDING_MAP).find(
+    ([_, v]) => v === (value ?? themeDefault)
+  )?.[0] || "6";
+  const handleChange = (newValue) => {
+    if (newValue === void 0) {
+      onChange();
+      return;
+    }
+    onChange(getVerticalPaddingTWClass(newValue));
+  };
+  return /* @__PURE__ */ jsx(
+    PageBuilderSlider,
+    {
+      title: "Vertical padding",
+      max: 13,
+      min: 0,
+      onChange: handleChange,
+      value: parseInt(numericValue),
+      tooltip: "Vertical padding of the section",
+      className,
+      unit: ""
+    }
+  );
+}
+function ContentPaddingSelector({
+  value,
+  onChange,
+  className = "",
+  variant = "horizontal",
+  min,
+  max
+}) {
+  const tooltip = variant === "horizontal" ? "Width of the actual content. It affects only desktop class displays" : "Space on the top and bottom of the content. It affects only desktop class displays";
+  const defaultMax = variant === "horizontal" ? 100 : 200;
+  const defaultMin = variant === "horizontal" ? 10 : 16;
+  return /* @__PURE__ */ jsx(
+    PageBuilderSlider,
+    {
+      title: variant === "horizontal" ? "Content width" : "Vertical padding",
+      max: max || defaultMax,
+      min: min || defaultMin,
+      onChange,
+      value,
+      tooltip,
+      className
+    }
+  );
+}
+
+// src/builder/controls/pattern-presets.ts
+function svgToDataUri(svg) {
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+var light = {
+  soft: "rgba(0,0,0,0.06)",
+  mid: "rgba(0,0,0,0.09)",
+  firm: "rgba(0,0,0,0.12)"};
+var dark = {
+  soft: "rgba(255,255,255,0.06)",
+  mid: "rgba(255,255,255,0.09)",
+  firm: "rgba(255,255,255,0.12)"};
+function dotsSvg(fill, size = 16, r = 1.35) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><circle cx="${size / 4}" cy="${size / 4}" r="${r}" fill="${fill}"/></svg>`;
+}
+function gridSvg(stroke, size = 32) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M${size} 0H0V${size}" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function diagonalSvg(stroke, size = 24) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M0 ${size} ${size} 0M-${size / 4} ${size / 4} ${size / 4}-${size / 4}M${size * 0.75} ${size * 1.25} ${size * 1.25} ${size * 0.75}" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function contourSvg(stroke) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150"><g fill="none" stroke="${stroke}" stroke-width="1">
+<path d="M0,15 Q37.5,-5 75,15 T150,15 T225,15 T300,15"/>
+<path d="M0,45 Q37.5,25 75,45 T150,45 T225,45 T300,45"/>
+<path d="M0,75 Q37.5,55 75,75 T150,75 T225,75 T300,75"/>
+<path d="M0,105 Q37.5,85 75,105 T150,105 T225,105 T300,105"/>
+<path d="M0,135 Q37.5,115 75,135 T150,135 T225,135 T300,135"/>
+</g></svg>`;
+}
+function plusSvg(stroke, size = 24) {
+  const mid = size / 2;
+  const arm = size * 0.22;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M${mid} ${mid - arm}v${arm * 2}M${mid - arm} ${mid}h${arm * 2}" fill="none" stroke="${stroke}" stroke-width="1.25" stroke-linecap="round"/></svg>`;
+}
+function graphPaperSvg(minor, major, size = 80) {
+  const step = size / 4;
+  const lines = [];
+  for (let i = 1; i < 4; i++) {
+    lines.push(`M${i * step} 0V${size}`, `M0 ${i * step}H${size}`);
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
+<path d="${lines.join("")}" fill="none" stroke="${minor}" stroke-width="1"/>
+<path d="M${size} 0H0V${size}" fill="none" stroke="${major}" stroke-width="1"/>
+</svg>`;
+}
+function hexSvg(stroke, size = 56) {
+  const w = size;
+  const h = Math.round(size * 0.866);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><path d="M${w * 0.25} 0 L${w * 0.75} 0 L${w} ${h / 2} L${w * 0.75} ${h} L${w * 0.25} ${h} L0 ${h / 2} Z" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function chevronSvg(stroke, size = 28) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M0 ${size * 0.35} L${size / 2} ${size * 0.65} L${size} ${size * 0.35}" fill="none" stroke="${stroke}" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+}
+function verticalLinesSvg(stroke, size = 12) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M1 0V${size}" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function horizontalLinesSvg(stroke, size = 14) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M0 1H${size}" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function crosshatchSvg(stroke, size = 20) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M0 ${size} ${size} 0M-${size / 4} ${size / 4} ${size / 4}-${size / 4}M${size * 0.75} ${size * 1.25} ${size * 1.25} ${size * 0.75}M0 0 ${size} ${size}M-${size / 4} ${size * 0.75} ${size / 4} ${size * 1.25}M${size * 0.75} ${-size / 4} ${size * 1.25} ${size / 4}" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function diamondSvg(stroke, size = 28) {
+  const m = size / 2;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M${m} 1 L${size - 1} ${m} L${m} ${size - 1} L1 ${m} Z" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function wavesSvg(stroke) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><path d="M0 20 Q15 0 30 20 T60 20 T90 20 T120 20" fill="none" stroke="${stroke}" stroke-width="1.25"/></svg>`;
+}
+function concentricSvg(stroke, size = 64) {
+  const c = size / 2;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
+<circle cx="${c}" cy="${c}" r="${size * 0.18}" fill="none" stroke="${stroke}" stroke-width="1"/>
+<circle cx="${c}" cy="${c}" r="${size * 0.32}" fill="none" stroke="${stroke}" stroke-width="1"/>
+<circle cx="${c}" cy="${c}" r="${size * 0.46}" fill="none" stroke="${stroke}" stroke-width="1"/>
+</svg>`;
+}
+function isometricSvg(stroke, size = 48) {
+  const s = size;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s * 0.866}">
+<path d="M${s / 2} 0 L${s} ${s * 0.2165} L${s / 2} ${s * 0.433} L0 ${s * 0.2165} Z M${s / 2} ${s * 0.433} V${s * 0.866} M0 ${s * 0.2165} V${s * 0.65} L${s / 2} ${s * 0.866} L${s} ${s * 0.65} V${s * 0.2165}" fill="none" stroke="${stroke}" stroke-width="1"/>
+</svg>`;
+}
+function trianglesSvg(stroke, size = 36) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${Math.round(size * 0.866)}"><path d="M${size / 2} 1 L${size - 1} ${size * 0.866 - 1} L1 ${size * 0.866 - 1} Z" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function scatterDotsSvg(fill, size = 48) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
+<circle cx="8" cy="10" r="1.2" fill="${fill}"/>
+<circle cx="22" cy="6" r="0.9" fill="${fill}"/>
+<circle cx="38" cy="14" r="1.5" fill="${fill}"/>
+<circle cx="14" cy="28" r="1" fill="${fill}"/>
+<circle cx="30" cy="24" r="0.8" fill="${fill}"/>
+<circle cx="42" cy="36" r="1.1" fill="${fill}"/>
+<circle cx="6" cy="40" r="0.95" fill="${fill}"/>
+<circle cx="24" cy="42" r="1.3" fill="${fill}"/>
+</svg>`;
+}
+function brickSvg(stroke, w = 40, h = 20) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h * 2}">
+<path d="M0 0H${w}V${h}H0Z M0 ${h}H${w / 2}V${h * 2}H0Z M${w / 2} ${h}H${w}V${h * 2}H${w / 2}Z" fill="none" stroke="${stroke}" stroke-width="1"/>
+</svg>`;
+}
+function scalesSvg(stroke, size = 32) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size * 0.6}"><path d="M0 ${size * 0.6} A${size / 2} ${size * 0.55} 0 0 1 ${size} ${size * 0.6}" fill="none" stroke="${stroke}" stroke-width="1"/></svg>`;
+}
+function dashedGridSvg(stroke, size = 28) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M${size} 0H0V${size}" fill="none" stroke="${stroke}" stroke-width="1" stroke-dasharray="3 4"/></svg>`;
+}
+function circuitSvg(stroke, size = 64) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" stroke="${stroke}" stroke-width="1" stroke-linecap="round">
+<path d="M8 8H28V28H8Z"/>
+<path d="M36 12H52V20H36Z"/>
+<path d="M12 36H20V52H12Z"/>
+<path d="M28 8V4M8 16H4M28 20H36M20 28V36M44 20V36H36"/>
+<circle cx="36" cy="36" r="3"/>
+<circle cx="52" cy="44" r="2.5"/>
+<path d="M39 36H49M52 41.5V36"/>
+</svg>`;
+}
+function zigZagSvg(stroke, size = 24) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"><path d="M0 ${size / 2} L${size / 4} ${size * 0.2} L${size / 2} ${size / 2} L${size * 0.75} ${size * 0.8} L${size} ${size / 2}" fill="none" stroke="${stroke}" stroke-width="1.25" stroke-linejoin="round"/></svg>`;
+}
+function svgPattern(id, label, lightSvg, darkSvg, size, description, extras) {
+  return {
+    id,
+    label,
+    category: "tile",
+    description,
+    apply: {
+      backgroundImage: svgToDataUri(lightSvg),
+      backgroundImageDark: svgToDataUri(darkSvg),
+      gradientBackgroundSize: size,
+      gradientBackgroundRepeat: "repeat",
+      gradientBackgroundPosition: "0 0",
+      gradientMaskImage: void 0,
+      ...extras
+    }
+  };
+}
+function cssPattern(id, label, lightCss, darkCss, description, extras) {
+  return {
+    id,
+    label,
+    category: "glow",
+    description,
+    apply: {
+      backgroundImage: lightCss,
+      backgroundImageDark: darkCss,
+      gradientBackgroundSize: "100% 100%",
+      gradientBackgroundRepeat: "no-repeat",
+      gradientBackgroundPosition: "center",
+      gradientMaskImage: void 0,
+      ...extras
+    }
+  };
+}
+var PATTERN_PRESETS = [
+  // ── Classic tiles ────────────────────────────────────────────────────
+  svgPattern(
+    "dots",
+    "Dots",
+    dotsSvg(light.firm),
+    dotsSvg(dark.firm),
+    "16px 16px",
+    "Subtle dot grid \u2014 the default SaaS texture"
+  ),
+  svgPattern(
+    "dots-fine",
+    "Fine dots",
+    dotsSvg(light.mid, 10, 0.9),
+    dotsSvg(dark.mid, 10, 0.9),
+    "10px 10px",
+    "Tighter, quieter polka texture"
+  ),
+  svgPattern(
+    "scatter",
+    "Scatter",
+    scatterDotsSvg(light.firm),
+    scatterDotsSvg(dark.firm),
+    "48px 48px",
+    "Organic, uneven speckles"
+  ),
+  svgPattern(
+    "grid",
+    "Grid",
+    gridSvg(light.mid),
+    gridSvg(dark.mid),
+    "32px 32px",
+    "Clean square lattice"
+  ),
+  svgPattern(
+    "graph-paper",
+    "Graph paper",
+    graphPaperSvg(light.soft, light.firm),
+    graphPaperSvg(dark.soft, dark.firm),
+    "80px 80px",
+    "Notebook-style minor + major grid"
+  ),
+  svgPattern(
+    "dashed-grid",
+    "Dashed grid",
+    dashedGridSvg(light.mid),
+    dashedGridSvg(dark.mid),
+    "28px 28px",
+    "Soft technical grid with dashed strokes"
+  ),
+  svgPattern(
+    "diagonal",
+    "Diagonal lines",
+    diagonalSvg(light.mid),
+    diagonalSvg(dark.mid),
+    "24px 24px",
+    "Classic hatch at 45\xB0"
+  ),
+  svgPattern(
+    "crosshatch",
+    "Crosshatch",
+    crosshatchSvg(light.soft),
+    crosshatchSvg(dark.soft),
+    "20px 20px",
+    "Crossed diagonals for richer grain"
+  ),
+  svgPattern(
+    "plus",
+    "Plus marks",
+    plusSvg(light.firm),
+    plusSvg(dark.firm),
+    "24px 24px",
+    "Cross / plus marks \u2014 popular on product pages"
+  ),
+  svgPattern(
+    "vertical",
+    "Pinstripe",
+    verticalLinesSvg(light.mid),
+    verticalLinesSvg(dark.mid),
+    "12px 12px",
+    "Editorial vertical lines"
+  ),
+  svgPattern(
+    "horizontal",
+    "Ruled lines",
+    horizontalLinesSvg(light.mid),
+    horizontalLinesSvg(dark.mid),
+    "14px 14px",
+    "Horizontal notebook rules"
+  ),
+  svgPattern(
+    "zigzag",
+    "Zigzag",
+    zigZagSvg(light.mid),
+    zigZagSvg(dark.mid),
+    "24px 24px",
+    "Continuous zigzag band"
+  ),
+  svgPattern(
+    "chevron",
+    "Chevron",
+    chevronSvg(light.mid),
+    chevronSvg(dark.mid),
+    "28px 28px",
+    "Stacked chevrons for motion"
+  ),
+  svgPattern(
+    "diamond",
+    "Diamonds",
+    diamondSvg(light.mid),
+    diamondSvg(dark.mid),
+    "28px 28px",
+    "Geometric diamond lattice"
+  ),
+  svgPattern(
+    "triangles",
+    "Triangles",
+    trianglesSvg(light.mid),
+    trianglesSvg(dark.mid),
+    "36px 31px",
+    "Tessellated triangle outlines"
+  ),
+  svgPattern(
+    "hexagon",
+    "Hexagons",
+    hexSvg(light.mid),
+    hexSvg(dark.mid),
+    "56px 48px",
+    "Honeycomb / tech hex grid"
+  ),
+  svgPattern(
+    "isometric",
+    "Isometric",
+    isometricSvg(light.mid),
+    isometricSvg(dark.mid),
+    "48px 42px",
+    "3D cube lattice"
+  ),
+  svgPattern(
+    "waves",
+    "Waves",
+    wavesSvg(light.mid),
+    wavesSvg(dark.mid),
+    "120px 40px",
+    "Gentle repeating sine waves"
+  ),
+  svgPattern(
+    "contour",
+    "Contour",
+    contourSvg(light.soft),
+    contourSvg(dark.soft),
+    "300px 150px",
+    "Topographic contour strokes"
+  ),
+  svgPattern(
+    "concentric",
+    "Ripples",
+    concentricSvg(light.soft),
+    concentricSvg(dark.soft),
+    "64px 64px",
+    "Concentric circle tiles"
+  ),
+  svgPattern(
+    "scales",
+    "Scales",
+    scalesSvg(light.mid),
+    scalesSvg(dark.mid),
+    "32px 19px",
+    "Fish-scale / arc tile"
+  ),
+  svgPattern(
+    "brick",
+    "Brick",
+    brickSvg(light.mid),
+    brickSvg(dark.mid),
+    "40px 40px",
+    "Offset brick running bond"
+  ),
+  svgPattern(
+    "circuit",
+    "Circuit",
+    circuitSvg(light.mid),
+    circuitSvg(dark.mid),
+    "64px 64px",
+    "Tech / PCB-inspired traces"
+  ),
+  // ── Full-bleed CSS (modern hero / marketing) ─────────────────────────
+  cssPattern(
+    "soft-mesh",
+    "Soft mesh",
+    `radial-gradient(at 20% 20%, rgba(99,102,241,0.18) 0px, transparent 50%), radial-gradient(at 80% 10%, rgba(236,72,153,0.14) 0px, transparent 45%), radial-gradient(at 50% 80%, rgba(34,211,238,0.12) 0px, transparent 50%), radial-gradient(at 90% 70%, rgba(250,204,21,0.1) 0px, transparent 40%)`,
+    `radial-gradient(at 20% 20%, rgba(99,102,241,0.28) 0px, transparent 50%), radial-gradient(at 80% 10%, rgba(236,72,153,0.22) 0px, transparent 45%), radial-gradient(at 50% 80%, rgba(34,211,238,0.18) 0px, transparent 50%), radial-gradient(at 90% 70%, rgba(250,204,21,0.12) 0px, transparent 40%)`,
+    "Colorful soft blobs \u2014 modern marketing hero"
+  ),
+  cssPattern(
+    "aurora",
+    "Aurora",
+    `linear-gradient(135deg, rgba(56,189,248,0.2), transparent 50%), linear-gradient(225deg, rgba(167,139,250,0.22), transparent 50%), linear-gradient(45deg, rgba(52,211,153,0.15), transparent 40%)`,
+    `linear-gradient(135deg, rgba(56,189,248,0.28), transparent 50%), linear-gradient(225deg, rgba(167,139,250,0.3), transparent 50%), linear-gradient(45deg, rgba(52,211,153,0.2), transparent 40%)`,
+    "Layered aurora bands"
+  ),
+  cssPattern(
+    "spotlight",
+    "Spotlight",
+    `radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.22), transparent 55%)`,
+    `radial-gradient(ellipse 80% 60% at 50% -10%, rgba(129,140,248,0.35), transparent 55%)`,
+    "Top-centered spotlight glow"
+  ),
+  cssPattern(
+    "bottom-glow",
+    "Bottom glow",
+    `radial-gradient(ellipse 70% 50% at 50% 110%, rgba(14,165,233,0.2), transparent 55%)`,
+    `radial-gradient(ellipse 70% 50% at 50% 110%, rgba(56,189,248,0.28), transparent 55%)`,
+    "Soft light rising from the bottom edge"
+  ),
+  cssPattern(
+    "corner-glow",
+    "Corner glow",
+    `radial-gradient(ellipse 60% 50% at 0% 0%, rgba(244,63,94,0.16), transparent 50%), radial-gradient(ellipse 50% 45% at 100% 100%, rgba(59,130,246,0.16), transparent 50%)`,
+    `radial-gradient(ellipse 60% 50% at 0% 0%, rgba(251,113,133,0.25), transparent 50%), radial-gradient(ellipse 50% 45% at 100% 100%, rgba(96,165,250,0.25), transparent 50%)`,
+    "Opposite-corner color accents"
+  ),
+  cssPattern(
+    "horizon",
+    "Horizon fade",
+    `linear-gradient(180deg, transparent 0%, rgba(15,23,42,0.04) 55%, rgba(15,23,42,0.08) 100%)`,
+    `linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.1) 100%)`,
+    "Gentle vertical vignette toward the base"
+  ),
+  cssPattern(
+    "diagonal-fade",
+    "Diagonal fade",
+    `linear-gradient(135deg, rgba(99,102,241,0.12) 0%, transparent 45%, rgba(236,72,153,0.1) 100%)`,
+    `linear-gradient(135deg, rgba(129,140,248,0.2) 0%, transparent 45%, rgba(244,114,182,0.16) 100%)`,
+    "Two-tone diagonal wash"
+  ),
+  svgPattern(
+    "grid-fade",
+    "Fading grid",
+    gridSvg(light.firm, 40),
+    gridSvg(dark.firm, 40),
+    "40px 40px",
+    "Grid that softens toward the edges",
+    {
+      gradientMaskImage: "radial-gradient(ellipse at center, black 25%, transparent 75%)"
+    }
+  )
+];
+var BG_TYPES = [
+  {
+    type: "color",
+    label: "Color",
+    description: "Solid fill",
+    icon: Palette
+  },
+  {
+    type: "image",
+    label: "Image",
+    description: "Photo or asset",
+    icon: ImageIcon
+  },
+  {
+    type: "gradient",
+    label: "Pattern",
+    description: "Texture or glow",
+    icon: Sparkles
+  }
+];
+var BLEND_MODES = [
+  { label: "Normal", value: "normal" },
+  { label: "Multiply", value: "multiply" },
+  { label: "Screen", value: "screen" },
+  { label: "Overlay", value: "overlay" },
+  { label: "Darken", value: "darken" },
+  { label: "Lighten", value: "lighten" },
+  { label: "Color Dodge", value: "color-dodge" },
+  { label: "Color Burn", value: "color-burn" },
+  { label: "Hard Light", value: "hard-light" },
+  { label: "Soft Light", value: "soft-light" },
+  { label: "Difference", value: "difference" },
+  { label: "Exclusion", value: "exclusion" },
+  { label: "Hue", value: "hue" },
+  { label: "Saturation", value: "saturation" },
+  { label: "Color", value: "color" },
+  { label: "Luminosity", value: "luminosity" }
+];
+var BACKGROUND_REPEAT_OPTIONS = [
+  { label: "No repeat", value: "no-repeat" },
+  { label: "Repeat", value: "repeat" },
+  { label: "Repeat X", value: "repeat-x" },
+  { label: "Repeat Y", value: "repeat-y" },
+  { label: "Space", value: "space" },
+  { label: "Round", value: "round" }
+];
+var PATTERN_FILTERS = [
+  { id: "all", label: "All" },
+  { id: "tile", label: "Tiles" },
+  { id: "glow", label: "Glows" }
+];
+var fieldLabelClass = "text-xs font-semibold tracking-tight text-foreground";
+var fieldHintClass = "text-[11px] leading-relaxed text-muted-foreground break-words";
+var controlClass = "box-border h-9 w-full min-w-0 max-w-full rounded-lg border border-input bg-muted/20 px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/20";
+var textareaClass = "box-border min-h-[4.5rem] w-full min-w-0 max-w-full resize-y rounded-lg border border-input bg-muted/20 px-3 py-2 font-mono text-[11px] leading-relaxed text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/20 break-all";
+function FieldLabel({
+  htmlFor,
+  children,
+  hint,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor, className: fieldLabelClass, children }),
+      hint ? /* @__PURE__ */ jsx("p", { className: fieldHintClass, children: hint }) : null
+    ] }),
+    trailing ? /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-0.5", children: trailing }) : null
+  ] });
+}
+function PanelInput(props) {
+  return /* @__PURE__ */ jsx("input", { ...props, className: cn(controlClass, props.className) });
+}
+function PanelTextarea(props) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...props,
+      className: cn(textareaClass, props.className),
+      spellCheck: false
+    }
+  );
+}
+function PanelSelect({
+  id,
+  title,
+  hint,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(FieldLabel, { htmlFor: id, hint, children: title }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id,
+        className: cn(
+          controlClass,
+          "cursor-pointer appearance-none pr-8"
+        ),
+        value,
+        onChange: (e) => onChange(e.target.value),
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    )
+  ] });
+}
+function SectionCard({
+  title,
+  description,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "min-w-0 max-w-full overflow-hidden rounded-xl border border-border/70 bg-card/40 p-3 shadow-sm",
+        className
+      ),
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-3 space-y-0.5", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: fieldHintClass, children: description }) : null
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function CollapsibleCard({
+  title,
+  description,
+  defaultOpen = false,
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded-xl border border-border/70 bg-card/40 shadow-sm", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-muted/30",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: fieldHintClass, children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+                open && "rotate-180"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-4 border-t border-border/60 px-3 py-3", children }) : null
+  ] });
+}
+function FixedBackgroundToggle({
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border",
+          checked ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-muted/30 text-muted-foreground"
+        ),
+        children: /* @__PURE__ */ jsx(Pin, { className: "h-3.5 w-3.5", "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "bg-fixed-toggle",
+            className: "text-xs font-semibold text-foreground",
+            children: "Fixed background"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: "bg-fixed-toggle",
+            checked,
+            onCheckedChange: onChange,
+            "aria-describedby": "bg-fixed-hint"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { id: "bg-fixed-hint", className: fieldHintClass, children: "Keep the background still while the page scrolls \u2014 content moves over a static surface." })
+    ] })
+  ] }) });
+}
+function BackgroundPreview({ value }) {
+  const imageUrl = value.type === "image" && typeof value.media?.file === "string" ? value.media.file : void 0;
+  const previewStyle = (() => {
+    if (value.type === "color") {
+      return {
+        backgroundColor: value.backgroundColor || "var(--muted)"
+      };
+    }
+    if (value.type === "image") {
+      return {
+        backgroundColor: "var(--muted)",
+        backgroundImage: imageUrl ? `url(${imageUrl})` : void 0,
+        backgroundSize: value.backgroundSize || "cover",
+        backgroundPosition: value.backgroundPosition || "center",
+        backgroundRepeat: value.backgroundRepeat || "no-repeat"
+      };
+    }
+    return {
+      backgroundColor: "var(--background)",
+      backgroundImage: value.backgroundImage,
+      backgroundSize: value.gradientBackgroundSize || "cover",
+      backgroundPosition: value.gradientBackgroundPosition || "center",
+      backgroundRepeat: value.gradientBackgroundRepeat || "no-repeat",
+      WebkitMaskImage: value.gradientMaskImage,
+      maskImage: value.gradientMaskImage
+    };
+  })();
+  const typeLabel = BG_TYPES.find((t) => t.type === value.type)?.label ?? "Background";
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded-xl border border-border/70 shadow-sm", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative h-14 w-full max-w-full",
+        style: previewStyle,
+        children: [
+          value.type === "image" && imageUrl && (value.blur || 0) > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: {
+                backdropFilter: `blur(${value.blur}px)`
+              }
+            }
+          ) : null,
+          value.type === "image" && value.overlay?.color ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: {
+                backgroundColor: value.overlay.color,
+                opacity: (value.overlay.opacity || 0) / 10,
+                mixBlendMode: value.overlay.blendMode || "normal"
+              }
+            }
+          ) : null,
+          value.type === "image" && !imageUrl ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-1.5 text-[11px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            "No image yet"
+          ] }) : null,
+          value.type === "gradient" && !value.backgroundImage ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-1.5 text-[11px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            "Choose a pattern"
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border/60 bg-muted/20 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Preview" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground", children: typeLabel })
+    ] })
+  ] });
+}
+function SectionBackgroundPanel({
+  value = { type: "color" },
+  onChange,
+  className
+}) {
+  const [patternFilter, setPatternFilter] = useState("all");
+  const handleTypeChange = (type) => {
+    onChange({ ...value, type });
+  };
+  const handleBackgroundChange = (updates) => {
+    onChange({ ...value, ...updates });
+  };
+  const handleOverlayChange = (overlayUpdates) => {
+    onChange({
+      ...value,
+      overlay: {
+        color: "",
+        blendMode: "normal",
+        opacity: 0,
+        ...value.overlay,
+        ...overlayUpdates
+      }
+    });
+  };
+  const filteredPresets = useMemo(
+    () => patternFilter === "all" ? PATTERN_PRESETS : PATTERN_PRESETS.filter((p) => p.category === patternFilter),
+    [patternFilter]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 max-w-full space-y-3", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": "Background type",
+        className: "grid min-w-0 grid-cols-3 gap-1.5",
+        children: BG_TYPES.map((tab) => {
+          const Icon = tab.icon;
+          const active = value.type === tab.type;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              className: cn(
+                "group flex min-w-0 flex-col items-start gap-1 rounded-xl border px-2 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                active ? "border-primary/50 bg-primary/8 shadow-sm" : "border-border/80 bg-muted/15 text-muted-foreground hover:border-primary/30 hover:bg-muted/40 hover:text-foreground"
+              ),
+              onClick: () => handleTypeChange(tab.type),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex h-6 w-6 items-center justify-center rounded-md border transition-colors",
+                      active ? "border-primary/30 bg-primary/15 text-primary" : "border-border/70 bg-background text-muted-foreground group-hover:text-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "block truncate text-xs font-semibold leading-none",
+                        active ? "text-foreground" : "text-inherit"
+                      ),
+                      children: tab.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-[10px] leading-tight text-muted-foreground", children: tab.description })
+                ] })
+              ]
+            },
+            tab.type
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(BackgroundPreview, { value }),
+    value.type === "color" && /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        title: "Fill colors",
+        description: "Solid section background for light and dark appearance.",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            ColorSelector,
+            {
+              title: "Light mode",
+              value: value.backgroundColor || "",
+              onChange: (color) => handleBackgroundChange({
+                backgroundColor: color
+              }),
+              allowReset: true
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border/50 pt-4", children: /* @__PURE__ */ jsx(
+            ColorSelector,
+            {
+              title: "Dark mode",
+              value: value.backgroundColorDark || "",
+              onChange: (color) => handleBackgroundChange({
+                backgroundColorDark: color
+              }),
+              allowReset: true,
+              description: "Optional override when the page is in dark mode"
+            }
+          ) })
+        ] })
+      }
+    ),
+    value.type === "image" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        FixedBackgroundToggle,
+        {
+          checked: value.backgroundAttachment === "fixed",
+          onChange: (fixed) => handleBackgroundChange({
+            backgroundAttachment: fixed ? "fixed" : "scroll"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          title: "Source",
+          description: "Paste a public image URL to use as the section backdrop.",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "background-image-url", children: "Image URL" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                ImageIcon,
+                {
+                  className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground",
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelInput,
+                {
+                  id: "background-image-url",
+                  value: value.media?.file || "",
+                  onChange: (e) => handleBackgroundChange({
+                    media: e.target.value ? { file: e.target.value } : {}
+                  }),
+                  placeholder: "https://example.com/background.jpg",
+                  className: "pl-9"
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(SectionCard, { title: "Effects", children: /* @__PURE__ */ jsx(
+        PageBuilderSlider,
+        {
+          title: "Blur",
+          min: 0,
+          max: 20,
+          value: value.blur || 0,
+          onChange: (blur) => handleBackgroundChange({ blur: blur || 0 }),
+          unit: "px",
+          tooltip: "Softens the image behind the content"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        CollapsibleCard,
+        {
+          title: "Overlay",
+          description: "Tint the image for contrast with text",
+          children: [
+            /* @__PURE__ */ jsx(
+              ColorSelector,
+              {
+                title: "Overlay color",
+                value: value.overlay?.color || "",
+                onChange: (color) => handleOverlayChange({ color: color || "" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorSelector,
+              {
+                title: "Dark mode overlay",
+                value: value.overlay?.colorDark || "",
+                onChange: (color) => handleOverlayChange({ colorDark: color }),
+                allowReset: true,
+                description: "Optional overlay when dark mode is active"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PageBuilderSlider,
+              {
+                title: "Opacity",
+                min: 0,
+                max: 10,
+                value: value.overlay?.opacity || 0,
+                onChange: (opacity) => handleOverlayChange({
+                  opacity: opacity || 0
+                }),
+                unit: "",
+                tooltip: "0 is invisible, 10 is fully solid"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PanelSelect,
+              {
+                id: "overlay-blend-mode",
+                title: "Blend mode",
+                value: value.overlay?.blendMode || "normal",
+                onChange: (mode) => handleOverlayChange({ blendMode: mode }),
+                options: BLEND_MODES
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        CollapsibleCard,
+        {
+          title: "Advanced",
+          description: "Size, position, repeat, and CSS mask",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "image-background-size",
+                  hint: "e.g. cover, contain, 100%",
+                  children: "Background size"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelInput,
+                {
+                  id: "image-background-size",
+                  value: value.backgroundSize || "",
+                  onChange: (e) => handleBackgroundChange({
+                    backgroundSize: e.target.value
+                  }),
+                  placeholder: "cover"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "image-background-position",
+                  hint: "e.g. center, top left, 50% 50%",
+                  children: "Background position"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelInput,
+                {
+                  id: "image-background-position",
+                  value: value.backgroundPosition || "",
+                  onChange: (e) => handleBackgroundChange({
+                    backgroundPosition: e.target.value
+                  }),
+                  placeholder: "center"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              PanelSelect,
+              {
+                id: "image-background-repeat",
+                title: "Background repeat",
+                value: value.backgroundRepeat || "no-repeat",
+                onChange: (repeat) => handleBackgroundChange({
+                  backgroundRepeat: repeat
+                }),
+                options: BACKGROUND_REPEAT_OPTIONS
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "mask-image",
+                  hint: "CSS mask to fade or crop the image",
+                  trailing: /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
+                      children: [
+                        "Docs",
+                        /* @__PURE__ */ jsx(
+                          ExternalLink,
+                          {
+                            className: "h-3 w-3",
+                            "aria-hidden": true
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  children: "Mask image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelTextarea,
+                {
+                  id: "mask-image",
+                  value: value.maskImage || "",
+                  onChange: (e) => handleBackgroundChange({
+                    maskImage: e.target.value || void 0
+                  }),
+                  placeholder: "linear-gradient(black, transparent)",
+                  rows: 2
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    value.type === "gradient" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        FixedBackgroundToggle,
+        {
+          checked: value.backgroundAttachment === "fixed",
+          onChange: (fixed) => handleBackgroundChange({
+            backgroundAttachment: fixed ? "fixed" : "scroll"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        SectionCard,
+        {
+          title: "Presets",
+          description: "One click fills the CSS fields below \u2014 edit anytime.",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-1.5", children: PATTERN_FILTERS.map((filter) => {
+              const active = patternFilter === filter.id;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "rounded-full px-2.5 py-1 text-[11px] font-semibold transition-colors",
+                    active ? "bg-primary text-primary-foreground shadow-sm" : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ),
+                  onClick: () => setPatternFilter(filter.id),
+                  children: filter.label
+                },
+                filter.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: "grid max-h-52 min-w-0 grid-cols-3 gap-1.5 overflow-x-hidden overflow-y-auto", children: filteredPresets.map((preset) => {
+              const isSelected = value.backgroundImage === preset.apply.backgroundImage;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  title: preset.description ?? preset.label,
+                  "aria-pressed": isSelected,
+                  className: cn(
+                    "group relative flex min-w-0 flex-col overflow-hidden rounded-lg border text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                    isSelected ? "border-primary/55 bg-primary/5 shadow-sm" : "border-border/80 bg-muted/10 hover:border-primary/35 hover:bg-muted/30"
+                  ),
+                  onClick: () => handleBackgroundChange(preset.apply),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "relative h-12 w-full max-w-full bg-background",
+                        style: {
+                          backgroundImage: preset.apply.backgroundImage,
+                          backgroundSize: preset.apply.gradientBackgroundSize,
+                          backgroundRepeat: preset.apply.gradientBackgroundRepeat,
+                          backgroundPosition: preset.apply.gradientBackgroundPosition,
+                          WebkitMaskImage: preset.apply.gradientMaskImage,
+                          maskImage: preset.apply.gradientMaskImage
+                        },
+                        "aria-hidden": true,
+                        children: isSelected ? /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm", children: /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: "h-2.5 w-2.5",
+                            "aria-hidden": true
+                          }
+                        ) }) : null
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate border-t border-border/60 px-1 py-1 text-[10px] font-semibold leading-tight text-foreground", children: preset.label })
+                  ]
+                },
+                preset.id
+              );
+            }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          title: "Custom CSS",
+          description: "Override or hand-author background-image values.",
+          children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "gradient-css",
+                  hint: "CSS background-image \u2014 gradients, SVG data URIs, etc.",
+                  children: "Light mode"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelTextarea,
+                {
+                  id: "gradient-css",
+                  value: value.backgroundImage || "",
+                  onChange: (e) => handleBackgroundChange({
+                    backgroundImage: e.target.value
+                  }),
+                  placeholder: "linear-gradient(45deg, #ff0000, #0000ff)",
+                  rows: 3
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "gradient-css-dark",
+                  hint: "Optional dark appearance override",
+                  children: "Dark mode"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelTextarea,
+                {
+                  id: "gradient-css-dark",
+                  value: value.backgroundImageDark || "",
+                  onChange: (e) => handleBackgroundChange({
+                    backgroundImageDark: e.target.value || void 0
+                  }),
+                  placeholder: "linear-gradient(45deg, #333333, #666666)",
+                  rows: 3
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        CollapsibleCard,
+        {
+          title: "Advanced",
+          description: "Tile size, position, repeat, and mask",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "gradient-background-size",
+                  hint: "e.g. 24px 24px, cover, 100% 100%",
+                  children: "Background size"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelInput,
+                {
+                  id: "gradient-background-size",
+                  value: value.gradientBackgroundSize || "",
+                  onChange: (e) => handleBackgroundChange({
+                    gradientBackgroundSize: e.target.value
+                  }),
+                  placeholder: "cover"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "gradient-background-position",
+                  hint: "e.g. center, 0 0, top left",
+                  children: "Background position"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelInput,
+                {
+                  id: "gradient-background-position",
+                  value: value.gradientBackgroundPosition || "",
+                  onChange: (e) => handleBackgroundChange({
+                    gradientBackgroundPosition: e.target.value
+                  }),
+                  placeholder: "center"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              PanelSelect,
+              {
+                id: "gradient-background-repeat",
+                title: "Background repeat",
+                value: value.gradientBackgroundRepeat || "no-repeat",
+                onChange: (repeat) => handleBackgroundChange({
+                  gradientBackgroundRepeat: repeat
+                }),
+                options: BACKGROUND_REPEAT_OPTIONS
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  htmlFor: "gradient-mask-image",
+                  hint: "CSS mask to fade edges or vignette",
+                  trailing: /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: "https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
+                      children: [
+                        "Docs",
+                        /* @__PURE__ */ jsx(
+                          ExternalLink,
+                          {
+                            className: "h-3 w-3",
+                            "aria-hidden": true
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  children: "Mask image"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PanelTextarea,
+                {
+                  id: "gradient-mask-image",
+                  value: value.gradientMaskImage || "",
+                  onChange: (e) => handleBackgroundChange({
+                    gradientMaskImage: e.target.value || void 0
+                  }),
+                  placeholder: "linear-gradient(black, transparent)",
+                  rows: 2
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 rounded-xl border border-border/60 bg-muted/25 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-[11px] leading-relaxed text-muted-foreground", children: [
+          "Need more inspiration? Browse",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://patterncraft.fun",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground",
+              children: "PatternCraft"
+            }
+          ),
+          " ",
+          "or",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://magicpattern.design/",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground",
+              children: "MagicPattern"
+            }
+          ),
+          " ",
+          "and paste the CSS into Custom CSS."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function DesignFieldGroup({
+  settings,
+  theme,
+  update
+}) {
+  return /* @__PURE__ */ jsxs(FieldGroup, { title: "Section styling", children: [
+    /* @__PURE__ */ jsx(
+      MaxWidthSelector,
+      {
+        value: settings.maxWidth,
+        themeDefault: theme?.structure?.page?.width,
+        onChange: (maxWidth) => update({ maxWidth })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VerticalPaddingSelector,
+      {
+        value: settings.verticalPadding,
+        themeDefault: theme?.structure?.section?.padding?.y,
+        onChange: (verticalPadding) => update({ verticalPadding })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-0.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground", children: "Background" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-relaxed text-muted-foreground", children: "Color, image, or pattern for this section surface." })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SectionBackgroundPanel,
+        {
+          value: settings.background,
+          onChange: (background) => update({ background })
+        }
+      )
+    ] })
+  ] });
+}
+var TABS = [
+  { key: "data", label: "Data" },
+  { key: "design", label: "Design" }
+];
+function BlockSettings({
+  instance,
+  definition,
+  theme,
+  onChange
+}) {
+  const [tab, setTab] = useState("data");
+  const Editor = definition.editor;
+  const settings = instance.settings ?? {};
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": "Block settings sections",
+        className: "grid min-w-0 grid-cols-2 border-b border-border/80",
+        children: TABS.map(({ key, label }) => {
+          const Icon = key === "data" ? FilePenLine : Brush;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": tab === key,
+              className: cn(
+                "relative inline-flex h-11 min-w-0 items-center justify-center gap-2 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                tab === key ? "text-foreground after:absolute after:inset-x-3 after:-bottom-px after:h-0.5 after:rounded-full after:bg-primary" : "text-muted-foreground hover:text-foreground"
+              ),
+              onClick: () => setTab(key),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+                label
+              ]
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "pt-5", children: tab === "data" && Editor && /* @__PURE__ */ jsx(
+      Editor,
+      {
+        settings,
+        theme,
+        onChange
+      }
+    ) }),
+    tab === "design" && /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full space-y-5 pt-5", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Refine the look" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: "Adjust layout and surface styles for this block." })
+      ] }),
+      definition.layouts && definition.layouts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-sm", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Layout" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Choose how this block is arranged." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-2.5",
+            style: {
+              gridTemplateColumns: "repeat(auto-fill, minmax(112px, 1fr))"
+            },
+            children: definition.layouts.map((layout, index) => {
+              const active = settings.layout === layout.id || settings.layout == null && index === 0;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": active,
+                  className: cn(
+                    "group relative flex min-h-16 items-center justify-between gap-2 rounded-xl border px-3 py-2.5 text-left text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    active ? "border-primary/60 bg-primary/8 text-foreground shadow-sm" : "border-border bg-muted/20 text-muted-foreground hover:border-primary/35 hover:bg-muted/60 hover:text-foreground"
+                  ),
+                  onClick: () => onChange({
+                    ...settings,
+                    layout: layout.id
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: layout.name }),
+                    active && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: "h-3 w-3",
+                        "aria-hidden": "true"
+                      }
+                    ) })
+                  ]
+                },
+                layout.id
+              );
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        DesignFieldGroup,
+        {
+          settings,
+          theme: theme.theme,
+          update: (partial) => onChange({ ...settings, ...partial })
+        }
+      )
+    ] })
+  ] });
+}
+function CardButton({
+  label,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      disabled,
+      className: cn(
+        "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors",
+        disabled ? "cursor-not-allowed opacity-60" : "hover:bg-muted"
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      children
+    }
+  );
+}
+function ThemeCard({
+  name,
+  palette,
+  selected = false,
+  active = false,
+  onPreview,
+  onUse,
+  onEdit,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": selected,
+      "aria-label": `Preview ${name}`,
+      className: cn(
+        "flex w-full cursor-pointer flex-col gap-2 rounded-lg bg-background p-2 text-left transition-colors",
+        selected ? "border-2 border-primary shadow-md" : "border border-muted shadow-none hover:bg-muted",
+        className
+      ),
+      onClick: onPreview,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onPreview?.();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: name }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            onEdit && /* @__PURE__ */ jsx(CardButton, { label: `Edit ${name}`, onClick: onEdit, children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) }),
+            onUse && /* @__PURE__ */ jsx(
+              CardButton,
+              {
+                label: `Use ${name}`,
+                disabled: active,
+                onClick: onUse,
+                children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: palette.map((color, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-4 w-4 rounded-full border",
+            style: { backgroundColor: color }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function PanelLabel({
+  htmlFor,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor,
+      className: "text-xs font-medium text-foreground",
+      children
+    }
+  );
+}
+function PanelInput2(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      className: cn(
+        "h-8 w-full rounded-md border border-input bg-background px-2 text-xs text-foreground outline-none focus:ring-2 focus:ring-ring",
+        className
+      )
+    }
+  );
+}
+function PanelSelect2({
+  title,
+  value,
+  onChange,
+  options,
+  placeholder = "Select\u2026"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx(PanelLabel, { children: title }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs text-foreground outline-none focus:ring-2 focus:ring-ring",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        children: [
+          !value && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    )
+  ] });
+}
+function AccordionSection({
+  title,
+  children,
+  defaultOpen = false
+}) {
+  return /* @__PURE__ */ jsxs("details", { className: "group rounded-md border", open: defaultOpen, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer select-none items-center justify-between rounded-t-md px-2 py-3 text-xs font-semibold transition-colors hover:bg-muted group-open:border-b [&::-webkit-details-marker]:hidden", children: [
+      title,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground transition-transform group-open:rotate-180" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-2 pb-4 pt-2", children })
+  ] });
+}
+
+// src/builder/theme-editor/tailwind-to-human-readable.ts
+var paddingOptions = {
+  x: [
+    { label: "None", value: "px-0" },
+    { label: "Extra Small", value: "px-4" },
+    { label: "Small", value: "px-6" },
+    { label: "Medium", value: "px-8" },
+    { label: "Large", value: "px-10" },
+    { label: "Extra Large", value: "px-12" },
+    { label: "2X Large", value: "px-16" },
+    { label: "3X Large", value: "px-20" },
+    { label: "4X Large", value: "px-24" },
+    { label: "5X Large", value: "px-32" },
+    { label: "6X Large", value: "px-40" },
+    { label: "7X Large", value: "px-48" },
+    { label: "8X Large", value: "px-56" },
+    { label: "9X Large", value: "px-64" }
+  ],
+  y: [
+    { label: "None", value: "py-0" },
+    { label: "Extra Small", value: "py-4" },
+    { label: "Small", value: "py-6" },
+    { label: "Medium", value: "py-8" },
+    { label: "Large", value: "py-10" },
+    { label: "Extra Large", value: "py-12" },
+    { label: "2X Large", value: "py-16" },
+    { label: "3X Large", value: "py-20" },
+    { label: "4X Large", value: "py-24" },
+    { label: "5X Large", value: "py-32" },
+    { label: "6X Large", value: "py-40" },
+    { label: "7X Large", value: "py-48" },
+    { label: "8X Large", value: "py-56" },
+    { label: "9X Large", value: "py-64" }
+  ]
+};
+var borderWidthOptions = [
+  { label: "None", value: "border-0" },
+  { label: "Light", value: "border" },
+  { label: "Medium", value: "border-2" },
+  { label: "Heavy", value: "border-4" },
+  { label: "Extra Heavy", value: "border-8" }
+];
+var borderStyleOptions = [
+  { label: "None", value: "border-none" },
+  { label: "Solid", value: "border-solid" },
+  { label: "Dashed", value: "border-dashed" },
+  { label: "Dotted", value: "border-dotted" },
+  { label: "Double", value: "border-double" },
+  { label: "Hidden", value: "border-hidden" }
+];
+var borderRadiusOptions = [
+  { label: "None", value: "rounded-none" },
+  { label: "Small", value: "rounded-sm" },
+  { label: "Default", value: "rounded" },
+  { label: "Medium", value: "rounded-md" },
+  { label: "Large", value: "rounded-lg" },
+  { label: "Extra Large", value: "rounded-xl" },
+  { label: "2X Large", value: "rounded-2xl" },
+  { label: "3X Large", value: "rounded-3xl" },
+  { label: "Full", value: "rounded-full" }
+];
+var shadowOptions = [
+  { label: "None", value: "shadow-none" },
+  { label: "Extra Small", value: "shadow-2xs" },
+  { label: "Small", value: "shadow-xs" },
+  { label: "Default", value: "shadow-sm" },
+  { label: "Medium", value: "shadow-md" },
+  { label: "Large", value: "shadow-lg" },
+  { label: "Extra Large", value: "shadow-xl" },
+  { label: "2X Large", value: "shadow-2xl" }
+];
+var fontSizeOptions = [
+  { label: "Extra Small", value: "text-xs" },
+  { label: "Small", value: "text-sm" },
+  { label: "Base", value: "text-base" },
+  { label: "Large", value: "text-lg" },
+  { label: "Extra Large", value: "text-xl" },
+  { label: "2X Large", value: "text-2xl" },
+  { label: "3X Large", value: "text-3xl" },
+  { label: "4X Large", value: "text-4xl" },
+  { label: "5X Large", value: "text-5xl" },
+  { label: "6X Large", value: "text-6xl" },
+  { label: "7X Large", value: "text-7xl" },
+  { label: "8X Large", value: "text-8xl" },
+  { label: "9X Large", value: "text-9xl" }
+];
+var fontWeightOptions = [
+  { label: "Thin", value: "font-thin" },
+  { label: "Extra Light", value: "font-extralight" },
+  { label: "Light", value: "font-light" },
+  { label: "Normal", value: "font-normal" },
+  { label: "Medium", value: "font-medium" },
+  { label: "Semi Bold", value: "font-semibold" },
+  { label: "Bold", value: "font-bold" },
+  { label: "Extra Bold", value: "font-extrabold" },
+  { label: "Black", value: "font-black" }
+];
+var lineHeightOptions = [
+  { label: "None", value: "leading-none" },
+  { label: "Tight", value: "leading-tight" },
+  { label: "Snug", value: "leading-snug" },
+  { label: "Normal", value: "leading-normal" },
+  { label: "Relaxed", value: "leading-relaxed" },
+  { label: "Loose", value: "leading-loose" }
+];
+var letterSpacingOptions = [
+  { label: "Tighter", value: "tracking-tighter" },
+  { label: "Tight", value: "tracking-tight" },
+  { label: "Normal", value: "tracking-normal" },
+  { label: "Wide", value: "tracking-wide" },
+  { label: "Wider", value: "tracking-wider" },
+  { label: "Widest", value: "tracking-widest" }
+];
+var textTransformOptions = [
+  { label: "None", value: "normal-case" },
+  { label: "Uppercase", value: "uppercase" },
+  { label: "Lowercase", value: "lowercase" },
+  { label: "Capitalize", value: "capitalize" }
+];
+var fontFamilyOptions = {
+  Sans: [
+    { label: "Inter", value: "font-inter" },
+    { label: "Open Sans", value: "font-open-sans" },
+    { label: "Source Sans 3", value: "font-source-sans-3" },
+    { label: "Noto Sans", value: "font-noto-sans" },
+    { label: "Roboto", value: "font-roboto" },
+    { label: "Mulish", value: "font-mulish" },
+    { label: "Nunito", value: "font-nunito" },
+    { label: "Work Sans", value: "font-work-sans" }
+  ],
+  Serif: [
+    { label: "Merriweather", value: "font-merriweather" },
+    { label: "Alegreya", value: "font-alegreya" },
+    { label: "Playfair Display", value: "font-playfair-display" },
+    { label: "Roboto Slab", value: "font-roboto-slab" },
+    { label: "Source Serif 4", value: "font-source-serif-4" }
+  ],
+  Display: [
+    { label: "Montserrat", value: "font-montserrat" },
+    { label: "Poppins", value: "font-poppins" },
+    { label: "Raleway", value: "font-raleway" },
+    { label: "Rubik", value: "font-rubik" },
+    { label: "Oswald", value: "font-oswald" },
+    { label: "Bebas Neue", value: "font-bebas-neue" }
+  ],
+  Modern: [
+    { label: "Lato", value: "font-lato" },
+    { label: "PT Sans", value: "font-pt-sans" },
+    { label: "Quicksand", value: "font-quicksand" }
+  ]
+};
+function TypographySelector({
+  value,
+  onChange
+}) {
+  const update = (patch) => onChange({ ...value, ...patch });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-[100px] overflow-auto rounded-lg border p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ jsx(PanelLabel, { children: "Preview" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            value?.fontFamily || "",
+            value?.fontSize || "",
+            value?.fontWeight || "",
+            value?.lineHeight || "",
+            value?.letterSpacing || "",
+            value?.textTransform || "normal-case"
+          ),
+          children: "The quick brown fox jumps over the lazy dog"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(PanelLabel, { children: "Font Family" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs text-foreground outline-none focus:ring-2 focus:ring-ring",
+            value: value?.fontFamily || "",
+            onChange: (e) => update({ fontFamily: e.target.value }),
+            children: [
+              !value?.fontFamily && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select font family" }),
+              Object.entries(fontFamilyOptions).map(
+                ([category, fonts]) => /* @__PURE__ */ jsx("optgroup", { label: category, children: fonts.map((font) => /* @__PURE__ */ jsx(
+                  "option",
+                  {
+                    value: font.value,
+                    children: font.label
+                  },
+                  font.value
+                )) }, category)
+              )
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsx(
+          PanelSelect2,
+          {
+            title: "Font Size",
+            value: value?.fontSize || "",
+            onChange: (v) => update({ fontSize: v }),
+            options: fontSizeOptions,
+            placeholder: "Select size"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelSelect2,
+          {
+            title: "Font Weight",
+            value: value?.fontWeight || "",
+            onChange: (v) => update({
+              fontWeight: v
+            }),
+            options: fontWeightOptions,
+            placeholder: "Select weight"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsx(
+          PanelSelect2,
+          {
+            title: "Line Height",
+            value: value?.lineHeight || "",
+            onChange: (v) => update({
+              lineHeight: v
+            }),
+            options: lineHeightOptions,
+            placeholder: "Select line height"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelSelect2,
+          {
+            title: "Letter Spacing",
+            value: value?.letterSpacing || "",
+            onChange: (v) => update({
+              letterSpacing: v
+            }),
+            options: letterSpacingOptions,
+            placeholder: "Select spacing"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsx(
+        PanelSelect2,
+        {
+          title: "Text Transform",
+          value: value?.textTransform || "normal-case",
+          onChange: (v) => update({
+            textTransform: v
+          }),
+          options: textTransformOptions,
+          placeholder: "Select transform"
+        }
+      ) })
+    ] })
+  ] });
+}
+var interactiveDisplayNames = {
+  button: "Button",
+  link: "Link",
+  card: "Card",
+  input: "Input"
+};
+function InteractiveSelector({
+  type,
+  theme,
+  onChange
+}) {
+  const value = theme.interactives[type];
+  const updateInteractive = (patch) => {
+    onChange({
+      ...theme,
+      interactives: {
+        ...theme.interactives,
+        [type]: {
+          ...value,
+          ...patch
+        }
+      }
+    });
+  };
+  const renderDemo = () => {
+    switch (type) {
+      case "button":
+        return /* @__PURE__ */ jsx(Button2, { theme, children: "Preview" });
+      case "link":
+        return /* @__PURE__ */ jsx(Link, { theme, children: "Demo Link" });
+      case "card":
+        return /* @__PURE__ */ jsx(PageCard, { theme, children: /* @__PURE__ */ jsxs(PageCardContent, { theme, children: [
+          /* @__PURE__ */ jsx(PageCardHeader, { theme, children: "Card Title" }),
+          /* @__PURE__ */ jsx("div", { children: "Card content goes here" })
+        ] }) });
+      case "input":
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            theme,
+            type: "text",
+            placeholder: "Demo Input"
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  const renderPaddingConfig = (allowedPaddingX, allowedPaddingY) => {
+    const filteredPaddingX = allowedPaddingX ? paddingOptions.x.filter(
+      (option) => allowedPaddingX.includes(option.value)
+    ) : paddingOptions.x;
+    const filteredPaddingY = allowedPaddingY ? paddingOptions.y.filter(
+      (option) => allowedPaddingY.includes(option.value)
+    ) : paddingOptions.y;
+    return /* @__PURE__ */ jsx(AccordionSection, { title: "Padding", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(
+        PanelSelect2,
+        {
+          title: "Padding X",
+          value: value?.padding?.x || "",
+          onChange: (newValue) => updateInteractive({
+            padding: {
+              ...value?.padding,
+              x: newValue
+            }
+          }),
+          options: filteredPaddingX,
+          placeholder: "Select padding"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PanelSelect2,
+        {
+          title: "Padding Y",
+          value: value?.padding?.y || "",
+          onChange: (newValue) => updateInteractive({
+            padding: {
+              ...value?.padding,
+              y: newValue
+            }
+          }),
+          options: filteredPaddingY,
+          placeholder: "Select padding"
+        }
+      )
+    ] }) });
+  };
+  const renderBorderConfig = () => /* @__PURE__ */ jsx(AccordionSection, { title: "Border", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(
+        PanelSelect2,
+        {
+          title: "Border Radius",
+          value: value?.border?.radius || "",
+          onChange: (newValue) => updateInteractive({
+            border: {
+              ...value?.border,
+              radius: newValue
+            }
+          }),
+          options: borderRadiusOptions,
+          placeholder: "Select radius"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PanelSelect2,
+        {
+          title: "Border Style",
+          value: value?.border?.style || "",
+          onChange: (newValue) => updateInteractive({
+            border: {
+              ...value?.border,
+              style: newValue
+            }
+          }),
+          options: borderStyleOptions,
+          placeholder: "Select style"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsx(
+      PanelSelect2,
+      {
+        title: "Border Width",
+        value: value?.border?.width || "",
+        onChange: (newValue) => updateInteractive({
+          border: {
+            ...value?.border,
+            width: newValue
+          }
+        }),
+        options: borderWidthOptions,
+        placeholder: "Select width"
+      }
+    ) })
+  ] }) });
+  const renderBoxShadowConfig = () => {
+    if (type === "link") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(AccordionSection, { title: "Shadow", children: /* @__PURE__ */ jsx(
+      PanelSelect2,
+      {
+        title: "Shadow",
+        value: value?.shadow || "",
+        onChange: (newValue) => updateInteractive({ shadow: newValue }),
+        options: shadowOptions,
+        placeholder: "Select shadow"
+      }
+    ) });
+  };
+  const renderTextShadowConfig = () => {
+    if (type !== "link") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(AccordionSection, { title: "Text Shadow", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(PanelLabel, { children: "Text Shadow" }),
+      /* @__PURE__ */ jsx(
+        PanelInput2,
+        {
+          value: value?.textShadow || "",
+          placeholder: "0px 0px 0px 0px rgba(0, 0, 0, 0.1)",
+          onChange: (e) => updateInteractive({ textShadow: e.target.value })
+        }
+      )
+    ] }) });
+  };
+  const renderCustomClassesConfig = () => /* @__PURE__ */ jsx(AccordionSection, { title: "Advanced", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(PanelLabel, { children: "Custom classes" }),
+    /* @__PURE__ */ jsx(
+      PanelInput2,
+      {
+        value: value?.custom || "",
+        onChange: (e) => updateInteractive({ custom: e.target.value }),
+        placeholder: "Enter Tailwind classes"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Info, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: "Use any supported Tailwind class here." })
+    ] })
+  ] }) });
+  const renderConfig = () => {
+    switch (type) {
+      case "button":
+      case "input":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderPaddingConfig(
+            ["px-0", "px-4", "px-6", "px-8", "px-10"],
+            ["py-0", "py-4", "py-6", "py-8", "py-10"]
+          ),
+          renderBorderConfig(),
+          renderBoxShadowConfig(),
+          renderCustomClassesConfig()
+        ] });
+      case "link":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderTextShadowConfig(),
+          renderCustomClassesConfig()
+        ] });
+      case "card":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderPaddingConfig([
+            "px-0",
+            "px-4",
+            "px-6",
+            "px-8",
+            "px-10",
+            "px-12",
+            "px-16",
+            "px-20",
+            "px-24",
+            "px-32"
+          ]),
+          renderBorderConfig(),
+          renderBoxShadowConfig(),
+          renderCustomClassesConfig()
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-h-[100px] overflow-auto rounded-lg border p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ jsx(PanelLabel, { children: "Preview" }),
+      renderDemo()
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderConfig() })
+  ] });
+}
+var structureDisplayNames = {
+  page: "Page",
+  section: "Section"
+};
+function StructureSelector({
+  type,
+  theme,
+  onChange
+}) {
+  if (type === "page") {
+    const pageValue = theme.structure.page;
+    return /* @__PURE__ */ jsx("div", { className: "space-y-6 p-2", children: /* @__PURE__ */ jsx(
+      MaxWidthSelector,
+      {
+        value: pageValue?.width,
+        onChange: (width) => {
+          if (!width) return;
+          onChange({
+            ...theme,
+            structure: {
+              ...theme.structure,
+              page: { width }
+            }
+          });
+        }
+      }
+    ) });
+  }
+  const sectionValue = theme.structure.section;
+  const updatePadding = (patch) => {
+    onChange({
+      ...theme,
+      structure: {
+        ...theme.structure,
+        section: {
+          ...sectionValue,
+          padding: {
+            ...sectionValue?.padding,
+            ...patch
+          }
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-2", children: [
+    /* @__PURE__ */ jsx(
+      PanelSelect2,
+      {
+        title: "Horizontal Padding",
+        value: sectionValue?.padding?.x || "",
+        onChange: (x) => updatePadding({ x }),
+        options: paddingOptions.x,
+        placeholder: "Select padding"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VerticalPaddingSelector,
+      {
+        value: sectionValue?.padding?.y,
+        onChange: (y) => {
+          if (!y) return;
+          updatePadding({ y });
+        }
+      }
+    )
+  ] });
+}
+var sections = [
+  {
+    id: "colors",
+    label: "Colors",
+    icon: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" })
+  },
+  {
+    id: "typography",
+    label: "Typography",
+    icon: /* @__PURE__ */ jsx(Type, { className: "h-4 w-4" })
+  },
+  {
+    id: "interactives",
+    label: "Interactives",
+    icon: /* @__PURE__ */ jsx(SquareMousePointer, { className: "h-4 w-4" })
+  },
+  {
+    id: "structure",
+    label: "Structure",
+    icon: /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4" })
+  }
+];
+var typographyDisplayNames = {
+  header1: "Header 1",
+  header2: "Header 2",
+  header3: "Header 3",
+  header4: "Header 4",
+  preheader: "Preheader",
+  subheader1: "Subheader 1",
+  subheader2: "Subheader 2",
+  text1: "Text 1",
+  text2: "Text 2",
+  caption: "Caption",
+  link: "Link",
+  button: "Button Text",
+  input: "Input Text"
+};
+var typographyCategories = [
+  {
+    name: "Headers",
+    items: ["header1", "header2", "header3", "header4", "preheader"]
+  },
+  {
+    name: "Subheaders",
+    items: ["subheader1", "subheader2"]
+  },
+  {
+    name: "Body Text",
+    items: ["text1", "text2", "caption"]
+  },
+  {
+    name: "Interactive Elements",
+    items: ["link", "button", "input"]
+  }
+];
+var colorCategories = [
+  {
+    key: "primary",
+    label: "Primary Colors",
+    colors: [
+      { name: "primary", displayName: "Primary" },
+      { name: "primaryForeground", displayName: "Primary Foreground" }
+    ]
+  },
+  {
+    key: "secondary",
+    label: "Secondary Colors",
+    colors: [
+      { name: "secondary", displayName: "Secondary" },
+      {
+        name: "secondaryForeground",
+        displayName: "Secondary Foreground"
+      }
+    ]
+  },
+  {
+    key: "accent",
+    label: "Accent Colors",
+    colors: [
+      { name: "accent", displayName: "Accent" },
+      { name: "accentForeground", displayName: "Accent Foreground" }
+    ]
+  },
+  {
+    key: "base",
+    label: "Base Colors",
+    colors: [
+      { name: "background", displayName: "Background" },
+      { name: "foreground", displayName: "Foreground" }
+    ]
+  },
+  {
+    key: "card",
+    label: "Card Colors",
+    colors: [
+      { name: "card", displayName: "Card" },
+      { name: "cardForeground", displayName: "Card Foreground" }
+    ]
+  },
+  {
+    key: "popover",
+    label: "Popover Colors",
+    colors: [
+      { name: "popover", displayName: "Popover" },
+      { name: "popoverForeground", displayName: "Popover Foreground" }
+    ]
+  },
+  {
+    key: "muted",
+    label: "Muted Colors",
+    colors: [
+      { name: "muted", displayName: "Muted" },
+      { name: "mutedForeground", displayName: "Muted Foreground" }
+    ]
+  },
+  {
+    key: "border",
+    label: "Border & Input Colors",
+    colors: [
+      { name: "border", displayName: "Border" },
+      { name: "input", displayName: "Input" },
+      { name: "ring", displayName: "Ring" }
+    ]
+  },
+  {
+    key: "destructive",
+    label: "Destructive Colors",
+    colors: [{ name: "destructive", displayName: "Destructive" }]
+  },
+  {
+    key: "shadows",
+    label: "Shadow Styles",
+    colors: [
+      { name: "shadow2xs", displayName: "Shadow 2XS" },
+      { name: "shadowXs", displayName: "Shadow XS" },
+      { name: "shadowSm", displayName: "Shadow SM" },
+      { name: "shadowMd", displayName: "Shadow MD" },
+      { name: "shadowLg", displayName: "Shadow LG" },
+      { name: "shadowXl", displayName: "Shadow XL" },
+      { name: "shadow2xl", displayName: "Shadow 2XL" }
+    ]
+  }
+];
+var paletteColorOrder = [
+  "primary",
+  "accent",
+  "secondary",
+  "border"
+];
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function copyName(baseName, taken) {
+  const base = `${baseName} - Copy`;
+  if (!taken.includes(base)) return base;
+  let counter = 2;
+  while (taken.includes(`${base} ${counter}`)) counter++;
+  return `${base} ${counter}`;
+}
+function ThemeEditor({
+  theme,
+  appliedThemeId,
+  systemThemes,
+  customThemes,
+  colorMode,
+  onColorModeChange,
+  onPreview,
+  onApply,
+  onCustomThemesChange
+}) {
+  const [navigationStack, setNavigationStack] = useState(
+    []
+  );
+  const [collapsedCategories, setCollapsedCategories] = useState(() => {
+    const initial = {};
+    typographyCategories.forEach((category) => {
+      initial[category.name] = true;
+    });
+    return initial;
+  });
+  const navigateTo = useCallback((item) => {
+    setNavigationStack((prev) => [...prev, item]);
+  }, []);
+  const navigateBack = useCallback(() => {
+    setNavigationStack((prev) => prev.slice(0, -1));
+  }, []);
+  const toggleCategory = useCallback((categoryName) => {
+    setCollapsedCategories((prev) => ({
+      ...prev,
+      [categoryName]: !prev[categoryName]
+    }));
+  }, []);
+  const applyStyle = useCallback(
+    (style) => {
+      const updated = { ...theme, theme: style };
+      onApply(updated);
+      onCustomThemesChange(
+        customThemes.map((t) => t.id === updated.id ? updated : t)
+      );
+    },
+    [theme, customThemes, onApply, onCustomThemesChange]
+  );
+  const startEditing = useCallback(
+    (themeItem, isSystem) => {
+      let target = themeItem;
+      if (isSystem) {
+        const takenNames = [...systemThemes, ...customThemes].map(
+          (t) => t.name
+        );
+        target = {
+          id: generateUniqueId(),
+          name: copyName(themeItem.name, takenNames),
+          theme: JSON.parse(JSON.stringify(themeItem.theme))
+        };
+        onCustomThemesChange([...customThemes, target]);
+      }
+      onApply(target);
+      setNavigationStack([{ id: "categories", label: target.name }]);
+    },
+    [systemThemes, customThemes, onApply, onCustomThemesChange]
+  );
+  const renderDrillButton = (label, onClick) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: "group flex w-full items-center justify-between rounded-md px-3 py-2 text-xs transition-colors hover:bg-muted",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "transition-colors group-hover:text-foreground", children: label }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" })
+      ]
+    },
+    label
+  );
+  const renderThemeCard = (themeItem, isSystem) => /* @__PURE__ */ jsx(
+    ThemeCard,
+    {
+      name: themeItem.name,
+      palette: paletteColorOrder.map((key) => themeItem.theme.colors.light[key]).filter(Boolean),
+      selected: themeItem.id === theme.id,
+      active: themeItem.id === appliedThemeId,
+      onPreview: () => onPreview(themeItem),
+      onUse: () => onApply(themeItem),
+      onEdit: () => startEditing(themeItem, isSystem)
+    },
+    themeItem.id
+  );
+  const renderRootView = () => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: "System Themes" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: systemThemes.map(
+      (themeItem) => renderThemeCard(themeItem, true)
+    ) }),
+    /* @__PURE__ */ jsx("hr", { className: "my-4 border-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: "Custom Themes" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: customThemes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No custom themes yet" }) : customThemes.map(
+      (themeItem) => renderThemeCard(themeItem, false)
+    ) })
+  ] });
+  const renderCategoriesView = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.map((section) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => navigateTo({
+        id: section.id,
+        label: section.label
+      }),
+      className: "group flex w-full items-center justify-between rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground transition-colors group-hover:text-foreground", children: section.icon }),
+          /* @__PURE__ */ jsx("span", { className: "transition-colors group-hover:text-foreground", children: section.label })
+        ] }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" })
+      ]
+    },
+    section.id
+  )) });
+  const renderColorsView = () => {
+    const colors = theme.theme.colors[colorMode];
+    const updateColor = (name, value) => {
+      applyStyle({
+        ...theme.theme,
+        colors: {
+          ...theme.theme.colors,
+          [colorMode]: {
+            ...theme.theme.colors[colorMode],
+            [name]: value
+          }
+        }
+      });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tablist",
+          className: "grid w-full grid-cols-2 rounded-md border border-input bg-muted p-0.5",
+          children: ["light", "dark"].map((mode) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": colorMode === mode,
+              className: cn(
+                "rounded-sm px-2 py-1 text-xs font-medium transition-colors",
+                colorMode === mode ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              ),
+              onClick: () => onColorModeChange(mode),
+              children: capitalize(mode)
+            },
+            mode
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: colorCategories.map((category) => /* @__PURE__ */ jsx(
+        AccordionSection,
+        {
+          title: category.label,
+          children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: category.colors.map(
+            (color) => category.key === "shadows" ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "space-y-1.5",
+                children: [
+                  /* @__PURE__ */ jsx(PanelLabel, { children: color.displayName }),
+                  /* @__PURE__ */ jsx(
+                    PanelInput2,
+                    {
+                      value: colors[color.name],
+                      onChange: (e) => updateColor(
+                        color.name,
+                        e.target.value
+                      )
+                    }
+                  )
+                ]
+              },
+              color.name
+            ) : /* @__PURE__ */ jsx(
+              ColorSelector,
+              {
+                title: color.displayName,
+                value: colors[color.name],
+                onChange: (value) => updateColor(
+                  color.name,
+                  value ?? ""
+                ),
+                allowReset: false
+              },
+              color.name
+            )
+          ) })
+        },
+        category.key
+      )) })
+    ] });
+  };
+  const renderTypographyList = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: typographyCategories.map((category) => /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center rounded px-2 py-1.5 text-sm transition-colors hover:bg-muted",
+        onClick: () => toggleCategory(category.name),
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "mr-2 h-4 w-4 transition-transform",
+                collapsedCategories[category.name] ? "rotate-[-90deg]" : "rotate-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: category.name })
+        ]
+      }
+    ),
+    !collapsedCategories[category.name] && /* @__PURE__ */ jsx("div", { children: category.items.map(
+      (typography) => renderDrillButton(
+        typographyDisplayNames[typography] || capitalize(typography),
+        () => navigateTo({
+          id: typography,
+          label: typographyDisplayNames[typography] || capitalize(typography)
+        })
+      )
+    ) })
+  ] }, category.name)) });
+  const renderInteractivesList = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.keys(interactiveDisplayNames).map(
+    (interactive) => renderDrillButton(
+      interactiveDisplayNames[interactive] || capitalize(interactive),
+      () => navigateTo({
+        id: interactive,
+        label: interactiveDisplayNames[interactive] || capitalize(interactive)
+      })
+    )
+  ) });
+  const renderStructureList = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.keys(structureDisplayNames).map(
+    (structure) => renderDrillButton(
+      structureDisplayNames[structure] || capitalize(structure),
+      () => navigateTo({
+        id: structure,
+        label: structureDisplayNames[structure] || capitalize(structure)
+      })
+    )
+  ) });
+  const getCurrentView = () => {
+    const currentItem = navigationStack[navigationStack.length - 1];
+    const parentItem = navigationStack[navigationStack.length - 2];
+    if (!currentItem) {
+      return renderRootView();
+    }
+    if (parentItem?.id === "typography" && currentItem.id in theme.theme.typography) {
+      const key = currentItem.id;
+      return /* @__PURE__ */ jsx(
+        TypographySelector,
+        {
+          value: theme.theme.typography[key],
+          onChange: (value) => applyStyle({
+            ...theme.theme,
+            typography: {
+              ...theme.theme.typography,
+              [key]: value
+            }
+          })
+        }
+      );
+    }
+    if (parentItem?.id === "interactives" && currentItem.id in theme.theme.interactives) {
+      return /* @__PURE__ */ jsx(
+        InteractiveSelector,
+        {
+          type: currentItem.id,
+          theme: theme.theme,
+          onChange: applyStyle
+        }
+      );
+    }
+    if (parentItem?.id === "structure" && currentItem.id in theme.theme.structure) {
+      return /* @__PURE__ */ jsx(
+        StructureSelector,
+        {
+          type: currentItem.id,
+          theme: theme.theme,
+          onChange: applyStyle
+        }
+      );
+    }
+    switch (currentItem.id) {
+      case "categories":
+        return renderCategoriesView();
+      case "colors":
+        return renderColorsView();
+      case "typography":
+        return renderTypographyList();
+      case "interactives":
+        return renderInteractivesList();
+      case "structure":
+        return renderStructureList();
+      default:
+        return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Coming soon" });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    navigationStack.length === 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: getCurrentView() }),
+    navigationStack.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: navigateBack,
+            className: "flex items-center rounded-md p-1 transition-colors hover:bg-muted focus:outline-none",
+            "aria-label": "Back",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: navigationStack[navigationStack.length - 1].label })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "py-2", children: getCurrentView() })
+    ] })
+  ] });
+}
+function SeoEditor({
+  seo,
+  onChange
+}) {
+  const update = (next) => onChange({ ...seo, ...next });
+  const imageUrl = seo.socialImage?.file;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs(FieldGroup, { title: "Search results", children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Title",
+          value: seo.title,
+          placeholder: "Page title",
+          onChange: (title) => update({ title })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Description",
+          multiline: true,
+          value: seo.description,
+          placeholder: "A short summary of this page",
+          onChange: (description) => update({ description })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToggleField,
+        {
+          label: "Search engine visibility",
+          value: seo.robotsAllowed ?? true,
+          onChange: (robotsAllowed) => update({ robotsAllowed })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FieldGroup, { title: "Social card image", children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Image URL",
+          value: imageUrl,
+          placeholder: "https://...",
+          onChange: (file) => update({
+            socialImage: file ? { mediaId: file, file } : void 0
+          })
+        }
+      ),
+      imageUrl && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: "Social card preview",
+          className: "aspect-[1200/630] w-full rounded-md border border-border object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Shown when the page is shared on social networks. Recommended size 1200\xD7630." })
+    ] })
+  ] });
+}
+function PageBuilder({
+  initialLayout,
+  initialTheme,
+  initialSeo,
+  themes: providedThemes,
+  pageData,
+  onChange,
+  allowThemeEditing = true,
+  linkComponent,
+  className
+}) {
+  const [layout, setLayout] = useState(
+    () => initialLayout ? ensureRequiredSharedWidgets(initialLayout) : createDefaultLayout()
+  );
+  const [theme, setTheme] = useState(
+    () => initialTheme ?? getDefaultTheme()
+  );
+  const [previewTheme, setPreviewTheme] = useState(null);
+  const paintedTheme = previewTheme ?? theme;
+  const [seo, setSeo] = useState(
+    () => initialSeo ?? { robotsAllowed: true }
+  );
+  const systemThemes = providedThemes?.system ?? themes;
+  const [customThemes, setCustomThemes] = useState(
+    () => providedThemes?.custom ?? []
+  );
+  const [mode, setMode] = useState("system");
+  const [systemPrefersDark, setSystemPrefersDark] = useState(false);
+  const [device, setDevice] = useState("desktop");
+  const [panel, setPanel] = useState(null);
+  const [insertAfter, setInsertAfter] = useState(null);
+  const [movedWidgetId, setMovedWidgetId] = useState(null);
+  const movedTimeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (movedTimeoutRef.current) clearTimeout(movedTimeoutRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setSystemPrefersDark(media.matches);
+    apply();
+    media.addEventListener("change", apply);
+    return () => media.removeEventListener("change", apply);
+  }, []);
+  const resolvedMode = resolveColorMode(mode, systemPrefersDark);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const emitChange = useMemo(
+    () => debounce(
+      (state) => onChangeRef.current?.(state),
+      500
+    ),
+    []
+  );
+  useEffect(() => {
+    emitChange({ layout, theme, seo, customThemes });
+  }, [layout, theme, seo, customThemes]);
+  const addableBlocks = useMemo(() => getAddableBlocks(), []);
+  function updateWidgetSettings(widgetId, settings) {
+    setLayout(
+      (prev) => prev.map(
+        (widget) => widget.widgetId === widgetId ? { ...widget, settings } : widget
+      )
+    );
+  }
+  function moveWidget(widgetId, direction) {
+    const index = layout.findIndex((w) => w.widgetId === widgetId);
+    if (index === -1 || ["header", "footer"].includes(layout[index].name) || !layout[index].moveable) {
+      return;
+    }
+    const targetIndex = index + direction;
+    if (targetIndex < 0 || targetIndex >= layout.length || ["header", "footer"].includes(layout[targetIndex].name)) {
+      return;
+    }
+    setLayout((prev) => {
+      const next = prev.slice();
+      [next[index], next[targetIndex]] = [next[targetIndex], next[index]];
+      return next;
+    });
+    if (movedTimeoutRef.current) clearTimeout(movedTimeoutRef.current);
+    setMovedWidgetId(widgetId);
+    movedTimeoutRef.current = setTimeout(
+      () => setMovedWidgetId(null),
+      1500
+    );
+  }
+  function deleteWidget(widgetId) {
+    setLayout((prev) => {
+      const widget = prev.find((item) => item.widgetId === widgetId);
+      if (!widget || !widget.deletable || ["header", "footer"].includes(widget.name)) {
+        return prev;
+      }
+      return prev.filter((item) => item.widgetId !== widgetId);
+    });
+    setPanel(
+      (current) => current?.mode === "block" && current.widgetId === widgetId ? null : current
+    );
+  }
+  function addWidget(name) {
+    const instance = createWidgetInstance(name);
+    setLayout((prev) => {
+      if (insertAfter === "end" || insertAfter === null) {
+        const footerIndex = prev.findIndex((w) => w.name === "footer");
+        if (footerIndex === -1) return [...prev, instance];
+        return [
+          ...prev.slice(0, footerIndex),
+          instance,
+          ...prev.slice(footerIndex)
+        ];
+      }
+      const afterIndex = prev.findIndex(
+        (w) => w.widgetId === insertAfter
+      );
+      if (afterIndex === -1) return [...prev, instance];
+      return [
+        ...prev.slice(0, afterIndex + 1),
+        instance,
+        ...prev.slice(afterIndex + 1)
+      ];
+    });
+    setInsertAfter(null);
+    setPanel({ mode: "block", widgetId: instance.widgetId });
+  }
+  const selectedWidgetId = panel?.mode === "block" ? panel.widgetId : null;
+  const selectedInstance = layout.find(
+    (w) => w.widgetId === selectedWidgetId
+  );
+  const selectedDefinition = selectedInstance ? getWidget(selectedInstance.name) : void 0;
+  const showBlockPanel = Boolean(
+    panel?.mode === "block" && selectedInstance && selectedDefinition?.editor
+  );
+  const showThemePanel = allowThemeEditing && panel?.mode === "theme";
+  const showSeoPanel = panel?.mode === "seo";
+  const panelOpen = showBlockPanel || showThemePanel || showSeoPanel;
+  function closePanel() {
+    setPreviewTheme(null);
+    setPanel(null);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Same token scope as PageRenderer. Builder chrome (top bar,
+        // add-block overlay, device-frame pattern) lives outside the
+        // canvas but still uses bg-background / --muted-foreground.
+        "pb-theme flex h-full w-full flex-col overflow-hidden bg-background text-foreground",
+        resolvedMode === "dark" && "dark",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          BuilderTopBar,
+          {
+            resolvedMode,
+            onModeChange: setMode,
+            device,
+            onDeviceChange: setDevice,
+            onOpenTheme: () => setPanel({ mode: "theme" }),
+            onOpenSeo: () => setPanel({ mode: "seo" }),
+            onAddBlock: () => setInsertAfter("end"),
+            allowThemeEditing
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full min-w-0 flex-1 gap-4 overflow-hidden bg-muted/10 p-4", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex min-h-0 min-w-0 justify-center overflow-hidden rounded-xl border bg-background/98 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/80",
+                panelOpen ? "flex-1" : "w-full"
+              ),
+              style: {
+                backgroundImage: "radial-gradient(color-mix(in srgb, var(--muted-foreground) 25%, transparent) 1px, transparent 1px)",
+                backgroundSize: "14px 14px"
+              },
+              children: /* @__PURE__ */ jsx(
+                PreviewFrame,
+                {
+                  className: cn(
+                    "h-full w-full max-w-full transition-[max-width] duration-300",
+                    device === "mobile" && "max-w-[390px] border-x",
+                    device === "tablet" && "max-w-[768px] border-x"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    PageRenderer,
+                    {
+                      layout,
+                      theme: paintedTheme,
+                      pageData,
+                      nextTheme: resolvedMode,
+                      themeMode: mode,
+                      onThemeModeChange: setMode,
+                      editing: true,
+                      selectedWidgetId: selectedWidgetId ?? void 0,
+                      highlightedWidgetId: movedWidgetId ?? void 0,
+                      onSelectWidget: (id) => setPanel({ mode: "block", widgetId: id }),
+                      onMoveWidgetUp: (id) => moveWidget(id, -1),
+                      onMoveWidgetDown: (id) => moveWidget(id, 1),
+                      onDeleteWidget: deleteWidget,
+                      onAddWidgetBelow: (id) => setInsertAfter(id),
+                      linkComponent
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          showBlockPanel && selectedInstance && selectedDefinition?.editor && /* @__PURE__ */ jsx(
+            SettingsPanel,
+            {
+              title: selectedDefinition.metadata.displayName,
+              eyebrow: "Block settings",
+              description: selectedDefinition.metadata.description,
+              icon: LayoutTemplate,
+              onClose: closePanel,
+              children: /* @__PURE__ */ jsx(
+                BlockSettings,
+                {
+                  instance: selectedInstance,
+                  definition: selectedDefinition,
+                  theme,
+                  onChange: (settings) => updateWidgetSettings(
+                    selectedInstance.widgetId,
+                    settings
+                  )
+                },
+                selectedInstance.widgetId
+              )
+            }
+          ),
+          showThemePanel && /* @__PURE__ */ jsx(SettingsPanel, { title: "Theme", onClose: closePanel, children: /* @__PURE__ */ jsx(
+            ThemeEditor,
+            {
+              theme: paintedTheme,
+              appliedThemeId: theme.id,
+              systemThemes,
+              customThemes,
+              colorMode: resolvedMode,
+              onColorModeChange: setMode,
+              onPreview: setPreviewTheme,
+              onApply: (next) => {
+                setPreviewTheme(null);
+                setTheme(next);
+              },
+              onCustomThemesChange: setCustomThemes
+            }
+          ) }),
+          showSeoPanel && /* @__PURE__ */ jsx(SettingsPanel, { title: "SEO", onClose: closePanel, children: /* @__PURE__ */ jsx(SeoEditor, { seo, onChange: setSeo }) })
+        ] }),
+        insertAfter !== null && /* @__PURE__ */ jsx(
+          BlockPicker,
+          {
+            blocks: addableBlocks,
+            onPick: addWidget,
+            onClose: () => setInsertAfter(null)
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, PageBuilderSlider, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, VerticalPaddingSelector, createDefaultLayout, createWidgetInstance, ensureRequiredSharedWidgets, getDefaultTheme, getMaxWidthTWClass, getVerticalPaddingTWClass };
+//# sourceMappingURL=chunk-MO76KZY2.js.map
+//# sourceMappingURL=chunk-MO76KZY2.js.map