@nextbridgehq/payload-block-builder 0.1.7 → 0.1.9

package/dist/client.js

@@ -39,6 +39,133 @@ 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 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 }) => {
+      const title = String(doc?.title ?? doc?.name ?? doc?.slug ?? "") || null;
+      const entry = { id: docID, title };
+      if (hasMany) {
+        const alreadyExists = itemsRef.current.some((i) => String(i.id) === String(docID));
+        if (!alreadyExists) changeRef.current([...itemsRef.current, entry]);
+      } else {
+        changeRef.current(entry);
+        closeRef.current();
+      }
+    },
+    [hasMany]
+  );
+  const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({
+    collectionSlugs: [collection]
+  });
+  closeRef.current = closeDrawer;
+  const [fetchedTitles, setFetchedTitles] = useState({});
+  const fetchingRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const missing = items.filter(
+      (i) => !i.title && !fetchedTitles[String(i.id)] && !fetchingRef.current.has(String(i.id))
+    );
+    if (missing.length === 0) return;
+    missing.forEach((item) => {
+      const idStr = String(item.id);
+      fetchingRef.current.add(idStr);
+      fetch(`/api/${collection}/${idStr}?depth=0`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
+        if (doc) {
+          const t = doc.title ?? doc.name ?? doc.slug ?? null;
+          if (t) setFetchedTitles((prev) => ({ ...prev, [idStr]: String(t) }));
+        }
+      }).catch(() => {
+        fetchingRef.current.delete(idStr);
+      });
+    });
+  }, [items, collection]);
+  function getTitle(item) {
+    return item.title ?? fetchedTitles[String(item.id)] ?? `ID: ${String(item.id)}`;
+  }
+  function clearOne(e, id) {
+    e.stopPropagation();
+    if (hasMany) onChange(items.filter((i) => String(i.id) !== String(id)));
+    else onChange(null);
+  }
+  return /* @__PURE__ */ 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 }) {
   const set = useCallback(
     (key, val) => onChange({ ...value, [key]: val }),
@@ -64,7 +191,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)
         }
@@ -117,7 +244,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)
         }
       ));
     }
@@ -176,32 +303,25 @@ function FieldInput({ field, value, onChange }) {
           onChange
         }
       );
-    case "relationship":
-      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" }, "*"), field.collection && /* @__PURE__ */ React.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", field.collection, ")")), /* @__PURE__ */ React.createElement(
-        "input",
+    case "relationship": {
+      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,
         {
-          className: "bdf-input",
-          type: "text",
-          value: value ?? "",
-          onChange: (e) => onChange(e.target.value),
-          placeholder: "Enter document ID"
+          label,
+          required: field.required,
+          collection: relField.collection,
+          hasMany: relField.hasMany ?? false,
+          value,
+          onChange
         }
-      ));
+      );
+    }
     case "json":
-      return /* @__PURE__ */ 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 ?? [];
@@ -297,9 +417,37 @@ 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;
+    }
+    fetch(`/api/block-definitions/${String(defId)}?depth=1`, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : null).then((doc) => {
+      if (!doc) return;
+      const currentVersion = doc.currentVersion;
+      if (!currentVersion) return;
+      const versionId = typeof currentVersion === "object" ? currentVersion.id : currentVersion;
+      if (versionId) setVersion(versionId);
+    }).catch(() => {
+    });
+  }, [blockDefValue, setVersion]);
+  return null;
+}
+
 // src/components/SchemaBuilderField/index.tsx
-import React5, { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { useField as useField2 } from "@payloadcms/ui";
+import React5, { 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";
@@ -873,22 +1021,22 @@ function parseSchema(raw) {
   return [];
 }
 function SchemaBuilderField({ path, readOnly }) {
-  const { value, setValue } = useField2({ path });
-  const setValueRef = useRef2(setValue);
-  useEffect2(() => {
+  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);
-  useEffect2(() => {
+  useEffect3(() => {
     if (hydrated) return;
     if (value !== void 0 && value !== null) {
       setFields(parseSchema(value));
       setHydrated(true);
     }
   }, [value, hydrated]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!hydrated) return;
     setValueRef.current({ fields });
   }, [fields, hydrated]);
@@ -945,10 +1093,10 @@ function SchemaBuilderField({ path, readOnly }) {
 // src/components/EditInBuilderButton/index.tsx
 import React6 from "react";
 import { useDocumentInfo } from "@payloadcms/ui";
-import { useField as useField3 } from "@payloadcms/ui";
+import { useField as useField4 } from "@payloadcms/ui";
 function EditInBuilderButton() {
   const { id } = useDocumentInfo();
-  const { value: slug } = useField3({ path: "slug" });
+  const { value: slug } = useField4({ path: "slug" });
   if (!id || !slug) return null;
   return /* @__PURE__ */ React6.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ React6.createElement(
     "a",
@@ -976,7 +1124,7 @@ function EditInBuilderButton() {
 }
 
 // src/block-builder/components/canvas/BuilderShell.tsx
-import React16, { useCallback as useCallback5, useEffect as useEffect5, useState as useState8 } from "react";
+import React16, { useCallback as useCallback5, useEffect as useEffect6, useState as useState8 } from "react";
 
 // src/block-builder/store/builder.store.ts
 import { create } from "zustand";
@@ -1133,7 +1281,8 @@ var useBuilderStore = create()(
 );
 
 // src/block-builder/components/canvas/TopBar.tsx
-import React7, { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import React7, { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { Blocks, ChevronDown, X } from "lucide-react";
 
 // src/block-builder/lib/mapToSaveRequest.ts
 var TYPE_MAP = {
@@ -1287,7 +1436,7 @@ function generateIndexFile(blocks) {
 }
 
 // src/block-builder/components/canvas/TopBar.tsx
-function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish }) {
+function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish, notification, onSetNotification }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const activeBlock = blocks.find((b) => b.id === activeBlockId);
@@ -1295,21 +1444,21 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
   const isDirty = useBuilderStore((s) => s.isDirty);
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
-  const [notification, setNotification] = useState4(null);
+  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 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);
@@ -1322,7 +1471,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
   async function handlePublish() {
-    if (!activeBlock || isReadOnly) return;
+    if (!activeBlock || isReadOnly) return false;
     setNotification({ status: "publishing" });
     try {
       const req = mapToSaveRequest(activeBlock);
@@ -1339,13 +1488,15 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
           status: "success",
           msg: `v${json.versionNumber ?? "?"} published successfully!`
         });
-        await onAfterPublish();
+        onAfterPublish();
+        return true;
       } else {
         setNotification({
           status: "error",
           title: "Failed to publish block",
           errors: json.errors ?? ["An unknown error occurred."]
         });
+        return false;
       }
     } catch (err) {
       setNotification({
@@ -1353,6 +1504,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
         title: "Network error",
         errors: [err instanceof Error ? err.message : "Could not reach the server."]
       });
+      return false;
     }
   }
   function handleExport() {
@@ -1380,9 +1532,9 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       className: "bb-block-picker__trigger",
       onClick: () => setBlockPickerOpen((o) => !o)
     },
-    /* @__PURE__ */ React7.createElement("span", { className: "bb-block-picker__icon" }, "B"),
+    /* @__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("span", { className: "bb-version-selector__chevron" }, "v")
+    /* @__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(
     "button",
     {
@@ -1406,7 +1558,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     /* @__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("span", { className: "bb-version-selector__chevron" }, "v")
+    /* @__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(
     "button",
     {
@@ -1447,9 +1599,8 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     {
       type: "button",
       onClick: async () => {
-        await handlePublish();
-        setVersionMeta(null, false);
-        onRestoreVersion();
+        const success = await handlePublish();
+        if (success) onRestoreVersion();
       },
       disabled: notification?.status === "publishing" || !activeBlock,
       className: "bb-btn bb-btn--warning"
@@ -1464,19 +1615,38 @@ 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) }, "x"))), 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) }, "x"))));
+  ))), 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 })))));
 }
 
 // src/block-builder/components/canvas/BlockList.tsx
 import React8 from "react";
-function BlockList() {
+import { Copy, Trash2, Plus } from "lucide-react";
+function BlockList({ blockDefs = [], activeSlug, onBlockSelect }) {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
   const addBlock = useBuilderStore((s) => s.addBlock);
   const removeBlock = useBuilderStore((s) => s.removeBlock);
   const duplicateBlock = useBuilderStore((s) => s.duplicateBlock);
   const setActiveBlock = useBuilderStore((s) => s.setActiveBlock);
-  return /* @__PURE__ */ 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("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__ */ 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" }, useApiNav && blockDefs.map((def) => {
+    const isActive = def.slug === activeSlug;
+    const fieldCount = isActive && loadedBlock ? loadedBlock.fields.length : null;
+    return /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        key: def.id,
+        onClick: () => onBlockSelect?.(def.slug),
+        className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
+      },
+      /* @__PURE__ */ React8.createElement("div", { className: "bb-block-item__slug" }, def.slug),
+      /* @__PURE__ */ React8.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(
       "div",
@@ -1501,7 +1671,7 @@ function BlockList() {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          "="
+          /* @__PURE__ */ React8.createElement(Copy, { size: 12, strokeWidth: 1.75 })
         ),
         /* @__PURE__ */ React8.createElement(
           "button",
@@ -1511,11 +1681,11 @@ function BlockList() {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          "x"
+          /* @__PURE__ */ React8.createElement(Trash2, { size: 12, strokeWidth: 1.75 })
         )
       )
     );
-  })));
+  }), !useApiNav && blocks.length === 0 && /* @__PURE__ */ React8.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ React8.createElement("br", null), "Click + to create one.")));
 }
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
@@ -1539,24 +1709,32 @@ import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifi
 import React9 from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import {
+  Type,
+  AlignLeft,
+  Hash,
+  Mail,
+  Calendar,
+  CheckSquare,
+  ChevronDown as ChevronDown2,
+  Circle,
+  Upload,
+  Link,
+  Braces,
+  X as X2
+} from "lucide-react";
 var ICON_MAP = {
-  text: "T",
-  textarea: "Tx",
-  richText: "RT",
-  number: "#",
-  checkbox: "[x]",
-  select: "v",
-  radio: "(o)",
-  date: "D",
-  upload: "^",
-  email: "@",
-  code: "<>",
-  point: "P",
-  relationship: "->>",
-  array: "[]",
-  group: "{ }",
-  json: "{ }",
-  ui: "UI"
+  text: Type,
+  textarea: AlignLeft,
+  number: Hash,
+  email: Mail,
+  date: Calendar,
+  checkbox: CheckSquare,
+  select: ChevronDown2,
+  radio: Circle,
+  upload: Upload,
+  relationship: Link,
+  json: Braces
 };
 function SortableFieldCard({ field, blockId, index }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -1565,6 +1743,7 @@ function SortableFieldCard({ field, blockId, index }) {
   const activeFieldId = useBuilderStore((s) => s.activeFieldId);
   const setActiveField = useBuilderStore((s) => s.setActiveField);
   const removeField = useBuilderStore((s) => s.removeField);
+  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const isActive = activeFieldId === field.id;
   const wrapStyle = {
     transform: CSS.Transform.toString(transform),
@@ -1585,10 +1764,10 @@ function SortableFieldCard({ field, blockId, index }) {
         className: `bb-field-card${isActive ? " bb-field-card--active" : ""}`,
         onClick: () => setActiveField(isActive ? null : field.id)
       },
-      /* @__PURE__ */ React9.createElement("span", { className: "bb-field-card__icon" }, ICON_MAP[field.type] ?? "?"),
+      /* @__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),
-      /* @__PURE__ */ React9.createElement(
+      !isReadOnly && /* @__PURE__ */ React9.createElement(
         "button",
         {
           type: "button",
@@ -1600,11 +1779,15 @@ function SortableFieldCard({ field, blockId, index }) {
           className: "bb-field-card__delete",
           title: "Remove field"
         },
-        "x"
+        /* @__PURE__ */ React9.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;
+}
 
 // src/block-builder/components/canvas/BuilderCanvas.tsx
 function BuilderCanvas() {
@@ -1721,21 +1904,15 @@ import React12 from "react";
 var ALL_TYPES = [
   "text",
   "textarea",
-  "richText",
   "number",
+  "email",
+  "date",
   "checkbox",
   "select",
   "radio",
-  "date",
   "upload",
-  "email",
-  "code",
-  "point",
   "relationship",
-  "array",
-  "group",
-  "json",
-  "ui"
+  "json"
 ];
 function FieldConfig() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
@@ -1908,19 +2085,20 @@ function ConfigPanel() {
 // src/block-builder/components/sidebar/FieldPalette.tsx
 import React14, { useState as useState6 } from "react";
 import {
-  Type,
-  AlignLeft,
-  Hash,
-  Mail,
-  Calendar,
-  CheckSquare,
-  ChevronDown,
-  Circle,
-  Upload,
-  Link,
+  Type as Type2,
+  AlignLeft as AlignLeft2,
+  AlignJustify,
+  Hash as Hash2,
+  Mail as Mail2,
+  Calendar as Calendar2,
+  CheckSquare as CheckSquare2,
+  ChevronDown as ChevronDown3,
+  Circle as Circle2,
+  Upload as Upload2,
+  Link as Link2,
   List,
   Folder,
-  Braces
+  Braces as Braces2
 } from "lucide-react";
 
 // src/block-builder/lib/field-palette.ts
@@ -1955,19 +2133,20 @@ function getFieldMeta(type) {
 
 // src/block-builder/components/sidebar/FieldPalette.tsx
 var ICON_MAP2 = {
-  Type,
-  AlignLeft,
-  Hash,
-  Mail,
-  Calendar,
-  CheckSquare,
-  ChevronDown,
-  Circle,
-  Upload,
-  Link,
+  Type: Type2,
+  AlignLeft: AlignLeft2,
+  AlignJustify,
+  Hash: Hash2,
+  Mail: Mail2,
+  Calendar: Calendar2,
+  CheckSquare: CheckSquare2,
+  ChevronDown: ChevronDown3,
+  Circle: Circle2,
+  Upload: Upload2,
+  Link: Link2,
   List,
   Folder,
-  Braces
+  Braces: Braces2
 };
 function FieldPalette() {
   const [search, setSearch] = useState6("");
@@ -2040,7 +2219,7 @@ function FieldButton({
 }
 
 // src/block-builder/components/canvas/CodePreview.tsx
-import React15, { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+import React15, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
 var KEYWORDS = /* @__PURE__ */ new Set([
   "import",
   "export",
@@ -2135,8 +2314,8 @@ function CodePreview() {
   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({});
@@ -2154,7 +2333,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 () => {
@@ -2309,18 +2488,20 @@ function BuilderShell({ loadSlug }) {
   const isReadOnly = useBuilderStore((s) => s.isReadOnly);
   const [activeSlug, setActiveSlug] = useState8(loadSlug ?? null);
   const [loading, setLoading] = useState8(!!loadSlug);
-  const [loadError, setLoadError] = useState8(null);
+  const [notification, setNotification] = 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(() => {
+  useEffect6(() => {
     fetch("/api/block-definitions?limit=200&depth=0").then((r) => r.json()).then((json) => {
       setBlockDefs(
         (json.docs ?? []).map((d) => ({ id: String(d.id), slug: d.slug, name: d.name }))
       );
-    }).catch(() => {
+    }).catch((err) => {
+      console.error("[block-builder] Failed to load block definitions:", err);
+      setNotification({ status: "error", title: "Failed to load block definitions", errors: ["Could not load block definitions. Please refresh the page."] });
     });
   }, []);
   const loadVersionsForSlug = useCallback5(async (slug) => {
@@ -2334,7 +2515,7 @@ 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);
@@ -2344,10 +2525,10 @@ function BuilderShell({ loadSlug }) {
         setVersionMeta(json.versionId ?? null, !(json.isCurrent ?? true));
         setSelectedVersionId(json.versionId ?? null);
       } else {
-        setLoadError(json.error ?? "Failed to load block");
+        setNotification({ status: "error", title: "Failed to load block", errors: [json.error ?? "Unknown error"] });
       }
     } catch (err) {
-      setLoadError(err instanceof Error ? err.message : "Network error");
+      setNotification({ status: "error", title: "Network error", errors: [err instanceof Error ? err.message : "Could not reach the server."] });
     } finally {
       setLoading(false);
     }
@@ -2357,7 +2538,7 @@ function BuilderShell({ loadSlug }) {
     setBlockSlug(slug);
     setVersions([]);
     setSelectedVersionId(null);
-    setLoadError(null);
+    setNotification(null);
     setMobilePanelTab("canvas");
     await loadVersion(slug);
     const list = await loadVersionsForSlug(slug);
@@ -2365,7 +2546,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]);
@@ -2398,9 +2579,11 @@ function BuilderShell({ loadSlug }) {
       selectedVersionId,
       onVersionSelect: handleVersionSelect,
       onRestoreVersion: handleRestoreVersion,
-      onAfterPublish: handleAfterPublish
+      onAfterPublish: handleAfterPublish,
+      notification,
+      onSetNotification: setNotification
     }
-  ), 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__ */ React16.createElement("div", { className: "bb-loading-bar" }, "Loading..."), 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(
     "button",
     {
       type: "button",
@@ -2408,7 +2591,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__ */ React16.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ React16.createElement(BlockList, { blockDefs, activeSlug, onBlockSelect: loadBlockBySlug }), /* @__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(
     "button",
     {
       type: "button",
@@ -2437,10 +2620,10 @@ function BuilderShell({ loadSlug }) {
 
 // src/components/BlockBuilderNavLink/index.tsx
 import React17 from "react";
-import Link2 from "next/link";
+import Link3 from "next/link";
 function BlockBuilderNavLink() {
   return /* @__PURE__ */ React17.createElement("div", { style: { padding: "0 16px", marginTop: "8px" } }, /* @__PURE__ */ React17.createElement(
-    Link2,
+    Link3,
     {
       href: "/block-builder",
       target: "_blank",
@@ -2465,6 +2648,7 @@ function BlockBuilderNavLink() {
 export {
   BlockBuilderNavLink,
   BlockDataField,
+  BlockVersionSync,
   BuilderShell,
   EditInBuilderButton,
   SchemaBuilderField