@bettercms-ai/ui 0.3.0 → 0.5.0

package/dist/renderer.js

@@ -6,7 +6,9 @@ function Heading({
   text,
   level = 2,
   align = "left",
-  className = ""
+  className = "",
+  "data-bcms-field": field,
+  "data-bcms-kind": kind
 }) {
   const alignClass = {
     left: "text-left",
@@ -16,28 +18,81 @@ function Heading({
   const classNames = `font-heading font-bold tracking-tight text-foreground ${alignClass} ${className}`;
   switch (level) {
     case 1:
-      return /* @__PURE__ */ jsx("h1", { className: classNames, children: text });
+      return /* @__PURE__ */ jsx("h1", { className: classNames, "data-bcms-field": field, "data-bcms-kind": kind, children: text });
     case 2:
-      return /* @__PURE__ */ jsx("h2", { className: classNames, children: text });
+      return /* @__PURE__ */ jsx("h2", { className: classNames, "data-bcms-field": field, "data-bcms-kind": kind, children: text });
     case 3:
-      return /* @__PURE__ */ jsx("h3", { className: classNames, children: text });
+      return /* @__PURE__ */ jsx("h3", { className: classNames, "data-bcms-field": field, "data-bcms-kind": kind, children: text });
     default:
-      return /* @__PURE__ */ jsx("h2", { className: classNames, children: text });
+      return /* @__PURE__ */ jsx("h2", { className: classNames, "data-bcms-field": field, "data-bcms-kind": kind, children: text });
+  }
+}
+
+// src/blocks/portableText.tsx
+import React from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var MARK_TAGS = {
+  strong: "strong",
+  em: "em",
+  underline: "u",
+  "strike-through": "s",
+  code: "code"
+};
+var BLOCK_TAGS = {
+  normal: "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  blockquote: "blockquote"
+};
+function Span({ node, index }) {
+  const marks = node.marks ?? [];
+  const colour = marks.find((m) => m.startsWith("color:"))?.slice("color:".length);
+  let out = node.text ?? "";
+  for (const m of marks) {
+    const Tag = MARK_TAGS[m];
+    if (Tag) out = /* @__PURE__ */ jsx2(Tag, { children: out });
+  }
+  if (colour && /^[a-z0-9-]+$/i.test(colour)) {
+    out = /* @__PURE__ */ jsx2("span", { className: `bcms-color-${colour}`, children: out });
   }
+  return /* @__PURE__ */ jsx2(React.Fragment, { children: out }, node._key ?? index);
+}
+function PortableText({ doc }) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: doc.content.map((block, i) => {
+    const Tag = BLOCK_TAGS[block.style ?? "normal"] ?? "p";
+    return /* @__PURE__ */ jsx2(Tag, { children: (block.children ?? []).map((c, j) => /* @__PURE__ */ jsx2(Span, { node: c, index: j }, c._key ?? j)) }, block._key ?? i);
+  }) });
 }
 
 // src/blocks/Text.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Text({ html, align = "left", className = "" }) {
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Text({
+  html,
+  content,
+  align = "left",
+  className = "",
+  "data-bcms-field": field,
+  "data-bcms-kind": kind
+}) {
   const alignClass = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   }[align];
-  return /* @__PURE__ */ jsx2(
+  const cls = `text-muted-foreground leading-relaxed ${alignClass} ${className}`;
+  if (content && content.content.length > 0) {
+    return /* @__PURE__ */ jsx3("div", { className: cls, children: /* @__PURE__ */ jsx3(PortableText, { doc: content }) });
+  }
+  return /* @__PURE__ */ jsx3(
     "div",
     {
-      className: `text-muted-foreground leading-relaxed ${alignClass} ${className}`,
+      className: cls,
+      "data-bcms-field": field,
+      "data-bcms-kind": kind,
       dangerouslySetInnerHTML: { __html: html }
     }
   );
@@ -51,7 +106,7 @@ function cn(...inputs) {
 }
 
 // src/blocks/Image.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Image({
   src,
   alt,
@@ -59,10 +114,12 @@ function Image({
   height,
   caption,
   className = "",
-  sizes
+  sizes,
+  "data-bcms-field": field,
+  "data-bcms-kind": kind
 }) {
   return /* @__PURE__ */ jsxs("figure", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "img",
       {
         src,
@@ -70,22 +127,26 @@ function Image({
         width,
         height,
         sizes,
+        "data-bcms-field": field,
+        "data-bcms-kind": kind,
         className: "w-full h-auto rounded-md object-cover",
         loading: "lazy"
       }
     ),
-    caption && /* @__PURE__ */ jsx3("figcaption", { className: "mt-2 text-sm text-muted-foreground text-center italic", children: caption })
+    caption && /* @__PURE__ */ jsx4("figcaption", { className: "mt-2 text-sm text-muted-foreground text-center italic", children: caption })
   ] });
 }
 
 // src/blocks/Button.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Button({
   text,
   href,
   variant = "primary",
   align = "left",
-  className = ""
+  className = "",
+  "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 = {
@@ -97,10 +158,12 @@ function Button({
     center: "justify-center",
     right: "justify-end"
   }[align];
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "a",
     {
       href,
+      "data-bcms-field": field,
+      "data-bcms-kind": kind,
       className: cn(baseStyles, variantStyles[variant], alignClass, "px-4 py-2", className),
       children: text
     }
@@ -108,9 +171,9 @@ function Button({
 }
 
 // src/blocks/Spacer.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function Spacer({ height = 32, className = "" }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: `w-full border border-dashed border-muted-foreground/20 rounded flex items-center justify-center ${className}`,
@@ -126,14 +189,14 @@ function Spacer({ height = 32, className = "" }) {
 
 // src/blocks/Columns.tsx
 import "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Columns({
   columns,
   gap = 16,
   className = "",
   renderBlock
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn("grid w-full", className),
@@ -141,14 +204,14 @@ function Columns({
         gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`,
         gap: `${gap}px`
       },
-      children: columns.map((columnBlocks, colIndex) => /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-4 min-w-0", children: columnBlocks.map((block) => /* @__PURE__ */ jsx6("span", { children: renderBlock ? renderBlock(block) : null }, block.id)) }, colIndex))
+      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))
     }
   );
 }
 
 // src/blocks/Video.tsx
 import { useState } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function getEmbedUrl(url) {
   const ytMatch = url.match(
     /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
@@ -178,7 +241,7 @@ function Video({
   const [isLoaded, setIsLoaded] = useState(false);
   const { embedUrl, provider } = getEmbedUrl(url);
   if (provider === "unknown") {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "video",
       {
         src: url,
@@ -193,7 +256,7 @@ function Video({
   }
   return /* @__PURE__ */ jsxs3("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__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "img",
       {
         src: poster,
@@ -201,7 +264,7 @@ function Video({
         className: "w-full h-full object-cover absolute inset-0"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "iframe",
       {
         src: `${embedUrl}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${autoplay ? 1 : 0}`,
@@ -217,7 +280,7 @@ function Video({
 
 // src/blocks/Section.tsx
 import "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Section({
   children,
   background,
@@ -226,24 +289,24 @@ function Section({
   className = "",
   renderBlock
 }) {
-  const inner = (children ?? []).map((block) => /* @__PURE__ */ jsx8("span", { children: renderBlock ? renderBlock(block) : null }, block.id));
-  return /* @__PURE__ */ jsx8(
+  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__ */ jsx8("div", { style: { maxWidth, marginInline: "auto" }, children: inner }) : inner
+      children: maxWidth ? /* @__PURE__ */ jsx9("div", { style: { maxWidth, marginInline: "auto" }, children: inner }) : inner
     }
   );
 }
 
 // src/blocks/Navbar.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function Navbar({ logo, links, cta, className = "" }) {
   return /* @__PURE__ */ jsxs4("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
-    logo?.src ? /* @__PURE__ */ jsx9("a", { href: logo.href ?? "/", className: "shrink-0", children: /* @__PURE__ */ jsx9("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : null,
-    /* @__PURE__ */ jsx9("div", { className: "flex flex-1 gap-5", children: (links ?? []).map((l, i) => /* @__PURE__ */ jsx9("a", { href: l.href, className: "text-inherit no-underline", children: l.label }, i)) }),
-    cta ? /* @__PURE__ */ jsx9(
+    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,
@@ -255,40 +318,40 @@ function Navbar({ logo, links, cta, className = "" }) {
 }
 
 // src/blocks/Footer.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function Footer({ columns, copyright, className = "" }) {
   return /* @__PURE__ */ jsxs5("footer", { className: cn("mt-12 border-t pt-8", className), children: [
-    /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1.5", children: [
-      col.heading ? /* @__PURE__ */ jsx10("h4", { className: "mb-2 font-semibold", children: col.heading }) : null,
-      (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx10("a", { href: l.href, className: "text-neutral-500 no-underline", children: l.label }, j))
+    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs5("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__ */ jsx10("p", { className: "mt-6 text-sm text-neutral-500", children: copyright }) : null
+    copyright ? /* @__PURE__ */ jsx11("p", { className: "mt-6 text-sm text-neutral-500", children: copyright }) : null
   ] });
 }
 
 // src/blocks/Slider.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } 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__ */ jsxs6("div", { className: cn("relative w-full", className), children: [
-    list.map((s, idx) => /* @__PURE__ */ jsx11("div", { hidden: idx !== i, className: "flex flex-col gap-4", children: (s.children ?? []).map((b) => /* @__PURE__ */ jsx11("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, s.id)),
-    /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Previous", onClick: () => go(i - 1), className: cn(btn, "left-2"), children: "\u2039" }),
-    /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Next", onClick: () => go(i + 1), className: cn(btn, "right-2"), children: "\u203A" })
+    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" })
   ] });
 }
 
 // src/blocks/Tabs.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function Tabs({ tabs, className = "", renderBlock }) {
   const [active, setActive] = useState3(0);
   const list = tabs ?? [];
   return /* @__PURE__ */ jsxs7("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx12("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx13(
       "button",
       {
         role: "tab",
@@ -303,12 +366,12 @@ function Tabs({ tabs, className = "", renderBlock }) {
       },
       t.id
     )) }),
-    list.map((t, idx) => /* @__PURE__ */ jsx12("div", { role: "tabpanel", hidden: idx !== active, className: "flex flex-col gap-4", children: (t.children ?? []).map((b) => /* @__PURE__ */ jsx12("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, 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))
   ] });
 }
 
 // src/blocks/Placeholders.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } 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,
@@ -316,18 +379,37 @@ function ComponentInstance({
 }) {
   return /* @__PURE__ */ jsxs8("div", { className: cn(box, className), children: [
     "Component instance: ",
-    /* @__PURE__ */ jsx13("code", { children: componentId })
+    /* @__PURE__ */ jsx14("code", { children: componentId })
   ] });
 }
 function FormPlaceholder({ formId, className = "" }) {
   return /* @__PURE__ */ jsxs8("div", { className: cn(box, className), children: [
     "Form: ",
-    /* @__PURE__ */ jsx13("code", { children: formId })
+    /* @__PURE__ */ jsx14("code", { children: formId })
+  ] });
+}
+function CollectionPlaceholder({
+  cardComponentId,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: cn(box, className), children: [
+    "Collection: entries of this page",
+    cardComponentId ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      " as ",
+      /* @__PURE__ */ jsx14("code", { children: cardComponentId })
+    ] }) : /* @__PURE__ */ jsx14(Fragment2, { 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",
@@ -338,6 +420,14 @@ var BLOCK_REGISTRY = {
     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",
@@ -401,45 +491,32 @@ var BLOCK_REGISTRY = {
 };
 var BLOCK_TYPES = Object.keys(BLOCK_REGISTRY);
 
-// ../types/dist/index.js
-var SPACE_PX = { none: "0", xs: "4px", sm: "8px", md: "16px", lg: "32px", xl: "64px" };
-var FONT_SIZE_REM = { sm: "0.875rem", base: "1rem", lg: "1.25rem", xl: "1.5rem", "2xl": "2rem" };
-var WEIGHT = { normal: 400, medium: 500, semibold: 600, bold: 700 };
-var RADIUS_PX = { none: "0", sm: "4px", md: "8px", lg: "16px", full: "9999px" };
-var COLOR_HEX = { white: "#ffffff", black: "#111111", muted: "#6b7280", mutedBg: "#f3f4f6", primary: "#111111", accent: "#4f46e5" };
-function blockStyleToCss(style) {
-  if (!style || typeof style !== "object") return void 0;
-  const s = style;
-  const css = {};
-  if (s.paddingY && SPACE_PX[s.paddingY] != null) {
-    css.paddingTop = SPACE_PX[s.paddingY];
-    css.paddingBottom = SPACE_PX[s.paddingY];
-  }
-  if (s.paddingX && SPACE_PX[s.paddingX] != null) {
-    css.paddingLeft = SPACE_PX[s.paddingX];
-    css.paddingRight = SPACE_PX[s.paddingX];
-  }
-  if (s.marginTop && SPACE_PX[s.marginTop] != null) css.marginTop = SPACE_PX[s.marginTop];
-  if (s.marginBottom && SPACE_PX[s.marginBottom] != null) css.marginBottom = SPACE_PX[s.marginBottom];
-  if (s.background && COLOR_HEX[s.background]) css.background = COLOR_HEX[s.background];
-  if (s.textColor && COLOR_HEX[s.textColor]) css.color = COLOR_HEX[s.textColor];
-  if (s.align === "left" || s.align === "center" || s.align === "right") css.textAlign = s.align;
-  if (s.fontSize && FONT_SIZE_REM[s.fontSize]) css.fontSize = FONT_SIZE_REM[s.fontSize];
-  if (s.weight && WEIGHT[s.weight] != null) css.fontWeight = WEIGHT[s.weight];
-  if (s.radius && RADIUS_PX[s.radius] != null) css.borderRadius = RADIUS_PX[s.radius];
-  return Object.keys(css).length ? css : void 0;
-}
-
 // src/blockStyle.ts
+import { blockStyleToCss } from "@bettercms-ai/types";
 function blockStyleToReactStyle(style) {
   return blockStyleToCss(style);
 }
 
 // src/renderer.tsx
 import "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
-function resolveBlock(block, className) {
+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 resolveBlock(block, className, annotate = false) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
     return /* @__PURE__ */ jsxs9(
@@ -448,20 +525,21 @@ function resolveBlock(block, className) {
         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__ */ jsx14("code", { children: block.type })
+          /* @__PURE__ */ jsx15("code", { children: block.type })
         ]
       }
     );
   }
   const Component = entry.component;
   const blockStyle = blockStyleToReactStyle(block.style);
-  const el = /* @__PURE__ */ jsx14(Component, { ...block.props, className });
-  return blockStyle ? /* @__PURE__ */ jsx14("div", { style: blockStyle, children: el }) : el;
+  const el = /* @__PURE__ */ jsx15(Component, { ...block.props, className, ...bindingProps(block, annotate) });
+  return blockStyle ? /* @__PURE__ */ jsx15("div", { style: blockStyle, children: el }) : el;
 }
 function BlockRenderer({
   block,
   className = "",
-  renderBlock
+  renderBlock,
+  annotate = false
 }) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
@@ -471,28 +549,38 @@ function BlockRenderer({
         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__ */ jsx14("code", { children: block.type })
+          /* @__PURE__ */ jsx15("code", { children: block.type })
         ]
       }
     );
   }
   const Component = entry.component;
-  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? resolveBlock } : {};
+  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate)) } : {};
   const blockStyle = blockStyleToReactStyle(block.style);
-  const el = /* @__PURE__ */ jsx14(Component, { ...block.props, className, ...containerProps });
-  return blockStyle ? /* @__PURE__ */ jsx14("div", { style: blockStyle, children: el }) : el;
+  const el = /* @__PURE__ */ jsx15(
+    Component,
+    {
+      ...block.props,
+      className,
+      ...containerProps,
+      ...bindingProps(block, annotate)
+    }
+  );
+  return blockStyle ? /* @__PURE__ */ jsx15("div", { style: blockStyle, children: el }) : el;
 }
 function BlocksRenderer({
   blocks,
   className = "",
-  renderBlock
+  renderBlock,
+  annotate = false
 }) {
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx14("div", { className, children: blocks.map((block) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { className, children: blocks.map((block) => /* @__PURE__ */ jsx15(
     BlockRenderer,
     {
       block,
-      renderBlock
+      renderBlock,
+      annotate
     },
     block.id
   )) });