@bendyline/squisq 2.13.11 → 2.13.13

package/dist/{chunk-SKGMNBQX.js → chunk-CTT4XAGO.js}

@@ -32,7 +32,7 @@ import {
   profileBlockContents,
   renderMarkdownBlocksHtml,
   treeToTemplateData
-} from "./chunk-3WUI2N6C.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";
@@ -4661,6 +5900,12 @@ function formatChartValue(value, unit) {
   }
   return unit ? `${text} ${unit}` : text;
 }
+function formatChartDataValue(value, unit) {
+  if (!Number.isFinite(value) || Math.abs(value) >= 1e4) return formatChartValue(value, unit);
+  const sign = value < 0 ? "-" : "";
+  const text = `${sign}${Math.abs(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}`;
+  return unit ? `${text} ${unit}` : text;
+}
 function trimTrailingZero(text) {
   return text.replace(/\.0$/, "");
 }
@@ -4725,16 +5970,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 +5987,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 +6098,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 +6112,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 +6122,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 +6165,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 +6193,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 +6220,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 +6305,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 +6317,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 +6336,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 +6345,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 +6364,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 +6372,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 +6391,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 +6417,7 @@ function paintColumns(paint) {
 }
 function paintBars(paint) {
   const {
-    frame,
+    frame: frame2,
     data,
     colors,
     input,
@@ -5186,11 +6431,11 @@ function paintBars(paint) {
   } = paint;
   const scale = valueTicks("bar", data, input);
   const labelGap = axisFontSize * 0.6;
-  const labelWidthPx = (value) => formatChartValue(value, input.unit).length * axisFontSize * CHART_CHAR_WIDTH_EM;
+  const labelWidthPx = (value) => formatChartDataValue(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 +6448,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 +6465,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 +6490,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 +6503,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 +6530,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 +6578,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 +6586,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 +6622,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 +6636,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 +6674,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 +6687,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 +6711,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) => {
@@ -5529,7 +6774,7 @@ function valueLabel(paint, id, value, x, y, animation) {
     type: "text",
     id,
     content: {
-      text: formatChartValue(value, paint.input.unit),
+      text: formatChartDataValue(value, paint.input.unit),
       style: {
         fontSize: paint.axisFontSize,
         fontFamily: paint.bodyFont,
@@ -5598,19 +6843,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 +6866,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 +6889,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 +7064,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 +7245,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 +7338,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 +7405,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 +7418,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 +7430,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 +7767,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 +7890,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 +8122,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 +8140,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 +8160,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 +8186,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 +8295,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 +8310,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 +8474,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 +8732,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 +8965,7 @@ function timelineBlock(input, context) {
           x,
           y,
           pointMarkerRadius,
-          accentColor,
+          accentColor2,
           delay,
           build
         )
@@ -7690,8 +8976,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 +9396,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 +9451,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 +9461,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 +9520,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 +9535,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 +9550,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 +10101,10 @@ var templateRegistry = {
   map: mapBlock,
   fullBleedQuote,
   list: listBlock,
+  cards: cardsBlock,
+  process: processBlock,
+  cycle: cycleBlock,
+  layers: layersBlock,
   photoGrid,
   definitionCard,
   comparisonBar,
@@ -9441,6 +10731,278 @@ function extractBodyText(block) {
   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: {
+      headers: table.headers,
+      rows: table.rows,
+      ...table.align ? { align: table.align } : {},
+      wrap: true,
+      style: {
+        // 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"),
+        headerFontFamily: getThemeFont(context, "title"),
+        borderRadius: 8
+      }
+    }
+  };
+}
+
 // src/doc/materializeBlockLayers.ts
 function materializeBlockLayers(block, options = {}) {
   const registry = options.customTemplates && options.customTemplates.length > 0 ? buildRegistry(options.customTemplates) : templateRegistry;
@@ -9566,6 +11128,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 +11241,11 @@ function collectRichMediaItems(layers, block) {
       source,
       aspectRatio: svgIslandAspectRatio(source)
     })),
+    ...featureTables(layers, block).map((table) => ({
+      kind: "table",
+      table,
+      aspectRatio: featureTableAspect(table)
+    })),
     ...embeddedSpatialMedia(block)
   ];
 }
@@ -9687,16 +11259,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 +11280,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 +11352,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 +11415,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 +11427,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 +11438,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 +11457,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 +11615,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 +11820,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",
@@ -10336,6 +11960,177 @@ var TEMPLATE_AUTHORING_METADATA = {
   }
 };
 
+// src/doc/templates/authoringGuide.ts
+var CHART = {
+  fields: "title, headers [label, value], rows [[label, value], \u2026] 2\u20136 rows, showValues: true",
+  use: "only values the {source} states"
+};
+var CONCEPT_BUILD = 'build: {mode: "items"} to reveal them as they are spoken';
+var TEMPLATE_GUIDES = {
+  imageWithCaption: {
+    fields: "imageSrc, imageAlt, caption \u2264 90 chars, ambientMotion: zoomIn|zoomOut|panLeft|panRight",
+    use: "a photograph with the narration's idea as caption"
+  },
+  pullQuote: {
+    fields: "text, backgroundImage {src, alt}, ambientMotion",
+    use: "a VERBATIM sentence or clause from the {source} over a photograph"
+  },
+  fullBleedQuote: {
+    fields: "text",
+    use: "a VERBATIM short sentence from the {source}, text only"
+  },
+  factCard: {
+    fields: "fact \u2264 4 words, explanation \u2264 160 chars, accentImage {src, alt, position: left-strip|right-strip}"
+  },
+  dateEvent: {
+    fields: "date, description \u2264 160 chars, mood: neutral|somber|celebratory, accentImage optional",
+    use: "a year or period the {source} states"
+  },
+  statHighlight: {
+    fields: 'stat like "98%" or "36", description \u2264 60 chars, detail \u2264 80 chars, accentImage optional',
+    use: "counts up; the number must be in the {source}"
+  },
+  comparisonBar: {
+    fields: "leftLabel, leftValue, rightLabel, rightValue, unit optional",
+    use: "two quantities the {source} gives in the same unit"
+  },
+  columnChart: CHART,
+  barChart: CHART,
+  pieChart: CHART,
+  timeline: {
+    fields: "title, tracks: [{ id, label, events: [{ id, label: year, position: 0..1 in date order, description \u2264 40 chars, marker: 'diamond' optional }] }]",
+    use: "3\u20137 dated events the {source} states"
+  },
+  diagram: {
+    fields: "title, nodeShape: 'pill', nodes: [{ id, label \u2264 3 words, x, y }] 3\u20136 nodes with x in {0, 280, 560} and y in {0, 160, 320}, edges: [{ source, target, label \u2264 3 words }]",
+    use: "relationships the {source} describes"
+  },
+  list: {
+    fields: "title, items: 2\u20135 short items taken from the {source}'s own words"
+  },
+  photoGrid: {
+    fields: "images: [{src, alt}] \xD7 2\u20134, caption \u2264 90 chars",
+    use: "several related photographs"
+  },
+  map: {
+    fields: "center: {lat, lng}, zoom, mapStyle: 'terrain', title, ambientMotion",
+    use: "where the place is, at its first mention"
+  },
+  sectionHeader: {
+    fields: "title = the section title, imageSrc, imageAlt, ambientMotion",
+    use: "opens a section on a photograph"
+  },
+  cards: {
+    fields: `title, items: ["Label: detail", \u2026] 2\u20134, versus: true for exactly two set against each other, ${CONCEPT_BUILD}`,
+    use: "parallel ideas side by side, such as kinds, causes or features"
+  },
+  process: {
+    fields: `title, items: ["Label: detail", \u2026] 2\u20134 in order, ${CONCEPT_BUILD}`,
+    use: "ordered stages or dated events, drawn as numbered steps joined by arrows"
+  },
+  cycle: {
+    fields: `title, items: ["Label: detail", \u2026] 3\u20135, ${CONCEPT_BUILD}`,
+    use: "stages that repeat in a loop, drawn on a ring"
+  },
+  layers: {
+    fields: `title, items: ["Label: detail", \u2026] 3\u20135 innermost first, ${CONCEPT_BUILD}`,
+    use: "parts nested inside one another, drawn as concentric rings"
+  }
+};
+function guideText(text, wording = {}) {
+  return text.replace(/\{source\}/gu, wording.source ?? "source");
+}
+function templateCatalog(entries, wording = {}) {
+  return entries.map((entry) => {
+    const [name, guide] = typeof entry === "string" ? [entry, TEMPLATE_GUIDES[entry]] : "templates" in entry ? [entry.templates.join(" | "), TEMPLATE_GUIDES[entry.templates[0]]] : [entry.template, entry];
+    const use = guide.use ? ` \u2014 ${guide.use}` : "";
+    return guideText(`- ${name} (${guide.fields})${use}`, wording);
+  });
+}
+var PRESENTATION_LAYOUT_GUIDE = {
+  title: "an opening",
+  divider: "a new topic begins; only the headline shows",
+  statement: "one idea",
+  emphasis: "one striking takeaway; only the headline shows, so keep it under 60 characters",
+  quote: "the headline is one sentence copied word for word from the passage, without quotation marks; only the headline shows",
+  stat: "the passage\u2019s key figure, such as 40% or $3 million, stated in the headline or a point",
+  definition: "the headline is a term and the points define it",
+  list: "2\u20133 points",
+  comparison: "exactly 2 genuinely contrasting points",
+  steps: "2\u20133 ordered actions",
+  image: 'only when the current layout is "image"; the headline is then its caption',
+  cards: "2\u20134 parallel ideas side by side, such as kinds, causes or features",
+  process: "2\u20134 ordered stages or dated events, drawn as numbered steps joined by arrows",
+  cycle: "3\u20135 stages that repeat in a loop, drawn on a ring",
+  layers: "3\u20135 parts nested inside one another, innermost first, such as a core and the layers around it, drawn as concentric rings"
+};
+var DRAWN = ["cards", "process", "cycle", "layers"];
+var NUMBERS = ["statHighlight", "comparisonBar", "columnChart", "barChart", "pieChart"];
+var ACCENTED = [
+  "factCard",
+  "statHighlight",
+  "dateEvent",
+  "quote",
+  "list",
+  "definitionCard"
+];
+var AUTHORING_TRICKS = [
+  {
+    id: "one-idea",
+    text: "One idea per slide: each slide shows what the sentence being spoken is about. Captions and labels restate its idea briefly; they never add a fact."
+  },
+  {
+    id: "numbers-as-numbers",
+    text: "Draw numbers as numbers: one striking quantity \u2192 statHighlight (it counts up); two quantities in one unit \u2192 comparisonBar; three or more values in one unit \u2192 a chart; three to seven dated events \u2192 timeline.",
+    templates: [...NUMBERS, "timeline"]
+  },
+  {
+    id: "ranges",
+    text: 'A range ("3 to 7 miles deep") is not one value: never chart it as a single bar or count up to one end. Write it as the {source} gives it, on a card or in a list.',
+    templates: NUMBERS
+  },
+  {
+    id: "draw-ideas",
+    text: `Slides that draw their ideas explain best: several parallel ideas \u2192 cards, ordered stages \u2192 process, a loop that comes back to its start \u2192 cycle, parts nested inside one another \u2192 layers; prefer them to a list. Write each item as "Label: detail", a label of 1\u20134 words and a detail of at most 70 characters, in the {source}'s own words. For dated events, start each label with its date: a process of dated stages draws as a timeline.`,
+    summary: `Slides that draw their ideas explain best: when the passage has several parallel ideas, ordered stages, a repeating loop or nested parts, choose ${DRAWN.map((layout) => `"${layout}"`).join(", ")} rather than "statement" or "list", and write each of their points (up to 4) as "Label: detail", a label of 1\u20134 words and a detail of at most 70 characters. For dated events, start each label with its date.`,
+    templates: DRAWN
+  },
+  {
+    id: "reveal-as-spoken",
+    text: 'A drawn slide can reveal its items one at a time as the narration says them (build {mode: "items"}). Put the items in the order they are spoken and let each share its key words with the sentence that says it, so every reveal lands on its words.',
+    templates: DRAWN
+  },
+  {
+    id: "chain-not-diagram",
+    text: "A chain \u2014 one thing leads to the next, which leads to the next \u2014 is a process, not a diagram. Keep diagrams for relationships that branch or meet: causes on the left and effects on the right, every edge labelled with the verb the {source} uses, and no edges that cross.",
+    templates: ["diagram", "process"]
+  },
+  {
+    id: "no-empty-frames",
+    text: "A text card on its own is small type on an empty field. Give each factCard, statHighlight, dateEvent, quote, list and definitionCard an accentImage showing what its sentence is about, and alternate the side from card to card.",
+    templates: ACCENTED
+  },
+  {
+    id: "motion-follows-picture",
+    text: "Motion comes from the theme's motion profile; never hand-author animations. On a photograph, choose the ambientMotion the picture suggests \u2014 zoomIn toward a detail, panLeft or panRight along a skyline or coast \u2014 and alternate directions between neighbouring slides.",
+    templates: ["imageWithCaption", "pullQuote", "sectionHeader", "map"]
+  },
+  {
+    id: "vary",
+    text: "Vary the slides: when two templates fit equally well, choose the one not just shown. A long run of photo-and-caption slides is where a narrated story feels static."
+  }
+];
+function authoringTricks(options = {}) {
+  const offered = options.templates ? new Set(options.templates) : void 0;
+  const selected = options.ids ? options.ids.flatMap((id) => AUTHORING_TRICKS.filter((trick) => trick.id === id)) : AUTHORING_TRICKS;
+  return selected.filter(
+    (trick) => !offered || !trick.templates || trick.templates.some((template) => offered.has(template))
+  ).flatMap((trick) => {
+    const text = options.surface === "summary" ? trick.summary : trick.text;
+    return text ? [guideText(text, options.wording)] : [];
+  });
+}
+
 // src/doc/templates/coverBlock.ts
 var COVER_TITLE_BASE_PX = 120;
 var COVER_TITLE_COMFORTABLE_CHARS = 26;
@@ -10430,7 +12225,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 +12259,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 +12275,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 +12304,7 @@ function frostedCoverLayout(title, subtitle, context, coverLayout = "stacked") {
       height: plateHeight,
       radius
     },
-    title: box(plateY),
+    title: box2(plateY),
     ...sub ? {
       subtitle: {
         cx,
@@ -10948,9 +12743,9 @@ function expandDocBlocks(blocks, options = {}) {
       return expandedBlock;
     });
   }
-  const containsBuilds = blocks.some(hasBlockBuilds);
-  const splitLongBlocks = requestedSplit && !containsBuilds;
-  const mergeShortBlocks = requestedMerge && !containsBuilds;
+  const buildSegments = new Set(
+    blocks.filter(hasBlockBuilds).map((block) => block.audioSegment ?? 0)
+  );
   const blocksBySegment = /* @__PURE__ */ new Map();
   blocks.forEach((block, index) => {
     const segmentIndex = block.audioSegment ?? 0;
@@ -10963,6 +12758,8 @@ function expandDocBlocks(blocks, options = {}) {
   const splitParts = /* @__PURE__ */ new Map();
   for (const [segmentIndex, segmentBlocks] of blocksBySegment) {
     const audioSegment = audioSegments[segmentIndex];
+    const splitLongBlocks = requestedSplit && !buildSegments.has(segmentIndex);
+    const mergeShortBlocks = requestedMerge && !buildSegments.has(segmentIndex);
     if (segmentBlocks.every(({ block }) => block.timelineLocked === true)) {
       for (const { block, originalIndex } of segmentBlocks) {
         const expanded = materializeScheduledBlock(
@@ -11179,7 +12976,9 @@ function expandDocBlocks(blocks, options = {}) {
     }
     expandedBlocks.splice(0, expandedBlocks.length, ...sequenced);
   }
-  return mergeShortBlocks ? expandedBlocks.filter((block) => block && block.duration > 0) : expandedBlocks.filter(Boolean);
+  return requestedMerge ? expandedBlocks.filter(
+    (block) => block && (block.duration > 0 || buildSegments.has(block.audioSegment ?? 0))
+  ) : expandedBlocks.filter(Boolean);
 }
 function getAvailableTemplates() {
   return Object.keys(templateRegistry);
@@ -11188,169 +12987,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 +13623,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 +13926,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 +13969,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 +14008,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 +14055,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 +14077,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 +14095,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 +14245,12 @@ export {
   countUpSpecFor,
   formatCountValue,
   formatCountUp,
+  splitConceptItem,
+  conceptBuildStepTexts,
+  cardsBlock,
+  processBlock,
+  cycleBlock,
+  layersBlock,
   statHighlight,
   quoteBlock,
   factCard,
@@ -12652,21 +14304,27 @@ export {
   coerceTemplateParams,
   lintTemplateParams,
   fallbackBlockLayers,
+  isDataFence,
+  parseDataFence,
+  replaceDataFence,
+  parseYamlSubset,
+  findFirstTable,
+  extractTableData,
   materializeBlockLayers,
   materializeBlockLayersWithRuntime,
   TEMPLATE_METADATA,
   TEMPLATE_AUTHORING_METADATA,
+  TEMPLATE_GUIDES,
+  guideText,
+  templateCatalog,
+  PRESENTATION_LAYOUT_GUIDE,
+  AUTHORING_TRICKS,
+  authoringTricks,
   coverBlock,
   expandCoverBlock,
   expandDocBlocks,
   getAvailableTemplates,
   hasTemplate,
-  isDataFence,
-  parseDataFence,
-  replaceDataFence,
-  parseYamlSubset,
-  findFirstTable,
-  extractTableData,
   detectPromotableBodyAnnotation,
   getPinnedBlockMeta,
   markdownToDoc,