@kensio/colophon 2.3.0 → 2.5.0

package/dist/templates/banner/index.js

@@ -1,6 +1,9 @@
-import { layoutStack, textElement } from "../../text/index.js";
-import { footerElement, hasFooter } from "../footer.js";
-import { optionalString } from "../props.js";
+import { drawLines, inset } from "../../layout/index.js";
+import { optionalString } from "../../props.js";
+import { attribution } from "../attribution.js";
+import { footerBaseline, hasFooter } from "../footer.js";
+import { logoElement, logoRect } from "../logo.js";
+import { badgeFor } from "./badge-props.js";
 import { renderBadge } from "./badge.js";
 import { bannerLines } from "./lines.js";
 /**
@@ -8,59 +11,60 @@ import { bannerLines } from "./lines.js";
  * version and wrapped subtitle, an optional corner badge, and an optional
  * footer. This is the configurable descendant of the original `npm_package`
  * layout.
+ *
+ * A logo goes in the opposite corner to the badge, which is the corner the
+ * left-aligned text leaves free, and the avatar sits with the footer.
  */
 export const bannerTemplate = {
     name: "banner",
-    render({ props, config, dimensions }) {
+    render({ props, config, dimensions, measure, logo, avatar, }) {
         const { width, height } = dimensions;
         const { fontFamily } = config;
         const pad = Math.round(width * 0.075);
-        const contentWidth = width - pad * 2;
-        const subtitle = optionalString(props.subtitle);
-        const hasSubtitle = subtitle !== undefined && subtitle !== "";
-        const titleFs = Math.round(height * (hasSubtitle ? 0.078 : 0.092));
         const footerFs = Math.round(height * 0.034);
         const badgeHeight = Math.round(height * 0.072);
+        const mark = logoRect(logo, dimensions, pad, "start");
+        const badge = badgeFor(props, config);
+        const subtitle = optionalString(props.subtitle);
+        const hasSubtitle = subtitle !== undefined && subtitle !== "";
+        // The text sits between whatever the marks along the top and the footer
+        // along the bottom leave behind.
+        const topMark = Math.max(badge === undefined ? 0 : badgeHeight, mark?.height ?? 0);
+        const area = inset({ x: 0, y: 0, width, height }, {
+            top: pad + (topMark === 0 ? 0 : topMark + Math.round(height * 0.03)),
+            right: pad,
+            left: pad,
+            bottom: pad +
+                (hasFooter(config) || avatar !== undefined
+                    ? footerFs + Math.round(height * 0.02)
+                    : 0),
+        });
         const lines = bannerLines(props, {
             height,
-            contentWidth,
-            titleFs,
+            contentWidth: area.width,
+            titleFs: Math.round(height * (hasSubtitle ? 0.078 : 0.092)),
             versionFs: Math.round(height * 0.04),
             subFs: Math.round(height * 0.05),
+            measure,
+            fontFamily,
         });
-        const top = pad +
-            (config.badge === undefined
-                ? 0
-                : badgeHeight + Math.round(height * 0.03));
-        const bottom = height -
-            pad -
-            (hasFooter(config) ? footerFs + Math.round(height * 0.02) : 0);
-        const placed = layoutStack(lines.map((line) => ({
-            fontSize: line.fontSize,
-            lineHeight: 1.15,
-            ...(line.gapBefore !== undefined && { gapBefore: line.gapBefore }),
-        })), top, bottom);
-        const body = lines
-            .map((line, index) => textElement(line.text, {
-            x: pad,
-            y: placed[index]?.y ?? top,
+        const body = drawLines(lines, area, {
             fontFamily,
-            fontSize: line.fontSize,
-            fontWeight: line.fontWeight,
             fill: config.colors.foreground,
-            fillOpacity: line.opacity,
-        }))
-            .join("");
-        const badge = config.badge === undefined
+            lineHeight: 1.28,
+        });
+        const badgeMark = badge === undefined
             ? ""
-            : renderBadge(config.badge, fontFamily, config.colors.brand, pad, badgeHeight);
-        const footer = footerElement(config, {
+            : renderBadge(badge, fontFamily, config.colors.brand, pad, badgeHeight);
+        const footer = attribution(config, {
             x: pad,
-            y: height - pad,
+            y: footerBaseline(height, pad, footerFs),
             fontSize: footerFs,
             opacity: 0.78,
-        });
-        return badge + body + footer;
+            left: pad,
+            width: width - pad * 2,
+        }, avatar, measure);
+        return badgeMark + logoElement(logo, mark) + body + footer;
     },
 };
 //# sourceMappingURL=index.js.map

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

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

package/dist/templates/banner/lines.d.ts

@@ -1,27 +1,22 @@
-import type { MetaImageProps } from "../../types.js";
+import type { MeasureText, MetaImageProps } from "../../types.js";
+import type { TextLine } from "../../layout/index.js";
 /**
- * One line of the banner's text block, with the weight and opacity that say
- * which of the title, version and subtitle groups it belongs to.
+ * The font sizes the banner's text is drawn at, all keyed to image height,
+ * along with the space it has and how to measure text into it.
  */
-export interface BannerLine {
-    readonly text: string;
-    readonly fontSize: number;
-    readonly fontWeight: number;
-    readonly opacity: number;
-    readonly gapBefore?: number;
-}
-/** The font sizes the banner's text is drawn at, all keyed to image height. */
 export interface BannerSizes {
     readonly height: number;
     readonly contentWidth: number;
     readonly titleFs: number;
     readonly versionFs: number;
     readonly subFs: number;
+    readonly measure: MeasureText;
+    readonly fontFamily: string;
 }
 /**
  * The banner's text block: the wrapped title, an optional version, and the
  * wrapped subtitle. Extra breathing room goes before the version and subtitle
  * groups so the three do not read as one squashed block.
  */
-export declare function bannerLines(props: MetaImageProps, sizes: BannerSizes): BannerLine[];
+export declare function bannerLines(props: MetaImageProps, sizes: BannerSizes): TextLine[];
 //# sourceMappingURL=lines.d.ts.map

package/dist/templates/banner/lines.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/lines.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMrD;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,WAAW,GACjB,UAAU,EAAE,CA+Cd"}
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAStD;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,WAAW,GACjB,QAAQ,EAAE,CAuBZ"}

package/dist/templates/banner/lines.js

@@ -1,46 +1,35 @@
-import { estimateCharsPerLine, wrapText } from "../../text/index.js";
-import { optionalString } from "../props.js";
+import { blockLines } from "../../layout/index.js";
+import { versionLines } from "./version.js";
 const maxTitleLines = 3;
 const maxSubtitleLines = 4;
+const titleFloor = 0.62;
+const subtitleFloor = 0.8;
 /**
  * The banner's text block: the wrapped title, an optional version, and the
  * wrapped subtitle. Extra breathing room goes before the version and subtitle
  * groups so the three do not read as one squashed block.
  */
 export function bannerLines(props, sizes) {
-    const { height, contentWidth, titleFs, versionFs, subFs } = sizes;
-    const title = optionalString(props.title) ?? "";
-    const subtitle = optionalString(props.subtitle);
-    const version = optionalString(props.version);
-    const lines = wrapText(title, estimateCharsPerLine(contentWidth, titleFs, 0.6))
-        .slice(0, maxTitleLines)
-        .map((text) => ({
-        text,
-        fontSize: titleFs,
-        fontWeight: 800,
-        opacity: 0.98,
-    }));
-    if (version !== undefined && version !== "") {
-        lines.push({
-            text: `v${version}`,
-            fontSize: versionFs,
-            fontWeight: 700,
-            opacity: 0.85,
-            gapBefore: Math.round(height * 0.03),
-        });
-    }
-    const subtitleLines = subtitle === undefined || subtitle === ""
-        ? []
-        : wrapText(subtitle, estimateCharsPerLine(contentWidth, subFs, 0.55)).slice(0, maxSubtitleLines);
-    for (const [index, text] of subtitleLines.entries()) {
-        lines.push({
-            text,
-            fontSize: subFs,
+    const { height, contentWidth, measure, fontFamily } = sizes;
+    return [
+        ...blockLines(props.title, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxTitleLines,
+            fontSize: sizes.titleFs,
+            floor: titleFloor,
+            fontWeight: 800,
+            opacity: 0.98,
+        }),
+        ...versionLines(props, sizes),
+        ...blockLines(props.subtitle, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxSubtitleLines,
+            fontSize: sizes.subFs,
+            floor: subtitleFloor,
             fontWeight: 500,
             opacity: 0.86,
-            ...(index === 0 && { gapBefore: Math.round(height * 0.045) }),
-        });
-    }
-    return lines;
+            gapBefore: Math.round(height * 0.045),
+        }),
+    ];
 }
 //# sourceMappingURL=lines.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/banner/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;AAuB3B;;;;GAIG;AACH,MAAM,UAAU,WAAW,CACzB,KAAqB,EACrB,KAAkB;IAElB,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAClE,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9C,MAAM,KAAK,GAAiB,QAAQ,CAClC,KAAK,EACL,oBAAoB,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,CAAC,CACjD;SACE,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;SACvB,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACd,IAAI;QACJ,QAAQ,EAAE,OAAO;QACjB,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC,CAAC;IAEN,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;QAC5C,KAAK,CAAC,IAAI,CAAC;YACT,IAAI,EAAE,IAAI,OAAO,EAAE;YACnB,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;SACrC,CAAC,CAAC;IACL,CAAC;IAED,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,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC;QACpD,KAAK,CAAC,IAAI,CAAC;YACT,IAAI;YACJ,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;YACb,GAAG,CAAC,KAAK,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC;SAC9D,CAAC,CAAC;IACL,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/banner/lines.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,aAAa,GAAG,GAAG,CAAC;AAgB1B;;;;GAIG;AACH,MAAM,UAAU,WAAW,CACzB,KAAqB,EACrB,KAAkB;IAElB,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5D,OAAO;QACL,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9C,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,KAAK,CAAC,OAAO;YACvB,KAAK,EAAE,UAAU;YACjB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;SACd,CAAC;QACF,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC;QAC7B,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE;YACjD,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,gBAAgB;YAC1B,QAAQ,EAAE,KAAK,CAAC,KAAK;YACrB,KAAK,EAAE,aAAa;YACpB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;SACtC,CAAC;KACH,CAAC;AACJ,CAAC"}

package/dist/templates/banner/version.d.ts

@@ -0,0 +1,9 @@
+import type { MetaImageProps } from "../../types.js";
+import type { TextLine } from "../../layout/index.js";
+import type { BannerSizes } from "./lines.js";
+/**
+ * The version line, or nothing where there is no version. It is never wrapped
+ * or shrunk: a version string that needed either would not be one.
+ */
+export declare function versionLines(props: MetaImageProps, sizes: BannerSizes): readonly TextLine[];
+//# sourceMappingURL=version.d.ts.map

package/dist/templates/banner/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/version.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,WAAW,GACjB,SAAS,QAAQ,EAAE,CAgBrB"}

package/dist/templates/banner/version.js

@@ -0,0 +1,21 @@
+import { optionalString } from "../../props.js";
+/**
+ * The version line, or nothing where there is no version. It is never wrapped
+ * or shrunk: a version string that needed either would not be one.
+ */
+export function versionLines(props, sizes) {
+    const version = optionalString(props.version);
+    if (version === undefined || version === "") {
+        return [];
+    }
+    return [
+        {
+            text: `v${version}`,
+            fontSize: sizes.versionFs,
+            fontWeight: 700,
+            opacity: 0.85,
+            gapBefore: Math.round(sizes.height * 0.03),
+        },
+    ];
+}
+//# sourceMappingURL=version.js.map

package/dist/templates/banner/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../../src/templates/banner/version.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD;;;GAGG;AACH,MAAM,UAAU,YAAY,CAC1B,KAAqB,EACrB,KAAkB;IAElB,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9C,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;QAC5C,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL;YACE,IAAI,EAAE,IAAI,OAAO,EAAE;YACnB,QAAQ,EAAE,KAAK,CAAC,SAAS;YACzB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;SAC3C;KACF,CAAC;AACJ,CAAC"}

package/dist/templates/card/index.d.ts

@@ -1,7 +1,10 @@
 import type { Template } from "../../types.js";
 /**
  * Minimal "card" template: a centred title with an optional subtitle. No
- * badge or version — a clean, quieter alternative to `banner`.
+ * badge or version, so it is a quieter alternative to `banner`.
+ *
+ * A logo goes above the title, centred like everything else here, and the
+ * avatar sits with the footer along the bottom.
  */
 export declare const cardTemplate: Template;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/card/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAIhE;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,QAqD1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/card/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAMhE;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,QA8D1B,CAAC"}

package/dist/templates/card/index.js

@@ -1,43 +1,55 @@
-import { layoutStack, textElement } from "../../text/index.js";
-import { footerElement, hasFooter } from "../footer.js";
+import { drawLines, inset } from "../../layout/index.js";
+import { attribution } from "../attribution.js";
+import { footerBaseline, hasFooter } from "../footer.js";
+import { logoElement, logoRect } from "../logo.js";
 import { cardLines } from "./lines.js";
 /**
  * Minimal "card" template: a centred title with an optional subtitle. No
- * badge or version — a clean, quieter alternative to `banner`.
+ * badge or version, so it is a quieter alternative to `banner`.
+ *
+ * A logo goes above the title, centred like everything else here, and the
+ * avatar sits with the footer along the bottom.
  */
 export const cardTemplate = {
     name: "card",
-    render({ props, config, dimensions }) {
+    render({ props, config, dimensions, measure, logo, avatar, }) {
         const { width, height } = dimensions;
         const pad = Math.round(width * 0.09);
-        const centreX = Math.round(width / 2);
-        const titleFs = Math.round(height * 0.1);
         const footerFs = Math.round(height * 0.032);
-        const lines = cardLines(props, width - pad * 2, titleFs, Math.round(height * 0.045));
-        const bottom = height -
-            pad -
-            (hasFooter(config) ? footerFs + Math.round(height * 0.02) : 0);
-        const placed = layoutStack(lines.map((line) => ({ fontSize: line.fontSize, lineHeight: 1.2 })), pad, bottom);
-        const body = lines
-            .map((line, index) => textElement(line.text, {
-            x: centreX,
-            y: placed[index]?.y ?? pad,
+        const mark = logoRect(logo, dimensions, pad, "middle");
+        const area = inset({ x: 0, y: 0, width, height }, {
+            top: pad + (mark === undefined ? 0 : mark.height + pad / 2),
+            right: pad,
+            left: pad,
+            bottom: pad +
+                (hasFooter(config) || avatar !== undefined
+                    ? footerFs + Math.round(height * 0.02)
+                    : 0),
+        });
+        const lines = cardLines(props, {
+            measure,
+            fontFamily: config.fontFamily,
+            contentWidth: area.width,
+            titleFs: Math.round(height * 0.1),
+            subFs: Math.round(height * 0.045),
+            height,
+        });
+        const body = drawLines(lines, area, {
             fontFamily: config.fontFamily,
-            fontSize: line.fontSize,
-            fontWeight: line.fontWeight,
             fill: config.colors.foreground,
-            fillOpacity: line.opacity,
+            lineHeight: 1.28,
             anchor: "middle",
-        }))
-            .join("");
-        const footer = footerElement(config, {
-            x: centreX,
-            y: height - pad,
+        });
+        const footer = attribution(config, {
+            x: Math.round(width / 2),
+            y: footerBaseline(height, pad, footerFs),
             fontSize: footerFs,
             opacity: 0.75,
             anchor: "middle",
-        });
-        return body + footer;
+            left: pad,
+            width: width - pad * 2,
+        }, avatar, measure);
+        return logoElement(logo, mark) + body + footer;
     },
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,IAAI,EAAE,MAAM;IACZ,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAmB;QACnD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QACrC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAEtC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;QAE5C,MAAM,KAAK,GAAG,SAAS,CACrB,KAAK,EACL,KAAK,GAAG,GAAG,GAAG,CAAC,EACf,OAAO,EACP,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAC3B,CAAC;QAEF,MAAM,MAAM,GACV,MAAM;YACN,GAAG;YACH,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjE,MAAM,MAAM,GAAG,WAAW,CACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,EACnE,GAAG,EACH,MAAM,CACP,CAAC;QAEF,MAAM,IAAI,GAAG,KAAK;aACf,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACnB,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE;YACrB,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,GAAG;YAC1B,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;YAC9B,WAAW,EAAE,IAAI,CAAC,OAAO;YACzB,MAAM,EAAE,QAAQ;SACjB,CAAC,CACH;aACA,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,EAAE;YACnC,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,MAAM,GAAG,GAAG;YACf,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,QAAQ;SACjB,CAAC,CAAC;QAEH,OAAO,IAAI,GAAG,MAAM,CAAC;IACvB,CAAC;CACF,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,IAAI,EAAE,MAAM;IACZ,MAAM,CAAC,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,GACU;QAChB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;QAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;QAEvD,MAAM,IAAI,GAAG,KAAK,CAChB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAC7B;YACE,GAAG,EAAE,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;YAC3D,KAAK,EAAE,GAAG;YACV,IAAI,EAAE,GAAG;YACT,MAAM,EACJ,GAAG;gBACH,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,MAAM,KAAK,SAAS;oBACxC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;oBACtC,CAAC,CAAC,CAAC,CAAC;SACT,CACF,CAAC;QAEF,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE;YAC7B,OAAO;YACP,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YACjC,MAAM;SACP,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE;YAClC,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;YAC9B,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,QAAQ;SACjB,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,WAAW,CACxB,MAAM,EACN;YACE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;YACxB,CAAC,EAAE,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC;YACxC,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,GAAG;YACT,KAAK,EAAE,KAAK,GAAG,GAAG,GAAG,CAAC;SACvB,EACD,MAAM,EACN,OAAO,CACR,CAAC;QAEF,OAAO,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC;IACjD,CAAC;CACF,CAAC"}

package/dist/templates/card/lines.d.ts

@@ -1,17 +1,21 @@
-import type { MetaImageProps } from "../../types.js";
-/**
- * One line of the card's centred text block.
- */
-export interface CardLine {
-    readonly text: string;
-    readonly fontSize: number;
-    readonly fontWeight: number;
-    readonly opacity: number;
+import type { MeasureText, MetaImageProps } from "../../types.js";
+import type { TextLine } from "../../layout/index.js";
+/** The space the card's text has, and how to measure text into it. */
+export interface CardText {
+    readonly measure: MeasureText;
+    readonly fontFamily: string;
+    readonly contentWidth: number;
+    readonly titleFs: number;
+    readonly subFs: number;
+    readonly height: number;
 }
 /**
- * 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 declare function cardLines(props: MetaImageProps, contentWidth: number, titleFs: number, subFs: number): CardLine[];
+export declare function cardLines(props: MetaImageProps, text: CardText): TextLine[];
 //# sourceMappingURL=lines.d.ts.map

package/dist/templates/card/lines.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/card/lines.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMrD;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,EACrB,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,GACZ,QAAQ,EAAE,CA+BZ"}
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/card/lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,sEAAsE;AACtE,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAsB3E"}

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.