@bendyline/squisq 2.13.3 → 2.13.5

package/dist/{chunk-5FUBK3DK.js → chunk-ZF4NWRZU.js}

@@ -32,7 +32,7 @@ import {
   profileBlockContents,
   renderMarkdownBlocksHtml,
   treeToTemplateData
-} from "./chunk-POZCKPCO.js";
+} from "./chunk-CZHWFQ7C.js";
 import {
   anchorPoint,
   base64ToUtf8,
@@ -81,7 +81,7 @@ import {
   parseVideoEmbedUrl,
   readFrontmatterThemeId,
   walkMarkdownTree
-} from "./chunk-6NWVLLMI.js";
+} from "./chunk-KVEOD57Z.js";
 import {
   resolveBlockTransition
 } from "./chunk-P53Z4RYC.js";
@@ -1289,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;
@@ -1338,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%)`;
 }
@@ -1347,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: {
@@ -1375,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(
       {
@@ -1399,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",
@@ -7042,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));
@@ -10153,78 +10334,125 @@ function coverScrimGradient(background) {
   const stops = COVER_SCRIM_STOPS.map((s) => `${withAlpha(background, s.alpha)} ${s.pos}%`);
   return `linear-gradient(0deg, ${stops.join(", ")})`;
 }
+function fitFrostedText(text, size, minSize, maxPlateWidth, maxLines) {
+  const wrapAt = (s) => {
+    const column = maxPlateWidth - 2 * FROSTED_PAD_X_EM * s;
+    const lines = text.split("\n").flatMap((line) => balancedDisplayLines(line, s, column));
+    const width = Math.max(...lines.map((line) => estimateDisplayTextWidth(line, s)));
+    return { lines, width, column };
+  };
+  let fontSize = size;
+  let wrapped = wrapAt(fontSize);
+  while ((wrapped.lines.length > maxLines || wrapped.width > wrapped.column) && fontSize > minSize) {
+    fontSize = Math.max(minSize, Math.floor(fontSize * 0.95));
+    wrapped = wrapAt(fontSize);
+  }
+  return {
+    fontSize,
+    lines: wrapped.lines,
+    column: wrapped.column,
+    textWidth: Math.min(wrapped.width, wrapped.column)
+  };
+}
 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 FROSTED_TOP_MARGIN_PCT = FROSTED_BOTTOM_MARGIN_PCT;
 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) {
+var COVER_DECK_BASE_PX = 114;
+var FROSTED_SPLIT_TITLE_SCALE = 1.5;
+var FROSTED_DECK_MAX_LINES = 3;
+var FROSTED_SPLIT_MIN_GAP_EM = 0.5;
+function frostedCoverLayout(title, subtitle, context, coverLayout = "stacked") {
   const { width: frameW, height: frameH } = context.viewport;
   const shortSide = Math.min(frameW, frameH);
   const maxPlateWidth = FROSTED_SQUARE_SHARE * shortSide;
   const minSize = themedFontSize(COVER_TITLE_MIN_BASE_PX, context, true);
-  const wrapAt = (size) => {
-    const column2 = maxPlateWidth - 2 * FROSTED_PAD_X_EM * size;
-    const lines2 = title.split("\n").flatMap((line) => balancedDisplayLines(line, size, column2));
-    const width = Math.max(...lines2.map((line) => estimateDisplayTextWidth(line, size)));
-    return { lines: lines2, width, column: column2 };
+  const tall = frameH > frameW;
+  const marginPct = tall ? FROSTED_BOTTOM_MARGIN_PCT.tall : FROSTED_BOTTOM_MARGIN_PCT.wide;
+  const plateBottom = frameH * (1 - marginPct / 100);
+  const cx = frameW / 2;
+  const fitTitle = (scale) => {
+    const fit = fitFrostedText(
+      title,
+      Math.round(scale * themedFontSize(fitCoverTitleSize(title), context, true)),
+      minSize,
+      maxPlateWidth,
+      FROSTED_MAX_LINES
+    );
+    const textHeight2 = fit.lines.length * fit.fontSize * FROSTED_LINE_HEIGHT;
+    const padX2 = FROSTED_PAD_X_EM * fit.fontSize;
+    const padY2 = FROSTED_PAD_Y_EM * fit.fontSize;
+    return {
+      ...fit,
+      textHeight: textHeight2,
+      padX: padX2,
+      padY: padY2,
+      radius: FROSTED_RADIUS_EM * fit.fontSize,
+      // The box spans the plate's padding too: shrink-to-fit measures the font's whole
+      // ascent and descent (about 1.3 em), which overflows a box of 1.12 em lines and
+      // would scale every title down by up to 14%.
+      box: (plateY2) => ({
+        cx,
+        cy: plateY2 + padY2 + textHeight2 / 2,
+        width: frostedTitleBoxWidth(fit.lines, fit.fontSize, fit.textWidth),
+        height: textHeight2 + 2 * padY2
+      })
+    };
   };
-  let fontSize = themedFontSize(fitCoverTitleSize(title), context, true);
-  let wrapped = wrapAt(fontSize);
-  while ((wrapped.lines.length > FROSTED_MAX_LINES || wrapped.width > wrapped.column) && fontSize > minSize) {
-    fontSize = Math.max(minSize, Math.floor(fontSize * 0.95));
-    wrapped = wrapAt(fontSize);
+  if (coverLayout === "split" && subtitle?.trim()) {
+    const { fontSize: fontSize2, lines: lines2, textWidth: textWidth2, textHeight: textHeight2, padX: padX2, padY: padY2, radius: radius2, box: box2 } = fitTitle(FROSTED_SPLIT_TITLE_SCALE);
+    const deckMin = themedFontSize(COVER_SUBTITLE_BASE_PX, context, false);
+    const deck = fitFrostedText(
+      subtitle.trim(),
+      Math.max(deckMin, themedFontSize(COVER_DECK_BASE_PX, context, true)),
+      deckMin,
+      maxPlateWidth,
+      FROSTED_DECK_MAX_LINES
+    );
+    const deckPadX = FROSTED_PAD_X_EM * deck.fontSize;
+    const deckHeight = deck.lines.length * deck.fontSize * FROSTED_LINE_HEIGHT + 2 * FROSTED_PAD_Y_EM * deck.fontSize;
+    const deckWidth = deck.textWidth + 2 * deckPadX;
+    const topPct = tall ? FROSTED_TOP_MARGIN_PCT.tall : FROSTED_TOP_MARGIN_PCT.wide;
+    const titlePlate = {
+      x: cx - (textWidth2 + 2 * padX2) / 2,
+      y: frameH * topPct / 100,
+      width: textWidth2 + 2 * padX2,
+      height: textHeight2 + 2 * padY2,
+      radius: radius2
+    };
+    const deckPlate = {
+      x: cx - deckWidth / 2,
+      y: plateBottom - deckHeight,
+      width: deckWidth,
+      height: deckHeight,
+      // The title's corners, so the two plates read as a pair.
+      radius: Math.min(radius2, deckHeight / 2)
+    };
+    const gap = deckPlate.y - (titlePlate.y + titlePlate.height);
+    if (gap >= FROSTED_SPLIT_MIN_GAP_EM * fontSize2) {
+      return {
+        fontSize: fontSize2,
+        lines: lines2,
+        plate: titlePlate,
+        title: box2(titlePlate.y),
+        subtitle: {
+          cx,
+          cy: deckPlate.y + deckHeight / 2,
+          width: frostedTitleBoxWidth(deck.lines, deck.fontSize, deck.textWidth),
+          height: deckHeight,
+          fontSize: deck.fontSize,
+          lines: deck.lines,
+          baselineShift: opticalCentreShiftEm(deck.lines)
+        },
+        subtitlePlate: deckPlate,
+        baselineShift: opticalCentreShiftEm(lines2),
+        blur: frostedBlurPx(context)
+      };
+    }
   }
-  const { lines, column } = wrapped;
-  const textWidth = Math.min(wrapped.width, column);
-  const textHeight = lines.length * fontSize * FROSTED_LINE_HEIGHT;
-  const padX = FROSTED_PAD_X_EM * fontSize;
-  const padY = FROSTED_PAD_Y_EM * fontSize;
+  const { fontSize, lines, column, textWidth, textHeight, padX, padY, radius, box } = fitTitle(1);
   let sub;
   if (subtitle?.trim()) {
     const subSize = themedFontSize(COVER_SUBTITLE_BASE_PX, context, false);
@@ -10242,12 +10470,7 @@ function frostedCoverLayout(title, subtitle, context) {
   }
   const plateWidth = Math.max(textWidth, sub?.width ?? 0) + 2 * padX;
   const plateHeight = textHeight + (sub ? sub.gap + sub.height : 0) + 2 * padY;
-  const marginPct = frameH > frameW ? FROSTED_BOTTOM_MARGIN_PCT.tall : FROSTED_BOTTOM_MARGIN_PCT.wide;
-  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,
@@ -10256,17 +10479,9 @@ function frostedCoverLayout(title, subtitle, context) {
       y: plateY,
       width: plateWidth,
       height: plateHeight,
-      radius: FROSTED_RADIUS_EM * fontSize
-    },
-    // The box spans the plate's padding too: shrink-to-fit measures the font's whole
-    // ascent and descent (about 1.3 em), which overflows a box of 1.12 em lines and
-    // would scale every title down by up to 14%.
-    title: {
-      cx,
-      cy: plateY + padY + textHeight / 2,
-      width: titleBoxWidth,
-      height: textHeight + 2 * padY
+      radius
     },
+    title: box(plateY),
     ...sub ? {
       subtitle: {
         cx,
@@ -10281,35 +10496,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 layout = frostedCoverLayout(input.title, input.subtitle, context, input.coverLayout);
+  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",
@@ -10338,7 +10533,35 @@ function frostedCoverLayers(input, context) {
       animation: getMotionProfile(context).coverWordReveal ? { type: "wordReveal", duration: 0.5, delay: 0.1, stagger: 0.12 } : { type: "fadeIn", duration: 0.8 }
     }
   ];
-  if (layout.subtitle) {
+  if (layout.subtitle && layout.subtitlePlate) {
+    layers.push(frostedPlateLayer("cover-subtitle-plate", layout.subtitlePlate, context), {
+      type: "text",
+      id: "cover-subtitle",
+      content: {
+        text: layout.subtitle.lines.join("\n"),
+        style: {
+          fontSize: layout.subtitle.fontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          verticalAlign: "middle",
+          lineHeight: FROSTED_LINE_HEIGHT,
+          baselineShift: layout.subtitle.baselineShift,
+          shadow: lightText,
+          shrinkToFit: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: pct(layout.subtitle.cy, viewport.height),
+        anchor: "center",
+        width: pct(layout.subtitle.width, viewport.width),
+        height: pct(layout.subtitle.height, viewport.height)
+      },
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8, delay: 0.2 })
+    });
+  } else if (layout.subtitle) {
     layers.push({
       type: "text",
       id: "cover-subtitle",
@@ -10530,7 +10753,8 @@ function startBlockToCoverInput(config) {
     ambientMotion: config.ambientMotion,
     heroCredit: config.heroCredit,
     heroLicense: config.heroLicense,
-    ...config.coverStyle ? { coverStyle: config.coverStyle } : {}
+    ...config.coverStyle ? { coverStyle: config.coverStyle } : {},
+    ...config.coverLayout ? { coverLayout: config.coverLayout } : {}
   };
 }
 function expandCoverBlock(config, context, template = "cover") {
@@ -12338,6 +12562,7 @@ export {
   adjustY,
   sectionHeader,
   fitBigTextSize,
+  frostedBigTextLayout,
   bigText,
   contentBlock,
   parseStatNumber,