@kensio/colophon 2.3.0 → 2.5.0

package/dist/layout/box.js

@@ -0,0 +1,61 @@
+import { escapeXml } from "../text/index.js";
+/**
+ * One SVG attribute, or nothing where the value was not given.
+ *
+ * The value is escaped even though most of them are colours out of a config,
+ * where nothing needs escaping. A template's props come from frontmatter, and a
+ * template is free to pass one straight through as a fill, so a site whose
+ * posts are not all written by the same person would otherwise be one `"` away
+ * from a document that does not parse.
+ */
+function attribute(name, value) {
+    return value === undefined ? "" : ` ${name}="${escapeXml(String(value))}"`;
+}
+/**
+ * A rectangle: the plate a badge sits on, the surface of a panel, a rule along
+ * an edge. Everything in a template that is not text or an image is one of
+ * these.
+ *
+ * Attributes a style does not name are left out rather than written as their
+ * defaults, so the output says only what the template decided.
+ */
+export function box(rect, style = {}) {
+    const attributes = [
+        attribute("x", rect.x),
+        attribute("y", rect.y),
+        attribute("width", rect.width),
+        attribute("height", rect.height),
+        attribute("rx", style.radius),
+        attribute("fill", style.fill),
+        attribute("fill-opacity", style.fillOpacity),
+        attribute("stroke", style.stroke),
+        attribute("stroke-opacity", style.strokeOpacity),
+        attribute("stroke-width", style.strokeWidth),
+    ];
+    return `<rect${attributes.join("")}/>`;
+}
+/**
+ * Shrink a rectangle inwards, which is how a template gets its margins. One
+ * number insets every edge; a partial one insets the edges it names.
+ *
+ * An inset larger than the rectangle collapses it to nothing rather than
+ * turning it inside out, since a negative width draws nothing anyway and an
+ * empty rectangle is easier to reason about than one with its corners crossed.
+ */
+export function inset(rect, amount) {
+    const all = typeof amount === "number" ? amount : 0;
+    const edges = typeof amount === "number" ? {} : amount;
+    const top = edges.top ?? all;
+    const right = edges.right ?? all;
+    const bottom = edges.bottom ?? all;
+    const left = edges.left ?? all;
+    return {
+        // Clamped so that a rectangle which collapses does so at the far edge of
+        // the one it came from, rather than landing outside it with no width.
+        x: rect.x + Math.min(left, rect.width),
+        y: rect.y + Math.min(top, rect.height),
+        width: Math.max(0, rect.width - left - right),
+        height: Math.max(0, rect.height - top - bottom),
+    };
+}
+//# sourceMappingURL=box.js.map

package/dist/layout/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","sourceRoot":"","sources":["../../src/layout/box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C;;;;;;;;GAQG;AACH,SAAS,SAAS,CAAC,IAAY,EAAE,KAAkC;IACjE,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC;AAC7E,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,KAAK,GAAa,EAAE;IAClD,MAAM,UAAU,GAAG;QACjB,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;QACtB,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;QACtB,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QAC9B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC;QAChC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC;QAC7B,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC;QAC7B,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,WAAW,CAAC;QAC5C,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC;QACjC,SAAS,CAAC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;QAChD,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,WAAW,CAAC;KAC7C,CAAC;IAEF,OAAO,QAAQ,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC;AACzC,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CACnB,IAAU,EACV,MAA6E;IAE7E,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;IACvD,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,GAAG,CAAC;IACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,GAAG,CAAC;IACnC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC;IAE/B,OAAO;QACL,yEAAyE;QACzE,sEAAsE;QACtE,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;QACtC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC;QACtC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;QAC7C,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC;KAChD,CAAC;AACJ,CAAC"}

package/dist/layout/distribute.d.ts

@@ -0,0 +1,15 @@
+import type { Align, Extent, Placed, Span } from "./types.js";
+/**
+ * Lay a group of items out along one axis.
+ *
+ * Stacking rows of text down an image and setting a badge beside a title are
+ * the same sum with the coordinates renamed, so both `stack` and
+ * `row` are this function. It is the only arithmetic in the toolkit that
+ * is worth getting right once.
+ *
+ * A group taller or wider than the space it was given starts at `span.start`
+ * and runs over rather than being squeezed, since a template that has
+ * overflowed wants to see it rather than have it hidden.
+ */
+export declare function distribute(items: readonly Extent[], span: Span, align?: Align): readonly Placed[];
+//# sourceMappingURL=distribute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"distribute.d.ts","sourceRoot":"","sources":["../../src/layout/distribute.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAE9D;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,GAAE,KAAgB,GACtB,SAAS,MAAM,EAAE,CAYnB"}

package/dist/layout/distribute.js

@@ -0,0 +1,30 @@
+/**
+ * Lay a group of items out along one axis.
+ *
+ * Stacking rows of text down an image and setting a badge beside a title are
+ * the same sum with the coordinates renamed, so both `stack` and
+ * `row` are this function. It is the only arithmetic in the toolkit that
+ * is worth getting right once.
+ *
+ * A group taller or wider than the space it was given starts at `span.start`
+ * and runs over rather than being squeezed, since a template that has
+ * overflowed wants to see it rather than have it hidden.
+ */
+export function distribute(items, span, align = "centre") {
+    const advances = items.map((item) => (item.gapBefore ?? 0) + item.size);
+    const total = advances.reduce((sum, advance) => sum + advance, 0);
+    const spare = Math.max(0, span.end - span.start - total);
+    let cursor = span.start + offset(spare, align);
+    return items.map((item, index) => {
+        const start = cursor + (item.gapBefore ?? 0);
+        cursor += advances[index] ?? 0;
+        return { start, index };
+    });
+}
+function offset(spare, align) {
+    if (align === "start") {
+        return 0;
+    }
+    return align === "end" ? spare : spare / 2;
+}
+//# sourceMappingURL=distribute.js.map

package/dist/layout/distribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"distribute.js","sourceRoot":"","sources":["../../src/layout/distribute.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CACxB,KAAwB,EACxB,IAAU,EACV,KAAK,GAAU,QAAQ;IAEvB,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CAAC,GAAG,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;IAEzD,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE/C,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,KAAK,GAAG,MAAM,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;QAC7C,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC/B,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,MAAM,CAAC,KAAa,EAAE,KAAY;IACzC,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;QACtB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,OAAO,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;AAC7C,CAAC"}

package/dist/layout/image.d.ts

@@ -0,0 +1,42 @@
+import type { Rect } from "./types.js";
+/** How an image fills the rectangle it was given. */
+interface ImageFit {
+    /**
+     * `cover` fills the rectangle and crops whatever does not fit, which is what
+     * a background photo wants. `contain` fits the whole image inside it, which
+     * is what a logo wants, since cropping a wordmark ruins it.
+     */
+    readonly fit?: "cover" | "contain";
+    readonly opacity?: number;
+}
+/**
+ * Rounded corners, for an avatar or a screenshot, which need a clip path and
+ * so an id to hang it on: SVG has no other way to say it.
+ *
+ * The two travel together in the type, so a radius without an id does not
+ * compile. It is the sort of option that would otherwise be dropped in silence,
+ * and a template author asking for a round avatar and getting a square one has
+ * nothing to go on.
+ */
+type ImageCorners = {
+    readonly radius?: undefined;
+    readonly id?: string;
+} | {
+    readonly radius: number;
+    readonly id: string;
+};
+/** Options for {@link image}. */
+export type ImageOptions = ImageFit & ImageCorners;
+/**
+ * Draw an image within a rectangle.
+ *
+ * `href` is passed through as given, so it can be a `data:` URI, which is the
+ * form that travels: an image file read at build time and inlined is an image
+ * that renders the same wherever the build runs, with nothing to fetch.
+ *
+ * An `<image>` establishes its own viewport, so `cover` crops to the rectangle
+ * without a clip path. Rounded corners do need one.
+ */
+export declare function image(rect: Rect, href: string, options?: ImageOptions): string;
+export {};
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/layout/image.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC,qDAAqD;AACrD,UAAU,QAAQ;IAChB;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,KAAK,YAAY,GACb;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GACrD;IAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEnD;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CACnB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,YAAiB,GACzB,MAAM,CA6BR"}

package/dist/layout/image.js

@@ -0,0 +1,34 @@
+import { escapeXml } from "../text/index.js";
+/**
+ * Draw an image within a rectangle.
+ *
+ * `href` is passed through as given, so it can be a `data:` URI, which is the
+ * form that travels: an image file read at build time and inlined is an image
+ * that renders the same wherever the build runs, with nothing to fetch.
+ *
+ * An `<image>` establishes its own viewport, so `cover` crops to the rectangle
+ * without a clip path. Rounded corners do need one.
+ */
+export function image(rect, href, options = {}) {
+    const fit = (options.fit ?? "cover") === "cover" ? "slice" : "meet";
+    const aspect = `xMidYMid ${fit}`;
+    const opacity = options.opacity === undefined
+        ? ""
+        : ` opacity="${String(options.opacity)}"`;
+    const element = `<image x="${String(rect.x)}" y="${String(rect.y)}"` +
+        ` width="${String(rect.width)}" height="${String(rect.height)}"` +
+        ` preserveAspectRatio="${aspect}"${opacity}` +
+        ` href="${escapeXml(href)}"/>`;
+    if (options.radius === undefined) {
+        return element;
+    }
+    // The type pairs the two, so an id is here whenever a radius is.
+    const id = escapeXml(options.id);
+    return (`<defs><clipPath id="${id}">` +
+        `<rect x="${String(rect.x)}" y="${String(rect.y)}"` +
+        ` width="${String(rect.width)}" height="${String(rect.height)}"` +
+        ` rx="${String(options.radius)}"/>` +
+        `</clipPath></defs>` +
+        `<g clip-path="url(#${id})">${element}</g>`);
+}
+//# sourceMappingURL=image.js.map

package/dist/layout/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../src/layout/image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8B7C;;;;;;;;;GASG;AACH,MAAM,UAAU,KAAK,CACnB,IAAU,EACV,IAAY,EACZ,OAAO,GAAiB,EAAE;IAE1B,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IACpE,MAAM,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;IACjC,MAAM,OAAO,GACX,OAAO,CAAC,OAAO,KAAK,SAAS;QAC3B,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,aAAa,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC;IAE9C,MAAM,OAAO,GACX,aAAa,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;QACpD,WAAW,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;QAChE,yBAAyB,MAAM,IAAI,OAAO,EAAE;QAC5C,UAAU,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;IAEjC,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QACjC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,iEAAiE;IACjE,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAEjC,OAAO,CACL,uBAAuB,EAAE,IAAI;QAC7B,YAAY,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;QACnD,WAAW,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;QAChE,QAAQ,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;QACnC,oBAAoB;QACpB,sBAAsB,EAAE,MAAM,OAAO,MAAM,CAC5C,CAAC;AACJ,CAAC"}

package/dist/layout/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Layout primitives for template authors.
+ *
+ * Importable on its own as `@kensio/colophon/layout`. Writing a template means
+ * returning a string of SVG, and this is the set of small functions that build
+ * one: rectangles, panels, images, and the arithmetic of putting things in
+ * rows and stacks. It is deliberately boring. Nothing here holds state, every
+ * function takes values and returns them, and a template that would rather
+ * write its own SVG by hand still can.
+ *
+ * The subpath loads no rasteriser, no syntax highlighter and nothing from
+ * Node, so the whole of it runs anywhere a string does.
+ *
+ * Measuring is the exception to "import it from here": a template is handed a
+ * `MeasureText` on its context, because only the build knows which fonts
+ * were loaded. What this module exports is what to do with it.
+ */
+export { box, inset } from "./box.js";
+export { distribute } from "./distribute.js";
+export { image } from "./image.js";
+export type { ImageOptions } from "./image.js";
+export { panel } from "./panel.js";
+export type { PanelStyle } from "./panel.js";
+export { row } from "./row.js";
+export type { RowRect } from "./row.js";
+export { scrim } from "./scrim.js";
+export type { ScrimOptions } from "./scrim.js";
+export { stack } from "./stack.js";
+export type { StackedRect } from "./stack.js";
+export type { Align, BoxStyle, Extent, Placed, Rect, Span } from "./types.js";
+export { blockLines } from "./block.js";
+export type { StyledBlock, TextBlock, TextLine } from "./block.js";
+export { baselineFor, drawLines, placeLines } from "./lines.js";
+export type { LinesStyle, PlacedLine } from "./lines.js";
+export { measureIn } from "./measure.js";
+export { optionalString } from "../props.js";
+export { escapeXml, fitText, textElement, wrapText } from "../text/index.js";
+export type { FitOptions, FittedText, MeasureAt, MeasureLine, TextAttributes, } from "../text/index.js";
+export type { Dimensions, MeasureText, MetaImageProps, ResolvedConfig, Template, TemplateContext, TextStyle, } from "../types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,YAAY,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC7E,YAAY,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,cAAc,EACd,QAAQ,EACR,eAAe,EACf,SAAS,GACV,MAAM,aAAa,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,30 @@
+/**
+ * Layout primitives for template authors.
+ *
+ * Importable on its own as `@kensio/colophon/layout`. Writing a template means
+ * returning a string of SVG, and this is the set of small functions that build
+ * one: rectangles, panels, images, and the arithmetic of putting things in
+ * rows and stacks. It is deliberately boring. Nothing here holds state, every
+ * function takes values and returns them, and a template that would rather
+ * write its own SVG by hand still can.
+ *
+ * The subpath loads no rasteriser, no syntax highlighter and nothing from
+ * Node, so the whole of it runs anywhere a string does.
+ *
+ * Measuring is the exception to "import it from here": a template is handed a
+ * `MeasureText` on its context, because only the build knows which fonts
+ * were loaded. What this module exports is what to do with it.
+ */
+export { box, inset } from "./box.js";
+export { distribute } from "./distribute.js";
+export { image } from "./image.js";
+export { panel } from "./panel.js";
+export { row } from "./row.js";
+export { scrim } from "./scrim.js";
+export { stack } from "./stack.js";
+export { blockLines } from "./block.js";
+export { baselineFor, drawLines, placeLines } from "./lines.js";
+export { measureIn } from "./measure.js";
+export { optionalString } from "../props.js";
+export { escapeXml, fitText, textElement, wrapText } from "../text/index.js";
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/layout/lines.d.ts

@@ -0,0 +1,45 @@
+import type { TextLine } from "./block.js";
+import type { Align, Rect } from "./types.js";
+/**
+ * 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 declare function baselineFor(top: number, fontSize: number): number;
+/** How a block of lines is drawn: the font, the fill, and where it sits. */
+export interface LinesStyle {
+    readonly fontFamily: string;
+    readonly fill: string;
+    /** Multiplier on each line's font size. Defaults to `1.2`. */
+    readonly lineHeight?: number;
+    /** Horizontal anchor. `middle` centres each line in the area. */
+    readonly anchor?: "start" | "middle" | "end";
+    /** Where the block sits vertically in the area. Defaults to `centre`. */
+    readonly align?: Align;
+}
+/** A line with its computed text baseline. */
+export interface PlacedLine {
+    readonly y: number;
+    readonly index: number;
+}
+/**
+ * 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 declare function placeLines(lines: readonly TextLine[], area: Rect, lineHeight?: number, align?: Align): readonly PlacedLine[];
+/**
+ * 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 declare function drawLines(lines: readonly TextLine[], area: Rect, style: LinesStyle): string;
+//# sourceMappingURL=lines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../src/layout/lines.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAa9C;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,4EAA4E;AAC5E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,yEAAyE;IACzE,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CACxB;AAED,8CAA8C;AAC9C,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,QAAQ,EAAE,EAC1B,IAAI,EAAE,IAAI,EACV,UAAU,SAAoB,EAC9B,KAAK,GAAE,KAAgB,GACtB,SAAS,UAAU,EAAE,CAcvB;AAWD;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,SAAS,QAAQ,EAAE,EAC1B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,GAChB,MAAM,CAuBR"}

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