@kensio/colophon 2.3.0 → 2.4.0

package/dist/templates/card/lines.js

@@ -1,32 +1,36 @@
-import { estimateCharsPerLine, wrapText } from "../../text/index.js";
-import { optionalString } from "../props.js";
+import { blockLines } from "../../layout/index.js";
 const maxTitleLines = 3;
 const maxSubtitleLines = 3;
+const titleFloor = 0.62;
+const subtitleFloor = 0.8;
 /**
- * The card's text block: the wrapped title, then the wrapped subtitle. No
- * gaps between the groups — the card is the quieter layout, and the change of
- * size and weight is enough to separate them.
+ * The card's text block: the wrapped title, then the wrapped subtitle.
+ *
+ * The gap before the subtitle is smaller than the banner's, because the card
+ * has only the two groups and they belong together. It is not nothing, though:
+ * a title that wraps ends on a line the subtitle would otherwise sit straight
+ * underneath, and the change of size and weight alone does not separate them.
  */
-export function cardLines(props, contentWidth, titleFs, subFs) {
-    const title = optionalString(props.title) ?? "";
-    const subtitle = optionalString(props.subtitle);
-    const titleLines = wrapText(title, estimateCharsPerLine(contentWidth, titleFs, 0.58)).slice(0, maxTitleLines);
-    const subtitleLines = subtitle === undefined || subtitle === ""
-        ? []
-        : wrapText(subtitle, estimateCharsPerLine(contentWidth, subFs, 0.52)).slice(0, maxSubtitleLines);
+export function cardLines(props, text) {
+    const { measure, fontFamily, contentWidth } = text;
     return [
-        ...titleLines.map((text) => ({
-            text,
-            fontSize: titleFs,
+        ...blockLines(props.title, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxTitleLines,
+            fontSize: text.titleFs,
+            floor: titleFloor,
             fontWeight: 800,
             opacity: 1,
-        })),
-        ...subtitleLines.map((text) => ({
-            text,
-            fontSize: subFs,
+        }),
+        ...blockLines(props.subtitle, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxSubtitleLines,
+            fontSize: text.subFs,
+            floor: subtitleFloor,
             fontWeight: 500,
             opacity: 0.85,
-        })),
+            gapBefore: Math.round(text.height * 0.025),
+        }),
     ];
 }
 //# sourceMappingURL=lines.js.map

package/dist/templates/card/lines.js.map

@@ -1 +1 @@
-{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/card/lines.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAY3B;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACvB,KAAqB,EACrB,YAAoB,EACpB,OAAe,EACf,KAAa;IAEb,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG,QAAQ,CACzB,KAAK,EACL,oBAAoB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAClD,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;IAE1B,MAAM,aAAa,GACjB,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,EAAE;QACvC,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,QAAQ,CACN,QAAQ,EACR,oBAAoB,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,CAChD,CAAC,KAAK,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAEnC,OAAO;QACL,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC3B,IAAI;YACJ,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,CAAC;SACX,CAAC,CAAC;QACH,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC9B,IAAI;YACJ,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/card/lines.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,aAAa,GAAG,GAAG,CAAC;AAY1B;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB,EAAE,IAAc;IAC7D,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAEnD,OAAO;QACL,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9C,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,KAAK,EAAE,UAAU;YACjB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,CAAC;SACX,CAAC;QACF,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE;YACjD,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,gBAAgB;YAC1B,QAAQ,EAAE,IAAI,CAAC,KAAK;YACpB,KAAK,EAAE,aAAa;YACpB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SAC3C,CAAC;KACH,CAAC;AACJ,CAAC"}

package/dist/templates/code/chrome.d.ts

@@ -1,9 +1,13 @@
+import type { Rect } from "../../layout/index.js";
 import type { Dimensions, ResolvedConfig } from "../../types.js";
-import type { Panel } from "./panel.js";
 /**
- * The optional title, centred just above the panel.
+ * The optional title, centred in the band reserved above the panel.
+ *
+ * It is drawn as a single line at the size the band was measured with, so a
+ * title too long for the image runs over rather than wrapping into room that
+ * was never set aside for it.
  */
-export declare function codeHeading(title: string | undefined, panel: Panel, fontSize: number, imageWidth: number, config: ResolvedConfig): string;
+export declare function codeHeading(title: string | undefined, band: Rect, fontSize: number, config: ResolvedConfig): string;
 /** The configured footer, centred along the bottom of the image. */
 export declare function codeFooter(dimensions: Dimensions, fontSize: number, config: ResolvedConfig): string;
 //# sourceMappingURL=chrome.d.ts.map

package/dist/templates/code/chrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../../src/templates/code/chrome.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;GAEG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,MAAM,CAeR;AAED,oEAAoE;AACpE,wBAAgB,UAAU,CACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GACrB,MAAM,CAUR"}
+{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../../src/templates/code/chrome.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIjE;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GACrB,MAAM,CAeR;AAED,oEAAoE;AACpE,wBAAgB,UAAU,CACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GACrB,MAAM,CAUR"}

package/dist/templates/code/chrome.js

@@ -1,20 +1,21 @@
-import { textElement } from "../../text/index.js";
-import { footerElement } from "../footer.js";
+import { drawLines } from "../../layout/index.js";
+import { footerBaseline, footerElement } from "../footer.js";
+import { imageMargin } from "./panel.js";
 /**
- * The optional title, centred just above the panel.
+ * The optional title, centred in the band reserved above the panel.
+ *
+ * It is drawn as a single line at the size the band was measured with, so a
+ * title too long for the image runs over rather than wrapping into room that
+ * was never set aside for it.
  */
-export function codeHeading(title, panel, fontSize, imageWidth, config) {
+export function codeHeading(title, band, fontSize, config) {
     if (title === undefined || title === "") {
         return "";
     }
-    return textElement(title, {
-        x: Math.round(imageWidth / 2),
-        y: panel.y - Math.round(fontSize * 0.42),
+    return drawLines([{ text: title, fontSize, fontWeight: 700, opacity: 0.95 }], band, {
         fontFamily: config.fontFamily,
-        fontSize,
-        fontWeight: 700,
         fill: config.colors.foreground,
-        fillOpacity: 0.95,
+        lineHeight: 1,
         anchor: "middle",
     });
 }
@@ -23,7 +24,7 @@ export function codeFooter(dimensions, fontSize, config) {
     const { width, height } = dimensions;
     return footerElement(config, {
         x: Math.round(width / 2),
-        y: height - Math.round(Math.min(width, height) * 0.05),
+        y: footerBaseline(height, imageMargin(dimensions), fontSize),
         fontSize,
         opacity: 0.78,
         anchor: "middle",

package/dist/templates/code/chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"chrome.js","sourceRoot":"","sources":["../../../src/templates/code/chrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C;;GAEG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,KAAY,EACZ,QAAgB,EAChB,UAAkB,EAClB,MAAsB;IAEtB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QACxC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,WAAW,CAAC,KAAK,EAAE;QACxB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC;QAC7B,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;QACxC,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,QAAQ;QACR,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;QAC9B,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;AACL,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,UAAU,CACxB,UAAsB,EACtB,QAAgB,EAChB,MAAsB;IAEtB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAErC,OAAO,aAAa,CAAC,MAAM,EAAE;QAC3B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACxB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;QACtD,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"chrome.js","sourceRoot":"","sources":["../../../src/templates/code/chrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,IAAU,EACV,QAAgB,EAChB,MAAsB;IAEtB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QACxC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,SAAS,CACd,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAC3D,IAAI,EACJ;QACE,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;QAC9B,UAAU,EAAE,CAAC;QACb,MAAM,EAAE,QAAQ;KACjB,CACF,CAAC;AACJ,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,UAAU,CACxB,UAAsB,EACtB,QAAgB,EAChB,MAAsB;IAEtB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IAErC,OAAO,aAAa,CAAC,MAAM,EAAE;QAC3B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACxB,CAAC,EAAE,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;QAC5D,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;AACL,CAAC"}

package/dist/templates/code/clip.d.ts

@@ -2,7 +2,7 @@ import type { CodeToken } from "../../highlight/index.js";
 /**
  * Clip a line to the columns that fit, ending it with an ellipsis. The font
  * size is floored for legibility, so a wide enough snippet can still overrun
- * the panel — clipping keeps it inside instead of bleeding off the image.
+ * the panel, and clipping keeps it inside instead of bleeding off the image.
  *
  * Returns the line unchanged when it already fits, so the caller can count the
  * clipped lines by identity.

package/dist/templates/code/clip.js

@@ -2,7 +2,7 @@ import { ellipsis } from "./ellipsis.js";
 /**
  * Clip a line to the columns that fit, ending it with an ellipsis. The font
  * size is floored for legibility, so a wide enough snippet can still overrun
- * the panel — clipping keeps it inside instead of bleeding off the image.
+ * the panel, and clipping keeps it inside instead of bleeding off the image.
  *
  * Returns the line unchanged when it already fits, so the caller can count the
  * clipped lines by identity.

package/dist/templates/code/fit.d.ts

@@ -1,5 +1,5 @@
 import type { CodeToken, HighlightedCode } from "../../highlight/index.js";
-import type { ResolvedConfig } from "../../types.js";
+import type { Dimensions, ResolvedConfig } from "../../types.js";
 /**
  * Pick the largest font size that fits the snippet in the panel on both axes,
  * clamped to the configured bounds.
@@ -10,7 +10,7 @@ import type { ResolvedConfig } from "../../types.js";
  * let a landscape image render the same snippet at half the size of its square
  * counterpart.
  */
-export declare function fitFontSize(highlighted: HighlightedCode, codeWidth: number, codeHeight: number, imageWidth: number, config: ResolvedConfig): number;
+export declare function fitFontSize(highlighted: HighlightedCode, area: Dimensions, imageWidth: number, config: ResolvedConfig, charWidthRatio: number): number;
 /**
  * Width of the laid-out block in characters, measured from the lines actually
  * being drawn. Narrower than the snippet's longest line whenever that line was

package/dist/templates/code/fit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,MAAM,CAWR;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,GAAG,MAAM,CAY7E;AAaD;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACX,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAWnC"}
+{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGjE;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,MAAM,GACrB,MAAM,CAUR;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,GAAG,MAAM,CAY7E;AAaD;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACX,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAWnC"}

package/dist/templates/code/fit.js

@@ -9,10 +9,10 @@ import { ellipsis } from "./ellipsis.js";
  * let a landscape image render the same snippet at half the size of its square
  * counterpart.
  */
-export function fitFontSize(highlighted, codeWidth, codeHeight, imageWidth, config) {
-    const { charWidthRatio, lineHeight, maxFontScale, minFontScale } = config.code;
-    const byWidth = codeWidth / (Math.max(1, highlighted.longestLine) * charWidthRatio);
-    const byHeight = codeHeight / (Math.max(1, highlighted.lines.length) * lineHeight);
+export function fitFontSize(highlighted, area, imageWidth, config, charWidthRatio) {
+    const { lineHeight, maxFontScale, minFontScale } = config.code;
+    const byWidth = area.width / (Math.max(1, highlighted.longestLine) * charWidthRatio);
+    const byHeight = area.height / (Math.max(1, highlighted.lines.length) * lineHeight);
     const fitted = Math.min(byWidth, byHeight, imageWidth * maxFontScale);
     return Math.max(1, Math.floor(Math.max(fitted, imageWidth * minFontScale)));
 }

package/dist/templates/code/fit.js.map

@@ -1 +1 @@
-{"version":3,"file":"fit.js","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACzB,WAA4B,EAC5B,SAAiB,EACjB,UAAkB,EAClB,UAAkB,EAClB,MAAsB;IAEtB,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,GAC9D,MAAM,CAAC,IAAI,CAAC;IAEd,MAAM,OAAO,GACX,SAAS,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,CAAC;IACtE,MAAM,QAAQ,GACZ,UAAU,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC;IAEpE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;AAC9E,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwC;IACnE,IAAI,OAAO,GAAG,CAAC,CAAC;IAEhB,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,aAAa,CAAC,MAAc;IACnC,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,MAAM;QACN,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,GAAG;QACZ,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAwC,EACxC,UAAkB,EAClB,IAAY;IAEZ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC;IAE5D,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE1E,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/D,CAAC"}
+{"version":3,"file":"fit.js","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACzB,WAA4B,EAC5B,IAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,cAAsB;IAEtB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE/D,MAAM,OAAO,GACX,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,CAAC;IACvE,MAAM,QAAQ,GACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC;IAErE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;AAC9E,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwC;IACnE,IAAI,OAAO,GAAG,CAAC,CAAC;IAEhB,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,aAAa,CAAC,MAAc;IACnC,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,MAAM;QACN,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,GAAG;QACZ,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAwC,EACxC,UAAkB,EAClB,IAAY;IAEZ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC;IAE5D,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE1E,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/D,CAAC"}

package/dist/templates/code/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAW/C;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,QAuE1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,QAkF1B,CAAC"}

package/dist/templates/code/index.js

@@ -1,13 +1,14 @@
 import { highlightCode } from "../../highlight/index.js";
 import { hasFooter } from "../footer.js";
-import { optionalString } from "../props.js";
+import { optionalString } from "../../props.js";
 import { codeFooter, codeHeading } from "./chrome.js";
 import { blockColumns } from "./fit.js";
 import { fitSnippet } from "./layout.js";
-import { layoutPanel } from "./panel.js";
+import { layoutPanel, titleBand } from "./panel.js";
 import { hugPanel, panelSvg } from "./plate.js";
 import { codeBody } from "./spans.js";
 import { warnIfTruncated } from "./warn.js";
+import { charWidthRatio } from "./width.js";
 /**
  * Syntax-highlighted code snippet on a rounded panel over the configured
  * background. Reads `code` and `language` from the props (as the original
@@ -19,7 +20,7 @@ import { warnIfTruncated } from "./warn.js";
  */
 export const codeTemplate = {
     name: "code",
-    async render({ props, config, dimensions }) {
+    async render({ props, config, dimensions, measure }) {
         const { width, height } = dimensions;
         const title = optionalString(props.title);
         const titleFs = Math.round(height * 0.045);
@@ -30,13 +31,13 @@ export const codeTemplate = {
             tabSize: config.code.tabSize,
         });
         const available = layoutPanel(dimensions, config, titleFs, footerFs, title !== undefined && title !== "", hasFooter(config));
-        const fitted = fitSnippet(highlighted, available, width, config);
+        const fitted = fitSnippet(highlighted, available, width, config, charWidthRatio(measure, config.code.fontFamily));
         warnIfTruncated(config, dimensions, {
             dropped: highlighted.lines.length - fitted.lines.length,
             clipped: fitted.clipped,
         }, highlighted.lines.length);
         // Shrink the panel down onto the snippet so it isn't left floating in dead
-        // space — on a landscape image especially, a wide panel holding a narrow
+        // space. On a landscape image especially, a wide panel holding a narrow
         // block leaves the code marooned off to one side.
         const panel = hugPanel(available, {
             width: blockColumns(fitted.lines) * fitted.charWidth + fitted.padding * 2,
@@ -55,7 +56,7 @@ export const codeTemplate = {
         });
         const shadowOffset = Math.round(Math.min(width, height) * 0.01);
         const plate = panelSvg(panel, highlighted.background, Math.max(1, shadowOffset));
-        return (codeHeading(title, panel, titleFs, width, config) +
+        return (codeHeading(title, titleBand(panel, dimensions, titleFs), titleFs, config) +
             plate +
             body +
             codeFooter(dimensions, footerFs, config));

package/dist/templates/code/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"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"}

package/dist/templates/code/layout.d.ts

@@ -17,5 +17,5 @@ export interface FittedCode {
  * Fit a highlighted snippet into the panel it has been allotted: choose the
  * font size, then drop and clip whatever still does not fit.
  */
-export declare function fitSnippet(highlighted: HighlightedCode, available: Panel, imageWidth: number, config: ResolvedConfig): FittedCode;
+export declare function fitSnippet(highlighted: HighlightedCode, available: Panel, imageWidth: number, config: ResolvedConfig, charWidthRatio: number): FittedCode;
 //# sourceMappingURL=layout.d.ts.map

package/dist/templates/code/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,UAAU,CA6BZ"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,MAAM,GACrB,UAAU,CA6BZ"}

package/dist/templates/code/layout.js

@@ -4,17 +4,17 @@ import { fitFontSize, fitLines } from "./fit.js";
  * Fit a highlighted snippet into the panel it has been allotted: choose the
  * font size, then drop and clip whatever still does not fit.
  */
-export function fitSnippet(highlighted, available, imageWidth, config) {
+export function fitSnippet(highlighted, available, imageWidth, config, charWidthRatio) {
     const inner = Math.round(Math.min(available.width, available.height) * 0.07);
     const codeWidth = Math.max(1, available.width - inner * 2);
     const codeHeight = Math.max(1, available.height - inner * 2);
-    const fontSize = fitFontSize(highlighted, codeWidth, codeHeight, imageWidth, config);
-    const charWidth = fontSize * config.code.charWidthRatio;
+    const fontSize = fitFontSize(highlighted, { width: codeWidth, height: codeHeight }, imageWidth, config, charWidthRatio);
+    const charWidth = fontSize * charWidthRatio;
     const step = fontSize * config.code.lineHeight;
     const { lines, clipped } = clipLines(fitLines(highlighted.lines, codeHeight, step), Math.max(1, Math.floor(codeWidth / charWidth)));
-    // Padding reads best proportional to the text, not the panel — a snippet
-    // fitted down to a small size wants tighter margins. Only ever shrink, so
-    // the code area the font was fitted against stays valid.
+    // Padding reads best proportional to the text rather than the panel, since a
+    // snippet fitted down to a small size wants tighter margins. Only ever
+    // shrink, so the code area the font was fitted against stays valid.
     const padding = Math.max(Math.min(inner, Math.round(fontSize * 1.6)), Math.round(inner * 0.35));
     return { lines, clipped, fontSize, charWidth, step, padding };
 }

package/dist/templates/code/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgBjD;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,WAA4B,EAC5B,SAAgB,EAChB,UAAkB,EAClB,MAAsB;IAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,WAAW,CAC1B,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,MAAM,CACP,CAAC;IACF,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;IACxD,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAClC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAC/C,CAAC;IAEF,yEAAyE;IACzE,0EAA0E;IAC1E,yDAAyD;IACzD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,EAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CACzB,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAChE,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgBjD;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,WAA4B,EAC5B,SAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,cAAsB;IAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,WAAW,CAC1B,WAAW,EACX,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,EACxC,UAAU,EACV,MAAM,EACN,cAAc,CACf,CAAC;IACF,MAAM,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5C,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAClC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAC/C,CAAC;IAEF,6EAA6E;IAC7E,uEAAuE;IACvE,oEAAoE;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,EAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CACzB,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAChE,CAAC"}

package/dist/templates/code/panel.d.ts

@@ -1,3 +1,4 @@
+import type { Rect } from "../../layout/index.js";
 import type { Dimensions, ResolvedConfig } from "../../types.js";
 /**
  * The rounded plate the snippet is drawn on.
@@ -9,9 +10,21 @@ export interface Panel {
     readonly height: number;
     readonly radius: number;
 }
+/** Margin from the image edge to anything drawn inside it. */
+export declare function imageMargin(dimensions: Dimensions): number;
 /**
  * Place the code panel within the image, leaving room above for a title and
  * below for a footer when either is present.
  */
 export declare function layoutPanel(dimensions: Dimensions, config: ResolvedConfig, titleFontSize: number, footerFontSize: number, hasTitle: boolean, hasFooter: boolean): Panel;
+/**
+ * The band the title was given: one line's worth of room above the panel, with
+ * the reserved gap between the two.
+ *
+ * It is measured up from the panel rather than down from the top margin, so
+ * that it follows the panel when the panel hugs a short snippet and moves
+ * down. That keeps the title with the plate it names rather than stranding it
+ * at the top of the image.
+ */
+export declare function titleBand(panel: Panel, dimensions: Dimensions, fontSize: number): Rect;
 //# sourceMappingURL=panel.d.ts.map

package/dist/templates/code/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/templates/code/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,cAAc,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,EACtB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,OAAO,GACjB,KAAK,CAgBP"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/templates/code/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,8DAA8D;AAC9D,wBAAgB,WAAW,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAE1D;AAcD;;;GAGG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,cAAc,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,EACtB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,OAAO,GACjB,KAAK,CAgBP;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,MAAM,GACf,IAAI,CAON"}

package/dist/templates/code/panel.js

@@ -1,3 +1,18 @@
+/** Margin from the image edge to anything drawn inside it. */
+export function imageMargin(dimensions) {
+    return Math.round(Math.min(dimensions.width, dimensions.height) * 0.05);
+}
+/**
+ * Clear space between the panel and the title above it or the footer below.
+ *
+ * `layoutPanel` reserves this at each end alongside a line's worth of room, and
+ * the bands those lines are then placed in take the room and leave the gap. The
+ * two agree because both are measured from here, which is the whole point: a
+ * gap that is reserved in one place and drawn in another drifts.
+ */
+function gapAround(dimensions) {
+    return Math.round(Math.min(dimensions.width, dimensions.height) * 0.028);
+}
 /**
  * Place the code panel within the image, leaving room above for a title and
  * below for a footer when either is present.
@@ -5,8 +20,8 @@
 export function layoutPanel(dimensions, config, titleFontSize, footerFontSize, hasTitle, hasFooter) {
     const { width, height } = dimensions;
     const shorter = Math.min(width, height);
-    const pad = Math.round(shorter * 0.05);
-    const gap = Math.round(shorter * 0.028);
+    const pad = imageMargin(dimensions);
+    const gap = gapAround(dimensions);
     const top = pad + (hasTitle ? titleFontSize + gap : 0);
     const bottom = height - pad - (hasFooter ? footerFontSize + gap : 0);
     return {
@@ -17,4 +32,21 @@ export function layoutPanel(dimensions, config, titleFontSize, footerFontSize, h
         radius: Math.round(shorter * config.code.cornerScale),
     };
 }
+/**
+ * The band the title was given: one line's worth of room above the panel, with
+ * the reserved gap between the two.
+ *
+ * It is measured up from the panel rather than down from the top margin, so
+ * that it follows the panel when the panel hugs a short snippet and moves
+ * down. That keeps the title with the plate it names rather than stranding it
+ * at the top of the image.
+ */
+export function titleBand(panel, dimensions, fontSize) {
+    return {
+        x: 0,
+        y: panel.y - gapAround(dimensions) - fontSize,
+        width: dimensions.width,
+        height: fontSize,
+    };
+}
 //# sourceMappingURL=panel.js.map

package/dist/templates/code/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../src/templates/code/panel.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,UAAsB,EACtB,MAAsB,EACtB,aAAqB,EACrB,cAAsB,EACtB,QAAiB,EACjB,SAAkB;IAElB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IACrC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErE,OAAO;QACL,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,KAAK,EAAE,KAAK,GAAG,GAAG,GAAG,CAAC;QACtB,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;QACjC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;KACtD,CAAC;AACJ,CAAC"}
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../src/templates/code/panel.ts"],"names":[],"mappings":"AAcA,8DAA8D;AAC9D,MAAM,UAAU,WAAW,CAAC,UAAsB;IAChD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;AAC1E,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,SAAS,CAAC,UAAsB;IACvC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;AAC3E,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,UAAsB,EACtB,MAAsB,EACtB,aAAqB,EACrB,cAAsB,EACtB,QAAiB,EACjB,SAAkB;IAElB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IACrC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IAElC,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErE,OAAO;QACL,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,KAAK,EAAE,KAAK,GAAG,GAAG,GAAG,CAAC;QACtB,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;QACjC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;KACtD,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CACvB,KAAY,EACZ,UAAsB,EACtB,QAAgB;IAEhB,OAAO;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,QAAQ;QAC7C,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,MAAM,EAAE,QAAQ;KACjB,CAAC;AACJ,CAAC"}

package/dist/templates/code/plate.d.ts

@@ -10,6 +10,8 @@ export declare function hugPanel(available: Panel, wanted: {
 }): Panel;
 /**
  * The panel itself: a drop shadow, then the theme-coloured surface it sits on.
+ * The surface is stroked rather than left flat, so a dark theme still has an
+ * edge against a dark background.
  */
-export declare function panelSvg(panel: Panel, background: string, shadowOffset: number): string;
+export declare function panelSvg(available: Panel, background: string, shadowOffset: number): string;
 //# sourceMappingURL=plate.d.ts.map

package/dist/templates/code/plate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plate.d.ts","sourceRoot":"","sources":["../../../src/templates/code/plate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC1D,KAAK,CAmBP;AAED;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,MAAM,CAaR"}
+{"version":3,"file":"plate.d.ts","sourceRoot":"","sources":["../../../src/templates/code/plate.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC1D,KAAK,CAmBP;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,MAAM,CAQR"}

package/dist/templates/code/plate.js

@@ -1,3 +1,4 @@
+import { panel } from "../../layout/index.js";
 /**
  * Shrink a panel onto its content, keeping it centred in the space it was
  * allotted. Both axes are floored so a small snippet still gets a panel with
@@ -18,15 +19,16 @@ export function hugPanel(available, wanted) {
 }
 /**
  * The panel itself: a drop shadow, then the theme-coloured surface it sits on.
+ * The surface is stroked rather than left flat, so a dark theme still has an
+ * edge against a dark background.
  */
-export function panelSvg(panel, background, shadowOffset) {
-    const shadow = `<rect x="${String(panel.x)}" y="${String(panel.y + shadowOffset)}"` +
-        ` width="${String(panel.width)}" height="${String(panel.height)}"` +
-        ` rx="${String(panel.radius)}" fill="#000000" fill-opacity="0.22"/>`;
-    const surface = `<rect x="${String(panel.x)}" y="${String(panel.y)}"` +
-        ` width="${String(panel.width)}" height="${String(panel.height)}"` +
-        ` rx="${String(panel.radius)}" fill="${background}"` +
-        ` stroke="#ffffff" stroke-opacity="0.12"/>`;
-    return shadow + surface;
+export function panelSvg(available, background, shadowOffset) {
+    return panel(available, {
+        radius: available.radius,
+        fill: background,
+        stroke: "#ffffff",
+        strokeOpacity: 0.12,
+        shadow: shadowOffset,
+    });
 }
 //# sourceMappingURL=plate.js.map

package/dist/templates/code/plate.js.map

@@ -1 +1 @@
-{"version":3,"file":"plate.js","sourceRoot":"","sources":["../../../src/templates/code/plate.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,MAA2D;IAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,SAAS,CAAC,KAAK,EACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CACvE,CAAC;IACF,uEAAuE;IACvE,uEAAuE;IACvE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,SAAS,CAAC,MAAM,EAChB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAC9D,CAAC;IAEF,OAAO;QACL,GAAG,SAAS;QACZ,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1D,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5D,KAAK;QACL,MAAM;KACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAY,EACZ,UAAkB,EAClB,YAAoB;IAEpB,MAAM,MAAM,GACV,YAAY,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG;QACpE,WAAW,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG;QAClE,QAAQ,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,wCAAwC,CAAC;IAEvE,MAAM,OAAO,GACX,YAAY,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;QACrD,WAAW,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG;QAClE,QAAQ,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,UAAU,GAAG;QACpD,2CAA2C,CAAC;IAE9C,OAAO,MAAM,GAAG,OAAO,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"plate.js","sourceRoot":"","sources":["../../../src/templates/code/plate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,MAA2D;IAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,SAAS,CAAC,KAAK,EACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CACvE,CAAC;IACF,uEAAuE;IACvE,uEAAuE;IACvE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,SAAS,CAAC,MAAM,EAChB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAC9D,CAAC;IAEF,OAAO;QACL,GAAG,SAAS;QACZ,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1D,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5D,KAAK;QACL,MAAM;KACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,UAAkB,EAClB,YAAoB;IAEpB,OAAO,KAAK,CAAC,SAAS,EAAE;QACtB,MAAM,EAAE,SAAS,CAAC,MAAM;QACxB,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,SAAS;QACjB,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,YAAY;KACrB,CAAC,CAAC;AACL,CAAC"}

package/dist/templates/code/spans.js

@@ -1,4 +1,4 @@
-import { escapeXml } from "../../text/index.js";
+import { escapeXml } from "../../layout/index.js";
 /** Fraction of the font size the baseline sits below the glyph box top. */
 const ascentRatio = 0.78;
 function tokenSpan(token, x, charWidth, foreground) {

package/dist/templates/code/spans.js.map

@@ -1 +1 @@
-{"version":3,"file":"spans.js","sourceRoot":"","sources":["../../../src/templates/code/spans.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,2EAA2E;AAC3E,MAAM,WAAW,GAAG,IAAI,CAAC;AAEzB,SAAS,SAAS,CAChB,KAAgB,EAChB,CAAS,EACT,SAAiB,EACjB,UAAkB;IAElB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC;IACvC,MAAM,OAAO,GACX,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,kBAAkB,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACjD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,OAAO,CACL,aAAa,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,GAAG;QAChE,UAAU,IAAI,IAAI,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG;QAC7C,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CACnC,CAAC;AACJ,CAAC;AAeD;;;GAGG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAwC,EACxC,OAAoB;IAEpB,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAEhE,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACrB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CACzB,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,WAAW,CACxE,CAAC;QACF,MAAM,KAAK,GAAG,MAAM;aACjB,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACb,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,CACzD;aACA,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO,CACL,YAAY,MAAM,CAAC,QAAQ,CAAC,wBAAwB;YACpD,iBAAiB,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG;YACjD,eAAe,MAAM,CAAC,QAAQ,CAAC,KAAK,KAAK,SAAS,CACnD,CAAC;IACJ,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC"}
+{"version":3,"file":"spans.js","sourceRoot":"","sources":["../../../src/templates/code/spans.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,2EAA2E;AAC3E,MAAM,WAAW,GAAG,IAAI,CAAC;AAEzB,SAAS,SAAS,CAChB,KAAgB,EAChB,CAAS,EACT,SAAiB,EACjB,UAAkB;IAElB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC;IACvC,MAAM,OAAO,GACX,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,kBAAkB,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACjD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,OAAO,CACL,aAAa,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,GAAG;QAChE,UAAU,IAAI,IAAI,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG;QAC7C,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CACnC,CAAC;AACJ,CAAC;AAeD;;;GAGG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAwC,EACxC,OAAoB;IAEpB,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAEhE,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACrB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CACzB,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,WAAW,CACxE,CAAC;QACF,MAAM,KAAK,GAAG,MAAM;aACjB,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACb,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,CACzD;aACA,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO,CACL,YAAY,MAAM,CAAC,QAAQ,CAAC,wBAAwB;YACpD,iBAAiB,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG;YACjD,eAAe,MAAM,CAAC,QAAQ,CAAC,KAAK,KAAK,SAAS,CACnD,CAAC;IACJ,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC"}

package/dist/templates/code/width.d.ts

@@ -0,0 +1,10 @@
+import type { MeasureText } from "../../types.js";
+/**
+ * Width of one character as a fraction of the font size.
+ *
+ * The template lays every token out on a character grid, so this is what says
+ * where each column falls. Measuring a digit is enough because the face is
+ * monospace: whichever character is measured, the advance is the same.
+ */
+export declare function charWidthRatio(measure: MeasureText, fontFamily: string): number;
+//# sourceMappingURL=width.d.ts.map

package/dist/templates/code/width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"width.d.ts","sourceRoot":"","sources":["../../../src/templates/code/width.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAalD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,GACjB,MAAM,CAOR"}

package/dist/templates/code/width.js

@@ -0,0 +1,26 @@
+/**
+ * Advance width to assume when the monospace stack names no font the build
+ * loaded. `0.6` suits most monospace faces, including Source Code Pro, Menlo
+ * and DejaVu Sans Mono; Consolas is nearer `0.55`.
+ *
+ * This used to be `config.code.charWidthRatio`, a number every project had to
+ * work out for itself and keep in step with its font. It is a fallback now:
+ * supply the face as a file and the real advance is read from it.
+ */
+const fallbackRatio = 0.6;
+/**
+ * Width of one character as a fraction of the font size.
+ *
+ * The template lays every token out on a character grid, so this is what says
+ * where each column falls. Measuring a digit is enough because the face is
+ * monospace: whichever character is measured, the advance is the same.
+ */
+export function charWidthRatio(measure, fontFamily) {
+    return measure("0", {
+        fontFamily,
+        fontSize: 1,
+        fontWeight: 400,
+        fallbackRatio,
+    });
+}
+//# sourceMappingURL=width.js.map

package/dist/templates/code/width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"width.js","sourceRoot":"","sources":["../../../src/templates/code/width.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,OAAoB,EACpB,UAAkB;IAElB,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,UAAU;QACV,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,GAAG;QACf,aAAa;KACd,CAAC,CAAC;AACL,CAAC"}

package/dist/templates/footer.d.ts

@@ -11,6 +11,14 @@ export interface FooterPlacement {
     readonly opacity: number;
     readonly anchor?: "start" | "middle" | "end";
 }
+/**
+ * The baseline of a footer sitting on the bottom margin.
+ *
+ * The margin is where the line's ink stops rather than where its baseline
+ * goes, so the last line of an image keeps the same clear space below it as
+ * the content beside it has either side, and the descenders stay inside it.
+ */
+export declare function footerBaseline(height: number, pad: number, fontSize: number): number;
 /** Whether the config carries a footer worth drawing. */
 export declare function hasFooter(config: ResolvedConfig): boolean;
 /**

package/dist/templates/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/templates/footer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CAC9C;AAED,yDAAyD;AACzD,wBAAgB,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,CAEzD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,eAAe,GACzB,MAAM,CAeR"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/templates/footer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CAC9C;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,GACf,MAAM,CAER;AAED,yDAAyD;AACzD,wBAAgB,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,CAEzD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,eAAe,GACzB,MAAM,CAeR"}

package/dist/templates/footer.js

@@ -1,4 +1,14 @@
-import { textElement } from "../text/index.js";
+import { baselineFor, textElement } from "../layout/index.js";
+/**
+ * The baseline of a footer sitting on the bottom margin.
+ *
+ * The margin is where the line's ink stops rather than where its baseline
+ * goes, so the last line of an image keeps the same clear space below it as
+ * the content beside it has either side, and the descenders stay inside it.
+ */
+export function footerBaseline(height, pad, fontSize) {
+    return baselineFor(height - pad - fontSize, fontSize);
+}
 /** Whether the config carries a footer worth drawing. */
 export function hasFooter(config) {
     return config.footer !== undefined && config.footer !== "";