@kensio/colophon 2.2.0 → 2.4.0

package/dist/image/svg.js

@@ -0,0 +1,61 @@
+/**
+ * The attributes of the root `<svg>` element that say how big it is. Written
+ * out rather than built from a name, since there are three of them and a
+ * pattern assembled from a string is harder to read than the three patterns.
+ */
+const attributes = {
+    width: /\swidth\s*=\s*"([^"]*)"/i,
+    height: /\sheight\s*=\s*"([^"]*)"/i,
+    viewBox: /\sviewBox\s*=\s*"([^"]*)"/i,
+};
+/** The value of one of them, where the root element carries it. */
+function attribute(head, name) {
+    return attributes[name].exec(head)?.[1];
+}
+/**
+ * A length such as `120`, `120px` or `7.5em`, as far as its number goes.
+ *
+ * A percentage is not one of them. `width="100%"` is the commonest way an
+ * export states that it scales to its container, and reading it as 100 units
+ * would make every such file square whatever its `viewBox` says.
+ */
+function length(value) {
+    if (value?.trim().endsWith("%") === true) {
+        return undefined;
+    }
+    // Deliberately parseFloat rather than Number: a length may carry a unit,
+    // and `6em` is six of something rather than not a number.
+    // eslint-disable-next-line unicorn/prefer-number-coercion
+    const number = Number.parseFloat(value ?? "");
+    return Number.isFinite(number) && number > 0 ? number : undefined;
+}
+/**
+ * The proportions of an SVG, which are what a template needs: an SVG has no
+ * pixels of its own, so only the ratio between its width and height means
+ * anything here.
+ *
+ * `width` and `height` are read first and `viewBox` second, which is the order
+ * a renderer resolves them in. A document with neither is left unmeasured
+ * rather than assumed to be square, since a wordmark usually has neither.
+ */
+export function svgExtent(bytes) {
+    const head = new TextDecoder().decode(bytes.slice(0, 4096));
+    const root = /<svg[\s>][^>]*/i.exec(head)?.[0] ?? "";
+    const width = length(attribute(root, "width"));
+    const height = length(attribute(root, "height"));
+    if (width !== undefined && height !== undefined) {
+        return { width, height };
+    }
+    const box = attribute(root, "viewBox")
+        ?.trim()
+        .split(/[\s,]+/);
+    if (box?.length !== 4) {
+        return undefined;
+    }
+    const boxWidth = length(box[2]);
+    const boxHeight = length(box[3]);
+    return boxWidth === undefined || boxHeight === undefined
+        ? undefined
+        : { width: boxWidth, height: boxHeight };
+}
+//# sourceMappingURL=svg.js.map

package/dist/image/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../src/image/svg.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,0BAA0B;IACjC,MAAM,EAAE,2BAA2B;IACnC,OAAO,EAAE,4BAA4B;CAC7B,CAAC;AAEX,mEAAmE;AACnE,SAAS,SAAS,CAChB,IAAY,EACZ,IAA6B;IAE7B,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;;GAMG;AACH,SAAS,MAAM,CAAC,KAAyB;IACvC,IAAI,KAAK,EAAE,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;QACzC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,yEAAyE;IACzE,0DAA0D;IAC1D,0DAA0D;IAC1D,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9C,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACpE,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CAAC,KAAiB;IACzC,MAAM,IAAI,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAErD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEjD,IAAI,KAAK,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QAChD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC;QACpC,EAAE,IAAI,EAAE;SACP,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEnB,IAAI,GAAG,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjC,OAAO,QAAQ,KAAK,SAAS,IAAI,SAAS,KAAK,SAAS;QACtD,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAC7C,CAAC"}

package/dist/image/uri.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The bytes behind a `data:` URI, so that an image already inline is measured
+ * and checked on the same terms as one read from disk.
+ *
+ * A prop can carry either, since frontmatter written by hand names a file and
+ * frontmatter written by a props mapper may have the image already.
+ */
+export declare function bytesFromDataUri(uri: string, label: string): Uint8Array;
+//# sourceMappingURL=uri.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"uri.d.ts","sourceRoot":"","sources":["../../src/image/uri.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,UAAU,CAgBvE"}

package/dist/image/uri.js

@@ -0,0 +1,22 @@
+/**
+ * The bytes behind a `data:` URI, so that an image already inline is measured
+ * and checked on the same terms as one read from disk.
+ *
+ * A prop can carry either, since frontmatter written by hand names a file and
+ * frontmatter written by a props mapper may have the image already.
+ */
+export function bytesFromDataUri(uri, label) {
+    const comma = uri.indexOf(",");
+    const head = comma === -1 ? "" : uri.slice(0, comma);
+    const body = comma === -1 ? "" : uri.slice(comma + 1);
+    if (comma === -1) {
+        throw new Error(`${label} is a "data:" URI with no comma in it.`);
+    }
+    if (head.endsWith(";base64")) {
+        // `Uint8Array.fromBase64` is not on the oldest Node this package supports.
+        // eslint-disable-next-line unicorn/prefer-uint8array-base64
+        return Buffer.from(body, "base64");
+    }
+    return new TextEncoder().encode(decodeURIComponent(body));
+}
+//# sourceMappingURL=uri.js.map

package/dist/image/uri.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uri.js","sourceRoot":"","sources":["../../src/image/uri.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAW,EAAE,KAAa;IACzD,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAEtD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,wCAAwC,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,2EAA2E;QAC3E,4DAA4D;QAC5D,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC5D,CAAC"}

package/dist/index.d.ts

@@ -1,13 +1,23 @@
-export type { Background, Badge, BrandColors, CodeStyle, ColophonConfig, Dimensions, GradientStop, MetaImageProps, OutputSize, RenderedMetaImage, ResolvedConfig, Template, TemplateContext, WarningHandler, } from "./types.js";
-export { DEFAULT_CODE_FONT_FAMILY, DEFAULT_CODE_STYLE, DEFAULT_COLORS, DEFAULT_FONT_FAMILY, DEFAULT_SIZES, defineConfig, resolveConfig, SIZE_PRESETS, } from "./config.js";
+export type { Background, Badge, BrandColors, CodeStyle, ColophonConfig, ColophonConfigFactory, ColophonConfigInput, ContentFile, ContentOptions, Dimensions, ExtraImage, FontSource, GradientStop, Manifest, ManifestImage, ManifestPage, MetaImageProps, MeasureText, MetaTag, MetaTagOptions, OutputSize, Placement, PropsFromFrontmatter, RenderedMetaImage, SlugStrategy, SizeOverrides, ResolvedConfig, Template, TemplateContext, TextStyle, WarningHandler, } from "./types.js";
+export { DEFAULT_CODE_FONT_FAMILY, DEFAULT_CODE_STYLE, DEFAULT_COLORS, DEFAULT_FONT_FAMILY, DEFAULT_SIZES, defineConfig, resolveConfig, SIZE_PRESETS, } from "./config/index.js";
+export { resolveConfigForSize } from "./config/size.js";
 export { backgroundSvg } from "./background.js";
-export { buildSvg, renderMetaImages, renderSvgToPng } from "./render.js";
+export { buildSvg, renderMetaImages, renderSvgToPng } from "./render/index.js";
 export { bannerTemplate, builtinTemplates, cardTemplate, codeTemplate, } from "./templates/index.js";
-export { dedent, expandTabs, highlightCode, resolveLanguage, } from "./highlight.js";
-export type { CodeToken, HighlightedCode, HighlightOptions, } from "./highlight.js";
-export { defaultOutputPath, generate } from "./generate.js";
-export type { GeneratedImage, GenerateOptions } from "./generate.js";
-export { escapeXml, wrapText } from "./text.js";
+export { dedent, expandTabs, highlightCode, resolveLanguage, } from "./highlight/index.js";
+export type { CodeToken, HighlightedCode, HighlightOptions, } from "./highlight/index.js";
+export { defaultOutputPath, generate } from "./generate/index.js";
+export type { GeneratedImage, GenerateOptions } from "./generate/index.js";
+export { createStamper, readPngStamp, stampPng } from "./stamp/index.js";
+export type { Stamper } from "./stamp/index.js";
+export { createMeasurer } from "./measure/index.js";
+export { escapeXml, fitText, textElement, wrapText } from "./text/index.js";
+export type { FitOptions, FittedText, MeasureAt, MeasureLine, TextAttributes, } from "./text/index.js";
+export { blockLines, box, distribute, drawLines, image, inset, measureIn, optionalString, panel, placeLines, row, scrim, stack, } from "./layout/index.js";
+export type { Align, BoxStyle, Extent, ImageOptions, LinesStyle, Placed, PlacedLine, PanelStyle, Rect, RowRect, ScrimOptions, Span, StackedRect, StyledBlock, TextBlock, TextLine, } from "./layout/index.js";
 export { extractProps, slugFromPath, walkContent } from "./content/index.js";
-export type { ContentFile, WalkOptions } from "./content/index.js";
+export type { WalkOptions } from "./content/index.js";
+export { metaTags, metaTagsHtml } from "./meta/index.js";
+export { createPlacer } from "./placement/index.js";
+export type { PlacedImage, Placer } from "./placement/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,EACT,cAAc,EACd,UAAU,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,eAAe,EACf,cAAc,GACf,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,SAAS,EACT,eAAe,EACf,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC5D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,WAAW,EACX,cAAc,EACd,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,EACX,OAAO,EACP,cAAc,EACd,UAAU,EACV,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,eAAe,EACf,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3E,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5E,YAAY,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,cAAc,GACf,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EACL,UAAU,EACV,GAAG,EACH,UAAU,EACV,SAAS,EACT,KAAK,EACL,KAAK,EACL,SAAS,EACT,cAAc,EACd,KAAK,EACL,UAAU,EACV,GAAG,EACH,KAAK,EACL,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -1,9 +1,17 @@
-export { DEFAULT_CODE_FONT_FAMILY, DEFAULT_CODE_STYLE, DEFAULT_COLORS, DEFAULT_FONT_FAMILY, DEFAULT_SIZES, defineConfig, resolveConfig, SIZE_PRESETS, } from "./config.js";
+export { DEFAULT_CODE_FONT_FAMILY, DEFAULT_CODE_STYLE, DEFAULT_COLORS, DEFAULT_FONT_FAMILY, DEFAULT_SIZES, defineConfig, resolveConfig, SIZE_PRESETS, } from "./config/index.js";
+export { resolveConfigForSize } from "./config/size.js";
 export { backgroundSvg } from "./background.js";
-export { buildSvg, renderMetaImages, renderSvgToPng } from "./render.js";
+export { buildSvg, renderMetaImages, renderSvgToPng } from "./render/index.js";
 export { bannerTemplate, builtinTemplates, cardTemplate, codeTemplate, } from "./templates/index.js";
-export { dedent, expandTabs, highlightCode, resolveLanguage, } from "./highlight.js";
-export { defaultOutputPath, generate } from "./generate.js";
-export { escapeXml, wrapText } from "./text.js";
+export { dedent, expandTabs, highlightCode, resolveLanguage, } from "./highlight/index.js";
+export { defaultOutputPath, generate } from "./generate/index.js";
+export { createStamper, readPngStamp, stampPng } from "./stamp/index.js";
+export { createMeasurer } from "./measure/index.js";
+export { escapeXml, fitText, textElement, wrapText } from "./text/index.js";
+// The layout toolkit, which also has its own `@kensio/colophon/layout` subpath
+// for a template that would rather not pull the rasteriser in with it.
+export { blockLines, box, distribute, drawLines, image, inset, measureIn, optionalString, panel, placeLines, row, scrim, stack, } from "./layout/index.js";
 export { extractProps, slugFromPath, walkContent } from "./content/index.js";
+export { metaTags, metaTagsHtml } from "./meta/index.js";
+export { createPlacer } from "./placement/index.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAOxB,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkCA,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAO9B,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAS5E,+EAA+E;AAC/E,uEAAuE;AACvE,OAAO,EACL,UAAU,EACV,GAAG,EACH,UAAU,EACV,SAAS,EACT,KAAK,EACL,KAAK,EACL,SAAS,EACT,cAAc,EACd,KAAK,EACL,UAAU,EACV,GAAG,EACH,KAAK,EACL,KAAK,GACN,MAAM,mBAAmB,CAAC;AAoB3B,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/layout/block.d.ts

@@ -0,0 +1,37 @@
+import type { MeasureText } from "../types.js";
+/** One group of a template's text: the space it has and how it is drawn. */
+export interface TextBlock {
+    readonly maxWidth: number;
+    readonly maxLines: number;
+    readonly fontSize: number;
+    /**
+     * Fraction of `fontSize` this group may shrink to before it is cut instead.
+     * The title of a layout has the furthest to fall, because it is the line
+     * worth keeping whole; a subtitle that has shrunk much has stopped being
+     * readable in a feed, so it may as well lose its tail.
+     */
+    readonly floor: number;
+    readonly fontWeight: number;
+}
+/** A block along with how the lines it produces are drawn. */
+export interface StyledBlock extends TextBlock {
+    readonly opacity: number;
+    /** Space inserted before the group's first line, to separate it from the last. */
+    readonly gapBefore?: number;
+}
+/** One line of a template's text block, ready to be stacked and drawn. */
+export interface TextLine {
+    readonly text: string;
+    readonly fontSize: number;
+    readonly fontWeight: number;
+    readonly opacity: number;
+    readonly gapBefore?: number;
+}
+/**
+ * Fit one group of a template's text, from a prop that may not be there, and
+ * return its lines. Each group is fitted on its own, so a long title shrinking
+ * does not drag the subtitle down with it. A group whose prop is absent or
+ * empty produces no lines at all.
+ */
+export declare function blockLines(value: unknown, measure: MeasureText, fontFamily: string, block: StyledBlock): TextLine[];
+//# sourceMappingURL=block.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../src/layout/block.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,4EAA4E;AAC5E,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,kFAAkF;IAClF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,WAAW,GACjB,QAAQ,EAAE,CAoBZ"}

package/dist/layout/block.js

@@ -0,0 +1,26 @@
+import { fitText } from "../text/index.js";
+import { optionalString } from "../props.js";
+import { measureIn } from "./measure.js";
+/**
+ * Fit one group of a template's text, from a prop that may not be there, and
+ * return its lines. Each group is fitted on its own, so a long title shrinking
+ * does not drag the subtitle down with it. A group whose prop is absent or
+ * empty produces no lines at all.
+ */
+export function blockLines(value, measure, fontFamily, block) {
+    const fitted = fitText(optionalString(value) ?? "", measureIn(measure, fontFamily, block.fontWeight), {
+        maxWidth: block.maxWidth,
+        maxLines: block.maxLines,
+        fontSize: block.fontSize,
+        minFontSize: Math.round(block.fontSize * block.floor),
+    });
+    return fitted.lines.map((text, index) => ({
+        text,
+        fontSize: fitted.fontSize,
+        fontWeight: block.fontWeight,
+        opacity: block.opacity,
+        ...(index === 0 &&
+            block.gapBefore !== undefined && { gapBefore: block.gapBefore }),
+    }));
+}
+//# sourceMappingURL=block.js.map

package/dist/layout/block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.js","sourceRoot":"","sources":["../../src/layout/block.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiCzC;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,KAAc,EACd,OAAoB,EACpB,UAAkB,EAClB,KAAkB;IAElB,MAAM,MAAM,GAAe,OAAO,CAChC,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,EAC3B,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,EAChD;QACE,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;KACtD,CACF,CAAC;IAEF,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACxC,IAAI;QACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,GAAG,CAAC,KAAK,KAAK,CAAC;YACb,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;KACnE,CAAC,CAAC,CAAC;AACN,CAAC"}

package/dist/layout/box.d.ts

@@ -0,0 +1,20 @@
+import type { BoxStyle, Rect } from "./types.js";
+/**
+ * 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 declare function box(rect: Rect, style?: BoxStyle): string;
+/**
+ * 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 declare function inset(rect: Rect, amount: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>): Rect;
+//# sourceMappingURL=box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/layout/box.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAejD;;;;;;;GAOG;AACH,wBAAgB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,GAAE,QAAa,GAAG,MAAM,CAe5D;AAED;;;;;;;GAOG;AACH,wBAAgB,KAAK,CACnB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC,GAC5E,IAAI,CAgBN"}

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