@ideare/kit 0.1.0-next.0 → 0.1.0-next.1

package/dist/check/index.js

@@ -1,10 +1,10 @@
 import { ensureContrast, oklabDistance } from "../color/contrast.js";
 import { CONTRAST_PAIRS } from "../color/palette.js";
 import { contrast, formatRatio } from "../color/wcag.js";
-import { BANNERS, avatarScene, bannerScene, cardBackScene, catalogScene, ogScene, tileScene, } from "../files/templates.js";
+import { BANNERS, avatarScene, bannerScene, cardBackScene, catalogScene, logoScene, ogScene, tileScene, } from "../files/templates.js";
 import { parseMark } from "../marks/svg.js";
 import { engineFor, renderScene } from "../scene/render.js";
-import { fontFor } from "../scene/brand-art.js";
+import { fontFor, linePxAt16, smallMark } from "../scene/brand-art.js";
 import { checkCopy } from "./copy.js";
 const GROUND_WORDS = {
     ground: "the page",
@@ -166,10 +166,9 @@ function markChecks(brand) {
             });
         }
     }
-    // Thin lines vanish at 16 px: the thinnest stroke must stay at 1 px or more.
-    const small = parseMark(brand.mark.small ?? brand.mark.svg);
-    const drawn = 16 * (1 - Math.min(brand.mark.tile.padding, 0.12));
-    const thinnest = (small.thinnestStroke * drawn) / Math.max(small.viewBox.w, small.viewBox.h);
+    // Thin lines vanish at 16 px: the thinnest stroke of the small drawing must stay at 1 px or
+    // more. Measured on what the kit draws there, a curated icon's heavier lines included.
+    const thinnest = Math.round(linePxAt16(smallMark(brand), brand.mark.tile.padding) * 100) / 100;
     if (Number.isFinite(thinnest)) {
         results.push(thinnest >= 1
             ? {
@@ -177,7 +176,7 @@ function markChecks(brand) {
                 area: "logo",
                 level: "pass",
                 title: "The logo reads at 16 px",
-                details: { thinnestLinePx: Math.round(thinnest * 100) / 100 },
+                details: { thinnestLinePx: thinnest },
             }
             : {
                 id: "logo.legibility.16",
@@ -185,7 +184,7 @@ function markChecks(brand) {
                 level: "warning",
                 title: "Thin lines in the logo fade out at 16 px. Add a simpler small version",
                 message: "Browser tabs show the logo at 16 px.",
-                details: { thinnestLinePx: Math.round(thinnest * 100) / 100, needed: 1 },
+                details: { thinnestLinePx: thinnest, needed: 1 },
             });
     }
     // Colors in the mark that are not in either palette.
@@ -435,9 +434,86 @@ async function textChecks(brand, ctx) {
                 : "The iPhone icon has see-through pixels, which iOS turns black",
             details: { transparentPixels: transparent },
         });
+        const kept = await oneColorKept(brand, ctx.fonts, ctx.rasterize);
+        results.push(kept >= ONE_COLOR_KEPT
+            ? {
+                id: "logo.oneColor",
+                area: "logo",
+                level: "pass",
+                title: "The one-color logo keeps every part",
+                details: { edgesKept: formatShare(kept) },
+            }
+            : {
+                id: "logo.oneColor",
+                area: "logo",
+                level: "warning",
+                title: "Parts of the logo merge in the one-color version",
+                message: "Stamps and embroidery print the logo in one color. Parts in different colors that touch become one shape. Leave a small gap between them.",
+                details: {
+                    edgesKept: formatShare(kept),
+                    needed: formatShare(ONE_COLOR_KEPT),
+                },
+            });
     }
     return results;
 }
+/** The share of the color logo's edges the one-color logo must keep. */
+const ONE_COLOR_KEPT = 0.8;
+function formatShare(share) {
+    return `${Math.round(share * 100)}%`;
+}
+/**
+ * The share of the color mark's edges that its one-color (ink) version keeps, measured at 64 px.
+ * A glyph that merges into its tile keeps only the tile's outline: about half.
+ */
+async function oneColorKept(brand, fonts, rasterize) {
+    const size = 64;
+    const draw = async (tone) => {
+        const { svg } = await renderScene(logoScene("mark", tone, size, size), brand, { fonts });
+        const raster = await rasterize(svg, { width: size });
+        return { pixels: raster.pixels, width: raster.width, height: raster.height };
+    };
+    const color = await draw("color");
+    const ink = await draw("ink");
+    const { width, height } = color;
+    const at = (x, y) => (y * width + x) * 4;
+    // The color mark on white, so a see-through spot reads as the ground.
+    const shade = (i, channel) => {
+        const alpha = (color.pixels[i + 3] ?? 0) / 255;
+        return (color.pixels[i + channel] ?? 0) * alpha + 255 * (1 - alpha);
+    };
+    const colorEdge = (i, j) => Math.abs(shade(i, 0) - shade(j, 0)) +
+        Math.abs(shade(i, 1) - shade(j, 1)) +
+        Math.abs(shade(i, 2) - shade(j, 2)) >
+        96;
+    const alpha = (x, y) => ink.pixels[at(x, y) + 3] ?? 0;
+    const inkEdgeNear = (x, y) => {
+        for (let dy = -1; dy <= 1; dy++)
+            for (let dx = -1; dx <= 1; dx++) {
+                const px = x + dx;
+                const py = y + dy;
+                if (px < 0 || py < 0 || px + 1 >= ink.width || py + 1 >= ink.height)
+                    continue;
+                const here = alpha(px, py);
+                if (Math.abs(here - alpha(px + 1, py)) > 64 ||
+                    Math.abs(here - alpha(px, py + 1)) > 64)
+                    return true;
+            }
+        return false;
+    };
+    let edges = 0;
+    let kept = 0;
+    for (let y = 0; y + 1 < height; y++)
+        for (let x = 0; x + 1 < width; x++) {
+            const i = at(x, y);
+            if (!colorEdge(i, at(x + 1, y)) && !colorEdge(i, at(x, y + 1)))
+                continue;
+            edges++;
+            if (inkEdgeNear(x, y))
+                kept++;
+        }
+    return edges ? kept / edges : 1;
+}
 /** Upload limits per network, in bytes. */
 const SIZE_LIMITS = [
     { match: /^og\//, max: 5 * 1024 * 1024, where: "X share cards (5 MB)" },

package/dist/marks/one-color.d.ts

@@ -0,0 +1,45 @@
+import { type MarkElement, type ParsedMark } from "./svg.ts";
+/**
+ * One-color versions (stamps, embroidery, a logo over a photo) keep the symbol readable the way a
+ * printer would: a glyph on a tile is cut out of it. The tile prints in the one color and the
+ * glyph shows the ground through it, so the version works on any ground. Painting every part in
+ * the one color leaves a plain disc.
+ */
+/** A box in the mark's own units. */
+type Box = {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+};
+/** A drawn shape with the paints it inherits ("none", "currentColor" or a hex) and its box. */
+type MarkLeaf = {
+    element: MarkElement;
+    fill: string;
+    stroke: string;
+    box: Box;
+};
+/** A shape in a one-color version: whether its fill and its stroke are cut out. */
+type OneColorPart = {
+    leaf: MarkLeaf;
+    fillHole: boolean;
+    strokeHole: boolean;
+};
+/** Every point a path reaches, control points included, in its own units. Relative commands,
+ *  H and V, and arcs with packed flags (svgo writes "a1 1 0 011 1") all read. */
+export declare function pathPoints(d: string): [number, number][];
+/**
+ * Which paints become holes in a one-color version. Each part is read against what it sits on
+ * (the topmost filled part before it whose box holds it): in another color it takes the other
+ * state, so a glyph on a tile is cut out of it and a dot on that glyph prints again; in the same
+ * color it takes the same state. A part on the ground prints, unless it is white or close to it,
+ * which reads as the paper. A drawing that is all white (made for dark grounds) keeps every
+ * shape, since there is nothing to cut it from.
+ */
+export declare function oneColorParts(mark: ParsedMark): OneColorPart[];
+/**
+ * The mark as a mask for its one-color version: white where the one color prints, black where a
+ * part is cut out. Undefined when nothing is cut out, so the mark can simply be recolored.
+ */
+export declare function knockoutMask(mark: ParsedMark): ParsedMark | undefined;
+export {};

package/dist/marks/one-color.js

@@ -0,0 +1,304 @@
+import { contrast } from "../color/wcag.js";
+import { IDENTITY, apply, withTransform, } from "./svg.js";
+/** Under this contrast with white, a color reads as the paper: a hole or a highlight. */
+const PAPER_CONTRAST = 1.3;
+/** How far a part may reach past the tile's box and still sit on it, as a share of the mark. */
+const SLACK = 0.02;
+const NUMBER = /[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/iy;
+const COMMAND = /[MmLlHhVvCcSsQqTtAaZz]/;
+/** Points along an arc (SVG's endpoint form), sampled from its center form. */
+function arcPoints(x0, y0, radiusX, radiusY, degrees, large, sweep, x, y) {
+    let rx = Math.abs(radiusX);
+    let ry = Math.abs(radiusY);
+    if (!rx || !ry || (x0 === x && y0 === y))
+        return [[x, y]];
+    const phi = (degrees * Math.PI) / 180;
+    const cos = Math.cos(phi);
+    const sin = Math.sin(phi);
+    const dx = (x0 - x) / 2;
+    const dy = (y0 - y) / 2;
+    const x1 = cos * dx + sin * dy;
+    const y1 = -sin * dx + cos * dy;
+    const lambda = (x1 * x1) / (rx * rx) + (y1 * y1) / (ry * ry);
+    if (lambda > 1) {
+        rx *= Math.sqrt(lambda);
+        ry *= Math.sqrt(lambda);
+    }
+    const num = rx * rx * ry * ry - rx * rx * y1 * y1 - ry * ry * x1 * x1;
+    const den = rx * rx * y1 * y1 + ry * ry * x1 * x1;
+    const coef = (large === sweep ? -1 : 1) * Math.sqrt(Math.max(0, num / den));
+    const cxp = (coef * rx * y1) / ry;
+    const cyp = (-coef * ry * x1) / rx;
+    const cx = cos * cxp - sin * cyp + (x0 + x) / 2;
+    const cy = sin * cxp + cos * cyp + (y0 + y) / 2;
+    const start = Math.atan2((y1 - cyp) / ry, (x1 - cxp) / rx);
+    let delta = Math.atan2((-y1 - cyp) / ry, (-x1 - cxp) / rx) - start;
+    if (sweep && delta < 0)
+        delta += 2 * Math.PI;
+    else if (!sweep && delta > 0)
+        delta -= 2 * Math.PI;
+    const points = [];
+    for (let step = 1; step <= 16; step++) {
+        const t = start + (delta * step) / 16;
+        const ex = rx * Math.cos(t);
+        const ey = ry * Math.sin(t);
+        points.push([cos * ex - sin * ey + cx, sin * ex + cos * ey + cy]);
+    }
+    return points;
+}
+/** Every point a path reaches, control points included, in its own units. Relative commands,
+ *  H and V, and arcs with packed flags (svgo writes "a1 1 0 011 1") all read. */
+export function pathPoints(d) {
+    const points = [];
+    let i = 0;
+    const skip = () => {
+        while (i < d.length && /[\s,]/.test(d[i] ?? ""))
+            i++;
+    };
+    const number = () => {
+        skip();
+        NUMBER.lastIndex = i;
+        const match = NUMBER.exec(d);
+        if (!match)
+            return undefined;
+        i += match[0].length;
+        return Number(match[0]);
+    };
+    const flag = () => {
+        skip();
+        const char = d[i];
+        if (char !== "0" && char !== "1")
+            return undefined;
+        i++;
+        return Number(char);
+    };
+    let x = 0;
+    let y = 0;
+    let startX = 0;
+    let startY = 0;
+    let command = "";
+    for (;;) {
+        skip();
+        if (i >= d.length)
+            return points;
+        const char = d[i] ?? "";
+        if (COMMAND.test(char)) {
+            command = char;
+            i++;
+            if (command === "Z" || command === "z") {
+                x = startX;
+                y = startY;
+                continue;
+            }
+        }
+        const relative = command === command.toLowerCase();
+        const ox = relative ? x : 0;
+        const oy = relative ? y : 0;
+        const pairs = (count) => {
+            const out = [];
+            for (let n = 0; n < count; n++) {
+                const px = number();
+                const py = number();
+                if (px === undefined || py === undefined)
+                    return undefined;
+                out.push([ox + px, oy + py]);
+            }
+            return out;
+        };
+        let drawn;
+        switch (command.toLowerCase()) {
+            case "m":
+            case "l":
+            case "t":
+                drawn = pairs(1);
+                break;
+            case "s":
+            case "q":
+                drawn = pairs(2);
+                break;
+            case "c":
+                drawn = pairs(3);
+                break;
+            case "h": {
+                const value = number();
+                drawn = value === undefined ? undefined : [[ox + value, y]];
+                break;
+            }
+            case "v": {
+                const value = number();
+                drawn = value === undefined ? undefined : [[x, oy + value]];
+                break;
+            }
+            case "a": {
+                const [rx, ry, rotation] = [number(), number(), number()];
+                const [large, sweep] = [flag(), flag()];
+                const end = pairs(1)?.[0];
+                drawn =
+                    rx === undefined ||
+                        ry === undefined ||
+                        rotation === undefined ||
+                        large === undefined ||
+                        sweep === undefined ||
+                        !end
+                        ? undefined
+                        : arcPoints(x, y, rx, ry, rotation, large, sweep, end[0], end[1]);
+                break;
+            }
+            default:
+                // A number with no command before it, or after a close: nothing more reads.
+                return points;
+        }
+        const last = drawn?.[drawn.length - 1];
+        if (!drawn || !last)
+            return points;
+        points.push(...drawn);
+        if (command === "M" || command === "m") {
+            startX = last[0];
+            startY = last[1];
+            // More pairs after a moveto are lines.
+            command = command === "M" ? "L" : "l";
+        }
+        [x, y] = last;
+    }
+}
+function corners(x0, y0, x1, y1) {
+    return [
+        [x0, y0],
+        [x1, y0],
+        [x0, y1],
+        [x1, y1],
+    ];
+}
+function shapePoints(element) {
+    const attrs = element.attrs;
+    const n = (name) => Number(attrs[name] ?? 0) || 0;
+    switch (element.tag) {
+        case "circle":
+            return corners(n("cx") - n("r"), n("cy") - n("r"), n("cx") + n("r"), n("cy") + n("r"));
+        case "ellipse":
+            return corners(n("cx") - n("rx"), n("cy") - n("ry"), n("cx") + n("rx"), n("cy") + n("ry"));
+        case "rect":
+            return corners(n("x"), n("y"), n("x") + n("width"), n("y") + n("height"));
+        case "line":
+            return [
+                [n("x1"), n("y1")],
+                [n("x2"), n("y2")],
+            ];
+        case "polyline":
+        case "polygon": {
+            const values = (attrs.points ?? "")
+                .trim()
+                .split(/[\s,]+/)
+                .map(Number);
+            const points = [];
+            for (let k = 0; k + 1 < values.length; k += 2)
+                points.push([values[k] ?? 0, values[k + 1] ?? 0]);
+            return points;
+        }
+        case "path":
+            return pathPoints(attrs.d ?? "");
+        case "g":
+            return [];
+    }
+}
+/** Every drawn shape of a mark, bottom first, with its paints and its box in the mark's units. */
+function markLeaves(mark) {
+    const leaves = [];
+    const walk = (element, fill, stroke, matrix) => {
+        const nextFill = element.attrs.fill ?? fill;
+        const nextStroke = element.attrs.stroke ?? stroke;
+        const nextMatrix = withTransform(matrix, element.attrs.transform);
+        for (const child of element.children)
+            walk(child, nextFill, nextStroke, nextMatrix);
+        if (element.tag === "g")
+            return;
+        const points = shapePoints(element).map(([x, y]) => apply(nextMatrix, x, y));
+        if (!points.length)
+            return;
+        const xs = points.map(([x]) => x);
+        const ys = points.map(([, y]) => y);
+        leaves.push({
+            element,
+            fill: nextFill,
+            stroke: nextStroke,
+            box: {
+                x0: Math.min(...xs),
+                y0: Math.min(...ys),
+                x1: Math.max(...xs),
+                y1: Math.max(...ys),
+            },
+        });
+    };
+    // An unset fill on the root paints in currentColor (markBody writes it so).
+    walk(mark.root, "currentColor", "none", IDENTITY);
+    return leaves;
+}
+function inside(inner, outer, slack) {
+    return (inner.x0 >= outer.x0 - slack &&
+        inner.y0 >= outer.y0 - slack &&
+        inner.x1 <= outer.x1 + slack &&
+        inner.y1 <= outer.y1 + slack);
+}
+/** Whether the paint reads as the paper: white, or close to it. */
+function isPaper(paint) {
+    return paint.startsWith("#") && contrast(paint, "#ffffff") < PAPER_CONTRAST;
+}
+/**
+ * Which paints become holes in a one-color version. Each part is read against what it sits on
+ * (the topmost filled part before it whose box holds it): in another color it takes the other
+ * state, so a glyph on a tile is cut out of it and a dot on that glyph prints again; in the same
+ * color it takes the same state. A part on the ground prints, unless it is white or close to it,
+ * which reads as the paper. A drawing that is all white (made for dark grounds) keeps every
+ * shape, since there is nothing to cut it from.
+ */
+export function oneColorParts(mark) {
+    const slack = Math.max(mark.viewBox.w, mark.viewBox.h) * SLACK;
+    const parts = [];
+    for (const leaf of markLeaves(mark)) {
+        let below;
+        for (let k = parts.length - 1; k >= 0 && !below; k--) {
+            const part = parts[k];
+            if (part && part.leaf.fill !== "none" && inside(leaf.box, part.leaf.box, slack))
+                below = part;
+        }
+        const isHole = (paint) => paint !== "none" &&
+            (below
+                ? paint === below.leaf.fill
+                    ? below.fillHole
+                    : !below.fillHole
+                : isPaper(paint));
+        parts.push({ leaf, fillHole: isHole(leaf.fill), strokeHole: isHole(leaf.stroke) });
+    }
+    const keepsInk = parts.some((part) => (part.leaf.fill !== "none" && !part.fillHole) ||
+        (part.leaf.stroke !== "none" && !part.strokeHole));
+    return keepsInk
+        ? parts
+        : parts.map((part) => ({ ...part, fillHole: false, strokeHole: false }));
+}
+/**
+ * The mark as a mask for its one-color version: white where the one color prints, black where a
+ * part is cut out. Undefined when nothing is cut out, so the mark can simply be recolored.
+ */
+export function knockoutMask(mark) {
+    const parts = oneColorParts(mark);
+    if (!parts.some((part) => part.fillHole || part.strokeHole))
+        return undefined;
+    const byElement = new Map(parts.map((part) => [part.leaf.element, part]));
+    const paint = (value, hole) => value === "none" ? "none" : hole ? "#000000" : "#ffffff";
+    const copy = (element) => {
+        const { fill: _fill, stroke: _stroke, ...attrs } = element.attrs;
+        const part = byElement.get(element);
+        return {
+            ...element,
+            attrs: part
+                ? {
+                    ...attrs,
+                    fill: paint(part.leaf.fill, part.fillHole),
+                    stroke: paint(part.leaf.stroke, part.strokeHole),
+                }
+                : attrs,
+            children: element.children.map(copy),
+        };
+    };
+    return { ...mark, root: copy(mark.root), colors: ["#000000", "#ffffff"] };
+}

package/dist/marks/svg.d.ts

@@ -25,6 +25,13 @@ export type ParsedMark = {
     /** What was left out, in plain words. Empty for a clean mark. */
     unsupported: string[];
 };
+/** An affine transform as SVG's matrix(a b c d e f). */
+export type Matrix = readonly [number, number, number, number, number, number];
+export declare const IDENTITY: Matrix;
+/** `matrix` followed by a transform attribute parseMark kept (so it is well formed). */
+export declare function withTransform(matrix: Matrix, transform: string | undefined): Matrix;
+/** A point through the matrix. */
+export declare function apply([a, b, c, d, e, f]: Matrix, x: number, y: number): [number, number];
 /** Read a mark master into the kit's subset. Throws only when there is no usable <svg> root. */
 export declare function parseMark(svg: string): ParsedMark;
 export type MarkPaint = {

package/dist/marks/svg.js

@@ -79,6 +79,56 @@ const NAMED = {
 };
 const NUMBER = /^-?(\d+\.?\d*|\.\d+)(e-?\d+)?$/i;
 const TRANSFORM = /^(\s*(matrix|translate|scale|rotate|skewX|skewY)\s*\([-\d.,\se]*\)\s*)+$/i;
+export const IDENTITY = [1, 0, 0, 1, 0, 0];
+function multiply(m, n) {
+    return [
+        m[0] * n[0] + m[2] * n[1],
+        m[1] * n[0] + m[3] * n[1],
+        m[0] * n[2] + m[2] * n[3],
+        m[1] * n[2] + m[3] * n[3],
+        m[0] * n[4] + m[2] * n[5] + m[4],
+        m[1] * n[4] + m[3] * n[5] + m[5],
+    ];
+}
+/** `matrix` followed by a transform attribute parseMark kept (so it is well formed). */
+export function withTransform(matrix, transform) {
+    let out = matrix;
+    for (const [, name = "", args = ""] of (transform ?? "").matchAll(/(matrix|translate|scale|rotate|skewX|skewY)\s*\(([^)]*)\)/gi)) {
+        const n = args
+            .trim()
+            .split(/[\s,]+/)
+            .filter(Boolean)
+            .map(Number);
+        const radians = ((n[0] ?? 0) * Math.PI) / 180;
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        const [cx = 0, cy = 0] = n.slice(1);
+        const kind = name.toLowerCase();
+        const step = kind === "matrix"
+            ? [n[0] ?? 1, n[1] ?? 0, n[2] ?? 0, n[3] ?? 1, n[4] ?? 0, n[5] ?? 0]
+            : kind === "translate"
+                ? [1, 0, 0, 1, n[0] ?? 0, n[1] ?? 0]
+                : kind === "scale"
+                    ? [n[0] ?? 1, 0, 0, n[1] ?? n[0] ?? 1, 0, 0]
+                    : kind === "rotate"
+                        ? [cos, sin, -sin, cos, cx - cos * cx + sin * cy, cy - sin * cx - cos * cy]
+                        : kind === "skewx"
+                            ? [1, 0, Math.tan(radians), 1, 0, 0]
+                            : [1, Math.tan(radians), 0, 1, 0, 0];
+        out = multiply(out, step);
+    }
+    return out;
+}
+/** A point through the matrix. */
+export function apply([a, b, c, d, e, f], x, y) {
+    return [a * x + c * y + e, b * x + d * y + f];
+}
+/** How much the matrix scales a line at its thinnest: its smaller singular value. */
+function thinnestScale([a, b, c, d]) {
+    const sum = a * a + b * b + c * c + d * d;
+    const det = a * d - b * c;
+    return Math.sqrt(Math.max(0, (sum - Math.sqrt(Math.max(0, sum * sum - 4 * det * det))) / 2));
+}
 /** A paint value as the kit stores it: lowercase hex, "none" or "currentColor". */
 function normalizePaint(value) {
     const trimmed = value.trim().toLowerCase();
@@ -266,19 +316,21 @@ export function parseMark(svg) {
     }
     if (!root || !viewBox)
         throw new TypeError("The mark has no <svg> root with a viewBox or a size.");
-    // Stroke widths, inherited down the tree: the legibility check needs the thinnest one.
-    const walk = (element, stroke, width) => {
+    // Stroke widths, inherited down the tree, as drawn: a 2-unit line inside scale(2) is 4 units
+    // wide in the viewBox. The legibility check needs the thinnest one.
+    const walk = (element, stroke, width, matrix) => {
         const nextStroke = element.attrs.stroke ?? stroke;
         const nextWidth = element.attrs["stroke-width"]
             ? Number(element.attrs["stroke-width"])
             : width;
+        const nextMatrix = withTransform(matrix, element.attrs.transform);
         if (element.tag !== "g" && nextStroke && nextStroke !== "none") {
-            thinnestStroke = Math.min(thinnestStroke, nextWidth);
+            thinnestStroke = Math.min(thinnestStroke, nextWidth * thinnestScale(nextMatrix));
         }
         for (const child of element.children)
-            walk(child, nextStroke, nextWidth);
+            walk(child, nextStroke, nextWidth, nextMatrix);
     };
-    walk(root, undefined, 1);
+    walk(root, undefined, 1, IDENTITY);
     return {
         viewBox,
         root,

package/dist/scene/brand-art.d.ts

@@ -4,6 +4,16 @@ import type { LoadedFont, TextEngine } from "../text/engine.ts";
 /** The versions an owner may bring as their own drawing (brand.mark.lockups). */
 declare const LOCKUPS: readonly ["horizontal", "stacked", "wordmark"];
 type Lockup = (typeof LOCKUPS)[number];
+/** The thinnest line of a mark in a 16 px favicon, in pixels: the favicon draws the mark inside
+ *  the tile's padding, of at most 12%. */
+export declare function linePxAt16(mark: ParsedMark, padding: number): number;
+/**
+ * The drawing for 16 to 32 px (favicons, small.svg, small avatars): the owner's own small version
+ * when there is one. A curated icon (`source.kind: "icon"`) is drawn with heavier lines, so its
+ * thinnest line holds a whole pixel at 16 px, where its 2-unit lines fade, up to twice its weight.
+ * Any other mark is drawn as it is, and check() asks for a simpler small version when it needs one.
+ */
+export declare function smallMark(brand: Brand, mark?: ParsedMark): ParsedMark;
 /**
  * Everything the brand contributes to a drawing, prepared once per brand: the parsed marks, the
  * fonts for both roles and the outlined wordmark. Lockups are composed from these, in natural
@@ -43,7 +53,9 @@ export type LogoFragment = {
 };
 /**
  * One logo version. `ground` is what it sits on (it picks the dark mark and the wordmark color
- * for "color"); ink and white are one-color versions for stamps, embroidery and photos.
+ * for "color"); ink and white are one-color versions for stamps, embroidery and photos. `id`
+ * names the masks a one-color version cuts with: pass the page's own when several drawings share
+ * one document. Without it, the fragment numbers its own.
  */
-export declare function logoFragment(art: BrandArt, brand: Brand, variant: LogoVariant, tone: LogoTone, ground: string): LogoFragment;
+export declare function logoFragment(art: BrandArt, brand: Brand, variant: LogoVariant, tone: LogoTone, ground: string, id?: () => string): LogoFragment;
 export {};

package/dist/scene/brand-art.js

@@ -1,11 +1,53 @@
 import { contrast } from "../color/wcag.js";
 import { isLight } from "../color/contrast.js";
+import { knockoutMask } from "../marks/one-color.js";
 import { markBody, parseMark } from "../marks/svg.js";
 import { pathBounds } from "../marks/draw.js";
 import { nearestWeight } from "../fonts/pick.js";
 import { fmt } from "../text/engine.js";
 /** The versions an owner may bring as their own drawing (brand.mark.lockups). */
 const LOCKUPS = ["horizontal", "stacked", "wordmark"];
+/** The heaviest a curated icon's lines get in the small version: past twice, details clog. */
+const MAX_SMALL_WEIGHT = 2;
+/** The thinnest line of a mark in a 16 px favicon, in pixels: the favicon draws the mark inside
+ *  the tile's padding, of at most 12%. */
+export function linePxAt16(mark, padding) {
+    const drawn = 16 * (1 - Math.min(padding, 0.12));
+    return (mark.thinnestStroke * drawn) / Math.max(mark.viewBox.w, mark.viewBox.h);
+}
+/**
+ * The drawing for 16 to 32 px (favicons, small.svg, small avatars): the owner's own small version
+ * when there is one. A curated icon (`source.kind: "icon"`) is drawn with heavier lines, so its
+ * thinnest line holds a whole pixel at 16 px, where its 2-unit lines fade, up to twice its weight.
+ * Any other mark is drawn as it is, and check() asks for a simpler small version when it needs one.
+ */
+export function smallMark(brand, mark = parseMark(brand.mark.svg)) {
+    if (brand.mark.small)
+        return parseMark(brand.mark.small);
+    if (brand.mark.source?.kind !== "icon")
+        return mark;
+    const px = linePxAt16(mark, brand.mark.tile.padding);
+    if (!Number.isFinite(px) || px <= 0 || px >= 1)
+        return mark;
+    const weight = Math.min(MAX_SMALL_WEIGHT, Math.ceil(100 / px) / 100);
+    const heavier = (element, isRoot) => {
+        const width = element.attrs["stroke-width"];
+        // An unset width is 1, inherited from the root.
+        const scaled = width === undefined ? (isRoot ? weight : undefined) : Number(width) * weight;
+        return {
+            ...element,
+            attrs: scaled === undefined
+                ? element.attrs
+                : { ...element.attrs, "stroke-width": fmt(scaled) },
+            children: element.children.map((child) => heavier(child, false)),
+        };
+    };
+    return {
+        ...mark,
+        root: heavier(mark.root, true),
+        thinnestStroke: mark.thinnestStroke * weight,
+    };
+}
 const cache = new WeakMap();
 /** The font file a role draws with: the brand's family at the nearest weight it has. */
 export function fontFor(brand, role, weight) {
@@ -38,7 +80,7 @@ export function brandArt(brand, engine) {
             }
             return {
                 mark,
-                small: brand.mark.small ? parseMark(brand.mark.small) : mark,
+                small: smallMark(brand, mark),
                 dark: brand.mark.dark ? parseMark(brand.mark.dark) : undefined,
                 lockups,
                 display,
@@ -81,15 +123,30 @@ function lockupColorsOn(brand, ground) {
     const light = brand.colors.dark.ink;
     return (hex) => (contrast(hex, ground) < 3 ? light : hex);
 }
-function placeMark(mark, color, current, height, x, y) {
+function placeMark(mark, body, height, x, y) {
     const { viewBox } = mark;
     const scale = height / viewBox.h;
-    const body = markBody(mark, { color, current });
     return {
         body: `<g transform="translate(${fmt(x - viewBox.x * scale)} ${fmt(y - viewBox.y * scale)}) scale(${fmt(scale)})">${body}</g>`,
         w: viewBox.w * scale,
     };
 }
+/**
+ * A drawing in one color. What has to stay visible inside it (a glyph on its tile) is cut out
+ * with a mask instead of painted, so the version works on any ground. A drawing with nothing to
+ * cut out is simply recolored.
+ */
+function oneColorBody(mark, one, id) {
+    const mask = knockoutMask(mark);
+    if (!mask)
+        return markBody(mark, { color: () => one, current: one });
+    const { x, y, w, h } = mark.viewBox;
+    // Strokes and a viewBox that hugs the drawing can reach past the box.
+    const pad = Math.max(w, h) / 4;
+    const area = `x="${fmt(x - pad)}" y="${fmt(y - pad)}" width="${fmt(w + 2 * pad)}" height="${fmt(h + 2 * pad)}"`;
+    const maskId = id();
+    return `<mask id="${maskId}" maskUnits="userSpaceOnUse" ${area}>${markBody(mask)}</mask><rect ${area} fill="${one}" mask="url(#${maskId})"/>`;
+}
 function placeWordmark(art, fill, height, x, y) {
     const { box, d } = art.wordmark;
     const scale = box.h > 0 ? height / box.h : 1;
@@ -100,25 +157,31 @@ function placeWordmark(art, fill, height, x, y) {
 }
 /**
  * One logo version. `ground` is what it sits on (it picks the dark mark and the wordmark color
- * for "color"); ink and white are one-color versions for stamps, embroidery and photos.
+ * for "color"); ink and white are one-color versions for stamps, embroidery and photos. `id`
+ * names the masks a one-color version cuts with: pass the page's own when several drawings share
+ * one document. Without it, the fragment numbers its own.
  */
-export function logoFragment(art, brand, variant, tone, ground) {
+export function logoFragment(art, brand, variant, tone, ground, id) {
     const palette = isLight(ground) ? brand.colors.light : brand.colors.dark;
     const one = tone === "ink" ? brand.colors.light.ink : tone === "white" ? "#ffffff" : undefined;
     const wordFill = one ?? palette.ink;
+    let next = 0;
+    const nextId = id ?? (() => `ideare-cut-${next++}`);
     const mark = (which, height, x, y) => {
         if (one) {
             const base = which === "small" ? art.small : art.mark;
-            return placeMark(base, () => one, one, height, x, y);
+            return placeMark(base, oneColorBody(base, one, nextId), height, x, y);
         }
         const chosen = markOn(art, brand, ground, which);
-        return placeMark(chosen.mark, chosen.color, palette.ink, height, x, y);
+        const body = markBody(chosen.mark, { color: chosen.color, current: palette.ink });
+        return placeMark(chosen.mark, body, height, x, y);
     };
     const own = variant === "mark" || variant === "small" ? undefined : art.lockups[variant];
     if (own) {
-        const placed = one
-            ? placeMark(own, () => one, one, 100, 0, 0)
-            : placeMark(own, lockupColorsOn(brand, ground), palette.ink, 100, 0, 0);
+        const body = one
+            ? oneColorBody(own, one, nextId)
+            : markBody(own, { color: lockupColorsOn(brand, ground), current: palette.ink });
+        const placed = placeMark(own, body, 100, 0, 0);
         return { body: placed.body, w: placed.w, h: 100 };
     }
     switch (variant) {

package/dist/scene/render.d.ts

@@ -16,7 +16,7 @@ import type { AssetRef, Frame, Scene } from "./schema.ts";
  * one transform instead of every glyph path.
  */
 /** Bump when the output for the same scene and brand changes, so revisions change too. */
-export declare const RENDERER_VERSION = "2";
+export declare const RENDERER_VERSION = "3";
 /** Filter region pixels allowed per page: about two large shadows on a share card. */
 export declare const FILTER_BUDGET_PX = 500000;
 export type AssetResolver = (asset: AssetRef, drawn: {

package/dist/scene/render.js

@@ -22,7 +22,7 @@ import { parseScene } from "./schema.js";
  * one transform instead of every glyph path.
  */
 /** Bump when the output for the same scene and brand changes, so revisions change too. */
-export const RENDERER_VERSION = "2";
+export const RENDERER_VERSION = "3";
 /** Filter region pixels allowed per page: about two large shadows on a share card. */
 export const FILTER_BUDGET_PX = 500_000;
 const engines = new WeakMap();
@@ -373,7 +373,7 @@ export async function renderScene(input, brand, ctx) {
                 break;
             case "logo": {
                 const tone = layer.tone === "auto" ? "color" : layer.tone;
-                const fragment = logoFragment(art, brand, layer.variant, tone, ground ?? palette.ground);
+                const fragment = logoFragment(art, brand, layer.variant, tone, ground ?? palette.ground, sink.id);
                 const scale = Math.min(box.w / fragment.w, box.h / fragment.h);
                 const spare = box.w - fragment.w * scale;
                 const x = layer.align === "start" ? 0 : layer.align === "end" ? spare : spare / 2;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The kit's version, kept equal to package.json's (src/brand/schema.test.ts checks it). */
-export declare const VERSION = "0.1.0-next.0";
+export declare const VERSION = "0.1.0-next.1";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The kit's version, kept equal to package.json's (src/brand/schema.test.ts checks it). */
-export const VERSION = "0.1.0-next.0";
+export const VERSION = "0.1.0-next.1";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ideare/kit",
-    "version": "0.1.0-next.0",
+    "version": "0.1.0-next.1",
     "description": "The brand kit engine behind ideare: brand.json, file generation, checks and the scene renderer.",
     "license": "MIT",
     "homepage": "https://ideare.app",