@nextbridgehq/payload-block-builder 0.1.0

package/dist/client.js

@@ -0,0 +1,2440 @@
+// src/components/BlockDataField/index.tsx
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useField, useFormFields, useListDrawer } from "@payloadcms/ui";
+function MediaPicker({ label, required, value, onChange }) {
+  const changeRef = useRef(onChange);
+  const closeRef = useRef(() => {
+  });
+  useEffect(() => {
+    changeRef.current = onChange;
+  });
+  const handleSelect = useCallback(
+    ({ docID, doc }) => {
+      changeRef.current({
+        id: docID,
+        filename: doc?.filename ?? null,
+        url: doc?.url ?? null,
+        alt: doc?.alt ?? null
+      });
+      closeRef.current();
+    },
+    []
+  );
+  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = useListDrawer({
+    collectionSlugs: ["media"]
+  });
+  closeRef.current = closeDrawer;
+  const media = value && typeof value === "object" ? value : null;
+  const mediaId = media?.id ?? (typeof value === "string" || typeof value === "number" ? value : null);
+  return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label, required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, "*")), /* @__PURE__ */ React.createElement("div", { className: "bdf-upload-area" }, mediaId ? /* @__PURE__ */ React.createElement("div", { className: "bdf-upload-selected" }, media?.url ? /* @__PURE__ */ React.createElement("img", { src: media.url, alt: media.alt ?? "", className: "bdf-thumb" }) : /* @__PURE__ */ React.createElement("div", { className: "bdf-thumb-placeholder" }, "\xF0\u0178\u2013\xBC"), /* @__PURE__ */ React.createElement("span", { className: "bdf-upload-name" }, media?.filename ? String(media.filename) : `ID: ${String(mediaId)}`), /* @__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 media",
+      onClick: () => onChange(null)
+    },
+    "\xE2\u0153\u2022"
+  ))) : /* @__PURE__ */ React.createElement(ListDrawerToggler, { className: "bdf-upload-btn" }, "Choose from Media Library")), /* @__PURE__ */ React.createElement(ListDrawer, { onSelect: handleSelect }));
+}
+function SchemaForm({ schema, value, onChange }) {
+  const set = useCallback(
+    (key, val) => onChange({ ...value, [key]: val }),
+    [value, onChange]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, schema.map((field) => /* @__PURE__ */ React.createElement(
+    FieldInput,
+    {
+      key: field.name,
+      field,
+      value: value[field.name],
+      onChange: (v) => set(field.name, v)
+    }
+  )));
+}
+function FieldInput({ field, value, onChange }) {
+  const label = field.label ?? field.name;
+  switch (field.type) {
+    case "text":
+    case "url":
+    case "email":
+      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(
+        "input",
+        {
+          className: "bdf-input",
+          type: field.type === "email" ? "email" : "text",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value)
+        }
+      ));
+    case "color":
+      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("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          className: "bdf-input",
+          type: "text",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          placeholder: "#ffffff",
+          style: { flex: 1 }
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "color",
+          value: value || "#ffffff",
+          onChange: (e) => onChange(e.target.value),
+          style: { width: 40, height: 40, padding: 2, border: "1px solid var(--theme-elevation-150)", borderRadius: 4, cursor: "pointer", flexShrink: 0 }
+        }
+      )));
+    case "textarea":
+      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(
+        "textarea",
+        {
+          className: "bdf-input bdf-textarea",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          rows: 4
+        }
+      ));
+    case "richtext":
+      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 } }, "(plain text)")), /* @__PURE__ */ React.createElement(
+        "textarea",
+        {
+          className: "bdf-input bdf-textarea",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          rows: 6
+        }
+      ));
+    case "number": {
+      const numVal = typeof value === "number" && !Number.isNaN(value) ? value : "";
+      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(
+        "input",
+        {
+          className: "bdf-input",
+          type: "number",
+          value: numVal,
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.valueAsNumber)
+        }
+      ));
+    }
+    case "checkbox":
+      return /* @__PURE__ */ React.createElement("label", { className: "bdf-checkbox-row" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ), /* @__PURE__ */ React.createElement("span", { className: "bdf-checkbox-label" }, label, field.required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, " *")));
+    case "date":
+      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(
+        "input",
+        {
+          className: "bdf-input",
+          type: "date",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value)
+        }
+      ));
+    case "select":
+      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(
+        "select",
+        {
+          className: "bdf-input bdf-select",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value)
+        },
+        /* @__PURE__ */ React.createElement("option", { value: "" }, "\xE2\u20AC\u201D select \xE2\u20AC\u201D"),
+        (field.options ?? []).map((opt) => /* @__PURE__ */ React.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+      ));
+    case "multiselect": {
+      const current = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__header" }, label, field.required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required", style: { marginLeft: 3 } }, "*")), /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__body" }, (field.options ?? []).map((opt) => /* @__PURE__ */ React.createElement("label", { key: opt.value, className: "bdf-multiselect-opt" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "checkbox",
+          checked: current.includes(opt.value),
+          onChange: (e) => {
+            const next = e.target.checked ? [...current, opt.value] : current.filter((v) => v !== opt.value);
+            onChange(next);
+          }
+        }
+      ), opt.label)))));
+    }
+    case "image":
+    case "file":
+      return /* @__PURE__ */ React.createElement(
+        MediaPicker,
+        {
+          label,
+          required: field.required,
+          value,
+          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",
+        {
+          className: "bdf-input",
+          type: "text",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          placeholder: "Enter document ID"
+        }
+      ));
+    case "json":
+      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("label", { className: "bdf-label" }, label, field.required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required" }, "*"), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(JSON)")), /* @__PURE__ */ React.createElement(
+        "textarea",
+        {
+          className: "bdf-input bdf-textarea bdf-mono",
+          value: value !== void 0 ? JSON.stringify(value, null, 2) : "",
+          rows: 4,
+          onChange: (e) => {
+            try {
+              onChange(JSON.parse(e.target.value));
+            } catch {
+            }
+          }
+        }
+      ));
+    case "array": {
+      const rows = Array.isArray(value) ? value : [];
+      const subFields = field.fields ?? [];
+      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__header" }, label, field.required && /* @__PURE__ */ React.createElement("span", { className: "bdf-required", style: { marginLeft: 3 } }, "*"), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", rows.length, " ", rows.length === 1 ? "row" : "rows", ")")), /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__body" }, rows.map((row, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "bdf-array-row" }, /* @__PURE__ */ React.createElement(
+        SchemaForm,
+        {
+          schema: subFields,
+          value: row,
+          onChange: (updated) => {
+            const next = [...rows];
+            next[i] = updated;
+            onChange(next);
+          }
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "bdf-remove-btn",
+          onClick: () => onChange(rows.filter((_, j) => j !== i))
+        },
+        "\xE2\u0153\u2022 Remove row"
+      ))), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "bdf-add-btn",
+          onClick: () => onChange([...rows, {}])
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "bdf-add-btn__icon" }, "+"),
+        "Add row"
+      ))));
+    }
+    case "group": {
+      const groupVal = value ?? {};
+      const subFields = field.fields ?? [];
+      return /* @__PURE__ */ React.createElement("div", { className: "bdf-field" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__header" }, label), /* @__PURE__ */ React.createElement("div", { className: "bdf-fieldset__body" }, /* @__PURE__ */ React.createElement(SchemaForm, { schema: subFields, value: groupVal, onChange }))));
+    }
+    default:
+      return /* @__PURE__ */ React.createElement("div", { style: { fontSize: 12, color: "var(--theme-elevation-400)", fontFamily: "var(--font-body)", padding: "4px 0" } }, "Unsupported field type: ", /* @__PURE__ */ React.createElement("strong", null, field.type), " (", label, ")");
+  }
+}
+function BlockDataField({ path }) {
+  const { value, setValue } = useField({ path });
+  const rowPrefix = path.replace(/\.data$/, "");
+  const blockVersionPath = `${rowPrefix}.blockVersion`;
+  const blockVersionValue = useFormFields(([fields]) => fields[blockVersionPath]?.value);
+  const versionId = blockVersionValue && typeof blockVersionValue === "object" ? blockVersionValue.id ?? null : typeof blockVersionValue === "string" || typeof blockVersionValue === "number" ? blockVersionValue : null;
+  const [schema, setSchema] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!versionId) {
+      setSchema(null);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    fetch(`/api/block-definition-versions/${versionId}?depth=0`, { credentials: "same-origin" }).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    }).then((doc) => {
+      if (!doc || typeof doc !== "object") throw new Error("Empty response from server");
+      const raw = doc.schema;
+      const fields = Array.isArray(raw) ? raw : raw && typeof raw === "object" && Array.isArray(raw.fields) ? raw.fields : [];
+      setSchema(fields.length > 0 ? fields : null);
+      setLoading(false);
+    }).catch((e) => {
+      setError(String(e));
+      setLoading(false);
+    });
+  }, [versionId]);
+  if (!versionId) {
+    return /* @__PURE__ */ React.createElement("div", { className: "bdf-empty" }, "Select a ", /* @__PURE__ */ React.createElement("strong", null, "Block Version"), " above to configure block data fields.");
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "bdf-loading" }, "Loading schema\xE2\u20AC\xA6");
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement("div", { className: "bdf-error" }, "Failed to load schema: ", error);
+  }
+  if (!schema || schema.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", { className: "bdf-empty" }, "This block version has no fields defined in its schema.");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "bdf-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "bdf-heading" }, "Block Data"), /* @__PURE__ */ React.createElement("div", { className: "bdf-body" }, /* @__PURE__ */ React.createElement(
+    SchemaForm,
+    {
+      schema,
+      value: value ?? {},
+      onChange: setValue
+    }
+  )));
+}
+
+// src/components/SchemaBuilderField/index.tsx
+import React5, { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useField as useField2 } from "@payloadcms/ui";
+
+// src/components/SchemaBuilderField/FieldRow.tsx
+import React4, { useState as useState2 } from "react";
+
+// src/components/SchemaBuilderField/OptionsEditor.tsx
+import React2 from "react";
+function OptionsEditor({ options, onChange, readOnly }) {
+  function addOption() {
+    onChange([...options, { label: "", value: "" }]);
+  }
+  function updateOption(index, key, val) {
+    onChange(options.map((o, i) => i === index ? { ...o, [key]: val } : o));
+  }
+  function removeOption(index) {
+    onChange(options.filter((_, i) => i !== index));
+  }
+  return /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ React2.createElement(
+    "span",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        color: "var(--theme-elevation-800)",
+        fontFamily: "var(--font-body)",
+        fontSize: 13,
+        lineHeight: "20px",
+        fontWeight: 400,
+        paddingBottom: 5
+      }
+    },
+    "Options",
+    options.length > 0 && /* @__PURE__ */ React2.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", options.length, ")")
+  ), options.length === 0 && /* @__PURE__ */ React2.createElement(
+    "p",
+    {
+      style: {
+        fontSize: 13,
+        color: "var(--theme-elevation-400)",
+        fontFamily: "var(--font-body)",
+        lineHeight: "20px",
+        margin: 0
+      }
+    },
+    "No options yet."
+  ), options.map((opt, i) => /* @__PURE__ */ React2.createElement("div", { key: i, className: "sbf-options-row" }, /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: opt.label,
+      placeholder: "Label",
+      disabled: readOnly,
+      onChange: (e) => updateOption(i, "label", e.target.value)
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: opt.value,
+      placeholder: "Value",
+      disabled: readOnly,
+      onChange: (e) => updateOption(i, "value", e.target.value)
+    }
+  ), !readOnly && /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      className: "sbf-icon-btn sbf-icon-btn--danger",
+      title: "Remove option",
+      onClick: () => removeOption(i)
+    },
+    "\xE2\u0153\u2022"
+  ))), !readOnly && /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      className: "sbf-add-btn sbf-add-btn--small",
+      onClick: addOption
+    },
+    /* @__PURE__ */ React2.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
+    "Add Option"
+  ));
+}
+
+// src/components/SchemaBuilderField/NestedFieldsEditor.tsx
+import React3, { useCallback as useCallback2 } from "react";
+function NestedFieldsEditor({ fields, onChange, readOnly, depth = 1 }) {
+  const addField = useCallback2(() => {
+    onChange([...fields, { name: "", type: "text", label: "", required: false }]);
+  }, [fields, onChange]);
+  const updateField = useCallback2(
+    (index, updated) => {
+      onChange(fields.map((f, i) => i === index ? updated : f));
+    },
+    [fields, onChange]
+  );
+  const removeField = useCallback2(
+    (index) => {
+      onChange(fields.filter((_, i) => i !== index));
+    },
+    [fields, onChange]
+  );
+  const moveField = useCallback2(
+    (index, dir) => {
+      const next = [...fields];
+      const target = index + dir;
+      if (target < 0 || target >= next.length) return;
+      [next[index], next[target]] = [next[target], next[index]];
+      onChange(next);
+    },
+    [fields, onChange]
+  );
+  return /* @__PURE__ */ React3.createElement("div", { className: "sbf-nested" }, /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        color: "var(--theme-elevation-800)",
+        fontFamily: "var(--font-body)",
+        fontSize: 13,
+        lineHeight: "20px",
+        fontWeight: 400,
+        paddingBottom: fields.length > 0 ? 6 : 0
+      }
+    },
+    "Nested fields",
+    fields.length > 0 && /* @__PURE__ */ React3.createElement("span", { style: { marginLeft: 6, fontSize: 11, color: "var(--theme-elevation-400)", fontWeight: 400 } }, "(", fields.length, ")")
+  ), fields.length === 0 && /* @__PURE__ */ React3.createElement(
+    "p",
+    {
+      style: {
+        fontSize: 13,
+        color: "var(--theme-elevation-400)",
+        fontFamily: "var(--font-body)",
+        lineHeight: "20px",
+        margin: "4px 0 8px"
+      }
+    },
+    "No nested fields yet."
+  ), fields.length > 0 && /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ React3.createElement(
+    FieldRow,
+    {
+      key: i,
+      index: i,
+      total: fields.length,
+      field,
+      onChange: (updated) => updateField(i, updated),
+      onRemove: () => removeField(i),
+      onMoveUp: i > 0 ? () => moveField(i, -1) : void 0,
+      onMoveDown: i < fields.length - 1 ? () => moveField(i, 1) : void 0,
+      readOnly,
+      depth
+    }
+  ))), !readOnly && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      className: "sbf-add-btn sbf-add-btn--small",
+      onClick: addField
+    },
+    /* @__PURE__ */ React3.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
+    "Add Nested Field"
+  )));
+}
+
+// src/components/SchemaBuilderField/FieldRow.tsx
+var ALL_FIELD_TYPES = [
+  "text",
+  "textarea",
+  "richtext",
+  "number",
+  "checkbox",
+  "select",
+  "multiselect",
+  "date",
+  "image",
+  "file",
+  "url",
+  "email",
+  "color",
+  "array",
+  "group",
+  "relationship",
+  "json",
+  "blocks"
+];
+var TYPE_BADGE_COLORS = {
+  text: "var(--theme-elevation-150)",
+  textarea: "var(--theme-elevation-150)",
+  richtext: "var(--theme-elevation-150)",
+  number: "var(--theme-elevation-150)",
+  email: "var(--theme-elevation-150)",
+  url: "var(--theme-elevation-150)",
+  color: "var(--theme-elevation-150)",
+  date: "var(--theme-elevation-150)",
+  checkbox: "var(--theme-elevation-150)",
+  select: "var(--theme-elevation-150)",
+  multiselect: "var(--theme-elevation-150)",
+  image: "var(--theme-elevation-150)",
+  file: "var(--theme-elevation-150)",
+  array: "var(--theme-elevation-150)",
+  group: "var(--theme-elevation-150)",
+  relationship: "var(--theme-elevation-150)",
+  json: "var(--theme-elevation-150)",
+  blocks: "var(--theme-elevation-150)"
+};
+function FieldLabel({ children, required }) {
+  return /* @__PURE__ */ React4.createElement("label", { className: `sbf-label${required ? " sbf-label--required" : ""}` }, children);
+}
+function FieldWrap({ children }) {
+  return /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", flexDirection: "column" } }, children);
+}
+function FieldRow({
+  index,
+  field,
+  onChange,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+  readOnly,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState2(false);
+  const [showAdmin, setShowAdmin] = useState2(false);
+  const [showConditions, setShowConditions] = useState2(false);
+  const maxDepth = 3;
+  const canNest = depth < maxDepth;
+  const needsOptions = field.type === "select" || field.type === "multiselect";
+  const needsNested = field.type === "array" || field.type === "group";
+  function set(key, val) {
+    onChange({ ...field, [key]: val });
+  }
+  const badgeBg = TYPE_BADGE_COLORS[field.type] ?? "var(--theme-elevation-150)";
+  return /* @__PURE__ */ React4.createElement("div", { className: `sbf-row${expanded ? "" : " sbf-row--collapsed"}` }, /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: "sbf-row__header",
+      role: "button",
+      "aria-expanded": expanded,
+      onClick: () => setExpanded((p) => !p)
+    },
+    /* @__PURE__ */ React4.createElement(
+      "span",
+      {
+        style: {
+          fontSize: 10,
+          color: "var(--theme-elevation-400)",
+          flexShrink: 0,
+          width: 16,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "transform 0.15s",
+          transform: expanded ? "rotate(90deg)" : "rotate(0deg)"
+        }
+      },
+      "\xE2\u2013\xB6"
+    ),
+    /* @__PURE__ */ React4.createElement("span", { className: `sbf-row__label${!field.name ? " sbf-row__label--empty" : ""}` }, field.name || "unnamed field"),
+    field.required && /* @__PURE__ */ React4.createElement("span", { style: { color: "var(--theme-error-500, #ef4444)", fontSize: 16, lineHeight: 1, flexShrink: 0 } }, "*"),
+    /* @__PURE__ */ React4.createElement(
+      "span",
+      {
+        className: "sbf-type-badge",
+        style: { background: badgeBg }
+      },
+      field.type
+    ),
+    !readOnly && /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: { display: "flex", gap: 2, flexShrink: 0, alignItems: "center" },
+        onClick: (e) => e.stopPropagation()
+      },
+      onMoveUp && /* @__PURE__ */ React4.createElement("button", { type: "button", className: "sbf-icon-btn", onClick: onMoveUp, title: "Move up" }, "\xE2\u2020\u2018"),
+      onMoveDown && /* @__PURE__ */ React4.createElement("button", { type: "button", className: "sbf-icon-btn", onClick: onMoveDown, title: "Move down" }, "\xE2\u2020\u201C"),
+      /* @__PURE__ */ React4.createElement(
+        "button",
+        {
+          type: "button",
+          className: "sbf-icon-btn sbf-icon-btn--danger",
+          onClick: onRemove,
+          title: "Remove field"
+        },
+        "\xE2\u0153\u2022"
+      )
+    )
+  ), expanded && /* @__PURE__ */ React4.createElement("div", { className: "sbf-row__content" }, /* @__PURE__ */ React4.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, { required: true }, "Field Name"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: field.name,
+      placeholder: "fieldName",
+      disabled: readOnly,
+      onChange: (e) => set("name", e.target.value)
+    }
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, { required: true }, "Type"), /* @__PURE__ */ React4.createElement(
+    "select",
+    {
+      className: "sbf-input sbf-select",
+      value: field.type,
+      disabled: readOnly,
+      onChange: (e) => set("type", e.target.value)
+    },
+    ALL_FIELD_TYPES.map((t) => /* @__PURE__ */ React4.createElement("option", { key: t, value: t }, t))
+  ))), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Label"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: field.label ?? "",
+      placeholder: "Human-readable label",
+      disabled: readOnly,
+      onChange: (e) => set("label", e.target.value)
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ React4.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.required ?? false,
+      disabled: readOnly,
+      onChange: (e) => set("required", e.target.checked)
+    }
+  ), /* @__PURE__ */ React4.createElement("span", { className: "sbf-checkbox-label" }, "Required"))), field.type === "number" && /* @__PURE__ */ React4.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Min"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "number",
+      value: field.min ?? "",
+      disabled: readOnly,
+      onChange: (e) => set("min", e.target.value === "" ? void 0 : e.target.valueAsNumber)
+    }
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Max"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "number",
+      value: field.max ?? "",
+      disabled: readOnly,
+      onChange: (e) => set("max", e.target.value === "" ? void 0 : e.target.valueAsNumber)
+    }
+  ))), (field.type === "text" || field.type === "textarea") && /* @__PURE__ */ React4.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Min Length"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "number",
+      value: field.minLength ?? "",
+      disabled: readOnly,
+      onChange: (e) => set("minLength", e.target.value === "" ? void 0 : e.target.valueAsNumber)
+    }
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Max Length"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "number",
+      value: field.maxLength ?? "",
+      disabled: readOnly,
+      onChange: (e) => set("maxLength", e.target.value === "" ? void 0 : e.target.valueAsNumber)
+    }
+  ))), field.type === "array" && /* @__PURE__ */ React4.createElement("div", { className: "sbf-grid-2" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Min Rows"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "number",
+      value: field.minRows ?? "",
+      disabled: readOnly,
+      onChange: (e) => set("minRows", e.target.value === "" ? void 0 : e.target.valueAsNumber)
+    }
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Max Rows"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "number",
+      value: field.maxRows ?? "",
+      disabled: readOnly,
+      onChange: (e) => set("maxRows", e.target.value === "" ? void 0 : e.target.valueAsNumber)
+    }
+  ))), field.type === "relationship" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, { required: true }, "Collection slug"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: field.collection ?? "",
+      placeholder: "e.g. pages",
+      disabled: readOnly,
+      onChange: (e) => set("collection", e.target.value)
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ React4.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.hasMany ?? false,
+      disabled: readOnly,
+      onChange: (e) => set("hasMany", e.target.checked)
+    }
+  ), /* @__PURE__ */ React4.createElement("span", { className: "sbf-checkbox-label" }, "Has Many")))), needsOptions && /* @__PURE__ */ React4.createElement(
+    OptionsEditor,
+    {
+      options: field.options ?? [],
+      onChange: (opts) => set("options", opts),
+      readOnly
+    }
+  ), needsNested && canNest && /* @__PURE__ */ React4.createElement(
+    NestedFieldsEditor,
+    {
+      fields: field.fields ?? [],
+      onChange: (nested) => set("fields", nested),
+      readOnly,
+      depth: depth + 1
+    }
+  ), needsNested && !canNest && /* @__PURE__ */ React4.createElement("span", { className: "sbf-description" }, "Maximum nesting depth (", depth, ") reached."), /* @__PURE__ */ React4.createElement("div", { className: "sbf-section" }, /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: `sbf-section__toggle${showAdmin ? " sbf-section__toggle--open" : ""}`,
+      onClick: () => setShowAdmin((p) => !p)
+    },
+    "Admin & UI settings",
+    /* @__PURE__ */ React4.createElement("span", { className: "sbf-section__toggle-icon" }, "\xE2\u2013\xB6")
+  ), showAdmin && /* @__PURE__ */ React4.createElement("div", { className: "sbf-section__body" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Description"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: field.admin?.description ?? "",
+      placeholder: "Helper text shown below the field",
+      disabled: readOnly,
+      onChange: (e) => set("admin", { ...field.admin, description: e.target.value })
+    }
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Placeholder"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: field.admin?.placeholder ?? "",
+      placeholder: "Input placeholder text",
+      disabled: readOnly,
+      onChange: (e) => set("admin", { ...field.admin, placeholder: e.target.value })
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "sbf-flags-row" }, /* @__PURE__ */ React4.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.admin?.readOnly ?? false,
+      disabled: readOnly,
+      onChange: (e) => set("admin", { ...field.admin, readOnly: e.target.checked })
+    }
+  ), /* @__PURE__ */ React4.createElement("span", { className: "sbf-checkbox-label" }, "Read Only")), /* @__PURE__ */ React4.createElement("label", { className: "sbf-checkbox-wrap" }, /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.admin?.hidden ?? false,
+      disabled: readOnly,
+      onChange: (e) => set("admin", { ...field.admin, hidden: e.target.checked })
+    }
+  ), /* @__PURE__ */ React4.createElement("span", { className: "sbf-checkbox-label" }, "Hidden"))))), /* @__PURE__ */ React4.createElement("div", { className: "sbf-section" }, /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: `sbf-section__toggle${showConditions ? " sbf-section__toggle--open" : ""}`,
+      onClick: () => setShowConditions((p) => !p)
+    },
+    "Conditional logic",
+    (field.conditions?.length ?? 0) > 0 && /* @__PURE__ */ React4.createElement(
+      "span",
+      {
+        style: {
+          marginLeft: "auto",
+          fontSize: 11,
+          color: "var(--theme-elevation-400)",
+          fontWeight: 400
+        }
+      },
+      field.conditions.length,
+      " rule",
+      field.conditions.length !== 1 ? "s" : ""
+    ),
+    /* @__PURE__ */ React4.createElement("span", { className: "sbf-section__toggle-icon" }, "\xE2\u2013\xB6")
+  ), showConditions && /* @__PURE__ */ React4.createElement("div", { className: "sbf-section__body" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Condition Mode"), /* @__PURE__ */ React4.createElement(
+    "select",
+    {
+      className: "sbf-input sbf-select",
+      value: field.conditionMode ?? "AND",
+      disabled: readOnly,
+      onChange: (e) => set("conditionMode", e.target.value),
+      style: { width: "auto", minWidth: 240 }
+    },
+    /* @__PURE__ */ React4.createElement("option", { value: "AND" }, "AND \xE2\u20AC\u201D all conditions must match"),
+    /* @__PURE__ */ React4.createElement("option", { value: "OR" }, "OR \xE2\u20AC\u201D any condition must match")
+  )), (field.conditions ?? []).map((cond, ci) => /* @__PURE__ */ React4.createElement("div", { key: ci, className: "sbf-conditions-grid" }, /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Field"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: cond.field,
+      placeholder: "fieldName",
+      disabled: readOnly,
+      onChange: (e) => {
+        const next = [...field.conditions ?? []];
+        next[ci] = { ...next[ci], field: e.target.value };
+        set("conditions", next);
+      }
+    }
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Operator"), /* @__PURE__ */ React4.createElement(
+    "select",
+    {
+      className: "sbf-input sbf-select",
+      value: cond.operator,
+      disabled: readOnly,
+      onChange: (e) => {
+        const next = [...field.conditions ?? []];
+        next[ci] = { ...next[ci], operator: e.target.value };
+        set("conditions", next);
+      }
+    },
+    ["equals", "not_equals", "contains", "not_contains", "greater_than", "less_than", "in", "not_in", "exists", "empty"].map((op) => /* @__PURE__ */ React4.createElement("option", { key: op, value: op }, op.replace(/_/g, " ")))
+  )), /* @__PURE__ */ React4.createElement(FieldWrap, null, /* @__PURE__ */ React4.createElement(FieldLabel, null, "Value"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      className: "sbf-input",
+      type: "text",
+      value: String(cond.value ?? ""),
+      disabled: readOnly,
+      onChange: (e) => {
+        const next = [...field.conditions ?? []];
+        next[ci] = { ...next[ci], value: e.target.value };
+        set("conditions", next);
+      }
+    }
+  )), !readOnly && /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: "sbf-icon-btn sbf-icon-btn--danger",
+      title: "Remove condition",
+      style: { marginTop: 25 },
+      onClick: () => {
+        set("conditions", (field.conditions ?? []).filter((_, k) => k !== ci));
+      }
+    },
+    "\xE2\u0153\u2022"
+  ))), !readOnly && /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: "sbf-add-btn sbf-add-btn--small",
+      onClick: () => {
+        set("conditions", [
+          ...field.conditions ?? [],
+          { field: "", operator: "equals", value: "" }
+        ]);
+      }
+    },
+    /* @__PURE__ */ React4.createElement("span", { className: "sbf-add-btn__icon" }, "+"),
+    "Add Condition"
+  )))));
+}
+
+// src/components/SchemaBuilderField/index.tsx
+function parseSchema(raw) {
+  try {
+    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+    if (!parsed) return [];
+    if (Array.isArray(parsed)) return parsed;
+    if (parsed?.fields && Array.isArray(parsed.fields)) return parsed.fields;
+  } catch {
+  }
+  return [];
+}
+function SchemaBuilderField({ path, readOnly }) {
+  const { value, setValue } = useField2({ path });
+  const setValueRef = useRef2(setValue);
+  useEffect2(() => {
+    setValueRef.current = setValue;
+  });
+  const [fields, setFields] = useState3(() => parseSchema(value));
+  const hasExistingValue = value !== void 0 && value !== null;
+  const [hydrated, setHydrated] = useState3(!hasExistingValue);
+  useEffect2(() => {
+    if (hydrated) return;
+    if (value !== void 0 && value !== null) {
+      setFields(parseSchema(value));
+      setHydrated(true);
+    }
+  }, [value, hydrated]);
+  useEffect2(() => {
+    if (!hydrated) return;
+    setValueRef.current({ fields });
+  }, [fields, hydrated]);
+  const addField = useCallback3(() => {
+    setFields((prev) => [
+      ...prev,
+      { name: "", type: "text", label: "", required: false }
+    ]);
+  }, []);
+  const updateField = useCallback3((index, updated) => {
+    setFields((prev) => prev.map((f, i) => i === index ? updated : f));
+  }, []);
+  const removeField = useCallback3((index) => {
+    setFields((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const moveField = useCallback3((index, dir) => {
+    setFields((prev) => {
+      const next = [...prev];
+      const target = index + dir;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("div", { className: "sbf-section-heading" }, /* @__PURE__ */ React5.createElement("span", { className: "sbf-section-label" }, "Fields", fields.length > 0 && /* @__PURE__ */ React5.createElement(
+    "span",
+    {
+      style: {
+        marginLeft: 8,
+        fontSize: 11,
+        color: "var(--theme-elevation-400)",
+        fontWeight: 400
+      }
+    },
+    "(",
+    fields.length,
+    ")"
+  ))), fields.length === 0 ? /* @__PURE__ */ React5.createElement("div", { className: "sbf-empty" }, "No fields defined. Click \u201CAdd Field\u201D below to add the first field to this block schema.") : /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "calc(var(--base, 16px) / 2)" } }, fields.map((field, i) => /* @__PURE__ */ React5.createElement(
+    FieldRow,
+    {
+      key: i,
+      index: i,
+      total: fields.length,
+      field,
+      onChange: (updated) => updateField(i, updated),
+      onRemove: () => removeField(i),
+      onMoveUp: i > 0 ? () => moveField(i, -1) : void 0,
+      onMoveDown: i < fields.length - 1 ? () => moveField(i, 1) : void 0,
+      readOnly
+    }
+  ))), !readOnly && /* @__PURE__ */ React5.createElement("div", { style: { marginTop: "calc(var(--base, 16px) / 2)", marginBottom: "calc(var(--base, 16px) / 2)" } }, /* @__PURE__ */ React5.createElement("button", { type: "button", className: "sbf-add-btn", onClick: addField }, /* @__PURE__ */ React5.createElement("span", { className: "sbf-add-btn__icon" }, "+"), "Add Field")));
+}
+
+// src/components/EditInBuilderButton/index.tsx
+import React6 from "react";
+import { useDocumentInfo } from "@payloadcms/ui";
+import { useField as useField3 } from "@payloadcms/ui";
+function EditInBuilderButton() {
+  const { id } = useDocumentInfo();
+  const { value: slug } = useField3({ path: "slug" });
+  if (!id || !slug) return null;
+  return /* @__PURE__ */ React6.createElement("div", { style: { marginTop: "1rem" } }, /* @__PURE__ */ React6.createElement(
+    "a",
+    {
+      href: `/block-builder?load=${slug}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "8px 16px",
+        borderRadius: "6px",
+        border: "1px solid #16a34a",
+        color: "#16a34a",
+        textDecoration: "none",
+        fontSize: "13px",
+        fontWeight: 500,
+        background: "transparent",
+        cursor: "pointer"
+      }
+    },
+    "Edit in Block Builder"
+  ));
+}
+
+// src/block-builder/components/canvas/BuilderShell.tsx
+import React16, { useCallback as useCallback5, useEffect as useEffect5, useState as useState8 } from "react";
+
+// src/block-builder/store/builder.store.ts
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { v4 as uuidv4 } from "uuid";
+function createDefaultField(type) {
+  const base = {
+    id: uuidv4(),
+    type,
+    name: `${type}Field`,
+    label: `${type.charAt(0).toUpperCase()}${type.slice(1)} Field`,
+    required: false
+  };
+  switch (type) {
+    case "select":
+    case "radio":
+      return {
+        ...base,
+        options: [
+          { label: "Option 1", value: "option_1" },
+          { label: "Option 2", value: "option_2" }
+        ]
+      };
+    case "relationship":
+      return { ...base, relationTo: "", hasMany: false };
+    case "array":
+      return { ...base, fields: [] };
+    case "group":
+      return { ...base, fields: [] };
+    default:
+      return base;
+  }
+}
+function createDefaultBlock() {
+  return {
+    id: uuidv4(),
+    slug: "myBlock",
+    interfaceName: "MyBlock",
+    labels: { singular: "My Block", plural: "My Blocks" },
+    fields: []
+  };
+}
+var initialState = {
+  blocks: [],
+  activeBlockId: null,
+  activeFieldId: null,
+  isDirty: false
+};
+var useBuilderStore = create()(
+  devtools(
+    persist(
+      immer((set) => ({
+        ...initialState,
+        isReadOnly: false,
+        loadedVersionId: null,
+        blockSlug: null,
+        addBlock: () => set((state) => {
+          const block = createDefaultBlock();
+          state.blocks.push(block);
+          state.activeBlockId = block.id;
+          state.activeFieldId = null;
+          state.isDirty = true;
+        }),
+        removeBlock: (blockId) => set((state) => {
+          state.blocks = state.blocks.filter((b) => b.id !== blockId);
+          if (state.activeBlockId === blockId) {
+            state.activeBlockId = state.blocks[0]?.id ?? null;
+            state.activeFieldId = null;
+          }
+          state.isDirty = true;
+        }),
+        updateBlock: (blockId, updates) => set((state) => {
+          const block = state.blocks.find((b) => b.id === blockId);
+          if (block) Object.assign(block, updates);
+          state.isDirty = true;
+        }),
+        setActiveBlock: (blockId) => set((state) => {
+          state.activeBlockId = blockId;
+          state.activeFieldId = null;
+        }),
+        duplicateBlock: (blockId) => set((state) => {
+          const block = state.blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          const clone = JSON.parse(JSON.stringify(block));
+          clone.id = uuidv4();
+          clone.slug = `${block.slug}Copy`;
+          clone.interfaceName = block.interfaceName ? `${block.interfaceName}Copy` : void 0;
+          clone.fields = clone.fields.map((f) => ({ ...f, id: uuidv4() }));
+          const idx = state.blocks.findIndex((b) => b.id === blockId);
+          state.blocks.splice(idx + 1, 0, clone);
+          state.activeBlockId = clone.id;
+          state.isDirty = true;
+        }),
+        addField: (blockId, type) => set((state) => {
+          const block = state.blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          const field = createDefaultField(type);
+          block.fields.push(field);
+          state.activeFieldId = field.id;
+          state.isDirty = true;
+        }),
+        removeField: (blockId, fieldId) => set((state) => {
+          const block = state.blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          block.fields = block.fields.filter((f) => f.id !== fieldId);
+          if (state.activeFieldId === fieldId) state.activeFieldId = null;
+          state.isDirty = true;
+        }),
+        updateField: (blockId, fieldId, updates) => set((state) => {
+          const block = state.blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          const field = block.fields.find((f) => f.id === fieldId);
+          if (field) Object.assign(field, updates);
+          state.isDirty = true;
+        }),
+        reorderFields: (blockId, fromIndex, toIndex) => set((state) => {
+          const block = state.blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          const [moved] = block.fields.splice(fromIndex, 1);
+          block.fields.splice(toIndex, 0, moved);
+          state.isDirty = true;
+        }),
+        setActiveField: (fieldId) => set((state) => {
+          state.activeFieldId = fieldId;
+        }),
+        reset: () => set(() => ({ ...initialState, isReadOnly: false, loadedVersionId: null, blockSlug: null })),
+        markClean: () => set((state) => {
+          state.isDirty = false;
+        }),
+        loadBlock: (block) => set((state) => {
+          state.blocks = [block];
+          state.activeBlockId = block.id;
+          state.activeFieldId = null;
+          state.isDirty = false;
+        }),
+        setVersionMeta: (versionId, isReadOnly) => set((state) => {
+          state.loadedVersionId = versionId;
+          state.isReadOnly = isReadOnly;
+        }),
+        setBlockSlug: (slug) => set((state) => {
+          state.blockSlug = slug;
+        })
+      })),
+      {
+        name: "@nextbridgehq/payload-block-builder",
+        partialize: (state) => ({
+          blocks: state.blocks,
+          activeBlockId: state.activeBlockId
+        })
+      }
+    )
+  )
+);
+
+// src/block-builder/components/canvas/TopBar.tsx
+import React7, { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+
+// src/block-builder/lib/mapToSaveRequest.ts
+var TYPE_MAP = {
+  richText: "richtext",
+  upload: "image",
+  radio: "select"
+};
+var UNSUPPORTED = /* @__PURE__ */ new Set(["code", "point", "ui", "tabs", "collapsible", "row"]);
+function normalizeSlug(slug) {
+  return slug.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function mapToSaveRequest(block) {
+  const fields = block.fields.filter((f) => {
+    if (UNSUPPORTED.has(f.type)) {
+      console.warn(`[block-builder] Field type "${f.type}" is not supported in this project \xE2\u20AC\u201D skipping field "${f.name}"`);
+      return false;
+    }
+    return true;
+  }).map(({ id: _id, relationTo, ...f }) => ({
+    ...f,
+    type: TYPE_MAP[f.type] ?? f.type,
+    // normalizer reads `collection`, block-builder stores `relationTo`
+    ...relationTo ? { collection: relationTo } : {}
+  }));
+  return {
+    blockSlug: normalizeSlug(block.slug),
+    name: block.labels?.singular ?? block.slug,
+    schema: { fields },
+    changelog: "Created via block builder"
+  };
+}
+
+// src/block-builder/lib/codegen.ts
+function indent(n) {
+  return "  ".repeat(n);
+}
+function escStr(s) {
+  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+function fieldToCode(field, depth = 1) {
+  const pad = indent(depth);
+  const innerPad = indent(depth + 1);
+  const lines = [];
+  lines.push(`${pad}name: '${escStr(field.name)}'`);
+  lines.push(`${pad}type: '${field.type}'`);
+  if (field.label) lines.push(`${pad}label: '${escStr(field.label)}'`);
+  if (field.required) lines.push(`${pad}required: true`);
+  if (field.unique) lines.push(`${pad}unique: true`);
+  if (field.localized) lines.push(`${pad}localized: true`);
+  if (field.defaultValue !== void 0) {
+    const val = typeof field.defaultValue === "string" ? `'${escStr(String(field.defaultValue))}'` : field.defaultValue;
+    lines.push(`${pad}defaultValue: ${val}`);
+  }
+  if (field.type === "richText") {
+    lines.push(`${pad}editor: lexicalEditor({})`);
+  }
+  if (field.options && field.options.length > 0) {
+    const opts = field.options.map((o) => `{ label: '${escStr(o.label)}', value: '${escStr(o.value)}' }`).join(`, `);
+    lines.push(`${pad}options: [${opts}]`);
+  }
+  if (field.relationTo) {
+    lines.push(`${pad}relationTo: '${escStr(field.relationTo)}'`);
+  }
+  if (field.hasMany !== void 0) {
+    lines.push(`${pad}hasMany: ${field.hasMany}`);
+  }
+  if (field.minRows !== void 0) lines.push(`${pad}minRows: ${field.minRows}`);
+  if (field.maxRows !== void 0) lines.push(`${pad}maxRows: ${field.maxRows}`);
+  if (field.fields && field.fields.length > 0) {
+    const nested = field.fields.map((f) => `${innerPad}{
+${fieldToCode(f, depth + 2)}
+${innerPad}}`).join(",\n");
+    lines.push(`${pad}fields: [
+${nested}
+${innerPad}]`);
+  }
+  const adminParts = [];
+  if (field.admin?.description)
+    adminParts.push(`description: '${escStr(field.admin.description)}'`);
+  if (field.admin?.placeholder)
+    adminParts.push(`placeholder: '${escStr(field.admin.placeholder)}'`);
+  if (field.admin?.readOnly) adminParts.push(`readOnly: true`);
+  if (field.admin?.hidden) adminParts.push(`hidden: true`);
+  if (adminParts.length > 0) {
+    lines.push(`${pad}admin: { ${adminParts.join(", ")} }`);
+  }
+  return lines.join(",\n");
+}
+function generateBlockCode(block) {
+  const hasRichText = containsRichText(block.fields);
+  const imports = [`import type { Block } from 'payload'`];
+  if (hasRichText) {
+    imports.push(`import { lexicalEditor } from '@payloadcms/richtext-lexical'`);
+  }
+  const fieldsCode = block.fields.map((f) => `  {
+${fieldToCode(f, 2)}
+  }`).join(",\n");
+  const labelsCode = block.labels ? `
+  labels: {
+    singular: '${escStr(block.labels.singular ?? block.slug)}',
+    plural: '${escStr(block.labels.plural ?? block.slug + "s")}',
+  },` : "";
+  const interfaceLine = block.interfaceName ? `
+  interfaceName: '${escStr(block.interfaceName)}',` : "";
+  const exportName = block.interfaceName ?? toCamelCase(block.slug);
+  return [
+    imports.join("\n"),
+    "",
+    `export const ${exportName}: Block = {`,
+    `  slug: '${escStr(block.slug)}',${interfaceLine}${labelsCode}`,
+    `  fields: [`,
+    fieldsCode,
+    `  ],`,
+    `}`,
+    ""
+  ].join("\n");
+}
+function containsRichText(fields) {
+  return fields.some(
+    (f) => f.type === "richText" || (f.fields ? containsRichText(f.fields) : false)
+  );
+}
+function toCamelCase(slug) {
+  return slug.split(/[-_]/).map(
+    (part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)
+  ).join("");
+}
+function generateBlockOutput(block) {
+  return {
+    filename: `${block.slug}.ts`,
+    code: generateBlockCode(block),
+    language: "typescript"
+  };
+}
+function generateAllBlocks(blocks) {
+  return blocks.map(generateBlockOutput);
+}
+function generateIndexFile(blocks) {
+  const exportName = (b) => b.interfaceName ?? toCamelCase(b.slug);
+  const imports = blocks.map((b) => `import { ${exportName(b)} } from './${b.slug}'`).join("\n");
+  const exportList = blocks.map((b) => `  ${exportName(b)}`).join(",\n");
+  const code = [
+    imports,
+    "",
+    `export const blocks = [`,
+    exportList,
+    `] as const`,
+    ""
+  ].join("\n");
+  return { filename: "index.ts", code, language: "typescript" };
+}
+
+// src/block-builder/components/canvas/TopBar.tsx
+function TopBar({ blockDefs, activeSlug, onBlockSelect, versions, selectedVersionId, onVersionSelect, onRestoreVersion, onAfterPublish }) {
+  const blocks = useBuilderStore((s) => s.blocks);
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const activeBlock = blocks.find((b) => b.id === activeBlockId);
+  const markClean = useBuilderStore((s) => s.markClean);
+  const isDirty = useBuilderStore((s) => s.isDirty);
+  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
+  const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
+  const [notification, setNotification] = useState4(null);
+  const [versionDropdownOpen, setVersionDropdownOpen] = useState4(false);
+  const [blockPickerOpen, setBlockPickerOpen] = useState4(false);
+  const dropdownRef = useRef3(null);
+  const blockPickerRef = useRef3(null);
+  const selectedVersion = versions.find((v) => v.id === selectedVersionId);
+  const currentVersion = versions.find((v) => v.isCurrent);
+  const activeBlockDef = blockDefs.find((b) => b.slug === activeSlug);
+  useEffect3(() => {
+    if (notification?.status === "success") {
+      const t = setTimeout(() => setNotification(null), 3e3);
+      return () => clearTimeout(t);
+    }
+  }, [notification]);
+  useEffect3(() => {
+    function handleClick(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setVersionDropdownOpen(false);
+      }
+      if (blockPickerRef.current && !blockPickerRef.current.contains(e.target)) {
+        setBlockPickerOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+  async function handlePublish() {
+    if (!activeBlock || isReadOnly) return;
+    setNotification({ status: "publishing" });
+    try {
+      const req = mapToSaveRequest(activeBlock);
+      const res = await fetch("/api/blocks/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(req)
+      });
+      const json = await res.json();
+      if (json.success) {
+        markClean();
+        setVersionMeta(null, false);
+        setNotification({
+          status: "success",
+          msg: `v${json.versionNumber ?? "?"} published successfully!`
+        });
+        await onAfterPublish();
+      } else {
+        setNotification({
+          status: "error",
+          title: "Failed to publish block",
+          errors: json.errors ?? ["An unknown error occurred."]
+        });
+      }
+    } catch (err) {
+      setNotification({
+        status: "error",
+        title: "Network error",
+        errors: [err instanceof Error ? err.message : "Could not reach the server."]
+      });
+    }
+  }
+  function handleExport() {
+    if (blocks.length === 0) return;
+    const outputs = [...generateAllBlocks(blocks), generateIndexFile(blocks)];
+    for (const out of outputs) {
+      const blob = new Blob([out.code], { type: "text/plain" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = out.filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  }
+  function formatDate(iso) {
+    return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  }
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar" }, /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar__brand" }, /* @__PURE__ */ React7.createElement("span", { className: "bb-topbar__title" }, "Block Builder"), isDirty && !isReadOnly && /* @__PURE__ */ React7.createElement("span", { className: "bb-topbar__dirty" }, "\xE2\u2014\x8F unsaved")), /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar__selectors" }, blockDefs.length > 0 && /* @__PURE__ */ React7.createElement("div", { className: "bb-block-picker", ref: blockPickerRef }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "bb-block-picker__trigger",
+      onClick: () => setBlockPickerOpen((o) => !o)
+    },
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-block-picker__icon" }, "\xE2\xAC\xA1"),
+    /* @__PURE__ */ React7.createElement("span", null, activeBlockDef?.name ?? activeSlug ?? "Select a block"),
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-selector__chevron" }, "\xE2\u2013\xBE")
+  ), 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",
+    {
+      key: b.id,
+      type: "button",
+      className: `bb-version-dropdown__item${b.slug === activeSlug ? " bb-version-dropdown__item--active" : ""}`,
+      onClick: () => {
+        setBlockPickerOpen(false);
+        onBlockSelect(b.slug);
+      }
+    },
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-block-picker__item-name" }, b.name),
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-dropdown__meta" }, b.slug)
+  )))), versions.length > 0 && /* @__PURE__ */ React7.createElement("div", { className: "bb-version-selector", ref: dropdownRef }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: `bb-version-selector__trigger${isReadOnly ? " bb-version-selector__trigger--readonly" : ""}`,
+      onClick: () => setVersionDropdownOpen((o) => !o)
+    },
+    /* @__PURE__ */ React7.createElement("span", { className: `bb-version-selector__dot${selectedVersion?.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ React7.createElement("span", null, selectedVersion?.label ?? `v${selectedVersion?.versionNumber ?? "?"}`),
+    selectedVersion?.isCurrent && /* @__PURE__ */ React7.createElement("span", { className: "bb-version-selector__badge" }, "current"),
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-selector__chevron" }, "\xE2\u2013\xBE")
+  ), 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",
+    {
+      key: v.id,
+      type: "button",
+      className: `bb-version-dropdown__item${v.id === selectedVersionId ? " bb-version-dropdown__item--active" : ""}`,
+      onClick: () => {
+        setVersionDropdownOpen(false);
+        onVersionSelect(v.id);
+      }
+    },
+    /* @__PURE__ */ React7.createElement("span", { className: `bb-version-selector__dot${v.isCurrent ? " bb-version-selector__dot--current" : " bb-version-selector__dot--old"}` }),
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-dropdown__label" }, v.label, v.isCurrent && /* @__PURE__ */ React7.createElement("span", { className: "bb-version-selector__badge" }, "current")),
+    /* @__PURE__ */ React7.createElement("span", { className: "bb-version-dropdown__meta" }, v.changelog ? `${v.changelog.slice(0, 32)}${v.changelog.length > 32 ? "\xE2\u20AC\xA6" : ""}` : formatDate(v.createdAt))
+  ))))), /* @__PURE__ */ React7.createElement("div", { className: "bb-topbar__actions" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleExport,
+      disabled: blocks.length === 0,
+      className: "bb-btn bb-btn--secondary",
+      style: { display: "none" }
+    },
+    "Export .ts"
+  ), isReadOnly ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        onVersionSelect(currentVersion?.id ?? "");
+      },
+      className: "bb-btn bb-btn--secondary",
+      disabled: !currentVersion
+    },
+    "Back to current"
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: async () => {
+        await handlePublish();
+        setVersionMeta(null, false);
+        onRestoreVersion();
+      },
+      disabled: notification?.status === "publishing" || !activeBlock,
+      className: "bb-btn bb-btn--warning"
+    },
+    notification?.status === "publishing" ? "Restoring\xE2\u20AC\xA6" : "Restore as new version"
+  )) : /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handlePublish,
+      disabled: notification?.status === "publishing" || !activeBlock,
+      className: "bb-btn bb-btn--primary"
+    },
+    notification?.status === "publishing" ? "Publishing\xE2\u20AC\xA6" : "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\xE2\u20AC\xA6" : "Publishing to Payload\xE2\u20AC\xA6"), /* @__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" }, "\xE2\u0153\u201C"), /* @__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) }, "\xE2\u0153\u2022"))), 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" }, "\xE2\u0153\u2022"), /* @__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) }, "\xE2\u0153\u2022"))));
+}
+
+// src/block-builder/components/canvas/BlockList.tsx
+import React8 from "react";
+function BlockList() {
+  const blocks = useBuilderStore((s) => s.blocks);
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const addBlock = useBuilderStore((s) => s.addBlock);
+  const removeBlock = useBuilderStore((s) => s.removeBlock);
+  const duplicateBlock = useBuilderStore((s) => s.duplicateBlock);
+  const setActiveBlock = useBuilderStore((s) => s.setActiveBlock);
+  return /* @__PURE__ */ React8.createElement("div", { className: "bb-sidebar bb-sidebar--200 bb-sidebar--blocks" }, /* @__PURE__ */ React8.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ React8.createElement("span", { className: "bb-sidebar__title" }, "Blocks"), /* @__PURE__ */ React8.createElement("button", { type: "button", onClick: addBlock, title: "Add block", className: "bb-sidebar__add" }, "+")), /* @__PURE__ */ React8.createElement("div", { className: "bb-sidebar__body" }, blocks.length === 0 && /* @__PURE__ */ React8.createElement("div", { className: "bb-block-empty" }, "No blocks yet.", /* @__PURE__ */ React8.createElement("br", null), "Click + to create one."), blocks.map((block) => {
+    const isActive = block.id === activeBlockId;
+    return /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        key: block.id,
+        onClick: () => setActiveBlock(block.id),
+        className: `bb-block-item${isActive ? " bb-block-item--active" : ""}`
+      },
+      /* @__PURE__ */ React8.createElement("div", { className: "bb-block-item__slug" }, block.slug),
+      /* @__PURE__ */ React8.createElement("div", { className: "bb-block-item__meta" }, block.fields.length, " field", block.fields.length !== 1 ? "s" : ""),
+      /* @__PURE__ */ React8.createElement(
+        "div",
+        {
+          className: "bb-block-item__actions",
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React8.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => duplicateBlock(block.id),
+            className: "bb-block-action",
+            title: "Duplicate"
+          },
+          "\xE2\xA7\u2030"
+        ),
+        /* @__PURE__ */ React8.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeBlock(block.id),
+            className: "bb-block-action bb-block-action--danger",
+            title: "Delete"
+          },
+          "\xE2\u0153\u2022"
+        )
+      )
+    );
+  })));
+}
+
+// src/block-builder/components/canvas/BuilderCanvas.tsx
+import React10 from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers";
+
+// src/block-builder/components/canvas/SortableFieldCard.tsx
+import React9 from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+var ICON_MAP = {
+  text: "\xF0\u0178\u201C\x9D",
+  textarea: "\xF0\u0178\u201C\u201E",
+  richText: "\xF0\u0178\u201C\xB0",
+  number: "\xF0\u0178\u201D\xA2",
+  checkbox: "\xE2\u02DC\u2018",
+  select: "\xE2\u2013\xBE",
+  radio: "\xE2\u2014\u2030",
+  date: "\xF0\u0178\u201C\u2026",
+  upload: "\xF0\u0178\u201C\u017D",
+  email: "\xE2\u0153\u2030",
+  code: "\xE2\u20AC\xB9\xE2\u20AC\xBA",
+  point: "\xE2\u2014\u017D",
+  relationship: "\xE2\u2021\u0152",
+  array: "\xE2\u2013\xA4",
+  group: "\xE2\u2013\xA3",
+  json: "{}",
+  ui: "\xE2\u2014\u02C6"
+};
+function SortableFieldCard({ field, blockId, index }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: field.id
+  });
+  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const setActiveField = useBuilderStore((s) => s.setActiveField);
+  const removeField = useBuilderStore((s) => s.removeField);
+  const isActive = activeFieldId === field.id;
+  const wrapStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      ref: setNodeRef,
+      style: wrapStyle,
+      className: `bb-field-card-wrap${isDragging ? " bb-field-card-wrap--dragging" : ""}`,
+      ...attributes,
+      ...listeners
+    },
+    /* @__PURE__ */ React9.createElement(
+      "div",
+      {
+        className: `bb-field-card${isActive ? " bb-field-card--active" : ""}`,
+        onClick: () => setActiveField(isActive ? null : field.id)
+      },
+      /* @__PURE__ */ React9.createElement("span", { className: "bb-field-card__icon" }, ICON_MAP[field.type] ?? "\xE2\u2014\xBB"),
+      /* @__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(
+        "button",
+        {
+          type: "button",
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: (e) => {
+            e.stopPropagation();
+            removeField(blockId, field.id);
+          },
+          className: "bb-field-card__delete",
+          title: "Remove field"
+        },
+        "\xE2\u0153\u2022"
+      )
+    )
+  );
+}
+
+// src/block-builder/components/canvas/BuilderCanvas.tsx
+function BuilderCanvas() {
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
+  const reorderFields = useBuilderStore((s) => s.reorderFields);
+  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  function handleDragEnd(event) {
+    if (isReadOnly) return;
+    const { active, over } = event;
+    if (!over || active.id === over.id || !block) return;
+    const fromIndex = block.fields.findIndex((f) => f.id === active.id);
+    const toIndex = block.fields.findIndex((f) => f.id === over.id);
+    if (fromIndex !== -1 && toIndex !== -1) {
+      reorderFields(block.id, fromIndex, toIndex);
+    }
+  }
+  if (!block) {
+    return /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas", style: { display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React10.createElement("span", { className: "bb-canvas__no-block" }, "Select or create a block from the left panel."));
+  }
+  return /* @__PURE__ */ React10.createElement("div", { className: `bb-canvas${isReadOnly ? " bb-canvas--readonly" : ""}` }, /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__inner" }, /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__header" }, block.slug, " \xE2\u20AC\u201D ", block.fields.length, " field", block.fields.length !== 1 ? "s" : ""), block.fields.length === 0 ? /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__empty" }, "Add fields from the palette on the left") : /* @__PURE__ */ React10.createElement(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      modifiers: [restrictToVerticalAxis, restrictToParentElement],
+      onDragEnd: handleDragEnd
+    },
+    /* @__PURE__ */ React10.createElement(
+      SortableContext,
+      {
+        items: block.fields.map((f) => f.id),
+        strategy: verticalListSortingStrategy
+      },
+      /* @__PURE__ */ React10.createElement("div", { className: "bb-canvas__field-list" }, block.fields.map((field, i) => /* @__PURE__ */ React10.createElement(
+        SortableFieldCard,
+        {
+          key: field.id,
+          field,
+          blockId: block.id,
+          index: i
+        }
+      )))
+    )
+  )));
+}
+
+// src/block-builder/components/canvas/ConfigPanel.tsx
+import React13, { useState as useState5 } from "react";
+
+// src/block-builder/components/config/BlockConfig.tsx
+import React11 from "react";
+function BlockConfig() {
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  if (!block) {
+    return /* @__PURE__ */ React11.createElement("div", { className: "bb-form__empty" }, "No block selected.");
+  }
+  return /* @__PURE__ */ React11.createElement("div", { className: "bb-form" }, /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Slug *"), /* @__PURE__ */ React11.createElement(
+    "input",
+    {
+      type: "text",
+      value: block.slug,
+      onChange: (e) => updateBlock(block.id, { slug: e.target.value }),
+      placeholder: "myBlock",
+      className: "bb-input"
+    }
+  ), /* @__PURE__ */ React11.createElement("span", { className: "bb-form__hint" }, "Unique identifier used in code and database")), /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Interface Name"), /* @__PURE__ */ React11.createElement(
+    "input",
+    {
+      type: "text",
+      value: block.interfaceName ?? "",
+      onChange: (e) => updateBlock(block.id, { interfaceName: e.target.value || void 0 }),
+      placeholder: "MyBlock",
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React11.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Singular Label"), /* @__PURE__ */ React11.createElement(
+    "input",
+    {
+      type: "text",
+      value: block.labels?.singular ?? "",
+      onChange: (e) => updateBlock(block.id, { labels: { ...block.labels, singular: e.target.value } }),
+      placeholder: "My Block",
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Plural Label"), /* @__PURE__ */ React11.createElement(
+    "input",
+    {
+      type: "text",
+      value: block.labels?.plural ?? "",
+      onChange: (e) => updateBlock(block.id, { labels: { ...block.labels, plural: e.target.value } }),
+      placeholder: "My Blocks",
+      className: "bb-input"
+    }
+  ))), /* @__PURE__ */ React11.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React11.createElement("label", { className: "bb-form__label" }, "Image URL"), /* @__PURE__ */ React11.createElement(
+    "input",
+    {
+      type: "text",
+      value: block.imageURL ?? "",
+      onChange: (e) => updateBlock(block.id, { imageURL: e.target.value || void 0 }),
+      placeholder: "https://\xE2\u20AC\xA6",
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React11.createElement("div", { className: "bb-stat-box" }, /* @__PURE__ */ React11.createElement("strong", null, block.fields.length), " field", block.fields.length !== 1 ? "s" : "", " defined"));
+}
+
+// src/block-builder/components/config/FieldConfig.tsx
+import React12 from "react";
+var ALL_TYPES = [
+  "text",
+  "textarea",
+  "richText",
+  "number",
+  "checkbox",
+  "select",
+  "radio",
+  "date",
+  "upload",
+  "email",
+  "code",
+  "point",
+  "relationship",
+  "array",
+  "group",
+  "json",
+  "ui"
+];
+function FieldConfig() {
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const block = useBuilderStore((s) => s.blocks.find((b) => b.id === activeBlockId));
+  const field = block?.fields.find((f) => f.id === activeFieldId);
+  const updateField = useBuilderStore((s) => s.updateField);
+  if (!activeBlockId || !activeFieldId || !field) {
+    return /* @__PURE__ */ React12.createElement("div", { className: "bb-form__empty" }, "Select a field to configure it.");
+  }
+  function upd(updates) {
+    updateField(activeBlockId, activeFieldId, updates);
+  }
+  const needsOptions = field.type === "select" || field.type === "radio";
+  return /* @__PURE__ */ React12.createElement("div", { className: "bb-form" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Field Name *"), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "text",
+      value: field.name,
+      onChange: (e) => upd({ name: e.target.value }),
+      placeholder: "fieldName",
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Type *"), /* @__PURE__ */ React12.createElement(
+    "select",
+    {
+      value: field.type,
+      onChange: (e) => upd({ type: e.target.value }),
+      className: "bb-input bb-select"
+    },
+    ALL_TYPES.map((t) => /* @__PURE__ */ React12.createElement("option", { key: t, value: t }, t))
+  ))), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Label"), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "text",
+      value: field.label ?? "",
+      onChange: (e) => upd({ label: e.target.value || void 0 }),
+      placeholder: "Human-readable label",
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-flags-row" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.required ?? false,
+      onChange: (e) => upd({ required: e.target.checked })
+    }
+  ), "Required"), /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.unique ?? false,
+      onChange: (e) => upd({ unique: e.target.checked })
+    }
+  ), "Unique"), /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.localized ?? false,
+      onChange: (e) => upd({ localized: e.target.checked })
+    }
+  ), "Localized")), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Default Value"), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "text",
+      value: field.defaultValue !== void 0 ? String(field.defaultValue) : "",
+      onChange: (e) => upd({ defaultValue: e.target.value || void 0 }),
+      placeholder: "Default value",
+      className: "bb-input"
+    }
+  )), field.type === "relationship" && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Relation To (collection slug)"), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "text",
+      value: field.relationTo ?? "",
+      onChange: (e) => upd({ relationTo: e.target.value }),
+      placeholder: "pages",
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React12.createElement("label", { className: "bb-checkbox-row" }, /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: field.hasMany ?? false,
+      onChange: (e) => upd({ hasMany: e.target.checked })
+    }
+  ), "Has Many")), field.type === "array" && /* @__PURE__ */ React12.createElement("div", { className: "bb-grid-2" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Min Rows"), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "number",
+      value: field.minRows ?? "",
+      onChange: (e) => upd({ minRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
+      className: "bb-input"
+    }
+  )), /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("label", { className: "bb-form__label" }, "Max Rows"), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "number",
+      value: field.maxRows ?? "",
+      onChange: (e) => upd({ maxRows: e.target.value === "" ? void 0 : e.target.valueAsNumber }),
+      className: "bb-input"
+    }
+  ))), needsOptions && /* @__PURE__ */ React12.createElement("div", { className: "bb-form__section" }, /* @__PURE__ */ React12.createElement("div", { className: "bb-options-label" }, "Options"), (field.options ?? []).map((opt, i) => /* @__PURE__ */ React12.createElement("div", { key: i, className: "bb-option-row" }, /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "text",
+      value: opt.label,
+      placeholder: "Label",
+      onChange: (e) => {
+        const next = [...field.options ?? []];
+        next[i] = { ...next[i], label: e.target.value };
+        upd({ options: next });
+      },
+      className: "bb-input"
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    "input",
+    {
+      type: "text",
+      value: opt.value,
+      placeholder: "Value",
+      onChange: (e) => {
+        const next = [...field.options ?? []];
+        next[i] = { ...next[i], value: e.target.value };
+        upd({ options: next });
+      },
+      className: "bb-input"
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        const next = (field.options ?? []).filter((_, k) => k !== i);
+        upd({ options: next });
+      },
+      className: "bb-option-delete",
+      title: "Remove option"
+    },
+    "\xE2\u0153\u2022"
+  ))), /* @__PURE__ */ React12.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => upd({ options: [...field.options ?? [], { label: "", value: "" }] }),
+      className: "bb-add-option"
+    },
+    "+ Add Option"
+  )));
+}
+
+// src/block-builder/components/canvas/ConfigPanel.tsx
+function ConfigPanel() {
+  const [tab, setTab] = useState5("block");
+  const activeFieldId = useBuilderStore((s) => s.activeFieldId);
+  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
+  const activeTab = activeFieldId ? "field" : tab;
+  return /* @__PURE__ */ React13.createElement("div", { className: `bb-config${isReadOnly ? " bb-config--readonly" : ""}` }, /* @__PURE__ */ React13.createElement("div", { className: "bb-config__tabs" }, ["block", "field"].map((t) => /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      key: t,
+      type: "button",
+      onClick: () => setTab(t),
+      className: `bb-config__tab${activeTab === t ? " bb-config__tab--active" : ""}`
+    },
+    t
+  ))), /* @__PURE__ */ React13.createElement("div", { className: "bb-config__body" }, activeTab === "block" ? /* @__PURE__ */ React13.createElement(BlockConfig, null) : /* @__PURE__ */ React13.createElement(FieldConfig, null)), isReadOnly && /* @__PURE__ */ React13.createElement("div", { className: "bb-config__readonly-overlay" }, /* @__PURE__ */ React13.createElement("span", { className: "bb-config__readonly-label" }, "Read only")));
+}
+
+// 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,
+  List,
+  Folder,
+  Braces
+} from "lucide-react";
+
+// src/block-builder/lib/field-palette.ts
+var FIELD_PALETTE = [
+  // Basic
+  { type: "text", label: "Text", description: "Single line text input", icon: "Type", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
+  { type: "textarea", label: "Textarea", description: "Multi-line text input", icon: "AlignLeft", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
+  { type: "number", label: "Number", description: "Numeric input field", icon: "Hash", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
+  { type: "email", label: "Email", description: "Email address field", icon: "Mail", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
+  { type: "date", label: "Date", description: "Date and time picker", icon: "Calendar", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
+  { type: "checkbox", label: "Checkbox", description: "Boolean toggle", icon: "CheckSquare", category: "basic", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" },
+  // Choice
+  { type: "select", label: "Select", description: "Dropdown selection", icon: "ChevronDown", category: "choice", color: "bg-purple-500/20 text-purple-400 border-purple-500/30" },
+  { type: "radio", label: "Radio", description: "Radio button group", icon: "Circle", category: "choice", color: "bg-purple-500/20 text-purple-400 border-purple-500/30" },
+  // Media
+  { type: "upload", label: "Upload", description: "File or media upload", icon: "Upload", category: "media", color: "bg-green-500/20 text-green-400 border-green-500/30" },
+  // Relational
+  { type: "relationship", label: "Relationship", description: "Link to another collection", icon: "Link", category: "relational", color: "bg-orange-500/20 text-orange-400 border-orange-500/30" },
+  // Advanced
+  { type: "json", label: "JSON", description: "Raw JSON data field", icon: "Braces", category: "advanced", color: "bg-red-500/20 text-red-400 border-red-500/30" }
+];
+var FIELD_CATEGORIES = [
+  { id: "basic", label: "Basic" },
+  { id: "choice", label: "Choice" },
+  { id: "media", label: "Media" },
+  { id: "relational", label: "Relational" },
+  { id: "advanced", label: "Advanced" }
+];
+function getFieldMeta(type) {
+  return FIELD_PALETTE.find((f) => f.type === type);
+}
+
+// src/block-builder/components/sidebar/FieldPalette.tsx
+var ICON_MAP2 = {
+  Type,
+  AlignLeft,
+  Hash,
+  Mail,
+  Calendar,
+  CheckSquare,
+  ChevronDown,
+  Circle,
+  Upload,
+  Link,
+  List,
+  Folder,
+  Braces
+};
+function FieldPalette() {
+  const [search, setSearch] = useState6("");
+  const activeBlockId = useBuilderStore((s) => s.activeBlockId);
+  const addField = useBuilderStore((s) => s.addField);
+  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
+  const filtered = search.trim() ? FIELD_PALETTE.filter(
+    (f) => f.label.toLowerCase().includes(search.toLowerCase()) || f.type.toLowerCase().includes(search.toLowerCase())
+  ) : FIELD_PALETTE;
+  function handleAdd(type) {
+    if (!activeBlockId || isReadOnly) return;
+    addField(activeBlockId, type);
+  }
+  return /* @__PURE__ */ React14.createElement("div", { className: `bb-sidebar bb-sidebar--200 bb-sidebar--palette${isReadOnly ? " bb-sidebar--readonly" : ""}` }, /* @__PURE__ */ React14.createElement("div", { className: "bb-sidebar__header" }, /* @__PURE__ */ React14.createElement("span", { className: "bb-sidebar__title" }, "Fields")), /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__search-wrap" }, /* @__PURE__ */ React14.createElement(
+    "input",
+    {
+      type: "text",
+      value: search,
+      onChange: (e) => setSearch(e.target.value),
+      placeholder: "Search\xE2\u20AC\xA6",
+      className: "bb-palette__search"
+    }
+  )), /* @__PURE__ */ React14.createElement("div", { className: "bb-sidebar__body" }, search.trim() ? /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__items" }, filtered.map((item) => /* @__PURE__ */ React14.createElement(
+    FieldButton,
+    {
+      key: item.type,
+      type: item.type,
+      label: item.label,
+      icon: item.icon,
+      onAdd: handleAdd,
+      disabled: !activeBlockId || isReadOnly
+    }
+  ))) : FIELD_CATEGORIES.map((cat) => {
+    const items = FIELD_PALETTE.filter((f) => f.category === cat.id);
+    return /* @__PURE__ */ React14.createElement("div", { key: cat.id, style: { marginTop: 6 } }, /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__cat-label" }, cat.label), /* @__PURE__ */ React14.createElement("div", { className: "bb-palette__items" }, items.map((item) => /* @__PURE__ */ React14.createElement(
+      FieldButton,
+      {
+        key: item.type,
+        type: item.type,
+        label: item.label,
+        icon: item.icon,
+        onAdd: handleAdd,
+        disabled: !activeBlockId || isReadOnly
+      }
+    ))));
+  })), !activeBlockId && /* @__PURE__ */ React14.createElement("div", { className: "bb-sidebar__footer" }, "Select a block first"));
+}
+function FieldButton({
+  type,
+  label,
+  icon,
+  onAdd,
+  disabled
+}) {
+  const meta = getFieldMeta(type);
+  const Icon = ICON_MAP2[icon];
+  return /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: () => onAdd(type),
+      title: meta?.description,
+      className: "bb-palette__item"
+    },
+    /* @__PURE__ */ React14.createElement("span", { className: "bb-palette__item__icon" }, Icon ? /* @__PURE__ */ React14.createElement(Icon, { size: 13, strokeWidth: 1.75 }) : null),
+    /* @__PURE__ */ React14.createElement("span", { className: "bb-palette__item__label" }, label),
+    /* @__PURE__ */ React14.createElement("span", { className: "bb-palette__item__type" }, type)
+  );
+}
+
+// src/block-builder/components/canvas/CodePreview.tsx
+import React15, { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "import",
+  "export",
+  "from",
+  "const",
+  "let",
+  "var",
+  "type",
+  "interface",
+  "as",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "return",
+  "async",
+  "await"
+]);
+var TYPE_RE = /^[A-Z][A-Za-z0-9_<>[\],\s|&]*$/;
+function tokenise(code) {
+  const tokens = [];
+  let i = 0;
+  while (i < code.length) {
+    if (code[i] === "/" && code[i + 1] === "/") {
+      const end = code.indexOf("\n", i);
+      const text = end === -1 ? code.slice(i) : code.slice(i, end);
+      tokens.push({ kind: "comment", text });
+      i += text.length;
+      continue;
+    }
+    if (code[i] === "'" || code[i] === '"' || code[i] === "`") {
+      const q = code[i];
+      let j2 = i + 1;
+      while (j2 < code.length) {
+        if (code[j2] === "\\") {
+          j2 += 2;
+          continue;
+        }
+        if (code[j2] === q) {
+          j2++;
+          break;
+        }
+        j2++;
+      }
+      tokens.push({ kind: "string", text: code.slice(i, j2) });
+      i = j2;
+      continue;
+    }
+    if (/[0-9]/.test(code[i]) || code[i] === "-" && /[0-9]/.test(code[i + 1] ?? "")) {
+      let j2 = i + 1;
+      while (j2 < code.length && /[0-9._]/.test(code[j2])) j2++;
+      tokens.push({ kind: "number", text: code.slice(i, j2) });
+      i = j2;
+      continue;
+    }
+    if (/[A-Za-z_$]/.test(code[i])) {
+      let j2 = i + 1;
+      while (j2 < code.length && /[A-Za-z0-9_$]/.test(code[j2])) j2++;
+      const word = code.slice(i, j2);
+      const kind = KEYWORDS.has(word) ? "keyword" : TYPE_RE.test(word) ? "type" : "plain";
+      tokens.push({ kind, text: word });
+      i = j2;
+      continue;
+    }
+    if (/[{}[\]:,;=().<>|&!]/.test(code[i])) {
+      tokens.push({ kind: "punct", text: code[i] });
+      i++;
+      continue;
+    }
+    let j = i + 1;
+    while (j < code.length && !/[A-Za-z0-9_$'"`0-9{}[\]:,;=().<>|&!/-]/.test(code[j])) j++;
+    tokens.push({ kind: "plain", text: code.slice(i, j) });
+    i = j;
+  }
+  return tokens;
+}
+var TOKEN_COLORS = {
+  keyword: "#c792ea",
+  string: "#c3e88d",
+  comment: "#546e7a",
+  type: "#82aaff",
+  number: "#f78c6c",
+  punct: "#89ddff",
+  plain: "#f9fafb"
+};
+function HighlightedCode({ code }) {
+  const tokens = tokenise(code);
+  return /* @__PURE__ */ React15.createElement("code", { style: { fontFamily: "inherit" } }, tokens.map((tok, i) => /* @__PURE__ */ React15.createElement("span", { key: i, style: { color: TOKEN_COLORS[tok.kind] } }, tok.text)));
+}
+function CodePreview() {
+  const blocks = useBuilderStore((s) => s.blocks);
+  const [fileMap, setFileMap] = useState7({});
+  const [activeFile, setActiveFile] = useState7(null);
+  const [copied, setCopied] = useState7(false);
+  const timerRef = useRef4(null);
+  const copyTimerRef = useRef4(null);
+  const regenerate = useCallback4(() => {
+    if (blocks.length === 0) {
+      setFileMap({});
+      setActiveFile(null);
+      return;
+    }
+    const blockOutputs = generateAllBlocks(blocks);
+    const indexOutput = generateIndexFile(blocks);
+    const next = {};
+    for (const out of blockOutputs) next[out.filename] = out.code;
+    next[indexOutput.filename] = indexOutput.code;
+    setFileMap(next);
+    setActiveFile((prev) => {
+      const keys = Object.keys(next);
+      return prev && keys.includes(prev) ? prev : keys[0] ?? null;
+    });
+  }, [blocks]);
+  useEffect4(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(regenerate, 300);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [regenerate]);
+  function copyActive() {
+    if (!activeFile || !fileMap[activeFile]) return;
+    navigator.clipboard.writeText(fileMap[activeFile]).then(() => {
+      setCopied(true);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+    });
+  }
+  const fileNames = Object.keys(fileMap);
+  const activeCode = activeFile ? fileMap[activeFile] ?? "" : "";
+  const lineCount = activeCode ? activeCode.split("\n").length : 0;
+  if (fileNames.length === 0) {
+    return /* @__PURE__ */ React15.createElement(
+      "div",
+      {
+        className: "code-preview",
+        style: {
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--payload-muted, #9ca3af)",
+          fontSize: "0.875rem",
+          fontStyle: "italic"
+        }
+      },
+      "Add a block to see generated TypeScript code"
+    );
+  }
+  return /* @__PURE__ */ React15.createElement("div", { className: "code-preview", style: { height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" } }, /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        borderBottom: "1px solid var(--payload-border, #1f2937)",
+        flexShrink: 0,
+        overflowX: "auto",
+        gap: 0
+      }
+    },
+    fileNames.map((name) => {
+      const isActive = activeFile === name;
+      return /* @__PURE__ */ React15.createElement(
+        "button",
+        {
+          key: name,
+          type: "button",
+          onClick: () => setActiveFile(name),
+          style: {
+            padding: "0.375rem 0.875rem",
+            background: isActive ? "var(--payload-surface, #111827)" : "transparent",
+            border: "none",
+            borderBottom: `2px solid ${isActive ? "#22c55e" : "transparent"}`,
+            borderRight: "1px solid var(--payload-border, #1f2937)",
+            color: isActive ? "#22c55e" : "var(--payload-muted, #9ca3af)",
+            fontSize: "0.75rem",
+            fontFamily: "ui-monospace, monospace",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            transition: "color 0.1s, background 0.1s"
+          }
+        },
+        name
+      );
+    }),
+    /* @__PURE__ */ React15.createElement("div", { style: { flex: 1 } }),
+    lineCount > 0 && /* @__PURE__ */ React15.createElement(
+      "span",
+      {
+        style: {
+          fontSize: "0.6875rem",
+          color: "var(--payload-muted, #9ca3af)",
+          padding: "0 0.75rem",
+          whiteSpace: "nowrap"
+        }
+      },
+      lineCount,
+      " lines"
+    ),
+    /* @__PURE__ */ React15.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: copyActive,
+        title: "Copy to clipboard",
+        style: {
+          padding: "0.375rem 0.875rem",
+          background: "transparent",
+          border: "none",
+          borderLeft: "1px solid var(--payload-border, #1f2937)",
+          color: copied ? "#22c55e" : "var(--payload-muted, #9ca3af)",
+          fontSize: "0.75rem",
+          cursor: "pointer",
+          whiteSpace: "nowrap",
+          transition: "color 0.2s",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.25rem"
+        }
+      },
+      copied ? "\xE2\u0153\u201C Copied" : "\xE2\xA7\u2030 Copy"
+    )
+  ), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, overflow: "auto", display: "flex" } }, /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      style: {
+        flexShrink: 0,
+        padding: "1rem 0.75rem 1rem 0.5rem",
+        textAlign: "right",
+        color: "var(--payload-muted, #4b5563)",
+        fontSize: "0.75rem",
+        lineHeight: 1.6,
+        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        userSelect: "none",
+        borderRight: "1px solid var(--payload-border, #1f2937)",
+        minWidth: "2.5rem"
+      },
+      "aria-hidden": "true"
+    },
+    activeCode.split("\n").map((_, i) => /* @__PURE__ */ React15.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ React15.createElement(
+    "pre",
+    {
+      style: {
+        flex: 1,
+        margin: 0,
+        padding: "1rem",
+        fontSize: "0.75rem",
+        lineHeight: 1.6,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        background: "transparent",
+        overflow: "visible",
+        whiteSpace: "pre"
+      }
+    },
+    /* @__PURE__ */ React15.createElement(HighlightedCode, { code: activeCode })
+  )));
+}
+
+// src/block-builder/components/canvas/BuilderShell.tsx
+function BuilderShell({ loadSlug }) {
+  const loadBlock = useBuilderStore((s) => s.loadBlock);
+  const setVersionMeta = useBuilderStore((s) => s.setVersionMeta);
+  const setBlockSlug = useBuilderStore((s) => s.setBlockSlug);
+  const isReadOnly = useBuilderStore((s) => s.isReadOnly);
+  const [activeSlug, setActiveSlug] = useState8(loadSlug ?? null);
+  const [loading, setLoading] = useState8(!!loadSlug);
+  const [loadError, setLoadError] = useState8(null);
+  const [showCodePreview, setShowCodePreview] = useState8(false);
+  const [versions, setVersions] = useState8([]);
+  const [selectedVersionId, setSelectedVersionId] = useState8(null);
+  const [blockDefs, setBlockDefs] = useState8([]);
+  const [mobilePanelTab, setMobilePanelTab] = useState8("blocks");
+  useEffect5(() => {
+    fetch("/api/block-definitions?limit=200&depth=0").then((r) => r.json()).then((json) => {
+      setBlockDefs(
+        (json.docs ?? []).map((d) => ({ id: String(d.id), slug: d.slug, name: d.name }))
+      );
+    }).catch(() => {
+    });
+  }, []);
+  const loadVersionsForSlug = useCallback5(async (slug) => {
+    try {
+      const res = await fetch(`/api/block-builder/versions/${encodeURIComponent(slug)}`);
+      const json = await res.json();
+      return json.versions ?? [];
+    } catch {
+      return [];
+    }
+  }, []);
+  const loadVersion = useCallback5(async (slug, versionId) => {
+    setLoading(true);
+    setLoadError(null);
+    const url = versionId ? `/api/block-builder/load/${encodeURIComponent(slug)}?versionId=${encodeURIComponent(versionId)}` : `/api/block-builder/load/${encodeURIComponent(slug)}`;
+    try {
+      const res = await fetch(url);
+      const json = await res.json();
+      if (json.block) {
+        loadBlock(json.block);
+        setVersionMeta(json.versionId ?? null, !(json.isCurrent ?? true));
+        setSelectedVersionId(json.versionId ?? null);
+      } else {
+        setLoadError(json.error ?? "Failed to load block");
+      }
+    } catch (err) {
+      setLoadError(err instanceof Error ? err.message : "Network error");
+    } finally {
+      setLoading(false);
+    }
+  }, [loadBlock, setVersionMeta]);
+  const loadBlockBySlug = useCallback5(async (slug) => {
+    setActiveSlug(slug);
+    setBlockSlug(slug);
+    setVersions([]);
+    setSelectedVersionId(null);
+    setLoadError(null);
+    setMobilePanelTab("canvas");
+    await loadVersion(slug);
+    const list = await loadVersionsForSlug(slug);
+    setVersions(list);
+    const current = list.find((v) => v.isCurrent) ?? list[0];
+    if (current) setSelectedVersionId(current.id);
+  }, [loadVersion, loadVersionsForSlug, setBlockSlug]);
+  useEffect5(() => {
+    if (!loadSlug) return;
+    loadBlockBySlug(loadSlug);
+  }, [loadSlug]);
+  function handleVersionSelect(versionId) {
+    if (!activeSlug) return;
+    loadVersion(activeSlug, versionId);
+  }
+  async function handleRestoreVersion() {
+    if (!activeSlug) return;
+    await loadVersion(activeSlug);
+    const list = await loadVersionsForSlug(activeSlug);
+    setVersions(list);
+    const current = list.find((v) => v.isCurrent) ?? list[0];
+    if (current) setSelectedVersionId(current.id);
+  }
+  async function handleAfterPublish() {
+    if (!activeSlug) return;
+    const list = await loadVersionsForSlug(activeSlug);
+    setVersions(list);
+    const current = list.find((v) => v.isCurrent) ?? list[0];
+    if (current) setSelectedVersionId(current.id);
+  }
+  return /* @__PURE__ */ React16.createElement("div", { className: "bb-shell" }, /* @__PURE__ */ React16.createElement(
+    TopBar,
+    {
+      blockDefs,
+      activeSlug,
+      onBlockSelect: loadBlockBySlug,
+      versions,
+      selectedVersionId,
+      onVersionSelect: handleVersionSelect,
+      onRestoreVersion: handleRestoreVersion,
+      onAfterPublish: handleAfterPublish
+    }
+  ), loading && /* @__PURE__ */ React16.createElement("div", { className: "bb-loading-bar" }, "Loading\xE2\u20AC\xA6"), loadError && /* @__PURE__ */ React16.createElement("div", { className: "bb-error-bar" }, "Error: ", loadError), isReadOnly && !loading && /* @__PURE__ */ React16.createElement("div", { className: "bb-readonly-banner" }, /* @__PURE__ */ React16.createElement("span", { className: "bb-readonly-banner__icon" }, "\xF0\u0178\u2018\x81"), /* @__PURE__ */ React16.createElement("span", null, "You are viewing a previous version \xE2\u20AC\u201D read only.", /* @__PURE__ */ React16.createElement(
+    "button",
+    {
+      type: "button",
+      className: "bb-readonly-banner__btn",
+      onClick: handleRestoreVersion
+    },
+    "Switch to latest"
+  ))), /* @__PURE__ */ React16.createElement("div", { className: "bb-main", "data-mobile-panel": mobilePanelTab }, /* @__PURE__ */ React16.createElement(BlockList, null), /* @__PURE__ */ React16.createElement("div", { className: "bb-main__center" }, /* @__PURE__ */ React16.createElement(FieldPalette, null), /* @__PURE__ */ React16.createElement(BuilderCanvas, null)), /* @__PURE__ */ React16.createElement(ConfigPanel, null)), /* @__PURE__ */ React16.createElement("div", { className: "bb-footer" }, /* @__PURE__ */ React16.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowCodePreview((p) => !p),
+      className: `bb-footer__toggle${showCodePreview ? " bb-footer__toggle--open" : ""}`
+    },
+    showCodePreview ? "\xE2\u2013\xBC" : "\xE2\u2013\xB6",
+    " Code Preview"
+  ), showCodePreview && /* @__PURE__ */ React16.createElement("div", { className: "bb-footer__content" }, /* @__PURE__ */ React16.createElement(CodePreview, null))), /* @__PURE__ */ React16.createElement("nav", { className: "bb-mobile-nav", "aria-label": "Panel navigation" }, [
+    { id: "blocks", icon: "\xE2\xAC\xA1", label: "Blocks" },
+    { id: "canvas", icon: "\xE2\u2013\xA6", label: "Canvas" },
+    { id: "palette", icon: "\xEF\xBC\u2039", label: "Fields" },
+    { id: "config", icon: "\xE2\u0161\u2122", label: "Config" }
+  ].map(({ id, icon, label }) => /* @__PURE__ */ React16.createElement(
+    "button",
+    {
+      key: id,
+      type: "button",
+      className: `bb-mobile-nav__tab${mobilePanelTab === id ? " bb-mobile-nav__tab--active" : ""}`,
+      onClick: () => setMobilePanelTab(id)
+    },
+    /* @__PURE__ */ React16.createElement("span", { className: "bb-mobile-nav__icon" }, icon),
+    label
+  ))));
+}
+export {
+  BlockDataField,
+  BuilderShell,
+  EditInBuilderButton,
+  SchemaBuilderField
+};