@nextbridgehq/payload-block-builder 0.1.9 → 0.2.0

package/dist/client.cjs

@@ -1,4 +1,5 @@
 'use client'
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -136,7 +137,8 @@ function RelationshipPicker({ label, required, collection, hasMany = false, valu
           const t = doc.title ?? doc.name ?? doc.slug ?? null;
           if (t) setFetchedTitles((prev) => ({ ...prev, [idStr]: String(t) }));
         }
-      }).catch(() => {
+      }).catch((err) => {
+        console.error("[Block Builder] Failed to load relation title:", err);
         fetchingRef.current.delete(idStr);
       });
     });
@@ -205,22 +207,79 @@ function JsonField({ label, required, value, onChange }) {
     }
   ), hasError && /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-error", style: { marginTop: 4 } }, "Invalid JSON \u2014 changes not saved until fixed."));
 }
-function SchemaForm({ schema, value, onChange }) {
+function SchemaForm({ schema, value, onChange, depth = 0 }) {
   const set = (0, import_react.useCallback)(
     (key, val) => onChange({ ...value, [key]: val }),
     [value, onChange]
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, schema.map((field) => /* @__PURE__ */ import_react.default.createElement(
-    FieldInput,
-    {
-      key: field.name,
-      field,
-      value: value[field.name],
-      onChange: (v) => set(field.name, v)
+  if (depth > 10) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-error" }, "Max nesting depth reached (10).");
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, schema.map((field) => {
+    if (field.type === "row") {
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: "bdf-row" }, /* @__PURE__ */ import_react.default.createElement(SchemaForm, { schema: field.fields, value, onChange, depth: depth + 1 }));
     }
-  )));
+    if (field.type === "collapsible") {
+      return /* @__PURE__ */ import_react.default.createElement(CollapsibleSection, { key: field.name, field, value, onChange, depth: depth + 1 });
+    }
+    if (field.type === "tabs") {
+      return /* @__PURE__ */ import_react.default.createElement(TabsSection, { key: field.name, field, value, onChange, depth: depth + 1 });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      FieldInput,
+      {
+        key: field.name,
+        field,
+        value: value[field.name],
+        onChange: (v) => set(field.name, v),
+        depth
+      }
+    );
+  }));
+}
+function CollapsibleSection({
+  field,
+  value,
+  onChange,
+  depth
+}) {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-collapsible" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "bdf-collapsible__header",
+      onClick: () => setOpen((o) => !o)
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: `bdf-collapsible__caret${open ? " bdf-collapsible__caret--open" : ""}` }, "\u25B8"),
+    field.label
+  ), open && /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-collapsible__body" }, /* @__PURE__ */ import_react.default.createElement(SchemaForm, { schema: field.fields, value, onChange, depth })));
+}
+function TabsSection({
+  field,
+  value,
+  onChange,
+  depth
+}) {
+  const [activeTab, setActiveTab] = (0, import_react.useState)(0);
+  const set = (0, import_react.useCallback)(
+    (key, val) => onChange({ ...value, [key]: val }),
+    [value, onChange]
+  );
+  const tabs = field.tabs ?? [];
+  const tab = tabs[activeTab];
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-tabs" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-tabs__list" }, tabs.map((t, i) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: t.name ?? t.label ?? i,
+      type: "button",
+      className: `bdf-tabs__tab${i === activeTab ? " bdf-tabs__tab--active" : ""}`,
+      onClick: () => setActiveTab(i)
+    },
+    t.label
+  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-tabs__panel" }, tab && (tab.name ? /* @__PURE__ */ import_react.default.createElement(SchemaForm, { schema: tab.fields, value: value[tab.name] ?? {}, onChange: (v) => set(tab.name, v), depth }) : /* @__PURE__ */ import_react.default.createElement(SchemaForm, { schema: tab.fields, value, onChange, depth }))));
 }
-function FieldInput({ field, value, onChange }) {
+function FieldInput({ field, value, onChange, depth }) {
   const label = field.label ?? field.name;
   switch (field.type) {
     case "text":
@@ -373,7 +432,8 @@ function FieldInput({ field, value, onChange }) {
             const next = [...rows];
             next[i] = updated;
             onChange(next);
-          }
+          },
+          depth: depth + 1
         }
       ), /* @__PURE__ */ import_react.default.createElement(
         "button",
@@ -397,7 +457,7 @@ function FieldInput({ field, value, onChange }) {
     case "group": {
       const groupVal = value ?? {};
       const subFields = field.fields ?? [];
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-fieldset__header" }, label), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-fieldset__body" }, /* @__PURE__ */ import_react.default.createElement(SchemaForm, { schema: subFields, value: groupVal, onChange }))));
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-fieldset__header" }, label), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-fieldset__body" }, /* @__PURE__ */ import_react.default.createElement(SchemaForm, { schema: subFields, value: groupVal, onChange, depth: depth + 1 }))));
     }
     default:
       return /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: "var(--theme-elevation-400)", fontFamily: "var(--font-body)", padding: "4px 0" } }, "Unsupported field type: ", /* @__PURE__ */ import_react.default.createElement("strong", null, field.type), " (", label, ")");
@@ -418,6 +478,10 @@ function BlockDataField({ path }) {
       setError(null);
       return;
     }
+    if (!/^[a-zA-Z0-9_-]+$/.test(String(versionId))) {
+      setError("Invalid version ID format");
+      return;
+    }
     setLoading(true);
     setError(null);
     fetch(`/api/block-definition-versions/${versionId}?depth=0`, { credentials: "same-origin" }).then((r) => {
@@ -472,20 +536,24 @@ function BlockVersionSync({ path }) {
       setVersion(null);
       return;
     }
+    if (!/^[a-zA-Z0-9_-]+$/.test(String(defId))) {
+      return;
+    }
     fetch(`/api/block-definitions/${String(defId)}?depth=1`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
       if (!doc) return;
       const currentVersion = doc.currentVersion;
       if (!currentVersion) return;
       const versionId = typeof currentVersion === "object" ? currentVersion.id : currentVersion;
       if (versionId) setVersion(versionId);
-    }).catch(() => {
+    }).catch((err) => {
+      console.error("[Block Builder] BlockVersionSync fetch error:", err);
     });
   }, [blockDefValue, setVersion]);
   return null;
 }
 
 // src/components/SchemaBuilderField/index.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_ui3 = require("@payloadcms/ui");
 
 // src/components/SchemaBuilderField/FieldRow.tsx
@@ -1048,131 +1116,75 @@ function FieldRow({
   )))));
 }
 
-// src/components/SchemaBuilderField/index.tsx
-function parseSchema(raw) {
-  try {
-    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
-    if (!parsed) return [];
-    if (Array.isArray(parsed)) return parsed;
-    if (parsed?.fields && Array.isArray(parsed.fields)) return parsed.fields;
-  } catch {
+// src/block-builder/components/ErrorBoundary.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/block-builder/store/builder.store.ts
+var import_zustand = require("zustand");
+var import_middleware = require("zustand/middleware");
+var import_immer = require("zustand/middleware/immer");
+
+// src/utils/uuid.ts
+function uuidv4() {
+  const c = globalThis.crypto;
+  if (typeof c?.randomUUID === "function") {
+    return c.randomUUID();
   }
-  return [];
+  if (typeof c?.getRandomValues === "function") {
+    const bytes = c.getRandomValues(new Uint8Array(16));
+    bytes[6] = bytes[6] & 15 | 64;
+    bytes[8] = bytes[8] & 63 | 128;
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+  }
+  throw new Error(
+    "No cryptographic random source available. `crypto.randomUUID` requires a secure context (HTTPS or localhost)."
+  );
 }
-function SchemaBuilderField({ path, readOnly }) {
-  const { value, setValue } = (0, import_ui3.useField)({ path });
-  const setValueRef = (0, import_react6.useRef)(setValue);
-  (0, import_react6.useEffect)(() => {
-    setValueRef.current = setValue;
-  });
-  const [fields, setFields] = (0, import_react6.useState)(() => parseSchema(value));
-  const hasExistingValue = value !== void 0 && value !== null;
-  const [hydrated, setHydrated] = (0, import_react6.useState)(!hasExistingValue);
-  (0, import_react6.useEffect)(() => {
-    if (hydrated) return;
-    if (value !== void 0 && value !== null) {
-      setFields(parseSchema(value));
-      setHydrated(true);
-    }
-  }, [value, hydrated]);
-  (0, import_react6.useEffect)(() => {
-    if (!hydrated) return;
-    setValueRef.current({ fields });
-  }, [fields, hydrated]);
-  const addField = (0, import_react6.useCallback)(() => {
-    setFields((prev) => [
-      ...prev,
-      { name: "", type: "text", label: "", required: false }
-    ]);
-  }, []);
-  const updateField = (0, import_react6.useCallback)((index, updated) => {
-    setFields((prev) => prev.map((f, i) => i === index ? updated : f));
-  }, []);
-  const removeField = (0, import_react6.useCallback)((index) => {
-    setFields((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-  const moveField = (0, import_react6.useCallback)((index, dir) => {
-    setFields((prev) => {
-      const next = [...prev];
-      const target = index + dir;
-      if (target < 0 || target >= next.length) return prev;
-      [next[index], next[target]] = [next[target], next[index]];
-      return next;
-    });
-  }, []);
-  return /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ import_react6.default.createElement(
-    "span",
-    {
-      style: {
-        marginLeft: 8,
-        fontSize: 11,
-        color: "var(--theme-elevation-400)",
-        fontWeight: 400
+
+// src/block-builder/store/builder.store.ts
+var TAB_PATH_SEP = "::";
+var BUILDER_PERSIST_KEY = "@nextbridgehq/payload-block-builder";
+function encodeTabPath(fieldId, tabIndex) {
+  return `${fieldId}${TAB_PATH_SEP}${tabIndex}`;
+}
+function walkPath(block, parentPath, create2) {
+  let currentFields = block.fields;
+  for (const segment of parentPath) {
+    const sepIndex = segment.indexOf(TAB_PATH_SEP);
+    if (sepIndex !== -1) {
+      const fieldId = segment.slice(0, sepIndex);
+      const tabIndex = Number(segment.slice(sepIndex + TAB_PATH_SEP.length));
+      const parentField2 = currentFields.find((f) => f.id === fieldId);
+      if (!parentField2 || parentField2.type !== "tabs" || !Array.isArray(parentField2.tabs)) return null;
+      const tab = parentField2.tabs[tabIndex];
+      if (!tab) return null;
+      if (!tab.fields) {
+        if (!create2) return null;
+        tab.fields = [];
       }
-    },
-    "(",
-    fields.length,
-    ")"
-  ))), fields.length === 0 ? /* @__PURE__ */ import_react6.default.createElement("div", { className: "sbf-empty" }, "No fields defined. Click \u201CAdd Field\u201D below to add the first field to this block schema.") : /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ import_react6.default.createElement(
-    FieldRow,
-    {
-      key: i,
-      index: i,
-      total: fields.length,
-      field,
-      onChange: (updated) => updateField(i, updated),
-      onRemove: () => removeField(i),
-      onMoveUp: i > 0 ? () => moveField(i, -1) : void 0,
-      onMoveDown: i < fields.length - 1 ? () => moveField(i, 1) : void 0,
-      readOnly
+      currentFields = tab.fields;
+      continue;
     }
-  ))), !readOnly && /* @__PURE__ */ import_react6.default.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ import_react6.default.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field")));
+    const parentField = currentFields.find((f) => f.id === segment);
+    if (!parentField) return null;
+    if (!parentField.fields) {
+      if (!create2) return null;
+      parentField.fields = [];
+    }
+    currentFields = parentField.fields;
+  }
+  return currentFields;
 }
-
-// src/components/EditInBuilderButton/index.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_ui4 = require("@payloadcms/ui");
-var import_ui5 = require("@payloadcms/ui");
-function EditInBuilderButton() {
-  const { id } = (0, import_ui4.useDocumentInfo)();
-  const { value: slug } = (0, import_ui5.useField)({ path: "slug" });
-  if (!id || !slug) return null;
-  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ import_react7.default.createElement(
-    "a",
-    {
-      href: `/block-builder?load=${slug}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: "6px",
-        padding: "8px 16px",
-        borderRadius: "6px",
-        border: "1px solid #16a34a",
-        color: "#16a34a",
-        textDecoration: "none",
-        fontSize: "13px",
-        fontWeight: 500,
-        background: "transparent",
-        cursor: "pointer"
-      }
-    },
-    "Edit in Block Builder"
-  ));
+function getTargetFields(block, parentPath) {
+  return walkPath(block, parentPath, false);
+}
+function ensureTargetFields(block, parentPath) {
+  return walkPath(block, parentPath, true);
 }
-
-// src/block-builder/components/canvas/BuilderShell.tsx
-var import_react17 = __toESM(require("react"), 1);
-
-// src/block-builder/store/builder.store.ts
-var import_zustand = require("zustand");
-var import_middleware = require("zustand/middleware");
-var import_immer = require("zustand/middleware/immer");
-var import_uuid = require("uuid");
 function createDefaultField(type) {
   const base = {
-    id: (0, import_uuid.v4)(),
+    id: uuidv4(),
     type,
     name: `${type}Field`,
     label: `${type.charAt(0).toUpperCase()}${type.slice(1)} Field`,
@@ -1180,7 +1192,6 @@ function createDefaultField(type) {
   };
   switch (type) {
     case "select":
-    case "radio":
       return {
         ...base,
         options: [
@@ -1189,18 +1200,34 @@ function createDefaultField(type) {
         ]
       };
     case "relationship":
-      return { ...base, relationTo: "", hasMany: false };
+      return { ...base, collection: "", hasMany: false };
     case "array":
       return { ...base, fields: [] };
     case "group":
       return { ...base, fields: [] };
+    case "row":
+      return { ...base, fields: [] };
+    case "collapsible":
+      return { ...base, label: base.label ?? "Collapsible Section", fields: [] };
+    case "tabs":
+      return { ...base, tabs: [{ id: uuidv4(), label: "Tab 1", fields: [] }] };
     default:
       return base;
   }
 }
+function regenerateFieldIds(fields) {
+  return fields.map((f) => {
+    const next = { ...f, id: uuidv4() };
+    if (next.fields) next.fields = regenerateFieldIds(next.fields);
+    if (next.tabs) {
+      next.tabs = next.tabs.map((tab) => ({ ...tab, fields: regenerateFieldIds(tab.fields) }));
+    }
+    return next;
+  });
+}
 function createDefaultBlock() {
   return {
-    id: (0, import_uuid.v4)(),
+    id: uuidv4(),
     slug: "myBlock",
     interfaceName: "MyBlock",
     labels: { singular: "My Block", plural: "My Blocks" },
@@ -1221,11 +1248,13 @@ var useBuilderStore = (0, import_zustand.create)()(
         isReadOnly: false,
         loadedVersionId: null,
         blockSlug: null,
+        activeParentPath: [],
         addBlock: () => set((state) => {
           const block = createDefaultBlock();
           state.blocks.push(block);
           state.activeBlockId = block.id;
           state.activeFieldId = null;
+          state.activeParentPath = [];
           state.isDirty = true;
         }),
         removeBlock: (blockId) => set((state) => {
@@ -1233,6 +1262,7 @@ var useBuilderStore = (0, import_zustand.create)()(
           if (state.activeBlockId === blockId) {
             state.activeBlockId = state.blocks[0]?.id ?? null;
             state.activeFieldId = null;
+            state.activeParentPath = [];
           }
           state.isDirty = true;
         }),
@@ -1244,15 +1274,16 @@ var useBuilderStore = (0, import_zustand.create)()(
         setActiveBlock: (blockId) => set((state) => {
           state.activeBlockId = blockId;
           state.activeFieldId = null;
+          state.activeParentPath = [];
         }),
         duplicateBlock: (blockId) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
           const clone = JSON.parse(JSON.stringify(block));
-          clone.id = (0, import_uuid.v4)();
-          clone.slug = `${block.slug}Copy`;
+          clone.id = uuidv4();
+          clone.slug = `${block.slug}-copy`;
           clone.interfaceName = block.interfaceName ? `${block.interfaceName}Copy` : void 0;
-          clone.fields = clone.fields.map((f) => ({ ...f, id: (0, import_uuid.v4)() }));
+          clone.fields = regenerateFieldIds(clone.fields);
           const idx = state.blocks.findIndex((b) => b.id === blockId);
           state.blocks.splice(idx + 1, 0, clone);
           state.activeBlockId = clone.id;
@@ -1261,36 +1292,47 @@ var useBuilderStore = (0, import_zustand.create)()(
         addField: (blockId, type) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
           const field = createDefaultField(type);
-          block.fields.push(field);
+          targetFields.push(field);
           state.activeFieldId = field.id;
           state.isDirty = true;
         }),
         removeField: (blockId, fieldId) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
-          block.fields = block.fields.filter((f) => f.id !== fieldId);
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
+          const index = targetFields.findIndex((f) => f.id === fieldId);
+          if (index !== -1) {
+            targetFields.splice(index, 1);
+          }
           if (state.activeFieldId === fieldId) state.activeFieldId = null;
           state.isDirty = true;
         }),
         updateField: (blockId, fieldId, updates) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
-          const field = block.fields.find((f) => f.id === fieldId);
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
+          const field = targetFields.find((f) => f.id === fieldId);
           if (field) Object.assign(field, updates);
           state.isDirty = true;
         }),
         reorderFields: (blockId, fromIndex, toIndex) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
-          const [moved] = block.fields.splice(fromIndex, 1);
-          block.fields.splice(toIndex, 0, moved);
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
+          const [moved] = targetFields.splice(fromIndex, 1);
+          targetFields.splice(toIndex, 0, moved);
           state.isDirty = true;
         }),
         setActiveField: (fieldId) => set((state) => {
           state.activeFieldId = fieldId;
         }),
-        reset: () => set(() => ({ ...initialState, isReadOnly: false, loadedVersionId: null, blockSlug: null })),
+        reset: () => set(() => ({ ...initialState, isReadOnly: false, loadedVersionId: null, blockSlug: null, activeParentPath: [] })),
         markClean: () => set((state) => {
           state.isDirty = false;
         }),
@@ -1298,6 +1340,7 @@ var useBuilderStore = (0, import_zustand.create)()(
           state.blocks = [block];
           state.activeBlockId = block.id;
           state.activeFieldId = null;
+          state.activeParentPath = [];
           state.isDirty = false;
         }),
         setVersionMeta: (versionId, isReadOnly) => set((state) => {
@@ -1306,10 +1349,36 @@ var useBuilderStore = (0, import_zustand.create)()(
         }),
         setBlockSlug: (slug) => set((state) => {
           state.blockSlug = slug;
+        }),
+        pushParentPath: (fieldId) => set((state) => {
+          state.activeParentPath.push(fieldId);
+          state.activeFieldId = null;
+        }),
+        popParentPath: () => set((state) => {
+          state.activeParentPath.pop();
+          state.activeFieldId = null;
+        }),
+        // Jump directly to an ancestor level -- `depth` is the number of
+        // segments to keep, so breadcrumb index `i` maps to `i + 1`.
+        truncateParentPath: (depth) => set((state) => {
+          if (depth < 0 || depth >= state.activeParentPath.length) return;
+          state.activeParentPath = state.activeParentPath.slice(0, depth);
+          state.activeFieldId = null;
+        }),
+        resetParentPath: () => set((state) => {
+          state.activeParentPath = [];
+          state.activeFieldId = null;
         })
       })),
       {
-        name: "@nextbridgehq/payload-block-builder",
+        name: BUILDER_PERSIST_KEY,
+        version: 1,
+        migrate: (persistedState, version) => {
+          if (version === 0) {
+            return { blocks: [], activeBlockId: null };
+          }
+          return persistedState;
+        },
         partialize: (state) => ({
           blocks: state.blocks,
           activeBlockId: state.activeBlockId
@@ -1319,163 +1388,191 @@ var useBuilderStore = (0, import_zustand.create)()(
   )
 );
 
-// src/block-builder/components/canvas/TopBar.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_lucide_react = require("lucide-react");
-
-// src/block-builder/lib/mapToSaveRequest.ts
-var TYPE_MAP = {
-  richText: "richtext",
-  upload: "image",
-  radio: "select"
-};
-var UNSUPPORTED = /* @__PURE__ */ new Set(["code", "point", "ui", "tabs", "collapsible", "row"]);
-function normalizeSlug(slug) {
-  return slug.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-}
-function mapToSaveRequest(block) {
-  const fields = block.fields.filter((f) => {
-    if (UNSUPPORTED.has(f.type)) {
-      console.warn(`[block-builder] Field type "${f.type}" is not supported in this project \xE2\u20AC" skipping field "${f.name}"`);
-      return false;
-    }
-    return true;
-  }).map(({ id: _id, relationTo, ...f }) => ({
-    ...f,
-    type: TYPE_MAP[f.type] ?? f.type,
-    // normalizer reads `collection`, block-builder stores `relationTo`
-    ...relationTo ? { collection: relationTo } : {}
-  }));
-  return {
-    blockSlug: normalizeSlug(block.slug),
-    name: block.labels?.singular ?? block.slug,
-    schema: { fields },
-    changelog: "Created via block builder"
-  };
-}
-
-// src/block-builder/lib/codegen.ts
-function indent(n) {
-  return "  ".repeat(n);
-}
-function escStr(s) {
-  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
-}
-function fieldToCode(field, depth = 1) {
-  const pad = indent(depth);
-  const innerPad = indent(depth + 1);
-  const lines = [];
-  lines.push(`${pad}name: '${escStr(field.name)}'`);
-  lines.push(`${pad}type: '${field.type}'`);
-  if (field.label) lines.push(`${pad}label: '${escStr(field.label)}'`);
-  if (field.required) lines.push(`${pad}required: true`);
-  if (field.unique) lines.push(`${pad}unique: true`);
-  if (field.localized) lines.push(`${pad}localized: true`);
-  if (field.defaultValue !== void 0) {
-    const val = typeof field.defaultValue === "string" ? `'${escStr(String(field.defaultValue))}'` : field.defaultValue;
-    lines.push(`${pad}defaultValue: ${val}`);
-  }
-  if (field.type === "richText") {
-    lines.push(`${pad}editor: lexicalEditor({})`);
-  }
-  if (field.options && field.options.length > 0) {
-    const opts = field.options.map((o) => `{ label: '${escStr(o.label)}', value: '${escStr(o.value)}' }`).join(`, `);
-    lines.push(`${pad}options: [${opts}]`);
-  }
-  if (field.relationTo) {
-    lines.push(`${pad}relationTo: '${escStr(field.relationTo)}'`);
+// src/block-builder/components/ErrorBoundary.tsx
+var ErrorBoundary = class extends import_react6.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+    /**
+     * Clears persisted builder state before reloading. "Try again" alone only
+     * resets the boundary, so if the cause is corrupt persisted state the next
+     * render throws immediately -- this gives the user a way out of that loop.
+     */
+    this.handleResetState = () => {
+      try {
+        window.localStorage.removeItem(BUILDER_PERSIST_KEY);
+      } catch (err) {
+        console.error("[Block Builder] Could not clear persisted state:", err);
+      }
+      window.location.reload();
+    };
   }
-  if (field.hasMany !== void 0) {
-    lines.push(`${pad}hasMany: ${field.hasMany}`);
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
   }
-  if (field.minRows !== void 0) lines.push(`${pad}minRows: ${field.minRows}`);
-  if (field.maxRows !== void 0) lines.push(`${pad}maxRows: ${field.maxRows}`);
-  if (field.fields && field.fields.length > 0) {
-    const nested = field.fields.map((f) => `${innerPad}{
-${fieldToCode(f, depth + 2)}
-${innerPad}}`).join(",\n");
-    lines.push(`${pad}fields: [
-${nested}
-${innerPad}]`);
+  componentDidCatch(error, errorInfo) {
+    console.error("[Block Builder] Uncaught error:", error, errorInfo);
   }
-  const adminParts = [];
-  if (field.admin?.description)
-    adminParts.push(`description: '${escStr(field.admin.description)}'`);
-  if (field.admin?.placeholder)
-    adminParts.push(`placeholder: '${escStr(field.admin.placeholder)}'`);
-  if (field.admin?.readOnly) adminParts.push(`readOnly: true`);
-  if (field.admin?.hidden) adminParts.push(`hidden: true`);
-  if (adminParts.length > 0) {
-    lines.push(`${pad}admin: { ${adminParts.join(", ")} }`);
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ import_react6.default.createElement("div", { className: "bb-error-boundary", role: "alert" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "bb-error-boundary__title" }, "Something went wrong in the Block Builder."), /* @__PURE__ */ import_react6.default.createElement("details", { className: "bb-error-boundary__details" }, /* @__PURE__ */ import_react6.default.createElement("summary", null, "Error details"), /* @__PURE__ */ import_react6.default.createElement("pre", { className: "bb-error-boundary__trace" }, this.state.error?.toString())), /* @__PURE__ */ import_react6.default.createElement("div", { className: "bb-error-boundary__actions" }, /* @__PURE__ */ import_react6.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => this.setState({ hasError: false, error: null }),
+          className: "bb-error-boundary__btn bb-error-boundary__btn--primary"
+        },
+        "Try again"
+      ), /* @__PURE__ */ import_react6.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: this.handleResetState,
+          className: "bb-error-boundary__btn"
+        },
+        "Reset builder state"
+      )), /* @__PURE__ */ import_react6.default.createElement("p", { className: "bb-error-boundary__hint" }, "\u201CReset builder state\u201D discards unsaved local edits and reloads. Published versions are stored in the database and are not affected."));
+    }
+    return this.props.children;
   }
-  return lines.join(",\n");
-}
-function generateBlockCode(block) {
-  const hasRichText = containsRichText(block.fields);
-  const imports = [`import type { Block } from 'payload'`];
-  if (hasRichText) {
-    imports.push(`import { lexicalEditor } from '@payloadcms/richtext-lexical'`);
+};
+
+// src/components/SchemaBuilderField/index.tsx
+function parseSchema(raw) {
+  try {
+    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+    if (!parsed) return [];
+    if (Array.isArray(parsed)) return parsed;
+    if (parsed?.fields && Array.isArray(parsed.fields)) return parsed.fields;
+  } catch {
   }
-  const fieldsCode = block.fields.map((f) => `  {
-${fieldToCode(f, 2)}
-  }`).join(",\n");
-  const labelsCode = block.labels ? `
-  labels: {
-    singular: '${escStr(block.labels.singular ?? block.slug)}',
-    plural: '${escStr(block.labels.plural ?? block.slug + "s")}',
-  },` : "";
-  const interfaceLine = block.interfaceName ? `
-  interfaceName: '${escStr(block.interfaceName)}',` : "";
-  const exportName = block.interfaceName ?? toCamelCase(block.slug);
-  return [
-    imports.join("\n"),
-    "",
-    `export const ${exportName}: Block = {`,
-    `  slug: '${escStr(block.slug)}',${interfaceLine}${labelsCode}`,
-    `  fields: [`,
-    fieldsCode,
-    `  ],`,
-    `}`,
-    ""
-  ].join("\n");
+  return [];
 }
-function containsRichText(fields) {
-  return fields.some(
-    (f) => f.type === "richText" || (f.fields ? containsRichText(f.fields) : false)
-  );
-}
-function toCamelCase(slug) {
-  return slug.split(/[-_]/).map(
-    (part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)
-  ).join("");
-}
-function generateBlockOutput(block) {
-  return {
-    filename: `${block.slug}.ts`,
-    code: generateBlockCode(block),
-    language: "typescript"
-  };
-}
-function generateAllBlocks(blocks) {
-  return blocks.map(generateBlockOutput);
+function SchemaBuilderField({ path, readOnly }) {
+  const { value, setValue } = (0, import_ui3.useField)({ path });
+  const setValueRef = (0, import_react7.useRef)(setValue);
+  (0, import_react7.useEffect)(() => {
+    setValueRef.current = setValue;
+  });
+  const [fields, setFields] = (0, import_react7.useState)(() => parseSchema(value));
+  const hasExistingValue = value !== void 0 && value !== null;
+  const [hydrated, setHydrated] = (0, import_react7.useState)(!hasExistingValue);
+  (0, import_react7.useEffect)(() => {
+    if (hydrated) return;
+    if (value !== void 0 && value !== null) {
+      setFields(parseSchema(value));
+      setHydrated(true);
+    }
+  }, [value, hydrated]);
+  (0, import_react7.useEffect)(() => {
+    if (!hydrated) return;
+    setValueRef.current({ fields });
+  }, [fields, hydrated]);
+  const addField = (0, import_react7.useCallback)(() => {
+    setFields((prev) => [
+      ...prev,
+      { name: "", type: "text", label: "", required: false }
+    ]);
+  }, []);
+  const updateField = (0, import_react7.useCallback)((index, updated) => {
+    setFields((prev) => prev.map((f, i) => i === index ? updated : f));
+  }, []);
+  const removeField = (0, import_react7.useCallback)((index) => {
+    setFields((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const moveField = (0, import_react7.useCallback)((index, dir) => {
+    setFields((prev) => {
+      const next = [...prev];
+      const target = index + dir;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ import_react7.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ import_react7.default.createElement(
+    "span",
+    {
+      style: {
+        marginLeft: 8,
+        fontSize: 11,
+        color: "var(--theme-elevation-400)",
+        fontWeight: 400
+      }
+    },
+    "(",
+    fields.length,
+    ")"
+  ))), fields.length === 0 ? /* @__PURE__ */ import_react7.default.createElement("div", { className: "sbf-empty" }, "No fields defined. Click \u201CAdd Field\u201D below to add the first field to this block schema.") : /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ import_react7.default.createElement(
+    FieldRow,
+    {
+      key: i,
+      index: i,
+      total: fields.length,
+      field,
+      onChange: (updated) => updateField(i, updated),
+      onRemove: () => removeField(i),
+      onMoveUp: i > 0 ? () => moveField(i, -1) : void 0,
+      onMoveDown: i < fields.length - 1 ? () => moveField(i, 1) : void 0,
+      readOnly
+    }
+  ))), !readOnly && /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ import_react7.default.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field"))));
 }
-function generateIndexFile(blocks) {
-  const exportName = (b) => b.interfaceName ?? toCamelCase(b.slug);
-  const imports = blocks.map((b) => `import { ${exportName(b)} } from './${b.slug}'`).join("\n");
-  const exportList = blocks.map((b) => `  ${exportName(b)}`).join(",\n");
-  const code = [
-    imports,
-    "",
-    `export const blocks = [`,
-    exportList,
-    `] as const`,
-    ""
-  ].join("\n");
-  return { filename: "index.ts", code, language: "typescript" };
+
+// src/components/EditInBuilderButton/index.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_ui4 = require("@payloadcms/ui");
+var import_ui5 = require("@payloadcms/ui");
+function EditInBuilderButton() {
+  const { id } = (0, import_ui4.useDocumentInfo)();
+  const { value: slug } = (0, import_ui5.useField)({ path: "slug" });
+  if (!id || !slug) return null;
+  return /* @__PURE__ */ import_react8.default.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ import_react8.default.createElement(
+    "a",
+    {
+      href: `/block-builder?load=${slug}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "8px 16px",
+        borderRadius: "6px",
+        border: "1px solid #16a34a",
+        color: "#16a34a",
+        textDecoration: "none",
+        fontSize: "13px",
+        fontWeight: 500,
+        background: "transparent",
+        cursor: "pointer"
+      }
+    },
+    "Edit in Block Builder"
+  ));
 }
 
+// src/block-builder/components/canvas/BuilderShell.tsx
+var import_react19 = __toESM(require("react"), 1);
+
 // src/block-builder/components/canvas/TopBar.tsx
-function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish, notification, onSetNotification }) {
+var import_react9 = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
+function ensureFieldIds(fields) {
+  if (!Array.isArray(fields)) return [];
+  return fields.map((field) => {
+    const f = { ...field };
+    if (!f.id) f.id = uuidv4();
+    if (Array.isArray(f.fields)) f.fields = ensureFieldIds(f.fields);
+    if (Array.isArray(f.tabs)) {
+      f.tabs = f.tabs.map((tab) => ({ ...tab, fields: ensureFieldIds(tab.fields) }));
+    }
+    return f;
+  });
+}
+function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish, notification, onSetNotification, previewOpen, onTogglePreview }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const activeBlock = blocks.find((b) => b.id === activeBlockId);
@@ -1483,21 +1580,23 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
   const isDirty = useBuilderStore((s) => s.isDirty);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
+  const loadBlock = useBuilderStore((s) => s.loadBlock);
   const setNotification = onSetNotification;
-  const [versionDropdownOpen, setVersionDropdownOpen] = (0, import_react8.useState)(false);
-  const [blockPickerOpen, setBlockPickerOpen] = (0, import_react8.useState)(false);
-  const dropdownRef = (0, import_react8.useRef)(null);
-  const blockPickerRef = (0, import_react8.useRef)(null);
+  const [versionDropdownOpen, setVersionDropdownOpen] = (0, import_react9.useState)(false);
+  const [blockPickerOpen, setBlockPickerOpen] = (0, import_react9.useState)(false);
+  const dropdownRef = (0, import_react9.useRef)(null);
+  const blockPickerRef = (0, import_react9.useRef)(null);
+  const fileInputRef = (0, import_react9.useRef)(null);
   const selectedVersion = versions.find((v) => v.id === selectedVersionId);
   const currentVersion = versions.find((v) => v.isCurrent);
   const activeBlockDef = blockDefs.find((b) => b.slug === activeSlug);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (notification?.status === "success") {
       const t = setTimeout(() => setNotification(null), 3e3);
       return () => clearTimeout(t);
     }
   }, [notification]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     function handleClick(e) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setVersionDropdownOpen(false);
@@ -1513,10 +1612,17 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     if (!activeBlock || isReadOnly) return false;
     setNotification({ status: "publishing" });
     try {
-      const req = mapToSaveRequest(activeBlock);
+      const normalizeSlug = (s) => s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+      const publishedSlug = normalizeSlug(activeBlock.slug);
+      const req = {
+        blockSlug: publishedSlug,
+        name: activeBlock.labels?.singular ?? activeBlock.slug,
+        schema: { fields: activeBlock.fields },
+        changelog: "Created via block builder"
+      };
       const res = await fetch("/api/blocks/save", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", "X-Block-Builder": "1" },
         body: JSON.stringify(req)
       });
       const json = await res.json();
@@ -1527,7 +1633,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
           status: "success",
           msg: `v${json.versionNumber ?? "?"} published successfully!`
         });
-        onAfterPublish();
+        onAfterPublish(publishedSlug);
         return true;
       } else {
         setNotification({
@@ -1546,35 +1652,54 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       return false;
     }
   }
-  function handleExport() {
-    if (blocks.length === 0) return;
-    const outputs = [...generateAllBlocks(blocks), generateIndexFile(blocks)];
-    for (const out of outputs) {
-      const blob = new Blob([out.code], { type: "text/plain" });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = out.filename;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }
+  function handleExportJson() {
+    if (!activeBlock) return;
+    const blob = new Blob([JSON.stringify(activeBlock, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${activeBlock.slug}-schema.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+  function handleImportJson(e) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const json = JSON.parse(event.target?.result);
+        if (json && json.slug && Array.isArray(json.fields)) {
+          if (!json.id) json.id = uuidv4();
+          json.fields = ensureFieldIds(json.fields);
+          loadBlock(json);
+          setNotification({ status: "success", msg: "Block imported successfully!" });
+        } else {
+          setNotification({ status: "error", title: "Invalid JSON", errors: ["The file does not contain a valid block schema."] });
+        }
+      } catch (err) {
+        setNotification({ status: "error", title: "Parse Error", errors: ["Could not parse JSON file."] });
+      }
+    };
+    reader.readAsText(file);
+    if (fileInputRef.current) fileInputRef.current.value = "";
   }
   function formatDate(iso) {
     return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric" });
   }
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-topbar__dirty" }, "* unsaved")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-topbar__dirty" }, "* unsaved")), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
       className: "bb-block-picker__trigger",
       onClick: () => setBlockPickerOpen((o) => !o)
     },
-    /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
-    /* @__PURE__ */ import_react8.default.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
-    /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
-  ), blockPickerOpen && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(import_lucide_react.Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
+    /* @__PURE__ */ import_react9.default.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
+    /* @__PURE__ */ import_react9.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
+  ), blockPickerOpen && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       key: b.id,
@@ -1585,20 +1710,20 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         onBlockSelect(b.slug);
       }
     },
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
-  )))), versions.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
+    /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
+  )))), versions.length > 0 && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
       className: `bb-version-selector__trigger${isReadOnly ? " bb-version-selector__trigger--readonly" : ""}`,
       onClick: () => setVersionDropdownOpen((o) => !o)
     },
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
-    /* @__PURE__ */ import_react8.default.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
-    selectedVersion?.isCurrent && /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-selector__badge" }, "current"),
-    /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
-  ), versionDropdownOpen && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ import_react9.default.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
+    selectedVersion?.isCurrent && /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-version-selector__badge" }, "current"),
+    /* @__PURE__ */ import_react9.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
+  ), versionDropdownOpen && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       key: v.id,
@@ -1609,20 +1734,45 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         onVersionSelect(v.id);
       }
     },
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-selector__badge" }, "current")),
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "..." : ""}` : formatDate(v.createdAt))
-  ))))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-version-selector__badge" }, "current")),
+    /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "..." : ""}` : formatDate(v.createdAt))
+  ))))), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ import_react9.default.createElement(
+    "input",
+    {
+      type: "file",
+      accept: ".json",
+      ref: fileInputRef,
+      style: { display: "none" },
+      onChange: handleImportJson
+    }
+  ), /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
-      onClick: handleExport,
-      disabled: blocks.length === 0,
-      className: "bb-btn bb-btn--secondary",
-      style: { display: "none" }
+      onClick: () => fileInputRef.current?.click(),
+      className: "bb-btn bb-btn--secondary"
+    },
+    "Import JSON"
+  ), /* @__PURE__ */ import_react9.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleExportJson,
+      disabled: !activeBlock,
+      className: "bb-btn bb-btn--secondary"
     },
-    "Export .ts"
-  ), isReadOnly ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
+    "Export JSON"
+  ), /* @__PURE__ */ import_react9.default.createElement("div", { style: { width: 1, height: 24, background: "var(--bb-border)", margin: "0 4px" } }), /* @__PURE__ */ import_react9.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onTogglePreview,
+      disabled: !activeBlock,
+      className: `bb-btn ${previewOpen ? "bb-btn--primary" : "bb-btn--secondary"}`
+    },
+    previewOpen ? "Close Preview" : "Live Preview"
+  ), isReadOnly ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
@@ -1633,7 +1783,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       disabled: !currentVersion
     },
     "Back to current"
-  ), /* @__PURE__ */ import_react8.default.createElement(
+  ), /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
@@ -1645,7 +1795,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       className: "bb-btn bb-btn--warning"
     },
     notification?.status === "publishing" ? "Restoring..." : "Restore as new version"
-  )) : /* @__PURE__ */ import_react8.default.createElement(
+  )) : /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
@@ -1654,11 +1804,11 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       className: "bb-btn bb-btn--primary"
     },
     notification?.status === "publishing" ? "Publishing..." : "Publish to Payload"
-  ))), notification?.status === "publishing" && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ import_react8.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ import_react8.default.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ import_react8.default.createElement("li", { key: i }, e)))), /* @__PURE__ */ import_react8.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))));
+  ))), notification?.status === "publishing" && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react9.default.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ import_react9.default.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react9.default.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ import_react9.default.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ import_react9.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react9.default.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ import_react9.default.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ import_react9.default.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ import_react9.default.createElement("li", { key: i }, e)))), /* @__PURE__ */ import_react9.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))));
 }
 
 // src/block-builder/components/canvas/BlockList.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_lucide_react2 = require("lucide-react");
 function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
   const blocks = useBuilderStore((s) => s.blocks);
@@ -1672,37 +1822,37 @@ function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
   const localOnlyBlocks = blocks.filter(
     (b) => !blockDefs.some((d) => d.slug === b.slug)
   );
-  return /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ import_react9.default.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react2.Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-sidebar__body" }, useApiNav && blockDefs.map((def) => {
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ import_react10.default.createElement(import_lucide_react2.Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-sidebar__body" }, useApiNav && blockDefs.map((def) => {
     const isActive = def.slug === activeSlug;
     const fieldCount = isActive && loadedBlock ? loadedBlock.fields.length : null;
-    return /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         key: def.id,
         onClick: () => onBlockSelect?.(def.slug),
         className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
       },
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__slug" }, def.slug),
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__meta" }, fieldCount !== null ? `${fieldCount} field${fieldCount !== 1 ? "s" : ""}` : def.name)
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-block-item__slug" }, def.slug),
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-block-item__meta" }, fieldCount !== null ? `${fieldCount} field${fieldCount !== 1 ? "s" : ""}` : def.name)
     );
   }), localOnlyBlocks.map((block) => {
     const isActive = block.id === activeBlockId;
-    return /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         key: block.id,
         onClick: () => setActiveBlock(block.id),
         className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
       },
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__slug" }, block.slug),
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
-      /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-block-item__slug" }, block.slug),
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
+      /* @__PURE__ */ import_react10.default.createElement(
         "div",
         {
           className: "bb-block-item__actions",
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ import_react9.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement(
           "button",
           {
             type: "button",
@@ -1710,9 +1860,9 @@ function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          /* @__PURE__ */ import_react9.default.createElement(import_lucide_react2.Copy, { size: 12, strokeWidth: 1.75 })
+          /* @__PURE__ */ import_react10.default.createElement(import_lucide_react2.Copy, { size: 12, strokeWidth: 1.75 })
         ),
-        /* @__PURE__ */ import_react9.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement(
           "button",
           {
             type: "button",
@@ -1720,69 +1870,103 @@ function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          /* @__PURE__ */ import_react9.default.createElement(import_lucide_react2.Trash2, { size: 12, strokeWidth: 1.75 })
+          /* @__PURE__ */ import_react10.default.createElement(import_lucide_react2.Trash2, { size: 12, strokeWidth: 1.75 })
         )
       )
     );
-  }), !useApiNav && blocks.length === 0 && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ import_react9.default.createElement("br", null), "Click + to create one.")));
+  }), !useApiNav && blocks.length === 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ import_react10.default.createElement("br", null), "Click + to create one.")));
 }
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_core = require("@dnd-kit/core");
 var import_sortable2 = require("@dnd-kit/sortable");
 var import_modifiers = require("@dnd-kit/modifiers");
 
 // src/block-builder/components/canvas/SortableFieldCard.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
 var import_lucide_react3 = require("lucide-react");
 var ICON_MAP = {
   text: import_lucide_react3.Type,
   textarea: import_lucide_react3.AlignLeft,
+  richtext: import_lucide_react3.AlignJustify,
   number: import_lucide_react3.Hash,
   email: import_lucide_react3.Mail,
   date: import_lucide_react3.Calendar,
   checkbox: import_lucide_react3.CheckSquare,
   select: import_lucide_react3.ChevronDown,
-  radio: import_lucide_react3.Circle,
-  upload: import_lucide_react3.Upload,
+  image: import_lucide_react3.Image,
+  file: import_lucide_react3.Upload,
   relationship: import_lucide_react3.Link,
-  json: import_lucide_react3.Braces
+  json: import_lucide_react3.Braces,
+  array: import_lucide_react3.List,
+  group: import_lucide_react3.Box,
+  row: import_lucide_react3.Columns,
+  tabs: import_lucide_react3.Folder,
+  collapsible: import_lucide_react3.ChevronDown
 };
-function SortableFieldCard({ field, blockId, index }) {
+var SortableFieldCard = import_react11.default.memo(function SortableFieldCard2({
+  field,
+  blockId,
+  index,
+  isActive,
+  isReadOnly,
+  onDrillDown
+}) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({
     id: field.id
   });
-  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
   const setActiveField = useBuilderStore((s) => s.setActiveField);
   const removeField = useBuilderStore((s) => s.removeField);
-  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
-  const isActive = activeFieldId === field.id;
   const wrapStyle = {
     transform: import_utilities.CSS.Transform.toString(transform),
     transition
   };
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
       ref: setNodeRef,
       style: wrapStyle,
       className: `bb-field-card-wrap${isDragging ? " bb-field-card-wrap--dragging" : ""}`,
       ...attributes,
-      ...listeners
+      ...listeners,
+      "aria-label": `Draggable field card for ${field.name || "unnamed"}`
     },
-    /* @__PURE__ */ import_react10.default.createElement(
+    /* @__PURE__ */ import_react11.default.createElement(
       "div",
       {
         className: `bb-field-card${isActive ? " bb-field-card--active" : ""}`,
         onClick: () => setActiveField(isActive ? null : field.id)
       },
-      /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ import_react10.default.createElement(FieldIcon, { type: field.type })),
-      /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__required" }, "*"))),
-      /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
-      !isReadOnly && /* @__PURE__ */ import_react10.default.createElement(
+      /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ import_react11.default.createElement(FieldIcon, { type: field.type })),
+      /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-field-card__required" }, "*"))),
+      /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
+      onDrillDown && /* @__PURE__ */ import_react11.default.createElement(
+        "button",
+        {
+          type: "button",
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: (e) => {
+            e.stopPropagation();
+            onDrillDown();
+          },
+          className: "bb-field-card__drill",
+          title: "Edit Inner Fields",
+          style: {
+            marginLeft: "auto",
+            fontSize: 12,
+            padding: "2px 8px",
+            borderRadius: 4,
+            border: "1px solid var(--theme-border)",
+            background: "var(--theme-elevation-100)",
+            cursor: "pointer"
+          }
+        },
+        "Edit Fields"
+      ),
+      !isReadOnly && /* @__PURE__ */ import_react11.default.createElement(
         "button",
         {
           type: "button",
@@ -1794,21 +1978,46 @@ function SortableFieldCard({ field, blockId, index }) {
           className: "bb-field-card__delete",
           title: "Remove field"
         },
-        /* @__PURE__ */ import_react10.default.createElement(import_lucide_react3.X, { size: 12, strokeWidth: 2 })
+        /* @__PURE__ */ import_react11.default.createElement(import_lucide_react3.X, { size: 12, strokeWidth: 2 })
       )
     )
   );
-}
+});
 function FieldIcon({ type }) {
   const Icon = ICON_MAP[type];
-  return Icon ? /* @__PURE__ */ import_react10.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null;
+  return Icon ? /* @__PURE__ */ import_react11.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null;
 }
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
+function resolvePathLabels(block, parentPath) {
+  const labels = [];
+  let currentFields = block.fields;
+  for (const segment of parentPath) {
+    const sepIndex = segment.indexOf("::");
+    if (sepIndex !== -1) {
+      const fieldId = segment.slice(0, sepIndex);
+      const tabIndex = Number(segment.slice(sepIndex + 2));
+      const tabsField = currentFields?.find((f) => f.id === fieldId);
+      const tab = tabsField?.tabs?.[tabIndex];
+      labels.push(tab?.label || tabsField?.name || "Tab");
+      currentFields = tab?.fields;
+      continue;
+    }
+    const field = currentFields?.find((f) => f.id === segment);
+    labels.push(field?.name || field?.label || "Nested Field");
+    currentFields = field?.fields;
+  }
+  return labels;
+}
 function BuilderCanvas() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
   const reorderFields = useBuilderStore((s) => s.reorderFields);
+  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const activeParentPath = useBuilderStore((s) => s.activeParentPath);
+  const truncateParentPath = useBuilderStore((s) => s.truncateParentPath);
+  const resetParentPath = useBuilderStore((s) => s.resetParentPath);
+  const pushParentPath = useBuilderStore((s) => s.pushParentPath);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const sensors = (0, import_core.useSensors)(
     (0, import_core.useSensor)(import_core.PointerSensor, { activationConstraint: { distance: 4 } }),
@@ -1818,16 +2027,41 @@ function BuilderCanvas() {
     if (isReadOnly) return;
     const { active, over } = event;
     if (!over || active.id === over.id || !block) return;
-    const fromIndex = block.fields.findIndex((f) => f.id === active.id);
-    const toIndex = block.fields.findIndex((f) => f.id === over.id);
+    const targetFields2 = getTargetFields(block, activeParentPath);
+    if (!targetFields2) return;
+    const fromIndex = targetFields2.findIndex((f) => f.id === active.id);
+    const toIndex = targetFields2.findIndex((f) => f.id === over.id);
     if (fromIndex !== -1 && toIndex !== -1) {
       reorderFields(block.id, fromIndex, toIndex);
     }
   }
   if (!block) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-canvas__no-block" }, "Select or create a block from the left panel."));
+    return /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "bb-canvas__no-block" }, "Select or create a block from the left panel."));
   }
-  return /* @__PURE__ */ import_react11.default.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__header" }, block.slug, " - ", block.fields.length, " field", block.fields.length !== 1 ? "s" : ""), block.fields.length === 0 ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ import_react11.default.createElement(
+  const targetFields = getTargetFields(block, activeParentPath) || [];
+  const pathLabels = resolvePathLabels(block, activeParentPath);
+  return /* @__PURE__ */ import_react12.default.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-canvas__header" }, activeParentPath.length === 0 ? /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, block.slug, " - ", targetFields.length, " field", targetFields.length !== 1 ? "s" : "") : /* @__PURE__ */ import_react12.default.createElement("nav", { className: "bb-breadcrumb", "aria-label": "Field path" }, /* @__PURE__ */ import_react12.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => resetParentPath(),
+      className: "bb-breadcrumb__item"
+    },
+    block.slug
+  ), /* @__PURE__ */ import_react12.default.createElement("span", { className: "bb-breadcrumb__sep" }, "/"), activeParentPath.map((segment, index) => {
+    const isLast = index === activeParentPath.length - 1;
+    return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, { key: segment }, /* @__PURE__ */ import_react12.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: isLast ? void 0 : () => truncateParentPath(index + 1),
+        className: "bb-breadcrumb__item",
+        "aria-current": isLast ? "location" : void 0,
+        "data-current": isLast ? "true" : void 0
+      },
+      pathLabels[index]
+    ), !isLast && /* @__PURE__ */ import_react12.default.createElement("span", { className: "bb-breadcrumb__sep" }, "/"));
+  }))), targetFields.length === 0 ? /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ import_react12.default.createElement(
     import_core.DndContext,
     {
       sensors,
@@ -1835,19 +2069,22 @@ function BuilderCanvas() {
       modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement],
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(
       import_sortable2.SortableContext,
       {
-        items: block.fields.map((f) => f.id),
+        items: targetFields.map((f) => f.id),
         strategy: import_sortable2.verticalListSortingStrategy
       },
-      /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__field-list" }, block.fields.map((field, i) => /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-canvas__field-list" }, targetFields.map((field, i) => /* @__PURE__ */ import_react12.default.createElement(
         SortableFieldCard,
         {
           key: field.id,
           field,
           blockId: block.id,
-          index: i
+          index: i,
+          isActive: activeFieldId === field.id,
+          isReadOnly,
+          onDrillDown: ["group", "row", "array", "collapsible"].includes(field.type) ? () => pushParentPath(field.id) : void 0
         }
       )))
     )
@@ -1855,18 +2092,18 @@ function BuilderCanvas() {
 }
 
 // src/block-builder/components/canvas/ConfigPanel.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/block-builder/components/config/BlockConfig.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 function BlockConfig() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
   const updateBlock = useBuilderStore((s) => s.updateBlock);
   if (!block) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__empty" }, "No block selected.");
+    return /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__empty" }, "No block selected.");
   }
-  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1875,7 +2112,7 @@ function BlockConfig() {
       placeholder: "myBlock",
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react12.default.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ import_react12.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1884,7 +2121,7 @@ function BlockConfig() {
       placeholder: "MyBlock",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ import_react12.default.createElement(
+  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1893,7 +2130,7 @@ function BlockConfig() {
       placeholder: "My Block",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ import_react12.default.createElement(
+  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1902,7 +2139,7 @@ function BlockConfig() {
       placeholder: "My Blocks",
       className: "bb-input"
     }
-  ))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ import_react12.default.createElement(
+  ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1911,38 +2148,62 @@ function BlockConfig() {
       placeholder: "https://...",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ import_react12.default.createElement("strong", null, block.fields.length), " field", block.fields.length !== 1 ? "s" : "", " defined"));
+  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ import_react13.default.createElement("strong", null, block.fields.length), " field", block.fields.length !== 1 ? "s" : "", " defined"));
 }
 
 // src/block-builder/components/config/FieldConfig.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 var ALL_TYPES = [
   "text",
   "textarea",
+  "richtext",
   "number",
   "email",
+  "url",
+  "color",
   "date",
   "checkbox",
   "select",
-  "radio",
-  "upload",
+  "multiselect",
+  "image",
+  "file",
   "relationship",
-  "json"
+  "json",
+  "array",
+  "group",
+  "blocks",
+  "row",
+  "tabs",
+  "collapsible"
 ];
+var NO_DEFAULT_VALUE_TYPES = /* @__PURE__ */ new Set([
+  "array",
+  "group",
+  "blocks",
+  "row",
+  "tabs",
+  "collapsible",
+  "image",
+  "file",
+  "relationship",
+  "json"
+]);
 function FieldConfig() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const activeParentPath = useBuilderStore((s) => s.activeParentPath);
   const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
-  const field = block?.fields.find((f) => f.id === activeFieldId);
+  const field = block ? getTargetFields(block, activeParentPath)?.find((f) => f.id === activeFieldId) : void 0;
   const updateField = useBuilderStore((s) => s.updateField);
+  const pushParentPath = useBuilderStore((s) => s.pushParentPath);
   if (!activeBlockId || !activeFieldId || !field) {
-    return /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__empty" }, "Select a field to configure it.");
+    return /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__empty" }, "Select a field to configure it.");
   }
   function upd(updates) {
     updateField(activeBlockId, activeFieldId, updates);
   }
-  const needsOptions = field.type === "select" || field.type === "radio";
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Field Name *"), /* @__PURE__ */ import_react13.default.createElement(
+  const needsOptions = field.type === "select" || field.type === "multiselect";
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Field Name *"), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
@@ -1951,15 +2212,15 @@ function FieldConfig() {
       placeholder: "fieldName",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ import_react13.default.createElement(
+  )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ import_react14.default.createElement(
     "select",
     {
       value: field.type,
       onChange: (e) => upd({ type: e.target.value }),
       className: "bb-input bb-select"
     },
-    ALL_TYPES.map((t) => /* @__PURE__ */ import_react13.default.createElement("option", { key: t, value: t }, t))
-  ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ import_react13.default.createElement(
+    ALL_TYPES.map((t) => /* @__PURE__ */ import_react14.default.createElement("option", { key: t, value: t }, t))
+  ))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
@@ -1968,28 +2229,44 @@ function FieldConfig() {
       placeholder: "Human-readable label",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.default.createElement(
+  )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.required ?? false,
       onChange: (e) => upd({ required: e.target.checked })
     }
-  ), "Required"), /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.default.createElement(
+  ), "Required"), /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.unique ?? false,
       onChange: (e) => upd({ unique: e.target.checked })
     }
-  ), "Unique"), /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.default.createElement(
+  ), "Unique"), /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.localized ?? false,
       onChange: (e) => upd({ localized: e.target.checked })
     }
-  ), "Localized")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Default Value"), /* @__PURE__ */ import_react13.default.createElement(
+  ), "Localized")), !NO_DEFAULT_VALUE_TYPES.has(field.type) && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Default Value"), field.type === "checkbox" ? /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react14.default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.defaultValue === true,
+      onChange: (e) => upd({ defaultValue: e.target.checked })
+    }
+  ), "Checked by default") : field.type === "number" ? /* @__PURE__ */ import_react14.default.createElement(
+    "input",
+    {
+      type: "number",
+      value: typeof field.defaultValue === "number" ? field.defaultValue : "",
+      onChange: (e) => upd({ defaultValue: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
+      placeholder: "0",
+      className: "bb-input"
+    }
+  ) : /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
@@ -1998,23 +2275,23 @@ function FieldConfig() {
       placeholder: "Default value",
       className: "bb-input"
     }
-  )), field.type === "relationship" && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ import_react13.default.createElement(
+  )), field.type === "relationship" && /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
-      value: field.relationTo ?? "",
-      onChange: (e) => upd({ relationTo: e.target.value }),
+      value: field.collection ?? "",
+      onChange: (e) => upd({ collection: e.target.value }),
       placeholder: "pages",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.default.createElement(
+  )), /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.hasMany ?? false,
       onChange: (e) => upd({ hasMany: e.target.checked })
     }
-  ), "Has Many")), field.type === "array" && /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Min Rows"), /* @__PURE__ */ import_react13.default.createElement(
+  ), "Has Many")), field.type === "array" && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Min Rows"), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "number",
@@ -2022,7 +2299,7 @@ function FieldConfig() {
       onChange: (e) => upd({ minRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ import_react13.default.createElement(
+  )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "number",
@@ -2030,7 +2307,54 @@ function FieldConfig() {
       onChange: (e) => upd({ maxRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
       className: "bb-input"
     }
-  ))), needsOptions && /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ import_react13.default.createElement(
+  ))), field.type === "tabs" && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-options-label" }, "Tabs"), (field.tabs ?? []).map((tab, i) => /* @__PURE__ */ import_react14.default.createElement("div", { key: tab.id ?? i, className: "bb-option-row" }, /* @__PURE__ */ import_react14.default.createElement(
+    "input",
+    {
+      type: "text",
+      value: tab.label,
+      placeholder: "Tab label",
+      onChange: (e) => {
+        const next = [...field.tabs ?? []];
+        next[i] = { ...next[i], label: e.target.value };
+        upd({ tabs: next });
+      },
+      className: "bb-input"
+    }
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => pushParentPath(encodeTabPath(field.id, i)),
+      className: "bb-add-option",
+      title: "Edit this tab's fields"
+    },
+    "Edit Fields"
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        const next = (field.tabs ?? []).filter((_, k) => k !== i);
+        upd({ tabs: next });
+      },
+      className: "bb-option-delete",
+      title: "Remove tab"
+    },
+    "x"
+  ))), /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => upd({
+        tabs: [
+          ...field.tabs ?? [],
+          { id: uuidv4(), label: `Tab ${(field.tabs?.length ?? 0) + 1}`, fields: [] }
+        ]
+      }),
+      className: "bb-add-option"
+    },
+    "+ Add Tab"
+  )), needsOptions && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ import_react14.default.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
@@ -2043,7 +2367,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
@@ -2056,7 +2380,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement(
     "button",
     {
       type: "button",
@@ -2068,7 +2392,7 @@ function FieldConfig() {
       title: "Remove option"
     },
     "x"
-  ))), /* @__PURE__ */ import_react13.default.createElement(
+  ))), /* @__PURE__ */ import_react14.default.createElement(
     "button",
     {
       type: "button",
@@ -2081,11 +2405,11 @@ function FieldConfig() {
 
 // src/block-builder/components/canvas/ConfigPanel.tsx
 function ConfigPanel() {
-  const [tab, setTab] = (0, import_react14.useState)("block");
+  const [tab, setTab] = (0, import_react15.useState)("block");
   const activeFieldId = useBuilderStore((s) => s.activeFieldId);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const activeTab = activeFieldId ? "field" : tab;
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ import_react15.default.createElement(
     "button",
     {
       key: t,
@@ -2094,11 +2418,11 @@ function ConfigPanel() {
       className: `bb-config__tab${activeTab === t ? " bb-config__tab--active" : ""}`
     },
     t
-  ))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ import_react14.default.createElement(BlockConfig, null) : /* @__PURE__ */ import_react14.default.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "bb-config__readonly-label" }, "Read only")));
+  ))), /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ import_react15.default.createElement(BlockConfig, null) : /* @__PURE__ */ import_react15.default.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-config__readonly-label" }, "Read only")));
 }
 
 // src/block-builder/components/sidebar/FieldPalette.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_lucide_react4 = require("lucide-react");
 
 // src/block-builder/lib/field-palette.ts
@@ -2112,11 +2436,17 @@ var FIELD_PALETTE = [
   { type: "checkbox", label: "Checkbox", description: "Boolean toggle", icon: "CheckSquare", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
   // Choice
   { type: "select", label: "Select", description: "Dropdown selection", icon: "ChevronDown", category: "choice", color: "bg-purple-500/20 text-purple-400 border-purple-500/30" },
-  { type: "radio", label: "Radio", description: "Radio button group", icon: "Circle", category: "choice", color: "bg-purple-500/20 text-purple-400 border-purple-500/30" },
   // Media
-  { type: "upload", label: "Upload", description: "File or media upload", icon: "Upload", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
+  { type: "image", label: "Image", description: "Image upload", icon: "Image", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
+  { type: "file", label: "File", description: "File upload", icon: "Upload", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
   // Relational
   { type: "relationship", label: "Relationship", description: "Link to another collection", icon: "Link", category: "relational", color: "bg-orange-500/20 text-orange-400 border-orange-500/30" },
+  // Layout
+  { type: "array", label: "Array", description: "Repeating list of fields", icon: "List", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "group", label: "Group", description: "Grouped fields object", icon: "Box", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "row", label: "Row", description: "Horizontal layout row", icon: "Columns", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "tabs", label: "Tabs", description: "Tabbed layout container", icon: "Folder", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "collapsible", label: "Collapsible", description: "Expandable field group", icon: "ChevronDown", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
   // Advanced
   { type: "json", label: "JSON", description: "Raw JSON data field", icon: "Braces", category: "advanced", color: "bg-red-500/20 text-red-400 border-red-500/30" }
 ];
@@ -2125,6 +2455,7 @@ var FIELD_CATEGORIES = [
   { id: "choice", label: "Choice" },
   { id: "media", label: "Media" },
   { id: "relational", label: "Relational" },
+  { id: "layout", label: "Layout" },
   { id: "advanced", label: "Advanced" }
 ];
 function getFieldMeta(type) {
@@ -2146,10 +2477,13 @@ var ICON_MAP2 = {
   Link: import_lucide_react4.Link,
   List: import_lucide_react4.List,
   Folder: import_lucide_react4.Folder,
-  Braces: import_lucide_react4.Braces
+  Braces: import_lucide_react4.Braces,
+  Image: import_lucide_react4.Image,
+  Box: import_lucide_react4.Box,
+  Columns: import_lucide_react4.Columns
 };
 function FieldPalette() {
-  const [search, setSearch] = (0, import_react15.useState)("");
+  const [search, setSearch] = (0, import_react16.useState)("");
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const addField = useBuilderStore((s) => s.addField);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
@@ -2160,7 +2494,7 @@ function FieldPalette() {
     if (!activeBlockId || isReadOnly) return;
     addField(activeBlockId, type);
   }
-  return /* @__PURE__ */ import_react15.default.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react16.default.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ import_react16.default.createElement(
     "input",
     {
       type: "text",
@@ -2169,7 +2503,7 @@ function FieldPalette() {
       placeholder: "Search...",
       className: "bb-palette__search"
     }
-  )), /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ import_react15.default.createElement(
+  )), /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ import_react16.default.createElement(
     FieldButton,
     {
       key: item.type,
@@ -2181,7 +2515,7 @@ function FieldPalette() {
     }
   ))) : FIELD_CATEGORIES.map((cat) => {
     const items = FIELD_PALETTE.filter((f) => f.category === cat.id);
-    return /* @__PURE__ */ import_react15.default.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ import_react16.default.createElement(
       FieldButton,
       {
         key: item.type,
@@ -2192,7 +2526,7 @@ function FieldPalette() {
         disabled: !activeBlockId || isReadOnly
       }
     ))));
-  })), !activeBlockId && /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
+  })), !activeBlockId && /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
 }
 function FieldButton({
   type,
@@ -2203,7 +2537,7 @@ function FieldButton({
 }) {
   const meta = getFieldMeta(type);
   const Icon = ICON_MAP2[icon];
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "button",
     {
       type: "button",
@@ -2212,14 +2546,291 @@ function FieldButton({
       title: meta?.description,
       className: "bb-palette__item"
     },
-    /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ import_react15.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
-    /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-palette__item__label" }, label),
-    /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-palette__item__type" }, type)
+    /* @__PURE__ */ import_react16.default.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ import_react16.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
+    /* @__PURE__ */ import_react16.default.createElement("span", { className: "bb-palette__item__label" }, label),
+    /* @__PURE__ */ import_react16.default.createElement("span", { className: "bb-palette__item__type" }, type)
   );
 }
 
 // src/block-builder/components/canvas/CodePreview.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
+
+// src/block-builder/lib/codegen.ts
+function indent(n) {
+  return "  ".repeat(n);
+}
+function safeStr(s) {
+  return JSON.stringify(s);
+}
+function listToCode(items, body, depth) {
+  if (items.length === 0) return "[]";
+  const pad = indent(depth);
+  const innerPad = indent(depth + 1);
+  const entries = items.map((item) => `${innerPad}{
+${body(item)}
+${innerPad}}`).join(",\n");
+  return `[
+${entries}
+${pad}]`;
+}
+var UNNAMED_TYPES = /* @__PURE__ */ new Set(["row", "tabs", "collapsible"]);
+var NO_LABEL_TYPES = /* @__PURE__ */ new Set(["row"]);
+var NO_LOCALIZED_TYPES = /* @__PURE__ */ new Set(["row", "tabs", "collapsible"]);
+var NO_ADMIN_DESCRIPTION_TYPES = /* @__PURE__ */ new Set(["row", "tabs"]);
+var FIELDS_CONTAINER_TYPES = /* @__PURE__ */ new Set([
+  "array",
+  "group",
+  "row",
+  "collapsible"
+]);
+var PAYLOAD_TYPE = {
+  richtext: "richText",
+  image: "upload",
+  file: "upload",
+  multiselect: "select",
+  url: "text",
+  color: "text"
+};
+var UPLOAD_TYPES = /* @__PURE__ */ new Set(["image", "file"]);
+var DEFAULT_UPLOAD_COLLECTION = "media";
+function payloadType(type) {
+  return PAYLOAD_TYPE[type] ?? type;
+}
+function fieldToCode(field, depth = 1) {
+  const pad = indent(depth);
+  const innerPad = indent(depth + 1);
+  const lines = [];
+  if (!UNNAMED_TYPES.has(field.type)) {
+    lines.push(`${pad}name: ${safeStr(field.name)}`);
+  }
+  lines.push(`${pad}type: '${payloadType(field.type)}'`);
+  if (field.label && !NO_LABEL_TYPES.has(field.type)) {
+    lines.push(`${pad}label: ${safeStr(field.label)}`);
+  }
+  if (field.required) lines.push(`${pad}required: true`);
+  if (field.unique) lines.push(`${pad}unique: true`);
+  if (field.localized && !NO_LOCALIZED_TYPES.has(field.type)) {
+    lines.push(`${pad}localized: true`);
+  }
+  if (field.defaultValue !== void 0) {
+    const val = typeof field.defaultValue === "string" ? safeStr(String(field.defaultValue)) : field.defaultValue;
+    lines.push(`${pad}defaultValue: ${val}`);
+  }
+  if (field.type === "richtext") {
+    lines.push(`${pad}editor: lexicalEditor({})`);
+  }
+  if (field.options && field.options.length > 0) {
+    const opts = field.options.map((o) => `{ label: ${safeStr(o.label)}, value: ${safeStr(o.value)} }`).join(`, `);
+    lines.push(`${pad}options: [${opts}]`);
+  }
+  if (UPLOAD_TYPES.has(field.type)) {
+    lines.push(
+      `${pad}relationTo: ${safeStr(field.collection || DEFAULT_UPLOAD_COLLECTION)}`
+    );
+  } else if (field.collection) {
+    lines.push(`${pad}relationTo: ${safeStr(field.collection)}`);
+  }
+  if (field.type === "multiselect") {
+    lines.push(`${pad}hasMany: true`);
+  } else if (field.hasMany !== void 0) {
+    lines.push(`${pad}hasMany: ${field.hasMany}`);
+  }
+  if (field.minRows !== void 0) lines.push(`${pad}minRows: ${field.minRows}`);
+  if (field.maxRows !== void 0) lines.push(`${pad}maxRows: ${field.maxRows}`);
+  const children = field.fields ?? [];
+  if (children.length > 0 || FIELDS_CONTAINER_TYPES.has(field.type)) {
+    lines.push(
+      `${pad}fields: ${listToCode(children, (f) => fieldToCode(f, depth + 2), depth)}`
+    );
+  }
+  if (field.type === "blocks") {
+    lines.push(`${pad}blocks: []`);
+  }
+  if (field.type === "tabs") {
+    const tabsCode = (field.tabs ?? []).map((tab) => {
+      const tabPad = indent(depth + 2);
+      const tabLines = [];
+      if (tab.name) tabLines.push(`${tabPad}name: ${safeStr(tab.name)}`);
+      tabLines.push(`${tabPad}label: ${safeStr(tab.label)}`);
+      tabLines.push(
+        `${tabPad}fields: ${listToCode(tab.fields ?? [], (f) => fieldToCode(f, depth + 4), depth + 2)}`
+      );
+      return `${innerPad}{
+${tabLines.join(",\n")}
+${innerPad}}`;
+    }).join(",\n");
+    lines.push(
+      `${pad}tabs: ${(field.tabs ?? []).length > 0 ? `[
+${tabsCode}
+${pad}]` : "[]"}`
+    );
+  }
+  const adminParts = [];
+  if (field.admin?.description && !NO_ADMIN_DESCRIPTION_TYPES.has(field.type))
+    adminParts.push(`description: ${safeStr(field.admin.description)}`);
+  if (field.admin?.placeholder)
+    adminParts.push(`placeholder: ${safeStr(field.admin.placeholder)}`);
+  if (field.admin?.readOnly) adminParts.push(`readOnly: true`);
+  if (field.admin?.hidden) adminParts.push(`hidden: true`);
+  if (adminParts.length > 0) {
+    lines.push(`${pad}admin: { ${adminParts.join(", ")} }`);
+  }
+  return lines.join(",\n");
+}
+function generateBlockCode(block) {
+  const hasRichText = containsRichText(block.fields);
+  const imports = [`import type { Block } from 'payload'`];
+  if (hasRichText) {
+    imports.push(`import { lexicalEditor } from '@payloadcms/richtext-lexical'`);
+  }
+  const fieldsCode = block.fields.map((f) => `    {
+${fieldToCode(f, 3)}
+    }`).join(",\n");
+  const labelsCode = block.labels ? `
+  labels: {
+    singular: ${safeStr(block.labels.singular ?? block.slug)},
+    plural: ${safeStr(block.labels.plural ?? block.slug + "s")},
+  },` : "";
+  const interfaceLine = block.interfaceName ? `
+  interfaceName: ${safeStr(block.interfaceName)},` : "";
+  const exportName = block.interfaceName ?? toCamelCase(block.slug);
+  return [
+    imports.join("\n"),
+    "",
+    `export const ${exportName}: Block = {`,
+    `  slug: ${safeStr(block.slug)},${interfaceLine}${labelsCode}`,
+    `  fields: [`,
+    fieldsCode,
+    `  ],`,
+    `}`,
+    ""
+  ].join("\n");
+}
+function containsRichText(fields) {
+  return fields.some((f) => {
+    if (f.type === "richtext") return true;
+    if (f.fields && containsRichText(f.fields)) return true;
+    if (f.tabs?.some((tab) => containsRichText(tab.fields ?? []))) return true;
+    return false;
+  });
+}
+function toCamelCase(slug) {
+  return slug.split(/[-_]/).map(
+    (part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)
+  ).join("");
+}
+function toPascalCase(slug) {
+  return slug.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function getTsType(field) {
+  switch (field.type) {
+    case "number":
+      return "number";
+    case "checkbox":
+      return "boolean";
+    case "text":
+    case "textarea":
+    case "email":
+    case "url":
+    case "color":
+    case "select":
+    case "date":
+      return "string";
+    case "multiselect":
+      return "string[]";
+    case "group":
+      return field.fields ? objectType(flattenProps(field.fields)) : "any";
+    case "array":
+      if (field.fields) {
+        const inner = flattenProps(field.fields).map((p) => `${p.name}: ${p.type}`).join("; ");
+        return `Array<{ id: string; ${inner} }>`;
+      }
+      return "any[]";
+    default:
+      return "any";
+  }
+}
+function objectType(props) {
+  return props.length > 0 ? `{ ${props.map((p) => `${p.name}: ${p.type}`).join("; ")} }` : "Record<string, unknown>";
+}
+function flattenProps(fields) {
+  const out = [];
+  for (const f of fields) {
+    if (f.type === "row" || f.type === "collapsible") {
+      out.push(...flattenProps(f.fields ?? []));
+    } else if (f.type === "tabs") {
+      for (const tab of f.tabs ?? []) {
+        if (tab.name) {
+          out.push({ name: tab.name, type: objectType(flattenProps(tab.fields ?? [])) });
+        } else {
+          out.push(...flattenProps(tab.fields ?? []));
+        }
+      }
+    } else {
+      out.push({ name: f.name, type: getTsType(f) });
+    }
+  }
+  return out;
+}
+function generateReactComponent(block) {
+  const componentName = block.interfaceName ?? toPascalCase(block.slug);
+  const propsName = `${componentName}Props`;
+  const propList = flattenProps(block.fields);
+  const propsCode = propList.map((p) => `  ${p.name}: ${p.type}`).join("\n");
+  const fieldsJsx = propList.map((p) => `      <div className="field-${p.name}">
+        {/* ${p.name} */}
+        {String(props.${p.name})}
+      </div>`).join("\n");
+  const code = [
+    `import React from 'react'`,
+    ``,
+    `export type ${propsName} = {`,
+    propsCode,
+    `}`,
+    ``,
+    `export function ${componentName}(props: ${propsName}) {`,
+    `  return (`,
+    `    <div className="${block.slug}">`,
+    fieldsJsx,
+    `    </div>`,
+    `  )`,
+    `}`,
+    ``
+  ].join("\n");
+  return {
+    filename: `${componentName}.tsx`,
+    code,
+    language: "typescript"
+  };
+}
+function generateBlockOutput(block) {
+  return {
+    filename: `${block.slug}.ts`,
+    code: generateBlockCode(block),
+    language: "typescript"
+  };
+}
+function generateAllBlocks(blocks, options = {}) {
+  return blocks.flatMap(
+    (block) => options.react ? [generateBlockOutput(block), generateReactComponent(block)] : [generateBlockOutput(block)]
+  );
+}
+function generateIndexFile(blocks) {
+  const exportName = (b) => b.interfaceName ?? toCamelCase(b.slug);
+  const imports = blocks.map((b) => `import { ${exportName(b)} } from './${b.slug}'`).join("\n");
+  const exportList = blocks.map((b) => `  ${exportName(b)}`).join(",\n");
+  const code = [
+    imports,
+    "",
+    `export const blocks = [`,
+    exportList,
+    `] as const`,
+    ""
+  ].join("\n");
+  return { filename: "index.ts", code, language: "typescript" };
+}
+
+// src/block-builder/components/canvas/CodePreview.tsx
 var KEYWORDS = /* @__PURE__ */ new Set([
   "import",
   "export",
@@ -2307,22 +2918,22 @@ var TOKEN_COLORS = {
 };
 function HighlightedCode({ code }) {
   const tokens = tokenise(code);
-  return /* @__PURE__ */ import_react16.default.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ import_react16.default.createElement("span", { key: i, style: { color: TOKEN_COLORS[tok.kind] } }, tok.text)));
+  return /* @__PURE__ */ import_react17.default.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ import_react17.default.createElement("span", { key: i, style: { color: TOKEN_COLORS[tok.kind] } }, tok.text)));
 }
 function CodePreview() {
   const blocks = useBuilderStore((s) => s.blocks);
-  const [fileMap, setFileMap] = (0, import_react16.useState)({});
-  const [activeFile, setActiveFile] = (0, import_react16.useState)(null);
-  const [copied, setCopied] = (0, import_react16.useState)(false);
-  const timerRef = (0, import_react16.useRef)(null);
-  const copyTimerRef = (0, import_react16.useRef)(null);
-  const regenerate = (0, import_react16.useCallback)(() => {
+  const [fileMap, setFileMap] = (0, import_react17.useState)({});
+  const [activeFile, setActiveFile] = (0, import_react17.useState)(null);
+  const [copied, setCopied] = (0, import_react17.useState)(false);
+  const timerRef = (0, import_react17.useRef)(null);
+  const copyTimerRef = (0, import_react17.useRef)(null);
+  const regenerate = (0, import_react17.useCallback)(() => {
     if (blocks.length === 0) {
       setFileMap({});
       setActiveFile(null);
       return;
     }
-    const blockOutputs = generateAllBlocks(blocks);
+    const blockOutputs = generateAllBlocks(blocks, { react: true });
     const indexOutput = generateIndexFile(blocks);
     const next = {};
     for (const out of blockOutputs) next[out.filename] = out.code;
@@ -2333,7 +2944,7 @@ function CodePreview() {
       return prev && keys.includes(prev) ? prev : keys[0] ?? null;
     });
   }, [blocks]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(regenerate, 300);
     return () => {
@@ -2352,7 +2963,7 @@ function CodePreview() {
   const activeCode = activeFile ? fileMap[activeFile] ?? "" : "";
   const lineCount = activeCode ? activeCode.split("\n").length : 0;
   if (fileNames.length === 0) {
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react17.default.createElement(
       "div",
       {
         className: "code-preview",
@@ -2369,7 +2980,7 @@ function CodePreview() {
       "Add a block to see generated TypeScript code"
     );
   }
-  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       style: {
@@ -2383,7 +2994,7 @@ function CodePreview() {
     },
     fileNames.map((name) => {
       const isActive = activeFile === name;
-      return /* @__PURE__ */ import_react16.default.createElement(
+      return /* @__PURE__ */ import_react17.default.createElement(
         "button",
         {
           key: name,
@@ -2406,8 +3017,8 @@ function CodePreview() {
         name
       );
     }),
-    /* @__PURE__ */ import_react16.default.createElement("div", { style: { flex: 1 } }),
-    lineCount > 0 && /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1 } }),
+    lineCount > 0 && /* @__PURE__ */ import_react17.default.createElement(
       "span",
       {
         style: {
@@ -2420,7 +3031,7 @@ function CodePreview() {
       lineCount,
       " lines"
     ),
-    /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react17.default.createElement(
       "button",
       {
         type: "button",
@@ -2443,7 +3054,7 @@ function CodePreview() {
       },
       copied ? "Copied" : "Copy"
     )
-  ), /* @__PURE__ */ import_react16.default.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ import_react16.default.createElement(
+  ), /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       style: {
@@ -2460,8 +3071,8 @@ function CodePreview() {
       },
       "aria-hidden": "true"
     },
-    activeCode.split("\n").map((_, i) => /* @__PURE__ */ import_react16.default.createElement("div", { key: i }, i + 1))
-  ), /* @__PURE__ */ import_react16.default.createElement(
+    activeCode.split("\n").map((_, i) => /* @__PURE__ */ import_react17.default.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ import_react17.default.createElement(
     "pre",
     {
       style: {
@@ -2476,49 +3087,194 @@ function CodePreview() {
         whiteSpace: "pre"
       }
     },
-    /* @__PURE__ */ import_react16.default.createElement(HighlightedCode, { code: activeCode })
+    /* @__PURE__ */ import_react17.default.createElement(HighlightedCode, { code: activeCode })
   )));
 }
 
+// src/block-builder/components/canvas/LivePreview.tsx
+var import_react18 = __toESM(require("react"), 1);
+var import_lucide_react5 = require("lucide-react");
+var TYPE_ICON = {
+  text: import_lucide_react5.Type,
+  textarea: import_lucide_react5.AlignLeft,
+  richtext: import_lucide_react5.AlignJustify,
+  number: import_lucide_react5.Hash,
+  email: import_lucide_react5.Mail,
+  url: import_lucide_react5.Link,
+  date: import_lucide_react5.Calendar,
+  checkbox: import_lucide_react5.CheckSquare,
+  select: import_lucide_react5.ChevronDown,
+  image: import_lucide_react5.Image,
+  file: import_lucide_react5.Upload,
+  relationship: import_lucide_react5.Link,
+  json: import_lucide_react5.Braces,
+  array: import_lucide_react5.List,
+  group: import_lucide_react5.Box,
+  row: import_lucide_react5.Columns,
+  tabs: import_lucide_react5.Folder,
+  collapsible: import_lucide_react5.ChevronDown
+};
+function TypeIcon({ type }) {
+  const Icon = TYPE_ICON[type] ?? import_lucide_react5.Type;
+  return /* @__PURE__ */ import_react18.default.createElement(Icon, { size: 13, strokeWidth: 1.75 });
+}
+function fieldDisplayLabel(field) {
+  return field.label || field.name || "Untitled field";
+}
+function fullFieldPath(field, prefix) {
+  const name = field.name || "\u2014";
+  return prefix ? `${prefix}.${name}` : name;
+}
+function fieldPlaceholder(field) {
+  if (field.admin?.placeholder) return field.admin.placeholder;
+  switch (field.type) {
+    case "email":
+      return "name@example.com";
+    case "url":
+      return "https://example.com";
+    case "textarea":
+    case "richtext":
+      return `Write ${fieldDisplayLabel(field).toLowerCase()} here\u2026`;
+    case "text":
+    default:
+      return `Enter ${fieldDisplayLabel(field).toLowerCase()}`;
+  }
+}
+function pluralize(count, word) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+function FieldMeta({ field, path }) {
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field__meta" }, path !== null && /* @__PURE__ */ import_react18.default.createElement("code", { className: "bb-preview-field__slug" }, path), /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__badge" }, field.type));
+}
+function FieldHead({ field, prefix }) {
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field__head" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ import_react18.default.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field), field.required && /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__required" }, "*")), /* @__PURE__ */ import_react18.default.createElement(FieldMeta, { field, path: fullFieldPath(field, prefix) })));
+}
+function PreviewField({ field, prefix = "" }) {
+  switch (field.type) {
+    case "text":
+    case "url":
+    case "email":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("input", { className: "bb-preview-input", disabled: true, placeholder: fieldPlaceholder(field) }));
+    case "textarea":
+    case "richtext":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("textarea", { className: "bb-preview-textarea", disabled: true, rows: 3, placeholder: fieldPlaceholder(field) }));
+    case "number":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("input", { className: "bb-preview-input", type: "number", disabled: true, placeholder: field.admin?.placeholder ?? "0" }));
+    case "date":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("input", { className: "bb-preview-input", type: "date", disabled: true }));
+    case "checkbox":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement("label", { className: "bb-preview-checkbox" }, /* @__PURE__ */ import_react18.default.createElement("input", { type: "checkbox", className: "bb-preview-checkbox__input", disabled: true }), /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ import_react18.default.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field), field.required && /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__required" }, "*")), /* @__PURE__ */ import_react18.default.createElement(FieldMeta, { field, path: fullFieldPath(field, prefix) }))));
+    case "select":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("select", { className: "bb-preview-select", disabled: true }, /* @__PURE__ */ import_react18.default.createElement("option", null, field.options?.[0]?.label ?? "Select an option")));
+    case "json":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-placeholder" }, "Raw JSON data"));
+    case "image":
+    case "file":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-placeholder bb-preview-placeholder--upload" }, /* @__PURE__ */ import_react18.default.createElement(TypeIcon, { type: field.type }), field.type === "image" ? "Image upload" : "File upload"));
+    case "relationship":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-placeholder bb-preview-placeholder--upload" }, /* @__PURE__ */ import_react18.default.createElement(TypeIcon, { type: field.type }), field.collection ? `Linked to \u201C${field.collection}\u201D` : "No collection set", field.hasMany ? " \xB7 multiple" : ""));
+    case "array": {
+      const ownPath = fullFieldPath(field, prefix);
+      return /* @__PURE__ */ import_react18.default.createElement(PreviewGroup, { field, ownPath, sublabel: `repeating \xB7 ${pluralize(field.fields?.length ?? 0, "field")} per row` }, (field.fields ?? []).map((f) => /* @__PURE__ */ import_react18.default.createElement(PreviewField, { key: f.id, field: f, prefix: `${ownPath}[]` })));
+    }
+    case "group": {
+      const ownPath = fullFieldPath(field, prefix);
+      return /* @__PURE__ */ import_react18.default.createElement(PreviewGroup, { field, ownPath }, (field.fields ?? []).map((f) => /* @__PURE__ */ import_react18.default.createElement(PreviewField, { key: f.id, field: f, prefix: ownPath })));
+    }
+    case "collapsible":
+      return /* @__PURE__ */ import_react18.default.createElement(PreviewGroup, { field, ownPath: null }, (field.fields ?? []).map((f) => /* @__PURE__ */ import_react18.default.createElement(PreviewField, { key: f.id, field: f, prefix })));
+    case "row":
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-row" }, (field.fields ?? []).map((f) => /* @__PURE__ */ import_react18.default.createElement(PreviewField, { key: f.id, field: f, prefix })));
+    case "tabs":
+      return /* @__PURE__ */ import_react18.default.createElement(PreviewTabs, { field, prefix });
+    default:
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ import_react18.default.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-placeholder" }, "Unsupported preview for \u201C", field.type, "\u201D"));
+  }
+}
+function PreviewGroup({ field, ownPath, sublabel, children }) {
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-group" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-group__header" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ import_react18.default.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field), sublabel && /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-group__sublabel" }, sublabel)), /* @__PURE__ */ import_react18.default.createElement(FieldMeta, { field, path: ownPath }))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-group__body" }, import_react18.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-placeholder" }, "No fields inside yet")));
+}
+function PreviewTabs({ field, prefix }) {
+  const [active, setActive] = (0, import_react18.useState)(0);
+  const tabs = field.tabs ?? [];
+  const tab = tabs[active];
+  const tabPrefix = tab?.name ? prefix ? `${prefix}.${tab.name}` : tab.name : prefix;
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-group" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-group__header" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ import_react18.default.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field)), /* @__PURE__ */ import_react18.default.createElement(FieldMeta, { field, path: null }))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-tabs__list" }, tabs.length === 0 && /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-preview-placeholder", style: { margin: 8 } }, "No tabs yet"), tabs.map((t, i) => /* @__PURE__ */ import_react18.default.createElement(
+    "button",
+    {
+      key: t.id ?? i,
+      type: "button",
+      className: `bb-preview-tabs__tab${i === active ? " bb-preview-tabs__tab--active" : ""}`,
+      onClick: () => setActive(i)
+    },
+    t.label
+  ))), tab && /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-group__body" }, tab.name && /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-tabs__path" }, "Nested under ", /* @__PURE__ */ import_react18.default.createElement("code", { className: "bb-preview-field__slug" }, tabPrefix)), (tab.fields ?? []).length > 0 ? (tab.fields ?? []).map((f) => /* @__PURE__ */ import_react18.default.createElement(PreviewField, { key: f.id, field: f, prefix: tabPrefix })) : /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-preview-placeholder" }, "No fields inside yet")));
+}
+function LivePreview() {
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const blocks = useBuilderStore((s) => s.blocks);
+  const block = blocks.find((b) => b.id === activeBlockId);
+  if (!block || block.fields.length === 0) {
+    return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-live-preview bb-live-preview--empty" }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react5.LayoutTemplate, { size: 32, strokeWidth: 1.5, color: "var(--bb-text-subtle)", style: { marginBottom: 16 } }), /* @__PURE__ */ import_react18.default.createElement("p", { style: { fontWeight: 600, marginBottom: 8, color: "var(--bb-text)" } }, "Nothing to preview yet"), /* @__PURE__ */ import_react18.default.createElement("p", { style: { fontSize: 12, color: "var(--bb-text-subtle)", textAlign: "center", maxWidth: 260 } }, "Add fields from the palette on the left \u2014 this panel updates live as you build."));
+  }
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-live-preview" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-live-preview__header" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-live-preview__title" }, "Live Preview"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "bb-live-preview__meta" }, block.labels?.singular ?? block.slug, " \xB7 ", pluralize(block.fields.length, "field"))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-live-preview__body" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "bb-live-preview__page" }, block.fields.map((field) => /* @__PURE__ */ import_react18.default.createElement(PreviewField, { key: field.id, field })))));
+}
+
 // src/block-builder/components/canvas/BuilderShell.tsx
 function BuilderShell({ loadSlug }) {
   const loadBlock = useBuilderStore((s) => s.loadBlock);
   const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
   const setBlockSlug = useBuilderStore((s) => s.setBlockSlug);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
-  const [activeSlug, setActiveSlug] = (0, import_react17.useState)(loadSlug ?? null);
-  const [loading, setLoading] = (0, import_react17.useState)(!!loadSlug);
-  const [notification, setNotification] = (0, import_react17.useState)(null);
-  const [showCodePreview, setShowCodePreview] = (0, import_react17.useState)(false);
-  const [versions, setVersions] = (0, import_react17.useState)([]);
-  const [selectedVersionId, setSelectedVersionId] = (0, import_react17.useState)(null);
-  const [blockDefs, setBlockDefs] = (0, import_react17.useState)([]);
-  const [mobilePanelTab, setMobilePanelTab] = (0, import_react17.useState)("blocks");
-  (0, import_react17.useEffect)(() => {
-    fetch("/api/block-definitions?limit=200&depth=0").then((r) => r.json()).then((json) => {
+  const [activeSlug, setActiveSlug] = (0, import_react19.useState)(loadSlug ?? null);
+  const [loading, setLoading] = (0, import_react19.useState)(!!loadSlug);
+  const [notification, setNotification] = (0, import_react19.useState)(null);
+  const [showCodePreview, setShowCodePreview] = (0, import_react19.useState)(false);
+  const [versions, setVersions] = (0, import_react19.useState)([]);
+  const [selectedVersionId, setSelectedVersionId] = (0, import_react19.useState)(null);
+  const [blockDefs, setBlockDefs] = (0, import_react19.useState)([]);
+  const [mobilePanelTab, setMobilePanelTab] = (0, import_react19.useState)("blocks");
+  const [isMounted, setIsMounted] = (0, import_react19.useState)(false);
+  const [previewOpen, setPreviewOpen] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  const refreshBlockDefs = (0, import_react19.useCallback)(async (reportErrors = false) => {
+    try {
+      const res = await fetch("/api/block-definitions?limit=200&depth=0");
+      const json = await res.json();
       setBlockDefs(
         (json.docs ?? []).map((d) => ({ id: String(d.id), slug: d.slug, name: d.name }))
       );
-    }).catch((err) => {
+    } catch (err) {
       console.error("[block-builder] Failed to load block definitions:", err);
-      setNotification({ status: "error", title: "Failed to load block definitions", errors: ["Could not load block definitions. Please refresh the page."] });
-    });
+      if (reportErrors) {
+        setNotification({ status: "error", title: "Failed to load block definitions", errors: ["Could not load block definitions. Please refresh the page."] });
+      }
+    }
   }, []);
-  const loadVersionsForSlug = (0, import_react17.useCallback)(async (slug) => {
+  (0, import_react19.useEffect)(() => {
+    refreshBlockDefs(true);
+  }, [refreshBlockDefs]);
+  const loadVersionsForSlug = (0, import_react19.useCallback)(async (slug) => {
     try {
-      const res = await fetch(`/api/block-builder/versions/${encodeURIComponent(slug)}`);
+      const res = await fetch(`/api/block-builder/versions/${encodeURIComponent(slug)}`, {
+        headers: { "X-Block-Builder": "1" }
+      });
       const json = await res.json();
       return json.versions ?? [];
     } catch {
       return [];
     }
   }, []);
-  const loadVersion = (0, import_react17.useCallback)(async (slug, versionId) => {
+  const loadVersion = (0, import_react19.useCallback)(async (slug, versionId) => {
     setLoading(true);
     setNotification(null);
     const url = versionId ? `/api/block-builder/load/${encodeURIComponent(slug)}?versionId=${encodeURIComponent(versionId)}` : `/api/block-builder/load/${encodeURIComponent(slug)}`;
     try {
-      const res = await fetch(url);
+      const res = await fetch(url, {
+        headers: { "X-Block-Builder": "1" }
+      });
       const json = await res.json();
       if (json.block) {
         loadBlock(json.block);
@@ -2533,7 +3289,7 @@ function BuilderShell({ loadSlug }) {
       setLoading(false);
     }
   }, [loadBlock, setVersionMeta]);
-  const loadBlockBySlug = (0, import_react17.useCallback)(async (slug) => {
+  const loadBlockBySlug = (0, import_react19.useCallback)(async (slug) => {
     setActiveSlug(slug);
     setBlockSlug(slug);
     setVersions([]);
@@ -2546,7 +3302,7 @@ function BuilderShell({ loadSlug }) {
     const current = list.find((v) => v.isCurrent) ?? list[0];
     if (current) setSelectedVersionId(current.id);
   }, [loadVersion, loadVersionsForSlug, setBlockSlug]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!loadSlug) return;
     loadBlockBySlug(loadSlug);
   }, [loadSlug]);
@@ -2562,14 +3318,22 @@ function BuilderShell({ loadSlug }) {
     const current = list.find((v) => v.isCurrent) ?? list[0];
     if (current) setSelectedVersionId(current.id);
   }
-  async function handleAfterPublish() {
-    if (!activeSlug) return;
-    const list = await loadVersionsForSlug(activeSlug);
+  async function handleAfterPublish(publishedSlug) {
+    setActiveSlug(publishedSlug);
+    setBlockSlug(publishedSlug);
+    const [list] = await Promise.all([
+      loadVersionsForSlug(publishedSlug),
+      // A first publish creates a definition the picker has never seen.
+      refreshBlockDefs()
+    ]);
     setVersions(list);
     const current = list.find((v) => v.isCurrent) ?? list[0];
-    if (current) setSelectedVersionId(current.id);
+    setSelectedVersionId(current ? current.id : null);
   }
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ import_react17.default.createElement(
+  if (!isMounted) {
+    return /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-loading-bar" }, "Initializing Builder..."));
+  }
+  return /* @__PURE__ */ import_react19.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ import_react19.default.createElement(
     TopBar,
     {
       blockDefs,
@@ -2581,9 +3345,11 @@ function BuilderShell({ loadSlug }) {
       onRestoreVersion: handleRestoreVersion,
       onAfterPublish: handleAfterPublish,
       notification,
-      onSetNotification: setNotification
+      onSetNotification: setNotification,
+      previewOpen,
+      onTogglePreview: () => setPreviewOpen((p) => !p)
     }
-  ), loading && /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-loading-bar" }, "Loading..."), isReadOnly && !loading && /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "bb-readonly-banner__icon" }, "[i]"), /* @__PURE__ */ import_react17.default.createElement("span", null, "You are viewing a previous version - read only.", /* @__PURE__ */ import_react17.default.createElement(
+  ), loading && /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-loading-bar" }, "Loading..."), isReadOnly && !loading && /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "bb-readonly-banner__icon" }, "[i]"), /* @__PURE__ */ import_react19.default.createElement("span", null, "You are viewing a previous version - read only.", /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       type: "button",
@@ -2591,7 +3357,7 @@ function BuilderShell({ loadSlug }) {
       onClick: handleRestoreVersion
     },
     "Switch to latest"
-  ))), /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ import_react17.default.createElement(BlockList, { blockDefs, activeSlug, onBlockSelect: loadBlockBySlug }), /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-main__center" }, /* @__PURE__ */ import_react17.default.createElement(FieldPalette, null), /* @__PURE__ */ import_react17.default.createElement(BuilderCanvas, null)), /* @__PURE__ */ import_react17.default.createElement(ConfigPanel, null)), /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ import_react17.default.createElement(
+  ))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ import_react19.default.createElement(BlockList, { blockDefs, activeSlug, onBlockSelect: loadBlockBySlug }), /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-main__center", style: { display: "flex", flex: 1 } }, /* @__PURE__ */ import_react19.default.createElement(FieldPalette, null), /* @__PURE__ */ import_react19.default.createElement(BuilderCanvas, null), previewOpen && /* @__PURE__ */ import_react19.default.createElement(LivePreview, null)), /* @__PURE__ */ import_react19.default.createElement(ConfigPanel, null)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       type: "button",
@@ -2600,12 +3366,12 @@ function BuilderShell({ loadSlug }) {
     },
     showCodePreview ? "v" : ">",
     " Code Preview"
-  ), showCodePreview && /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ import_react17.default.createElement(CodePreview, null))), /* @__PURE__ */ import_react17.default.createElement("nav", { className: "bb-mobile-nav", "aria-label": "Panel navigation" }, [
+  ), showCodePreview && /* @__PURE__ */ import_react19.default.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ import_react19.default.createElement(CodePreview, null))), /* @__PURE__ */ import_react19.default.createElement("nav", { className: "bb-mobile-nav", "aria-label": "Panel navigation" }, [
     { id: "blocks", icon: "B", label: "Blocks" },
     { id: "canvas", icon: "[]", label: "Canvas" },
     { id: "palette", icon: "+", label: "Fields" },
     { id: "config", icon: "*", label: "Config" }
-  ].map(({ id, icon, label }) => /* @__PURE__ */ import_react17.default.createElement(
+  ].map(({ id, icon, label }) => /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       key: id,
@@ -2613,16 +3379,16 @@ function BuilderShell({ loadSlug }) {
       className: `bb-mobile-nav__tab${mobilePanelTab === id ? " bb-mobile-nav__tab--active" : ""}`,
       onClick: () => setMobilePanelTab(id)
     },
-    /* @__PURE__ */ import_react17.default.createElement("span", { className: "bb-mobile-nav__icon" }, icon),
+    /* @__PURE__ */ import_react19.default.createElement("span", { className: "bb-mobile-nav__icon" }, icon),
     label
-  ))));
+  )))));
 }
 
 // src/components/BlockBuilderNavLink/index.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_link = __toESM(require("next/link"), 1);
 function BlockBuilderNavLink() {
-  return /* @__PURE__ */ import_react18.default.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ import_react20.default.createElement(
     import_link.default,
     {
       href: "/block-builder",