npm - @nextbridgehq/payload-block-builder - Versions diffs - 0.1.7 → 0.1.8 - Mend

@nextbridgehq/payload-block-builder 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -14,6 +14,18 @@ A visual block builder plugin for Payload v3. Design your content blocks through
 - **Evolving content schemas:** Roll out new block versions without breaking content that was built against older ones.
 - **Headless frontends:** Fetch structured block data from the Payload API and render it with any framework.
+## Database compatibility
+Works with all Payload-supported databases — no direct SQL, no database-specific code:
+| Database | Adapter |
+|---|---|
+| PostgreSQL / Supabase / Neon | `@payloadcms/db-postgres` |
+| SQLite / Turso / LibSQL | `@payloadcms/db-sqlite` |
+| MongoDB | `@payloadcms/db-mongodb` |
+---
 ## Quick start
 ### Option A — Automatic setup (recommended)
@@ -77,11 +89,19 @@ export default buildConfig({
 ```tsx
 import React from 'react'
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getPayload } from 'payload'
+import config from '@payload-config'
 import '@nextbridgehq/payload-block-builder/builder.css'
 export const metadata = { title: 'Block Builder' }
-export default function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+export default async function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+  const payload = await getPayload({ config })
+  const { user } = await payload.auth({ headers: await headers() })
+  if (!user) redirect('/admin/login')
   return (
     <html lang="en">
       <body style={{ margin: 0, padding: 0, height: '100vh', overflow: 'hidden' }}>
@@ -186,6 +206,60 @@ Render each block type however you like — a switch statement or a component ma
 ---
+## Supported field types
+These field types are available in the block builder and render correctly in the admin field UI:
+| Type | Description |
+|---|---|
+| `text` | Single-line text input |
+| `textarea` | Multi-line text input |
+| `number` | Numeric input |
+| `email` | Email address |
+| `date` | Date picker |
+| `checkbox` | Boolean toggle |
+| `select` | Dropdown with custom options |
+| `radio` | Radio button group with custom options |
+| `upload` | File / image picker (from the media collection) |
+| `relationship` | Document picker from any collection |
+| `json` | Raw JSON data |
+---
+## Using `dbLayoutField` directly
+If you prefer not to use the plugin's `collections` option, you can add the layout tab manually to any collection:
+```ts
+import { dbLayoutField } from '@nextbridgehq/payload-block-builder'
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        { label: 'Content', fields: [] },
+        dbLayoutField(),                         // fieldName='dbLayout', tab label='DB Layout'
+        dbLayoutField('heroBlocks', 'Hero'),     // custom field name and tab label
+      ],
+    },
+  ],
+}
+```
+---
+## CSS imports reference
+| Import path | Purpose |
+|---|---|
+| `@nextbridgehq/payload-block-builder/builder.css` | Block Builder UI page styles |
+| `@nextbridgehq/payload-block-builder/block-data-field.css` | DB Layout field styles in admin |
+| `@nextbridgehq/payload-block-builder/schema-builder-field.css` | Schema Builder field styles in admin |
+---
 ## License
 MIT © [Nextbridge](https://nextbridge.com)

package/dist/bin/init.js CHANGED Viewed

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-#!/usr/bin/env node
 // src/bin/init.ts
 import fs from "fs";
@@ -13,13 +12,21 @@ export default function BlockBuilderPage() {
 }
 `;
 var LAYOUT_CONTENT = `import React from 'react'
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getPayload } from 'payload'
+import config from '@payload-config'
 import '@nextbridgehq/payload-block-builder/builder.css'
 export const metadata = {
   title: 'Block Builder',
 }
-export default function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+export default async function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+  const payload = await getPayload({ config })
+  const { user } = await payload.auth({ headers: await headers() })
+  if (!user) redirect('/admin/login')
   return (
     <html lang="en">
       <body style={{ margin: 0, padding: 0, height: '100vh', overflow: 'hidden' }}>
@@ -76,7 +83,7 @@ function addImport(content) {
   while ((m = lastFromRegex.exec(content)) !== null) lastMatch = m;
   if (!lastMatch) return newImport + "\n" + content;
   const insertPos = lastMatch.index + lastMatch[0].length;
-  return content.slice(0, insertPos) + "\n" + newImport + content.slice(insertPos);
+  return content.slice(0, insertPos) + "\n" + newImport + "\n" + content.slice(insertPos);
 }
 function insertIntoPluginsArray(content, collectionsArg) {
   const pluginsMatch = /\bplugins\s*:\s*\[/.exec(content);
@@ -84,13 +91,19 @@ function insertIntoPluginsArray(content, collectionsArg) {
   const openPos = content.indexOf("[", pluginsMatch.index);
   const closePos = findClosingBracket(content, openPos);
   if (closePos === -1) return null;
+  const beforePlugins = content.slice(0, pluginsMatch.index);
+  const pluginsLineStart = beforePlugins.lastIndexOf("\n") + 1;
+  const outerIndent = content.slice(pluginsLineStart, pluginsMatch.index).match(/^([ \t]*)/)?.[1] ?? "  ";
+  const entryIndent = outerIndent + "  ";
   const beforeClose = content.slice(0, closePos);
   const prevNL = beforeClose.lastIndexOf("\n");
-  const closingIndent = beforeClose.slice(prevNL + 1).match(/^([ \t]*)/)?.[1] ?? "  ";
-  const entryIndent = closingIndent + "  ";
-  const newLine = `${entryIndent}dynamicBlocksPlugin({ collections: [${collectionsArg}] }),
-`;
-  return content.slice(0, prevNL + 1) + newLine + content.slice(prevNL + 1);
+  const isSingleLine = prevNL < openPos;
+  const newEntry = `${entryIndent}dynamicBlocksPlugin({ collections: [${collectionsArg}] }),`;
+  if (isSingleLine) {
+    return content.slice(0, openPos + 1) + "\n" + newEntry + "\n" + outerIndent + content.slice(closePos);
+  } else {
+    return content.slice(0, prevNL + 1) + newEntry + "\n" + content.slice(prevNL + 1);
+  }
 }
 function injectPluginsBlock(content, collectionsArg) {
   const collMatch = /\bcollections\s*:\s*\[/.exec(content);
@@ -110,7 +123,13 @@ ${outerIndent}],`;
   return content.slice(0, afterCollLine) + "\n" + pluginsBlock + content.slice(afterCollLine);
 }
 function modifyPayloadConfig(configPath, collectionsArg) {
-  let content = fs.readFileSync(configPath, "utf8");
+  let content;
+  try {
+    content = fs.readFileSync(configPath, "utf8");
+  } catch (err) {
+    console.error(`Error: Could not read ${configPath}: ${err.message}`);
+    process.exit(1);
+  }
   if (content.includes("dynamicBlocksPlugin")) {
     console.log(`Skipped: dynamicBlocksPlugin already present in ${configPath}`);
     return;
@@ -119,8 +138,16 @@ function modifyPayloadConfig(configPath, collectionsArg) {
   const noComments = content.replace(/\/\/[^\n]*/g, "");
   const hasPluginsArray = /\bplugins\s*:\s*\[/.test(noComments);
   const hasPluginsShorthand = /^\s*plugins\s*,/m.test(noComments);
+  function writeConfig(data) {
+    try {
+      fs.writeFileSync(configPath, data, "utf8");
+    } catch (err) {
+      console.error(`Error: Could not write ${configPath}: ${err.message}`);
+      process.exit(1);
+    }
+  }
   if (hasPluginsShorthand && !hasPluginsArray) {
-    fs.writeFileSync(configPath, content, "utf8");
+    writeConfig(content);
     console.log(`Updated: ${configPath} (added import)`);
     console.log(`  Note: 'plugins' is imported from another file.`);
     console.log(`  Add dynamicBlocksPlugin({ collections: ['pages'] }) to that file manually.`);
@@ -133,13 +160,13 @@ function modifyPayloadConfig(configPath, collectionsArg) {
     result = injectPluginsBlock(content, collectionsArg);
   }
   if (result === null) {
-    fs.writeFileSync(configPath, content, "utf8");
+    writeConfig(content);
     console.log(`Updated: ${configPath} (added import only)`);
     console.log(`  Could not auto-detect plugins array. Add manually:`);
     console.log(`  plugins: [ dynamicBlocksPlugin({ collections: [${collectionsArg}] }) ]`);
     return;
   }
-  fs.writeFileSync(configPath, result, "utf8");
+  writeConfig(result);
   console.log(`Updated: ${configPath} (added dynamicBlocksPlugin)`);
 }
 function printNextSteps(dbAdapter) {
@@ -165,7 +192,14 @@ function printNextSteps(dbAdapter) {
 function main() {
   const args = process.argv.slice(2);
   const collectionsFlag = args.find((a) => a.startsWith("--collections="));
-  const collectionsValue = collectionsFlag ? collectionsFlag.replace("--collections=", "").split(",").map((s) => s.trim()) : ["pages"];
+  const rawCollections = collectionsFlag ? collectionsFlag.replace("--collections=", "").split(",").map((s) => s.trim()) : ["pages"];
+  const invalidSlugs = rawCollections.filter((c) => !/^[a-z0-9_-]+$/i.test(c));
+  if (invalidSlugs.length > 0) {
+    console.error(`Error: Invalid collection slug(s): ${invalidSlugs.join(", ")}`);
+    console.error("Collection slugs may only contain letters, numbers, hyphens, and underscores.");
+    process.exit(1);
+  }
+  const collectionsValue = rawCollections;
   const collectionsArg = collectionsValue.map((c) => `'${c}'`).join(", ");
   const appDir = findAppDir();
   if (!appDir) {
@@ -173,32 +207,52 @@ function main() {
     process.exit(1);
   }
   const builderDir = path.join(appDir, "block-builder");
-  if (!fs.existsSync(builderDir)) {
-    fs.mkdirSync(builderDir, { recursive: true });
+  try {
+    if (!fs.existsSync(builderDir)) {
+      fs.mkdirSync(builderDir, { recursive: true });
+    }
+  } catch (err) {
+    console.error(`Error: Could not create directory ${builderDir}: ${err.message}`);
+    process.exit(1);
   }
   const pagePath = path.join(builderDir, "page.tsx");
   const layoutPath = path.join(builderDir, "layout.tsx");
   if (fs.existsSync(pagePath)) {
     console.log(`Skipped: ${pagePath} already exists`);
   } else {
-    fs.writeFileSync(pagePath, PAGE_CONTENT);
-    console.log(`Created: ${pagePath}`);
+    try {
+      fs.writeFileSync(pagePath, PAGE_CONTENT);
+      console.log(`Created: ${pagePath}`);
+    } catch (err) {
+      console.error(`Error: Could not write ${pagePath}: ${err.message}`);
+      process.exit(1);
+    }
   }
   if (fs.existsSync(layoutPath)) {
     console.log(`Skipped: ${layoutPath} already exists`);
   } else {
-    fs.writeFileSync(layoutPath, LAYOUT_CONTENT);
-    console.log(`Created: ${layoutPath}`);
+    try {
+      fs.writeFileSync(layoutPath, LAYOUT_CONTENT);
+      console.log(`Created: ${layoutPath}`);
+    } catch (err) {
+      console.error(`Error: Could not write ${layoutPath}: ${err.message}`);
+      process.exit(1);
+    }
   }
   const payloadRouteDir = path.join(appDir, "(payload)");
   const customScssPath = path.join(payloadRouteDir, "custom.scss");
   if (fs.existsSync(customScssPath)) {
-    const existing = fs.readFileSync(customScssPath, "utf8");
-    if (!existing.includes("@nextbridgehq/payload-block-builder")) {
-      fs.appendFileSync(customScssPath, "\n" + CUSTOM_SCSS_IMPORTS);
-      console.log(`Updated: ${customScssPath} (added admin field styles)`);
-    } else {
-      console.log(`Skipped: ${customScssPath} already has block-builder imports`);
+    try {
+      const existing = fs.readFileSync(customScssPath, "utf8");
+      if (!existing.includes("@nextbridgehq/payload-block-builder")) {
+        fs.appendFileSync(customScssPath, "\n" + CUSTOM_SCSS_IMPORTS);
+        console.log(`Updated: ${customScssPath} (added admin field styles)`);
+      } else {
+        console.log(`Skipped: ${customScssPath} already has block-builder imports`);
+      }
+    } catch (err) {
+      console.error(`Error: Could not update ${customScssPath}: ${err.message}`);
+      process.exit(1);
     }
   }
   const configPath = findPayloadConfig();

package/dist/client.cjs CHANGED Viewed

@@ -77,6 +77,56 @@ function MediaPicker({ label, required, value, onChange }) {
     "x"
   ))) : /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from Media Library")), /* @__PURE__ */ import_react.default.createElement(ListDrawer, { onSelect: handleSelect }));
 }
+function RelationshipPicker({ label, required, collection, value, onChange }) {
+  const changeRef = (0, import_react.useRef)(onChange);
+  const closeRef = (0, import_react.useRef)(() => {
+  });
+  (0, import_react.useEffect)(() => {
+    changeRef.current = onChange;
+  });
+  const handleSelect = (0, import_react.useCallback)(
+    ({ docID, doc }) => {
+      changeRef.current({
+        id: docID,
+        title: doc?.title ?? doc?.name ?? doc?.slug ?? null
+      });
+      closeRef.current();
+    },
+    []
+  );
+  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = (0, import_ui.useListDrawer)({
+    collectionSlugs: [collection]
+  });
+  closeRef.current = closeDrawer;
+  const relObj = value && typeof value === "object" ? value : null;
+  const relId = relObj?.id ?? (typeof value === "string" || typeof value === "number" ? value : null);
+  const relTitle = relObj?.title ? String(relObj.title) : null;
+  const [fetchedTitle, setFetchedTitle] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!relId || relTitle) {
+      setFetchedTitle(null);
+      return;
+    }
+    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);
+      }
+    }).catch(() => {
+    });
+  }, [relId, relTitle, collection]);
+  const displayTitle = relTitle ?? fetchedTitle;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", collection, ")")), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-upload-area" }, relId ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-upload-selected" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-upload-name" }, displayTitle ?? `ID: ${String(relId)}`), /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-upload-actions" }, /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Change"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "bdf-icon-btn bdf-icon-btn--danger",
+      title: "Remove",
+      onClick: () => onChange(null)
+    },
+    "\xD7"
+  ))) : /* @__PURE__ */ import_react.default.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from ", collection)), /* @__PURE__ */ import_react.default.createElement(ListDrawer, { onSelect: handleSelect }));
+}
 function SchemaForm({ schema, value, onChange }) {
   const set = (0, import_react.useCallback)(
     (key, val) => onChange({ ...value, [key]: val }),
@@ -214,17 +264,19 @@ function FieldInput({ field, value, onChange }) {
           onChange
         }
       );
-    case "relationship":
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, field.required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*"), field.collection && /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", field.collection, ")")), /* @__PURE__ */ import_react.default.createElement(
-        "input",
+    case "relationship": {
+      const collection = field.collection ?? "media";
+      return /* @__PURE__ */ import_react.default.createElement(
+        RelationshipPicker,
         {
-          className: "bdf-input",
-          type: "text",
-          value: value ?? "",
-          onChange: (e) => onChange(e.target.value),
-          placeholder: "Enter document ID"
+          label,
+          required: field.required,
+          collection,
+          value,
+          onChange
         }
-      ));
+      );
+    }
     case "json":
       return /* @__PURE__ */ import_react.default.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "bdf-label" }, label, field.required && /* @__PURE__ */ import_react.default.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(JSON)")), /* @__PURE__ */ import_react.default.createElement(
         "textarea",
@@ -1172,6 +1224,7 @@ var useBuilderStore = (0, import_zustand.create)()(
 // src/block-builder/components/canvas/TopBar.tsx
 var import_react7 = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
 // src/block-builder/lib/mapToSaveRequest.ts
 var TYPE_MAP = {
@@ -1360,7 +1413,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
   async function handlePublish() {
-    if (!activeBlock || isReadOnly) return;
+    if (!activeBlock || isReadOnly) return false;
     setNotification({ status: "publishing" });
     try {
       const req = mapToSaveRequest(activeBlock);
@@ -1377,13 +1430,15 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
           status: "success",
           msg: `v${json.versionNumber ?? "?"} published successfully!`
         });
-        await onAfterPublish();
+        onAfterPublish();
+        return true;
       } else {
         setNotification({
           status: "error",
           title: "Failed to publish block",
           errors: json.errors ?? ["An unknown error occurred."]
         });
+        return false;
       }
     } catch (err) {
       setNotification({
@@ -1391,6 +1446,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() {
@@ -1418,9 +1474,9 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       className: "bb-block-picker__trigger",
       onClick: () => setBlockPickerOpen((o) => !o)
     },
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-block-picker__icon" }, "B"),
+    /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.Blocks, { size: 14, strokeWidth: 1.75, className: "bb-block-picker__icon" }),
     /* @__PURE__ */ import_react7.default.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-selector__chevron" }, "v")
+    /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
   ), blockPickerOpen && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-block-picker__dropdown" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-dropdown__header" }, "Block Definitions"), blockDefs.map((b) => /* @__PURE__ */ import_react7.default.createElement(
     "button",
     {
@@ -1444,7 +1500,7 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
     /* @__PURE__ */ import_react7.default.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
     /* @__PURE__ */ import_react7.default.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
     selectedVersion?.isCurrent && /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-selector__badge" }, "current"),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-version-selector__chevron" }, "v")
+    /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.ChevronDown, { size: 14, strokeWidth: 1.75, className: "bb-version-selector__chevron" })
   ), versionDropdownOpen && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-dropdown" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-version-dropdown__header" }, "Version History"), versions.map((v) => /* @__PURE__ */ import_react7.default.createElement(
     "button",
     {
@@ -1485,9 +1541,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"
@@ -1502,11 +1557,12 @@ function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersio
       className: "bb-btn bb-btn--primary"
     },
     notification?.status === "publishing" ? "Publishing..." : "Publish to Payload"
-  ))), notification?.status === "publishing" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ import_react7.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, "x"))), notification?.status === "error" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ import_react7.default.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ import_react7.default.createElement("li", { key: i }, e)))), /* @__PURE__ */ import_react7.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, "x"))));
+  ))), notification?.status === "publishing" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--publishing" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__spinner" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, isReadOnly ? "Restoring version..." : "Publishing to Payload..."), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "Validating schema and saving block definition.")))), notification?.status === "success" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--success" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-notify__icon" }, "OK"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, notification.msg), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "The block definition and version have been saved.")), /* @__PURE__ */ import_react7.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))), notification?.status === "error" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify bb-notify--error" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__box" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bb-notify__icon" }, "!"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bb-notify__body" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__title" }, notification.title), /* @__PURE__ */ import_react7.default.createElement("p", { className: "bb-notify__sub" }, "Fix the following errors before publishing:"), /* @__PURE__ */ import_react7.default.createElement("ul", { className: "bb-notify__error-list" }, notification.errors.map((e, i) => /* @__PURE__ */ import_react7.default.createElement("li", { key: i }, e)))), /* @__PURE__ */ import_react7.default.createElement("button", { className: "bb-notify__close", onClick: () => setNotification(null) }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 2 })))));
 }
 // src/block-builder/components/canvas/BlockList.tsx
 var import_react8 = __toESM(require("react"), 1);
+var import_lucide_react2 = require("lucide-react");
 function BlockList() {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
@@ -1514,7 +1570,7 @@ function BlockList() {
   const removeBlock = useBuilderStore((s) => s.removeBlock);
   const duplicateBlock = useBuilderStore((s) => s.duplicateBlock);
   const setActiveBlock = useBuilderStore((s) => s.setActiveBlock);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ import_react8.default.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, "+")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar__body" }, blocks.length === 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ import_react8.default.createElement("br", null), "Click + to create one."), blocks.map((block) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ import_react8.default.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react2.Plus, { size: 14, strokeWidth: 2 }))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-sidebar__body" }, blocks.length === 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ import_react8.default.createElement("br", null), "Click + to create one."), blocks.map((block) => {
     const isActive = block.id === activeBlockId;
     return /* @__PURE__ */ import_react8.default.createElement(
       "div",
@@ -1539,7 +1595,7 @@ function BlockList() {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          "="
+          /* @__PURE__ */ import_react8.default.createElement(import_lucide_react2.Copy, { size: 12, strokeWidth: 1.75 })
         ),
         /* @__PURE__ */ import_react8.default.createElement(
           "button",
@@ -1549,7 +1605,7 @@ function BlockList() {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          "x"
+          /* @__PURE__ */ import_react8.default.createElement(import_lucide_react2.Trash2, { size: 12, strokeWidth: 1.75 })
         )
       )
     );
@@ -1566,24 +1622,19 @@ var import_modifiers = require("@dnd-kit/modifiers");
 var import_react9 = __toESM(require("react"), 1);
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
+var import_lucide_react3 = require("lucide-react");
 var ICON_MAP = {
-  text: "T",
-  textarea: "Tx",
-  richText: "RT",
-  number: "#",
-  checkbox: "[x]",
-  select: "v",
-  radio: "(o)",
-  date: "D",
-  upload: "^",
-  email: "@",
-  code: "<>",
-  point: "P",
-  relationship: "->>",
-  array: "[]",
-  group: "{ }",
-  json: "{ }",
-  ui: "UI"
+  text: import_lucide_react3.Type,
+  textarea: import_lucide_react3.AlignLeft,
+  number: import_lucide_react3.Hash,
+  email: import_lucide_react3.Mail,
+  date: import_lucide_react3.Calendar,
+  checkbox: import_lucide_react3.CheckSquare,
+  select: import_lucide_react3.ChevronDown,
+  radio: import_lucide_react3.Circle,
+  upload: import_lucide_react3.Upload,
+  relationship: import_lucide_react3.Link,
+  json: import_lucide_react3.Braces
 };
 function SortableFieldCard({ field, blockId, index }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({
@@ -1592,6 +1643,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: import_utilities.CSS.Transform.toString(transform),
@@ -1612,10 +1664,10 @@ function SortableFieldCard({ field, blockId, index }) {
         className: `bb-field-card${isActive ? " bb-field-card--active" : ""}`,
         onClick: () => setActiveField(isActive ? null : field.id)
       },
-      /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__icon" }, ICON_MAP[field.type] ?? "?"),
+      /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__icon" }, /* @__PURE__ */ import_react9.default.createElement(FieldIcon, { type: field.type })),
       /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-field-card__body" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-field-card__name" }, field.name || /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__name--empty" }, "unnamed")), /* @__PURE__ */ import_react9.default.createElement("div", { className: "bb-field-card__type" }, field.type, field.required && /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__required" }, "*"))),
       /* @__PURE__ */ import_react9.default.createElement("span", { className: "bb-field-card__index" }, "#", index + 1),
-      /* @__PURE__ */ import_react9.default.createElement(
+      !isReadOnly && /* @__PURE__ */ import_react9.default.createElement(
         "button",
         {
           type: "button",
@@ -1627,11 +1679,15 @@ function SortableFieldCard({ field, blockId, index }) {
           className: "bb-field-card__delete",
           title: "Remove field"
         },
-        "x"
+        /* @__PURE__ */ import_react9.default.createElement(import_lucide_react3.X, { size: 12, strokeWidth: 2 })
       )
     )
   );
 }
+function FieldIcon({ type }) {
+  const Icon = ICON_MAP[type];
+  return Icon ? /* @__PURE__ */ import_react9.default.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null;
+}
 // src/block-builder/components/canvas/BuilderCanvas.tsx
 function BuilderCanvas() {
@@ -1748,21 +1804,15 @@ var import_react12 = __toESM(require("react"), 1);
 var ALL_TYPES = [
   "text",
   "textarea",
-  "richText",
   "number",
+  "email",
+  "date",
   "checkbox",
   "select",
   "radio",
-  "date",
   "upload",
-  "email",
-  "code",
-  "point",
   "relationship",
-  "array",
-  "group",
-  "json",
-  "ui"
+  "json"
 ];
 function FieldConfig() {
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
@@ -1934,7 +1984,7 @@ function ConfigPanel() {
 // src/block-builder/components/sidebar/FieldPalette.tsx
 var import_react14 = __toESM(require("react"), 1);
-var import_lucide_react = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 // src/block-builder/lib/field-palette.ts
 var FIELD_PALETTE = [
@@ -1968,19 +2018,20 @@ function getFieldMeta(type) {
 // src/block-builder/components/sidebar/FieldPalette.tsx
 var ICON_MAP2 = {
-  Type: import_lucide_react.Type,
-  AlignLeft: import_lucide_react.AlignLeft,
-  Hash: import_lucide_react.Hash,
-  Mail: import_lucide_react.Mail,
-  Calendar: import_lucide_react.Calendar,
-  CheckSquare: import_lucide_react.CheckSquare,
-  ChevronDown: import_lucide_react.ChevronDown,
-  Circle: import_lucide_react.Circle,
-  Upload: import_lucide_react.Upload,
-  Link: import_lucide_react.Link,
-  List: import_lucide_react.List,
-  Folder: import_lucide_react.Folder,
-  Braces: import_lucide_react.Braces
+  Type: import_lucide_react4.Type,
+  AlignLeft: import_lucide_react4.AlignLeft,
+  AlignJustify: import_lucide_react4.AlignJustify,
+  Hash: import_lucide_react4.Hash,
+  Mail: import_lucide_react4.Mail,
+  Calendar: import_lucide_react4.Calendar,
+  CheckSquare: import_lucide_react4.CheckSquare,
+  ChevronDown: import_lucide_react4.ChevronDown,
+  Circle: import_lucide_react4.Circle,
+  Upload: import_lucide_react4.Upload,
+  Link: import_lucide_react4.Link,
+  List: import_lucide_react4.List,
+  Folder: import_lucide_react4.Folder,
+  Braces: import_lucide_react4.Braces
 };
 function FieldPalette() {
   const [search, setSearch] = (0, import_react14.useState)("");
@@ -2333,7 +2384,9 @@ function BuilderShell({ loadSlug }) {
       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);
+      setLoadError("Could not load block definitions. Please refresh the page.");
     });
   }, []);
   const loadVersionsForSlug = (0, import_react16.useCallback)(async (slug) => {

package/dist/client.js CHANGED Viewed

@@ -39,6 +39,56 @@ 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 }) {
+  const changeRef = useRef(onChange);
+  const closeRef = useRef(() => {
+  });
+  useEffect(() => {
+    changeRef.current = onChange;
+  });
+  const handleSelect = useCallback(
+    ({ docID, doc }) => {
+      changeRef.current({
+        id: docID,
+        title: doc?.title ?? doc?.name ?? doc?.slug ?? null
+      });
+      closeRef.current();
+    },
+    []
+  );
+  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = 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);
+  useEffect(() => {
+    if (!relId || relTitle) {
+      setFetchedTitle(null);
+      return;
+    }
+    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);
+      }
+    }).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(
+    "button",
+    {
+      type: "button",
+      className: "bdf-icon-btn bdf-icon-btn--danger",
+      title: "Remove",
+      onClick: () => onChange(null)
+    },
+    "\xD7"
+  ))) : /* @__PURE__ */ React.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from ", collection)), /* @__PURE__ */ React.createElement(ListDrawer, { onSelect: handleSelect }));
+}
 function SchemaForm({ schema, value, onChange }) {
   const set = useCallback(
     (key, val) => onChange({ ...value, [key]: val }),
@@ -176,17 +226,19 @@ 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 collection = field.collection ?? "media";
+      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,
+          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",
@@ -1134,6 +1186,7 @@ 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 = {
@@ -1322,7 +1375,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 +1392,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 +1408,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 +1436,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 +1462,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 +1503,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,11 +1519,12 @@ 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";
+import { Copy, Trash2, Plus } from "lucide-react";
 function BlockList() {
   const blocks = useBuilderStore((s) => s.blocks);
   const activeBlockId = useBuilderStore((s) => s.activeBlockId);
@@ -1476,7 +1532,7 @@ function BlockList() {
   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) => {
+  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 isActive = block.id === activeBlockId;
     return /* @__PURE__ */ React8.createElement(
       "div",
@@ -1501,7 +1557,7 @@ function BlockList() {
             className: "bb-block-action",
             title: "Duplicate"
           },
-          "="
+          /* @__PURE__ */ React8.createElement(Copy, { size: 12, strokeWidth: 1.75 })
         ),
         /* @__PURE__ */ React8.createElement(
           "button",
@@ -1511,7 +1567,7 @@ function BlockList() {
             className: "bb-block-action bb-block-action--danger",
             title: "Delete"
           },
-          "x"
+          /* @__PURE__ */ React8.createElement(Trash2, { size: 12, strokeWidth: 1.75 })
         )
       )
     );
@@ -1539,24 +1595,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 +1629,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 +1650,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 +1665,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 +1790,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 +1971,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 +2019,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("");
@@ -2320,7 +2385,9 @@ function BuilderShell({ loadSlug }) {
       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);
+      setLoadError("Could not load block definitions. Please refresh the page.");
     });
   }, []);
   const loadVersionsForSlug = useCallback5(async (slug) => {
@@ -2437,10 +2504,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",

package/dist/index.cjs CHANGED Viewed

@@ -157,18 +157,23 @@ function dbLayoutField(fieldName = "dbLayout", tabLabel = "DB Layout") {
         },
         fields: [
           {
-            name: "blockDefinition",
-            type: "relationship",
-            relationTo: "block-definitions",
-            required: true,
-            admin: { description: "Which block type to use." }
-          },
-          {
-            name: "blockVersion",
-            type: "relationship",
-            relationTo: "block-definition-versions",
-            required: true,
-            admin: { description: "Which schema version to use." }
+            type: "row",
+            fields: [
+              {
+                name: "blockDefinition",
+                type: "relationship",
+                relationTo: "block-definitions",
+                required: true,
+                admin: { description: "Which block type to use.", width: "50%" }
+              },
+              {
+                name: "blockVersion",
+                type: "relationship",
+                relationTo: "block-definition-versions",
+                required: true,
+                admin: { description: "Which schema version to use.", width: "50%" }
+              }
+            ]
           },
           {
             name: "instanceId",
@@ -360,7 +365,15 @@ var generateEndpoint = async (req) => {
 var import_uuid = require("uuid");
 var REVERSE_TYPE_MAP = {
   richtext: "richText",
-  image: "upload"
+  image: "upload",
+  file: "upload",
+  // file and image both map to upload in the builder
+  multiselect: "select",
+  // builder has no multiselect — nearest equivalent
+  url: "text",
+  // builder has no url field — falls back to text
+  color: "text"
+  // builder has no color field — falls back to text
 };
 var VALID_BUILDER_TYPES = /* @__PURE__ */ new Set([
   "text",
@@ -387,7 +400,11 @@ var VALID_BUILDER_TYPES = /* @__PURE__ */ new Set([
 function fieldToBuilderField(raw) {
   const rawType = String(raw.type ?? "text");
   const mappedType = REVERSE_TYPE_MAP[rawType] ?? rawType;
-  const fieldType = VALID_BUILDER_TYPES.has(mappedType) ? mappedType : "text";
+  const isKnown = VALID_BUILDER_TYPES.has(mappedType);
+  if (!isKnown) {
+    console.warn(`[block-builder] Unknown field type "${rawType}" \u2014 rendering as "text". Add a mapping in REVERSE_TYPE_MAP.`);
+  }
+  const fieldType = isKnown ? mappedType : "text";
   const field = {
     id: (0, import_uuid.v4)(),
     type: fieldType,
@@ -424,7 +441,7 @@ function fieldToBuilderField(raw) {
 function slugToInterfaceName(slug) {
   return slug.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
-function schemaToBuilderBlock(slug, name, labels, schemaFields) {
+function schemaToBuilderBlock(slug, _name, labels, schemaFields) {
   return {
     id: (0, import_uuid.v4)(),
     slug,

package/dist/index.js CHANGED Viewed

@@ -129,18 +129,23 @@ function dbLayoutField(fieldName = "dbLayout", tabLabel = "DB Layout") {
         },
         fields: [
           {
-            name: "blockDefinition",
-            type: "relationship",
-            relationTo: "block-definitions",
-            required: true,
-            admin: { description: "Which block type to use." }
-          },
-          {
-            name: "blockVersion",
-            type: "relationship",
-            relationTo: "block-definition-versions",
-            required: true,
-            admin: { description: "Which schema version to use." }
+            type: "row",
+            fields: [
+              {
+                name: "blockDefinition",
+                type: "relationship",
+                relationTo: "block-definitions",
+                required: true,
+                admin: { description: "Which block type to use.", width: "50%" }
+              },
+              {
+                name: "blockVersion",
+                type: "relationship",
+                relationTo: "block-definition-versions",
+                required: true,
+                admin: { description: "Which schema version to use.", width: "50%" }
+              }
+            ]
           },
           {
             name: "instanceId",
@@ -332,7 +337,15 @@ var generateEndpoint = async (req) => {
 import { v4 as uuidv4 } from "uuid";
 var REVERSE_TYPE_MAP = {
   richtext: "richText",
-  image: "upload"
+  image: "upload",
+  file: "upload",
+  // file and image both map to upload in the builder
+  multiselect: "select",
+  // builder has no multiselect — nearest equivalent
+  url: "text",
+  // builder has no url field — falls back to text
+  color: "text"
+  // builder has no color field — falls back to text
 };
 var VALID_BUILDER_TYPES = /* @__PURE__ */ new Set([
   "text",
@@ -359,7 +372,11 @@ var VALID_BUILDER_TYPES = /* @__PURE__ */ new Set([
 function fieldToBuilderField(raw) {
   const rawType = String(raw.type ?? "text");
   const mappedType = REVERSE_TYPE_MAP[rawType] ?? rawType;
-  const fieldType = VALID_BUILDER_TYPES.has(mappedType) ? mappedType : "text";
+  const isKnown = VALID_BUILDER_TYPES.has(mappedType);
+  if (!isKnown) {
+    console.warn(`[block-builder] Unknown field type "${rawType}" \u2014 rendering as "text". Add a mapping in REVERSE_TYPE_MAP.`);
+  }
+  const fieldType = isKnown ? mappedType : "text";
   const field = {
     id: uuidv4(),
     type: fieldType,
@@ -396,7 +413,7 @@ function fieldToBuilderField(raw) {
 function slugToInterfaceName(slug) {
   return slug.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
-function schemaToBuilderBlock(slug, name, labels, schemaFields) {
+function schemaToBuilderBlock(slug, _name, labels, schemaFields) {
   return {
     id: uuidv4(),
     slug,

package/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "name": "@nextbridgehq/payload-block-builder",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Block Builder for Payload CMS",
-  "keywords": ["payload", "payload-plugin", "cms", "block-builder", "dynamic-blocks"],
+  "keywords": ["payload", "payloadcms", "payload-plugin", "cms", "block-builder", "dynamic-blocks"],
   "homepage": "https://github.com/nextbridgehq/block-builder",
   "repository": {
     "type": "git",