@nextbridgehq/payload-block-builder 0.1.8 → 0.2.0

package/dist/client.js

@@ -39,72 +39,207 @@ function MediaPicker({ label, required, value, onChange }) {
     "x"
   ))) : /* @__PURE__ */ React.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from Media Library")), /* @__PURE__ */ React.createElement(ListDrawer, { onSelect: handleSelect }));
 }
-function RelationshipPicker({ label, required, collection, value, onChange }) {
+function toRelDoc(v) {
+  if (!v) return null;
+  if (typeof v === "object") {
+    const o = v;
+    if (!o.id) return null;
+    return { id: o.id, title: o.title ? String(o.title) : null };
+  }
+  if (typeof v === "string" || typeof v === "number") return { id: v, title: null };
+  return null;
+}
+function RelationshipPicker({ label, required, collection, hasMany = false, value, onChange }) {
   const changeRef = useRef(onChange);
   const closeRef = useRef(() => {
   });
   useEffect(() => {
     changeRef.current = onChange;
   });
+  const items = hasMany ? Array.isArray(value) ? value.map(toRelDoc).filter(Boolean) : [] : (() => {
+    const d = toRelDoc(value);
+    return d ? [d] : [];
+  })();
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  });
   const handleSelect = useCallback(
     ({ docID, doc }) => {
-      changeRef.current({
-        id: docID,
-        title: doc?.title ?? doc?.name ?? doc?.slug ?? null
-      });
-      closeRef.current();
+      const title = String(doc?.title ?? doc?.name ?? doc?.slug ?? "") || null;
+      const entry = { id: docID, title };
+      if (hasMany) {
+        const alreadyExists = itemsRef.current.some((i) => String(i.id) === String(docID));
+        if (!alreadyExists) changeRef.current([...itemsRef.current, entry]);
+      } else {
+        changeRef.current(entry);
+        closeRef.current();
+      }
     },
-    []
+    [hasMany]
   );
-  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = useListDrawer({
+  const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({
     collectionSlugs: [collection]
   });
   closeRef.current = closeDrawer;
-  const relObj = value && typeof value === "object" ? value : null;
-  const relId = relObj?.id ?? (typeof value === "string" || typeof value === "number" ? value : null);
-  const relTitle = relObj?.title ? String(relObj.title) : null;
-  const [fetchedTitle, setFetchedTitle] = useState(null);
+  const [fetchedTitles, setFetchedTitles] = useState({});
+  const fetchingRef = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
-    if (!relId || relTitle) {
-      setFetchedTitle(null);
-      return;
+    const missing = items.filter(
+      (i) => !i.title && !fetchedTitles[String(i.id)] && !fetchingRef.current.has(String(i.id))
+    );
+    if (missing.length === 0) return;
+    missing.forEach((item) => {
+      const idStr = String(item.id);
+      fetchingRef.current.add(idStr);
+      fetch(`/api/${collection}/${idStr}?depth=0`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
+        if (doc) {
+          const t = doc.title ?? doc.name ?? doc.slug ?? null;
+          if (t) setFetchedTitles((prev) => ({ ...prev, [idStr]: String(t) }));
+        }
+      }).catch((err) => {
+        console.error("[Block Builder] Failed to load relation title:", err);
+        fetchingRef.current.delete(idStr);
+      });
+    });
+  }, [items, collection]);
+  function getTitle(item) {
+    return item.title ?? fetchedTitles[String(item.id)] ?? `ID: ${String(item.id)}`;
+  }
+  function clearOne(e, id) {
+    e.stopPropagation();
+    if (hasMany) onChange(items.filter((i) => String(i.id) !== String(id)));
+    else onChange(null);
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, "*")), /* @__PURE__ */ React.createElement("div", { className: `bdf-rel${hasMany ? " bdf-rel--multi" : ""}` }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: "bdf-rel__control",
+      onClick: openDrawer,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") openDrawer();
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "bdf-rel__values" }, items.length === 0 && /* @__PURE__ */ React.createElement("span", { className: "bdf-rel__placeholder" }, "Select a value..."), !hasMany && items.length > 0 && /* @__PURE__ */ React.createElement("span", { className: "bdf-rel__single" }, getTitle(items[0])), hasMany && items.map((item) => /* @__PURE__ */ React.createElement("span", { key: String(item.id), className: "bdf-rel__chip" }, /* @__PURE__ */ React.createElement("span", { className: "bdf-rel__chip-label" }, getTitle(item)), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "bdf-rel__chip-remove",
+        onClick: (e) => clearOne(e, item.id),
+        "aria-label": `Remove ${getTitle(item)}`
+      },
+      /* @__PURE__ */ React.createElement("svg", { height: "12", width: "12", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", fill: "currentColor" }, /* @__PURE__ */ React.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__ */ React.createElement("div", { className: "bdf-rel__indicators" }, !hasMany && items.length > 0 && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "bdf-rel__clear",
+        onClick: (e) => clearOne(e, items[0].id),
+        "aria-label": "Clear"
+      },
+      /* @__PURE__ */ React.createElement("svg", { height: "16", width: "16", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", fill: "currentColor" }, /* @__PURE__ */ React.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__ */ React.createElement("span", { className: "bdf-rel__sep" }), /* @__PURE__ */ React.createElement("span", { className: "bdf-rel__chevron" }, /* @__PURE__ */ React.createElement("svg", { height: "16", width: "16", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", fill: "currentColor" }, /* @__PURE__ */ React.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__ */ React.createElement(ListDrawerToggler, { className: "bdf-rel__add", onClick: (e) => e.stopPropagation() }, "+")), /* @__PURE__ */ React.createElement("span", { className: "bdf-rel__hint" }, collection, hasMany ? " \xB7 multiple" : ""), /* @__PURE__ */ React.createElement(ListDrawer, { onSelect: handleSelect }));
+}
+function JsonField({ label, required, value, onChange }) {
+  const [text, setText] = useState(
+    () => value !== void 0 ? JSON.stringify(value, null, 2) : ""
+  );
+  const [hasError, setHasError] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(JSON)")), /* @__PURE__ */ React.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__ */ React.createElement("div", { className: "bdf-error", style: { marginTop: 4 } }, "Invalid JSON \u2014 changes not saved until fixed."));
+}
+function SchemaForm({ schema, value, onChange, depth = 0 }) {
+  const set = useCallback(
+    (key, val) => onChange({ ...value, [key]: val }),
+    [value, onChange]
+  );
+  if (depth > 10) {
+    return /* @__PURE__ */ React.createElement("div", { className: "bdf-error" }, "Max nesting depth reached (10).");
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, schema.map((field) => {
+    if (field.type === "row") {
+      return /* @__PURE__ */ React.createElement("div", { key: field.name, className: "bdf-row" }, /* @__PURE__ */ React.createElement(SchemaForm, { schema: field.fields, value, onChange, depth: depth + 1 }));
+    }
+    if (field.type === "collapsible") {
+      return /* @__PURE__ */ React.createElement(CollapsibleSection, { key: field.name, field, value, onChange, depth: depth + 1 });
     }
-    fetch(`/api/${collection}/${String(relId)}?depth=0`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
-      if (doc) {
-        const t = doc.title ?? doc.name ?? doc.slug ?? null;
-        setFetchedTitle(t ? String(t) : null);
+    if (field.type === "tabs") {
+      return /* @__PURE__ */ React.createElement(TabsSection, { key: field.name, field, value, onChange, depth: depth + 1 });
+    }
+    return /* @__PURE__ */ React.createElement(
+      FieldInput,
+      {
+        key: field.name,
+        field,
+        value: value[field.name],
+        onChange: (v) => set(field.name, v),
+        depth
       }
-    }).catch(() => {
-    });
-  }, [relId, relTitle, collection]);
-  const displayTitle = relTitle ?? fetchedTitle;
-  return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", collection, ")")), /* @__PURE__ */ React.createElement("div", { className: "bdf-upload-area" }, relId ? /* @__PURE__ */ React.createElement("div", { className: "bdf-upload-selected" }, /* @__PURE__ */ React.createElement("span", { className: "bdf-upload-name" }, displayTitle ?? `ID: ${String(relId)}`), /* @__PURE__ */ React.createElement("div", { className: "bdf-upload-actions" }, /* @__PURE__ */ React.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Change"), /* @__PURE__ */ React.createElement(
+    );
+  }));
+}
+function CollapsibleSection({
+  field,
+  value,
+  onChange,
+  depth
+}) {
+  const [open, setOpen] = useState(true);
+  return /* @__PURE__ */ React.createElement("div", { className: "bdf-collapsible" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
-      className: "bdf-icon-btn bdf-icon-btn--danger",
-      title: "Remove",
-      onClick: () => onChange(null)
+      className: "bdf-collapsible__header",
+      onClick: () => setOpen((o) => !o)
     },
-    "\xD7"
-  ))) : /* @__PURE__ */ React.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from ", collection)), /* @__PURE__ */ React.createElement(ListDrawer, { onSelect: handleSelect }));
+    /* @__PURE__ */ React.createElement("span", { className: `bdf-collapsible__caret${open ? " bdf-collapsible__caret--open" : ""}` }, "\u25B8"),
+    field.label
+  ), open && /* @__PURE__ */ React.createElement("div", { className: "bdf-collapsible__body" }, /* @__PURE__ */ React.createElement(SchemaForm, { schema: field.fields, value, onChange, depth })));
 }
-function SchemaForm({ schema, value, onChange }) {
+function TabsSection({
+  field,
+  value,
+  onChange,
+  depth
+}) {
+  const [activeTab, setActiveTab] = useState(0);
   const set = useCallback(
     (key, val) => onChange({ ...value, [key]: val }),
     [value, onChange]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, schema.map((field) => /* @__PURE__ */ React.createElement(
-    FieldInput,
+  const tabs = field.tabs ?? [];
+  const tab = tabs[activeTab];
+  return /* @__PURE__ */ React.createElement("div", { className: "bdf-tabs" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-tabs__list" }, tabs.map((t, i) => /* @__PURE__ */ React.createElement(
+    "button",
     {
-      key: field.name,
-      field,
-      value: value[field.name],
-      onChange: (v) => set(field.name, v)
-    }
-  )));
+      key: t.name ?? t.label ?? i,
+      type: "button",
+      className: `bdf-tabs__tab${i === activeTab ? " bdf-tabs__tab--active" : ""}`,
+      onClick: () => setActiveTab(i)
+    },
+    t.label
+  ))), /* @__PURE__ */ React.createElement("div", { className: "bdf-tabs__panel" }, tab && (tab.name ? /* @__PURE__ */ React.createElement(SchemaForm, { schema: tab.fields, value: value[tab.name] ?? {}, onChange: (v) => set(tab.name, v), depth }) : /* @__PURE__ */ React.createElement(SchemaForm, { schema: tab.fields, value, onChange, depth }))));
 }
-function FieldInput({ field, value, onChange }) {
+function FieldInput({ field, value, onChange, depth }) {
   const label = field.label ?? field.name;
   switch (field.type) {
     case "text":
@@ -114,7 +249,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)
         }
@@ -167,7 +302,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)
         }
       ));
     }
@@ -227,33 +362,24 @@ function FieldInput({ field, value, onChange }) {
         }
       );
     case "relationship": {
-      const collection = field.collection ?? "media";
+      const relField = field;
+      if (!relField.collection) {
+        return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label), /* @__PURE__ */ React.createElement("div", { className: "bdf-error" }, "Relationship field ", /* @__PURE__ */ React.createElement("strong", null, field.name), " has no ", /* @__PURE__ */ React.createElement("code", null, "collection"), " defined in its schema."));
+      }
       return /* @__PURE__ */ React.createElement(
         RelationshipPicker,
         {
           label,
           required: field.required,
-          collection,
+          collection: relField.collection,
+          hasMany: relField.hasMany ?? false,
           value,
           onChange
         }
       );
     }
     case "json":
-      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label, field.required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(JSON)")), /* @__PURE__ */ React.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__ */ React.createElement(JsonField, { label, required: field.required, value, onChange });
     case "array": {
       const rows = Array.isArray(value) ? value : [];
       const subFields = field.fields ?? [];
@@ -266,7 +392,8 @@ function FieldInput({ field, value, onChange }) {
             const next = [...rows];
             next[i] = updated;
             onChange(next);
-          }
+          },
+          depth: depth + 1
         }
       ), /* @__PURE__ */ React.createElement(
         "button",
@@ -290,7 +417,7 @@ function FieldInput({ field, value, onChange }) {
     case "group": {
       const groupVal = value ?? {};
       const subFields = field.fields ?? [];
-      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__header" }, label), /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__body" }, /* @__PURE__ */ React.createElement(SchemaForm, { schema: subFields, value: groupVal, onChange }))));
+      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__header" }, label), /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__body" }, /* @__PURE__ */ React.createElement(SchemaForm, { schema: subFields, value: groupVal, onChange, depth: depth + 1 }))));
     }
     default:
       return /* @__PURE__ */ React.createElement("div", { style: { fontSize: 12, color: "var(--theme-elevation-400)", fontFamily: "var(--font-body)", padding: "4px 0" } }, "Unsupported field type: ", /* @__PURE__ */ React.createElement("strong", null, field.type), " (", label, ")");
@@ -311,6 +438,10 @@ function BlockDataField({ path }) {
       setError(null);
       return;
     }
+    if (!/^[a-zA-Z0-9_-]+$/.test(String(versionId))) {
+      setError("Invalid version ID format");
+      return;
+    }
     setLoading(true);
     setError(null);
     fetch(`/api/block-definition-versions/${versionId}?depth=0`, { credentials: "same-origin" }).then((r) => {
@@ -349,9 +480,41 @@ function BlockDataField({ path }) {
   )));
 }
 
+// src/components/BlockVersionSync/index.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useField as useField2, useFormFields as useFormFields2 } from "@payloadcms/ui";
+function BlockVersionSync({ path }) {
+  const blockVersionPath = path.replace(/\.blockDefinition$/, ".blockVersion");
+  const { setValue: setVersion } = useField2({ path: blockVersionPath });
+  const blockDefValue = useFormFields2(([fields]) => fields[path]?.value);
+  const prevDefIdRef = useRef2(null);
+  useEffect2(() => {
+    const defId = blockDefValue && typeof blockDefValue === "object" ? blockDefValue.id : typeof blockDefValue === "string" || typeof blockDefValue === "number" ? blockDefValue : null;
+    if (defId === prevDefIdRef.current) return;
+    prevDefIdRef.current = defId;
+    if (!defId) {
+      setVersion(null);
+      return;
+    }
+    if (!/^[a-zA-Z0-9_-]+$/.test(String(defId))) {
+      return;
+    }
+    fetch(`/api/block-definitions/${String(defId)}?depth=1`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
+      if (!doc) return;
+      const currentVersion = doc.currentVersion;
+      if (!currentVersion) return;
+      const versionId = typeof currentVersion === "object" ? currentVersion.id : currentVersion;
+      if (versionId) setVersion(versionId);
+    }).catch((err) => {
+      console.error("[Block Builder] BlockVersionSync fetch error:", err);
+    });
+  }, [blockDefValue, setVersion]);
+  return null;
+}
+
 // src/components/SchemaBuilderField/index.tsx
-import React5, { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { useField as useField2 } from "@payloadcms/ui";
+import React6, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useField as useField3 } from "@payloadcms/ui";
 
 // src/components/SchemaBuilderField/FieldRow.tsx
 import React4, { useState as useState2 } from "react";
@@ -913,128 +1076,72 @@ function FieldRow({
   )))));
 }
 
-// src/components/SchemaBuilderField/index.tsx
-function parseSchema(raw) {
-  try {
-    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
-    if (!parsed) return [];
-    if (Array.isArray(parsed)) return parsed;
-    if (parsed?.fields && Array.isArray(parsed.fields)) return parsed.fields;
-  } catch {
+// src/block-builder/components/ErrorBoundary.tsx
+import React5, { Component } from "react";
+
+// src/block-builder/store/builder.store.ts
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+
+// src/utils/uuid.ts
+function uuidv4() {
+  const c = globalThis.crypto;
+  if (typeof c?.randomUUID === "function") {
+    return c.randomUUID();
   }
-  return [];
+  if (typeof c?.getRandomValues === "function") {
+    const bytes = c.getRandomValues(new Uint8Array(16));
+    bytes[6] = bytes[6] & 15 | 64;
+    bytes[8] = bytes[8] & 63 | 128;
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+  }
+  throw new Error(
+    "No cryptographic random source available. `crypto.randomUUID` requires a secure context (HTTPS or localhost)."
+  );
 }
-function SchemaBuilderField({ path, readOnly }) {
-  const { value, setValue } = useField2({ path });
-  const setValueRef = useRef2(setValue);
-  useEffect2(() => {
-    setValueRef.current = setValue;
-  });
-  const [fields, setFields] = useState3(() => parseSchema(value));
-  const hasExistingValue = value !== void 0 && value !== null;
-  const [hydrated, setHydrated] = useState3(!hasExistingValue);
-  useEffect2(() => {
-    if (hydrated) return;
-    if (value !== void 0 && value !== null) {
-      setFields(parseSchema(value));
-      setHydrated(true);
-    }
-  }, [value, hydrated]);
-  useEffect2(() => {
-    if (!hydrated) return;
-    setValueRef.current({ fields });
-  }, [fields, hydrated]);
-  const addField = useCallback3(() => {
-    setFields((prev) => [
-      ...prev,
-      { name: "", type: "text", label: "", required: false }
-    ]);
-  }, []);
-  const updateField = useCallback3((index, updated) => {
-    setFields((prev) => prev.map((f, i) => i === index ? updated : f));
-  }, []);
-  const removeField = useCallback3((index) => {
-    setFields((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-  const moveField = useCallback3((index, dir) => {
-    setFields((prev) => {
-      const next = [...prev];
-      const target = index + dir;
-      if (target < 0 || target >= next.length) return prev;
-      [next[index], next[target]] = [next[target], next[index]];
-      return next;
-    });
-  }, []);
-  return /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ React5.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ React5.createElement(
-    "span",
-    {
-      style: {
-        marginLeft: 8,
-        fontSize: 11,
-        color: "var(--theme-elevation-400)",
-        fontWeight: 400
+
+// src/block-builder/store/builder.store.ts
+var TAB_PATH_SEP = "::";
+var BUILDER_PERSIST_KEY = "@nextbridgehq/payload-block-builder";
+function encodeTabPath(fieldId, tabIndex) {
+  return `${fieldId}${TAB_PATH_SEP}${tabIndex}`;
+}
+function walkPath(block, parentPath, create2) {
+  let currentFields = block.fields;
+  for (const segment of parentPath) {
+    const sepIndex = segment.indexOf(TAB_PATH_SEP);
+    if (sepIndex !== -1) {
+      const fieldId = segment.slice(0, sepIndex);
+      const tabIndex = Number(segment.slice(sepIndex + TAB_PATH_SEP.length));
+      const parentField2 = currentFields.find((f) => f.id === fieldId);
+      if (!parentField2 || parentField2.type !== "tabs" || !Array.isArray(parentField2.tabs)) return null;
+      const tab = parentField2.tabs[tabIndex];
+      if (!tab) return null;
+      if (!tab.fields) {
+        if (!create2) return null;
+        tab.fields = [];
       }
-    },
-    "(",
-    fields.length,
-    ")"
-  ))), fields.length === 0 ? /* @__PURE__ */ React5.createElement("div", { className: "sbf-empty" }, "No fields defined. Click \u201CAdd Field\u201D below to add the first field to this block schema.") : /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ React5.createElement(
-    FieldRow,
-    {
-      key: i,
-      index: i,
-      total: fields.length,
-      field,
-      onChange: (updated) => updateField(i, updated),
-      onRemove: () => removeField(i),
-      onMoveUp: i > 0 ? () => moveField(i, -1) : void 0,
-      onMoveDown: i < fields.length - 1 ? () => moveField(i, 1) : void 0,
-      readOnly
+      currentFields = tab.fields;
+      continue;
+    }
+    const parentField = currentFields.find((f) => f.id === segment);
+    if (!parentField) return null;
+    if (!parentField.fields) {
+      if (!create2) return null;
+      parentField.fields = [];
     }
-  ))), !readOnly && /* @__PURE__ */ React5.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ React5.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ React5.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field")));
+    currentFields = parentField.fields;
+  }
+  return currentFields;
 }
-
-// src/components/EditInBuilderButton/index.tsx
-import React6 from "react";
-import { useDocumentInfo } from "@payloadcms/ui";
-import { useField as useField3 } from "@payloadcms/ui";
-function EditInBuilderButton() {
-  const { id } = useDocumentInfo();
-  const { value: slug } = useField3({ path: "slug" });
-  if (!id || !slug) return null;
-  return /* @__PURE__ */ React6.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ React6.createElement(
-    "a",
-    {
-      href: `/block-builder?load=${slug}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: "6px",
-        padding: "8px 16px",
-        borderRadius: "6px",
-        border: "1px solid #16a34a",
-        color: "#16a34a",
-        textDecoration: "none",
-        fontSize: "13px",
-        fontWeight: 500,
-        background: "transparent",
-        cursor: "pointer"
-      }
-    },
-    "Edit in Block Builder"
-  ));
+function getTargetFields(block, parentPath) {
+  return walkPath(block, parentPath, false);
+}
+function ensureTargetFields(block, parentPath) {
+  return walkPath(block, parentPath, true);
 }
-
-// src/block-builder/components/canvas/BuilderShell.tsx
-import React16, { useCallback as useCallback5, useEffect as useEffect5, useState as useState8 } from "react";
-
-// src/block-builder/store/builder.store.ts
-import { create } from "zustand";
-import { devtools, persist } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { v4 as uuidv4 } from "uuid";
 function createDefaultField(type) {
   const base = {
     id: uuidv4(),
@@ -1045,7 +1152,6 @@ function createDefaultField(type) {
   };
   switch (type) {
     case "select":
-    case "radio":
       return {
         ...base,
         options: [
@@ -1054,15 +1160,31 @@ function createDefaultField(type) {
         ]
       };
     case "relationship":
-      return { ...base, relationTo: "", hasMany: false };
+      return { ...base, collection: "", hasMany: false };
     case "array":
       return { ...base, fields: [] };
     case "group":
       return { ...base, fields: [] };
+    case "row":
+      return { ...base, fields: [] };
+    case "collapsible":
+      return { ...base, label: base.label ?? "Collapsible Section", fields: [] };
+    case "tabs":
+      return { ...base, tabs: [{ id: uuidv4(), label: "Tab 1", fields: [] }] };
     default:
       return base;
   }
 }
+function regenerateFieldIds(fields) {
+  return fields.map((f) => {
+    const next = { ...f, id: uuidv4() };
+    if (next.fields) next.fields = regenerateFieldIds(next.fields);
+    if (next.tabs) {
+      next.tabs = next.tabs.map((tab) => ({ ...tab, fields: regenerateFieldIds(tab.fields) }));
+    }
+    return next;
+  });
+}
 function createDefaultBlock() {
   return {
     id: uuidv4(),
@@ -1086,11 +1208,13 @@ var useBuilderStore = create()(
         isReadOnly: false,
         loadedVersionId: null,
         blockSlug: null,
+        activeParentPath: [],
         addBlock: () => set((state) => {
           const block = createDefaultBlock();
           state.blocks.push(block);
           state.activeBlockId = block.id;
           state.activeFieldId = null;
+          state.activeParentPath = [];
           state.isDirty = true;
         }),
         removeBlock: (blockId) => set((state) => {
@@ -1098,6 +1222,7 @@ var useBuilderStore = create()(
           if (state.activeBlockId === blockId) {
             state.activeBlockId = state.blocks[0]?.id ?? null;
             state.activeFieldId = null;
+            state.activeParentPath = [];
           }
           state.isDirty = true;
         }),
@@ -1109,15 +1234,16 @@ var useBuilderStore = create()(
         setActiveBlock: (blockId) => set((state) => {
           state.activeBlockId = blockId;
           state.activeFieldId = null;
+          state.activeParentPath = [];
         }),
         duplicateBlock: (blockId) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
           const clone = JSON.parse(JSON.stringify(block));
           clone.id = uuidv4();
-          clone.slug = `${block.slug}Copy`;
+          clone.slug = `${block.slug}-copy`;
           clone.interfaceName = block.interfaceName ? `${block.interfaceName}Copy` : void 0;
-          clone.fields = clone.fields.map((f) => ({ ...f, id: uuidv4() }));
+          clone.fields = regenerateFieldIds(clone.fields);
           const idx = state.blocks.findIndex((b) => b.id === blockId);
           state.blocks.splice(idx + 1, 0, clone);
           state.activeBlockId = clone.id;
@@ -1126,36 +1252,47 @@ var useBuilderStore = create()(
         addField: (blockId, type) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
           const field = createDefaultField(type);
-          block.fields.push(field);
+          targetFields.push(field);
           state.activeFieldId = field.id;
           state.isDirty = true;
         }),
         removeField: (blockId, fieldId) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
-          block.fields = block.fields.filter((f) => f.id !== fieldId);
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
+          const index = targetFields.findIndex((f) => f.id === fieldId);
+          if (index !== -1) {
+            targetFields.splice(index, 1);
+          }
           if (state.activeFieldId === fieldId) state.activeFieldId = null;
           state.isDirty = true;
         }),
         updateField: (blockId, fieldId, updates) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
-          const field = block.fields.find((f) => f.id === fieldId);
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
+          const field = targetFields.find((f) => f.id === fieldId);
           if (field) Object.assign(field, updates);
           state.isDirty = true;
         }),
         reorderFields: (blockId, fromIndex, toIndex) => set((state) => {
           const block = state.blocks.find((b) => b.id === blockId);
           if (!block) return;
-          const [moved] = block.fields.splice(fromIndex, 1);
-          block.fields.splice(toIndex, 0, moved);
+          const targetFields = ensureTargetFields(block, state.activeParentPath);
+          if (!targetFields) return;
+          const [moved] = targetFields.splice(fromIndex, 1);
+          targetFields.splice(toIndex, 0, moved);
           state.isDirty = true;
         }),
         setActiveField: (fieldId) => set((state) => {
           state.activeFieldId = fieldId;
         }),
-        reset: () => set(() => ({ ...initialState, isReadOnly: false, loadedVersionId: null, blockSlug: null })),
+        reset: () => set(() => ({ ...initialState, isReadOnly: false, loadedVersionId: null, blockSlug: null, activeParentPath: [] })),
         markClean: () => set((state) => {
           state.isDirty = false;
         }),
@@ -1163,6 +1300,7 @@ var useBuilderStore = create()(
           state.blocks = [block];
           state.activeBlockId = block.id;
           state.activeFieldId = null;
+          state.activeParentPath = [];
           state.isDirty = false;
         }),
         setVersionMeta: (versionId, isReadOnly) => set((state) => {
@@ -1171,10 +1309,36 @@ var useBuilderStore = create()(
         }),
         setBlockSlug: (slug) => set((state) => {
           state.blockSlug = slug;
+        }),
+        pushParentPath: (fieldId) => set((state) => {
+          state.activeParentPath.push(fieldId);
+          state.activeFieldId = null;
+        }),
+        popParentPath: () => set((state) => {
+          state.activeParentPath.pop();
+          state.activeFieldId = null;
+        }),
+        // Jump directly to an ancestor level -- `depth` is the number of
+        // segments to keep, so breadcrumb index `i` maps to `i + 1`.
+        truncateParentPath: (depth) => set((state) => {
+          if (depth < 0 || depth >= state.activeParentPath.length) return;
+          state.activeParentPath = state.activeParentPath.slice(0, depth);
+          state.activeFieldId = null;
+        }),
+        resetParentPath: () => set((state) => {
+          state.activeParentPath = [];
+          state.activeFieldId = null;
         })
       })),
       {
-        name: "@nextbridgehq/payload-block-builder",
+        name: BUILDER_PERSIST_KEY,
+        version: 1,
+        migrate: (persistedState, version) => {
+          if (version === 0) {
+            return { blocks: [], activeBlockId: null };
+          }
+          return persistedState;
+        },
         partialize: (state) => ({
           blocks: state.blocks,
           activeBlockId: state.activeBlockId
@@ -1184,163 +1348,191 @@ var useBuilderStore = create()(
   )
 );
 
-// src/block-builder/components/canvas/TopBar.tsx
-import React7, { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { Blocks, ChevronDown, X } from "lucide-react";
-
-// src/block-builder/lib/mapToSaveRequest.ts
-var TYPE_MAP = {
-  richText: "richtext",
-  upload: "image",
-  radio: "select"
-};
-var UNSUPPORTED = /* @__PURE__ */ new Set(["code", "point", "ui", "tabs", "collapsible", "row"]);
-function normalizeSlug(slug) {
-  return slug.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-}
-function mapToSaveRequest(block) {
-  const fields = block.fields.filter((f) => {
-    if (UNSUPPORTED.has(f.type)) {
-      console.warn(`[block-builder] Field type "${f.type}" is not supported in this project \xE2\u20AC" skipping field "${f.name}"`);
-      return false;
-    }
-    return true;
-  }).map(({ id: _id, relationTo, ...f }) => ({
-    ...f,
-    type: TYPE_MAP[f.type] ?? f.type,
-    // normalizer reads `collection`, block-builder stores `relationTo`
-    ...relationTo ? { collection: relationTo } : {}
-  }));
-  return {
-    blockSlug: normalizeSlug(block.slug),
-    name: block.labels?.singular ?? block.slug,
-    schema: { fields },
-    changelog: "Created via block builder"
-  };
-}
-
-// src/block-builder/lib/codegen.ts
-function indent(n) {
-  return "  ".repeat(n);
-}
-function escStr(s) {
-  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
-}
-function fieldToCode(field, depth = 1) {
-  const pad = indent(depth);
-  const innerPad = indent(depth + 1);
-  const lines = [];
-  lines.push(`${pad}name: '${escStr(field.name)}'`);
-  lines.push(`${pad}type: '${field.type}'`);
-  if (field.label) lines.push(`${pad}label: '${escStr(field.label)}'`);
-  if (field.required) lines.push(`${pad}required: true`);
-  if (field.unique) lines.push(`${pad}unique: true`);
-  if (field.localized) lines.push(`${pad}localized: true`);
-  if (field.defaultValue !== void 0) {
-    const val = typeof field.defaultValue === "string" ? `'${escStr(String(field.defaultValue))}'` : field.defaultValue;
-    lines.push(`${pad}defaultValue: ${val}`);
-  }
-  if (field.type === "richText") {
-    lines.push(`${pad}editor: lexicalEditor({})`);
-  }
-  if (field.options && field.options.length > 0) {
-    const opts = field.options.map((o) => `{ label: '${escStr(o.label)}', value: '${escStr(o.value)}' }`).join(`, `);
-    lines.push(`${pad}options: [${opts}]`);
+// src/block-builder/components/ErrorBoundary.tsx
+var ErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+    /**
+     * Clears persisted builder state before reloading. "Try again" alone only
+     * resets the boundary, so if the cause is corrupt persisted state the next
+     * render throws immediately -- this gives the user a way out of that loop.
+     */
+    this.handleResetState = () => {
+      try {
+        window.localStorage.removeItem(BUILDER_PERSIST_KEY);
+      } catch (err) {
+        console.error("[Block Builder] Could not clear persisted state:", err);
+      }
+      window.location.reload();
+    };
   }
-  if (field.relationTo) {
-    lines.push(`${pad}relationTo: '${escStr(field.relationTo)}'`);
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
   }
-  if (field.hasMany !== void 0) {
-    lines.push(`${pad}hasMany: ${field.hasMany}`);
+  componentDidCatch(error, errorInfo) {
+    console.error("[Block Builder] Uncaught error:", error, errorInfo);
   }
-  if (field.minRows !== void 0) lines.push(`${pad}minRows: ${field.minRows}`);
-  if (field.maxRows !== void 0) lines.push(`${pad}maxRows: ${field.maxRows}`);
-  if (field.fields && field.fields.length > 0) {
-    const nested = field.fields.map((f) => `${innerPad}{
-${fieldToCode(f, depth + 2)}
-${innerPad}}`).join(",\n");
-    lines.push(`${pad}fields: [
-${nested}
-${innerPad}]`);
-  }
-  const adminParts = [];
-  if (field.admin?.description)
-    adminParts.push(`description: '${escStr(field.admin.description)}'`);
-  if (field.admin?.placeholder)
-    adminParts.push(`placeholder: '${escStr(field.admin.placeholder)}'`);
-  if (field.admin?.readOnly) adminParts.push(`readOnly: true`);
-  if (field.admin?.hidden) adminParts.push(`hidden: true`);
-  if (adminParts.length > 0) {
-    lines.push(`${pad}admin: { ${adminParts.join(", ")} }`);
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ React5.createElement("div", { className: "bb-error-boundary", role: "alert" }, /* @__PURE__ */ React5.createElement("h2", { className: "bb-error-boundary__title" }, "Something went wrong in the Block Builder."), /* @__PURE__ */ React5.createElement("details", { className: "bb-error-boundary__details" }, /* @__PURE__ */ React5.createElement("summary", null, "Error details"), /* @__PURE__ */ React5.createElement("pre", { className: "bb-error-boundary__trace" }, this.state.error?.toString())), /* @__PURE__ */ React5.createElement("div", { className: "bb-error-boundary__actions" }, /* @__PURE__ */ React5.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => this.setState({ hasError: false, error: null }),
+          className: "bb-error-boundary__btn bb-error-boundary__btn--primary"
+        },
+        "Try again"
+      ), /* @__PURE__ */ React5.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: this.handleResetState,
+          className: "bb-error-boundary__btn"
+        },
+        "Reset builder state"
+      )), /* @__PURE__ */ React5.createElement("p", { className: "bb-error-boundary__hint" }, "\u201CReset builder state\u201D discards unsaved local edits and reloads. Published versions are stored in the database and are not affected."));
+    }
+    return this.props.children;
   }
-  return lines.join(",\n");
-}
-function generateBlockCode(block) {
-  const hasRichText = containsRichText(block.fields);
-  const imports = [`import type { Block } from 'payload'`];
-  if (hasRichText) {
-    imports.push(`import { lexicalEditor } from '@payloadcms/richtext-lexical'`);
+};
+
+// src/components/SchemaBuilderField/index.tsx
+function parseSchema(raw) {
+  try {
+    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+    if (!parsed) return [];
+    if (Array.isArray(parsed)) return parsed;
+    if (parsed?.fields && Array.isArray(parsed.fields)) return parsed.fields;
+  } catch {
   }
-  const fieldsCode = block.fields.map((f) => `  {
-${fieldToCode(f, 2)}
-  }`).join(",\n");
-  const labelsCode = block.labels ? `
-  labels: {
-    singular: '${escStr(block.labels.singular ?? block.slug)}',
-    plural: '${escStr(block.labels.plural ?? block.slug + "s")}',
-  },` : "";
-  const interfaceLine = block.interfaceName ? `
-  interfaceName: '${escStr(block.interfaceName)}',` : "";
-  const exportName = block.interfaceName ?? toCamelCase(block.slug);
-  return [
-    imports.join("\n"),
-    "",
-    `export const ${exportName}: Block = {`,
-    `  slug: '${escStr(block.slug)}',${interfaceLine}${labelsCode}`,
-    `  fields: [`,
-    fieldsCode,
-    `  ],`,
-    `}`,
-    ""
-  ].join("\n");
-}
-function containsRichText(fields) {
-  return fields.some(
-    (f) => f.type === "richText" || (f.fields ? containsRichText(f.fields) : false)
-  );
-}
-function toCamelCase(slug) {
-  return slug.split(/[-_]/).map(
-    (part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)
-  ).join("");
-}
-function generateBlockOutput(block) {
-  return {
-    filename: `${block.slug}.ts`,
-    code: generateBlockCode(block),
-    language: "typescript"
-  };
+  return [];
 }
-function generateAllBlocks(blocks) {
-  return blocks.map(generateBlockOutput);
+function SchemaBuilderField({ path, readOnly }) {
+  const { value, setValue } = useField3({ path });
+  const setValueRef = useRef3(setValue);
+  useEffect3(() => {
+    setValueRef.current = setValue;
+  });
+  const [fields, setFields] = useState3(() => parseSchema(value));
+  const hasExistingValue = value !== void 0 && value !== null;
+  const [hydrated, setHydrated] = useState3(!hasExistingValue);
+  useEffect3(() => {
+    if (hydrated) return;
+    if (value !== void 0 && value !== null) {
+      setFields(parseSchema(value));
+      setHydrated(true);
+    }
+  }, [value, hydrated]);
+  useEffect3(() => {
+    if (!hydrated) return;
+    setValueRef.current({ fields });
+  }, [fields, hydrated]);
+  const addField = useCallback3(() => {
+    setFields((prev) => [
+      ...prev,
+      { name: "", type: "text", label: "", required: false }
+    ]);
+  }, []);
+  const updateField = useCallback3((index, updated) => {
+    setFields((prev) => prev.map((f, i) => i === index ? updated : f));
+  }, []);
+  const removeField = useCallback3((index) => {
+    setFields((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const moveField = useCallback3((index, dir) => {
+    setFields((prev) => {
+      const next = [...prev];
+      const target = index + dir;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ React6.createElement(ErrorBoundary, null, /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ React6.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ React6.createElement(
+    "span",
+    {
+      style: {
+        marginLeft: 8,
+        fontSize: 11,
+        color: "var(--theme-elevation-400)",
+        fontWeight: 400
+      }
+    },
+    "(",
+    fields.length,
+    ")"
+  ))), fields.length === 0 ? /* @__PURE__ */ React6.createElement("div", { className: "sbf-empty" }, "No fields defined. Click \u201CAdd Field\u201D below to add the first field to this block schema.") : /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ React6.createElement(
+    FieldRow,
+    {
+      key: i,
+      index: i,
+      total: fields.length,
+      field,
+      onChange: (updated) => updateField(i, updated),
+      onRemove: () => removeField(i),
+      onMoveUp: i > 0 ? () => moveField(i, -1) : void 0,
+      onMoveDown: i < fields.length - 1 ? () => moveField(i, 1) : void 0,
+      readOnly
+    }
+  ))), !readOnly && /* @__PURE__ */ React6.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ React6.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ React6.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field"))));
 }
-function generateIndexFile(blocks) {
-  const exportName = (b) => b.interfaceName ?? toCamelCase(b.slug);
-  const imports = blocks.map((b) => `import { ${exportName(b)} } from './${b.slug}'`).join("\n");
-  const exportList = blocks.map((b) => `  ${exportName(b)}`).join(",\n");
-  const code = [
-    imports,
-    "",
-    `export const blocks = [`,
-    exportList,
-    `] as const`,
-    ""
-  ].join("\n");
-  return { filename: "index.ts", code, language: "typescript" };
+
+// src/components/EditInBuilderButton/index.tsx
+import React7 from "react";
+import { useDocumentInfo } from "@payloadcms/ui";
+import { useField as useField4 } from "@payloadcms/ui";
+function EditInBuilderButton() {
+  const { id } = useDocumentInfo();
+  const { value: slug } = useField4({ path: "slug" });
+  if (!id || !slug) return null;
+  return /* @__PURE__ */ React7.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ React7.createElement(
+    "a",
+    {
+      href: `/block-builder?load=${slug}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "8px 16px",
+        borderRadius: "6px",
+        border: "1px solid #16a34a",
+        color: "#16a34a",
+        textDecoration: "none",
+        fontSize: "13px",
+        fontWeight: 500,
+        background: "transparent",
+        cursor: "pointer"
+      }
+    },
+    "Edit in Block Builder"
+  ));
 }
 
+// src/block-builder/components/canvas/BuilderShell.tsx
+import React18, { useCallback as useCallback5, useEffect as useEffect6, useState as useState9 } from "react";
+
 // src/block-builder/components/canvas/TopBar.tsx
-function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish }) {
+import React8, { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { Blocks, ChevronDown, X } from "lucide-react";
+function ensureFieldIds(fields) {
+  if (!Array.isArray(fields)) return [];
+  return fields.map((field) => {
+    const f = { ...field };
+    if (!f.id) f.id = uuidv4();
+    if (Array.isArray(f.fields)) f.fields = ensureFieldIds(f.fields);
+    if (Array.isArray(f.tabs)) {
+      f.tabs = f.tabs.map((tab) => ({ ...tab, fields: ensureFieldIds(tab.fields) }));
+    }
+    return f;
+  });
+}
+function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish, notification, onSetNotification, previewOpen, onTogglePreview }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const activeBlock = blocks.find((b) => b.id === activeBlockId);
@@ -1348,21 +1540,23 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
   const isDirty = useBuilderStore((s) => s.isDirty);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
-  const [notification, setNotification] = useState4(null);
+  const loadBlock = useBuilderStore((s) => s.loadBlock);
+  const setNotification = onSetNotification;
   const [versionDropdownOpen, setVersionDropdownOpen] = useState4(false);
   const [blockPickerOpen, setBlockPickerOpen] = useState4(false);
-  const dropdownRef = useRef3(null);
-  const blockPickerRef = useRef3(null);
+  const dropdownRef = useRef4(null);
+  const blockPickerRef = useRef4(null);
+  const fileInputRef = useRef4(null);
   const selectedVersion = versions.find((v) => v.id === selectedVersionId);
   const currentVersion = versions.find((v) => v.isCurrent);
   const activeBlockDef = blockDefs.find((b) => b.slug === activeSlug);
-  useEffect3(() => {
+  useEffect4(() => {
     if (notification?.status === "success") {
       const t = setTimeout(() => setNotification(null), 3e3);
       return () => clearTimeout(t);
     }
   }, [notification]);
-  useEffect3(() => {
+  useEffect4(() => {
     function handleClick(e) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setVersionDropdownOpen(false);
@@ -1378,10 +1572,17 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     if (!activeBlock || isReadOnly) return false;
     setNotification({ status: "publishing" });
     try {
-      const req = mapToSaveRequest(activeBlock);
+      const normalizeSlug = (s) => s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+      const publishedSlug = normalizeSlug(activeBlock.slug);
+      const req = {
+        blockSlug: publishedSlug,
+        name: activeBlock.labels?.singular ?? activeBlock.slug,
+        schema: { fields: activeBlock.fields },
+        changelog: "Created via block builder"
+      };
       const res = await fetch("/api/blocks/save", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", "X-Block-Builder": "1" },
         body: JSON.stringify(req)
       });
       const json = await res.json();
@@ -1392,7 +1593,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
           status: "success",
           msg: `v${json.versionNumber ?? "?"} published successfully!`
         });
-        onAfterPublish();
+        onAfterPublish(publishedSlug);
         return true;
       } else {
         setNotification({
@@ -1411,35 +1612,54 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       return false;
     }
   }
-  function handleExport() {
-    if (blocks.length === 0) return;
-    const outputs = [...generateAllBlocks(blocks), generateIndexFile(blocks)];
-    for (const out of outputs) {
-      const blob = new Blob([out.code], { type: "text/plain" });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = out.filename;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }
+  function handleExportJson() {
+    if (!activeBlock) return;
+    const blob = new Blob([JSON.stringify(activeBlock, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${activeBlock.slug}-schema.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+  function handleImportJson(e) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const json = JSON.parse(event.target?.result);
+        if (json && json.slug && Array.isArray(json.fields)) {
+          if (!json.id) json.id = uuidv4();
+          json.fields = ensureFieldIds(json.fields);
+          loadBlock(json);
+          setNotification({ status: "success", msg: "Block imported successfully!" });
+        } else {
+          setNotification({ status: "error", title: "Invalid JSON", errors: ["The file does not contain a valid block schema."] });
+        }
+      } catch (err) {
+        setNotification({ status: "error", title: "Parse Error", errors: ["Could not parse JSON file."] });
+      }
+    };
+    reader.readAsText(file);
+    if (fileInputRef.current) fileInputRef.current.value = "";
   }
   function formatDate(iso) {
     return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric" });
   }
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ React7.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ React7.createElement("span", { className: "bb-topbar__dirty" }, "* unsaved")), /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ React7.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ React8.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ React8.createElement("span", { className: "bb-topbar__dirty" }, "* unsaved")), /* @__PURE__ */ React8.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
       className: "bb-block-picker__trigger",
       onClick: () => setBlockPickerOpen((o) => !o)
     },
-    /* @__PURE__ */ React7.createElement(Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
-    /* @__PURE__ */ React7.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
-    /* @__PURE__ */ React7.createElement(ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
-  ), blockPickerOpen && /* @__PURE__ */ React7.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
+    /* @__PURE__ */ React8.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
+    /* @__PURE__ */ React8.createElement(ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
+  ), blockPickerOpen && /* @__PURE__ */ React8.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ React8.createElement(
     "button",
     {
       key: b.id,
@@ -1450,20 +1670,20 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         onBlockSelect(b.slug);
       }
     },
-    /* @__PURE__ */ React7.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
-    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
-  )))), versions.length > 0 && /* @__PURE__ */ React7.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
+    /* @__PURE__ */ React8.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
+  )))), versions.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
       className: `bb-version-selector__trigger${isReadOnly ? " bb-version-selector__trigger--readonly" : ""}`,
       onClick: () => setVersionDropdownOpen((o) => !o)
     },
-    /* @__PURE__ */ React7.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
-    /* @__PURE__ */ React7.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
-    selectedVersion?.isCurrent && /* @__PURE__ */ React7.createElement("span", { className: "bb-version-selector__badge" }, "current"),
-    /* @__PURE__ */ React7.createElement(ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
-  ), versionDropdownOpen && /* @__PURE__ */ React7.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ React8.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
+    selectedVersion?.isCurrent && /* @__PURE__ */ React8.createElement("span", { className: "bb-version-selector__badge" }, "current"),
+    /* @__PURE__ */ React8.createElement(ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
+  ), versionDropdownOpen && /* @__PURE__ */ React8.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ React8.createElement(
     "button",
     {
       key: v.id,
@@ -1474,20 +1694,45 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         onVersionSelect(v.id);
       }
     },
-    /* @__PURE__ */ React7.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
-    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ React7.createElement("span", { className: "bb-version-selector__badge" }, "current")),
-    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "..." : ""}` : formatDate(v.createdAt))
-  ))))), /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ React8.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ React8.createElement("span", { className: "bb-version-selector__badge" }, "current")),
+    /* @__PURE__ */ React8.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "..." : ""}` : formatDate(v.createdAt))
+  ))))), /* @__PURE__ */ React8.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      type: "file",
+      accept: ".json",
+      ref: fileInputRef,
+      style: { display: "none" },
+      onChange: handleImportJson
+    }
+  ), /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => fileInputRef.current?.click(),
+      className: "bb-btn bb-btn--secondary"
+    },
+    "Import JSON"
+  ), /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
-      onClick: handleExport,
-      disabled: blocks.length === 0,
-      className: "bb-btn bb-btn--secondary",
-      style: { display: "none" }
+      onClick: handleExportJson,
+      disabled: !activeBlock,
+      className: "bb-btn bb-btn--secondary"
     },
-    "Export .ts"
-  ), isReadOnly ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    "Export JSON"
+  ), /* @__PURE__ */ React8.createElement("div", { style: { width: 1, height: 24, background: "var(--bb-border)", margin: "0 4px" } }), /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onTogglePreview,
+      disabled: !activeBlock,
+      className: `bb-btn ${previewOpen ? "bb-btn--primary" : "bb-btn--secondary"}`
+    },
+    previewOpen ? "Close Preview" : "Live Preview"
+  ), isReadOnly ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
@@ -1498,7 +1743,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       disabled: !currentVersion
     },
     "Back to current"
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
@@ -1510,7 +1755,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       className: "bb-btn bb-btn--warning"
     },
     notification?.status === "publishing" ? "Restoring..." : "Restore as new version"
-  )) : /* @__PURE__ */ React7.createElement(
+  )) : /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
@@ -1519,37 +1764,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__ */ React7.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ React7.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ React7.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ React7.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ React7.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ React7.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ React7.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ React7.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ React7.createElement(X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ React7.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ React7.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ React7.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ React7.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ React7.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ React7.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ React7.createElement("li", { key: i }, e)))), /* @__PURE__ */ React7.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ React7.createElement(X, { size: 12, strokeWidth: 2 })))));
+  ))), notification?.status === "publishing" && /* @__PURE__ */ React8.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ React8.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ React8.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ React8.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ React8.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ React8.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ React8.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ React8.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ React8.createElement(X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ React8.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ React8.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ React8.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ React8.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ React8.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ React8.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ React8.createElement("li", { key: i }, e)))), /* @__PURE__ */ React8.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ React8.createElement(X, { size: 12, strokeWidth: 2 })))));
 }
 
 // src/block-builder/components/canvas/BlockList.tsx
-import React8 from "react";
+import React9 from "react";
 import { Copy, Trash2, Plus } from "lucide-react";
-function BlockList() {
+function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const addBlock = useBuilderStore((s) => s.addBlock);
   const removeBlock = useBuilderStore((s) => s.removeBlock);
   const duplicateBlock = useBuilderStore((s) => s.duplicateBlock);
   const setActiveBlock = useBuilderStore((s) => s.setActiveBlock);
-  return /* @__PURE__ */ React8.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ React8.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ React8.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ React8.createElement(Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ React8.createElement("div", { className: "bb-sidebar__body" }, blocks.length === 0 && /* @__PURE__ */ React8.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ React8.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__ */ React9.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ React9.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ React9.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ React9.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ React9.createElement(Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ React9.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__ */ React9.createElement(
+      "div",
+      {
+        key: def.id,
+        onClick: () => onBlockSelect?.(def.slug),
+        className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
+      },
+      /* @__PURE__ */ React9.createElement("div", { className: "bb-block-item__slug" }, def.slug),
+      /* @__PURE__ */ React9.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__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "div",
       {
         key: block.id,
         onClick: () => setActiveBlock(block.id),
         className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
       },
-      /* @__PURE__ */ React8.createElement("div", { className: "bb-block-item__slug" }, block.slug),
-      /* @__PURE__ */ React8.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React9.createElement("div", { className: "bb-block-item__slug" }, block.slug),
+      /* @__PURE__ */ React9.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
+      /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: "bb-block-item__actions",
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           "button",
           {
             type: "button",
@@ -1557,9 +1820,9 @@ function BlockList() {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          /* @__PURE__ */ React8.createElement(Copy, { size: 12, strokeWidth: 1.75 })
+          /* @__PURE__ */ React9.createElement(Copy, { size: 12, strokeWidth: 1.75 })
         ),
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           "button",
           {
             type: "button",
@@ -1567,15 +1830,15 @@ function BlockList() {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          /* @__PURE__ */ React8.createElement(Trash2, { size: 12, strokeWidth: 1.75 })
+          /* @__PURE__ */ React9.createElement(Trash2, { size: 12, strokeWidth: 1.75 })
         )
       )
     );
-  })));
+  }), !useApiNav && blocks.length === 0 && /* @__PURE__ */ React9.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ React9.createElement("br", null), "Click + to create one.")));
 }
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
-import React10 from "react";
+import React11 from "react";
 import {
   DndContext,
   closestCenter,
@@ -1592,68 +1855,107 @@ import {
 import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers";
 
 // src/block-builder/components/canvas/SortableFieldCard.tsx
-import React9 from "react";
+import React10 from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
   Type,
   AlignLeft,
+  AlignJustify,
   Hash,
   Mail,
   Calendar,
   CheckSquare,
   ChevronDown as ChevronDown2,
-  Circle,
   Upload,
+  Image,
   Link,
   Braces,
+  List,
+  Box,
+  Columns,
+  Folder,
   X as X2
 } from "lucide-react";
 var ICON_MAP = {
   text: Type,
   textarea: AlignLeft,
+  richtext: AlignJustify,
   number: Hash,
   email: Mail,
   date: Calendar,
   checkbox: CheckSquare,
   select: ChevronDown2,
-  radio: Circle,
-  upload: Upload,
+  image: Image,
+  file: Upload,
   relationship: Link,
-  json: Braces
+  json: Braces,
+  array: List,
+  group: Box,
+  row: Columns,
+  tabs: Folder,
+  collapsible: ChevronDown2
 };
-function SortableFieldCard({ field, blockId, index }) {
+var SortableFieldCard = React10.memo(function SortableFieldCard2({
+  field,
+  blockId,
+  index,
+  isActive,
+  isReadOnly,
+  onDrillDown
+}) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: field.id
   });
-  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
   const setActiveField = useBuilderStore((s) => s.setActiveField);
   const removeField = useBuilderStore((s) => s.removeField);
-  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
-  const isActive = activeFieldId === field.id;
   const wrapStyle = {
     transform: CSS.Transform.toString(transform),
     transition
   };
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       ref: setNodeRef,
       style: wrapStyle,
       className: `bb-field-card-wrap${isDragging ? " bb-field-card-wrap--dragging" : ""}`,
       ...attributes,
-      ...listeners
+      ...listeners,
+      "aria-label": `Draggable field card for ${field.name || "unnamed"}`
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: `bb-field-card${isActive ? " bb-field-card--active" : ""}`,
         onClick: () => setActiveField(isActive ? null : field.id)
       },
-      /* @__PURE__ */ React9.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ React9.createElement(FieldIcon, { type: field.type })),
-      /* @__PURE__ */ React9.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ React9.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ React9.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ React9.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ React9.createElement("span", { className: "bb-field-card__required" }, "*"))),
-      /* @__PURE__ */ React9.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
-      !isReadOnly && /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ React10.createElement(FieldIcon, { type: field.type })),
+      /* @__PURE__ */ React10.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ React10.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ React10.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ React10.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ React10.createElement("span", { className: "bb-field-card__required" }, "*"))),
+      /* @__PURE__ */ React10.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
+      onDrillDown && /* @__PURE__ */ React10.createElement(
+        "button",
+        {
+          type: "button",
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: (e) => {
+            e.stopPropagation();
+            onDrillDown();
+          },
+          className: "bb-field-card__drill",
+          title: "Edit Inner Fields",
+          style: {
+            marginLeft: "auto",
+            fontSize: 12,
+            padding: "2px 8px",
+            borderRadius: 4,
+            border: "1px solid var(--theme-border)",
+            background: "var(--theme-elevation-100)",
+            cursor: "pointer"
+          }
+        },
+        "Edit Fields"
+      ),
+      !isReadOnly && /* @__PURE__ */ React10.createElement(
         "button",
         {
           type: "button",
@@ -1665,21 +1967,46 @@ function SortableFieldCard({ field, blockId, index }) {
           className: "bb-field-card__delete",
           title: "Remove field"
         },
-        /* @__PURE__ */ React9.createElement(X2, { size: 12, strokeWidth: 2 })
+        /* @__PURE__ */ React10.createElement(X2, { size: 12, strokeWidth: 2 })
       )
     )
   );
-}
+});
 function FieldIcon({ type }) {
   const Icon = ICON_MAP[type];
-  return Icon ? /* @__PURE__ */ React9.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null;
+  return Icon ? /* @__PURE__ */ React10.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null;
 }
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
+function resolvePathLabels(block, parentPath) {
+  const labels = [];
+  let currentFields = block.fields;
+  for (const segment of parentPath) {
+    const sepIndex = segment.indexOf("::");
+    if (sepIndex !== -1) {
+      const fieldId = segment.slice(0, sepIndex);
+      const tabIndex = Number(segment.slice(sepIndex + 2));
+      const tabsField = currentFields?.find((f) => f.id === fieldId);
+      const tab = tabsField?.tabs?.[tabIndex];
+      labels.push(tab?.label || tabsField?.name || "Tab");
+      currentFields = tab?.fields;
+      continue;
+    }
+    const field = currentFields?.find((f) => f.id === segment);
+    labels.push(field?.name || field?.label || "Nested Field");
+    currentFields = field?.fields;
+  }
+  return labels;
+}
 function BuilderCanvas() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
   const reorderFields = useBuilderStore((s) => s.reorderFields);
+  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const activeParentPath = useBuilderStore((s) => s.activeParentPath);
+  const truncateParentPath = useBuilderStore((s) => s.truncateParentPath);
+  const resetParentPath = useBuilderStore((s) => s.resetParentPath);
+  const pushParentPath = useBuilderStore((s) => s.pushParentPath);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
@@ -1689,16 +2016,41 @@ function BuilderCanvas() {
     if (isReadOnly) return;
     const { active, over } = event;
     if (!over || active.id === over.id || !block) return;
-    const fromIndex = block.fields.findIndex((f) => f.id === active.id);
-    const toIndex = block.fields.findIndex((f) => f.id === over.id);
+    const targetFields2 = getTargetFields(block, activeParentPath);
+    if (!targetFields2) return;
+    const fromIndex = targetFields2.findIndex((f) => f.id === active.id);
+    const toIndex = targetFields2.findIndex((f) => f.id === over.id);
     if (fromIndex !== -1 && toIndex !== -1) {
       reorderFields(block.id, fromIndex, toIndex);
     }
   }
   if (!block) {
-    return /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React10.createElement("span", { className: "bb-canvas__no-block" }, "Select or create a block from the left panel."));
+    return /* @__PURE__ */ React11.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React11.createElement("span", { className: "bb-canvas__no-block" }, "Select or create a block from the left panel."));
   }
-  return /* @__PURE__ */ React10.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__header" }, block.slug, " - ", block.fields.length, " field", block.fields.length !== 1 ? "s" : ""), block.fields.length === 0 ? /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ React10.createElement(
+  const targetFields = getTargetFields(block, activeParentPath) || [];
+  const pathLabels = resolvePathLabels(block, activeParentPath);
+  return /* @__PURE__ */ React11.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ React11.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ React11.createElement("div", { className: "bb-canvas__header" }, activeParentPath.length === 0 ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, block.slug, " - ", targetFields.length, " field", targetFields.length !== 1 ? "s" : "") : /* @__PURE__ */ React11.createElement("nav", { className: "bb-breadcrumb", "aria-label": "Field path" }, /* @__PURE__ */ React11.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => resetParentPath(),
+      className: "bb-breadcrumb__item"
+    },
+    block.slug
+  ), /* @__PURE__ */ React11.createElement("span", { className: "bb-breadcrumb__sep" }, "/"), activeParentPath.map((segment, index) => {
+    const isLast = index === activeParentPath.length - 1;
+    return /* @__PURE__ */ React11.createElement(React11.Fragment, { key: segment }, /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: isLast ? void 0 : () => truncateParentPath(index + 1),
+        className: "bb-breadcrumb__item",
+        "aria-current": isLast ? "location" : void 0,
+        "data-current": isLast ? "true" : void 0
+      },
+      pathLabels[index]
+    ), !isLast && /* @__PURE__ */ React11.createElement("span", { className: "bb-breadcrumb__sep" }, "/"));
+  }))), targetFields.length === 0 ? /* @__PURE__ */ React11.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ React11.createElement(
     DndContext,
     {
       sensors,
@@ -1706,19 +2058,22 @@ function BuilderCanvas() {
       modifiers: [restrictToVerticalAxis, restrictToParentElement],
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       SortableContext,
       {
-        items: block.fields.map((f) => f.id),
+        items: targetFields.map((f) => f.id),
         strategy: verticalListSortingStrategy
       },
-      /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__field-list" }, block.fields.map((field, i) => /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement("div", { className: "bb-canvas__field-list" }, targetFields.map((field, i) => /* @__PURE__ */ React11.createElement(
         SortableFieldCard,
         {
           key: field.id,
           field,
           blockId: block.id,
-          index: i
+          index: i,
+          isActive: activeFieldId === field.id,
+          isReadOnly,
+          onDrillDown: ["group", "row", "array", "collapsible"].includes(field.type) ? () => pushParentPath(field.id) : void 0
         }
       )))
     )
@@ -1726,18 +2081,18 @@ function BuilderCanvas() {
 }
 
 // src/block-builder/components/canvas/ConfigPanel.tsx
-import React13, { useState as useState5 } from "react";
+import React14, { useState as useState5 } from "react";
 
 // src/block-builder/components/config/BlockConfig.tsx
-import React11 from "react";
+import React12 from "react";
 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__ */ React11.createElement("div", { className: "bb-form__empty" }, "No block selected.");
+    return /* @__PURE__ */ React12.createElement("div", { className: "bb-form__empty" }, "No block selected.");
   }
-  return /* @__PURE__ */ React11.createElement("div", { className: "bb-form" }, /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement("div", { className: "bb-form" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ React12.createElement(
     "input",
     {
       type: "text",
@@ -1746,7 +2101,7 @@ function BlockConfig() {
       placeholder: "myBlock",
       className: "bb-input"
     }
-  ), /* @__PURE__ */ React11.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React12.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ React12.createElement(
     "input",
     {
       type: "text",
@@ -1755,7 +2110,7 @@ function BlockConfig() {
       placeholder: "MyBlock",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React11.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ React11.createElement(
+  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ React12.createElement(
     "input",
     {
       type: "text",
@@ -1764,7 +2119,7 @@ function BlockConfig() {
       placeholder: "My Block",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ React11.createElement(
+  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ React12.createElement(
     "input",
     {
       type: "text",
@@ -1773,7 +2128,7 @@ function BlockConfig() {
       placeholder: "My Blocks",
       className: "bb-input"
     }
-  ))), /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ React11.createElement(
+  ))), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ React12.createElement(
     "input",
     {
       type: "text",
@@ -1782,38 +2137,62 @@ function BlockConfig() {
       placeholder: "https://...",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React11.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ React11.createElement("strong", null, block.fields.length), " field", block.fields.length !== 1 ? "s" : "", " defined"));
+  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ React12.createElement("strong", null, block.fields.length), " field", block.fields.length !== 1 ? "s" : "", " defined"));
 }
 
 // src/block-builder/components/config/FieldConfig.tsx
-import React12 from "react";
+import React13 from "react";
 var ALL_TYPES = [
   "text",
   "textarea",
+  "richtext",
   "number",
   "email",
+  "url",
+  "color",
   "date",
   "checkbox",
   "select",
-  "radio",
-  "upload",
+  "multiselect",
+  "image",
+  "file",
+  "relationship",
+  "json",
+  "array",
+  "group",
+  "blocks",
+  "row",
+  "tabs",
+  "collapsible"
+];
+var NO_DEFAULT_VALUE_TYPES = /* @__PURE__ */ new Set([
+  "array",
+  "group",
+  "blocks",
+  "row",
+  "tabs",
+  "collapsible",
+  "image",
+  "file",
   "relationship",
   "json"
-];
+]);
 function FieldConfig() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const activeParentPath = useBuilderStore((s) => s.activeParentPath);
   const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
-  const field = block?.fields.find((f) => f.id === activeFieldId);
+  const field = block ? getTargetFields(block, activeParentPath)?.find((f) => f.id === activeFieldId) : void 0;
   const updateField = useBuilderStore((s) => s.updateField);
+  const pushParentPath = useBuilderStore((s) => s.pushParentPath);
   if (!activeBlockId || !activeFieldId || !field) {
-    return /* @__PURE__ */ React12.createElement("div", { className: "bb-form__empty" }, "Select a field to configure it.");
+    return /* @__PURE__ */ React13.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__ */ React12.createElement("div", { className: "bb-form" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Field Name *"), /* @__PURE__ */ React12.createElement(
+  const needsOptions = field.type === "select" || field.type === "multiselect";
+  return /* @__PURE__ */ React13.createElement("div", { className: "bb-form" }, /* @__PURE__ */ React13.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Field Name *"), /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "text",
@@ -1822,15 +2201,15 @@ function FieldConfig() {
       placeholder: "fieldName",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ React13.createElement(
     "select",
     {
       value: field.type,
       onChange: (e) => upd({ type: e.target.value }),
       className: "bb-input bb-select"
     },
-    ALL_TYPES.map((t) => /* @__PURE__ */ React12.createElement("option", { key: t, value: t }, t))
-  ))), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ React12.createElement(
+    ALL_TYPES.map((t) => /* @__PURE__ */ React13.createElement("option", { key: t, value: t }, t))
+  ))), /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "text",
@@ -1839,28 +2218,44 @@ function FieldConfig() {
       placeholder: "Human-readable label",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React13.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.required ?? false,
       onChange: (e) => upd({ required: e.target.checked })
     }
-  ), "Required"), /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+  ), "Required"), /* @__PURE__ */ React13.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.unique ?? false,
       onChange: (e) => upd({ unique: e.target.checked })
     }
-  ), "Unique"), /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+  ), "Unique"), /* @__PURE__ */ React13.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.localized ?? false,
       onChange: (e) => upd({ localized: e.target.checked })
     }
-  ), "Localized")), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Default Value"), /* @__PURE__ */ React12.createElement(
+  ), "Localized")), !NO_DEFAULT_VALUE_TYPES.has(field.type) && /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Default Value"), field.type === "checkbox" ? /* @__PURE__ */ React13.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React13.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.defaultValue === true,
+      onChange: (e) => upd({ defaultValue: e.target.checked })
+    }
+  ), "Checked by default") : field.type === "number" ? /* @__PURE__ */ React13.createElement(
+    "input",
+    {
+      type: "number",
+      value: typeof field.defaultValue === "number" ? field.defaultValue : "",
+      onChange: (e) => upd({ defaultValue: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
+      placeholder: "0",
+      className: "bb-input"
+    }
+  ) : /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "text",
@@ -1869,23 +2264,23 @@ function FieldConfig() {
       placeholder: "Default value",
       className: "bb-input"
     }
-  )), field.type === "relationship" && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ React12.createElement(
+  )), field.type === "relationship" && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "text",
-      value: field.relationTo ?? "",
-      onChange: (e) => upd({ relationTo: e.target.value }),
+      value: field.collection ?? "",
+      onChange: (e) => upd({ collection: e.target.value }),
       placeholder: "pages",
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React13.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "checkbox",
       checked: field.hasMany ?? false,
       onChange: (e) => upd({ hasMany: e.target.checked })
     }
-  ), "Has Many")), field.type === "array" && /* @__PURE__ */ React12.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Min Rows"), /* @__PURE__ */ React12.createElement(
+  ), "Has Many")), field.type === "array" && /* @__PURE__ */ React13.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Min Rows"), /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "number",
@@ -1893,7 +2288,7 @@ function FieldConfig() {
       onChange: (e) => upd({ minRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
       className: "bb-input"
     }
-  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "number",
@@ -1901,7 +2296,54 @@ function FieldConfig() {
       onChange: (e) => upd({ maxRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
       className: "bb-input"
     }
-  ))), needsOptions && /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ React12.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ React12.createElement(
+  ))), field.type === "tabs" && /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("div", { className: "bb-options-label" }, "Tabs"), (field.tabs ?? []).map((tab, i) => /* @__PURE__ */ React13.createElement("div", { key: tab.id ?? i, className: "bb-option-row" }, /* @__PURE__ */ React13.createElement(
+    "input",
+    {
+      type: "text",
+      value: tab.label,
+      placeholder: "Tab label",
+      onChange: (e) => {
+        const next = [...field.tabs ?? []];
+        next[i] = { ...next[i], label: e.target.value };
+        upd({ tabs: next });
+      },
+      className: "bb-input"
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => pushParentPath(encodeTabPath(field.id, i)),
+      className: "bb-add-option",
+      title: "Edit this tab's fields"
+    },
+    "Edit Fields"
+  ), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        const next = (field.tabs ?? []).filter((_, k) => k !== i);
+        upd({ tabs: next });
+      },
+      className: "bb-option-delete",
+      title: "Remove tab"
+    },
+    "x"
+  ))), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => upd({
+        tabs: [
+          ...field.tabs ?? [],
+          { id: uuidv4(), label: `Tab ${(field.tabs?.length ?? 0) + 1}`, fields: [] }
+        ]
+      }),
+      className: "bb-add-option"
+    },
+    "+ Add Tab"
+  )), needsOptions && /* @__PURE__ */ React13.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React13.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ React13.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "text",
@@ -1914,7 +2356,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     "input",
     {
       type: "text",
@@ -1927,7 +2369,7 @@ function FieldConfig() {
       },
       className: "bb-input"
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     "button",
     {
       type: "button",
@@ -1939,7 +2381,7 @@ function FieldConfig() {
       title: "Remove option"
     },
     "x"
-  ))), /* @__PURE__ */ React12.createElement(
+  ))), /* @__PURE__ */ React13.createElement(
     "button",
     {
       type: "button",
@@ -1956,7 +2398,7 @@ function ConfigPanel() {
   const activeFieldId = useBuilderStore((s) => s.activeFieldId);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const activeTab = activeFieldId ? "field" : tab;
-  return /* @__PURE__ */ React13.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ React13.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ React14.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ React14.createElement(
     "button",
     {
       key: t,
@@ -1965,26 +2407,29 @@ function ConfigPanel() {
       className: `bb-config__tab${activeTab === t ? " bb-config__tab--active" : ""}`
     },
     t
-  ))), /* @__PURE__ */ React13.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ React13.createElement(BlockConfig, null) : /* @__PURE__ */ React13.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ React13.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ React13.createElement("span", { className: "bb-config__readonly-label" }, "Read only")));
+  ))), /* @__PURE__ */ React14.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ React14.createElement(BlockConfig, null) : /* @__PURE__ */ React14.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ React14.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ React14.createElement("span", { className: "bb-config__readonly-label" }, "Read only")));
 }
 
 // src/block-builder/components/sidebar/FieldPalette.tsx
-import React14, { useState as useState6 } from "react";
+import React15, { useState as useState6 } from "react";
 import {
   Type as Type2,
   AlignLeft as AlignLeft2,
-  AlignJustify,
+  AlignJustify as AlignJustify2,
   Hash as Hash2,
   Mail as Mail2,
   Calendar as Calendar2,
   CheckSquare as CheckSquare2,
   ChevronDown as ChevronDown3,
-  Circle as Circle2,
+  Circle,
   Upload as Upload2,
   Link as Link2,
-  List,
-  Folder,
-  Braces as Braces2
+  List as List2,
+  Folder as Folder2,
+  Braces as Braces2,
+  Image as Image2,
+  Box as Box2,
+  Columns as Columns2
 } from "lucide-react";
 
 // src/block-builder/lib/field-palette.ts
@@ -1998,11 +2443,17 @@ var FIELD_PALETTE = [
   { type: "checkbox", label: "Checkbox", description: "Boolean toggle", icon: "CheckSquare", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
   // Choice
   { type: "select", label: "Select", description: "Dropdown selection", icon: "ChevronDown", category: "choice", color: "bg-purple-500/20 text-purple-400 border-purple-500/30" },
-  { type: "radio", label: "Radio", description: "Radio button group", icon: "Circle", category: "choice", color: "bg-purple-500/20 text-purple-400 border-purple-500/30" },
   // Media
-  { type: "upload", label: "Upload", description: "File or media upload", icon: "Upload", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
+  { type: "image", label: "Image", description: "Image upload", icon: "Image", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
+  { type: "file", label: "File", description: "File upload", icon: "Upload", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
   // Relational
   { type: "relationship", label: "Relationship", description: "Link to another collection", icon: "Link", category: "relational", color: "bg-orange-500/20 text-orange-400 border-orange-500/30" },
+  // Layout
+  { type: "array", label: "Array", description: "Repeating list of fields", icon: "List", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "group", label: "Group", description: "Grouped fields object", icon: "Box", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "row", label: "Row", description: "Horizontal layout row", icon: "Columns", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "tabs", label: "Tabs", description: "Tabbed layout container", icon: "Folder", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
+  { type: "collapsible", label: "Collapsible", description: "Expandable field group", icon: "ChevronDown", category: "layout", color: "bg-pink-500/20 text-pink-400 border-pink-500/30" },
   // Advanced
   { type: "json", label: "JSON", description: "Raw JSON data field", icon: "Braces", category: "advanced", color: "bg-red-500/20 text-red-400 border-red-500/30" }
 ];
@@ -2011,6 +2462,7 @@ var FIELD_CATEGORIES = [
   { id: "choice", label: "Choice" },
   { id: "media", label: "Media" },
   { id: "relational", label: "Relational" },
+  { id: "layout", label: "Layout" },
   { id: "advanced", label: "Advanced" }
 ];
 function getFieldMeta(type) {
@@ -2021,18 +2473,21 @@ function getFieldMeta(type) {
 var ICON_MAP2 = {
   Type: Type2,
   AlignLeft: AlignLeft2,
-  AlignJustify,
+  AlignJustify: AlignJustify2,
   Hash: Hash2,
   Mail: Mail2,
   Calendar: Calendar2,
   CheckSquare: CheckSquare2,
   ChevronDown: ChevronDown3,
-  Circle: Circle2,
+  Circle,
   Upload: Upload2,
   Link: Link2,
-  List,
-  Folder,
-  Braces: Braces2
+  List: List2,
+  Folder: Folder2,
+  Braces: Braces2,
+  Image: Image2,
+  Box: Box2,
+  Columns: Columns2
 };
 function FieldPalette() {
   const [search, setSearch] = useState6("");
@@ -2046,7 +2501,7 @@ function FieldPalette() {
     if (!activeBlockId || isReadOnly) return;
     addField(activeBlockId, type);
   }
-  return /* @__PURE__ */ React14.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ React14.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ React14.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ React15.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ React15.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ React15.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ React15.createElement(
     "input",
     {
       type: "text",
@@ -2055,7 +2510,7 @@ function FieldPalette() {
       placeholder: "Search...",
       className: "bb-palette__search"
     }
-  )), /* @__PURE__ */ React14.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ React14.createElement(
+  )), /* @__PURE__ */ React15.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ React15.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ React15.createElement(
     FieldButton,
     {
       key: item.type,
@@ -2067,7 +2522,7 @@ function FieldPalette() {
     }
   ))) : FIELD_CATEGORIES.map((cat) => {
     const items = FIELD_PALETTE.filter((f) => f.category === cat.id);
-    return /* @__PURE__ */ React14.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ React15.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ React15.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ React15.createElement(
       FieldButton,
       {
         key: item.type,
@@ -2078,7 +2533,7 @@ function FieldPalette() {
         disabled: !activeBlockId || isReadOnly
       }
     ))));
-  })), !activeBlockId && /* @__PURE__ */ React14.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
+  })), !activeBlockId && /* @__PURE__ */ React15.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
 }
 function FieldButton({
   type,
@@ -2089,7 +2544,7 @@ function FieldButton({
 }) {
   const meta = getFieldMeta(type);
   const Icon = ICON_MAP2[icon];
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "button",
     {
       type: "button",
@@ -2098,14 +2553,291 @@ function FieldButton({
       title: meta?.description,
       className: "bb-palette__item"
     },
-    /* @__PURE__ */ React14.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ React14.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
-    /* @__PURE__ */ React14.createElement("span", { className: "bb-palette__item__label" }, label),
-    /* @__PURE__ */ React14.createElement("span", { className: "bb-palette__item__type" }, type)
+    /* @__PURE__ */ React15.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ React15.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
+    /* @__PURE__ */ React15.createElement("span", { className: "bb-palette__item__label" }, label),
+    /* @__PURE__ */ React15.createElement("span", { className: "bb-palette__item__type" }, type)
+  );
+}
+
+// src/block-builder/components/canvas/CodePreview.tsx
+import React16, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+
+// src/block-builder/lib/codegen.ts
+function indent(n) {
+  return "  ".repeat(n);
+}
+function safeStr(s) {
+  return JSON.stringify(s);
+}
+function listToCode(items, body, depth) {
+  if (items.length === 0) return "[]";
+  const pad = indent(depth);
+  const innerPad = indent(depth + 1);
+  const entries = items.map((item) => `${innerPad}{
+${body(item)}
+${innerPad}}`).join(",\n");
+  return `[
+${entries}
+${pad}]`;
+}
+var UNNAMED_TYPES = /* @__PURE__ */ new Set(["row", "tabs", "collapsible"]);
+var NO_LABEL_TYPES = /* @__PURE__ */ new Set(["row"]);
+var NO_LOCALIZED_TYPES = /* @__PURE__ */ new Set(["row", "tabs", "collapsible"]);
+var NO_ADMIN_DESCRIPTION_TYPES = /* @__PURE__ */ new Set(["row", "tabs"]);
+var FIELDS_CONTAINER_TYPES = /* @__PURE__ */ new Set([
+  "array",
+  "group",
+  "row",
+  "collapsible"
+]);
+var PAYLOAD_TYPE = {
+  richtext: "richText",
+  image: "upload",
+  file: "upload",
+  multiselect: "select",
+  url: "text",
+  color: "text"
+};
+var UPLOAD_TYPES = /* @__PURE__ */ new Set(["image", "file"]);
+var DEFAULT_UPLOAD_COLLECTION = "media";
+function payloadType(type) {
+  return PAYLOAD_TYPE[type] ?? type;
+}
+function fieldToCode(field, depth = 1) {
+  const pad = indent(depth);
+  const innerPad = indent(depth + 1);
+  const lines = [];
+  if (!UNNAMED_TYPES.has(field.type)) {
+    lines.push(`${pad}name: ${safeStr(field.name)}`);
+  }
+  lines.push(`${pad}type: '${payloadType(field.type)}'`);
+  if (field.label && !NO_LABEL_TYPES.has(field.type)) {
+    lines.push(`${pad}label: ${safeStr(field.label)}`);
+  }
+  if (field.required) lines.push(`${pad}required: true`);
+  if (field.unique) lines.push(`${pad}unique: true`);
+  if (field.localized && !NO_LOCALIZED_TYPES.has(field.type)) {
+    lines.push(`${pad}localized: true`);
+  }
+  if (field.defaultValue !== void 0) {
+    const val = typeof field.defaultValue === "string" ? safeStr(String(field.defaultValue)) : field.defaultValue;
+    lines.push(`${pad}defaultValue: ${val}`);
+  }
+  if (field.type === "richtext") {
+    lines.push(`${pad}editor: lexicalEditor({})`);
+  }
+  if (field.options && field.options.length > 0) {
+    const opts = field.options.map((o) => `{ label: ${safeStr(o.label)}, value: ${safeStr(o.value)} }`).join(`, `);
+    lines.push(`${pad}options: [${opts}]`);
+  }
+  if (UPLOAD_TYPES.has(field.type)) {
+    lines.push(
+      `${pad}relationTo: ${safeStr(field.collection || DEFAULT_UPLOAD_COLLECTION)}`
+    );
+  } else if (field.collection) {
+    lines.push(`${pad}relationTo: ${safeStr(field.collection)}`);
+  }
+  if (field.type === "multiselect") {
+    lines.push(`${pad}hasMany: true`);
+  } else if (field.hasMany !== void 0) {
+    lines.push(`${pad}hasMany: ${field.hasMany}`);
+  }
+  if (field.minRows !== void 0) lines.push(`${pad}minRows: ${field.minRows}`);
+  if (field.maxRows !== void 0) lines.push(`${pad}maxRows: ${field.maxRows}`);
+  const children = field.fields ?? [];
+  if (children.length > 0 || FIELDS_CONTAINER_TYPES.has(field.type)) {
+    lines.push(
+      `${pad}fields: ${listToCode(children, (f) => fieldToCode(f, depth + 2), depth)}`
+    );
+  }
+  if (field.type === "blocks") {
+    lines.push(`${pad}blocks: []`);
+  }
+  if (field.type === "tabs") {
+    const tabsCode = (field.tabs ?? []).map((tab) => {
+      const tabPad = indent(depth + 2);
+      const tabLines = [];
+      if (tab.name) tabLines.push(`${tabPad}name: ${safeStr(tab.name)}`);
+      tabLines.push(`${tabPad}label: ${safeStr(tab.label)}`);
+      tabLines.push(
+        `${tabPad}fields: ${listToCode(tab.fields ?? [], (f) => fieldToCode(f, depth + 4), depth + 2)}`
+      );
+      return `${innerPad}{
+${tabLines.join(",\n")}
+${innerPad}}`;
+    }).join(",\n");
+    lines.push(
+      `${pad}tabs: ${(field.tabs ?? []).length > 0 ? `[
+${tabsCode}
+${pad}]` : "[]"}`
+    );
+  }
+  const adminParts = [];
+  if (field.admin?.description && !NO_ADMIN_DESCRIPTION_TYPES.has(field.type))
+    adminParts.push(`description: ${safeStr(field.admin.description)}`);
+  if (field.admin?.placeholder)
+    adminParts.push(`placeholder: ${safeStr(field.admin.placeholder)}`);
+  if (field.admin?.readOnly) adminParts.push(`readOnly: true`);
+  if (field.admin?.hidden) adminParts.push(`hidden: true`);
+  if (adminParts.length > 0) {
+    lines.push(`${pad}admin: { ${adminParts.join(", ")} }`);
+  }
+  return lines.join(",\n");
+}
+function generateBlockCode(block) {
+  const hasRichText = containsRichText(block.fields);
+  const imports = [`import type { Block } from 'payload'`];
+  if (hasRichText) {
+    imports.push(`import { lexicalEditor } from '@payloadcms/richtext-lexical'`);
+  }
+  const fieldsCode = block.fields.map((f) => `    {
+${fieldToCode(f, 3)}
+    }`).join(",\n");
+  const labelsCode = block.labels ? `
+  labels: {
+    singular: ${safeStr(block.labels.singular ?? block.slug)},
+    plural: ${safeStr(block.labels.plural ?? block.slug + "s")},
+  },` : "";
+  const interfaceLine = block.interfaceName ? `
+  interfaceName: ${safeStr(block.interfaceName)},` : "";
+  const exportName = block.interfaceName ?? toCamelCase(block.slug);
+  return [
+    imports.join("\n"),
+    "",
+    `export const ${exportName}: Block = {`,
+    `  slug: ${safeStr(block.slug)},${interfaceLine}${labelsCode}`,
+    `  fields: [`,
+    fieldsCode,
+    `  ],`,
+    `}`,
+    ""
+  ].join("\n");
+}
+function containsRichText(fields) {
+  return fields.some((f) => {
+    if (f.type === "richtext") return true;
+    if (f.fields && containsRichText(f.fields)) return true;
+    if (f.tabs?.some((tab) => containsRichText(tab.fields ?? []))) return true;
+    return false;
+  });
+}
+function toCamelCase(slug) {
+  return slug.split(/[-_]/).map(
+    (part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)
+  ).join("");
+}
+function toPascalCase(slug) {
+  return slug.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function getTsType(field) {
+  switch (field.type) {
+    case "number":
+      return "number";
+    case "checkbox":
+      return "boolean";
+    case "text":
+    case "textarea":
+    case "email":
+    case "url":
+    case "color":
+    case "select":
+    case "date":
+      return "string";
+    case "multiselect":
+      return "string[]";
+    case "group":
+      return field.fields ? objectType(flattenProps(field.fields)) : "any";
+    case "array":
+      if (field.fields) {
+        const inner = flattenProps(field.fields).map((p) => `${p.name}: ${p.type}`).join("; ");
+        return `Array<{ id: string; ${inner} }>`;
+      }
+      return "any[]";
+    default:
+      return "any";
+  }
+}
+function objectType(props) {
+  return props.length > 0 ? `{ ${props.map((p) => `${p.name}: ${p.type}`).join("; ")} }` : "Record<string, unknown>";
+}
+function flattenProps(fields) {
+  const out = [];
+  for (const f of fields) {
+    if (f.type === "row" || f.type === "collapsible") {
+      out.push(...flattenProps(f.fields ?? []));
+    } else if (f.type === "tabs") {
+      for (const tab of f.tabs ?? []) {
+        if (tab.name) {
+          out.push({ name: tab.name, type: objectType(flattenProps(tab.fields ?? [])) });
+        } else {
+          out.push(...flattenProps(tab.fields ?? []));
+        }
+      }
+    } else {
+      out.push({ name: f.name, type: getTsType(f) });
+    }
+  }
+  return out;
+}
+function generateReactComponent(block) {
+  const componentName = block.interfaceName ?? toPascalCase(block.slug);
+  const propsName = `${componentName}Props`;
+  const propList = flattenProps(block.fields);
+  const propsCode = propList.map((p) => `  ${p.name}: ${p.type}`).join("\n");
+  const fieldsJsx = propList.map((p) => `      <div className="field-${p.name}">
+        {/* ${p.name} */}
+        {String(props.${p.name})}
+      </div>`).join("\n");
+  const code = [
+    `import React from 'react'`,
+    ``,
+    `export type ${propsName} = {`,
+    propsCode,
+    `}`,
+    ``,
+    `export function ${componentName}(props: ${propsName}) {`,
+    `  return (`,
+    `    <div className="${block.slug}">`,
+    fieldsJsx,
+    `    </div>`,
+    `  )`,
+    `}`,
+    ``
+  ].join("\n");
+  return {
+    filename: `${componentName}.tsx`,
+    code,
+    language: "typescript"
+  };
+}
+function generateBlockOutput(block) {
+  return {
+    filename: `${block.slug}.ts`,
+    code: generateBlockCode(block),
+    language: "typescript"
+  };
+}
+function generateAllBlocks(blocks, options = {}) {
+  return blocks.flatMap(
+    (block) => options.react ? [generateBlockOutput(block), generateReactComponent(block)] : [generateBlockOutput(block)]
   );
 }
+function generateIndexFile(blocks) {
+  const exportName = (b) => b.interfaceName ?? toCamelCase(b.slug);
+  const imports = blocks.map((b) => `import { ${exportName(b)} } from './${b.slug}'`).join("\n");
+  const exportList = blocks.map((b) => `  ${exportName(b)}`).join(",\n");
+  const code = [
+    imports,
+    "",
+    `export const blocks = [`,
+    exportList,
+    `] as const`,
+    ""
+  ].join("\n");
+  return { filename: "index.ts", code, language: "typescript" };
+}
 
 // src/block-builder/components/canvas/CodePreview.tsx
-import React15, { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
 var KEYWORDS = /* @__PURE__ */ new Set([
   "import",
   "export",
@@ -2193,22 +2925,22 @@ var TOKEN_COLORS = {
 };
 function HighlightedCode({ code }) {
   const tokens = tokenise(code);
-  return /* @__PURE__ */ React15.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ React15.createElement("span", { key: i, style: { color: TOKEN_COLORS[tok.kind] } }, tok.text)));
+  return /* @__PURE__ */ React16.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ React16.createElement("span", { key: i, style: { color: TOKEN_COLORS[tok.kind] } }, tok.text)));
 }
 function CodePreview() {
   const blocks = useBuilderStore((s) => s.blocks);
   const [fileMap, setFileMap] = useState7({});
   const [activeFile, setActiveFile] = useState7(null);
   const [copied, setCopied] = useState7(false);
-  const timerRef = useRef4(null);
-  const copyTimerRef = useRef4(null);
+  const timerRef = useRef5(null);
+  const copyTimerRef = useRef5(null);
   const regenerate = useCallback4(() => {
     if (blocks.length === 0) {
       setFileMap({});
       setActiveFile(null);
       return;
     }
-    const blockOutputs = generateAllBlocks(blocks);
+    const blockOutputs = generateAllBlocks(blocks, { react: true });
     const indexOutput = generateIndexFile(blocks);
     const next = {};
     for (const out of blockOutputs) next[out.filename] = out.code;
@@ -2219,7 +2951,7 @@ function CodePreview() {
       return prev && keys.includes(prev) ? prev : keys[0] ?? null;
     });
   }, [blocks]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(regenerate, 300);
     return () => {
@@ -2238,7 +2970,7 @@ function CodePreview() {
   const activeCode = activeFile ? fileMap[activeFile] ?? "" : "";
   const lineCount = activeCode ? activeCode.split("\n").length : 0;
   if (fileNames.length === 0) {
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React16.createElement(
       "div",
       {
         className: "code-preview",
@@ -2255,7 +2987,7 @@ function CodePreview() {
       "Add a block to see generated TypeScript code"
     );
   }
-  return /* @__PURE__ */ React15.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ React16.createElement(
     "div",
     {
       style: {
@@ -2269,7 +3001,7 @@ function CodePreview() {
     },
     fileNames.map((name) => {
       const isActive = activeFile === name;
-      return /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React16.createElement(
         "button",
         {
           key: name,
@@ -2292,8 +3024,8 @@ function CodePreview() {
         name
       );
     }),
-    /* @__PURE__ */ React15.createElement("div", { style: { flex: 1 } }),
-    lineCount > 0 && /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("div", { style: { flex: 1 } }),
+    lineCount > 0 && /* @__PURE__ */ React16.createElement(
       "span",
       {
         style: {
@@ -2306,7 +3038,7 @@ function CodePreview() {
       lineCount,
       " lines"
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "button",
       {
         type: "button",
@@ -2329,7 +3061,7 @@ function CodePreview() {
       },
       copied ? "Copied" : "Copy"
     )
-  ), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React16.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ React16.createElement(
     "div",
     {
       style: {
@@ -2346,8 +3078,8 @@ function CodePreview() {
       },
       "aria-hidden": "true"
     },
-    activeCode.split("\n").map((_, i) => /* @__PURE__ */ React15.createElement("div", { key: i }, i + 1))
-  ), /* @__PURE__ */ React15.createElement(
+    activeCode.split("\n").map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ React16.createElement(
     "pre",
     {
       style: {
@@ -2362,37 +3094,198 @@ function CodePreview() {
         whiteSpace: "pre"
       }
     },
-    /* @__PURE__ */ React15.createElement(HighlightedCode, { code: activeCode })
+    /* @__PURE__ */ React16.createElement(HighlightedCode, { code: activeCode })
   )));
 }
 
+// src/block-builder/components/canvas/LivePreview.tsx
+import React17, { useState as useState8 } from "react";
+import {
+  Type as Type3,
+  AlignLeft as AlignLeft3,
+  AlignJustify as AlignJustify3,
+  Hash as Hash3,
+  Mail as Mail3,
+  Calendar as Calendar3,
+  CheckSquare as CheckSquare3,
+  ChevronDown as ChevronDown4,
+  Upload as Upload3,
+  Image as ImageIcon,
+  Link as LinkIcon,
+  Braces as Braces3,
+  List as List3,
+  Box as Box3,
+  Columns as Columns3,
+  Folder as Folder3,
+  LayoutTemplate
+} from "lucide-react";
+var TYPE_ICON = {
+  text: Type3,
+  textarea: AlignLeft3,
+  richtext: AlignJustify3,
+  number: Hash3,
+  email: Mail3,
+  url: LinkIcon,
+  date: Calendar3,
+  checkbox: CheckSquare3,
+  select: ChevronDown4,
+  image: ImageIcon,
+  file: Upload3,
+  relationship: LinkIcon,
+  json: Braces3,
+  array: List3,
+  group: Box3,
+  row: Columns3,
+  tabs: Folder3,
+  collapsible: ChevronDown4
+};
+function TypeIcon({ type }) {
+  const Icon = TYPE_ICON[type] ?? Type3;
+  return /* @__PURE__ */ React17.createElement(Icon, { size: 13, strokeWidth: 1.75 });
+}
+function fieldDisplayLabel(field) {
+  return field.label || field.name || "Untitled field";
+}
+function fullFieldPath(field, prefix) {
+  const name = field.name || "\u2014";
+  return prefix ? `${prefix}.${name}` : name;
+}
+function fieldPlaceholder(field) {
+  if (field.admin?.placeholder) return field.admin.placeholder;
+  switch (field.type) {
+    case "email":
+      return "name@example.com";
+    case "url":
+      return "https://example.com";
+    case "textarea":
+    case "richtext":
+      return `Write ${fieldDisplayLabel(field).toLowerCase()} here\u2026`;
+    case "text":
+    default:
+      return `Enter ${fieldDisplayLabel(field).toLowerCase()}`;
+  }
+}
+function pluralize(count, word) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+function FieldMeta({ field, path }) {
+  return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field__meta" }, path !== null && /* @__PURE__ */ React17.createElement("code", { className: "bb-preview-field__slug" }, path), /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__badge" }, field.type));
+}
+function FieldHead({ field, prefix }) {
+  return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field__head" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ React17.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field), field.required && /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__required" }, "*")), /* @__PURE__ */ React17.createElement(FieldMeta, { field, path: fullFieldPath(field, prefix) })));
+}
+function PreviewField({ field, prefix = "" }) {
+  switch (field.type) {
+    case "text":
+    case "url":
+    case "email":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("input", { className: "bb-preview-input", disabled: true, placeholder: fieldPlaceholder(field) }));
+    case "textarea":
+    case "richtext":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("textarea", { className: "bb-preview-textarea", disabled: true, rows: 3, placeholder: fieldPlaceholder(field) }));
+    case "number":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("input", { className: "bb-preview-input", type: "number", disabled: true, placeholder: field.admin?.placeholder ?? "0" }));
+    case "date":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("input", { className: "bb-preview-input", type: "date", disabled: true }));
+    case "checkbox":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement("label", { className: "bb-preview-checkbox" }, /* @__PURE__ */ React17.createElement("input", { type: "checkbox", className: "bb-preview-checkbox__input", disabled: true }), /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ React17.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field), field.required && /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__required" }, "*")), /* @__PURE__ */ React17.createElement(FieldMeta, { field, path: fullFieldPath(field, prefix) }))));
+    case "select":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("select", { className: "bb-preview-select", disabled: true }, /* @__PURE__ */ React17.createElement("option", null, field.options?.[0]?.label ?? "Select an option")));
+    case "json":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-placeholder" }, "Raw JSON data"));
+    case "image":
+    case "file":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-placeholder bb-preview-placeholder--upload" }, /* @__PURE__ */ React17.createElement(TypeIcon, { type: field.type }), field.type === "image" ? "Image upload" : "File upload"));
+    case "relationship":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-placeholder bb-preview-placeholder--upload" }, /* @__PURE__ */ React17.createElement(TypeIcon, { type: field.type }), field.collection ? `Linked to \u201C${field.collection}\u201D` : "No collection set", field.hasMany ? " \xB7 multiple" : ""));
+    case "array": {
+      const ownPath = fullFieldPath(field, prefix);
+      return /* @__PURE__ */ React17.createElement(PreviewGroup, { field, ownPath, sublabel: `repeating \xB7 ${pluralize(field.fields?.length ?? 0, "field")} per row` }, (field.fields ?? []).map((f) => /* @__PURE__ */ React17.createElement(PreviewField, { key: f.id, field: f, prefix: `${ownPath}[]` })));
+    }
+    case "group": {
+      const ownPath = fullFieldPath(field, prefix);
+      return /* @__PURE__ */ React17.createElement(PreviewGroup, { field, ownPath }, (field.fields ?? []).map((f) => /* @__PURE__ */ React17.createElement(PreviewField, { key: f.id, field: f, prefix: ownPath })));
+    }
+    case "collapsible":
+      return /* @__PURE__ */ React17.createElement(PreviewGroup, { field, ownPath: null }, (field.fields ?? []).map((f) => /* @__PURE__ */ React17.createElement(PreviewField, { key: f.id, field: f, prefix })));
+    case "row":
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-row" }, (field.fields ?? []).map((f) => /* @__PURE__ */ React17.createElement(PreviewField, { key: f.id, field: f, prefix })));
+    case "tabs":
+      return /* @__PURE__ */ React17.createElement(PreviewTabs, { field, prefix });
+    default:
+      return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field" }, /* @__PURE__ */ React17.createElement(FieldHead, { field, prefix }), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-placeholder" }, "Unsupported preview for \u201C", field.type, "\u201D"));
+  }
+}
+function PreviewGroup({ field, ownPath, sublabel, children }) {
+  return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-group" }, /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-group__header" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ React17.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field), sublabel && /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-group__sublabel" }, sublabel)), /* @__PURE__ */ React17.createElement(FieldMeta, { field, path: ownPath }))), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-group__body" }, React17.Children.count(children) > 0 ? children : /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-placeholder" }, "No fields inside yet")));
+}
+function PreviewTabs({ field, prefix }) {
+  const [active, setActive] = useState8(0);
+  const tabs = field.tabs ?? [];
+  const tab = tabs[active];
+  const tabPrefix = tab?.name ? prefix ? `${prefix}.${tab.name}` : tab.name : prefix;
+  return /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-group" }, /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-group__header" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__icon" }, /* @__PURE__ */ React17.createElement(TypeIcon, { type: field.type })), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-field__headtext" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-field__label" }, fieldDisplayLabel(field)), /* @__PURE__ */ React17.createElement(FieldMeta, { field, path: null }))), /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-tabs__list" }, tabs.length === 0 && /* @__PURE__ */ React17.createElement("span", { className: "bb-preview-placeholder", style: { margin: 8 } }, "No tabs yet"), tabs.map((t, i) => /* @__PURE__ */ React17.createElement(
+    "button",
+    {
+      key: t.id ?? i,
+      type: "button",
+      className: `bb-preview-tabs__tab${i === active ? " bb-preview-tabs__tab--active" : ""}`,
+      onClick: () => setActive(i)
+    },
+    t.label
+  ))), tab && /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-group__body" }, tab.name && /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-tabs__path" }, "Nested under ", /* @__PURE__ */ React17.createElement("code", { className: "bb-preview-field__slug" }, tabPrefix)), (tab.fields ?? []).length > 0 ? (tab.fields ?? []).map((f) => /* @__PURE__ */ React17.createElement(PreviewField, { key: f.id, field: f, prefix: tabPrefix })) : /* @__PURE__ */ React17.createElement("div", { className: "bb-preview-placeholder" }, "No fields inside yet")));
+}
+function LivePreview() {
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const blocks = useBuilderStore((s) => s.blocks);
+  const block = blocks.find((b) => b.id === activeBlockId);
+  if (!block || block.fields.length === 0) {
+    return /* @__PURE__ */ React17.createElement("div", { className: "bb-live-preview bb-live-preview--empty" }, /* @__PURE__ */ React17.createElement(LayoutTemplate, { size: 32, strokeWidth: 1.5, color: "var(--bb-text-subtle)", style: { marginBottom: 16 } }), /* @__PURE__ */ React17.createElement("p", { style: { fontWeight: 600, marginBottom: 8, color: "var(--bb-text)" } }, "Nothing to preview yet"), /* @__PURE__ */ React17.createElement("p", { style: { fontSize: 12, color: "var(--bb-text-subtle)", textAlign: "center", maxWidth: 260 } }, "Add fields from the palette on the left \u2014 this panel updates live as you build."));
+  }
+  return /* @__PURE__ */ React17.createElement("div", { className: "bb-live-preview" }, /* @__PURE__ */ React17.createElement("div", { className: "bb-live-preview__header" }, /* @__PURE__ */ React17.createElement("span", { className: "bb-live-preview__title" }, "Live Preview"), /* @__PURE__ */ React17.createElement("span", { className: "bb-live-preview__meta" }, block.labels?.singular ?? block.slug, " \xB7 ", pluralize(block.fields.length, "field"))), /* @__PURE__ */ React17.createElement("div", { className: "bb-live-preview__body" }, /* @__PURE__ */ React17.createElement("div", { className: "bb-live-preview__page" }, block.fields.map((field) => /* @__PURE__ */ React17.createElement(PreviewField, { key: field.id, field })))));
+}
+
 // src/block-builder/components/canvas/BuilderShell.tsx
 function BuilderShell({ loadSlug }) {
   const loadBlock = useBuilderStore((s) => s.loadBlock);
   const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
   const setBlockSlug = useBuilderStore((s) => s.setBlockSlug);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
-  const [activeSlug, setActiveSlug] = useState8(loadSlug ?? null);
-  const [loading, setLoading] = useState8(!!loadSlug);
-  const [loadError, setLoadError] = useState8(null);
-  const [showCodePreview, setShowCodePreview] = useState8(false);
-  const [versions, setVersions] = useState8([]);
-  const [selectedVersionId, setSelectedVersionId] = useState8(null);
-  const [blockDefs, setBlockDefs] = useState8([]);
-  const [mobilePanelTab, setMobilePanelTab] = useState8("blocks");
-  useEffect5(() => {
-    fetch("/api/block-definitions?limit=200&depth=0").then((r) => r.json()).then((json) => {
+  const [activeSlug, setActiveSlug] = useState9(loadSlug ?? null);
+  const [loading, setLoading] = useState9(!!loadSlug);
+  const [notification, setNotification] = useState9(null);
+  const [showCodePreview, setShowCodePreview] = useState9(false);
+  const [versions, setVersions] = useState9([]);
+  const [selectedVersionId, setSelectedVersionId] = useState9(null);
+  const [blockDefs, setBlockDefs] = useState9([]);
+  const [mobilePanelTab, setMobilePanelTab] = useState9("blocks");
+  const [isMounted, setIsMounted] = useState9(false);
+  const [previewOpen, setPreviewOpen] = useState9(false);
+  useEffect6(() => {
+    setIsMounted(true);
+  }, []);
+  const refreshBlockDefs = useCallback5(async (reportErrors = false) => {
+    try {
+      const res = await fetch("/api/block-definitions?limit=200&depth=0");
+      const json = await res.json();
       setBlockDefs(
         (json.docs ?? []).map((d) => ({ id: String(d.id), slug: d.slug, name: d.name }))
       );
-    }).catch((err) => {
+    } catch (err) {
       console.error("[block-builder] Failed to load block definitions:", err);
-      setLoadError("Could not load block definitions. Please refresh the page.");
-    });
+      if (reportErrors) {
+        setNotification({ status: "error", title: "Failed to load block definitions", errors: ["Could not load block definitions. Please refresh the page."] });
+      }
+    }
   }, []);
+  useEffect6(() => {
+    refreshBlockDefs(true);
+  }, [refreshBlockDefs]);
   const loadVersionsForSlug = useCallback5(async (slug) => {
     try {
-      const res = await fetch(`/api/block-builder/versions/${encodeURIComponent(slug)}`);
+      const res = await fetch(`/api/block-builder/versions/${encodeURIComponent(slug)}`, {
+        headers: { "X-Block-Builder": "1" }
+      });
       const json = await res.json();
       return json.versions ?? [];
     } catch {
@@ -2401,20 +3294,22 @@ function BuilderShell({ loadSlug }) {
   }, []);
   const loadVersion = useCallback5(async (slug, versionId) => {
     setLoading(true);
-    setLoadError(null);
+    setNotification(null);
     const url = versionId ? `/api/block-builder/load/${encodeURIComponent(slug)}?versionId=${encodeURIComponent(versionId)}` : `/api/block-builder/load/${encodeURIComponent(slug)}`;
     try {
-      const res = await fetch(url);
+      const res = await fetch(url, {
+        headers: { "X-Block-Builder": "1" }
+      });
       const json = await res.json();
       if (json.block) {
         loadBlock(json.block);
         setVersionMeta(json.versionId ?? null, !(json.isCurrent ?? true));
         setSelectedVersionId(json.versionId ?? null);
       } else {
-        setLoadError(json.error ?? "Failed to load block");
+        setNotification({ status: "error", title: "Failed to load block", errors: [json.error ?? "Unknown error"] });
       }
     } catch (err) {
-      setLoadError(err instanceof Error ? err.message : "Network error");
+      setNotification({ status: "error", title: "Network error", errors: [err instanceof Error ? err.message : "Could not reach the server."] });
     } finally {
       setLoading(false);
     }
@@ -2424,7 +3319,7 @@ function BuilderShell({ loadSlug }) {
     setBlockSlug(slug);
     setVersions([]);
     setSelectedVersionId(null);
-    setLoadError(null);
+    setNotification(null);
     setMobilePanelTab("canvas");
     await loadVersion(slug);
     const list = await loadVersionsForSlug(slug);
@@ -2432,7 +3327,7 @@ function BuilderShell({ loadSlug }) {
     const current = list.find((v) => v.isCurrent) ?? list[0];
     if (current) setSelectedVersionId(current.id);
   }, [loadVersion, loadVersionsForSlug, setBlockSlug]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!loadSlug) return;
     loadBlockBySlug(loadSlug);
   }, [loadSlug]);
@@ -2448,14 +3343,22 @@ function BuilderShell({ loadSlug }) {
     const current = list.find((v) => v.isCurrent) ?? list[0];
     if (current) setSelectedVersionId(current.id);
   }
-  async function handleAfterPublish() {
-    if (!activeSlug) return;
-    const list = await loadVersionsForSlug(activeSlug);
+  async function handleAfterPublish(publishedSlug) {
+    setActiveSlug(publishedSlug);
+    setBlockSlug(publishedSlug);
+    const [list] = await Promise.all([
+      loadVersionsForSlug(publishedSlug),
+      // A first publish creates a definition the picker has never seen.
+      refreshBlockDefs()
+    ]);
     setVersions(list);
     const current = list.find((v) => v.isCurrent) ?? list[0];
-    if (current) setSelectedVersionId(current.id);
+    setSelectedVersionId(current ? current.id : null);
   }
-  return /* @__PURE__ */ React16.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ React16.createElement(
+  if (!isMounted) {
+    return /* @__PURE__ */ React18.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ React18.createElement("div", { className: "bb-loading-bar" }, "Initializing Builder..."));
+  }
+  return /* @__PURE__ */ React18.createElement(ErrorBoundary, null, /* @__PURE__ */ React18.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ React18.createElement(
     TopBar,
     {
       blockDefs,
@@ -2465,9 +3368,13 @@ function BuilderShell({ loadSlug }) {
       selectedVersionId,
       onVersionSelect: handleVersionSelect,
       onRestoreVersion: handleRestoreVersion,
-      onAfterPublish: handleAfterPublish
+      onAfterPublish: handleAfterPublish,
+      notification,
+      onSetNotification: setNotification,
+      previewOpen,
+      onTogglePreview: () => setPreviewOpen((p) => !p)
     }
-  ), loading && /* @__PURE__ */ React16.createElement("div", { className: "bb-loading-bar" }, "Loading..."), loadError && /* @__PURE__ */ React16.createElement("div", { className: "bb-error-bar" }, "Error: ", loadError), isReadOnly && !loading && /* @__PURE__ */ React16.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ React16.createElement("span", { className: "bb-readonly-banner__icon" }, "[i]"), /* @__PURE__ */ React16.createElement("span", null, "You are viewing a previous version - read only.", /* @__PURE__ */ React16.createElement(
+  ), loading && /* @__PURE__ */ React18.createElement("div", { className: "bb-loading-bar" }, "Loading..."), isReadOnly && !loading && /* @__PURE__ */ React18.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ React18.createElement("span", { className: "bb-readonly-banner__icon" }, "[i]"), /* @__PURE__ */ React18.createElement("span", null, "You are viewing a previous version - read only.", /* @__PURE__ */ React18.createElement(
     "button",
     {
       type: "button",
@@ -2475,7 +3382,7 @@ function BuilderShell({ loadSlug }) {
       onClick: handleRestoreVersion
     },
     "Switch to latest"
-  ))), /* @__PURE__ */ React16.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ React16.createElement(BlockList, null), /* @__PURE__ */ React16.createElement("div", { className: "bb-main__center" }, /* @__PURE__ */ React16.createElement(FieldPalette, null), /* @__PURE__ */ React16.createElement(BuilderCanvas, null)), /* @__PURE__ */ React16.createElement(ConfigPanel, null)), /* @__PURE__ */ React16.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ React16.createElement(
+  ))), /* @__PURE__ */ React18.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ React18.createElement(BlockList, { blockDefs, activeSlug, onBlockSelect: loadBlockBySlug }), /* @__PURE__ */ React18.createElement("div", { className: "bb-main__center", style: { display: "flex", flex: 1 } }, /* @__PURE__ */ React18.createElement(FieldPalette, null), /* @__PURE__ */ React18.createElement(BuilderCanvas, null), previewOpen && /* @__PURE__ */ React18.createElement(LivePreview, null)), /* @__PURE__ */ React18.createElement(ConfigPanel, null)), /* @__PURE__ */ React18.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ React18.createElement(
     "button",
     {
       type: "button",
@@ -2484,12 +3391,12 @@ function BuilderShell({ loadSlug }) {
     },
     showCodePreview ? "v" : ">",
     " Code Preview"
-  ), showCodePreview && /* @__PURE__ */ React16.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ React16.createElement(CodePreview, null))), /* @__PURE__ */ React16.createElement("nav", { className: "bb-mobile-nav", "aria-label": "Panel navigation" }, [
+  ), showCodePreview && /* @__PURE__ */ React18.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ React18.createElement(CodePreview, null))), /* @__PURE__ */ React18.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__ */ React16.createElement(
+  ].map(({ id, icon, label }) => /* @__PURE__ */ React18.createElement(
     "button",
     {
       key: id,
@@ -2497,16 +3404,16 @@ function BuilderShell({ loadSlug }) {
       className: `bb-mobile-nav__tab${mobilePanelTab === id ? " bb-mobile-nav__tab--active" : ""}`,
       onClick: () => setMobilePanelTab(id)
     },
-    /* @__PURE__ */ React16.createElement("span", { className: "bb-mobile-nav__icon" }, icon),
+    /* @__PURE__ */ React18.createElement("span", { className: "bb-mobile-nav__icon" }, icon),
     label
-  ))));
+  )))));
 }
 
 // src/components/BlockBuilderNavLink/index.tsx
-import React17 from "react";
+import React19 from "react";
 import Link3 from "next/link";
 function BlockBuilderNavLink() {
-  return /* @__PURE__ */ React17.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ React19.createElement(
     Link3,
     {
       href: "/block-builder",
@@ -2532,6 +3439,7 @@ function BlockBuilderNavLink() {
 export {
   BlockBuilderNavLink,
   BlockDataField,
+  BlockVersionSync,
   BuilderShell,
   EditInBuilderButton,
   SchemaBuilderField