@bendyline/squisq 2.13.10 → 2.13.12

package/dist/{chunk-LWNT6M4N.js → chunk-QJQQO3K4.js}

@@ -32,7 +32,7 @@ import {
   profileBlockContents,
   renderMarkdownBlocksHtml,
   treeToTemplateData
-} from "./chunk-DIY3NBIS.js";
+} from "./chunk-SGNWO7OF.js";
 import {
   anchorPoint,
   base64ToUtf8,
@@ -62,12 +62,12 @@ import {
   validateCustomTemplateDefinition,
   validateTheme,
   withAlpha
-} from "./chunk-WNEH3BZP.js";
+} from "./chunk-JNUNNQ74.js";
 import {
   TABLE_FED_TEMPLATES,
   isContainerTemplate,
   resolveTemplateName
-} from "./chunk-DOOUVVOM.js";
+} from "./chunk-7MS26OXD.js";
 import {
   KNOWN_BLOCK_META_KEYS,
   coerceAnnotationValues,
@@ -766,11 +766,11 @@ function estimateProseLineCount(text, fontSize, maxWidthPx) {
 }
 function fitProse(options) {
   const { text, baseFontSize, minFontSize, maxWidthPx, maxHeightPx, lineHeight } = options;
-  const step = Math.max(0.5, options.step ?? 2);
+  const step2 = Math.max(0.5, options.step ?? 2);
   const floor = Math.min(baseFontSize, minFontSize);
   const heightAt = (lines, size) => lines * size * lineHeight;
   const candidates = [];
-  for (let size = baseFontSize; size > floor; size -= step) candidates.push(size);
+  for (let size = baseFontSize; size > floor; size -= step2) candidates.push(size);
   candidates.push(floor);
   for (const size of candidates) {
     const lines = estimateProseLineCount(text, size, maxWidthPx);
@@ -1924,6 +1924,1239 @@ function formatFinal(count) {
   return `${count.prefix ?? ""}${formatCountValue(count.to, count.decimals ?? 0, count.grouping ?? false)}${count.suffix ?? ""}`;
 }
 
+// src/doc/templates/conceptBlocks.ts
+var MAX_ITEMS = 6;
+var LABEL_WORDS = 7;
+function splitConceptItem(text) {
+  const clean = text.replace(/\s+/gu, " ").trim();
+  const match = clean.match(/^(.{1,64}?)(:\s|\s[—–-]\s)(.+)$/u);
+  const range = !!match && !match[2].startsWith(":") && /\d$/u.test(match[1]);
+  if (match && !range && !/[.!?]\s/u.test(match[1]) && match[1].split(" ").length <= LABEL_WORDS)
+    return { label: match[1].trim(), detail: match[3].trim() };
+  return { label: "", detail: clean };
+}
+var HEADLINE_BASE = 60;
+var HEADLINE_MIN = 40;
+var HEADLINE_LINE_HEIGHT = 1.15;
+var LABEL_BASE = 44;
+var DETAIL_BASE = 33;
+var PLAIN_BASE = 38;
+var LABEL_LINE_HEIGHT = 1.2;
+var DETAIL_LINE_HEIGHT = 1.4;
+var MIN_SCALE = 0.62;
+var MAX_SCALE = 1.18;
+var GROW_SHARE = 0.9;
+function ramp(context, scale) {
+  return {
+    label: Math.round(themedFontSize(LABEL_BASE, context, false) * scale),
+    detail: Math.round(themedFontSize(DETAIL_BASE, context, false) * scale),
+    plain: Math.round(themedFontSize(PLAIN_BASE, context, false) * scale)
+  };
+}
+function measureItem(item, sizes, width) {
+  const labelH = item.label ? estimateProseLineCount(item.label, sizes.label, width) * sizes.label * LABEL_LINE_HEIGHT : 0;
+  const size = item.label ? sizes.detail : sizes.plain;
+  const detailH = item.detail ? estimateProseLineCount(item.detail, size, width) * size * DETAIL_LINE_HEIGHT : 0;
+  const gap = item.label && item.detail ? sizes.label * 0.35 : 0;
+  const widest = (text, size2, em) => Math.max(0, ...text.split(/\s+/u).map((word) => word.length)) * size2 * em;
+  const overflows = widest(item.label, sizes.label, 0.62) > width || widest(item.detail, size, 0.56) > width;
+  return { labelH, gap, detailH, height: overflows ? Infinity : labelH + gap + detailH };
+}
+var SCALES = [MAX_SCALE, 1, 0.82, MIN_SCALE];
+function fitRamp(items, context, width, height) {
+  for (const scale of SCALES) {
+    const sizes = ramp(context, scale);
+    const room = height(scale) * (scale > 1 ? GROW_SHARE : 1);
+    if (items.every((item) => measureItem(item, sizes, width(scale)).height <= room))
+      return { sizes, scale };
+  }
+  return { sizes: ramp(context, MIN_SCALE), scale: MIN_SCALE };
+}
+function accentColor(input, context) {
+  return input.colorScheme ? resolveColorScheme(context, input.colorScheme).accent : context.theme.colors.highlight || context.theme.colors.primary;
+}
+function frame(input, context) {
+  const { theme, viewport } = context;
+  const { width: W, height: H } = viewport;
+  const portrait = H > W;
+  const accent = accentColor(input, context);
+  const margin = Math.round(W * (portrait ? 0.08 : 0.07));
+  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 170))];
+  const title = (input.title ?? "").trim();
+  let top = H * 0.1;
+  if (title) {
+    const headlineTop = H * (portrait ? 0.08 : 0.11);
+    const base = themedFontSize(HEADLINE_BASE, context, true);
+    const fit = fitProse({
+      text: title,
+      baseFontSize: base,
+      minFontSize: Math.min(base, themedFontSize(HEADLINE_MIN, context, true)),
+      maxWidthPx: W - margin * 2,
+      maxHeightPx: base * HEADLINE_LINE_HEIGHT * 2,
+      lineHeight: HEADLINE_LINE_HEIGHT
+    });
+    const ruleH = Math.max(4, Math.round(H * 6e-3));
+    layers.push({
+      type: "shape",
+      id: "accent-rule",
+      position: {
+        x: margin,
+        y: headlineTop - ruleH - fit.fontSize * 0.55,
+        width: W * 0.045,
+        height: ruleH
+      },
+      content: { shape: "rect", fill: accent, borderRadius: ruleH / 2 },
+      animation: entrance(context, "rule", 0)
+    });
+    layers.push({
+      ...textLayer("title", title, box(margin, headlineTop, W - margin * 2, fit.heightPx), {
+        fontSize: fit.fontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: theme.colors.text,
+        lineHeight: HEADLINE_LINE_HEIGHT,
+        shadow: shouldUseShadow(context),
+        ...fit.maxLines ? { maxLines: fit.maxLines } : {}
+      }),
+      animation: entrance(context, "text", 0.1)
+    });
+    top = headlineTop + fit.heightPx + H * (portrait ? 0.05 : 0.07);
+  }
+  return {
+    layers,
+    accent,
+    left: margin,
+    right: W - margin,
+    top,
+    bottom: H * (portrait ? 0.92 : 0.9),
+    portrait
+  };
+}
+function box(left, top, width, height) {
+  return { x: left + width / 2, y: top + height / 2, width, height, anchor: "center" };
+}
+function textLayer(id, text, position, style) {
+  return {
+    type: "text",
+    id,
+    position,
+    content: {
+      text,
+      style: { textAlign: "left", verticalAlign: "top", shrinkToFit: true, ...style }
+    }
+  };
+}
+function itemText(id, item, measure, sizes, left, top, width, align, context) {
+  const { theme } = context;
+  const slack = (size) => size * 0.4;
+  const layers = [];
+  if (item.label)
+    layers.push(
+      textLayer(
+        `${id}-label`,
+        item.label,
+        box(left, top, width, measure.labelH + slack(sizes.label)),
+        {
+          fontSize: sizes.label,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          lineHeight: LABEL_LINE_HEIGHT,
+          textAlign: align
+        }
+      )
+    );
+  if (item.detail) {
+    const size = item.label ? sizes.detail : sizes.plain;
+    layers.push(
+      textLayer(
+        `${id}-detail`,
+        item.detail,
+        box(left, top + measure.labelH + measure.gap, width, measure.detailH + slack(size)),
+        {
+          fontSize: size,
+          fontFamily: getThemeFont(context, "body"),
+          // Details read as secondary by weight and a little transparency, not a
+          // muted hue that loses contrast on dark themes.
+          color: item.label ? withAlpha(theme.colors.text, 0.8) : theme.colors.text,
+          lineHeight: DETAIL_LINE_HEIGHT,
+          textAlign: align
+        }
+      )
+    );
+  }
+  return layers;
+}
+function itemsOf(input) {
+  return (Array.isArray(input.items) ? input.items : []).map((item) => String(item ?? "").trim()).filter(Boolean).slice(0, MAX_ITEMS).map(splitConceptItem);
+}
+function conceptBuildStepTexts(template, items) {
+  const shown = itemsOf({ items: [...items] });
+  const dated = template === "process" ? timelineItems(shown) : void 0;
+  if (dated)
+    return dated.map((item) => [item.when, item.label, item.detail].filter(Boolean).join(" "));
+  return shown.map(
+    (item, index) => [
+      template === "cards" || template === "layers" ? "" : String(index + 1),
+      item.label,
+      item.detail
+    ].filter(Boolean).join(" ")
+  );
+}
+var FIRST_TURN = 0.6;
+var TURN_STAGGER = 0.45;
+var SETTLE = "cubic-bezier(0.22, 1, 0.36, 1)";
+function entrance(context, kind, delay) {
+  const profile = getMotionProfile(context);
+  if (kind === "text" || !profile.diagramBuild)
+    return motionEntrance(context, { type: "fadeIn", duration: 0.7, delay });
+  const at = motionDelay(context, delay);
+  switch (kind) {
+    case "words":
+      return { type: "wordReveal", duration: 0.5, stagger: 0.07, delay: at, easing: SETTLE };
+    case "surface":
+      return { type: "fadeInUp", duration: 0.6, delay: at, easing: SETTLE };
+    case "rule":
+      return { type: "grow", origin: "left", duration: 0.55, delay: at, easing: SETTLE };
+    case "bar":
+      return { type: "grow", origin: "top", duration: 0.6, delay: at, easing: SETTLE };
+    case "pop":
+      return {
+        type: "grow",
+        origin: "center",
+        duration: 0.5,
+        delay: at,
+        easing: profile.name === "vibrant" ? "cubic-bezier(0.34, 1.56, 0.64, 1)" : "cubic-bezier(0.34, 1.3, 0.64, 1)"
+      };
+    case "draw":
+      return { type: "drawOn", duration: 0.5, delay: at, easing: "ease-in-out" };
+  }
+}
+function step(parts, index, context) {
+  const turn = FIRST_TURN + index * TURN_STAGGER;
+  return parts.map(([layer, kind, at]) => ({
+    ...layer,
+    buildStep: index,
+    animation: entrance(context, kind, turn + at)
+  }));
+}
+function pops(layers, at) {
+  return layers.map((layer) => [layer, "pop", at]);
+}
+function words(layers, at) {
+  return layers.map((layer, i) => [layer, "text", at + i * 0.12]);
+}
+var LEAD_BASE = 44;
+var LEAD_MIN = 28;
+var LEAD_LINE_HEIGHT = 1.4;
+function lead(area, text, context) {
+  const { theme, viewport } = context;
+  const barW = Math.max(5, Math.round(viewport.width * 4e-3));
+  const indent = barW + Math.round(viewport.width * 0.018);
+  const width = (area.right - area.left) * (area.portrait ? 1 : 0.8) - indent;
+  const base = themedFontSize(
+    text.length <= 90 ? LEAD_BASE * 1.3 : text.length <= 160 ? LEAD_BASE * 1.15 : LEAD_BASE,
+    context,
+    false
+  );
+  const fit = fitProse({
+    text,
+    baseFontSize: base,
+    minFontSize: Math.min(base, themedFontSize(LEAD_MIN, context, false)),
+    maxWidthPx: width,
+    maxHeightPx: (area.bottom - area.top) * 0.9,
+    lineHeight: LEAD_LINE_HEIGHT
+  });
+  const top = area.top + Math.max(0, (area.bottom - area.top - fit.heightPx) * 0.25);
+  return [
+    ...area.layers,
+    ...step(
+      [
+        [
+          {
+            type: "shape",
+            id: "lead-bar",
+            position: {
+              x: area.left,
+              y: top + fit.fontSize * 0.2,
+              width: barW,
+              height: fit.heightPx - fit.fontSize * 0.3
+            },
+            content: { shape: "rect", fill: area.accent, borderRadius: barW / 2 }
+          },
+          "bar",
+          0
+        ],
+        [
+          textLayer(
+            "lead",
+            text,
+            box(area.left + indent, top, width, fit.heightPx + fit.fontSize * 0.4),
+            {
+              fontSize: fit.fontSize,
+              fontFamily: getThemeFont(context, "body"),
+              color: theme.colors.text,
+              lineHeight: LEAD_LINE_HEIGHT,
+              shadow: shouldUseShadow(context),
+              ...fit.maxLines ? { maxLines: fit.maxLines } : {}
+            }
+          ),
+          "text",
+          0.15
+        ]
+      ],
+      0,
+      context
+    )
+  ];
+}
+var STATEMENT_BASE = 84;
+var STATEMENT_MIN = 48;
+function statement(area, text, context) {
+  const { theme, viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const base = themedFontSize(STATEMENT_BASE, context, true);
+  const fit = fitProse({
+    text,
+    baseFontSize: base,
+    minFontSize: Math.min(base, themedFontSize(STATEMENT_MIN, context, true)),
+    maxWidthPx: W * (area.portrait ? 1 : 0.86),
+    maxHeightPx: H * 0.8,
+    lineHeight: HEADLINE_LINE_HEIGHT
+  });
+  const top = area.top + Math.max(0, (H - fit.heightPx) / 2);
+  const ruleH = Math.max(5, Math.round(viewport.height * 7e-3));
+  return [
+    ...area.layers,
+    ...step(
+      [
+        [
+          {
+            type: "shape",
+            id: "statement-rule",
+            position: {
+              x: area.left,
+              y: top - ruleH - fit.fontSize * 0.45,
+              width: W * 0.06,
+              height: ruleH
+            },
+            content: { shape: "rect", fill: area.accent, borderRadius: ruleH / 2 }
+          },
+          "rule",
+          0
+        ],
+        [
+          textLayer(
+            "statement",
+            text,
+            box(area.left, top, W * (area.portrait ? 1 : 0.86), fit.heightPx + fit.fontSize * 0.3),
+            {
+              fontSize: fit.fontSize,
+              fontFamily: getThemeFont(context, "title"),
+              fontWeight: "bold",
+              color: theme.colors.text,
+              lineHeight: HEADLINE_LINE_HEIGHT,
+              shadow: shouldUseShadow(context),
+              ...fit.maxLines ? { maxLines: fit.maxLines } : {}
+            }
+          ),
+          "words",
+          0.15
+        ]
+      ],
+      0,
+      context
+    )
+  ];
+}
+function cardsBlock(input, context) {
+  const items = itemsOf(input);
+  const area = frame(input, context);
+  const { theme, viewport } = context;
+  if (!items.length) return area.layers;
+  if (items.length === 1 && !items[0].label)
+    return (input.title?.trim() ? lead : statement)(area, items[0].detail, context);
+  const contrast = String(input.versus) === "true";
+  if (contrast && items.length === 2 && !area.portrait) return versus(area, items, context);
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const brief = items.every((item) => item.label.length + item.detail.length <= 28);
+  const columns2 = area.portrait ? 1 : items.length <= 3 ? items.length : items.length === 4 ? brief ? 4 : 2 : 3;
+  const rows = Math.ceil(items.length / columns2);
+  const gap = Math.round(viewport.width * 0.02);
+  const cardW = (W - gap * (columns2 - 1)) / columns2;
+  const pad = Math.round(Math.min(44, Math.max(26, cardW * 0.08)));
+  const ruleH = Math.max(4, Math.round(viewport.height * 6e-3));
+  const ruleGap = Math.round(viewport.height * 0.022);
+  const chrome = pad * 2 + ruleH + ruleGap;
+  const { sizes } = fitRamp(
+    items,
+    context,
+    () => cardW - pad * 2,
+    () => (H - gap * (rows - 1)) / rows - chrome
+  );
+  const measures = items.map((item) => measureItem(item, sizes, cardW - pad * 2));
+  const cardH = Math.min(
+    (H - gap * (rows - 1)) / rows,
+    Math.max(...measures.map((m) => m.height)) + chrome + sizes.detail * 0.4
+  );
+  const gridH = rows * cardH + (rows - 1) * gap;
+  const gridTop = area.top + Math.max(0, (H - gridH) * 0.35);
+  const layers = [...area.layers];
+  items.forEach((item, index) => {
+    const row = Math.floor(index / columns2);
+    const inRow = Math.min(columns2, items.length - row * columns2);
+    const rowLeft = area.left + (columns2 - inRow) * (cardW + gap) / 2;
+    const left = rowLeft + index % columns2 * (cardW + gap);
+    const top = gridTop + row * (cardH + gap);
+    const card = {
+      type: "shape",
+      id: `card-${index}`,
+      position: { x: left, y: top, width: cardW, height: cardH },
+      content: {
+        shape: "rect",
+        fill: withAlpha(theme.colors.text, 0.06),
+        stroke: withAlpha(theme.colors.text, 0.12),
+        strokeWidth: 2,
+        borderRadius: Math.round(Math.min(cardW, cardH) * 0.06)
+      }
+    };
+    const rule = {
+      type: "shape",
+      id: `card-${index}-rule`,
+      position: { x: left + pad, y: top + pad, width: Math.min(cardW * 0.22, 64), height: ruleH },
+      content: { shape: "rect", fill: area.accent, borderRadius: ruleH / 2 }
+    };
+    layers.push(
+      ...step(
+        [
+          [card, "surface", 0],
+          [rule, "rule", 0.2],
+          ...words(
+            itemText(
+              `card-${index}`,
+              item,
+              measures[index],
+              sizes,
+              left + pad,
+              top + pad + ruleH + ruleGap,
+              cardW - pad * 2,
+              "left",
+              context
+            ),
+            0.22
+          )
+        ],
+        index,
+        context
+      )
+    );
+  });
+  return layers;
+}
+function versus(area, items, context) {
+  const { theme, viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const seam = Math.round(viewport.width * 0.08);
+  const panelW = (W - seam) / 2;
+  const pad = Math.round(Math.min(56, Math.max(30, panelW * 0.08)));
+  const ruleH = Math.max(4, Math.round(viewport.height * 6e-3));
+  const ruleGap = Math.round(viewport.height * 0.022);
+  const chrome = pad * 2 + ruleH + ruleGap;
+  const { sizes } = fitRamp(
+    items,
+    context,
+    () => panelW - pad * 2,
+    () => H * 0.8 - chrome
+  );
+  const measures = items.map((item) => measureItem(item, sizes, panelW - pad * 2));
+  const panelH = Math.min(
+    H,
+    Math.max(...measures.map((m) => m.height)) + chrome + sizes.detail * 0.4
+  );
+  const top = area.top + Math.max(0, (H - panelH) * 0.35);
+  const mark = Math.round(Math.min(viewport.height * 0.1, seam * 0.85));
+  const markFill = area.accent;
+  const layers = [...area.layers];
+  items.forEach((item, index) => {
+    const left = area.left + index * (panelW + seam);
+    const radius = Math.round(Math.min(panelW, panelH) * 0.05);
+    const parts = [
+      [
+        {
+          type: "shape",
+          id: `side-${index}`,
+          position: { x: left, y: top, width: panelW, height: panelH },
+          content: {
+            shape: "rect",
+            fill: withAlpha(theme.colors.text, 0.06),
+            stroke: withAlpha(theme.colors.text, 0.12),
+            strokeWidth: 2,
+            borderRadius: radius
+          }
+        },
+        "surface",
+        0
+      ],
+      [
+        {
+          type: "shape",
+          id: `side-${index}-rule`,
+          position: {
+            x: left + pad,
+            y: top + pad,
+            width: Math.min(panelW * 0.22, 64),
+            height: ruleH
+          },
+          content: { shape: "rect", fill: area.accent, borderRadius: ruleH / 2 }
+        },
+        "rule",
+        0.15
+      ],
+      ...words(
+        itemText(
+          `side-${index}`,
+          item,
+          measures[index],
+          sizes,
+          left + pad,
+          top + pad + ruleH + ruleGap,
+          panelW - pad * 2,
+          "left",
+          context
+        ),
+        0.2
+      )
+    ];
+    layers.push(...step(parts, index, context));
+  });
+  const cx = area.left + panelW + seam / 2;
+  const cy = top + panelH / 2;
+  const at = FIRST_TURN + 0.45;
+  layers.push(
+    {
+      type: "shape",
+      id: "versus-mark",
+      position: { x: cx - mark / 2, y: cy - mark / 2, width: mark, height: mark },
+      content: { shape: "circle", fill: markFill },
+      animation: entrance(context, "pop", at)
+    },
+    {
+      type: "text",
+      id: "versus-mark-text",
+      position: { x: cx, y: cy, width: mark, height: mark, anchor: "center" },
+      content: {
+        text: "vs",
+        style: {
+          fontSize: Math.round(mark * 0.38),
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          fontStyle: "italic",
+          color: pickContrastingText(markFill),
+          textAlign: "center",
+          verticalAlign: "middle"
+        }
+      },
+      animation: entrance(context, "pop", at)
+    }
+  );
+  return layers;
+}
+function badge(id, number, cx, cy, diameter, accent, context) {
+  return [
+    {
+      type: "shape",
+      id,
+      position: { x: cx - diameter / 2, y: cy - diameter / 2, width: diameter, height: diameter },
+      content: { shape: "circle", fill: accent }
+    },
+    {
+      type: "text",
+      id: `${id}-number`,
+      position: { x: cx, y: cy, width: diameter, height: diameter, anchor: "center" },
+      content: {
+        text: String(number),
+        style: {
+          fontSize: Math.round(diameter * 0.44),
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: pickContrastingText(accent),
+          textAlign: "center",
+          verticalAlign: "middle",
+          baselineShift: 0.04
+        }
+      }
+    }
+  ];
+}
+function connector(id, d, color, width, arrow = true) {
+  return {
+    type: "path",
+    id,
+    position: { x: 0, y: 0, width: "100%", height: "100%" },
+    content: {
+      d,
+      stroke: color,
+      strokeWidth: width,
+      fill: "none",
+      ...arrow ? { endMarker: "arrow" } : {}
+    }
+  };
+}
+function processBlock(input, context) {
+  const items = itemsOf(input);
+  const area = frame(input, context);
+  const { viewport } = context;
+  if (!items.length) return area.layers;
+  const dated = timelineItems(items);
+  if (dated) return timeline(area, dated, context);
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const line = withAlpha(area.accent, 0.75);
+  const stroke = Math.max(3, Math.round(viewport.height * 4e-3));
+  const layers = [...area.layers];
+  const across = !area.portrait && items.length <= 4 && items.every((item) => item.detail.length <= 110 && item.label.length <= 40);
+  if (across) {
+    const columnW = W / items.length;
+    const diameter2 = Math.round(Math.min(viewport.height * 0.1, columnW * 0.3));
+    const textGap = Math.round(diameter2 * 0.45);
+    const textW2 = columnW - Math.round(viewport.width * 0.02);
+    const { sizes: sizes2 } = fitRamp(
+      items,
+      context,
+      () => textW2,
+      () => H - diameter2 - textGap
+    );
+    const measures2 = items.map((item) => measureItem(item, sizes2, textW2));
+    const groupH = diameter2 + textGap + Math.max(...measures2.map((m) => m.height));
+    const groupTop = area.top + Math.max(0, (H - groupH) * 0.2);
+    const cy = groupTop + diameter2 / 2;
+    items.forEach((item, index) => {
+      const cx2 = area.left + columnW * (index + 0.5);
+      const parts = [];
+      const arrives = index > 0 ? 0.3 : 0;
+      if (index > 0) {
+        const from = cx2 - columnW + diameter2 / 2 + diameter2 * 0.25;
+        const to = cx2 - diameter2 / 2 - diameter2 * 0.25;
+        parts.push([
+          connector(`step-${index}-arrow`, `M ${from} ${cy} L ${to} ${cy}`, line, stroke),
+          "draw",
+          0
+        ]);
+      }
+      parts.push(
+        ...pops(badge(`step-${index}`, index + 1, cx2, cy, diameter2, area.accent, context), arrives)
+      );
+      parts.push(
+        ...words(
+          itemText(
+            `step-${index}`,
+            item,
+            measures2[index],
+            sizes2,
+            cx2 - textW2 / 2,
+            groupTop + diameter2 + textGap,
+            textW2,
+            "center",
+            context
+          ),
+          arrives + 0.18
+        )
+      );
+      layers.push(...step(parts, index, context));
+    });
+    return layers;
+  }
+  const diameter = Math.round(Math.min(viewport.height * 0.07, viewport.width * 0.07));
+  const textLeft = area.left + diameter + Math.round(viewport.width * 0.022);
+  const textW = area.right - textLeft;
+  const rowGap = Math.round(viewport.height * 0.028);
+  const { sizes } = fitRamp(
+    items,
+    context,
+    () => textW,
+    () => (H - rowGap * (items.length - 1)) / items.length
+  );
+  const measures = items.map((item) => measureItem(item, sizes, textW));
+  const rowH = measures.map((m) => Math.max(diameter, m.height));
+  const rowsH = rowH.reduce((sum, h) => sum + h, 0);
+  const gap = items.length > 1 ? rowGap + Math.min(
+    viewport.height * 0.05,
+    Math.max(0, (H - rowsH - rowGap * (items.length - 1)) * 0.5) / (items.length - 1)
+  ) : 0;
+  const totalH = rowsH + gap * (items.length - 1);
+  let top = area.top + Math.max(0, (H - totalH) * 0.2);
+  const cx = area.left + diameter / 2;
+  let previous = 0;
+  items.forEach((item, index) => {
+    const parts = [];
+    const firstLine = item.label ? sizes.label * LABEL_LINE_HEIGHT : sizes.plain * DETAIL_LINE_HEIGHT;
+    const cy = top + Math.max(firstLine, diameter) / 2;
+    let arrives = 0;
+    if (index > 0) {
+      const from = previous + diameter / 2 + diameter * 0.12;
+      const to = cy - diameter / 2 - diameter * 0.12;
+      if (to > from) {
+        parts.push([
+          connector(
+            `step-${index}-arrow`,
+            `M ${cx} ${from} L ${cx} ${to}`,
+            line,
+            stroke,
+            to - from >= diameter * 0.6
+          ),
+          "draw",
+          0
+        ]);
+        arrives = 0.25;
+      }
+    }
+    previous = cy;
+    parts.push(
+      ...pops(badge(`step-${index}`, index + 1, cx, cy, diameter, area.accent, context), arrives)
+    );
+    parts.push(
+      ...words(
+        itemText(
+          `step-${index}`,
+          item,
+          measures[index],
+          sizes,
+          textLeft,
+          top,
+          textW,
+          "left",
+          context
+        ),
+        arrives + 0.15
+      )
+    );
+    layers.push(...step(parts, index, context));
+    top += rowH[index] + gap;
+  });
+  return layers;
+}
+var MONTH = "(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)[a-z]*\\.?\\s+";
+var LEADING_DATE = new RegExp(
+  `^((?:${MONTH}(?:\\d{1,2},?\\s+)?)?(?:\\d{4}s?|\\d{1,4}\\s?(?:BCE?|AD|CE))(?![.,]?\\d))[\\s,:;\u2014\u2013-]*(.*)$`,
+  "u"
+);
+function timelineItems(items) {
+  if (items.length < 2) return void 0;
+  let last = -Infinity;
+  const dated = [];
+  for (const item of items) {
+    const match = (item.label || item.detail).match(LEADING_DATE);
+    if (!match) return void 0;
+    const when = match[1];
+    const year = Number(when.match(/\d{1,4}(?=s?\s?(?:BCE?|AD|CE)?$)/u)?.[0] ?? NaN);
+    const signed = /BCE?$/u.test(when) ? -year : year;
+    if (!Number.isFinite(signed) || signed < last) return void 0;
+    last = signed;
+    const rest = match[2].trim();
+    dated.push(
+      item.label ? { when, label: rest, detail: item.detail } : { when, label: "", detail: rest }
+    );
+  }
+  return dated;
+}
+function timeline(area, items, context) {
+  const { viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const n = items.length;
+  const dot = Math.max(14, Math.round(viewport.height * 0.026));
+  const whenSize = Math.round(themedFontSize(LABEL_BASE, context, true) * 1.1);
+  const whenH = whenSize * LABEL_LINE_HEIGHT;
+  const gap = Math.round(viewport.height * 0.03);
+  const stroke = Math.max(3, Math.round(viewport.height * 4e-3));
+  const line = withAlpha(area.accent, 0.6);
+  const layers = [...area.layers];
+  const station = (index, cx, cy) => ({
+    type: "shape",
+    id: `station-${index}`,
+    position: { x: cx - dot / 2, y: cy - dot / 2, width: dot, height: dot },
+    content: { shape: "circle", fill: area.accent }
+  });
+  const whenText = (index, item, left, top2, width, align) => textLayer(`station-${index}-when`, item.when, box(left, top2, width, whenH + whenSize * 0.3), {
+    fontSize: whenSize,
+    fontFamily: getThemeFont(context, "title"),
+    fontWeight: "bold",
+    color: area.accent,
+    lineHeight: LABEL_LINE_HEIGHT,
+    textAlign: align
+  });
+  const columnW = W / n;
+  const across = !area.portrait && n <= 5 && items.every((item) => item.detail.length <= 120 && item.label.length <= 40);
+  if (across) {
+    const textW2 = columnW - Math.round(viewport.width * 0.02);
+    const { sizes: sizes2 } = fitRamp(
+      items,
+      context,
+      () => textW2,
+      () => H - whenH - dot - gap * 2
+    );
+    const measures2 = items.map((item) => measureItem(item, sizes2, textW2));
+    const groupH = whenH + gap + dot + gap + Math.max(...measures2.map((m) => m.height));
+    const groupTop = area.top + Math.max(0, (H - groupH) * 0.3);
+    const trackY = groupTop + whenH + gap + dot / 2;
+    let from2 = area.left;
+    items.forEach((item, index) => {
+      const cx = area.left + columnW * (index + 0.5);
+      const parts = [
+        [
+          connector(
+            `station-${index}-track`,
+            `M ${from2} ${trackY} L ${cx - dot} ${trackY}`,
+            line,
+            stroke,
+            false
+          ),
+          "draw",
+          0
+        ],
+        [station(index, cx, trackY), "pop", 0.3],
+        [whenText(index, item, cx - textW2 / 2, groupTop, textW2, "center"), "text", 0.35],
+        ...words(
+          itemText(
+            `station-${index}`,
+            item,
+            measures2[index],
+            sizes2,
+            cx - textW2 / 2,
+            trackY + dot / 2 + gap,
+            textW2,
+            "center",
+            context
+          ),
+          0.47
+        )
+      ];
+      if (index === n - 1)
+        parts.push([
+          connector(
+            "station-tail",
+            `M ${cx + dot} ${trackY} L ${area.right} ${trackY}`,
+            withAlpha(area.accent, 0.3),
+            stroke
+          ),
+          "draw",
+          0.65
+        ]);
+      from2 = cx + dot;
+      layers.push(...step(parts, index, context));
+    });
+    return layers;
+  }
+  const whenW = Math.min(
+    W * 0.28,
+    Math.max(...items.map((item) => item.when.length)) * whenSize * 0.62 + whenSize * 0.2
+  );
+  const trackX = area.left + whenW + gap + dot / 2;
+  const textLeft = trackX + dot / 2 + gap;
+  const textW = area.right - textLeft;
+  const rowGap = Math.round(viewport.height * 0.028);
+  const { sizes } = fitRamp(
+    items,
+    context,
+    () => textW,
+    () => (H - rowGap * (n - 1)) / n
+  );
+  const measures = items.map((item) => measureItem(item, sizes, textW));
+  const rowH = measures.map((m) => Math.max(whenH, m.height));
+  const rowsH = rowH.reduce((sum, h) => sum + h, 0);
+  const spread = n > 1 ? rowGap + Math.min(
+    viewport.height * 0.05,
+    Math.max(0, (H - rowsH - rowGap * (n - 1)) * 0.5) / (n - 1)
+  ) : 0;
+  let top = area.top + Math.max(0, (H - rowsH - spread * (n - 1)) * 0.2);
+  let from = 0;
+  items.forEach((item, index) => {
+    const cy = top + whenH / 2;
+    const parts = [];
+    if (index > 0)
+      parts.push([
+        connector(
+          `station-${index}-track`,
+          `M ${trackX} ${from} L ${trackX} ${cy - dot}`,
+          line,
+          stroke,
+          false
+        ),
+        "draw",
+        0
+      ]);
+    parts.push(
+      [station(index, trackX, cy), "pop", index > 0 ? 0.3 : 0],
+      [whenText(index, item, area.left, top, whenW, "right"), "text", 0.35],
+      ...words(
+        itemText(
+          `station-${index}`,
+          item,
+          measures[index],
+          sizes,
+          textLeft,
+          top,
+          textW,
+          "left",
+          context
+        ),
+        0.47
+      )
+    );
+    from = cy + dot;
+    top += rowH[index] + spread;
+    if (index === n - 1)
+      parts.push([
+        connector(
+          "station-tail",
+          `M ${trackX} ${from} L ${trackX} ${Math.min(area.bottom, from + spread + whenH)}`,
+          withAlpha(area.accent, 0.3),
+          stroke
+        ),
+        "draw",
+        0.65
+      ]);
+    layers.push(...step(parts, index, context));
+  });
+  return layers;
+}
+function cycleBlock(input, context) {
+  const items = itemsOf(input);
+  const area = frame(input, context);
+  const { viewport } = context;
+  if (items.length < 2) return processBlock({ ...input, template: "process" }, context);
+  const H = area.bottom - area.top;
+  const n = items.length;
+  const cx = (area.left + area.right) / 2;
+  const cy = area.top + H / 2;
+  const angle = (i) => -Math.PI / 2 + 2 * Math.PI * i / n;
+  const vertical = (i) => Math.abs(Math.cos(angle(i))) < 0.35;
+  const diameter = Math.round(Math.min(viewport.height * 0.1, viewport.width * 0.075));
+  const gap = Math.round(diameter * 0.3);
+  const layout = (radius2) => {
+    const above = H / 2 - radius2 - diameter / 2 - gap;
+    const besideW = (area.right - area.left) / 2 - radius2 - diameter / 2 - gap;
+    const verticalW = Math.round(Math.min(besideW * 2, (area.right - area.left) * 0.5));
+    const labelW2 = (i) => vertical(i) ? verticalW : besideW;
+    const boxH = (i) => vertical(i) ? above : radius2 * 1.1;
+    const scale2 = Math.min(
+      ...items.map(
+        (_, i) => fitRamp(
+          [items[i]],
+          context,
+          () => labelW2(i),
+          () => boxH(i)
+        ).scale
+      )
+    );
+    return { labelW: labelW2, scale: scale2 };
+  };
+  const radii = [0.3, 0.27, 0.24, 0.21, 0.18].map(
+    (share) => Math.round(Math.max(diameter * 1.2, Math.min(H * share, viewport.width * 0.16)))
+  );
+  const radius = radii.find((r) => layout(r).scale >= 0.85) ?? radii[radii.length - 1];
+  const { labelW, scale } = layout(radius);
+  const sizes = ramp(context, scale);
+  const measures = items.map((item, i) => measureItem(item, sizes, labelW(i)));
+  const line = withAlpha(area.accent, 0.75);
+  const stroke = Math.max(3, Math.round(viewport.height * 4e-3));
+  const clear = (diameter / 2 + diameter * 0.22) / radius;
+  const point = (a) => [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+  const layers = [...area.layers];
+  items.forEach((item, index) => {
+    const a = angle(index);
+    const [x, y] = point(a);
+    const parts = [];
+    const arcInto = (from, to, id) => {
+      const [x1, y1] = point(from + clear);
+      const [x2, y2] = point(to - clear);
+      return connector(id, `M ${x1} ${y1} A ${radius} ${radius} 0 0 1 ${x2} ${y2}`, line, stroke);
+    };
+    const arrives = index > 0 ? 0.35 : 0;
+    if (index > 0) parts.push([arcInto(angle(index - 1), a, `stage-${index}-arrow`), "draw", 0]);
+    parts.push(
+      ...pops(badge(`stage-${index}`, index + 1, x, y, diameter, area.accent, context), arrives)
+    );
+    const m = measures[index];
+    const cos = Math.cos(a);
+    let left;
+    let top;
+    let align;
+    const width = labelW(index);
+    if (cos > 0.35) {
+      left = x + diameter / 2 + gap;
+      top = y - Math.min(m.height / 2, diameter / 2);
+      align = "left";
+    } else if (cos < -0.35) {
+      left = x - diameter / 2 - gap - width;
+      top = y - Math.min(m.height / 2, diameter / 2);
+      align = "right";
+    } else {
+      left = x - width / 2;
+      top = Math.sin(a) < 0 ? y - diameter / 2 - gap - m.height : y + diameter / 2 + gap;
+      align = "center";
+    }
+    parts.push(
+      ...words(
+        itemText(`stage-${index}`, item, m, sizes, left, top, width, align, context),
+        arrives + 0.18
+      )
+    );
+    if (index === n - 1)
+      parts.push([arcInto(a, angle(n), "stage-close-arrow"), "draw", arrives + 0.5]);
+    layers.push(...step(parts, index, context));
+  });
+  return layers;
+}
+function layersBlock(input, context) {
+  const items = itemsOf(input);
+  if (items.length < 2) return cardsBlock({ ...input, template: "cards" }, context);
+  const area = frame(input, context);
+  const { theme, viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const n = items.length;
+  const portrait = area.portrait;
+  const R = Math.round(portrait ? Math.min(W * 0.4, H * 0.24) : Math.min(H * 0.48, W * 0.22));
+  const cx = portrait ? area.left + W / 2 : area.left + R;
+  const cy = portrait ? area.top + R : area.top + H / 2;
+  const gap = Math.round(viewport.width * (portrait ? 0.02 : 0.05));
+  const textLeft = portrait ? area.left + gap * 1.5 : cx + R + gap;
+  const textW = area.right - textLeft;
+  const textTop = portrait ? cy + R + viewport.height * 0.05 : area.top;
+  const textH = area.bottom - textTop;
+  const rowGap = Math.round(viewport.height * 0.025);
+  const { sizes } = fitRamp(
+    items,
+    context,
+    () => textW,
+    () => (textH - rowGap * (n - 1)) / n
+  );
+  const measures = items.map((item) => measureItem(item, sizes, textW));
+  const rowsH = measures.reduce((sum, m) => sum + m.height, 0) + rowGap * (n - 1);
+  let rowTop = portrait ? textTop : Math.max(area.top, cy - rowsH / 2);
+  const radius = (index) => R * (index + 1) / n;
+  const tint = (index) => withAlpha(area.accent, 0.85 - 0.6 * index / (n - 1));
+  const stroke = Math.max(2, Math.round(viewport.height * 3e-3));
+  const rings = [];
+  const callouts = [];
+  items.forEach((item, index) => {
+    const r = radius(index);
+    rings.unshift(
+      ...step(
+        [
+          [
+            {
+              type: "shape",
+              id: `layer-${index}`,
+              position: { x: cx - r, y: cy - r, width: r * 2, height: r * 2 },
+              content: {
+                shape: "circle",
+                fill: tint(index),
+                stroke: theme.colors.background,
+                strokeWidth: stroke
+              }
+            },
+            "pop",
+            0
+          ]
+        ],
+        index,
+        context
+      )
+    );
+    const m = measures[index];
+    const firstLine = item.label ? sizes.label * LABEL_LINE_HEIGHT : sizes.plain * DETAIL_LINE_HEIGHT;
+    const labelY = rowTop + firstLine / 2;
+    const parts = [];
+    if (portrait) {
+      const swatch = Math.round(sizes.label * 0.55);
+      parts.push([
+        {
+          type: "shape",
+          id: `layer-${index}-swatch`,
+          position: { x: area.left, y: labelY - swatch / 2, width: swatch, height: swatch },
+          content: { shape: "circle", fill: tint(index) }
+        },
+        "pop",
+        0.2
+      ]);
+    } else {
+      const inner = index ? radius(index - 1) : 0;
+      const middle = index ? (inner + r) / 2 : r * 0.45;
+      const angle = (-40 + 80 * index / Math.max(1, n - 1)) * Math.PI / 180;
+      const x = cx + middle * Math.cos(angle);
+      const y = cy + middle * Math.sin(angle);
+      const dot = Math.max(8, Math.round(viewport.height * 9e-3));
+      parts.push(
+        [
+          connector(
+            `layer-${index}-callout`,
+            `M ${x} ${y} L ${cx + R + gap * 0.3} ${labelY} L ${textLeft - gap * 0.25} ${labelY}`,
+            withAlpha(theme.colors.text, 0.55),
+            stroke,
+            false
+          ),
+          "draw",
+          0.25
+        ],
+        [
+          {
+            type: "shape",
+            id: `layer-${index}-pin`,
+            position: { x: x - dot / 2, y: y - dot / 2, width: dot, height: dot },
+            content: { shape: "circle", fill: theme.colors.text }
+          },
+          "pop",
+          0.2
+        ]
+      );
+    }
+    parts.push(
+      ...words(
+        itemText(`layer-${index}`, item, m, sizes, textLeft, rowTop, textW, "left", context),
+        0.4
+      )
+    );
+    callouts.push(...step(parts, index, context));
+    rowTop += m.height + rowGap;
+  });
+  return [...area.layers, ...rings, ...callouts];
+}
+var FIGURE_BASE = 280;
+var FIGURE_MIN = 120;
+var FIGURE_LINE_HEIGHT = 1;
+function splitFigure(stat) {
+  const match = stat.trim().match(/^(\D{0,2}[\d.,]+\s?[%×x]?)\s+(\p{L}[\p{L} -]{0,20})$/u);
+  return match ? { number: match[1].trim(), unit: match[2].trim() } : { number: stat.trim(), unit: "" };
+}
+function figureLockup(input, context) {
+  const area = frame({ title: input.headline, colorScheme: input.colorScheme }, context);
+  const { theme, viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const { number, unit } = splitFigure(input.stat);
+  const gutter = Math.round(viewport.width * 0.05);
+  const figureW = area.portrait ? W : W * 0.4;
+  const textLeft = area.portrait ? area.left : area.left + figureW + gutter;
+  const textW = area.right - textLeft;
+  const base = themedFontSize(FIGURE_BASE, context, true);
+  const figure = fitProse({
+    text: number,
+    baseFontSize: base,
+    minFontSize: Math.min(base, themedFontSize(FIGURE_MIN, context, true)),
+    maxWidthPx: figureW,
+    maxHeightPx: base * FIGURE_LINE_HEIGHT * 1.05,
+    lineHeight: FIGURE_LINE_HEIGHT
+  });
+  const unitSize = themedFontSize(LABEL_BASE, context, true);
+  const unitH = unit ? unitSize * LABEL_LINE_HEIGHT : 0;
+  const figureH = figure.fontSize * 1.08 + unitH;
+  const description = (input.description ?? "").trim();
+  const detail = (input.detail ?? "").trim();
+  const leadBase = themedFontSize(LEAD_BASE, context, false);
+  const room = area.portrait ? H - figureH - viewport.height * 0.05 : H;
+  const lead2 = fitProse({
+    text: description,
+    baseFontSize: leadBase,
+    minFontSize: Math.min(leadBase, themedFontSize(LEAD_MIN, context, false)),
+    maxWidthPx: textW,
+    maxHeightPx: room * (detail ? 0.6 : 0.9),
+    lineHeight: LEAD_LINE_HEIGHT
+  });
+  const detailSize = themedFontSize(DETAIL_BASE, context, false);
+  const detailGap = detail && description ? leadBase * 0.6 : 0;
+  const detailH = detail ? estimateProseLineCount(detail, detailSize, textW) * detailSize * DETAIL_LINE_HEIGHT : 0;
+  const wordsH = (description ? lead2.heightPx : 0) + detailGap + detailH;
+  const groupH = area.portrait ? figureH + viewport.height * 0.05 + wordsH : Math.max(figureH, wordsH);
+  const top = area.top + Math.max(0, (H - groupH) * 0.4);
+  const figureTop = area.portrait ? top : top + Math.max(0, (wordsH - figureH) / 2);
+  const wordsTop = area.portrait ? top + figureH + viewport.height * 0.05 : top + Math.max(0, (figureH - wordsH) / 2);
+  const motion = getMotionProfile(context);
+  const count = motion.countUp ? countUpSpecFor(number) : null;
+  const layers = [...area.layers];
+  layers.push({
+    ...textLayer("stat", number, box(area.left, figureTop, figureW, figure.fontSize * 1.08), {
+      fontSize: figure.fontSize,
+      fontFamily: getThemeFont(context, "title"),
+      fontWeight: "bold",
+      color: area.accent,
+      lineHeight: FIGURE_LINE_HEIGHT,
+      shadow: shouldUseShadow(context)
+    }),
+    animation: count ? { type: "countUp", duration: motion.countUpDuration, delay: 0.3, count } : entrance(context, "pop", 0.3)
+  });
+  if (unit)
+    layers.push({
+      ...textLayer(
+        "stat-unit",
+        unit,
+        box(area.left, figureTop + figure.fontSize * 1.08, figureW, unitH),
+        {
+          fontSize: unitSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: area.accent,
+          lineHeight: LABEL_LINE_HEIGHT
+        }
+      ),
+      animation: entrance(context, "text", 0.45)
+    });
+  if (!area.portrait && (description || detail))
+    layers.push({
+      type: "shape",
+      id: "stat-divider",
+      position: {
+        x: textLeft - gutter / 2 - 1,
+        y: Math.min(figureTop, wordsTop),
+        width: 2,
+        height: Math.max(figureH, wordsH)
+      },
+      content: { shape: "rect", fill: withAlpha(theme.colors.text, 0.18) },
+      animation: entrance(context, "bar", 0.35)
+    });
+  if (description)
+    layers.push({
+      ...textLayer(
+        "description",
+        description,
+        box(textLeft, wordsTop, textW, lead2.heightPx + lead2.fontSize * 0.4),
+        {
+          fontSize: lead2.fontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.text,
+          lineHeight: LEAD_LINE_HEIGHT,
+          ...lead2.maxLines ? { maxLines: lead2.maxLines } : {}
+        }
+      ),
+      animation: entrance(context, "text", 0.6)
+    });
+  if (detail)
+    layers.push({
+      ...textLayer(
+        "detail",
+        detail,
+        box(
+          textLeft,
+          wordsTop + (description ? lead2.heightPx : 0) + detailGap,
+          textW,
+          detailH + detailSize * 0.4
+        ),
+        {
+          fontSize: detailSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: withAlpha(theme.colors.text, 0.8),
+          lineHeight: DETAIL_LINE_HEIGHT
+        }
+      ),
+      animation: entrance(context, "text", 0.75)
+    });
+  return layers;
+}
+
 // src/doc/templates/statHighlight.ts
 var SAFE_TOP = 0.08;
 var SAFE_BOTTOM = 0.92;
@@ -1931,19 +3164,25 @@ var OPTICAL_CENTER = 0.47;
 var HERO_MAX_SHARE = 0.38;
 var STAT_LINE_HEIGHT = 1.1;
 var DESC_LINE_HEIGHT = 1.5;
-var DETAIL_LINE_HEIGHT = 1.4;
+var DETAIL_LINE_HEIGHT2 = 1.4;
 function statHighlight(input, context) {
-  const { stat, colorScheme = "blue" } = input;
+  if (input.headline?.trim() && !input.accentImage) return figureLockup(input, context);
+  const { stat, colorScheme } = input;
   const { theme, viewport } = context;
   const accentImage = accentForViewport(input.accentImage, viewport);
-  const colors = resolveColorScheme(context, colorScheme);
+  const colors = colorScheme ? resolveColorScheme(context, colorScheme) : {
+    ...resolveColorScheme(context, "blue"),
+    text: theme.colors.highlight || theme.colors.primary,
+    detail: theme.colors.text
+  };
+  const detailColor = "detail" in colors ? colors.detail : colors.text;
   const rawDescription = (input.description ?? "").trim();
   const description = rawDescription === stat.trim() ? "" : rawDescription;
   const detail = (input.detail ?? "").trim();
   const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
   const statFontSize = themedFontSize(148, context, true);
-  const descFontSize = themedFontSize(32, context, false);
-  const detailFontSize = themedFontSize(26, context, false);
+  const descFontSize = themedFontSize(40, context, false);
+  const detailFontSize = themedFontSize(30, context, false);
   const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 180))];
   const motion = getMotionProfile(context);
   const countSpec = motion.countUp ? countUpSpecFor(stat) : null;
@@ -1978,8 +3217,8 @@ function statHighlight(input, context) {
     baseFontSize: detailFontSize,
     minFontSize: detailFontSize,
     maxWidthPx: columnPx,
-    maxHeightPx: 2 * detailFontSize * DETAIL_LINE_HEIGHT,
-    lineHeight: DETAIL_LINE_HEIGHT
+    maxHeightPx: 2 * detailFontSize * DETAIL_LINE_HEIGHT2,
+    lineHeight: DETAIL_LINE_HEIGHT2
   }) : null;
   const detailBoxH = detailFit ? detailFit.heightPx + detailFontSize * 0.3 : 0;
   const detailGap = detailFit && description ? Math.round(descFontSize * 0.9) : 0;
@@ -2006,7 +3245,7 @@ function statHighlight(input, context) {
   const descTop = statTop + statBoxH + gap;
   const detailTop = descTop + descBoxH + detailGap;
   const pct2 = (px) => `${Number((px / frameH * 100).toFixed(3))}%`;
-  const box = (top, height) => ({
+  const box2 = (top, height) => ({
     x: accentLayout.textCenterX,
     y: pct2(top + height / 2),
     width: accentLayout.textWidth,
@@ -2030,7 +3269,7 @@ function statHighlight(input, context) {
         ...statFit.maxLines ? { maxLines: statFit.maxLines } : {}
       }
     },
-    position: box(statTop, statBoxH),
+    position: box2(statTop, statBoxH),
     animation: statAnimation
   });
   if (descFit) {
@@ -2050,7 +3289,7 @@ function statHighlight(input, context) {
           ...descFit.maxLines ? { maxLines: descFit.maxLines } : {}
         }
       },
-      position: box(descTop, descBoxH),
+      position: box2(descTop, descBoxH),
       animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.3 })
     });
   }
@@ -2066,15 +3305,15 @@ function statHighlight(input, context) {
           // Scheme *text* rather than *accent*: accents in the built-in
           // schemes are tuned as chart/fill colors and drop below legible
           // contrast as body copy on light surfaces.
-          color: colors.text,
+          color: detailColor,
           textAlign: "left",
-          lineHeight: DETAIL_LINE_HEIGHT,
+          lineHeight: DETAIL_LINE_HEIGHT2,
           shadow: shouldUseShadow(context),
           shrinkToFit: true,
           ...detailFit.maxLines ? { maxLines: detailFit.maxLines } : {}
         }
       },
-      position: box(detailTop, detailBoxH),
+      position: box2(detailTop, detailBoxH),
       animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 1 })
     });
   }
@@ -2348,7 +3587,7 @@ function factCard(input, context) {
   const explainTop = factTop + factBoxH + gap;
   const sourceTop = explainTop + explainBoxH + sourceGap;
   const pct2 = (px) => `${Number((px / frameH * 100).toFixed(3))}%`;
-  const box = (top, height) => ({
+  const box2 = (top, height) => ({
     x: accentLayout.textCenterX,
     y: pct2(top + height / 2),
     width: accentLayout.textWidth,
@@ -2372,7 +3611,7 @@ function factCard(input, context) {
         ...factFit.maxLines ? { maxLines: factFit.maxLines } : {}
       }
     },
-    position: box(factTop, factBoxH),
+    position: box2(factTop, factBoxH),
     animation: motionEntrance(context, { type: "fadeIn", duration: 1.5 })
   });
   if (explainFit) {
@@ -2392,7 +3631,7 @@ function factCard(input, context) {
           ...explainFit.maxLines ? { maxLines: explainFit.maxLines } : {}
         }
       },
-      position: box(explainTop, explainBoxH),
+      position: box2(explainTop, explainBoxH),
       animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.8 })
     });
   }
@@ -2413,7 +3652,7 @@ function factCard(input, context) {
           ...sourceFit.maxLines ? { maxLines: sourceFit.maxLines } : {}
         }
       },
-      position: box(sourceTop, sourceBoxH),
+      position: box2(sourceTop, sourceBoxH),
       animation: { type: "fadeIn", duration: 0.8, delay: 1.5 }
     });
   }
@@ -2704,7 +3943,7 @@ function dateEvent(input, context) {
   const dateTop = groupTopPx;
   const descTop = dateTop + dateH + descGap;
   const footerTop = descTop + descH + footerGap;
-  const box = (topPx, heightPx) => {
+  const box2 = (topPx, heightPx) => {
     const height = Math.round(heightPx);
     return {
       x: accentLayout.textCenterX,
@@ -2754,7 +3993,7 @@ function dateEvent(input, context) {
         shadow: shouldUseShadow(context)
       }
     },
-    position: box(dateTop, dateH + dateFit.fontSize * BOX_SLACK_EM),
+    position: box2(dateTop, dateH + dateFit.fontSize * BOX_SLACK_EM),
     animation: { type: "fadeIn", duration: 1.5 }
   });
   if (descFit) {
@@ -2775,7 +4014,7 @@ function dateEvent(input, context) {
           shadow: shouldUseShadow(context)
         }
       },
-      position: box(descTop, descH + descFit.fontSize * BOX_SLACK_EM),
+      position: box2(descTop, descH + descFit.fontSize * BOX_SLACK_EM),
       animation: { type: "fadeIn", duration: 2, delay: 1 }
     });
   }
@@ -2796,7 +4035,7 @@ function dateEvent(input, context) {
           shadow: shouldUseShadow(context)
         }
       },
-      position: box(footerTop, footerH + footerFontSize * BOX_SLACK_EM),
+      position: box2(footerTop, footerH + footerFontSize * BOX_SLACK_EM),
       animation: { type: "fadeIn", duration: 1, delay: 3 }
     });
   }
@@ -3033,13 +4272,13 @@ function fitWrapWidth(text, fontSize, columnWidthPx, fontFamily) {
   const mono = isMonoFamily(fontFamily);
   if (!mono && !WIDE_GLYPH_RE.test(text)) return columnWidthPx;
   const floor = columnWidthPx * 0.5;
-  const step = columnWidthPx * 0.02;
+  const step2 = columnWidthPx * 0.02;
   let width = columnWidthPx;
   while (width > floor) {
     const lines = simulateRendererLines(text, fontSize, width);
     const widest = Math.max(...lines.map((line) => estimateLineEm(line, mono))) * fontSize;
     if (widest <= columnWidthPx) return width;
-    width -= step;
+    width -= step2;
   }
   return floor;
 }
@@ -3407,8 +4646,8 @@ function listItemGeometry(fontSize, baseFontSize, itemCount, textWidthPx, ordere
 }
 function measureListHeightPx(items, fontSize, geometry) {
   let heightPx = 0;
-  for (const itemText of items) {
-    const lineCount = estimateProseLineCount(itemText, fontSize, geometry.bodyWidthPx);
+  for (const itemText2 of items) {
+    const lineCount = estimateProseLineCount(itemText2, fontSize, geometry.bodyWidthPx);
     heightPx += lineCount * fontSize * LIST_ITEM_LINE_HEIGHT + geometry.gapPx;
   }
   return heightPx;
@@ -3558,9 +4797,9 @@ function listBlock(input, context) {
   const bodyLeftX = `${leftPct + bodyIndentPx / context.viewport.width * 100}%`;
   let itemY = startY;
   for (let i = 0; i < items.length; i++) {
-    const itemText = items[i];
-    const itemHtml = richItems[i]?.text === itemText ? richItems[i]?.html : void 0;
-    const lineCount = estimateProseLineCount(itemText, itemFontSize, bodyWidthPx);
+    const itemText2 = items[i];
+    const itemHtml = richItems[i]?.text === itemText2 ? richItems[i]?.html : void 0;
+    const lineCount = estimateProseLineCount(itemText2, itemFontSize, bodyWidthPx);
     const animation = motionEntrance(context, {
       type: "fadeIn",
       duration: 0.8,
@@ -3593,11 +4832,11 @@ function listBlock(input, context) {
       type: "text",
       id: `item-${i}`,
       content: {
-        text: itemText,
+        text: itemText2,
         ...itemHtml ? { html: itemHtml } : {},
         paragraphs: [
           {
-            text: itemText,
+            text: itemText2,
             list: { ordered, level: 0, ...ordered ? { number: i + 1 } : {} }
           }
         ],
@@ -3831,7 +5070,7 @@ function definitionCard(input, context) {
   const defTop = ruleTop + RULE_HEIGHT_PX + defGap;
   const originTop = defTop + defH + originGap;
   const pct2 = (px) => `${(px / viewport.height * 100).toFixed(3)}%`;
-  const box = (topPx, heightPx) => {
+  const box2 = (topPx, heightPx) => {
     const height = Math.round(heightPx);
     return {
       x: accentLayout.textCenterX,
@@ -3869,7 +5108,7 @@ function definitionCard(input, context) {
         shadow: shouldUseShadow(context)
       }
     },
-    position: box(termTop, termH + termFit.fontSize * BOX_SLACK_EM2),
+    position: box2(termTop, termH + termFit.fontSize * BOX_SLACK_EM2),
     animation: motionEntrance(context, { type: "fadeIn", duration: 1.5 })
   });
   layers.push({
@@ -3906,7 +5145,7 @@ function definitionCard(input, context) {
           shadow: shouldUseShadow(context)
         }
       },
-      position: box(defTop, defH + defFit.fontSize * BOX_SLACK_EM2),
+      position: box2(defTop, defH + defFit.fontSize * BOX_SLACK_EM2),
       animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.8 })
     });
   }
@@ -3927,7 +5166,7 @@ function definitionCard(input, context) {
           shadow: shouldUseShadow(context)
         }
       },
-      position: box(originTop, originH + originFontSize * BOX_SLACK_EM2),
+      position: box2(originTop, originH + originFontSize * BOX_SLACK_EM2),
       animation: { type: "fadeIn", duration: 0.8, delay: 1.5 }
     });
   }
@@ -4638,14 +5877,14 @@ function niceTicks(min, max, targetCount = 5) {
   }
   const count = Math.max(2, targetCount);
   const range = niceNum(hi - lo, false);
-  const step = niceNum(range / (count - 1), true);
-  const niceMin = Math.floor(lo / step) * step;
-  const niceMax = Math.ceil(hi / step) * step;
+  const step2 = niceNum(range / (count - 1), true);
+  const niceMin = Math.floor(lo / step2) * step2;
+  const niceMax = Math.ceil(hi / step2) * step2;
   const ticks = [];
-  for (let tick = niceMin; tick <= niceMax + step * 1e-6; tick += step) {
-    ticks.push(Math.abs(tick) < step * 1e-6 ? 0 : Number(tick.toPrecision(12)));
+  for (let tick = niceMin; tick <= niceMax + step2 * 1e-6; tick += step2) {
+    ticks.push(Math.abs(tick) < step2 * 1e-6 ? 0 : Number(tick.toPrecision(12)));
   }
-  return { ticks, niceMin, niceMax, step };
+  return { ticks, niceMin, niceMax, step: step2 };
 }
 function formatChartValue(value, unit) {
   if (!Number.isFinite(value)) return "\u2014";
@@ -4725,16 +5964,16 @@ function computeChartFrame(options) {
     cursor = titleBand.y + titleBand.height;
   }
   let tableBand;
-  let tableHeight = 0;
+  let tableHeight2 = 0;
   if (options.tableRowCount > 0) {
-    tableHeight = Math.min(H * 0.4, (options.tableRowCount + 1) * options.tableFontSize * 2.4);
+    tableHeight2 = Math.min(H * 0.4, (options.tableRowCount + 1) * options.tableFontSize * 2.4);
   }
   const legendHeight = options.legendRows > 0 ? options.legendRows * options.legendRowHeight : 0;
   const chartArea = {
     x: marginX,
     y: cursor,
     width: innerWidth,
-    height: Math.max(40, H - marginY - cursor - legendHeight - tableHeight)
+    height: Math.max(40, H - marginY - cursor - legendHeight - tableHeight2)
   };
   cursor = chartArea.y + chartArea.height;
   let legendBand;
@@ -4742,8 +5981,8 @@ function computeChartFrame(options) {
     legendBand = { x: marginX, y: cursor, width: innerWidth, height: legendHeight };
     cursor += legendHeight;
   }
-  if (tableHeight > 0) {
-    tableBand = { x: marginX, y: cursor, width: innerWidth, height: tableHeight };
+  if (tableHeight2 > 0) {
+    tableBand = { x: marginX, y: cursor, width: innerWidth, height: tableHeight2 };
   }
   const plot = {
     x: chartArea.x + options.leftGutter,
@@ -4853,7 +6092,7 @@ function renderChart(kind, input, context) {
   const innerWidth = viewport.width * 0.88;
   const legend = legendLabels.length > 0 ? layoutLegend(legendLabels, legendFontSize, innerWidth) : null;
   const gutters = computeGutters(kind, data, input, context, axisFontSize, labelFontSize);
-  const frame = computeChartFrame({
+  const frame2 = computeChartFrame({
     viewportWidth: viewport.width,
     viewportHeight: viewport.height,
     hasTitle: title.length > 0,
@@ -4867,7 +6106,7 @@ function renderChart(kind, input, context) {
   });
   const entranceHint = getTemplateHint(context, templateId, "entrance", "staggered");
   const markDelay = (index) => entranceHint === "subtle" ? 0.1 : Math.min(1.2, 0.2 + index * 0.08);
-  const entrance = (index) => ({
+  const entrance2 = (index) => ({
     type: "fadeIn",
     duration: 0.6,
     delay: markDelay(index)
@@ -4877,7 +6116,7 @@ function renderChart(kind, input, context) {
   const growEasing = motion.textEntrance.easing;
   const eased = (animation) => growEasing ? { ...animation, easing: growEasing } : animation;
   const mark = (index, kind2, along = 0) => {
-    if (!motion.chartGrowth) return entrance(index);
+    if (!motion.chartGrowth) return entrance2(index);
     const delay = motionDelay(context, markDelay(index));
     switch (kind2) {
       case "bar":
@@ -4920,19 +6159,19 @@ function renderChart(kind, input, context) {
     input,
     context,
     data,
-    frame,
+    frame: frame2,
     colors,
     axisFontSize,
     labelFontSize,
     bodyFont,
     gridColor: withAlpha(theme.colors.text, 0.12),
     axisTextColor: theme.colors.textMuted,
-    entrance,
+    entrance: entrance2,
     mark,
     labelAnimation
   };
   const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 170))];
-  if (title && frame.titleBand) {
+  if (title && frame2.titleBand) {
     layers.push({
       type: "text",
       id: "title",
@@ -4948,9 +6187,9 @@ function renderChart(kind, input, context) {
         }
       },
       position: {
-        x: frame.titleBand.x + frame.titleBand.width / 2,
-        y: frame.titleBand.y + frame.titleBand.height / 2,
-        width: frame.titleBand.width,
+        x: frame2.titleBand.x + frame2.titleBand.width / 2,
+        y: frame2.titleBand.y + frame2.titleBand.height / 2,
+        width: frame2.titleBand.width,
         anchor: "center"
       },
       animation: motionEntrance(context, { type: "fadeIn", duration: 0.8 })
@@ -4975,11 +6214,11 @@ function renderChart(kind, input, context) {
       layers.push(...paintScatter(paint));
       break;
   }
-  if (legend && frame.legendBand) {
-    layers.push(...paintLegend(paint, legend, frame.legendBand, legendFontSize));
+  if (legend && frame2.legendBand) {
+    layers.push(...paintLegend(paint, legend, frame2.legendBand, legendFontSize));
   }
-  if (input.showTable === true && frame.tableBand) {
-    layers.push(tableLayer(table, frame.tableBand, tableFontSize, input, context));
+  if (input.showTable === true && frame2.tableBand) {
+    layers.push(tableLayer(table, frame2.tableBand, tableFontSize, input, context));
   }
   return layers;
 }
@@ -5060,7 +6299,7 @@ function valueTicks(kind, data, input) {
   return niceTicks(min, max, 5);
 }
 function paintValueAxisY(paint, scale, yFor) {
-  const { frame, gridColor, axisTextColor, axisFontSize, bodyFont, input } = paint;
+  const { frame: frame2, gridColor, axisTextColor, axisFontSize, bodyFont, input } = paint;
   const layers = [];
   scale.ticks.forEach((tick, index) => {
     const y = yFor(tick);
@@ -5072,9 +6311,9 @@ function paintValueAxisY(paint, scale, yFor) {
         fill: tick === 0 ? withAlpha(paint.context.theme.colors.text, 0.35) : gridColor
       },
       position: {
-        x: frame.plot.x,
+        x: frame2.plot.x,
         y: y - (tick === 0 ? 1 : 0.5),
-        width: frame.plot.width,
+        width: frame2.plot.width,
         height: tick === 0 ? 2 : 1
       }
     });
@@ -5091,7 +6330,7 @@ function paintValueAxisY(paint, scale, yFor) {
         }
       },
       position: {
-        x: frame.chartArea.x + (frame.plot.x - frame.chartArea.x) / 2,
+        x: frame2.chartArea.x + (frame2.plot.x - frame2.chartArea.x) / 2,
         y,
         anchor: "center"
       }
@@ -5100,11 +6339,11 @@ function paintValueAxisY(paint, scale, yFor) {
   return layers;
 }
 function paintCategoryAxisX(paint, xForCenter) {
-  const { frame, data, labelFontSize, axisTextColor, bodyFont } = paint;
-  const step = categoryLabelStep(data.labels.length, frame.plot.width, labelFontSize);
+  const { frame: frame2, data, labelFontSize, axisTextColor, bodyFont } = paint;
+  const step2 = categoryLabelStep(data.labels.length, frame2.plot.width, labelFontSize);
   const layers = [];
   data.labels.forEach((label, index) => {
-    if (index % step !== 0 || !label) return;
+    if (index % step2 !== 0 || !label) return;
     layers.push({
       type: "text",
       id: `cat-${index}`,
@@ -5119,7 +6358,7 @@ function paintCategoryAxisX(paint, xForCenter) {
       },
       position: {
         x: xForCenter(index),
-        y: frame.plot.y + frame.plot.height + labelFontSize * 1.2,
+        y: frame2.plot.y + frame2.plot.height + labelFontSize * 1.2,
         anchor: "center"
       }
     });
@@ -5127,14 +6366,14 @@ function paintCategoryAxisX(paint, xForCenter) {
   return layers;
 }
 function paintColumns(paint) {
-  const { frame, data, colors, input, mark, labelAnimation } = paint;
+  const { frame: frame2, data, colors, input, mark, labelAnimation } = paint;
   const scale = valueTicks("column", data, input);
-  const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const yFor = (v) => frame2.plot.y + frame2.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const layers = paintValueAxisY(paint, scale, yFor);
   const n = data.labels.length;
-  const band = frame.plot.width / Math.max(1, n);
+  const band = frame2.plot.width / Math.max(1, n);
   const innerPad = band * 0.15;
-  layers.push(...paintCategoryAxisX(paint, (i) => frame.plot.x + (i + 0.5) * band));
+  layers.push(...paintCategoryAxisX(paint, (i) => frame2.plot.x + (i + 0.5) * band));
   const stacked = input.stacked === true && data.series.length > 1;
   const extents = stacked ? stackSeries(data.series) : null;
   const groupWidth = band - innerPad * 2;
@@ -5146,7 +6385,7 @@ function paintColumns(paint) {
       if (!extent || extent.y0 === extent.y1) return;
       const top = yFor(extent.y1);
       const height = Math.max(1, yFor(extent.y0) - top);
-      const x = stacked ? frame.plot.x + i * band + innerPad : frame.plot.x + i * band + innerPad + s * (barWidth + 4);
+      const x = stacked ? frame2.plot.x + i * band + innerPad : frame2.plot.x + i * band + innerPad + s * (barWidth + 4);
       layers.push({
         type: "shape",
         id: `mark-${s}-${i}`,
@@ -5172,7 +6411,7 @@ function paintColumns(paint) {
 }
 function paintBars(paint) {
   const {
-    frame,
+    frame: frame2,
     data,
     colors,
     input,
@@ -5189,8 +6428,8 @@ function paintBars(paint) {
   const labelWidthPx = (value) => formatChartValue(value, input.unit).length * axisFontSize * CHART_CHAR_WIDTH_EM;
   const showValueLabels = input.showValues === true && !(input.stacked === true);
   const reservedForLabels = showValueLabels ? data.series.flatMap((series) => series.values).filter((v) => v !== null).reduce((max, v) => Math.max(max, labelWidthPx(v)), 0) + labelGap : 0;
-  const axisWidth = Math.max(20, frame.plot.width - reservedForLabels);
-  const xFor = (v) => frame.plot.x + axisWidth * ((v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const axisWidth = Math.max(20, frame2.plot.width - reservedForLabels);
+  const xFor = (v) => frame2.plot.x + axisWidth * ((v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const layers = [];
   scale.ticks.forEach((tick, index) => {
     const x = xFor(tick);
@@ -5203,9 +6442,9 @@ function paintBars(paint) {
       },
       position: {
         x: x - (tick === 0 ? 1 : 0.5),
-        y: frame.plot.y,
+        y: frame2.plot.y,
         width: tick === 0 ? 2 : 1,
-        height: frame.plot.height
+        height: frame2.plot.height
       }
     });
     layers.push({
@@ -5220,11 +6459,11 @@ function paintBars(paint) {
           textAlign: "center"
         }
       },
-      position: { x, y: frame.plot.y + frame.plot.height + axisFontSize * 1.2, anchor: "center" }
+      position: { x, y: frame2.plot.y + frame2.plot.height + axisFontSize * 1.2, anchor: "center" }
     });
   });
   const n = data.labels.length;
-  const band = frame.plot.height / Math.max(1, n);
+  const band = frame2.plot.height / Math.max(1, n);
   const innerPad = band * 0.15;
   const stacked = input.stacked === true && data.series.length > 1;
   const extents = stacked ? stackSeries(data.series) : null;
@@ -5245,8 +6484,8 @@ function paintBars(paint) {
         }
       },
       position: {
-        x: frame.chartArea.x + (frame.plot.x - frame.chartArea.x) / 2,
-        y: frame.plot.y + (i + 0.5) * band,
+        x: frame2.chartArea.x + (frame2.plot.x - frame2.chartArea.x) / 2,
+        y: frame2.plot.y + (i + 0.5) * band,
         anchor: "center"
       }
     });
@@ -5258,7 +6497,7 @@ function paintBars(paint) {
       if (!extent || extent.y0 === extent.y1) return;
       const left = xFor(extent.y0);
       const width = Math.max(1, xFor(extent.y1) - left);
-      const y = stacked ? frame.plot.y + i * band + innerPad : frame.plot.y + i * band + innerPad + s * (barHeight + 4);
+      const y = stacked ? frame2.plot.y + i * band + innerPad : frame2.plot.y + i * band + innerPad + s * (barHeight + 4);
       layers.push({
         type: "shape",
         id: `mark-${s}-${i}`,
@@ -5285,14 +6524,14 @@ function paintBars(paint) {
   return layers;
 }
 function paintRadial(paint) {
-  const { kind, frame, data, colors, input, entrance, mark, labelAnimation, context } = paint;
+  const { kind, frame: frame2, data, colors, input, entrance: entrance2, mark, labelAnimation, context } = paint;
   const slices = data.labels.map((label, index) => ({ label, value: data.series[0].values[index], index })).filter(
     (s) => s.value !== null && Number.isFinite(s.value) && s.value > 0
   );
   const total = slices.reduce((sum, s) => sum + s.value, 0);
-  const cx = frame.chartArea.x + frame.chartArea.width / 2;
-  const cy = frame.chartArea.y + frame.chartArea.height / 2;
-  const rOuter = Math.min(frame.chartArea.width, frame.chartArea.height) * 0.42;
+  const cx = frame2.chartArea.x + frame2.chartArea.width / 2;
+  const cy = frame2.chartArea.y + frame2.chartArea.height / 2;
+  const rOuter = Math.min(frame2.chartArea.width, frame2.chartArea.height) * 0.42;
   const rInner = kind === "donut" ? rOuter * 0.55 : 0;
   const layers = [];
   let startDeg = 0;
@@ -5333,7 +6572,7 @@ function paintRadial(paint) {
           y: cy + rLabel * Math.sin(rad),
           anchor: "center"
         },
-        animation: labelAnimation(order, entrance(order))
+        animation: labelAnimation(order, entrance2(order))
       });
     }
     startDeg += sweep;
@@ -5341,12 +6580,12 @@ function paintRadial(paint) {
   return layers;
 }
 function paintLines(paint) {
-  const { kind, frame, data, colors, input, mark, labelAnimation } = paint;
+  const { kind, frame: frame2, data, colors, input, mark, labelAnimation } = paint;
   const scale = valueTicks(kind, data, input);
-  const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const yFor = (v) => frame2.plot.y + frame2.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const n = data.labels.length;
-  const band = frame.plot.width / Math.max(1, n);
-  const xForCenter = (i) => frame.plot.x + (i + 0.5) * band;
+  const band = frame2.plot.width / Math.max(1, n);
+  const xForCenter = (i) => frame2.plot.x + (i + 0.5) * band;
   const layers = paintValueAxisY(paint, scale, yFor);
   layers.push(...paintCategoryAxisX(paint, xForCenter));
   const baselineY = yFor(Math.max(scale.niceMin, Math.min(scale.niceMax, 0)));
@@ -5377,10 +6616,10 @@ function paintLines(paint) {
             strokeWidth: 0
           },
           position: {
-            x: frame.plot.x,
-            y: frame.plot.y,
-            width: frame.plot.width,
-            height: frame.plot.height
+            x: frame2.plot.x,
+            y: frame2.plot.y,
+            width: frame2.plot.width,
+            height: frame2.plot.height
           },
           animation: mark(s, "area")
         });
@@ -5391,10 +6630,10 @@ function paintLines(paint) {
           id: `line-${s}-${seg}`,
           content: { d: polylinePath(segment), stroke: colors[s], strokeWidth: 4, fill: "none" },
           position: {
-            x: frame.plot.x,
-            y: frame.plot.y,
-            width: frame.plot.width,
-            height: frame.plot.height
+            x: frame2.plot.x,
+            y: frame2.plot.y,
+            width: frame2.plot.width,
+            height: frame2.plot.height
           },
           animation: mark(s, "line")
         });
@@ -5429,9 +6668,9 @@ function paintLines(paint) {
   return layers;
 }
 function paintScatter(paint) {
-  const { frame, data, colors, input, mark } = paint;
+  const { frame: frame2, data, colors, input, mark } = paint;
   const scale = valueTicks("scatter", data, input);
-  const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const yFor = (v) => frame2.plot.y + frame2.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const layers = paintValueAxisY(paint, scale, yFor);
   const numericCount = data.labelNumbers.filter((v) => v !== null).length;
   const numericX = data.labels.length > 0 && numericCount / data.labels.length >= 0.6;
@@ -5442,15 +6681,15 @@ function paintScatter(paint) {
     const span = xScale.niceMax - xScale.niceMin;
     xFor = (i) => {
       const v = data.labelNumbers[i];
-      return v === null ? null : frame.plot.x + frame.plot.width * ((v - xScale.niceMin) / span);
+      return v === null ? null : frame2.plot.x + frame2.plot.width * ((v - xScale.niceMin) / span);
     };
     xScale.ticks.forEach((tick, index) => {
-      const x = frame.plot.x + frame.plot.width * ((tick - xScale.niceMin) / span);
+      const x = frame2.plot.x + frame2.plot.width * ((tick - xScale.niceMin) / span);
       layers.push({
         type: "shape",
         id: `xgrid-${index}`,
         content: { shape: "rect", fill: paint.gridColor },
-        position: { x: x - 0.5, y: frame.plot.y, width: 1, height: frame.plot.height }
+        position: { x: x - 0.5, y: frame2.plot.y, width: 1, height: frame2.plot.height }
       });
       layers.push({
         type: "text",
@@ -5466,15 +6705,15 @@ function paintScatter(paint) {
         },
         position: {
           x,
-          y: frame.plot.y + frame.plot.height + paint.axisFontSize * 1.2,
+          y: frame2.plot.y + frame2.plot.height + paint.axisFontSize * 1.2,
           anchor: "center"
         }
       });
     });
   } else {
-    const band = frame.plot.width / Math.max(1, data.labels.length);
-    xFor = (i) => frame.plot.x + (i + 0.5) * band;
-    layers.push(...paintCategoryAxisX(paint, (i) => frame.plot.x + (i + 0.5) * band));
+    const band = frame2.plot.width / Math.max(1, data.labels.length);
+    xFor = (i) => frame2.plot.x + (i + 0.5) * band;
+    layers.push(...paintCategoryAxisX(paint, (i) => frame2.plot.x + (i + 0.5) * band));
   }
   const r = 7;
   data.series.forEach((series, s) => {
@@ -5598,19 +6837,22 @@ var TITLE_VARIANTS = {
     wide: "title-stack",
     tall: "split",
     square: "title-stack",
-    multiple: "title-stack"
+    multiple: "title-stack",
+    table: "title-stack"
   },
   square: {
     wide: "title-stack",
     tall: "split",
     square: "title-stack",
-    multiple: "title-stack"
+    multiple: "title-stack",
+    table: "title-stack"
   },
   portrait: {
     wide: "title-stack",
     tall: "title-stack",
     square: "title-stack",
-    multiple: "title-stack"
+    multiple: "title-stack",
+    table: "title-stack"
   }
 };
 var TEXT_VARIANTS = {
@@ -5618,19 +6860,22 @@ var TEXT_VARIANTS = {
     wide: "split",
     tall: "split",
     square: "split",
-    multiple: "split"
+    multiple: "split",
+    table: "text-stack"
   },
   square: {
     wide: "text-stack",
     tall: "split",
     square: "text-stack",
-    multiple: "text-stack"
+    multiple: "text-stack",
+    table: "text-stack"
   },
   portrait: {
     wide: "text-stack",
     tall: "text-stack",
     square: "text-stack",
-    multiple: "text-stack"
+    multiple: "text-stack",
+    table: "text-stack"
   }
 };
 var DENSE_VARIANTS = {
@@ -5638,19 +6883,22 @@ var DENSE_VARIANTS = {
     wide: "dense-stack",
     tall: "dense-stack",
     square: "dense-stack",
-    multiple: "dense-stack"
+    multiple: "dense-stack",
+    table: "dense-stack"
   },
   square: {
     wide: "dense-stack",
     tall: "dense-stack",
     square: "dense-stack",
-    multiple: "dense-stack"
+    multiple: "dense-stack",
+    table: "dense-stack"
   },
   portrait: {
     wide: "dense-stack",
     tall: "dense-stack",
     square: "dense-stack",
-    multiple: "dense-stack"
+    multiple: "dense-stack",
+    table: "dense-stack"
   }
 };
 var BLOCK_MEDIA_LAYOUT_POLICIES = {
@@ -5810,6 +7058,34 @@ var BLOCK_MEDIA_LAYOUT_POLICIES = {
     unconsumedMedia: "reserve-when-no-native-media",
     variants: TEXT_VARIANTS
   },
+  cards: {
+    summary: "Text-only cards by default; supplemental media is paired with the cards.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  process: {
+    summary: "A drawn process by default; supplemental media is paired with the stages.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  cycle: {
+    summary: "A drawn cycle by default; supplemental media is paired with the ring.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: TEXT_VARIANTS
+  },
+  layers: {
+    summary: "Drawn concentric layers by default; supplemental media is paired with the rings.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: TEXT_VARIANTS
+  },
   photoGrid: {
     summary: "Requires a primary image collection and owns the complete tiled media field.",
     noMedia: "unsupported",
@@ -5963,12 +7239,12 @@ function getBlockMediaLayoutPolicy(template) {
 // src/doc/richMediaLayout.ts
 function containedFeatureArea(region, aspects) {
   const count = aspects.length;
-  const columns = Math.min(
+  const columns2 = Math.min(
     count,
     Math.max(1, Math.ceil(Math.sqrt(count * region.width / region.height)))
   );
-  const rows = Math.ceil(count / columns);
-  const width = region.width / columns;
+  const rows = Math.ceil(count / columns2);
+  const width = region.width / columns2;
   const height = region.height / rows;
   return aspects.reduce((area, aspect) => {
     const ratio = aspect && Number.isFinite(aspect) && aspect > 0 ? aspect : 16 / 9;
@@ -6056,7 +7332,8 @@ function rect(viewport, x, y, width, height) {
     height: viewport.height * height
   };
 }
-function mediaShape(mediaCount, aspectRatios) {
+function mediaShape(mediaCount, aspectRatios, table = false) {
+  if (table) return "table";
   if (mediaCount > 1) return "multiple";
   const aspect = aspectRatios[0] ?? 16 / 9;
   if (aspect < 0.8) return "tall";
@@ -6122,6 +7399,7 @@ function overlayMediaRect(viewport, shape) {
       case "square":
         return rect(viewport, 0.49, 0.58, 0.44, 0.35);
       case "multiple":
+      case "table":
         return rect(viewport, 0.07, 0.67, 0.86, 0.27);
       case "wide":
         return rect(viewport, 0.07, 0.71, 0.86, 0.23);
@@ -6134,6 +7412,7 @@ function overlayMediaRect(viewport, shape) {
       case "square":
         return rect(viewport, 0.55, 0.52, 0.4, 0.4);
       case "multiple":
+      case "table":
         return rect(viewport, 0.08, 0.62, 0.84, 0.31);
       case "wide":
         return rect(viewport, 0.08, 0.68, 0.84, 0.27);
@@ -6145,6 +7424,7 @@ function overlayMediaRect(viewport, shape) {
     case "square":
       return rect(viewport, 0.62, 0.22, 0.34, 0.56);
     case "multiple":
+    case "table":
       return rect(viewport, 0.52, 0.5, 0.44, 0.42);
     case "wide":
       return rect(viewport, 0.54, 0.58, 0.42, 0.34);
@@ -6481,14 +7761,14 @@ var MEDIA_BANDS = {
   "full-frame": "full"
 };
 var BLOCK_GAP_EM = 0.55;
-function textLayer(layers, id) {
+function textLayer2(layers, id) {
   const layer = layers.find((candidate) => candidate.id === id);
   return layer?.type === "text" ? layer : void 0;
 }
 function mediaBandLayout(layers, viewport, band, aspect) {
   const backdrop = layers.filter((layer) => isFullViewportBackground(layer, viewport));
-  const title = textLayer(layers, "title");
-  const body = textLayer(layers, "body");
+  const title = textLayer2(layers, "title");
+  const body = textLayer2(layers, "body");
   if (band === "full" || !title && !body) {
     return { layers: backdrop, mediaRect: rect(viewport, 0, 0, 1, 1), framed: false };
   }
@@ -6604,7 +7884,7 @@ function mediaBandLayout(layers, viewport, band, aspect) {
 }
 function resolveSupplementalMediaLayout(layers, template, viewport, mediaCount, aspectRatios, featureOptions = {}) {
   const policy = getBlockMediaLayoutPolicy(template);
-  const shape = mediaShape(mediaCount, aspectRatios);
+  const shape = mediaShape(mediaCount, aspectRatios, featureOptions.table);
   const alreadyOwnsMedia = layers.some(
     (layer) => layer.type === "image" || layer.type === "video" || layer.type === "videoEmbed" || layer.type === "map" || layer.type === "mermaid" || layer.type === "svg"
   );
@@ -6836,14 +8116,14 @@ function planCanvasFrame(template, title, context) {
     ...mediaRect ? { mediaRect } : {}
   };
 }
-function placeCanvasGroup(frame, contentW, contentH) {
-  const scale = Math.min(frame.availW / contentW, frame.availH / contentH, CANVAS_MAX_SCALE);
+function placeCanvasGroup(frame2, contentW, contentH) {
+  const scale = Math.min(frame2.availW / contentW, frame2.availH / contentH, CANVAS_MAX_SCALE);
   const scaledW = contentW * scale;
   const scaledH = contentH * scale;
-  const groupH = frame.titleBlockPx + scaledH + frame.descriptionBlockPx;
-  const groupTop = frame.region.y + Math.max(PADDING / 2, (frame.region.height - groupH) / 2);
-  const offsetX = frame.region.x + PADDING + (frame.availW - scaledW) / 2;
-  const offsetY = groupTop + frame.titleBlockPx;
+  const groupH = frame2.titleBlockPx + scaledH + frame2.descriptionBlockPx;
+  const groupTop = frame2.region.y + Math.max(PADDING / 2, (frame2.region.height - groupH) / 2);
+  const offsetX = frame2.region.x + PADDING + (frame2.availW - scaledW) / 2;
+  const offsetY = groupTop + frame2.titleBlockPx;
   return {
     scale,
     scaledW,
@@ -6854,8 +8134,8 @@ function placeCanvasGroup(frame, contentW, contentH) {
     descriptionY: offsetY + scaledH + CANVAS_DESCRIPTION_GAP_PX
   };
 }
-function canvasTitleLayer(id, text, frame, placement, context) {
-  const fit = frame.title;
+function canvasTitleLayer(id, text, frame2, placement, context) {
+  const fit = frame2.title;
   if (!fit) return void 0;
   return {
     type: "text",
@@ -6874,15 +8154,15 @@ function canvasTitleLayer(id, text, frame, placement, context) {
       }
     },
     position: {
-      x: frame.region.x + PADDING,
+      x: frame2.region.x + PADDING,
       y: placement.groupTop,
       width: fit.widthPx,
       anchor: "top-left"
     }
   };
 }
-function canvasDescriptionLayer(id, frame, placement, context) {
-  const description = frame.description;
+function canvasDescriptionLayer(id, frame2, placement, context) {
+  const description = frame2.description;
   if (!description) return void 0;
   const { fit, widthPx } = description;
   return {
@@ -6900,7 +8180,7 @@ function canvasDescriptionLayer(id, frame, placement, context) {
       }
     },
     position: {
-      x: frame.region.x + (frame.region.width - widthPx) / 2,
+      x: frame2.region.x + (frame2.region.width - widthPx) / 2,
       y: placement.descriptionY,
       width: widthPx,
       anchor: "top-left"
@@ -7009,10 +8289,10 @@ function diagramBlock(input, context) {
   const maxX = Math.max(...resolved.nodes.map((n) => n.x + n.w));
   const minY = Math.min(...resolved.nodes.map((n) => n.y));
   const maxY = Math.max(...resolved.nodes.map((n) => n.y + n.h));
-  const frame = planCanvasFrame("diagram", input.title, context);
+  const frame2 = planCanvasFrame("diagram", input.title, context);
   const contentW = Math.max(1, maxX - minX);
   const contentH = Math.max(1, maxY - minY);
-  const placement = placeCanvasGroup(frame, contentW, contentH);
+  const placement = placeCanvasGroup(frame2, contentW, contentH);
   const { scale, offsetX, offsetY } = placement;
   const fontAdj = Math.min(Math.max(scale, 1), 1.5);
   const strokeW = Math.round(2 * fontAdj);
@@ -7024,7 +8304,7 @@ function diagramBlock(input, context) {
   });
   const layers = [...background];
   if (input.title) {
-    const titleLayer = canvasTitleLayer("diagram-title", input.title, frame, placement, context);
+    const titleLayer = canvasTitleLayer("diagram-title", input.title, frame2, placement, context);
     if (titleLayer) layers.push(titleLayer);
   }
   const containers = resolved.nodes.filter((n) => n.isContainer).sort((a, b) => a.depth - b.depth || a.y - b.y || a.x - b.x);
@@ -7188,7 +8468,7 @@ function diagramBlock(input, context) {
     };
     layers.push(label);
   }
-  const descriptionLayer = canvasDescriptionLayer("diagram-description", frame, placement, context);
+  const descriptionLayer = canvasDescriptionLayer("diagram-description", frame2, placement, context);
   if (descriptionLayer) layers.push(descriptionLayer);
   return layers;
 }
@@ -7446,8 +8726,8 @@ function timelineBlock(input, context) {
   const axisWidth = Math.max(1, axisEndX - axisStartX);
   const markerRadius = Math.max(6, Math.min(11, Math.min(viewport.width, viewport.height) / 105));
   const trackColor = withAlpha(colors.text ?? theme.colors.primary, 0.72);
-  const accentColor = colors.accent ?? theme.colors.primary;
-  const branchColor = withAlpha(accentColor, 0.78);
+  const accentColor2 = colors.accent ?? theme.colors.primary;
+  const branchColor = withAlpha(accentColor2, 0.78);
   const calloutColor = withAlpha(theme.colors.text, 0.48);
   const maxCalloutEvents = Math.max(
     1,
@@ -7679,7 +8959,7 @@ function timelineBlock(input, context) {
           x,
           y,
           pointMarkerRadius,
-          accentColor,
+          accentColor2,
           delay,
           build
         )
@@ -7690,8 +8970,8 @@ function timelineBlock(input, context) {
         id: `timeline-marker-${eventLayerId}`,
         content: {
           shape: "circle",
-          fill: marker === "hollow" ? theme.colors.background : accentColor,
-          stroke: accentColor,
+          fill: marker === "hollow" ? theme.colors.background : accentColor2,
+          stroke: accentColor2,
           strokeWidth: Math.max(1.5, pointMarkerRadius * 0.28)
         },
         position: {
@@ -8110,17 +9390,17 @@ function drawingBlock(input, context) {
   const maxX = Math.max(...layout.shapes.map((s) => s.x + s.width));
   const minY = Math.min(...layout.shapes.map((s) => s.y));
   const maxY = Math.max(...layout.shapes.map((s) => s.y + s.height));
-  const frame = planCanvasFrame("drawing", input.title, context);
+  const frame2 = planCanvasFrame("drawing", input.title, context);
   const contentW = Math.max(1, maxX - minX);
   const contentH = Math.max(1, maxY - minY);
-  const placement = placeCanvasGroup(frame, contentW, contentH);
+  const placement = placeCanvasGroup(frame2, contentW, contentH);
   const { scale, offsetX, offsetY } = placement;
   const tx = (x) => offsetX + (x - minX) * scale;
   const ty = (y) => offsetY + (y - minY) * scale;
   const fontAdj = Math.min(Math.max(scale, 1), 1.5);
   const layers = [];
   if (input.title) {
-    const titleLayer = canvasTitleLayer("drawing-title", input.title, frame, placement, context);
+    const titleLayer = canvasTitleLayer("drawing-title", input.title, frame2, placement, context);
     if (titleLayer) layers.push(titleLayer);
   }
   const boxes = /* @__PURE__ */ new Map();
@@ -8165,7 +9445,7 @@ function drawingBlock(input, context) {
     const h = s.height * scale;
     layers.push(...shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj));
   }
-  const descriptionLayer = canvasDescriptionLayer("drawing-description", frame, placement, context);
+  const descriptionLayer = canvasDescriptionLayer("drawing-description", frame2, placement, context);
   if (descriptionLayer) layers.push(descriptionLayer);
   return layers;
 }
@@ -8175,7 +9455,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   const fill = s.fill ?? defaultFill;
   if (s.kind === "text") {
     out.push(
-      textLayer2(
+      textLayer3(
         `shape-${s.id}`,
         s.text ?? s.label ?? "",
         x + w / 2,
@@ -8234,7 +9514,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   if (s.label) {
     out.push(
-      textLayer2(
+      textLayer3(
         `shape-label-${s.id}`,
         s.label,
         x + w / 2,
@@ -8249,7 +9529,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   if (s.sublabel) {
     out.push(
-      textLayer2(
+      textLayer3(
         `shape-sublabel-${s.id}`,
         s.sublabel,
         x + w / 2,
@@ -8264,7 +9544,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   return out;
 }
-function textLayer2(id, text, cx, cy, width, context, color, bold, fontAdj) {
+function textLayer3(id, text, cx, cy, width, context, color, bold, fontAdj) {
   return {
     type: "text",
     id,
@@ -8815,6 +10095,10 @@ var templateRegistry = {
   map: mapBlock,
   fullBleedQuote,
   list: listBlock,
+  cards: cardsBlock,
+  process: processBlock,
+  cycle: cycleBlock,
+  layers: layersBlock,
   photoGrid,
   definitionCard,
   comparisonBar,
@@ -9418,27 +10702,299 @@ function fallbackBlockLayers(block, context, notice) {
       }
     });
   }
-  layers.push({
-    type: "text",
-    id: "fallback-notice",
+  layers.push({
+    type: "text",
+    id: "fallback-notice",
+    content: {
+      text: `\u26A0 ${notice}`,
+      style: {
+        fontSize: themedFontSize(18, context),
+        fontFamily: getThemeFont(context, "body"),
+        color: withAlpha(colors.text, 0.6),
+        textAlign: "center"
+      }
+    },
+    position: { x: "50%", y: "92%", anchor: "center", width: layout.maxTextWidth }
+  });
+  return layers;
+}
+function extractBodyText(block) {
+  if (!block.contents || block.contents.length === 0) return "";
+  const text = block.contents.filter((node) => !isPictureFence(node)).map((node) => extractPlainText(node)).join("\n").trim();
+  if (text.length <= MAX_BODY_CHARS) return text;
+  return `${text.slice(0, MAX_BODY_CHARS).trimEnd()}\u2026`;
+}
+
+// src/doc/structuredData.ts
+var DATA_FENCE_LANGS = /* @__PURE__ */ new Set(["json", "yaml", "yml"]);
+function isDataFence(node) {
+  if (!node.lang || !DATA_FENCE_LANGS.has(node.lang.toLowerCase())) return false;
+  const meta = node.meta ?? "";
+  return /\bdata\b/.test(meta);
+}
+function parseDataFence(node) {
+  const lang = node.lang?.toLowerCase();
+  if (lang === "json") {
+    try {
+      const parsed = JSON.parse(node.value);
+      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return { error: 'JSON data fence must contain a top-level object ({"key": \u2026})' };
+      }
+      return { data: parsed };
+    } catch (err) {
+      return { error: `invalid JSON: ${err instanceof Error ? err.message : String(err)}` };
+    }
+  }
+  try {
+    return { data: parseYamlSubset(node.value) };
+  } catch (err) {
+    return { error: `invalid YAML: ${err instanceof Error ? err.message : String(err)}` };
+  }
+}
+function replaceDataFence(contents, data) {
+  const value = JSON.stringify(data, null, 2);
+  const index = contents.findIndex((node) => node.type === "code" && isDataFence(node));
+  if (index < 0) {
+    const fence = { type: "code", lang: "json", meta: "data", value };
+    return [...contents, fence];
+  }
+  const next = [...contents];
+  next[index] = { ...contents[index], value };
+  return next;
+}
+function parseScalar(raw) {
+  const trimmed = raw.trim();
+  if (trimmed.length >= 2) {
+    const q = trimmed[0];
+    if ((q === '"' || q === "'") && trimmed.endsWith(q)) {
+      return trimmed.slice(1, -1);
+    }
+  }
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (trimmed === "null" || trimmed === "~") return null;
+  if (trimmed !== "" && !isNaN(Number(trimmed))) return Number(trimmed);
+  return trimmed;
+}
+function splitInlineArray(interior) {
+  const items = [];
+  let current = "";
+  let quote = null;
+  for (const ch of interior) {
+    if (quote) {
+      current += ch;
+      if (ch === quote) quote = null;
+    } else if (ch === '"' || ch === "'") {
+      quote = ch;
+      current += ch;
+    } else if (ch === ",") {
+      items.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  items.push(current);
+  return items.map((s) => s.trim()).filter((s) => s !== "");
+}
+function parseInlineValue(raw) {
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    return splitInlineArray(trimmed.slice(1, -1)).map(parseScalar);
+  }
+  return parseScalar(trimmed);
+}
+function parseYamlSubset(src) {
+  const result = {};
+  const lines = src.split("\n");
+  let pendingKey = null;
+  let pendingKind = null;
+  let childIndent = -1;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const indent = line.length - line.trimStart().length;
+    if (indent > 0) {
+      if (!pendingKey) {
+        throw new Error(`line ${i + 1}: unexpected indented line without a preceding "key:" line`);
+      }
+      if (childIndent < 0) childIndent = indent;
+      if (indent > childIndent) {
+        throw new Error(
+          `line ${i + 1}: nesting deeper than one level is not supported \u2014 use a \`\`\`json data fence for nested input`
+        );
+      }
+      if (trimmed.startsWith("- ")) {
+        if (pendingKind === "map") {
+          throw new Error(
+            `line ${i + 1}: cannot mix list items and mapping keys under "${pendingKey}"`
+          );
+        }
+        pendingKind = "list";
+        result[pendingKey].push(parseInlineValue(trimmed.slice(2)));
+        continue;
+      }
+      if (pendingKind === "list") {
+        throw new Error(
+          `line ${i + 1}: cannot mix mapping keys and list items under "${pendingKey}"`
+        );
+      }
+      const subColon = trimmed.indexOf(":");
+      if (subColon < 1) {
+        throw new Error(`line ${i + 1}: expected "key: value"`);
+      }
+      const subValue = trimmed.slice(subColon + 1).trim();
+      if (subValue === "") {
+        throw new Error(
+          `line ${i + 1}: nesting deeper than one level is not supported \u2014 use a \`\`\`json data fence for nested input`
+        );
+      }
+      if (pendingKind !== "map") {
+        pendingKind = "map";
+        result[pendingKey] = {};
+      }
+      result[pendingKey][trimmed.slice(0, subColon).trim()] = parseInlineValue(subValue);
+      continue;
+    }
+    pendingKey = null;
+    pendingKind = null;
+    childIndent = -1;
+    const colonIdx = trimmed.indexOf(":");
+    if (colonIdx < 1) {
+      throw new Error(`line ${i + 1}: expected "key: value"`);
+    }
+    const key = trimmed.slice(0, colonIdx).trim();
+    const rawValue = trimmed.slice(colonIdx + 1).trim();
+    if (rawValue === "") {
+      result[key] = [];
+      pendingKey = key;
+    } else {
+      result[key] = parseInlineValue(rawValue);
+    }
+  }
+  return result;
+}
+function findFirstTable(contents) {
+  return contents?.find((n) => n.type === "table");
+}
+function extractTableData(table) {
+  const toCells = (row) => row.children.map((cell) => extractPlainText(cell).trim());
+  const [headerRow, ...bodyRows] = table.children;
+  return {
+    headers: headerRow ? toCells(headerRow) : [],
+    rows: bodyRows.map(toCells),
+    ...table.align && table.align.some((a) => a != null) ? { align: table.align } : {}
+  };
+}
+
+// src/doc/featureTable.ts
+var CHARACTER_EM = 0.55;
+var HEADER_CHARACTER_EM = 0.6;
+var CELL_SIDE_EM = 1.5;
+var LINE_EM = 1.2;
+var CELL_TOP_EM = 1.2;
+var SAFETY = 0.92;
+function rowsOf(table) {
+  return [
+    ...table.headers.length ? [{ cells: table.headers, em: HEADER_CHARACTER_EM }] : [],
+    ...table.rows.map((cells) => ({ cells, em: CHARACTER_EM }))
+  ];
+}
+function columns(table) {
+  const count = Math.max(1, ...rowsOf(table).map((row) => row.cells.length));
+  return Array.from(
+    { length: count },
+    (_, index) => rowsOf(table).reduce(
+      (column, row) => {
+        const lines = (row.cells[index] ?? "").split("\n");
+        const words2 = lines.flatMap((line) => line.split(/\s+/u));
+        return {
+          word: Math.max(column.word, ...words2.map((word) => word.length * row.em)),
+          line: Math.max(column.line, ...lines.map((line) => line.trim().length * row.em))
+        };
+      },
+      { word: 0, line: 0 }
+    )
+  );
+}
+function columnWidths(cols, space) {
+  const words2 = cols.reduce((sum, column) => sum + column.word, 0);
+  const lines = cols.reduce((sum, column) => sum + column.line, 0);
+  if (words2 > space) return null;
+  if (lines <= space) return cols.map((column) => column.line);
+  const share = (space - words2) / Math.max(1e-6, lines - words2);
+  return cols.map((column) => column.word + (column.line - column.word) * share);
+}
+function tableHeight(table, widths) {
+  return rowsOf(table).reduce((height, row) => {
+    const lines = Math.max(
+      1,
+      ...row.cells.map(
+        (cell, index) => cell.split("\n").reduce(
+          (sum, line) => sum + Math.max(1, Math.ceil(line.trim().length * row.em / (widths[index] || 1))),
+          0
+        )
+      )
+    );
+    return height + lines * LINE_EM + CELL_TOP_EM;
+  }, 0);
+}
+function featureTableAspect(table) {
+  const cols = columns(table);
+  const widths = cols.map((column) => column.line);
+  const width = widths.reduce((sum, value) => sum + value + CELL_SIDE_EM, 0);
+  return width / Math.max(1, tableHeight(table, widths));
+}
+function fitFeatureTable(table, box2, max, min) {
+  const cols = columns(table);
+  const height = (size) => {
+    const widths = columnWidths(cols, box2.width * SAFETY / size - cols.length * CELL_SIDE_EM);
+    return widths ? tableHeight(table, widths) * size + 4 : null;
+  };
+  for (let size = Math.floor(max); size > min; size--) {
+    const needed = height(size);
+    if (needed !== null && needed <= box2.height * SAFETY)
+      return { fontSize: size, height: Math.min(box2.height, needed / SAFETY) };
+  }
+  return { fontSize: min, height: box2.height };
+}
+function featureTableLayer(id, table, rect2, context) {
+  const { theme, viewport } = context;
+  const unit = Math.min(viewport.width, viewport.height);
+  const margin = unit * 0.045;
+  const left = Math.max(rect2.x, margin);
+  const box2 = {
+    x: left,
+    y: rect2.y,
+    width: Math.min(rect2.x + rect2.width, viewport.width - margin) - left,
+    height: Math.min(rect2.y + rect2.height, viewport.height - margin) - rect2.y
+  };
+  const { fontSize, height } = fitFeatureTable(table, box2, unit * 0.03, Math.max(8, unit * 8e-3));
+  return {
+    type: "table",
+    id,
+    // As tall as its rows, centered in its box.
+    position: { x: box2.x, y: box2.y + (box2.height - height) / 2, width: box2.width, height },
     content: {
-      text: `\u26A0 ${notice}`,
+      headers: table.headers,
+      rows: table.rows,
+      ...table.align ? { align: table.align } : {},
+      wrap: true,
       style: {
-        fontSize: themedFontSize(18, context),
+        // The theme's own color: a summary slide has no color scheme to borrow.
+        headerBackground: theme.colors.primary,
+        headerColor: pickContrastingText(theme.colors.primary),
+        cellBackground: withAlpha(theme.colors.text, 0.04),
+        cellColor: theme.colors.text,
+        borderColor: withAlpha(theme.colors.text, 0.15),
+        fontSize,
         fontFamily: getThemeFont(context, "body"),
-        color: withAlpha(colors.text, 0.6),
-        textAlign: "center"
+        headerFontFamily: getThemeFont(context, "title"),
+        borderRadius: 8
       }
-    },
-    position: { x: "50%", y: "92%", anchor: "center", width: layout.maxTextWidth }
-  });
-  return layers;
-}
-function extractBodyText(block) {
-  if (!block.contents || block.contents.length === 0) return "";
-  const text = block.contents.filter((node) => !isPictureFence(node)).map((node) => extractPlainText(node)).join("\n").trim();
-  if (text.length <= MAX_BODY_CHARS) return text;
-  return `${text.slice(0, MAX_BODY_CHARS).trimEnd()}\u2026`;
+    }
+  };
 }
 
 // src/doc/materializeBlockLayers.ts
@@ -9566,6 +11122,11 @@ function svgIslandAspectRatio(source) {
   const result = parseSvgIsland(source);
   return result.ok ? result.island.aspectRatio : 16 / 9;
 }
+function featureTables(layers, block) {
+  if (!block.summaryMode || layers.some((layer) => layer.type === "table")) return [];
+  if (block.template && TABLE_FED_TEMPLATES.has(resolveTemplateName(block.template))) return [];
+  return (block.contents ?? []).filter((node) => node.type === "table").map(extractTableData).filter((table) => table.headers.length > 0 || table.rows.length > 0);
+}
 function embeddedSpatialMedia(block) {
   const canonicalTemplate = block.template ? resolveTemplateName(block.template) : void 0;
   const fences = (block.contents ?? []).filter(
@@ -9674,6 +11235,11 @@ function collectRichMediaItems(layers, block) {
       source,
       aspectRatio: svgIslandAspectRatio(source)
     })),
+    ...featureTables(layers, block).map((table) => ({
+      kind: "table",
+      table,
+      aspectRatio: featureTableAspect(table)
+    })),
     ...embeddedSpatialMedia(block)
   ];
 }
@@ -9687,16 +11253,16 @@ function gridCells(region, count, viewport, inset) {
     width: Math.max(0, region.width - padding * 2),
     height: Math.max(0, region.height - padding * 2)
   };
-  const columns = Math.min(
+  const columns2 = Math.min(
     count,
     Math.max(1, Math.ceil(Math.sqrt(count * (inner.width / Math.max(1, inner.height)))))
   );
-  const rows = Math.ceil(count / columns);
-  const width = (inner.width - gap * (columns - 1)) / columns;
+  const rows = Math.ceil(count / columns2);
+  const width = (inner.width - gap * (columns2 - 1)) / columns2;
   const height = (inner.height - gap * (rows - 1)) / rows;
   return Array.from({ length: count }, (_, index) => ({
-    x: inner.x + index % columns * (width + gap),
-    y: inner.y + Math.floor(index / columns) * (height + gap),
+    x: inner.x + index % columns2 * (width + gap),
+    y: inner.y + Math.floor(index / columns2) * (height + gap),
     width,
     height
   }));
@@ -9708,7 +11274,7 @@ function effectiveImageTreatment(theme, block) {
   if (!base || base.type === "none") return void 0;
   return base.type === "duotone" && !base.color ? { ...base, color: theme.colors.primary } : base;
 }
-function richMediaLayers(item, position, block, theme, kindIndex) {
+function richMediaLayers(item, position, block, theme, viewport, kindIndex) {
   if (item.kind === "image") {
     const treatment = effectiveImageTreatment(theme, block);
     return [
@@ -9780,6 +11346,16 @@ function richMediaLayers(item, position, block, theme, kindIndex) {
       }
     ];
   }
+  if (item.kind === "table") {
+    return [
+      featureTableLayer(
+        `${block.id}-table-${kindIndex}`,
+        item.table,
+        position,
+        createTemplateContext(theme, 0, 1, viewport)
+      )
+    ];
+  }
   const localViewport = {
     width: position.width,
     height: position.height,
@@ -9833,7 +11409,7 @@ function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRati
     const key = item.kind === "image" || item.kind === "video" ? item.src : item.kind === "mermaid" ? item.source : void 0;
     const intrinsic = key ? mediaAspectRatios?.[key] : void 0;
     if (intrinsic && Number.isFinite(intrinsic) && intrinsic > 0) return intrinsic;
-    return item.kind === "video" ? void 0 : item.aspectRatio;
+    return item.kind === "video" || item.kind === "table" ? void 0 : item.aspectRatio;
   });
   const aspects = items.map((item, index) => knownAspects[index] ?? item.aspectRatio);
   const layout = block.summaryLayout === "feature" ? resolveFeatureSummaryLayout(timedLayers, viewport, aspects) : resolveSupplementalMediaLayout(
@@ -9845,7 +11421,8 @@ function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRati
     {
       summaryFeature: block.summaryMode === "headings-and-features" && !timedLayers.some((layer) => layer.id === "feature-body"),
       stackColumns: createTemplateContext(theme, 0, 1, viewport).layout.stackColumns,
-      knownAspectRatios: knownAspects
+      knownAspectRatios: knownAspects,
+      table: items.some((item) => item.kind === "table")
     }
   );
   const cells = gridCells(layout.mediaRect, items.length, viewport, layout.framed);
@@ -9855,13 +11432,14 @@ function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRati
     videoEmbed: 0,
     mermaid: 0,
     svg: 0,
+    table: 0,
     spatial: 0
   };
   const mediaLayers = items.flatMap((item, index) => {
     counters[item.kind] += 1;
-    return richMediaLayers(item, cells[index], block, theme, counters[item.kind]);
+    return richMediaLayers(item, cells[index], block, theme, viewport, counters[item.kind]);
   });
-  const frame = layout.framed ? {
+  const frame2 = layout.framed ? {
     id: `${block.id}-rich-media-frame`,
     type: "shape",
     position: layout.mediaRect,
@@ -9873,7 +11451,7 @@ function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRati
       borderRadius: Math.max(12, Math.round(Math.min(viewport.width, viewport.height) * 0.018))
     }
   } : void 0;
-  return [...layout.layers, ...frame ? [frame] : [], ...mediaLayers];
+  return [...layout.layers, ...frame2 ? [frame2] : [], ...mediaLayers];
 }
 function executeTemplateMaterialization(templateBlock, context, registry) {
   const safeTemplateBlock = cloneData(templateBlock);
@@ -10031,6 +11609,22 @@ var TEMPLATE_METADATA = {
     label: "List",
     description: "Renders a bulleted or numbered list in a clean, card-style layout."
   },
+  cards: {
+    label: "Cards",
+    description: "Shows two to six parallel ideas side by side as cards, each revealed in turn."
+  },
+  process: {
+    label: "Process",
+    description: "Shows an ordered process as numbered stages joined by arrows."
+  },
+  cycle: {
+    label: "Cycle",
+    description: "Arranges the stages of a cycle on a ring, the last leading back to the first."
+  },
+  layers: {
+    label: "Layers",
+    description: "Draws nested parts as concentric rings, innermost first, each one called out."
+  },
   photoGrid: {
     label: "Photo Grid",
     description: "Arranges up to four photos in a mosaic grid."
@@ -10220,6 +11814,30 @@ var TEMPLATE_AUTHORING_METADATA = {
     safeForContentFirst: false,
     placement: "heading"
   },
+  cards: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  process: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  cycle: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  layers: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
   photoGrid: {
     role: "media",
     bodyPolicy: "structured",
@@ -10430,7 +12048,7 @@ function frostedCoverLayout(title, subtitle, context, coverLayout = "stacked") {
     };
   };
   if (coverLayout === "split" && subtitle?.trim()) {
-    const { fontSize: fontSize2, lines: lines2, textWidth: textWidth2, textHeight: textHeight2, padX: padX2, padY: padY2, radius: radius2, box: box2 } = fitTitle(FROSTED_SPLIT_TITLE_SCALE);
+    const { fontSize: fontSize2, lines: lines2, textWidth: textWidth2, textHeight: textHeight2, padX: padX2, padY: padY2, radius: radius2, box: box3 } = fitTitle(FROSTED_SPLIT_TITLE_SCALE);
     const deckMin = themedFontSize(COVER_SUBTITLE_BASE_PX, context, false);
     const deck = fitFrostedText(
       subtitle.trim(),
@@ -10464,7 +12082,7 @@ function frostedCoverLayout(title, subtitle, context, coverLayout = "stacked") {
         fontSize: fontSize2,
         lines: lines2,
         plate: titlePlate,
-        title: box2(titlePlate.y),
+        title: box3(titlePlate.y),
         subtitle: {
           cx,
           cy: deckPlate.y + deckHeight / 2,
@@ -10480,7 +12098,7 @@ function frostedCoverLayout(title, subtitle, context, coverLayout = "stacked") {
       };
     }
   }
-  const { fontSize, lines, column, textWidth, textHeight, padX, padY, radius, box } = fitTitle(1);
+  const { fontSize, lines, column, textWidth, textHeight, padX, padY, radius, box: box2 } = fitTitle(1);
   let sub;
   if (subtitle?.trim()) {
     const subSize = themedFontSize(COVER_SUBTITLE_BASE_PX, context, false);
@@ -10509,7 +12127,7 @@ function frostedCoverLayout(title, subtitle, context, coverLayout = "stacked") {
       height: plateHeight,
       radius
     },
-    title: box(plateY),
+    title: box2(plateY),
     ...sub ? {
       subtitle: {
         cx,
@@ -11188,169 +12806,6 @@ function hasTemplate(name) {
   return resolveTemplateName(name) in templateRegistry;
 }
 
-// src/doc/structuredData.ts
-var DATA_FENCE_LANGS = /* @__PURE__ */ new Set(["json", "yaml", "yml"]);
-function isDataFence(node) {
-  if (!node.lang || !DATA_FENCE_LANGS.has(node.lang.toLowerCase())) return false;
-  const meta = node.meta ?? "";
-  return /\bdata\b/.test(meta);
-}
-function parseDataFence(node) {
-  const lang = node.lang?.toLowerCase();
-  if (lang === "json") {
-    try {
-      const parsed = JSON.parse(node.value);
-      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
-        return { error: 'JSON data fence must contain a top-level object ({"key": \u2026})' };
-      }
-      return { data: parsed };
-    } catch (err) {
-      return { error: `invalid JSON: ${err instanceof Error ? err.message : String(err)}` };
-    }
-  }
-  try {
-    return { data: parseYamlSubset(node.value) };
-  } catch (err) {
-    return { error: `invalid YAML: ${err instanceof Error ? err.message : String(err)}` };
-  }
-}
-function replaceDataFence(contents, data) {
-  const value = JSON.stringify(data, null, 2);
-  const index = contents.findIndex((node) => node.type === "code" && isDataFence(node));
-  if (index < 0) {
-    const fence = { type: "code", lang: "json", meta: "data", value };
-    return [...contents, fence];
-  }
-  const next = [...contents];
-  next[index] = { ...contents[index], value };
-  return next;
-}
-function parseScalar(raw) {
-  const trimmed = raw.trim();
-  if (trimmed.length >= 2) {
-    const q = trimmed[0];
-    if ((q === '"' || q === "'") && trimmed.endsWith(q)) {
-      return trimmed.slice(1, -1);
-    }
-  }
-  if (trimmed === "true") return true;
-  if (trimmed === "false") return false;
-  if (trimmed === "null" || trimmed === "~") return null;
-  if (trimmed !== "" && !isNaN(Number(trimmed))) return Number(trimmed);
-  return trimmed;
-}
-function splitInlineArray(interior) {
-  const items = [];
-  let current = "";
-  let quote = null;
-  for (const ch of interior) {
-    if (quote) {
-      current += ch;
-      if (ch === quote) quote = null;
-    } else if (ch === '"' || ch === "'") {
-      quote = ch;
-      current += ch;
-    } else if (ch === ",") {
-      items.push(current);
-      current = "";
-    } else {
-      current += ch;
-    }
-  }
-  items.push(current);
-  return items.map((s) => s.trim()).filter((s) => s !== "");
-}
-function parseInlineValue(raw) {
-  const trimmed = raw.trim();
-  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
-    return splitInlineArray(trimmed.slice(1, -1)).map(parseScalar);
-  }
-  return parseScalar(trimmed);
-}
-function parseYamlSubset(src) {
-  const result = {};
-  const lines = src.split("\n");
-  let pendingKey = null;
-  let pendingKind = null;
-  let childIndent = -1;
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const trimmed = line.trim();
-    if (!trimmed || trimmed.startsWith("#")) continue;
-    const indent = line.length - line.trimStart().length;
-    if (indent > 0) {
-      if (!pendingKey) {
-        throw new Error(`line ${i + 1}: unexpected indented line without a preceding "key:" line`);
-      }
-      if (childIndent < 0) childIndent = indent;
-      if (indent > childIndent) {
-        throw new Error(
-          `line ${i + 1}: nesting deeper than one level is not supported \u2014 use a \`\`\`json data fence for nested input`
-        );
-      }
-      if (trimmed.startsWith("- ")) {
-        if (pendingKind === "map") {
-          throw new Error(
-            `line ${i + 1}: cannot mix list items and mapping keys under "${pendingKey}"`
-          );
-        }
-        pendingKind = "list";
-        result[pendingKey].push(parseInlineValue(trimmed.slice(2)));
-        continue;
-      }
-      if (pendingKind === "list") {
-        throw new Error(
-          `line ${i + 1}: cannot mix mapping keys and list items under "${pendingKey}"`
-        );
-      }
-      const subColon = trimmed.indexOf(":");
-      if (subColon < 1) {
-        throw new Error(`line ${i + 1}: expected "key: value"`);
-      }
-      const subValue = trimmed.slice(subColon + 1).trim();
-      if (subValue === "") {
-        throw new Error(
-          `line ${i + 1}: nesting deeper than one level is not supported \u2014 use a \`\`\`json data fence for nested input`
-        );
-      }
-      if (pendingKind !== "map") {
-        pendingKind = "map";
-        result[pendingKey] = {};
-      }
-      result[pendingKey][trimmed.slice(0, subColon).trim()] = parseInlineValue(subValue);
-      continue;
-    }
-    pendingKey = null;
-    pendingKind = null;
-    childIndent = -1;
-    const colonIdx = trimmed.indexOf(":");
-    if (colonIdx < 1) {
-      throw new Error(`line ${i + 1}: expected "key: value"`);
-    }
-    const key = trimmed.slice(0, colonIdx).trim();
-    const rawValue = trimmed.slice(colonIdx + 1).trim();
-    if (rawValue === "") {
-      result[key] = [];
-      pendingKey = key;
-    } else {
-      result[key] = parseInlineValue(rawValue);
-    }
-  }
-  return result;
-}
-function findFirstTable(contents) {
-  return contents?.find((n) => n.type === "table");
-}
-function extractTableData(table) {
-  const toCells = (row) => row.children.map((cell) => extractPlainText(cell).trim());
-  const [headerRow, ...bodyRows] = table.children;
-  return {
-    headers: headerRow ? toCells(headerRow) : [],
-    rows: bodyRows.map(toCells),
-    ...table.align && table.align.some((a) => a != null) ? { align: table.align } : {}
-  };
-}
-
 // src/doc/annotationBlocks.ts
 function applyBlockMeta(block, m) {
   if (m.build) block.build = m.build;
@@ -11987,8 +13442,8 @@ function splitIntoSentences(text) {
   if (fragments.length === 0) return [];
   const split = [];
   for (const frag of fragments) {
-    const words = frag.split(/\s+/);
-    if (words.length > MAX_PHRASE_WORDS) {
+    const words2 = frag.split(/\s+/);
+    if (words2.length > MAX_PHRASE_WORDS) {
       const mid = Math.floor(frag.length / 2);
       const clauseRe = /[,;]\s+|\s+—\s+|\s+-\s+/g;
       let bestSplit = -1;
@@ -12290,16 +13745,16 @@ function wordIndexAtChar(script, charOffset) {
   }
   return lo;
 }
-function wordIndexAtTime(words, tSec) {
-  if (words.length === 0) return 0;
+function wordIndexAtTime(words2, tSec) {
+  if (words2.length === 0) return 0;
   let lo = 0;
-  let hi = words.length - 1;
+  let hi = words2.length - 1;
   while (lo < hi) {
     const mid = lo + hi + 1 >> 1;
-    if (words[mid].tSec <= tSec) lo = mid;
+    if (words2[mid].tSec <= tSec) lo = mid;
     else hi = mid - 1;
   }
-  return words[lo].tSec <= tSec ? lo : 0;
+  return words2[lo].tSec <= tSec ? lo : 0;
 }
 
 // src/doc/builds.ts
@@ -12333,21 +13788,30 @@ function planContentBuilds(nodes, spec) {
 }
 function blockBuildSteps(block) {
   if (!block.build || block.build.mode === "off") return [];
-  return block.layers?.flatMap(
-    (layer) => layer.type === "text" ? layer.content.buildSteps ?? [] : []
-  ) ?? [];
+  const layers = block.layers ?? [];
+  const tagged = layers.filter((layer) => layer.buildStep !== void 0);
+  if (tagged.length) {
+    const count = Math.max(...tagged.map((layer) => layer.buildStep)) + 1;
+    return Array.from({ length: count }, (_, index) => ({
+      id: `build-${index}`,
+      text: tagged.flatMap(
+        (layer) => layer.buildStep === index && layer.type === "text" ? [layer.content.text] : []
+      ).join(" ").trim()
+    }));
+  }
+  return layers.flatMap((layer) => layer.type === "text" ? layer.content.buildSteps ?? [] : []);
 }
 function buildSourceText(steps) {
-  return JSON.stringify(steps.map((step) => [step.text, step.ancestors ?? []]));
+  return JSON.stringify(steps.map((step2) => [step2.text, step2.ancestors ?? []]));
 }
 function resolveBuildTimeline(steps, spec, duration, timing) {
   const end = Number.isFinite(duration) ? Math.max(0, duration) : 0;
   const requested = Number.isFinite(spec.duration) ? Math.max(0, spec.duration) : 0.4;
-  let entrance = Math.min(requested, end / Math.max(4, steps.length * 2));
+  let entrance2 = Math.min(requested, end / Math.max(4, steps.length * 2));
   const intro = Math.min(0.5, end * 0.08);
   const hold = Math.min(1.5, end * 0.2);
-  const latest = Math.max(0, end - hold - entrance);
-  const weights = steps.map((step) => Math.max(1, step.text.trim().split(/\s+/).length));
+  const latest = Math.max(0, end - hold - entrance2);
+  const weights = steps.map((step2) => Math.max(1, step2.text.trim().split(/\s+/).length));
   const total = weights.reduce((sum, weight) => sum + weight, 0);
   let consumed = 0;
   let previous = 0;
@@ -12363,21 +13827,21 @@ function resolveBuildTimeline(steps, spec, duration, timing) {
     return start;
   });
   if (matched && starts.length)
-    entrance = Math.min(
-      entrance,
+    entrance2 = Math.min(
+      entrance2,
       Math.max(0, end - starts[starts.length - 1] - Math.min(0.04, end / 8))
     );
-  return { starts, entrance, compressed: steps.length > 0 && end < steps.length * 0.8 };
+  return { starts, entrance: entrance2, compressed: steps.length > 0 && end < steps.length * 0.8 };
 }
-function buildCursorAtTime(timeline, time) {
+function buildCursorAtTime(timeline2, time) {
   let revealed = 0;
-  for (const start of timeline.starts) {
+  for (const start of timeline2.starts) {
     if (time < start) break;
     revealed++;
   }
   return {
     revealed,
-    progress: revealed === 0 ? 0 : timeline.entrance === 0 ? 1 : Math.min(1, Math.max(0, (time - timeline.starts[revealed - 1]) / timeline.entrance))
+    progress: revealed === 0 ? 0 : timeline2.entrance === 0 ? 1 : Math.min(1, Math.max(0, (time - timeline2.starts[revealed - 1]) / timeline2.entrance))
   };
 }
 function buildTargetState(index, steps, cursor, spec, motion = true) {
@@ -12410,11 +13874,11 @@ function resolveDocBuildTiming(doc, blocks) {
     if (recorded?.length) {
       const automatic = resolveBuildTimeline(steps, block.build, block.duration);
       let last = 0;
-      const starts2 = steps.map((_, step) => {
-        const event = recorded.find((event2) => event2.step === step);
-        const following = recorded.filter((event2) => event2.step > step).sort((a, b) => a.step - b.step)[0];
+      const starts2 = steps.map((_, step2) => {
+        const event = recorded.find((event2) => event2.step === step2);
+        const following = recorded.filter((event2) => event2.step > step2).sort((a, b) => a.step - b.step)[0];
         const estimate = Math.min(
-          automatic.starts[step],
+          automatic.starts[step2],
           following ? Math.max(0, following.time - block.startTime) : block.duration
         );
         last = Math.max(last, event ? event.time - block.startTime : estimate);
@@ -12432,8 +13896,8 @@ function resolveDocBuildTiming(doc, blocks) {
     if (!source) return block;
     let cursor = 0;
     const starts = [];
-    for (const step of steps) {
-      const text = step.text.trim();
+    for (const step2 of steps) {
+      const text = step2.text.trim();
       const offset = text ? source.text.indexOf(text, cursor) : -1;
       if (offset < 0) return block;
       const word = narration.bookmarks.find(
@@ -12450,13 +13914,14 @@ function resolveDocBuildTiming(doc, blocks) {
 // src/doc/templates/contentBlock.ts
 function bodyNodes(context) {
   if (context.block?.summaryMode === "headings-and-features") return [];
+  const summary = !!context.block?.summaryMode;
   return (context.block?.contents ?? []).filter(
     // Mermaid source, hosted-video links and picture-only paragraphs are
     // already materialized as visual layers (a diagram, a player, the picture
     // itself). Repeating them as prose makes the loss-averse default noisy
     // without preserving any additional meaning — a pasted picture's alt text
     // is just its generated file name.
-    (node) => !isMaterializedMediaNode(node) && !isPictureParagraph(node)
+    (node) => !isMaterializedMediaNode(node) && !isPictureParagraph(node) && !(summary && (node.type === "table" || node.type === "code"))
   );
 }
 function listParagraphs(list, level = 0) {
@@ -12599,6 +14064,12 @@ export {
   countUpSpecFor,
   formatCountValue,
   formatCountUp,
+  splitConceptItem,
+  conceptBuildStepTexts,
+  cardsBlock,
+  processBlock,
+  cycleBlock,
+  layersBlock,
   statHighlight,
   quoteBlock,
   factCard,
@@ -12652,6 +14123,12 @@ export {
   coerceTemplateParams,
   lintTemplateParams,
   fallbackBlockLayers,
+  isDataFence,
+  parseDataFence,
+  replaceDataFence,
+  parseYamlSubset,
+  findFirstTable,
+  extractTableData,
   materializeBlockLayers,
   materializeBlockLayersWithRuntime,
   TEMPLATE_METADATA,
@@ -12661,12 +14138,6 @@ export {
   expandDocBlocks,
   getAvailableTemplates,
   hasTemplate,
-  isDataFence,
-  parseDataFence,
-  replaceDataFence,
-  parseYamlSubset,
-  findFirstTable,
-  extractTableData,
   detectPromotableBodyAnnotation,
   getPinnedBlockMeta,
   markdownToDoc,