@kensio/colophon 2.11.0 → 2.12.0

package/dist/templates/code/mark/draw.js

@@ -0,0 +1,41 @@
+import { box } from "../../../layout/index.js";
+/** Clear space around the marked characters, as a fraction of the size. */
+const padScale = 0.16;
+/** The band a line's glyphs are drawn in, which is what a mark encloses. */
+function lineRect(span, metrics) {
+    const { originY, step, fontSize } = metrics;
+    const pad = fontSize * padScale;
+    return {
+        y: Math.round(originY + span.line * step + (step - fontSize) / 2 - pad),
+        height: Math.round(fontSize + pad * 2),
+    };
+}
+/**
+ * A mark over one span of code: a box around the characters, or a band across
+ * the line where the post named no columns.
+ *
+ * The box is stroked and the band is filled, which is the difference between
+ * pointing at something and highlighting it. Both take the palette's warm
+ * accent by default, so a mark is the one thing on the image that is neither
+ * the code theme's colours nor the site's brand.
+ */
+export function markSvg(span, metrics, color) {
+    const { originX, charWidth, fontSize } = metrics;
+    const { y, height } = lineRect(span, metrics);
+    const fill = span.color ?? color;
+    if (span.length === undefined) {
+        return box({ x: metrics.band.x, y, width: metrics.band.width, height }, { radius: Math.round(fontSize * 0.2), fill, fillOpacity: 0.16 });
+    }
+    const pad = charWidth * padScale;
+    return box({
+        x: Math.round(originX + span.column * charWidth - pad),
+        y,
+        width: Math.round(span.length * charWidth + pad * 2),
+        height,
+    }, {
+        radius: Math.round(fontSize * 0.2),
+        stroke: fill,
+        strokeWidth: Math.max(1, Math.round(fontSize * 0.08)),
+    });
+}
+//# sourceMappingURL=draw.js.map

package/dist/templates/code/mark/draw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/draw.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAe/C,2EAA2E;AAC3E,MAAM,QAAQ,GAAG,IAAI,CAAC;AAEtB,4EAA4E;AAC5E,SAAS,QAAQ,CACf,IAAc,EACd,OAAoB;IAEpB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAC5C,MAAM,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhC,OAAO;QACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACvE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;KACvC,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CACrB,IAAc,EACd,OAAoB,EACpB,KAAa;IAEb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IACjD,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;IAEjC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,GAAG,CACR,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,EAC3D,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,GAAG,GAAG,SAAS,GAAG,QAAQ,CAAC;IAEjC,OAAO,GAAG,CACR;QACE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,GAAG,CAAC;QACtD,CAAC;QACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC;QACpD,MAAM;KACP,EACD;QACE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC;QAClC,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;KACtD,CACF,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { CodeToken } from "../../../highlight/index.js";
+import type { MetaImageProps, ResolvedConfig } from "../../../types.js";
+import type { MarkMetrics } from "./draw.js";
+export type { MarkMetrics } from "./draw.js";
+/**
+ * What a post asked to have marked on its snippet, drawn over the code.
+ *
+ * A mark that cannot be placed is reported rather than dropped quietly. There
+ * are three ways to get one, and an author cannot tell them apart from the
+ * image: the text is not in the snippet at all, or it is on a line the fitting
+ * dropped, or it was past the width and got clipped. The message says the
+ * marks were not found, and the truncation warning beside it says whether
+ * there was room for them.
+ */
+export declare function codeMarks(props: MetaImageProps, lines: readonly (readonly CodeToken[])[], metrics: MarkMetrics, config: ResolvedConfig): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,cAAc,GACrB,MAAM,CA0BR"}

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

@@ -0,0 +1,34 @@
+import { markSvg } from "./draw.js";
+import { locateMark } from "./locate.js";
+import { readMarks } from "./read.js";
+/**
+ * What a post asked to have marked on its snippet, drawn over the code.
+ *
+ * A mark that cannot be placed is reported rather than dropped quietly. There
+ * are three ways to get one, and an author cannot tell them apart from the
+ * image: the text is not in the snippet at all, or it is on a line the fitting
+ * dropped, or it was past the width and got clipped. The message says the
+ * marks were not found, and the truncation warning beside it says whether
+ * there was room for them.
+ */
+export function codeMarks(props, lines, metrics, config) {
+    // Widened because this arrives from a post's frontmatter: the declared type
+    // is what a project means to write, not what the file holds.
+    const declared = props["mark"];
+    const missing = [];
+    let drawn = "";
+    for (const mark of readMarks(declared, config)) {
+        const span = locateMark(mark, lines);
+        if (span === undefined) {
+            missing.push(mark.text ?? `line ${String(mark.line ?? 0)}`);
+            continue;
+        }
+        drawn += markSvg(span, metrics, config.colors.brandWarm);
+    }
+    if (missing.length > 0) {
+        config.onWarning(`code mark ${missing.map((name) => JSON.stringify(name)).join(", ")}` +
+            ` not found in the snippet as drawn.`);
+    }
+    return drawn;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CACvB,KAAqB,EACrB,KAAwC,EACxC,OAAoB,EACpB,MAAsB;IAEtB,4EAA4E;IAC5E,6DAA6D;IAC7D,MAAM,QAAQ,GAAY,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;QAC/C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAErC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5D,SAAS;QACX,CAAC;QAED,KAAK,IAAI,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACvB,MAAM,CAAC,SAAS,CACd,aAAa,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACnE,qCAAqC,CACxC,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/templates/code/mark/locate.d.ts

@@ -0,0 +1,20 @@
+import type { CodeToken } from "../../../highlight/index.js";
+import type { CodeMark } from "./read.js";
+/** Where a mark landed on the character grid, once it was found. */
+export interface MarkSpan {
+    /** Zero-based, into the lines being drawn. */
+    readonly line: number;
+    readonly column: number;
+    /** Characters, or `undefined` for the whole line. */
+    readonly length: number | undefined;
+    readonly color: string | undefined;
+}
+/**
+ * Turn a declared mark into grid coordinates, or nothing where it names
+ * something the image does not show.
+ *
+ * A mark naming a line and no column is the whole line, which is the band an
+ * editor draws rather than a box around a word.
+ */
+export declare function locateMark(mark: CodeMark, lines: readonly (readonly CodeToken[])[]): MarkSpan | undefined;
+//# sourceMappingURL=locate.d.ts.map

package/dist/templates/code/mark/locate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locate.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/locate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,oEAAoE;AACpE,MAAM,WAAW,QAAQ;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAsCD;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,GACvC,QAAQ,GAAG,SAAS,CAyBtB"}

package/dist/templates/code/mark/locate.js

@@ -0,0 +1,56 @@
+/**
+ * One line as plain text, rebuilt from the tokens by putting each back at its
+ * own column.
+ *
+ * The tokens are what survived highlighting, fitting and clipping, so this is
+ * the line as it will be drawn rather than as it was written. Searching what
+ * is drawn is the point: a mark on a line that was dropped has nowhere to go,
+ * and finding it in the original snippet would only mean drawing a box in the
+ * wrong place.
+ */
+function lineText(tokens) {
+    let text = "";
+    for (const token of tokens) {
+        text = text.padEnd(token.column, " ") + token.text;
+    }
+    return text;
+}
+/** The first line holding the text, and where on it. */
+function findText(text, lines) {
+    for (const [line, tokens] of lines.entries()) {
+        const column = lineText(tokens).indexOf(text);
+        if (column !== -1) {
+            return { line, column };
+        }
+    }
+    return undefined;
+}
+/**
+ * Turn a declared mark into grid coordinates, or nothing where it names
+ * something the image does not show.
+ *
+ * A mark naming a line and no column is the whole line, which is the band an
+ * editor draws rather than a box around a word.
+ */
+export function locateMark(mark, lines) {
+    const color = mark.color;
+    if (mark.text !== undefined) {
+        const found = findText(mark.text, lines);
+        return found === undefined
+            ? undefined
+            : { ...found, length: mark.length ?? mark.text.length, color };
+    }
+    const line = (mark.line ?? 0) - 1;
+    if (line < 0 || line >= lines.length) {
+        return undefined;
+    }
+    return mark.column === undefined
+        ? { line, column: 0, length: undefined, color }
+        : {
+            line,
+            column: mark.column - 1,
+            length: mark.length ?? 1,
+            color,
+        };
+}
+//# sourceMappingURL=locate.js.map

package/dist/templates/code/mark/locate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locate.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/locate.ts"],"names":[],"mappings":"AAaA;;;;;;;;;GASG;AACH,SAAS,QAAQ,CAAC,MAA4B;IAC5C,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;IACrD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,wDAAwD;AACxD,SAAS,QAAQ,CACf,IAAY,EACZ,KAAwC;IAExC,KAAK,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;QAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAE9C,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YAClB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CACxB,IAAc,EACd,KAAwC;IAExC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAEzC,OAAO,KAAK,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACnE,CAAC;IAED,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAElC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE;QAC/C,CAAC,CAAC;YACE,IAAI;YACJ,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC;YACxB,KAAK;SACN,CAAC;AACR,CAAC"}

package/dist/templates/code/mark/read.d.ts

@@ -0,0 +1,30 @@
+import type { ResolvedConfig } from "../../../types.js";
+/**
+ * One thing a post asked to have marked on its snippet.
+ *
+ * `text` names it by what it says, which is what frontmatter usually wants: it
+ * survives the snippet being edited above the line, and it is what somebody
+ * would type. `line` and `column` name it by where it is, for the times the
+ * same text appears twice or the thing worth marking is a whole line.
+ */
+export interface CodeMark {
+    readonly text?: string;
+    /** One-based, as an editor counts. */
+    readonly line?: number;
+    /** One-based. Omit it, with no `text`, to mark the whole line. */
+    readonly column?: number;
+    /** Characters from `column`. Defaults to what `text` is, or the line. */
+    readonly length?: number;
+    /** Defaults to the palette's warm accent. */
+    readonly color?: string;
+}
+/**
+ * The marks a post declared: one, or a list of them.
+ *
+ * Anything that is neither a string nor an object saying where to look is a
+ * mistake in the frontmatter, and it is reported rather than dropped. A mark
+ * that goes missing is invisible in the finished image, so nothing else would
+ * ever say the post asked for one.
+ */
+export declare function readMarks(declared: unknown, config: ResolvedConfig): readonly CodeMark[];
+//# sourceMappingURL=read.d.ts.map

package/dist/templates/code/mark/read.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"read.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/read.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;GAOG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AA8CD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,cAAc,GACrB,SAAS,QAAQ,EAAE,CAuBrB"}

package/dist/templates/code/mark/read.js

@@ -0,0 +1,61 @@
+import { optionalString } from "../../../props.js";
+function number(value) {
+    return typeof value === "number" && Number.isFinite(value)
+        ? value
+        : undefined;
+}
+/** One declared mark, read field by field the way a badge is. */
+function markFromProps(declared) {
+    const read = (key) => key in declared ? declared[key] : undefined;
+    const text = optionalString(read("text"));
+    const line = number(read("line"));
+    if ((text === undefined || text === "") && line === undefined) {
+        return undefined;
+    }
+    const column = number(read("column"));
+    const length = number(read("length"));
+    const color = optionalString(read("color"));
+    return {
+        ...(text !== undefined && text !== "" && { text }),
+        ...(line !== undefined && { line }),
+        ...(column !== undefined && { column }),
+        ...(length !== undefined && { length }),
+        ...(color !== undefined && { color }),
+    };
+}
+/** A string is the text to find, and an object is read for its fields. */
+function markFromValue(declared) {
+    const text = optionalString(declared);
+    if (text !== undefined) {
+        return text === "" ? undefined : { text };
+    }
+    return typeof declared === "object" && declared !== null
+        ? markFromProps(declared)
+        : undefined;
+}
+/**
+ * The marks a post declared: one, or a list of them.
+ *
+ * Anything that is neither a string nor an object saying where to look is a
+ * mistake in the frontmatter, and it is reported rather than dropped. A mark
+ * that goes missing is invisible in the finished image, so nothing else would
+ * ever say the post asked for one.
+ */
+export function readMarks(declared, config) {
+    if (declared === undefined) {
+        return [];
+    }
+    const values = Array.isArray(declared) ? declared : [declared];
+    const marks = [];
+    for (const value of values) {
+        const mark = markFromValue(value);
+        if (mark === undefined) {
+            config.onWarning(`code mark ${JSON.stringify(value)} says nothing to mark:` +
+                ` give it text to find, or a line to draw across.`);
+            continue;
+        }
+        marks.push(mark);
+    }
+    return marks;
+}
+//# sourceMappingURL=read.js.map

package/dist/templates/code/mark/read.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"read.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/read.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAuBnD,SAAS,MAAM,CAAC,KAAc;IAC5B,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QACxD,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED,iEAAiE;AACjE,SAAS,aAAa,CAAC,QAAgB;IACrC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAW,EAAE,CACpC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAE,QAAoC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAElC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,CAAC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAC9D,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAE5C,OAAO;QACL,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAClD,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,EAAE,IAAI,EAAE,CAAC;QACnC,GAAG,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE,CAAC;QACvC,GAAG,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE,CAAC;QACvC,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC;KACtC,CAAC;AACJ,CAAC;AAED,0EAA0E;AAC1E,SAAS,aAAa,CAAC,QAAiB;IACtC,MAAM,IAAI,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEtC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC;IAC5C,CAAC;IAED,OAAO,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI;QACtD,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC;QACzB,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CACvB,QAAiB,EACjB,MAAsB;IAEtB,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAe,EAAE,CAAC;IAE7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,MAAM,CAAC,SAAS,CACd,aAAa,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,wBAAwB;gBACxD,kDAAkD,CACrD,CAAC;YACF,SAAS;QACX,CAAC;QAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}

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

@@ -1,3 +1,4 @@
+import type { ResolvedConfig } from "../../types.js";
 import type { Panel } from "./panel.js";
 /**
  * Shrink a panel onto its content, keeping it centred in the space it was
@@ -12,6 +13,11 @@ export declare function hugPanel(available: Panel, wanted: {
  * The panel itself: a drop shadow, then the theme-coloured surface it sits on.
  * The surface is stroked rather than left flat, so a dark theme still has an
  * edge against a dark background.
+ *
+ * A panel the background shows through casts no shadow. The shadow is the same
+ * rectangle offset a few pixels, so a translucent surface shows most of it as
+ * a dark wash across the panel, which reads as a smudge rather than as depth.
+ * A pane of glass is not a raised card, and this is the difference.
  */
-export declare function panelSvg(available: Panel, background: string, shadowOffset: number): string;
+export declare function panelSvg(available: Panel, background: string, shadowOffset: number, config: ResolvedConfig): string;
 //# sourceMappingURL=plate.d.ts.map

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

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

package/dist/templates/code/plate.js

@@ -21,14 +21,24 @@ export function hugPanel(available, wanted) {
  * The panel itself: a drop shadow, then the theme-coloured surface it sits on.
  * The surface is stroked rather than left flat, so a dark theme still has an
  * edge against a dark background.
+ *
+ * A panel the background shows through casts no shadow. The shadow is the same
+ * rectangle offset a few pixels, so a translucent surface shows most of it as
+ * a dark wash across the panel, which reads as a smudge rather than as depth.
+ * A pane of glass is not a raised card, and this is the difference.
  */
-export function panelSvg(available, background, shadowOffset) {
+export function panelSvg(available, background, shadowOffset, config) {
+    const { panelOpacity, borderColor, borderOpacity } = config.code;
+    // A full-opacity surface says nothing about its opacity, which keeps the
+    // common case's output to what the template actually decided.
     return panel(available, {
         radius: available.radius,
         fill: background,
-        stroke: "#ffffff",
-        strokeOpacity: 0.12,
-        shadow: shadowOffset,
+        stroke: borderColor,
+        strokeOpacity: borderOpacity,
+        ...(panelOpacity < 1
+            ? { fillOpacity: panelOpacity }
+            : { shadow: shadowOffset }),
     });
 }
 //# sourceMappingURL=plate.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"plate.js","sourceRoot":"","sources":["../../../src/templates/code/plate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,MAA2D;IAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,SAAS,CAAC,KAAK,EACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CACvE,CAAC;IACF,uEAAuE;IACvE,uEAAuE;IACvE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,SAAS,CAAC,MAAM,EAChB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAC9D,CAAC;IAEF,OAAO;QACL,GAAG,SAAS;QACZ,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1D,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5D,KAAK;QACL,MAAM;KACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,UAAkB,EAClB,YAAoB;IAEpB,OAAO,KAAK,CAAC,SAAS,EAAE;QACtB,MAAM,EAAE,SAAS,CAAC,MAAM;QACxB,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,SAAS;QACjB,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,YAAY;KACrB,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"plate.js","sourceRoot":"","sources":["../../../src/templates/code/plate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAI9C;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,MAA2D;IAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,SAAS,CAAC,KAAK,EACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CACvE,CAAC;IACF,uEAAuE;IACvE,uEAAuE;IACvE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,SAAS,CAAC,MAAM,EAChB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAC9D,CAAC;IAEF,OAAO;QACL,GAAG,SAAS;QACZ,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1D,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5D,KAAK;QACL,MAAM;KACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ,CACtB,SAAgB,EAChB,UAAkB,EAClB,YAAoB,EACpB,MAAsB;IAEtB,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAEjE,yEAAyE;IACzE,8DAA8D;IAC9D,OAAO,KAAK,CAAC,SAAS,EAAE;QACtB,MAAM,EAAE,SAAS,CAAC,MAAM;QACxB,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,WAAW;QACnB,aAAa,EAAE,aAAa;QAC5B,GAAG,CAAC,YAAY,GAAG,CAAC;YAClB,CAAC,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE;YAC/B,CAAC,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC;KAC9B,CAAC,CAAC;AACL,CAAC"}

package/dist/templates/footer.d.ts

@@ -1,4 +1,12 @@
-import type { ResolvedConfig } from "../types.js";
+import type { Dimensions, ResolvedConfig } from "../types.js";
+/**
+ * The size the line along the bottom is drawn at.
+ *
+ * Every template asks for it here rather than working it out, which is what
+ * stops the twelve of them drifting apart. It is one number for the footer,
+ * the byline and the attribution alike, since they are all the same line.
+ */
+export declare function footerFontSize(dimensions: Dimensions): number;
 /**
  * Where and how a template wants its footer drawn. Every template places the
  * footer differently; what they share is that a config with no footer, or an

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

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

package/dist/templates/footer.js

@@ -1,4 +1,28 @@
 import { baselineFor, textElement } from "../layout/index.js";
+/** The footer's size, as a fraction of the image's height. */
+const footerScale = 0.036;
+/**
+ * The least it may be, as a fraction of the image's width.
+ *
+ * Height alone is what the footer used to be measured against, and it left the
+ * landscape sizes with the smallest text on the least of it: at 1200x630 the
+ * line came out at 20px against the square's 38px, on an image a feed scales
+ * to the same width. Width is what legibility tracks, for the reason the code
+ * template's font-size bounds are fractions of it, so this is the floor that
+ * stops a wide image having a footer nobody can read. The square is above it
+ * and keeps the proportions it had.
+ */
+const footerWidthFloor = 0.026;
+/**
+ * The size the line along the bottom is drawn at.
+ *
+ * Every template asks for it here rather than working it out, which is what
+ * stops the twelve of them drifting apart. It is one number for the footer,
+ * the byline and the attribution alike, since they are all the same line.
+ */
+export function footerFontSize(dimensions) {
+    return Math.round(Math.max(dimensions.height * footerScale, dimensions.width * footerWidthFloor));
+}
 /**
  * The baseline of a footer sitting on the bottom margin.
  *

package/dist/templates/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../src/templates/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAgB9D;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,MAAc,EACd,GAAW,EACX,QAAgB;IAEhB,OAAO,WAAW,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACxD,CAAC;AAED,yDAAyD;AACzD,MAAM,UAAU,SAAS,CAAC,MAAsB;IAC9C,OAAO,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,KAAK,EAAE,CAAC;AAC7D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAsB,EACtB,SAA0B;IAE1B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,WAAW,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,EAAE;QACtC,CAAC,EAAE,SAAS,CAAC,CAAC;QACd,CAAC,EAAE,SAAS,CAAC,CAAC;QACd,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,QAAQ,EAAE,SAAS,CAAC,QAAQ;QAC5B,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;QAC9B,WAAW,EAAE,SAAS,CAAC,OAAO;QAC9B,GAAG,CAAC,SAAS,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC;KACpE,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../src/templates/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAG9D,8DAA8D;AAC9D,MAAM,WAAW,GAAG,KAAK,CAAC;AAE1B;;;;;;;;;;GAUG;AACH,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,UAAsB;IACnD,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAC,GAAG,CACN,UAAU,CAAC,MAAM,GAAG,WAAW,EAC/B,UAAU,CAAC,KAAK,GAAG,gBAAgB,CACpC,CACF,CAAC;AACJ,CAAC;AAeD;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,MAAc,EACd,GAAW,EACX,QAAgB;IAEhB,OAAO,WAAW,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACxD,CAAC;AAED,yDAAyD;AACzD,MAAM,UAAU,SAAS,CAAC,MAAsB;IAC9C,OAAO,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,KAAK,EAAE,CAAC;AAC7D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAsB,EACtB,SAA0B;IAE1B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,WAAW,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,EAAE;QACtC,CAAC,EAAE,SAAS,CAAC,CAAC;QACd,CAAC,EAAE,SAAS,CAAC,CAAC;QACd,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,QAAQ,EAAE,SAAS,CAAC,QAAQ;QAC5B,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;QAC9B,WAAW,EAAE,SAAS,CAAC,OAAO;QAC9B,GAAG,CAAC,SAAS,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC;KACpE,CAAC,CAAC;AACL,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../src/templates/frame.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAW1E;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB,yCAAyC;IACzC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,uDAAuD;AACvD,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,cAAc,EACtB,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,GAAE,YAAiB,GACzB,KAAK,CAcP;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAExE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,SAAI,GAAG,IAAI,CAOvD;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1D"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../src/templates/frame.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQ1E;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB,yCAAyC;IACzC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,uDAAuD;AACvD,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,cAAc,EACtB,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,OAAO,GAAE,YAAiB,GACzB,KAAK,CAcP;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAExE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,SAAI,GAAG,IAAI,CAOvD;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1D"}

package/dist/templates/frame.js

@@ -1,9 +1,7 @@
-import { footerBaseline, hasFooter } from "./footer.js";
+import { footerBaseline, footerFontSize, hasFooter } from "./footer.js";
 import { inset } from "../layout/index.js";
 /** Margin from the image edge, as a fraction of its width. */
 const defaultPadScale = 0.075;
-/** The footer's size, as a fraction of the image's height. */
-const footerScale = 0.032;
 /** Clear space between the content and the footer line, as a fraction of it. */
 const footerGap = 0.02;
 /**
@@ -14,14 +12,14 @@ const footerGap = 0.02;
 export function imageFrame(dimensions, config, avatar, options = {}) {
     const { width, height } = dimensions;
     const pad = Math.round(width * (options.padScale ?? defaultPadScale));
-    const footerFontSize = Math.round(height * footerScale);
+    const fontSize = footerFontSize(dimensions);
     const isDrawn = options.footer === true || hasFooter(config) || avatar !== undefined;
     return {
         pad,
-        footerFontSize,
+        footerFontSize: fontSize,
         full: { x: 0, y: 0, width, height },
-        footerRoom: isDrawn ? footerFontSize + Math.round(height * footerGap) : 0,
-        footerY: footerBaseline(height, pad, footerFontSize),
+        footerRoom: isDrawn ? fontSize + Math.round(height * footerGap) : 0,
+        footerY: footerBaseline(height, pad, fontSize),
     };
 }
 /**

package/dist/templates/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../src/templates/frame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAI3C,8DAA8D;AAC9D,MAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,8DAA8D;AAC9D,MAAM,WAAW,GAAG,KAAK,CAAC;AAE1B,gFAAgF;AAChF,MAAM,SAAS,GAAG,IAAI,CAAC;AAsCvB;;;;GAIG;AACH,MAAM,UAAU,UAAU,CACxB,UAAsB,EACtB,MAAsB,EACtB,MAA8B,EAC9B,OAAO,GAAiB,EAAE;IAE1B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC;IACtE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IACxD,MAAM,OAAO,GACX,OAAO,CAAC,MAAM,KAAK,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,MAAM,KAAK,SAAS,CAAC;IAEvE,OAAO;QACL,GAAG;QACH,cAAc;QACd,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;QACnC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACzE,OAAO,EAAE,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,cAAc,CAAC;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,MAA0B,EAAE,GAAW;IAC9D,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC;AACjE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,KAAY,EAAE,GAAG,GAAG,CAAC;IAC/C,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE;QACvB,GAAG,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG;QACpB,KAAK,EAAE,KAAK,CAAC,GAAG;QAChB,IAAI,EAAE,KAAK,CAAC,GAAG;QACf,MAAM,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,UAAU;KACrC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,GAAW;IAChD,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9B,CAAC"}
+{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../src/templates/frame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAI3C,8DAA8D;AAC9D,MAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,gFAAgF;AAChF,MAAM,SAAS,GAAG,IAAI,CAAC;AAsCvB;;;;GAIG;AACH,MAAM,UAAU,UAAU,CACxB,UAAsB,EACtB,MAAsB,EACtB,MAA8B,EAC9B,OAAO,GAAiB,EAAE;IAE1B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC;IACtE,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,OAAO,GACX,OAAO,CAAC,MAAM,KAAK,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,MAAM,KAAK,SAAS,CAAC;IAEvE,OAAO;QACL,GAAG;QACH,cAAc,EAAE,QAAQ;QACxB,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;QACnC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,OAAO,EAAE,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC;KAC/C,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,MAA0B,EAAE,GAAW;IAC9D,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC;AACjE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,KAAY,EAAE,GAAG,GAAG,CAAC;IAC/C,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE;QACvB,GAAG,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG;QACpB,KAAK,EAAE,KAAK,CAAC,GAAG;QAChB,IAAI,EAAE,KAAK,CAAC,GAAG;QACf,MAAM,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,UAAU;KACrC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,GAAW;IAChD,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9B,CAAC"}

package/dist/templates/terminal/index.js

@@ -7,9 +7,9 @@ import { hugPanel, panelSvg } from "../code/plate.js";
 import { codeBody } from "../code/spans.js";
 import { warnIfTruncated } from "../code/warn.js";
 import { charWidthRatio } from "../code/width.js";
-import { hasFooter } from "../footer.js";
+import { footerFontSize, hasFooter } from "../footer.js";
+import { barHeight, titleBar } from "../window/index.js";
 import { terminalSession } from "./session.js";
-import { barHeight, titleBar } from "./window.js";
 /**
  * A command and what it printed, in a terminal window.
  *
@@ -27,7 +27,7 @@ export const terminalTemplate = {
     name: "terminal",
     async render({ props, config, dimensions, measure }) {
         const { width, height } = dimensions;
-        const footerFs = Math.round(height * 0.032);
+        const footerFs = footerFontSize(dimensions);
         const session = await terminalSession(props, config);
         const available = layoutPanel(dimensions, config, 0, footerFs, false, hasFooter(config));
         // The bar is measured against the space the window was allotted rather
@@ -45,7 +45,7 @@ export const terminalTemplate = {
             height: bar + body + fitted.padding * 2,
         });
         const shadow = Math.max(1, Math.round(Math.min(width, height) * 0.01));
-        return (panelSvg(window, session.background, shadow) +
+        return (panelSvg(window, session.background, shadow, config) +
             titleBar(window, bar, optionalString(props.title) ?? "", config, measure) +
             codeBody(fitted.lines, {
                 originX: window.x + fitted.padding,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/terminal/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/terminal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAa;IACxC,IAAI,EAAE,UAAU;IAChB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE;QACjD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,OAAO,GAAG,MAAM,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAErD,MAAM,SAAS,GAAG,WAAW,CAC3B,UAAU,EACV,MAAM,EACN,CAAC,EACD,QAAQ,EACR,KAAK,EACL,SAAS,CAAC,MAAM,CAAC,CAClB,CAAC;QACF,uEAAuE;QACvE,0EAA0E;QAC1E,iDAAiD;QACjD,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAEvC,MAAM,MAAM,GAAG,UAAU,CACvB,OAAO,EACP,EAAE,GAAG,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE,EACtE,KAAK,EACL,MAAM,EACN,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAChD,CAAC;QAEF,eAAe,CACb,MAAM,EACN,UAAU,EACV;YACE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM;YACnD,OAAO,EAAE,MAAM,CAAC,OAAO;SACxB,EACD,OAAO,CAAC,KAAK,CAAC,MAAM,EACpB,kBAAkB,CACnB,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC;QAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,SAAS,EAAE;YACjC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC;YACzE,MAAM,EAAE,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC;SACxC,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QAEvE,OAAO,CACL,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC;YACpD,QAAQ,CACN,MAAM,EACN,GAAG,EACH,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EACjC,MAAM,EACN,OAAO,CACR;YACD,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE;gBACrB,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO;gBAClC,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;gBAC1D,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC3B,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;gBAClC,UAAU,EAAE,OAAO,CAAC,UAAU;aAC/B,CAAC;YACF,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,CACzC,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/templates/window/dots.d.ts

@@ -0,0 +1,11 @@
+/** Which buttons a window's bar carries. */
+export type WindowDots = "mono" | "macos";
+/** Where the buttons sit in the bar, and how big they are. */
+export interface DotsLayout {
+    readonly left: number;
+    readonly middle: number;
+    readonly diameter: number;
+}
+/** The row of buttons at the left of the bar. */
+export declare function windowDots(dots: WindowDots, layout: DotsLayout): string;
+//# sourceMappingURL=dots.d.ts.map

package/dist/templates/window/dots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots.d.ts","sourceRoot":"","sources":["../../../src/templates/window/dots.ts"],"names":[],"mappings":"AAGA,4CAA4C;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAuB1C,8DAA8D;AAC9D,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED,iDAAiD;AACjD,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,CAevE"}

package/dist/templates/window/dots.js

@@ -0,0 +1,32 @@
+import { box } from "../../layout/index.js";
+/**
+ * The three buttons, in the colours every reader has seen on a window.
+ *
+ * They are not the site's colours and are not meant to be. The point of the
+ * chrome is that the image is recognised as a window before a word of it is
+ * read, and these are what does the recognising.
+ *
+ * The neutral set says the same thing without borrowing an operating system's
+ * colours, which is what a snippet on a site with a palette of its own usually
+ * wants. The terminal draws the coloured ones, since a terminal is a window
+ * somebody has seen rather than a decorated panel.
+ */
+const macosButtons = ["#ff5f57", "#febc2e", "#28c840"];
+/** One button's fill, which for the neutral set is the bar's own tone. */
+function buttonStyle(dots, index) {
+    return dots === "macos"
+        ? { fill: macosButtons[index] ?? "#ffffff" }
+        : { fill: "#ffffff", fillOpacity: 0.28 };
+}
+/** The row of buttons at the left of the bar. */
+export function windowDots(dots, layout) {
+    const { left, middle, diameter } = layout;
+    const gap = Math.round(diameter * 1.7);
+    return Array.from({ length: macosButtons.length }, (_unused, index) => box({
+        x: left + index * gap,
+        y: middle - Math.round(diameter / 2),
+        width: diameter,
+        height: diameter,
+    }, { radius: Math.round(diameter / 2), ...buttonStyle(dots, index) })).join("");
+}
+//# sourceMappingURL=dots.js.map

package/dist/templates/window/dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots.js","sourceRoot":"","sources":["../../../src/templates/window/dots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAM5C;;;;;;;;;;;GAWG;AACH,MAAM,YAAY,GAAsB,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAE1E,0EAA0E;AAC1E,SAAS,WAAW,CAAC,IAAgB,EAAE,KAAa;IAClD,OAAO,IAAI,KAAK,OAAO;QACrB,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,IAAI,SAAS,EAAE;QAC5C,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAC7C,CAAC;AASD,iDAAiD;AACjD,MAAM,UAAU,UAAU,CAAC,IAAgB,EAAE,MAAkB;IAC7D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAEvC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CACpE,GAAG,CACD;QACE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,GAAG;QACrB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;QACpC,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;KACjB,EACD,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAClE,CACF,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC"}

package/dist/templates/{terminal/window.d.ts → window/index.d.ts}

@@ -1,5 +1,7 @@
 import type { MeasureText, ResolvedConfig } from "../../types.js";
 import type { Panel } from "../code/panel.js";
+import type { WindowDots } from "./dots.js";
+export type { WindowDots } from "./dots.js";
 /** How tall the title bar is on a window of this width. */
 export declare function barHeight(windowWidth: number): number;
 /**
@@ -10,5 +12,5 @@ export declare function barHeight(windowWidth: number): number;
  * lifts whatever the code theme's background happens to be instead of having
  * to be chosen against it.
  */
-export declare function titleBar(window: Panel, height: number, title: string, config: ResolvedConfig, measure: MeasureText): string;
-//# sourceMappingURL=window.d.ts.map
+export declare function titleBar(window: Panel, height: number, title: string, config: ResolvedConfig, measure: MeasureText, dots?: WindowDots): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/window/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG5C,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAQ5C,2DAA2D;AAC3D,wBAAgB,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAErD;AAwBD;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,WAAW,EACpB,IAAI,GAAE,UAAoB,GACzB,MAAM,CAeR"}