@ideare/kit 0.0.0-stage → 0.1.0-next.1

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

@@ -0,0 +1,53 @@
+/**
+ * Marks as data. A mark master is SVG, but the scene engine never passes through SVG it did not
+ * write (docs/spikes/render.md, rule 1). So a mark is read into a small, fixed subset (shapes,
+ * groups, solid fills and strokes), then written back out by the kit, recolored as each version
+ * needs. Anything outside the subset is listed, so the studio can say what to fix.
+ */
+export type MarkElement = {
+    tag: "g" | "path" | "circle" | "ellipse" | "rect" | "line" | "polyline" | "polygon";
+    attrs: Record<string, string>;
+    children: MarkElement[];
+};
+export type ParsedMark = {
+    viewBox: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /** The root's own paint (Lucide-style fill="none" stroke="currentColor"), kept as a group. */
+    root: MarkElement;
+    /** Every hex color used, lowercase. */
+    colors: string[];
+    /** The thinnest stroke, in viewBox units (Infinity when nothing is stroked). */
+    thinnestStroke: number;
+    /** 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 = {
+    /** Map each hex the mark uses to the hex to draw. Default: as it is. */
+    color?: (hex: string) => string;
+    /** What currentColor and an unset fill mean here. Default: #000000, as in SVG. */
+    current?: string;
+};
+/** Write the mark's elements back out (no <svg> wrapper), recolored. */
+export declare function markBody(mark: ParsedMark, paint?: MarkPaint): string;
+/** A standalone SVG of the mark (recolored), with its own viewBox. */
+export declare function markSvg(mark: ParsedMark, paint?: MarkPaint): string;
+/**
+ * A mark master as the kit would draw it, written by the kit: only the subset parseMark reads, so
+ * no script, event handler, link or foreign content survives. currentColor stays. Running it on
+ * its own output gives the same bytes, so saving a clean mark again changes nothing. Throws like
+ * parseMark when there is no usable <svg> root.
+ */
+export declare function cleanMarkSvg(svg: string): string;