@nextbridgehq/payload-block-builder 0.1.8 → 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;
@@ -32,6 +33,7 @@ var client_exports = {};
 __export(client_exports, {
   BlockBuilderNavLink: () => BlockBuilderNavLink,
   BlockDataField: () => BlockDataField,
+  BlockVersionSync: () => BlockVersionSync,
   BuilderShell: () => BuilderShell,
   EditInBuilderButton: () => EditInBuilderButton,
   SchemaBuilderField: () => SchemaBuilderField
@@ -77,72 +79,207 @@ function MediaPicker({ label, required, value, onChange }) {
     "x"
   ))) : /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from Media Library")), /* @__PURE__ */ import_react.default.createElement(ListDrawer, { onSelect: handleSelect }));
 }
-function RelationshipPicker({ label, required, collection, value, onChange }) {
+function toRelDoc(v) {
+  if (!v) return null;
+  if (typeof v === "object") {
+    const o = v;
+    if (!o.id) return null;
+    return { id: o.id, title: o.title ? String(o.title) : null };
+  }
+  if (typeof v === "string" || typeof v === "number") return { id: v, title: null };
+  return null;
+}
+function RelationshipPicker({ label, required, collection, hasMany = false, value, onChange }) {
   const changeRef = (0, import_react.useRef)(onChange);
   const closeRef = (0, import_react.useRef)(() => {
   });
   (0, import_react.useEffect)(() => {
     changeRef.current = onChange;
   });
+  const items = hasMany ? Array.isArray(value) ? value.map(toRelDoc).filter(Boolean) : [] : (() => {
+    const d = toRelDoc(value);
+    return d ? [d] : [];
+  })();
+  const itemsRef = (0, import_react.useRef)(items);
+  (0, import_react.useEffect)(() => {
+    itemsRef.current = items;
+  });
   const handleSelect = (0, import_react.useCallback)(
     ({ docID, doc }) => {
-      changeRef.current({
-        id: docID,
-        title: doc?.title ?? doc?.name ?? doc?.slug ?? null
-      });
-      closeRef.current();
+      const title = String(doc?.title ?? doc?.name ?? doc?.slug ?? "") || null;
+      const entry = { id: docID, title };
+      if (hasMany) {
+        const alreadyExists = itemsRef.current.some((i) => String(i.id) === String(docID));
+        if (!alreadyExists) changeRef.current([...itemsRef.current, entry]);
+      } else {
+        changeRef.current(entry);
+        closeRef.current();
+      }
     },
-    []
+    [hasMany]
   );
-  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = (0, import_ui.useListDrawer)({
+  const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = (0, import_ui.useListDrawer)({
     collectionSlugs: [collection]
   });
   closeRef.current = closeDrawer;
-  const relObj = value && typeof value === "object" ? value : null;
-  const relId = relObj?.id ?? (typeof value === "string" || typeof value === "number" ? value : null);
-  const relTitle = relObj?.title ? String(relObj.title) : null;
-  const [fetchedTitle, setFetchedTitle] = (0, import_react.useState)(null);
+  const [fetchedTitles, setFetchedTitles] = (0, import_react.useState)({});
+  const fetchingRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   (0, import_react.useEffect)(() => {
-    if (!relId || relTitle) {
-      setFetchedTitle(null);
-      return;
+    const missing = items.filter(
+      (i) => !i.title && !fetchedTitles[String(i.id)] && !fetchingRef.current.has(String(i.id))
+    );
+    if (missing.length === 0) return;
+    missing.forEach((item) => {
+      const idStr = String(item.id);
+      fetchingRef.current.add(idStr);
+      fetch(`/api/${collection}/${idStr}?depth=0`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
+        if (doc) {
+          const t = doc.title ?? doc.name ?? doc.slug ?? null;
+          if (t) setFetchedTitles((prev) => ({ ...prev, [idStr]: String(t) }));
+        }
+      }).catch((err) => {
+        console.error("[Block Builder] Failed to load relation title:", err);
+        fetchingRef.current.delete(idStr);
+      });
+    });
+  }, [items, collection]);
+  function getTitle(item) {
+    return item.title ?? fetchedTitles[String(item.id)] ?? `ID: ${String(item.id)}`;
+  }
+  function clearOne(e, id) {
+    e.stopPropagation();
+    if (hasMany) onChange(items.filter((i) => String(i.id) !== String(id)));
+    else onChange(null);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*")), /* @__PURE__ */ import_react.default.createElement("div", { className: `bdf-rel${hasMany ? " bdf-rel--multi" : ""}` }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: "bdf-rel__control",
+      onClick: openDrawer,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") openDrawer();
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-rel__values" }, items.length === 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-rel__placeholder" }, "Select a value..."), !hasMany && items.length > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-rel__single" }, getTitle(items[0])), hasMany && items.map((item) => /* @__PURE__ */ import_react.default.createElement("span", { key: String(item.id), className: "bdf-rel__chip" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-rel__chip-label" }, getTitle(item)), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "bdf-rel__chip-remove",
+        onClick: (e) => clearOne(e, item.id),
+        "aria-label": `Remove ${getTitle(item)}`
+      },
+      /* @__PURE__ */ import_react.default.createElement("svg", { height: "12", width: "12", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", fill: "currentColor" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }))
+    )))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-rel__indicators" }, !hasMany && items.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "bdf-rel__clear",
+        onClick: (e) => clearOne(e, items[0].id),
+        "aria-label": "Clear"
+      },
+      /* @__PURE__ */ import_react.default.createElement("svg", { height: "16", width: "16", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", fill: "currentColor" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }))
+    ), /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-rel__sep" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-rel__chevron" }, /* @__PURE__ */ import_react.default.createElement("svg", { height: "16", width: "16", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", fill: "currentColor" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }))))
+  ), hasMany && /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-rel__add", onClick: (e) => e.stopPropagation() }, "+")), /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-rel__hint" }, collection, hasMany ? " \xB7 multiple" : ""), /* @__PURE__ */ import_react.default.createElement(ListDrawer, { onSelect: handleSelect }));
+}
+function JsonField({ label, required, value, onChange }) {
+  const [text, setText] = (0, import_react.useState)(
+    () => value !== void 0 ? JSON.stringify(value, null, 2) : ""
+  );
+  const [hasError, setHasError] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(JSON)")), /* @__PURE__ */ import_react.default.createElement(
+    "textarea",
+    {
+      className: "bdf-input bdf-textarea bdf-mono",
+      value: text,
+      rows: 4,
+      onChange: (e) => {
+        setText(e.target.value);
+        try {
+          onChange(JSON.parse(e.target.value));
+          setHasError(false);
+        } catch {
+          setHasError(true);
+        }
+      }
+    }
+  ), 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, depth = 0 }) {
+  const set = (0, import_react.useCallback)(
+    (key, val) => onChange({ ...value, [key]: val }),
+    [value, onChange]
+  );
+  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 });
     }
-    fetch(`/api/${collection}/${String(relId)}?depth=0`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
-      if (doc) {
-        const t = doc.title ?? doc.name ?? doc.slug ?? null;
-        setFetchedTitle(t ? String(t) : null);
+    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
       }
-    }).catch(() => {
-    });
-  }, [relId, relTitle, collection]);
-  const displayTitle = relTitle ?? fetchedTitle;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", collection, ")")), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-upload-area" }, relId ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-upload-selected" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-upload-name" }, displayTitle ?? `ID: ${String(relId)}`), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-upload-actions" }, /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Change"), /* @__PURE__ */ import_react.default.createElement(
+    );
+  }));
+}
+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-icon-btn bdf-icon-btn--danger",
-      title: "Remove",
-      onClick: () => onChange(null)
+      className: "bdf-collapsible__header",
+      onClick: () => setOpen((o) => !o)
     },
-    "\xD7"
-  ))) : /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from ", collection)), /* @__PURE__ */ import_react.default.createElement(ListDrawer, { onSelect: handleSelect }));
+    /* @__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 SchemaForm({ schema, value, onChange }) {
+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]
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, schema.map((field) => /* @__PURE__ */ import_react.default.createElement(
-    FieldInput,
+  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: field.name,
-      field,
-      value: value[field.name],
-      onChange: (v) => set(field.name, v)
-    }
-  )));
+      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":
@@ -152,7 +289,7 @@ function FieldInput({ field, value, onChange }) {
         "input",
         {
           className: "bdf-input",
-          type: field.type === "email" ? "email" : "text",
+          type: field.type === "email" ? "email" : field.type === "url" ? "url" : "text",
           value: value ?? "",
           onChange: (e) => onChange(e.target.value)
         }
@@ -205,7 +342,7 @@ function FieldInput({ field, value, onChange }) {
           className: "bdf-input",
           type: "number",
           value: numVal,
-          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.valueAsNumber)
+          onChange: (e) => onChange(e.target.value === "" ? null : e.target.valueAsNumber)
         }
       ));
     }
@@ -265,33 +402,24 @@ function FieldInput({ field, value, onChange }) {
         }
       );
     case "relationship": {
-      const collection = field.collection ?? "media";
+      const relField = field;
+      if (!relField.collection) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-error" }, "Relationship field ", /* @__PURE__ */ import_react.default.createElement("strong", null, field.name), " has no ", /* @__PURE__ */ import_react.default.createElement("code", null, "collection"), " defined in its schema."));
+      }
       return /* @__PURE__ */ import_react.default.createElement(
         RelationshipPicker,
         {
           label,
           required: field.required,
-          collection,
+          collection: relField.collection,
+          hasMany: relField.hasMany ?? false,
           value,
           onChange
         }
       );
     }
     case "json":
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, field.required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(JSON)")), /* @__PURE__ */ import_react.default.createElement(
-        "textarea",
-        {
-          className: "bdf-input bdf-textarea bdf-mono",
-          value: value !== void 0 ? JSON.stringify(value, null, 2) : "",
-          rows: 4,
-          onChange: (e) => {
-            try {
-              onChange(JSON.parse(e.target.value));
-            } catch {
-            }
-          }
-        }
-      ));
+      return /* @__PURE__ */ import_react.default.createElement(JsonField, { label, required: field.required, value, onChange });
     case "array": {
       const rows = Array.isArray(value) ? value : [];
       const subFields = field.fields ?? [];
@@ -304,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",
@@ -328,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, ")");
@@ -349,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) => {
@@ -387,15 +520,47 @@ function BlockDataField({ path }) {
   )));
 }
 
-// src/components/SchemaBuilderField/index.tsx
-var import_react5 = __toESM(require("react"), 1);
+// src/components/BlockVersionSync/index.tsx
+var import_react2 = require("react");
 var import_ui2 = require("@payloadcms/ui");
+function BlockVersionSync({ path }) {
+  const blockVersionPath = path.replace(/\.blockDefinition$/, ".blockVersion");
+  const { setValue: setVersion } = (0, import_ui2.useField)({ path: blockVersionPath });
+  const blockDefValue = (0, import_ui2.useFormFields)(([fields]) => fields[path]?.value);
+  const prevDefIdRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const defId = blockDefValue && typeof blockDefValue === "object" ? blockDefValue.id : typeof blockDefValue === "string" || typeof blockDefValue === "number" ? blockDefValue : null;
+    if (defId === prevDefIdRef.current) return;
+    prevDefIdRef.current = defId;
+    if (!defId) {
+      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((err) => {
+      console.error("[Block Builder] BlockVersionSync fetch error:", err);
+    });
+  }, [blockDefValue, setVersion]);
+  return null;
+}
+
+// src/components/SchemaBuilderField/index.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_ui3 = require("@payloadcms/ui");
 
 // src/components/SchemaBuilderField/FieldRow.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/components/SchemaBuilderField/OptionsEditor.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 function OptionsEditor({ options, onChange, readOnly }) {
   function addOption() {
     onChange([...options, { label: "", value: "" }]);
@@ -406,7 +571,7 @@ function OptionsEditor({ options, onChange, readOnly }) {
   function removeOption(index) {
     onChange(options.filter((_, i) => i !== index));
   }
-  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ import_react3.default.createElement(
     "span",
     {
       style: {
@@ -421,8 +586,8 @@ function OptionsEditor({ options, onChange, readOnly }) {
       }
     },
     "Options",
-    options.length > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", options.length, ")")
-  ), options.length === 0 && /* @__PURE__ */ import_react2.default.createElement(
+    options.length > 0 && /* @__PURE__ */ import_react3.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", options.length, ")")
+  ), options.length === 0 && /* @__PURE__ */ import_react3.default.createElement(
     "p",
     {
       style: {
@@ -434,7 +599,7 @@ function OptionsEditor({ options, onChange, readOnly }) {
       }
     },
     "No options yet."
-  ), options.map((opt, i) => /* @__PURE__ */ import_react2.default.createElement("div", { key: i, className: "sbf-options-row" }, /* @__PURE__ */ import_react2.default.createElement(
+  ), options.map((opt, i) => /* @__PURE__ */ import_react3.default.createElement("div", { key: i, className: "sbf-options-row" }, /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -444,7 +609,7 @@ function OptionsEditor({ options, onChange, readOnly }) {
       disabled: readOnly,
       onChange: (e) => updateOption(i, "label", e.target.value)
     }
-  ), /* @__PURE__ */ import_react2.default.createElement(
+  ), /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -454,7 +619,7 @@ function OptionsEditor({ options, onChange, readOnly }) {
       disabled: readOnly,
       onChange: (e) => updateOption(i, "value", e.target.value)
     }
-  ), !readOnly && /* @__PURE__ */ import_react2.default.createElement(
+  ), !readOnly && /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       type: "button",
@@ -463,37 +628,37 @@ function OptionsEditor({ options, onChange, readOnly }) {
       onClick: () => removeOption(i)
     },
     "x"
-  ))), !readOnly && /* @__PURE__ */ import_react2.default.createElement(
+  ))), !readOnly && /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       type: "button",
       className: "sbf-add-btn sbf-add-btn--small",
       onClick: addOption
     },
-    /* @__PURE__ */ import_react2.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
+    /* @__PURE__ */ import_react3.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
     "Add Option"
   ));
 }
 
 // src/components/SchemaBuilderField/NestedFieldsEditor.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 function NestedFieldsEditor({ fields, onChange, readOnly, depth = 1 }) {
-  const addField = (0, import_react3.useCallback)(() => {
+  const addField = (0, import_react4.useCallback)(() => {
     onChange([...fields, { name: "", type: "text", label: "", required: false }]);
   }, [fields, onChange]);
-  const updateField = (0, import_react3.useCallback)(
+  const updateField = (0, import_react4.useCallback)(
     (index, updated) => {
       onChange(fields.map((f, i) => i === index ? updated : f));
     },
     [fields, onChange]
   );
-  const removeField = (0, import_react3.useCallback)(
+  const removeField = (0, import_react4.useCallback)(
     (index) => {
       onChange(fields.filter((_, i) => i !== index));
     },
     [fields, onChange]
   );
-  const moveField = (0, import_react3.useCallback)(
+  const moveField = (0, import_react4.useCallback)(
     (index, dir) => {
       const next = [...fields];
       const target = index + dir;
@@ -503,7 +668,7 @@ function NestedFieldsEditor({ fields, onChange, readOnly, depth = 1 }) {
     },
     [fields, onChange]
   );
-  return /* @__PURE__ */ import_react3.default.createElement("div", { className: "sbf-nested" }, /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-nested" }, /* @__PURE__ */ import_react4.default.createElement(
     "span",
     {
       style: {
@@ -518,8 +683,8 @@ function NestedFieldsEditor({ fields, onChange, readOnly, depth = 1 }) {
       }
     },
     "Nested fields",
-    fields.length > 0 && /* @__PURE__ */ import_react3.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", fields.length, ")")
-  ), fields.length === 0 && /* @__PURE__ */ import_react3.default.createElement(
+    fields.length > 0 && /* @__PURE__ */ import_react4.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", fields.length, ")")
+  ), fields.length === 0 && /* @__PURE__ */ import_react4.default.createElement(
     "p",
     {
       style: {
@@ -531,7 +696,7 @@ function NestedFieldsEditor({ fields, onChange, readOnly, depth = 1 }) {
       }
     },
     "No nested fields yet."
-  ), fields.length > 0 && /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ import_react3.default.createElement(
+  ), fields.length > 0 && /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ import_react4.default.createElement(
     FieldRow,
     {
       key: i,
@@ -545,14 +710,14 @@ function NestedFieldsEditor({ fields, onChange, readOnly, depth = 1 }) {
       readOnly,
       depth
     }
-  ))), !readOnly && /* @__PURE__ */ import_react3.default.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ import_react3.default.createElement(
+  ))), !readOnly && /* @__PURE__ */ import_react4.default.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       type: "button",
       className: "sbf-add-btn sbf-add-btn--small",
       onClick: addField
     },
-    /* @__PURE__ */ import_react3.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
+    /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
     "Add Nested Field"
   )));
 }
@@ -599,10 +764,10 @@ var TYPE_BADGE_COLORS = {
   blocks: "var(--theme-elevation-150)"
 };
 function FieldLabel({ children, required }) {
-  return /* @__PURE__ */ import_react4.default.createElement("label", { className: `sbf-label${required ? " sbf-label--required" : ""}` }, children);
+  return /* @__PURE__ */ import_react5.default.createElement("label", { className: `sbf-label${required ? " sbf-label--required" : ""}` }, children);
 }
 function FieldWrap({ children }) {
-  return /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, children);
+  return /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, children);
 }
 function FieldRow({
   index,
@@ -614,9 +779,9 @@ function FieldRow({
   readOnly,
   depth = 0
 }) {
-  const [expanded, setExpanded] = (0, import_react4.useState)(false);
-  const [showAdmin, setShowAdmin] = (0, import_react4.useState)(false);
-  const [showConditions, setShowConditions] = (0, import_react4.useState)(false);
+  const [expanded, setExpanded] = (0, import_react5.useState)(false);
+  const [showAdmin, setShowAdmin] = (0, import_react5.useState)(false);
+  const [showConditions, setShowConditions] = (0, import_react5.useState)(false);
   const maxDepth = 3;
   const canNest = depth < maxDepth;
   const needsOptions = field.type === "select" || field.type === "multiselect";
@@ -625,7 +790,7 @@ function FieldRow({
     onChange({ ...field, [key]: val });
   }
   const badgeBg = TYPE_BADGE_COLORS[field.type] ?? "var(--theme-elevation-150)";
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `sbf-row${expanded ? "" : " sbf-row--collapsed"}` }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: `sbf-row${expanded ? "" : " sbf-row--collapsed"}` }, /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       className: "sbf-row__header",
@@ -633,7 +798,7 @@ function FieldRow({
       "aria-expanded": expanded,
       onClick: () => setExpanded((p) => !p)
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -650,9 +815,9 @@ function FieldRow({
       },
       ">"
     ),
-    /* @__PURE__ */ import_react4.default.createElement("span", { className: `sbf-row__label${!field.name ? " sbf-row__label--empty" : ""}` }, field.name || "unnamed field"),
-    field.required && /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: "var(--theme-error-500, #ef4444)", fontSize: 16, lineHeight: 1, flexShrink: 0 } }, "*"),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("span", { className: `sbf-row__label${!field.name ? " sbf-row__label--empty" : ""}` }, field.name || "unnamed field"),
+    field.required && /* @__PURE__ */ import_react5.default.createElement("span", { style: { color: "var(--theme-error-500, #ef4444)", fontSize: 16, lineHeight: 1, flexShrink: 0 } }, "*"),
+    /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         className: "sbf-type-badge",
@@ -660,15 +825,15 @@ function FieldRow({
       },
       field.type
     ),
-    !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+    !readOnly && /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         style: { display: "flex", gap: 2, flexShrink: 0, alignItems: "center" },
         onClick: (e) => e.stopPropagation()
       },
-      onMoveUp && /* @__PURE__ */ import_react4.default.createElement("button", { type: "button", className: "sbf-icon-btn", onClick: onMoveUp, title: "Move up" }, "^"),
-      onMoveDown && /* @__PURE__ */ import_react4.default.createElement("button", { type: "button", className: "sbf-icon-btn", onClick: onMoveDown, title: "Move down" }, "v"),
-      /* @__PURE__ */ import_react4.default.createElement(
+      onMoveUp && /* @__PURE__ */ import_react5.default.createElement("button", { type: "button", className: "sbf-icon-btn", onClick: onMoveUp, title: "Move up" }, "^"),
+      onMoveDown && /* @__PURE__ */ import_react5.default.createElement("button", { type: "button", className: "sbf-icon-btn", onClick: onMoveDown, title: "Move down" }, "v"),
+      /* @__PURE__ */ import_react5.default.createElement(
         "button",
         {
           type: "button",
@@ -679,7 +844,7 @@ function FieldRow({
         "x"
       )
     )
-  ), expanded && /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-row__content" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, { required: true }, "Field Name"), /* @__PURE__ */ import_react4.default.createElement(
+  ), expanded && /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-row__content" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, { required: true }, "Field Name"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -689,7 +854,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("name", e.target.value)
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, { required: true }, "Type"), /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, { required: true }, "Type"), /* @__PURE__ */ import_react5.default.createElement(
     "select",
     {
       className: "sbf-input sbf-select",
@@ -697,8 +862,8 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("type", e.target.value)
     },
-    ALL_FIELD_TYPES.map((t) => /* @__PURE__ */ import_react4.default.createElement("option", { key: t, value: t }, t))
-  ))), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Label"), /* @__PURE__ */ import_react4.default.createElement(
+    ALL_FIELD_TYPES.map((t) => /* @__PURE__ */ import_react5.default.createElement("option", { key: t, value: t }, t))
+  ))), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Label"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -708,7 +873,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("label", e.target.value)
     }
-  )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ import_react4.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ import_react5.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "checkbox",
@@ -716,7 +881,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("required", e.target.checked)
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-checkbox-label" }, "Required"))), field.type === "number" && /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Min"), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-checkbox-label" }, "Required"))), field.type === "number" && /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Min"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -725,7 +890,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("min", e.target.value === "" ? void 0 : e.target.valueAsNumber)
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Max"), /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Max"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -734,7 +899,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("max", e.target.value === "" ? void 0 : e.target.valueAsNumber)
     }
-  ))), (field.type === "text" || field.type === "textarea") && /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Min Length"), /* @__PURE__ */ import_react4.default.createElement(
+  ))), (field.type === "text" || field.type === "textarea") && /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Min Length"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -743,7 +908,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("minLength", e.target.value === "" ? void 0 : e.target.valueAsNumber)
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Max Length"), /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Max Length"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -752,7 +917,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("maxLength", e.target.value === "" ? void 0 : e.target.valueAsNumber)
     }
-  ))), field.type === "array" && /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Min Rows"), /* @__PURE__ */ import_react4.default.createElement(
+  ))), field.type === "array" && /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Min Rows"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -761,7 +926,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("minRows", e.target.value === "" ? void 0 : e.target.valueAsNumber)
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Max Rows"), /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Max Rows"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -770,7 +935,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("maxRows", e.target.value === "" ? void 0 : e.target.valueAsNumber)
     }
-  ))), field.type === "relationship" && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, { required: true }, "Collection slug"), /* @__PURE__ */ import_react4.default.createElement(
+  ))), field.type === "relationship" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, { required: true }, "Collection slug"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -780,7 +945,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("collection", e.target.value)
     }
-  )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ import_react4.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ import_react5.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "checkbox",
@@ -788,14 +953,14 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("hasMany", e.target.checked)
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-checkbox-label" }, "Has Many")))), needsOptions && /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-checkbox-label" }, "Has Many")))), needsOptions && /* @__PURE__ */ import_react5.default.createElement(
     OptionsEditor,
     {
       options: field.options ?? [],
       onChange: (opts) => set("options", opts),
       readOnly
     }
-  ), needsNested && canNest && /* @__PURE__ */ import_react4.default.createElement(
+  ), needsNested && canNest && /* @__PURE__ */ import_react5.default.createElement(
     NestedFieldsEditor,
     {
       fields: field.fields ?? [],
@@ -803,7 +968,7 @@ function FieldRow({
       readOnly,
       depth: depth + 1
     }
-  ), needsNested && !canNest && /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-description" }, "Maximum nesting depth (", depth, ") reached."), /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-section" }, /* @__PURE__ */ import_react4.default.createElement(
+  ), needsNested && !canNest && /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-description" }, "Maximum nesting depth (", depth, ") reached."), /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-section" }, /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -811,8 +976,8 @@ function FieldRow({
       onClick: () => setShowAdmin((p) => !p)
     },
     "Admin & UI settings",
-    /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-section__toggle-icon" }, ">")
-  ), showAdmin && /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-section__body" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Description"), /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-section__toggle-icon" }, ">")
+  ), showAdmin && /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-section__body" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Description"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -822,7 +987,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("admin", { ...field.admin, description: e.target.value })
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Placeholder"), /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Placeholder"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -832,7 +997,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("admin", { ...field.admin, placeholder: e.target.value })
     }
-  )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ import_react4.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ import_react5.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "checkbox",
@@ -840,7 +1005,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("admin", { ...field.admin, readOnly: e.target.checked })
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-checkbox-label" }, "Read Only")), /* @__PURE__ */ import_react4.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-checkbox-label" }, "Read Only")), /* @__PURE__ */ import_react5.default.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "checkbox",
@@ -848,7 +1013,7 @@ function FieldRow({
       disabled: readOnly,
       onChange: (e) => set("admin", { ...field.admin, hidden: e.target.checked })
     }
-  ), /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-checkbox-label" }, "Hidden"))))), /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-section" }, /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-checkbox-label" }, "Hidden"))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-section" }, /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -856,7 +1021,7 @@ function FieldRow({
       onClick: () => setShowConditions((p) => !p)
     },
     "Conditional logic",
-    (field.conditions?.length ?? 0) > 0 && /* @__PURE__ */ import_react4.default.createElement(
+    (field.conditions?.length ?? 0) > 0 && /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -870,8 +1035,8 @@ function FieldRow({
       " rule",
       field.conditions.length !== 1 ? "s" : ""
     ),
-    /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-section__toggle-icon" }, ">")
-  ), showConditions && /* @__PURE__ */ import_react4.default.createElement("div", { className: "sbf-section__body" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Condition Mode"), /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-section__toggle-icon" }, ">")
+  ), showConditions && /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-section__body" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Condition Mode"), /* @__PURE__ */ import_react5.default.createElement(
     "select",
     {
       className: "sbf-input sbf-select",
@@ -880,9 +1045,9 @@ function FieldRow({
       onChange: (e) => set("conditionMode", e.target.value),
       style: { width: "auto", minWidth: 240 }
     },
-    /* @__PURE__ */ import_react4.default.createElement("option", { value: "AND" }, "AND - all conditions must match"),
-    /* @__PURE__ */ import_react4.default.createElement("option", { value: "OR" }, "OR - any condition must match")
-  )), (field.conditions ?? []).map((cond, ci) => /* @__PURE__ */ import_react4.default.createElement("div", { key: ci, className: "sbf-conditions-grid" }, /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Field"), /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("option", { value: "AND" }, "AND - all conditions must match"),
+    /* @__PURE__ */ import_react5.default.createElement("option", { value: "OR" }, "OR - any condition must match")
+  )), (field.conditions ?? []).map((cond, ci) => /* @__PURE__ */ import_react5.default.createElement("div", { key: ci, className: "sbf-conditions-grid" }, /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Field"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -896,7 +1061,7 @@ function FieldRow({
         set("conditions", next);
       }
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Operator"), /* @__PURE__ */ import_react4.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Operator"), /* @__PURE__ */ import_react5.default.createElement(
     "select",
     {
       className: "sbf-input sbf-select",
@@ -908,8 +1073,8 @@ function FieldRow({
         set("conditions", next);
       }
     },
-    ["equals", "not_equals", "contains", "not_contains", "greater_than", "less_than", "in", "not_in", "exists", "empty"].map((op) => /* @__PURE__ */ import_react4.default.createElement("option", { key: op, value: op }, op.replace(/_/g, " ")))
-  )), /* @__PURE__ */ import_react4.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react4.default.createElement(FieldLabel, null, "Value"), /* @__PURE__ */ import_react4.default.createElement(
+    ["equals", "not_equals", "contains", "not_contains", "greater_than", "less_than", "in", "not_in", "exists", "empty"].map((op) => /* @__PURE__ */ import_react5.default.createElement("option", { key: op, value: op }, op.replace(/_/g, " ")))
+  )), /* @__PURE__ */ import_react5.default.createElement(FieldWrap, null, /* @__PURE__ */ import_react5.default.createElement(FieldLabel, null, "Value"), /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       className: "sbf-input",
@@ -922,7 +1087,7 @@ function FieldRow({
         set("conditions", next);
       }
     }
-  )), !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+  )), !readOnly && /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -934,7 +1099,7 @@ function FieldRow({
       }
     },
     "x"
-  ))), !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+  ))), !readOnly && /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -946,136 +1111,80 @@ function FieldRow({
         ]);
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
+    /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
     "Add Condition"
   )))));
 }
 
-// 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 {
-  }
-  return [];
-}
-function SchemaBuilderField({ path, readOnly }) {
-  const { value, setValue } = (0, import_ui2.useField)({ path });
-  const setValueRef = (0, import_react5.useRef)(setValue);
-  (0, import_react5.useEffect)(() => {
-    setValueRef.current = setValue;
-  });
-  const [fields, setFields] = (0, import_react5.useState)(() => parseSchema(value));
-  const hasExistingValue = value !== void 0 && value !== null;
-  const [hydrated, setHydrated] = (0, import_react5.useState)(!hasExistingValue);
-  (0, import_react5.useEffect)(() => {
-    if (hydrated) return;
-    if (value !== void 0 && value !== null) {
-      setFields(parseSchema(value));
-      setHydrated(true);
-    }
-  }, [value, hydrated]);
-  (0, import_react5.useEffect)(() => {
-    if (!hydrated) return;
-    setValueRef.current({ fields });
-  }, [fields, hydrated]);
-  const addField = (0, import_react5.useCallback)(() => {
-    setFields((prev) => [
-      ...prev,
-      { name: "", type: "text", label: "", required: false }
-    ]);
-  }, []);
-  const updateField = (0, import_react5.useCallback)((index, updated) => {
-    setFields((prev) => prev.map((f, i) => i === index ? updated : f));
-  }, []);
-  const removeField = (0, import_react5.useCallback)((index) => {
-    setFields((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-  const moveField = (0, import_react5.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_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ import_react5.default.createElement(
-    "span",
-    {
-      style: {
-        marginLeft: 8,
-        fontSize: 11,
-        color: "var(--theme-elevation-400)",
-        fontWeight: 400
-      }
-    },
-    "(",
-    fields.length,
-    ")"
-  ))), fields.length === 0 ? /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ import_react5.default.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field")));
-}
-
-// src/components/EditInBuilderButton/index.tsx
+// src/block-builder/components/ErrorBoundary.tsx
 var import_react6 = __toESM(require("react"), 1);
-var import_ui3 = require("@payloadcms/ui");
-var import_ui4 = require("@payloadcms/ui");
-function EditInBuilderButton() {
-  const { id } = (0, import_ui3.useDocumentInfo)();
-  const { value: slug } = (0, import_ui4.useField)({ path: "slug" });
-  if (!id || !slug) return null;
-  return /* @__PURE__ */ import_react6.default.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ import_react6.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_react16 = __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");
+
+// src/utils/uuid.ts
+function uuidv4() {
+  const c = globalThis.crypto;
+  if (typeof c?.randomUUID === "function") {
+    return c.randomUUID();
+  }
+  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)."
+  );
+}
+
+// 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 = [];
+      }
+      currentFields = tab.fields;
+      continue;
+    }
+    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;
+}
+function getTargetFields(block, parentPath) {
+  return walkPath(block, parentPath, false);
+}
+function ensureTargetFields(block, parentPath) {
+  return walkPath(block, parentPath, true);
+}
 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`,
@@ -1083,7 +1192,6 @@ function createDefaultField(type) {
   };
   switch (type) {
     case "select":
-    case "radio":
       return {
         ...base,
         options: [
@@ -1092,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" },
@@ -1124,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) => {
@@ -1136,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;
         }),
@@ -1147,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;
@@ -1164,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;
         }),
@@ -1201,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) => {
@@ -1209,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
@@ -1222,163 +1388,191 @@ var useBuilderStore = (0, import_zustand.create)()(
   )
 );
 
-// src/block-builder/components/canvas/TopBar.tsx
-var import_react7 = __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}`);
+// 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.type === "richText") {
-    lines.push(`${pad}editor: lexicalEditor({})`);
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
   }
-  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)}'`);
-  }
-  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}`);
-  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");
-}
-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"
-  };
+  return [];
 }
-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 }) {
+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);
@@ -1386,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 [notification, setNotification] = (0, import_react7.useState)(null);
-  const [versionDropdownOpen, setVersionDropdownOpen] = (0, import_react7.useState)(false);
-  const [blockPickerOpen, setBlockPickerOpen] = (0, import_react7.useState)(false);
-  const dropdownRef = (0, import_react7.useRef)(null);
-  const blockPickerRef = (0, import_react7.useRef)(null);
+  const loadBlock = useBuilderStore((s) => s.loadBlock);
+  const setNotification = onSetNotification;
+  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_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (notification?.status === "success") {
       const t = setTimeout(() => setNotification(null), 3e3);
       return () => clearTimeout(t);
     }
   }, [notification]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     function handleClick(e) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setVersionDropdownOpen(false);
@@ -1416,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();
@@ -1430,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({
@@ -1449,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_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-topbar__dirty" }, "* unsaved")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ import_react7.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_react7.default.createElement(import_lucide_react.Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
-    /* @__PURE__ */ import_react7.default.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
-    /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
-  ), blockPickerOpen && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ import_react7.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,
@@ -1488,20 +1710,20 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         onBlockSelect(b.slug);
       }
     },
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
-  )))), versions.length > 0 && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ import_react7.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_react7.default.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
-    /* @__PURE__ */ import_react7.default.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
-    selectedVersion?.isCurrent && /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-selector__badge" }, "current"),
-    /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
-  ), versionDropdownOpen && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ import_react7.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,
@@ -1512,20 +1734,45 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         onVersionSelect(v.id);
       }
     },
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-selector__badge" }, "current")),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "..." : ""}` : formatDate(v.createdAt))
-  ))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ import_react7.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"
     },
-    "Export .ts"
-  ), isReadOnly ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+    "Import JSON"
+  ), /* @__PURE__ */ import_react9.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleExportJson,
+      disabled: !activeBlock,
+      className: "bb-btn bb-btn--secondary"
+    },
+    "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",
@@ -1536,7 +1783,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       disabled: !currentVersion
     },
     "Back to current"
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
@@ -1548,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_react7.default.createElement(
+  )) : /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       type: "button",
@@ -1557,37 +1804,55 @@ 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_react7.default.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ import_react7.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ import_react7.default.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ import_react7.default.createElement("li", { key: i }, e)))), /* @__PURE__ */ import_react7.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react7.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_react8 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_lucide_react2 = require("lucide-react");
-function BlockList() {
+function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const addBlock = useBuilderStore((s) => s.addBlock);
   const removeBlock = useBuilderStore((s) => s.removeBlock);
   const duplicateBlock = useBuilderStore((s) => s.duplicateBlock);
   const setActiveBlock = useBuilderStore((s) => s.setActiveBlock);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ import_react8.default.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react2.Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar__body" }, blocks.length === 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ import_react8.default.createElement("br", null), "Click + to create one."), blocks.map((block) => {
+  const useApiNav = blockDefs.length > 0;
+  const loadedBlock = useApiNav ? blocks.find((b) => b.slug === activeSlug) : null;
+  const localOnlyBlocks = blocks.filter(
+    (b) => !blockDefs.some((d) => d.slug === b.slug)
+  );
+  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_react10.default.createElement(
+      "div",
+      {
+        key: def.id,
+        onClick: () => onBlockSelect?.(def.slug),
+        className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
+      },
+      /* @__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_react8.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_react8.default.createElement("div", { className: "bb-block-item__slug" }, block.slug),
-      /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
-      /* @__PURE__ */ import_react8.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_react8.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement(
           "button",
           {
             type: "button",
@@ -1595,9 +1860,9 @@ function BlockList() {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          /* @__PURE__ */ import_react8.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_react8.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement(
           "button",
           {
             type: "button",
@@ -1605,69 +1870,103 @@ function BlockList() {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          /* @__PURE__ */ import_react8.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_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_react10 = __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_react9 = __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_react9.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_react9.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_react9.default.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ import_react9.default.createElement(FieldIcon, { type: field.type })),
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__required" }, "*"))),
-      /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
-      !isReadOnly && /* @__PURE__ */ import_react9.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",
@@ -1679,21 +1978,46 @@ function SortableFieldCard({ field, blockId, index }) {
           className: "bb-field-card__delete",
           title: "Remove field"
         },
-        /* @__PURE__ */ import_react9.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_react9.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 } }),
@@ -1703,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_react10.default.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react10.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_react10.default.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-canvas__header" }, block.slug, " - ", block.fields.length, " field", block.fields.length !== 1 ? "s" : ""), block.fields.length === 0 ? /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ import_react10.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,
@@ -1720,19 +2069,22 @@ function BuilderCanvas() {
       modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement],
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ import_react10.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_react10.default.createElement("div", { className: "bb-canvas__field-list" }, block.fields.map((field, i) => /* @__PURE__ */ import_react10.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
         }
       )))
     )
@@ -1740,18 +2092,18 @@ function BuilderCanvas() {
 }
 
 // src/block-builder/components/canvas/ConfigPanel.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/block-builder/components/config/BlockConfig.tsx
-var import_react11 = __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_react11.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_react11.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react11.default.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ import_react11.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",
@@ -1760,7 +2112,7 @@ function BlockConfig() {
       placeholder: "myBlock",
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react11.default.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ import_react11.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",
@@ -1769,7 +2121,7 @@ function BlockConfig() {
       placeholder: "MyBlock",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react11.default.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ import_react11.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",
@@ -1778,7 +2130,7 @@ function BlockConfig() {
       placeholder: "My Block",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react11.default.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ import_react11.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",
@@ -1787,7 +2139,7 @@ function BlockConfig() {
       placeholder: "My Blocks",
       className: "bb-input"
     }
-  ))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react11.default.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ import_react11.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",
@@ -1796,38 +2148,62 @@ function BlockConfig() {
       placeholder: "https://...",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ import_react11.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_react12 = __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_react12.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_react12.default.createElement("div", { className: "bb-form" }, /* @__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" }, "Field Name *"), /* @__PURE__ */ import_react12.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",
@@ -1836,15 +2212,15 @@ function FieldConfig() {
       placeholder: "fieldName",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ import_react12.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_react12.default.createElement("option", { key: t, value: t }, t))
-  ))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ import_react12.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",
@@ -1853,28 +2229,44 @@ function FieldConfig() {
       placeholder: "Human-readable label",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Default Value"), /* @__PURE__ */ import_react12.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",
@@ -1883,23 +2275,23 @@ function FieldConfig() {
       placeholder: "Default value",
       className: "bb-input"
     }
-  )), field.type === "relationship" && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ import_react12.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_react12.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react12.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_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" }, "Min Rows"), /* @__PURE__ */ import_react12.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",
@@ -1907,7 +2299,7 @@ function FieldConfig() {
       onChange: (e) => upd({ minRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ import_react12.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",
@@ -1915,7 +2307,54 @@ function FieldConfig() {
       onChange: (e) => upd({ maxRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
       className: "bb-input"
     }
-  ))), needsOptions && /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ import_react12.default.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ import_react12.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",
@@ -1928,7 +2367,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react12.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement(
     "input",
     {
       type: "text",
@@ -1941,7 +2380,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react12.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement(
     "button",
     {
       type: "button",
@@ -1953,7 +2392,7 @@ function FieldConfig() {
       title: "Remove option"
     },
     "x"
-  ))), /* @__PURE__ */ import_react12.default.createElement(
+  ))), /* @__PURE__ */ import_react14.default.createElement(
     "button",
     {
       type: "button",
@@ -1966,11 +2405,11 @@ function FieldConfig() {
 
 // src/block-builder/components/canvas/ConfigPanel.tsx
 function ConfigPanel() {
-  const [tab, setTab] = (0, import_react13.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_react13.default.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ import_react13.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,
@@ -1979,11 +2418,11 @@ function ConfigPanel() {
       className: `bb-config__tab${activeTab === t ? " bb-config__tab--active" : ""}`
     },
     t
-  ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ import_react13.default.createElement(BlockConfig, null) : /* @__PURE__ */ import_react13.default.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ import_react13.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_react14 = __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
@@ -1997,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" }
 ];
@@ -2010,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) {
@@ -2031,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_react14.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);
@@ -2045,7 +2494,7 @@ function FieldPalette() {
     if (!activeBlockId || isReadOnly) return;
     addField(activeBlockId, type);
   }
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ import_react14.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",
@@ -2054,7 +2503,7 @@ function FieldPalette() {
       placeholder: "Search...",
       className: "bb-palette__search"
     }
-  )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ import_react14.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,
@@ -2066,7 +2515,7 @@ function FieldPalette() {
     }
   ))) : FIELD_CATEGORIES.map((cat) => {
     const items = FIELD_PALETTE.filter((f) => f.category === cat.id);
-    return /* @__PURE__ */ import_react14.default.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ import_react14.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,
@@ -2077,7 +2526,7 @@ function FieldPalette() {
         disabled: !activeBlockId || isReadOnly
       }
     ))));
-  })), !activeBlockId && /* @__PURE__ */ import_react14.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,
@@ -2088,7 +2537,7 @@ function FieldButton({
 }) {
   const meta = getFieldMeta(type);
   const Icon = ICON_MAP2[icon];
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "button",
     {
       type: "button",
@@ -2097,14 +2546,291 @@ function FieldButton({
       title: meta?.description,
       className: "bb-palette__item"
     },
-    /* @__PURE__ */ import_react14.default.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ import_react14.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
-    /* @__PURE__ */ import_react14.default.createElement("span", { className: "bb-palette__item__label" }, label),
-    /* @__PURE__ */ import_react14.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_react15 = __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",
@@ -2192,22 +2918,22 @@ var TOKEN_COLORS = {
 };
 function HighlightedCode({ code }) {
   const tokens = tokenise(code);
-  return /* @__PURE__ */ import_react15.default.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ import_react15.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_react15.useState)({});
-  const [activeFile, setActiveFile] = (0, import_react15.useState)(null);
-  const [copied, setCopied] = (0, import_react15.useState)(false);
-  const timerRef = (0, import_react15.useRef)(null);
-  const copyTimerRef = (0, import_react15.useRef)(null);
-  const regenerate = (0, import_react15.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;
@@ -2218,7 +2944,7 @@ function CodePreview() {
       return prev && keys.includes(prev) ? prev : keys[0] ?? null;
     });
   }, [blocks]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(regenerate, 300);
     return () => {
@@ -2237,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_react15.default.createElement(
+    return /* @__PURE__ */ import_react17.default.createElement(
       "div",
       {
         className: "code-preview",
@@ -2254,7 +2980,7 @@ function CodePreview() {
       "Add a block to see generated TypeScript code"
     );
   }
-  return /* @__PURE__ */ import_react15.default.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ import_react15.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: {
@@ -2268,7 +2994,7 @@ function CodePreview() {
     },
     fileNames.map((name) => {
       const isActive = activeFile === name;
-      return /* @__PURE__ */ import_react15.default.createElement(
+      return /* @__PURE__ */ import_react17.default.createElement(
         "button",
         {
           key: name,
@@ -2291,8 +3017,8 @@ function CodePreview() {
         name
       );
     }),
-    /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1 } }),
-    lineCount > 0 && /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1 } }),
+    lineCount > 0 && /* @__PURE__ */ import_react17.default.createElement(
       "span",
       {
         style: {
@@ -2305,7 +3031,7 @@ function CodePreview() {
       lineCount,
       " lines"
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react17.default.createElement(
       "button",
       {
         type: "button",
@@ -2328,7 +3054,7 @@ function CodePreview() {
       },
       copied ? "Copied" : "Copy"
     )
-  ), /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ import_react15.default.createElement(
+  ), /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       style: {
@@ -2345,8 +3071,8 @@ function CodePreview() {
       },
       "aria-hidden": "true"
     },
-    activeCode.split("\n").map((_, i) => /* @__PURE__ */ import_react15.default.createElement("div", { key: i }, i + 1))
-  ), /* @__PURE__ */ import_react15.default.createElement(
+    activeCode.split("\n").map((_, i) => /* @__PURE__ */ import_react17.default.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ import_react17.default.createElement(
     "pre",
     {
       style: {
@@ -2361,69 +3087,214 @@ function CodePreview() {
         whiteSpace: "pre"
       }
     },
-    /* @__PURE__ */ import_react15.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_react16.useState)(loadSlug ?? null);
-  const [loading, setLoading] = (0, import_react16.useState)(!!loadSlug);
-  const [loadError, setLoadError] = (0, import_react16.useState)(null);
-  const [showCodePreview, setShowCodePreview] = (0, import_react16.useState)(false);
-  const [versions, setVersions] = (0, import_react16.useState)([]);
-  const [selectedVersionId, setSelectedVersionId] = (0, import_react16.useState)(null);
-  const [blockDefs, setBlockDefs] = (0, import_react16.useState)([]);
-  const [mobilePanelTab, setMobilePanelTab] = (0, import_react16.useState)("blocks");
-  (0, import_react16.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);
-      setLoadError("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_react16.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_react16.useCallback)(async (slug, versionId) => {
+  const loadVersion = (0, import_react19.useCallback)(async (slug, versionId) => {
     setLoading(true);
-    setLoadError(null);
+    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);
         setVersionMeta(json.versionId ?? null, !(json.isCurrent ?? true));
         setSelectedVersionId(json.versionId ?? null);
       } else {
-        setLoadError(json.error ?? "Failed to load block");
+        setNotification({ status: "error", title: "Failed to load block", errors: [json.error ?? "Unknown error"] });
       }
     } catch (err) {
-      setLoadError(err instanceof Error ? err.message : "Network error");
+      setNotification({ status: "error", title: "Network error", errors: [err instanceof Error ? err.message : "Could not reach the server."] });
     } finally {
       setLoading(false);
     }
   }, [loadBlock, setVersionMeta]);
-  const loadBlockBySlug = (0, import_react16.useCallback)(async (slug) => {
+  const loadBlockBySlug = (0, import_react19.useCallback)(async (slug) => {
     setActiveSlug(slug);
     setBlockSlug(slug);
     setVersions([]);
     setSelectedVersionId(null);
-    setLoadError(null);
+    setNotification(null);
     setMobilePanelTab("canvas");
     await loadVersion(slug);
     const list = await loadVersionsForSlug(slug);
@@ -2431,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_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!loadSlug) return;
     loadBlockBySlug(loadSlug);
   }, [loadSlug]);
@@ -2447,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_react16.default.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ import_react16.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,
@@ -2464,9 +3343,13 @@ function BuilderShell({ loadSlug }) {
       selectedVersionId,
       onVersionSelect: handleVersionSelect,
       onRestoreVersion: handleRestoreVersion,
-      onAfterPublish: handleAfterPublish
+      onAfterPublish: handleAfterPublish,
+      notification,
+      onSetNotification: setNotification,
+      previewOpen,
+      onTogglePreview: () => setPreviewOpen((p) => !p)
     }
-  ), loading && /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-loading-bar" }, "Loading..."), loadError && /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-error-bar" }, "Error: ", loadError), isReadOnly && !loading && /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ import_react16.default.createElement("span", { className: "bb-readonly-banner__icon" }, "[i]"), /* @__PURE__ */ import_react16.default.createElement("span", null, "You are viewing a previous version - read only.", /* @__PURE__ */ import_react16.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",
@@ -2474,7 +3357,7 @@ function BuilderShell({ loadSlug }) {
       onClick: handleRestoreVersion
     },
     "Switch to latest"
-  ))), /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ import_react16.default.createElement(BlockList, null), /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-main__center" }, /* @__PURE__ */ import_react16.default.createElement(FieldPalette, null), /* @__PURE__ */ import_react16.default.createElement(BuilderCanvas, null)), /* @__PURE__ */ import_react16.default.createElement(ConfigPanel, null)), /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ import_react16.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",
@@ -2483,12 +3366,12 @@ function BuilderShell({ loadSlug }) {
     },
     showCodePreview ? "v" : ">",
     " Code Preview"
-  ), showCodePreview && /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ import_react16.default.createElement(CodePreview, null))), /* @__PURE__ */ import_react16.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_react16.default.createElement(
+  ].map(({ id, icon, label }) => /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       key: id,
@@ -2496,16 +3379,16 @@ function BuilderShell({ loadSlug }) {
       className: `bb-mobile-nav__tab${mobilePanelTab === id ? " bb-mobile-nav__tab--active" : ""}`,
       onClick: () => setMobilePanelTab(id)
     },
-    /* @__PURE__ */ import_react16.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_react17 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_link = __toESM(require("next/link"), 1);
 function BlockBuilderNavLink() {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ import_react17.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",
@@ -2532,6 +3415,7 @@ function BlockBuilderNavLink() {
 0 && (module.exports = {
   BlockBuilderNavLink,
   BlockDataField,
+  BlockVersionSync,
   BuilderShell,
   EditInBuilderButton,
   SchemaBuilderField