@nextbridgehq/payload-block-builder 0.1.6 → 0.1.8

package/dist/client.js

@@ -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

@@ -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

@@ -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

@@ -1,8 +1,8 @@
 {
   "name": "@nextbridgehq/payload-block-builder",
-  "version": "0.1.6",
+  "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",