@bendyline/squisq 2.13.2 → 2.13.4

package/dist/{chunk-YY3OQ3MI.js → chunk-J2NFT7GH.js}

@@ -10,6 +10,7 @@ import {
   extractEmbeddedVideos,
   extractHostedVideos,
   extractImages,
+  extractMediaFromContents,
   extractRichListItems,
   extractTableFromContents,
   isEligibleAsciiFenceLang,
@@ -19,15 +20,19 @@ import {
   isExplicitTimelineLang,
   isExplicitTreeLang,
   isMaterializedMediaNode,
+  isMediaAnnotationName,
   isPictureFence,
+  isPictureParagraph,
   markdownBlockSeparatorLines,
+  parseAnnotationInner,
   parseAsciiDiagram,
   parseAsciiTimeline,
+  parseStandaloneAnnotation,
   pickAutoTemplate,
   profileBlockContents,
   renderMarkdownBlocksHtml,
   treeToTemplateData
-} from "./chunk-HGCIIXHP.js";
+} from "./chunk-POZCKPCO.js";
 import {
   anchorPoint,
   base64ToUtf8,
@@ -58,33 +63,25 @@ import {
   validateTheme,
   withAlpha
 } from "./chunk-WNEH3BZP.js";
-import {
-  mediaEditValuesFromAttributes,
-  mediaEditValuesFromParams,
-  parseMediaEdits
-} from "./chunk-L7QZORLB.js";
 import {
   TABLE_FED_TEMPLATES,
   isContainerTemplate,
-  matchTrailingTemplateAnnotation,
-  resolveTemplateName,
-  splitKeyValueToken,
-  tokenizeAttrTokens
-} from "./chunk-Y25EJEZN.js";
+  resolveTemplateName
+} from "./chunk-DOOUVVOM.js";
 import {
   KNOWN_BLOCK_META_KEYS,
   coerceAnnotationValues,
   extractPlainText,
   isSvgIslandLang,
   isVideoEmbedUrl,
+  matchTrailingTemplateAnnotation,
   mediaKindForUrl,
   parseNumber,
   parseSvgIsland,
-  parseTimeSeconds,
   parseVideoEmbedUrl,
   readFrontmatterThemeId,
   walkMarkdownTree
-} from "./chunk-HE3HQZWU.js";
+} from "./chunk-6NWVLLMI.js";
 import {
   resolveBlockTransition
 } from "./chunk-P53Z4RYC.js";
@@ -1292,6 +1289,131 @@ function sectionHeader(input, context) {
   return layers;
 }
 
+// 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;
+}
+var DISPLAY_CHAR_EM = {
+  space: 0.27,
+  narrowLower: 0.36,
+  wideLower: 0.86,
+  lower: 0.57,
+  narrowUpper: 0.4,
+  wideUpper: 0.95,
+  upper: 0.7,
+  digit: 0.57,
+  punct: 0.34,
+  other: 0.62
+};
+function displayCharEm(ch) {
+  if (ch === " ") return DISPLAY_CHAR_EM.space;
+  if ("fijlrt".includes(ch)) return DISPLAY_CHAR_EM.narrowLower;
+  if (ch === "m" || ch === "w") return DISPLAY_CHAR_EM.wideLower;
+  if (ch >= "a" && ch <= "z") return DISPLAY_CHAR_EM.lower;
+  if (ch === "I" || ch === "J") return DISPLAY_CHAR_EM.narrowUpper;
+  if (ch === "M" || ch === "W") return DISPLAY_CHAR_EM.wideUpper;
+  if (ch >= "A" && ch <= "Z") return DISPLAY_CHAR_EM.upper;
+  if (ch >= "0" && ch <= "9") return DISPLAY_CHAR_EM.digit;
+  if (".,:;-/'\u2019!?()".includes(ch)) return DISPLAY_CHAR_EM.punct;
+  return DISPLAY_CHAR_EM.other;
+}
+function estimateDisplayTextWidth(text, fontSize) {
+  let em = 0;
+  for (const ch of text.normalize("NFD").replace(/\p{M}/gu, "")) em += displayCharEm(ch);
+  return em * fontSize;
+}
+
+// src/doc/templates/frostedPlate.ts
+var FROSTED_PAD_X_EM = 0.45;
+var FROSTED_PAD_Y_EM = 0.3;
+var FROSTED_RADIUS_EM = 0.3;
+var FROSTED_BLUR_SHARE = 0.0167;
+var FROSTED_TINT_UNDER_LIGHT_TEXT = "rgba(12, 12, 14, 0.26)";
+var FROSTED_TINT_UNDER_DARK_TEXT = "rgba(250, 250, 250, 0.5)";
+var FROSTED_BACKDROP_CONTRAST = 0.65;
+function frostedUnderLightText(context) {
+  return relativeLuminance(context.theme.colors.text) > 0.5;
+}
+function frostedBlurPx(context) {
+  const { width, height } = context.viewport;
+  return Math.round(FROSTED_BLUR_SHARE * Math.min(width, height));
+}
+function pct(value, total) {
+  return `${Math.round(value / total * 1e4) / 100}%`;
+}
+function frostedPlateLayer(id, plate, context) {
+  const { viewport } = context;
+  const lightText = frostedUnderLightText(context);
+  return {
+    type: "shape",
+    id,
+    content: {
+      shape: "rect",
+      fill: lightText ? FROSTED_TINT_UNDER_LIGHT_TEXT : FROSTED_TINT_UNDER_DARK_TEXT,
+      borderRadius: Math.round(plate.radius),
+      backdropBlur: frostedBlurPx(context),
+      ...lightText ? { backdropContrast: FROSTED_BACKDROP_CONTRAST } : {}
+    },
+    position: {
+      x: pct(plate.x, viewport.width),
+      y: pct(plate.y, viewport.height),
+      width: pct(plate.width, viewport.width),
+      height: pct(plate.height, viewport.height)
+    }
+  };
+}
+var INK_EM = {
+  xHeight: 0.45,
+  capital: 0.67,
+  ascent: 0.71,
+  accentedCapital: 0.8,
+  descent: 0.2,
+  comma: 0.155
+};
+function opticalCentreShiftEm(lines) {
+  const first = (lines[0] ?? "").normalize("NFD");
+  const last = lines[lines.length - 1] ?? "";
+  const top = /[A-Z]\p{M}/u.test(first) ? INK_EM.accentedCapital : /[bdfhklt]|[a-z]\p{M}/u.test(first) ? INK_EM.ascent : /[A-Z0-9]/.test(first) ? INK_EM.capital : INK_EM.xHeight;
+  const bottom = /[gjpqyQ]/.test(last) ? INK_EM.descent : /[,;]/.test(last) ? INK_EM.comma : 0;
+  return Math.round(((top - bottom) / 2 - INK_EM.xHeight / 2) * 1e3) / 1e3;
+}
+function wrapDisplayLine(line, fontSize, maxWidth) {
+  const lines = [];
+  let current = "";
+  for (const word of line.trim().split(/\s+/).filter(Boolean)) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (!current || estimateDisplayTextWidth(candidate, fontSize) <= maxWidth) {
+      current = candidate;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines.length > 0 ? lines : [""];
+}
+function balancedDisplayLines(line, fontSize, maxWidth) {
+  const greedy = wrapDisplayLine(line, fontSize, maxWidth);
+  if (greedy.length < 2) return greedy;
+  let lo = Math.max(
+    ...line.split(/\s+/).filter(Boolean).map((word) => estimateDisplayTextWidth(word, fontSize))
+  );
+  let hi = maxWidth;
+  if (lo >= hi) return greedy;
+  while (hi - lo > 0.5) {
+    const mid = (lo + hi) / 2;
+    if (wrapDisplayLine(line, fontSize, mid).length <= greedy.length) hi = mid;
+    else lo = mid;
+  }
+  return wrapDisplayLine(line, fontSize, hi);
+}
+function frostedTitleBoxWidth(lines, fontSize, textWidth) {
+  const longestChars = Math.max(...lines.map((line) => line.length));
+  return Math.max(textWidth, longestChars * fontSize * 0.5 + 1);
+}
+
 // src/doc/templates/bigText.ts
 var BIG_TEXT_LINE_HEIGHT = 1.05;
 var BIG_TEXT_WIDTH_FRACTION = 0.92;
@@ -1341,6 +1463,65 @@ function fitBigTextSize(title, viewport, heightFraction = BIG_TEXT_HEIGHT_FRACTI
   }
   return Math.floor(low);
 }
+var BIG_TEXT_FROSTED_WIDTH_FRACTION = 0.9;
+var BIG_TEXT_FROSTED_HEIGHT_SHARE = 0.45;
+function frostedBigTextLayout(displayTitle, viewport, band = BIG_TEXT_BANDS.center) {
+  const maxPlateWidth = viewport.width * BIG_TEXT_FROSTED_WIDTH_FRACTION;
+  const maxPlateHeight = Math.min(
+    viewport.height * band.height,
+    Math.min(viewport.width, viewport.height) * BIG_TEXT_FROSTED_HEIGHT_SHARE
+  );
+  const wrapAt = (size) => {
+    const column2 = maxPlateWidth - 2 * FROSTED_PAD_X_EM * size;
+    const lines2 = displayTitle.split("\n").flatMap((line) => balancedDisplayLines(line, size, Math.max(1, column2)));
+    const width2 = Math.max(...lines2.map((line) => estimateDisplayTextWidth(line, size)));
+    return { lines: lines2, width: width2, column: column2 };
+  };
+  const fits = (size) => {
+    const { lines: lines2, width: width2, column: column2 } = wrapAt(size);
+    const height = (lines2.length * BIG_TEXT_LINE_HEIGHT + 2 * FROSTED_PAD_Y_EM) * size;
+    return width2 <= column2 && height <= maxPlateHeight;
+  };
+  let low = BIG_TEXT_MIN_PX;
+  let high = maxPlateHeight / (BIG_TEXT_LINE_HEIGHT + 2 * FROSTED_PAD_Y_EM);
+  if (high > low && fits(low)) {
+    for (let i = 0; i < 24; i += 1) {
+      const mid = (low + high) / 2;
+      if (fits(mid)) low = mid;
+      else high = mid;
+    }
+  }
+  const fontSize = Math.floor(low);
+  const { lines, width, column } = wrapAt(fontSize);
+  const textWidth = Math.min(width, column);
+  const textHeight = lines.length * fontSize * BIG_TEXT_LINE_HEIGHT;
+  const padX = FROSTED_PAD_X_EM * fontSize;
+  const padY = FROSTED_PAD_Y_EM * fontSize;
+  const plateWidth = textWidth + 2 * padX;
+  const plateHeight = textHeight + 2 * padY;
+  const cx = viewport.width / 2;
+  const cy = viewport.height * band.y;
+  return {
+    fontSize,
+    lines,
+    plate: {
+      x: cx - plateWidth / 2,
+      y: cy - plateHeight / 2,
+      width: plateWidth,
+      height: plateHeight,
+      radius: FROSTED_RADIUS_EM * fontSize
+    },
+    // As on the frosted cover, the box spans the padding: shrink-to-fit measures the
+    // font's whole ascent and descent, more than a line of display type.
+    title: {
+      cx,
+      cy,
+      width: frostedTitleBoxWidth(lines, fontSize, textWidth),
+      height: plateHeight
+    },
+    baselineShift: opticalCentreShiftEm(lines)
+  };
+}
 function bigTextBloom(background, centerY = 0.5) {
   return `radial-gradient(ellipse at 50% ${Math.round(centerY * 100)}%, ${withAlpha(background, 0.92)} 0%, ${withAlpha(background, 0.78)} 38%, ${withAlpha(background, 0.32)} 66%, ${withAlpha(background, 0)} 88%)`;
 }
@@ -1350,27 +1531,28 @@ function bigText(input, context) {
   const band = BIG_TEXT_BANDS[input.placement ?? "center"] ?? BIG_TEXT_BANDS.center;
   const treatment = themedImageTreatment(context, input.imageTreatment);
   const displayTitle = title.toUpperCase();
+  const frosted = input.backdrop === "frosted" && !!imageSrc;
   const titleFontSize = fitBigTextSize(displayTitle, viewport, band.height);
   const layers = [];
   if (imageSrc) {
-    layers.push(
-      {
-        type: "image",
-        id: "bigtext-image",
-        content: {
-          src: imageSrc,
-          alt: imageAlt || title,
-          fit: "cover",
-          ...treatment ? { treatment } : {}
-        },
-        position: { x: 0, y: 0, width: "100%", height: "100%" },
-        animation: mapAmbientMotion(ambientMotion, 8) ?? {
-          type: "slowZoom",
-          duration: 8,
-          direction: "in"
-        }
+    layers.push({
+      type: "image",
+      id: "bigtext-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt || title,
+        fit: "cover",
+        ...treatment ? { treatment } : {}
       },
-      {
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: mapAmbientMotion(ambientMotion, 8) ?? {
+        type: "slowZoom",
+        duration: 8,
+        direction: "in"
+      }
+    });
+    if (!frosted) {
+      layers.push({
         type: "shape",
         id: "bigtext-bloom",
         content: {
@@ -1378,8 +1560,8 @@ function bigText(input, context) {
           fill: bigTextBloom(theme.colors.background, band.y)
         },
         position: { x: 0, y: 0, width: "100%", height: "100%" }
-      }
-    );
+      });
+    }
   } else {
     layers.push(
       {
@@ -1402,6 +1584,38 @@ function bigText(input, context) {
       }
     );
   }
+  if (frosted) {
+    const layout = frostedBigTextLayout(displayTitle, viewport, band);
+    const lightText = frostedUnderLightText(context);
+    layers.push(frostedPlateLayer("bigtext-plate", layout.plate, context), {
+      type: "text",
+      id: "bigtext-title",
+      content: {
+        text: layout.lines.join("\n"),
+        style: {
+          fontSize: layout.fontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          verticalAlign: "middle",
+          lineHeight: BIG_TEXT_LINE_HEIGHT,
+          baselineShift: layout.baselineShift,
+          shadow: lightText,
+          shrinkToFit: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: pct(layout.title.cy, viewport.height),
+        anchor: "center",
+        width: pct(layout.title.width, viewport.width),
+        height: pct(layout.title.height, viewport.height)
+      },
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1 })
+    });
+    return layers;
+  }
   layers.push({
     type: "text",
     id: "bigtext-title",
@@ -2965,6 +3179,17 @@ function rightFeature(input, context) {
   return buildFeatureLayers(input, context, "right");
 }
 
+// src/doc/templates/mediaFeatureBlock.ts
+function topFeature(input, context) {
+  return contentBlock({ ...input, template: "content" }, context, { omitPictures: true });
+}
+function bottomFeature(input, context) {
+  return contentBlock({ ...input, template: "content" }, context, { omitPictures: true });
+}
+function mediaOnly(input, context) {
+  return contentBlock({ ...input, template: "content" }, context);
+}
+
 // src/doc/templates/mapBlock.ts
 function mapBlock(input, context) {
   const {
@@ -5524,6 +5749,30 @@ var BLOCK_MEDIA_LAYOUT_POLICIES = {
     additionalMediaLayout: "overlay-inset",
     unconsumedMedia: "retain-native-layout"
   },
+  topFeature: {
+    summary: "Body media spans the full width across the top; the heading and complete body take a band below sized to the text. Without media it is a content slide.",
+    noMedia: "template-default",
+    ownership: "native-slot",
+    nativeLayout: "feature-top",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  bottomFeature: {
+    summary: "The heading and complete body take a band across the top sized to the text; body media spans the full width below. Without media it is a content slide.",
+    noMedia: "template-default",
+    ownership: "native-slot",
+    nativeLayout: "feature-bottom",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  mediaOnly: {
+    summary: "Body media fills the whole slide with no text; without media the heading and body render as a content slide.",
+    noMedia: "template-default",
+    ownership: "native-slot",
+    nativeLayout: "full-frame",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
   map: {
     summary: "The map canvas is the primary visual; other media must not reflow its geography.",
     noMedia: "intrinsic-visual",
@@ -6198,12 +6447,144 @@ function leastObstructedMediaRect(layers, viewport) {
     return score < bestScore ? candidate : best;
   });
 }
+var MEDIA_BANDS = {
+  "feature-top": "top",
+  "feature-bottom": "bottom",
+  "full-frame": "full"
+};
+var BLOCK_GAP_EM = 0.55;
+function textLayer(layers, id) {
+  const layer = layers.find((candidate) => candidate.id === id);
+  return layer?.type === "text" ? layer : void 0;
+}
+function mediaBandLayout(layers, viewport, band, aspect) {
+  const backdrop = layers.filter((layer) => isFullViewportBackground(layer, viewport));
+  const title = textLayer(layers, "title");
+  const body = textLayer(layers, "body");
+  if (band === "full" || !title && !body) {
+    return { layers: backdrop, mediaRect: rect(viewport, 0, 0, 1, 1), framed: false };
+  }
+  const { width, height } = viewport;
+  const unit = Math.min(width, height);
+  const margin = unit * 0.045;
+  const gap = unit * 0.03;
+  const innerGap = title && body ? unit * 0.02 : 0;
+  const textWidth = width - margin * 2;
+  const maxBandHeight = height * (body ? 0.4 : 0.2);
+  const titleLineHeight = title?.content.style.lineHeight ?? 1.15;
+  const titleBaseSize = Math.max(
+    title?.content.style.fontSize ?? 0,
+    Math.round((body?.content.style.fontSize ?? 0) * 1.2)
+  );
+  const titleWrapWidth = title ? Math.min(
+    textWidth * 0.86,
+    fitWrapWidth(
+      title.content.text,
+      titleBaseSize,
+      textWidth,
+      title.content.style.fontFamily ?? ""
+    )
+  ) : textWidth;
+  const titleFit = title ? fitProse({
+    text: title.content.text,
+    baseFontSize: titleBaseSize,
+    minFontSize: Math.min(titleBaseSize, unit * 0.03),
+    maxWidthPx: titleWrapWidth,
+    maxHeightPx: body ? maxBandHeight * 0.35 : maxBandHeight,
+    lineHeight: titleLineHeight
+  }) : void 0;
+  const titleHeight = titleFit?.heightPx ?? 0;
+  const bodyRoom = maxBandHeight - titleHeight - innerGap;
+  const bodyLineHeight = body?.content.style.lineHeight ?? 1.35;
+  const blockGaps = body ? (body.content.text.match(/\n[^\S\n]*\n/g) ?? []).length : 0;
+  const bodyBaseSize = body?.content.style.fontSize ?? 0;
+  const headroomLines = 1;
+  const bodyText3 = body?.content.text.replace(/\n[^\S\n]*\n/g, "\n") ?? "";
+  const bodyFit = body ? fitProse({
+    text: bodyText3,
+    baseFontSize: bodyBaseSize,
+    minFontSize: Math.min(bodyBaseSize, unit * 0.016),
+    // HTML wraps on real glyphs; wide ones (CJK, emoji) fill lines in
+    // half the characters the estimate assumes, so count lines narrower.
+    maxWidthPx: fitWrapWidth(
+      bodyText3,
+      bodyBaseSize,
+      textWidth,
+      body.content.style.fontFamily ?? ""
+    ),
+    maxHeightPx: bodyRoom - (blockGaps * BLOCK_GAP_EM + headroomLines * bodyLineHeight) * bodyBaseSize,
+    lineHeight: bodyLineHeight
+  }) : void 0;
+  const bodyHeight = bodyFit ? Math.min(
+    bodyRoom,
+    bodyFit.heightPx + (blockGaps * BLOCK_GAP_EM + headroomLines * bodyLineHeight) * bodyFit.fontSize
+  ) : 0;
+  const bandHeight = titleHeight + innerGap + bodyHeight;
+  const roomForMedia = height - margin - gap - bandHeight;
+  const mediaHeight = aspect && Number.isFinite(aspect) && aspect > 0 ? Math.min(roomForMedia, width / aspect) : roomForMedia;
+  const offset = (roomForMedia - mediaHeight) / 2;
+  const mediaTop = band === "top" ? offset : margin + offset + bandHeight + gap;
+  const bandTop = band === "top" ? mediaTop + mediaHeight + gap : margin + offset;
+  const placed = [...backdrop];
+  if (title && titleFit) {
+    placed.push({
+      ...title,
+      position: {
+        x: margin,
+        y: bandTop,
+        width: titleWrapWidth,
+        height: titleHeight,
+        anchor: "top-left"
+      },
+      content: {
+        ...title.content,
+        style: {
+          ...title.content.style,
+          fontSize: titleFit.fontSize,
+          lineHeight: titleLineHeight,
+          ...titleFit.maxLines ? { maxLines: titleFit.maxLines } : {}
+        }
+      }
+    });
+  }
+  if (body && bodyFit) {
+    placed.push({
+      ...body,
+      position: {
+        x: margin,
+        y: bandTop + titleHeight + innerGap,
+        width: textWidth,
+        height: bodyHeight,
+        anchor: "top-left"
+      },
+      content: {
+        ...body.content,
+        style: {
+          ...body.content.style,
+          fontSize: bodyFit.fontSize,
+          lineHeight: bodyLineHeight,
+          ...bodyFit.maxLines ? { maxLines: bodyFit.maxLines } : {}
+        }
+      }
+    });
+  }
+  return {
+    layers: placed,
+    mediaRect: { x: 0, y: mediaTop, width, height: mediaHeight },
+    framed: false
+  };
+}
 function resolveSupplementalMediaLayout(layers, template, viewport, mediaCount, aspectRatios, featureOptions = {}) {
   const policy = getBlockMediaLayoutPolicy(template);
   const shape = mediaShape(mediaCount, aspectRatios);
   const alreadyOwnsMedia = layers.some(
     (layer) => layer.type === "image" || layer.type === "video" || layer.type === "videoEmbed" || layer.type === "map" || layer.type === "mermaid" || layer.type === "svg"
   );
+  const band = policy?.nativeLayout ? MEDIA_BANDS[policy.nativeLayout] : void 0;
+  if (band && !alreadyOwnsMedia) {
+    const aspect = mediaCount === 1 ? featureOptions.knownAspectRatios?.[0] : void 0;
+    return mediaBandLayout(layers, viewport, band, aspect);
+  }
   if (!alreadyOwnsMedia && (policy?.nativeLayout === "feature-left" || policy?.nativeLayout === "feature-right")) {
     const { position } = featureMediaSlot(
       policy.nativeLayout === "feature-left" ? "left" : "right",
@@ -6878,42 +7259,6 @@ function treeBlock(input, context) {
   return layers;
 }
 
-// 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;
-}
-var DISPLAY_CHAR_EM = {
-  space: 0.27,
-  narrowLower: 0.36,
-  wideLower: 0.86,
-  lower: 0.57,
-  narrowUpper: 0.4,
-  wideUpper: 0.95,
-  upper: 0.7,
-  digit: 0.57,
-  punct: 0.34,
-  other: 0.62
-};
-function displayCharEm(ch) {
-  if (ch === " ") return DISPLAY_CHAR_EM.space;
-  if ("fijlrt".includes(ch)) return DISPLAY_CHAR_EM.narrowLower;
-  if (ch === "m" || ch === "w") return DISPLAY_CHAR_EM.wideLower;
-  if (ch >= "a" && ch <= "z") return DISPLAY_CHAR_EM.lower;
-  if (ch === "I" || ch === "J") return DISPLAY_CHAR_EM.narrowUpper;
-  if (ch === "M" || ch === "W") return DISPLAY_CHAR_EM.wideUpper;
-  if (ch >= "A" && ch <= "Z") return DISPLAY_CHAR_EM.upper;
-  if (ch >= "0" && ch <= "9") return DISPLAY_CHAR_EM.digit;
-  if (".,:;-/'\u2019!?()".includes(ch)) return DISPLAY_CHAR_EM.punct;
-  return DISPLAY_CHAR_EM.other;
-}
-function estimateDisplayTextWidth(text, fontSize) {
-  let em = 0;
-  for (const ch of text.normalize("NFD").replace(/\p{M}/gu, "")) em += displayCharEm(ch);
-  return em * fontSize;
-}
-
 // src/doc/templates/timelineBlock.ts
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
@@ -7802,7 +8147,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   const fill = s.fill ?? defaultFill;
   if (s.kind === "text") {
     out.push(
-      textLayer(
+      textLayer2(
         `shape-${s.id}`,
         s.text ?? s.label ?? "",
         x + w / 2,
@@ -7861,7 +8206,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   if (s.label) {
     out.push(
-      textLayer(
+      textLayer2(
         `shape-label-${s.id}`,
         s.label,
         x + w / 2,
@@ -7876,7 +8221,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   if (s.sublabel) {
     out.push(
-      textLayer(
+      textLayer2(
         `shape-sublabel-${s.id}`,
         s.sublabel,
         x + w / 2,
@@ -7891,7 +8236,7 @@ function shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj
   }
   return out;
 }
-function textLayer(id, text, cx, cy, width, context, color, bold, fontAdj) {
+function textLayer2(id, text, cx, cy, width, context, color, bold, fontAdj) {
   return {
     type: "text",
     id,
@@ -8436,6 +8781,9 @@ var templateRegistry = {
   imageWithCaption,
   leftFeature,
   rightFeature,
+  topFeature,
+  bottomFeature,
+  mediaOnly,
   map: mapBlock,
   fullBleedQuote,
   list: listBlock,
@@ -8754,6 +9102,9 @@ var TEMPLATE_INPUT_DESCRIPTORS = {
   ],
   leftFeature: FEATURE_DESCRIPTORS(),
   rightFeature: FEATURE_DESCRIPTORS(),
+  topFeature: [{ key: "title", description: "Heading shown with the body under the media" }],
+  bottomFeature: [{ key: "title", description: "Heading shown with the body above the media" }],
+  mediaOnly: [{ key: "title", description: "Heading, shown only when the block has no media" }],
   map: [
     {
       key: "center",
@@ -9450,11 +9801,13 @@ function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRati
   const timedLayers = applyEmbeddedVideoTiming(layers, block);
   const items = collectRichMediaItems(timedLayers, block);
   if (items.length === 0) return timedLayers;
-  const aspects = items.map((item) => {
+  const knownAspects = items.map((item) => {
     const key = item.kind === "image" || item.kind === "video" ? item.src : item.kind === "mermaid" ? item.source : void 0;
     const intrinsic = key ? mediaAspectRatios?.[key] : void 0;
-    return intrinsic && Number.isFinite(intrinsic) && intrinsic > 0 ? intrinsic : item.aspectRatio;
+    if (intrinsic && Number.isFinite(intrinsic) && intrinsic > 0) return intrinsic;
+    return item.kind === "video" ? void 0 : item.aspectRatio;
   });
+  const aspects = items.map((item, index) => knownAspects[index] ?? item.aspectRatio);
   const layout = block.summaryLayout === "feature" ? resolveFeatureSummaryLayout(timedLayers, viewport, aspects) : resolveSupplementalMediaLayout(
     timedLayers,
     block.template ? resolveTemplateName(block.template) : void 0,
@@ -9463,7 +9816,8 @@ function appendRichContentLayers(layers, block, theme, viewport, mediaAspectRati
     aspects,
     {
       summaryFeature: block.summaryMode === "headings-and-features" && !timedLayers.some((layer) => layer.id === "feature-body"),
-      stackColumns: createTemplateContext(theme, 0, 1, viewport).layout.stackColumns
+      stackColumns: createTemplateContext(theme, 0, 1, viewport).layout.stackColumns,
+      knownAspectRatios: knownAspects
     }
   );
   const cells = gridCells(layout.mediaRect, items.length, viewport, layout.framed);
@@ -9625,6 +9979,18 @@ var TEMPLATE_METADATA = {
     label: "Right Feature",
     description: "Image on the right, title and body text stacked on the left."
   },
+  topFeature: {
+    label: "Top Feature",
+    description: "Image or video across the full width at the top, title and body text below."
+  },
+  bottomFeature: {
+    label: "Bottom Feature",
+    description: "Title and body text at the top, image or video across the full width below."
+  },
+  mediaOnly: {
+    label: "Media Only",
+    description: "The image or video fills the slide, with no title, text or caption."
+  },
   map: {
     label: "Map",
     description: "Embeds an interactive map centered on a geographic location."
@@ -9790,6 +10156,24 @@ var TEMPLATE_AUTHORING_METADATA = {
     safeForContentFirst: false,
     placement: "heading"
   },
+  topFeature: {
+    role: "media",
+    bodyPolicy: "complete",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  bottomFeature: {
+    role: "media",
+    bodyPolicy: "complete",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  mediaOnly: {
+    role: "media",
+    bodyPolicy: "ignored",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
   map: {
     role: "spatial",
     bodyPolicy: "structured",
@@ -9953,53 +10337,8 @@ function coverScrimGradient(background) {
 var FROSTED_LINE_HEIGHT = 1.12;
 var FROSTED_MAX_LINES = 3;
 var FROSTED_SQUARE_SHARE = 0.9;
-var FROSTED_PAD_X_EM = 0.45;
-var FROSTED_PAD_Y_EM = 0.3;
-var FROSTED_RADIUS_EM = 0.3;
-var FROSTED_BLUR_SHARE = 0.0167;
 var FROSTED_BOTTOM_MARGIN_PCT = { wide: 7, tall: 17 };
-var FROSTED_TINT_UNDER_LIGHT_TEXT = "rgba(12, 12, 14, 0.26)";
-var FROSTED_TINT_UNDER_DARK_TEXT = "rgba(250, 250, 250, 0.5)";
-var FROSTED_BACKDROP_CONTRAST = 0.65;
 var COVER_SUBTITLE_BASE_PX = 40;
-var INK_EM = { xHeight: 0.45, ascent: 0.71, accentedCapital: 0.8, descent: 0.165 };
-function opticalCentreShiftEm(lines) {
-  const first = (lines[0] ?? "").normalize("NFD");
-  const last = lines[lines.length - 1] ?? "";
-  const top = /[A-Z]\p{M}/u.test(first) ? INK_EM.accentedCapital : /[A-Zbdfhklt0-9]|[a-z]\p{M}/u.test(first) ? INK_EM.ascent : INK_EM.xHeight;
-  const bottom = /[gjpqyQ,;]/.test(last) ? INK_EM.descent : 0;
-  return Math.round(((top - bottom) / 2 - INK_EM.xHeight / 2) * 1e3) / 1e3;
-}
-function wrapDisplayLine(line, fontSize, maxWidth) {
-  const lines = [];
-  let current = "";
-  for (const word of line.trim().split(/\s+/).filter(Boolean)) {
-    const candidate = current ? `${current} ${word}` : word;
-    if (!current || estimateDisplayTextWidth(candidate, fontSize) <= maxWidth) {
-      current = candidate;
-    } else {
-      lines.push(current);
-      current = word;
-    }
-  }
-  if (current) lines.push(current);
-  return lines.length > 0 ? lines : [""];
-}
-function balancedDisplayLines(line, fontSize, maxWidth) {
-  const greedy = wrapDisplayLine(line, fontSize, maxWidth);
-  if (greedy.length < 2) return greedy;
-  let lo = Math.max(
-    ...line.split(/\s+/).filter(Boolean).map((word) => estimateDisplayTextWidth(word, fontSize))
-  );
-  let hi = maxWidth;
-  if (lo >= hi) return greedy;
-  while (hi - lo > 0.5) {
-    const mid = (lo + hi) / 2;
-    if (wrapDisplayLine(line, fontSize, mid).length <= greedy.length) hi = mid;
-    else lo = mid;
-  }
-  return wrapDisplayLine(line, fontSize, hi);
-}
 function frostedCoverLayout(title, subtitle, context) {
   const { width: frameW, height: frameH } = context.viewport;
   const shortSide = Math.min(frameW, frameH);
@@ -10043,8 +10382,6 @@ function frostedCoverLayout(title, subtitle, context) {
   const plateBottom = frameH * (1 - marginPct / 100);
   const plateY = plateBottom - plateHeight;
   const cx = frameW / 2;
-  const longestChars = Math.max(...lines.map((line) => line.length));
-  const titleBoxWidth = Math.max(textWidth, longestChars * fontSize * 0.5 + 1);
   return {
     fontSize,
     lines,
@@ -10061,7 +10398,7 @@ function frostedCoverLayout(title, subtitle, context) {
     title: {
       cx,
       cy: plateY + padY + textHeight / 2,
-      width: titleBoxWidth,
+      width: frostedTitleBoxWidth(lines, fontSize, textWidth),
       height: textHeight + 2 * padY
     },
     ...sub ? {
@@ -10078,35 +10415,15 @@ function frostedCoverLayout(title, subtitle, context) {
       }
     } : {},
     baselineShift: opticalCentreShiftEm(lines),
-    blur: Math.round(FROSTED_BLUR_SHARE * shortSide)
+    blur: frostedBlurPx(context)
   };
 }
-function pct(value, total) {
-  return `${Math.round(value / total * 1e4) / 100}%`;
-}
 function frostedCoverLayers(input, context) {
   const { theme, viewport } = context;
   const layout = frostedCoverLayout(input.title, input.subtitle, context);
-  const lightText = relativeLuminance(theme.colors.text) > 0.5;
-  const { plate } = layout;
+  const lightText = frostedUnderLightText(context);
   const layers = [
-    {
-      type: "shape",
-      id: "cover-plate",
-      content: {
-        shape: "rect",
-        fill: lightText ? FROSTED_TINT_UNDER_LIGHT_TEXT : FROSTED_TINT_UNDER_DARK_TEXT,
-        borderRadius: Math.round(plate.radius),
-        backdropBlur: layout.blur,
-        ...lightText ? { backdropContrast: FROSTED_BACKDROP_CONTRAST } : {}
-      },
-      position: {
-        x: pct(plate.x, viewport.width),
-        y: pct(plate.y, viewport.height),
-        width: pct(plate.width, viewport.width),
-        height: pct(plate.height, viewport.height)
-      }
-    },
+    frostedPlateLayer("cover-plate", layout.plate, context),
     {
       type: "text",
       id: "cover-title",
@@ -10896,193 +11213,6 @@ function extractTableData(table) {
   };
 }
 
-// src/doc/standaloneAnnotation.ts
-function parseAnnotationInner(inner) {
-  const tokens = tokenizeAttrTokens(inner.trim());
-  const firstIsParam = tokens.length > 0 && tokens[0].indexOf("=") > 0;
-  const template = firstIsParam || tokens.length === 0 ? void 0 : tokens[0];
-  const startIdx = firstIsParam ? 0 : 1;
-  const params = {};
-  for (let i = startIdx; i < tokens.length; i++) {
-    const kv = splitKeyValueToken(tokens[i]);
-    if (kv) params[kv.key] = kv.value;
-  }
-  return { template, params };
-}
-function parseStandaloneAnnotation(node) {
-  if (node.type !== "paragraph") return null;
-  const children = node.children ?? [];
-  if (children.length !== 1 || children[0].type !== "text") return null;
-  const text = children[0].value.trim();
-  const match = matchTrailingTemplateAnnotation(text);
-  if (!match || match.index !== 0) return null;
-  return parseAnnotationInner(match.inner);
-}
-
-// src/doc/mediaAnnotations.ts
-var MEDIA_TEMPLATES = /* @__PURE__ */ new Set(["audio", "video", "media"]);
-function isMediaAnnotationName(name) {
-  return name != null && MEDIA_TEMPLATES.has(name);
-}
-function time(raw) {
-  if (raw == null) return null;
-  return parseTimeSeconds(raw);
-}
-function videoPlacement(params) {
-  const explicit = params.placement ?? params.presentation;
-  if (explicit === "content") return "content";
-  if (explicit === "pip" || explicit === "picture-in-picture") return "picture-in-picture";
-  if (explicit === "overlay" || explicit === "full-frame") return "overlay";
-  if (params.pip === "" || params.pip === "true") return "picture-in-picture";
-  if (params.overlay === "" || params.overlay === "true") return "overlay";
-  return void 0;
-}
-function lockToBlock(raw) {
-  return raw !== "false" && raw !== "0";
-}
-function videoPipSize(raw) {
-  return raw === "small" || raw === "large" ? raw : void 0;
-}
-function videoPipShape(raw) {
-  return raw === "square" || raw === "wide" ? raw : void 0;
-}
-function videoPipPosition(raw) {
-  return raw === "top-left" || raw === "top-right" || raw === "bottom-left" || raw === "bottom-right" ? raw : void 0;
-}
-function toMediaClip(parsed, id) {
-  const { template, params } = parsed;
-  if (!template || !MEDIA_TEMPLATES.has(template)) return null;
-  const src = params.src;
-  if (!src) return null;
-  const kind = template === "video" ? "video" : "audio";
-  const anchor = params.anchor === "document" || params.span === "document" ? "document" : "block";
-  const clip = {
-    id,
-    src,
-    kind,
-    startAt: time(params.startAt ?? params.startTime) ?? 0,
-    anchor
-  };
-  const placement = kind === "video" ? videoPlacement(params) : void 0;
-  if (placement && placement !== "content") clip.placement = placement;
-  const pipSize = videoPipSize(params.pipSize);
-  const pipShape = videoPipShape(params.pipShape);
-  const pipPosition = videoPipPosition(params.pipPosition);
-  if (pipSize) clip.pipSize = pipSize;
-  if (pipShape) clip.pipShape = pipShape;
-  if (pipPosition) clip.pipPosition = pipPosition;
-  if (kind === "video" && placement && placement !== "content" && params.lockToBlock != null) {
-    const locked = lockToBlock(params.lockToBlock);
-    clip.lockToBlock = locked;
-    clip.anchor = locked ? "block" : "document";
-    if (locked) clip.startAt = 0;
-  }
-  const clipStart = time(params.clipStart);
-  const clipEnd = time(params.clipEnd);
-  if (clipStart != null) clip.clipStart = clipStart;
-  if (clipEnd != null) clip.clipEnd = clipEnd;
-  if (clip.lockToBlock === true) delete clip.clipEnd;
-  if (params.spillover === "true" || params.spillover === "") clip.spillover = true;
-  const edits = parseMediaEdits(mediaEditValuesFromParams(params));
-  if (edits) clip.edits = edits;
-  return clip;
-}
-function firstVideoElement(children) {
-  const visit = (nodes) => {
-    for (const child of nodes) {
-      if (child.type !== "htmlElement") continue;
-      if (child.tagName === "video") return child;
-      const nested = visit(child.children);
-      if (nested) return nested;
-    }
-    return null;
-  };
-  return visit(children);
-}
-function standaloneHtmlVideo(node) {
-  if (node.type === "htmlBlock") {
-    if (!/^\s*<video\b/i.test(node.rawHtml)) return null;
-    const element = firstVideoElement(node.htmlChildren);
-    return element ? { element, raw: node.rawHtml.trim() } : null;
-  }
-  if (node.type !== "paragraph" || !node.children.every((child) => child.type === "htmlInline")) {
-    return null;
-  }
-  const raw = node.children.map((child) => child.type === "htmlInline" ? child.rawHtml : "").join("");
-  if (!/^\s*<video\b[\s\S]*<\/video>\s*$/i.test(raw)) return null;
-  for (const child of node.children) {
-    if (child.type !== "htmlInline") continue;
-    const element = firstVideoElement(child.htmlChildren);
-    if (element) return { element, raw: raw.trim() };
-  }
-  return null;
-}
-function htmlVideoClip(node, id) {
-  const authored = standaloneHtmlVideo(node);
-  if (!authored) return null;
-  const { element } = authored;
-  const placement = videoPlacement({
-    placement: element.attributes["data-squisq-video-placement"] ?? ""
-  });
-  if (!placement || placement === "content") return null;
-  const src = element.attributes.src;
-  if (!src) return null;
-  const locked = lockToBlock(element.attributes["data-squisq-video-lock-to-block"]);
-  const clip = {
-    id,
-    src,
-    kind: "video",
-    placement,
-    lockToBlock: locked,
-    startAt: locked ? 0 : time(element.attributes["data-squisq-video-start-at"]) ?? 0,
-    anchor: locked ? "block" : "document"
-  };
-  const pipSize = videoPipSize(element.attributes["data-squisq-video-pip-size"]);
-  const pipShape = videoPipShape(element.attributes["data-squisq-video-pip-shape"]);
-  const pipPosition = videoPipPosition(element.attributes["data-squisq-video-pip-position"]);
-  if (pipSize) clip.pipSize = pipSize;
-  if (pipShape) clip.pipShape = pipShape;
-  if (pipPosition) clip.pipPosition = pipPosition;
-  const clipStart = time(element.attributes["data-squisq-video-clip-start"]);
-  const clipEnd = time(element.attributes["data-squisq-video-clip-end"]);
-  if (clipStart != null) clip.clipStart = clipStart;
-  if (!locked && clipEnd != null) clip.clipEnd = clipEnd;
-  const edits = parseMediaEdits(mediaEditValuesFromAttributes("video", element.attributes));
-  if (edits) clip.edits = edits;
-  return clip;
-}
-function extractMediaFromContents(contents, makeId, blockId) {
-  const media = [];
-  const documentMedia = [];
-  const remaining = [];
-  let index = 0;
-  let originalIndex = 0;
-  for (const node of contents ?? []) {
-    const parsed = parseStandaloneAnnotation(node);
-    const clip = parsed ? toMediaClip(parsed, "") : htmlVideoClip(node, "");
-    if (clip) {
-      clip.id = makeId(clip.src, index++);
-      const line = node.position?.start.line;
-      if (line != null) clip.sourceLine = line;
-      if (blockId !== void 0) {
-        const authoredHtml = standaloneHtmlVideo(node);
-        const rawText = node.type === "paragraph" && node.children?.[0]?.type === "text" ? node.children[0].value.trim() : authoredHtml?.raw;
-        clip.origin = {
-          blockId,
-          index: originalIndex,
-          ...rawText !== void 0 ? { raw: rawText } : {},
-          ...authoredHtml ? { format: "html" } : {}
-        };
-      }
-      (clip.anchor === "document" ? documentMedia : media).push(clip);
-    } else {
-      remaining.push(node);
-    }
-    originalIndex++;
-  }
-  return { media, documentMedia, remaining };
-}
-
 // src/doc/annotationBlocks.ts
 function applyBlockMeta(block, m) {
   if (m.build) block.build = m.build;
@@ -12084,7 +12214,7 @@ function resolveBuildTimeline(steps, spec, duration, timing) {
   let consumed = 0;
   let previous = 0;
   const matched = timing?.sourceText === buildSourceText(steps) && timing.starts.length === steps.length && timing.starts.every(
-    (time2, i) => Number.isFinite(time2) && time2 >= 0 && (i === 0 || time2 >= timing.starts[i - 1])
+    (time, i) => Number.isFinite(time) && time >= 0 && (i === 0 || time >= timing.starts[i - 1])
   );
   const starts = steps.map((_, i) => {
     const automatic = intro + Math.max(0, latest - intro) * consumed / Math.max(1, total);
@@ -12101,15 +12231,15 @@ function resolveBuildTimeline(steps, spec, duration, timing) {
     );
   return { starts, entrance, compressed: steps.length > 0 && end < steps.length * 0.8 };
 }
-function buildCursorAtTime(timeline, time2) {
+function buildCursorAtTime(timeline, time) {
   let revealed = 0;
   for (const start of timeline.starts) {
-    if (time2 < start) break;
+    if (time < start) break;
     revealed++;
   }
   return {
     revealed,
-    progress: revealed === 0 ? 0 : timeline.entrance === 0 ? 1 : Math.min(1, Math.max(0, (time2 - timeline.starts[revealed - 1]) / timeline.entrance))
+    progress: revealed === 0 ? 0 : timeline.entrance === 0 ? 1 : Math.min(1, Math.max(0, (time - timeline.starts[revealed - 1]) / timeline.entrance))
   };
 }
 function buildTargetState(index, steps, cursor, spec, motion = true) {
@@ -12180,13 +12310,13 @@ function resolveDocBuildTiming(doc, blocks) {
 }
 
 // src/doc/templates/contentBlock.ts
-function bodyNodes(context) {
+function bodyNodes(context, omitPictures) {
   if (context.block?.summaryMode === "headings-and-features") return [];
   return (context.block?.contents ?? []).filter(
     // Mermaid source and hosted-video links are already materialized as
     // visual layers (a diagram, a player). Repeating them as prose makes the
     // loss-averse default noisy without preserving any additional meaning.
-    (node) => !isMaterializedMediaNode(node)
+    (node) => !isMaterializedMediaNode(node) && !(omitPictures && isPictureParagraph(node))
   );
 }
 function listParagraphs(list, level = 0) {
@@ -12231,10 +12361,10 @@ function bodyFontSize(body, context) {
   const base = body.length > 1800 ? 18 : body.length > 1100 ? 21 : body.length > 650 ? 24 : 28;
   return themedFontSize(base, context, false);
 }
-function contentBlock(input, context) {
+function contentBlock(input, context, options = {}) {
   const { theme } = context;
   const title = input.title ?? context.block?.title ?? "";
-  const markdown = bodyNodes(context);
+  const markdown = bodyNodes(context, options.omitPictures === true);
   const paragraphs = completeBodyParagraphs(markdown);
   const body = paragraphs.map(plainParagraphText).join("\n");
   const builds = planContentBuilds(markdown, input.build ?? context.block?.build);
@@ -12322,6 +12452,7 @@ export {
   adjustY,
   sectionHeader,
   fitBigTextSize,
+  frostedBigTextLayout,
   bigText,
   contentBlock,
   parseStatNumber,
@@ -12336,6 +12467,9 @@ export {
   imageWithCaption,
   leftFeature,
   rightFeature,
+  topFeature,
+  bottomFeature,
+  mediaOnly,
   mapBlock,
   fullBleedQuote,
   listBlock,
@@ -12392,7 +12526,6 @@ export {
   parseYamlSubset,
   findFirstTable,
   extractTableData,
-  parseStandaloneAnnotation,
   getPinnedBlockMeta,
   markdownToDoc,
   flattenBlocks,