@kensio/colophon 2.3.0 → 2.4.0

package/dist/stamp/read.js

@@ -2,14 +2,14 @@ import { open } from "node:fs/promises";
 import { pngSignature, stampKeyword } from "./chunk.js";
 /**
  * How much of a PNG to read when looking for a stamp. The stamp goes in
- * immediately after `IHDR`, so this only has to cover the header — reading
+ * immediately after `IHDR`, so this only has to cover the header. Reading
  * whole images just to compare a hash would defeat the point of skipping them.
  */
 const headBytes = 4096;
 /**
  * Find the stamp in the leading bytes of a PNG, or `undefined` if there is
- * none — the image was written by something else, or by a Colophon that did
- * not stamp yet.
+ * none, meaning the image was written by something else, or by a Colophon
+ * that did not stamp yet.
  */
 function findStamp(head) {
     if (!head.subarray(0, pngSignature.length).equals(pngSignature)) {
@@ -39,7 +39,7 @@ function findStamp(head) {
 }
 /**
  * Read the stamp out of a PNG file. Returns `undefined` when the file is
- * missing, unreadable, not a PNG, or carries no stamp — all of which mean the
+ * missing, unreadable, not a PNG, or carries no stamp, all of which mean the
  * image cannot be shown to be up to date, so it should be rendered again.
  */
 export async function readPngStamp(file) {

package/dist/templates/attribution.d.ts

@@ -0,0 +1,17 @@
+import type { ImageAsset, MeasureText, ResolvedConfig } from "../types.js";
+import type { FooterPlacement } from "./footer.js";
+/** Where the attribution line goes: a footer placement, plus room to lay it out. */
+export interface AttributionPlacement extends FooterPlacement {
+    /** Left edge and width of the content area the line is set within. */
+    readonly left: number;
+    readonly width: number;
+}
+/**
+ * The footer line, with the post's avatar before it.
+ *
+ * Both belong to the same idea, which is who made this, so they are drawn as
+ * one line rather than tucked into separate corners. Without an avatar this is
+ * the footer exactly as it was, down to the byte.
+ */
+export declare function attribution(config: ResolvedConfig, placement: AttributionPlacement, avatar: ImageAsset | undefined, measure: MeasureText): string;
+//# sourceMappingURL=attribution.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"attribution.d.ts","sourceRoot":"","sources":["../../src/templates/attribution.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAYnD,oFAAoF;AACpF,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,sEAAsE;IACtE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,oBAAoB,EAC/B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,EAAE,WAAW,GACnB,MAAM,CAqCR"}

package/dist/templates/attribution.js

@@ -0,0 +1,39 @@
+import { image, measureIn, row } from "../layout/index.js";
+import { footerElement, hasFooter } from "./footer.js";
+/** The avatar's diameter, as a multiple of the footer's font size. */
+const avatarScale = 1.9;
+/** Where a circular avatar's centre sits above the footer's baseline. */
+const avatarRise = 0.34;
+/** Unique within one image, which is as many avatars as there are. */
+const avatarId = "colophon-avatar";
+/**
+ * The footer line, with the post's avatar before it.
+ *
+ * Both belong to the same idea, which is who made this, so they are drawn as
+ * one line rather than tucked into separate corners. Without an avatar this is
+ * the footer exactly as it was, down to the byte.
+ */
+export function attribution(config, placement, avatar, measure) {
+    if (avatar === undefined) {
+        return footerElement(config, placement);
+    }
+    const { fontSize } = placement;
+    const size = Math.round(fontSize * avatarScale);
+    const text = hasFooter(config) ? (config.footer ?? "") : "";
+    const gap = text === "" ? 0 : Math.round(fontSize * 0.5);
+    const textWidth = text === ""
+        ? 0
+        : measureIn(measure, config.fontFamily, 500)(text, fontSize);
+    // Only the horizontal placement comes from the row. The baseline is the one
+    // the template asked for, so a footer with no avatar and a footer with one
+    // sit at the same height.
+    const [portrait, label] = row([{ size }, { size: Math.round(textWidth), gapBefore: gap }], { x: placement.left, y: placement.y, width: placement.width, height: size }, placement.anchor === "middle" ? "centre" : "start");
+    const top = Math.round(placement.y - fontSize * avatarRise - size / 2);
+    return (image({ x: portrait?.x ?? placement.left, y: top, width: size, height: size }, avatar.href, { fit: "cover", radius: Math.round(size / 2), id: avatarId }) +
+        footerElement(config, {
+            ...placement,
+            x: label?.x ?? placement.left,
+            anchor: "start",
+        }));
+}
+//# sourceMappingURL=attribution.js.map

package/dist/templates/attribution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribution.js","sourceRoot":"","sources":["../../src/templates/attribution.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEvD,sEAAsE;AACtE,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,yEAAyE;AACzE,MAAM,UAAU,GAAG,IAAI,CAAC;AAExB,sEAAsE;AACtE,MAAM,QAAQ,GAAG,iBAAiB,CAAC;AASnC;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,MAAsB,EACtB,SAA+B,EAC/B,MAA8B,EAC9B,OAAoB;IAEpB,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IACzD,MAAM,SAAS,GACb,IAAI,KAAK,EAAE;QACT,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEjE,4EAA4E;IAC5E,2EAA2E;IAC3E,0BAA0B;IAC1B,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,GAAG,CAC3B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAC3D,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAC3E,SAAS,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CACnD,CAAC;IAEF,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,QAAQ,GAAG,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,KAAK,CACH,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACvE,MAAM,CAAC,IAAI,EACX,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAC7D;QACD,aAAa,CAAC,MAAM,EAAE;YACpB,GAAG,SAAS;YACZ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,SAAS,CAAC,IAAI;YAC7B,MAAM,EAAE,OAAO;SAChB,CAAC,CACH,CAAC;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/badge.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C;;;GAGG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GACb,MAAM,CAqBR"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/badge.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C;;;GAGG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GACb,MAAM,CAoBR"}

package/dist/templates/banner/badge.js

@@ -1,4 +1,4 @@
-import { textElement } from "../../text/index.js";
+import { box, textElement } from "../../layout/index.js";
 /**
  * The corner badge: a rounded plate with the badge text on it, sized from the
  * plate height so it scales with the image rather than the text length.
@@ -7,10 +7,7 @@ export function renderBadge(badge, fontFamily, brand, pad, height) {
     const fontSize = Math.round(height * 0.6);
     const padX = Math.round(height * 0.36);
     const width = Math.round(badge.text.length * fontSize * 0.64 + padX * 2);
-    const radius = Math.round(height * 0.1);
-    const rect = `<rect x="${String(pad)}" y="${String(pad)}"` +
-        ` width="${String(width)}" height="${String(height)}"` +
-        ` rx="${String(radius)}" fill="${badge.background ?? "#ffffff"}"/>`;
+    const plate = box({ x: pad, y: pad, width, height }, { radius: Math.round(height * 0.1), fill: badge.background ?? "#ffffff" });
     const text = textElement(badge.text, {
         x: pad + padX,
         y: pad + Math.round(height * 0.72),
@@ -19,6 +16,6 @@ export function renderBadge(badge, fontFamily, brand, pad, height) {
         fontWeight: 900,
         fill: badge.color ?? brand,
     });
-    return rect + text;
+    return plate + text;
 }
 //# sourceMappingURL=badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/templates/banner/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,KAAY,EACZ,UAAkB,EAClB,KAAa,EACb,GAAW,EACX,MAAc;IAEd,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;IAExC,MAAM,IAAI,GACR,YAAY,MAAM,CAAC,GAAG,CAAC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG;QAC7C,WAAW,MAAM,CAAC,KAAK,CAAC,aAAa,MAAM,CAAC,MAAM,CAAC,GAAG;QACtD,QAAQ,MAAM,CAAC,MAAM,CAAC,WAAW,KAAK,CAAC,UAAU,IAAI,SAAS,KAAK,CAAC;IAEtE,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE;QACnC,CAAC,EAAE,GAAG,GAAG,IAAI;QACb,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QAClC,UAAU;QACV,QAAQ;QACR,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK;KAC3B,CAAC,CAAC;IAEH,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/templates/banner/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,KAAY,EACZ,UAAkB,EAClB,KAAa,EACb,GAAW,EACX,MAAc;IAEd,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;IAEzE,MAAM,KAAK,GAAG,GAAG,CACf,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,EACjC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,IAAI,SAAS,EAAE,CAC1E,CAAC;IAEF,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE;QACnC,CAAC,EAAE,GAAG,GAAG,IAAI;QACb,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QAClC,UAAU;QACV,QAAQ;QACR,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK;KAC3B,CAAC,CAAC;IAEH,OAAO,KAAK,GAAG,IAAI,CAAC;AACtB,CAAC"}

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

@@ -4,6 +4,9 @@ import type { Template } from "../../types.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 declare const bannerTemplate: Template;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAMhE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,QA6E5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAOhE;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,QAmF5B,CAAC"}

package/dist/templates/banner/index.js

@@ -1,6 +1,8 @@
-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 { renderBadge } from "./badge.js";
 import { bannerLines } from "./lines.js";
 /**
@@ -8,59 +10,59 @@ 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 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(config.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("");
+            lineHeight: 1.28,
+        });
         const badge = config.badge === undefined
             ? ""
             : renderBadge(config.badge, fontFamily, config.colors.brand, pad, badgeHeight);
-        const footer = footerElement(config, {
+        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 badge + 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"}