@bendyline/squisq 2.13.14 → 2.13.16

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

@@ -7,6 +7,7 @@ import {
   detectAsciiDiagram,
   detectAsciiTimeline,
   detectTree,
+  extractConceptItems,
   extractEmbeddedVideos,
   extractHostedVideos,
   extractImages,
@@ -24,6 +25,7 @@ import {
   isPictureFence,
   isPictureParagraph,
   markdownBlockSeparatorLines,
+  matchNumberHighlight,
   parseAnnotationInner,
   parseAsciiDiagram,
   parseAsciiTimeline,
@@ -31,8 +33,12 @@ import {
   pickAutoTemplate,
   profileBlockContents,
   renderMarkdownBlocksHtml,
-  treeToTemplateData
-} from "./chunk-SGNWO7OF.js";
+  splitConceptItem,
+  splitStatItem,
+  timelineItems,
+  treeToTemplateData,
+  vennOverlapIndex
+} from "./chunk-MA7XUCSQ.js";
 import {
   anchorPoint,
   base64ToUtf8,
@@ -51,6 +57,8 @@ import {
   createTemplateContext,
   getTwoColumnPositions,
   getViewportOrientation,
+  hexHueDegrees,
+  isHex,
   isPersistentLayerTemplate,
   isTemplateBlock,
   oklchDarken,
@@ -63,11 +71,20 @@ import {
   validateTheme,
   withAlpha
 } from "./chunk-JNUNNQ74.js";
+import {
+  taskMarker
+} from "./chunk-4R3YZTPX.js";
+import {
+  createMediaTimeMap
+} from "./chunk-MTIR5PWF.js";
+import {
+  normalizeMediaCuts
+} from "./chunk-37RLFDIT.js";
 import {
   TABLE_FED_TEMPLATES,
   isContainerTemplate,
   resolveTemplateName
-} from "./chunk-7MS26OXD.js";
+} from "./chunk-UDPPWYYM.js";
 import {
   KNOWN_BLOCK_META_KEYS,
   coerceAnnotationValues,
@@ -629,8 +646,8 @@ var FALLBACK_COLOR_SCHEME = {
 function resolveColorScheme(context, name) {
   const schemes = context.theme.colorSchemes;
   if (name && name in schemes) return schemes[name];
-  const keys = Object.keys(schemes);
-  if (keys.length > 0) return schemes[keys[0]];
+  const keys2 = Object.keys(schemes);
+  if (keys2.length > 0) return schemes[keys2[0]];
   return FALLBACK_COLOR_SCHEME;
 }
 var FALLBACK_BODY = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
@@ -722,8 +739,8 @@ function getTemplateHint(context, templateName, key, fallback) {
 // src/doc/templates/captionUtils.ts
 var TRAILING_PUNCT_RE = /[.;:!?]+$/;
 var CAPTION_BASELINE_SHIFT_EM = 0.055;
-function cleanCaption(text) {
-  return text.replace(TRAILING_PUNCT_RE, "").trim();
+function cleanCaption(text2) {
+  return text2.replace(TRAILING_PUNCT_RE, "").trim();
 }
 function createBackgroundLayer(id, fill) {
   return {
@@ -733,19 +750,19 @@ function createBackgroundLayer(id, fill) {
     position: { x: 0, y: 0, width: "100%", height: "100%" }
   };
 }
-function estimateTextHeight(text, fontSizePx, maxWidthPx, lineHeight) {
+function estimateTextHeight(text2, fontSizePx, maxWidthPx, lineHeight) {
   const avgCharWidth = fontSizePx * 0.52;
   const charsPerLine = Math.max(8, Math.floor(maxWidthPx / avgCharWidth));
-  const lines = Math.max(1, Math.ceil(text.length / charsPerLine));
+  const lines = Math.max(1, Math.ceil(text2.length / charsPerLine));
   return lines * fontSizePx * lineHeight;
 }
-function estimateWrappedLineCount(text, fontSize, maxWidth) {
-  if (!text.trim()) return 1;
+function estimateWrappedLineCount(text2, fontSize, maxWidth) {
+  if (!text2.trim()) return 1;
   const charsPerLine = Math.floor(maxWidth / (fontSize * 0.5));
   if (charsPerLine <= 0) return 1;
   let lineCount = 0;
   let currentLineLength = 0;
-  for (const word of text.split(/\s+/)) {
+  for (const word of text2.split(/\s+/)) {
     const testLineLength = currentLineLength ? currentLineLength + 1 + word.length : word.length;
     if (testLineLength <= charsPerLine) {
       currentLineLength = testLineLength;
@@ -761,11 +778,11 @@ function estimateWrappedLineCount(text, fontSize, maxWidth) {
   }
   return Math.max(1, lineCount + (currentLineLength ? 1 : 0));
 }
-function estimateProseLineCount(text, fontSize, maxWidthPx) {
-  return text.split("\n").reduce((sum, line) => sum + estimateWrappedLineCount(line, fontSize, maxWidthPx), 0);
+function estimateProseLineCount(text2, fontSize, maxWidthPx) {
+  return text2.split("\n").reduce((sum, line) => sum + estimateWrappedLineCount(line, fontSize, maxWidthPx), 0);
 }
 function fitProse(options) {
-  const { text, baseFontSize, minFontSize, maxWidthPx, maxHeightPx, lineHeight } = options;
+  const { text: text2, baseFontSize, minFontSize, maxWidthPx, maxHeightPx, lineHeight } = options;
   const step2 = Math.max(0.5, options.step ?? 2);
   const floor = Math.min(baseFontSize, minFontSize);
   const heightAt = (lines, size) => lines * size * lineHeight;
@@ -773,7 +790,7 @@ function fitProse(options) {
   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);
+    const lines = estimateProseLineCount(text2, size, maxWidthPx);
     const heightPx = heightAt(lines, size);
     if (heightPx <= maxHeightPx) return { fontSize: size, lines, heightPx };
   }
@@ -1292,8 +1309,8 @@ function sectionHeader(input, context) {
 // src/doc/utils/textMetrics.ts
 var AVERAGE_CHAR_WIDTH_EM = 0.62;
 var BOLD_CHAR_WIDTH_EM = 0.66;
-function estimateTextWidth(text, fontSize, charWidthEm = AVERAGE_CHAR_WIDTH_EM) {
-  return text.length * fontSize * charWidthEm;
+function estimateTextWidth(text2, fontSize, charWidthEm = AVERAGE_CHAR_WIDTH_EM) {
+  return text2.length * fontSize * charWidthEm;
 }
 var DISPLAY_CHAR_EM = {
   space: 0.27,
@@ -1319,9 +1336,9 @@ function displayCharEm(ch) {
   if (".,:;-/'\u2019!?()".includes(ch)) return DISPLAY_CHAR_EM.punct;
   return DISPLAY_CHAR_EM.other;
 }
-function estimateDisplayTextWidth(text, fontSize) {
+function estimateDisplayTextWidth(text2, fontSize) {
   let em = 0;
-  for (const ch of text.normalize("NFD").replace(/\p{M}/gu, "")) em += displayCharEm(ch);
+  for (const ch of text2.normalize("NFD").replace(/\p{M}/gu, "")) em += displayCharEm(ch);
   return em * fontSize;
 }
 
@@ -1658,8 +1675,8 @@ function collectListItems(block) {
   for (const node of block.contents) {
     walkMarkdownTree(node, (n) => {
       if (n.type === "listItem") {
-        const text = extractPlainText(n).replace(/\s+/g, " ").trim();
-        if (text) out.push(text);
+        const text2 = extractPlainText(n).replace(/\s+/g, " ").trim();
+        if (text2) out.push(text2);
         return true;
       }
       return;
@@ -1675,14 +1692,14 @@ function getChildrenSummary(block) {
   if (!block.children || block.children.length === 0) return "";
   return block.children.map((c) => c.title?.trim()).filter((t) => Boolean(t)).join(", ");
 }
-function escapeBraces(text) {
-  return text.replace(ESCAPE_RE, (_match, inner) => ESCAPED_OPEN + inner + ESCAPED_CLOSE);
+function escapeBraces(text2) {
+  return text2.replace(ESCAPE_RE, (_match, inner) => ESCAPED_OPEN + inner + ESCAPED_CLOSE);
 }
-function unescapeBraces(text) {
-  return text.replace(new RegExp(ESCAPED_OPEN, "g"), "{").replace(new RegExp(ESCAPED_CLOSE, "g"), "}");
+function unescapeBraces(text2) {
+  return text2.replace(new RegExp(ESCAPED_OPEN, "g"), "{").replace(new RegExp(ESCAPED_CLOSE, "g"), "}");
 }
-function substitute(text, resolve) {
-  const escaped = escapeBraces(text);
+function substitute(text2, resolve) {
+  const escaped = escapeBraces(text2);
   const tokenized = escaped.replace(
     TOKEN_RE,
     (match, name, arg, def) => {
@@ -1725,8 +1742,8 @@ function resolveToken(name, arg, block, images, item) {
       return null;
   }
 }
-function substituteText(text, block, images, item) {
-  return substitute(text, (name, arg) => resolveToken(name, arg, block, images, item));
+function substituteText(text2, block, images, item) {
+  return substitute(text2, (name, arg) => resolveToken(name, arg, block, images, item));
 }
 function resolveImageSrc(src, block, images, item) {
   if (!src.includes("{")) return src;
@@ -1786,7 +1803,7 @@ function collectRepeatItems(source, block, images) {
         index: i + 1
       }));
     case "listItems":
-      return collectListItems(block).map((text, i) => ({ text, label: text, index: i + 1 }));
+      return collectListItems(block).map((text2, i) => ({ text: text2, label: text2, index: i + 1 }));
     default:
       return [];
   }
@@ -1873,21 +1890,22 @@ function makeCustomTemplateFn(def) {
 
 // src/doc/utils/countUp.ts
 var STAT_PATTERN = /^([^\d]*?)([-−]?\d[\d,]*(?:\.\d+)?)(.*)$/s;
-function parseStatNumber(text) {
-  const match = STAT_PATTERN.exec(text.trim());
+var MEASURE_UNIT = /^\s?(?:feet|foot|ft|metres?|meters?|m|km|kilomet(?:re|er)s?|miles?|mi|yards?|inch(?:es)?|cm|mm|acres?|hectares?|ha|kg|kilograms?|g|grams?|lbs?|pounds?|tons?|tonnes?|litres?|liters?|gallons?|people|residents|inhabitants|visitors|species|steps|pages|words|°[CF]?|degrees|mph|km\/h|knots|watts?|kW|MW|calories|dollars|euros)\b/i;
+function parseStatNumber(text2) {
+  const match = STAT_PATTERN.exec(text2.trim());
   if (!match) return null;
   const [, prefix, numeric, suffix] = match;
   const normalized = numeric.replace(/,/g, "").replace("\u2212", "-");
   const value = Number(normalized);
   if (!Number.isFinite(value)) return null;
   const decimals = normalized.includes(".") ? normalized.split(".")[1].length : 0;
-  const bare = /^-?\d{4}$/.test(normalized);
+  const bare = /^-?\d{4}$/.test(numeric.replace("\u2212", "-"));
   const looksLikeYear = bare && Math.abs(value) >= 1e3 && Math.abs(value) <= 2999 && !/^[$€£¥]/.test(prefix);
-  if (looksLikeYear && !/^[%KMB]/i.test(suffix.trim())) return null;
+  if (looksLikeYear && !/^[%KMB]/i.test(suffix.trim()) && !MEASURE_UNIT.test(suffix)) return null;
   return { prefix, value, decimals, grouping: numeric.includes(","), suffix };
 }
-function countUpSpecFor(text) {
-  const parsed = parseStatNumber(text);
+function countUpSpecFor(text2) {
+  const parsed = parseStatNumber(text2);
   if (!parsed) return null;
   return {
     from: 0,
@@ -1909,13 +1927,13 @@ function formatCountValue(value, decimals, grouping) {
   const sign = value < 0 && Number(fixed) !== 0 ? "-" : "";
   return `${sign}${grouped}${fraction ? `.${fraction}` : ""}`;
 }
-function formatCountUp(text, animation, blockTime) {
-  const count = animation.count ?? countUpSpecFor(text);
-  if (!count) return text;
+function formatCountUp(text2, animation, blockTime) {
+  const count = animation.count ?? countUpSpecFor(text2);
+  if (!count) return text2;
   const delay = animation.delay ?? 0;
   const duration = animation.duration ?? 1.5;
   const progress = duration <= 0 ? 1 : Math.min(1, Math.max(0, (blockTime - delay) / duration));
-  if (progress >= 1) return animation.count ? formatFinal(count) : text;
+  if (progress >= 1) return animation.count ? formatFinal(count) : text2;
   const from = count.from ?? 0;
   const value = from + (count.to - from) * easeOutCubic(progress);
   return `${count.prefix ?? ""}${formatCountValue(value, count.decimals ?? 0, count.grouping ?? false)}${count.suffix ?? ""}`;
@@ -1924,183 +1942,570 @@ 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) {
+// src/doc/templates/listBlock.ts
+var LIST_ITEMS_FLOW = "list-items";
+var LIST_ITEM_LINE_HEIGHT = 1.2;
+var LIST_ITEM_BASE_FONT_PX = 34;
+var LIST_ITEM_GAP_PX = 18;
+var LIST_ITEM_MIN_FONT_PX = 16;
+var LIST_BOTTOM_MARGIN_PCT = 8;
+var LIST_STRIP_CLEARANCE_PCT = 2;
+var LIST_RELAXED_TITLE_TOP_PCT = 20;
+var LIST_RELAXED_ITEMS_TOP_PCT = 34;
+var LIST_RELAXED_UNTITLED_TOP_PCT = 26;
+var LIST_CONDENSED_TOP_PCT = 8;
+var LIST_CONDENSED_TITLE_GAP_PX = 22;
+var LIST_TITLE_LINE_HEIGHT = 1.15;
+function listItemGeometry(fontSize, baseFontSize, itemCount, textWidthPx, ordered = true) {
+  const markerText = ordered ? `${itemCount}.` : "\u2022";
+  const markerWidthPx = Math.max(fontSize, markerText.length * fontSize * 0.5);
+  const markerGapPx = fontSize * 0.35;
+  const bodyIndentPx = markerWidthPx + markerGapPx;
   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)
+    markerWidthPx,
+    bodyIndentPx,
+    bodyWidthPx: Math.max(fontSize, textWidthPx - bodyIndentPx),
+    gapPx: LIST_ITEM_GAP_PX * (fontSize / baseFontSize)
   };
 }
-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 };
+function measureListHeightPx(items, fontSize, geometry) {
+  let heightPx = 0;
+  for (const itemText2 of items) {
+    const lineCount = estimateProseLineCount(itemText2, fontSize, geometry.bodyWidthPx);
+    heightPx += lineCount * fontSize * LIST_ITEM_LINE_HEIGHT + geometry.gapPx;
   }
-  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;
+  return heightPx;
 }
-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({
+function listBlock(input, context) {
+  const { title } = input;
+  const items = Array.isArray(input.items) ? input.items : [];
+  if (items.length === 0 && !context.block?.summaryMode) return [];
+  const build = input.build ?? context.block?.build;
+  if (build && build.mode !== "off") {
+    const rich = extractRichListItems(context.block?.contents);
+    const matches = rich.length === items.length && rich.every((item, i) => item.text === items[i]);
+    const contents = matches ? context.block?.contents ?? [] : [
+      {
+        type: "list",
+        ordered: input.ordered !== false,
+        children: items.map((text2) => ({
+          type: "listItem",
+          children: [{ type: "paragraph", children: [{ type: "text", value: text2 }] }]
+        }))
+      }
+    ];
+    const layers2 = contentBlock(
+      { ...input, template: "content", title: input.title ?? "", build },
+      {
+        ...context,
+        block: {
+          id: input.id,
+          duration: input.duration,
+          startTime: 0,
+          audioSegment: input.audioSegment,
+          ...context.block,
+          summaryMode: void 0,
+          contents,
+          build
+        }
+      }
+    );
+    const accent = accentForViewport(input.accentImage, context.viewport);
+    if (accent) {
+      const layout = getAccentLayout(accent.position);
+      layers2.splice(
+        1,
+        0,
+        ...createAccentLayers(
+          accent,
+          input.id,
+          themedImageTreatment(context, input.imageTreatment)
+        )
+      );
+      for (const layer of layers2) {
+        if (layer.type !== "text" || layer.id !== "title" && layer.id !== "body") continue;
+        layer.position.x = `${parseFloat(layout.textCenterX) - parseFloat(layout.textWidth) / 2}%`;
+        layer.position.width = layout.textWidth;
+        layer.position.y = adjustY(String(layer.position.y), layout);
+        if (layer.id === "body" && accent.position === "bottom-strip")
+          layer.position.height = `${72 - ACCENT_STRIP_SIZE}%`;
+      }
+    }
+    return layers2;
+  }
+  const accentImage = accentForViewport(input.accentImage, context.viewport);
+  const ordered = input.ordered !== false;
+  const richItems = extractRichListItems(context.block?.contents);
+  const { theme } = context;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const titleFontSize = themedFontSize(44, context, true);
+  const baseItemFontSize = themedFontSize(LIST_ITEM_BASE_FONT_PX, context, false);
+  const minItemFontSize = Math.min(
+    baseItemFontSize,
+    themedFontSize(LIST_ITEM_MIN_FONT_PX, context, false)
+  );
+  const layers = [
+    // Background — gradient
+    {
       type: "shape",
-      id: "accent-rule",
-      position: {
-        x: margin,
-        y: headlineTop - ruleH - fit.fontSize * 0.55,
-        width: W * 0.045,
-        height: ruleH
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(155deg, ${theme.colors.backgroundLight} 0%, ${theme.colors.background} 100%)`
       },
-      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 }
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
     }
-  };
-}
-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;
+  ];
+  if (accentImage) {
     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
-        }
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment)
       )
     );
   }
-  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)
+  const centerX = parseFloat(accentLayout.textCenterX);
+  const widthPct = parseFloat(accentLayout.textWidth);
+  const leftPct = Number.isFinite(centerX) && Number.isFinite(widthPct) ? centerX - widthPct / 2 : 8;
+  const leftX = `${leftPct}%`;
+  const textWidthPx = (Number.isFinite(widthPct) ? widthPct / 100 : 0.85) * context.viewport.width;
+  const bottomLimitPct = (accentImage?.position === "bottom-strip" ? 100 - ACCENT_STRIP_SIZE - LIST_STRIP_CLEARANCE_PCT : 100 - LIST_BOTTOM_MARGIN_PCT) - accentLayout.textYAdjust;
+  const baseGeometry = listItemGeometry(
+    baseItemFontSize,
+    baseItemFontSize,
+    items.length,
+    textWidthPx,
+    ordered
+  );
+  const relaxedStartY = title ? LIST_RELAXED_ITEMS_TOP_PCT : LIST_RELAXED_UNTITLED_TOP_PCT;
+  const relaxedBottomPct = relaxedStartY + measureListHeightPx(items, baseItemFontSize, baseGeometry) / context.viewport.height * 100;
+  const condensed = relaxedBottomPct > bottomLimitPct;
+  const condensedTopPct = LIST_CONDENSED_TOP_PCT - accentLayout.textYAdjust;
+  const titleTopPct = condensed ? condensedTopPct : LIST_RELAXED_TITLE_TOP_PCT;
+  let startY = relaxedStartY;
+  if (condensed) {
+    const titleHeightPx = title ? estimateWrappedLineCount(title, titleFontSize, textWidthPx) * titleFontSize * LIST_TITLE_LINE_HEIGHT + LIST_CONDENSED_TITLE_GAP_PX : 0;
+    startY = condensedTopPct + titleHeightPx / context.viewport.height * 100;
+  }
+  if (title) {
+    layers.push({
+      type: "text",
+      id: "list-title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "left",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: leftX,
+        y: adjustY(`${titleTopPct}%`, accentLayout),
+        width: accentLayout.textWidth
+      },
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1 })
+    });
+  }
+  const availablePx = Math.max(0, (bottomLimitPct - startY) / 100 * context.viewport.height);
+  let itemFontSize = baseItemFontSize;
+  let geometry = baseGeometry;
+  while (itemFontSize > minItemFontSize && measureListHeightPx(items, itemFontSize, geometry) > availablePx) {
+    itemFontSize -= 1;
+    geometry = listItemGeometry(itemFontSize, baseItemFontSize, items.length, textWidthPx, ordered);
+  }
+  const { markerWidthPx, bodyIndentPx, bodyWidthPx, gapPx } = geometry;
+  const bodyLeftX = `${leftPct + bodyIndentPx / context.viewport.width * 100}%`;
+  let itemY = startY;
+  for (let i = 0; i < items.length; i++) {
+    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,
+      delay: 0.3 + 0.3 * i
+    });
+    layers.push({
+      type: "text",
+      id: `item-${i}-marker`,
+      content: {
+        // Bullets stay bullets; only ordered (or legacy, unflagged) lists count.
+        text: ordered ? `${i + 1}.` : "\u2022",
+        flow: { id: LIST_ITEMS_FLOW, role: "marker" },
+        style: {
+          fontSize: itemFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.text,
+          textAlign: "right",
+          lineHeight: LIST_ITEM_LINE_HEIGHT,
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: leftX,
+        y: adjustY(`${itemY}%`, accentLayout),
+        width: markerWidthPx
+      },
+      animation
+    });
+    layers.push({
+      type: "text",
+      id: `item-${i}`,
+      content: {
+        text: itemText2,
+        ...itemHtml ? { html: itemHtml } : {},
+        paragraphs: [
+          {
+            text: itemText2,
+            list: { ordered, level: 0, ...ordered ? { number: i + 1 } : {} }
+          }
+        ],
+        flow: { id: LIST_ITEMS_FLOW },
+        style: {
+          fontSize: itemFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.text,
+          textAlign: "left",
+          lineHeight: LIST_ITEM_LINE_HEIGHT,
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: bodyLeftX,
+        y: adjustY(`${itemY}%`, accentLayout),
+        width: bodyWidthPx,
+        // Rich (HTML) items render in a hidden-overflow box the renderer
+        // sizes from the plain text; size it here from the same line count
+        // that reserved the vertical space so nested sub-items are not cut off.
+        height: lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT + itemFontSize * 0.5
+      },
+      animation
+    });
+    const itemHeightPx = lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT;
+    itemY += (itemHeightPx + gapPx) / context.viewport.height * 100;
+  }
+  return layers;
+}
+
+// src/doc/templates/conceptSpecs.ts
+var CONCEPT_TEMPLATES = [
+  "cards",
+  "process",
+  "cycle",
+  "layers",
+  "stats",
+  "pyramid",
+  "funnel",
+  "hub",
+  "venn",
+  "matrix"
+];
+var CONCEPT_MAX_DRAWN = 6;
+var CYCLE_STAGE_CHARACTERS = 170;
+var CONCEPT_SPECS = {
+  cards: {
+    items: [2, 4],
+    itemForm: "label-detail",
+    inputs: [{ key: "versus", guide: "versus: true for exactly two set against each other" }]
+  },
+  process: { items: [2, 4], itemForm: "label-detail", order: "in order" },
+  cycle: { items: [3, 5], itemForm: "label-detail" },
+  layers: { items: [3, 5], itemForm: "label-detail", order: "innermost first" },
+  stats: { items: [2, 4], itemForm: "figure-caption" },
+  pyramid: { items: [3, 5], itemForm: "label-detail", order: "from the top down" },
+  funnel: { items: [3, 5], itemForm: "label-detail", order: "widest first" },
+  hub: {
+    items: [3, 6],
+    itemForm: "label-detail",
+    inputs: [{ key: "center", guide: "center \u2264 3 words" }]
+  },
+  // Two sets and the item that says what they share.
+  venn: { items: [3, 3], itemForm: "label-detail" },
+  matrix: {
+    items: [4, 4],
+    itemForm: "label-detail",
+    order: "in reading order (top left, top right, bottom left, bottom right)",
+    inputs: [
+      { key: "xAxis", guide: "xAxis" },
+      { key: "yAxis", guide: "yAxis" }
+    ]
+  }
+};
+function conceptTemplate(template) {
+  return CONCEPT_TEMPLATES.find((name) => name === template);
+}
+function range(template, options) {
+  const [min, most] = CONCEPT_SPECS[template].items;
+  return [min, Math.max(min, Math.min(most, options.max ?? most))];
+}
+function conceptItemCount(template, options = {}) {
+  const [min, max] = range(template, options);
+  return min === max ? `exactly ${min}` : `${min}\u2013${max}`;
+}
+function itemTexts(items) {
+  return (Array.isArray(items) ? items : []).map(
+    (item) => String(item ?? "").replace(/\s+/gu, " ").trim()
+  ).filter(Boolean);
+}
+var quoted = (text2) => `"${text2.length > 48 ? `${text2.slice(0, 47)}\u2026` : text2}"`;
+function conceptItemsProblem(template, items, options = {}) {
+  const texts = itemTexts(items);
+  const [min, max] = range(template, options);
+  if (texts.length < min || texts.length > max)
+    return `${template} takes ${conceptItemCount(template, options)} items and this has ${texts.length}`;
+  if (template === "stats") {
+    const bare = texts.find((text2) => !splitStatItem(text2).figure);
+    if (bare !== void 0)
+      return `every stats item is "figure: what it measures" and ${quoted(bare)} states no figure`;
+  }
+  if (template === "venn" && vennOverlapIndex(texts.map(splitConceptItem)) < 0)
+    return 'venn needs one item labelled "Both:" that says what the two share';
+  return void 0;
+}
+function cycleDrawsAsProcess(items) {
+  return items.length < 3 || items.some((item) => item.detail.length > CYCLE_STAGE_CHARACTERS);
+}
+function conceptDowngrade(template, items) {
+  const texts = itemTexts(items);
+  if (texts.length > CONCEPT_MAX_DRAWN)
+    return {
+      drawsAs: "list",
+      reason: `a drawing holds ${CONCEPT_MAX_DRAWN} items and this has ${texts.length}`
+    };
+  const parsed = texts.map(splitConceptItem);
+  const n = parsed.length;
+  switch (template) {
+    case "cycle":
+      if (n < 3)
+        return {
+          drawsAs: "process",
+          reason: `a ring needs at least three stages and this has ${n}`
+        };
+      return cycleDrawsAsProcess(parsed) ? { drawsAs: "process", reason: "a stage runs too long to sit beside a ring" } : void 0;
+    case "layers":
+    case "pyramid":
+    case "funnel":
+    case "hub":
+      return n < 2 ? { drawsAs: "cards", reason: `it needs at least two items and this has ${n}` } : void 0;
+    case "stats":
+      return texts.some((text2) => splitStatItem(text2).figure) ? void 0 : { drawsAs: "cards", reason: "no item states a figure" };
+    case "venn": {
+      const sets = n - (vennOverlapIndex(parsed) >= 0 ? 1 : 0);
+      return sets === 2 ? void 0 : {
+        drawsAs: "cards",
+        reason: `a Venn diagram draws two sets (and one item labelled "Both:") and this has ${sets}`
+      };
+    }
+    case "matrix":
+      return n === 4 ? void 0 : { drawsAs: "cards", reason: `a matrix places exactly four items and this has ${n}` };
+    default:
+      return void 0;
+  }
+}
+function conceptDrawsAs(template, items) {
+  return conceptDowngrade(template, items)?.drawsAs ?? template;
+}
+
+// src/doc/templates/conceptBlocks.ts
+var MAX_ITEMS = CONCEPT_MAX_DRAWN;
+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 = (text2, size2, em) => Math.max(0, ...text2.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, text2, position, style) {
+  return {
+    type: "text",
+    id,
+    position,
+    content: {
+      text: text2,
+      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 itemTexts2(input) {
+  return (Array.isArray(input.items) ? input.items : []).map((item) => String(item ?? "").trim()).filter(Boolean).slice(0, MAX_ITEMS);
+}
+function itemsOf(input) {
+  return itemTexts2(input).map(splitConceptItem);
+}
+function withoutIdeas(area, context) {
+  return context.block?.contents?.length ? [] : area.layers;
+}
+function asListWhenCrowded(input, context) {
+  const items = (Array.isArray(input.items) ? input.items : []).map((item) => String(item ?? "").trim()).filter(Boolean);
+  if (items.length <= MAX_ITEMS) return void 0;
+  return listBlock(
+    {
+      ...input,
+      template: "list",
+      items,
+      ordered: input.template === "process"
+    },
+    context
+  );
+}
+function statItemsOf(input) {
+  return itemTexts2(input).map(splitStatItem);
+}
+function conceptBuildStepTexts(template, items) {
+  const shown = itemsOf({ items: [...items] });
+  const stats = template === "stats" ? statItemsOf({ items: [...items] }) : [];
+  if (stats.some((stat) => stat.figure))
+    return stats.map((stat) => {
+      const { number, unit } = splitFigure(stat.figure);
+      return [number, unit, stat.caption].filter(Boolean).join(" ");
+    });
+  if (template !== "process" && template !== "cycle")
+    return shown.map((item) => [item.label, item.detail].filter(Boolean).join(" "));
+  const asProcess = template === "process" || cycleDrawsAsProcess(shown);
+  const dated = asProcess ? 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(" ")
+    (item, index) => [String(index + 1), item.label, item.detail].filter(Boolean).join(" ")
   );
 }
 var FIRST_TURN = 0.6;
@@ -2149,18 +2554,18 @@ function words(layers, at) {
 var LEAD_BASE = 44;
 var LEAD_MIN = 28;
 var LEAD_LINE_HEIGHT = 1.4;
-function lead(area, text, context) {
+function lead(area, text2, 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,
+    text2.length <= 90 ? LEAD_BASE * 1.3 : text2.length <= 160 ? LEAD_BASE * 1.15 : LEAD_BASE,
     context,
     false
   );
   const fit = fitProse({
-    text,
+    text: text2,
     baseFontSize: base,
     minFontSize: Math.min(base, themedFontSize(LEAD_MIN, context, false)),
     maxWidthPx: width,
@@ -2190,7 +2595,7 @@ function lead(area, text, context) {
         [
           textLayer(
             "lead",
-            text,
+            text2,
             box(area.left + indent, top, width, fit.heightPx + fit.fontSize * 0.4),
             {
               fontSize: fit.fontSize,
@@ -2212,13 +2617,13 @@ function lead(area, text, context) {
 }
 var STATEMENT_BASE = 84;
 var STATEMENT_MIN = 48;
-function statement(area, text, context) {
+function statement(area, text2, 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,
+    text: text2,
     baseFontSize: base,
     minFontSize: Math.min(base, themedFontSize(STATEMENT_MIN, context, true)),
     maxWidthPx: W * (area.portrait ? 1 : 0.86),
@@ -2249,7 +2654,7 @@ function statement(area, text, context) {
         [
           textLayer(
             "statement",
-            text,
+            text2,
             box(area.left, top, W * (area.portrait ? 1 : 0.86), fit.heightPx + fit.fontSize * 0.3),
             {
               fontSize: fit.fontSize,
@@ -2271,10 +2676,12 @@ function statement(area, text, context) {
   ];
 }
 function cardsBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
   const items = itemsOf(input);
   const area = frame(input, context);
   const { theme, viewport } = context;
-  if (!items.length) return area.layers;
+  if (!items.length) return withoutIdeas(area, context);
   if (items.length === 1 && !items[0].label)
     return (input.title?.trim() ? lead : statement)(area, items[0].detail, context);
   const contrast = String(input.versus) === "true";
@@ -2506,10 +2913,12 @@ function connector(id, d, color, width, arrow = true) {
   };
 }
 function processBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
   const items = itemsOf(input);
   const area = frame(input, context);
   const { viewport } = context;
-  if (!items.length) return area.layers;
+  if (!items.length) return withoutIdeas(area, context);
   const dated = timelineItems(items);
   if (dated) return timeline(area, dated, context);
   const W = area.right - area.left;
@@ -2638,30 +3047,6 @@ function processBlock(input, context) {
   });
   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;
@@ -2824,10 +3209,12 @@ function timeline(area, items, context) {
   return layers;
 }
 function cycleBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
   const items = itemsOf(input);
   const area = frame(input, context);
   const { viewport } = context;
-  if (items.length < 2) return processBlock({ ...input, template: "process" }, context);
+  if (cycleDrawsAsProcess(items)) return processBlock({ ...input, template: "process" }, context);
   const H = area.bottom - area.top;
   const n = items.length;
   const cx = (area.left + area.right) / 2;
@@ -2912,8 +3299,11 @@ function cycleBlock(input, context) {
   return layers;
 }
 function layersBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
   const items = itemsOf(input);
-  if (items.length < 2) return cardsBlock({ ...input, template: "cards" }, context);
+  if (conceptDrawsAs("layers", input.items) === "cards")
+    return cardsBlock({ ...input, template: "cards" }, context);
   const area = frame(input, context);
   const { theme, viewport } = context;
   const W = area.right - area.left;
@@ -4241,10 +4631,10 @@ function estimateLineEm(line, mono) {
   }
   return em;
 }
-function simulateRendererLines(text, fontSize, boxWidthPx) {
+function simulateRendererLines(text2, fontSize, boxWidthPx) {
   const charsPerLine = Math.floor(boxWidthPx / (fontSize * RENDERER_CHAR_EM));
   const lines = [];
-  for (const segment of text.split("\n")) {
+  for (const segment of text2.split("\n")) {
     if (!segment.trim() || charsPerLine <= 0) {
       lines.push(segment);
       continue;
@@ -4268,14 +4658,14 @@ function simulateRendererLines(text, fontSize, boxWidthPx) {
   }
   return lines;
 }
-function fitWrapWidth(text, fontSize, columnWidthPx, fontFamily) {
+function fitWrapWidth(text2, fontSize, columnWidthPx, fontFamily) {
   const mono = isMonoFamily(fontFamily);
-  if (!mono && !WIDE_GLYPH_RE.test(text)) return columnWidthPx;
+  if (!mono && !WIDE_GLYPH_RE.test(text2)) return columnWidthPx;
   const floor = columnWidthPx * 0.5;
   const step2 = columnWidthPx * 0.02;
   let width = columnWidthPx;
   while (width > floor) {
-    const lines = simulateRendererLines(text, fontSize, width);
+    const lines = simulateRendererLines(text2, fontSize, width);
     const widest = Math.max(...lines.map((line) => estimateLineEm(line, mono))) * fontSize;
     if (widest <= columnWidthPx) return width;
     width -= step2;
@@ -4542,328 +4932,903 @@ var LINE_HEIGHT = 1.2;
 var FULL_SIZE_CHARS = 40;
 var MIN_SIZE_CHARS = 160;
 var MIN_LENGTH_FACTOR = 0.6;
-function lengthFactor(text) {
-  const length = text.trim().length;
+function lengthFactor(text2) {
+  const length = text2.trim().length;
   if (length <= FULL_SIZE_CHARS) return 1;
   const t = Math.min(1, (length - FULL_SIZE_CHARS) / (MIN_SIZE_CHARS - FULL_SIZE_CHARS));
   return 1 - t * (1 - MIN_LENGTH_FACTOR);
 }
 function fullBleedQuote(input, context) {
-  const { text, colorScheme = "blue" } = input;
+  const { text: text2, colorScheme = "blue" } = input;
   const { viewport } = context;
   const colors = resolveColorScheme(context, colorScheme);
   const H = viewport.height;
   const W = viewport.width;
   const pct2 = (px) => `${Number((px / H * 100).toFixed(3))}%`;
   const impactFontSize = themedFontSize(120, context, true);
-  const baseFontSize = Math.round(impactFontSize * lengthFactor(text));
+  const baseFontSize = Math.round(impactFontSize * lengthFactor(text2));
   const bandHeightPx = (BAND_BOTTOM3 - BAND_TOP3) * H;
   const fit = fitProse({
-    text,
+    text: text2,
     baseFontSize,
     minFontSize: Math.max(28, impactFontSize / 3),
     maxWidthPx: COLUMN_WIDTH * W,
-    maxHeightPx: bandHeightPx * BAND_FILL,
-    lineHeight: LINE_HEIGHT
-  });
-  const topPx = Math.max(
-    BAND_TOP3 * H,
-    (BAND_TOP3 + (BAND_BOTTOM3 - BAND_TOP3) / 2) * H - fit.heightPx / 2
-  );
-  return [
-    // Background — radial vignette built from the color scheme's own
-    // surface, so the card takes on the scheme (and the theme behind it)
-    // instead of vignetting every theme into hard black.
-    {
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: `radial-gradient(ellipse at 50% 50%, ${colors.bg} 0%, ${oklchDarken(colors.bg, 0.12)} 100%)`
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    },
-    // The text — massive, centered, boxed so it can never leave the frame.
-    {
-      type: "text",
-      id: "impact-text",
-      content: {
-        text,
-        style: {
-          fontSize: fit.fontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: colors.text,
-          textAlign: "center",
-          lineHeight: LINE_HEIGHT,
-          shadow: shouldUseShadow(context),
-          // Real glyphs of wide display / mono / CJK faces exceed the 0.5em
-          // wrap estimate; the renderer measures and scales into the box.
-          shrinkToFit: true,
-          ...fit.maxLines ? { maxLines: fit.maxLines } : {}
-        }
-      },
-      position: {
-        x: `${COLUMN_LEFT * 100}%`,
-        y: pct2(topPx),
-        width: `${COLUMN_WIDTH * 100}%`,
-        height: pct2(fit.heightPx),
-        anchor: "top-left"
-      },
-      animation: motionEntrance(
-        context,
-        getTemplateHint(context, "fullBleedQuote", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.8 } : { type: "fadeIn", duration: 1.5 }
-      )
-    }
-  ];
-}
-
-// src/doc/templates/listBlock.ts
-var LIST_ITEMS_FLOW = "list-items";
-var LIST_ITEM_LINE_HEIGHT = 1.2;
-var LIST_ITEM_BASE_FONT_PX = 34;
-var LIST_ITEM_GAP_PX = 18;
-var LIST_ITEM_MIN_FONT_PX = 16;
-var LIST_BOTTOM_MARGIN_PCT = 8;
-var LIST_STRIP_CLEARANCE_PCT = 2;
-var LIST_RELAXED_TITLE_TOP_PCT = 20;
-var LIST_RELAXED_ITEMS_TOP_PCT = 34;
-var LIST_RELAXED_UNTITLED_TOP_PCT = 26;
-var LIST_CONDENSED_TOP_PCT = 8;
-var LIST_CONDENSED_TITLE_GAP_PX = 22;
-var LIST_TITLE_LINE_HEIGHT = 1.15;
-function listItemGeometry(fontSize, baseFontSize, itemCount, textWidthPx, ordered = true) {
-  const markerText = ordered ? `${itemCount}.` : "\u2022";
-  const markerWidthPx = Math.max(fontSize, markerText.length * fontSize * 0.5);
-  const markerGapPx = fontSize * 0.35;
-  const bodyIndentPx = markerWidthPx + markerGapPx;
-  return {
-    markerWidthPx,
-    bodyIndentPx,
-    bodyWidthPx: Math.max(fontSize, textWidthPx - bodyIndentPx),
-    gapPx: LIST_ITEM_GAP_PX * (fontSize / baseFontSize)
-  };
-}
-function measureListHeightPx(items, fontSize, geometry) {
-  let heightPx = 0;
-  for (const itemText2 of items) {
-    const lineCount = estimateProseLineCount(itemText2, fontSize, geometry.bodyWidthPx);
-    heightPx += lineCount * fontSize * LIST_ITEM_LINE_HEIGHT + geometry.gapPx;
-  }
-  return heightPx;
-}
-function listBlock(input, context) {
-  const { title } = input;
-  const items = Array.isArray(input.items) ? input.items : [];
-  const build = input.build ?? context.block?.build;
-  if (build && build.mode !== "off") {
-    const rich = extractRichListItems(context.block?.contents);
-    const matches = rich.length === items.length && rich.every((item, i) => item.text === items[i]);
-    const contents = matches ? context.block?.contents ?? [] : [
-      {
-        type: "list",
-        ordered: input.ordered !== false,
-        children: items.map((text) => ({
-          type: "listItem",
-          children: [{ type: "paragraph", children: [{ type: "text", value: text }] }]
-        }))
-      }
-    ];
-    const layers2 = contentBlock(
-      { ...input, template: "content", title: input.title ?? "", build },
-      {
-        ...context,
-        block: {
-          id: input.id,
-          duration: input.duration,
-          startTime: 0,
-          audioSegment: input.audioSegment,
-          ...context.block,
-          summaryMode: void 0,
-          contents,
-          build
-        }
-      }
-    );
-    const accent = accentForViewport(input.accentImage, context.viewport);
-    if (accent) {
-      const layout = getAccentLayout(accent.position);
-      layers2.splice(
-        1,
-        0,
-        ...createAccentLayers(
-          accent,
-          input.id,
-          themedImageTreatment(context, input.imageTreatment)
-        )
-      );
-      for (const layer of layers2) {
-        if (layer.type !== "text" || layer.id !== "title" && layer.id !== "body") continue;
-        layer.position.x = `${parseFloat(layout.textCenterX) - parseFloat(layout.textWidth) / 2}%`;
-        layer.position.width = layout.textWidth;
-        layer.position.y = adjustY(String(layer.position.y), layout);
-        if (layer.id === "body" && accent.position === "bottom-strip")
-          layer.position.height = `${72 - ACCENT_STRIP_SIZE}%`;
-      }
-    }
-    return layers2;
-  }
-  const accentImage = accentForViewport(input.accentImage, context.viewport);
-  const ordered = input.ordered !== false;
-  const richItems = extractRichListItems(context.block?.contents);
-  const { theme } = context;
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-  const titleFontSize = themedFontSize(44, context, true);
-  const baseItemFontSize = themedFontSize(LIST_ITEM_BASE_FONT_PX, context, false);
-  const minItemFontSize = Math.min(
-    baseItemFontSize,
-    themedFontSize(LIST_ITEM_MIN_FONT_PX, context, false)
-  );
-  const layers = [
-    // Background — gradient
-    {
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: `linear-gradient(155deg, ${theme.colors.backgroundLight} 0%, ${theme.colors.background} 100%)`
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    }
-  ];
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment)
-      )
-    );
-  }
-  const centerX = parseFloat(accentLayout.textCenterX);
-  const widthPct = parseFloat(accentLayout.textWidth);
-  const leftPct = Number.isFinite(centerX) && Number.isFinite(widthPct) ? centerX - widthPct / 2 : 8;
-  const leftX = `${leftPct}%`;
-  const textWidthPx = (Number.isFinite(widthPct) ? widthPct / 100 : 0.85) * context.viewport.width;
-  const bottomLimitPct = (accentImage?.position === "bottom-strip" ? 100 - ACCENT_STRIP_SIZE - LIST_STRIP_CLEARANCE_PCT : 100 - LIST_BOTTOM_MARGIN_PCT) - accentLayout.textYAdjust;
-  const baseGeometry = listItemGeometry(
-    baseItemFontSize,
-    baseItemFontSize,
-    items.length,
-    textWidthPx,
-    ordered
+    maxHeightPx: bandHeightPx * BAND_FILL,
+    lineHeight: LINE_HEIGHT
+  });
+  const topPx = Math.max(
+    BAND_TOP3 * H,
+    (BAND_TOP3 + (BAND_BOTTOM3 - BAND_TOP3) / 2) * H - fit.heightPx / 2
   );
-  const relaxedStartY = title ? LIST_RELAXED_ITEMS_TOP_PCT : LIST_RELAXED_UNTITLED_TOP_PCT;
-  const relaxedBottomPct = relaxedStartY + measureListHeightPx(items, baseItemFontSize, baseGeometry) / context.viewport.height * 100;
-  const condensed = relaxedBottomPct > bottomLimitPct;
-  const condensedTopPct = LIST_CONDENSED_TOP_PCT - accentLayout.textYAdjust;
-  const titleTopPct = condensed ? condensedTopPct : LIST_RELAXED_TITLE_TOP_PCT;
-  let startY = relaxedStartY;
-  if (condensed) {
-    const titleHeightPx = title ? estimateWrappedLineCount(title, titleFontSize, textWidthPx) * titleFontSize * LIST_TITLE_LINE_HEIGHT + LIST_CONDENSED_TITLE_GAP_PX : 0;
-    startY = condensedTopPct + titleHeightPx / context.viewport.height * 100;
-  }
-  if (title) {
-    layers.push({
+  return [
+    // Background — radial vignette built from the color scheme's own
+    // surface, so the card takes on the scheme (and the theme behind it)
+    // instead of vignetting every theme into hard black.
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `radial-gradient(ellipse at 50% 50%, ${colors.bg} 0%, ${oklchDarken(colors.bg, 0.12)} 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // The text — massive, centered, boxed so it can never leave the frame.
+    {
       type: "text",
-      id: "list-title",
+      id: "impact-text",
       content: {
-        text: title,
+        text: text2,
         style: {
-          fontSize: titleFontSize,
+          fontSize: fit.fontSize,
           fontFamily: getThemeFont(context, "title"),
           fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign: "left",
-          shadow: shouldUseShadow(context)
+          color: colors.text,
+          textAlign: "center",
+          lineHeight: LINE_HEIGHT,
+          shadow: shouldUseShadow(context),
+          // Real glyphs of wide display / mono / CJK faces exceed the 0.5em
+          // wrap estimate; the renderer measures and scales into the box.
+          shrinkToFit: true,
+          ...fit.maxLines ? { maxLines: fit.maxLines } : {}
         }
       },
       position: {
-        x: leftX,
-        y: adjustY(`${titleTopPct}%`, accentLayout),
-        width: accentLayout.textWidth
+        x: `${COLUMN_LEFT * 100}%`,
+        y: pct2(topPx),
+        width: `${COLUMN_WIDTH * 100}%`,
+        height: pct2(fit.heightPx),
+        anchor: "top-left"
       },
-      animation: motionEntrance(context, { type: "fadeIn", duration: 1 })
-    });
-  }
-  const availablePx = Math.max(0, (bottomLimitPct - startY) / 100 * context.viewport.height);
-  let itemFontSize = baseItemFontSize;
-  let geometry = baseGeometry;
-  while (itemFontSize > minItemFontSize && measureListHeightPx(items, itemFontSize, geometry) > availablePx) {
-    itemFontSize -= 1;
-    geometry = listItemGeometry(itemFontSize, baseItemFontSize, items.length, textWidthPx, ordered);
-  }
-  const { markerWidthPx, bodyIndentPx, bodyWidthPx, gapPx } = geometry;
-  const bodyLeftX = `${leftPct + bodyIndentPx / context.viewport.width * 100}%`;
-  let itemY = startY;
-  for (let i = 0; i < items.length; i++) {
-    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,
-      delay: 0.3 + 0.3 * i
-    });
-    layers.push({
-      type: "text",
-      id: `item-${i}-marker`,
-      content: {
-        // Bullets stay bullets; only ordered (or legacy, unflagged) lists count.
-        text: ordered ? `${i + 1}.` : "\u2022",
-        flow: { id: LIST_ITEMS_FLOW, role: "marker" },
-        style: {
-          fontSize: itemFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.text,
-          textAlign: "right",
-          lineHeight: LIST_ITEM_LINE_HEIGHT,
-          shadow: shouldUseShadow(context)
+      animation: motionEntrance(
+        context,
+        getTemplateHint(context, "fullBleedQuote", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.8 } : { type: "fadeIn", duration: 1.5 }
+      )
+    }
+  ];
+}
+
+// src/doc/templates/conceptShapes.ts
+function region(id, d, fill, stroke, strokeWidth) {
+  return {
+    type: "path",
+    id,
+    position: { x: 0, y: 0, width: "100%", height: "100%" },
+    content: { d, fill, stroke, strokeWidth }
+  };
+}
+function disc(id, cx, cy, r, fill) {
+  return {
+    type: "shape",
+    id,
+    position: { x: cx - r, y: cy - r, width: r * 2, height: r * 2 },
+    content: { shape: "circle", fill }
+  };
+}
+function unbrokenSize(text2, size, width, floor) {
+  const longest = Math.max(1, ...text2.split(/\s+/u).map((word) => word.length));
+  return Math.max(Math.min(size, floor), Math.min(size, Math.floor(width / (longest * 0.64))));
+}
+function panel(id, left, top, width, height, pad, ruleH, accent, context) {
+  const { theme } = context;
+  return [
+    [
+      {
+        type: "shape",
+        id,
+        position: { x: left, y: top, width, height },
+        content: {
+          shape: "rect",
+          fill: withAlpha(theme.colors.text, 0.06),
+          stroke: withAlpha(theme.colors.text, 0.12),
+          strokeWidth: 2,
+          borderRadius: Math.round(Math.min(width, height) * 0.06)
         }
       },
-      position: {
-        x: leftX,
-        y: adjustY(`${itemY}%`, accentLayout),
-        width: markerWidthPx
+      "surface",
+      0
+    ],
+    [
+      {
+        type: "shape",
+        id: `${id}-rule`,
+        position: { x: left + pad, y: top + pad, width: Math.min(width * 0.22, 64), height: ruleH },
+        content: { shape: "rect", fill: accent, borderRadius: ruleH / 2 }
       },
-      animation
+      "rule",
+      0.2
+    ]
+  ];
+}
+var FIGURE_LINE_HEIGHT2 = 1.05;
+function statsBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
+  const stats = statItemsOf(input);
+  if (conceptDrawsAs("stats", input.items) === "cards")
+    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 = stats.length;
+  const columns2 = area.portrait ? n <= 3 ? 1 : 2 : n <= 4 ? n : 3;
+  const rows = Math.ceil(n / columns2);
+  const gutter = Math.round(viewport.width * (area.portrait ? 0.07 : 0.045));
+  const rowGap = Math.round(viewport.height * 0.055);
+  const cellW = (W - gutter * (columns2 - 1)) / columns2;
+  const cellH = (H - rowGap * (rows - 1)) / rows;
+  const figures = stats.map((stat) => splitFigure(stat.figure));
+  const base = themedFontSize(
+    rows > 1 && !area.portrait ? 124 : columns2 >= 4 ? 132 : columns2 === 3 ? 156 : 176,
+    context,
+    true
+  );
+  const floor = Math.min(base, themedFontSize(64, context, true));
+  const figureSize = Math.min(
+    ...figures.map(
+      ({ number }) => number ? fitProse({
+        text: number,
+        baseFontSize: base,
+        minFontSize: floor,
+        maxWidthPx: cellW * 0.98,
+        maxHeightPx: base * FIGURE_LINE_HEIGHT2,
+        lineHeight: FIGURE_LINE_HEIGHT2
+      }).fontSize : base
+    )
+  );
+  const figureH = figureSize * FIGURE_LINE_HEIGHT2;
+  const unitSize = Math.round(themedFontSize(LABEL_BASE, context, true) * (figureSize / base));
+  const unitH = figures.some((figure) => figure.unit) ? unitSize * LABEL_LINE_HEIGHT : 0;
+  const captionGap = Math.round(figureSize * 0.16);
+  const captions = stats.map((stat) => ({ label: "", detail: stat.caption }));
+  const { sizes } = fitRamp(
+    captions,
+    context,
+    () => cellW,
+    () => Math.max(0, cellH - figureH - unitH - captionGap)
+  );
+  const measures = captions.map((caption) => measureItem(caption, sizes, cellW));
+  const captionH = Math.max(0, ...measures.map((m) => Number.isFinite(m.height) ? m.height : 0));
+  const groupH = Math.min(cellH, figureH + unitH + captionGap + captionH);
+  const gridH = rows * groupH + (rows - 1) * rowGap;
+  const gridTop = area.top + Math.max(0, (H - gridH) * 0.38);
+  const motion = getMotionProfile(context);
+  const ruleW = Math.max(2, Math.round(viewport.width * 12e-4));
+  const layers = [...area.layers];
+  stats.forEach((stat, index) => {
+    const row = Math.floor(index / columns2);
+    const column = index % columns2;
+    const inRow = Math.min(columns2, n - row * columns2);
+    const rowLeft = area.left + (columns2 - inRow) * (cellW + gutter) / 2;
+    const left = rowLeft + column * (cellW + gutter);
+    const top = gridTop + row * (groupH + rowGap);
+    const turn = FIRST_TURN + index * TURN_STAGGER;
+    const { number, unit } = figures[index];
+    const parts = [];
+    if (column > 0)
+      parts.push([
+        {
+          type: "shape",
+          id: `stat-${index}-divider`,
+          position: { x: left - gutter / 2 - ruleW / 2, y: top, width: ruleW, height: groupH },
+          content: { shape: "rect", fill: withAlpha(theme.colors.text, 0.18) }
+        },
+        "bar",
+        0
+      ]);
+    const built = step(parts, index, context);
+    if (number) {
+      const count = motion.countUp ? countUpSpecFor(number) : null;
+      built.push({
+        ...textLayer(`stat-${index}`, number, box(left, top, cellW, figureH), {
+          fontSize: figureSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: area.accent,
+          lineHeight: FIGURE_LINE_HEIGHT2,
+          shadow: shouldUseShadow(context)
+        }),
+        buildStep: index,
+        animation: count ? {
+          type: "countUp",
+          duration: motion.countUpDuration,
+          delay: motionDelay(context, turn + 0.1),
+          count
+        } : entrance(context, "pop", turn + 0.1)
+      });
+    }
+    const rest = [];
+    if (unit)
+      rest.push([
+        textLayer(`stat-${index}-unit`, unit, box(left, top + figureH, cellW, unitH), {
+          fontSize: unitSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: area.accent,
+          lineHeight: LABEL_LINE_HEIGHT
+        }),
+        "text",
+        0.25
+      ]);
+    rest.push(
+      ...words(
+        itemText(
+          `stat-${index}`,
+          captions[index],
+          measures[index],
+          sizes,
+          left,
+          top + (number ? figureH + unitH + captionGap : 0),
+          cellW,
+          "left",
+          context
+        ),
+        0.35
+      )
+    );
+    layers.push(...built, ...step(rest, index, context));
+  });
+  return layers;
+}
+var FUNNEL_STEM = 0.3;
+function tiers(kind, input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
+  const items = itemsOf(input);
+  if (conceptDrawsAs(kind, input.items) === "cards")
+    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 gap = Math.round(viewport.width * (portrait ? 0.02 : 0.045));
+  const rowGap = Math.round(viewport.height * 0.02);
+  const listGap = viewport.height * 0.045;
+  const top = area.top;
+  const listW = W - gap * 1.5;
+  const listed = portrait ? fitRamp(
+    items,
+    context,
+    () => listW,
+    () => (H * 0.64 - listGap - rowGap * (n - 1)) / n
+  ).sizes : void 0;
+  const listH = listed ? items.reduce(
+    (sum, item) => {
+      const height = measureItem(item, listed, listW).height;
+      return sum + (Number.isFinite(height) ? height : 0);
+    },
+    rowGap * (n - 1)
+  ) : 0;
+  const shapeH = Math.round(
+    portrait ? Math.max(H * 0.36, Math.min(H * 0.5, H - listH - listGap)) : H
+  );
+  const shapeW = Math.round(
+    portrait ? Math.min(W * 0.78, shapeH * 1.5) : Math.min(W * 0.4, H * 1.1)
+  );
+  const shapeLeft = portrait ? area.left + (W - shapeW) / 2 : area.left;
+  const cx = shapeLeft + shapeW / 2;
+  const slit = Math.max(3, Math.round(viewport.height * 7e-3));
+  const tierH = shapeH / n;
+  const half = (y) => kind === "pyramid" ? shapeW / 2 * (y / shapeH) : shapeW / 2 * (1 - (1 - FUNNEL_STEM) * (y / shapeH));
+  const tint = (index) => {
+    const depth = n > 1 ? index / (n - 1) : 0;
+    return withAlpha(area.accent, kind === "pyramid" ? 0.92 - 0.6 * depth : 0.32 + 0.6 * depth);
+  };
+  const textLeft = portrait ? area.left + gap * 1.5 : shapeLeft + shapeW + gap;
+  const textW = area.right - textLeft;
+  const textTop = portrait ? top + shapeH + listGap : top;
+  const sizes = listed ?? fitRamp(
+    items,
+    context,
+    () => textW,
+    () => tierH - rowGap
+  ).sizes;
+  const measures = items.map((item) => measureItem(item, sizes, textW));
+  const stroke = Math.max(2, Math.round(viewport.height * 3e-3));
+  const shapes = [];
+  const callouts = [];
+  let rowTop = textTop;
+  items.forEach((item, index) => {
+    const y0 = index * tierH;
+    const y1 = y0 + tierH - (index < n - 1 ? slit : 0);
+    const [a, b] = [half(y0), half(y1)];
+    shapes.push(
+      ...step(
+        [
+          [
+            region(
+              `tier-${index}`,
+              `M ${cx - a} ${top + y0} L ${cx + a} ${top + y0} L ${cx + b} ${top + y1} L ${cx - b} ${top + y1} Z`,
+              tint(index),
+              "none",
+              0
+            ),
+            "surface",
+            0
+          ]
+        ],
+        index,
+        context
+      )
+    );
+    const m = measures[index];
+    const height = Number.isFinite(m.height) ? m.height : tierH;
+    const middle = top + (y0 + y1) / 2;
+    const parts = [];
+    let blockTop;
+    if (portrait) {
+      const firstLine = item.label ? sizes.label * LABEL_LINE_HEIGHT : sizes.plain * DETAIL_LINE_HEIGHT;
+      const swatch = Math.round(sizes.label * 0.55);
+      parts.push([
+        {
+          type: "shape",
+          id: `tier-${index}-swatch`,
+          position: {
+            x: area.left,
+            y: rowTop + firstLine / 2 - swatch / 2,
+            width: swatch,
+            height: swatch
+          },
+          content: { shape: "rect", fill: tint(index), borderRadius: Math.round(swatch * 0.2) }
+        },
+        "pop",
+        0.2
+      ]);
+      blockTop = rowTop;
+      rowTop += height + rowGap;
+    } else {
+      const edge = cx + half((y0 + y1) / 2);
+      const dot = Math.max(8, Math.round(viewport.height * 9e-3));
+      parts.push(
+        [
+          connector(
+            `tier-${index}-callout`,
+            `M ${edge + dot} ${middle} L ${textLeft - gap * 0.25} ${middle}`,
+            withAlpha(theme.colors.text, 0.45),
+            stroke,
+            false
+          ),
+          "draw",
+          0.2
+        ],
+        [
+          disc(`tier-${index}-pin`, edge + dot / 2, middle, dot / 2, theme.colors.text),
+          "pop",
+          0.15
+        ]
+      );
+      blockTop = Math.max(area.top, middle - height / 2);
+    }
+    parts.push(
+      ...words(
+        itemText(`tier-${index}`, item, m, sizes, textLeft, blockTop, textW, "left", context),
+        0.35
+      )
+    );
+    callouts.push(...step(parts, index, context));
+  });
+  return [...area.layers, ...shapes, ...callouts];
+}
+function pyramidBlock(input, context) {
+  return tiers("pyramid", input, context);
+}
+function funnelBlock(input, context) {
+  return tiers("funnel", input, context);
+}
+function hubBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
+  const items = itemsOf(input);
+  if (conceptDrawsAs("hub", input.items) === "cards")
+    return cardsBlock({ ...input, template: "cards" }, context);
+  const area = frame(input, context);
+  const { viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const n = items.length;
+  const portrait = area.portrait;
+  const center = String(input.center ?? "").replace(/\s+/gu, " ").trim();
+  const hubR = Math.round(
+    Math.min(viewport.height, viewport.width) * (center ? portrait ? 0.09 : 0.115 : 0.055)
+  );
+  const dot = Math.round(Math.min(viewport.height, viewport.width) * 0.034);
+  const gap = Math.round(dot * 0.6);
+  const cx = portrait ? area.left + hubR : (area.left + area.right) / 2;
+  const cy = area.top + H / 2;
+  const rx = portrait ? W * 0.4 : Math.min(H * 0.42, W * 0.2);
+  const ry = portrait ? H * 0.42 : rx;
+  const leftCount = portrait ? 0 : Math.ceil(n / 2);
+  const spots = items.map((_, index) => {
+    const onLeft = index < leftCount;
+    const count = onLeft ? leftCount : n - leftCount;
+    const at = onLeft ? index : index - leftCount;
+    const spread = portrait ? 124 : count <= 1 ? 0 : count === 2 ? 70 : 110;
+    const degrees = count <= 1 ? 0 : -spread / 2 + spread * at / (count - 1);
+    const theta = degrees * Math.PI / 180;
+    return {
+      onLeft,
+      x: cx + (onLeft ? -1 : 1) * rx * Math.cos(theta),
+      y: cy + ry * Math.sin(theta)
+    };
+  });
+  const labelW = (index) => spots[index].onLeft ? spots[index].x - dot / 2 - gap - area.left : area.right - (spots[index].x + dot / 2 + gap);
+  const rowH = (index) => {
+    const side = spots.filter((spot) => spot.onLeft === spots[index].onLeft);
+    if (side.length < 2) return H * 0.8;
+    return (side[side.length - 1].y - side[0].y) / (side.length - 1) * 0.9;
+  };
+  const scale = Math.min(
+    ...items.map(
+      (item, index) => fitRamp(
+        [item],
+        context,
+        () => labelW(index),
+        () => rowH(index)
+      ).scale
+    )
+  );
+  const sizes = ramp(context, scale);
+  const measures = items.map((item, index) => measureItem(item, sizes, labelW(index)));
+  const line = withAlpha(area.accent, 0.6);
+  const stroke = Math.max(3, Math.round(viewport.height * 4e-3));
+  const layers = [...area.layers];
+  layers.push({
+    ...disc("hub", cx, cy, hubR, area.accent),
+    animation: entrance(context, "pop", 0.35)
+  });
+  if (center) {
+    const side = hubR * 1.5;
+    const floor = themedFontSize(18, context, true);
+    const size = unbrokenSize(center, themedFontSize(36, context, true), side, floor);
+    const fit = fitProse({
+      text: center,
+      baseFontSize: size,
+      minFontSize: Math.min(size, floor),
+      maxWidthPx: side,
+      maxHeightPx: side,
+      lineHeight: 1.15
     });
     layers.push({
       type: "text",
-      id: `item-${i}`,
+      id: "hub-center",
+      position: { x: cx, y: cy, width: side, height: side, anchor: "center" },
       content: {
-        text: itemText2,
-        ...itemHtml ? { html: itemHtml } : {},
-        paragraphs: [
-          {
-            text: itemText2,
-            list: { ordered, level: 0, ...ordered ? { number: i + 1 } : {} }
-          }
-        ],
-        flow: { id: LIST_ITEMS_FLOW },
+        text: center,
         style: {
-          fontSize: itemFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.text,
-          textAlign: "left",
-          lineHeight: LIST_ITEM_LINE_HEIGHT,
-          shadow: shouldUseShadow(context)
+          fontSize: fit.fontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: pickContrastingText(area.accent),
+          textAlign: "center",
+          verticalAlign: "middle",
+          lineHeight: 1.15,
+          shrinkToFit: true,
+          ...fit.maxLines ? { maxLines: fit.maxLines } : {}
         }
       },
-      position: {
-        x: bodyLeftX,
-        y: adjustY(`${itemY}%`, accentLayout),
-        width: bodyWidthPx,
-        // Rich (HTML) items render in a hidden-overflow box the renderer
-        // sizes from the plain text; size it here from the same line count
-        // that reserved the vertical space so nested sub-items are not cut off.
-        height: lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT + itemFontSize * 0.5
-      },
-      animation
+      animation: entrance(context, "pop", 0.35)
     });
-    const itemHeightPx = lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT;
-    itemY += (itemHeightPx + gapPx) / context.viewport.height * 100;
   }
+  items.forEach((item, index) => {
+    const { x, y, onLeft } = spots[index];
+    const length = Math.hypot(x - cx, y - cy) || 1;
+    const [ux, uy] = [(x - cx) / length, (y - cy) / length];
+    const from = hubR + dot * 0.35;
+    const to = length - dot / 2 - dot * 0.15;
+    const m = measures[index];
+    const height = Number.isFinite(m.height) ? m.height : 0;
+    const width = labelW(index);
+    const left = onLeft ? x - dot / 2 - gap - width : x + dot / 2 + gap;
+    const top = Math.min(
+      Math.max(area.top, y - height / 2),
+      Math.max(area.top, area.bottom - height)
+    );
+    layers.push(
+      ...step(
+        [
+          [
+            connector(
+              `spoke-${index}`,
+              `M ${cx + from * ux} ${cy + from * uy} L ${cx + to * ux} ${cy + to * uy}`,
+              line,
+              stroke,
+              false
+            ),
+            "draw",
+            0
+          ],
+          [disc(`spoke-${index}-end`, x, y, dot / 2, area.accent), "pop", 0.3],
+          ...words(
+            itemText(
+              `spoke-${index}`,
+              item,
+              m,
+              sizes,
+              left,
+              top,
+              width,
+              onLeft ? "right" : "left",
+              context
+            ),
+            0.45
+          )
+        ],
+        index,
+        context
+      )
+    );
+  });
+  return layers;
+}
+function secondColor(accent, context) {
+  const { colors, colorSchemes } = context.theme;
+  const hue = (color) => isHex(color) ? hexHueDegrees(color) : NaN;
+  const apart = (color) => {
+    const turn = Math.abs(hue(color) - hue(accent)) % 360;
+    return Math.min(turn, 360 - turn);
+  };
+  const candidates = [
+    ...Object.values(colorSchemes ?? {}).map((scheme) => scheme.accent),
+    colors.secondary,
+    colors.primary,
+    colors.highlight
+  ];
+  return candidates.find((color) => !!color && apart(color) >= 50) ?? colors.text;
+}
+function vennBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
+  const all = itemsOf(input);
+  const sharedAt = vennOverlapIndex(all);
+  const sets = all.map((item, index) => ({ item, index })).filter(({ index }) => index !== sharedAt);
+  if (conceptDrawsAs("venn", input.items) === "cards")
+    return cardsBlock({ ...input, template: "cards" }, context);
+  const shared = sharedAt >= 0 ? all[sharedAt] : void 0;
+  const area = frame(input, context);
+  const { theme, viewport } = context;
+  const W = area.right - area.left;
+  const H = area.bottom - area.top;
+  const portrait = area.portrait;
+  const colors = [area.accent, secondColor(area.accent, context)];
+  const mid = (area.left + area.right) / 2;
+  const stroke = Math.max(2, Math.round(viewport.height * 3e-3));
+  const gap = Math.round(viewport.width * 0.025);
+  const layers = [...area.layers];
+  const captionSize = themedFontSize(DETAIL_BASE * 1.1, context, false);
+  const captionW = portrait ? W : W * 0.62;
+  const captionLines = shared?.detail ? Math.min(3, estimateProseLineCount(shared.detail, captionSize, captionW)) : 0;
+  const sharedLabelH = shared?.label && !portrait ? captionSize * 1.5 : 0;
+  const band = shared && !portrait ? sharedLabelH + captionLines * captionSize * DETAIL_LINE_HEIGHT + viewport.height * 0.04 : 0;
+  const circlesH = portrait ? H * 0.34 : H - band;
+  const R = Math.round(Math.min(circlesH / 2, (portrait ? W : W * 0.34) / 2));
+  const distance = R * 1.12;
+  const cy = area.top + circlesH / 2;
+  const centres = [mid - distance / 2, mid + distance / 2];
+  const lensHalf = Math.sqrt(Math.max(0, R * R - (distance / 2) ** 2));
+  const sideW = portrait ? W - gap * 1.5 : mid - distance / 2 - R - gap - area.left;
+  const rowGap = Math.round(viewport.height * 0.025);
+  const listTop = cy + R + viewport.height * 0.045;
+  const listed = portrait ? [...sets.map(({ item }) => item), ...shared ? [shared] : []] : [];
+  const { sizes } = fitRamp(
+    portrait ? listed : sets.map(({ item }) => ({ label: "", detail: item.detail })),
+    context,
+    () => sideW,
+    () => portrait ? (area.bottom - listTop - rowGap * (listed.length - 1)) / Math.max(1, listed.length) : circlesH * 0.9
+  );
+  let rowTop = listTop;
+  const row = (id, item, fill) => {
+    const m = measureItem(item, sizes, sideW);
+    const firstLine = item.label ? sizes.label * LABEL_LINE_HEIGHT : sizes.plain * DETAIL_LINE_HEIGHT;
+    const swatch = Math.round(sizes.label * 0.5);
+    const parts = [
+      [
+        disc(`${id}-swatch`, area.left + swatch / 2, rowTop + firstLine / 2, swatch / 2, fill),
+        "pop",
+        0.2
+      ],
+      ...words(
+        itemText(id, item, m, sizes, area.left + gap * 1.5, rowTop, sideW, "left", context),
+        0.3
+      )
+    ];
+    rowTop += (Number.isFinite(m.height) ? m.height : firstLine) + rowGap;
+    return parts;
+  };
+  sets.forEach(({ item, index }, side) => {
+    const cx = centres[side];
+    const fill = colors[side];
+    const parts = [
+      [
+        {
+          type: "shape",
+          id: `set-${side}`,
+          position: { x: cx - R, y: cy - R, width: R * 2, height: R * 2 },
+          content: {
+            shape: "circle",
+            fill: withAlpha(fill, 0.3),
+            stroke: withAlpha(fill, 0.9),
+            strokeWidth: stroke
+          }
+        },
+        "pop",
+        0
+      ]
+    ];
+    if (portrait) {
+      parts.push(...row(`set-${side}`, item, withAlpha(fill, 0.75)));
+    } else {
+      const own = R * 2 - (R * 2 - distance);
+      const lobeW = own * 0.74;
+      const lobeX = side === 0 ? cx - R + own * 0.52 : cx + R - own * 0.52;
+      if (item.label) {
+        const floor = themedFontSize(20, context, true);
+        const size = unbrokenSize(
+          item.label,
+          themedFontSize(LABEL_BASE, context, true),
+          lobeW,
+          floor
+        );
+        const fit = fitProse({
+          text: item.label,
+          baseFontSize: size,
+          minFontSize: Math.min(size, floor),
+          maxWidthPx: lobeW,
+          maxHeightPx: R * 0.9,
+          lineHeight: LABEL_LINE_HEIGHT
+        });
+        parts.push([
+          {
+            type: "text",
+            id: `set-${side}-label`,
+            position: { x: lobeX, y: cy, width: lobeW, height: R * 0.9, anchor: "center" },
+            content: {
+              text: item.label,
+              style: {
+                fontSize: fit.fontSize,
+                fontFamily: getThemeFont(context, "title"),
+                fontWeight: "bold",
+                color: theme.colors.text,
+                textAlign: "center",
+                verticalAlign: "middle",
+                lineHeight: LABEL_LINE_HEIGHT,
+                shrinkToFit: true,
+                ...fit.maxLines ? { maxLines: fit.maxLines } : {}
+              }
+            }
+          },
+          "text",
+          0.25
+        ]);
+      }
+      if (item.detail) {
+        const detail = { label: "", detail: item.detail };
+        const m = measureItem(detail, sizes, sideW);
+        const height = Number.isFinite(m.height) ? m.height : 0;
+        const left = side === 0 ? area.left : area.right - sideW;
+        parts.push(
+          ...words(
+            itemText(
+              `set-${side}`,
+              detail,
+              m,
+              sizes,
+              left,
+              Math.max(area.top, cy - height / 2),
+              sideW,
+              side === 0 ? "right" : "left",
+              context
+            ),
+            0.4
+          )
+        );
+      }
+    }
+    layers.push(...step(parts, index, context));
+  });
+  if (shared) {
+    const lens = region(
+      "overlap",
+      `M ${mid} ${cy - lensHalf} A ${R} ${R} 0 0 1 ${mid} ${cy + lensHalf} A ${R} ${R} 0 0 1 ${mid} ${cy - lensHalf} Z`,
+      withAlpha(theme.colors.text, 0.16),
+      withAlpha(theme.colors.text, 0.5),
+      stroke
+    );
+    const parts = [[lens, "surface", 0]];
+    if (portrait) {
+      parts.push(...row("overlap", shared, withAlpha(theme.colors.text, 0.5)));
+    } else {
+      const top = cy + R + viewport.height * 0.02;
+      parts.push([
+        connector(
+          "overlap-callout",
+          `M ${mid} ${cy + lensHalf * 0.35} L ${mid} ${top}`,
+          withAlpha(theme.colors.text, 0.5),
+          stroke,
+          false
+        ),
+        "draw",
+        0.2
+      ]);
+      if (shared.label)
+        parts.push([
+          textLayer(
+            "overlap-label",
+            shared.label,
+            box(mid - captionW / 2, top + viewport.height * 0.012, captionW, sharedLabelH),
+            {
+              fontSize: captionSize,
+              fontFamily: getThemeFont(context, "title"),
+              fontWeight: "bold",
+              color: theme.colors.text,
+              lineHeight: LABEL_LINE_HEIGHT,
+              textAlign: "center"
+            }
+          ),
+          "text",
+          0.3
+        ]);
+      if (shared.detail)
+        parts.push([
+          textLayer(
+            "overlap-detail",
+            shared.detail,
+            box(
+              mid - captionW / 2,
+              top + viewport.height * 0.012 + sharedLabelH,
+              captionW,
+              captionLines * captionSize * DETAIL_LINE_HEIGHT + captionSize * 0.4
+            ),
+            {
+              fontSize: captionSize,
+              fontFamily: getThemeFont(context, "body"),
+              color: theme.colors.text,
+              lineHeight: DETAIL_LINE_HEIGHT,
+              textAlign: "center",
+              maxLines: 3
+            }
+          ),
+          "text",
+          0.4
+        ]);
+    }
+    layers.push(...step(parts, sharedAt, context));
+  }
+  return layers;
+}
+var MATRIX_SCALES = [1.5, 1.32];
+function matrixBlock(input, context) {
+  const crowded = asListWhenCrowded(input, context);
+  if (crowded) return crowded;
+  const items = itemsOf(input);
+  if (conceptDrawsAs("matrix", input.items) === "cards")
+    return cardsBlock({ ...input, template: "cards" }, context);
+  const area = frame(input, context);
+  const { theme, viewport } = context;
+  const xAxis = String(input.xAxis ?? "").trim();
+  const yAxis = String(input.yAxis ?? "").trim();
+  const axisSize = themedFontSize(DETAIL_BASE * 1.05, context, false);
+  const axisRoom = Math.round(axisSize * 1.9);
+  const stroke = Math.max(3, Math.round(viewport.height * 4e-3));
+  const left = area.left + (yAxis ? axisRoom * 0.7 : 0);
+  const top = area.top + (yAxis ? axisRoom : 0);
+  const right = area.right;
+  const bottom = area.bottom - (xAxis ? axisRoom * 1.15 : 0);
+  const gap = Math.round(viewport.width * 0.014);
+  const cellW = (right - left - gap) / 2;
+  const cellH = (bottom - top - gap) / 2;
+  const pad = Math.round(Math.min(40, Math.max(22, cellW * 0.07)));
+  const ruleH = Math.max(4, Math.round(viewport.height * 6e-3));
+  const ruleGap = Math.round(viewport.height * 0.02);
+  const chrome = pad * 2 + ruleH + ruleGap;
+  const roomy = MATRIX_SCALES.find(
+    (scale) => items.every(
+      (item) => measureItem(item, ramp(context, scale), cellW - pad * 2).height <= (cellH - chrome) * 0.7
+    )
+  );
+  const sizes = roomy ? ramp(context, roomy) : fitRamp(
+    items,
+    context,
+    () => cellW - pad * 2,
+    () => cellH - chrome
+  ).sizes;
+  const measures = items.map((item) => measureItem(item, sizes, cellW - pad * 2));
+  const layers = [...area.layers];
+  const axisColor = withAlpha(theme.colors.text, 0.6);
+  const axisText = (id, text2, x, y, align) => textLayer(id, text2, box(x, y, (right - left) * 0.6, axisSize * 1.4), {
+    fontSize: axisSize,
+    fontFamily: getThemeFont(context, "title"),
+    fontWeight: "bold",
+    color: axisColor,
+    lineHeight: 1.2,
+    textAlign: align
+  });
+  if (yAxis) {
+    const x = area.left + stroke;
+    layers.push(
+      {
+        ...connector(
+          "axis-y",
+          `M ${x} ${bottom} L ${x} ${top + axisRoom * 0.1}`,
+          axisColor,
+          stroke
+        ),
+        animation: entrance(context, "draw", 0.3)
+      },
+      {
+        ...axisText("axis-y-label", yAxis, area.left, area.top, "left"),
+        animation: entrance(context, "text", 0.45)
+      }
+    );
+  }
+  if (xAxis) {
+    const y = bottom + axisRoom * 0.35;
+    layers.push(
+      {
+        ...connector("axis-x", `M ${left} ${y} L ${right - stroke} ${y}`, axisColor, stroke),
+        animation: entrance(context, "draw", 0.3)
+      },
+      {
+        ...axisText(
+          "axis-x-label",
+          xAxis,
+          right - (right - left) * 0.6,
+          y + axisRoom * 0.2,
+          "right"
+        ),
+        animation: entrance(context, "text", 0.45)
+      }
+    );
+  }
+  items.forEach((item, index) => {
+    const x = left + index % 2 * (cellW + gap);
+    const y = top + Math.floor(index / 2) * (cellH + gap);
+    layers.push(
+      ...step(
+        [
+          ...panel(`cell-${index}`, x, y, cellW, cellH, pad, ruleH, area.accent, context),
+          ...words(
+            itemText(
+              `cell-${index}`,
+              item,
+              measures[index],
+              sizes,
+              x + pad,
+              y + pad + ruleH + ruleGap,
+              cellW - pad * 2,
+              "left",
+              context
+            ),
+            0.22
+          )
+        ],
+        index,
+        context
+      )
+    );
+  });
   return layers;
 }
 
@@ -5176,6 +6141,8 @@ function definitionCard(input, context) {
 // src/doc/templates/comparisonBar.ts
 function comparisonBar(input, context) {
   const { leftLabel, rightLabel, unit, colorScheme = "blue" } = input;
+  if (!leftLabel && !rightLabel && !Number.isFinite(input.leftValue) && !Number.isFinite(input.rightValue))
+    return [];
   const { theme, viewport } = context;
   const colors = resolveColorScheme(context, colorScheme);
   const leftValue = Number.isFinite(input.leftValue) ? input.leftValue : 0;
@@ -5345,7 +6312,7 @@ var FIT_SLACK = 0.93;
 var QUOTE_LINE_HEIGHT = 1.35;
 var ATTR_LINE_HEIGHT = 1.4;
 function pullQuoteLockup(options, context) {
-  const { text, attribution, overMedia } = options;
+  const { text: text2, attribution, overMedia } = options;
   const { theme, viewport } = context;
   const pct2 = (px) => px / viewport.height * 100;
   const quoteBaseSize = themedFontSize(52, context, true);
@@ -5364,7 +6331,7 @@ function pullQuoteLockup(options, context) {
     (frameHeightPx - attrHeightPx - gapReservePx) * FIT_SLACK
   );
   const fit = fitProse({
-    text,
+    text: text2,
     baseFontSize: quoteBaseSize,
     minFontSize: quoteMinSize,
     maxWidthPx: columnWidthPx,
@@ -5388,7 +6355,7 @@ function pullQuoteLockup(options, context) {
     type: "text",
     id: "quote-text",
     content: {
-      text,
+      text: text2,
       style: {
         fontSize: fit.fontSize,
         fontFamily: getThemeFont(context, "title"),
@@ -5466,7 +6433,7 @@ function pullQuoteOverlayLayer() {
   return createBackgroundLayer("overlay", "rgba(0, 0, 0, 0.55)");
 }
 function pullQuote(input, context) {
-  const { text, attribution, backgroundImage, ambientMotion } = input;
+  const { text: text2, attribution, backgroundImage, ambientMotion } = input;
   const treatment = themedImageTreatment(context, input.imageTreatment);
   const layers = [];
   if (backgroundImage?.src) {
@@ -5496,7 +6463,7 @@ function pullQuote(input, context) {
     layers.push(createBackgroundLayer("bg", themedSurfaceGradient(context, 160)));
   }
   layers.push(
-    ...pullQuoteLockup({ text, attribution, overMedia: Boolean(backgroundImage?.src) }, context)
+    ...pullQuoteLockup({ text: text2, attribution, overMedia: Boolean(backgroundImage?.src) }, context)
   );
   return layers;
 }
@@ -5639,7 +6606,7 @@ function videoWithCaption(input, context) {
 
 // src/doc/templates/videoPullQuote.ts
 function videoPullQuote(input, context) {
-  const { text, attribution, backgroundVideo } = input;
+  const { text: text2, attribution, backgroundVideo } = input;
   const layers = [];
   if (backgroundVideo?.src) {
     layers.push(
@@ -5667,7 +6634,7 @@ function videoPullQuote(input, context) {
     layers.push(createBackgroundLayer("bg", themedSurfaceGradient(context, 160)));
   }
   layers.push(
-    ...pullQuoteLockup({ text, attribution, overMedia: Boolean(backgroundVideo?.src) }, context)
+    ...pullQuoteLockup({ text: text2, attribution, overMedia: Boolean(backgroundVideo?.src) }, context)
   );
   return layers;
 }
@@ -5763,22 +6730,22 @@ function normalizeChartTable(table) {
 }
 function parseCellNumber(raw) {
   if (typeof raw !== "string") return null;
-  let text = raw.trim();
-  if (!text) return null;
+  let text2 = raw.trim();
+  if (!text2) return null;
   let negative = false;
-  const accounting = /^\((.*)\)$/.exec(text);
+  const accounting = /^\((.*)\)$/.exec(text2);
   if (accounting) {
     negative = true;
-    text = accounting[1].trim();
+    text2 = accounting[1].trim();
   }
-  text = text.replace(/^([+-]?)\s*[$€£¥]\s*/, "$1");
-  text = text.replace(/%$/, "").trim();
-  text = text.replace(/,/g, "");
-  if (/^[+-]?\d{1,3}(?: \d{3})+(?:\.\d+)?$/.test(text)) {
-    text = text.replace(/ /g, "");
+  text2 = text2.replace(/^([+-]?)\s*[$€£¥]\s*/, "$1");
+  text2 = text2.replace(/%$/, "").trim();
+  text2 = text2.replace(/,/g, "");
+  if (/^[+-]?\d{1,3}(?: \d{3})+(?:\.\d+)?$/.test(text2)) {
+    text2 = text2.replace(/ /g, "");
   }
-  if (!/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i.test(text)) return null;
-  const value = Number(text);
+  if (!/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i.test(text2)) return null;
+  const value = Number(text2);
   if (!Number.isFinite(value)) return null;
   return negative ? -value : value;
 }
@@ -5794,13 +6761,13 @@ function isNumericColumn(rows, colIndex) {
   return numeric > 0 && numeric / Math.max(1, nonEmpty) >= NUMERIC_COLUMN_THRESHOLD;
 }
 function resolveColumnRef(ref, headers) {
-  const text = String(ref).trim();
-  if (!text) return null;
-  const lower = text.toLowerCase();
+  const text2 = String(ref).trim();
+  if (!text2) return null;
+  const lower = text2.toLowerCase();
   const byName = headers.findIndex((h) => h.trim().toLowerCase() === lower);
   if (byName >= 0) return byName;
-  if (/^\d+$/.test(text)) {
-    const index = Number(text);
+  if (/^\d+$/.test(text2)) {
+    const index = Number(text2);
     if (index < headers.length) return index;
   }
   return null;
@@ -5848,9 +6815,9 @@ function buildChartData(table, options = {}) {
 }
 
 // src/doc/templates/chart/scale.ts
-function niceNum(range, round4) {
-  const exponent = Math.floor(Math.log10(range));
-  const fraction = range / 10 ** exponent;
+function niceNum(range2, round4) {
+  const exponent = Math.floor(Math.log10(range2));
+  const fraction = range2 / 10 ** exponent;
   let niceFraction;
   if (round4) {
     if (fraction < 1.5) niceFraction = 1;
@@ -5876,8 +6843,8 @@ function niceTicks(min, max, targetCount = 5) {
     if (min >= 0 && lo < 0) lo = 0;
   }
   const count = Math.max(2, targetCount);
-  const range = niceNum(hi - lo, false);
-  const step2 = niceNum(range / (count - 1), true);
+  const range2 = niceNum(hi - lo, false);
+  const step2 = niceNum(range2 / (count - 1), true);
   const niceMin = Math.floor(lo / step2) * step2;
   const niceMax = Math.ceil(hi / step2) * step2;
   const ticks = [];
@@ -5890,24 +6857,24 @@ function formatChartValue(value, unit) {
   if (!Number.isFinite(value)) return "\u2014";
   const sign = value < 0 ? "-" : "";
   const abs = Math.abs(value);
-  let text;
+  let text2;
   if (abs >= 1e6) {
-    text = `${sign}${trimTrailingZero((abs / 1e6).toFixed(1))}M`;
+    text2 = `${sign}${trimTrailingZero((abs / 1e6).toFixed(1))}M`;
   } else if (abs >= 1e3) {
-    text = `${sign}${trimTrailingZero((abs / 1e3).toFixed(abs >= 1e4 ? 0 : 1))}K`;
+    text2 = `${sign}${trimTrailingZero((abs / 1e3).toFixed(abs >= 1e4 ? 0 : 1))}K`;
   } else {
-    text = `${sign}${abs.toLocaleString("en-US", { maximumFractionDigits: 2 })}`;
+    text2 = `${sign}${abs.toLocaleString("en-US", { maximumFractionDigits: 2 })}`;
   }
-  return unit ? `${text} ${unit}` : text;
+  return unit ? `${text2} ${unit}` : text2;
 }
 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;
+  const text2 = `${sign}${Math.abs(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}`;
+  return unit ? `${text2} ${unit}` : text2;
 }
-function trimTrailingZero(text) {
-  return text.replace(/\.0$/, "");
+function trimTrailingZero(text2) {
+  return text2.replace(/\.0$/, "");
 }
 
 // src/doc/templates/chart/geometry.ts
@@ -5944,15 +6911,15 @@ function arcPath(cx, cy, rOuter, rInner, startDeg, endDeg) {
     "Z"
   ].join(" ");
 }
-function polylinePath(points) {
-  if (points.length === 0) return "";
-  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round(p.x)} ${round(p.y)}`).join(" ");
+function polylinePath(points2) {
+  if (points2.length === 0) return "";
+  return points2.map((p, i) => `${i === 0 ? "M" : "L"} ${round(p.x)} ${round(p.y)}`).join(" ");
 }
-function areaPath(points, baselineY) {
-  if (points.length === 0) return "";
-  const open = polylinePath(points);
-  const first = points[0];
-  const last = points[points.length - 1];
+function areaPath(points2, baselineY) {
+  if (points2.length === 0) return "";
+  const open = polylinePath(points2);
+  const first = points2[0];
+  const last = points2[points2.length - 1];
   return `${open} L ${round(last.x)} ${round(baselineY)} L ${round(first.x)} ${round(baselineY)} Z`;
 }
 
@@ -7064,34 +8031,76 @@ 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.",
+  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
+  },
+  stats: {
+    summary: "Key figures by default; supplemental media is paired with the figures.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: TEXT_VARIANTS
+  },
+  pyramid: {
+    summary: "A drawn pyramid by default; supplemental media is paired with the tiers.",
     noMedia: "template-default",
     ownership: "supplemental",
     unconsumedMedia: "reserved-slot",
-    variants: DENSE_VARIANTS
+    variants: TEXT_VARIANTS
   },
-  process: {
-    summary: "A drawn process by default; supplemental media is paired with the stages.",
+  funnel: {
+    summary: "A drawn funnel by default; supplemental media is paired with the stages.",
     noMedia: "template-default",
     ownership: "supplemental",
     unconsumedMedia: "reserved-slot",
-    variants: DENSE_VARIANTS
+    variants: TEXT_VARIANTS
   },
-  cycle: {
-    summary: "A drawn cycle by default; supplemental media is paired with the ring.",
+  hub: {
+    summary: "A drawn hub and spokes by default; supplemental media is paired with the ideas.",
     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.",
+  venn: {
+    summary: "Drawn overlapping circles by default; supplemental media is paired with the sets.",
     noMedia: "template-default",
     ownership: "supplemental",
     unconsumedMedia: "reserved-slot",
     variants: TEXT_VARIANTS
   },
+  matrix: {
+    summary: "A two-by-two grid by default; supplemental media is paired with the grid.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
   photoGrid: {
     summary: "Requires a primary image collection and owns the complete tiled media field.",
     noMedia: "unsupported",
@@ -7243,15 +8252,15 @@ function getBlockMediaLayoutPolicy(template) {
 }
 
 // src/doc/richMediaLayout.ts
-function containedFeatureArea(region, aspects) {
+function containedFeatureArea(region2, aspects) {
   const count = aspects.length;
   const columns2 = Math.min(
     count,
-    Math.max(1, Math.ceil(Math.sqrt(count * region.width / region.height)))
+    Math.max(1, Math.ceil(Math.sqrt(count * region2.width / region2.height)))
   );
   const rows = Math.ceil(count / columns2);
-  const width = region.width / columns2;
-  const height = region.height / rows;
+  const width = region2.width / columns2;
+  const height = region2.height / rows;
   return aspects.reduce((area, aspect) => {
     const ratio = aspect && Number.isFinite(aspect) && aspect > 0 ? aspect : 16 / 9;
     const containedWidth = Math.min(width, height * ratio);
@@ -7954,15 +8963,15 @@ var DIAGRAM_LABEL_LINE_HEIGHT = 1.25;
 var DIAGRAM_LABEL_HORIZONTAL_PADDING = 24;
 var DIAGRAM_LABEL_VERTICAL_PADDING = 16;
 var DIAGRAM_LABEL_MIN_FONT_SIZE = 10;
-function fitDiagramLabel(text, boxWidth, boxHeight, preferredFontSize) {
+function fitDiagramLabel(text2, boxWidth, boxHeight, preferredFontSize) {
   const textWidth = Math.max(1, boxWidth - DIAGRAM_LABEL_HORIZONTAL_PADDING);
   const textHeight = Math.max(1, boxHeight - DIAGRAM_LABEL_VERTICAL_PADDING);
   const preferred = Math.max(DIAGRAM_LABEL_MIN_FONT_SIZE, Math.floor(preferredFontSize));
   let fontSize = preferred;
-  let lineCount = countWrappedLines(text, fontSize, textWidth);
+  let lineCount = countWrappedLines(text2, fontSize, textWidth);
   while (fontSize > DIAGRAM_LABEL_MIN_FONT_SIZE && lineCount * fontSize * DIAGRAM_LABEL_LINE_HEIGHT > textHeight) {
     fontSize--;
-    lineCount = countWrappedLines(text, fontSize, textWidth);
+    lineCount = countWrappedLines(text2, fontSize, textWidth);
   }
   return {
     fontSize,
@@ -7971,16 +8980,16 @@ function fitDiagramLabel(text, boxWidth, boxHeight, preferredFontSize) {
     textWidth
   };
 }
-function countWrappedLines(text, fontSize, maxWidth) {
-  return text.split("\n").reduce((count, line) => count + wrappedLineCount2(line, fontSize, maxWidth), 0);
+function countWrappedLines(text2, fontSize, maxWidth) {
+  return text2.split("\n").reduce((count, line) => count + wrappedLineCount2(line, fontSize, maxWidth), 0);
 }
-function wrappedLineCount2(text, fontSize, maxWidth) {
-  if (!text.trim()) return 1;
+function wrappedLineCount2(text2, fontSize, maxWidth) {
+  if (!text2.trim()) return 1;
   const charsPerLine = Math.floor(maxWidth / (fontSize * 0.5));
   if (charsPerLine <= 0) return 1;
   let lines = 0;
   let currentLength = 0;
-  for (const word of text.split(/\s+/)) {
+  for (const word of text2.split(/\s+/)) {
     const testLength = currentLength > 0 ? currentLength + 1 + word.length : word.length;
     if (testLength <= charsPerLine) {
       currentLength = testLength;
@@ -7999,6 +9008,7 @@ function wrappedLineCount2(text, fontSize, maxWidth) {
 }
 
 // src/doc/templates/diagramBlock.ts
+import { layoutGraph } from "@bendyline/squisq-graph";
 var NODE_WIDTH = 180;
 var NODE_HEIGHT = 64;
 var PADDING = 80;
@@ -8075,8 +9085,8 @@ function planCanvasFrame(template, title, context) {
   const { viewport } = context;
   const media = unconsumedMedia(context.block);
   const mediaRect = media.count > 0 ? resolveSupplementalMediaLayout([], template, viewport, media.count, media.aspectRatios).mediaRect : void 0;
-  const region = freeRegion(viewport, mediaRect);
-  const innerWidth = Math.max(1, region.width - PADDING * 2);
+  const region2 = freeRegion(viewport, mediaRect);
+  const innerWidth = Math.max(1, region2.width - PADDING * 2);
   let titleFit;
   if (title) {
     const baseFontSize = themedFontSize(40, context, true);
@@ -8103,7 +9113,7 @@ function planCanvasFrame(template, title, context) {
       maxWidthPx: widthPx,
       maxHeightPx: Math.min(
         CANVAS_DESCRIPTION_MAX_LINES * baseFontSize * CANVAS_DESCRIPTION_LINE_HEIGHT,
-        region.height * CANVAS_DESCRIPTION_MAX_HEIGHT_RATIO
+        region2.height * CANVAS_DESCRIPTION_MAX_HEIGHT_RATIO
       ),
       lineHeight: CANVAS_DESCRIPTION_LINE_HEIGHT
     });
@@ -8112,13 +9122,13 @@ function planCanvasFrame(template, title, context) {
   const titleBlockPx = titleFit ? titleFit.heightPx + CANVAS_TITLE_GAP_PX : 0;
   const descriptionBlockPx = description ? CANVAS_DESCRIPTION_GAP_PX + description.fit.heightPx : 0;
   return {
-    region,
+    region: region2,
     ...titleFit ? { title: titleFit } : {},
     ...description ? { description } : {},
     titleBlockPx,
     descriptionBlockPx,
     availW: innerWidth,
-    availH: Math.max(1, region.height - PADDING * 2 - titleBlockPx - descriptionBlockPx),
+    availH: Math.max(1, region2.height - PADDING * 2 - titleBlockPx - descriptionBlockPx),
     ...mediaRect ? { mediaRect } : {}
   };
 }
@@ -8140,14 +9150,14 @@ function placeCanvasGroup(frame2, contentW, contentH) {
     descriptionY: offsetY + scaledH + CANVAS_DESCRIPTION_GAP_PX
   };
 }
-function canvasTitleLayer(id, text, frame2, placement, context) {
+function canvasTitleLayer(id, text2, frame2, placement, context) {
   const fit = frame2.title;
   if (!fit) return void 0;
   return {
     type: "text",
     id,
     content: {
-      text,
+      text: text2,
       style: {
         fontSize: fit.fontSize,
         fontFamily: getThemeFont(context, "title"),
@@ -8215,11 +9225,40 @@ function nodesFromChildren(context) {
     }))
   };
 }
-function nodesFromTemplateData(input) {
+function placeDiagramNodes(nodes, rawEdges, direction) {
+  if (nodes.length === 0 || nodes.some((node) => node.container)) return [];
+  const ids = new Set(nodes.map((node) => node.id));
+  const edges = (Array.isArray(rawEdges) ? rawEdges : []).filter(
+    (edge) => typeof edge === "object" && edge !== null && ids.has(edge.source) && ids.has(edge.target) && edge.source !== edge.target
+  ).map((edge, index) => ({ id: String(index), source: edge.source, target: edge.target }));
+  const size = (node) => ({
+    width: typeof node.w === "number" && node.w > 0 ? node.w : NODE_WIDTH,
+    height: typeof node.h === "number" && node.h > 0 ? node.h : NODE_HEIGHT
+  });
+  const result = layoutGraph(
+    { nodes: nodes.map((node) => ({ id: node.id, ...size(node) })), edges },
+    {
+      direction,
+      layerSpacing: direction === "right" ? 100 : 96,
+      nodeSpacing: direction === "right" ? 96 : 100,
+      componentSpacing: 100,
+      // The template draws its own connectors; only the positions are used.
+      edgeSpacing: 1
+    }
+  );
+  return nodes.map((node, index) => ({
+    ...node,
+    x: Math.round(result.nodes[index].x),
+    y: Math.round(result.nodes[index].y)
+  }));
+}
+function nodesFromTemplateData(input, direction) {
   const rawNodes = Array.isArray(input.nodes) ? input.nodes : [];
-  const valid = rawNodes.filter(
-    (n) => typeof n === "object" && n !== null && typeof n.id === "string" && n.id.length > 0 && typeof n.label === "string" && typeof n.x === "number" && Number.isFinite(n.x) && typeof n.y === "number" && Number.isFinite(n.y)
+  const named = rawNodes.filter(
+    (n) => typeof n === "object" && n !== null && typeof n.id === "string" && n.id.length > 0 && typeof n.label === "string"
   );
+  const positioned = (n) => typeof n.x === "number" && Number.isFinite(n.x) && typeof n.y === "number" && Number.isFinite(n.y);
+  const valid = named.some(positioned) ? named.filter(positioned) : placeDiagramNodes(named, input.edges, direction);
   const ids = new Set(valid.map((n) => n.id));
   const containerIds = new Set(
     valid.map((n) => n.container).filter((c) => typeof c === "string" && ids.has(c))
@@ -8264,7 +9303,7 @@ function diagramBlock(input, context) {
   const { theme, viewport, children = [] } = context;
   const colors = input.colorScheme ? resolveColorScheme(context, input.colorScheme) : void 0;
   const background = input.background === "surface" ? [createBackgroundLayer("diagram-bg", themedSurfaceGradient(context, 170))] : [];
-  const resolved = children.length > 0 ? nodesFromChildren(context) : input.nodes && input.nodes.length > 0 ? nodesFromTemplateData(input) : { nodes: [], edges: [] };
+  const resolved = children.length > 0 ? nodesFromChildren(context) : input.nodes && input.nodes.length > 0 ? nodesFromTemplateData(input, viewport.height > viewport.width ? "down" : "right") : { nodes: [], edges: [] };
   if (resolved.nodes.length === 0) {
     return [
       ...background,
@@ -8584,11 +9623,11 @@ function coerceTracks(raw) {
   const tracks = [];
   raw.forEach((candidate, trackIndex) => {
     if (typeof candidate !== "object" || candidate === null) return;
-    const record = candidate;
-    const id = typeof record.id === "string" && record.id.trim() ? record.id.trim() : `track-${trackIndex + 1}`;
+    const record2 = candidate;
+    const id = typeof record2.id === "string" && record2.id.trim() ? record2.id.trim() : `track-${trackIndex + 1}`;
     const events = [];
-    if (Array.isArray(record.events)) {
-      record.events.forEach((eventCandidate, eventIndex) => {
+    if (Array.isArray(record2.events)) {
+      record2.events.forEach((eventCandidate, eventIndex) => {
         if (typeof eventCandidate !== "object" || eventCandidate === null) return;
         const event = eventCandidate;
         if (typeof event.label !== "string") return;
@@ -8612,8 +9651,8 @@ function coerceTracks(raw) {
     }
     tracks.push({
       id,
-      ...typeof record.label === "string" && record.label.trim() ? { label: record.label.trim() } : {},
-      ...typeof record.endLabel === "string" && record.endLabel.trim() ? { endLabel: record.endLabel.trim() } : {},
+      ...typeof record2.label === "string" && record2.label.trim() ? { label: record2.label.trim() } : {},
+      ...typeof record2.endLabel === "string" && record2.endLabel.trim() ? { endLabel: record2.endLabel.trim() } : {},
       events
     });
   });
@@ -9389,8 +10428,9 @@ function drawingBlock(input, context) {
   const defaultStroke = input.stroke ?? colors.text ?? theme.colors.text;
   const defaultFill = input.fill ?? "none";
   const layout = computeDrawingLayout(children);
+  const background = createBackgroundLayer("bg", theme.colors.background);
   if (layout.shapes.length === 0 && layout.connectors.length === 0) {
-    return [emptyHint(input, context)];
+    return [background, emptyHint(input, context)];
   }
   const minX = Math.min(...layout.shapes.map((s) => s.x));
   const maxX = Math.max(...layout.shapes.map((s) => s.x + s.width));
@@ -9404,7 +10444,7 @@ function drawingBlock(input, context) {
   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 = [];
+  const layers = [background];
   if (input.title) {
     const titleLayer = canvasTitleLayer("drawing-title", input.title, frame2, placement, context);
     if (titleLayer) layers.push(titleLayer);
@@ -9550,12 +10590,12 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   return out;
 }
-function textLayer3(id, text, cx, cy, width, context, color, bold, fontAdj) {
+function textLayer3(id, text2, cx, cy, width, context, color, bold, fontAdj) {
   return {
     type: "text",
     id,
     content: {
-      text,
+      text: text2,
       style: {
         fontSize: themedFontSize(Math.round((bold ? 22 : 18) * fontAdj), context, false),
         fontFamily: getThemeFont(context, "body"),
@@ -9660,7 +10700,7 @@ function computeLayoutLayers(children, _viewport, defaults = {}) {
       continue;
     }
     if (kind === "text") {
-      const text = bodyText2(child) || child.title || "";
+      const text2 = bodyText2(child) || child.title || "";
       const layer = {
         id: child.id,
         type: "text",
@@ -9670,7 +10710,7 @@ function computeLayoutLayers(children, _viewport, defaults = {}) {
           width: numParam2(params, "width") ?? DEFAULT_TEXT.w,
           height: numParam2(params, "height") ?? DEFAULT_TEXT.h
         },
-        content: { text, style: textStyleFromParams(params, ink) }
+        content: { text: text2, style: textStyleFromParams(params, ink) }
       };
       layers.push(layer);
       continue;
@@ -9771,7 +10811,8 @@ function round3(n) {
 function layoutBlock(input, context) {
   const { theme, viewport, children = [] } = context;
   const { layers } = computeLayoutLayers(children, viewport, { ink: theme.colors.text });
-  return layers.length > 0 ? layers : [emptyHint2(input, context)];
+  const background = createBackgroundLayer("bg", theme.colors.background);
+  return [background, ...layers.length > 0 ? layers : [emptyHint2(input, context)]];
 }
 function emptyHint2(input, context) {
   return {
@@ -10006,12 +11047,12 @@ function handoffLayers(input, context, accent, textColor, bubbleFill) {
   }
   return layers;
 }
-function nameLayer(id, text, x, fontSize, fontFamily, color) {
+function nameLayer(id, text2, x, fontSize, fontFamily, color) {
   return {
     type: "text",
     id,
     content: {
-      text,
+      text: text2,
       style: { fontSize, fontFamily, fontWeight: "bold", color, textAlign: "center" }
     },
     position: { x, y: "42%", anchor: "center" }
@@ -10105,6 +11146,12 @@ var templateRegistry = {
   process: processBlock,
   cycle: cycleBlock,
   layers: layersBlock,
+  stats: statsBlock,
+  pyramid: pyramidBlock,
+  funnel: funnelBlock,
+  hub: hubBlock,
+  venn: vennBlock,
+  matrix: matrixBlock,
   photoGrid,
   definitionCard,
   comparisonBar,
@@ -10510,6 +11557,27 @@ var TEMPLATE_INPUT_DESCRIPTORS = {
     { key: "tracks", description: "Timeline tracks and events (supply via template data)" },
     { key: "links", description: "Branch links between event ids (supply via template data)" }
   ],
+  cards: CONCEPT_DESCRIPTORS([
+    {
+      key: "versus",
+      description: 'Set exactly two ideas against each other, with a "vs" mark between them',
+      coerce: "boolean"
+    }
+  ]),
+  process: CONCEPT_DESCRIPTORS(),
+  cycle: CONCEPT_DESCRIPTORS(),
+  layers: CONCEPT_DESCRIPTORS(),
+  stats: CONCEPT_DESCRIPTORS(),
+  pyramid: CONCEPT_DESCRIPTORS(),
+  funnel: CONCEPT_DESCRIPTORS(),
+  hub: CONCEPT_DESCRIPTORS([
+    { key: "center", description: "The one to three words written inside the hub" }
+  ]),
+  venn: CONCEPT_DESCRIPTORS(),
+  matrix: CONCEPT_DESCRIPTORS([
+    { key: "xAxis", description: "What grows from left to right, named along the foot" },
+    { key: "yAxis", description: "What grows from bottom to top, named up the side" }
+  ]),
   videoWithCaption: [
     { key: "videoSrc", description: "Path to the video file", required: true },
     { key: "posterSrc", description: "Poster frame path" },
@@ -10522,6 +11590,17 @@ var TEMPLATE_INPUT_DESCRIPTORS = {
     { key: "videoLicense", description: "License identifier" }
   ]
 };
+function CONCEPT_DESCRIPTORS(extra = []) {
+  return [
+    { key: "title", description: "Headline above the ideas (defaults to the heading)" },
+    {
+      key: "colorScheme",
+      description: "Accent color (defaults to the theme highlight)",
+      valueHint: COLOR_SCHEME_HINT
+    },
+    ...extra
+  ];
+}
 function FEATURE_DESCRIPTORS() {
   return [
     { key: "imageSrc", description: "Path to the feature image", required: true },
@@ -10726,9 +11805,9 @@ function fallbackBlockLayers(block, context, notice) {
 }
 function extractBodyText(block) {
   if (!block.contents || block.contents.length === 0) return "";
-  const text = block.contents.filter((node) => !isPictureFence(node)).map((node) => extractPlainText(node)).join("\n").trim();
-  if (text.length <= MAX_BODY_CHARS) return text;
-  return `${text.slice(0, MAX_BODY_CHARS).trimEnd()}\u2026`;
+  const text2 = block.contents.filter((node) => !isPictureFence(node)).map((node) => extractPlainText(node)).join("\n").trim();
+  if (text2.length <= MAX_BODY_CHARS) return text2;
+  return `${text2.slice(0, MAX_BODY_CHARS).trimEnd()}\u2026`;
 }
 
 // src/doc/structuredData.ts
@@ -11056,6 +12135,21 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
   const context = runtime.templateContext ? cloneData(runtime.templateContext) : createTemplateContext(theme, blockIndex, totalBlocks, viewport, { motion: options.motion });
   context.block = cloneData(block);
   const execution = executeTemplateMaterialization(block, context, runtime.registry);
+  if (execution.status === "ok" && drawsNothing(execution.layers) && hasContentToShow(block)) {
+    const asContent = materializeBlockLayersWithRuntime(
+      { ...block, template: "content" },
+      options,
+      runtime
+    );
+    return {
+      ...asContent,
+      diagnostic: {
+        code: "template-drew-nothing",
+        template: block.template,
+        message: `Template "${block.template}" has nothing to draw here; the block is shown as content.`
+      }
+    };
+  }
   if (execution.status === "ok") {
     const styledLayers = runtime.applyRenderStyle !== false ? applyRenderStyleToLayers(execution.layers, block, theme) : execution.layers;
     const layers = appendRichContentLayers(
@@ -11116,6 +12210,16 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
     diagnostic
   };
 }
+function drawsNothing(layers) {
+  return layers.every(
+    (layer) => (layer.type === "image" || layer.type === "video") && !layer.content.src
+  );
+}
+function hasContentToShow(block) {
+  if (resolveTemplateName(block.template) === "content") return false;
+  const { title, contents } = block;
+  return !!title?.trim() || (contents?.length ?? 0) > 0;
+}
 function mermaidSources(block) {
   return (block.contents ?? []).filter(
     (node) => node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid"
@@ -11249,15 +12353,15 @@ function collectRichMediaItems(layers, block) {
     ...embeddedSpatialMedia(block)
   ];
 }
-function gridCells(region, count, viewport, inset) {
+function gridCells(region2, count, viewport, inset) {
   const unit = Math.min(viewport.width, viewport.height);
   const padding = inset ? unit * 0.025 : 0;
   const gap = count > 1 ? unit * 0.018 : 0;
   const inner = {
-    x: region.x + padding,
-    y: region.y + padding,
-    width: Math.max(0, region.width - padding * 2),
-    height: Math.max(0, region.height - padding * 2)
+    x: region2.x + padding,
+    y: region2.y + padding,
+    width: Math.max(0, region2.width - padding * 2),
+    height: Math.max(0, region2.height - padding * 2)
   };
   const columns2 = Math.min(
     count,
@@ -11407,7 +12511,42 @@ function applyEmbeddedVideoTiming(layers, block) {
     };
   });
 }
+function applyEmbeddedVideoEdits(layers, block) {
+  const editedBySrc = new Map(
+    extractEmbeddedVideos(block.contents).filter((video) => video.edits).map((video) => [video.src, video])
+  );
+  if (editedBySrc.size === 0) return layers;
+  return layers.map((layer) => {
+    if (layer.type !== "video") return layer;
+    const video = editedBySrc.get(layer.content.src);
+    if (!video?.edits) return layer;
+    const { fx, gain, fadeIn, fadeOut, crop } = video.edits;
+    const edits = {
+      ...fx ? { fx } : {},
+      ...gain ? { gain } : {},
+      ...fadeIn ? { fadeIn } : {},
+      ...fadeOut ? { fadeOut } : {},
+      ...crop ? { crop } : {}
+    };
+    const hasEdits = Object.keys(edits).length > 0;
+    const withEdits = (content) => hasEdits ? { ...layer, content: { ...content, edits } } : content === layer.content ? layer : { ...layer, content };
+    if (!video.cuts?.length) return withEdits(layer.content);
+    const { clipStart } = layer.content;
+    const clipEnd = video.clipEnd != null ? layer.content.clipEnd : createMediaTimeMap({ clipStart, cuts: video.cuts }).playedToSource(
+      Math.max(0, layer.content.clipEnd - clipStart)
+    );
+    const cuts = normalizeMediaCuts(video.cuts, clipStart, clipEnd);
+    if (cuts.length === 0) return withEdits(layer.content);
+    return withEdits({ ...layer.content, clipEnd, cuts });
+  });
+}
 function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRatios) {
+  return applyEmbeddedVideoEdits(
+    placeRichContentLayers(layers, block, theme, viewport, mediaAspectRatios),
+    block
+  );
+}
+function placeRichContentLayers(layers, block, theme, viewport, mediaAspectRatios) {
   const timedLayers = applyEmbeddedVideoTiming(layers, block);
   const items = collectRichMediaItems(timedLayers, block);
   if (items.length === 0) return timedLayers;
@@ -11631,6 +12770,30 @@ var TEMPLATE_METADATA = {
     label: "Layers",
     description: "Draws nested parts as concentric rings, innermost first, each one called out."
   },
+  stats: {
+    label: "Key Numbers",
+    description: "Sets two to six key figures side by side, each counting up over what it measures."
+  },
+  pyramid: {
+    label: "Pyramid",
+    description: "Stacks a hierarchy as a pyramid, the apex first and the base last."
+  },
+  funnel: {
+    label: "Funnel",
+    description: "Draws stages that narrow as a funnel, the widest first and the outcome last."
+  },
+  hub: {
+    label: "Hub",
+    description: "Arranges ideas around the one thing they share, each joined to it by a spoke."
+  },
+  venn: {
+    label: "Venn",
+    description: "Draws two sets as overlapping circles, with what they share in the overlap."
+  },
+  matrix: {
+    label: "Matrix",
+    description: "Places four ideas on two axes as a two-by-two grid."
+  },
   photoGrid: {
     label: "Photo Grid",
     description: "Arranges up to four photos in a mosaic grid."
@@ -11844,6 +13007,42 @@ var TEMPLATE_AUTHORING_METADATA = {
     safeForContentFirst: false,
     placement: "heading"
   },
+  stats: {
+    role: "highlight",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  pyramid: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  funnel: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  hub: {
+    role: "content",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  venn: {
+    role: "comparison",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  matrix: {
+    role: "comparison",
+    bodyPolicy: "derived",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
   photoGrid: {
     role: "media",
     bodyPolicy: "structured",
@@ -11960,12 +13159,217 @@ var TEMPLATE_AUTHORING_METADATA = {
   }
 };
 
+// src/transform/presentationPlan.ts
+var PRESENTATION_KEY = "squisq-presentation";
+var PRESENTATION_LAYOUTS = [
+  "title",
+  "divider",
+  "statement",
+  "emphasis",
+  "quote",
+  "stat",
+  "definition",
+  "list",
+  "comparison",
+  "steps",
+  "image",
+  "cards",
+  "process",
+  "cycle",
+  "layers",
+  "stats",
+  "pyramid",
+  "funnel",
+  "hub",
+  "venn",
+  "matrix"
+];
+var AUTHORED_PRESENTATION_LAYOUT = "authored";
+var EMPHASIS_CHARACTERS = 60;
+var spaced = (text2) => text2.replace(/\s+/gu, " ").trim();
+function presentationStat(headline, points2) {
+  for (const [index, line] of [headline, ...points2].entries()) {
+    const match = matchNumberHighlight(line);
+    if (match) return { match, line, index: index - 1 };
+  }
+  return null;
+}
+function presentationLayoutFits(layout, headline, points2, passage) {
+  return presentationLayoutProblem(layout, headline, points2, passage) === void 0;
+}
+function presentationLayoutProblem(layout, headline, points2, passage) {
+  const concept = conceptTemplate(layout);
+  if (concept) return conceptItemsProblem(concept, points2, { max: PRESENTATION_LIMITS.points });
+  switch (layout) {
+    case "list":
+    case "steps":
+      return points2.length >= 2 ? void 0 : `${layout} takes at least 2 points and this has ${points2.length}`;
+    case "comparison":
+      return points2.length === 2 ? void 0 : `comparison takes exactly 2 points and this has ${points2.length}`;
+    case "definition":
+      return points2.length >= 1 ? void 0 : "definition takes a point that defines its headline";
+    case "stat":
+      return presentationStat(headline, points2) !== null ? void 0 : "stat shows a prominent figure, such as 40% or $3 million, and neither the headline nor a point states one";
+    case "emphasis":
+      return headline.length <= EMPHASIS_CHARACTERS ? void 0 : `emphasis takes a headline of at most ${EMPHASIS_CHARACTERS} characters`;
+    case "quote":
+      return spaced(passage).includes(spaced(headline)) ? void 0 : "quote takes a headline copied word for word from the passage";
+    default:
+      return void 0;
+  }
+}
+function presentationLayoutNeeds(layout, wording = {}) {
+  const points2 = wording.points ?? "points";
+  const concept = conceptTemplate(layout);
+  if (concept) {
+    const count = `${conceptItemCount(concept, { max: PRESENTATION_LIMITS.points })} ${points2}`;
+    if (concept === "stats") return `${count}, each stating a figure`;
+    if (concept === "venn") return `${count}, one of them labelled "Both:"`;
+    return count;
+  }
+  switch (layout) {
+    case "list":
+    case "steps":
+      return `at least 2 ${points2}`;
+    case "comparison":
+      return `exactly 2 ${points2}`;
+    case "stat":
+      return "a prominent figure, such as 40% or $3 million";
+    case "emphasis":
+      return `a headline of ${EMPHASIS_CHARACTERS} characters or fewer`;
+    case "quote":
+      return "a sentence of 110 characters or fewer to quote";
+    case "image":
+      return "a picture";
+    default:
+      return void 0;
+  }
+}
+var BEAT_EXTRAS = ["center", "xAxis", "yAxis"];
+var LAYOUT_EXTRAS = {
+  hub: ["center"],
+  matrix: ["xAxis", "yAxis"]
+};
+function presentationBeatExtras(layout, source) {
+  const extras = {};
+  if (!record(source)) return extras;
+  for (const key of LAYOUT_EXTRAS[layout] ?? []) {
+    const value = source[key];
+    const clean = typeof value === "string" ? value.replace(/\s+/gu, " ").trim() : "";
+    if (clean && text(clean, PRESENTATION_LIMITS.extraCharacters)) extras[key] = clean;
+  }
+  return extras;
+}
+var PRESENTATION_LIMITS = {
+  sourceCharacters: 4e4,
+  beats: 80,
+  serializedCharacters: 16e4,
+  mediaPerBeat: 4,
+  /** The most points a summary slide holds. */
+  points: 4,
+  /** The longest a hub's centre or a matrix's axis name may be. */
+  extraCharacters: 40
+};
+function record(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function keys(value, required, optional = []) {
+  return required.every((key) => Object.prototype.hasOwnProperty.call(value, key)) && Object.keys(value).every((key) => required.includes(key) || optional.includes(key));
+}
+function text(value, max) {
+  return typeof value === "string" && value.trim().length > 0 && value.length <= max && !Array.from(value).some((character) => {
+    const code = character.charCodeAt(0);
+    return code < 32 && code !== 9 && code !== 10 && code !== 13;
+  });
+}
+function parsePresentationPlan(input) {
+  let value = input;
+  if (typeof value === "string") {
+    if (value.length > PRESENTATION_LIMITS.serializedCharacters) return null;
+    try {
+      value = JSON.parse(value);
+    } catch {
+      return null;
+    }
+  }
+  if (!record(value) || !keys(value, ["version", "sourceText", "origin", "beats"]) || value.version !== 1 || !text(value.sourceText, PRESENTATION_LIMITS.sourceCharacters) || typeof value.origin !== "string" || !["automatic", "ai"].includes(value.origin) || !Array.isArray(value.beats) || !value.beats.length || value.beats.length > PRESENTATION_LIMITS.beats)
+    return null;
+  const beats = [];
+  const ids = /* @__PURE__ */ new Set();
+  let end = 0;
+  for (const beat of value.beats) {
+    if (!record(beat) || !keys(
+      beat,
+      ["id", "sourceStart", "sourceEnd", "layout", "headline", "points"],
+      ["imageSrc", "media", "hidden", ...BEAT_EXTRAS]
+    ) || "hidden" in beat && beat.hidden !== true || !text(beat.id, 80) || ids.has(beat.id) || !Number.isInteger(beat.sourceStart) || !Number.isInteger(beat.sourceEnd) || typeof beat.sourceStart !== "number" || typeof beat.sourceEnd !== "number" || beat.sourceStart < end || beat.sourceEnd <= beat.sourceStart || beat.sourceEnd > value.sourceText.length || value.sourceText.slice(end, beat.sourceStart).trim() || !text(beat.headline, 110) || !Array.isArray(beat.points) || beat.points.length > PRESENTATION_LIMITS.points || !beat.points.every((point) => text(point, 180)))
+      return null;
+    const extras = presentationBeatExtras(String(beat.layout), beat);
+    if (BEAT_EXTRAS.some((key) => key in beat && beat[key] !== extras[key])) return null;
+    if (beat.layout === AUTHORED_PRESENTATION_LAYOUT) {
+      if (beat.points.length || "media" in beat) return null;
+    } else if (!PRESENTATION_LAYOUTS.includes(beat.layout) || !presentationLayoutFits(
+      beat.layout,
+      beat.headline,
+      beat.points,
+      value.sourceText.slice(beat.sourceStart, beat.sourceEnd)
+    ))
+      return null;
+    if (beat.layout === "image" ? !text(beat.imageSrc, 2048) : "imageSrc" in beat) return null;
+    if ("media" in beat && (!Array.isArray(beat.media) || !beat.media.length || beat.media.length > PRESENTATION_LIMITS.mediaPerBeat || new Set(beat.media).size !== beat.media.length || !beat.media.every((ref) => text(ref, 1100))))
+      return null;
+    ids.add(beat.id);
+    end = beat.sourceEnd;
+    beats.push({
+      id: beat.id,
+      sourceStart: beat.sourceStart,
+      sourceEnd: beat.sourceEnd,
+      layout: beat.layout,
+      headline: beat.headline,
+      points: [...beat.points],
+      ...beat.layout === "image" ? { imageSrc: beat.imageSrc } : {},
+      ..."media" in beat ? { media: [...beat.media] } : {},
+      ...beat.hidden === true ? { hidden: true } : {},
+      ...extras
+    });
+  }
+  if (value.sourceText.slice(end).trim()) return null;
+  return {
+    version: 1,
+    sourceText: value.sourceText,
+    origin: value.origin,
+    beats
+  };
+}
+function serializePresentationPlan(plan) {
+  const parsed = parsePresentationPlan(plan);
+  if (!parsed) throw new Error("The presentation plan is invalid.");
+  const result = JSON.stringify(parsed);
+  if (result.length > PRESENTATION_LIMITS.serializedCharacters)
+    throw new Error("The presentation plan is too large.");
+  return result;
+}
+
 // 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';
+function conceptFields(template, items) {
+  const spec = CONCEPT_SPECS[template];
+  const inputs = spec.inputs ?? [];
+  const form = spec.itemForm === "figure-caption" ? '"Figure: what it measures"' : '"Label: detail"';
+  return [
+    "title",
+    // What names the picture comes before its items; a switch comes after.
+    ...inputs.filter((input) => input.key !== "versus").map((input) => input.guide),
+    items ?? `items: [${form}, \u2026] ${conceptItemCount(template)}${spec.order ? ` ${spec.order}` : ""}`,
+    ...inputs.filter((input) => input.key === "versus").map((input) => input.guide),
+    CONCEPT_BUILD
+  ].join(", ");
+}
+var points = (template) => conceptItemCount(template, { max: PRESENTATION_LIMITS.points });
 var TEMPLATE_GUIDES = {
   imageWithCaption: {
     fields: "imageSrc, imageAlt, caption \u2264 90 chars, ambientMotion: zoomIn|zoomOut|panLeft|panRight",
@@ -12002,7 +13406,7 @@ var TEMPLATE_GUIDES = {
     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 }]",
+    fields: "title, nodeShape: 'pill', nodes: [{ id, label \u2264 3 words }] 3\u20136 nodes (no x or y: the diagram places them from the edges), edges: [{ source, target, label \u2264 3 words }]",
     use: "relationships the {source} describes"
   },
   list: {
@@ -12021,24 +13425,54 @@ var TEMPLATE_GUIDES = {
     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}`,
+    fields: conceptFields("cards"),
     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}`,
+    fields: conceptFields("process"),
     use: "ordered stages or dated events, drawn as numbered steps joined by arrows"
   },
   cycle: {
-    fields: `title, items: ["Label: detail", \u2026] 3\u20135, ${CONCEPT_BUILD}`,
+    fields: conceptFields("cycle"),
     use: "stages that repeat in a loop, drawn on a ring"
   },
   layers: {
-    fields: `title, items: ["Label: detail", \u2026] 3\u20135 innermost first, ${CONCEPT_BUILD}`,
+    fields: conceptFields("layers"),
     use: "parts nested inside one another, drawn as concentric rings"
+  },
+  stats: {
+    fields: conceptFields(
+      "stats",
+      `items: ["Figure: what it measures", \u2026] ${conceptItemCount("stats")} such as "40%: of trips made on foot"`
+    ),
+    use: "several key numbers the {source} states, side by side; each counts up"
+  },
+  pyramid: {
+    fields: conceptFields("pyramid"),
+    use: "a hierarchy, or levels that rest on one another, drawn as a pyramid"
+  },
+  funnel: {
+    fields: conceptFields("funnel"),
+    use: "stages that narrow from many to few, drawn as a funnel"
+  },
+  hub: {
+    fields: conceptFields("hub"),
+    use: "factors, causes or parts of the one thing `center` names, drawn around a hub"
+  },
+  venn: {
+    fields: conceptFields(
+      "venn",
+      'items: ["A: what only A has", "B: what only B has", "Both: what they share"]'
+    ),
+    use: "two things compared by what each has alone and what they share, drawn as overlapping circles"
+  },
+  matrix: {
+    fields: conceptFields("matrix"),
+    use: "four ideas placed on two axes, such as effort against impact"
   }
 };
-function guideText(text, wording = {}) {
-  return text.replace(/\{source\}/gu, wording.source ?? "source");
+function guideText(text2, wording = {}) {
+  return text2.replace(/\{source\}/gu, wording.source ?? "source");
 }
 function templateCatalog(entries, wording = {}) {
   return entries.map((entry) => {
@@ -12059,13 +13493,51 @@ var PRESENTATION_LAYOUT_GUIDE = {
   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"
+  cards: `${points("cards")} parallel ideas side by side, such as kinds, causes or features`,
+  process: `${points("process")} ordered stages or dated events, drawn as numbered steps joined by arrows`,
+  cycle: `${points("cycle")} stages that repeat in a loop, drawn on a ring`,
+  layers: `${points("layers")} parts nested inside one another, innermost first, such as a core and the layers around it, drawn as concentric rings`,
+  stats: `${points("stats")} key figures the passage states, each point the number itself, then a colon and what it measures, such as "40%: of trips made on foot" or "$3 million: raised"; they count up side by side`,
+  pyramid: `${points("pyramid")} levels of a hierarchy, the top first and the base last, drawn as a pyramid`,
+  funnel: `${points("funnel")} stages that narrow from many to few, the widest first, drawn as a funnel`,
+  hub: `${points("hub")} factors, causes or parts of one thing, drawn around a hub; add "center", that thing in 1\u20133 words`,
+  venn: `${points("venn")} points: two things compared, each "Name: what only it has", then "Both: what they share"; drawn as overlapping circles`,
+  matrix: `${points("matrix")} points placed on two axes, in reading order: top left, top right, bottom left, bottom right; add "xAxis" and "yAxis", what grows from left to right and from bottom to top`
 };
-var DRAWN = ["cards", "process", "cycle", "layers"];
-var NUMBERS = ["statHighlight", "comparisonBar", "columnChart", "barChart", "pieChart"];
+var PRESENTATION_LAYOUT_LABELS = {
+  title: { label: "Title", description: "Opens the deck or closes it." },
+  divider: { label: "Section break", description: "A new topic begins; only the headline." },
+  statement: { label: "Statement", description: "One idea under the headline." },
+  emphasis: { label: "Big statement", description: "One short takeaway in display type." },
+  quote: { label: "Quote", description: "One sentence in the passage\u2019s own words." },
+  stat: { label: "Key number", description: "One figure, large, beside what it means." },
+  definition: { label: "Definition", description: "A term and what it means." },
+  list: { label: "Points", description: "Two or three points side by side." },
+  comparison: { label: "Comparison", description: "Two sides set against each other." },
+  steps: { label: "Steps", description: "Ordered actions, numbered and joined by arrows." },
+  image: { label: "Picture", description: "A picture with the headline as its caption." },
+  cards: { label: "Cards", description: "Parallel ideas side by side." },
+  process: { label: "Process", description: "Ordered stages; dated ones draw as a timeline." },
+  cycle: { label: "Cycle", description: "Stages on a ring that comes back to its start." },
+  layers: { label: "Layers", description: "Nested parts as concentric rings." },
+  stats: { label: "Key numbers", description: "Several figures side by side, counting up." },
+  pyramid: { label: "Pyramid", description: "Levels of a hierarchy, the top first." },
+  funnel: { label: "Funnel", description: "Stages that narrow from many to few." },
+  hub: { label: "Hub", description: "Ideas around the one thing they share." },
+  venn: { label: "Venn", description: "Two sets and what they share." },
+  matrix: { label: "Matrix", description: "Four ideas on two axes." }
+};
+var DRAWN_CORE = ["cards", "process", "cycle", "layers"];
+var DRAWN_SHAPES = ["pyramid", "funnel", "hub", "venn", "matrix"];
+var DRAWN = [...DRAWN_CORE, ...DRAWN_SHAPES];
+var NUMBERS = [
+  "statHighlight",
+  "stats",
+  "comparisonBar",
+  "columnChart",
+  "barChart",
+  "pieChart"
+];
 var ACCENTED = [
   "factCard",
   "statHighlight",
@@ -12081,7 +13553,9 @@ var AUTHORING_TRICKS = [
   },
   {
     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.",
+    text: "Draw numbers as numbers: one striking quantity \u2192 statHighlight (it counts up); two to four key quantities in different units \u2192 stats; two quantities in one unit \u2192 comparisonBar; three or more values in one unit \u2192 a chart; three to seven dated events \u2192 timeline.",
+    summary: 'Draw numbers as numbers: when the passage turns on one figure choose "stat"; when it gives two to four key figures choose "stats" and start each point with its number, as in "40%: of trips made on foot".',
+    storyboard: 'Draw numbers as numbers: a passage that turns on one figure is a "stat"; one that gives two to four key figures is "stats".',
     templates: [...NUMBERS, "timeline"]
   },
   {
@@ -12092,8 +13566,16 @@ var AUTHORING_TRICKS = [
   {
     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
+    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_CORE.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.`,
+    storyboard: 'Draw ideas rather than list them: several parallel ideas are "cards", ordered stages or dated events a "process", a loop that comes back to its start a "cycle", and parts nested inside one another "layers".',
+    templates: DRAWN_CORE
+  },
+  {
+    id: "draw-shapes",
+    text: 'Some relationships have a shape of their own: a hierarchy or levels that rest on one another \u2192 pyramid (top first); stages that narrow from many to few \u2192 funnel (widest first); factors, causes or parts of one thing \u2192 hub, with that thing as `center`; two things and what they share \u2192 venn, its last item "Both: \u2026"; four ideas on two axes \u2192 matrix. Choose one only when the {source} states that relationship; a shape the ideas do not have misleads.',
+    summary: 'Some relationships have a shape of their own: a hierarchy \u2192 "pyramid", stages that narrow from many to few \u2192 "funnel", factors or causes of one thing \u2192 "hub", two things and what they share \u2192 "venn" (its third point "Both: \u2026"), four ideas on two axes \u2192 "matrix". Choose one only when the passage states that relationship; a shape the ideas do not have misleads.',
+    storyboard: 'Some relationships have a shape of their own: a hierarchy is a "pyramid", stages that narrow from many to few a "funnel", factors or causes of one thing a "hub", two things and what they share a "venn", and four ideas on two axes a "matrix". Choose one only when the passage states that relationship.',
+    templates: DRAWN_SHAPES
   },
   {
     id: "reveal-as-spoken",
@@ -12117,7 +13599,8 @@ var AUTHORING_TRICKS = [
   },
   {
     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."
+    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.",
+    storyboard: "Vary the deck: no layout on more than a third of the slides, and no two neighbouring slides alike when another layout fits as well."
   }
 ];
 function authoringTricks(options = {}) {
@@ -12126,8 +13609,8 @@ function authoringTricks(options = {}) {
   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)] : [];
+    const text2 = options.surface === "summary" ? trick.summary : options.surface === "storyboard" ? trick.storyboard : trick.text;
+    return text2 ? [guideText(text2, options.wording)] : [];
   });
 }
 
@@ -12157,10 +13640,10 @@ function coverScrimGradient(background) {
   const stops = COVER_SCRIM_STOPS.map((s) => `${withAlpha(background, s.alpha)} ${s.pos}%`);
   return `linear-gradient(0deg, ${stops.join(", ")})`;
 }
-function fitFrostedText(text, size, minSize, maxPlateWidth, maxLines) {
+function fitFrostedText(text2, size, minSize, maxPlateWidth, maxLines) {
   const wrapAt = (s) => {
     const column = maxPlateWidth - 2 * FROSTED_PAD_X_EM * s;
-    const lines = text.split("\n").flatMap((line) => balancedDisplayLines(line, s, column));
+    const lines = text2.split("\n").flatMap((line) => balancedDisplayLines(line, s, column));
     const width = Math.max(...lines.map((line) => estimateDisplayTextWidth(line, s)));
     return { lines, width, column };
   };
@@ -12658,6 +14141,166 @@ function expandCoverBlock(config, context, template = "cover") {
   return coverBlock(input, context);
 }
 
+// src/doc/templates/markdownShapeGuide.ts
+var MARKDOWN_SHAPE_EXAMPLES = [
+  {
+    template: "process",
+    cue: "a numbered list",
+    brief: ["a numbered list", "steps"],
+    drawn: "numbered steps joined by arrows",
+    heading: "How a release ships",
+    ordered: true,
+    items: ["Draft the release notes", "Tag and test the build", "Roll out to everyone"]
+  },
+  {
+    template: "cards",
+    cue: "items written `Label: detail`",
+    brief: ["`Label: detail` items", "cards"],
+    drawn: "cards side by side",
+    heading: "Three choices for next quarter",
+    items: [
+      "Fund: redesign permissions setup",
+      "Protect: keep the activation gains",
+      "Defer: advanced mobile editing"
+    ]
+  },
+  {
+    template: "stats",
+    cue: "items written `Figure: what it measures`",
+    brief: ["`Figure: what it measures` items", "key numbers"],
+    drawn: "key numbers that count up",
+    heading: "The quarter in numbers",
+    items: ["18,420: active teams", "71%: weekly retained teams", "$3.8M: expansion revenue"]
+  },
+  {
+    template: "process",
+    cue: "items that open with dates in order",
+    brief: ["items that open with dates", "a timeline"],
+    drawn: "a timeline",
+    heading: "Our story",
+    items: [
+      "2016: founded in a Portland garage",
+      "2018: first product ships",
+      "2022: Berlin office opens"
+    ]
+  },
+  {
+    template: "cycle",
+    cue: "a heading that says cycle or loop",
+    brief: ["a cycle or loop heading", "a ring"],
+    drawn: "stages on a ring",
+    heading: "The water cycle",
+    items: [
+      "Evaporation: the sun lifts water from the sea",
+      "Condensation: vapour cools into cloud",
+      "Precipitation: rain and snow fall"
+    ]
+  },
+  {
+    template: "layers",
+    cue: "a heading that says layers or anatomy, with the innermost item first",
+    brief: ["a layers or anatomy heading (innermost first)", "rings"],
+    drawn: "concentric rings",
+    heading: "Layers of the Earth",
+    items: [
+      "Inner core: solid iron",
+      "Outer core: liquid iron",
+      "Mantle: slowly flowing rock",
+      "Crust: the thin outer layer"
+    ]
+  },
+  {
+    template: "pyramid",
+    cue: "a heading that says hierarchy, pyramid, tiers or chain of command, with the top item first",
+    brief: ["a hierarchy or pyramid heading (top first)", "a pyramid"],
+    drawn: "a pyramid",
+    heading: "The chain of command",
+    items: [
+      "Chief executive: sets the direction",
+      "Vice presidents: turn it into plans",
+      "Team leads: run the daily work",
+      "Engineers: build the product"
+    ]
+  },
+  {
+    template: "funnel",
+    cue: "a heading that says funnel or conversion, with the widest item first",
+    brief: ["a funnel or conversion heading (widest first)", "a funnel"],
+    drawn: "a funnel",
+    heading: "The sign-up funnel",
+    items: ["48,000: visit the site", "6,200: start a trial", "640: become customers"]
+  },
+  {
+    template: "hub",
+    cue: "a heading that names factors, causes, drivers or pillars over `Label: detail` items",
+    brief: ["a factors, causes or drivers heading", "a hub"],
+    drawn: "ideas around a hub",
+    heading: "Three factors behind every delay",
+    items: [
+      "Scope: requirements keep changing",
+      "Staffing: too few senior engineers",
+      "Funding: released two months late"
+    ],
+    inputs: { center: "Delays" }
+  },
+  {
+    template: "venn",
+    cue: "two `Name: \u2026` items and a third `Both: \u2026`",
+    brief: ["two items and a `Both: \u2026` item", "a Venn diagram"],
+    drawn: "a Venn diagram",
+    heading: "Designers and engineers",
+    items: [
+      "Designers: research and the interface",
+      "Engineers: architecture and the code",
+      "Both: accessibility and testing"
+    ]
+  },
+  {
+    template: "matrix",
+    cue: "exactly four items under a heading that says matrix or quadrants (top left, top right, bottom left, bottom right)",
+    brief: ["four items under a matrix or quadrants heading", "a two-by-two"],
+    drawn: "a two-by-two",
+    heading: "The effort and impact matrix",
+    items: [
+      "Quick wins: little effort, high impact",
+      "Big bets: high effort, high impact",
+      "Fill-ins: little effort, low impact",
+      "Time sinks: high effort, low impact"
+    ],
+    inputs: { xAxis: "Effort", yAxis: "Impact" }
+  },
+  {
+    template: "cards",
+    cue: "two items under an `A vs B` heading",
+    brief: ["two items under an `A vs B` heading", "two panels"],
+    drawn: "two panels set against each other",
+    heading: "Self-hosting vs a managed service",
+    items: ["Self-hosting: costs less, needs an engineer", "Managed: costs more, includes backups"]
+  }
+];
+function markdownShapeExample(template, options = {}) {
+  const example = MARKDOWN_SHAPE_EXAMPLES.find((entry) => entry.template === template);
+  const hashes = "#".repeat(Math.min(6, Math.max(1, options.headingLevel ?? 2)));
+  const inputs = Object.entries(example.inputs ?? {}).map(([key, value]) => ` ${key}="${value}"`).join("");
+  return [
+    `${hashes} ${example.heading} {[${template}${inputs}]}`,
+    "",
+    ...example.items.map((item, index) => `${example.ordered ? `${index + 1}.` : "-"} ${item}`)
+  ].join("\n");
+}
+function markdownShapeGuide() {
+  return [
+    "A section whose body is one list of 2\u20136 short items is drawn as a picture of how they relate, with no annotation. What decides the picture:",
+    ...MARKDOWN_SHAPE_EXAMPLES.map((example) => `- ${example.cue} \u2192 ${example.drawn}`),
+    `To choose a picture yourself, annotate the heading: \`## Title {[funnel]}\`. A hub takes \`center="\u2026"\` (1\u20133 words) and a matrix \`xAxis="\u2026" yAxis="\u2026"\`; a venn is exactly two sets and one \`Both: \u2026\` item, and a matrix ${conceptItemCount("matrix")} items.`,
+    "Only a list that is the whole body is drawn: a paragraph beside it, a link, an image or a seventh item keeps the section as written. Put an introduction in the heading or on the slide before. Name a shape only when the items really have it; a plain list is better than a misleading drawing."
+  ];
+}
+function markdownShapeSummary() {
+  const rules = MARKDOWN_SHAPE_EXAMPLES.map(({ brief }) => `${brief[0]} \u2192 ${brief[1]}`).join("; ");
+  return `A section whose body is one list of 2\u20136 short items is drawn as a picture of how they relate, with no annotation: ${rules}. Only a list that is the whole body is drawn, so keep any introduction in the heading or on the slide before; to choose a picture yourself, annotate the heading (\`# Title {[funnel]}\`).`;
+}
+
 // src/doc/templates/index.ts
 function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme, viewport, persistentLayers, expandedPersistentLayers, registry, failureMode, onDiagnostic, motion, mediaAspectRatios) {
   const materialized = materializeBlockLayersWithRuntime(
@@ -12684,7 +14327,11 @@ function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme,
     audioSegment: sourceBlock.audioSegment,
     ...materialized.layers.length > 0 ? { layers: materialized.layers } : {},
     transition: sourceBlock.transition,
-    template: sourceBlock.template,
+    // A block its template could not draw was drawn as content. Name what
+    // drew it, so renderers size its text as a content slide's: they skip
+    // grow-to-fit by template name, and "comparisonBar" would keep a
+    // paragraph at chart-label size.
+    template: materialized.diagnostic?.code === "template-drew-nothing" ? "content" : sourceBlock.template,
     build: sourceBlock.build,
     buildTiming: sourceBlock.buildTiming,
     buildSource: sourceBlock.buildSource,
@@ -12896,11 +14543,12 @@ function expandDocBlocks(blocks, options = {}) {
       }
     }
     const MIN_TRANSITION_GAP = 5;
+    const GAP_TOLERANCE = 1e-3;
     const segmentEnd = audioSegment.startTime + audioSegment.duration;
     while (segmentExpandedBlocks.length > 1) {
       const lastBlock = segmentExpandedBlocks[segmentExpandedBlocks.length - 1];
       const timeFromLastToEnd = segmentEnd - lastBlock.startTime;
-      if (mergeShortBlocks && timeFromLastToEnd < MIN_TRANSITION_GAP && lastBlock.template !== "sectionHeader") {
+      if (mergeShortBlocks && timeFromLastToEnd < MIN_TRANSITION_GAP - GAP_TOLERANCE && lastBlock.template !== "sectionHeader") {
         const prevBlock = segmentExpandedBlocks[segmentExpandedBlocks.length - 2];
         prevBlock.duration = segmentEnd - prevBlock.startTime;
         lastBlock.duration = 0;
@@ -12924,7 +14572,7 @@ function expandDocBlocks(blocks, options = {}) {
       changed = false;
       for (let i = segmentExpandedBlocks.length - 1; i >= 1; i--) {
         const block = segmentExpandedBlocks[i];
-        if (block.duration > 0 && block.duration < MIN_TRANSITION_GAP) {
+        if (block.duration > 0 && block.duration < MIN_TRANSITION_GAP - GAP_TOLERANCE) {
           const prev = segmentExpandedBlocks[i - 1];
           const blockEnd = block.startTime + block.duration;
           prev.duration = blockEnd - prev.startTime;
@@ -12943,7 +14591,7 @@ function expandDocBlocks(blocks, options = {}) {
         if (block.duration > MAX_BLOCK_DURATION) {
           const numParts = Math.ceil(block.duration / MAX_BLOCK_DURATION);
           const partDuration = block.duration / numParts;
-          if (partDuration >= MIN_TRANSITION_GAP) {
+          if (partDuration >= MIN_TRANSITION_GAP - GAP_TOLERANCE) {
             block.duration = partDuration;
             const parts = [];
             for (let p = 1; p < numParts; p++) {
@@ -13112,20 +14760,78 @@ function detectPromotableBodyAnnotation(contents) {
   return { data, strippedContents };
 }
 
+// src/doc/videoTiming.ts
+function clipEndsWithBlock(clip) {
+  return clip.kind === "video" && clip.anchor === "block" && clip.spillover !== true && clip.lockToBlock !== false;
+}
+function blockVideos(block) {
+  const body = extractEmbeddedVideos(block.contents).map((video) => ({
+    src: video.src,
+    startAt: video.startAt,
+    clipStart: video.clipStart,
+    clipEnd: video.clipEnd,
+    cuts: video.cuts
+  }));
+  const clips = (block.media ?? []).filter(clipEndsWithBlock).map((clip) => ({
+    src: clip.src,
+    startAt: clip.startAt,
+    clipStart: clip.clipStart,
+    clipEnd: clip.clipEnd,
+    cuts: clip.edits?.cuts
+  }));
+  return [...body, ...clips];
+}
+function knownLength(seconds) {
+  return seconds != null && Number.isFinite(seconds) && seconds > 0 ? seconds : void 0;
+}
+function videoEnd(video, lookup) {
+  const sourceDuration = knownLength(lookup?.(video.src));
+  if (video.clipEnd == null && sourceDuration == null) return null;
+  const played = createMediaTimeMap({
+    clipStart: video.clipStart,
+    clipEnd: video.clipEnd,
+    cuts: video.cuts,
+    sourceDuration
+  }).playedDuration;
+  if (!Number.isFinite(played) || played <= 0) return null;
+  return Math.max(0, video.startAt ?? 0) + played;
+}
+function blockVideoLength(block, lookup) {
+  let longest = null;
+  for (const video of blockVideos(block)) {
+    const end = videoEnd(video, lookup);
+    if (end != null && (longest == null || end > longest)) longest = end;
+  }
+  return longest;
+}
+function collectVideoDurationSources(doc) {
+  const sources = /* @__PURE__ */ new Set();
+  const visit = (blocks) => {
+    for (const block of blocks) {
+      for (const video of blockVideos(block)) {
+        if (video.clipEnd == null && video.src) sources.add(video.src);
+      }
+      if (block.children?.length) visit(block.children);
+    }
+  };
+  visit(doc.blocks);
+  return [...sources];
+}
+
 // src/doc/markdownToDoc.ts
 var SLUG_NON_WORD_RE = /[^\w\s-]/g;
 var SLUG_SPACES_RE = /[\s_]+/g;
 var SLUG_MULTI_HYPHEN_RE = /-+/g;
 var SLUG_TRIM_HYPHEN_RE = /^-|-$/g;
-function slugify(text) {
-  return text.toLowerCase().replace(SLUG_NON_WORD_RE, "").replace(SLUG_SPACES_RE, "-").replace(SLUG_MULTI_HYPHEN_RE, "-").replace(SLUG_TRIM_HYPHEN_RE, "") || // Trim leading/trailing hyphens
+function slugify(text2) {
+  return text2.toLowerCase().replace(SLUG_NON_WORD_RE, "").replace(SLUG_SPACES_RE, "-").replace(SLUG_MULTI_HYPHEN_RE, "-").replace(SLUG_TRIM_HYPHEN_RE, "") || // Trim leading/trailing hyphens
   "block";
 }
 function createIdGenerator() {
   const used = /* @__PURE__ */ new Map();
   const generate = (heading, _index) => {
-    const text = extractPlainText(heading);
-    const base = slugify(text);
+    const text2 = extractPlainText(heading);
+    const base = slugify(text2);
     const count = used.get(base) ?? 0;
     used.set(base, count + 1);
     if (count === 0) return base;
@@ -13134,8 +14840,8 @@ function createIdGenerator() {
   generate.reserve = (id) => {
     used.set(id, Math.max(used.get(id) ?? 0, 1));
   };
-  generate.fromText = (text) => {
-    const base = slugify(text);
+  generate.fromText = (text2) => {
+    const base = slugify(text2);
     const count = used.get(base) ?? 0;
     used.set(base, count + 1);
     return count === 0 ? base : `${base}-${count + 1}`;
@@ -13340,10 +15046,15 @@ function markdownToDoc(markdownDoc, options) {
     applyTimelineData(block, diagnostics);
     applyTreeData(block, diagnostics);
   }
-  if ((options?.autoTemplates ?? true) && !frontmatterDisablesAutoTemplates(markdownDoc)) {
-    applyAutoTemplates(rootBlocks, resolveTemplateName(defaultTemplate), { featureIndex: 0 });
+  const autoLevel = frontmatterAutoTemplates(markdownDoc, options?.autoTemplates ?? true);
+  if (autoLevel) {
+    applyAutoTemplates(rootBlocks, resolveTemplateName(defaultTemplate), {
+      featureIndex: 0,
+      concepts: autoLevel !== "structural"
+    });
   }
   for (const block of allBlocks) collectTimelineWarnings(block, diagnostics);
+  for (const block of allBlocks) collectShapeWarning(block, diagnostics);
   const seenIds = /* @__PURE__ */ new Map();
   for (const block of allBlocks) {
     if (seenIds.has(block.id)) {
@@ -13372,46 +15083,13 @@ function markdownToDoc(markdownDoc, options) {
     }
   }
   const minDuration = 3;
-  const phrases = [];
   for (const block of allBlocks) {
     if (pinnedMeta(block).duration != null) continue;
     const bodyText3 = getBlockBodyText2(block);
-    if (bodyText3.length > 0) {
-      const estimate = estimateReadingTime(bodyText3);
-      block.duration = Math.max(minDuration, estimate.seconds);
-    } else {
-      block.duration = defaultDuration;
-    }
-  }
-  let currentTime = 0;
-  for (const block of allBlocks) {
-    const explicitStart = pinnedMeta(block).startTime;
-    if (explicitStart == null) {
-      block.startTime = currentTime;
-    }
-    const bodyText3 = getBlockBodyText2(block);
-    if (bodyText3.length > 0) {
-      const sentences = splitIntoSentences(bodyText3);
-      if (sentences.length > 0) {
-        const timePerSentence = block.duration / sentences.length;
-        for (let i = 0; i < sentences.length; i++) {
-          phrases.push({
-            text: sentences[i],
-            startTime: currentTime + i * timePerSentence,
-            endTime: currentTime + (i + 1) * timePerSentence,
-            audioSegment: 0
-          });
-        }
-      }
-    }
-    currentTime += block.duration;
-  }
-  const blockById = new Map(allBlocks.map((block) => [block.id, block]));
-  for (const clip of documentMedia) {
-    if (clip.lockToBlock === false && clip.origin?.format === "html" && !/\bdata-squisq-video-start-at\s*=/i.test(clip.origin.raw ?? "")) {
-      clip.startAt = blockById.get(clip.origin.blockId)?.startTime ?? 0;
-    }
+    const estimate = bodyText3.length > 0 ? Math.max(minDuration, estimateReadingTime(bodyText3).seconds) : defaultDuration;
+    block.duration = Math.max(estimate, blockVideoLength(block) ?? 0);
   }
+  const { phrases, duration: totalDuration } = sequenceBlockTimeline(allBlocks, documentMedia);
   const captions = phrases.length > 0 ? {
     phrases,
     ...options?.captionsGeneratedAt ? { generatedAt: options.captionsGeneratedAt } : {},
@@ -13423,7 +15101,7 @@ function markdownToDoc(markdownDoc, options) {
   const motion = readFrontmatterMotion(markdownDoc.frontmatter);
   const doc = {
     articleId,
-    duration: currentTime,
+    duration: totalDuration,
     blocks: rootBlocks,
     audio: {
       segments: []
@@ -13445,6 +15123,64 @@ function markdownToDoc(markdownDoc, options) {
   }
   return doc;
 }
+function sequenceBlockTimeline(blocks, documentMedia) {
+  const phrases = [];
+  let currentTime = 0;
+  for (const block of blocks) {
+    const explicitStart = pinnedMeta(block).startTime;
+    if (explicitStart == null) {
+      block.startTime = currentTime;
+    }
+    const bodyText3 = getBlockBodyText2(block);
+    if (bodyText3.length > 0) {
+      const sentences = splitIntoSentences(bodyText3);
+      if (sentences.length > 0) {
+        const timePerSentence = block.duration / sentences.length;
+        for (let i = 0; i < sentences.length; i++) {
+          phrases.push({
+            text: sentences[i],
+            startTime: currentTime + i * timePerSentence,
+            endTime: currentTime + (i + 1) * timePerSentence,
+            audioSegment: 0
+          });
+        }
+      }
+    }
+    currentTime += block.duration;
+  }
+  const blockById = new Map(blocks.map((block) => [block.id, block]));
+  for (const clip of documentMedia) {
+    if (clip.lockToBlock === false && clip.origin?.format === "html" && !/\bdata-squisq-video-start-at\s*=/i.test(clip.origin.raw ?? "")) {
+      clip.startAt = blockById.get(clip.origin.blockId)?.startTime ?? 0;
+    }
+  }
+  return { phrases, duration: currentTime };
+}
+var VIDEO_FLOOR_EPSILON = 1e-3;
+function applyVideoDurations(doc, lookup) {
+  const grownBy = /* @__PURE__ */ new Map();
+  for (const block of flattenBlocks(doc.blocks)) {
+    if (pinnedMeta(block).duration != null) continue;
+    const floor = blockVideoLength(block, lookup);
+    if (floor != null && floor > block.duration + VIDEO_FLOOR_EPSILON) grownBy.set(block, floor);
+  }
+  if (grownBy.size === 0) return doc;
+  const copy = (blocks2) => blocks2.map((block) => ({
+    ...block,
+    ...grownBy.has(block) ? { duration: grownBy.get(block) } : {},
+    ...block.children ? { children: copy(block.children) } : {}
+  }));
+  const blocks = copy(doc.blocks);
+  const documentMedia = doc.documentMedia?.map((clip) => ({ ...clip }));
+  const { phrases, duration } = sequenceBlockTimeline(flattenBlocks(blocks), documentMedia ?? []);
+  return {
+    ...doc,
+    blocks,
+    duration,
+    ...doc.captions ? { captions: { ...doc.captions, phrases } } : {},
+    ...documentMedia ? { documentMedia } : {}
+  };
+}
 function flattenBlocks(blocks) {
   const result = [];
   for (const block of blocks) {
@@ -13561,6 +15297,23 @@ function applyTimelineData(block, diagnostics) {
   }
   block.templateData = { ...derived, ...block.templateData };
 }
+function collectShapeWarning(block, diagnostics) {
+  if (!block.sourceHeading?.templateAnnotation?.template && !block.promotedBodyAnnotation) return;
+  const template = conceptTemplate(resolveTemplateName(block.template ?? ""));
+  if (!template) return;
+  const given = block.templateData?.items;
+  const items = Array.isArray(given) ? given : extractConceptItems(block.contents);
+  if (!items.length) return;
+  const downgrade = conceptDowngrade(template, items);
+  if (!downgrade) return;
+  diagnostics.push({
+    severity: "warning",
+    code: "template-shape-unmet",
+    message: `Block "${block.id}" asks for ${template} but is drawn as ${downgrade.drawsAs === "list" ? "a list" : downgrade.drawsAs}: ${downgrade.reason}`,
+    blockId: block.id,
+    ...lineOf(block)
+  });
+}
 function collectTimelineWarnings(block, diagnostics) {
   if (resolveTemplateName(block.template ?? "") !== "timeline") return;
   if (!block.templateData || !("tracks" in block.templateData)) return;
@@ -13578,20 +15331,26 @@ function collectTimelineWarnings(block, diagnostics) {
     });
   }
 }
-function frontmatterDisablesAutoTemplates(markdownDoc) {
+function frontmatterAutoTemplates(markdownDoc, option) {
+  if (!option) return false;
   const v = markdownDoc.frontmatter?.["squisq-auto-templates"];
-  return v === false || v === "false" || v === "off" || v === "no" || v === 0;
+  if (v === false || v === "false" || v === "off" || v === "no" || v === 0) return false;
+  if (v === "structural" || v === "basic") return "structural";
+  return option;
 }
 function applyAutoTemplates(blocks, resolvedDefault, state) {
   for (const block of blocks) {
     const annotated = !!block.sourceHeading?.templateAnnotation?.template || !!block.promotedBodyAnnotation;
     if (block.sourceHeading && !annotated && block.template === resolvedDefault) {
-      const profile = profileBlockContents(block.contents ?? []);
-      const picked = pickAutoTemplate(profile, state.featureIndex);
+      const profile = profileBlockContents(block.contents ?? [], { heading: block.title });
+      let picked = pickAutoTemplate(profile, state.featureIndex, { concepts: state.concepts });
+      const drawn = !!picked && picked !== "list" && profile.listShape?.template === picked;
+      if (drawn && !autoTemplatePreservesContent(picked, block.contents)) picked = "list";
       if (picked && autoTemplatePreservesContent(picked, block.contents)) {
-        const inputs = deriveTemplateInputs(picked, block.title ?? "", block.contents, {
+        const derived = deriveTemplateInputs(picked, block.title ?? "", block.contents, {
           preserveSourceHeading: true
         });
+        const inputs = derived && drawn && picked !== "list" ? { ...derived, ...profile.listShape?.inputs } : derived;
         if (inputs) {
           if (picked === "leftFeature" || picked === "rightFeature") state.featureIndex += 1;
           block.template = picked;
@@ -13612,8 +15371,8 @@ function getBlockBodyText2(block) {
   return block.contents.filter((node) => !(consumedFence && node.type === "code")).filter((node) => !isMaterializedMediaNode(node)).map((node) => extractPlainText(node)).join("\n").trim();
 }
 var MAX_PHRASE_WORDS = 12;
-function splitIntoSentences(text) {
-  const lines = text.split(/\n+/).map((s) => s.trim()).filter((s) => s.length > 0);
+function splitIntoSentences(text2) {
+  const lines = text2.split(/\n+/).map((s) => s.trim()).filter((s) => s.length > 0);
   const sentenceRe = /(?<=[.!?])\s+/;
   const fragments = [];
   for (const line of lines) {
@@ -13785,12 +15544,12 @@ function buildNarrationScript(doc, options) {
   const separator = options?.blockSeparator ?? "\n\n";
   const pieces = [];
   for (const block of flattenRenderableBlocks(doc.blocks)) {
-    const text = blockSpokenText(block, includeTitles);
-    if (!text) continue;
+    const text2 = blockSpokenText(block, includeTitles);
+    if (!text2) continue;
     pieces.push({
       blockId: block.id,
       heading: block.title || void 0,
-      text
+      text: text2
     });
   }
   let sourceText = "";
@@ -13831,20 +15590,20 @@ function buildNarrationScript(doc, options) {
       spoken
     });
   }
-  for (const range of blocks) {
-    range.tokenStart = tokens.length;
-    range.tokenEnd = 0;
+  for (const range2 of blocks) {
+    range2.tokenStart = tokens.length;
+    range2.tokenEnd = 0;
   }
   for (let i = 0; i < tokens.length; i++) {
-    const range = blocks[tokens[i].blockIndex];
-    if (range) {
-      if (i < range.tokenStart) range.tokenStart = i;
-      range.tokenEnd = i + 1;
+    const range2 = blocks[tokens[i].blockIndex];
+    if (range2) {
+      if (i < range2.tokenStart) range2.tokenStart = i;
+      range2.tokenEnd = i + 1;
     }
   }
-  for (const range of blocks) {
-    if (range.tokenStart > range.tokenEnd) {
-      range.tokenStart = range.tokenEnd;
+  for (const range2 of blocks) {
+    if (range2.tokenStart > range2.tokenEnd) {
+      range2.tokenStart = range2.tokenEnd;
     }
   }
   for (let i = 0; i < tokens.length; i++) {
@@ -13943,9 +15702,9 @@ function planContentBuilds(nodes, spec) {
   const steps = [];
   const targets = /* @__PURE__ */ new Map();
   if (!spec || spec.mode === "off") return { steps, targets };
-  const add = (node, text, ancestors) => {
+  const add = (node, text2, ancestors) => {
     const index = steps.length;
-    steps.push({ id: `build-${index}`, text, ...ancestors.length ? { ancestors } : {} });
+    steps.push({ id: `build-${index}`, text: text2, ...ancestors.length ? { ancestors } : {} });
     targets.set(node, index);
     return index;
   };
@@ -14067,26 +15826,26 @@ function resolveDocBuildTiming(doc, blocks) {
       });
       return { ...block, buildTiming: { sourceText: buildSourceText(steps), starts: starts2 } };
     }
-    const range = script?.blocks.find(
-      (range2) => range2.blockId === (block.sourceBlockId ?? block.id)
+    const range2 = script?.blocks.find(
+      (range3) => range3.blockId === (block.sourceBlockId ?? block.id)
     );
-    const original = range ? flattenRenderableBlocks(doc.blocks).find((source2) => source2.id === range.blockId) : void 0;
+    const original = range2 ? flattenRenderableBlocks(doc.blocks).find((source2) => source2.id === range2.blockId) : void 0;
     const body = original ? getBlockBodyText2(original) : "";
-    const charStart = range ? body ? range.charEnd - body.length : range.charStart : 0;
-    const source = block.buildSource ?? (range ? { text: narration.sourceText.slice(charStart, range.charEnd), charStart } : void 0);
+    const charStart = range2 ? body ? range2.charEnd - body.length : range2.charStart : 0;
+    const source = block.buildSource ?? (range2 ? { text: narration.sourceText.slice(charStart, range2.charEnd), charStart } : void 0);
     if (!source) return block;
     let cursor = 0;
     const starts = [];
     for (const step2 of steps) {
-      const text = step2.text.trim();
-      const offset = text ? source.text.indexOf(text, cursor) : -1;
+      const text2 = step2.text.trim();
+      const offset = text2 ? source.text.indexOf(text2, cursor) : -1;
       if (offset < 0) return block;
       const word = narration.bookmarks.find(
-        (word2) => word2.charOffset >= source.charStart + offset && word2.charOffset < source.charStart + offset + text.length
+        (word2) => word2.charOffset >= source.charStart + offset && word2.charOffset < source.charStart + offset + text2.length
       );
       if (!word) return block;
       starts.push(Math.max(0, word.time - block.startTime));
-      cursor = offset + text.length;
+      cursor = offset + text2.length;
     }
     return { ...block, buildTiming: { sourceText: buildSourceText(steps), starts } };
   });
@@ -14109,10 +15868,16 @@ function listParagraphs(list, level = 0) {
   const ordered = Boolean(list.ordered);
   return list.children.flatMap((item, index) => {
     const ownText = item.children.filter((node) => node.type !== "list").map((node) => extractPlainText(node).trim()).filter(Boolean).join(" ");
+    const checked = typeof item.checked === "boolean" ? { checked: item.checked } : {};
     const paragraphs = ownText ? [
       {
         text: ownText,
-        list: { ordered, level, ...ordered ? { number: (list.start ?? 1) + index } : {} }
+        list: {
+          ordered,
+          level,
+          ...ordered ? { number: (list.start ?? 1) + index } : {},
+          ...checked
+        }
       }
     ] : [];
     for (const child of item.children) {
@@ -14121,10 +15886,10 @@ function listParagraphs(list, level = 0) {
     return paragraphs;
   });
 }
-function plainParagraphText({ text, list }) {
-  if (!list) return text;
-  const marker = list.ordered ? `${list.number ?? 1}.` : "\u2022";
-  return `${"  ".repeat(list.level)}${marker} ${text}`;
+function plainParagraphText({ text: text2, list }) {
+  if (!list) return text2;
+  const marker = list.checked !== void 0 ? taskMarker(list.checked) : list.ordered ? `${list.number ?? 1}.` : "\u2022";
+  return `${"  ".repeat(list.level)}${marker} ${text2}`;
 }
 function completeBodyParagraphs(nodes) {
   const paragraphs = nodes.flatMap((node, index) => {
@@ -14245,7 +16010,15 @@ export {
   countUpSpecFor,
   formatCountValue,
   formatCountUp,
-  splitConceptItem,
+  listBlock,
+  CONCEPT_TEMPLATES,
+  CONCEPT_MAX_DRAWN,
+  CONCEPT_SPECS,
+  conceptTemplate,
+  conceptItemCount,
+  conceptItemsProblem,
+  conceptDowngrade,
+  conceptDrawsAs,
   conceptBuildStepTexts,
   cardsBlock,
   processBlock,
@@ -14264,7 +16037,12 @@ export {
   mediaOnly,
   mapBlock,
   fullBleedQuote,
-  listBlock,
+  statsBlock,
+  pyramidBlock,
+  funnelBlock,
+  hubBlock,
+  vennBlock,
+  matrixBlock,
   photoGrid,
   definitionCard,
   comparisonBar,
@@ -14314,20 +16092,39 @@ export {
   materializeBlockLayersWithRuntime,
   TEMPLATE_METADATA,
   TEMPLATE_AUTHORING_METADATA,
+  PRESENTATION_KEY,
+  PRESENTATION_LAYOUTS,
+  AUTHORED_PRESENTATION_LAYOUT,
+  presentationStat,
+  presentationLayoutFits,
+  presentationLayoutProblem,
+  presentationLayoutNeeds,
+  presentationBeatExtras,
+  PRESENTATION_LIMITS,
+  parsePresentationPlan,
+  serializePresentationPlan,
   TEMPLATE_GUIDES,
   guideText,
   templateCatalog,
   PRESENTATION_LAYOUT_GUIDE,
+  PRESENTATION_LAYOUT_LABELS,
   AUTHORING_TRICKS,
   authoringTricks,
   coverBlock,
   expandCoverBlock,
+  MARKDOWN_SHAPE_EXAMPLES,
+  markdownShapeExample,
+  markdownShapeGuide,
+  markdownShapeSummary,
   expandDocBlocks,
   getAvailableTemplates,
   hasTemplate,
   detectPromotableBodyAnnotation,
+  blockVideoLength,
+  collectVideoDurationSources,
   getPinnedBlockMeta,
   markdownToDoc,
+  applyVideoDurations,
   flattenBlocks,
   flattenRenderableBlocks,
   countBlocks,