@bendyline/squisq 2.0.1 → 2.2.0

package/dist/{chunk-TFJVXUHH.js → chunk-I2O6W7DX.js}

@@ -2,11 +2,14 @@ import {
   SHAPE_NAMES,
   TEMPLATE_ALIASES,
   buildNarrationScript,
+  coerceTemplateParams,
   deriveTemplateInputs,
+  extractBodyPlainText,
   flattenBlocks,
   flattenRenderableBlocks,
   getBlockBodyText,
   getPinnedBlockMeta,
+  isContainerTemplate,
   isDataFence,
   isShapeName,
   lintTemplateParams,
@@ -21,45 +24,55 @@ import {
   templateRegistry,
   writeCustomTemplatesToFrontmatter,
   writeCustomThemesToFrontmatter
-} from "./chunk-X6DUONGT.js";
+} from "./chunk-7ARJZYQY.js";
 import {
   ASCII_TREE_VOCAB,
   ASCII_VOCAB,
+  MAX_BRIDGE_GAP,
   UNICODE_TREE_VOCAB,
   UNICODE_VOCAB,
   arrowDirection,
+  cellWidth,
   detectAsciiDiagram,
   isHoriz,
   isJunction,
   isVert,
+  toCells,
   toGrid,
   traceBoxes
-} from "./chunk-5UYI3RJB.js";
+} from "./chunk-FDYDYL77.js";
 import {
+  defaultPageStyle,
   resolveMediaSchedule
-} from "./chunk-FVJUUTEM.js";
+} from "./chunk-2ZWIXGAC.js";
 import {
+  DEFAULT_THEME,
   FRONTMATTER_CUSTOM_TEMPLATES_KEY,
   FRONTMATTER_CUSTOM_THEMES_KEY,
   hexHueDegrees,
+  resolveFontFamily,
   resolveTheme
-} from "./chunk-W4O2TX5I.js";
+} from "./chunk-C33GTPUZ.js";
+import {
+  VIEWPORT_PRESETS,
+  isTemplateBlock
+} from "./chunk-BAOV476U.js";
 import {
   parseMarkdown
-} from "./chunk-66QO7XFB.js";
+} from "./chunk-ACZOVWX3.js";
 import {
   KNOWN_BLOCK_META_KEYS,
   coerceAnnotationValues,
   serializeAnnotation
-} from "./chunk-R2YZTCLO.js";
+} from "./chunk-ZQKZSJAX.js";
 import {
   extractPlainText,
   getChildren,
   readFrontmatterThemeId
-} from "./chunk-AMIR72JP.js";
+} from "./chunk-BCCXTMN5.js";
 import {
   estimateTimeFromText
-} from "./chunk-3E5F2XMR.js";
+} from "./chunk-67L6WRJN.js";
 
 // src/doc/utils/animationUtils.ts
 function getAnimationStyle(animation, _currentTime = 0) {
@@ -320,16 +333,18 @@ function cssFilterForTreatment(treatment, blur) {
 
 // src/doc/docToMarkdown.ts
 var TRANSITION_PARAM_KEYS = ["transition", "transitionDuration", "transitionDirection"];
-function docToMarkdown(doc) {
+var DEFAULT_TEMPLATE = "sectionHeader";
+function docToMarkdown(doc, options = {}) {
+  const defaultTemplate = resolveTemplateName(options.defaultTemplate ?? DEFAULT_TEMPLATE);
   const children = [];
   const blockIds = new Set(flattenBlocks(doc.blocks).map((b) => b.id));
   const docMediaByBlock = /* @__PURE__ */ new Map();
   const homelessDocMedia = [];
   for (const clip of doc.documentMedia ?? []) {
     if (clip.origin && blockIds.has(clip.origin.blockId)) {
-      const list = docMediaByBlock.get(clip.origin.blockId) ?? [];
-      list.push(clip);
-      docMediaByBlock.set(clip.origin.blockId, list);
+      const list2 = docMediaByBlock.get(clip.origin.blockId) ?? [];
+      list2.push(clip);
+      docMediaByBlock.set(clip.origin.blockId, list2);
     } else {
       homelessDocMedia.push(clip);
     }
@@ -339,7 +354,7 @@ function docToMarkdown(doc) {
   }
   function emitBlock(block) {
     if (block.sourceHeading) {
-      const heading = ensureAnnotation(block, block.sourceHeading);
+      const heading = ensureAnnotation(block, block.sourceHeading, defaultTemplate);
       children.push(heading);
     } else if (block.standaloneAnnotation) {
       children.push(synthesizeAnnotationParagraph(block));
@@ -413,15 +428,16 @@ function synthesizeMediaParagraph(clip) {
     children: [{ type: "text", value: serializeAnnotation(clip.kind, params) }]
   };
 }
-function ensureAnnotation(block, heading) {
+function ensureAnnotation(block, heading, defaultTemplate) {
   const { attributes, transitionParams } = ensureTransitionMetadata(block, heading);
-  const hasExplicitTemplate = block.template && block.template !== "sectionHeader" && block.autoTemplate !== true;
-  const hasOverrides = block.templateOverrides && Object.keys(block.templateOverrides).length > 0;
-  let templateAnnotation = heading.templateAnnotation;
-  if (!templateAnnotation && (hasExplicitTemplate || hasOverrides || transitionParams)) {
+  const existing = heading.templateAnnotation;
+  const template = resolveAnnotationTemplate(block, existing, defaultTemplate);
+  const overrides = block.templateOverrides && Object.keys(block.templateOverrides).length > 0 ? block.templateOverrides : void 0;
+  let templateAnnotation;
+  if (template !== void 0 || overrides !== void 0) {
     templateAnnotation = {
-      ...hasExplicitTemplate ? { template: block.template ?? "sectionHeader" } : {},
-      ...hasOverrides ? { params: block.templateOverrides } : {}
+      ...template !== void 0 ? { template } : {},
+      ...overrides ? { params: overrides } : {}
     };
   }
   if (transitionParams) {
@@ -433,11 +449,33 @@ function ensureAnnotation(block, heading) {
       }
     };
   }
+  if (annotationsEqual(existing, templateAnnotation)) templateAnnotation = existing;
   if (attributes === heading.attributes && templateAnnotation === heading.templateAnnotation) {
     return heading;
   }
   return { ...heading, children: [...heading.children], attributes, templateAnnotation };
 }
+function resolveAnnotationTemplate(block, existing, defaultTemplate) {
+  if (!block.template || block.autoTemplate === true) return existing?.template;
+  const template = resolveTemplateName(block.template);
+  if (existing?.template && resolveTemplateName(existing.template) === template) {
+    return existing.template;
+  }
+  if (template === defaultTemplate) return void 0;
+  return block.template;
+}
+function annotationsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.template === b.template && paramsEqual(a.params, b.params);
+}
+function paramsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  return keys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
+}
 function ensureTransitionMetadata(block, heading) {
   const transition = block.transition;
   if (!transition) {
@@ -479,16 +517,1358 @@ function resolveThemeForDoc(doc, explicitId, registry) {
   return resolveTheme(id, registry);
 }
 
+// src/doc/page/resolvePageBlock.ts
+function isTemplatedPageBlock(block) {
+  if (block.sourceHeading?.templateAnnotation?.template) return true;
+  if (block.autoTemplate && block.template) return true;
+  return !block.sourceHeading && isTemplateBlock(block);
+}
+function templatedName(block) {
+  return block.sourceHeading?.templateAnnotation?.template ?? block.template;
+}
+function resolvePageBlock(block) {
+  if (!isTemplatedPageBlock(block)) return { templated: false };
+  const annotation = block.sourceHeading?.templateAnnotation;
+  const rawName = templatedName(block) ?? "sectionHeader";
+  const templateName = resolveTemplateName(rawName);
+  const rawParams = {
+    ...annotation?.params ?? {},
+    ...block.templateOverrides ?? {}
+  };
+  const coercedParams = coerceTemplateParams(rawName, rawParams).input;
+  let base;
+  if (annotation) {
+    const headingText = extractPlainText(block.sourceHeading);
+    base = {
+      id: block.id,
+      template: rawName,
+      startTime: 0,
+      duration: 1,
+      audioSegment: 0,
+      title: headingText,
+      contents: block.contents,
+      children: block.children,
+      ...deriveTemplateInputs(rawName, headingText, block.contents, {
+        placeholders: true
+      }) ?? {}
+    };
+  } else {
+    base = {
+      ...block,
+      startTime: block.startTime ?? 0,
+      duration: block.duration ?? 1,
+      audioSegment: block.audioSegment ?? 0,
+      template: rawName
+    };
+  }
+  const templateBlock = {
+    ...base,
+    ...block.templateData ?? {},
+    ...coercedParams
+  };
+  return { templated: true, templateName, templateBlock };
+}
+
+// src/doc/page/sectionExtractors.ts
+function bodyRichText(input) {
+  const contents = input.contents;
+  if (!contents || contents.length === 0) return void 0;
+  const text = contents.map((node) => extractPlainText(node)).join("\n").trim();
+  return text ? { text, markdown: contents } : void 0;
+}
+function accentImageMedia(accent) {
+  if (!accent?.src) return void 0;
+  return {
+    type: "image",
+    src: accent.src,
+    alt: accent.alt ?? "",
+    credit: accent.credit,
+    license: accent.license
+  };
+}
+function canvasDraft(spatial, ctx, block) {
+  return {
+    kind: "canvas-embed",
+    variant: spatial,
+    slots: {
+      media: {
+        type: "canvas",
+        spatial,
+        block: block ?? ctx.block,
+        aspect: { width: ctx.viewport.width, height: ctx.viewport.height }
+      }
+    }
+  };
+}
+var title = (input) => {
+  const t = input;
+  const contents = input.contents;
+  const firstParagraph = contents?.find((node) => node.type === "paragraph");
+  const subtitle = t.subtitle ?? (firstParagraph ? extractPlainText(firstParagraph) : void 0);
+  return {
+    kind: "hero",
+    variant: "title",
+    slots: { title: t.title, subtitle },
+    emphasis: "lead",
+    hints: t.backgroundColor ? { backgroundColor: t.backgroundColor } : void 0
+  };
+};
+var sectionHeader = (input) => {
+  const s = input;
+  const media = s.imageSrc ? { type: "image", src: s.imageSrc, alt: s.imageAlt ?? "" } : void 0;
+  return {
+    kind: "banner",
+    slots: { title: s.title, media },
+    colorScheme: s.colorScheme,
+    mediaBackground: !!s.imageSrc
+  };
+};
+var statHighlight = (input) => {
+  const s = input;
+  return {
+    kind: "stat-band",
+    variant: "single",
+    slots: {
+      items: [{ value: s.stat, title: s.description, body: s.detail }],
+      media: accentImageMedia(s.accentImage)
+    },
+    emphasis: "strong",
+    colorScheme: s.colorScheme
+  };
+};
+var quote = (input) => {
+  const q = input;
+  return {
+    kind: "quote-band",
+    variant: "plain",
+    slots: {
+      body: { text: q.quote ?? "" },
+      attribution: q.attribution,
+      media: accentImageMedia(q.accentImage)
+    }
+  };
+};
+var factCard = (input) => {
+  const f = input;
+  return {
+    kind: "callout",
+    variant: "fact",
+    slots: {
+      title: f.fact,
+      body: { text: f.explanation ?? "" },
+      meta: f.source,
+      media: accentImageMedia(f.accentImage)
+    }
+  };
+};
+var twoColumn = (input) => {
+  const t = input;
+  return {
+    kind: "card-grid",
+    variant: "two-column",
+    slots: {
+      title: t.header,
+      items: [
+        { title: t.left?.label, body: t.left?.sublabel, accentScheme: t.leftColor },
+        { title: t.right?.label, body: t.right?.sublabel, accentScheme: t.rightColor }
+      ]
+    }
+  };
+};
+var dateEvent = (input) => {
+  const d = input;
+  return {
+    kind: "timeline-rail",
+    slots: {
+      milestone: {
+        date: d.date ?? "",
+        description: d.description ?? "",
+        footer: d.footer,
+        mood: d.mood
+      },
+      media: accentImageMedia(d.accentImage)
+    }
+  };
+};
+var imageWithCaption = (input) => {
+  const i = input;
+  const media = {
+    type: "image",
+    src: i.imageSrc,
+    alt: i.imageAlt ?? "",
+    credit: i.imageCredit,
+    license: i.imageLicense
+  };
+  if (i.isTitle) {
+    return {
+      kind: "hero",
+      variant: "media",
+      slots: { title: i.caption, subtitle: i.subtitle, media },
+      emphasis: "lead",
+      mediaBackground: true
+    };
+  }
+  return {
+    kind: "media-figure",
+    variant: "image",
+    slots: { media, caption: i.caption }
+  };
+};
+function featureDraft(input, side) {
+  return {
+    kind: "feature-split",
+    variant: side === "left" ? "media-left" : "media-right",
+    slots: {
+      title: input.title,
+      body: input.body ? { text: input.body } : void 0,
+      media: {
+        type: "image",
+        src: input.imageSrc,
+        alt: input.imageAlt ?? "",
+        width: input.imageWidth,
+        height: input.imageHeight
+      }
+    }
+  };
+}
+var leftFeature = (input) => featureDraft(input, "left");
+var rightFeature = (input) => featureDraft(input, "right");
+var fullBleedQuote = (input) => {
+  const f = input;
+  return {
+    kind: "quote-band",
+    variant: "display",
+    slots: { body: { text: f.text ?? "" } },
+    emphasis: "strong",
+    colorScheme: f.colorScheme
+  };
+};
+var list = (input) => {
+  const l = input;
+  return {
+    kind: "item-list",
+    slots: {
+      title: l.title,
+      items: (l.items ?? []).map((item) => ({ body: item })),
+      media: accentImageMedia(l.accentImage)
+    },
+    colorScheme: l.colorScheme
+  };
+};
+var photoGrid = (input) => {
+  const p = input;
+  const images = p.images ?? [];
+  const fallback = images.length === 0 ? {
+    title: input.title,
+    body: bodyRichText(input)
+  } : void 0;
+  return {
+    kind: "gallery",
+    slots: {
+      ...fallback,
+      caption: p.caption,
+      items: images.map((img) => ({
+        media: {
+          type: "image",
+          src: img.src,
+          alt: img.alt ?? "",
+          credit: img.credit,
+          license: img.license
+        }
+      }))
+    }
+  };
+};
+var definitionCard = (input) => {
+  const d = input;
+  return {
+    kind: "callout",
+    variant: "definition",
+    slots: {
+      title: d.term,
+      body: { text: d.definition ?? "" },
+      meta: d.origin,
+      media: accentImageMedia(d.accentImage)
+    },
+    colorScheme: d.colorScheme
+  };
+};
+var comparisonBar = (input) => {
+  const c = input;
+  return {
+    kind: "stat-band",
+    variant: "comparison",
+    slots: {
+      items: [
+        { title: c.leftLabel, value: c.leftValue },
+        { title: c.rightLabel, value: c.rightValue }
+      ],
+      meta: c.unit
+    },
+    emphasis: "strong",
+    colorScheme: c.colorScheme
+  };
+};
+var pullQuote = (input) => {
+  const p = input;
+  const bg = p.backgroundImage;
+  return {
+    kind: "quote-band",
+    variant: "full-bleed",
+    slots: {
+      body: { text: p.text ?? "" },
+      attribution: p.attribution,
+      media: bg?.src ? { type: "image", src: bg.src, alt: bg.alt ?? "", credit: bg.credit, license: bg.license } : void 0
+    },
+    emphasis: "strong",
+    mediaBackground: !!bg?.src
+  };
+};
+var videoWithCaption = (input) => {
+  const v = input;
+  return {
+    kind: "media-figure",
+    variant: "video",
+    slots: {
+      media: {
+        type: "video",
+        src: v.videoSrc,
+        posterSrc: v.posterSrc,
+        alt: v.videoAlt ?? "",
+        clipStart: v.clipStart,
+        clipEnd: v.clipEnd,
+        credit: v.videoCredit,
+        license: v.videoLicense
+      },
+      caption: v.caption
+    }
+  };
+};
+var videoPullQuote = (input) => {
+  const v = input;
+  const bg = v.backgroundVideo;
+  return {
+    kind: "quote-band",
+    variant: "full-bleed",
+    slots: {
+      body: { text: v.text ?? "" },
+      attribution: v.attribution,
+      media: bg?.src ? {
+        type: "video",
+        src: bg.src,
+        posterSrc: bg.posterSrc,
+        alt: bg.alt ?? "",
+        clipStart: bg.clipStart,
+        clipEnd: bg.clipEnd,
+        credit: bg.credit,
+        license: bg.license
+      } : void 0
+    },
+    emphasis: "strong",
+    mediaBackground: !!bg?.src
+  };
+};
+var dataTable = (input) => {
+  const d = input;
+  return {
+    kind: "table-section",
+    slots: {
+      title: d.title,
+      table: { headers: d.headers ?? [], rows: d.rows ?? [], align: d.align }
+    },
+    colorScheme: d.colorScheme
+  };
+};
+var diagram = (input, ctx) => canvasDraft("diagram", ctx, input);
+var tree = (input, ctx) => canvasDraft("tree", ctx, input);
+var timeline = (input, ctx) => canvasDraft("timeline", ctx, input);
+var map = (input, ctx) => canvasDraft("map", ctx, input);
+var drawing = (input, ctx) => canvasDraft("drawing", ctx, input);
+var layout = (input, ctx) => canvasDraft("layout", ctx, input);
+var sectionExtractors = {
+  title,
+  sectionHeader,
+  statHighlight,
+  quote,
+  factCard,
+  twoColumn,
+  dateEvent,
+  imageWithCaption,
+  leftFeature,
+  rightFeature,
+  map,
+  fullBleedQuote,
+  list,
+  photoGrid,
+  definitionCard,
+  comparisonBar,
+  pullQuote,
+  videoWithCaption,
+  videoPullQuote,
+  dataTable,
+  diagram,
+  tree,
+  timeline,
+  layout,
+  drawing
+};
+
+// src/doc/page/materializePageSection.ts
+function resolvePageStyle(theme, hints) {
+  const base = theme?.pageStyle ?? defaultPageStyle(theme ?? DEFAULT_THEME);
+  if (!hints?.spacing || hints.spacing === base.tokens.sectionSpacing) return base;
+  return { ...base, tokens: { ...base.tokens, sectionSpacing: hints.spacing } };
+}
+var ACCENT_KINDS = /* @__PURE__ */ new Set([
+  "banner",
+  "stat-band",
+  "quote-band",
+  "callout",
+  "card-grid",
+  "item-list",
+  "timeline-rail",
+  "footer"
+]);
+var BAND_KINDS = /* @__PURE__ */ new Set([
+  "banner",
+  "quote-band",
+  "stat-band",
+  "footer"
+]);
+var PANEL_KINDS = /* @__PURE__ */ new Set([
+  "callout",
+  "card-grid",
+  "stat-band",
+  "item-list",
+  "timeline-rail",
+  "table-section"
+]);
+function isMermaidFence(node) {
+  return node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid";
+}
+function htmlTreeContainsMedia(nodes) {
+  for (const value of nodes) {
+    if (!value || typeof value !== "object") continue;
+    const node = value;
+    if (node.type === "htmlElement" && typeof node.tagName === "string" && ["img", "video", "audio"].includes(node.tagName.toLowerCase())) {
+      return true;
+    }
+    if (Array.isArray(node.children) && htmlTreeContainsMedia(node.children)) return true;
+  }
+  return false;
+}
+function markdownNodeContainsMedia(value) {
+  if (!value || typeof value !== "object") return false;
+  const node = value;
+  if (node.type === "image") return true;
+  if ((node.type === "htmlBlock" || node.type === "htmlInline") && Array.isArray(node.htmlChildren) && htmlTreeContainsMedia(node.htmlChildren)) {
+    return true;
+  }
+  return Array.isArray(node.children) && node.children.some(markdownNodeContainsMedia);
+}
+function unconsumedRichContent(block, draft) {
+  if (!block.contents || block.contents.length === 0) return void 0;
+  const templateHasMedia = Boolean(draft.slots.media) || Boolean(draft.slots.items?.some((item) => item.media !== void 0));
+  const markdown = block.contents.filter(
+    (node) => isMermaidFence(node) || !templateHasMedia && markdownNodeContainsMedia(node)
+  );
+  if (markdown.length === 0) return void 0;
+  return {
+    text: markdown.map((node) => extractPlainText(node)).join("\n").trim(),
+    markdown
+  };
+}
+function preserveRichContent(block, draft) {
+  const richContent = unconsumedRichContent(block, draft);
+  return richContent ? { ...draft, slots: { ...draft.slots, richContent } } : draft;
+}
+function draftForBlock(block, viewport, customTemplates) {
+  if (isTemplatedPageBlock(block)) {
+    const resolved = resolvePageBlock(block);
+    const templateName = resolved.templateName;
+    const extractor = sectionExtractors[templateName];
+    if (extractor) {
+      return {
+        draft: preserveRichContent(block, extractor(resolved.templateBlock, { block, viewport })),
+        source: "template",
+        templateName
+      };
+    }
+    const custom = customTemplates?.find((definition) => definition.name === templateName);
+    if (custom) {
+      const draft2 = {
+        kind: "canvas-embed",
+        variant: "custom",
+        slots: {
+          media: {
+            type: "canvas",
+            spatial: "custom",
+            block: resolved.templateBlock,
+            aspect: {
+              width: custom.viewport?.width ?? viewport.width,
+              height: custom.viewport?.height ?? viewport.height
+            }
+          }
+        }
+      };
+      return {
+        draft: preserveRichContent(block, draft2),
+        source: "custom-template",
+        templateName
+      };
+    }
+    const diagnostic = {
+      code: "unknown-template",
+      template: templateName,
+      message: `Unknown template "${templateName}"`
+    };
+    const headingText = block.sourceHeading ? extractPlainText(block.sourceHeading) : void 0;
+    const draft = {
+      kind: "callout",
+      variant: "diagnostic",
+      slots: {
+        title: headingText ?? diagnostic.message,
+        body: { text: extractBodyPlainText(block.contents) },
+        meta: diagnostic.message
+      },
+      emphasis: "quiet"
+    };
+    return {
+      draft: preserveRichContent(block, draft),
+      source: "fallback",
+      templateName,
+      diagnostic
+    };
+  }
+  if (block.layers && block.layers.length > 0) {
+    const draft = {
+      kind: "canvas-embed",
+      variant: "authored",
+      slots: {
+        media: {
+          type: "canvas",
+          spatial: "authored",
+          block,
+          aspect: { width: viewport.width, height: viewport.height }
+        }
+      }
+    };
+    return {
+      draft: preserveRichContent(block, draft),
+      source: "authored"
+    };
+  }
+  const heading = block.sourceHeading;
+  return {
+    draft: {
+      kind: "prose",
+      slots: {
+        title: heading ? extractPlainText(heading) : void 0,
+        headingLevel: heading?.depth,
+        body: block.contents && block.contents.length > 0 ? { text: extractBodyPlainText(block.contents), markdown: block.contents } : void 0
+      }
+    },
+    source: "prose"
+  };
+}
+function overrideFor(pageStyle, kind, templateName) {
+  const byTemplate = templateName ? pageStyle.templates?.[templateName] : void 0;
+  const byKind = pageStyle.sections?.[kind];
+  if (!byTemplate) return byKind;
+  if (!byKind) return byTemplate;
+  return {
+    ...byKind,
+    ...byTemplate,
+    hints: { ...byKind.hints, ...byTemplate.hints }
+  };
+}
+function buildSection(seed, index, totalSections, background, emphasis, accent) {
+  const { draft, override } = seed;
+  const hints = { ...draft.hints, ...override?.hints };
+  const section = {
+    kind: override?.kind ?? draft.kind,
+    variant: override?.variant ?? draft.variant,
+    blockId: seed.block?.id ?? "cover",
+    template: seed.source === "template" || seed.source === "custom-template" || seed.source === "fallback" ? seed.templateName : void 0,
+    slots: draft.slots,
+    emphasis,
+    accent,
+    background,
+    index,
+    totalSections,
+    depth: seed.depth,
+    source: seed.source
+  };
+  if (seed.diagnostic) section.diagnostic = seed.diagnostic;
+  if (Object.keys(hints).length > 0) section.hints = hints;
+  return section;
+}
+function resolveScheme(theme, schemeName) {
+  return schemeName ? theme.colorSchemes?.[schemeName] : void 0;
+}
+function rotationSchemeNames(pageStyle, theme) {
+  const all = Object.keys(theme.colorSchemes ?? {});
+  const requested = pageStyle.accentRotation.schemes;
+  if (!requested || requested.length === 0) return all;
+  return requested.filter((name) => all.includes(name));
+}
+function materializePageSection(block, options = {}) {
+  const theme = options.theme ?? DEFAULT_THEME;
+  const viewport = options.viewport ?? VIEWPORT_PRESETS.landscape;
+  const pageStyle = resolvePageStyle(theme);
+  const result = draftForBlock(block, viewport, options.customTemplates);
+  const override = overrideFor(pageStyle, result.draft.kind, result.templateName);
+  const background = override?.background ?? (result.draft.mediaBackground ? "media" : "base");
+  const emphasis = override?.emphasis ?? result.draft.emphasis ?? "standard";
+  const accent = result.draft.colorScheme ? {
+    schemeName: result.draft.colorScheme,
+    scheme: resolveScheme(theme, result.draft.colorScheme),
+    role: "block"
+  } : { role: pageStyle.accentRotation.strategy === "none" ? "none" : "primary" };
+  const section = buildSection(
+    { ...result, override, block, depth: 0 },
+    options.blockIndex ?? 0,
+    options.totalBlocks ?? 1,
+    background,
+    emphasis,
+    accent
+  );
+  return {
+    section,
+    block,
+    source: result.source,
+    diagnostic: result.diagnostic
+  };
+}
+function materializePageSections(doc, options = {}) {
+  const theme = options.theme ?? DEFAULT_THEME;
+  const viewport = options.viewport ?? VIEWPORT_PRESETS.landscape;
+  const pageStyle = resolvePageStyle(theme, options.transformPage);
+  const customTemplates = options.customTemplates ?? doc.customTemplates;
+  const seeds = [];
+  if (options.cover) {
+    const cover = options.cover;
+    seeds.push({
+      draft: {
+        kind: "hero",
+        variant: "cover",
+        slots: {
+          title: cover.title,
+          subtitle: cover.subtitle,
+          media: cover.heroSrc ? {
+            type: "image",
+            src: cover.heroSrc,
+            alt: cover.heroAlt ?? "",
+            credit: cover.heroCredit,
+            license: cover.heroLicense
+          } : void 0
+        },
+        emphasis: "lead",
+        mediaBackground: !!cover.heroSrc
+      },
+      source: "cover",
+      depth: 0
+    });
+  }
+  const walk = (blocks, depth) => {
+    for (const block of blocks) {
+      const result = draftForBlock(block, viewport, customTemplates);
+      seeds.push({ ...result, block, depth });
+      const consumed = result.draft.kind === "canvas-embed" && isContainerTemplate(result.templateName);
+      if (!consumed && block.children && block.children.length > 0) {
+        walk(block.children, depth + 1);
+      }
+    }
+  };
+  walk(doc.blocks ?? [], 0);
+  if (options.cover && seeds.length > 1) {
+    const cover = options.cover;
+    const first = seeds[1];
+    if (first.draft.kind === "hero" && first.draft.slots.title === cover.title) {
+      const coverSeed = seeds[0];
+      const coverMedia = coverSeed.draft.slots.media;
+      if (coverMedia && !first.draft.slots.media) {
+        first.draft = {
+          ...first.draft,
+          slots: { ...first.draft.slots, media: coverMedia },
+          mediaBackground: true
+        };
+      }
+      seeds.splice(0, 1);
+    } else if (first.draft.kind === "prose" && first.draft.slots.title === cover.title) {
+      const slots = { ...first.draft.slots };
+      delete slots.title;
+      delete slots.headingLevel;
+      let markdown = slots.body?.markdown;
+      if (cover.subtitle && markdown && markdown.length > 0 && markdown[0].type === "paragraph" && extractPlainText(markdown[0]) === cover.subtitle) {
+        markdown = markdown.slice(1);
+      }
+      if (markdown && markdown.length > 0) {
+        slots.body = {
+          text: markdown.map((node) => extractPlainText(node)).join("\n").trim(),
+          markdown
+        };
+        first.draft = { ...first.draft, slots };
+      } else {
+        seeds.splice(1, 1);
+      }
+    }
+  }
+  for (const seed of seeds) {
+    seed.override = overrideFor(pageStyle, seed.draft.kind, seed.templateName);
+  }
+  const totalSections = seeds.length;
+  const rhythm = pageStyle.tokens.backgroundRhythm;
+  const strategy = pageStyle.accentRotation.strategy;
+  const schemeNames = rotationSchemeNames(pageStyle, theme);
+  const rotationSize = strategy === "alternate-two" ? Math.min(2, schemeNames.length) : schemeNames.length;
+  let bandCounter = 0;
+  let rotationCounter = 0;
+  let promotedCount = 0;
+  let eyebrowCounter = 0;
+  const eyebrowTreatment = pageStyle.tokens.headingTreatment.eyebrow;
+  const results = [];
+  for (let index = 0; index < seeds.length; index++) {
+    const seed = seeds[index];
+    const kind = seed.override?.kind ?? seed.draft.kind;
+    let background;
+    if (seed.override?.background) {
+      background = seed.override.background;
+    } else if (seed.draft.mediaBackground) {
+      background = "media";
+    } else if (kind === "prose" || rhythm === "flat") {
+      background = "base";
+    } else if (rhythm === "accent-bands" && BAND_KINDS.has(kind)) {
+      background = "accent";
+    } else if (rhythm === "tinted-panels") {
+      background = PANEL_KINDS.has(kind) ? "alternate" : "base";
+    } else if (rhythm === "alternate" || rhythm === "accent-bands") {
+      background = bandCounter % 2 === 1 ? "alternate" : "base";
+      bandCounter++;
+    } else {
+      background = "base";
+    }
+    let accent;
+    if (seed.draft.colorScheme) {
+      accent = {
+        schemeName: seed.draft.colorScheme,
+        scheme: resolveScheme(theme, seed.draft.colorScheme),
+        role: "block"
+      };
+    } else if (ACCENT_KINDS.has(kind) && (strategy === "cycle" || strategy === "alternate-two") && rotationSize > 0) {
+      const schemeName = schemeNames[rotationCounter % rotationSize];
+      rotationCounter++;
+      accent = { schemeName, scheme: resolveScheme(theme, schemeName), role: "rotation" };
+    } else if (strategy === "none") {
+      accent = { role: "none" };
+    } else {
+      accent = { role: "primary" };
+    }
+    let emphasis = seed.override?.emphasis ?? seed.draft.emphasis ?? "standard";
+    if (options.transformPage?.emphasisCurve === "front-loaded" && kind !== "hero" && kind !== "prose" && promotedCount < 2) {
+      if (emphasis === "standard") emphasis = "strong";
+      promotedCount++;
+    }
+    if ((eyebrowTreatment === "numbered" || eyebrowTreatment === "mono-tag") && (kind === "hero" || kind === "banner")) {
+      eyebrowCounter++;
+      if (!seed.draft.slots.eyebrow) {
+        seed.draft.slots = {
+          ...seed.draft.slots,
+          eyebrow: String(eyebrowCounter).padStart(2, "0")
+        };
+      }
+    }
+    const section = buildSection(seed, index, totalSections, background, emphasis, accent);
+    results.push({
+      section,
+      block: seed.block,
+      source: seed.source,
+      diagnostic: seed.diagnostic
+    });
+  }
+  return results;
+}
+
+// src/doc/pageCss.ts
+var NOISE_DATA_URI = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")`;
+function buildPageCssVars(theme, pageStyle) {
+  const t = theme ?? DEFAULT_THEME;
+  const style = pageStyle ?? resolvePageStyle(t);
+  const colors = t.colors;
+  const typography = t.typography;
+  return {
+    "--squisq-page-bg": colors.background,
+    "--squisq-page-bg-alt": colors.backgroundLight,
+    "--squisq-page-text": colors.text,
+    "--squisq-page-text-muted": colors.textMuted,
+    "--squisq-page-primary": colors.primary,
+    "--squisq-page-secondary": colors.secondary,
+    "--squisq-page-highlight": colors.highlight,
+    "--squisq-page-title-font": resolveFontFamily(typography.titleFont, "Georgia, serif"),
+    "--squisq-page-body-font": resolveFontFamily(typography.bodyFont, "system-ui, sans-serif"),
+    "--squisq-page-mono-font": resolveFontFamily(
+      typography.monoFont,
+      "ui-monospace, SFMono-Regular, Menlo, monospace"
+    ),
+    "--squisq-page-line-height": String(typography.lineHeight ?? 1.65),
+    "--squisq-page-title-weight": typography.titleWeight === "normal" ? "400" : "700",
+    "--squisq-page-content-max": `${style.tokens.contentMaxWidth}px`,
+    "--squisq-page-wide-max": `${style.tokens.wideMaxWidth}px`,
+    "--squisq-page-radius": `${style.tokens.cornerRadius}px`,
+    // Per-section accent defaults; the renderer overrides these per section.
+    "--squisq-page-accent": colors.primary,
+    "--squisq-page-accent-bg": colors.backgroundLight,
+    "--squisq-page-accent-text": colors.text
+  };
+}
+function pageStyleDataAttributes(pageStyle) {
+  const tokens = pageStyle.tokens;
+  const attrs = {
+    "data-family": pageStyle.family,
+    "data-spacing": tokens.sectionSpacing,
+    "data-divider": tokens.divider,
+    "data-rhythm": tokens.backgroundRhythm,
+    "data-hero-style": tokens.heroStyle,
+    "data-eyebrow": tokens.headingTreatment.eyebrow,
+    "data-heading-scale": tokens.headingTreatment.scale,
+    "data-framing": tokens.imageFraming,
+    "data-shadow": tokens.shadow,
+    "data-quote-mark": tokens.quoteMark,
+    "data-numerals": tokens.numeralStyle
+  };
+  if (tokens.headingTreatment.case && tokens.headingTreatment.case !== "none") {
+    attrs["data-heading-case"] = tokens.headingTreatment.case;
+  }
+  if (tokens.headingTreatment.underline && tokens.headingTreatment.underline !== "none") {
+    attrs["data-underline"] = tokens.headingTreatment.underline;
+  }
+  if (tokens.pattern && tokens.pattern !== "none") {
+    attrs["data-pattern"] = tokens.pattern;
+  }
+  return attrs;
+}
+var NARROW_RULES = `
+.squisq-page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
+.squisq-page-feature { grid-template-columns: 1fr; }
+.squisq-page-feature--media-right .squisq-page-feature-media { order: 0; }
+.squisq-page-stats { flex-direction: column; gap: 1.75rem; }
+.squisq-page-cards { grid-template-columns: 1fr; }
+.squisq-page-gallery { grid-template-columns: repeat(2, 1fr); }
+.squisq-page-milestone { grid-template-columns: 1fr; gap: 0.5rem; }
+.squisq-page-milestone-rail { display: none; }
+.squisq-page-section-inner { padding-inline: 18px; }
+`;
+var PAGE_BASE_CSS = `
+/* \u2500\u2500 Base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page {
+  background: var(--squisq-page-bg);
+  color: var(--squisq-page-text);
+  font-family: var(--squisq-page-body-font);
+  line-height: var(--squisq-page-line-height);
+  --squisq-page-divider-color: color-mix(in srgb, var(--squisq-page-text) 16%, transparent);
+  --squisq-page-section-pad: 3.5rem;
+  --squisq-page-shadow: none;
+}
+.squisq-page *, .squisq-page *::before, .squisq-page *::after { box-sizing: border-box; }
+.squisq-page img { max-width: 100%; height: auto; }
+
+/* Page pattern washes (very low intensity) */
+.squisq-page[data-pattern='dots'] {
+  background-image: radial-gradient(color-mix(in srgb, var(--squisq-page-text) 7%, transparent) 1px, transparent 1px);
+  background-size: 22px 22px;
+}
+.squisq-page[data-pattern='grid'] {
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--squisq-page-primary) 7%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--squisq-page-primary) 7%, transparent) 1px, transparent 1px);
+  background-size: 44px 44px;
+}
+.squisq-page[data-pattern='diagonal'] {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    color-mix(in srgb, var(--squisq-page-text) 4%, transparent) 0 1px,
+    transparent 1px 14px
+  );
+}
+.squisq-page[data-pattern='noise'] { background-image: ${NOISE_DATA_URI}; }
+
+/* Spacing scale */
+.squisq-page[data-spacing='compact'] { --squisq-page-section-pad: 2.25rem; }
+.squisq-page[data-spacing='comfortable'] { --squisq-page-section-pad: 3.5rem; }
+.squisq-page[data-spacing='generous'] { --squisq-page-section-pad: 5.25rem; }
+
+/* Shadow language */
+.squisq-page[data-shadow='soft'] { --squisq-page-shadow: 0 14px 36px color-mix(in srgb, var(--squisq-page-text) 14%, transparent); }
+.squisq-page[data-shadow='crisp'] { --squisq-page-shadow: 0 2px 10px color-mix(in srgb, var(--squisq-page-text) 26%, transparent); }
+.squisq-page[data-shadow='heavy'] { --squisq-page-shadow: 10px 10px 0 color-mix(in srgb, var(--squisq-page-text) 82%, transparent); }
+
+/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-section { position: relative; padding-block: var(--squisq-page-section-pad); }
+.squisq-page-section-inner {
+  max-width: var(--squisq-page-content-max);
+  margin-inline: auto;
+  padding-inline: 24px;
+}
+/* Backdrops anchor to the section; these content roots stack above them. */
+.squisq-page-hero-body,
+.squisq-page-banner-body,
+.squisq-page-quote-figure { position: relative; }
+.squisq-page-section--feature-split .squisq-page-section-inner,
+.squisq-page-section--gallery .squisq-page-section-inner,
+.squisq-page-section--table-section .squisq-page-section-inner,
+.squisq-page-section--canvas-embed .squisq-page-section-inner,
+.squisq-page-section--stat-band .squisq-page-section-inner,
+.squisq-page-section--card-grid .squisq-page-section-inner,
+.squisq-page-section--media-figure .squisq-page-section-inner,
+.squisq-page-section--hero .squisq-page-section-inner {
+  max-width: var(--squisq-page-wide-max);
+}
+
+/* Background rhythm */
+.squisq-page-section--bg-alternate { background: var(--squisq-page-bg-alt); }
+.squisq-page-section--bg-accent {
+  background: var(--squisq-page-accent-bg);
+  color: var(--squisq-page-accent-text);
+}
+.squisq-page-section--bg-media { color: #ffffff; }
+
+/* Dividers between adjacent sections */
+.squisq-page[data-divider='hairline'] .squisq-page-section + .squisq-page-section { border-top: 1px solid var(--squisq-page-divider-color); }
+.squisq-page[data-divider='thick-rule'] .squisq-page-section + .squisq-page-section { border-top: 3px solid var(--squisq-page-primary); }
+.squisq-page[data-divider='double-rule'] .squisq-page-section + .squisq-page-section { border-top: 4px double var(--squisq-page-divider-color); }
+.squisq-page[data-divider='dotted'] .squisq-page-section + .squisq-page-section { border-top: 2px dotted var(--squisq-page-divider-color); }
+/* Banded sections carry their own edges; media sections never need rules. */
+.squisq-page .squisq-page-section--bg-media,
+.squisq-page .squisq-page-section--bg-media + .squisq-page-section,
+.squisq-page .squisq-page-section--timeline-rail + .squisq-page-section--timeline-rail { border-top: none; }
+
+/* \u2500\u2500 Headings, eyebrows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-section-title {
+  font-family: var(--squisq-page-title-font);
+  font-weight: var(--squisq-page-title-weight);
+  line-height: 1.15;
+  margin: 0 0 0.5em;
+}
+.squisq-page[data-heading-case='uppercase'] .squisq-page-section-title { text-transform: uppercase; letter-spacing: 0.03em; }
+.squisq-page[data-underline='accent-bar'] .squisq-page-section-title::after {
+  content: '';
+  display: block;
+  width: 56px;
+  height: 4px;
+  margin-top: 0.4em;
+  border-radius: 2px;
+  background: var(--squisq-page-accent);
+}
+.squisq-page[data-underline='full-rule'] .squisq-page-section-title {
+  border-bottom: 1px solid var(--squisq-page-divider-color);
+  padding-bottom: 0.35em;
+}
+
+.squisq-page-eyebrow {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--squisq-page-accent);
+  margin: 0 0 0.9em;
+}
+.squisq-page[data-eyebrow='numbered'] .squisq-page-eyebrow::after { content: ' \u2014'; color: var(--squisq-page-text-muted); }
+.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow {
+  display: inline-block;
+  font-family: var(--squisq-page-mono-font);
+  text-transform: none;
+  letter-spacing: 0.06em;
+  border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 55%, transparent);
+  border-radius: var(--squisq-page-radius);
+  padding: 0.15em 0.6em;
+  background: color-mix(in srgb, var(--squisq-page-accent) 10%, transparent);
+}
+.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow::before { content: '['; opacity: 0.6; }
+.squisq-page[data-eyebrow='mono-tag'] .squisq-page-eyebrow::after { content: ']'; opacity: 0.6; }
+
+/* \u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-section--hero { padding-block: calc(var(--squisq-page-section-pad) * 1.5); }
+.squisq-page-hero-title {
+  font-family: var(--squisq-page-title-font);
+  font-weight: var(--squisq-page-title-weight);
+  line-height: 1.08;
+  margin: 0;
+  font-size: 2.75rem;
+}
+.squisq-page[data-heading-scale='display'] .squisq-page-hero-title { font-size: 3.4rem; }
+.squisq-page[data-heading-scale='oversized'] .squisq-page-hero-title { font-size: 4rem; font-size: clamp(3rem, 9cqw, 6rem); line-height: 1.02; }
+.squisq-page[data-heading-case='uppercase'] .squisq-page-hero-title { text-transform: uppercase; letter-spacing: 0.02em; }
+.squisq-page-hero-subtitle {
+  margin: 1.1em 0 0;
+  font-size: 1.25rem;
+  color: var(--squisq-page-text-muted);
+  max-width: 42em;
+  white-space: pre-line;
+}
+.squisq-page-section--bg-media .squisq-page-hero-subtitle { color: rgba(255, 255, 255, 0.88); }
+
+/* Stacked (default): centered column */
+.squisq-page[data-hero-style='stacked'] .squisq-page-hero-body { text-align: center; }
+.squisq-page[data-hero-style='stacked'] .squisq-page-hero-subtitle { margin-inline: auto; }
+
+/* Oversized type: hard left, no decoration */
+.squisq-page[data-hero-style='oversized-type'] .squisq-page-hero-title { font-size: 4.25rem; font-size: clamp(3.25rem, 10cqw, 6.5rem); line-height: 0.98; }
+
+/* Split: text and media side by side */
+.squisq-page-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
+.squisq-page-hero-grid .squisq-page-hero-media img { width: 100%; object-fit: cover; }
+
+/* Full-bleed & letterbox: media behind text */
+.squisq-page-section--hero-media {
+  padding-block: 0;
+  min-height: min(72svh, 620px);
+  display: flex;
+  align-items: flex-end;
+}
+.squisq-page[data-hero-style='letterbox'] .squisq-page-section--hero-media { min-height: min(52svh, 460px); }
+.squisq-page-hero-backdrop { position: absolute; inset: 0; overflow: hidden; }
+.squisq-page-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; }
+.squisq-page-hero-backdrop::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.68) 100%);
+}
+.squisq-page[data-hero-style='letterbox'] .squisq-page-hero-backdrop img { filter: saturate(0.9); }
+.squisq-page-section--hero-media .squisq-page-section-inner { padding-block: 3rem; width: 100%; }
+
+/* \u2500\u2500 Banner (sectionHeader) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-banner-title { font-size: 2rem; }
+.squisq-page[data-heading-scale='display'] .squisq-page-banner-title { font-size: 2.5rem; }
+.squisq-page[data-heading-scale='oversized'] .squisq-page-banner-title { font-size: 3rem; font-size: clamp(2.25rem, 6cqw, 3.75rem); }
+.squisq-page-section--banner.squisq-page-section--bg-media { padding-block: 0; min-height: 280px; display: flex; align-items: flex-end; }
+.squisq-page-section--banner.squisq-page-section--bg-media .squisq-page-section-inner { padding-block: 2rem; width: 100%; }
+.squisq-page-section--banner .squisq-page-section-title { margin-bottom: 0; }
+
+/* \u2500\u2500 Stat band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-stats { display: flex; gap: 3rem; justify-content: center; text-align: center; flex-wrap: wrap; }
+.squisq-page-stat { flex: 1 1 220px; max-width: 420px; }
+.squisq-page-stat-value {
+  display: block;
+  font-family: var(--squisq-page-title-font);
+  font-weight: 700;
+  font-size: 3.25rem;
+  line-height: 1;
+  color: var(--squisq-page-accent);
+}
+.squisq-page[data-numerals='oversized'] .squisq-page-stat-value { font-size: 4.5rem; font-size: clamp(3.5rem, 8cqw, 5.5rem); }
+.squisq-page[data-numerals='mono'] .squisq-page-stat-value { font-family: var(--squisq-page-mono-font); letter-spacing: -0.02em; }
+.squisq-page[data-numerals='boxed'] .squisq-page-stat-value {
+  display: inline-block;
+  border: 2px solid var(--squisq-page-accent);
+  border-radius: var(--squisq-page-radius);
+  padding: 0.18em 0.4em;
+}
+.squisq-page-stat-title { display: block; margin-top: 0.9em; font-size: 1.125rem; font-weight: 600; }
+.squisq-page-stat-body { display: block; margin-top: 0.45em; color: var(--squisq-page-text-muted); font-size: 0.95rem; }
+.squisq-page-stat-meta { text-align: center; margin-top: 1.5rem; color: var(--squisq-page-text-muted); font-size: 0.85rem; }
+.squisq-page-stat-bar { height: 10px; border-radius: 999px; background: var(--squisq-page-accent); margin-top: 0.8em; }
+.squisq-page-stat--bars { text-align: left; }
+
+/* \u2500\u2500 Quote band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-quote {
+  margin: 0;
+  font-family: var(--squisq-page-title-font);
+  font-size: 1.6rem;
+  line-height: 1.35;
+  white-space: pre-line;
+}
+.squisq-page-section--em-strong .squisq-page-quote { font-size: 2.1rem; }
+.squisq-page-section--em-quiet .squisq-page-quote { font-size: 1.25rem; color: var(--squisq-page-text-muted); }
+.squisq-page-quote-attribution { margin-top: 1.1em; font-family: var(--squisq-page-body-font); font-size: 0.95rem; color: var(--squisq-page-text-muted); }
+.squisq-page-quote-attribution::before { content: '\u2014 '; }
+.squisq-page[data-quote-mark='accent-bar'] .squisq-page-quote-figure { border-left: 4px solid var(--squisq-page-accent); padding-left: 1.5rem; }
+.squisq-page[data-quote-mark='oversized-glyph'] .squisq-page-quote-figure { position: relative; padding-top: 1.25rem; }
+.squisq-page[data-quote-mark='oversized-glyph'] .squisq-page-quote-figure::before {
+  content: '\\201C';
+  position: absolute;
+  top: -0.12em;
+  left: -0.05em;
+  font-family: var(--squisq-page-title-font);
+  font-size: 5.5rem;
+  line-height: 1;
+  color: color-mix(in srgb, var(--squisq-page-accent) 42%, transparent);
+  pointer-events: none;
+}
+.squisq-page-section--v-display .squisq-page-quote-figure { text-align: center; border-left: none; }
+.squisq-page-section--v-display .squisq-page-quote { font-size: 2.4rem; font-size: clamp(1.9rem, 5cqw, 3rem); }
+.squisq-page-section--v-editorial .squisq-page-quote-figure {
+  border-block: 3px solid var(--squisq-page-primary);
+  border-left: none;
+  padding: 2rem 0.5rem;
+}
+/* Full-bleed quote over media */
+.squisq-page-section--quote-band.squisq-page-section--bg-media { padding-block: 0; min-height: 380px; display: flex; align-items: center; }
+.squisq-page-section--quote-band.squisq-page-section--bg-media .squisq-page-section-inner { padding-block: 3.5rem; }
+.squisq-page-quote-backdrop { position: absolute; inset: 0; overflow: hidden; }
+.squisq-page-quote-backdrop img, .squisq-page-quote-backdrop video { width: 100%; height: 100%; object-fit: cover; }
+.squisq-page-quote-backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
+.squisq-page-section--quote-band[data-hint-vignette] .squisq-page-quote-backdrop::after {
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);
+}
+.squisq-page-section--quote-band.squisq-page-section--bg-media .squisq-page-quote-figure { border: none; text-align: center; }
+
+/* \u2500\u2500 Feature split \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
+.squisq-page-feature--media-right .squisq-page-feature-media { order: 2; }
+.squisq-page-feature-media img { width: 100%; object-fit: cover; }
+.squisq-page-feature-title { font-size: 1.75rem; }
+.squisq-page-feature-body { color: var(--squisq-page-text-muted); font-size: 1.05rem; white-space: pre-line; margin: 0; }
+
+/* \u2500\u2500 Media figure \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-figure { margin: 0; }
+.squisq-page-figure img, .squisq-page-figure video { width: 100%; display: block; }
+.squisq-page-figure figcaption { margin-top: 0.9em; font-size: 0.9rem; color: var(--squisq-page-text-muted); text-align: center; }
+.squisq-page-media-credit { font-size: 0.78rem; opacity: 0.75; }
+
+/* Media frame treatment (figures, features, gallery tiles, cards) */
+.squisq-page-media-frame { overflow: hidden; }
+.squisq-page[data-framing='rounded'] .squisq-page-media-frame { border-radius: var(--squisq-page-radius); }
+.squisq-page[data-framing='bordered'] .squisq-page-media-frame { border: 3px solid var(--squisq-page-text); }
+.squisq-page[data-framing='polaroid'] .squisq-page-media-frame {
+  background: #ffffff;
+  padding: 10px 10px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+.squisq-page[data-framing='letterboxed'] .squisq-page-media-frame img { aspect-ratio: 21 / 9; object-fit: cover; }
+.squisq-page[data-framing='circle-accent'] .squisq-page-media-frame { border-radius: calc(var(--squisq-page-radius) * 2); }
+.squisq-page .squisq-page-media-frame { box-shadow: var(--squisq-page-shadow); }
+
+/* Rich body nodes that the selected template did not consume. This universal
+ * supplement keeps diagrams/media visible without making every template
+ * duplicate the same preservation logic. */
+.squisq-page-rich-content {
+  margin-top: clamp(1.5rem, 4vw, 3rem);
+  padding-top: clamp(1.25rem, 3vw, 2rem);
+  border-top: 1px solid var(--squisq-page-divider-color);
+}
+.squisq-page-rich-content :is(img, video) { display: block; max-width: 100%; height: auto; margin-inline: auto; }
+.squisq-page-rich-content .squisq-md-mermaid { min-height: min(520px, 62vh); margin-block: 0; }
+
+/* \u2500\u2500 Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
+.squisq-page-gallery .squisq-page-media-frame img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
+.squisq-page-gallery-caption { margin-top: 1.1rem; text-align: center; font-size: 0.9rem; color: var(--squisq-page-text-muted); }
+
+/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-callout {
+  border-radius: var(--squisq-page-radius);
+  border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 32%, transparent);
+  border-left: 5px solid var(--squisq-page-accent);
+  background: color-mix(in srgb, var(--squisq-page-accent) 7%, var(--squisq-page-bg));
+  padding: 1.75rem 2rem;
+  box-shadow: var(--squisq-page-shadow);
+  display: flex;
+  gap: 1.75rem;
+  align-items: flex-start;
+}
+.squisq-page-callout-title { font-family: var(--squisq-page-title-font); font-size: 1.35rem; font-weight: 700; margin: 0 0 0.5em; }
+.squisq-page-callout-body { margin: 0; white-space: pre-line; }
+.squisq-page-callout-meta { margin-top: 0.9em; font-size: 0.82rem; color: var(--squisq-page-text-muted); }
+.squisq-page-callout .squisq-page-media-frame { flex: 0 0 132px; }
+.squisq-page-callout .squisq-page-media-frame img { width: 132px; height: 132px; object-fit: cover; }
+.squisq-page-callout[data-hint-framing='circle-accent'] .squisq-page-media-frame,
+.squisq-page-callout[data-hint-framing='circle-accent'] .squisq-page-media-frame img { border-radius: 50%; }
+.squisq-page-section--v-definition .squisq-page-callout-title { font-style: italic; }
+.squisq-page-section--v-diagnostic .squisq-page-callout { border-left-color: var(--squisq-page-highlight); }
+
+/* \u2500\u2500 Card grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
+.squisq-page-card {
+  border-radius: var(--squisq-page-radius);
+  background: var(--squisq-page-bg-alt);
+  border-top: 4px solid var(--squisq-page-card-accent, var(--squisq-page-accent));
+  padding: 1.75rem 1.75rem 1.9rem;
+  box-shadow: var(--squisq-page-shadow);
+}
+.squisq-page-card-title { font-family: var(--squisq-page-title-font); font-size: 1.3rem; margin: 0 0 0.4em; }
+.squisq-page-card-body { margin: 0; color: var(--squisq-page-text-muted); white-space: pre-line; }
+.squisq-page-cards-title { text-align: center; font-size: 1.9rem; margin-bottom: 1.75rem; }
+
+/* \u2500\u2500 Item list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-items { list-style: none; margin: 0; padding: 0; counter-reset: squisq-item; max-width: 40em; }
+.squisq-page-items li {
+  counter-increment: squisq-item;
+  position: relative;
+  padding: 0.9em 0 0.9em 3.4em;
+  font-size: 1.1rem;
+}
+.squisq-page-items li + li { border-top: 1px solid var(--squisq-page-divider-color); }
+.squisq-page-items li::before {
+  content: counter(squisq-item, decimal-leading-zero);
+  position: absolute;
+  left: 0;
+  top: 0.85em;
+  font-family: var(--squisq-page-title-font);
+  font-weight: 700;
+  color: var(--squisq-page-accent);
+  font-size: 1.15em;
+}
+.squisq-page[data-numerals='mono'] .squisq-page-items li::before { font-family: var(--squisq-page-mono-font); }
+.squisq-page-items-title { font-size: 1.9rem; }
+
+/* \u2500\u2500 Timeline rail (dateEvent) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-section--timeline-rail { padding-block: 1.4rem; }
+.squisq-page-section--timeline-rail:first-child { padding-top: var(--squisq-page-section-pad); }
+.squisq-page-milestone { display: grid; grid-template-columns: 150px 1fr; gap: 2rem; align-items: baseline; position: relative; }
+.squisq-page-milestone-date {
+  font-family: var(--squisq-page-title-font);
+  font-weight: 700;
+  color: var(--squisq-page-accent);
+  font-size: 1.05rem;
+  text-align: right;
+}
+.squisq-page-milestone-rail {
+  position: absolute;
+  left: 166px;
+  top: -1.4rem;
+  bottom: -1.4rem;
+  width: 2px;
+  background: color-mix(in srgb, var(--squisq-page-accent) 35%, transparent);
+}
+.squisq-page-milestone-rail::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0.55em;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  background: var(--squisq-page-accent);
+  border: 2px solid var(--squisq-page-bg);
+}
+.squisq-page-milestone-body { padding-left: 2.25rem; white-space: pre-line; }
+.squisq-page-milestone-footer { margin-top: 0.5em; font-size: 0.85rem; color: var(--squisq-page-text-muted); }
+
+/* \u2500\u2500 Table section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-table-title { font-size: 1.9rem; }
+.squisq-page-table-scroll { overflow-x: auto; border-radius: var(--squisq-page-radius); box-shadow: var(--squisq-page-shadow); }
+.squisq-page-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
+.squisq-page-table th {
+  background: var(--squisq-page-accent-bg);
+  color: var(--squisq-page-accent-text);
+  font-family: var(--squisq-page-title-font);
+  text-align: left;
+  padding: 0.8em 1em;
+}
+.squisq-page-table td { padding: 0.7em 1em; border-top: 1px solid var(--squisq-page-divider-color); }
+.squisq-page-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--squisq-page-text) 3.5%, transparent); }
+
+/* \u2500\u2500 Canvas embed (spatial SVG) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-canvas {
+  width: 100%;
+  margin-inline: auto;
+  overflow: hidden;
+  border-radius: var(--squisq-page-radius);
+}
+.squisq-page-canvas svg { display: block; width: 100%; height: 100%; }
+.squisq-page-canvas--framed { border: 1px solid var(--squisq-page-divider-color); box-shadow: var(--squisq-page-shadow); }
+.squisq-page-canvas--terminal { border: 1px solid color-mix(in srgb, var(--squisq-page-accent) 45%, transparent); }
+.squisq-page-canvas--terminal::before {
+  content: '\\25CF \\25CF \\25CF';
+  display: block;
+  font-size: 9px;
+  letter-spacing: 4px;
+  padding: 6px 12px;
+  color: color-mix(in srgb, var(--squisq-page-accent) 70%, transparent);
+  background: color-mix(in srgb, var(--squisq-page-accent) 9%, var(--squisq-page-bg));
+  border-bottom: 1px solid color-mix(in srgb, var(--squisq-page-accent) 30%, transparent);
+}
+
+/* \u2500\u2500 Prose \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-section--prose { padding-block: calc(var(--squisq-page-section-pad) * 0.45); }
+.squisq-page[data-divider] .squisq-page-section--prose + .squisq-page-section--prose { border-top: none; }
+.squisq-page-prose { font-size: 1.05rem; }
+.squisq-page-prose p { margin: 0; }
+.squisq-page-prose p + p { margin-top: 1.25em; }
+.squisq-page-prose > * + * { margin-top: 1.1em; }
+.squisq-page-prose a { color: var(--squisq-page-primary); text-decoration-color: color-mix(in srgb, var(--squisq-page-primary) 40%, transparent); }
+.squisq-page-prose code { font-family: var(--squisq-page-mono-font); font-size: 0.9em; background: color-mix(in srgb, var(--squisq-page-text) 8%, transparent); border-radius: 4px; padding: 0.12em 0.35em; }
+.squisq-page-prose pre { background: color-mix(in srgb, var(--squisq-page-text) 6%, transparent); border-radius: var(--squisq-page-radius); padding: 1em 1.25em; overflow-x: auto; }
+.squisq-page-prose pre code { background: none; padding: 0; }
+.squisq-page-prose blockquote { margin: 0; border-left: 4px solid var(--squisq-page-accent); padding-left: 1.25em; color: var(--squisq-page-text-muted); }
+.squisq-page-prose ul, .squisq-page-prose ol { padding-left: 1.5em; margin: 0; }
+.squisq-page-prose li + li { margin-top: 0.4em; }
+.squisq-page-prose hr { border: none; border-top: 1px solid var(--squisq-page-divider-color); }
+.squisq-page-prose table { width: 100%; border-collapse: collapse; }
+.squisq-page-prose th { font-family: var(--squisq-page-title-font); text-align: left; padding: 0.6em 0.8em; border-bottom: 2px solid var(--squisq-page-divider-color); }
+.squisq-page-prose td { padding: 0.55em 0.8em; border-bottom: 1px solid var(--squisq-page-divider-color); }
+.squisq-page-prose img { border-radius: var(--squisq-page-radius); }
+.squisq-page-prose h1, .squisq-page-prose h2, .squisq-page-prose h3,
+.squisq-page-prose h4, .squisq-page-prose h5, .squisq-page-prose h6 {
+  font-family: var(--squisq-page-title-font);
+  font-weight: var(--squisq-page-title-weight);
+  line-height: 1.2;
+  margin: 0 0 0.45em;
+}
+.squisq-page-prose h1 { font-size: 2.1rem; }
+.squisq-page-prose h2 { font-size: 1.65rem; }
+.squisq-page-prose h3 { font-size: 1.35rem; }
+.squisq-page-prose h4, .squisq-page-prose h5, .squisq-page-prose h6 { font-size: 1.15rem; }
+.squisq-page-section--prose[data-hint-drop-cap] .squisq-page-prose > p:first-child::first-letter {
+  font-family: var(--squisq-page-title-font);
+  font-size: 3.4em;
+  font-weight: 700;
+  float: left;
+  line-height: 0.85;
+  padding-right: 0.12em;
+  color: var(--squisq-page-accent);
+}
+
+/* \u2500\u2500 Footer band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page-section--footer { text-align: center; }
+
+/* \u2500\u2500 Thin-margin embedding (chat bubbles) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.squisq-page--thin .squisq-page-section-inner { padding-inline: 0; }
+.squisq-page--thin .squisq-page-section { padding-block: 1.5rem; }
+
+/* Thumbnail image mode */
+.squisq-page--thumbnail-images .squisq-page-prose img,
+.squisq-page--thumbnail-images .squisq-page-figure img { max-width: 100px; max-height: 100px; object-fit: cover; }
+
+/* \u2500\u2500 Reveal animation (progressive enhancement) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@media (prefers-reduced-motion: no-preference) {
+  .squisq-page-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
+  .squisq-page-reveal--in { opacity: 1; transform: none; }
+}
+
+/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@container squisq-page (max-width: 720px) {
+${NARROW_RULES}
+}
+@supports not (container-type: inline-size) {
+  @media (max-width: 720px) {
+${NARROW_RULES}
+  }
+}
+`;
+function buildPageCss(theme) {
+  const vars = buildPageCssVars(theme);
+  const varLines = Object.entries(vars).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  return `.squisq-page {
+${varLines}
+}
+${PAGE_BASE_CSS}`;
+}
+
 // src/doc/applyNarrationTiming.ts
 var MIN_BLOCK_SIMILARITY = 0.5;
 var MIN_V1_SCRIPT_SIMILARITY = 0.8;
 var PIN_CONFLICT_TOLERANCE_SEC = 1;
 function blockSpokenText(block) {
-  const title = block.title ? block.title.trim() : "";
+  const title2 = block.title ? block.title.trim() : "";
   const body = getBlockBodyText(block);
-  if (title && body) return `${title}
+  if (title2 && body) return `${title2}
 ${body}`;
-  return title || body;
+  return title2 || body;
 }
 function matchSidecarBlocks(flat, timing) {
   const ranges = /* @__PURE__ */ new Map();
@@ -716,10 +2096,11 @@ async function discoverNarrationAudio(container) {
     let timing = null;
     if (consolidatedSections) {
       const audioBase = stripAudioExtension(filename);
+      let matchedName = "";
       for (const [sectionName, sectionTiming] of Object.entries(consolidatedSections)) {
-        if (audioBase.endsWith(`-${sectionName}`)) {
+        if (audioBase.endsWith(`-${sectionName}`) && sectionName.length > matchedName.length) {
+          matchedName = sectionName;
           timing = sectionTiming;
-          break;
         }
       }
     }
@@ -1131,8 +2512,8 @@ function checkAssets(markdownDoc, blocks, hasAsset, diagnostics) {
         }
       }
       const images = source["images"];
-      const list = typeof images === "string" ? images.split(",").map((s) => s.trim()) : Array.isArray(images) ? images.filter((i) => typeof i === "string") : [];
-      for (const img of list) {
+      const list2 = typeof images === "string" ? images.split(",").map((s) => s.trim()) : Array.isArray(images) ? images.filter((i) => typeof i === "string") : [];
+      for (const img of list2) {
         report(img, block.sourceHeading?.position?.start.line, block.id);
       }
     }
@@ -1156,17 +2537,28 @@ function truncate(text, max = 40) {
 }
 
 // src/doc/asciiDiagram/render.ts
+function normalizeLabelLines(label) {
+  return label.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
+}
+function normalizeEdgeLabel(label) {
+  if (label === void 0) return void 0;
+  const collapsed = label.replace(/\s+/gu, " ").trim();
+  return collapsed.length > 0 ? collapsed : void 0;
+}
+function edgeLabelFitsBridge(text) {
+  return text.length <= MAX_BRIDGE_GAP;
+}
 var SIDE_MARGIN = 1;
-function renderAsciiDiagram(diagram, options = {}) {
-  const vocab = (options.style ?? diagram.style) === "ascii" ? ASCII_VOCAB : UNICODE_VOCAB;
-  if (diagram.nodes.length === 0) return "";
-  const placed = layoutNodes(diagram.nodes, diagram.edges);
+function renderAsciiDiagram(diagram2, options = {}) {
+  const vocab = (options.style ?? diagram2.style) === "ascii" ? ASCII_VOCAB : UNICODE_VOCAB;
+  if (diagram2.nodes.length === 0) return "";
+  const placed = layoutNodes(diagram2.nodes, diagram2.edges);
   const canvas = new Canvas();
   const drawOrder = [...placed.values()].sort(
     (a, b) => a.depth - b.depth || a.rect.r0 - b.rect.r0 || a.rect.c0 - b.rect.c0
   );
   for (const p of drawOrder) drawBox(canvas, p, vocab);
-  drawEdges(canvas, diagram.edges, placed, vocab);
+  drawEdges(canvas, diagram2.edges, placed, vocab);
   return canvas.emit();
 }
 function computeSideDegrees(nodes, edges) {
@@ -1197,9 +2589,9 @@ function layoutNodes(nodes, edges) {
   const roots = [];
   for (const node of nodes) {
     if (node.containerId && byId.has(node.containerId) && node.containerId !== node.id) {
-      const list = childIds.get(node.containerId) ?? [];
-      list.push(node.id);
-      childIds.set(node.containerId, list);
+      const list2 = childIds.get(node.containerId) ?? [];
+      list2.push(node.id);
+      childIds.set(node.containerId, list2);
     } else {
       roots.push(node.id);
     }
@@ -1239,10 +2631,10 @@ function layoutNodes(nodes, edges) {
   };
   const layoutSubtree = (id, depth) => {
     const node = byId.get(id);
-    const labelLines = node.label.length > 0 ? node.label.split("\n") : [];
+    const labelLines = normalizeLabelLines(node.label);
     const children = childIds.get(id) ?? [];
     if (children.length === 0) {
-      const innerW = labelLines.reduce((w, l) => Math.max(w, l.length), 0);
+      const innerW = labelLines.reduce((w, l) => Math.max(w, cellWidth(l)), 0);
       const deg = sideDeg.get(id) ?? { top: 0, bottom: 0, left: 0, right: 0 };
       const horizDeg = Math.max(deg.top, deg.bottom);
       const vertDeg = Math.max(deg.left, deg.right);
@@ -1265,14 +2657,15 @@ function layoutNodes(nodes, edges) {
     const childRects = placeSiblings(children, (childId) => layoutSubtree(childId, depth + 1));
     const bbox = unionRects(childRects);
     const extraRows = Math.max(0, labelLines.length - 1);
-    const titleLen = (labelLines[0] ?? "").length;
+    const titleLen = cellWidth(labelLines[0] ?? "");
     const rect = {
       r0: bbox.r0 - 2 - extraRows,
       c0: bbox.c0 - 2,
       r1: bbox.r1 + 2,
       c1: bbox.c1 + 2
     };
-    const minW = titleLen > 0 ? titleLen + 6 : 3;
+    const innerLinesW = labelLines.slice(1).reduce((w, l) => Math.max(w, cellWidth(l)), 0);
+    const minW = Math.max(titleLen > 0 ? titleLen + 6 : 3, innerLinesW > 0 ? innerLinesW + 4 : 3);
     if (rect.c1 - rect.c0 + 1 < minW) rect.c1 = rect.c0 + minW - 1;
     if (rect.c1 - rect.c0 + 1 < node.wCols) rect.c1 = rect.c0 + node.wCols - 1;
     placed.set(id, { node, rect, labelLines, isContainer: true, depth });
@@ -1366,12 +2759,12 @@ function drawBox(canvas, p, vocab) {
   const innerW = rect.c1 - rect.c0 - 1;
   canvas.set(rect.r0, rect.c0, vocab.tl, "border");
   canvas.set(rect.r0, rect.c1, vocab.tr, "border");
-  const title = isContainer && labelLines.length > 0 ? ` ${labelLines[0]} ` : null;
-  if (title && title.length <= innerW - 2) {
-    const left = Math.floor((innerW - title.length) / 2);
+  const title2 = isContainer && labelLines.length > 0 ? toCells(` ${labelLines[0]} `) : null;
+  if (title2 && title2.length <= innerW - 2) {
+    const left = Math.floor((innerW - title2.length) / 2);
     for (let i = 0; i < innerW; i++) {
-      const inTitle = i >= left && i < left + title.length;
-      const ch = inTitle ? title[i - left] : vocab.h;
+      const inTitle = i >= left && i < left + title2.length;
+      const ch = inTitle ? title2[i - left] : vocab.h;
       canvas.set(rect.r0, rect.c0 + 1 + i, ch, inTitle ? "label" : "border");
     }
   } else {
@@ -1389,9 +2782,10 @@ function drawBox(canvas, p, vocab) {
     const innerH = rect.r1 - rect.r0 - 1;
     const startRow = isContainer ? rect.r0 + 1 : rect.r0 + 1 + Math.max(0, Math.floor((innerH - interiorLines.length) / 2));
     interiorLines.forEach((line, i) => {
-      const pad = Math.max(0, Math.floor((innerW - line.length) / 2));
-      for (let j = 0; j < line.length && pad + j < innerW; j++) {
-        canvas.set(startRow + i, rect.c0 + 1 + pad + j, line[j], "label");
+      const cells = toCells(line);
+      const pad = Math.max(0, Math.floor((innerW - cells.length) / 2));
+      for (let j = 0; j < cells.length && pad + j < innerW; j++) {
+        canvas.set(startRow + i, rect.c0 + 1 + pad + j, cells[j], "label");
       }
     });
   }
@@ -1443,24 +2837,25 @@ function drawEdges(canvas, edges, placed, vocab) {
     )
   );
   for (const req of sideLabelRequests) {
+    const cells = toCells(req.label);
     let done = false;
     for (const side of ["right", "left"]) {
       if (done) break;
       for (const { row, col } of req.candidates) {
         if (canvas.kindAt(row, col) !== "line-v") continue;
-        const startCol = side === "right" ? col + 2 : col - 1 - req.label.length;
+        const startCol = side === "right" ? col + 2 : col - 1 - cells.length;
         if (startCol < 0) continue;
         const gapCol = side === "right" ? col + 1 : col - 1;
         let free = canvas.kindAt(row, gapCol) === "empty";
-        for (let i = 0; free && i < req.label.length; i++) {
+        for (let i = 0; free && i < cells.length; i++) {
           if (canvas.kindAt(row, startCol + i) !== "empty") free = false;
         }
         if (free && side === "left" && startCol > 0) {
           free = canvas.kindAt(row, startCol - 1) === "empty";
         }
         if (!free) continue;
-        for (let i = 0; i < req.label.length; i++) {
-          canvas.set(row, startCol + i, req.label[i], "label");
+        for (let i = 0; i < cells.length; i++) {
+          canvas.set(row, startCol + i, cells[i], "label");
         }
         done = true;
         break;
@@ -1497,10 +2892,10 @@ function assignAttachments(plans, placed) {
     ]);
   });
   const result = /* @__PURE__ */ new Map();
-  for (const [sideKey, list] of [...bySide.entries()].sort((a, b) => a[0].localeCompare(b[0]))) {
+  for (const [sideKey, list2] of [...bySide.entries()].sort((a, b) => a[0].localeCompare(b[0]))) {
     const [nodeId, side] = sideKey.split("|");
     const node = placed.get(nodeId);
-    list.sort((a, b) => {
+    list2.sort((a, b) => {
       const ra = placed.get(a.otherId).rect;
       const rb = placed.get(b.otherId).rect;
       return ra.r0 - rb.r0 || ra.c0 - rb.c0 || a.otherId.localeCompare(b.otherId);
@@ -1509,13 +2904,13 @@ function assignAttachments(plans, placed) {
     const from = horizontal ? node.rect.c0 + 1 : node.rect.r0 + 1;
     const to = horizontal ? node.rect.c1 - 1 : node.rect.r1 - 1;
     const inner = Math.max(1, to - from + 1);
-    const k = list.length;
+    const k = list2.length;
     if (k === 1) {
-      result.set(list[0].key, { pos: from + Math.floor((inner - 1) / 2), index: 0, count: 1 });
+      result.set(list2[0].key, { pos: from + Math.floor((inner - 1) / 2), index: 0, count: 1 });
     } else {
       const span = 2 * k - 1;
       const start = from + Math.max(0, Math.floor((inner - span) / 2));
-      list.forEach((req, i) => {
+      list2.forEach((req, i) => {
         result.set(req.key, { pos: Math.min(to, start + 2 * i), index: i, count: k });
       });
     }
@@ -1539,7 +2934,7 @@ function routeEdge(canvas, plan, planIdx, placed, attachment, vocab, deferSideLa
     canvas,
     directed: plan.edge.directed,
     biDir: plan.biDir,
-    label: plan.edge.label,
+    label: normalizeEdgeLabel(plan.edge.label),
     vocab,
     junction,
     stagger,
@@ -1637,8 +3032,8 @@ function drawVertical(args, s, t, exitCol, enterCol, dir) {
     const hi = Math.max(exitCol, enterCol);
     let segment = [];
     for (let c = lo + 1; c <= hi - 1; c++) segment.push(vocab.h);
-    if (label && segment.length >= label.length + 4) {
-      const text = ` ${label} `;
+    const text = label ? toCells(` ${label} `) : null;
+    if (text && edgeLabelFitsBridge(text) && segment.length >= text.length + 2) {
       const left = Math.floor((segment.length - text.length) / 2);
       segment = segment.map((ch, i) => i >= left && i < left + text.length ? text[i - left] : ch);
       labelEmbedded = true;
@@ -1693,15 +3088,22 @@ function drawHorizontal(args, s, t, exitRow, enterRow, dir) {
   const firstFree = exitCol + dir;
   const lastFree = enterCol - dir;
   const gap = (lastFree - firstFree) * dir + 1;
-  const drawH = (row, cA, cB, hostLabel) => {
+  const drawH = (row, cA, cB, hostLabel, reserveLo = 0, reserveHi = 0) => {
     const lo = Math.min(cA, cB);
     const hi = Math.max(cA, cB);
     let segment = [];
     for (let c = lo; c <= hi; c++) segment.push(vocab.h);
-    if (hostLabel && label && segment.length >= label.length + 4) {
-      const text = ` ${label} `;
-      const left = Math.floor((segment.length - text.length) / 2);
-      segment = segment.map((ch, i) => i >= left && i < left + text.length ? text[i - left] : ch);
+    const text = hostLabel && label ? toCells(` ${label} `) : null;
+    if (text && edgeLabelFitsBridge(text)) {
+      const from = reserveLo;
+      const to = segment.length - 1 - reserveHi;
+      const room = to - from + 1;
+      if (room >= text.length + 2) {
+        const left = from + Math.floor((room - text.length) / 2);
+        segment = segment.map(
+          (ch, i) => i >= left && i < left + text.length ? text[i - left] : ch
+        );
+      }
     }
     segment.forEach((ch, i) => {
       canvas.drawEdgeCell(row, lo + i, ch, ch === vocab.h ? "line-h" : "label", vocab);
@@ -1714,7 +3116,14 @@ function drawHorizontal(args, s, t, exitRow, enterRow, dir) {
     junction(sRow, exitCol, dir === 1 ? "right" : "left");
     junction(tRow, enterCol, dir === 1 ? "left" : "right");
     if (sRow === tRow && gap >= 1) {
-      drawH(sRow, firstFree, lastFree, true);
+      drawH(
+        sRow,
+        firstFree,
+        lastFree,
+        true,
+        (dir === 1 ? biDir : directed) ? 1 : 0,
+        (dir === 1 ? directed : biDir) ? 1 : 0
+      );
       if (directed) {
         canvas.drawEdgeCell(
           sRow,
@@ -1743,7 +3152,16 @@ function drawHorizontal(args, s, t, exitRow, enterRow, dir) {
   );
   junction(exitRow, exitCol, dir === 1 ? "right" : "left");
   junction(enterRow, enterCol, dir === 1 ? "left" : "right");
-  if (Math.abs(midCol - exitCol) >= 2) drawH(exitRow, firstFree, midCol - dir, true);
+  if (Math.abs(midCol - exitCol) >= 2) {
+    drawH(
+      exitRow,
+      firstFree,
+      midCol - dir,
+      true,
+      dir === 1 && biDir ? 1 : 0,
+      dir === -1 && biDir ? 1 : 0
+    );
+  }
   if (Math.abs(enterCol - midCol) >= 2) drawH(enterRow, midCol + dir, lastFree, false);
   if (exitRow === enterRow) {
     canvas.drawEdgeCell(exitRow, midCol, vocab.h, "line-h", vocab);
@@ -1848,8 +3266,8 @@ function repairAsciiDiagram(text) {
   const nodes = buildNodes(grid, rects);
   const edges = recoverEdges(grid, rects, nodes);
   const style = detectGridStyle(grid);
-  const diagram = { nodes, edges, style, warnings: ["repaired"] };
-  return { diagram, art: renderAsciiDiagram(diagram) };
+  const diagram2 = { nodes, edges, style, warnings: ["repaired"] };
+  return { diagram: diagram2, art: renderAsciiDiagram(diagram2) };
 }
 function dedupeRects(rects) {
   const seen = /* @__PURE__ */ new Set();
@@ -2090,10 +3508,10 @@ var MIN_AXIS_WIDTH = 48;
 var MAX_COORDINATE_AXIS_WIDTH = 64;
 var EVENT_SPACING = 3;
 var TERMINAL_RAIL_LENGTH = 3;
-function renderAsciiTimeline(timeline, options = {}) {
-  const style = options.style ?? timeline.style;
+function renderAsciiTimeline(timeline2, options = {}) {
+  const style = options.style ?? timeline2.style;
   const vocab = style === "ascii" ? ASCII_VOCAB2 : UNICODE_VOCAB2;
-  const { tracks, links } = prepareTimeline(timeline, style);
+  const { tracks, links } = prepareTimeline(timeline2, style);
   if (tracks.length === 0) return "";
   const globalStart = Math.min(...tracks.map((track) => track.startColumn));
   const globalEnd = Math.max(...tracks.map((track) => track.endColumn));
@@ -2200,8 +3618,8 @@ function renderLink(link, style) {
   const arrow = style === "ascii" ? "->" : "\u2192";
   return `branch: ${link.source} ${arrow} ${link.target}${link.label ? ` : ${link.label}` : ""}`;
 }
-function prepareTimeline(timeline, style) {
-  const sourceTracks = timeline.tracks.map((track, index) => ({ track, index })).filter(({ track }) => Array.isArray(track.events) && track.events.length > 0).sort(
+function prepareTimeline(timeline2, style) {
+  const sourceTracks = timeline2.tracks.map((track, index) => ({ track, index })).filter(({ track }) => Array.isArray(track.events) && track.events.length > 0).sort(
     (a, b) => finiteOr(a.track.row, a.index) - finiteOr(b.track.row, b.index) || a.index - b.index || a.track.id.localeCompare(b.track.id)
   );
   const usedTrackIds = /* @__PURE__ */ new Set();
@@ -2260,7 +3678,7 @@ function prepareTimeline(timeline, style) {
   }
   const resolveEndpoint = (value) => endpointIds.get(value) ?? labelIds.get(slug(value));
   const links = [];
-  for (const link of Array.isArray(timeline.links) ? timeline.links : []) {
+  for (const link of Array.isArray(timeline2.links) ? timeline2.links : []) {
     const source = resolveEndpoint(link.source);
     const target = resolveEndpoint(link.target);
     if (!source || !target) continue;
@@ -2318,10 +3736,17 @@ function formatCoordinate(value) {
 }
 
 // src/doc/treeview/render.ts
-function renderTree(tree, options = {}) {
-  const vocab = (options.style ?? tree.style) === "ascii" ? ASCII_TREE_VOCAB : UNICODE_TREE_VOCAB;
+function normalizeText(text) {
+  return text.replace(/\s+/gu, " ").trim();
+}
+function renderTree(tree2, options = {}) {
+  const vocab = (options.style ?? tree2.style) === "ascii" ? ASCII_TREE_VOCAB : UNICODE_TREE_VOCAB;
   const lines = [];
-  const label = (node) => node.comment ? `${node.label}  # ${node.comment}` : node.label;
+  const label = (node) => {
+    const text = normalizeText(node.label);
+    const comment = node.comment ? normalizeText(node.comment) : "";
+    return comment ? `${text}  # ${comment}` : text;
+  };
   const walk = (nodes, prefix) => {
     nodes.forEach((node, i) => {
       const last = i === nodes.length - 1;
@@ -2329,7 +3754,7 @@ function renderTree(tree, options = {}) {
       walk(node.children, prefix + (last ? vocab.gap : vocab.rail));
     });
   };
-  for (const root of tree.roots) {
+  for (const root of tree2.roots) {
     lines.push(label(root));
     walk(root.children, "");
   }
@@ -2344,6 +3769,16 @@ export {
   cssFilterForTreatment,
   docToMarkdown,
   resolveThemeForDoc,
+  isTemplatedPageBlock,
+  resolvePageBlock,
+  sectionExtractors,
+  resolvePageStyle,
+  materializePageSection,
+  materializePageSections,
+  buildPageCssVars,
+  pageStyleDataAttributes,
+  PAGE_BASE_CSS,
+  buildPageCss,
   applyNarrationTiming,
   scoreTextSimilarity,
   resolveAudioMapping,
@@ -2355,4 +3790,3 @@ export {
   renderAsciiTimeline,
   renderTree
 };
-//# sourceMappingURL=chunk-TFJVXUHH.js.map