@kensio/colophon 2.3.0 → 2.4.0

package/dist/layout/lines.js

@@ -0,0 +1,71 @@
+import { textElement } from "../text/index.js";
+import { distribute } from "./distribute.js";
+/** Vertical advance of a line, as a multiple of its font size. */
+const defaultLineHeight = 1.2;
+/**
+ * Where the baseline sits within a line's advance. A face puts its ascenders
+ * around here, and taking it as a fraction of the size rather than as a metric
+ * read from the font means a line lands in the same place whichever font the
+ * image is eventually drawn in.
+ */
+const baselineRatio = 0.8;
+/**
+ * The baseline of one line of text sitting in a band of its own font size.
+ *
+ * A template that has set room aside for a single line, rather than stacking
+ * several, wants this rather than a fraction of the font size chosen by eye:
+ * the ink then lands inside the band that was written down, so the clear space
+ * either side of it is the space that was reserved. The descender takes the
+ * rest of the band, which is why the room below a line is not the same as the
+ * room above it.
+ */
+export function baselineFor(top, fontSize) {
+    return Math.round(top + fontSize * baselineRatio);
+}
+/**
+ * Place a block of lines within an area and return each baseline.
+ *
+ * The lines are placed as one block rather than each finding its own middle,
+ * which is what keeps a wrapped title reading as a paragraph. A block taller
+ * than its area starts at the top and runs over, since a template that has
+ * overflowed wants to see it.
+ */
+export function placeLines(lines, area, lineHeight = defaultLineHeight, align = "centre") {
+    const placed = distribute(lines.map((line) => ({
+        size: line.fontSize * lineHeight,
+        ...(line.gapBefore !== undefined && { gapBefore: line.gapBefore }),
+    })), { start: area.y, end: area.y + area.height }, align);
+    return placed.map((placement, index) => ({
+        y: baselineFor(placement.start, lines[index]?.fontSize ?? 0),
+        index,
+    }));
+}
+/** The x a line is drawn from, which the anchor decides. */
+function anchorX(area, anchor) {
+    if (anchor === "middle") {
+        return Math.round(area.x + area.width / 2);
+    }
+    return anchor === "end" ? area.x + area.width : area.x;
+}
+/**
+ * Draw a block of lines within an area: place them, then write the `<text>`
+ * elements. Once a template has fitted its words, this is the whole of what it
+ * does with them.
+ */
+export function drawLines(lines, area, style) {
+    const placed = placeLines(lines, area, style.lineHeight ?? defaultLineHeight, style.align ?? "centre");
+    const x = anchorX(area, style.anchor);
+    return lines
+        .map((line, index) => textElement(line.text, {
+        x,
+        y: placed[index]?.y ?? area.y,
+        fontFamily: style.fontFamily,
+        fontSize: line.fontSize,
+        fontWeight: line.fontWeight,
+        fill: style.fill,
+        fillOpacity: line.opacity,
+        ...(style.anchor !== undefined && { anchor: style.anchor }),
+    }))
+        .join("");
+}
+//# sourceMappingURL=lines.js.map

package/dist/layout/lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../src/layout/lines.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,kEAAkE;AAClE,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAE9B;;;;;GAKG;AACH,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,GAAW,EAAE,QAAgB;IACvD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,GAAG,aAAa,CAAC,CAAC;AACpD,CAAC;AAoBD;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACxB,KAA0B,EAC1B,IAAU,EACV,UAAU,GAAG,iBAAiB,EAC9B,KAAK,GAAU,QAAQ;IAEvB,MAAM,MAAM,GAAG,UAAU,CACvB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,UAAU;QAChC,GAAG,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;KACnE,CAAC,CAAC,EACH,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,EAC5C,KAAK,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACvC,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC;QAC5D,KAAK;KACN,CAAC,CAAC,CAAC;AACN,CAAC;AAED,4DAA4D;AAC5D,SAAS,OAAO,CAAC,IAAU,EAAE,MAA4B;IACvD,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACzD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACvB,KAA0B,EAC1B,IAAU,EACV,KAAiB;IAEjB,MAAM,MAAM,GAAG,UAAU,CACvB,KAAK,EACL,IAAI,EACJ,KAAK,CAAC,UAAU,IAAI,iBAAiB,EACrC,KAAK,CAAC,KAAK,IAAI,QAAQ,CACxB,CAAC;IACF,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEtC,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACnB,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE;QACrB,CAAC;QACD,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC;QAC7B,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,WAAW,EAAE,IAAI,CAAC,OAAO;QACzB,GAAG,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;KAC5D,CAAC,CACH;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC"}

package/dist/layout/measure.d.ts

@@ -0,0 +1,11 @@
+import type { MeasureAt } from "../text/index.js";
+import type { MeasureText } from "../types.js";
+/**
+ * Bind a measurer to one family and weight, leaving only the size open.
+ *
+ * That is the shape fitting text wants, since choosing a size is the whole of
+ * what it varies, and it keeps a template from repeating the family and weight
+ * on every call.
+ */
+export declare function measureIn(measure: MeasureText, fontFamily: string, fontWeight: number): MeasureAt;
+//# sourceMappingURL=measure.d.ts.map

package/dist/layout/measure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure.d.ts","sourceRoot":"","sources":["../../src/layout/measure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,SAAS,CAGX"}

package/dist/layout/measure.js

@@ -0,0 +1,11 @@
+/**
+ * Bind a measurer to one family and weight, leaving only the size open.
+ *
+ * That is the shape fitting text wants, since choosing a size is the whole of
+ * what it varies, and it keeps a template from repeating the family and weight
+ * on every call.
+ */
+export function measureIn(measure, fontFamily, fontWeight) {
+    return (text, fontSize) => measure(text, { fontFamily, fontSize, fontWeight });
+}
+//# sourceMappingURL=measure.js.map

package/dist/layout/measure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure.js","sourceRoot":"","sources":["../../src/layout/measure.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,OAAoB,EACpB,UAAkB,EAClB,UAAkB;IAElB,OAAO,CAAC,IAAY,EAAE,QAAgB,EAAU,EAAE,CAChD,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;AACxD,CAAC"}

package/dist/layout/panel.d.ts

@@ -0,0 +1,20 @@
+import type { BoxStyle, Rect } from "./types.js";
+/** A panel is a box that casts a shadow. */
+export interface PanelStyle extends BoxStyle {
+    /**
+     * How far the shadow falls below the panel. Omit for none, which is right
+     * for a panel that is a region of the image rather than a card on top of it.
+     */
+    readonly shadow?: number;
+    readonly shadowColor?: string;
+    readonly shadowOpacity?: number;
+}
+/**
+ * A raised plate: a soft shadow, then the surface on top of it.
+ *
+ * The shadow is a second rectangle rather than a blur filter. It costs a
+ * rasteriser nothing, it survives every backend, and at these sizes a hard
+ * offset reads as depth just as well as a blurred one.
+ */
+export declare function panel(rect: Rect, style?: PanelStyle): string;
+//# sourceMappingURL=panel.d.ts.map

package/dist/layout/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/layout/panel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEjD,4CAA4C;AAC5C,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACjC;AAKD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,GAAE,UAAe,GAAG,MAAM,CAiBhE"}

package/dist/layout/panel.js

@@ -0,0 +1,22 @@
+import { box } from "./box.js";
+const defaultShadowColor = "#000000";
+const defaultShadowOpacity = 0.22;
+/**
+ * A raised plate: a soft shadow, then the surface on top of it.
+ *
+ * The shadow is a second rectangle rather than a blur filter. It costs a
+ * rasteriser nothing, it survives every backend, and at these sizes a hard
+ * offset reads as depth just as well as a blurred one.
+ */
+export function panel(rect, style = {}) {
+    const { shadow, shadowColor, shadowOpacity, ...surface } = style;
+    if (shadow === undefined) {
+        return box(rect, surface);
+    }
+    return (box({ ...rect, y: rect.y + shadow }, {
+        ...(surface.radius !== undefined && { radius: surface.radius }),
+        fill: shadowColor ?? defaultShadowColor,
+        fillOpacity: shadowOpacity ?? defaultShadowOpacity,
+    }) + box(rect, surface));
+}
+//# sourceMappingURL=panel.js.map

package/dist/layout/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/layout/panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAc/B,MAAM,kBAAkB,GAAG,SAAS,CAAC;AACrC,MAAM,oBAAoB,GAAG,IAAI,CAAC;AAElC;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,IAAU,EAAE,KAAK,GAAe,EAAE;IACtD,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IAEjE,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CACL,GAAG,CACD,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,EAAE,EAC/B;QACE,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;QAC/D,IAAI,EAAE,WAAW,IAAI,kBAAkB;QACvC,WAAW,EAAE,aAAa,IAAI,oBAAoB;KACnD,CACF,GAAG,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CACvB,CAAC;AACJ,CAAC"}

package/dist/layout/row.d.ts

@@ -0,0 +1,15 @@
+import type { Align, Extent, Rect } from "./types.js";
+/** A placed item's rectangle, and which item it belongs to. */
+export interface RowRect extends Rect {
+    readonly index: number;
+}
+/**
+ * Set items across an area and give each one its rectangle: an avatar beside a
+ * name, a badge beside a title, a row of tags along the bottom.
+ *
+ * Each keeps the full height of the area, so an item shorter than the row
+ * centres itself within the rectangle it was given rather than being told
+ * where to sit.
+ */
+export declare function row(items: readonly Extent[], area: Rect, align?: Align): readonly RowRect[];
+//# sourceMappingURL=row.d.ts.map

package/dist/layout/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../src/layout/row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEtD,+DAA+D;AAC/D,MAAM,WAAW,OAAQ,SAAQ,IAAI;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,wBAAgB,GAAG,CACjB,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,GAAE,KAAgB,GACtB,SAAS,OAAO,EAAE,CAcpB"}

package/dist/layout/row.js

@@ -0,0 +1,20 @@
+import { distribute } from "./distribute.js";
+/**
+ * Set items across an area and give each one its rectangle: an avatar beside a
+ * name, a badge beside a title, a row of tags along the bottom.
+ *
+ * Each keeps the full height of the area, so an item shorter than the row
+ * centres itself within the rectangle it was given rather than being told
+ * where to sit.
+ */
+export function row(items, area, align = "centre") {
+    const placed = distribute(items, { start: area.x, end: area.x + area.width }, align);
+    return placed.map((placement, index) => ({
+        x: placement.start,
+        y: area.y,
+        width: items[index]?.size ?? 0,
+        height: area.height,
+        index: placement.index,
+    }));
+}
+//# sourceMappingURL=row.js.map

package/dist/layout/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/layout/row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CACjB,KAAwB,EACxB,IAAU,EACV,KAAK,GAAU,QAAQ;IAEvB,MAAM,MAAM,GAAG,UAAU,CACvB,KAAK,EACL,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,EAC3C,KAAK,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACvC,CAAC,EAAE,SAAS,CAAC,KAAK;QAClB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC;QAC9B,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,SAAS,CAAC,KAAK;KACvB,CAAC,CAAC,CAAC;AACN,CAAC"}

package/dist/layout/scrim.d.ts

@@ -0,0 +1,23 @@
+import type { Rect } from "./types.js";
+/** How heavily a scrim shades what is under it, and from which edge. */
+export interface ScrimOptions {
+    readonly color?: string;
+    /** Opacity at the top edge. Defaults to none, so the image shows through. */
+    readonly from?: number;
+    /** Opacity at the bottom edge. */
+    readonly to?: number;
+}
+/**
+ * A wash of colour over an image, so that text on top of it can be read.
+ *
+ * This is the difference between a designed image and text sitting on a photo.
+ * A photograph has light and dark in it wherever it likes, and white text over
+ * a bright sky is invisible; a gradient from clear at the top to dark at the
+ * bottom keeps a headline legible without hiding the picture.
+ *
+ * `id` names the gradient and has to be unique within the image. A flat wash
+ * needs no gradient, so it needs no `id` either: pass the same value for
+ * `from` and `to`.
+ */
+export declare function scrim(rect: Rect, id: string, options?: ScrimOptions): string;
+//# sourceMappingURL=scrim.d.ts.map

package/dist/layout/scrim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrim.d.ts","sourceRoot":"","sources":["../../src/layout/scrim.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC,wEAAwE;AACxE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,YAAiB,GACzB,MAAM,CA0BR"}

package/dist/layout/scrim.js

@@ -0,0 +1,38 @@
+import { escapeXml } from "../text/index.js";
+import { box } from "./box.js";
+const defaultColor = "#000000";
+/**
+ * A wash of colour over an image, so that text on top of it can be read.
+ *
+ * This is the difference between a designed image and text sitting on a photo.
+ * A photograph has light and dark in it wherever it likes, and white text over
+ * a bright sky is invisible; a gradient from clear at the top to dark at the
+ * bottom keeps a headline legible without hiding the picture.
+ *
+ * `id` names the gradient and has to be unique within the image. A flat wash
+ * needs no gradient, so it needs no `id` either: pass the same value for
+ * `from` and `to`.
+ */
+export function scrim(rect, id, options = {}) {
+    const from = options.from ?? 0;
+    const to = options.to ?? 0.55;
+    if (from === to) {
+        return box(rect, {
+            fill: options.color ?? defaultColor,
+            fillOpacity: from,
+        });
+    }
+    // Escaped here for the reason `box` escapes what it is given: both of these
+    // may have come from a post's frontmatter by way of a template. The fill
+    // below takes the id raw, since `box` does its own escaping and the two
+    // attributes have to agree once parsed rather than as written.
+    const color = escapeXml(options.color ?? defaultColor);
+    const gradient = `<defs>` +
+        `<linearGradient id="${escapeXml(id)}" x1="0" y1="0" x2="0" y2="1">` +
+        `<stop offset="0%" stop-color="${color}" stop-opacity="${String(from)}"/>` +
+        `<stop offset="100%" stop-color="${color}" stop-opacity="${String(to)}"/>` +
+        `</linearGradient>` +
+        `</defs>`;
+    return gradient + box(rect, { fill: `url(#${id})` });
+}
+//# sourceMappingURL=scrim.js.map

package/dist/layout/scrim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrim.js","sourceRoot":"","sources":["../../src/layout/scrim.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAY/B,MAAM,YAAY,GAAG,SAAS,CAAC;AAE/B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,KAAK,CACnB,IAAU,EACV,EAAU,EACV,OAAO,GAAiB,EAAE;IAE1B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;IAC/B,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC;IAE9B,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;QAChB,OAAO,GAAG,CAAC,IAAI,EAAE;YACf,IAAI,EAAE,OAAO,CAAC,KAAK,IAAI,YAAY;YACnC,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC;IAED,4EAA4E;IAC5E,yEAAyE;IACzE,wEAAwE;IACxE,+DAA+D;IAC/D,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC;IAEvD,MAAM,QAAQ,GACZ,QAAQ;QACR,uBAAuB,SAAS,CAAC,EAAE,CAAC,gCAAgC;QACpE,iCAAiC,KAAK,mBAAmB,MAAM,CAAC,IAAI,CAAC,KAAK;QAC1E,mCAAmC,KAAK,mBAAmB,MAAM,CAAC,EAAE,CAAC,KAAK;QAC1E,mBAAmB;QACnB,SAAS,CAAC;IAEZ,OAAO,QAAQ,GAAG,GAAG,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;AACvD,CAAC"}

package/dist/layout/stack.d.ts

@@ -0,0 +1,14 @@
+import type { Align, Extent, Rect } from "./types.js";
+/** A stacked item's rectangle, and which item it belongs to. */
+export interface StackedRect extends Rect {
+    readonly index: number;
+}
+/**
+ * Stack items down an area and give each one its rectangle.
+ *
+ * Each keeps the full width of the area, because the vertical placement is the
+ * only decision being made here. An item that wants less width draws itself
+ * narrower, or puts a `row` inside the rectangle it was given.
+ */
+export declare function stack(items: readonly Extent[], area: Rect, align?: Align): readonly StackedRect[];
+//# sourceMappingURL=stack.d.ts.map

package/dist/layout/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/layout/stack.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEtD,gEAAgE;AAChE,MAAM,WAAW,WAAY,SAAQ,IAAI;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CACnB,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,GAAE,KAAgB,GACtB,SAAS,WAAW,EAAE,CAcxB"}

package/dist/layout/stack.js

@@ -0,0 +1,19 @@
+import { distribute } from "./distribute.js";
+/**
+ * Stack items down an area and give each one its rectangle.
+ *
+ * Each keeps the full width of the area, because the vertical placement is the
+ * only decision being made here. An item that wants less width draws itself
+ * narrower, or puts a `row` inside the rectangle it was given.
+ */
+export function stack(items, area, align = "centre") {
+    const placed = distribute(items, { start: area.y, end: area.y + area.height }, align);
+    return placed.map((placement, index) => ({
+        x: area.x,
+        y: placement.start,
+        width: area.width,
+        height: items[index]?.size ?? 0,
+        index: placement.index,
+    }));
+}
+//# sourceMappingURL=stack.js.map

package/dist/layout/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../src/layout/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CACnB,KAAwB,EACxB,IAAU,EACV,KAAK,GAAU,QAAQ;IAEvB,MAAM,MAAM,GAAG,UAAU,CACvB,KAAK,EACL,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,EAC5C,KAAK,CACN,CAAC;IAEF,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACvC,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,SAAS,CAAC,KAAK;QAClB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC;QAC/B,KAAK,EAAE,SAAS,CAAC,KAAK;KACvB,CAAC,CAAC,CAAC;AACN,CAAC"}

package/dist/layout/types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * A rectangle in image coordinates, which is what every primitive here takes
+ * and returns. Templates are handed the image's `dimensions` and work down
+ * from there, so a rectangle is the one shape they all have in common.
+ */
+export interface Rect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/**
+ * A stretch of one axis: top and bottom for a stack, left and right for a row.
+ * `start` is the smaller coordinate, so it is the top or the left edge.
+ */
+export interface Span {
+    readonly start: number;
+    readonly end: number;
+}
+/**
+ * Where a group of items sits within the space it was given. `centre` is the
+ * default everywhere, because a share image is looked at rather than read down,
+ * and the middle is where the eye goes.
+ */
+export type Align = "start" | "centre" | "end";
+/**
+ * How much of an axis one item takes, and how much clear space goes before it.
+ * A gap on the first item is space at the head of the group.
+ */
+export interface Extent {
+    readonly size: number;
+    readonly gapBefore?: number;
+}
+/** Where an item ended up: its start coordinate along the axis. */
+export interface Placed {
+    readonly start: number;
+    readonly index: number;
+}
+/** Fill, corners and stroke for a rectangle. Every field is optional. */
+export interface BoxStyle {
+    readonly fill?: string;
+    readonly fillOpacity?: number;
+    /** Corner radius. Omit for square corners. */
+    readonly radius?: number;
+    readonly stroke?: string;
+    readonly strokeOpacity?: number;
+    readonly strokeWidth?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/layout/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/layout/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,mEAAmE;AACnE,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,yEAAyE;AACzE,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,8CAA8C;IAC9C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B"}

package/dist/layout/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/layout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/layout/types.ts"],"names":[],"mappings":""}

package/dist/manifest/build.d.ts

@@ -4,7 +4,7 @@ import type { Manifest } from "../types.js";
  * Build the manifest for a planned build.
  *
  * It is built from the jobs rather than from what was written, so a rebuild
- * that skips every image still describes the whole site — the manifest says
+ * that skips every image still describes the whole site. The manifest says
  * what exists, not what happened this time.
  *
  * Pages are sorted by slug, and each page's images by size name, so a manifest

package/dist/manifest/build.js

@@ -27,7 +27,7 @@ function drafts(jobs) {
  * Build the manifest for a planned build.
  *
  * It is built from the jobs rather than from what was written, so a rebuild
- * that skips every image still describes the whole site — the manifest says
+ * that skips every image still describes the whole site. The manifest says
  * what exists, not what happened this time.
  *
  * Pages are sorted by slug, and each page's images by size name, so a manifest

package/dist/manifest/index.d.ts

@@ -13,7 +13,7 @@ export interface PlannedManifest {
  *
  * Built while planning rather than from the results, so that a site with two
  * pages sharing a slug hears about it before rendering the tree rather than
- * after — the same reason the output paths are checked up front.
+ * after. That is the same reason the output paths are checked up front.
  */
 export declare function planManifest(manifestPath: string | undefined, jobs: readonly RenderJob[]): PlannedManifest | undefined;
 /**

package/dist/manifest/index.js

@@ -7,7 +7,7 @@ export { buildManifest } from "./build.js";
  *
  * Built while planning rather than from the results, so that a site with two
  * pages sharing a slug hears about it before rendering the tree rather than
- * after — the same reason the output paths are checked up front.
+ * after. That is the same reason the output paths are checked up front.
  */
 export function planManifest(manifestPath, jobs) {
     return manifestPath === undefined

package/dist/manifest/order.d.ts

@@ -4,7 +4,7 @@
  *
  * The manifest is written into a site's repository and committed, so the order
  * has to be the same on a laptop and on CI. `localeCompare` reads the default
- * locale, and locales disagree about case and accented letters — a slug of
+ * locale, and locales disagree about case and accented letters, so a slug of
  * `Über` or `MyPost` could sort one way in development and another in the
  * build, leaving a diff that says nothing happened.
  */

package/dist/manifest/order.js

@@ -4,7 +4,7 @@
  *
  * The manifest is written into a site's repository and committed, so the order
  * has to be the same on a laptop and on CI. `localeCompare` reads the default
- * locale, and locales disagree about case and accented letters — a slug of
+ * locale, and locales disagree about case and accented letters, so a slug of
  * `Über` or `MyPost` could sort one way in development and another in the
  * build, leaving a diff that says nothing happened.
  */

package/dist/manifest/page.d.ts

@@ -5,8 +5,8 @@ import type { ManifestPage } from "../types.js";
  * of them so far.
  *
  * A page is created from its first job rather than from an empty list, so
- * there is never a page without images to explain away — `widest` has to name
- * one of them.
+ * there is never a page without images to explain away, since `widest` has to
+ * name one of them.
  */
 export interface PageDraft {
     readonly jobs: RenderJob[];

package/dist/manifest/page.js

@@ -21,9 +21,9 @@ export function addToPage(page, job) {
  * Reject two pages sharing a slug.
  *
  * The manifest is keyed by slug, so a site looking a page up would find
- * whichever was written last — an image quietly belonging to the wrong post,
- * which is worse than no manifest at all. Their images may well be distinct on
- * disk, so nothing else in the build has any reason to complain.
+ * whichever was written last. That is an image quietly belonging to the wrong
+ * post, which is worse than no manifest at all. Their images may well be
+ * distinct on disk, so nothing else in the build has any reason to complain.
  */
 function assertOnePage(slug, page) {
     const paths = [...new Set(page.jobs.map((job) => job.contentPath))];

package/dist/measure/estimate.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Width of `text` when there is no font to measure it in, either because none
+ * were configured or because the stack names one the build did not load.
+ *
+ * It is a guess, and a build that wants text laid out to the pixel supplies
+ * the font as a file. What it is not is a guess a template has to make: the
+ * one ratio lives here, where the reason for it can be written down once.
+ */
+export declare function estimateWidth(text: string, fontSize: number, weight: number, ratio?: number): number;
+//# sourceMappingURL=estimate.d.ts.map

package/dist/measure/estimate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estimate.d.ts","sourceRoot":"","sources":["../../src/measure/estimate.ts"],"names":[],"mappings":"AA8CA;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,SAAe,GACnB,MAAM,CAQR"}

package/dist/measure/estimate.js

@@ -0,0 +1,58 @@
+/**
+ * Advance width to assume for proportional text, as a fraction of the font
+ * size. It is the average over the sort of text a share image carries, mostly
+ * lower-case Latin with spaces, for the sans-serif faces a site is likely to
+ * use. Nothing here is exact, which is the point of measuring instead.
+ */
+const defaultRatio = 0.52;
+/**
+ * Characters that occupy a full em rather than a fraction of one: the CJK
+ * ranges, Hangul, kana, the fullwidth forms and emoji.
+ *
+ * Estimating these at the Latin ratio is what makes a Japanese title overflow
+ * by nearly half its width, and no per-template fudge factor can be right for
+ * both scripts at once. Widths of the scripts in between, such as Devanagari,
+ * are still guesses; those want a font file, which is what measuring is for.
+ */
+const wideRanges = [
+    [0x11_00, 0x11_5f], // Hangul Jamo
+    [0x2e_80, 0x30_3e], // CJK radicals and punctuation
+    [0x30_41, 0x33_ff], // Kana through the CJK compatibility forms
+    [0x34_00, 0x4d_bf], // CJK extension A
+    [0x4e_00, 0x9f_ff], // CJK unified ideographs
+    [0xa0_00, 0xa4_cf], // Yi
+    [0xac_00, 0xd7_a3], // Hangul syllables
+    [0xf9_00, 0xfa_ff], // CJK compatibility ideographs
+    [0xfe_30, 0xfe_4f], // CJK compatibility forms
+    [0xff_00, 0xff_60], // Fullwidth forms, but not the halfwidth kana after them
+    [0xff_e0, 0xff_e6], // Fullwidth currency and bar symbols
+    [0x1_f3_00, 0x1_fa_ff], // Emoji
+    [0x2_00_00, 0x3_ff_fd], // CJK extensions B onwards
+];
+function isWide(character) {
+    const point = character.codePointAt(0) ?? 0;
+    return wideRanges.some(([from, to]) => point >= from && point <= to);
+}
+/**
+ * How much wider a face gets as its weight rises. A bold cut of a family runs
+ * around a tenth wider than its regular; heavier than bold, little more.
+ */
+function weightFactor(weight) {
+    return 1 + Math.min(Math.max(weight - 400, 0) / 400, 1) * 0.1;
+}
+/**
+ * Width of `text` when there is no font to measure it in, either because none
+ * were configured or because the stack names one the build did not load.
+ *
+ * It is a guess, and a build that wants text laid out to the pixel supplies
+ * the font as a file. What it is not is a guess a template has to make: the
+ * one ratio lives here, where the reason for it can be written down once.
+ */
+export function estimateWidth(text, fontSize, weight, ratio = defaultRatio) {
+    let ems = 0;
+    for (const character of text) {
+        ems += isWide(character) ? 1 : ratio;
+    }
+    return ems * fontSize * weightFactor(weight);
+}
+//# sourceMappingURL=estimate.js.map

package/dist/measure/estimate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"estimate.js","sourceRoot":"","sources":["../../src/measure/estimate.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,UAAU,GAA2C;IACzD,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,cAAc;IAClC,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,+BAA+B;IACnD,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,2CAA2C;IAC/D,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB;IACtC,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,yBAAyB;IAC7C,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,KAAK;IACzB,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,mBAAmB;IACvC,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,+BAA+B;IACnD,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,0BAA0B;IAC9C,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,yDAAyD;IAC7E,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,qCAAqC;IACzD,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,QAAQ;IAChC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,2BAA2B;CACpD,CAAC;AAEF,SAAS,MAAM,CAAC,SAAiB;IAC/B,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC5C,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC,CAAC;AACvE,CAAC;AAED;;;GAGG;AACH,SAAS,YAAY,CAAC,MAAc;IAClC,OAAO,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;AAChE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAC3B,IAAY,EACZ,QAAgB,EAChB,MAAc,EACd,KAAK,GAAG,YAAY;IAEpB,IAAI,GAAG,GAAG,CAAC,CAAC;IAEZ,KAAK,MAAM,SAAS,IAAI,IAAI,EAAE,CAAC;QAC7B,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACvC,CAAC;IAED,OAAO,GAAG,GAAG,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AAC/C,CAAC"}

package/dist/measure/faces.d.ts

@@ -0,0 +1,15 @@
+import type { Font } from "fontkit";
+import type { FontSource, WarningHandler } from "../types.js";
+/**
+ * One face loaded for measurement: the font itself, plus the family and weight
+ * it declares. Both are read from the file rather than from config, for the
+ * reason {@link FontSource} gives: the file is what the rasteriser matches on.
+ */
+export interface Face {
+    readonly family: string;
+    readonly weight: number;
+    readonly font: Font;
+}
+/** Every face the configured fonts hold, in the order they were configured. */
+export declare function loadFaces(fonts: readonly FontSource[], onWarning: WarningHandler): Promise<readonly Face[]>;
+//# sourceMappingURL=faces.d.ts.map

package/dist/measure/faces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"faces.d.ts","sourceRoot":"","sources":["../../src/measure/faces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;GAIG;AACH,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;CACrB;AAuFD,+EAA+E;AAC/E,wBAAsB,SAAS,CAC7B,KAAK,EAAE,SAAS,UAAU,EAAE,EAC5B,SAAS,EAAE,cAAc,GACxB,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC,CAM1B"}