@broadpaper/blocks 0.1.1

package/dist/index.js

@@ -0,0 +1,1799 @@
+// src/index.ts
+import { BlockRegistry } from "@broadpaper/core";
+
+// src/blocks/structure.ts
+import { defineBlock, cssText } from "@broadpaper/core";
+var sectionBlock = defineBlock({
+  type: "section",
+  name: "Section",
+  category: "structure",
+  icon: "rectangle-horizontal",
+  hidden: true,
+  defaultProps: { padding: 0 },
+  container: { accepts: ["@rows", "@blocks"] },
+  split: "children",
+  styleGroups: ["spacing", "background", "border", "flow"],
+  inspector: [
+    {
+      title: "Section",
+      fields: [
+        { kind: "text", prop: "label", label: "Label", placeholder: "e.g. Executive summary", allowTokens: false },
+        { kind: "number", prop: "padding", label: "Padding", min: 0, max: 120, unit: "px" }
+      ]
+    }
+  ],
+  canvas: { label: (p) => p.label ?? "Section" },
+  render: ({ h: h3, css, children, styles, props, mode, node }) => {
+    const pad = Number(props.padding) || 0;
+    const empty = children.length === 0;
+    return h3(
+      "div",
+      { class: ["bp-section__inner", empty && "bp-section__inner--empty"], style: cssText({ ...css, padding: pad ? `${pad}px` : css["padding"] }) },
+      h3("div", { class: "bp-stack", style: { gap: `${styles.spacing.blockGap}px` }, "data-dropzone": node.nodeId }, empty && mode === "design" ? h3("div", { class: "bp-empty-section" }, h3("span", { class: "bp-empty-section__title" }, "Empty section"), h3("span", { class: "bp-empty-section__hint" }, "Drag blocks here, or pick one from the panel")) : children)
+    );
+  }
+});
+var rowBlock = defineBlock({
+  type: "row",
+  name: "Columns",
+  description: "A row of columns",
+  category: "layout",
+  icon: "columns-3",
+  keywords: ["row", "columns", "grid", "layout"],
+  defaultProps: { layout: [6, 6], allowSplit: false, verticalAlign: "top" },
+  container: { accepts: ["@columns"], direction: "row" },
+  split: "children",
+  styleGroups: ["spacing", "background", "border", "flow"],
+  inspector: [
+    {
+      title: "Columns",
+      fields: [
+        {
+          kind: "segmented",
+          prop: "verticalAlign",
+          label: "Vertical align",
+          options: [
+            { value: "top", label: "Top", icon: "align-start-vertical" },
+            { value: "middle", label: "Middle", icon: "align-center-vertical" },
+            { value: "bottom", label: "Bottom", icon: "align-end-vertical" },
+            { value: "stretch", label: "Stretch", icon: "stretch-vertical" }
+          ]
+        },
+        { kind: "toggle", prop: "allowSplit", label: "Allow splitting across pages", description: "When off, a row that does not fit moves to the next page whole." }
+      ]
+    }
+  ],
+  canvas: { label: (p) => `Columns ${p.layout.join(" / ")}` },
+  render: ({ h: h3, css, children, styles, props }) => {
+    const align = props.verticalAlign === "middle" ? "center" : props.verticalAlign === "bottom" ? "end" : props.verticalAlign === "stretch" ? "stretch" : "start";
+    return h3("div", { class: "bp-row__grid", style: cssText({ ...css, display: "grid", "grid-template-columns": "repeat(12, minmax(0, 1fr))", "column-gap": `${styles.spacing.columnGap}px`, "align-items": align }) }, children);
+  }
+});
+var columnBlock = defineBlock({
+  type: "column",
+  name: "Column",
+  category: "structure",
+  icon: "rectangle-vertical",
+  hidden: true,
+  defaultProps: { span: 6 },
+  container: { accepts: ["@blocks", "@rows"] },
+  split: "children",
+  styleGroups: ["spacing", "background", "border"],
+  render: ({ h: h3, css, children, node, styles, mode }) => {
+    const empty = children.length === 0;
+    return h3(
+      "div",
+      { class: ["bp-column__inner", empty && "bp-column__inner--empty"], style: cssText({ ...css, "min-width": "0", height: "100%" }) },
+      h3("div", { class: "bp-stack", style: { gap: `${styles.spacing.blockGap}px` }, "data-dropzone": node.nodeId }, empty && mode === "design" ? h3("div", { class: "bp-empty-column" }, "Drop here") : children)
+    );
+  }
+});
+var repeaterItemBlock = defineBlock({
+  type: "repeater-item",
+  name: "Repeater item",
+  category: "structure",
+  hidden: true,
+  defaultProps: { index: 0, count: 0 },
+  container: { accepts: ["@blocks", "@rows"] },
+  split: "children",
+  render: ({ h: h3, children, styles }) => h3("div", { class: "bp-stack bp-repeater-item__inner", style: { gap: `${styles.spacing.blockGap}px` } }, children)
+});
+function stack(h3, children, gap, extra = {}) {
+  return h3("div", { class: "bp-stack", style: { gap: `${gap}px` }, ...extra }, children);
+}
+
+// src/blocks/content.ts
+import { defineBlock as defineBlock2, cssText as cssText2, createRichText, isSafeUrl, resolveValue, isDarkColor, formatDate } from "@broadpaper/core";
+
+// src/shared/marks.ts
+import { h } from "@broadpaper/core";
+function svg(size, children) {
+  return h(
+    "svg",
+    { width: size, height: size, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", style: { display: "block", "flex-shrink": "0" } },
+    children
+  );
+}
+function triangleMark(direction, size, color) {
+  const d = direction === "up" ? "M6 2 L11 9.5 L1 9.5 Z" : "M6 10 L1 2.5 L11 2.5 Z";
+  return svg(size, [h("path", { d, fill: color })]);
+}
+function checkMark(size, color) {
+  return svg(size, [h("path", { d: "M2 6.4 L4.8 9.2 L10 3.2", fill: "none", stroke: color, "stroke-width": 1.8, "stroke-linecap": "round", "stroke-linejoin": "round" })]);
+}
+function dotMark(size, color) {
+  return svg(size, [h("circle", { cx: 6, cy: 6, r: 2.6, fill: color })]);
+}
+
+// src/blocks/content.ts
+var alignField = {
+  kind: "segmented",
+  prop: "align",
+  label: "Align",
+  options: [
+    { value: "left", label: "Left", icon: "align-left" },
+    { value: "center", label: "Centre", icon: "align-center" },
+    { value: "right", label: "Right", icon: "align-right" }
+  ]
+};
+var headingBlock = defineBlock2({
+  type: "heading",
+  name: "Heading",
+  description: "Section title using a document heading style",
+  category: "content",
+  icon: "heading",
+  keywords: ["title", "h1", "h2", "h3"],
+  defaultProps: { text: "Heading", level: "h2" },
+  defaultTextStyle: "h2",
+  defaultFlow: { keepWithNext: true },
+  split: "none",
+  styleGroups: ["textStyle", "typography", "alignment", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Heading",
+      fields: [
+        { kind: "text", prop: "text", label: "Text", placeholder: "Heading text or {{ token }}" },
+        {
+          kind: "segmented",
+          prop: "level",
+          label: "Level",
+          options: [
+            { value: "h1", label: "H1" },
+            { value: "h2", label: "H2" },
+            { value: "h3", label: "H3" },
+            { value: "h4", label: "H4" }
+          ]
+        }
+      ]
+    }
+  ],
+  canvas: { inlineEdit: { prop: "text", kind: "text" }, label: (p) => p.text?.slice(0, 40) || "Heading" },
+  render: ({ h: h3, css, text, props, partAttrs, mode }) => {
+    const content = text("text");
+    const empty = content.length === 0 || content.length === 1 && content[0] === "";
+    return h3(props.level || "h2", { class: ["bp-heading", `bp-heading--${props.level}`], style: cssText2(css), ...partAttrs("text") }, empty && mode === "design" ? h3("span", { class: "bp-placeholder-text" }, "Heading") : content);
+  }
+});
+var textBlock = defineBlock2({
+  type: "text",
+  name: "Text",
+  description: "Rich text with inline data tokens",
+  category: "content",
+  icon: "text",
+  keywords: ["paragraph", "rich text", "body", "copy"],
+  defaultProps: () => ({ content: createRichText("") }),
+  defaultTextStyle: "body",
+  split: "lines",
+  measure: "text",
+  styleGroups: ["textStyle", "typography", "alignment", "spacing", "background", "border", "flow"],
+  inspector: [{ title: "Text", fields: [{ kind: "richtext", prop: "content", label: "Content" }] }],
+  canvas: { inlineEdit: { prop: "content", kind: "richtext" }, label: () => "Text" },
+  render: ({ h: h3, css, richText, partAttrs, mode, node }) => {
+    const doc = node.richText.content ?? node.props.content;
+    const isEmpty = !doc || doc.content.every((b) => b.type === "paragraph" && b.content.length === 0);
+    return h3("div", { class: ["bp-text", isEmpty && "bp-text--empty"], style: cssText2(css), ...partAttrs("text") }, isEmpty && mode === "design" ? h3("p", { class: "bp-p bp-placeholder-text" }, "Type or drop a field here\u2026") : richText("content"));
+  }
+});
+var imageBlock = defineBlock2({
+  type: "image",
+  name: "Image",
+  description: "Static or data-bound image",
+  category: "content",
+  icon: "image",
+  keywords: ["picture", "photo", "graphic"],
+  defaultProps: { src: "", alt: "", fit: "contain", width: null, height: null, align: "left", radius: 0, link: "" },
+  split: "none",
+  styleGroups: ["spacing", "border", "flow"],
+  inspector: [
+    {
+      title: "Image",
+      fields: [
+        { kind: "image", prop: "src", label: "Source", allowBinding: true },
+        { kind: "text", prop: "alt", label: "Alt text", allowTokens: true },
+        { kind: "text", prop: "link", label: "Link URL", allowTokens: true }
+      ]
+    },
+    {
+      title: "Size",
+      fields: [
+        { kind: "number", prop: "width", label: "Width", min: 8, max: 2e3, unit: "px" },
+        { kind: "number", prop: "height", label: "Height", min: 8, max: 2e3, unit: "px" },
+        {
+          kind: "segmented",
+          prop: "fit",
+          label: "Fit",
+          options: [
+            { value: "contain", label: "Contain" },
+            { value: "cover", label: "Cover" }
+          ]
+        },
+        alignField,
+        { kind: "number", prop: "radius", label: "Corner radius", min: 0, max: 200, unit: "px" }
+      ]
+    }
+  ],
+  validate: ({ props }) => {
+    const src = String(props.src ?? "");
+    if (src && !src.includes("{{") && !isSafeUrl(src, { allowData: true })) return [{ severity: "warning", code: "invalid-url", message: `Image URL "${src.slice(0, 60)}" is not an http(s) or data:image URL`, prop: "src" }];
+    return [];
+  },
+  render: ({ h: h3, css, props, mode, node, width: avail }) => {
+    const src = typeof props.src === "string" ? props.src : "";
+    const safe = src && isSafeUrl(src, { allowData: true });
+    const w = props.width ?? void 0;
+    const hgt = props.height ?? void 0;
+    const justify = props.align === "center" ? "center" : props.align === "right" ? "flex-end" : "flex-start";
+    const imgStyle = {
+      width: w ? `${Math.min(w, avail)}px` : hgt ? "auto" : "100%",
+      height: hgt ? `${hgt}px` : "auto",
+      "max-width": "100%",
+      "object-fit": props.fit,
+      "border-radius": props.radius ? `${props.radius}px` : void 0,
+      display: "block"
+    };
+    let img;
+    if (safe) img = h3("img", { src, alt: props.alt || "", style: imgStyle, draggable: "false" });
+    else if (mode === "design") {
+      const bound = node.bindings.src;
+      img = h3("div", { class: "bp-image-placeholder", style: { width: w ? `${Math.min(w, avail)}px` : "100%", height: `${hgt ?? 140}px`, "border-radius": props.radius ? `${props.radius}px` : void 0 } }, h3("span", { class: "bp-image-placeholder__label" }, bound ? bound.label : src ? "Invalid image URL" : "Choose an image"));
+    } else img = h3("div", { style: { width: w ? `${w}px` : "100%", height: `${hgt ?? 0}px` } });
+    const linked = props.link && isSafeUrl(props.link) ? h3("a", { href: props.link, rel: "noopener", style: { display: "block", width: w ? `${Math.min(w, avail)}px` : "100%" } }, img) : img;
+    return h3("div", { class: "bp-image", style: cssText2({ ...css, display: "flex", "justify-content": justify }) }, linked);
+  }
+});
+var logoBlock = defineBlock2({
+  type: "logo",
+  name: "Logo",
+  description: "The active brand's logo",
+  category: "content",
+  icon: "badge-check",
+  keywords: ["brand", "theme"],
+  defaultProps: { variant: "auto", height: 32, align: "left" },
+  split: "none",
+  styleGroups: ["spacing", "flow"],
+  inspector: [
+    {
+      title: "Logo",
+      fields: [
+        { kind: "number", prop: "height", label: "Height", min: 8, max: 400, unit: "px" },
+        alignField,
+        {
+          kind: "select",
+          prop: "variant",
+          label: "Variant",
+          options: [
+            { value: "auto", label: "Automatic" },
+            { value: "light", label: "Standard" },
+            { value: "dark", label: "For dark backgrounds" }
+          ]
+        }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, theme, mode, style }) => {
+    const onDark = props.variant === "dark" || props.variant === "auto" && !!style.background && isDarkColor(style.background);
+    const src = onDark && theme.logoDark || theme.logo;
+    const justify = props.align === "center" ? "center" : props.align === "right" ? "flex-end" : "flex-start";
+    const content = src && isSafeUrl(src, { allowData: true }) ? h3("img", { src, alt: theme.logoAlt ?? `${theme.name} logo`, style: { height: `${props.height}px`, width: "auto", "max-width": "100%", display: "block" }, draggable: "false" }) : mode === "design" ? h3("div", { class: "bp-logo-placeholder", style: { height: `${props.height}px` } }, theme.name || "Logo") : h3("div", { style: { height: `${props.height}px` } });
+    return h3("div", { class: "bp-logo", style: cssText2({ ...css, display: "flex", "justify-content": justify }) }, content);
+  }
+});
+var dividerBlock = defineBlock2({
+  type: "divider",
+  name: "Divider",
+  category: "content",
+  icon: "minus",
+  keywords: ["rule", "line", "separator", "hr"],
+  defaultProps: { thickness: 1, color: "$colors.border", lineStyle: "solid", width: 100 },
+  split: "none",
+  styleGroups: ["spacing", "flow"],
+  inspector: [
+    {
+      title: "Divider",
+      fields: [
+        { kind: "number", prop: "thickness", label: "Thickness", min: 1, max: 20, unit: "px" },
+        { kind: "color", prop: "color", label: "Colour" },
+        {
+          kind: "segmented",
+          prop: "lineStyle",
+          label: "Style",
+          options: [
+            { value: "solid", label: "Solid" },
+            { value: "dashed", label: "Dashed" },
+            { value: "dotted", label: "Dotted" }
+          ]
+        },
+        { kind: "number", prop: "width", label: "Width", min: 5, max: 100, unit: "%" }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, theme }) => h3("div", { class: "bp-divider", style: cssText2({ ...css, display: "flex", "justify-content": "center" }) }, h3("div", { style: { width: `${props.width}%`, "border-top": `${props.thickness}px ${props.lineStyle} ${resolveValue(props.color, theme, theme.colors.border)}` } }))
+});
+var spacerBlock = defineBlock2({
+  type: "spacer",
+  name: "Spacer",
+  category: "content",
+  icon: "move-vertical",
+  keywords: ["gap", "space", "padding"],
+  defaultProps: { height: 24 },
+  split: "none",
+  styleGroups: ["flow"],
+  inspector: [{ title: "Spacer", fields: [{ kind: "number", prop: "height", label: "Height", min: 1, max: 600, unit: "px" }] }],
+  render: ({ h: h3, props, mode }) => h3("div", { class: ["bp-spacer", mode === "design" && "bp-spacer--design"], style: { height: `${props.height}px` } })
+});
+var buttonBlock = defineBlock2({
+  type: "button",
+  name: "Button",
+  description: "A hyperlink styled as a button",
+  category: "content",
+  icon: "mouse-pointer-click",
+  keywords: ["link", "cta", "url"],
+  defaultProps: { label: "View online", url: "https://", variant: "filled", color: "$colors.primary", align: "left", size: "md" },
+  split: "none",
+  styleGroups: ["typography", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Button",
+      fields: [
+        { kind: "text", prop: "label", label: "Label" },
+        { kind: "text", prop: "url", label: "URL", placeholder: "https://\u2026 or {{ token }}" },
+        {
+          kind: "segmented",
+          prop: "variant",
+          label: "Style",
+          options: [
+            { value: "filled", label: "Filled" },
+            { value: "outline", label: "Outline" },
+            { value: "link", label: "Link" }
+          ]
+        },
+        { kind: "color", prop: "color", label: "Colour" },
+        {
+          kind: "segmented",
+          prop: "size",
+          label: "Size",
+          options: [
+            { value: "sm", label: "S" },
+            { value: "md", label: "M" },
+            { value: "lg", label: "L" }
+          ]
+        },
+        alignField
+      ]
+    }
+  ],
+  validate: ({ props }) => {
+    const url = String(props.url ?? "");
+    return url && !url.includes("{{") && !isSafeUrl(url) ? [{ severity: "warning", code: "invalid-url", message: `Button URL "${url}" is not a valid http(s) or mailto link`, prop: "url" }] : [];
+  },
+  render: ({ h: h3, css, props, theme, text, style }) => {
+    const color = resolveValue(props.color, theme, theme.colors.primary);
+    const pad = props.size === "sm" ? "5px 10px" : props.size === "lg" ? "11px 22px" : "8px 16px";
+    const fontSize = props.size === "sm" ? style.fontSize - 1 : props.size === "lg" ? style.fontSize + 2 : style.fontSize;
+    const base = { display: "inline-block", padding: props.variant === "link" ? "0" : pad, "border-radius": `${theme.radius ?? 6}px`, "font-weight": "600", "font-size": `${fontSize}px`, "text-decoration": props.variant === "link" ? "underline" : "none", "font-family": style.fontFamily, "line-height": "1.2" };
+    if (props.variant === "filled") Object.assign(base, { background: color, color: isDarkColor(color) ? "#FFFFFF" : theme.colors.text });
+    else if (props.variant === "outline") Object.assign(base, { border: `1.5px solid ${color}`, color });
+    else Object.assign(base, { color });
+    const url = typeof props.url === "string" ? props.url : "";
+    const justify = props.align === "center" ? "center" : props.align === "right" ? "flex-end" : "flex-start";
+    return h3("div", { class: "bp-button", style: cssText2({ ...css, display: "flex", "justify-content": justify }) }, h3("a", { class: "bp-button__link", href: isSafeUrl(url) ? url : void 0, rel: "noopener", style: base }, text("label", "Button")));
+  }
+});
+var calloutBlock = defineBlock2({
+  type: "callout",
+  name: "Callout",
+  description: "Highlighted note or warning",
+  category: "content",
+  icon: "message-square-warning",
+  keywords: ["note", "warning", "alert", "notice", "info"],
+  defaultProps: () => ({ title: "Important", content: createRichText("Add the note here."), tone: "info", icon: true }),
+  defaultTextStyle: "body",
+  defaultFlow: { keepTogether: true },
+  split: "none",
+  styleGroups: ["typography", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Callout",
+      fields: [
+        { kind: "text", prop: "title", label: "Title" },
+        { kind: "richtext", prop: "content", label: "Content" },
+        {
+          kind: "select",
+          prop: "tone",
+          label: "Tone",
+          options: [
+            { value: "info", label: "Information" },
+            { value: "success", label: "Success" },
+            { value: "warning", label: "Warning" },
+            { value: "danger", label: "Danger" },
+            { value: "neutral", label: "Neutral" }
+          ]
+        },
+        { kind: "toggle", prop: "icon", label: "Show icon" }
+      ]
+    }
+  ],
+  canvas: { inlineEdit: { prop: "content", kind: "richtext" }, label: (p) => p.title || "Callout" },
+  render: ({ h: h3, css, props, theme, text, richText, partAttrs }) => {
+    const tones = { info: theme.colors.secondary, success: theme.colors.success ?? "#1E8E5A", warning: theme.colors.warning ?? "#C77D0A", danger: theme.colors.danger ?? "#C0392B", neutral: theme.colors.mutedText };
+    const accent = tones[props.tone] ?? theme.colors.secondary;
+    const glyphs = { info: "i", warning: "!", danger: "!" };
+    const icon = glyphs[props.tone] ?? (props.tone === "success" ? checkMark(11, "#fff") : props.tone === "neutral" ? dotMark(11, "#fff") : "i");
+    return h3(
+      "div",
+      { class: ["bp-callout", `bp-callout--${props.tone}`], style: cssText2({ ...css, display: "flex", gap: "12px", padding: css["padding"] ?? "12px 14px", "border-left": `3px solid ${accent}`, background: css["background"] ?? mixWithWhite(accent), "border-radius": `${theme.radius ?? 6}px` }) },
+      props.icon ? h3("div", { class: "bp-callout__icon", style: { color: "#fff", background: accent, "font-weight": "700", "font-size": "11px", width: "18px", height: "18px", "border-radius": "9px", display: "flex", "align-items": "center", "justify-content": "center", "flex-shrink": "0", "margin-top": "1px" } }, icon) : null,
+      h3("div", { class: "bp-callout__body", style: { flex: "1", "min-width": "0" } }, props.title ? h3("div", { class: "bp-callout__title", style: { "font-weight": "600", "margin-bottom": "3px" } }, text("title")) : null, h3("div", { class: "bp-callout__content", ...partAttrs("text") }, richText("content")))
+    );
+  }
+});
+function mixWithWhite(hex, amount = 0.92) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return "transparent";
+  const n = parseInt(m[1], 16);
+  const c = [n >> 16 & 255, n >> 8 & 255, n & 255].map((v) => Math.round(v + (255 - v) * amount));
+  return `#${c.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+var quoteBlock = defineBlock2({
+  type: "quote",
+  name: "Quote",
+  category: "content",
+  icon: "quote",
+  keywords: ["blockquote", "testimonial", "citation"],
+  defaultProps: () => ({ content: createRichText("A memorable statement."), attribution: "" }),
+  defaultTextStyle: "lead",
+  defaultStyle: { fontStyle: "italic" },
+  defaultFlow: { keepTogether: true },
+  split: "none",
+  styleGroups: ["textStyle", "typography", "alignment", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Quote",
+      fields: [
+        { kind: "richtext", prop: "content", label: "Quote" },
+        { kind: "text", prop: "attribution", label: "Attribution", placeholder: "\u2014 Name, role" }
+      ]
+    }
+  ],
+  canvas: { inlineEdit: { prop: "content", kind: "richtext" } },
+  render: ({ h: h3, css, props, theme, richText, text, partAttrs }) => h3(
+    "blockquote",
+    { class: "bp-quote", style: cssText2({ ...css, margin: "0", "padding-left": "16px", "border-left": `3px solid ${theme.colors.accent}` }) },
+    h3("div", { class: "bp-quote__content", ...partAttrs("text") }, richText("content")),
+    props.attribution ? h3("div", { class: "bp-quote__attribution", style: { "font-style": "normal", "font-size": `${Math.max(8, Math.round(Number(css["font-size"]?.replace("px", "")) * 0.8))}px`, color: theme.colors.mutedText, "margin-top": "6px" } }, text("attribution")) : null
+  )
+});
+var fieldBlock = defineBlock2({
+  type: "field",
+  name: "Field",
+  description: "A labelled data value",
+  category: "data",
+  icon: "tag",
+  keywords: ["key value", "label", "dynamic text", "binding", "data"],
+  defaultProps: { label: "Label", value: "", layout: "stacked", fallback: "\u2014", labelWidth: 40 },
+  defaultTextStyle: "body",
+  split: "none",
+  styleGroups: ["typography", "alignment", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Field",
+      fields: [
+        { kind: "text", prop: "label", label: "Label" },
+        { kind: "binding", prop: "value", label: "Value", placeholder: "Pick a field" },
+        { kind: "text", prop: "fallback", label: "Fallback when empty", allowTokens: false },
+        {
+          kind: "segmented",
+          prop: "layout",
+          label: "Layout",
+          options: [
+            { value: "stacked", label: "Stacked" },
+            { value: "inline", label: "Inline" }
+          ]
+        },
+        { kind: "number", prop: "labelWidth", label: "Label width", min: 10, max: 80, unit: "%", when: (p) => p.layout === "inline" }
+      ]
+    }
+  ],
+  canvas: { label: (p) => p.label || "Field" },
+  render: ({ h: h3, css, props, theme, text, mode, node }) => {
+    const b = node.bindings.value;
+    const raw = props.value;
+    const display = raw === void 0 || raw === null || raw === "" ? props.fallback : String(raw);
+    const value = mode === "design" && b ? h3("span", { class: "bp-token", "data-expr": b.expr, title: b.expr }, b.label) : display;
+    const label = h3("div", { class: "bp-field__label", style: { color: theme.colors.mutedText, "font-size": "0.85em", "text-transform": "uppercase", "letter-spacing": "0.04em", "font-weight": "600" } }, text("label"));
+    const val = h3("div", { class: "bp-field__value", style: { "font-weight": "500" } }, value);
+    if (props.layout === "inline") return h3("div", { class: "bp-field bp-field--inline", style: cssText2({ ...css, display: "flex", gap: "8px", "align-items": "baseline" }) }, h3("div", { style: { flex: `0 0 ${props.labelWidth}%` } }, label), h3("div", { style: { flex: "1", "min-width": "0" } }, val));
+    return h3("div", { class: "bp-field", style: cssText2({ ...css, display: "flex", "flex-direction": "column", gap: "2px" }) }, label, val);
+  }
+});
+var kpiBlock = defineBlock2({
+  type: "kpi",
+  name: "Statistic",
+  description: "Big number with label and trend",
+  category: "data",
+  icon: "trending-up",
+  keywords: ["kpi", "metric", "number", "stat", "big number"],
+  defaultProps: { label: "Portfolio value", value: "", caption: "", trend: "", trendFormat: "percent", accent: "$colors.primary", align: "left", size: "md" },
+  defaultTextStyle: "body",
+  defaultFlow: { keepTogether: true },
+  split: "none",
+  styleGroups: ["typography", "spacing", "background", "border", "flow"],
+  inspector: [
+    {
+      title: "Statistic",
+      fields: [
+        { kind: "text", prop: "label", label: "Label" },
+        { kind: "binding", prop: "value", label: "Value", valueType: ["number", "currency", "percent", "string"] },
+        { kind: "binding", prop: "trend", label: "Trend", valueType: ["number", "percent", "string"], placeholder: "e.g. portfolio.change" },
+        {
+          kind: "segmented",
+          prop: "trendFormat",
+          label: "Trend format",
+          options: [
+            { value: "percent", label: "%" },
+            { value: "number", label: "#" },
+            { value: "text", label: "Aa" }
+          ]
+        },
+        { kind: "text", prop: "caption", label: "Caption" },
+        { kind: "color", prop: "accent", label: "Accent" },
+        alignField,
+        {
+          kind: "segmented",
+          prop: "size",
+          label: "Size",
+          options: [
+            { value: "sm", label: "S" },
+            { value: "md", label: "M" },
+            { value: "lg", label: "L" }
+          ]
+        }
+      ]
+    }
+  ],
+  canvas: { label: (p) => p.label || "Statistic" },
+  render: ({ h: h3, css, props, theme, text, mode, node, format }) => {
+    const accent = resolveValue(props.accent, theme, theme.colors.primary);
+    const size = props.size === "sm" ? 20 : props.size === "lg" ? 36 : 28;
+    const b = node.bindings.value;
+    const valueNode = h3("span", { class: mode === "design" && b ? "bp-cell--bound" : void 0, title: b?.expr }, props.value === void 0 || props.value === null || props.value === "" ? "\u2014" : String(props.value));
+    let trendNode = null;
+    const tRaw = props.trend;
+    if (tRaw !== void 0 && tRaw !== null && tRaw !== "") {
+      const n = Number(tRaw);
+      const positive = Number.isFinite(n) ? n >= 0 : true;
+      const label = props.trendFormat === "percent" && Number.isFinite(n) ? `${n > 0 ? "+" : ""}${new Intl.NumberFormat(format.locale, { style: "percent", maximumFractionDigits: 1 }).format(n)}` : props.trendFormat === "number" && Number.isFinite(n) ? `${n > 0 ? "+" : ""}${new Intl.NumberFormat(format.locale, { maximumFractionDigits: 2 }).format(n)}` : String(tRaw);
+      const tb = node.bindings.trend;
+      const trendColor = positive ? theme.colors.success ?? "#1E8E5A" : theme.colors.danger ?? "#C0392B";
+      trendNode = h3(
+        "span",
+        { class: ["bp-kpi__trend", positive ? "bp-kpi__trend--up" : "bp-kpi__trend--down", mode === "design" && tb ? "bp-cell--bound" : ""], title: tb?.expr, style: { color: trendColor, "font-weight": "600", "font-size": `${Math.round(size * 0.9)}px`, display: "inline-flex", "align-items": "center", gap: "4px", height: `${Math.round(size * 1.05)}px` } },
+        triangleMark(positive ? "up" : "down", Math.max(9, Math.round(size * 0.55)), trendColor),
+        h3("span", null, label)
+      );
+    }
+    return h3(
+      "div",
+      { class: "bp-kpi", style: cssText2({ ...css, "text-align": props.align, "border-top": css["border"] ? void 0 : `3px solid ${accent}`, "padding-top": css["padding"] ? void 0 : "8px" }) },
+      h3("div", { class: "bp-kpi__label", style: { color: theme.colors.mutedText, "font-size": "0.9em", "text-transform": "uppercase", "letter-spacing": "0.05em", "font-weight": "600", display: "flex", gap: "6px", "align-items": "center", "justify-content": props.align === "center" ? "center" : props.align === "right" ? "flex-end" : "flex-start", "flex-wrap": "wrap" } }, text("label"), mode === "design" && b ? h3("span", { class: "bp-token", "data-expr": b.expr, style: { "text-transform": "none", "letter-spacing": "0", "font-weight": "500" } }, b.label) : null),
+      h3("div", { class: "bp-kpi__value", style: { "font-size": `${size}px`, "font-weight": "700", "line-height": "1.15", color: theme.colors.text, "font-family": theme.typography.headingFont, "letter-spacing": "-0.02em", "margin-top": "4px", display: "flex", "align-items": "baseline", gap: "8px", "justify-content": props.align === "center" ? "center" : props.align === "right" ? "flex-end" : "flex-start", "flex-wrap": "wrap" } }, valueNode, trendNode),
+      props.caption ? h3("div", { class: "bp-kpi__caption", style: { color: theme.colors.mutedText, "font-size": "0.9em", "margin-top": "3px" } }, text("caption")) : null
+    );
+  }
+});
+var signatureBlock = defineBlock2({
+  type: "signature",
+  name: "Signature",
+  description: "Signature line with name and date",
+  category: "content",
+  icon: "pen-line",
+  keywords: ["sign", "approval"],
+  defaultProps: { label: "Signed", name: "", role: "", showDate: true, lineWidth: 240 },
+  defaultTextStyle: "body",
+  defaultFlow: { keepTogether: true },
+  split: "none",
+  styleGroups: ["typography", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Signature",
+      fields: [
+        { kind: "text", prop: "label", label: "Label" },
+        { kind: "text", prop: "name", label: "Name", placeholder: "{{ adviser.name }}" },
+        { kind: "text", prop: "role", label: "Role" },
+        { kind: "toggle", prop: "showDate", label: "Date line" },
+        { kind: "number", prop: "lineWidth", label: "Line width", min: 80, max: 600, unit: "px" }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, theme, text }) => {
+    const line = (label, content) => h3("div", { style: { width: `${props.lineWidth}px`, "max-width": "100%" } }, h3("div", { style: { height: "36px", "border-bottom": `1px solid ${theme.colors.text}` } }), h3("div", { style: { "font-size": "0.85em", color: theme.colors.mutedText, "margin-top": "4px" } }, label), content.length ? h3("div", { style: { "font-weight": "600", "margin-top": "2px" } }, content) : null);
+    return h3("div", { class: "bp-signature", style: cssText2({ ...css, display: "flex", gap: "32px", "flex-wrap": "wrap" }) }, line(props.label || "Signed", [...text("name"), ...props.role ? [h3("div", { style: { "font-weight": "400", color: theme.colors.mutedText } }, text("role"))] : []]), props.showDate ? line("Date", []) : null);
+  }
+});
+var dateBlock = defineBlock2({
+  type: "date",
+  name: "Date",
+  description: "Today's date or a bound date field",
+  category: "content",
+  icon: "calendar",
+  keywords: ["today", "generated", "date"],
+  defaultProps: { source: "now", value: "", pattern: "d MMMM yyyy", prefix: "" },
+  defaultTextStyle: "body",
+  split: "none",
+  styleGroups: ["textStyle", "typography", "alignment", "spacing", "flow"],
+  inspector: [
+    {
+      title: "Date",
+      fields: [
+        {
+          kind: "segmented",
+          prop: "source",
+          label: "Source",
+          options: [
+            { value: "now", label: "Today" },
+            { value: "binding", label: "Field" }
+          ]
+        },
+        { kind: "binding", prop: "value", label: "Date field", valueType: ["date", "datetime"], when: (p) => p.source === "binding" },
+        { kind: "text", prop: "pattern", label: "Format", placeholder: "d MMMM yyyy", allowTokens: false },
+        { kind: "text", prop: "prefix", label: "Prefix", placeholder: "Prepared on " }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, format, text, mode, node }) => {
+    const d = props.source === "now" ? format.now ?? /* @__PURE__ */ new Date() : props.value;
+    const b = node.bindings.value;
+    const body = mode === "design" && props.source === "binding" && b ? h3("span", { class: "bp-token", "data-expr": b.expr }, b.label) : formatDate(d, props.pattern || void 0, format);
+    return h3("div", { class: "bp-date", style: cssText2(css) }, text("prefix"), body);
+  }
+});
+var pageNumberBlock = defineBlock2({
+  type: "pageNumber",
+  name: "Page number",
+  category: "content",
+  icon: "hash",
+  keywords: ["page", "of", "footer", "numbering"],
+  defaultProps: { format: "Page {{page.number}} of {{page.total}}", align: "right" },
+  defaultTextStyle: "caption",
+  split: "none",
+  styleGroups: ["textStyle", "typography", "spacing"],
+  inspector: [
+    {
+      title: "Page number",
+      fields: [
+        { kind: "text", prop: "format", label: "Format", placeholder: "Page {{page.number}} of {{page.total}}" },
+        alignField
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, text }) => h3("div", { class: "bp-page-number", style: cssText2({ ...css, "text-align": props.align }) }, text("format"))
+});
+var timestampBlock = defineBlock2({
+  type: "timestamp",
+  name: "Generated at",
+  description: "Date and time the document was generated",
+  category: "content",
+  icon: "clock",
+  keywords: ["generated", "printed", "timestamp", "time"],
+  defaultProps: { prefix: "Generated ", pattern: "d MMM yyyy, HH:mm", align: "left" },
+  defaultTextStyle: "caption",
+  split: "none",
+  styleGroups: ["textStyle", "typography", "spacing"],
+  inspector: [
+    {
+      title: "Generated at",
+      fields: [
+        { kind: "text", prop: "prefix", label: "Prefix" },
+        { kind: "text", prop: "pattern", label: "Format", allowTokens: false },
+        alignField
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, format, text }) => h3("div", { class: "bp-timestamp", style: cssText2({ ...css, "text-align": props.align }) }, text("prefix"), formatDate(format.now ?? /* @__PURE__ */ new Date(), props.pattern || void 0, format, true))
+});
+
+// src/blocks/layout.ts
+import { defineBlock as defineBlock3, cssText as cssText3, resolveValue as resolveValue2 } from "@broadpaper/core";
+var containerBlock = defineBlock3({
+  type: "container",
+  name: "Container",
+  description: "Groups blocks with shared padding and background",
+  category: "layout",
+  icon: "square-dashed",
+  keywords: ["group", "box", "wrapper"],
+  defaultProps: { padding: 0, gap: null },
+  container: { accepts: ["@blocks", "@rows"] },
+  split: "children",
+  styleGroups: ["spacing", "background", "border", "flow"],
+  inspector: [
+    {
+      title: "Container",
+      fields: [
+        { kind: "number", prop: "padding", label: "Padding", min: 0, max: 120, unit: "px" },
+        { kind: "number", prop: "gap", label: "Block gap", min: 0, max: 120, unit: "px", description: "Overrides the document block gap" }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, children, styles, props, node, mode }) => h3(
+    "div",
+    { class: "bp-container", style: cssText3({ ...css, padding: props.padding ? `${props.padding}px` : css["padding"] }) },
+    h3("div", { class: "bp-stack", style: { gap: `${props.gap ?? styles.spacing.blockGap}px` }, "data-dropzone": node.nodeId }, children.length === 0 && mode === "design" ? h3("div", { class: "bp-empty-column" }, "Drop blocks here") : children)
+  )
+});
+var cardBlock = defineBlock3({
+  type: "card",
+  name: "Card",
+  description: "Panel with border, background and optional title",
+  category: "layout",
+  icon: "panel-top",
+  keywords: ["panel", "box", "surface"],
+  defaultProps: { title: "", padding: null, accent: false, accentColor: "$colors.primary" },
+  container: { accepts: ["@blocks", "@rows"] },
+  defaultFlow: { keepTogether: true },
+  split: "children",
+  styleGroups: ["spacing", "background", "border", "flow"],
+  inspector: [
+    {
+      title: "Card",
+      fields: [
+        { kind: "text", prop: "title", label: "Title" },
+        { kind: "number", prop: "padding", label: "Padding", min: 0, max: 120, unit: "px" },
+        { kind: "toggle", prop: "accent", label: "Accent bar" },
+        { kind: "color", prop: "accentColor", label: "Accent colour", when: (p) => !!p.accent }
+      ]
+    }
+  ],
+  canvas: { label: (p) => p.title || "Card" },
+  render: ({ h: h3, css, children, styles, props, theme, text, node, mode }) => {
+    const card = styles.card;
+    const pad = props.padding ?? card.padding ?? 16;
+    const style = {
+      ...css,
+      background: css["background"] ?? resolveValue2(card.background, theme, theme.colors.surface),
+      border: css["border"] ?? `${card.borderWidth ?? 1}px solid ${resolveValue2(card.borderColor, theme, theme.colors.border)}`,
+      "border-radius": css["border-radius"] ?? `${card.borderRadius ?? theme.radius ?? 6}px`,
+      padding: `${pad}px`,
+      "box-shadow": card.shadow ? "0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.1)" : void 0,
+      "border-top": props.accent ? `3px solid ${resolveValue2(props.accentColor, theme, theme.colors.primary)}` : void 0
+    };
+    return h3(
+      "div",
+      { class: "bp-card", style: cssText3(style) },
+      props.title ? h3("div", { class: "bp-card__title", style: { "font-family": theme.typography.headingFont, "font-weight": "600", "font-size": "1.1em", "margin-bottom": "8px", color: theme.colors.primary } }, text("title")) : null,
+      h3("div", { class: "bp-stack", style: { gap: `${styles.spacing.blockGap}px` }, "data-dropzone": node.nodeId }, children.length === 0 && mode === "design" ? h3("div", { class: "bp-empty-column" }, "Drop blocks here") : children)
+    );
+  }
+});
+var pageBreakBlock = defineBlock3({
+  type: "pageBreak",
+  name: "Page break",
+  description: "Start the following content on a new page",
+  category: "layout",
+  icon: "scissors",
+  keywords: ["break", "new page"],
+  defaultProps: {},
+  defaultFlow: { breakAfter: "page" },
+  split: "none",
+  styleGroups: [],
+  render: ({ h: h3, mode }) => mode === "design" ? h3("div", { class: "bp-page-break" }, h3("span", { class: "bp-page-break__label" }, "Page break")) : h3("div", { class: "bp-page-break bp-page-break--print", style: { height: "0" } })
+});
+var keepTogetherBlock = defineBlock3({
+  type: "keepTogether",
+  name: "Keep together",
+  description: "Blocks inside never split across pages",
+  category: "layout",
+  icon: "link",
+  keywords: ["group", "no split", "together"],
+  defaultProps: { label: "" },
+  container: { accepts: ["@blocks", "@rows"] },
+  defaultFlow: { keepTogether: true },
+  split: "children",
+  styleGroups: ["spacing", "flow"],
+  render: ({ h: h3, css, children, styles, node, mode }) => h3("div", { class: "bp-keep-together", style: cssText3(css) }, h3("div", { class: "bp-stack", style: { gap: `${styles.spacing.blockGap}px` }, "data-dropzone": node.nodeId }, children.length === 0 && mode === "design" ? h3("div", { class: "bp-empty-column" }, "Drop blocks here") : children))
+});
+var conditionalBlock = defineBlock3({
+  type: "conditional",
+  name: "Conditional",
+  description: "Show the blocks inside only when a rule is true",
+  category: "data",
+  icon: "git-branch",
+  keywords: ["if", "condition", "rule", "visibility", "show when"],
+  defaultProps: () => ({ condition: { op: "and", rules: [] }, label: "" }),
+  container: { accepts: ["@blocks", "@rows"], conditional: { conditionProp: "condition" } },
+  split: "children",
+  styleGroups: ["spacing", "flow"],
+  bindings: [{ prop: "condition", kind: "condition" }],
+  inspector: [{ title: "Show when", fields: [{ kind: "condition", prop: "condition", label: "Rule", fullWidth: true }] }],
+  canvas: { label: (p) => p.label || "Conditional" },
+  render: ({ h: h3, css, children, styles, props, node, mode }) => {
+    const result = props.__conditionResult !== false;
+    if (mode === "preview" && !result) return null;
+    return h3(
+      "div",
+      { class: ["bp-conditional", !result && "bp-conditional--false"], style: cssText3(css) },
+      mode === "design" ? h3("div", { class: "bp-conditional__badge", contenteditable: "false" }, result ? "Shown when rule is true" : "Hidden with sample data") : null,
+      h3("div", { class: "bp-stack", style: { gap: `${styles.spacing.blockGap}px` }, "data-dropzone": node.nodeId }, children.length === 0 && mode === "design" ? h3("div", { class: "bp-empty-column" }, "Drop conditional blocks here") : children)
+    );
+  }
+});
+var repeaterBlock = defineBlock3({
+  type: "repeater",
+  name: "Repeater",
+  description: "Repeats the blocks inside for every item in a list",
+  category: "data",
+  icon: "repeat",
+  keywords: ["loop", "for each", "list", "items"],
+  defaultProps: { source: "", alias: "item", keepItemTogether: true, gap: null, limit: null, emptyMessage: "", separator: false },
+  container: { accepts: ["@blocks", "@rows"], repeat: { collectionProp: "source", aliasProp: "alias", keepItemTogetherProp: "keepItemTogether", limitProp: "limit" } },
+  split: "children",
+  styleGroups: ["spacing", "flow"],
+  bindings: [{ prop: "source", kind: "collection", alias: "alias" }, { prop: "emptyMessage", kind: "template" }],
+  inspector: [
+    {
+      title: "Repeat",
+      fields: [
+        { kind: "collection", prop: "source", label: "For each item in", placeholder: "Pick a list" },
+        { kind: "text", prop: "alias", label: "Item name", description: (p) => `The name each item goes by inside the repeater, e.g. {{ ${typeof p.alias === "string" && p.alias.trim() ? p.alias.trim() : "item"}.name }}`, allowTokens: false },
+        { kind: "toggle", prop: "keepItemTogether", label: "Keep each item on one page" },
+        { kind: "toggle", prop: "separator", label: "Divider between items" },
+        { kind: "number", prop: "gap", label: "Gap between items", min: 0, max: 120, unit: "px" },
+        { kind: "number", prop: "limit", label: "Maximum items", min: 1, max: 1e4 },
+        { kind: "text", prop: "emptyMessage", label: "Message when empty", description: "Printed instead of the items when the list is empty.", fullWidth: true }
+      ]
+    }
+  ],
+  canvas: { label: (p) => p.source ? `Repeat ${p.source}` : "Repeater" },
+  render: ({ h: h3, css, children, styles, props, node, mode, theme, text }) => {
+    const count = Number(props.__itemCount ?? 0);
+    const b = node.bindings.source;
+    if (children.length === 0 && mode === "preview") {
+      return props.emptyMessage ? h3("div", { class: "bp-repeater__empty", style: cssText3({ ...css, color: theme.colors.mutedText }) }, text("emptyMessage")) : null;
+    }
+    const gap = props.gap ?? styles.spacing.blockGap;
+    const items = props.separator ? children.flatMap((c, i) => i === 0 ? [c] : [h3("div", { class: "bp-repeater__separator", style: { "border-top": `1px solid ${theme.colors.border}` } }), c]) : children;
+    return h3(
+      "div",
+      { class: "bp-repeater", style: cssText3(css) },
+      // Design mode draws one iteration and the badge has to admit it, or a
+      // three-item repeater and a thirty-item one look identical on the canvas.
+      mode === "design" ? h3("div", { class: "bp-repeater__badge", contenteditable: "false" }, b ? `${b.label} \xB7 ${children.length >= count ? `repeats ${count} time${count === 1 ? "" : "s"}` : `showing ${children.length} of ${count} sample items`}` : "Choose a list to repeat over") : null,
+      h3("div", { class: "bp-stack bp-repeater__items", style: { gap: `${gap}px` }, "data-dropzone": node.nodeId }, items.length === 0 && mode === "design" ? h3("div", { class: "bp-empty-column" }, "Drop blocks to repeat here") : items)
+    );
+  }
+});
+
+// src/blocks/table.ts
+import { defineBlock as defineBlock4, cssText as cssText4, resolveValue as resolveValue3, toNumber, toDisplayString, compareValues, getField, isDarkColor as isDarkColor2 } from "@broadpaper/core";
+function defaultColumns() {
+  return [
+    { id: "c1", header: "Name", value: "row.name", width: null },
+    { id: "c2", header: "Value", value: "row.value | number", align: "right", width: 30, total: "sum" }
+  ];
+}
+function aliasOf(props) {
+  const alias = props.alias;
+  return typeof alias === "string" && alias.trim() ? alias.trim() : "row";
+}
+function columnName(id, props) {
+  if (!id || id === "*") return "Every column";
+  const column = (props.columns ?? []).find((c) => c.id === id);
+  return column?.header || column?.value || id;
+}
+var tableBlock = defineBlock4({
+  type: "table",
+  name: "Table",
+  description: "Data table bound to a list, with totals, zebra rows and page-spanning headers",
+  category: "data",
+  icon: "table",
+  keywords: ["grid", "rows", "columns", "data", "list"],
+  defaultProps: () => ({
+    source: "",
+    alias: "row",
+    columns: defaultColumns(),
+    showHeader: true,
+    repeatHeader: true,
+    zebra: true,
+    borders: "inherit",
+    compact: false,
+    fontSize: null,
+    headerBackground: "",
+    headerColor: "",
+    sortBy: "",
+    sortDir: "asc",
+    emptyMessage: "No data",
+    totalsLabel: "Total",
+    conditionalFormats: [],
+    designRows: 3,
+    rowLimit: null
+  }),
+  defaultTextStyle: "body",
+  defaultFlow: { minOrphans: 2, minWidows: 2 },
+  split: "rows",
+  measure: "table",
+  styleGroups: ["typography", "spacing", "flow"],
+  bindings: [
+    { prop: "source", kind: "collection", alias: "alias" },
+    { prop: "columns", kind: "list", items: [{ prop: "value", kind: "value", perItem: true }, { prop: "header", kind: "template" }, { prop: "totalExpr", kind: "value" }] },
+    { prop: "conditionalFormats", kind: "list", items: [{ prop: "condition", kind: "value", perItem: true }] },
+    { prop: "emptyMessage", kind: "template" },
+    { prop: "totalsLabel", kind: "template" }
+  ],
+  inspector: [
+    {
+      title: "Data",
+      fields: [
+        { kind: "collection", prop: "source", label: "Rows from", placeholder: "Pick a list" },
+        { kind: "text", prop: "alias", label: "Row name", description: (p) => `The name each row goes by in column values, e.g. ${aliasOf(p)}.name`, allowTokens: false },
+        { kind: "text", prop: "sortBy", label: "Sort by field", placeholder: "e.g. value", allowTokens: false },
+        {
+          kind: "segmented",
+          prop: "sortDir",
+          label: "Direction",
+          options: [
+            { value: "asc", label: "Ascending" },
+            { value: "desc", label: "Descending" }
+          ],
+          when: (p) => !!p.sortBy
+        },
+        { kind: "number", prop: "rowLimit", label: "Maximum rows", min: 1, max: 1e5 },
+        { kind: "text", prop: "emptyMessage", label: "Message when empty", description: "Printed instead of the table when the list has no rows.", fullWidth: true }
+      ]
+    },
+    { title: "Columns", fields: [{ kind: "columns", prop: "columns", label: "Columns", fullWidth: true }] },
+    {
+      title: "Appearance",
+      collapsed: true,
+      fields: [
+        { kind: "toggle", prop: "showHeader", label: "Header row" },
+        { kind: "toggle", prop: "repeatHeader", label: "Repeat header on each page", when: (p) => p.showHeader !== false },
+        { kind: "toggle", prop: "zebra", label: "Zebra rows" },
+        { kind: "toggle", prop: "compact", label: "Compact rows" },
+        {
+          kind: "select",
+          prop: "borders",
+          label: "Borders",
+          options: [
+            { value: "inherit", label: "Document default" },
+            { value: "horizontal", label: "Horizontal lines" },
+            { value: "all", label: "Full grid" },
+            { value: "outer", label: "Outer only" },
+            { value: "none", label: "None" }
+          ]
+        },
+        { kind: "color", prop: "headerBackground", label: "Header background", allowTransparent: true },
+        { kind: "color", prop: "headerColor", label: "Header text" },
+        { kind: "number", prop: "fontSize", label: "Font size", min: 6, max: 24, unit: "px" },
+        { kind: "text", prop: "totalsLabel", label: "Totals label" }
+      ]
+    },
+    {
+      title: "Conditional formatting",
+      collapsed: true,
+      fields: [
+        {
+          kind: "list",
+          prop: "conditionalFormats",
+          label: "Rules",
+          itemLabel: "Rule",
+          fullWidth: true,
+          // A rule reads as "Drift · when abs(a.drift) > 0.03" rather than "c5",
+          // which is an internal id the designer never chose and cannot look up.
+          itemSummary: (rule, i, props) => {
+            const column = columnName(String(rule.columnId ?? ""), props);
+            const when = String(rule.condition ?? "").trim();
+            return when ? `${column} \xB7 when ${when}` : `${column} \xB7 Rule ${i + 1}`;
+          },
+          fields: [
+            {
+              kind: "select",
+              prop: "columnId",
+              label: "Column",
+              optionsFrom: (props) => [{ value: "*", label: "Every column" }, ...(props.columns ?? []).map((c) => ({ value: c.id, label: c.header || c.id }))]
+            },
+            { kind: "expression", prop: "condition", label: "When", placeholder: "row.value < 0", description: (p) => `Checked once per row, e.g. ${aliasOf(p)}.value < 0` },
+            { kind: "color", prop: "color", label: "Text colour" },
+            { kind: "color", prop: "background", label: "Background", allowTransparent: true },
+            { kind: "toggle", prop: "bold", label: "Bold" }
+          ]
+        }
+      ]
+    }
+  ],
+  validate: ({ props, checkExpression }) => {
+    const issues = [];
+    if (!Array.isArray(props.columns) || props.columns.length === 0) issues.push({ severity: "warning", code: "empty-content", message: "Table has no columns", prop: "columns" });
+    for (const c of props.columns ?? []) if (!c.value?.trim()) issues.push({ severity: "warning", code: "missing-required", message: `Column "${c.header || c.id}" has no value`, prop: `columns.${c.id}.value` });
+    for (const c of props.columns ?? []) if (c.totalExpr?.trim()) issues.push(...checkExpression(c.totalExpr, `columns.${c.id}.totalExpr`));
+    return issues;
+  },
+  canvas: { label: (p) => p.source ? `Table \xB7 ${p.source}` : "Table" },
+  resolve: ({ props, mode, evaluateIn, evaluate: evaluate2, warn, theme }) => {
+    const alias = props.alias || "row";
+    let items = Array.isArray(props.source) ? props.source : [];
+    if (props.sortBy) {
+      const dir = props.sortDir === "desc" ? -1 : 1;
+      items = [...items].sort((a, b) => compareValues(getField(a, props.sortBy), getField(b, props.sortBy)) * dir);
+    }
+    const total = items.length;
+    if (props.rowLimit) items = items.slice(0, props.rowLimit);
+    const allItems = items;
+    if (mode === "design") items = items.slice(0, Math.max(1, props.designRows || 3));
+    const columns = Array.isArray(props.columns) ? props.columns : [];
+    const formats = Array.isArray(props.conditionalFormats) ? props.conditionalFormats : [];
+    const rows = items.map((item, index) => {
+      const vars = { [alias]: item, item, row: item, index: index + 1, first: index === 0, last: index === items.length - 1, count: items.length };
+      const rowStyle = {};
+      const cellStyles = {};
+      for (const f of formats) {
+        if (!f.condition?.trim()) continue;
+        let ok = false;
+        try {
+          ok = !!evaluateIn(f.condition, vars);
+        } catch {
+          ok = false;
+        }
+        if (!ok) continue;
+        const st = {};
+        if (f.color) st["color"] = resolveValue3(f.color, theme, theme.colors.text);
+        if (f.background) st["background"] = resolveValue3(f.background, theme, "transparent");
+        if (f.bold) st["font-weight"] = "700";
+        if (f.columnId === "*" || !f.columnId) Object.assign(rowStyle, st);
+        else cellStyles[f.columnId] = { ...cellStyles[f.columnId] ?? {}, ...st };
+      }
+      const cells = columns.map((c) => {
+        let text = "";
+        if (c.value?.trim()) {
+          try {
+            text = toDisplayString(evaluateIn(c.value, vars));
+          } catch (e) {
+            warn(`Column "${c.header}" failed: ${e.message}`);
+          }
+        }
+        return { text, style: cellStyles[c.id] };
+      });
+      return { cells, style: Object.keys(rowStyle).length ? rowStyle : void 0 };
+    });
+    let totals = null;
+    if (columns.some((c) => c.total && c.total !== "none" || c.totalExpr?.trim())) {
+      totals = columns.map((c, i) => {
+        if (c.totalExpr?.trim()) {
+          try {
+            return { text: toDisplayString(evaluateIn(c.totalExpr, { rows: allItems, [alias + "s"]: allItems })) };
+          } catch {
+            return { text: "" };
+          }
+        }
+        if (!c.total || c.total === "none") return { text: i === 0 && !columns[0]?.total ? String(props.totalsLabel ?? "Total") : "" };
+        const values = allItems.map((it) => toNumber(evaluateIn(stripPipes(c.value), { [alias]: it, item: it, row: it }))).filter((n2) => n2 !== null);
+        let n = null;
+        if (c.total === "sum") n = values.reduce((a, b) => a + b, 0);
+        else if (c.total === "avg") n = values.length ? values.reduce((a, b) => a + b, 0) / values.length : null;
+        else if (c.total === "count") n = allItems.length;
+        else if (c.total === "min") n = values.length ? Math.min(...values) : null;
+        else if (c.total === "max") n = values.length ? Math.max(...values) : null;
+        const fmt2 = c.totalFormat?.trim() || extractPipes(c.value);
+        const text = n === null ? "" : fmt2 ? toDisplayString(evaluate2(`(${n}) | ${fmt2}`)) : toDisplayString(n);
+        return { text };
+      });
+      if (totals[0] && totals[0].text === "" && !(columns[0]?.total && columns[0].total !== "none")) totals[0] = { text: String(props.totalsLabel ?? "Total") };
+    }
+    return { __rows: rows, __totals: totals, __rowCount: total, __rowsShown: rows.length };
+  },
+  render: ({ h: h3, css, props, theme, styles, mode, text, node, style }) => {
+    const p = props;
+    const columns = Array.isArray(p.columns) ? p.columns : [];
+    const ts = styles.table;
+    const fontSize = p.fontSize ?? ts.fontSize ?? style.fontSize;
+    const borders = p.borders === "inherit" ? ts.borders ?? "horizontal" : p.borders;
+    const borderColor = resolveValue3(ts.borderColor, theme, theme.colors.border);
+    const bw = ts.borderWidth ?? 1;
+    const padY = p.compact ? Math.max(2, (ts.cellPaddingY ?? 6) - 3) : ts.cellPaddingY ?? 6;
+    const padX = ts.cellPaddingX ?? 8;
+    const headerBg = p.headerBackground ? resolveValue3(p.headerBackground, theme, "") : resolveValue3(ts.headerBackground, theme, theme.table?.headerBackground ?? "#F3F4F6");
+    const headerColor = p.headerColor ? resolveValue3(p.headerColor, theme, "") : resolveValue3(ts.headerColor, theme, headerBg && isDarkColor2(headerBg) ? "#FFFFFF" : theme.colors.text);
+    const zebraBg = resolveValue3(ts.zebraBackground, theme, theme.table?.zebraBackground ?? "#FAFAFB");
+    const cellBorder = (isHeader, last) => {
+      const line = `${bw}px solid ${borderColor}`;
+      switch (borders) {
+        case "all":
+          return { border: line };
+        case "horizontal":
+          return { "border-bottom": last ? line : line, ...isHeader ? { "border-bottom": `${bw * 2}px solid ${borderColor}` } : {} };
+        case "outer":
+          return {};
+        default:
+          return {};
+      }
+    };
+    const rows = p.__rows ?? [];
+    const rowsVNodes = rows.map(
+      (r, i) => h3(
+        "tr",
+        { class: ["bp-table__row", p.zebra && i % 2 === 1 && "bp-table__row--alt"], style: { ...p.zebra && i % 2 === 1 ? { background: zebraBg } : {}, ...r.style ?? {} } },
+        r.cells.map((c, ci) => {
+          const col = columns[ci];
+          return h3("td", { class: ["bp-table__cell", mode === "design" && "bp-cell--bound"], style: { padding: `${padY}px ${padX}px`, "text-align": col?.align ?? "left", "font-weight": col?.bold ? "600" : void 0, "vertical-align": "top", "white-space": col?.wrap === false ? "nowrap" : "normal", overflow: "hidden", "text-overflow": "ellipsis", ...cellBorder(false, i === rows.length - 1), ...c.style ?? {} } }, c.text);
+        })
+      )
+    );
+    const specified = columns.reduce((a, c) => a + (c.width ?? 0), 0);
+    const autoCount = columns.filter((c) => !c.width).length;
+    const autoWidth = autoCount ? Math.max(5, (100 - specified) / autoCount) : 0;
+    const colgroup = h3("colgroup", null, columns.map((c) => h3("col", { style: { width: `${c.width ?? autoWidth}%` } })));
+    const thead = p.showHeader !== false ? h3("thead", { class: "bp-table__head" }, h3("tr", null, columns.map((c) => h3("th", { class: "bp-table__th", style: { padding: `${padY}px ${padX}px`, "text-align": c.align ?? "left", background: headerBg || void 0, color: headerColor, "font-weight": String(ts.headerFontWeight ?? 600), "vertical-align": "bottom", ...cellBorder(true, false) } }, ...text(`columns.${columns.indexOf(c)}.header`, c.header))))) : null;
+    const tfoot = p.__totals ? h3("tfoot", { class: "bp-table__foot" }, h3("tr", null, p.__totals.map((c, ci) => h3("td", { class: "bp-table__total", style: { padding: `${padY}px ${padX}px`, "text-align": columns[ci]?.align ?? "left", "font-weight": "700", "border-top": `${bw * 2}px solid ${borderColor}`, ...borders === "all" ? { border: `${bw}px solid ${borderColor}` } : {} } }, c.text)))) : null;
+    const empty = rows.length === 0;
+    const tableStyle = { width: "100%", "border-collapse": "collapse", "table-layout": "fixed", "font-size": `${fontSize}px`, ...borders === "outer" ? { border: `${bw}px solid ${borderColor}` } : {} };
+    const b = node.bindings.source;
+    return h3(
+      "div",
+      { class: "bp-table-wrap", style: cssText4(css) },
+      // Design mode draws a handful of rows to keep the canvas quick, which is
+      // indistinguishable from a table that only has a handful of rows unless
+      // the badge says so.
+      mode === "design" ? h3("div", { class: "bp-table__badge", contenteditable: "false" }, b ? `${b.label} \xB7 ${rowSampleNote(p.__rowsShown ?? 0, p.__rowCount ?? 0)}` : "Choose a list") : null,
+      h3("table", { class: "bp-table", style: tableStyle }, colgroup, thead, h3("tbody", null, empty ? h3("tr", null, h3("td", { colspan: String(Math.max(1, columns.length)), style: { padding: `${padY * 2}px ${padX}px`, color: theme.colors.mutedText, "text-align": "center", "font-style": "italic" } }, ...text("emptyMessage", "No data"))) : rowsVNodes), tfoot)
+    );
+  }
+});
+function rowSampleNote(shown, total) {
+  if (total === 0) return "no rows";
+  if (shown >= total) return `${total} row${total === 1 ? "" : "s"}`;
+  return `showing ${shown} of ${total} sample rows`;
+}
+function stripPipes(expr) {
+  const idx = expr.indexOf("|");
+  if (idx < 0) return expr;
+  if (expr[idx + 1] === "|") return expr;
+  return expr.slice(0, idx).trim();
+}
+function extractPipes(expr) {
+  const idx = expr.indexOf("|");
+  if (idx < 0 || expr[idx + 1] === "|") return "";
+  return expr.slice(idx + 1).trim();
+}
+var keyValueListBlock = defineBlock4({
+  type: "keyValueList",
+  name: "Key / value list",
+  description: "A list of labelled values",
+  category: "data",
+  icon: "list",
+  keywords: ["details", "properties", "definition list", "summary"],
+  defaultProps: () => ({
+    items: [
+      { id: "k1", label: "Name", value: "" },
+      { id: "k2", label: "Reference", value: "" }
+    ],
+    layout: "inline",
+    labelWidth: 35,
+    dividers: true,
+    columns: 1
+  }),
+  defaultTextStyle: "body",
+  split: "none",
+  styleGroups: ["typography", "spacing", "background", "border", "flow"],
+  bindings: [{ prop: "items", kind: "list", items: [{ prop: "label", kind: "template" }, { prop: "value", kind: "template" }] }],
+  inspector: [
+    {
+      title: "Items",
+      fields: [
+        { kind: "keyValues", prop: "items", label: "Items", fullWidth: true },
+        {
+          kind: "segmented",
+          prop: "layout",
+          label: "Layout",
+          options: [
+            { value: "inline", label: "Inline" },
+            { value: "stacked", label: "Stacked" },
+            { value: "grid", label: "Grid" }
+          ]
+        },
+        { kind: "number", prop: "columns", label: "Columns", min: 1, max: 4, when: (p) => p.layout === "grid" },
+        { kind: "number", prop: "labelWidth", label: "Label width", min: 10, max: 80, unit: "%", when: (p) => p.layout === "inline" },
+        { kind: "toggle", prop: "dividers", label: "Dividers" }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, theme, text }) => {
+    const items = Array.isArray(props.items) ? props.items : [];
+    const divider = props.dividers ? `1px solid ${theme.colors.border}` : void 0;
+    if (props.layout === "grid") {
+      return h3(
+        "div",
+        { class: "bp-kv bp-kv--grid", style: cssText4({ ...css, display: "grid", "grid-template-columns": `repeat(${props.columns || 2}, minmax(0, 1fr))`, gap: "10px 16px" }) },
+        items.map((it, i) => h3("div", { class: "bp-kv__item" }, h3("div", { class: "bp-kv__label", style: { color: theme.colors.mutedText, "font-size": "0.85em", "text-transform": "uppercase", "letter-spacing": "0.04em", "font-weight": "600" } }, text(`items.${i}.label`, it.label)), h3("div", { class: "bp-kv__value", style: { "font-weight": "500" } }, text(`items.${i}.value`, it.value || "\u2014"))))
+      );
+    }
+    return h3(
+      "div",
+      { class: ["bp-kv", `bp-kv--${props.layout}`], style: cssText4(css) },
+      items.map(
+        (it, i) => props.layout === "inline" ? h3("div", { class: "bp-kv__row", style: { display: "flex", gap: "8px", padding: "5px 0", "border-bottom": i < items.length - 1 ? divider : void 0 } }, h3("div", { class: "bp-kv__label", style: { flex: `0 0 ${props.labelWidth}%`, color: theme.colors.mutedText } }, text(`items.${i}.label`, it.label)), h3("div", { class: "bp-kv__value", style: { flex: "1", "min-width": "0", "font-weight": "500" } }, text(`items.${i}.value`, it.value || "\u2014"))) : h3("div", { class: "bp-kv__row", style: { padding: "5px 0", "border-bottom": i < items.length - 1 ? divider : void 0 } }, h3("div", { class: "bp-kv__label", style: { color: theme.colors.mutedText, "font-size": "0.85em" } }, text(`items.${i}.label`, it.label)), h3("div", { class: "bp-kv__value", style: { "font-weight": "500" } }, text(`items.${i}.value`, it.value || "\u2014")))
+      )
+    );
+  }
+});
+
+// src/blocks/charts.ts
+import { defineBlock as defineBlock5, cssText as cssText5, resolveValue as resolveValue4, toNumber as toNumber2, toDisplayString as toDisplayString2, evaluate, Scope } from "@broadpaper/core";
+
+// src/charts/chart-svg.ts
+import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
+import { arc as d3arc, area as d3area, line as d3line, curveMonotoneX, curveLinear, pie as d3pie } from "d3-shape";
+import { h as h2 } from "@broadpaper/core";
+var FONT_SIZE = 9;
+var AXIS_COLOR = "#9AA1AB";
+function hit(opts, entry) {
+  if (!opts.hits) return {};
+  opts.hits.push(entry);
+  return { "data-bp-hit": String(opts.hits.length - 1) };
+}
+function fmt(n) {
+  return Math.round(n * 100) / 100 + "";
+}
+function legend(data, opts, y, width) {
+  if (!opts.showLegend || data.series.length === 0) return { node: null, height: 0 };
+  const items = opts.type === "pie" || opts.type === "donut" ? data.categories.map((c, i) => ({ label: c, color: colorAt(data, i) })) : data.series.map((s) => ({ label: s.label, color: s.color }));
+  const perRow = Math.max(1, Math.floor(width / 120));
+  const rows = Math.ceil(items.length / perRow);
+  const node = h2(
+    "g",
+    { class: "bp-chart__legend", transform: `translate(0, ${y})` },
+    items.map((it, i) => {
+      const col = i % perRow;
+      const row = Math.floor(i / perRow);
+      const x = width / perRow * col;
+      return h2("g", { transform: `translate(${fmt(x)}, ${row * 16})` }, h2("rect", { x: 0, y: 2, width: 10, height: 10, rx: 2, fill: it.color }), h2("text", { x: 15, y: 11, "font-size": FONT_SIZE + 1, "font-family": opts.fontFamily, fill: opts.theme.colors.text }, truncate(it.label, Math.floor(width / perRow / 6))));
+    })
+  );
+  return { node, height: rows * 16 + 4 };
+}
+function truncate(s, n) {
+  return s.length > n ? s.slice(0, Math.max(1, n - 1)) + "\u2026" : s;
+}
+function colorAt(data, i) {
+  const s = data.series[0];
+  const palette = data.series.map((x) => x.color);
+  return palette[i % Math.max(1, palette.length)] ?? s?.color ?? "#888";
+}
+function renderChart(data, opts) {
+  const { width, height } = opts;
+  if (opts.type === "pie" || opts.type === "donut") return renderPie(data, opts);
+  const horizontal = opts.type === "horizontalBar";
+  const lg = legend(data, opts, 0, width);
+  const marginTop = lg.height + 6;
+  const marginRight = 8;
+  const marginBottom = 24;
+  const allValues = data.series.flatMap((s) => s.values.map((v) => v ?? 0));
+  const stackedTotals = data.categories.map((_, i) => data.series.reduce((a, s) => a + Math.max(0, s.values[i] ?? 0), 0));
+  const stackedNeg = data.categories.map((_, i) => data.series.reduce((a, s) => a + Math.min(0, s.values[i] ?? 0), 0));
+  const maxV = Math.max(0, ...opts.stacked ? stackedTotals : allValues);
+  const minV = Math.min(0, ...opts.stacked ? stackedNeg : allValues);
+  const vScale = scaleLinear().domain([minV, maxV === minV ? maxV + 1 : maxV]).nice(5);
+  const ticks = vScale.ticks(5);
+  const tickLabels = ticks.map(opts.formatValue);
+  const labelWidth = Math.max(...tickLabels.map((t) => t.length * FONT_SIZE * 0.6), 18);
+  const marginLeft = horizontal ? Math.min(width * 0.35, Math.max(...data.categories.map((c) => c.length)) * FONT_SIZE * 0.6 + 8) : labelWidth + 8;
+  const plotW = Math.max(10, width - marginLeft - marginRight);
+  const plotH = Math.max(10, height - marginTop - marginBottom);
+  const children = [];
+  if (lg.node) children.push(lg.node);
+  const g = (x, y, ...kids) => h2("g", { transform: `translate(${fmt(x)}, ${fmt(y)})` }, kids);
+  if (horizontal) {
+    vScale.range([0, plotW]);
+    const band = scaleBand().domain(data.categories.map((_, i) => String(i))).range([0, plotH]).paddingInner(0.25).paddingOuter(0.1);
+    const inner = scaleBand().domain(data.series.map((_, i) => String(i))).range([0, band.bandwidth()]).padding(0.1);
+    const grid2 = opts.showGrid ? ticks.map((t) => h2("line", { x1: vScale(t), x2: vScale(t), y1: 0, y2: plotH, stroke: opts.theme.colors.border, "stroke-width": 1 })) : [];
+    const axis = ticks.map((t) => h2("text", { x: vScale(t), y: plotH + 14, "text-anchor": "middle", "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: AXIS_COLOR }, opts.formatValue(t)));
+    const cats = data.categories.map((c, i) => h2("text", { x: -6, y: (band(String(i)) ?? 0) + band.bandwidth() / 2 + 3, "text-anchor": "end", "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: opts.theme.colors.text }, truncate(c, Math.floor(marginLeft / (FONT_SIZE * 0.6)))));
+    const bars = [];
+    data.categories.forEach((_, ci) => {
+      let posAcc = 0;
+      let negAcc = 0;
+      data.series.forEach((s, si) => {
+        const v = s.values[ci] ?? 0;
+        let x0, x1;
+        if (opts.stacked) {
+          if (v >= 0) {
+            x0 = vScale(posAcc);
+            x1 = vScale(posAcc + v);
+            posAcc += v;
+          } else {
+            x0 = vScale(negAcc + v);
+            x1 = vScale(negAcc);
+            negAcc += v;
+          }
+        } else {
+          x0 = vScale(Math.min(0, v));
+          x1 = vScale(Math.max(0, v));
+        }
+        const y = (band(String(ci)) ?? 0) + (opts.stacked ? 0 : inner(String(si)) ?? 0);
+        const bh = opts.stacked ? band.bandwidth() : inner.bandwidth();
+        bars.push(h2("rect", { x: fmt(x0), y: fmt(y), width: fmt(Math.max(0, x1 - x0)), height: fmt(bh), fill: s.color, rx: 1.5, ...hit(opts, { categoryIndex: ci, category: data.categories[ci] ?? "", seriesIndex: si, series: s.label, value: s.values[ci] ?? null, formatted: opts.formatValue(v), color: s.color }) }));
+        if (opts.showValues && !opts.stacked) bars.push(h2("text", { x: fmt(x1 + 4), y: fmt(y + bh / 2 + 3), "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: opts.theme.colors.text }, opts.formatValue(v)));
+      });
+    });
+    children.push(g(marginLeft, marginTop, ...grid2, h2("line", { x1: vScale(0), x2: vScale(0), y1: 0, y2: plotH, stroke: AXIS_COLOR }), ...bars, ...axis, ...cats));
+    return svg2(width, height, children);
+  }
+  vScale.range([plotH, 0]);
+  const grid = opts.showGrid ? ticks.map((t) => h2("line", { x1: 0, x2: plotW, y1: fmt(vScale(t)), y2: fmt(vScale(t)), stroke: opts.theme.colors.border, "stroke-width": 1 })) : [];
+  const yAxis = ticks.map((t) => h2("text", { x: -6, y: fmt(vScale(t) + 3), "text-anchor": "end", "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: AXIS_COLOR }, opts.formatValue(t)));
+  const maxCatLabels = Math.max(1, Math.floor(plotW / 48));
+  const every = Math.ceil(data.categories.length / maxCatLabels);
+  if (opts.type === "bar") {
+    const band = scaleBand().domain(data.categories.map((_, i) => String(i))).range([0, plotW]).paddingInner(0.25).paddingOuter(0.1);
+    const inner = scaleBand().domain(data.series.map((_, i) => String(i))).range([0, band.bandwidth()]).padding(0.1);
+    const bars = [];
+    data.categories.forEach((_, ci) => {
+      let posAcc = 0;
+      let negAcc = 0;
+      data.series.forEach((s, si) => {
+        const v = s.values[ci] ?? 0;
+        let y0, y1;
+        if (opts.stacked) {
+          if (v >= 0) {
+            y1 = vScale(posAcc);
+            y0 = vScale(posAcc + v);
+            posAcc += v;
+          } else {
+            y1 = vScale(negAcc + v);
+            y0 = vScale(negAcc);
+            negAcc += v;
+          }
+        } else {
+          y0 = vScale(Math.max(0, v));
+          y1 = vScale(Math.min(0, v));
+        }
+        const x = (band(String(ci)) ?? 0) + (opts.stacked ? 0 : inner(String(si)) ?? 0);
+        const bw = opts.stacked ? band.bandwidth() : inner.bandwidth();
+        bars.push(h2("rect", { x: fmt(x), y: fmt(y0), width: fmt(bw), height: fmt(Math.max(0, y1 - y0)), fill: s.color, rx: 1.5, ...hit(opts, { categoryIndex: ci, category: data.categories[ci] ?? "", seriesIndex: si, series: s.label, value: s.values[ci] ?? null, formatted: opts.formatValue(v), color: s.color }) }));
+        if (opts.showValues && !opts.stacked) bars.push(h2("text", { x: fmt(x + bw / 2), y: fmt(y0 - 3), "text-anchor": "middle", "font-size": FONT_SIZE - 1, "font-family": opts.fontFamily, fill: opts.theme.colors.text }, opts.formatValue(v)));
+      });
+    });
+    const xAxis2 = data.categories.map((c, i) => i % every === 0 ? h2("text", { x: fmt((band(String(i)) ?? 0) + band.bandwidth() / 2), y: plotH + 14, "text-anchor": "middle", "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: AXIS_COLOR }, truncate(c, 10)) : null);
+    children.push(g(marginLeft, marginTop, ...grid, ...bars, h2("line", { x1: 0, x2: plotW, y1: fmt(vScale(0)), y2: fmt(vScale(0)), stroke: AXIS_COLOR }), ...yAxis, ...xAxis2));
+    return svg2(width, height, children);
+  }
+  const xScale = scalePoint().domain(data.categories.map((_, i) => String(i))).range([0, plotW]).padding(0.15);
+  const curve = opts.smooth ? curveMonotoneX : curveLinear;
+  const shapes = [];
+  const stackBase = data.categories.map(() => 0);
+  data.series.forEach((s, si) => {
+    const pts = s.values.map((v, i) => ({ i, v: v ?? 0 }));
+    const base = [...stackBase];
+    if (opts.stacked) pts.forEach((p) => stackBase[p.i] = (stackBase[p.i] ?? 0) + p.v);
+    const yOf = (p) => vScale(opts.stacked ? (base[p.i] ?? 0) + p.v : p.v);
+    const y0Of = (p) => vScale(opts.stacked ? base[p.i] ?? 0 : 0);
+    const l = d3line().x((p) => xScale(String(p.i)) ?? 0).y(yOf).curve(curve);
+    if (opts.type === "area") {
+      const a = d3area().x((p) => xScale(String(p.i)) ?? 0).y0(y0Of).y1(yOf).curve(curve);
+      shapes.push(h2("path", { d: a(pts) ?? "", fill: s.color, "fill-opacity": 0.18 }));
+    }
+    shapes.push(h2("path", { d: l(pts) ?? "", fill: "none", stroke: s.color, "stroke-width": 2, "stroke-linejoin": "round", "stroke-linecap": "round" }));
+    pts.forEach((p) => {
+      const attrs = hit(opts, { categoryIndex: p.i, category: data.categories[p.i] ?? "", seriesIndex: si, series: s.label, value: s.values[p.i] ?? null, formatted: opts.formatValue(p.v), color: s.color });
+      if (pts.length <= 40) shapes.push(h2("circle", { cx: fmt(xScale(String(p.i)) ?? 0), cy: fmt(yOf(p)), r: 2.5, fill: "#fff", stroke: s.color, "stroke-width": 1.5, ...attrs }));
+      else if (opts.hits) opts.hits[opts.hits.length - 1].value = s.values[p.i] ?? null;
+    });
+    if (opts.showValues) pts.forEach((p) => shapes.push(h2("text", { x: fmt(xScale(String(p.i)) ?? 0), y: fmt(yOf(p) - 6), "text-anchor": "middle", "font-size": FONT_SIZE - 1, "font-family": opts.fontFamily, fill: opts.theme.colors.text }, opts.formatValue(p.v))));
+  });
+  const xAxis = data.categories.map((c, i) => i % every === 0 ? h2("text", { x: fmt(xScale(String(i)) ?? 0), y: plotH + 14, "text-anchor": "middle", "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: AXIS_COLOR }, truncate(c, 10)) : null);
+  children.push(g(marginLeft, marginTop, ...grid, h2("line", { x1: 0, x2: plotW, y1: fmt(vScale(0)), y2: fmt(vScale(0)), stroke: AXIS_COLOR }), ...shapes, ...yAxis, ...xAxis));
+  return svg2(width, height, children);
+}
+function renderPie(data, opts) {
+  const { width, height } = opts;
+  const series = data.series[0];
+  const values = data.categories.map((_, i) => Math.max(0, series?.values[i] ?? 0));
+  const total = values.reduce((a, b) => a + b, 0);
+  const legendW = opts.showLegend ? Math.min(160, width * 0.45) : 0;
+  const size = Math.min(height, width - legendW);
+  const r = Math.max(10, size / 2 - 6);
+  const cx = (width - legendW) / 2;
+  const cy = height / 2;
+  const inner = opts.type === "donut" ? r * 0.62 : 0;
+  const pie = d3pie().sort(null).value((d) => d);
+  const arcs = pie(values);
+  const arcGen = d3arc().innerRadius(inner).outerRadius(r).padAngle(0.01).cornerRadius(2);
+  const labelArc = d3arc().innerRadius((inner + r) / 2).outerRadius((inner + r) / 2);
+  const slices = arcs.map((a, i) => {
+    const frac = total > 0 ? values[i] / total : 0;
+    const [lx, ly] = labelArc.centroid(a);
+    const attrs = hit(opts, {
+      categoryIndex: i,
+      category: data.categories[i] ?? "",
+      seriesIndex: 0,
+      series: series?.label ?? "",
+      value: series?.values[i] ?? null,
+      formatted: opts.formatValue(values[i] ?? 0),
+      color: colorAt(data, i),
+      share: frac
+    });
+    return h2("g", null, h2("path", { d: arcGen(a) ?? "", fill: colorAt(data, i), ...attrs }), opts.showValues && frac >= 0.06 ? h2("text", { x: fmt(lx), y: fmt(ly + 3), "text-anchor": "middle", "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: "#fff", "font-weight": "600" }, opts.formatPercent(frac)) : null);
+  });
+  const children = [h2("g", { transform: `translate(${fmt(cx)}, ${fmt(cy)})` }, total === 0 ? h2("circle", { r, fill: opts.theme.colors.border }) : slices, opts.type === "donut" && opts.innerLabel ? h2("text", { "text-anchor": "middle", y: 4, "font-size": FONT_SIZE + 3, "font-weight": "700", "font-family": opts.fontFamily, fill: opts.theme.colors.text }, opts.innerLabel) : null)];
+  if (opts.showLegend) {
+    const items = data.categories.map((c, i) => ({ label: c, color: colorAt(data, i), frac: total > 0 ? values[i] / total : 0 }));
+    const lineH = 15;
+    const startY = Math.max(0, cy - items.length * lineH / 2);
+    children.push(
+      h2(
+        "g",
+        { transform: `translate(${fmt(width - legendW)}, ${fmt(startY)})` },
+        items.map((it, i) => h2("g", { transform: `translate(0, ${i * lineH})` }, h2("rect", { x: 0, y: 2, width: 9, height: 9, rx: 2, fill: it.color }), h2("text", { x: 14, y: 10, "font-size": FONT_SIZE, "font-family": opts.fontFamily, fill: opts.theme.colors.text }, `${truncate(it.label, Math.floor(legendW / 6) - 6)} ${opts.formatPercent(it.frac)}`)))
+      )
+    );
+  }
+  return svg2(width, height, children);
+}
+function svg2(width, height, children) {
+  return h2("svg", { xmlns: "http://www.w3.org/2000/svg", width: fmt(width), height: fmt(height), viewBox: `0 0 ${fmt(width)} ${fmt(height)}`, class: "bp-chart__svg", role: "img", style: { display: "block", overflow: "visible" } }, children);
+}
+
+// src/blocks/charts.ts
+var chartBlock = defineBlock5({
+  type: "chart",
+  name: "Chart",
+  description: "Bar, line, area, pie or donut chart bound to a list",
+  category: "visualisation",
+  icon: "bar-chart-3",
+  keywords: ["graph", "bar", "line", "pie", "donut", "area", "visualisation"],
+  defaultProps: () => ({
+    chartType: "bar",
+    source: "",
+    alias: "item",
+    label: "item.label",
+    series: [{ id: "s1", label: "Value", value: "item.value" }],
+    height: 220,
+    title: "",
+    showLegend: true,
+    showValues: false,
+    showGrid: true,
+    stacked: false,
+    smooth: true,
+    valueFormat: "",
+    percentDecimals: 0,
+    innerLabel: "",
+    limit: null
+  }),
+  defaultTextStyle: "body",
+  defaultFlow: { keepTogether: true },
+  split: "none",
+  styleGroups: ["spacing", "background", "border", "flow"],
+  bindings: [
+    { prop: "source", kind: "collection", alias: "alias" },
+    { prop: "label", kind: "value", perItem: true },
+    { prop: "series", kind: "list", items: [{ prop: "value", kind: "value", perItem: true }, { prop: "label", kind: "template" }] },
+    { prop: "title", kind: "template" },
+    { prop: "innerLabel", kind: "template" }
+  ],
+  inspector: [
+    {
+      title: "Chart",
+      fields: [
+        {
+          kind: "segmented",
+          prop: "chartType",
+          label: "Type",
+          options: [
+            { value: "bar", label: "Bar", icon: "bar-chart-3" },
+            { value: "horizontalBar", label: "Horizontal", icon: "bar-chart-horizontal" },
+            { value: "line", label: "Line", icon: "line-chart" },
+            { value: "area", label: "Area", icon: "area-chart" },
+            { value: "pie", label: "Pie", icon: "pie-chart" },
+            { value: "donut", label: "Donut", icon: "circle-dot" }
+          ]
+        },
+        { kind: "text", prop: "title", label: "Title" },
+        { kind: "number", prop: "height", label: "Height", min: 80, max: 800, unit: "px" }
+      ]
+    },
+    {
+      title: "Data",
+      fields: [
+        { kind: "collection", prop: "source", label: "Data from", placeholder: "Pick a list" },
+        { kind: "text", prop: "alias", label: "Item name", description: (p) => `The name each data point goes by, e.g. ${typeof p.alias === "string" && p.alias.trim() ? p.alias.trim() : "item"}.value`, allowTokens: false },
+        { kind: "expression", prop: "label", label: "Category label", placeholder: "item.name" },
+        { kind: "series", prop: "series", label: "Series", fullWidth: true },
+        { kind: "number", prop: "limit", label: "Maximum items", min: 1, max: 1e3 },
+        { kind: "text", prop: "valueFormat", label: "Value format", placeholder: 'e.g. currency:"GBP":0 or percent', allowTokens: false }
+      ]
+    },
+    {
+      title: "Options",
+      fields: [
+        { kind: "toggle", prop: "showLegend", label: "Legend" },
+        { kind: "toggle", prop: "showValues", label: "Value labels" },
+        { kind: "toggle", prop: "showGrid", label: "Grid lines", when: (p) => p.chartType !== "pie" && p.chartType !== "donut" },
+        { kind: "toggle", prop: "stacked", label: "Stacked", when: (p) => ["bar", "horizontalBar", "line", "area"].includes(String(p.chartType)) },
+        { kind: "toggle", prop: "smooth", label: "Smooth lines", when: (p) => p.chartType === "line" || p.chartType === "area" },
+        { kind: "number", prop: "percentDecimals", label: "Percent decimals", min: 0, max: 3, when: (p) => p.chartType === "pie" || p.chartType === "donut" },
+        { kind: "text", prop: "innerLabel", label: "Centre label", when: (p) => p.chartType === "donut" }
+      ]
+    }
+  ],
+  validate: ({ props }) => {
+    const issues = [];
+    if (!Array.isArray(props.series) || props.series.length === 0) issues.push({ severity: "warning", code: "empty-content", message: "Chart has no series", prop: "series" });
+    return issues;
+  },
+  canvas: { label: (p) => p.title ? `Chart \xB7 ${p.title}` : "Chart" },
+  resolve: ({ props, evaluateIn, theme, warn }) => {
+    const alias = props.alias || "item";
+    let items = Array.isArray(props.source) ? props.source : [];
+    if (props.limit) items = items.slice(0, props.limit);
+    const palette = theme.colors.chart ?? [theme.colors.primary, theme.colors.secondary, theme.colors.accent];
+    const categories = items.map((it, index) => {
+      try {
+        return toDisplayString2(evaluateIn(props.label || `${alias}.label`, { [alias]: it, item: it, index: index + 1 }));
+      } catch {
+        return String(index + 1);
+      }
+    });
+    const series = (Array.isArray(props.series) ? props.series : []).map((s, si) => ({
+      label: s.label || `Series ${si + 1}`,
+      color: s.color ? resolveValue4(s.color, theme, palette[si % palette.length]) : palette[si % palette.length],
+      values: items.map((it, index) => {
+        try {
+          return toNumber2(evaluateIn(s.value, { [alias]: it, item: it, index: index + 1 }));
+        } catch (e) {
+          warn(`Series "${s.label}" failed: ${e.message}`);
+          return null;
+        }
+      })
+    }));
+    if (props.chartType === "pie" || props.chartType === "donut") {
+      const s0 = series[0];
+      if (s0) {
+        const colored = items.map((_, i) => ({ ...s0, color: palette[i % palette.length] }));
+        return { __data: { categories, series: colored.length ? [{ ...s0 }, ...colored.slice(1)] : [] }, __palette: palette };
+      }
+    }
+    return { __data: { categories, series }, __palette: palette };
+  },
+  render: ({ h: h3, css, props, theme, width, mode, node, format, text, style }) => {
+    const p = props;
+    const data = p.__data ?? { categories: [], series: [] };
+    const isPie = p.chartType === "pie" || p.chartType === "donut";
+    if (isPie && data.series.length) {
+      const palette = p.__palette ?? theme.colors.chart ?? [];
+      data.series = data.categories.map((_, i) => ({ ...data.series[0], color: palette[i % Math.max(1, palette.length)] ?? data.series[0].color }));
+    }
+    const formatValue = (n) => {
+      const f = (p.valueFormat || "").trim();
+      if (!f) return new Intl.NumberFormat(format.locale, { notation: Math.abs(n) >= 1e4 ? "compact" : "standard", maximumFractionDigits: 2 }).format(n);
+      try {
+        return toDisplayString2(evaluate(`(${n}) | ${f}`, { scope: new Scope({}), format }));
+      } catch {
+        return String(n);
+      }
+    };
+    const formatPercent = (fr) => new Intl.NumberFormat(format.locale, { style: "percent", maximumFractionDigits: p.percentDecimals ?? 0, minimumFractionDigits: p.percentDecimals ?? 0 }).format(fr);
+    const pad = style.padding;
+    const innerWidth = Math.max(40, width - pad.left - pad.right - (style.border ? style.border.width * 2 : 0));
+    const b = node.bindings.source;
+    const hits = [];
+    const svg3 = data.categories.length ? renderChart(data, { type: p.chartType, width: innerWidth, height: p.height, theme, fontFamily: style.fontFamily, showLegend: p.showLegend, showValues: p.showValues, showGrid: p.showGrid, stacked: p.stacked, smooth: p.smooth, formatValue, formatPercent, innerLabel: typeof p.innerLabel === "string" && p.innerLabel ? p.innerLabel : void 0, hits }) : h3("div", { class: "bp-chart__empty", style: { height: `${p.height}px`, display: "flex", "align-items": "center", "justify-content": "center", color: theme.colors.mutedText, border: `1px dashed ${theme.colors.border}`, "border-radius": `${theme.radius ?? 6}px` } }, mode === "design" ? b ? "No data in the list" : "Choose a list to chart" : "");
+    return h3(
+      "div",
+      {
+        class: ["bp-chart", `bp-chart--${p.chartType}`],
+        style: cssText5(css),
+        ...hits.length ? { "data-bp-chart": JSON.stringify({ type: p.chartType, title: typeof p.title === "string" ? p.title : "", hits }) } : {}
+      },
+      p.title ? h3("div", { class: "bp-chart__title", style: { "font-family": theme.typography.headingFont, "font-weight": "600", "margin-bottom": "6px", color: theme.colors.text } }, text("title")) : null,
+      mode === "design" && b ? h3("div", { class: "bp-chart__badge", contenteditable: "false" }, b.label) : null,
+      svg3
+    );
+  }
+});
+var progressBlock = defineBlock5({
+  type: "progress",
+  name: "Progress / gauge",
+  description: "A value against a maximum, as a bar or gauge",
+  category: "visualisation",
+  icon: "gauge",
+  keywords: ["score", "meter", "gauge", "progress", "percentage"],
+  defaultProps: () => ({ value: "", max: 100, label: "Score", caption: "", variant: "bar", color: "$colors.primary", trackColor: "$colors.border", showValue: true, format: "percent", thresholds: [], height: 10 }),
+  defaultTextStyle: "body",
+  defaultFlow: { keepTogether: true },
+  split: "none",
+  styleGroups: ["typography", "spacing", "background", "border", "flow"],
+  inspector: [
+    {
+      title: "Value",
+      fields: [
+        { kind: "binding", prop: "value", label: "Value", valueType: ["number", "percent", "currency"] },
+        { kind: "number", prop: "max", label: "Maximum", min: 1e-4, max: 1e12 },
+        { kind: "text", prop: "label", label: "Label" },
+        { kind: "text", prop: "caption", label: "Caption" }
+      ]
+    },
+    {
+      title: "Appearance",
+      fields: [
+        {
+          kind: "segmented",
+          prop: "variant",
+          label: "Style",
+          options: [
+            { value: "bar", label: "Bar" },
+            { value: "gauge", label: "Gauge" }
+          ]
+        },
+        {
+          kind: "segmented",
+          prop: "format",
+          label: "Show as",
+          options: [
+            { value: "percent", label: "%" },
+            { value: "value", label: "Value" },
+            { value: "fraction", label: "x / max" }
+          ]
+        },
+        { kind: "toggle", prop: "showValue", label: "Show value" },
+        { kind: "color", prop: "color", label: "Colour" },
+        { kind: "color", prop: "trackColor", label: "Track" },
+        { kind: "number", prop: "height", label: "Bar height", min: 2, max: 40, unit: "px", when: (p) => p.variant === "bar" },
+        { kind: "list", prop: "thresholds", label: "Colour by range", itemLabel: "Range", fullWidth: true, fields: [
+          { kind: "number", prop: "upTo", label: "Up to" },
+          { kind: "color", prop: "color", label: "Colour" }
+        ] }
+      ]
+    }
+  ],
+  render: ({ h: h3, css, props, theme, text, mode, node, format }) => {
+    const raw = toNumber2(props.value);
+    const max = Number(props.max) || 100;
+    const value = raw ?? 0;
+    const frac = Math.max(0, Math.min(1, max > 0 ? value / max : 0));
+    let color = resolveValue4(props.color, theme, theme.colors.primary);
+    const sorted = [...props.thresholds ?? []].sort((a, b2) => a.upTo - b2.upTo);
+    for (const t of sorted) {
+      if (value <= t.upTo) {
+        color = resolveValue4(t.color, theme, color);
+        break;
+      }
+    }
+    const track = resolveValue4(props.trackColor, theme, theme.colors.border);
+    const b = node.bindings.value;
+    const display = props.format === "percent" ? new Intl.NumberFormat(format.locale, { style: "percent", maximumFractionDigits: 0 }).format(frac) : props.format === "fraction" ? `${new Intl.NumberFormat(format.locale).format(value)} / ${new Intl.NumberFormat(format.locale).format(max)}` : new Intl.NumberFormat(format.locale, { maximumFractionDigits: 2 }).format(value);
+    const header = h3("div", { style: { display: "flex", "justify-content": "space-between", "align-items": "baseline", gap: "8px", "margin-bottom": "4px" } }, h3("span", { style: { "font-weight": "600" } }, text("label")), props.showValue ? h3("span", { class: ["bp-progress__value", mode === "design" && b ? "bp-cell--bound" : ""], title: b?.expr, style: { color: theme.colors.mutedText, "font-variant-numeric": "tabular-nums" } }, display) : null);
+    if (props.variant === "gauge") {
+      const w = 160;
+      const r = 62;
+      const cx = w / 2;
+      const cy = 70;
+      const arcPath = (f) => {
+        const a0 = Math.PI;
+        const sweep = Math.PI * f;
+        const a1 = a0 + sweep;
+        const x0 = cx + r * Math.cos(a0);
+        const y0 = cy + r * Math.sin(a0);
+        const x1 = cx + r * Math.cos(a1);
+        const y1 = cy + r * Math.sin(a1);
+        const large = sweep > Math.PI ? 1 : 0;
+        return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`;
+      };
+      return h3(
+        "div",
+        { class: "bp-progress bp-progress--gauge", style: cssText5({ ...css, display: "flex", "flex-direction": "column", "align-items": "center" }) },
+        h3("svg", { width: w, height: 80, viewBox: `0 0 ${w} 80`, style: { display: "block" } }, h3("path", { d: arcPath(1), fill: "none", stroke: track, "stroke-width": 12, "stroke-linecap": "round" }), frac > 0 ? h3("path", { d: arcPath(frac), fill: "none", stroke: color, "stroke-width": 12, "stroke-linecap": "round" }) : null, h3("text", { x: cx, y: cy - 4, "text-anchor": "middle", "font-size": 20, "font-weight": "700", "font-family": theme.typography.headingFont, fill: theme.colors.text }, display)),
+        h3("div", { style: { "font-weight": "600", "margin-top": "2px" } }, text("label")),
+        props.caption ? h3("div", { style: { color: theme.colors.mutedText, "font-size": "0.9em" } }, text("caption")) : null
+      );
+    }
+    return h3(
+      "div",
+      { class: "bp-progress bp-progress--bar", style: cssText5(css) },
+      header,
+      // The fill's height is stated in pixels rather than as `100%`: a
+      // percentage height needs a parent the layout engine considers to have a
+      // definite one, and the PDF engine does not, so the fill came out a
+      // hairline in the file while looking right in the browser. The track's
+      // own height is the number to use, and it is right here.
+      h3("div", { class: "bp-progress__track", style: { height: `${props.height}px`, background: track, "border-radius": `${props.height}px`, overflow: "hidden" } }, h3("div", { class: "bp-progress__fill", style: { width: `${frac * 100}%`, height: `${props.height}px`, background: color, "border-radius": `${props.height}px` } })),
+      props.caption ? h3("div", { style: { color: theme.colors.mutedText, "font-size": "0.9em", "margin-top": "4px" } }, text("caption")) : null
+    );
+  }
+});
+
+// src/index.ts
+var builtInBlocks = [
+  // structure
+  sectionBlock,
+  rowBlock,
+  columnBlock,
+  repeaterItemBlock,
+  // content
+  headingBlock,
+  textBlock,
+  imageBlock,
+  logoBlock,
+  dividerBlock,
+  spacerBlock,
+  buttonBlock,
+  calloutBlock,
+  quoteBlock,
+  signatureBlock,
+  dateBlock,
+  pageNumberBlock,
+  timestampBlock,
+  // layout
+  containerBlock,
+  cardBlock,
+  pageBreakBlock,
+  keepTogetherBlock,
+  // data
+  fieldBlock,
+  kpiBlock,
+  keyValueListBlock,
+  conditionalBlock,
+  repeaterBlock,
+  tableBlock,
+  // visualisation
+  chartBlock,
+  progressBlock
+];
+function createRegistry(custom = [], opts = {}) {
+  return new BlockRegistry([...builtInBlocks, ...custom], opts);
+}
+export {
+  builtInBlocks,
+  buttonBlock,
+  calloutBlock,
+  cardBlock,
+  chartBlock,
+  colorAt,
+  columnBlock,
+  conditionalBlock,
+  containerBlock,
+  createRegistry,
+  dateBlock,
+  dividerBlock,
+  fieldBlock,
+  headingBlock,
+  imageBlock,
+  keepTogetherBlock,
+  keyValueListBlock,
+  kpiBlock,
+  logoBlock,
+  mixWithWhite,
+  pageBreakBlock,
+  pageNumberBlock,
+  progressBlock,
+  quoteBlock,
+  renderChart,
+  repeaterBlock,
+  repeaterItemBlock,
+  rowBlock,
+  sectionBlock,
+  signatureBlock,
+  spacerBlock,
+  stack,
+  tableBlock,
+  textBlock,
+  timestampBlock
+};
+//# sourceMappingURL=index.js.map