@bettercms-ai/ui 0.16.0 → 0.17.1

package/dist/index.js

@@ -29,1061 +29,1205 @@ function Heading({
 }
 
 // src/blocks/portableText.tsx
-import React from "react";
+import React6 from "react";
 import { PortableText as PT } from "@portabletext/react";
 
-// ../richtext/src/types.ts
-var PT_TYPES = {
-  /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
-  block: "bcmsBlock",
-  /** An inline mention. A PT inline object is natively void, which is what Lexical's `token` mode was faking. */
-  mention: "bcmsMention",
-  divider: "bcmsDivider",
-  code: "bcmsCode",
-  /**
-   * A video — an uploaded file or a provider URL. DEDICATED rather than another `schemaKey` on
-   * the generic block, because a video is the one media node whose rendition depends on its own
-   * payload: the same field is a `<video>` for an mp4 and a provider `<iframe>` for a YouTube
-   * link (@see resolveVideoSource). The generic block carries a reference this package cannot
-   * resolve; a video carries a URL it can.
-   */
-  video: "video",
-  /** A downloadable document — a PDF, a spec sheet. `<a href download>`, nothing more. */
-  file: "file",
-  /**
-   * A table. Spelled `table`, unprefixed, because that is what every other Portable Text
-   * producer calls one — the Sanity-shaped `{_type:"table", rows}` this platform used to refuse
-   * as foreign content now lands on OUR type and renders, rather than being data nothing draws.
-   */
-  table: "table",
-  /** The annotation carrying a hyperlink's `href`. Spelled `link` because that is the spec's convention. */
-  link: "link",
-  /**
-   * The annotation carrying a site's OWN inline markup — `<span class>`, `<small>`, `<time
-   * datetime>`. Unprefixed, like `table`, because it describes HTML rather than a BetterCMS
-   * concept. See `styled.ts` for what it may hold and why the list is that short.
-   */
-  styled: "styled"
-};
-var BUILTIN_TABLE_KEY = "builtin:table";
-var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
-  "block",
-  PT_TYPES.block,
-  PT_TYPES.table,
-  PT_TYPES.code,
-  PT_TYPES.divider,
-  PT_TYPES.mention,
-  PT_TYPES.video,
-  PT_TYPES.file
-]);
+// src/renderer.tsx
+import { RESPONSIVE_CSS, hiddenEverywhere, hideOnAttr, splitButtonStyle, usesHideOn, visibleBlocks, windowState } from "@bettercms-ai/types";
 
-// ../richtext/src/styled.ts
-var STYLED_TAGS = [
-  "span",
-  "small",
-  "sup",
-  "sub",
-  "kbd",
-  "abbr",
-  "time",
-  "strong",
-  "b",
-  "em",
-  "i",
-  "u",
-  "s",
-  "mark",
-  "code",
-  "q",
-  "cite",
-  "dfn",
-  "var",
-  "samp",
-  "ins",
-  "del"
-];
-var TAG_SET = new Set(STYLED_TAGS);
-var isStyledTag = (tag) => typeof tag === "string" && TAG_SET.has(tag);
-var ATTR_NAMES = /* @__PURE__ */ new Set(["title", "datetime", "style", "aria-label"]);
-var DATA_ATTR = /^data-[a-z][a-z0-9-]*$/;
-var isStyledAttr = (name) => ATTR_NAMES.has(name) || DATA_ATTR.test(name) && !name.startsWith("data-bcms-");
-var STYLE_PROPS = /* @__PURE__ */ new Set([
-  "color",
-  "background-color",
-  "opacity",
-  "font",
-  "font-family",
-  "font-size",
-  "font-style",
-  "font-weight",
-  "font-variant",
-  "font-feature-settings",
-  "font-variation-settings",
-  "letter-spacing",
-  "line-height",
-  "word-spacing",
-  "white-space",
-  "word-break",
-  "text-align",
-  "text-decoration",
-  "text-decoration-color",
-  "text-decoration-line",
-  "text-decoration-style",
-  "text-transform",
-  "text-underline-offset",
-  "vertical-align"
-]);
-var STYLE_VALUE_BAN = /url\(|expression\(|@import|\\|\/\*|[<>]/i;
-function safeStyle(css) {
-  const kept = [];
-  for (const declaration of css.split(";")) {
-    const at = declaration.indexOf(":");
-    if (at < 0) continue;
-    const name = declaration.slice(0, at).trim().toLowerCase();
-    const value = declaration.slice(at + 1).trim();
-    if (!name || !value) continue;
-    if (!name.startsWith("--") && !STYLE_PROPS.has(name)) continue;
-    if (STYLE_VALUE_BAN.test(value)) continue;
-    kept.push(`${name}:${value}`);
-  }
-  return kept.length ? kept.join(";") : void 0;
-}
-function styledAttrEntries(attrs) {
-  if (!attrs || typeof attrs !== "object" || Array.isArray(attrs)) return [];
-  const out = [];
-  for (const [name, raw] of Object.entries(attrs)) {
-    if (!isStyledAttr(name) || typeof raw !== "string") continue;
-    const value = name === "style" ? safeStyle(raw) : raw;
-    if (value === void 0) continue;
-    out.push([name, value]);
-  }
-  return out;
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
 }
 
-// ../richtext/src/href.ts
-var SAFE_HREF_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
-function safeHref(raw) {
-  const trimmed = raw.trim();
-  if (trimmed.startsWith("#")) return /^#[^\s<>"'`]*$/.test(trimmed) ? trimmed : null;
-  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) return trimmed;
-  try {
-    return SAFE_HREF_SCHEMES.includes(new URL(trimmed).protocol) ? trimmed : null;
-  } catch {
-    return null;
-  }
+// src/blocks/Image.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Image({
+  src,
+  alt,
+  width,
+  height,
+  caption,
+  className = "",
+  sizes,
+  "data-bcms-field": field,
+  "data-bcms-kind": kind
+}) {
+  const sized = typeof width === "number" && width > 0;
+  return /* @__PURE__ */ jsxs("figure", { className: cn(sized ? "max-w-full" : "w-full", className), children: [
+    /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src,
+        alt,
+        width,
+        height,
+        sizes,
+        "data-bcms-field": field,
+        "data-bcms-kind": kind,
+        style: sized ? { width: `${width}px`, maxWidth: "100%", height: "auto" } : void 0,
+        className: cn(!sized && "w-full", "h-auto rounded-md object-cover"),
+        loading: "lazy"
+      }
+    ),
+    caption && /* @__PURE__ */ jsx2("figcaption", { className: "mt-2 text-sm text-muted-foreground text-center italic", children: caption })
+  ] });
 }
 
-// ../richtext/src/key.ts
-var ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-var KEY_PATTERN = /^[A-Za-z0-9-]{1,32}$/;
-var isValidKey = (k) => typeof k === "string" && KEY_PATTERN.test(k);
-function randomKey(length = 12) {
-  let out = "";
-  for (let i = 0; i < length; i += 1) {
-    out += ALPHABET[Math.floor(Math.random() * ALPHABET.length)];
-  }
-  return out;
-}
-function deterministicKeys(prefix = "k") {
-  let n = 0;
-  return () => {
-    n += 1;
-    return `${prefix}${n}`;
+// src/blocks/Button.tsx
+import { LINK_RELS, buttonIconOf, buttonIconSvg, buttonVariantOf, isScriptHref } from "@bettercms-ai/types";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Button({
+  text,
+  href,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  arrow = false,
+  icon: iconProp,
+  newTab = false,
+  rel,
+  action,
+  align = "left",
+  className = "",
+  style,
+  "data-bcms-field": field,
+  "data-bcms-kind": kind
+}) {
+  const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+  const variantStyles = {
+    primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+    tertiary: "bg-transparent text-primary hover:bg-primary/10",
+    brand: "bg-accent text-accent-foreground shadow hover:bg-accent/90",
+    dark: "bg-foreground text-background shadow hover:bg-foreground/90",
+    light: "border bg-background text-foreground shadow-sm hover:bg-muted",
+    outline: "border border-current bg-transparent text-primary hover:bg-primary/10",
+    link: "h-auto bg-transparent p-0 text-primary underline underline-offset-4"
+  };
+  const icon = buttonIconOf(iconProp);
+  const alignClass = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  }[align];
+  const sizeStyles = {
+    sm: "px-3 py-1.5 text-xs",
+    md: "px-4 py-2",
+    lg: "px-6 py-3 text-base"
   };
+  const sizeClass = size === "sm" || size === "lg" ? sizeStyles[size] : sizeStyles.md;
+  const fullClass = fullWidth === true ? "flex w-full justify-center" : "";
+  const relTokens = [...newTab === true ? ["noopener", "noreferrer"] : [], ...LINK_RELS.includes(rel) ? [rel] : []];
+  if (action === "code") {
+    return /* @__PURE__ */ jsxs2("button", { type: "button", "data-bcms-field": field, "data-bcms-kind": kind, style, className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className), children: [
+      icon && /* @__PURE__ */ jsx3("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
+      text,
+      arrow === true && /* @__PURE__ */ jsx3("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      href: typeof href === "string" && isScriptHref(href) ? "#" : href,
+      ...newTab === true ? { target: "_blank" } : {},
+      ...relTokens.length ? { rel: relTokens.join(" ") } : {},
+      "data-bcms-field": field,
+      "data-bcms-kind": kind,
+      style,
+      className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className),
+      children: [
+        icon && /* @__PURE__ */ jsx3("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
+        text,
+        arrow === true && /* @__PURE__ */ jsx3("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
+      ]
+    }
+  );
 }
 
-// ../richtext/src/table.ts
-var isRecord = (v) => !!v && typeof v === "object" && !Array.isArray(v);
-var isPortableTextTable = (n) => isRecord(n) && n._type === PT_TYPES.table && Array.isArray(n.rows);
-var isBuiltInTableBlock = (n) => isRecord(n) && n._type === PT_TYPES.block && n.schemaKey === BUILTIN_TABLE_KEY;
-var asIs = (v) => Array.isArray(v) ? v : [];
-function keyMinter(base, reserved) {
-  const prefix = (base.match(/[A-Za-z0-9-]/g) ?? []).join("").slice(0, 16) || "t";
-  return (...parts) => {
-    const candidate = `${prefix}-${parts.join("")}`.slice(0, 30);
-    let key = candidate;
-    for (let n = 1; reserved.has(key); n += 1) key = `${candidate}-${n}`;
-    reserved.add(key);
-    return key;
-  };
+// src/blocks/Spacer.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Spacer({ height = 32, className = "" }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: `w-full border border-dashed border-muted-foreground/20 rounded flex items-center justify-center ${className}`,
+      style: { height: `${height}px` },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxs3("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
+        height,
+        "px"
+      ] })
+    }
+  );
 }
-function reservedKeys(rows) {
-  const out = /* @__PURE__ */ new Set();
-  for (const row of rows) {
-    if (!isRecord(row)) continue;
-    if (isValidKey(row._key)) out.add(row._key);
-    for (const cell of Array.isArray(row.cells) ? row.cells : []) {
-      if (isRecord(cell) && isValidKey(cell._key)) out.add(cell._key);
+
+// src/blocks/Columns.tsx
+import "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Columns({
+  columns,
+  gap = 16,
+  className = "",
+  renderBlock
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn("grid w-full", className),
+      style: {
+        gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`,
+        gap: `${gap}px`
+      },
+      children: columns.map((columnBlocks, colIndex) => /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-4 min-w-0", children: columnBlocks.map((block) => /* @__PURE__ */ jsx5("span", { children: renderBlock ? renderBlock(block) : null }, block.id)) }, colIndex))
     }
-  }
-  return out;
+  );
 }
-var textContent = (text, key) => text === "" ? [] : [{
-  _type: "block",
-  _key: key(),
-  style: "normal",
-  markDefs: [],
-  children: [{ _type: "span", _key: key(), text, marks: [] }]
-}];
-var spanOf = (value) => {
-  const n = typeof value === "number" ? value : Number(value);
-  return Number.isInteger(n) && n > 1 ? n : void 0;
-};
-function normalizeCell(raw, at, mint, read) {
-  const [row, col] = at;
-  const key = isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", row, "c", col);
-  const inner = deterministicKeys(`${key}-`);
-  if (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") {
-    return { _key: key, content: textContent(String(raw), inner) };
+
+// src/blocks/Video.tsx
+import { useState } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function getEmbedUrl(url) {
+  const ytMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
+  if (ytMatch) {
+    return {
+      embedUrl: `https://www.youtube.com/embed/${ytMatch[1]}`,
+      provider: "youtube"
+    };
   }
-  if (!isRecord(raw)) return { _key: key, content: [] };
-  const span = spanOf(raw.span ?? raw.colSpan ?? raw.colspan);
-  const rowSpan = spanOf(raw.rowSpan ?? raw.rowspan);
-  return {
-    _key: key,
-    // `text` is the spelling a string matrix uses once its cells have been given objects; it is
-    // read here so a half-migrated value cannot lose its words.
-    content: Array.isArray(raw.content) ? read(raw.content, inner) : textContent(typeof raw.text === "string" ? raw.text : "", inner),
-    ...raw.header === true ? { header: true } : {},
-    ...span === void 0 ? {} : { span },
-    ...rowSpan === void 0 ? {} : { rowSpan }
-  };
-}
-function normalizeRow(raw, at, mint, read) {
-  const cells = Array.isArray(raw) ? raw : isRecord(raw) && Array.isArray(raw.cells) ? raw.cells : [];
-  return {
-    _key: isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", at),
-    cells: cells.map((c, col) => normalizeCell(c, [at, col], mint, read)),
-    ...isRecord(raw) && raw.head === true ? { head: true } : {}
-  };
-}
-function builtInTableToTable(node, key = randomKey) {
-  if (!isBuiltInTableBlock(node)) return null;
-  const fields = node.fields;
-  const raw = isRecord(fields) && Array.isArray(fields.rows) ? fields.rows : [];
-  const hasHeader = isRecord(fields) ? fields.hasHeader !== false : true;
-  const own = node._key;
-  const tableKey = isValidKey(own) ? own : key();
-  const mint = keyMinter(tableKey, reservedKeys(raw));
-  const rows = raw.map((row, i) => {
-    const normalized = normalizeRow(row, i, mint, asIs);
-    if (!(hasHeader && i === 0)) return normalized;
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) {
     return {
-      ...normalized,
-      head: true,
-      cells: normalized.cells.map((c) => ({ ...c, header: true }))
+      embedUrl: `https://player.vimeo.com/video/${vimeoMatch[1]}`,
+      provider: "vimeo"
     };
-  });
-  const width = rows.reduce((max, r) => Math.max(max, r.cells.length), 0);
-  for (const [i, row] of rows.entries()) {
-    while (row.cells.length < width) {
-      row.cells.push({
-        _key: mint("r", i, "c", row.cells.length),
-        content: [],
-        ...row.head === true ? { header: true } : {}
-      });
-    }
   }
-  return { _type: PT_TYPES.table, _key: tableKey, rows, legacy: true };
+  return { embedUrl: url, provider: "unknown" };
 }
-function migrateTable(node, key = randomKey, read = asIs) {
-  const builtIn = builtInTableToTable(node, key);
-  if (builtIn) return builtIn;
-  if (!isPortableTextTable(node)) return null;
-  const rows = node.rows;
-  const tableKey = isValidKey(node._key) ? node._key : key();
-  const mint = keyMinter(tableKey, reservedKeys(rows));
-  return {
-    _type: PT_TYPES.table,
-    _key: tableKey,
-    rows: rows.map((r, i) => normalizeRow(r, i, mint, read)),
-    // Carried through: a migrated table that an author saves back is still the same table, and
-    // dropping the flag on that save would change the page the next time it renders.
-    ...node.legacy === true ? { legacy: true } : {}
-  };
+function Video({
+  url,
+  poster,
+  autoplay = false,
+  loop = false,
+  className = ""
+}) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const { embedUrl, provider } = getEmbedUrl(url);
+  if (provider === "unknown") {
+    return /* @__PURE__ */ jsx6(
+      "video",
+      {
+        src: url,
+        poster,
+        autoPlay: autoplay,
+        loop,
+        controls: true,
+        className,
+        playsInline: true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
+    !isLoaded && poster && // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx6(
+      "img",
+      {
+        src: poster,
+        alt: "Video thumbnail",
+        className: "w-full h-full object-cover absolute inset-0"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "iframe",
+      {
+        src: `${embedUrl}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${autoplay ? 1 : 0}`,
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true,
+        loading: "lazy",
+        onLoad: () => setIsLoaded(true),
+        className: "w-full h-full"
+      }
+    )
+  ] });
 }
 
-// ../richtext/src/read.ts
-var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
-function normalizePortableText(value, key = randomKey) {
-  if (!Array.isArray(value)) return [];
-  return value.flatMap((raw) => {
-    if (!isRecord2(raw) || typeof raw._type !== "string") return [];
-    const table = migrateTable(raw, key, (v, cellKey) => normalizePortableText(v, cellKey));
-    if (table) return [table];
-    const node = { ...raw, _key: isRecord2(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
-    if (node._type === "block") {
-      if (!Array.isArray(node.markDefs)) node.markDefs = [];
-      if (typeof node.style !== "string") node.style = "normal";
-      node.children = (Array.isArray(node.children) ? node.children : []).map((c) => {
-        if (!isRecord2(c)) return c;
-        const child = { ...c, _key: typeof c._key === "string" && c._key ? c._key : key() };
-        if (child._type === "span" && !Array.isArray(child.marks)) child.marks = [];
-        return child;
-      });
+// src/blocks/Section.tsx
+import "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Section({
+  children,
+  background,
+  paddingY,
+  maxWidth,
+  className = "",
+  renderBlock
+}) {
+  const inner = (children ?? []).map((block) => /* @__PURE__ */ jsx7("span", { children: renderBlock ? renderBlock(block) : null }, block.id));
+  return /* @__PURE__ */ jsx7(
+    "section",
+    {
+      className: cn("w-full", className),
+      style: { background, paddingTop: paddingY, paddingBottom: paddingY },
+      children: maxWidth ? /* @__PURE__ */ jsx7("div", { style: { maxWidth, marginInline: "auto" }, children: inner }) : inner
     }
-    return [node];
-  });
+  );
+}
+
+// src/blocks/Navbar.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Navbar({ logo, links, cta, className = "" }) {
+  return /* @__PURE__ */ jsxs5("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
+    logo?.src ? /* @__PURE__ */ jsx8("a", { href: logo.href ?? "/", className: "shrink-0", children: /* @__PURE__ */ jsx8("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : null,
+    /* @__PURE__ */ jsx8("div", { className: "flex flex-1 gap-5", children: (links ?? []).map((l, i) => /* @__PURE__ */ jsx8("a", { href: l.href, className: "text-inherit no-underline", children: l.label }, i)) }),
+    cta ? /* @__PURE__ */ jsx8(
+      "a",
+      {
+        href: cta.href,
+        className: "rounded-lg bg-black px-4 py-2 font-semibold text-white no-underline",
+        children: cta.text
+      }
+    ) : null
+  ] });
 }
-function readStructuredContent(props) {
-  if (!isRecord2(props)) return null;
-  const candidate = props.content ?? props.value;
-  const arr = Array.isArray(candidate) ? candidate : isRecord2(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
-  return arr && arr.length > 0 ? arr : null;
+
+// src/blocks/Footer.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Footer({ columns, copyright, className = "" }) {
+  return /* @__PURE__ */ jsxs6("footer", { className: cn("mt-12 border-t pt-8", className), children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
+      col.heading ? /* @__PURE__ */ jsx9("h4", { className: "mb-2 font-semibold", children: col.heading }) : null,
+      (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx9("a", { href: l.href, className: "text-neutral-500 no-underline", children: l.label }, j))
+    ] }, i)) }),
+    copyright ? /* @__PURE__ */ jsx9("p", { className: "mt-6 text-sm text-neutral-500", children: copyright }) : null
+  ] });
 }
 
-// src/blocks/portableText.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var TOKEN = /^[a-z0-9-]+$/i;
-function styleObject(css) {
-  const out = {};
-  for (const declaration of css.split(";")) {
-    const at = declaration.indexOf(":");
-    if (at < 0) continue;
-    const name = declaration.slice(0, at).trim();
-    const value = declaration.slice(at + 1).trim();
-    if (!name || !value) continue;
-    out[name.startsWith("--") ? name : name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
-  }
-  return out;
+// src/blocks/Slider.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function Slider({ slides, className = "", renderBlock }) {
+  const [i, setI] = useState2(0);
+  const list = slides ?? [];
+  const go = (n) => setI((n + list.length) % (list.length || 1));
+  const btn = "absolute top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border-0 bg-black/50 text-white cursor-pointer";
+  return /* @__PURE__ */ jsxs7("div", { className: cn("relative w-full", className), children: [
+    list.map((s, idx) => /* @__PURE__ */ jsx10("div", { hidden: idx !== i, className: "flex flex-col gap-4", children: (s.children ?? []).map((b) => /* @__PURE__ */ jsx10("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, s.id)),
+    /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": "Previous", onClick: () => go(i - 1), className: cn(btn, "left-2"), children: "\u2039" }),
+    /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": "Next", onClick: () => go(i + 1), className: cn(btn, "right-2"), children: "\u203A" })
+  ] });
 }
-function Bound({
-  base,
-  nodeKey,
-  children
+
+// src/blocks/Tabs.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Tabs({ tabs, className = "", renderBlock }) {
+  const [active, setActive] = useState3(0);
+  const list = tabs ?? [];
+  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx11("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx11(
+      "button",
+      {
+        role: "tab",
+        type: "button",
+        "aria-selected": idx === active,
+        onClick: () => setActive(idx),
+        className: cn(
+          "cursor-pointer border-b-2 border-transparent bg-transparent px-4 py-2",
+          idx === active && "border-black font-semibold"
+        ),
+        children: t.label
+      },
+      t.id
+    )) }),
+    list.map((t, idx) => /* @__PURE__ */ jsx11("div", { role: "tabpanel", hidden: idx !== active, className: "flex flex-col gap-4", children: (t.children ?? []).map((b) => /* @__PURE__ */ jsx11("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, t.id))
+  ] });
+}
+
+// src/blocks/Placeholders.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var box = "rounded border border-dashed border-neutral-300 bg-neutral-50 p-4 text-sm text-neutral-500";
+function ComponentInstance({
+  componentId,
+  className = ""
 }) {
-  if (!base || !nodeKey) return /* @__PURE__ */ jsx2(Fragment, { children });
-  return /* @__PURE__ */ jsx2("div", { "data-bcms-field": `${base}#${nodeKey}`, "data-bcms-kind": "richtext", children });
+  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
+    "Component instance: ",
+    /* @__PURE__ */ jsx12("code", { children: componentId })
+  ] });
 }
-function Table({ value }) {
-  const components = React.useMemo(buildComponents, []);
-  const inline = React.useMemo(
-    () => ({ ...components, block: { normal: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children }) } }),
-    [components]
-  );
-  const rows = Array.isArray(value?.rows) ? value.rows : [];
-  if (rows.length === 0) return null;
-  const cells = (row) => (Array.isArray(row?.cells) ? row.cells : []).map((cell) => {
-    const Tag = cell?.header === true ? "th" : "td";
-    const span = typeof cell?.span === "number" && cell.span > 1 ? cell.span : void 0;
-    const rowSpan = typeof cell?.rowSpan === "number" && cell.rowSpan > 1 ? cell.rowSpan : void 0;
-    const content = Array.isArray(cell?.content) ? cell.content : [];
-    const lone = content.length === 1 && content[0]._type === "block" && content[0].style === "normal" && !content[0].listItem;
-    return /* @__PURE__ */ jsx2(Tag, { ...span ? { colSpan: span } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
-  });
-  const rendered = rows.map((row) => /* @__PURE__ */ jsx2("tr", { children: cells(row) }, row?._key));
-  const headCount = rows.findIndex((r) => r?.head !== true);
-  const head = headCount === -1 ? rows.length : headCount;
-  return /* @__PURE__ */ jsxs("table", { ...value.legacy === true ? { className: "bcms-table" } : {}, children: [
-    head > 0 && /* @__PURE__ */ jsx2("thead", { children: rendered.slice(0, head) }),
-    head < rows.length && /* @__PURE__ */ jsx2("tbody", { children: rendered.slice(head) })
+function FormPlaceholder({ formId, className = "" }) {
+  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
+    "Form: ",
+    /* @__PURE__ */ jsx12("code", { children: formId })
   ] });
 }
-function buildComponents(renderBlock) {
-  return {
-    types: {
-      [PT_TYPES.divider]: () => /* @__PURE__ */ jsx2("hr", {}),
-      [PT_TYPES.table]: ({ value }) => /* @__PURE__ */ jsx2(Table, { value }),
-      [PT_TYPES.code]: ({ value }) => {
-        const v = value;
-        const lang = typeof v.language === "string" && TOKEN.test(v.language) ? v.language : void 0;
-        return /* @__PURE__ */ jsx2("pre", { children: /* @__PURE__ */ jsx2("code", { className: lang ? `language-${lang}` : void 0, children: typeof v.code === "string" ? v.code : "" }) });
-      },
-      /**
-       * A generic embedded block renders as a marker, not as content: its payload references
-       * something (a component, a media id) that has to be RESOLVED against the project, and
-       * this renderer has no project. A marker keeps the node visible and addressable rather
-       * than rendering nothing at all, which is how embedded content used to vanish. A caller
-       * that CAN resolve it passes `renderBlock`.
-       */
-      [PT_TYPES.block]: ({ value }) => {
-        const rendered = renderBlock?.(value);
-        if (rendered !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: rendered });
-        const v = value;
-        const key = typeof v.schemaKey === "string" ? v.schemaKey : "block";
-        return /* @__PURE__ */ jsx2("div", { className: "bcms-block", "data-bcms-schema-key": key });
-      },
-      [PT_TYPES.mention]: ({ value }) => {
-        const v = value;
-        return /* @__PURE__ */ jsx2("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
-      }
-    },
-    marks: {
-      /**
-       * The only attribute this renderer writes from author data. An unsafe href renders the
-       * LABEL rather than deleting it — blocking a link must not lose the words.
-       */
-      [PT_TYPES.link]: ({ value, children }) => {
-        const v = value ?? {};
-        const href = typeof v.href === "string" ? safeHref(v.href) : null;
-        if (!href) return /* @__PURE__ */ jsx2(Fragment, { children });
-        const blank = v.target === "_blank";
-        return /* @__PURE__ */ jsx2("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
-      },
-      /**
-       * The site's own inline markup, rendered as itself — the React half of
-       * `portableTextToHtml`'s `styled` mark, and it has to stay the same shape: Astro and the
-       * editor canvas render through that serialiser while a Next site renders through this
-       * one, and two renderers of one value that disagree is the whole bug class.
-       *
-       * The tag is re-checked against `STYLED_TAGS` and the attribute bag re-filtered, because
-       * a markDef is DATA and arrives from imports, the Management API and AI writes. React
-       * escapes the values it writes; the allowlist is what keeps a `href` or an `onClick` out
-       * of the props entirely. An unrecognised tag renders its CHILDREN — the words are the
-       * author's, the wrapper is only the design.
-       */
-      [PT_TYPES.styled]: ({ value, children }) => {
-        const v = value ?? {};
-        const tag = typeof v.tag === "string" ? v.tag.toLowerCase() : "";
-        if (!isStyledTag(tag)) return /* @__PURE__ */ jsx2(Fragment, { children });
-        const Tag = tag;
-        const className = typeof v.className === "string" && v.className ? v.className : void 0;
-        const attrs = styledAttrEntries(v.attrs);
-        const style = attrs.find(([name]) => name === "style")?.[1];
-        return /* @__PURE__ */ jsx2(
-          Tag,
-          {
-            className,
-            ...Object.fromEntries(attrs.filter(([name]) => name !== "style")),
-            ...style ? { style: styleObject(style) } : {},
-            children
-          }
-        );
-      },
-      highlight: ({ children }) => /* @__PURE__ */ jsx2("mark", { children }),
-      "strike-through": ({ children }) => /* @__PURE__ */ jsx2("s", { children }),
-      /**
-       * A colour mark carries a TOKEN name (`color:brand-accent`), never a baked hex, so the
-       * consuming site styles it and a rebrand does not orphan the content.
-       */
-      color: ({ children, markType }) => {
-        const token = markType.startsWith("color:") ? markType.slice(6) : "";
-        if (!TOKEN.test(token)) return /* @__PURE__ */ jsx2(Fragment, { children });
-        return /* @__PURE__ */ jsx2("span", { className: `bcms-color-${token}`, children });
-      }
-    },
-    /** Unknown marks and types render their children. Never swallow content. */
-    unknownMark: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children }),
-    unknownType: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children: children ?? null }),
-    unknownBlockStyle: ({ children }) => /* @__PURE__ */ jsx2("p", { children })
-  };
+function CollectionPlaceholder({
+  cardComponentId,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
+    "Collection: entries of this page",
+    cardComponentId ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+      " as ",
+      /* @__PURE__ */ jsx12("code", { children: cardComponentId })
+    ] }) : /* @__PURE__ */ jsx12(Fragment, { children: " (default card)" })
+  ] });
+}
+
+// src/registry.ts
+var BLOCK_REGISTRY = {
+  // The entries of the page this block sits on. No preview here by design: the list is
+  // fetched per request by the site renderer, so the builder has nothing to show.
+  collection: {
+    component: CollectionPlaceholder,
+    label: "Collection",
+    icon: "list"
+  },
+  heading: {
+    component: Heading,
+    label: "Heading",
+    icon: "type"
+  },
+  text: {
+    component: Text,
+    label: "Text",
+    icon: "align-left"
+  },
+  // Same payload, same renderer — deliberately. `richtext` differs from `text` only in how
+  // an author EDITS it (a formatting surface vs a plain field); at delivery both are an HTML
+  // string, so duplicating the component would be two things to keep in sync for no gain.
+  richtext: {
+    component: Text,
+    label: "Rich text",
+    icon: "pilcrow"
+  },
+  image: {
+    component: Image,
+    label: "Image",
+    icon: "image"
+  },
+  button: {
+    component: Button,
+    label: "Button",
+    icon: "square"
+  },
+  spacer: {
+    component: Spacer,
+    label: "Spacer",
+    icon: "minus"
+  },
+  columns: {
+    component: Columns,
+    label: "Columns",
+    icon: "columns"
+  },
+  video: {
+    component: Video,
+    label: "Video",
+    icon: "play"
+  },
+  section: {
+    component: Section,
+    label: "Section",
+    icon: "layout"
+  },
+  navbar: {
+    component: Navbar,
+    label: "Navbar",
+    icon: "menu"
+  },
+  footer: {
+    component: Footer,
+    label: "Footer",
+    icon: "panel-bottom"
+  },
+  slider: {
+    component: Slider,
+    label: "Slider",
+    icon: "gallery-horizontal"
+  },
+  tabs: {
+    component: Tabs,
+    label: "Tabs",
+    icon: "folder"
+  },
+  component: {
+    component: ComponentInstance,
+    label: "Component",
+    icon: "component"
+  },
+  form: {
+    component: FormPlaceholder,
+    label: "Form",
+    icon: "clipboard-list"
+  }
+};
+var BLOCK_TYPES = Object.keys(BLOCK_REGISTRY);
+
+// src/blockStyle.ts
+import { blockStyleToCss } from "@bettercms-ai/types";
+function blockStyleToReactStyle(style) {
+  return blockStyleToCss(style);
+}
+
+// src/renderer.tsx
+import "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
+function styleOf(block) {
+  if (block.type !== "button") return { wrapper: blockStyleToReactStyle(block.style), paint: {} };
+  const { placement, paint } = splitButtonStyle(block.style);
+  return { wrapper: blockStyleToReactStyle(placement), paint: paint ? { style: paint } : {} };
 }
-var isListItem = (node) => node._type === "block" && typeof node.listItem === "string" && !!node.listItem;
-function runsOf(blocks) {
-  const runs = [];
-  for (const node of blocks) {
-    const last = runs.at(-1);
-    if (last && isListItem(node) && isListItem(last[0])) last.push(node);
-    else runs.push([node]);
-  }
-  return runs;
+function withHide(block, wrapperStyle, el, stampAt) {
+  const hide = hideOnAttr(block.style);
+  const state = stampAt ? windowState(block, stampAt) : "live";
+  const hidden = !!stampAt && hiddenEverywhere(block);
+  if (!wrapperStyle && !hide && state === "live" && !hidden) return el;
+  return /* @__PURE__ */ jsx13("div", { style: wrapperStyle, ...hide ? { "data-bcms-hide": hide } : {}, ...state === "live" ? {} : { "data-bcms-window": state }, ...hidden ? { "data-bcms-hidden": "all" } : {}, children: el });
 }
-function PortableText({ value, bindingBase, renderBlock }) {
-  const blocks = React.useMemo(() => normalizePortableText(readValue(value)), [value]);
-  const components = React.useMemo(() => buildComponents(renderBlock), [renderBlock]);
-  const listComponents = React.useMemo(() => {
-    if (!bindingBase) return null;
-    const keys = new Set(blocks.map((b) => b._key));
-    return {
-      ...components,
-      listItem: ({ value: item, children }) => keys.has(item._key) ? /* @__PURE__ */ jsx2("li", { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext", children }) : /* @__PURE__ */ jsx2("li", { children })
-    };
-  }, [bindingBase, blocks, components]);
-  if (blocks.length === 0) return null;
-  if (!bindingBase || !listComponents) return /* @__PURE__ */ jsx2(PT, { value: blocks, components });
-  return /* @__PURE__ */ jsx2(Fragment, { children: runsOf(blocks).map(
-    (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx2(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx2(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx2(PT, { value: run, components }) }, run[0]._key)
-  ) });
+function bindingProps(block, annotate) {
+  if (!annotate || !block.id) return {};
+  switch (block.type) {
+    case "heading":
+    case "button":
+      return { "data-bcms-field": `${block.id}__text`, "data-bcms-kind": "text" };
+    case "text":
+    case "richtext":
+      return { "data-bcms-field": `${block.id}__html`, "data-bcms-kind": "richtext" };
+    case "image":
+      return { "data-bcms-field": `${block.id}__src`, "data-bcms-kind": "image" };
+    default:
+      return {};
+  }
 }
-function readValue(value) {
-  if (Array.isArray(value)) return value;
-  if (value && typeof value === "object") {
-    const o = value;
-    if (Array.isArray(o.value)) return o.value;
-    if (Array.isArray(o.content)) return o.content;
+function resolveBlock(block, className, annotate = false, stampAt) {
+  const entry = BLOCK_REGISTRY[block.type];
+  if (!entry) {
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className ?? ""}`,
+        children: [
+          "Unknown block type: ",
+          /* @__PURE__ */ jsx13("code", { children: block.type })
+        ]
+      }
+    );
   }
-  return [];
+  const Component = entry.component;
+  const { wrapper: blockStyle, paint } = styleOf(block);
+  const el = /* @__PURE__ */ jsx13(Component, { ...block.props, ...paint, className, ...bindingProps(block, annotate) });
+  return withHide(block, blockStyle, el, stampAt);
 }
-
-// src/blocks/Text.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Text({
-  html,
-  content,
-  align = "left",
+function BlockRenderer({
+  block,
   className = "",
-  "data-bcms-field": field,
-  "data-bcms-kind": kind
+  renderBlock,
+  annotate = false,
+  stampAt
 }) {
-  const alignClass = {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }[align];
-  const cls = `text-muted-foreground leading-relaxed ${alignClass} ${className}`;
-  const structured = readStructuredContent({ content });
-  return /* @__PURE__ */ jsx3(
-    "div",
+  const entry = BLOCK_REGISTRY[block.type];
+  if (!entry) {
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className}`,
+        children: [
+          "Unknown block type: ",
+          /* @__PURE__ */ jsx13("code", { children: block.type })
+        ]
+      }
+    );
+  }
+  const Component = entry.component;
+  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate, stampAt)) } : {};
+  const { wrapper: blockStyle, paint } = styleOf(block);
+  const el = /* @__PURE__ */ jsx13(
+    Component,
     {
-      className: cls,
-      ...structured ? {} : { "data-bcms-field": field, "data-bcms-kind": kind },
-      children: structured ? /* @__PURE__ */ jsx3(PortableText, { value: structured, bindingBase: field }) : (
-        // eslint-disable-next-line react/no-danger
-        /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: html } })
-      )
+      ...block.props,
+      ...paint,
+      className,
+      ...containerProps,
+      ...bindingProps(block, annotate)
     }
   );
+  return withHide(block, blockStyle, el, stampAt);
+}
+function BlocksRenderer({
+  blocks: all,
+  className = "",
+  renderBlock,
+  annotate = false,
+  now
+}) {
+  const at = now ?? /* @__PURE__ */ new Date();
+  const blocks = annotate ? all : visibleBlocks(all, at);
+  if (blocks.length === 0) return null;
+  return /* @__PURE__ */ jsxs10("div", { className, children: [
+    usesHideOn(blocks) && /* @__PURE__ */ jsx13("style", { dangerouslySetInnerHTML: { __html: RESPONSIVE_CSS } }),
+    blocks.map((block) => /* @__PURE__ */ jsx13(
+      BlockRenderer,
+      {
+        block,
+        renderBlock,
+        annotate,
+        stampAt: annotate ? at : void 0
+      },
+      block.id
+    ))
+  ] });
+}
+
+// ../richtext/src/types.ts
+function pullQuoteHref(link) {
+  if (typeof link === "string") return link.trim();
+  if (link && typeof link === "object" && typeof link.href === "string") {
+    return link.href.trim();
+  }
+  return "";
+}
+var PT_TYPES = {
+  /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
+  block: "bcmsBlock",
+  /** An inline mention. A PT inline object is natively void, which is what Lexical's `token` mode was faking. */
+  mention: "bcmsMention",
+  divider: "bcmsDivider",
+  code: "bcmsCode",
+  /**
+   * A video — an uploaded file or a provider URL. DEDICATED rather than another `schemaKey` on
+   * the generic block, because a video is the one media node whose rendition depends on its own
+   * payload: the same field is a `<video>` for an mp4 and a provider `<iframe>` for a YouTube
+   * link (@see resolveVideoSource). The generic block carries a reference this package cannot
+   * resolve; a video carries a URL it can.
+   */
+  video: "video",
+  /** A downloadable document — a PDF, a spec sheet. `<a href download>`, nothing more. */
+  file: "file",
+  /** A pull quote — see `PortableTextPullQuote`. The V2 kit's `<figure data-rt="pullquote">`. */
+  pullQuote: "pullQuote",
+  /** Key takeaways — see `PortableTextKeyTakeaways`. The V2 kit's `<aside data-rt="takeaways">`. */
+  keyTakeaways: "keyTakeaways",
+  /**
+   * A table. Spelled `table`, unprefixed, because that is what every other Portable Text
+   * producer calls one — the Sanity-shaped `{_type:"table", rows}` this platform used to refuse
+   * as foreign content now lands on OUR type and renders, rather than being data nothing draws.
+   */
+  table: "table",
+  /** The annotation carrying a hyperlink's `href`. Spelled `link` because that is the spec's convention. */
+  link: "link",
+  /**
+   * The annotation carrying a site's OWN inline markup — `<span class>`, `<small>`, `<time
+   * datetime>`. Unprefixed, like `table`, because it describes HTML rather than a BetterCMS
+   * concept. See `styled.ts` for what it may hold and why the list is that short.
+   */
+  styled: "styled"
+};
+var BUILTIN_TABLE_KEY = "builtin:table";
+var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
+  "block",
+  PT_TYPES.block,
+  PT_TYPES.table,
+  PT_TYPES.code,
+  PT_TYPES.divider,
+  PT_TYPES.mention,
+  PT_TYPES.video,
+  PT_TYPES.file,
+  PT_TYPES.pullQuote,
+  PT_TYPES.keyTakeaways
+]);
+var EMBEDDED_COMPONENT_KEY = "component";
+
+// ../richtext/src/styled.ts
+var STYLED_TAGS = [
+  "span",
+  "small",
+  "sup",
+  "sub",
+  "kbd",
+  "abbr",
+  "time",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "mark",
+  "code",
+  "q",
+  "cite",
+  "dfn",
+  "var",
+  "samp",
+  "ins",
+  "del"
+];
+var TAG_SET = new Set(STYLED_TAGS);
+var isStyledTag = (tag) => typeof tag === "string" && TAG_SET.has(tag);
+var ATTR_NAMES = /* @__PURE__ */ new Set(["title", "datetime", "style", "aria-label"]);
+var DATA_ATTR = /^data-[a-z][a-z0-9-]*$/;
+var isStyledAttr = (name) => ATTR_NAMES.has(name) || DATA_ATTR.test(name) && !name.startsWith("data-bcms-");
+var STYLE_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background-color",
+  "opacity",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "font-variant",
+  "font-feature-settings",
+  "font-variation-settings",
+  "letter-spacing",
+  "line-height",
+  "word-spacing",
+  "white-space",
+  "word-break",
+  "text-align",
+  "text-decoration",
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-style",
+  "text-transform",
+  "text-underline-offset",
+  "vertical-align"
+]);
+var STYLE_VALUE_BAN = /url\(|expression\(|@import|\\|\/\*|[<>]/i;
+function safeStyle(css) {
+  const kept = [];
+  for (const declaration of css.split(";")) {
+    const at = declaration.indexOf(":");
+    if (at < 0) continue;
+    const name = declaration.slice(0, at).trim().toLowerCase();
+    const value = declaration.slice(at + 1).trim();
+    if (!name || !value) continue;
+    if (!name.startsWith("--") && !STYLE_PROPS.has(name)) continue;
+    if (STYLE_VALUE_BAN.test(value)) continue;
+    kept.push(`${name}:${value}`);
+  }
+  return kept.length ? kept.join(";") : void 0;
+}
+function styledAttrEntries(attrs) {
+  if (!attrs || typeof attrs !== "object" || Array.isArray(attrs)) return [];
+  const out = [];
+  for (const [name, raw] of Object.entries(attrs)) {
+    if (!isStyledAttr(name) || typeof raw !== "string") continue;
+    const value = name === "style" ? safeStyle(raw) : raw;
+    if (value === void 0) continue;
+    out.push([name, value]);
+  }
+  return out;
 }
 
-// src/lib/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+// ../richtext/src/href.ts
+var SAFE_HREF_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
+function safeHref(raw) {
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("#")) return /^#[^\s<>"'`]*$/.test(trimmed) ? trimmed : null;
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) return trimmed;
+  try {
+    return SAFE_HREF_SCHEMES.includes(new URL(trimmed).protocol) ? trimmed : null;
+  } catch {
+    return null;
+  }
 }
 
-// src/blocks/Image.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function Image({
-  src,
-  alt,
-  width,
-  height,
-  caption,
-  className = "",
-  sizes,
-  "data-bcms-field": field,
-  "data-bcms-kind": kind
-}) {
-  const sized = typeof width === "number" && width > 0;
-  return /* @__PURE__ */ jsxs2("figure", { className: cn(sized ? "max-w-full" : "w-full", className), children: [
-    /* @__PURE__ */ jsx4(
-      "img",
-      {
-        src,
-        alt,
-        width,
-        height,
-        sizes,
-        "data-bcms-field": field,
-        "data-bcms-kind": kind,
-        style: sized ? { width: `${width}px`, maxWidth: "100%", height: "auto" } : void 0,
-        className: cn(!sized && "w-full", "h-auto rounded-md object-cover"),
-        loading: "lazy"
-      }
-    ),
-    caption && /* @__PURE__ */ jsx4("figcaption", { className: "mt-2 text-sm text-muted-foreground text-center italic", children: caption })
-  ] });
+// ../richtext/src/key.ts
+var ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+var KEY_PATTERN = /^[A-Za-z0-9-]{1,32}$/;
+var isValidKey = (k) => typeof k === "string" && KEY_PATTERN.test(k);
+function randomKey(length = 12) {
+  let out = "";
+  for (let i = 0; i < length; i += 1) {
+    out += ALPHABET[Math.floor(Math.random() * ALPHABET.length)];
+  }
+  return out;
 }
-
-// src/blocks/Button.tsx
-import { LINK_RELS, buttonIconOf, buttonIconSvg, buttonVariantOf, isScriptHref } from "@bettercms-ai/types";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function Button({
-  text,
-  href,
-  variant = "primary",
-  size = "md",
-  fullWidth = false,
-  arrow = false,
-  icon: iconProp,
-  newTab = false,
-  rel,
-  action,
-  align = "left",
-  className = "",
-  style,
-  "data-bcms-field": field,
-  "data-bcms-kind": kind
-}) {
-  const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
-  const variantStyles = {
-    primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-    tertiary: "bg-transparent text-primary hover:bg-primary/10",
-    brand: "bg-accent text-accent-foreground shadow hover:bg-accent/90",
-    dark: "bg-foreground text-background shadow hover:bg-foreground/90",
-    light: "border bg-background text-foreground shadow-sm hover:bg-muted",
-    outline: "border border-current bg-transparent text-primary hover:bg-primary/10",
-    link: "h-auto bg-transparent p-0 text-primary underline underline-offset-4"
-  };
-  const icon = buttonIconOf(iconProp);
-  const alignClass = {
-    left: "justify-start",
-    center: "justify-center",
-    right: "justify-end"
-  }[align];
-  const sizeStyles = {
-    sm: "px-3 py-1.5 text-xs",
-    md: "px-4 py-2",
-    lg: "px-6 py-3 text-base"
+function deterministicKeys(prefix = "k") {
+  let n = 0;
+  return () => {
+    n += 1;
+    return `${prefix}${n}`;
   };
-  const sizeClass = size === "sm" || size === "lg" ? sizeStyles[size] : sizeStyles.md;
-  const fullClass = fullWidth === true ? "flex w-full justify-center" : "";
-  const relTokens = [...newTab === true ? ["noopener", "noreferrer"] : [], ...LINK_RELS.includes(rel) ? [rel] : []];
-  if (action === "code") {
-    return /* @__PURE__ */ jsxs3("button", { type: "button", "data-bcms-field": field, "data-bcms-kind": kind, style, className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className), children: [
-      icon && /* @__PURE__ */ jsx5("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
-      text,
-      arrow === true && /* @__PURE__ */ jsx5("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs3(
-    "a",
-    {
-      href: typeof href === "string" && isScriptHref(href) ? "#" : href,
-      ...newTab === true ? { target: "_blank" } : {},
-      ...relTokens.length ? { rel: relTokens.join(" ") } : {},
-      "data-bcms-field": field,
-      "data-bcms-kind": kind,
-      style,
-      className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className),
-      children: [
-        icon && /* @__PURE__ */ jsx5("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
-        text,
-        arrow === true && /* @__PURE__ */ jsx5("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
-      ]
-    }
-  );
 }
 
-// src/blocks/Spacer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Spacer({ height = 32, className = "" }) {
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      className: `w-full border border-dashed border-muted-foreground/20 rounded flex items-center justify-center ${className}`,
-      style: { height: `${height}px` },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxs4("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
-        height,
-        "px"
-      ] })
-    }
-  );
+// ../richtext/src/table.ts
+var isRecord = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isPortableTextTable = (n) => isRecord(n) && n._type === PT_TYPES.table && Array.isArray(n.rows);
+var isBuiltInTableBlock = (n) => isRecord(n) && n._type === PT_TYPES.block && n.schemaKey === BUILTIN_TABLE_KEY;
+var asIs = (v) => Array.isArray(v) ? v : [];
+function keyMinter(base, reserved) {
+  const prefix = (base.match(/[A-Za-z0-9-]/g) ?? []).join("").slice(0, 16) || "t";
+  return (...parts) => {
+    const candidate = `${prefix}-${parts.join("")}`.slice(0, 30);
+    let key = candidate;
+    for (let n = 1; reserved.has(key); n += 1) key = `${candidate}-${n}`;
+    reserved.add(key);
+    return key;
+  };
 }
-
-// src/blocks/Columns.tsx
-import "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Columns({
-  columns,
-  gap = 16,
-  className = "",
-  renderBlock
-}) {
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: cn("grid w-full", className),
-      style: {
-        gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`,
-        gap: `${gap}px`
-      },
-      children: columns.map((columnBlocks, colIndex) => /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-4 min-w-0", children: columnBlocks.map((block) => /* @__PURE__ */ jsx7("span", { children: renderBlock ? renderBlock(block) : null }, block.id)) }, colIndex))
+function reservedKeys(rows) {
+  const out = /* @__PURE__ */ new Set();
+  for (const row of rows) {
+    if (!isRecord(row)) continue;
+    if (isValidKey(row._key)) out.add(row._key);
+    for (const cell of Array.isArray(row.cells) ? row.cells : []) {
+      if (isRecord(cell) && isValidKey(cell._key)) out.add(cell._key);
     }
-  );
-}
-
-// src/blocks/Video.tsx
-import { useState } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function getEmbedUrl(url) {
-  const ytMatch = url.match(
-    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
-  );
-  if (ytMatch) {
-    return {
-      embedUrl: `https://www.youtube.com/embed/${ytMatch[1]}`,
-      provider: "youtube"
-    };
-  }
-  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
-  if (vimeoMatch) {
-    return {
-      embedUrl: `https://player.vimeo.com/video/${vimeoMatch[1]}`,
-      provider: "vimeo"
-    };
   }
-  return { embedUrl: url, provider: "unknown" };
+  return out;
 }
-function Video({
-  url,
-  poster,
-  autoplay = false,
-  loop = false,
-  className = ""
-}) {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const { embedUrl, provider } = getEmbedUrl(url);
-  if (provider === "unknown") {
-    return /* @__PURE__ */ jsx8(
-      "video",
-      {
-        src: url,
-        poster,
-        autoPlay: autoplay,
-        loop,
-        controls: true,
-        className,
-        playsInline: true
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
-    !isLoaded && poster && // eslint-disable-next-line @next/next/no-img-element
-    /* @__PURE__ */ jsx8(
-      "img",
-      {
-        src: poster,
-        alt: "Video thumbnail",
-        className: "w-full h-full object-cover absolute inset-0"
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      "iframe",
-      {
-        src: `${embedUrl}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${autoplay ? 1 : 0}`,
-        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-        allowFullScreen: true,
-        loading: "lazy",
-        onLoad: () => setIsLoaded(true),
-        className: "w-full h-full"
-      }
-    )
-  ] });
+var textContent = (text, key) => text === "" ? [] : [{
+  _type: "block",
+  _key: key(),
+  style: "normal",
+  markDefs: [],
+  children: [{ _type: "span", _key: key(), text, marks: [] }]
+}];
+var spanOf = (value) => {
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isInteger(n) && n > 1 ? n : void 0;
+};
+function normalizeCell(raw, at, mint, read) {
+  const [row, col] = at;
+  const key = isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", row, "c", col);
+  const inner = deterministicKeys(`${key}-`);
+  if (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") {
+    return { _key: key, content: textContent(String(raw), inner) };
+  }
+  if (!isRecord(raw)) return { _key: key, content: [] };
+  const span = spanOf(raw.span ?? raw.colSpan ?? raw.colspan);
+  const rowSpan = spanOf(raw.rowSpan ?? raw.rowspan);
+  return {
+    _key: key,
+    // `text` is the spelling a string matrix uses once its cells have been given objects; it is
+    // read here so a half-migrated value cannot lose its words.
+    content: Array.isArray(raw.content) ? read(raw.content, inner) : textContent(typeof raw.text === "string" ? raw.text : "", inner),
+    ...raw.header === true ? { header: true } : {},
+    ...span === void 0 ? {} : { span },
+    ...rowSpan === void 0 ? {} : { rowSpan },
+    ...typeof raw.group === "string" ? { group: raw.group } : {}
+  };
 }
-
-// src/blocks/Section.tsx
-import "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function Section({
-  children,
-  background,
-  paddingY,
-  maxWidth,
-  className = "",
-  renderBlock
-}) {
-  const inner = (children ?? []).map((block) => /* @__PURE__ */ jsx9("span", { children: renderBlock ? renderBlock(block) : null }, block.id));
-  return /* @__PURE__ */ jsx9(
-    "section",
-    {
-      className: cn("w-full", className),
-      style: { background, paddingTop: paddingY, paddingBottom: paddingY },
-      children: maxWidth ? /* @__PURE__ */ jsx9("div", { style: { maxWidth, marginInline: "auto" }, children: inner }) : inner
+function normalizeRow(raw, at, mint, read) {
+  const cells = Array.isArray(raw) ? raw : isRecord(raw) && Array.isArray(raw.cells) ? raw.cells : [];
+  return {
+    _key: isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", at),
+    cells: cells.map((c, col) => normalizeCell(c, [at, col], mint, read)),
+    ...isRecord(raw) && raw.head === true ? { head: true } : {},
+    ...isRecord(raw) && typeof raw.group === "string" ? { group: raw.group } : {}
+  };
+}
+function builtInTableToTable(node, key = randomKey) {
+  if (!isBuiltInTableBlock(node)) return null;
+  const fields = node.fields;
+  const raw = isRecord(fields) && Array.isArray(fields.rows) ? fields.rows : [];
+  const hasHeader = isRecord(fields) ? fields.hasHeader !== false : true;
+  const own = node._key;
+  const tableKey = isValidKey(own) ? own : key();
+  const mint = keyMinter(tableKey, reservedKeys(raw));
+  const rows = raw.map((row, i) => {
+    const normalized = normalizeRow(row, i, mint, asIs);
+    if (!(hasHeader && i === 0)) return normalized;
+    return {
+      ...normalized,
+      head: true,
+      cells: normalized.cells.map((c) => ({ ...c, header: true }))
+    };
+  });
+  const width = rows.reduce((max, r) => Math.max(max, r.cells.length), 0);
+  for (const [i, row] of rows.entries()) {
+    while (row.cells.length < width) {
+      row.cells.push({
+        _key: mint("r", i, "c", row.cells.length),
+        content: [],
+        ...row.head === true ? { header: true } : {}
+      });
     }
-  );
+  }
+  return { _type: PT_TYPES.table, _key: tableKey, rows, legacy: true };
 }
-
-// src/blocks/Navbar.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function Navbar({ logo, links, cta, className = "" }) {
-  return /* @__PURE__ */ jsxs6("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
-    logo?.src ? /* @__PURE__ */ jsx10("a", { href: logo.href ?? "/", className: "shrink-0", children: /* @__PURE__ */ jsx10("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : null,
-    /* @__PURE__ */ jsx10("div", { className: "flex flex-1 gap-5", children: (links ?? []).map((l, i) => /* @__PURE__ */ jsx10("a", { href: l.href, className: "text-inherit no-underline", children: l.label }, i)) }),
-    cta ? /* @__PURE__ */ jsx10(
-      "a",
-      {
-        href: cta.href,
-        className: "rounded-lg bg-black px-4 py-2 font-semibold text-white no-underline",
-        children: cta.text
-      }
-    ) : null
-  ] });
+function migrateTable(node, key = randomKey, read = asIs) {
+  const builtIn = builtInTableToTable(node, key);
+  if (builtIn) return builtIn;
+  if (!isPortableTextTable(node)) return null;
+  const rows = node.rows;
+  const tableKey = isValidKey(node._key) ? node._key : key();
+  const mint = keyMinter(tableKey, reservedKeys(rows));
+  return {
+    _type: PT_TYPES.table,
+    _key: tableKey,
+    rows: rows.map((r, i) => normalizeRow(r, i, mint, read)),
+    // Carried through: a migrated table that an author saves back is still the same table, and
+    // dropping the flag on that save would change the page the next time it renders.
+    ...node.legacy === true ? { legacy: true } : {},
+    ...tableExtras(node)
+  };
 }
-
-// src/blocks/Footer.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function Footer({ columns, copyright, className = "" }) {
-  return /* @__PURE__ */ jsxs7("footer", { className: cn("mt-12 border-t pt-8", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
-      col.heading ? /* @__PURE__ */ jsx11("h4", { className: "mb-2 font-semibold", children: col.heading }) : null,
-      (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx11("a", { href: l.href, className: "text-neutral-500 no-underline", children: l.label }, j))
-    ] }, i)) }),
-    copyright ? /* @__PURE__ */ jsx11("p", { className: "mt-6 text-sm text-neutral-500", children: copyright }) : null
-  ] });
+function tableExtras(node) {
+  const groups = (list) => Array.isArray(list) ? list.filter((g) => isRecord(g) && typeof g._key === "string" && g._key !== "").map((g) => ({ _key: g._key, label: typeof g.label === "string" ? g.label : "" })) : void 0;
+  const rowGroups = groups(node.rowGroups);
+  const columnGroups = groups(node.columnGroups);
+  return {
+    ...typeof node.caption === "string" ? { caption: node.caption } : {},
+    ...typeof node.notes === "string" ? { notes: node.notes } : {},
+    ...rowGroups ? { rowGroups } : {},
+    ...columnGroups ? { columnGroups } : {}
+  };
 }
-
-// src/blocks/Slider.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function Slider({ slides, className = "", renderBlock }) {
-  const [i, setI] = useState2(0);
-  const list = slides ?? [];
-  const go = (n) => setI((n + list.length) % (list.length || 1));
-  const btn = "absolute top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border-0 bg-black/50 text-white cursor-pointer";
-  return /* @__PURE__ */ jsxs8("div", { className: cn("relative w-full", className), children: [
-    list.map((s, idx) => /* @__PURE__ */ jsx12("div", { hidden: idx !== i, className: "flex flex-col gap-4", children: (s.children ?? []).map((b) => /* @__PURE__ */ jsx12("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, s.id)),
-    /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Previous", onClick: () => go(i - 1), className: cn(btn, "left-2"), children: "\u2039" }),
-    /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Next", onClick: () => go(i + 1), className: cn(btn, "right-2"), children: "\u203A" })
-  ] });
+function tableGroupLayout(table) {
+  const rows = Array.isArray(table.rows) ? table.rows : [];
+  const labels = (list) => new Map(
+    (Array.isArray(list) ? list : []).filter((g) => isRecord(g) && typeof g._key === "string").map((g) => [g._key, typeof g.label === "string" ? g.label : ""])
+  );
+  const cellsOf = (row) => isRecord(row) && Array.isArray(row.cells) ? row.cells : [];
+  const spanOf2 = (cell) => isRecord(cell) && typeof cell.span === "number" && Number.isInteger(cell.span) && cell.span > 1 ? cell.span : 1;
+  const width = rows.reduce((max, row) => Math.max(max, cellsOf(row).reduce((n, c) => n + spanOf2(c), 0)), 0);
+  const colLabels = labels(table.columnGroups);
+  const columns = [];
+  for (const cell of cellsOf(rows[0])) {
+    const key = isRecord(cell) && typeof cell.group === "string" && colLabels.has(cell.group) ? cell.group : void 0;
+    const last = columns[columns.length - 1];
+    if (last && last.key === key) last.width += spanOf2(cell);
+    else columns.push({ width: spanOf2(cell), ...key === void 0 ? {} : { key, label: colLabels.get(key) } });
+  }
+  const rowLabels = labels(table.rowGroups);
+  const headCount = rows.findIndex((r) => !isRecord(r) || r.head !== true);
+  const body = headCount === -1 ? [] : rows.slice(headCount);
+  const runs = [];
+  for (const row of body) {
+    const key = isRecord(row) && typeof row.group === "string" && rowLabels.has(row.group) ? row.group : void 0;
+    const last = runs[runs.length - 1];
+    if (last && last.key === key) last.rows.push(row);
+    else runs.push({ rows: [row], ...key === void 0 ? {} : { key, label: rowLabels.get(key) } });
+  }
+  return {
+    columns: columns.some((r) => r.key !== void 0) ? columns : [],
+    rows: runs.some((r) => r.key !== void 0) ? runs : [],
+    width
+  };
 }
 
-// src/blocks/Tabs.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function Tabs({ tabs, className = "", renderBlock }) {
-  const [active, setActive] = useState3(0);
-  const list = tabs ?? [];
-  return /* @__PURE__ */ jsxs9("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx13("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx13(
-      "button",
-      {
-        role: "tab",
-        type: "button",
-        "aria-selected": idx === active,
-        onClick: () => setActive(idx),
-        className: cn(
-          "cursor-pointer border-b-2 border-transparent bg-transparent px-4 py-2",
-          idx === active && "border-black font-semibold"
-        ),
-        children: t.label
-      },
-      t.id
-    )) }),
-    list.map((t, idx) => /* @__PURE__ */ jsx13("div", { role: "tabpanel", hidden: idx !== active, className: "flex flex-col gap-4", children: (t.children ?? []).map((b) => /* @__PURE__ */ jsx13("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, t.id))
-  ] });
+// ../richtext/src/key-takeaways.ts
+var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function keyTakeawaysView(value) {
+  const v = isRecord2(value) ? value : {};
+  const title = typeof v.title === "string" ? v.title.trim() : "";
+  const points = (Array.isArray(v.points) ? v.points : []).map((p) => typeof p === "string" ? p.trim() : "").filter(Boolean);
+  return { title, points };
 }
 
-// src/blocks/Placeholders.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-var box = "rounded border border-dashed border-neutral-300 bg-neutral-50 p-4 text-sm text-neutral-500";
-function ComponentInstance({
-  componentId,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
-    "Component instance: ",
-    /* @__PURE__ */ jsx14("code", { children: componentId })
-  ] });
-}
-function FormPlaceholder({ formId, className = "" }) {
-  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
-    "Form: ",
-    /* @__PURE__ */ jsx14("code", { children: formId })
-  ] });
-}
-function CollectionPlaceholder({
-  cardComponentId,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
-    "Collection: entries of this page",
-    cardComponentId ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-      " as ",
-      /* @__PURE__ */ jsx14("code", { children: cardComponentId })
-    ] }) : /* @__PURE__ */ jsx14(Fragment2, { children: " (default card)" })
-  ] });
+// ../richtext/src/component-copy.ts
+var isRecord3 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var fieldsOf = (value) => isRecord3(value) && value.schemaKey === EMBEDDED_COMPONENT_KEY && isRecord3(value.fields) ? value.fields : null;
+function detachedComponentCopy(value) {
+  const f = fieldsOf(value);
+  if (!f || f.detached !== true || !Array.isArray(f.blocks)) return null;
+  return {
+    id: isRecord3(value) && typeof value._key === "string" ? value._key : "",
+    componentId: typeof f.componentId === "string" ? f.componentId : "",
+    props: isRecord3(f.props) ? f.props : {},
+    blocks: f.blocks,
+    ...typeof f.sourcePublishedAt === "string" ? { sourcePublishedAt: f.sourcePublishedAt } : {},
+    ...typeof f.variant === "string" ? { variant: f.variant } : {}
+  };
 }
 
-// src/registry.ts
-var BLOCK_REGISTRY = {
-  // The entries of the page this block sits on. No preview here by design: the list is
-  // fetched per request by the site renderer, so the builder has nothing to show.
-  collection: {
-    component: CollectionPlaceholder,
-    label: "Collection",
-    icon: "list"
-  },
-  heading: {
-    component: Heading,
-    label: "Heading",
-    icon: "type"
-  },
-  text: {
-    component: Text,
-    label: "Text",
-    icon: "align-left"
-  },
-  // Same payload, same renderer — deliberately. `richtext` differs from `text` only in how
-  // an author EDITS it (a formatting surface vs a plain field); at delivery both are an HTML
-  // string, so duplicating the component would be two things to keep in sync for no gain.
-  richtext: {
-    component: Text,
-    label: "Rich text",
-    icon: "pilcrow"
-  },
-  image: {
-    component: Image,
-    label: "Image",
-    icon: "image"
-  },
-  button: {
-    component: Button,
-    label: "Button",
-    icon: "square"
-  },
-  spacer: {
-    component: Spacer,
-    label: "Spacer",
-    icon: "minus"
-  },
-  columns: {
-    component: Columns,
-    label: "Columns",
-    icon: "columns"
-  },
-  video: {
-    component: Video,
-    label: "Video",
-    icon: "play"
-  },
-  section: {
-    component: Section,
-    label: "Section",
-    icon: "layout"
-  },
-  navbar: {
-    component: Navbar,
-    label: "Navbar",
-    icon: "menu"
-  },
-  footer: {
-    component: Footer,
-    label: "Footer",
-    icon: "panel-bottom"
-  },
-  slider: {
-    component: Slider,
-    label: "Slider",
-    icon: "gallery-horizontal"
-  },
-  tabs: {
-    component: Tabs,
-    label: "Tabs",
-    icon: "folder"
-  },
-  component: {
-    component: ComponentInstance,
-    label: "Component",
-    icon: "component"
-  },
-  form: {
-    component: FormPlaceholder,
-    label: "Form",
-    icon: "clipboard-list"
-  }
-};
-var BLOCK_TYPES = Object.keys(BLOCK_REGISTRY);
-
-// src/renderer.tsx
-import { RESPONSIVE_CSS, hideOnAttr, splitButtonStyle, usesHideOn, visibleBlocks, windowState } from "@bettercms-ai/types";
-
-// src/blockStyle.ts
-import { blockStyleToCss } from "@bettercms-ai/types";
-function blockStyleToReactStyle(style) {
-  return blockStyleToCss(style);
+// ../richtext/src/read.ts
+var isRecord4 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function normalizePortableText(value, key = randomKey) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((raw) => {
+    if (!isRecord4(raw) || typeof raw._type !== "string") return [];
+    const table = migrateTable(raw, key, (v, cellKey) => normalizePortableText(v, cellKey));
+    if (table) return [table];
+    const node = { ...raw, _key: isRecord4(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
+    if (node._type === "block") {
+      if (!Array.isArray(node.markDefs)) node.markDefs = [];
+      if (typeof node.style !== "string") node.style = "normal";
+      node.children = (Array.isArray(node.children) ? node.children : []).map((c) => {
+        if (!isRecord4(c)) return c;
+        const child = { ...c, _key: typeof c._key === "string" && c._key ? c._key : key() };
+        if (child._type === "span" && !Array.isArray(child.marks)) child.marks = [];
+        return child;
+      });
+    }
+    return [node];
+  });
+}
+function readStructuredContent(props) {
+  if (!isRecord4(props)) return null;
+  const candidate = props.content ?? props.value;
+  const arr = Array.isArray(candidate) ? candidate : isRecord4(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
+  return arr && arr.length > 0 ? arr : null;
 }
 
-// src/renderer.tsx
-import "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
-function styleOf(block) {
-  if (block.type !== "button") return { wrapper: blockStyleToReactStyle(block.style), paint: {} };
-  const { placement, paint } = splitButtonStyle(block.style);
-  return { wrapper: blockStyleToReactStyle(placement), paint: paint ? { style: paint } : {} };
+// src/blocks/portableText.tsx
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var TOKEN = /^[a-z0-9-]+$/i;
+function styleObject(css) {
+  const out = {};
+  for (const declaration of css.split(";")) {
+    const at = declaration.indexOf(":");
+    if (at < 0) continue;
+    const name = declaration.slice(0, at).trim();
+    const value = declaration.slice(at + 1).trim();
+    if (!name || !value) continue;
+    out[name.startsWith("--") ? name : name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
+  }
+  return out;
 }
-function withHide(block, wrapperStyle, el, stampAt) {
-  const hide = hideOnAttr(block.style);
-  const state = stampAt ? windowState(block, stampAt) : "live";
-  if (!wrapperStyle && !hide && state === "live") return el;
-  return /* @__PURE__ */ jsx15("div", { style: wrapperStyle, ...hide ? { "data-bcms-hide": hide } : {}, ...state === "live" ? {} : { "data-bcms-window": state }, children: el });
+function Bound({
+  base,
+  nodeKey,
+  children
+}) {
+  if (!base || !nodeKey) return /* @__PURE__ */ jsx14(Fragment2, { children });
+  return /* @__PURE__ */ jsx14("div", { "data-bcms-field": `${base}#${nodeKey}`, "data-bcms-kind": "richtext", children });
 }
-function bindingProps(block, annotate) {
-  if (!annotate || !block.id) return {};
-  switch (block.type) {
-    case "heading":
-    case "button":
-      return { "data-bcms-field": `${block.id}__text`, "data-bcms-kind": "text" };
-    case "text":
-    case "richtext":
-      return { "data-bcms-field": `${block.id}__html`, "data-bcms-kind": "richtext" };
-    case "image":
-      return { "data-bcms-field": `${block.id}__src`, "data-bcms-kind": "image" };
-    default:
-      return {};
-  }
+function Table({ value }) {
+  const components = React6.useMemo(buildComponents, []);
+  const inline = React6.useMemo(
+    () => ({ ...components, block: { normal: ({ children }) => /* @__PURE__ */ jsx14(Fragment2, { children }) } }),
+    [components]
+  );
+  const rows = Array.isArray(value?.rows) ? value.rows : [];
+  if (rows.length === 0) return null;
+  const cells = (row) => (Array.isArray(row?.cells) ? row.cells : []).map((cell) => {
+    const Tag = cell?.header === true ? "th" : "td";
+    const span2 = typeof cell?.span === "number" && cell.span > 1 ? cell.span : void 0;
+    const rowSpan = typeof cell?.rowSpan === "number" && cell.rowSpan > 1 ? cell.rowSpan : void 0;
+    const content = Array.isArray(cell?.content) ? cell.content : [];
+    const lone = content.length === 1 && content[0]._type === "block" && content[0].style === "normal" && !content[0].listItem;
+    return /* @__PURE__ */ jsx14(Tag, { ...span2 ? { colSpan: span2 } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx14(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
+  });
+  const rowEl = (row) => /* @__PURE__ */ jsx14("tr", { children: cells(row) }, row?._key);
+  const headCount = rows.findIndex((r) => r?.head !== true);
+  const head = headCount === -1 ? rows.length : headCount;
+  const layout = tableGroupLayout(value);
+  const caption = typeof value.caption === "string" ? value.caption.trim() : "";
+  const notes = typeof value.notes === "string" ? value.notes.trim() : "";
+  const notesId = notes && typeof value._key === "string" && value._key ? `${value._key}-notes` : void 0;
+  const span = (n) => n > 1 ? n : void 0;
+  const groupRow = layout.columns.length ? /* @__PURE__ */ jsx14("tr", { children: layout.columns.flatMap(
+    (run, i) => run.label === void 0 ? Array.from({ length: run.width }, (_, k) => /* @__PURE__ */ jsx14("td", {}, `${i}-${k}`)) : [/* @__PURE__ */ jsx14("th", { scope: "colgroup", colSpan: span(run.width), "data-group": run.key, children: run.label }, i)]
+  ) }) : null;
+  const bodies = layout.rows.length ? layout.rows.map((run, i) => /* @__PURE__ */ jsxs11("tbody", { "data-key": run.key, children: [
+    run.label !== void 0 && /* @__PURE__ */ jsx14("tr", { children: /* @__PURE__ */ jsx14("th", { scope: "rowgroup", colSpan: span(layout.width), children: run.label }) }),
+    run.rows.map(rowEl)
+  ] }, i)) : head < rows.length && /* @__PURE__ */ jsx14("tbody", { children: rows.slice(head).map(rowEl) });
+  const table = /* @__PURE__ */ jsxs11("table", { ...value.legacy === true ? { className: "bcms-table" } : {}, ...notesId ? { "aria-describedby": notesId } : {}, children: [
+    caption && /* @__PURE__ */ jsx14("caption", { children: caption }),
+    layout.columns.map((run, i) => /* @__PURE__ */ jsx14("colgroup", { span: span(run.width) }, i)),
+    (groupRow || head > 0) && /* @__PURE__ */ jsxs11("thead", { children: [
+      groupRow,
+      rows.slice(0, head).map(rowEl)
+    ] }),
+    bodies
+  ] });
+  return notes ? /* @__PURE__ */ jsxs11("figure", { "data-rt": "table", children: [
+    table,
+    /* @__PURE__ */ jsx14("p", { "data-notes": "", id: notesId, children: notes })
+  ] }) : table;
 }
-function resolveBlock(block, className, annotate = false, stampAt) {
-  const entry = BLOCK_REGISTRY[block.type];
-  if (!entry) {
-    return /* @__PURE__ */ jsxs11(
-      "div",
-      {
-        className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className ?? ""}`,
-        children: [
-          "Unknown block type: ",
-          /* @__PURE__ */ jsx15("code", { children: block.type })
-        ]
+function buildComponents(renderBlock) {
+  return {
+    types: {
+      [PT_TYPES.divider]: () => /* @__PURE__ */ jsx14("hr", {}),
+      [PT_TYPES.table]: ({ value }) => /* @__PURE__ */ jsx14(Table, { value }),
+      [PT_TYPES.code]: ({ value }) => {
+        const v = value;
+        const lang = typeof v.language === "string" && TOKEN.test(v.language) ? v.language : void 0;
+        return /* @__PURE__ */ jsx14("pre", { children: /* @__PURE__ */ jsx14("code", { className: lang ? `language-${lang}` : void 0, children: typeof v.code === "string" ? v.code : "" }) });
+      },
+      /**
+       * A generic embedded block renders as a marker, not as content: its payload references
+       * something (a component, a media id) that has to be RESOLVED against the project, and
+       * this renderer has no project. A marker keeps the node visible and addressable rather
+       * than rendering nothing at all, which is how embedded content used to vanish. A caller
+       * that CAN resolve it passes `renderBlock`.
+       */
+      [PT_TYPES.block]: ({ value }) => {
+        const rendered = renderBlock?.(value);
+        if (rendered !== void 0) return /* @__PURE__ */ jsx14(Fragment2, { children: rendered });
+        const copy = detachedComponentCopy(value);
+        if (copy) {
+          return /* @__PURE__ */ jsx14("div", { className: "bcms-block bcms-block--component", "data-bcms-component-copy": copy.componentId, "data-bcms-instance": copy.id, children: /* @__PURE__ */ jsx14(BlocksRenderer, { blocks: copy.blocks }) });
+        }
+        const v = value;
+        const key = typeof v.schemaKey === "string" ? v.schemaKey : "block";
+        return /* @__PURE__ */ jsx14("div", { className: "bcms-block", "data-bcms-schema-key": key });
+      },
+      /**
+       * A pull quote — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
+       * `<figure data-rt="pullquote">`, the name linked (and the quote cited) only through
+       * `safeHref`. pull-quote.test.tsx compares the two.
+       */
+      [PT_TYPES.pullQuote]: ({ value }) => {
+        const v = value;
+        const text = (x) => typeof x === "string" ? x.trim() : "";
+        const quote = typeof v.quote === "string" ? v.quote : "";
+        const name = text(v.name);
+        const role = text(v.role);
+        const href = safeHref(pullQuoteHref(v.link)) ?? void 0;
+        return /* @__PURE__ */ jsxs11("figure", { "data-rt": "pullquote", children: [
+          /* @__PURE__ */ jsx14("blockquote", { cite: href, children: /* @__PURE__ */ jsx14("p", { children: quote }) }),
+          name || role ? /* @__PURE__ */ jsxs11("figcaption", { children: [
+            name ? href ? /* @__PURE__ */ jsx14("a", { href, "data-name": "", children: name }) : /* @__PURE__ */ jsx14("span", { "data-name": "", children: name }) : null,
+            name && role ? ", " : null,
+            role ? /* @__PURE__ */ jsx14("span", { "data-role": "", children: role }) : null
+          ] }) : null
+        ] });
+      },
+      /**
+       * Key takeaways — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
+       * `<aside data-rt="takeaways">`, read through the one `keyTakeawaysView` both renderers share.
+       * portable-text-key-takeaways.test.tsx compares the two.
+       */
+      [PT_TYPES.keyTakeaways]: ({ value }) => {
+        const { title, points } = keyTakeawaysView(value);
+        return /* @__PURE__ */ jsxs11("aside", { "data-rt": "takeaways", children: [
+          title ? /* @__PURE__ */ jsx14("p", { "data-title": "", children: title }) : null,
+          /* @__PURE__ */ jsx14("ul", { children: points.map((p, i) => /* @__PURE__ */ jsx14("li", { children: p }, i)) })
+        ] });
+      },
+      [PT_TYPES.mention]: ({ value }) => {
+        const v = value;
+        return /* @__PURE__ */ jsx14("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
       }
-    );
+    },
+    marks: {
+      /**
+       * The only attribute this renderer writes from author data. An unsafe href renders the
+       * LABEL rather than deleting it — blocking a link must not lose the words.
+       */
+      [PT_TYPES.link]: ({ value, children }) => {
+        const v = value ?? {};
+        const href = typeof v.href === "string" ? safeHref(v.href) : null;
+        if (!href) return /* @__PURE__ */ jsx14(Fragment2, { children });
+        const blank = v.target === "_blank";
+        return /* @__PURE__ */ jsx14("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
+      },
+      /**
+       * The site's own inline markup, rendered as itself — the React half of
+       * `portableTextToHtml`'s `styled` mark, and it has to stay the same shape: Astro and the
+       * editor canvas render through that serialiser while a Next site renders through this
+       * one, and two renderers of one value that disagree is the whole bug class.
+       *
+       * The tag is re-checked against `STYLED_TAGS` and the attribute bag re-filtered, because
+       * a markDef is DATA and arrives from imports, the Management API and AI writes. React
+       * escapes the values it writes; the allowlist is what keeps a `href` or an `onClick` out
+       * of the props entirely. An unrecognised tag renders its CHILDREN — the words are the
+       * author's, the wrapper is only the design.
+       */
+      [PT_TYPES.styled]: ({ value, children }) => {
+        const v = value ?? {};
+        const tag = typeof v.tag === "string" ? v.tag.toLowerCase() : "";
+        if (!isStyledTag(tag)) return /* @__PURE__ */ jsx14(Fragment2, { children });
+        const Tag = tag;
+        const className = typeof v.className === "string" && v.className ? v.className : void 0;
+        const attrs = styledAttrEntries(v.attrs);
+        const style = attrs.find(([name]) => name === "style")?.[1];
+        return /* @__PURE__ */ jsx14(
+          Tag,
+          {
+            className,
+            ...Object.fromEntries(attrs.filter(([name]) => name !== "style")),
+            ...style ? { style: styleObject(style) } : {},
+            children
+          }
+        );
+      },
+      highlight: ({ children }) => /* @__PURE__ */ jsx14("mark", { children }),
+      "strike-through": ({ children }) => /* @__PURE__ */ jsx14("s", { children }),
+      /**
+       * A colour mark carries a TOKEN name (`color:brand-accent`), never a baked hex, so the
+       * consuming site styles it and a rebrand does not orphan the content.
+       */
+      color: ({ children, markType }) => {
+        const token = markType.startsWith("color:") ? markType.slice(6) : "";
+        if (!TOKEN.test(token)) return /* @__PURE__ */ jsx14(Fragment2, { children });
+        return /* @__PURE__ */ jsx14("span", { className: `bcms-color-${token}`, children });
+      }
+    },
+    /** Unknown marks and types render their children. Never swallow content. */
+    unknownMark: ({ children }) => /* @__PURE__ */ jsx14(Fragment2, { children }),
+    unknownType: ({ children }) => /* @__PURE__ */ jsx14(Fragment2, { children: children ?? null }),
+    unknownBlockStyle: ({ children }) => /* @__PURE__ */ jsx14("p", { children })
+  };
+}
+var isListItem = (node) => node._type === "block" && typeof node.listItem === "string" && !!node.listItem;
+function runsOf(blocks) {
+  const runs = [];
+  for (const node of blocks) {
+    const last = runs.at(-1);
+    if (last && isListItem(node) && isListItem(last[0])) last.push(node);
+    else runs.push([node]);
   }
-  const Component = entry.component;
-  const { wrapper: blockStyle, paint } = styleOf(block);
-  const el = /* @__PURE__ */ jsx15(Component, { ...block.props, ...paint, className, ...bindingProps(block, annotate) });
-  return withHide(block, blockStyle, el, stampAt);
+  return runs;
 }
-function BlockRenderer({
-  block,
+function PortableText({ value, bindingBase, renderBlock }) {
+  const blocks = React6.useMemo(() => normalizePortableText(readValue(value)), [value]);
+  const components = React6.useMemo(() => buildComponents(renderBlock), [renderBlock]);
+  const listComponents = React6.useMemo(() => {
+    if (!bindingBase) return null;
+    const keys = new Set(blocks.map((b) => b._key));
+    return {
+      ...components,
+      listItem: ({ value: item, children }) => keys.has(item._key) ? /* @__PURE__ */ jsx14("li", { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext", children }) : /* @__PURE__ */ jsx14("li", { children })
+    };
+  }, [bindingBase, blocks, components]);
+  if (blocks.length === 0) return null;
+  if (!bindingBase || !listComponents) return /* @__PURE__ */ jsx14(PT, { value: blocks, components });
+  return /* @__PURE__ */ jsx14(Fragment2, { children: runsOf(blocks).map(
+    (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx14(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx14(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx14(PT, { value: run, components }) }, run[0]._key)
+  ) });
+}
+function readValue(value) {
+  if (Array.isArray(value)) return value;
+  if (value && typeof value === "object") {
+    const o = value;
+    if (Array.isArray(o.value)) return o.value;
+    if (Array.isArray(o.content)) return o.content;
+  }
+  return [];
+}
+
+// src/blocks/Text.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Text({
+  html,
+  content,
+  align = "left",
   className = "",
-  renderBlock,
-  annotate = false,
-  stampAt
+  "data-bcms-field": field,
+  "data-bcms-kind": kind
 }) {
-  const entry = BLOCK_REGISTRY[block.type];
-  if (!entry) {
-    return /* @__PURE__ */ jsxs11(
-      "div",
-      {
-        className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className}`,
-        children: [
-          "Unknown block type: ",
-          /* @__PURE__ */ jsx15("code", { children: block.type })
-        ]
-      }
-    );
-  }
-  const Component = entry.component;
-  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate, stampAt)) } : {};
-  const { wrapper: blockStyle, paint } = styleOf(block);
-  const el = /* @__PURE__ */ jsx15(
-    Component,
+  const alignClass = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }[align];
+  const cls = `text-muted-foreground leading-relaxed ${alignClass} ${className}`;
+  const structured = readStructuredContent({ content });
+  return /* @__PURE__ */ jsx15(
+    "div",
     {
-      ...block.props,
-      ...paint,
-      className,
-      ...containerProps,
-      ...bindingProps(block, annotate)
+      className: cls,
+      ...structured ? {} : { "data-bcms-field": field, "data-bcms-kind": kind },
+      children: structured ? /* @__PURE__ */ jsx15(PortableText, { value: structured, bindingBase: field }) : (
+        // eslint-disable-next-line react/no-danger
+        /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: html } })
+      )
     }
   );
-  return withHide(block, blockStyle, el, stampAt);
-}
-function BlocksRenderer({
-  blocks: all,
-  className = "",
-  renderBlock,
-  annotate = false,
-  now
-}) {
-  const at = now ?? /* @__PURE__ */ new Date();
-  const blocks = annotate ? all : visibleBlocks(all, at);
-  if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsxs11("div", { className, children: [
-    usesHideOn(blocks) && /* @__PURE__ */ jsx15("style", { dangerouslySetInnerHTML: { __html: RESPONSIVE_CSS } }),
-    blocks.map((block) => /* @__PURE__ */ jsx15(
-      BlockRenderer,
-      {
-        block,
-        renderBlock,
-        annotate,
-        stampAt: annotate ? at : void 0
-      },
-      block.id
-    ))
-  ] });
 }
 export {
   BLOCK_REGISTRY,