@nextbridgehq/payload-block-builder 0.1.7 → 0.1.9

package/dist/client.cjs

@@ -32,6 +32,7 @@ var client_exports = {};
 __export(client_exports, {
   BlockBuilderNavLink: () => BlockBuilderNavLink,
   BlockDataField: () => BlockDataField,
+  BlockVersionSync: () => BlockVersionSync,
   BuilderShell: () => BuilderShell,
   EditInBuilderButton: () => EditInBuilderButton,
   SchemaBuilderField: () => SchemaBuilderField
@@ -77,6 +78,133 @@ 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 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 }) => {
+      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, openDrawer }] = (0, import_ui.useListDrawer)({
+    collectionSlugs: [collection]
+  });
+  closeRef.current = closeDrawer;
+  const [fetchedTitles, setFetchedTitles] = (0, import_react.useState)({});
+  const fetchingRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react.useEffect)(() => {
+    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(() => {
+        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 }) {
   const set = (0, import_react.useCallback)(
     (key, val) => onChange({ ...value, [key]: val }),
@@ -102,7 +230,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)
         }
@@ -155,7 +283,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)
         }
       ));
     }
@@ -214,32 +342,25 @@ function FieldInput({ field, value, onChange }) {
           onChange
         }
       );
-    case "relationship":
-      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" }, "*"), field.collection && /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", field.collection, ")")), /* @__PURE__ */ import_react.default.createElement(
-        "input",
+    case "relationship": {
+      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,
         {
-          className: "bdf-input",
-          type: "text",
-          value: value ?? "",
-          onChange: (e) => onChange(e.target.value),
-          placeholder: "Enter document ID"
+          label,
+          required: field.required,
+          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 ?? [];
@@ -335,15 +456,43 @@ 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;
+    }
+    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(() => {
+    });
+  }, [blockDefValue, setVersion]);
+  return null;
+}
+
+// src/components/SchemaBuilderField/index.tsx
+var import_react6 = __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: "" }]);
@@ -354,7 +503,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: {
@@ -369,8 +518,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: {
@@ -382,7 +531,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",
@@ -392,7 +541,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",
@@ -402,7 +551,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",
@@ -411,37 +560,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;
@@ -451,7 +600,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: {
@@ -466,8 +615,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: {
@@ -479,7 +628,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,
@@ -493,14 +642,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"
   )));
 }
@@ -547,10 +696,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,
@@ -562,9 +711,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";
@@ -573,7 +722,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",
@@ -581,7 +730,7 @@ function FieldRow({
       "aria-expanded": expanded,
       onClick: () => setExpanded((p) => !p)
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "span",
       {
         style: {
@@ -598,9 +747,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",
@@ -608,15 +757,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",
@@ -627,7 +776,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",
@@ -637,7 +786,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",
@@ -645,8 +794,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",
@@ -656,7 +805,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",
@@ -664,7 +813,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",
@@ -673,7 +822,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",
@@ -682,7 +831,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",
@@ -691,7 +840,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",
@@ -700,7 +849,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",
@@ -709,7 +858,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",
@@ -718,7 +867,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",
@@ -728,7 +877,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",
@@ -736,14 +885,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 ?? [],
@@ -751,7 +900,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",
@@ -759,8 +908,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",
@@ -770,7 +919,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",
@@ -780,7 +929,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",
@@ -788,7 +937,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",
@@ -796,7 +945,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",
@@ -804,7 +953,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: {
@@ -818,8 +967,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",
@@ -828,9 +977,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",
@@ -844,7 +993,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",
@@ -856,8 +1005,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",
@@ -870,7 +1019,7 @@ function FieldRow({
         set("conditions", next);
       }
     }
-  )), !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+  )), !readOnly && /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -882,7 +1031,7 @@ function FieldRow({
       }
     },
     "x"
-  ))), !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+  ))), !readOnly && /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       type: "button",
@@ -894,7 +1043,7 @@ 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"
   )))));
 }
@@ -911,38 +1060,38 @@ function parseSchema(raw) {
   return [];
 }
 function SchemaBuilderField({ path, readOnly }) {
-  const { value, setValue } = (0, import_ui2.useField)({ path });
-  const setValueRef = (0, import_react5.useRef)(setValue);
-  (0, import_react5.useEffect)(() => {
+  const { value, setValue } = (0, import_ui3.useField)({ path });
+  const setValueRef = (0, import_react6.useRef)(setValue);
+  (0, import_react6.useEffect)(() => {
     setValueRef.current = setValue;
   });
-  const [fields, setFields] = (0, import_react5.useState)(() => parseSchema(value));
+  const [fields, setFields] = (0, import_react6.useState)(() => parseSchema(value));
   const hasExistingValue = value !== void 0 && value !== null;
-  const [hydrated, setHydrated] = (0, import_react5.useState)(!hasExistingValue);
-  (0, import_react5.useEffect)(() => {
+  const [hydrated, setHydrated] = (0, import_react6.useState)(!hasExistingValue);
+  (0, import_react6.useEffect)(() => {
     if (hydrated) return;
     if (value !== void 0 && value !== null) {
       setFields(parseSchema(value));
       setHydrated(true);
     }
   }, [value, hydrated]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!hydrated) return;
     setValueRef.current({ fields });
   }, [fields, hydrated]);
-  const addField = (0, import_react5.useCallback)(() => {
+  const addField = (0, import_react6.useCallback)(() => {
     setFields((prev) => [
       ...prev,
       { name: "", type: "text", label: "", required: false }
     ]);
   }, []);
-  const updateField = (0, import_react5.useCallback)((index, updated) => {
+  const updateField = (0, import_react6.useCallback)((index, updated) => {
     setFields((prev) => prev.map((f, i) => i === index ? updated : f));
   }, []);
-  const removeField = (0, import_react5.useCallback)((index) => {
+  const removeField = (0, import_react6.useCallback)((index) => {
     setFields((prev) => prev.filter((_, i) => i !== index));
   }, []);
-  const moveField = (0, import_react5.useCallback)((index, dir) => {
+  const moveField = (0, import_react6.useCallback)((index, dir) => {
     setFields((prev) => {
       const next = [...prev];
       const target = index + dir;
@@ -951,7 +1100,7 @@ function SchemaBuilderField({ path, readOnly }) {
       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(
+  return /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ import_react6.default.createElement(
     "span",
     {
       style: {
@@ -964,7 +1113,7 @@ function SchemaBuilderField({ path, readOnly }) {
     "(",
     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(
+  ))), fields.length === 0 ? /* @__PURE__ */ import_react6.default.createElement("div", { className: "sbf-empty" }, "No fields defined. Click \u201CAdd Field\u201D below to add the first field to this block schema.") : /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ import_react6.default.createElement(
     FieldRow,
     {
       key: i,
@@ -977,18 +1126,18 @@ function SchemaBuilderField({ path, readOnly }) {
       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")));
+  ))), !readOnly && /* @__PURE__ */ import_react6.default.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ import_react6.default.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field")));
 }
 
 // src/components/EditInBuilderButton/index.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_ui3 = require("@payloadcms/ui");
+var import_react7 = __toESM(require("react"), 1);
 var import_ui4 = require("@payloadcms/ui");
+var import_ui5 = require("@payloadcms/ui");
 function EditInBuilderButton() {
-  const { id } = (0, import_ui3.useDocumentInfo)();
-  const { value: slug } = (0, import_ui4.useField)({ path: "slug" });
+  const { id } = (0, import_ui4.useDocumentInfo)();
+  const { value: slug } = (0, import_ui5.useField)({ path: "slug" });
   if (!id || !slug) return null;
-  return /* @__PURE__ */ import_react6.default.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ import_react7.default.createElement(
     "a",
     {
       href: `/block-builder?load=${slug}`,
@@ -1014,7 +1163,7 @@ function EditInBuilderButton() {
 }
 
 // src/block-builder/components/canvas/BuilderShell.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 
 // src/block-builder/store/builder.store.ts
 var import_zustand = require("zustand");
@@ -1171,7 +1320,8 @@ var useBuilderStore = (0, import_zustand.create)()(
 );
 
 // src/block-builder/components/canvas/TopBar.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
 
 // src/block-builder/lib/mapToSaveRequest.ts
 var TYPE_MAP = {
@@ -1325,7 +1475,7 @@ function generateIndexFile(blocks) {
 }
 
 // src/block-builder/components/canvas/TopBar.tsx
-function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish }) {
+function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish, notification, onSetNotification }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const activeBlock = blocks.find((b) => b.id === activeBlockId);
@@ -1333,21 +1483,21 @@ 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 setNotification = onSetNotification;
+  const [versionDropdownOpen, setVersionDropdownOpen] = (0, import_react8.useState)(false);
+  const [blockPickerOpen, setBlockPickerOpen] = (0, import_react8.useState)(false);
+  const dropdownRef = (0, import_react8.useRef)(null);
+  const blockPickerRef = (0, import_react8.useRef)(null);
   const 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_react8.useEffect)(() => {
     if (notification?.status === "success") {
       const t = setTimeout(() => setNotification(null), 3e3);
       return () => clearTimeout(t);
     }
   }, [notification]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     function handleClick(e) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setVersionDropdownOpen(false);
@@ -1360,7 +1510,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
   async function handlePublish() {
-    if (!activeBlock || isReadOnly) return;
+    if (!activeBlock || isReadOnly) return false;
     setNotification({ status: "publishing" });
     try {
       const req = mapToSaveRequest(activeBlock);
@@ -1377,13 +1527,15 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
           status: "success",
           msg: `v${json.versionNumber ?? "?"} published successfully!`
         });
-        await onAfterPublish();
+        onAfterPublish();
+        return true;
       } else {
         setNotification({
           status: "error",
           title: "Failed to publish block",
           errors: json.errors ?? ["An unknown error occurred."]
         });
+        return false;
       }
     } catch (err) {
       setNotification({
@@ -1391,6 +1543,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         title: "Network error",
         errors: [err instanceof Error ? err.message : "Could not reach the server."]
       });
+      return false;
     }
   }
   function handleExport() {
@@ -1411,17 +1564,17 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
   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_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-topbar__dirty" }, "* unsaved")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       type: "button",
       className: "bb-block-picker__trigger",
       onClick: () => setBlockPickerOpen((o) => !o)
     },
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-block-picker__icon" }, "B"),
-    /* @__PURE__ */ import_react7.default.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-selector__chevron" }, "v")
-  ), 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_react8.default.createElement(import_lucide_react.Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
+    /* @__PURE__ */ import_react8.default.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
+    /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
+  ), blockPickerOpen && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       key: b.id,
@@ -1432,20 +1585,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_react8.default.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
+    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
+  )))), versions.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ import_react8.default.createElement(
     "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("span", { className: "bb-version-selector__chevron" }, "v")
-  ), 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_react8.default.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ import_react8.default.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
+    selectedVersion?.isCurrent && /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-selector__badge" }, "current"),
+    /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
+  ), versionDropdownOpen && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       key: v.id,
@@ -1456,10 +1609,10 @@ 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_react8.default.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-selector__badge" }, "current")),
+    /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "..." : ""}` : formatDate(v.createdAt))
+  ))))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       type: "button",
@@ -1469,7 +1622,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       style: { display: "none" }
     },
     "Export .ts"
-  ), isReadOnly ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+  ), isReadOnly ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       type: "button",
@@ -1480,20 +1633,19 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       disabled: !currentVersion
     },
     "Back to current"
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       type: "button",
       onClick: async () => {
-        await handlePublish();
-        setVersionMeta(null, false);
-        onRestoreVersion();
+        const success = await handlePublish();
+        if (success) onRestoreVersion();
       },
       disabled: notification?.status === "publishing" || !activeBlock,
       className: "bb-btn bb-btn--warning"
     },
     notification?.status === "publishing" ? "Restoring..." : "Restore as new version"
-  )) : /* @__PURE__ */ import_react7.default.createElement(
+  )) : /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       type: "button",
@@ -1502,36 +1654,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) }, "x"))), 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) }, "x"))));
+  ))), notification?.status === "publishing" && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ import_react8.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ import_react8.default.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ import_react8.default.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ import_react8.default.createElement("li", { key: i }, e)))), /* @__PURE__ */ import_react8.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))));
 }
 
 // src/block-builder/components/canvas/BlockList.tsx
-var import_react8 = __toESM(require("react"), 1);
-function BlockList() {
+var import_react9 = __toESM(require("react"), 1);
+var import_lucide_react2 = require("lucide-react");
+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("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_react9.default.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ import_react9.default.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react2.Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-sidebar__body" }, useApiNav && blockDefs.map((def) => {
+    const isActive = def.slug === activeSlug;
+    const fieldCount = isActive && loadedBlock ? loadedBlock.fields.length : null;
+    return /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        key: def.id,
+        onClick: () => onBlockSelect?.(def.slug),
+        className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
+      },
+      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__slug" }, def.slug),
+      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__meta" }, fieldCount !== null ? `${fieldCount} field${fieldCount !== 1 ? "s" : ""}` : def.name)
+    );
+  }), localOnlyBlocks.map((block) => {
     const isActive = block.id === activeBlockId;
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react9.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_react9.default.createElement("div", { className: "bb-block-item__slug" }, block.slug),
+      /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
+      /* @__PURE__ */ import_react9.default.createElement(
         "div",
         {
           className: "bb-block-item__actions",
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(
           "button",
           {
             type: "button",
@@ -1539,9 +1710,9 @@ function BlockList() {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          "="
+          /* @__PURE__ */ import_react9.default.createElement(import_lucide_react2.Copy, { size: 12, strokeWidth: 1.75 })
         ),
-        /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(
           "button",
           {
             type: "button",
@@ -1549,41 +1720,36 @@ function BlockList() {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          "x"
+          /* @__PURE__ */ import_react9.default.createElement(import_lucide_react2.Trash2, { size: 12, strokeWidth: 1.75 })
         )
       )
     );
-  })));
+  }), !useApiNav && blocks.length === 0 && /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ import_react9.default.createElement("br", null), "Click + to create one.")));
 }
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __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_react10 = __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: "T",
-  textarea: "Tx",
-  richText: "RT",
-  number: "#",
-  checkbox: "[x]",
-  select: "v",
-  radio: "(o)",
-  date: "D",
-  upload: "^",
-  email: "@",
-  code: "<>",
-  point: "P",
-  relationship: "->>",
-  array: "[]",
-  group: "{ }",
-  json: "{ }",
-  ui: "UI"
+  text: import_lucide_react3.Type,
+  textarea: import_lucide_react3.AlignLeft,
+  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,
+  relationship: import_lucide_react3.Link,
+  json: import_lucide_react3.Braces
 };
 function SortableFieldCard({ field, blockId, index }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({
@@ -1592,12 +1758,13 @@ function SortableFieldCard({ field, blockId, index }) {
   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_react10.default.createElement(
     "div",
     {
       ref: setNodeRef,
@@ -1606,16 +1773,16 @@ function SortableFieldCard({ field, blockId, index }) {
       ...attributes,
       ...listeners
     },
-    /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.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" }, ICON_MAP[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),
-      /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ import_react10.default.createElement(FieldIcon, { type: field.type })),
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__required" }, "*"))),
+      /* @__PURE__ */ import_react10.default.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
+      !isReadOnly && /* @__PURE__ */ import_react10.default.createElement(
         "button",
         {
           type: "button",
@@ -1627,11 +1794,15 @@ function SortableFieldCard({ field, blockId, index }) {
           className: "bb-field-card__delete",
           title: "Remove field"
         },
-        "x"
+        /* @__PURE__ */ import_react10.default.createElement(import_lucide_react3.X, { size: 12, strokeWidth: 2 })
       )
     )
   );
 }
+function FieldIcon({ type }) {
+  const Icon = ICON_MAP[type];
+  return Icon ? /* @__PURE__ */ import_react10.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null;
+}
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
 function BuilderCanvas() {
@@ -1654,9 +1825,9 @@ function BuilderCanvas() {
     }
   }
   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_react11.default.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "bb-canvas__no-block" }, "Select or create a block from the left panel."));
   }
-  return /* @__PURE__ */ import_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(
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__header" }, block.slug, " - ", block.fields.length, " field", block.fields.length !== 1 ? "s" : ""), block.fields.length === 0 ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ import_react11.default.createElement(
     import_core.DndContext,
     {
       sensors,
@@ -1664,13 +1835,13 @@ function BuilderCanvas() {
       modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement],
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ import_react10.default.createElement(
+    /* @__PURE__ */ import_react11.default.createElement(
       import_sortable2.SortableContext,
       {
         items: block.fields.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_react11.default.createElement("div", { className: "bb-canvas__field-list" }, block.fields.map((field, i) => /* @__PURE__ */ import_react11.default.createElement(
         SortableFieldCard,
         {
           key: field.id,
@@ -1684,18 +1855,18 @@ function BuilderCanvas() {
 }
 
 // src/block-builder/components/canvas/ConfigPanel.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/block-builder/components/config/BlockConfig.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __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_react12.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_react12.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ import_react12.default.createElement(
     "input",
     {
       type: "text",
@@ -1704,7 +1875,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_react12.default.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ import_react12.default.createElement(
     "input",
     {
       type: "text",
@@ -1713,7 +1884,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_react12.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ import_react12.default.createElement(
     "input",
     {
       type: "text",
@@ -1722,7 +1893,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_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ import_react12.default.createElement(
     "input",
     {
       type: "text",
@@ -1731,7 +1902,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_react12.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ import_react12.default.createElement(
     "input",
     {
       type: "text",
@@ -1740,29 +1911,23 @@ 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_react12.default.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ import_react12.default.createElement("strong", null, block.fields.length), " field", block.fields.length !== 1 ? "s" : "", " defined"));
 }
 
 // src/block-builder/components/config/FieldConfig.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var ALL_TYPES = [
   "text",
   "textarea",
-  "richText",
   "number",
+  "email",
+  "date",
   "checkbox",
   "select",
   "radio",
-  "date",
   "upload",
-  "email",
-  "code",
-  "point",
   "relationship",
-  "array",
-  "group",
-  "json",
-  "ui"
+  "json"
 ];
 function FieldConfig() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
@@ -1771,13 +1936,13 @@ function FieldConfig() {
   const field = block?.fields.find((f) => f.id === activeFieldId);
   const updateField = useBuilderStore((s) => s.updateField);
   if (!activeBlockId || !activeFieldId || !field) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", { className: "bb-form__empty" }, "Select a field to configure it.");
+    return /* @__PURE__ */ import_react13.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(
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Field Name *"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1786,15 +1951,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_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ import_react13.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_react13.default.createElement("option", { key: t, value: t }, t))
+  ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1803,28 +1968,28 @@ 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_react13.default.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.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")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Default Value"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1833,7 +1998,7 @@ 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_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1842,14 +2007,14 @@ function FieldConfig() {
       placeholder: "pages",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react12.default.createElement(
+  )), /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Min Rows"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "number",
@@ -1857,7 +2022,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_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "number",
@@ -1865,7 +2030,7 @@ 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(
+  ))), needsOptions && /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1878,7 +2043,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react12.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement(
     "input",
     {
       type: "text",
@@ -1891,7 +2056,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ import_react12.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement(
     "button",
     {
       type: "button",
@@ -1903,7 +2068,7 @@ function FieldConfig() {
       title: "Remove option"
     },
     "x"
-  ))), /* @__PURE__ */ import_react12.default.createElement(
+  ))), /* @__PURE__ */ import_react13.default.createElement(
     "button",
     {
       type: "button",
@@ -1916,11 +2081,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_react14.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_react14.default.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ import_react14.default.createElement(
     "button",
     {
       key: t,
@@ -1929,12 +2094,12 @@ 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_react14.default.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ import_react14.default.createElement(BlockConfig, null) : /* @__PURE__ */ import_react14.default.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "bb-config__readonly-label" }, "Read only")));
 }
 
 // src/block-builder/components/sidebar/FieldPalette.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_lucide_react = require("lucide-react");
+var import_react15 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
 
 // src/block-builder/lib/field-palette.ts
 var FIELD_PALETTE = [
@@ -1968,22 +2133,23 @@ function getFieldMeta(type) {
 
 // src/block-builder/components/sidebar/FieldPalette.tsx
 var ICON_MAP2 = {
-  Type: import_lucide_react.Type,
-  AlignLeft: import_lucide_react.AlignLeft,
-  Hash: import_lucide_react.Hash,
-  Mail: import_lucide_react.Mail,
-  Calendar: import_lucide_react.Calendar,
-  CheckSquare: import_lucide_react.CheckSquare,
-  ChevronDown: import_lucide_react.ChevronDown,
-  Circle: import_lucide_react.Circle,
-  Upload: import_lucide_react.Upload,
-  Link: import_lucide_react.Link,
-  List: import_lucide_react.List,
-  Folder: import_lucide_react.Folder,
-  Braces: import_lucide_react.Braces
+  Type: import_lucide_react4.Type,
+  AlignLeft: import_lucide_react4.AlignLeft,
+  AlignJustify: import_lucide_react4.AlignJustify,
+  Hash: import_lucide_react4.Hash,
+  Mail: import_lucide_react4.Mail,
+  Calendar: import_lucide_react4.Calendar,
+  CheckSquare: import_lucide_react4.CheckSquare,
+  ChevronDown: import_lucide_react4.ChevronDown,
+  Circle: import_lucide_react4.Circle,
+  Upload: import_lucide_react4.Upload,
+  Link: import_lucide_react4.Link,
+  List: import_lucide_react4.List,
+  Folder: import_lucide_react4.Folder,
+  Braces: import_lucide_react4.Braces
 };
 function FieldPalette() {
-  const [search, setSearch] = (0, import_react14.useState)("");
+  const [search, setSearch] = (0, import_react15.useState)("");
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const addField = useBuilderStore((s) => s.addField);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
@@ -1994,7 +2160,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_react15.default.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ import_react15.default.createElement(
     "input",
     {
       type: "text",
@@ -2003,7 +2169,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_react15.default.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ import_react15.default.createElement(
     FieldButton,
     {
       key: item.type,
@@ -2015,7 +2181,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_react15.default.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ import_react15.default.createElement(
       FieldButton,
       {
         key: item.type,
@@ -2026,7 +2192,7 @@ function FieldPalette() {
         disabled: !activeBlockId || isReadOnly
       }
     ))));
-  })), !activeBlockId && /* @__PURE__ */ import_react14.default.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
+  })), !activeBlockId && /* @__PURE__ */ import_react15.default.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
 }
 function FieldButton({
   type,
@@ -2037,7 +2203,7 @@ function FieldButton({
 }) {
   const meta = getFieldMeta(type);
   const Icon = ICON_MAP2[icon];
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     "button",
     {
       type: "button",
@@ -2046,14 +2212,14 @@ 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_react15.default.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ import_react15.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
+    /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-palette__item__label" }, label),
+    /* @__PURE__ */ import_react15.default.createElement("span", { className: "bb-palette__item__type" }, type)
   );
 }
 
 // src/block-builder/components/canvas/CodePreview.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var KEYWORDS = /* @__PURE__ */ new Set([
   "import",
   "export",
@@ -2141,16 +2307,16 @@ 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_react16.default.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ import_react16.default.createElement("span", { key: i, style: { color: TOKEN_COLORS[tok.kind] } }, tok.text)));
 }
 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_react16.useState)({});
+  const [activeFile, setActiveFile] = (0, import_react16.useState)(null);
+  const [copied, setCopied] = (0, import_react16.useState)(false);
+  const timerRef = (0, import_react16.useRef)(null);
+  const copyTimerRef = (0, import_react16.useRef)(null);
+  const regenerate = (0, import_react16.useCallback)(() => {
     if (blocks.length === 0) {
       setFileMap({});
       setActiveFile(null);
@@ -2167,7 +2333,7 @@ function CodePreview() {
       return prev && keys.includes(prev) ? prev : keys[0] ?? null;
     });
   }, [blocks]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(regenerate, 300);
     return () => {
@@ -2186,7 +2352,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_react16.default.createElement(
       "div",
       {
         className: "code-preview",
@@ -2203,7 +2369,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_react16.default.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ import_react16.default.createElement(
     "div",
     {
       style: {
@@ -2217,7 +2383,7 @@ function CodePreview() {
     },
     fileNames.map((name) => {
       const isActive = activeFile === name;
-      return /* @__PURE__ */ import_react15.default.createElement(
+      return /* @__PURE__ */ import_react16.default.createElement(
         "button",
         {
           key: name,
@@ -2240,8 +2406,8 @@ function CodePreview() {
         name
       );
     }),
-    /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1 } }),
-    lineCount > 0 && /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("div", { style: { flex: 1 } }),
+    lineCount > 0 && /* @__PURE__ */ import_react16.default.createElement(
       "span",
       {
         style: {
@@ -2254,7 +2420,7 @@ function CodePreview() {
       lineCount,
       " lines"
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "button",
       {
         type: "button",
@@ -2277,7 +2443,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_react16.default.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ import_react16.default.createElement(
     "div",
     {
       style: {
@@ -2294,8 +2460,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_react16.default.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ import_react16.default.createElement(
     "pre",
     {
       style: {
@@ -2310,7 +2476,7 @@ function CodePreview() {
         whiteSpace: "pre"
       }
     },
-    /* @__PURE__ */ import_react15.default.createElement(HighlightedCode, { code: activeCode })
+    /* @__PURE__ */ import_react16.default.createElement(HighlightedCode, { code: activeCode })
   )));
 }
 
@@ -2320,23 +2486,25 @@ function BuilderShell({ loadSlug }) {
   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)(() => {
+  const [activeSlug, setActiveSlug] = (0, import_react17.useState)(loadSlug ?? null);
+  const [loading, setLoading] = (0, import_react17.useState)(!!loadSlug);
+  const [notification, setNotification] = (0, import_react17.useState)(null);
+  const [showCodePreview, setShowCodePreview] = (0, import_react17.useState)(false);
+  const [versions, setVersions] = (0, import_react17.useState)([]);
+  const [selectedVersionId, setSelectedVersionId] = (0, import_react17.useState)(null);
+  const [blockDefs, setBlockDefs] = (0, import_react17.useState)([]);
+  const [mobilePanelTab, setMobilePanelTab] = (0, import_react17.useState)("blocks");
+  (0, import_react17.useEffect)(() => {
     fetch("/api/block-definitions?limit=200&depth=0").then((r) => r.json()).then((json) => {
       setBlockDefs(
         (json.docs ?? []).map((d) => ({ id: String(d.id), slug: d.slug, name: d.name }))
       );
-    }).catch(() => {
+    }).catch((err) => {
+      console.error("[block-builder] Failed to load block definitions:", err);
+      setNotification({ status: "error", title: "Failed to load block definitions", errors: ["Could not load block definitions. Please refresh the page."] });
     });
   }, []);
-  const loadVersionsForSlug = (0, import_react16.useCallback)(async (slug) => {
+  const loadVersionsForSlug = (0, import_react17.useCallback)(async (slug) => {
     try {
       const res = await fetch(`/api/block-builder/versions/${encodeURIComponent(slug)}`);
       const json = await res.json();
@@ -2345,9 +2513,9 @@ function BuilderShell({ loadSlug }) {
       return [];
     }
   }, []);
-  const loadVersion = (0, import_react16.useCallback)(async (slug, versionId) => {
+  const loadVersion = (0, import_react17.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);
@@ -2357,20 +2525,20 @@ function BuilderShell({ loadSlug }) {
         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_react17.useCallback)(async (slug) => {
     setActiveSlug(slug);
     setBlockSlug(slug);
     setVersions([]);
     setSelectedVersionId(null);
-    setLoadError(null);
+    setNotification(null);
     setMobilePanelTab("canvas");
     await loadVersion(slug);
     const list = await loadVersionsForSlug(slug);
@@ -2378,7 +2546,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_react17.useEffect)(() => {
     if (!loadSlug) return;
     loadBlockBySlug(loadSlug);
   }, [loadSlug]);
@@ -2401,7 +2569,7 @@ function BuilderShell({ loadSlug }) {
     const current = list.find((v) => v.isCurrent) ?? list[0];
     if (current) setSelectedVersionId(current.id);
   }
-  return /* @__PURE__ */ import_react16.default.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ import_react17.default.createElement(
     TopBar,
     {
       blockDefs,
@@ -2411,9 +2579,11 @@ function BuilderShell({ loadSlug }) {
       selectedVersionId,
       onVersionSelect: handleVersionSelect,
       onRestoreVersion: handleRestoreVersion,
-      onAfterPublish: handleAfterPublish
+      onAfterPublish: handleAfterPublish,
+      notification,
+      onSetNotification: setNotification
     }
-  ), 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_react17.default.createElement("div", { className: "bb-loading-bar" }, "Loading..."), isReadOnly && !loading && /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "bb-readonly-banner__icon" }, "[i]"), /* @__PURE__ */ import_react17.default.createElement("span", null, "You are viewing a previous version - read only.", /* @__PURE__ */ import_react17.default.createElement(
     "button",
     {
       type: "button",
@@ -2421,7 +2591,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_react17.default.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ import_react17.default.createElement(BlockList, { blockDefs, activeSlug, onBlockSelect: loadBlockBySlug }), /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-main__center" }, /* @__PURE__ */ import_react17.default.createElement(FieldPalette, null), /* @__PURE__ */ import_react17.default.createElement(BuilderCanvas, null)), /* @__PURE__ */ import_react17.default.createElement(ConfigPanel, null)), /* @__PURE__ */ import_react17.default.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ import_react17.default.createElement(
     "button",
     {
       type: "button",
@@ -2430,12 +2600,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_react17.default.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ import_react17.default.createElement(CodePreview, null))), /* @__PURE__ */ import_react17.default.createElement("nav", { className: "bb-mobile-nav", "aria-label": "Panel navigation" }, [
     { 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_react17.default.createElement(
     "button",
     {
       key: id,
@@ -2443,16 +2613,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_react17.default.createElement("span", { className: "bb-mobile-nav__icon" }, icon),
     label
   ))));
 }
 
 // src/components/BlockBuilderNavLink/index.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __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_react18.default.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ import_react18.default.createElement(
     import_link.default,
     {
       href: "/block-builder",
@@ -2479,6 +2649,7 @@ function BlockBuilderNavLink() {
 0 && (module.exports = {
   BlockBuilderNavLink,
   BlockDataField,
+  BlockVersionSync,
   BuilderShell,
   EditInBuilderButton,
   SchemaBuilderField