@kensio/colophon 2.11.1 → 2.13.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"gutter.js","sourceRoot":"","sources":["../../../src/templates/code/gutter.ts"],"names":[],"mappings":"AAGA,8DAA8D;AAC9D,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,+DAA+D;AAC/D,MAAM,SAAS,GAAG,CAAC,CAAC;AAEpB;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAC,MAAsB,EAAE,KAAa;IACjE,OAAO,MAAM,CAAC,IAAI,CAAC,WAAW;QAC5B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS;QAC/C,CAAC,CAAC,CAAC,CAAC;AACR,CAAC;AAED,0EAA0E;AAC1E,SAAS,WAAW,CAAC,IAAY,EAAE,OAAe;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1B,OAAO;QACL,IAAI;QACJ,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM;QACzC,yEAAyE;QACzE,uDAAuD;QACvD,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,aAAa;QACtB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,WAAW,CACzB,KAAwC,EACxC,OAAe,EACf,OAAe;IAEf,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACjC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACrC,GAAG,KAAK;YACR,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO;SAC/B,CAAC,CAAC,CAAC;QAEJ,OAAO,KAAK,GAAG,QAAQ;YACrB,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC;YAC/C,CAAC,CAAC,OAAO,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,QAkF1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAe/C;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,QA8G1B,CAAC"}

package/dist/templates/code/index.js

@@ -1,8 +1,11 @@
 import { highlightCode } from "../../highlight/index.js";
-import { hasFooter } from "../footer.js";
+import { footerFontSize, hasFooter } from "../footer.js";
 import { optionalString } from "../../props.js";
+import { barRoom, windowBar } from "./bar.js";
 import { codeFooter, codeHeading } from "./chrome.js";
 import { blockColumns } from "./fit.js";
+import { gutterColumns, numberLines } from "./gutter.js";
+import { codeMarks } from "./mark/index.js";
 import { fitSnippet } from "./layout.js";
 import { layoutPanel, titleBand } from "./panel.js";
 import { hugPanel, panelSvg } from "./plate.js";
@@ -24,40 +27,56 @@ export const codeTemplate = {
         const { width, height } = dimensions;
         const title = optionalString(props.title);
         const titleFs = Math.round(height * 0.045);
-        const footerFs = Math.round(height * 0.032);
+        const footerFs = footerFontSize(dimensions);
         const highlighted = await highlightCode(optionalString(props["code"]) ?? "", {
             language: optionalString(props["language"]) ?? "text",
             theme: optionalString(props["theme"]) ?? config.code.theme,
             tabSize: config.code.tabSize,
         });
         const available = layoutPanel(dimensions, config, titleFs, footerFs, title !== undefined && title !== "", hasFooter(config));
-        const fitted = fitSnippet(highlighted, available, width, config, charWidthRatio(measure, config.code.fontFamily));
-        warnIfTruncated(config, dimensions, {
-            dropped: highlighted.lines.length - fitted.lines.length,
-            clipped: fitted.clipped,
-        }, highlighted.lines.length);
+        const bar = barRoom(config, available.width);
+        const gutter = gutterColumns(config, highlighted.lines.length);
+        const fitted = fitSnippet(highlighted, { ...available, y: available.y + bar, height: available.height - bar }, width, config, charWidthRatio(measure, config.code.fontFamily), gutter);
+        const dropped = highlighted.lines.length - fitted.lines.length;
+        warnIfTruncated(config, dimensions, { dropped, clipped: fitted.clipped }, highlighted.lines.length);
+        const lines = numberLines(fitted.lines, gutter, dropped);
         // Shrink the panel down onto the snippet so it isn't left floating in dead
         // space. On a landscape image especially, a wide panel holding a narrow
         // block leaves the code marooned off to one side.
+        const bodyHeight = fitted.lines.length * fitted.step;
         const panel = hugPanel(available, {
-            width: blockColumns(fitted.lines) * fitted.charWidth + fitted.padding * 2,
-            height: fitted.lines.length * fitted.step + fitted.padding * 2,
+            width: blockColumns(lines) * fitted.charWidth + fitted.padding * 2,
+            height: bar + bodyHeight + fitted.padding * 2,
         });
-        const body = codeBody(fitted.lines, {
-            // Code reads from the left edge, as it does in an editor. Indentation is
-            // carried by each token's column, so the snippet keeps its shape.
-            originX: panel.x + fitted.padding,
-            originY: panel.y + (panel.height - fitted.lines.length * fitted.step) / 2,
+        // Code reads from the left edge, as it does in an editor. Indentation is
+        // carried by each token's column, so the snippet keeps its shape.
+        const originX = panel.x + fitted.padding;
+        const originY = panel.y + bar + (panel.height - bar - bodyHeight) / 2;
+        const body = codeBody(lines, {
+            originX,
+            originY,
             fontSize: fitted.fontSize,
             charWidth: fitted.charWidth,
             step: fitted.step,
             fontFamily: config.code.fontFamily,
             foreground: highlighted.foreground,
         });
+        const marks = codeMarks(props, fitted.lines, {
+            // Past the gutter, since a mark names columns of the code rather than
+            // of the grid the numbers share with it.
+            originX: originX + gutter * fitted.charWidth,
+            originY,
+            charWidth: fitted.charWidth,
+            fontSize: fitted.fontSize,
+            step: fitted.step,
+            band: { x: originX, width: panel.width - fitted.padding * 2 },
+        }, config);
         const shadowOffset = Math.round(Math.min(width, height) * 0.01);
-        const plate = panelSvg(panel, highlighted.background, Math.max(1, shadowOffset));
+        const plate = panelSvg(panel, highlighted.background, Math.max(1, shadowOffset), config);
         return (codeHeading(title, titleBand(panel, dimensions, titleFs), titleFs, config) +
             plate +
+            windowBar(panel, bar, props, config, measure) +
+            marks +
             body +
             codeFooter(dimensions, footerFs, config));
     },

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

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

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

@@ -16,6 +16,11 @@ export interface FittedCode {
 /**
  * Fit a highlighted snippet into the panel it has been allotted: choose the
  * font size, then drop and clip whatever still does not fit.
+ *
+ * `gutter` is columns reserved to the left of the code, for line numbers. It
+ * is counted in characters rather than pixels because that is what it is: the
+ * numbers sit on the same monospace grid, so the space they take follows
+ * whatever font size the fitting settles on.
  */
-export declare function fitSnippet(highlighted: HighlightedCode, available: Panel, imageWidth: number, config: ResolvedConfig, charWidthRatio: number): FittedCode;
+export declare function fitSnippet(highlighted: HighlightedCode, available: Panel, imageWidth: number, config: ResolvedConfig, charWidthRatio: number, gutter?: number): FittedCode;
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,MAAM,GACrB,UAAU,CA6BZ"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,MAAM,EACtB,MAAM,SAAI,GACT,UAAU,CA6BZ"}

package/dist/templates/code/layout.js

@@ -3,15 +3,20 @@ import { fitFontSize, fitLines } from "./fit.js";
 /**
  * Fit a highlighted snippet into the panel it has been allotted: choose the
  * font size, then drop and clip whatever still does not fit.
+ *
+ * `gutter` is columns reserved to the left of the code, for line numbers. It
+ * is counted in characters rather than pixels because that is what it is: the
+ * numbers sit on the same monospace grid, so the space they take follows
+ * whatever font size the fitting settles on.
  */
-export function fitSnippet(highlighted, available, imageWidth, config, charWidthRatio) {
+export function fitSnippet(highlighted, available, imageWidth, config, charWidthRatio, gutter = 0) {
     const inner = Math.round(Math.min(available.width, available.height) * 0.07);
     const codeWidth = Math.max(1, available.width - inner * 2);
     const codeHeight = Math.max(1, available.height - inner * 2);
-    const fontSize = fitFontSize(highlighted, { width: codeWidth, height: codeHeight }, imageWidth, config, charWidthRatio);
+    const fontSize = fitFontSize({ ...highlighted, longestLine: highlighted.longestLine + gutter }, { width: codeWidth, height: codeHeight }, imageWidth, config, charWidthRatio);
     const charWidth = fontSize * charWidthRatio;
     const step = fontSize * config.code.lineHeight;
-    const { lines, clipped } = clipLines(fitLines(highlighted.lines, codeHeight, step), Math.max(1, Math.floor(codeWidth / charWidth)));
+    const { lines, clipped } = clipLines(fitLines(highlighted.lines, codeHeight, step), Math.max(1, Math.floor(codeWidth / charWidth) - gutter));
     // Padding reads best proportional to the text rather than the panel, since a
     // snippet fitted down to a small size wants tighter margins. Only ever
     // shrink, so the code area the font was fitted against stays valid.

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

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgBjD;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,WAA4B,EAC5B,SAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,cAAsB;IAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,WAAW,CAC1B,WAAW,EACX,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,EACxC,UAAU,EACV,MAAM,EACN,cAAc,CACf,CAAC;IACF,MAAM,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5C,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAClC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAC/C,CAAC;IAEF,6EAA6E;IAC7E,uEAAuE;IACvE,oEAAoE;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,EAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CACzB,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAChE,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgBjD;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CACxB,WAA4B,EAC5B,SAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,cAAsB,EACtB,MAAM,GAAG,CAAC;IAEV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,WAAW,CAC1B,EAAE,GAAG,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,WAAW,GAAG,MAAM,EAAE,EACjE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,EACxC,UAAU,EACV,MAAM,EACN,cAAc,CACf,CAAC;IACF,MAAM,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5C,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAClC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC,CACxD,CAAC;IAEF,6EAA6E;IAC7E,uEAAuE;IACvE,oEAAoE;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,EAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CACzB,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAChE,CAAC"}

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

@@ -0,0 +1,26 @@
+import type { MarkSpan } from "./locate.js";
+/** Where the code sits, so a mark can be put over the right characters. */
+export interface MarkMetrics {
+    /** Where column zero of the code is, past the gutter. */
+    readonly originX: number;
+    readonly originY: number;
+    readonly charWidth: number;
+    readonly fontSize: number;
+    readonly step: number;
+    /** Across, for a mark that takes a whole line rather than a span of one. */
+    readonly band: {
+        readonly x: number;
+        readonly width: number;
+    };
+}
+/**
+ * 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 declare function markSvg(span: MarkSpan, metrics: MarkMetrics, color: string): string;
+//# sourceMappingURL=draw.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/draw.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/D;AAmBD;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CA2BR"}

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":"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"}

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.
  *