@kensio/colophon 2.13.1 → 2.14.1

package/dist/templates/banner/badge.js

@@ -2,15 +2,19 @@ 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.
+ *
+ * `corner` is where the plate's top-left goes, which the template works out
+ * from its frame rather than from the image, so that a safe area brings the
+ * badge in along with everything else.
  */
-export function renderBadge(badge, fontFamily, brand, pad, height) {
+export function renderBadge(badge, fontFamily, brand, corner, 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 plate = box({ x: pad, y: pad, width, height }, { radius: Math.round(height * 0.1), fill: badge.background ?? "#ffffff" });
+    const plate = box({ x: corner.x, y: corner.y, 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),
+        x: corner.x + padX,
+        y: corner.y + Math.round(height * 0.72),
         fontFamily,
         fontSize,
         fontWeight: 900,

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,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"}
+{"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;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CACzB,KAAY,EACZ,UAAkB,EAClB,KAAa,EACb,MAAkD,EAClD,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,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAC3C,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,MAAM,CAAC,CAAC,GAAG,IAAI;QAClB,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACvC,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.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/banner/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAQhE;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,QA8E5B,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;AAQhE;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,QA+D5B,CAAC"}

package/dist/templates/banner/index.js

@@ -1,7 +1,7 @@
-import { drawLines, inset } from "../../layout/index.js";
+import { drawLines } from "../../layout/index.js";
 import { optionalString } from "../../props.js";
-import { attribution } from "../attribution.js";
-import { footerBaseline, footerFontSize, hasFooter } from "../footer.js";
+import { footerLine } from "../bottom.js";
+import { contentArea, imageFrame, markRoom } from "../frame.js";
 import { logoElement, logoRect } from "../logo.js";
 import { badgeFor } from "./badge-props.js";
 import { renderBadge } from "./badge.js";
@@ -18,27 +18,19 @@ import { bannerLines } from "./lines.js";
 export const bannerTemplate = {
     name: "banner",
     render({ props, config, dimensions, measure, logo, avatar, }) {
-        const { width, height } = dimensions;
+        const { height } = dimensions;
         const { fontFamily } = config;
-        const pad = Math.round(width * 0.075);
-        const footerFs = footerFontSize(dimensions);
+        const frame = imageFrame(dimensions, config, avatar);
+        const { pad, full } = frame;
         const badgeHeight = Math.round(height * 0.072);
-        const mark = logoRect(logo, dimensions, pad, "start");
+        const mark = logoRect(logo, full, 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 area = contentArea(frame, markRoom(topMark, Math.round(height * 0.03)));
         const lines = bannerLines(props, {
             height,
             contentWidth: area.width,
@@ -55,15 +47,8 @@ export const bannerTemplate = {
         });
         const badgeMark = badge === undefined
             ? ""
-            : renderBadge(badge, fontFamily, config.colors.brand, pad, badgeHeight);
-        const footer = attribution(config, {
-            x: pad,
-            y: footerBaseline(height, pad, footerFs),
-            fontSize: footerFs,
-            opacity: 0.78,
-            left: pad,
-            width: width - pad * 2,
-        }, avatar, measure);
+            : renderBadge(badge, fontFamily, config.colors.brand, { x: full.x + pad, y: full.y + pad }, badgeHeight);
+        const footer = footerLine(config, frame, avatar, measure, "start", 0.78);
         return badgeMark + logoElement(logo, mark) + body + footer;
     },
 };

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/bottom.d.ts

@@ -10,7 +10,7 @@ import type { Frame } from "./frame.js";
  * else, such as the `article` with its byline at the other end of the same
  * line, still calls `attribution` itself.
  */
-export declare function footerLine(config: ResolvedConfig, frame: Frame, imageWidth: number, avatar: ImageAsset | undefined, measure: MeasureText, align?: "start" | "middle", opacity?: number): string;
+export declare function footerLine(config: ResolvedConfig, frame: Frame, avatar: ImageAsset | undefined, measure: MeasureText, align?: "start" | "middle", opacity?: number): string;
 /**
  * Draw a block of lines in a slot a `stack` handed back, or nothing where
  * there was no slot to draw it in.

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

@@ -1 +1 @@
-{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../src/templates/bottom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAKxC;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,cAAc,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,EAAE,WAAW,EACpB,KAAK,GAAE,OAAO,GAAG,QAAkB,EACnC,OAAO,GAAE,MAAuB,GAC/B,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,QAAQ,EAAE,EAC1B,IAAI,EAAE,IAAI,GAAG,SAAS,EACtB,KAAK,EAAE,UAAU,GAChB,MAAM,CAER"}
+{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../src/templates/bottom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAKxC;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,cAAc,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,EAAE,WAAW,EACpB,KAAK,GAAE,OAAO,GAAG,QAAkB,EACnC,OAAO,GAAE,MAAuB,GAC/B,MAAM,CAkBR;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,QAAQ,EAAE,EAC1B,IAAI,EAAE,IAAI,GAAG,SAAS,EACtB,KAAK,EAAE,UAAU,GAChB,MAAM,CAER"}

package/dist/templates/bottom.js

@@ -11,16 +11,16 @@ const defaultOpacity = 0.75;
  * else, such as the `article` with its byline at the other end of the same
  * line, still calls `attribution` itself.
  */
-export function footerLine(config, frame, imageWidth, avatar, measure, align = "start", opacity = defaultOpacity) {
-    const { pad } = frame;
+export function footerLine(config, frame, avatar, measure, align = "start", opacity = defaultOpacity) {
+    const { pad, full } = frame;
     return attribution(config, {
-        x: align === "middle" ? Math.round(imageWidth / 2) : pad,
+        x: align === "middle" ? Math.round(full.x + full.width / 2) : full.x + pad,
         y: frame.footerY,
         fontSize: frame.footerFontSize,
         opacity,
         ...(align === "middle" && { anchor: "middle" }),
-        left: pad,
-        width: imageWidth - pad * 2,
+        left: full.x + pad,
+        width: full.width - pad * 2,
     }, avatar, measure);
 }
 /**

package/dist/templates/bottom.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../src/templates/bottom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,4DAA4D;AAC5D,MAAM,cAAc,GAAG,IAAI,CAAC;AAE5B;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CACxB,MAAsB,EACtB,KAAY,EACZ,UAAkB,EAClB,MAA8B,EAC9B,OAAoB,EACpB,KAAK,GAAuB,OAAO,EACnC,OAAO,GAAW,cAAc;IAEhC,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtB,OAAO,WAAW,CAChB,MAAM,EACN;QACE,CAAC,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxD,CAAC,EAAE,KAAK,CAAC,OAAO;QAChB,QAAQ,EAAE,KAAK,CAAC,cAAc;QAC9B,OAAO;QACP,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,EAAE,MAAM,EAAE,QAAiB,EAAE,CAAC;QACxD,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,UAAU,GAAG,GAAG,GAAG,CAAC;KAC5B,EACD,MAAM,EACN,OAAO,CACR,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CACtB,KAA0B,EAC1B,IAAsB,EACtB,KAAiB;IAEjB,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC"}
+{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../src/templates/bottom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,4DAA4D;AAC5D,MAAM,cAAc,GAAG,IAAI,CAAC;AAE5B;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CACxB,MAAsB,EACtB,KAAY,EACZ,MAA8B,EAC9B,OAAoB,EACpB,KAAK,GAAuB,OAAO,EACnC,OAAO,GAAW,cAAc;IAEhC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAE5B,OAAO,WAAW,CAChB,MAAM,EACN;QACE,CAAC,EACC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG;QACzE,CAAC,EAAE,KAAK,CAAC,OAAO;QAChB,QAAQ,EAAE,KAAK,CAAC,cAAc;QAC9B,OAAO;QACP,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,EAAE,MAAM,EAAE,QAAiB,EAAE,CAAC;QACxD,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,GAAG;QAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,CAAC;KAC5B,EACD,MAAM,EACN,OAAO,CACR,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CACtB,KAA0B,EAC1B,IAAsB,EACtB,KAAiB;IAEjB,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC"}

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;AAMhE;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,QA8D1B,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,QAoC1B,CAAC"}

package/dist/templates/card/index.js

@@ -1,6 +1,6 @@
-import { drawLines, inset } from "../../layout/index.js";
-import { attribution } from "../attribution.js";
-import { footerBaseline, footerFontSize, hasFooter } from "../footer.js";
+import { drawLines } from "../../layout/index.js";
+import { footerLine } from "../bottom.js";
+import { contentArea, imageFrame, markRoom } from "../frame.js";
 import { logoElement, logoRect } from "../logo.js";
 import { cardLines } from "./lines.js";
 /**
@@ -13,19 +13,11 @@ import { cardLines } from "./lines.js";
 export const cardTemplate = {
     name: "card",
     render({ props, config, dimensions, measure, logo, avatar, }) {
-        const { width, height } = dimensions;
-        const pad = Math.round(width * 0.09);
-        const footerFs = footerFontSize(dimensions);
-        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 { height } = dimensions;
+        const frame = imageFrame(dimensions, config, avatar, { padScale: 0.09 });
+        const { pad } = frame;
+        const mark = logoRect(logo, frame.full, pad, "middle");
+        const area = contentArea(frame, markRoom(mark?.height, pad / 2));
         const lines = cardLines(props, {
             measure,
             fontFamily: config.fontFamily,
@@ -40,15 +32,7 @@ export const cardTemplate = {
             lineHeight: 1.28,
             anchor: "middle",
         });
-        const footer = attribution(config, {
-            x: Math.round(width / 2),
-            y: footerBaseline(height, pad, footerFs),
-            fontSize: footerFs,
-            opacity: 0.75,
-            anchor: "middle",
-            left: pad,
-            width: width - pad * 2,
-        }, avatar, measure);
+        const footer = footerLine(config, frame, avatar, measure, "middle");
         return logoElement(logo, mark) + body + footer;
     },
 };

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,SAAS,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,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,cAAc,CAAC,UAAU,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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChE,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,MAAM,EAAE,GAAG,UAAU,CAAC;QAC9B,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACzE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QAEjE,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,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;QAEpE,OAAO,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC;IACjD,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,21 @@
+import type { Template } from "../../types.js";
+/**
+ * A profile cover: the mark beside the name, with a tagline under it.
+ *
+ * This is the header image at the top of a profile rather than a card attached
+ * to a post, so it is made once for a site and usually declared in
+ * `config.extra`. What makes it its own template rather than the `wordmark` at
+ * other proportions is the shape of the space: a cover is a strip somewhere
+ * between 2.6:1 and 6:1, and a layout that stacks a mark above a name has
+ * nothing left to set the name in.
+ *
+ * Every platform crops a cover and draws a circular avatar over one corner of
+ * it, so where the words may go is not the image. That is what `config.safeArea`
+ * describes and what the cover presets in `SIZE_PRESETS` carry, and by the time
+ * a template sees a frame it has already been applied. The one thing this
+ * template does about it is size its text from the room it actually has rather
+ * than from the image, which on a YouTube banner is the difference between 423
+ * pixels and 1440.
+ */
+export declare const coverTemplate: Template;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/cover/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAoBhE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,EAAE,QA0C3B,CAAC"}

package/dist/templates/cover/index.js

@@ -0,0 +1,67 @@
+import { safeRect } from "../../config/safe-area.js";
+import { drawLines } from "../../layout/index.js";
+import { footerLine } from "../bottom.js";
+import { contentArea, imageFrame } from "../frame.js";
+import { coverLines } from "./lines.js";
+import { linesWidth, lockup, markElement, markSpace } from "./lockup.js";
+/**
+ * The margin, as a fraction of the frame's height rather than its width.
+ *
+ * A cover is a strip between about 2.6:1 and 6:1, so a margin taken from the
+ * width is a margin measured against the one dimension that has room to spare.
+ * On a LinkedIn Page cover the usual 7.5% of the width is 208px above and
+ * below a band 504px tall. The safe area has already done the horizontal work,
+ * which is the other half of why this is the axis that matters here.
+ */
+const padScale = 0.09;
+/** How the name and its tagline are stacked. */
+const lineHeight = 1.15;
+/**
+ * A profile cover: the mark beside the name, with a tagline under it.
+ *
+ * This is the header image at the top of a profile rather than a card attached
+ * to a post, so it is made once for a site and usually declared in
+ * `config.extra`. What makes it its own template rather than the `wordmark` at
+ * other proportions is the shape of the space: a cover is a strip somewhere
+ * between 2.6:1 and 6:1, and a layout that stacks a mark above a name has
+ * nothing left to set the name in.
+ *
+ * Every platform crops a cover and draws a circular avatar over one corner of
+ * it, so where the words may go is not the image. That is what `config.safeArea`
+ * describes and what the cover presets in `SIZE_PRESETS` carry, and by the time
+ * a template sees a frame it has already been applied. The one thing this
+ * template does about it is size its text from the room it actually has rather
+ * than from the image, which on a YouTube banner is the difference between 423
+ * pixels and 1440.
+ */
+export const coverTemplate = {
+    name: "cover",
+    render({ props, config, dimensions, measure, logo, avatar, }) {
+        const { fontFamily } = config;
+        const safe = safeRect(dimensions, config.safeArea);
+        const frame = imageFrame(dimensions, config, avatar, {
+            pad: Math.round(safe.height * padScale),
+        });
+        const area = contentArea(frame);
+        const mark = markSpace(logo, area.height);
+        const lines = coverLines(props, {
+            measure,
+            fontFamily,
+            contentWidth: area.width - mark.width - mark.gap,
+            contentHeight: area.height,
+        });
+        const placed = lockup(area, mark, linesWidth(lines, measure, fontFamily));
+        const body = drawLines(lines, placed.text, {
+            fontFamily,
+            fill: config.colors.foreground,
+            lineHeight,
+            anchor: "start",
+        });
+        return (markElement(logo, placed.mark) +
+            body +
+            // Centred, because the lockup above it is, and a footer set against the
+            // left margin of a strip has nothing above it to line up with.
+            footerLine(config, frame, avatar, measure, "middle"));
+    },
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/cover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEzE;;;;;;;;GAQG;AACH,MAAM,QAAQ,GAAG,IAAI,CAAC;AAEtB,gDAAgD;AAChD,MAAM,UAAU,GAAG,IAAI,CAAC;AAExB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAa;IACrC,IAAI,EAAE,OAAO;IACb,MAAM,CAAC,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,GACU;QAChB,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;QAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE;YACnD,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;SACxC,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE;YAC9B,OAAO;YACP,UAAU;YACV,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG;YAChD,aAAa,EAAE,IAAI,CAAC,MAAM;SAC3B,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;QAE1E,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE;YACzC,UAAU;YACV,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;YAC9B,UAAU;YACV,MAAM,EAAE,OAAO;SAChB,CAAC,CAAC;QAEH,OAAO,CACL,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC;YAC9B,IAAI;YACJ,wEAAwE;YACxE,+DAA+D;YAC/D,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CACrD,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,21 @@
+import type { TextLine } from "../../layout/index.js";
+import type { MeasureText, MetaImageProps } from "../../types.js";
+/** The space the cover's text has, and how to measure it into it. */
+export interface CoverText {
+    readonly measure: MeasureText;
+    readonly fontFamily: string;
+    readonly contentWidth: number;
+    /**
+     * The height the text is sized against, which is the content area's rather
+     * than the image's.
+     *
+     * Every other template takes its sizes from the image, and on a cover that
+     * is the wrong number by a wide margin: a YouTube banner is 1440 tall and
+     * the band anyone reads is 423 of it, so a title at a tenth of the image
+     * would be a third of the height of the part that is seen.
+     */
+    readonly contentHeight: number;
+}
+/** The name over its tagline, each fitted to the room the lockup has. */
+export declare function coverLines(props: MetaImageProps, text: CoverText): TextLine[];
+//# sourceMappingURL=lines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/cover/lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAgClE,qEAAqE;AACrE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;;;;;;;OAQG;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;CAChC;AA4CD,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,GAAG,QAAQ,EAAE,CAqB7E"}

package/dist/templates/cover/lines.js

@@ -0,0 +1,77 @@
+import { blockLines, clampLine, measureIn } from "../../layout/index.js";
+import { trackTagline } from "./tracking.js";
+/**
+ * One line for the name, for the reason the `wordmark` has one: a name broken
+ * across two lines stops reading as a name. On a strip it is also the only
+ * arrangement that fits, since a second line of a title set to fill the band
+ * would be a second band.
+ */
+const maxNameLines = 1;
+const maxTaglineLines = 2;
+/** The weights the two blocks are drawn at, and so measured at. */
+const nameWeight = 800;
+const taglineWeight = 500;
+const nameFloor = 0.5;
+const taglineFloor = 0.7;
+/**
+ * The name's size, as a fraction of the room it has. It gives up a third of
+ * that where there is a tagline under it, which is what leaves the two
+ * reading as a pair rather than as one line with a caption squeezed beneath.
+ */
+const nameScale = 0.48;
+const nameWithTaglineScale = 0.3;
+/** The tagline's size, and the clear space above it, both of the same room. */
+const taglineScale = 0.15;
+const taglineGapScale = 0.09;
+/**
+ * The name as one line: shrunk until it fits, and cut with an ellipsis where
+ * even the floor is not small enough.
+ *
+ * Wrapping is what the fitting does at that point, and on a strip there is no
+ * second line to wrap onto. This is `wordmark`'s treatment of the same string,
+ * and it is here rather than shared because the two differ in the fitting
+ * around it rather than in this.
+ */
+function nameLines(props, text, fontSize) {
+    const { measure, fontFamily, contentWidth } = text;
+    const name = props.title;
+    const [line] = blockLines(name, measure, fontFamily, {
+        maxWidth: contentWidth,
+        maxLines: maxNameLines,
+        fontSize,
+        floor: nameFloor,
+        fontWeight: nameWeight,
+        opacity: 1,
+    });
+    if (line === undefined || line.text === name) {
+        return line === undefined ? [] : [line];
+    }
+    return [
+        {
+            ...line,
+            text: clampLine(line.text, contentWidth, measureIn(measure, fontFamily, nameWeight), line.fontSize),
+        },
+    ];
+}
+/** The name over its tagline, each fitted to the room the lockup has. */
+export function coverLines(props, text) {
+    const { measure, fontFamily, contentWidth, contentHeight } = text;
+    const tagline = blockLines(props.subtitle, measure, fontFamily, {
+        maxWidth: contentWidth,
+        maxLines: maxTaglineLines,
+        fontSize: Math.round(contentHeight * taglineScale),
+        floor: taglineFloor,
+        fontWeight: taglineWeight,
+        opacity: 0.85,
+        gapBefore: Math.round(contentHeight * taglineGapScale),
+    });
+    const scale = tagline.length === 0 ? nameScale : nameWithTaglineScale;
+    const name = nameLines(props, text, Math.round(contentHeight * scale));
+    return [
+        ...name,
+        ...(props["tracking"] === "fill"
+            ? trackTagline(name, tagline, measure, fontFamily)
+            : tagline),
+    ];
+}
+//# sourceMappingURL=lines.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/cover/lines.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAM,eAAe,GAAG,CAAC,CAAC;AAE1B,mEAAmE;AACnE,MAAM,UAAU,GAAG,GAAG,CAAC;AACvB,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,YAAY,GAAG,GAAG,CAAC;AAEzB;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAI,CAAC;AACvB,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAEjC,+EAA+E;AAC/E,MAAM,YAAY,GAAG,IAAI,CAAC;AAC1B,MAAM,eAAe,GAAG,IAAI,CAAC;AAmB7B;;;;;;;;GAQG;AACH,SAAS,SAAS,CAChB,KAAqB,EACrB,IAAe,EACf,QAAgB;IAEhB,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IACnD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;IACzB,MAAM,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE;QACnD,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,YAAY;QACtB,QAAQ;QACR,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,UAAU;QACtB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;IAEH,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;QAC7C,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL;YACE,GAAG,IAAI;YACP,IAAI,EAAE,SAAS,CACb,IAAI,CAAC,IAAI,EACT,YAAY,EACZ,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,EAC1C,IAAI,CAAC,QAAQ,CACd;SACF;KACF,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,UAAU,CAAC,KAAqB,EAAE,IAAe;IAC/D,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAClE,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE;QAC9D,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,YAAY,CAAC;QAClD,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,aAAa;QACzB,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,eAAe,CAAC;KACvD,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC;IACtE,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC;IAEvE,OAAO;QACL,GAAG,IAAI;QACP,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,MAAM;YAC9B,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC;YAClD,CAAC,CAAC,OAAO,CAAC;KACb,CAAC;AACJ,CAAC"}

package/dist/templates/cover/lockup.d.ts

@@ -0,0 +1,54 @@
+import type { Rect, TextLine } from "../../layout/index.js";
+import type { ImageAsset, MeasureText } from "../../types.js";
+/**
+ * The widest of a block of lines, which is how wide the block is.
+ *
+ * Tracking counts towards it, because a tracked line is drawn wider than it
+ * measures. Leaving it out would centre the lockup on the width the words
+ * would have had, which is the one place a stretched line would push past its
+ * own margin.
+ */
+export declare function linesWidth(lines: readonly TextLine[], measure: MeasureText, fontFamily: string): number;
+/** The room the mark takes along the row, including the gap after it. */
+export interface Mark {
+    readonly width: number;
+    readonly gap: number;
+}
+/**
+ * How much of the row the mark claims, or nothing at all where the project has
+ * no logo, which is what takes the gap with it.
+ *
+ * The width and the gap come back together because the words need both before
+ * they can be fitted, and deriving either of them twice is how the room
+ * reserved stops matching the room used.
+ */
+export declare function markSpace(logo: ImageAsset | undefined, contentHeight: number): Mark;
+/** Where the mark and the words go: side by side, centred in the area. */
+export interface Lockup {
+    readonly mark: Rect | undefined;
+    readonly text: Rect;
+}
+/**
+ * Set the mark beside the words and centre the pair.
+ *
+ * A cover is a strip between about 2.6:1 and 6:1, so the mark goes next to the
+ * name rather than above it as the `wordmark` template has it: stacked, three
+ * elements in 400px of height leave nothing legible. The words are then set
+ * from the left of the slot they were given rather than centred within it, so
+ * that a wrapped name lines up under itself and the whole lockup still sits in
+ * the middle.
+ *
+ * A project with no logo takes the same path with a mark of no width, which is
+ * one arrangement rather than two: `row` centres a single item exactly as it
+ * centres a pair.
+ */
+export declare function lockup(area: Rect, mark: Mark, textWidth: number): Lockup;
+/**
+ * The mark, centred down the slot it was given.
+ *
+ * Its height comes from the room the lockup has rather than from the slot,
+ * which is the whole content area tall: `row` gives every item the full height
+ * so that each can sit where it likes within it.
+ */
+export declare function markElement(logo: ImageAsset | undefined, slot: Rect | undefined): string;
+//# sourceMappingURL=lockup.d.ts.map

package/dist/templates/cover/lockup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lockup.d.ts","sourceRoot":"","sources":["../../../src/templates/cover/lockup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQ9D;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,QAAQ,EAAE,EAC1B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,GACjB,MAAM,CAiBR;AAED,yEAAyE;AACzE,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,aAAa,EAAE,MAAM,GACpB,IAAI,CASN;AAED,0EAA0E;AAC1E,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAUxE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,IAAI,EAAE,IAAI,GAAG,SAAS,GACrB,MAAM,CAiBR"}

package/dist/templates/cover/lockup.js

@@ -0,0 +1,78 @@
+import { image, row, trackedWidth } from "../../layout/index.js";
+/** The mark's height, as a fraction of the room the lockup has. */
+const markScale = 0.72;
+/** The clear space between the mark and the words, of the same room. */
+const markGapScale = 0.24;
+/**
+ * The widest of a block of lines, which is how wide the block is.
+ *
+ * Tracking counts towards it, because a tracked line is drawn wider than it
+ * measures. Leaving it out would centre the lockup on the width the words
+ * would have had, which is the one place a stretched line would push past its
+ * own margin.
+ */
+export function linesWidth(lines, measure, fontFamily) {
+    return lines.reduce((widest, line) => Math.max(widest, trackedWidth(line.text, measure(line.text, {
+        fontFamily,
+        fontSize: line.fontSize,
+        fontWeight: line.fontWeight,
+    }), line.letterSpacing ?? 0)), 0);
+}
+/**
+ * How much of the row the mark claims, or nothing at all where the project has
+ * no logo, which is what takes the gap with it.
+ *
+ * The width and the gap come back together because the words need both before
+ * they can be fitted, and deriving either of them twice is how the room
+ * reserved stops matching the room used.
+ */
+export function markSpace(logo, contentHeight) {
+    if (logo === undefined) {
+        return { width: 0, gap: 0 };
+    }
+    return {
+        width: Math.round(Math.round(contentHeight * markScale) * logo.aspect),
+        gap: Math.round(contentHeight * markGapScale),
+    };
+}
+/**
+ * Set the mark beside the words and centre the pair.
+ *
+ * A cover is a strip between about 2.6:1 and 6:1, so the mark goes next to the
+ * name rather than above it as the `wordmark` template has it: stacked, three
+ * elements in 400px of height leave nothing legible. The words are then set
+ * from the left of the slot they were given rather than centred within it, so
+ * that a wrapped name lines up under itself and the whole lockup still sits in
+ * the middle.
+ *
+ * A project with no logo takes the same path with a mark of no width, which is
+ * one arrangement rather than two: `row` centres a single item exactly as it
+ * centres a pair.
+ */
+export function lockup(area, mark, textWidth) {
+    const [markSlot, textSlot] = row([{ size: mark.width }, { size: textWidth, gapBefore: mark.gap }], area);
+    return {
+        mark: mark.width === 0 ? undefined : markSlot,
+        text: textSlot ?? area,
+    };
+}
+/**
+ * The mark, centred down the slot it was given.
+ *
+ * Its height comes from the room the lockup has rather than from the slot,
+ * which is the whole content area tall: `row` gives every item the full height
+ * so that each can sit where it likes within it.
+ */
+export function markElement(logo, slot) {
+    if (logo === undefined || slot === undefined) {
+        return "";
+    }
+    const height = Math.round(slot.height * markScale);
+    return image({
+        x: slot.x,
+        y: Math.round(slot.y + (slot.height - height) / 2),
+        width: slot.width,
+        height,
+    }, logo.href, { fit: "contain" });
+}
+//# sourceMappingURL=lockup.js.map

package/dist/templates/cover/lockup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lockup.js","sourceRoot":"","sources":["../../../src/templates/cover/lockup.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGjE,mEAAmE;AACnE,MAAM,SAAS,GAAG,IAAI,CAAC;AAEvB,wEAAwE;AACxE,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACxB,KAA0B,EAC1B,OAAoB,EACpB,UAAkB;IAElB,OAAO,KAAK,CAAC,MAAM,CACjB,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,CACf,IAAI,CAAC,GAAG,CACN,MAAM,EACN,YAAY,CACV,IAAI,CAAC,IAAI,EACT,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;QACjB,UAAU;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC,EACF,IAAI,CAAC,aAAa,IAAI,CAAC,CACxB,CACF,EACH,CAAC,CACF,CAAC;AACJ,CAAC;AAQD;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CACvB,IAA4B,EAC5B,aAAqB;IAErB,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO;QACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QACtE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,YAAY,CAAC;KAC9C,CAAC;AACJ,CAAC;AAQD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,MAAM,CAAC,IAAU,EAAE,IAAU,EAAE,SAAiB;IAC9D,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,GAAG,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,EAChE,IAAI,CACL,CAAC;IAEF,OAAO;QACL,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;QAC7C,IAAI,EAAE,QAAQ,IAAI,IAAI;KACvB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,IAA4B,EAC5B,IAAsB;IAEtB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAC7C,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAEnD,OAAO,KAAK,CACV;QACE,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAClD,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM;KACP,EACD,IAAI,CAAC,IAAI,EACT,EAAE,GAAG,EAAE,SAAS,EAAE,CACnB,CAAC;AACJ,CAAC"}

package/dist/templates/cover/tracking.d.ts

@@ -0,0 +1,16 @@
+import type { TextLine } from "../../layout/index.js";
+import type { MeasureText } from "../../types.js";
+/**
+ * Stretch a single line of tagline out to the width of the name above it.
+ *
+ * This is the adjustment somebody makes by hand in a drawing program and then
+ * has to make again every time the words change: the wordmark and the line
+ * under it share both edges, so the pair reads as one block rather than as two
+ * lines that happen to be centred together.
+ *
+ * Only a tagline of one line is tracked. Justifying every line of a wrapped
+ * one to the same width is a different thing to want, and it goes wrong on the
+ * short last line in the way justified text always does.
+ */
+export declare function trackTagline(name: readonly TextLine[], tagline: readonly TextLine[], measure: MeasureText, fontFamily: string): readonly TextLine[];
+//# sourceMappingURL=tracking.d.ts.map

package/dist/templates/cover/tracking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking.d.ts","sourceRoot":"","sources":["../../../src/templates/cover/tracking.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA0BlD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,SAAS,QAAQ,EAAE,EACzB,OAAO,EAAE,SAAS,QAAQ,EAAE,EAC5B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,GACjB,SAAS,QAAQ,EAAE,CAmBrB"}