@bettercms-ai/next 0.10.1 → 0.11.0

package/dist/draft-bridge.js

@@ -0,0 +1,664 @@
+"use client";
+"use client";
+
+// src/draft-bridge.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/blocks.tsx
+import {
+  cloneElement,
+  isValidElement,
+  useState as useState2
+} from "react";
+import { blockStyleToCss } from "@bettercms-ai/types";
+import { componentInstanceAddresses } from "@bettercms-ai/types";
+import { applyOverrides } from "@bettercms-ai/ui/resolve";
+
+// src/form.tsx
+import { useEffect, useMemo, useState } from "react";
+import {
+  submitForm,
+  shouldShowField,
+  formInitialValues,
+  asStringArray,
+  toggleOption
+} from "@bettercms-ai/sdk";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TURNSTILE_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+var INPUT_TYPES = {
+  text: "text",
+  email: "email",
+  phone: "tel",
+  url: "url",
+  number: "number",
+  date: "date"
+};
+function readPrefill() {
+  if (typeof window === "undefined") return {};
+  const out = {};
+  new URLSearchParams(window.location.search).forEach((v, k) => {
+    out[k] = v;
+  });
+  return out;
+}
+function resetTurnstile() {
+  const t = globalThis.turnstile;
+  if (t) {
+    try {
+      t.reset();
+    } catch {
+    }
+  }
+}
+function BcmsForm({
+  form,
+  apiBase,
+  turnstileSiteKey,
+  onSubmitted,
+  className
+}) {
+  const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
+  const [values, setValues] = useState(() => {
+    const init = formInitialValues(form, readPrefill());
+    if (form.honeypotField) init[form.honeypotField] = "";
+    return init;
+  });
+  const [status, setStatus] = useState({ state: "idle" });
+  const [fieldErrors, setFieldErrors] = useState({});
+  useEffect(() => {
+    if (!showTurnstile || document.querySelector(`script[src="${TURNSTILE_SRC}"]`)) return;
+    const script = document.createElement("script");
+    script.src = TURNSTILE_SRC;
+    script.async = true;
+    script.defer = true;
+    document.head.appendChild(script);
+  }, [showTurnstile]);
+  const visibleFields = useMemo(
+    () => form.fields.filter((f) => f.type !== "hidden" && shouldShowField(f, values)),
+    [form.fields, values]
+  );
+  const setValue = (key, value) => setValues((prev) => ({ ...prev, [key]: value }));
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setStatus({ state: "submitting" });
+    setFieldErrors({});
+    const tokenEl = e.currentTarget.querySelector(
+      '[name="cf-turnstile-response"]'
+    );
+    const turnstileToken = tokenEl?.value || void 0;
+    const data = {};
+    for (const field of form.fields) {
+      if (field.type === "hidden" || shouldShowField(field, values)) {
+        data[field.key] = values[field.key];
+      }
+    }
+    if (form.honeypotField) data[form.honeypotField] = values[form.honeypotField] ?? "";
+    try {
+      const { id } = await submitForm({ formId: form.id, data, turnstileToken, baseUrl: apiBase });
+      onSubmitted?.(id);
+      if (form.redirectUrl) {
+        window.location.href = form.redirectUrl;
+        return;
+      }
+      const reset = formInitialValues(form);
+      if (form.honeypotField) reset[form.honeypotField] = "";
+      setValues(reset);
+      setStatus({
+        state: "success",
+        message: form.successMessage ?? "Thanks! Your submission was received."
+      });
+      resetTurnstile();
+    } catch (err) {
+      const e2 = err;
+      if (e2.fieldErrors) setFieldErrors(e2.fieldErrors);
+      setStatus({ state: "error", message: e2.message || "Something went wrong. Please try again." });
+      resetTurnstile();
+    }
+  }
+  return (
+    // `data-bcms-form` carries the id so the Visual Editor can find THIS form in the
+    // preview frame and patch its copy live. Valued rather than bare: the runtime
+    // selectors are `form[data-bcms-form]`, which a valued attribute still matches.
+    /* @__PURE__ */ jsxs("form", { className, onSubmit: handleSubmit, noValidate: true, "data-bcms-form": form.id, children: [
+      visibleFields.map((field) => /* @__PURE__ */ jsx(
+        Field,
+        {
+          field,
+          value: values[field.key],
+          error: fieldErrors[field.key],
+          onChange: (v) => setValue(field.key, v)
+        },
+        field.key
+      )),
+      form.honeypotField ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { position: "absolute", left: "-9999px" }, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          name: form.honeypotField,
+          tabIndex: -1,
+          autoComplete: "off",
+          value: String(values[form.honeypotField] ?? ""),
+          onChange: (e) => setValue(form.honeypotField, e.target.value)
+        }
+      ) }) : null,
+      showTurnstile ? /* @__PURE__ */ jsx("div", { className: "cf-turnstile", "data-sitekey": turnstileSiteKey }) : null,
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: status.state === "submitting", "data-bcms-form-part": "submit", children: status.state === "submitting" ? "Submitting\u2026" : form.submitLabel ?? "Submit" }),
+      status.message ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: `bcms-form-status bcms-form-status--${status.state}`,
+          role: "status",
+          "aria-live": "polite",
+          children: status.message
+        }
+      ) : null
+    ] })
+  );
+}
+function Field({ field, value, error, onChange }) {
+  const required = field.required;
+  const errorNode = error ? /* @__PURE__ */ jsx("span", { className: "bcms-field-error", role: "alert", children: error }) : null;
+  const helpNode = field.helpText ? /* @__PURE__ */ jsx("span", { className: "bcms-field-help", "data-bcms-form-part": "help", children: field.helpText }) : null;
+  if (field.type === "checkbox" || field.type === "consent") {
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "bcms-field bcms-field--checkbox",
+        "data-field": field.key,
+        "data-bcms-form-field": field.key,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              name: field.key,
+              required,
+              checked: Boolean(value),
+              onChange: (e) => onChange(e.target.checked)
+            }
+          ),
+          " ",
+          /* @__PURE__ */ jsxs("span", { "data-bcms-form-part": "label", children: [
+            field.label,
+            required ? " *" : ""
+          ] }),
+          helpNode,
+          errorNode
+        ]
+      }
+    );
+  }
+  if (field.type === "radio" || field.type === "checkboxes") {
+    const multi = field.type === "checkboxes";
+    const selected = asStringArray(value);
+    return /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        className: `bcms-field bcms-field--${multi ? "checkboxes" : "radio"}`,
+        "data-field": field.key,
+        "data-bcms-form-field": field.key,
+        children: [
+          /* @__PURE__ */ jsxs("legend", { "data-bcms-form-part": "label", children: [
+            field.label,
+            required ? " *" : ""
+          ] }),
+          (field.options ?? []).map((opt) => /* @__PURE__ */ jsxs("label", { className: "bcms-option", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: multi ? "checkbox" : "radio",
+                name: field.key,
+                value: opt,
+                required: !multi && required,
+                checked: multi ? selected.includes(opt) : value === opt,
+                onChange: (e) => onChange(multi ? toggleOption(value, opt, e.target.checked) : opt)
+              }
+            ),
+            " ",
+            /* @__PURE__ */ jsx("span", { "data-bcms-form-part": "option", children: opt })
+          ] }, opt)),
+          helpNode,
+          errorNode
+        ]
+      }
+    );
+  }
+  const str = String(value ?? "");
+  let control;
+  if (field.type === "textarea") {
+    control = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        name: field.key,
+        placeholder: field.placeholder,
+        required,
+        value: str,
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  } else if (field.type === "select") {
+    control = /* @__PURE__ */ jsxs("select", { name: field.key, required, value: str, onChange: (e) => onChange(e.target.value), children: [
+      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Choose\u2026" }),
+      (field.options ?? []).map((opt) => /* @__PURE__ */ jsx("option", { value: opt, "data-bcms-form-part": "option", children: opt }, opt))
+    ] });
+  } else {
+    control = /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: INPUT_TYPES[field.type] ?? "text",
+        name: field.key,
+        placeholder: field.placeholder,
+        required,
+        value: str,
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("p", { className: "bcms-field", "data-field": field.key, "data-bcms-form-field": field.key, children: [
+    /* @__PURE__ */ jsxs("label", { "data-bcms-form-part": "label", children: [
+      field.label,
+      required ? " *" : ""
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    control,
+    helpNode,
+    errorNode
+  ] });
+}
+
+// src/bindings.ts
+import { formatPropsAttribute } from "@bettercms-ai/types";
+function addressFor(id, prop, ctx) {
+  if (!id) return null;
+  const key = `${id}__${prop}`;
+  if (ctx.fieldAddresses) return ctx.fieldAddresses.get(key) ?? null;
+  return key;
+}
+function bind(id, prop, kind, ctx) {
+  const address = addressFor(id, prop, ctx);
+  return address ? { "data-bcms-field": address, "data-bcms-kind": kind } : {};
+}
+function bindProps(id, entries, ctx) {
+  const resolved = entries.flatMap(({ prop, kind, attr, present }) => {
+    if (!present) return [];
+    const address = addressFor(id, prop, ctx);
+    return address ? [{ address, kind, attr }] : [];
+  });
+  return resolved.length ? { "data-bcms-props": formatPropsAttribute(resolved) } : {};
+}
+
+// src/blocks.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MAX_COMPONENT_DEPTH = 10;
+function BcmsBlocks({
+  blocks,
+  forms,
+  components,
+  turnstileSiteKey,
+  apiBase,
+  className
+}) {
+  const formsById = new Map((forms ?? []).map((f) => [f.id, f]));
+  const componentsById = new Map((components ?? []).map((cmp) => [cmp.id, cmp]));
+  const ctx = { formsById, componentsById, turnstileSiteKey, apiBase, depth: 0, seen: /* @__PURE__ */ new Set() };
+  return (
+    /**
+     * 🔴 `data-bcms-page` marks THIS SUBTREE as ours to edit — the SDK's equivalent of the hosted
+     * renderer's `<main class="bcms-page">` (render-page.ts).
+     *
+     * The Visual Editor decides whether to show section controls by asking the page what it is.
+     * Its only test was that hosted wrapper, which an SDK-rendered site never has — so every
+     * headless site was treated as "not ours", and move/duplicate/delete/reorder stayed hidden
+     * on pages that fully support them. Measured on a live SDK site: 34 blocks rendered,
+     * 0 recognised.
+     *
+     * It must sit on the CONTAINER rather than be inferred from the blocks, so that a page with
+     * NO blocks yet is still recognised — otherwise there is no way to add the first section,
+     * which is exactly the state a new page starts in.
+     */
+    /* @__PURE__ */ jsx2("div", { className, "data-bcms-page": "", children: blocks.map((block) => tagTopLevel(block, renderBlock(block, ctx))) })
+  );
+}
+function tagTopLevel(block, node) {
+  if (!isValidElement(node)) return node;
+  return cloneElement(node, {
+    "data-bcms-block": block.id
+  });
+}
+function renderBlock(block, ctx) {
+  const node = renderBlockInner(block, ctx);
+  const style = blockStyleToCss(block.style);
+  if (!style || node == null) return node;
+  return /* @__PURE__ */ jsx2("div", { style, children: node }, block.id);
+}
+function renderBlockInner(block, ctx) {
+  switch (block.type) {
+    case "heading":
+      return renderHeading(block, ctx);
+    // `richtext` and `text` carry the same payload and differ only in the authoring surface,
+    // so delivery renders them identically — Astro (BcmsBlocks.astro) and the hosted renderer
+    // (render-page.ts) both alias them. Next did not, so `richtext` fell to `default: null`
+    // and a richtext block rendered NOTHING on a Next site: 200 OK, green build, blank region.
+    case "text":
+    case "richtext":
+      return renderText(block, ctx);
+    case "image":
+      return renderImage(block, ctx);
+    case "button":
+      return renderButton(block, ctx);
+    case "spacer":
+      return renderSpacer(block);
+    case "video":
+      return renderVideo(block, ctx);
+    case "columns":
+      return renderColumns(block, ctx);
+    case "form":
+      return renderForm(block, ctx);
+    case "section":
+      return renderSection(block, ctx);
+    case "navbar":
+      return renderNavbar(block, ctx);
+    case "footer":
+      return renderFooter(block, ctx);
+    case "slider":
+      return /* @__PURE__ */ jsx2(BcmsSlider, { block, ctx }, block.id);
+    case "tabs":
+      return /* @__PURE__ */ jsx2(BcmsTabs, { block, ctx }, block.id);
+    case "component":
+      return renderComponent(block, ctx);
+    default:
+      return renderUnhandledBlock(block);
+  }
+}
+function renderHeading({ id, props }, ctx) {
+  const Tag = `h${props.level ?? 2}`;
+  return /* @__PURE__ */ jsx2(Tag, { className: "bcms-block bcms-block--heading", ...bind(id, "text", "text", ctx), children: props.text }, id);
+}
+function renderText({ id, props }, ctx) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "bcms-block bcms-block--text",
+      ...bind(id, "html", "richtext", ctx),
+      dangerouslySetInnerHTML: { __html: props.html }
+    },
+    id
+  );
+}
+function renderImage({ id, props }, ctx) {
+  const img = /* @__PURE__ */ jsx2(
+    "img",
+    {
+      src: props.src,
+      alt: props.alt,
+      width: props.width,
+      height: props.height,
+      loading: "lazy",
+      ...bind(id, "src", "image", ctx),
+      ...bindProps(id, [{ prop: "alt", kind: "text", attr: "alt", present: props.alt != null }], ctx)
+    }
+  );
+  if (!props.caption) {
+    return /* @__PURE__ */ jsx2("figure", { className: "bcms-block bcms-block--image", children: img }, id);
+  }
+  return /* @__PURE__ */ jsxs2("figure", { className: "bcms-block bcms-block--image", children: [
+    img,
+    /* @__PURE__ */ jsx2("figcaption", { ...bind(id, "caption", "text", ctx), children: props.caption })
+  ] }, id);
+}
+function renderButton({ id, props }, ctx) {
+  return /* @__PURE__ */ jsx2(
+    "a",
+    {
+      href: props.href,
+      className: `bcms-block bcms-block--button bcms-button--${props.variant ?? "primary"}`,
+      ...bind(id, "text", "text", ctx),
+      ...bindProps(id, [{ prop: "href", kind: "url", attr: "href", present: props.href != null }], ctx),
+      children: props.text
+    },
+    id
+  );
+}
+function renderSpacer({ id, props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "bcms-block bcms-block--spacer",
+      style: { height: props.height },
+      "aria-hidden": "true"
+    },
+    id
+  );
+}
+function renderVideo({ id, props }, ctx) {
+  return /* @__PURE__ */ jsx2(
+    "video",
+    {
+      className: "bcms-block bcms-block--video",
+      src: props.url,
+      poster: props.poster,
+      ...bindProps(
+        id,
+        [
+          { prop: "url", kind: "url", attr: "src", present: props.url != null },
+          { prop: "poster", kind: "url", attr: "poster", present: props.poster != null }
+        ],
+        ctx
+      ),
+      autoPlay: props.autoplay,
+      loop: props.loop,
+      controls: true
+    },
+    id
+  );
+}
+function renderColumns({ id, props }, ctx) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "bcms-block bcms-block--columns",
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${props.columns.length || 1}, 1fr)`,
+        gap: props.gap
+      },
+      children: props.columns.map((column, i) => /* @__PURE__ */ jsx2("div", { className: "bcms-column", children: column.map((child) => renderBlock(child, ctx)) }, i))
+    },
+    id
+  );
+}
+function renderForm({ id, props }, ctx) {
+  const form = ctx.formsById.get(props.formId);
+  if (!form) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "bcms-block bcms-block--form", children: /* @__PURE__ */ jsx2(BcmsForm, { form, turnstileSiteKey: ctx.turnstileSiteKey, apiBase: ctx.apiBase }) }, id);
+}
+function renderSection({ id, props }, ctx) {
+  const inner = props.children.map((child) => renderBlock(child, ctx));
+  return /* @__PURE__ */ jsx2(
+    "section",
+    {
+      className: "bcms-block bcms-block--section",
+      style: { background: props.background, padding: props.paddingY != null ? `${props.paddingY}px 0` : void 0 },
+      children: props.maxWidth ? /* @__PURE__ */ jsx2("div", { className: "bcms-section-inner", style: { maxWidth: props.maxWidth, margin: "0 auto" }, children: inner }) : inner
+    },
+    id
+  );
+}
+function renderNavbar({ id, props }, ctx) {
+  return /* @__PURE__ */ jsxs2("nav", { className: "bcms-block bcms-block--navbar", children: [
+    props.logo?.src ? /* @__PURE__ */ jsx2("a", { className: "bcms-navbar-logo", href: props.logo.href ?? "/", children: /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: props.logo.src,
+        alt: props.logo.alt,
+        ...bind(id, "logo.src", "image", ctx),
+        ...bindProps(id, [{ prop: "logo.alt", kind: "text", attr: "alt", present: props.logo.alt != null }], ctx)
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx2("div", { className: "bcms-navbar-links", children: props.links.map((l, i) => /* @__PURE__ */ jsx2(
+      "a",
+      {
+        href: l.href,
+        ...bind(id, `links[${i}].label`, "text", ctx),
+        ...bindProps(id, [{ prop: `links[${i}].href`, kind: "url", attr: "href", present: l.href != null }], ctx),
+        children: l.label
+      },
+      i
+    )) }),
+    props.cta ? /* @__PURE__ */ jsx2(
+      "a",
+      {
+        className: "bcms-button bcms-button--primary",
+        href: props.cta.href,
+        ...bind(id, "cta.text", "text", ctx),
+        ...bindProps(id, [{ prop: "cta.href", kind: "url", attr: "href", present: props.cta.href != null }], ctx),
+        children: props.cta.text
+      }
+    ) : null
+  ] }, id);
+}
+function renderFooter({ id, props }, ctx) {
+  return /* @__PURE__ */ jsxs2("footer", { className: "bcms-block bcms-block--footer", children: [
+    /* @__PURE__ */ jsx2("div", { className: "bcms-footer-cols", children: props.columns.map((col, i) => /* @__PURE__ */ jsxs2("div", { className: "bcms-footer-col", children: [
+      col.heading ? /* @__PURE__ */ jsx2("h4", { ...bind(id, `columns[${i}].heading`, "text", ctx), children: col.heading }) : null,
+      /* @__PURE__ */ jsx2("ul", { children: col.links.map((l, j) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+        "a",
+        {
+          href: l.href,
+          ...bind(id, `columns[${i}].links[${j}].label`, "text", ctx),
+          ...bindProps(
+            id,
+            [{ prop: `columns[${i}].links[${j}].href`, kind: "url", attr: "href", present: l.href != null }],
+            ctx
+          ),
+          children: l.label
+        }
+      ) }, j)) })
+    ] }, i)) }),
+    props.copyright ? /* @__PURE__ */ jsx2("p", { className: "bcms-footer-copy", ...bind(id, "copyright", "text", ctx), children: props.copyright }) : null
+  ] }, id);
+}
+function BcmsSlider({ block, ctx, ...rest }) {
+  const { slides } = block.props;
+  const [i, setI] = useState2(0);
+  const go = (n) => setI((n + slides.length) % (slides.length || 1));
+  return /* @__PURE__ */ jsxs2("div", { className: "bcms-block bcms-block--slider", style: { position: "relative" }, ...rest, children: [
+    slides.map((s, idx) => /* @__PURE__ */ jsx2("div", { className: "bcms-slide", hidden: idx !== i, children: s.children.map((child) => renderBlock(child, ctx)) }, s.id)),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "bcms-slider-prev", "aria-label": "Previous", onClick: () => go(i - 1), children: "\u2039" }),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "bcms-slider-next", "aria-label": "Next", onClick: () => go(i + 1), children: "\u203A" })
+  ] });
+}
+function BcmsTabs({ block, ctx, ...rest }) {
+  const { tabs } = block.props;
+  const [active, setActive] = useState2(0);
+  return /* @__PURE__ */ jsxs2("div", { className: "bcms-block bcms-block--tabs", ...rest, children: [
+    /* @__PURE__ */ jsx2("div", { className: "bcms-tablist", role: "tablist", children: tabs.map((t, idx) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        role: "tab",
+        type: "button",
+        className: "bcms-tab",
+        "aria-selected": idx === active,
+        onClick: () => setActive(idx),
+        ...bind(block.id, `tabs[${idx}].label`, "text", ctx),
+        children: t.label
+      },
+      t.id
+    )) }),
+    tabs.map((t, idx) => /* @__PURE__ */ jsx2("div", { role: "tabpanel", className: "bcms-tabpanel", hidden: idx !== active, children: t.children.map((child) => renderBlock(child, ctx)) }, t.id))
+  ] });
+}
+var warnedMissing = /* @__PURE__ */ new Set();
+function renderComponent({ id, props }, ctx) {
+  const def = ctx.componentsById.get(props.componentId);
+  if (!def) return renderMissingComponent(props.componentId, ctx);
+  if (ctx.depth >= MAX_COMPONENT_DEPTH || ctx.seen.has(def.id)) return null;
+  const resolved = applyOverrides(def.blockJson, def.props ?? [], props.overrides ?? {});
+  const childCtx = {
+    ...ctx,
+    depth: ctx.depth + 1,
+    seen: /* @__PURE__ */ new Set([...ctx.seen, def.id]),
+    fieldAddresses: componentInstanceAddresses(id, def.props)
+  };
+  return /* @__PURE__ */ jsx2("div", { className: "bcms-block bcms-block--component", children: resolved.map((child) => renderBlock(child, childCtx)) }, id);
+}
+var warnedUnhandled = /* @__PURE__ */ new Set();
+function renderUnhandledBlock(block) {
+  if (!warnedUnhandled.has(block.type)) {
+    warnedUnhandled.add(block.type);
+    console.warn(
+      `[BcmsBlocks] block type "${block.type}" has no renderer here, so it rendered NOTHING. The hosted renderer draws it; this SDK does not yet.`
+    );
+  }
+  return null;
+}
+function renderMissingComponent(componentId, ctx) {
+  if (!warnedMissing.has(componentId)) {
+    warnedMissing.add(componentId);
+    console.warn(
+      `[BcmsBlocks] component "${componentId}" was not delivered, so this section rendered NOTHING.` + (ctx.componentsById.size === 0 ? ` No components were passed at all \u2014 add components={readComponents()} to <BcmsBlocks>.` : ` ${ctx.componentsById.size} component(s) were passed but none match. It is probably still a DRAFT: publish it, then rebuild.`)
+    );
+  }
+  if (process.env.NODE_ENV === "production") return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "bcms-block bcms-block--component-missing",
+      "data-bcms-missing-component": componentId,
+      style: {
+        padding: "12px 16px",
+        border: "1px dashed #d4d4d8",
+        borderRadius: 8,
+        color: "#71717a",
+        font: "500 13px/1.5 system-ui, -apple-system, sans-serif"
+      },
+      children: [
+        "Section ",
+        /* @__PURE__ */ jsx2("code", { children: componentId }),
+        " was not delivered.",
+        " ",
+        ctx.componentsById.size === 0 ? "Pass components={readComponents()} to <BcmsBlocks>." : "Publish the component, then rebuild."
+      ]
+    }
+  );
+}
+
+// src/draft-bridge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function BcmsDraftBridge({
+  slug,
+  blocks,
+  components,
+  ...rest
+}) {
+  const [doc, setDoc] = useState3({ blocks, components });
+  useEffect2(() => {
+    if (window.parent === window) return;
+    let handshaken = false;
+    const onMessage = (e) => {
+      if (e.origin !== window.location.origin) return;
+      if (e.source !== window.parent) return;
+      const d = e.data;
+      if (!d || typeof d !== "object") return;
+      if (d.type === "bcms:bridge-init") {
+        handshaken = true;
+        window.parent.postMessage({ type: "bcms:bridge-ready", slug }, e.origin);
+        return;
+      }
+      if (!handshaken) return;
+      if (d.type === "bcms:draft-doc" && d.slug === slug && Array.isArray(d.blocks)) {
+        setDoc({
+          blocks: d.blocks,
+          components: Array.isArray(d.components) ? d.components : components
+        });
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [slug, components]);
+  return /* @__PURE__ */ jsx3(BcmsBlocks, { blocks: doc.blocks, components: doc.components, ...rest });
+}
+export {
+  BcmsDraftBridge
+};
+//# sourceMappingURL=draft-bridge.js.map