morphico 0.0.1 → 0.1.0

package/dist/morphico.js

@@ -1,10 +1,1378 @@
-/*! morphico v0.0.1 | MIT License */
+/*! morphico v0.1.0 | MIT License */
 var morphico = (function () {
 'use strict';
+// engine.ts
+const { easings, animate } = (() => {
+// Animation engine: easings and one shared requestAnimationFrame loop for every running morph.
+// The loop only runs while something moves; nothing touches the DOM at import time (SSR-safe).
+const easings = {
+    linear: (progress) => progress,
+    easeInOutCubic: (progress) => (progress < 0.5 ? 4 * progress ** 3 : 1 - (-2 * progress + 2) ** 3 / 2),
+    easeOutBack: (progress) => 1 + 2.70158 * (progress - 1) ** 3 + 1.70158 * (progress - 1) ** 2,
+    easeOutElastic: (progress) => (progress === 0 || progress === 1
+        ? progress
+        : 2 ** (-10 * progress) * Math.sin((progress * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1),
+};
+const frameCallbacks = new Set();
+let animationFrameId = 0;
+const runFrame = (frameTime) => {
+    for (const callback of frameCallbacks)
+        if (!callback(frameTime))
+            frameCallbacks.delete(callback);
+    animationFrameId = frameCallbacks.size ? requestAnimationFrame(runFrame) : 0;
+};
+/** Adds a callback to the shared loop. Returns a function that removes it again. */
+const animate = (onFrame) => {
+    frameCallbacks.add(onFrame);
+    animationFrameId ||= requestAnimationFrame(runFrame);
+    return () => { frameCallbacks.delete(onFrame); };
+};
+return { easings, animate };
+})();
+
+// geometry.ts
+const { line, arc, cubic, pointOnCircle, ellipse, roundedPolyline, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, defaultShapes, shapeForPair } = (() => {
+const DEGREE = Math.PI / 180;
+const ICON_CENTER = 12;
+/** Largest arc one cubic segment may cover: up to 90° the cubic is visually exact. */
+const MAX_ARC_PER_SEGMENT = 90;
+const EPSILON = 1e-9;
+// ---- strokes ----
+const line = (fromX, fromY, toX, toY) => ({ kind: 'line', from: [fromX, fromY], to: [toX, toY] });
+/** Angles in degrees. Because y points down, `endAngle > startAngle` draws clockwise on screen. */
+const arc = (centerX, centerY, radius, startAngle, endAngle) => ({ kind: 'arc', center: [centerX, centerY], radius, startAngle, endAngle });
+const cubic = (startX, startY, control1X, control1Y, control2X, control2Y, endX, endY) => ({ kind: 'cubic', segment: [[startX, startY], [control1X, control1Y], [control2X, control2Y], [endX, endY]] });
+const pointOnCircle = (centerX, centerY, radius, angle) => [centerX + radius * Math.cos(angle * DEGREE), centerY + radius * Math.sin(angle * DEGREE)];
+/** Control handle length of a quarter ellipse as a fraction of its radius (4/3 · (√2 − 1)). */
+const QUARTER_HANDLE = (4 / 3) * (Math.SQRT2 - 1);
+/** A full ellipse as four cubic quarters, drawn counter-clockwise on screen, starting at the top. */
+const ellipse = (centerX, centerY, radiusX, radiusY) => {
+    const handleX = QUARTER_HANDLE * radiusX, handleY = QUARTER_HANDLE * radiusY;
+    const top = centerY - radiusY, bottom = centerY + radiusY, left = centerX - radiusX, right = centerX + radiusX;
+    return [
+        cubic(centerX, top, centerX - handleX, top, left, centerY - handleY, left, centerY),
+        cubic(left, centerY, left, centerY + handleY, centerX - handleX, bottom, centerX, bottom),
+        cubic(centerX, bottom, centerX + handleX, bottom, right, centerY + handleY, right, centerY),
+        cubic(right, centerY, right, centerY - handleY, centerX + handleX, top, centerX, top),
+    ];
+};
+/**
+ * A polyline whose corners are rounded: straight lines joined by tangent circle arcs.
+ * `radii[index]` rounds the corner at `points[index]` (a single number rounds every corner; 0 = sharp corner).
+ * Straight-through points and reversals (going back along the same line) always stay sharp.
+ */
+const roundedPolyline = (points, radii) => {
+    const strokes = [];
+    const addLine = (from, to) => {
+        if (Math.hypot(to[0] - from[0], to[1] - from[1]) > EPSILON)
+            strokes.push(line(...from, ...to));
+    };
+    let current = points[0];
+    for (let index = 1; index < points.length; index++) {
+        const corner = points[index];
+        const next = points[index + 1];
+        const radius = Array.isArray(radii) ? (radii[index] ?? 0) : radii;
+        if (!next || radius <= 0) {
+            addLine(current, corner);
+            current = corner;
+            continue;
+        }
+        const incoming = unitVector(current, corner), outgoing = unitVector(corner, next);
+        const cross = incoming[0] * outgoing[1] - incoming[1] * outgoing[0];
+        const turn = Math.atan2(cross, incoming[0] * outgoing[0] + incoming[1] * outgoing[1]); // radians, > 0 = clockwise
+        if (Math.abs(turn) < 1e-6 || Math.abs(turn) > Math.PI - 1e-6) {
+            addLine(current, corner);
+            current = corner;
+            continue;
+        }
+        const tangentDistance = radius * Math.tan(Math.abs(turn) / 2);
+        const arcStart = [corner[0] - incoming[0] * tangentDistance, corner[1] - incoming[1] * tangentDistance];
+        // the centre lies on the inside of the turn
+        const inward = turn > 0 ? [-incoming[1], incoming[0]] : [incoming[1], -incoming[0]];
+        const center = [arcStart[0] + inward[0] * radius, arcStart[1] + inward[1] * radius];
+        const startAngle = Math.atan2(arcStart[1] - center[1], arcStart[0] - center[0]) / DEGREE;
+        addLine(current, arcStart);
+        strokes.push(arc(center[0], center[1], radius, startAngle, startAngle + turn / DEGREE));
+        current = [corner[0] + outgoing[0] * tangentDistance, corner[1] + outgoing[1] * tangentDistance];
+    }
+    return strokes;
+};
+const unitVector = (from, to) => {
+    const length = Math.hypot(to[0] - from[0], to[1] - from[1]);
+    return [(to[0] - from[0]) / length, (to[1] - from[1]) / length];
+};
+const arcSweep = (stroke) => Math.abs(stroke.endAngle - stroke.startAngle);
+// ---- path numbers ⇄ segments ----
+const segmentCountOf = (path) => (path.length - 2) / 6;
+const pointAt = (path, index) => [path[index], path[index + 1]];
+const toSegments = (path) => Array.from({ length: segmentCountOf(path) }, (_, segmentIndex) => {
+    const offset = segmentIndex * 6;
+    return [pointAt(path, offset), pointAt(path, offset + 2), pointAt(path, offset + 4), pointAt(path, offset + 6)];
+});
+const fromSegments = (segments) => [...segments[0][0], ...segments.flatMap(([, control1, control2, end]) => [...control1, ...control2, ...end])];
+const rotateSegmentOrder = (segments, startSegment) => [...segments.slice(startSegment), ...segments.slice(0, startSegment)];
+const reverseSegments = (segments) => segments.slice().reverse().map(([start, control1, control2, end]) => [end, control2, control1, start]);
+/** Same picture, different segment order: start a closed loop at another segment and/or draw it backwards. */
+const reorderSegments = (path, { startSegment = 0, reversed = false } = {}) => {
+    const rotated = rotateSegmentOrder(toSegments(path), startSegment);
+    return fromSegments(reversed ? reverseSegments(rotated) : rotated);
+};
+const interpolate = (from, to, progress) => from.map((value, index) => value + (to[index] - value) * progress);
+const formatNumber = (value) => String(+value.toFixed(3));
+/** SVG `d` attribute: `M x y` followed by one `C` per segment. */
+const toPathData = (path) => `M${formatNumber(path[0])} ${formatNumber(path[1])}` + toSegments(path)
+    .map(([, control1, control2, end]) => `C${[...control1, ...control2, ...end].map(formatNumber).join(' ')}`)
+    .join('');
+/** Shrinks (factor < 1) or grows the whole shape around the icon center (12, 12). */
+const scaleAroundCenter = (path, factor) => path.map((value) => ICON_CENTER + (value - ICON_CENTER) * factor);
+/** Rotates the whole shape around the icon center (12, 12). */
+const rotateAroundCenter = (path, angle) => {
+    const cos = Math.cos(angle * DEGREE), sin = Math.sin(angle * DEGREE);
+    return path.map((value, index) => {
+        if (index % 2 === 0) {
+            const y = path[index + 1];
+            return ICON_CENTER + (value - ICON_CENTER) * cos - (y - ICON_CENTER) * sin;
+        }
+        const x = path[index - 1];
+        return ICON_CENTER + (x - ICON_CENTER) * sin + (value - ICON_CENTER) * cos;
+    });
+};
+// ---- pieces of strokes ----
+const interpolatePoint = (from, to, progress) => [from[0] + (to[0] - from[0]) * progress, from[1] + (to[1] - from[1]) * progress];
+/** Splits a cubic into two cubics at `progress` (de Casteljau). */
+const splitCubic = ([start, control1, control2, end], progress) => {
+    const startToControl1 = interpolatePoint(start, control1, progress);
+    const control1ToControl2 = interpolatePoint(control1, control2, progress);
+    const control2ToEnd = interpolatePoint(control2, end, progress);
+    const leftInner = interpolatePoint(startToControl1, control1ToControl2, progress);
+    const rightInner = interpolatePoint(control1ToControl2, control2ToEnd, progress);
+    const splitPoint = interpolatePoint(leftInner, rightInner, progress);
+    return [[start, startToControl1, leftInner, splitPoint], [splitPoint, rightInner, control2ToEnd, end]];
+};
+/**
+ * The part of a stroke between two progress values (0…1) as one cubic segment.
+ * A piece of a line/arc/cubic is exactly a line/arc/cubic, so segment ends can slide along a stroke
+ * without changing how it looks.
+ */
+const strokePiece = (stroke, startProgress, endProgress) => {
+    switch (stroke.kind) {
+        case 'line': {
+            const start = interpolatePoint(stroke.from, stroke.to, startProgress);
+            const end = interpolatePoint(stroke.from, stroke.to, endProgress);
+            return [start, interpolatePoint(start, end, 1 / 3), interpolatePoint(start, end, 2 / 3), end];
+        }
+        case 'arc': {
+            const { center: [centerX, centerY], radius, startAngle, endAngle } = stroke;
+            const startRadians = (startAngle + (endAngle - startAngle) * startProgress) * DEGREE;
+            const endRadians = (startAngle + (endAngle - startAngle) * endProgress) * DEGREE;
+            // standard arc approximation: control handle length = 4/3 · tan(θ/4) · r
+            const handleLength = (4 / 3) * Math.tan((endRadians - startRadians) / 4) * radius;
+            const start = [centerX + radius * Math.cos(startRadians), centerY + radius * Math.sin(startRadians)];
+            const end = [centerX + radius * Math.cos(endRadians), centerY + radius * Math.sin(endRadians)];
+            return [
+                start,
+                [start[0] - handleLength * Math.sin(startRadians), start[1] + handleLength * Math.cos(startRadians)],
+                [end[0] + handleLength * Math.sin(endRadians), end[1] - handleLength * Math.cos(endRadians)],
+                end,
+            ];
+        }
+        case 'cubic': {
+            if (startProgress >= 1)
+                return [stroke.segment[3], stroke.segment[3], stroke.segment[3], stroke.segment[3]];
+            const [, rest] = splitCubic(stroke.segment, startProgress);
+            return splitCubic(rest, (endProgress - startProgress) / (1 - startProgress))[0];
+        }
+    }
+};
+/** Lays out cubic segments along the strokes; see `PairLayout.breakpoints`. */
+const layoutStrokes = (strokes, breakpoints) => fromSegments(breakpoints.slice(1).map((segmentEnd, segmentIndex) => {
+    const segmentStart = breakpoints[segmentIndex];
+    const strokeIndex = Math.min(Math.floor(segmentStart + EPSILON), strokes.length - 1);
+    return strokePiece(strokes[strokeIndex], segmentStart - strokeIndex, segmentEnd - strokeIndex);
+}));
+const CUBIC_LENGTH_SAMPLES = 64;
+const distance = (from, to) => Math.hypot(to[0] - from[0], to[1] - from[1]);
+const strokeLength = (stroke) => {
+    switch (stroke.kind) {
+        case 'line': return distance(stroke.from, stroke.to);
+        case 'arc': return arcSweep(stroke) * DEGREE * stroke.radius;
+        case 'cubic': {
+            let length = 0, previousPoint = stroke.segment[0];
+            for (let sample = 1; sample <= CUBIC_LENGTH_SAMPLES; sample++) {
+                const point = strokePiece(stroke, 0, sample / CUBIC_LENGTH_SAMPLES)[3];
+                length += distance(previousPoint, point);
+                previousPoint = point;
+            }
+            return length;
+        }
+    }
+};
+/** Default breakpoints: segments spread over the strokes by length, arcs get at least one segment per 90°. */
+const defaultBreakpoints = (strokes, segmentCount) => {
+    const lengths = strokes.map(strokeLength);
+    const segmentsPerStroke = strokes.map((stroke) => (stroke.kind === 'arc' ? Math.ceil(arcSweep(stroke) / MAX_ARC_PER_SEGMENT - EPSILON) : 1));
+    const usedSegments = () => segmentsPerStroke.reduce((sum, count) => sum + count, 0);
+    if (usedSegments() > segmentCount)
+        throw new Error(`needs ${usedSegments()} segments, the set has ${segmentCount}`);
+    while (usedSegments() < segmentCount) {
+        // one more segment for the stroke whose segments are currently the longest
+        let longest = 0;
+        for (let strokeIndex = 1; strokeIndex < strokes.length; strokeIndex++) {
+            const segmentLength = lengths[strokeIndex] / segmentsPerStroke[strokeIndex];
+            if (segmentLength > lengths[longest] / segmentsPerStroke[longest] + EPSILON)
+                longest = strokeIndex;
+        }
+        segmentsPerStroke[longest]++;
+    }
+    const breakpoints = [0];
+    segmentsPerStroke.forEach((count, strokeIndex) => {
+        for (let part = 1; part <= count; part++)
+            breakpoints.push(+(strokeIndex + part / count).toFixed(6));
+    });
+    return breakpoints;
+};
+// ---- icon sets ----
+/** Every state of the set laid out with its default breakpoints. */
+const defaultShapes = (iconSet) => Object.fromEntries(Object.entries(iconSet.strokes)
+    .map(([state, strokes]) => [state, layoutStrokes(strokes, defaultBreakpoints(strokes, iconSet.segmentCount))]));
+/** The shape of `state` laid out for morphing to or from `otherState`. */
+const shapeForPair = (iconSet, shapes, state, otherState) => {
+    const pairLayout = iconSet.pairLayouts[state]?.[otherState];
+    if (!pairLayout)
+        return shapes[state];
+    const strokes = pairLayout.tracing ? iconSet.alternativeStrokes[pairLayout.tracing] : iconSet.strokes[state];
+    const laidOut = pairLayout.breakpoints ? layoutStrokes(strokes, pairLayout.breakpoints) : shapes[state];
+    const reordered = reorderSegments(laidOut, pairLayout);
+    return pairLayout.rotation ? rotateAroundCenter(reordered, pairLayout.rotation) : reordered;
+};
+return { line, arc, cubic, pointOnCircle, ellipse, roundedPolyline, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, defaultShapes, shapeForPair };
+})();
+
+// sets/condensed.ts
+const { condensedDigits } = (() => {
+// Digit set "condensed": tall, narrow, thin "display" digits with rounded corners, drafted from the reference images in
+// icons/condensed/ (the set format is described in ../types.ts).
+//
+// The shapes are written on the images' own pixel grid and converted: x/y are the stroke's middle line in image
+// pixels, measured from the digit's ink box. Every digit is 94 px tall with a 6 px stroke, most are 50 px wide:
+// middle lines at x 3 / 47 and y 3 (top) / 47 (middle) / 91 (bottom). 5.5 image px = 1 grid unit, so the digits
+// span x 8…16, y 4…20.
+//  - straight strokes with rounded corners (roundedPolyline), round ends
+//  - 0 = stadium; 8 = two stacked rounded rectangles sharing the middle bar; 9 = 6 turned 180° around 12,12;
+//    the 5 ends with the same small upturn as the 9
+//  - T-junctions (4's right stem) are drawn out and back over themselves
+const PIXELS_PER_UNIT = 5.5;
+/** Image pixels (middle line, measured from the ink box of a digit `inkWidth` px wide) → grid units. */
+const fromImage = (inkWidth) => ([x, y]) => [12 + (x - inkWidth / 2) / PIXELS_PER_UNIT, 4 + (y - 3) / PIXELS_PER_UNIT];
+/** A rounded polyline given in image pixels; radii in image pixels too. */
+const drawn = (inkWidth, points, radii) => roundedPolyline(points.map(fromImage(inkWidth)), Array.isArray(radii) ? radii.map((radius) => radius / PIXELS_PER_UNIT) : radii / PIXELS_PER_UNIT);
+const turnedAround = ([x, y]) => [24 - x, 24 - y];
+// corner radii (image px), chosen by pixel comparison with the images: one radius for (almost) every corner
+const CORNER_RADIUS = 12;
+const OUTER_RADIUS = CORNER_RADIUS; // outer corners of the boxes (top and bottom)
+const MIDDLE_RADIUS = CORNER_RADIUS; // corners where a box meets the middle bar
+const THREE_BOWL_RADIUS = 16; // the 3's bowls are rounder
+const THREE_MIDDLE_END_X = 15;
+/** End of the small upturn at the bottom left of 5 and 9 (and of the hook at the top right of 6). */
+const HOOK_END_Y = 79;
+// the 6: hook at the top right, over the top, down the left side, round the bottom, up to the middle bar, back left
+const SIX_POINTS = [[47, 94 - HOOK_END_Y], [47, 3], [3, 3], [3, 91], [47, 91], [47, 47], [3, 47]];
+const SIX_RADII = [0, OUTER_RADIUS, OUTER_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0];
+const condensedDigits = {
+    segmentCount: 20,
+    strokeWidth: 6 / PIXELS_PER_UNIT,
+    lineCap: 'round',
+    lineJoin: 'round',
+    strokes: {
+        // stadium, from the top middle counter-clockwise
+        0: drawn(50, [[25, 3], [3, 3], [3, 91], [47, 91], [47, 3], [25, 3]], 22),
+        // flag → stem
+        1: drawn(17, [[3, 3], [14, 3], [14, 91]], 0),
+        // top bar → right side → middle bar → left side → bottom bar
+        2: drawn(50, [[3, 3], [47, 3], [47, 47], [3, 47], [3, 91], [47, 91]], [0, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, 0]),
+        // top bar → upper bowl → middle bar out to the left and back → lower bowl → bottom bar
+        3: drawn(50, [[3, 3], [47, 3], [47, 47], [THREE_MIDDLE_END_X, 47], [47, 47], [47, 91], [3, 91]], [0, THREE_BOWL_RADIUS, THREE_BOWL_RADIUS, 0, THREE_BOWL_RADIUS, THREE_BOWL_RADIUS, 0]),
+        // left stem down → crossbar → right stem up to the top and back down to the bottom
+        4: drawn(50, [[3, 3], [3, 47], [47, 47], [47, 3], [47, 91]], [0, CORNER_RADIUS, 0, 0, 0]),
+        // top bar right → left, left side down, middle bar → right side → bottom bar → small upturn
+        5: drawn(50, [[47, 3], [3, 3], [3, 47], [47, 47], [47, 91], [3, 91], [3, HOOK_END_Y]], [0, 0, 0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, 0]),
+        6: drawn(50, SIX_POINTS, SIX_RADII),
+        // top bar → slanted stroke down
+        7: drawn(49, [[3, 3], [46, 3], [24.5, 91]], 0),
+        // from the waist: top box (left side up, clockwise), along the middle bar, bottom box (counter-clockwise)
+        8: drawn(50, [[3 + MIDDLE_RADIUS, 47], [3, 47], [3, 3], [47, 3], [47, 47], [3, 47], [3, 91], [47, 91], [47, 47], [3 + MIDDLE_RADIUS, 47]], [0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0]),
+        // the 6 turned 180°, drawn the other way round (box first, then the small upturn)
+        9: roundedPolyline(SIX_POINTS.map(fromImage(50)).map(turnedAround).reverse(), [...SIX_RADII].reverse().map((radius) => radius / PIXELS_PER_UNIT)),
+        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
+    },
+    alternativeStrokes: {
+        // the 8 traced like the 0 (from the top, counter-clockwise): left side of the top box down to the middle of
+        // the middle bar, once around the bottom box back to the middle, right side of the top box back up
+        '8-like-0': drawn(50, [[25, 3], [3, 3], [3, 47], [25, 47], [3, 47], [3, 91], [47, 91], [47, 47], [25, 47], [47, 47], [47, 3], [25, 3]], [0, OUTER_RADIUS, MIDDLE_RADIUS, 0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0, MIDDLE_RADIUS, OUTER_RADIUS, 0]),
+        // the 8 traced like the 3 (as in the square set), starting and ending at the left part of the middle bar: around the top
+        // box, along the middle bar out to the left and back, around the bottom box
+        '8-like-3': drawn(50, [[3 + MIDDLE_RADIUS, 47], [3, 47], [3, 3], [47, 3], [47, 47], [3 + MIDDLE_RADIUS, 47], [47, 47], [47, 91], [3, 91], [3, 47], [3 + MIDDLE_RADIUS, 47]], [0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0]),
+    },
+    // optimizer fits (tools/check.ts) for the pairs the user rated bad / midd
+    pairLayouts: {
+        0: {
+            1: { startSegment: 5, reversed: true },
+            2: { startSegment: 5, reversed: true },
+            3: { startSegment: 5, reversed: true },
+            4: { breakpoints: [0, 0.6458, 0.6667, 1, 1.2292, 1.4375, 1.4583, 1.4583, 1.4583, 2, 3, 4, 4.5208, 4.5208, 4.5208, 4.5208, 4.75, 5, 5.3125, 5.3125, 6] },
+            5: { startSegment: 4, reversed: true },
+            7: { startSegment: 5, reversed: true },
+            9: { startSegment: 6, reversed: true },
+        },
+        1: {
+            0: { breakpoints: [0, 0, 0, 0, 0, 0.5, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.8542, 1.8542, 1.8542, 1.8542, 1.8542, 1.8542, 1.8542, 2] },
+        },
+        2: {
+            6: { breakpoints: [0, 1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 7.5, 8, 8.2917, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 9] },
+            9: { breakpoints: [0, 0.2292, 0.2292, 0.2292, 0.2292, 0.2292, 0.2292, 0.2292, 0.3333, 0.6875, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 8, 9] },
+            0: { breakpoints: [0, 0, 0, 0.0625, 0.3333, 0.6875, 1, 2, 2.5, 3, 3.5625, 3.6042, 4, 5, 6, 7, 7, 7, 7, 8, 9] },
+        },
+        3: {
+            4: { breakpoints: [0, 0, 1, 2, 2, 2, 3, 3.4167, 3.4167, 4, 5, 6, 6.5833, 6.5833, 7, 8, 8.4375, 8.4583, 8.4583, 9, 10] },
+            9: { breakpoints: [0, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.375, 0.8333, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9.6667, 10] },
+            0: { breakpoints: [0, 0, 0, 0.0833, 0.375, 0.8333, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9.1667, 9.625, 9.9167, 10, 10, 10] },
+        },
+        4: {
+            6: { breakpoints: [0, 0, 0, 1, 1.8333, 2, 2.7083, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 3, 4, 5] },
+            8: { breakpoints: [0, 0, 0.3333, 0.6875, 1, 2, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.6667, 3, 3.5625, 3.75, 4, 5] },
+            9: { breakpoints: [0, 1, 1, 1, 1, 2, 3, 4, 4.125, 4.1875, 4.1875, 4.1875, 4.1875, 4.1875, 4.2292, 4.3958, 4.4375, 4.875, 5, 5, 5] },
+            3: { breakpoints: [0, 1, 2, 3, 4, 4.1875, 4.3125, 4.4583, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5417, 4.6875, 4.8125, 4.9583, 5, 5, 5] },
+            0: { breakpoints: [0, 0.0625, 0.3333, 0.6875, 1, 1.5208, 1.7083, 1.7917, 1.8542, 2, 2.3125, 2.6667, 2.9375, 3, 3, 3, 3.25, 3.5, 3.75, 4, 5] },
+        },
+        5: {
+            8: { breakpoints: [0, 0, 0, 0, 0.25, 0.4375, 1, 1.25, 1.4375, 2, 2.3333, 3, 4, 5, 6, 7, 8, 8, 8, 8, 8] },
+            0: { breakpoints: [0, 0.8125, 0.8125, 0.8125, 0.8125, 1, 2, 3, 3.3958, 3.4375, 4, 4.5, 5, 6, 6.5, 7, 8, 8, 8, 8, 8] },
+        },
+        6: {
+            8: { breakpoints: [0, 1, 1, 1, 1, 1, 2, 3, 3.5417, 3.5417, 3.6458, 4, 5, 6, 7, 8, 9, 9.6667, 10, 10, 10] },
+            4: { breakpoints: [0, 1, 2, 3, 4, 5, 6, 7, 8, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 9, 10] },
+            2: { breakpoints: [0, 1, 1, 1, 1, 1, 2, 3, 3.5833, 3.6458, 4, 4.5, 5, 5.5, 6, 6.125, 6.125, 7, 8, 9, 10] },
+        },
+        7: {
+            8: { breakpoints: [0, 0, 0, 0.2292, 0.6042, 0.7292, 0.8333, 1, 1.0833, 1.125, 1.3542, 1.5208, 1.5417, 1.7292, 1.8125, 1.8125, 1.8125, 1.8125, 1.8125, 1.8125, 2] },
+            0: { breakpoints: [0, 0, 0, 0.0417, 0.25, 0.4375, 1, 1.125, 1.2292, 1.3542, 1.4792, 1.5833, 1.7083, 1.8542, 1.8958, 1.8958, 1.8958, 1.8958, 1.8958, 1.8958, 2] },
+        },
+        8: {
+            // as in round and square: the 0's left and right sides move in to the middle of the 8's middle bar
+            0: { tracing: '8-like-0', breakpoints: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9.5, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] },
+            4: { startSegment: 5, reversed: true },
+            5: { startSegment: 10, reversed: true },
+            6: { startSegment: 3 },
+            7: { breakpoints: [0, 1, 2, 3, 3.7083, 4, 4.2708, 4.4792, 4.7083, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16] },
+            9: { startSegment: 17 },
+            // as in the square set: both ends of the 3 move to the left part of its middle bar, where the 8's boxes close
+            3: { tracing: '8-like-3', breakpoints: [0, 1, 2, 3, 4, 5, 6, 6.5, 7, 7.6458, 8, 8.3542, 9, 9.5, 10, 11, 12, 13, 14, 15, 16] },
+        },
+        9: {
+            8: { breakpoints: [0, 0, 0.3333, 1, 2, 2.5, 3, 4, 4.5, 5, 6, 6.1458, 6.3542, 6.4583, 6.4583, 7, 8, 9, 9, 9, 10] },
+            4: { breakpoints: [0, 1, 2, 2, 2, 3, 4, 5, 6, 6.0625, 6.0625, 6.0625, 6.0625, 6.0625, 6.125, 6.3542, 6.4167, 7, 8, 9, 10] },
+            3: { breakpoints: [0, 1, 2, 3, 3.7708, 3.7708, 3.7708, 3.7708, 4, 4.5, 5, 6, 6.2917, 6.5, 6.5, 6.5, 6.7083, 7, 8, 9, 10] },
+            2: { breakpoints: [0, 1, 2, 3, 3.7917, 3.7917, 3.7917, 3.7917, 4, 4.4792, 5, 5.5, 6, 6.3542, 6.4167, 7, 8, 9, 9, 9, 10] },
+            0: { breakpoints: [0, 1, 2, 2.5, 3, 4, 4.5, 5, 6, 6.1458, 6.3333, 6.5, 6.6667, 6.8542, 7, 8, 8.5, 9, 10, 10, 10] },
+            // turned back by 180° this is exactly the 6 (same segment split, same direction) → a pure spin
+            6: {
+                breakpoints: [0, 0.5, 1, 2, 2.5, 3, 4, 4.5, 5, 5.5, 6, 6.25, 6.5, 6.75, 7, 7.5, 8, 8.5, 9, 9.5, 10],
+                reversed: true,
+            },
+        },
+    },
+    spins: { 6: { 9: 180 }, 9: { 6: -180 } },
+    textLayout: { cellWidth: 8, spacing: 3.5, baselineY: 20, colonDotsY: [8, 16] },
+};
+return { condensedDigits };
+})();
+
+// sets/handwritten.ts
+const { handwrittenDigits } = (() => {
+// Digit set "handwritten": hand-drawn marker digits, traced from the reference images in icons/handwritten/
+// (the set format is described in ../types.ts).
+//
+// Free-form strokes, so the geometry is traced rather than constructed (scratch tools, see CLAUDE.md):
+// thin decorative side lines removed (only ink of a thick stroke kept), the stroke thinned to its centre line,
+// followed through hand-placed waypoints in writing order, smoothed and fitted with cubic Bézier curves
+// (Schneider's algorithm). 7.375 image px = 1 grid unit, each digit centred on 12,12; stroke 1.04 (typical width along
+// the centre line — the marker stroke varies a little, so the pixel match is ~8–17 %).
+//  - every digit is one stroke of 3–7 free cubic curves; round ends and corners
+//  - the 4 is drawn out and back over its crossbar end and right stem (one continuous stroke)
+const handwrittenDigits = {
+    segmentCount: 16,
+    strokeWidth: 1.04,
+    lineCap: 'round',
+    lineJoin: 'round',
+    strokes: {
+        0: [
+            cubic(12.61, 4.07, 10.61, 3.51, 9.37, 5.81, 8.74, 7.36),
+            cubic(8.74, 7.36, 7.57, 10.27, 6.96, 17.17, 9.79, 19.34),
+            cubic(9.79, 19.34, 12.78, 21.64, 15.47, 18.25, 16, 15.5),
+            cubic(16, 15.5, 16.6, 12.38, 16.29, 8.49, 14.37, 5.83),
+            cubic(14.37, 5.83, 13.87, 5.13, 13.21, 4.66, 12.61, 4.07),
+        ],
+        1: [
+            cubic(10.24, 7.53, 11.22, 6.54, 12.21, 5.24, 13.49, 4.68),
+            cubic(13.49, 4.68, 13.7, 4.79, 13.86, 4.5, 13.9, 4.89),
+            cubic(13.9, 4.89, 14.02, 6, 13.9, 7.27, 13.9, 8.42),
+            cubic(13.9, 8.42, 13.9, 12.28, 13.9, 16.14, 13.9, 20),
+        ],
+        2: [
+            cubic(9.02, 7.66, 10.04, 4, 14.93, 1.86, 15.22, 7.15),
+            cubic(15.22, 7.15, 15.49, 11.89, 7.96, 15.48, 8.47, 19.86),
+            cubic(8.47, 19.86, 9.61, 20.58, 13.97, 20.14, 15.53, 20.14),
+        ],
+        3: [
+            cubic(9.76, 5.15, 13.23, 2.8, 16.42, 4.68, 14.53, 7.59),
+            cubic(14.53, 7.59, 13.4, 9.34, 12.35, 9.39, 10.58, 9.9),
+            cubic(10.58, 9.9, 11.34, 9.75, 12.22, 9.41, 13.02, 9.59),
+            cubic(13.02, 9.59, 18.13, 10.7, 16.81, 19.23, 11.83, 19.98),
+            cubic(11.83, 19.98, 9.89, 20.28, 8.7, 19.11, 7.73, 17.63),
+        ],
+        4: [
+            cubic(8.27, 4.14, 8.27, 6.1, 7.62, 12.38, 8.38, 13.74),
+            cubic(8.41, 13.76, 10.61, 14.38, 13.29, 14.03, 15.59, 14.03),
+            cubic(15.59, 14.03, 14.82, 14.03, 14.06, 14.03, 13.29, 14.03),
+            cubic(13.29, 14.03, 13.29, 10.73, 13.29, 7.44, 13.29, 4.14),
+            cubic(13.29, 4.14, 13.29, 9.33, 13.29, 14.53, 13.29, 19.73),
+        ],
+        5: [
+            cubic(14.24, 3.86, 12.8, 3.86, 11.11, 3.74, 9.76, 4.14),
+            cubic(9.76, 4.14, 9.7, 4.15, 9.31, 4.09, 9.26, 4.23),
+            cubic(9.26, 4.23, 9.09, 4.74, 9.28, 8.83, 9.36, 9.58),
+            cubic(9.36, 9.58, 9.41, 10.07, 9.44, 9.66, 9.63, 9.83),
+            cubic(9.63, 9.83, 10.32, 9.54, 10.97, 9.13, 11.74, 9.04),
+            cubic(11.74, 9.04, 16.84, 8.46, 16.99, 16.29, 14.13, 18.87),
+            cubic(14.13, 18.87, 11.84, 20.92, 8.19, 19.68, 8, 16.47),
+        ],
+        6: [
+            cubic(13.08, 3.93, 9.07, 6.47, 7.2, 12.92, 8.79, 17.24),
+            cubic(8.79, 17.24, 9.18, 18.28, 9.4, 19.11, 10.46, 19.67),
+            cubic(10.46, 19.67, 13.85, 21.46, 16.41, 16.37, 15.4, 13.64),
+            cubic(15.4, 13.64, 13.48, 8.42, 9.15, 16.35, 8.94, 16.42),
+            cubic(8.94, 16.42, 7.71, 16.83, 8.27, 12.36, 8.47, 11.8),
+        ],
+        7: [
+            cubic(8.81, 3.86, 10.36, 3.86, 14.03, 3.47, 15.19, 4.08),
+            cubic(15.19, 4.14, 14.75, 5.71, 13.41, 7.25, 12.7, 8.8),
+            cubic(12.7, 8.8, 11.16, 12.19, 10.31, 16.13, 10.31, 19.86),
+        ],
+        8: [
+            cubic(14.51, 5.56, 15.17, 3.17, 9.21, 3.46, 8.86, 6.51),
+            cubic(8.86, 6.51, 8.64, 8.41, 13.99, 11.13, 14.93, 13.6),
+            cubic(14.93, 13.6, 15.9, 16.15, 14.74, 20.7, 11.25, 19.94),
+            cubic(11.25, 19.94, 8.97, 19.44, 8.63, 17.22, 9.02, 15.26),
+            cubic(9.02, 15.26, 9.77, 11.45, 12.38, 8.68, 14.48, 5.59),
+        ],
+        9: [
+            cubic(14.98, 6.98, 13.12, 0.31, 6.71, 5.82, 8.47, 10.23),
+            cubic(8.47, 10.23, 9.92, 13.9, 13.15, 10.88, 14.01, 8.61),
+            cubic(14.01, 8.61, 14.16, 8.23, 14.66, 6.7, 15.3, 7.44),
+            cubic(15.3, 7.44, 16.93, 9.31, 14.47, 18.24, 11.59, 19.86),
+        ],
+        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
+    },
+    alternativeStrokes: {},
+    // optimizer fits (tools/check.ts) for the pairs the user rated bad / midd / not sure
+    pairLayouts: {
+        0: {
+            1: { startSegment: 5, reversed: true },
+            2: { startSegment: 5, reversed: true },
+            3: { startSegment: 4, reversed: true },
+            4: { breakpoints: [0, 0.7708, 1, 1.2083, 1.3958, 1.5208, 1.5208, 1.5208, 2, 3, 3.1458, 3.1458, 3.1458, 3.5833, 3.8542, 4, 5] },
+            5: { startSegment: 3, reversed: true },
+            7: { startSegment: 4, reversed: true },
+            9: { startSegment: 5, reversed: true },
+        },
+        1: {
+            0: { breakpoints: [0, 0, 0, 0, 0.3542, 1, 2, 3, 3.1667, 3.3958, 3.6042, 3.8125, 3.9167, 3.9167, 3.9167, 3.9167, 4] },
+        },
+        2: {
+            6: { breakpoints: [0, 0.4583, 1, 1.5833, 1.5833, 1.5833, 1.5833, 1.5833, 1.5833, 1.5833, 1.5833, 1.5833, 1.5833, 1.6458, 1.7083, 2, 3] },
+            0: { breakpoints: [0, 0, 0, 0, 0.25, 0.5417, 0.8958, 1, 1.2083, 1.3125, 1.4167, 1.5417, 1.75, 1.9792, 1.9792, 2, 3] },
+        },
+        3: {
+            8: { breakpoints: [0, 0.5833, 0.5833, 0.5833, 0.5833, 1, 2, 3, 3.1458, 3.3958, 3.5208, 3.6667, 3.8333, 4, 4.2917, 5, 5] },
+            0: { breakpoints: [0, 0, 0, 0, 0.2917, 1, 2, 3, 3.4167, 3.5208, 3.7083, 3.8542, 4, 4.4167, 5, 5, 5] },
+        },
+        4: {
+            8: { breakpoints: [0, 0.5833, 0.7708, 1, 1.4583, 2, 2.1458, 3, 3.2917, 3.3125, 3.875, 3.8958, 3.8958, 3.8958, 3.8958, 4, 5] },
+            0: { breakpoints: [0, 0.0833, 0.3542, 0.5208, 0.7708, 1, 1.1042, 1.25, 1.5, 1.7292, 1.9583, 2, 3, 3.3958, 3.5625, 4, 5] },
+        },
+        5: {
+            0: { breakpoints: [0, 1, 2, 3, 4, 5, 5.3958, 5.5208, 5.6875, 5.875, 6, 6.2917, 6.5625, 6.8958, 7, 7, 7] },
+        },
+        6: {
+            2: { breakpoints: [0, 0.0625, 0.0625, 1, 2, 3, 3.6458, 3.6458, 3.6458, 3.6458, 3.6458, 3.6458, 3.6458, 3.7292, 3.875, 4, 5] },
+        },
+        7: {
+            8: { breakpoints: [0, 0.7292, 0.7292, 0.7292, 0.7292, 0.7292, 1, 2, 2.1458, 2.1458, 2.1458, 2.1458, 2.4583, 2.75, 2.75, 2.75, 3] },
+            0: { breakpoints: [0, 0, 0, 0.2083, 0.5417, 1, 1.6667, 2, 2.2708, 2.5208, 2.7708, 2.8542, 2.8542, 2.8542, 2.8542, 2.8542, 3] },
+        },
+        8: {
+            7: { breakpoints: [0, 0.3125, 0.3125, 0.3125, 0.3125, 0.3125, 0.3125, 1, 1.5625, 1.5625, 1.6042, 1.625, 2, 3, 3.6042, 4, 5] },
+            4: { breakpoints: [0, 0, 0, 0, 0, 0.25, 1, 1.625, 1.6875, 2, 2.0417, 2.0417, 3, 4, 4.3125, 4.5208, 5], reversed: true },
+            3: { breakpoints: [0, 0.125, 0.125, 0.125, 0.125, 1, 1.5208, 1.5625, 1.7708, 2, 2.1667, 2.3958, 2.6458, 3, 3.0417, 4, 5] },
+        },
+        9: {
+            0: { breakpoints: [0, 0.9792, 0.9792, 1, 2, 2.7917, 2.7917, 3, 3.3125, 3.4375, 3.5833, 3.7083, 3.8333, 4, 4, 4, 4] },
+        },
+    },
+    spins: {},
+    textLayout: { cellWidth: 9, spacing: 4, baselineY: 20.2, colonDotsY: [8, 16] },
+};
+return { handwrittenDigits };
+})();
+
+// sets/round.ts
+const { roundDigits } = (() => {
+// Digit set "round": geometric sans digits, drafted from the reference images in icons/round/
+// (the set format is described in ../types.ts).
+//
+// Measured from the images and tidied up so shared parts are exactly shared:
+//  - round digits span y 4…20, bars sit at y 4.2 / 19.8
+//  - round line ends: every open end stops half a stroke (END_INSET) before the edge measured in the images
+//    (the images have flat ends), so the round cap ends exactly there — bottoms of 1, 4, 7, 9 line up with the base
+//  - one big circle radius (2, 3, 6, 8, 9) and one small one (top of 3 and 8); 5 has its own, larger bowl
+//  - 3 is drawn on exactly the two circles of 8 (they touch at 12, 11.2)
+//  - 9 is exactly 6 turned 180° around 12,12 → 6 ↔ 9 morphs as a pure spin
+const STROKE_WIDTH = 1.2; // the reference images use 1.6; thinner by the user's choice
+/** A round line end reaches this far beyond its end point. */
+const END_INSET = STROKE_WIDTH / 2;
+/** Angle that shortens an arc's end by END_INSET along the circle. */
+const arcInset = (radius) => (END_INSET / radius) * (180 / Math.PI);
+/** The point on the line through `from` and `to` at height `y`. */
+const pointAtY = ([fromX, fromY], [toX, toY], y) => [fromX + ((toX - fromX) * (y - fromY)) / (toY - fromY), y];
+const BIG_RADIUS = 4.4;
+const SMALL_RADIUS = 3.6;
+const TOP_BAR_Y = 4.2;
+const BASE_Y = 19.8;
+/** Where the 6's tail touches its circle (tangent); 9 uses the same angle turned by 180°. */
+const SIX_TAIL_ANGLE = -147.1085;
+const SIX_TAIL_JOIN = pointOnCircle(12, 15.6, BIG_RADIUS, SIX_TAIL_ANGLE);
+/** Top end of the 6's tail: on the measured tail line (from 14.65, 3.4), pulled in so the round end tops at 3.4. */
+const SIX_TAIL_TOP = pointAtY([14.65, 3.4], SIX_TAIL_JOIN, TOP_BAR_Y);
+/** Bottom end of the 9's tail: the 6's tail top turned 180° around 12,12. */
+const NINE_TAIL_END = [24 - SIX_TAIL_TOP[0], 24 - SIX_TAIL_TOP[1]];
+/** Where the 2's diagonal leaves its bowl (tangent towards the corner at 8.3, 19.8). */
+const TWO_DIAGONAL_ANGLE = 39.5191;
+/** Where the 5's short down-stroke meets its bowl. */
+const FIVE_JOIN_ANGLE = 237.2;
+/** The 7's foot: on the measured diagonal (16, 4.2 → 7.45, 20.6), pulled in to the base line. */
+const SEVEN_FOOT = pointAtY([16, TOP_BAR_Y], [7.45, 20.6], BASE_Y);
+const roundDigits = {
+    segmentCount: 12,
+    strokeWidth: STROKE_WIDTH,
+    lineCap: 'round',
+    lineJoin: 'round',
+    strokes: {
+        0: ellipse(12, 12, 5.05, 8),
+        1: [line(10 + END_INSET, TOP_BAR_Y, 13.1, TOP_BAR_Y), line(13.1, TOP_BAR_Y, 13.1, BASE_Y)],
+        2: [
+            arc(12, 8.4, BIG_RADIUS, 158.7 + arcInset(BIG_RADIUS), TWO_DIAGONAL_ANGLE + 360),
+            line(...pointOnCircle(12, 8.4, BIG_RADIUS, TWO_DIAGONAL_ANGLE), 8.3, BASE_Y),
+            line(8.3, BASE_Y, 17.5 - END_INSET, BASE_Y),
+        ],
+        3: [
+            arc(12, 7.6, SMALL_RADIUS, 180 + arcInset(SMALL_RADIUS), 439.2),
+            // the two arcs meet slightly right of the point where the circles touch
+            line(...pointOnCircle(12, 7.6, SMALL_RADIUS, 79.2), ...pointOnCircle(12, 15.6, BIG_RADIUS, 278.7)),
+            arc(12, 15.6, BIG_RADIUS, 278.7, 536.7 - arcInset(BIG_RADIUS)),
+        ],
+        // one stroke: crossbar right → left, diagonal up to the top, stem down
+        4: [
+            line(17.6 - END_INSET, 14.95, 8, 14.95),
+            line(8, 14.95, 14.75, TOP_BAR_Y),
+            line(14.75, TOP_BAR_Y, 14.75, BASE_Y),
+        ],
+        5: [
+            line(17.1 - END_INSET, TOP_BAR_Y, 10.5, TOP_BAR_Y),
+            line(10.5, TOP_BAR_Y, ...pointOnCircle(11.9, 15, 4.8, FIVE_JOIN_ANGLE)),
+            arc(11.9, 15, 4.8, FIVE_JOIN_ANGLE, 523.3 - arcInset(4.8)),
+        ],
+        6: [
+            line(...SIX_TAIL_TOP, ...SIX_TAIL_JOIN),
+            arc(12, 15.6, BIG_RADIUS, SIX_TAIL_ANGLE, SIX_TAIL_ANGLE - 360),
+        ],
+        7: [line(6.7 + END_INSET, TOP_BAR_Y, 16, TOP_BAR_Y), line(16, TOP_BAR_Y, ...SEVEN_FOOT)],
+        // closed figure-eight: top circle clockwise, bottom circle counter-clockwise, meeting where they touch
+        8: [arc(12, 7.6, SMALL_RADIUS, 90, 450), arc(12, 15.6, BIG_RADIUS, 270, -90)],
+        9: [
+            arc(12, 8.4, BIG_RADIUS, SIX_TAIL_ANGLE + 180 - 360, SIX_TAIL_ANGLE + 180),
+            line(...pointOnCircle(12, 8.4, BIG_RADIUS, SIX_TAIL_ANGLE + 180), ...NINE_TAIL_END),
+        ],
+        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
+    },
+    alternativeStrokes: {
+        // the 8 traced like the 0 (from the top, counter-clockwise): left half of the top circle down to the waist,
+        // once around the bottom circle, right half of the top circle back up
+        '8-like-0': [
+            arc(12, 7.6, SMALL_RADIUS, 270, 90),
+            arc(12, 15.6, BIG_RADIUS, 270, -90),
+            arc(12, 7.6, SMALL_RADIUS, 90, -90),
+        ],
+        // the 8 as two clockwise loops, both starting at the waist (like the 3: top arc, then bottom arc)
+        '8-two-loops': [arc(12, 7.6, SMALL_RADIUS, 90, 450), arc(12, 15.6, BIG_RADIUS, 270, 630)],
+        // the 6 with its circle drawn clockwise (the same way round as the 5's bowl)
+        '6-clockwise': [
+            line(...SIX_TAIL_TOP, ...SIX_TAIL_JOIN),
+            arc(12, 15.6, BIG_RADIUS, SIX_TAIL_ANGLE, SIX_TAIL_ANGLE + 360),
+        ],
+        // mirrored figure-eight from the waist: top circle counter-clockwise, bottom circle clockwise (like the 5)
+        '8-mirrored': [arc(12, 7.6, SMALL_RADIUS, 90, -270), arc(12, 15.6, BIG_RADIUS, 270, 630)],
+        // the usual figure-eight, but starting on the right side of the bottom circle (where the 4's crossbar starts)
+        '8-from-right': [
+            arc(12, 15.6, BIG_RADIUS, 0, -90),
+            arc(12, 7.6, SMALL_RADIUS, 90, 450),
+            arc(12, 15.6, BIG_RADIUS, 270, 0),
+        ],
+    },
+    pairLayouts: {
+        0: {
+            // cut the 0 open at the upper left: the part going up over the top becomes the flag, the rest the stem
+            1: { startSegment: 2, reversed: true },
+            // start at the leftmost point and go up, like the 2's bowl
+            2: { startSegment: 3, reversed: true },
+            3: { startSegment: 3, reversed: true },
+            // start at the lower right and go left: bottom → crossbar, left side → diagonal, right side → stem
+            4: { startSegment: 7, reversed: true },
+            // optimizer: start at the upper left and go clockwise, the same way round as the 5's bowl
+            5: { startSegment: 2, reversed: true },
+            // start at the leftmost point and go up: the top becomes the bar, the right side the diagonal
+            7: { startSegment: 3, reversed: true },
+            // start at the bottom and go clockwise, the same way round as the 9's circle
+            9: { startSegment: 6, reversed: true },
+        },
+        1: {
+            4: { breakpoints: [0, 1, 1.0625, 1.125, 1.1875, 1.2708, 1.2708, 1.6875, 1.6875, 1.6875, 1.6875, 1.6875, 2] },
+            // flag curls into the top loop, stem rounds into the bottom loop (optimizer fit)
+            8: { breakpoints: [0, 0, 0, 1, 1.3125, 1.4583, 1.5208, 1.8333, 1.8333, 1.8333, 1.8333, 1.8333, 2] },
+            // fewer segments for the 9's circle, more for its tail; the circle unrolls into flag + stem top (optimizer fit)
+            9: { breakpoints: [0, 0, 0, 1, 1.1042, 1.4167, 1.4792, 1.5625, 1.625, 1.6875, 1.7708, 1.8125, 2] },
+        },
+        2: {
+            // the 4's crossbar shrinks into the 2's starting tip, the diagonal and stem bend into the bowl (optimizer fit)
+            4: { breakpoints: [0, 0, 0.3542, 0.6875, 0.7708, 1, 1.2083, 1.2292, 2, 2.7292, 2.7292, 2.7292, 3] },
+            // bowl → the 5's bar and down-stroke, diagonal + base → its bowl (optimizer fit)
+            5: { breakpoints: [0, 0.375, 0.375, 0.375, 0.625, 1, 1.0833, 1.0833, 1.1458, 1.4375, 1.7083, 2, 3] },
+            // the bowl closes into the 9's circle (same circle), the base pulls back into the tail (optimizer fit)
+            9: { breakpoints: [0, 0, 0, 0, 0.2083, 0.3958, 0.5833, 0.7708, 1, 1.2083, 1.3542, 2, 3] },
+            // 2 → 6 spins (see spins): in the turning frame it is 2 → 9 — the 2's bowl is exactly the 9's circle
+            6: { breakpoints: [0, 0, 0, 0, 0.2292, 0.4167, 0.6042, 0.7708, 1, 1.2083, 1.4167, 2, 3] },
+        },
+        3: {
+            // the 4's crossbar shrinks into the 3's starting tip, the diagonal becomes the top arc (optimizer fit)
+            4: { breakpoints: [0, 0, 0.3333, 0.6042, 0.7917, 1, 2, 2.1458, 2.3333, 2.5208, 2.5208, 2.6667, 3] },
+            // the small top arc grows into the 9's circle, the lower bowl straightens into the tail (optimizer fit)
+            9: { breakpoints: [0, 0, 0, 0, 0.0208, 0.2708, 0.4792, 0.6458, 1, 2, 2.3542, 2.6667, 3] },
+        },
+        4: {
+            // drawn from the stem's bottom: the 1's stem stays a stem, its flag folds out into diagonal + crossbar
+            1: { breakpoints: [0, 0.4375, 0.4375, 0.4375, 0.4375, 1, 1.6042, 1.6042, 1.7292, 1.8333, 1.8958, 2, 3], reversed: true },
+            2: { breakpoints: [0, 1, 2, 2, 2.1458, 2.3958, 2.5208, 2.6667, 2.8125, 2.9375, 2.9375, 2.9375, 3] },
+            3: { breakpoints: [0, 1, 2, 2.0208, 2.2708, 2.3958, 2.3958, 2.4792, 2.6875, 2.9167, 2.9167, 2.9167, 3] },
+            // crossbar → top bar (moves up), diagonal → down-stroke, stem → bowl (optimizer fit)
+            5: { breakpoints: [0, 1, 1.3958, 1.3958, 1.3958, 1.4792, 1.4792, 2, 2.3958, 2.3958, 2.5833, 2.9583, 3] },
+            // drawn from the stem's bottom: stem top → the 6's tail top, diagonal + crossbar → circle (optimizer fit)
+            6: { breakpoints: [0, 0.3542, 0.3542, 0.3542, 0.3542, 0.4375, 0.875, 1, 1.1042, 1.3958, 1.6042, 2, 3], reversed: true },
+            // drawn from the stem's bottom: stem tips over into the 7's bar, diagonal + crossbar → its diagonal (optimizer fit)
+            7: { breakpoints: [0, 1, 1, 1.1667, 1.3542, 1.5625, 1.7292, 1.9792, 2, 2, 2, 2, 3], reversed: true },
+            // drawn backwards (stem bottom first), so the stem's end meets the crossbar's start on the 8's right side
+            8: { reversed: true },
+        },
+        5: {
+            0: { breakpoints: [0, 1, 1, 2, 2.2708, 2.3125, 2.4792, 2.625, 2.75, 2.8542, 3, 3, 3] },
+            2: { breakpoints: [0, 1, 1, 1, 2, 2.2917, 2.2917, 2.2917, 2.2917, 2.5417, 2.8542, 2.8542, 3] },
+            4: { breakpoints: [0, 1, 2, 2, 2, 2.0833, 2.1458, 2.1667, 2.1875, 2.25, 2.3958, 2.6875, 3] },
+            // bar stays the bar, down-stroke + bowl straighten into the 7's diagonal (optimizer fit)
+            7: { breakpoints: [0, 0.5625, 0.5625, 0.5625, 0.5625, 0.5625, 1, 2, 2.2083, 2.5208, 2.8333, 2.9167, 3] },
+            // start of the 5 (bar end) moves down to the 9's start; segments re-spread on both (optimizer fit)
+            9: { breakpoints: [0, 1, 2, 2, 2.0208, 2.1042, 2.1667, 2.2292, 2.2708, 2.3125, 2.5625, 2.75, 3] },
+        },
+        6: {
+            // the 1's flag shrinks into the top of the tail, its stem tilts into the tail and curls into the circle
+            // (optimizer fit, like 7 → 6)
+            1: {
+                tracing: '6-clockwise',
+                breakpoints: [0, 0.1042, 0.1042, 0.1667, 0.3125, 0.3125, 1, 1.25, 1.25, 1.3542, 1.5, 1.75, 2],
+            },
+            // turned by 180° this is the 9 laid out for the 2 (optimizer fit for 2 ↔ 9, mirrored onto the 6)
+            2: { breakpoints: [0, 0.1042, 0.5417, 0.75, 1, 1.125, 1.25, 1.375, 1.5, 1.6458, 1.6458, 1.75, 2], reversed: true },
+            4: { breakpoints: [0, 0.3958, 0.4792, 0.75, 1, 1.0625, 1.1458, 1.3958, 1.625, 1.625, 1.625, 1.75, 2] },
+            // the 3's lower bowl lies on the 6's circle and closes up; its top arc straightens into the tail (optimizer fit)
+            3: {
+                tracing: '6-clockwise',
+                breakpoints: [0, 0.2292, 0.2292, 0.2292, 0.3125, 1, 1.2083, 1.2917, 1.4167, 1.5417, 1.6667, 1.7708, 2],
+            },
+            // the 5's bowl end closes up to where the bowl starts; bar + down-stroke become the tail (optimizer fit)
+            5: {
+                tracing: '6-clockwise',
+                breakpoints: [0, 0.0833, 0.25, 0.4375, 0.5625, 1, 1.1875, 1.2708, 1.3958, 1.5, 1.6458, 1.75, 2],
+            },
+            // the 7's bar shrinks into the top of the tail, its diagonal becomes the tail and curls into the circle
+            // (optimizer fit)
+            7: {
+                tracing: '6-clockwise',
+                breakpoints: [0, 0.1667, 0.1667, 0.1667, 0.1667, 0.1667, 0.3125, 1, 1.25, 1.5, 1.75, 1.75, 2],
+            },
+        },
+        7: {
+            5: { breakpoints: [0, 0.6875, 0.6875, 0.6875, 0.6875, 0.6875, 1, 1.4375, 1.4375, 1.6042, 1.9167, 1.9167, 2] },
+            4: { breakpoints: [0, 1, 1.0833, 1.0833, 1.0833, 1.1042, 1.25, 1.3542, 1.5, 1.625, 1.6667, 1.6667, 2] },
+        },
+        8: {
+            1: { breakpoints: [0, 0.25, 0.4792, 0.5625, 0.8125, 1, 1.0625, 1.3125, 1.5625, 1.6042, 1.6042, 1.75, 2] },
+            // 0's leftmost and rightmost points (after 3 and 9 segments) both land on the waist
+            0: {
+                tracing: '8-like-0',
+                breakpoints: [0, 1 / 3, 2 / 3, 1, 1 + 1 / 6, 1 + 2 / 6, 1 + 3 / 6, 1 + 4 / 6, 1 + 5 / 6, 2, 2 + 1 / 3, 2 + 2 / 3, 3],
+            },
+            // both ends of the 3 slide along their circles into the waist: 5 segments on the top loop like the 3's
+            // top arc, a zero-length one at the waist for the 3's middle link, 6 on the bottom loop
+            3: {
+                tracing: '8-two-loops',
+                breakpoints: [0, 0.2, 0.4, 0.6, 0.8, 1, 1, 1 + 1 / 6, 1 + 2 / 6, 1 + 3 / 6, 1 + 4 / 6, 1 + 5 / 6, 2],
+            },
+            // the 4's two ends meet on the right side of the bottom circle (optimizer fit)
+            4: {
+                tracing: '8-from-right',
+                breakpoints: [0, 0, 0.125, 1, 1.25, 1.5, 1.75, 2, 2.1458, 2.2917, 2.625, 2.9583, 3],
+            },
+            // both ends of the 5 meet at the waist: bar + down-stroke → top loop, bowl → bottom loop (optimizer fit)
+            5: {
+                tracing: '8-mirrored',
+                breakpoints: [0, 0.25, 0.5, 0.6875, 0.8125, 0.8958, 1, 1.125, 1.2292, 1.3542, 1.5, 1.75, 2],
+            },
+            // 8 → 9 spins (see spins): in the turning frame it is 8 → 6, the 8's big circle stays the 6's circle
+            9: { startSegment: 1 },
+        },
+        9: {
+            1: { breakpoints: [0, 0.25, 0.5, 0.75, 0.8125, 1, 1.1042, 1.2292, 1.3542, 1.4583, 1.6042, 1.6875, 2] },
+            2: { breakpoints: [0, 0.25, 0.375, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.2708, 1.4375, 2, 2] },
+            3: { breakpoints: [0, 0.25, 0.4792, 0.4792, 0.4792, 0.625, 0.75, 0.875, 1, 1.1667, 1.3125, 1.9583, 2] },
+            5: { breakpoints: [0, 0, 0.25, 0.2917, 0.3125, 0.5625, 0.8125, 1, 1.0833, 1.0833, 1.5, 1.8542, 2] },
+            // turned back by 180° this is exactly the 6 (same segment split, same direction) → a pure spin
+            6: { breakpoints: [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.25, 1.5, 1.75, 2], reversed: true },
+            // turned back by 180° this is the 6 laid out for the 8 (optimizer fit for 6 ↔ 8, mirrored onto the 9)
+            8: { breakpoints: [0, 0.1667, 0.2917, 0.4375, 0.5833, 0.7292, 0.875, 1, 1.3125, 1.7083, 1.75, 1.75, 2], reversed: true },
+        },
+    },
+    // 9 is exactly 6 turned 180°, the 6's circle is the 8's bottom circle and the 2's bowl is the 9's circle:
+    // 6 ↔ 9, 8 ↔ 9 and 2 ↔ 6 morph while turning
+    spins: {
+        2: { 6: 180 },
+        6: { 9: 180, 2: -180 },
+        8: { 9: 180 },
+        9: { 6: -180, 8: -180 },
+    },
+    textLayout: { cellWidth: 10, spacing: 4, baselineY: 19.8, colonDotsY: [7.6, 15.6] },
+};
+return { roundDigits };
+})();
+
+// sets/slim.ts
+const { slimDigits } = (() => {
+// Digit set "slim": thin, tall, round digits, drafted from the reference images in icons/slim/
+// (the set format is described in ../types.ts).
+//
+// The images (94 px tall, 6 px stroke, 50 px wide; 5.5 px = 1 grid unit) reveal a strict construction, so the set
+// is written directly in grid units: everything round is an arc of two equal circles of radius 4, stacked and
+// touching at 12,12 — TOP at 12,8 and BOTTOM at 12,16 — inside the box x 8…16, y 4…20.
+//  - 8 = both circles; 3 = arcs of both; 2's bowl = TOP; 5's bowl = half of BOTTOM;
+//    6 = arc of TOP + straight left side + a loop (a stadium a bit taller than BOTTOM); 9 = 6 turned 180° around 12,12
+//  - 0 = stadium; the 4 is wider and its top point sits lower (y ≈ 5.2), as in the images (its values nudged to the best pixel match)
+//  - round ends and corners
+const RADIUS = 4;
+const TOP = [12, 8];
+const BOTTOM = [12, 16];
+const topArc = (startAngle, endAngle) => arc(...TOP, RADIUS, startAngle, endAngle);
+const bottomArc = (startAngle, endAngle) => arc(...BOTTOM, RADIUS, startAngle, endAngle);
+/** Where the 2's diagonal leaves its bowl: tangent from the corner at 8,20 (a 3-4-5 triangle, hence the round angle). */
+const TWO_DIAGONAL_ANGLE = 36.8699;
+/** Where the 6's top arc ends on the right (measured: slightly below the circle's right point). */
+const SIX_HOOK_ANGLE = 8;
+const turnedAround = (stroke) => {
+    const turn = ([x, y]) => [24 - x, 24 - y];
+    switch (stroke.kind) {
+        case 'line': return line(...turn(stroke.to), ...turn(stroke.from));
+        case 'arc': return arc(...turn(stroke.center), stroke.radius, stroke.endAngle + 180, stroke.startAngle + 180);
+        case 'cubic': return { kind: 'cubic', segment: [turn(stroke.segment[3]), turn(stroke.segment[2]), turn(stroke.segment[1]), turn(stroke.segment[0])] };
+    }
+};
+/** The 6's loop is taller than the bottom circle: a stadium from this height down to 20 (measured). */
+const SIX_LOOP_TOP = 10.91;
+// the 6: top arc from the right over to the left, down the left side, round the loop and back into the left side
+const SIX = [
+    topArc(SIX_HOOK_ANGLE, -180),
+    ...roundedPolyline([[8, 8], [8, 20], [16, 20], [16, SIX_LOOP_TOP], [8, SIX_LOOP_TOP], [8, SIX_LOOP_TOP + RADIUS]], [0, RADIUS, RADIUS, RADIUS, RADIUS, 0]),
+];
+const slimDigits = {
+    segmentCount: 16,
+    strokeWidth: 6 / 5.5,
+    lineCap: 'round',
+    lineJoin: 'round',
+    strokes: {
+        // stadium, from the top middle counter-clockwise
+        0: roundedPolyline([[12, 4], [8, 4], [8, 20], [16, 20], [16, 4], [12, 4]], RADIUS),
+        // slanted flag up to the top of the stem, stem down
+        1: [line(9.64, 9.1, 14.45, 4), line(14.45, 4, 14.45, 20)],
+        // bowl over the top, tangent diagonal down to the corner, base
+        2: [
+            topArc(180, TWO_DIAGONAL_ANGLE + 360),
+            line(...pointOnCircle(...TOP, RADIUS, TWO_DIAGONAL_ANGLE), 8, 20),
+            line(8, 20, 16, 20),
+        ],
+        // top arc from the left round to the middle, bottom arc from the middle round to the left
+        3: [topArc(180, 450), bottomArc(270, 548)],
+        // one stroke: crossbar right → left, diagonal up to the top, stem down
+        4: [line(16.96, 16.03, 7, 16.03), line(7, 16.03, 14.85, 5.17), line(14.85, 5.17, 14.85, 20)],
+        // top bar right → left, left side down, middle bar, bowl (half of the bottom circle), bottom bar
+        5: [line(16, 4, 8, 4), line(8, 4, 8, 12), line(8, 12, 12, 12), bottomArc(270, 450), line(12, 20, 8, 20)],
+        6: SIX,
+        // top bar → slanted stroke down
+        7: [line(8.09, 4, 15.89, 4), line(15.89, 4, 12.09, 20)],
+        // closed figure-eight: top circle clockwise, bottom circle counter-clockwise, meeting where they touch
+        8: [topArc(90, 450), bottomArc(270, -90)],
+        // the 6 turned 180°, drawn the other way round
+        9: SIX.map(turnedAround).reverse(),
+        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
+    },
+    alternativeStrokes: {
+        // the 8 traced like the 0 (as in the round set): from the top counter-clockwise — left half of TOP down to the waist,
+        // once around BOTTOM, right half of TOP back up
+        '8-like-0': [topArc(270, 90), bottomArc(270, -90), topArc(90, -90)],
+        // the 8 as two clockwise loops from the waist (as in the round set): the 3's ends slide along the circles into the waist
+        '8-two-loops': [topArc(90, 450), bottomArc(270, 630)],
+        // the usual figure-eight starting on the right side of BOTTOM (as in the round set, where the 4's crossbar starts)
+        '8-from-right': [bottomArc(0, -90), topArc(90, 450), bottomArc(270, 0)],
+        // mirrored figure-eight from the waist (as in the round set): TOP counter-clockwise, BOTTOM clockwise — like the 5
+        '8-mirrored': [topArc(90, -270), bottomArc(270, 630)],
+    },
+    // optimizer fits (tools/check.ts) for the pairs the user rated bad / midd
+    pairLayouts: {
+        0: {
+            1: { startSegment: 6, reversed: true },
+            2: { startSegment: 5, reversed: true },
+            3: { startSegment: 4, reversed: true },
+            4: { startSegment: 10, reversed: true },
+            5: { startSegment: 5, reversed: true },
+            7: { startSegment: 5, reversed: true },
+            9: { startSegment: 5, reversed: true },
+        },
+        1: {
+            0: { breakpoints: [0, 0, 0, 0, 0.1875, 0.5208, 0.7708, 1, 1.2708, 1.4167, 1.5833, 1.75, 1.9375, 1.9375, 1.9375, 1.9375, 2] },
+        },
+        2: {
+            4: { breakpoints: [0, 0, 0.3958, 0.6458, 0.6458, 0.6667, 0.875, 1, 1.1458, 1.1458, 2, 2.875, 2.875, 2.875, 2.875, 2.875, 3] },
+            // 2 → 6 spins (see spins): in the turning frame it is 2 → 9 (same layout as 2 → 9)
+            6: { breakpoints: [0, 0, 0, 0, 0, 0, 0.2083, 0.4167, 0.625, 0.8333, 1, 1.1458, 1.3333, 1.6042, 1.8125, 2, 3] },
+            9: { breakpoints: [0, 0, 0, 0, 0, 0, 0.2083, 0.4167, 0.625, 0.8333, 1, 1.1458, 1.3333, 1.6042, 1.8125, 2, 3] },
+            0: { breakpoints: [0, 0, 0, 0.1458, 0.2708, 0.4167, 0.625, 0.8333, 1, 1.1458, 1.3333, 1.5833, 1.8125, 1.8333, 1.8333, 2, 3] },
+        },
+        3: {
+            4: { breakpoints: [0, 0, 0.3333, 0.5208, 0.5208, 0.6042, 0.7708, 0.8333, 1, 1.1667, 1.2083, 1.3958, 1.4792, 1.4792, 1.4792, 1.6875, 2] },
+            0: { breakpoints: [0, 0, 0.1042, 0.2292, 0.3333, 0.5, 0.6667, 1, 1.2292, 1.3125, 1.4792, 1.6458, 1.75, 1.8542, 2, 2, 2] },
+        },
+        4: {
+            6: { breakpoints: [0, 0.25, 0.25, 0.25, 0.4375, 1, 1.2917, 1.3542, 1.5208, 1.9583, 2, 2.1875, 2.1875, 2.1875, 2.1875, 2.1875, 3] },
+            // as in the round set: drawn backwards, so the stem's end meets the crossbar's start on the 8's right side
+            8: { reversed: true },
+            3: { breakpoints: [0, 1, 1.9792, 1.9792, 2, 2.1458, 2.2917, 2.4375, 2.4583, 2.5, 2.625, 2.7917, 2.9375, 2.9375, 2.9375, 2.9375, 3] },
+            2: { breakpoints: [0, 1, 1.9583, 1.9583, 2, 2.0625, 2.2292, 2.3542, 2.4792, 2.6042, 2.75, 2.875, 3, 3, 3, 3, 3] },
+            0: { breakpoints: [0, 0.5417, 0.7083, 0.8333, 1, 1.2083, 1.375, 1.5208, 1.6667, 1.8333, 1.9583, 2, 2.1875, 2.375, 2.5625, 2.7083, 3] },
+        },
+        5: {
+            0: { breakpoints: [0, 1, 1.1875, 1.1875, 1.1875, 1.1875, 2, 3, 3.25, 3.2917, 3.5, 3.75, 4, 4.5208, 4.8958, 5, 5] },
+        },
+        6: {
+            8: { breakpoints: [0, 0.4583, 0.5208, 0.5208, 0.5417, 1, 1.875, 2, 2.5, 3, 3.5, 4, 5, 5.4583, 5.9792, 6, 7] },
+            4: { breakpoints: [0, 0, 0, 0, 0, 0.0625, 0.25, 0.5417, 1, 1.3542, 1.5, 2, 3, 4, 5, 6, 7], reversed: true },
+            // turned by 180° this is the 9 laid out for the 2 (the 2 ↔ 9 fit, mirrored onto the 6)
+            2: { breakpoints: [0, 0.2917, 0.2917, 0.5417, 1, 1.5833, 1.6875, 2, 2.5, 3, 3.5, 4, 4, 4, 5, 6, 7], reversed: true },
+        },
+        7: {
+            0: { breakpoints: [0, 0, 0, 0.0417, 0.25, 0.4792, 1, 1.25, 1.3958, 1.5417, 1.7083, 1.9167, 1.9375, 1.9375, 1.9375, 1.9375, 2] },
+        },
+        8: {
+            // as in round, square and condensed: the 0's left and right points move in to the waist
+            0: { tracing: '8-like-0', breakpoints: [0, 0.1667, 0.3333, 0.5208, 0.625, 1, 1.25, 1.3333, 1.4167, 1.5, 1.625, 1.75, 2, 2.375, 2.4792, 2.75, 3] },
+            // the user's idea from the round set: the 4's two ends meet on the right side of the bottom circle
+            4: { tracing: '8-from-right', breakpoints: [0, 0, 0.1667, 0.5, 1, 1.25, 1.5, 1.7083, 1.9167, 2, 2.125, 2.2292, 2.3333, 2.3542, 2.6667, 2.9792, 3] },
+            6: { breakpoints: [0, 0.25, 0.5, 0.5, 0.75, 1, 1.1875, 1.25, 1.375, 1.5, 1.625, 1.75, 1.7917, 1.8958, 2, 2, 2] },
+            // the two-loop tracing fits the 9 best (no spin needed)
+            9: { tracing: '8-two-loops', breakpoints: [0, 0, 0, 0.1042, 0.2083, 0.25, 0.375, 0.5, 0.625, 0.75, 0.8125, 1, 1.25, 1.375, 1.5, 1.75, 2] },
+            // the user's idea from the round set: both ends of the 5 meet at the waist — bars → top loop, bowl → bottom loop
+            5: { tracing: '8-mirrored', breakpoints: [0, 0.25, 0.5, 0.5833, 0.625, 0.6875, 0.8125, 0.875, 0.9167, 1, 1.1042, 1.2083, 1.2917, 1.3958, 1.5, 1.75, 2] },
+            // the user's idea from the round set: both ends of the 3 slide along the circles into the waist
+            3: { tracing: '8-two-loops', breakpoints: [0, 0.25, 0.4583, 0.5208, 0.625, 0.7083, 0.8125, 0.8958, 1, 1.1042, 1.1875, 1.2917, 1.3958, 1.4792, 1.5625, 1.75, 2] },
+        },
+        9: {
+            2: { breakpoints: [0, 1, 2, 3, 3, 3, 3.5, 4, 4.5, 5, 5.3125, 5.4167, 6, 6.4583, 6.7083, 6.7083, 7] },
+            0: { breakpoints: [0, 1, 2, 3, 3.7292, 4, 4.5, 5, 5.3333, 5.6667, 6, 6.2292, 6.4792, 6.6458, 6.7917, 7, 7] },
+            // turned back by 180° this is exactly the 6 (same segment split, same direction) → a pure spin
+            6: { breakpoints: [0, 0.5, 1, 1.5, 2, 3, 3.5, 4, 4.5, 5, 16 / 3, 17 / 3, 6, 6.25, 6.5, 6.75, 7], reversed: true },
+        },
+    },
+    // 9 is exactly 6 turned 180°; 2 → 6 also turns (it is 2 → 9 in the turning frame)
+    spins: { 2: { 6: 180 }, 6: { 9: 180, 2: -180 }, 9: { 6: -180 } },
+    textLayout: { cellWidth: 9.5, spacing: 4, baselineY: 20, colonDotsY: [8, 16] },
+};
+return { slimDigits };
+})();
+
+// sets/square.ts
+const { squareDigits } = (() => {
+// Digit set "square": rounded-square "techno" digits, drafted from the reference images in icons/square/
+// (the set format is described in ../types.ts).
+//
+// The images are tiny (every digit 28 px tall, 4 px stroke), so the shapes are written on the images' own pixel
+// grid and converted: x/y are the stroke's middle line in image pixels, measured from the digit's ink box
+// (y 2…26 = top to bottom middle line; x 2 = middle of a stroke on the left edge). 1.5 image px = 1 grid unit.
+//  - straight strokes with rounded corners (roundedPolyline), round ends
+//  - 3 and 5 share the same right-side bowls (corner radius 5 px); 8 = two stacked rounded rectangles sharing
+//    the middle bar; 9 = 6 turned 180° around 12,12
+//  - T-junctions (1's foot, 3's middle bar, 4's crossbar) are drawn out and back over themselves
+const PIXELS_PER_UNIT = 1.5;
+/** The images' stroke is 4 px ≈ 2.67 units; thinner by the user's choice. */
+const STROKE_WIDTH = 1.6;
+/** Image pixels (middle line, measured from the ink box of a digit `inkWidth` px wide) → grid units. */
+const fromImage = (inkWidth) => ([x, y]) => [12 + (x - inkWidth / 2) / PIXELS_PER_UNIT, 4 + (y - 2) / PIXELS_PER_UNIT];
+/** A rounded polyline given in image pixels; radii in image pixels too. */
+const drawn = (inkWidth, points, radii) => roundedPolyline(points.map(fromImage(inkWidth)), Array.isArray(radii) ? radii.map((radius) => radius / PIXELS_PER_UNIT) : radii / PIXELS_PER_UNIT);
+const turnedAround = ([x, y]) => [24 - x, 24 - y];
+// corner radii (image px), each the best pixel match with the images; bowls are exact half-circles
+const ZERO_RADIUS = 8; // half the width: the 0 is a stadium
+const THREE_BOWL_RADIUS = 6; // half of each bowl's height (12 px)
+const FIVE_BOWL_RADIUS = 6.5; // half of the bowl's height (13 px)
+const SIX_RADIUS = 7;
+const EIGHT_RADIUS = 6;
+// the 6: hook from the top right, round the left side, then the closed bottom loop back to the left side
+const SIX_POINTS = [[15, 2], [2, 2], [2, 26], [19, 26], [19, 12], [2, 12]];
+const SIX_RADII = [0, SIX_RADIUS, SIX_RADIUS, SIX_RADIUS, SIX_RADIUS, 0];
+const squareDigits = {
+    segmentCount: 20,
+    strokeWidth: STROKE_WIDTH,
+    lineCap: 'round',
+    lineJoin: 'round',
+    strokes: {
+        // closed rounded rectangle, from the top middle counter-clockwise
+        0: drawn(20, [[10, 2], [2, 2], [2, 26], [18, 26], [18, 2], [10, 2]], ZERO_RADIUS),
+        // flag → stem down → foot to the left and back across to the right
+        1: drawn(16, [[2, 2], [8, 2], [8, 26], [2, 26], [14, 26]], 0),
+        // top bar → right side → diagonal down to the left → left side → base
+        2: drawn(20, [[3, 2], [18, 2], [18, 9.25], [2, 17.25], [2, 26], [18, 26]], [0, 2, 4.5, 4.5, 0, 0]),
+        // top bar → upper bowl → middle bar out to the left and back → lower bowl → bottom bar
+        3: drawn(20, [[2, 2], [18, 2], [18, 14], [6, 14], [18, 14], [18, 26], [2, 26]], [0, THREE_BOWL_RADIUS, THREE_BOWL_RADIUS, 0, THREE_BOWL_RADIUS, THREE_BOWL_RADIUS, 0]),
+        // left stem down → crossbar to its right end and back to the right stem → down to the bottom and back up to the top
+        4: drawn(24, [[2, 2], [2, 18], [22, 18], [18, 18], [18, 26], [18, 2]], [0, 1, 0, 0, 0, 0]),
+        // top bar right → left, down the left side, middle bar → bowl → bottom bar
+        5: drawn(20, [[16, 2], [2, 2], [2, 13], [18, 13], [18, 26], [2, 26]], [0, 0, 0, FIVE_BOWL_RADIUS, FIVE_BOWL_RADIUS, 0]),
+        6: drawn(21, SIX_POINTS, SIX_RADII),
+        // top bar → diagonal down to the left
+        7: drawn(20, [[2, 2], [17.5, 2], [3.7, 26]], 0),
+        // from the waist: top rectangle (left side up, clockwise), along the middle bar, bottom rectangle (counter-clockwise)
+        8: drawn(20, [[7, 14], [3, 14], [3, 2], [17, 2], [17, 14], [2, 14], [2, 26], [18, 26], [18, 14], [7, 14]], [0, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, 0]),
+        // the 6 turned 180°, drawn the other way round (loop first, then the hook)
+        9: roundedPolyline(SIX_POINTS.map(fromImage(21)).map(turnedAround).reverse(), [...SIX_RADII].reverse().map((radius) => radius / PIXELS_PER_UNIT)),
+        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
+    },
+    alternativeStrokes: {
+        // the 8 traced like the 0 (from the top, counter-clockwise): left side of the top loop down to the middle of
+        // the middle bar, once around the bottom loop back to the middle, right side of the top loop back up
+        '8-like-0': drawn(20, [[10, 2], [3, 2], [3, 14], [10, 14], [2, 14], [2, 26], [18, 26], [18, 14], [10, 14], [17, 14], [17, 2], [10, 2]], [0, EIGHT_RADIUS, EIGHT_RADIUS, 0, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, 0, EIGHT_RADIUS, EIGHT_RADIUS, 0]),
+        // the 8 traced like the 3, starting and ending at the left part of the middle bar: around the top loop, along
+        // the middle bar out to the left and back, around the bottom loop
+        '8-like-3': drawn(20, [[9, 14], [3, 14], [3, 2], [17, 2], [17, 14], [8, 14], [18, 14], [18, 26], [2, 26], [2, 14], [8, 14]], [0, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, 0, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, 0]),
+    },
+    // optimizer fits (tools/check.ts) for the pairs the user rated bad / midd
+    pairLayouts: {
+        0: {
+            1: { startSegment: 5, reversed: true },
+            2: { startSegment: 15 },
+            3: { startSegment: 5, reversed: true },
+            5: { startSegment: 5, reversed: true },
+            7: { startSegment: 5, reversed: true },
+            9: { startSegment: 7, reversed: true },
+        },
+        1: {
+            9: { breakpoints: [0, 0.2083, 0.2083, 0.4792, 1, 1, 1.25, 1.4583, 1.5417, 1.75, 2, 2, 2.0208, 2.25, 2.25, 2.25, 2.25, 2.25, 2.25, 3, 4] },
+            0: { breakpoints: [0, 0, 0, 0, 0.5, 1, 1.0208, 1.0833, 1.2083, 1.3333, 1.5, 1.6667, 1.7917, 1.9167, 1.9792, 2, 2.5, 3, 3, 3, 4] },
+        },
+        2: {
+            4: { breakpoints: [0, 1, 1, 1, 1, 2, 3, 4, 4.2292, 4.2292, 4.2292, 5, 5.2292, 5.5208, 5.5208, 5.5208, 5.5208, 5.5208, 6, 7, 8] },
+            6: { breakpoints: [0, 1, 2, 3, 4, 5, 5.0833, 5.2917, 6, 6.375, 7, 7.4375, 7.6042, 7.7708, 7.7708, 7.7708, 7.7708, 7.7708, 7.7708, 7.7708, 8] },
+            9: { breakpoints: [0, 0.2708, 0.2708, 0.2708, 0.2708, 0.2708, 0.2708, 0.2708, 0.2708, 0.3958, 0.6458, 1, 2, 3, 4, 4.0833, 4.1875, 5, 6, 7, 8] },
+            0: { breakpoints: [0, 1, 2, 2, 2, 3, 4, 4.6667, 4.7917, 5, 5.1042, 5.6667, 6, 7, 7.3333, 7.5, 7.6875, 7.8542, 7.9792, 8, 8] },
+        },
+        3: {
+            4: { breakpoints: [0, 1, 1.3958, 1.3958, 1.3958, 1.5833, 2, 2.4167, 2.6042, 2.6042, 2.6042, 3, 4, 5, 5.5625, 6, 6, 7, 7.9792, 8, 8] },
+            6: { breakpoints: [0, 1, 1.1458, 1.1458, 1.1458, 1.1458, 1.1458, 1.1458, 2, 3, 4, 4, 5, 6, 6.2292, 6.2292, 6.2292, 6.2292, 6.2292, 7, 8] },
+            9: { breakpoints: [0, 0.3333, 0.3333, 0.4792, 1, 1.7292, 2, 2.3125, 2.3125, 3, 4, 5, 5.5833, 5.5833, 5.5833, 6, 6.5, 7, 7.3542, 7.5625, 8] },
+            0: { breakpoints: [0, 0, 0.0417, 0.2292, 0.4792, 0.8333, 1, 1.5, 2, 3, 4, 5, 6, 6.5, 7, 7.1667, 7.5208, 7.7708, 7.9583, 8, 8] },
+        },
+        4: {
+            7: { breakpoints: [0, 1, 2, 2.3125, 2.3125, 3, 4, 5, 5.7083, 5.7083, 5.7708, 5.8542, 5.9167, 6, 6, 6, 6, 6, 6, 6, 6], reversed: true },
+            9: { breakpoints: [0, 1, 2, 3, 4, 5, 5.5625, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 5.7083, 6], reversed: true },
+            3: { breakpoints: [0, 1, 2, 3, 4, 5, 5.5, 5.5, 5.5, 5.5, 5.5, 5.5, 5.5208, 5.625, 5.75, 5.875, 5.9792, 6, 6, 6, 6], reversed: true },
+            2: { breakpoints: [0, 1, 2, 2.1042, 2.1042, 2.1042, 2.1042, 2.1042, 2.2083, 2.2083, 3, 4, 5, 5.8125, 5.8125, 5.9375, 6, 6, 6, 6, 6], reversed: true },
+        },
+        5: {
+            6: { breakpoints: [0, 0.3542, 0.4792, 1, 1.3333, 1.625, 2, 2, 2, 2.0208, 2.2292, 3, 4, 4, 4, 4, 4, 4, 4, 5, 6] },
+            8: { breakpoints: [0, 0.1042, 0.1042, 0.1042, 0.1042, 0.3542, 0.4583, 1, 1.5625, 2, 2.6667, 2.6667, 3, 4, 4.5, 5, 5.3542, 5.875, 5.8958, 5.8958, 6] },
+            9: { breakpoints: [0, 1, 1.4792, 1.4792, 1.4792, 1.4792, 1.4792, 1.4792, 1.4792, 1.4792, 2, 3, 3.3958, 3.7708, 4, 4.3333, 4.6667, 5, 5.3542, 5.5417, 6] },
+            0: { breakpoints: [0, 1, 1.2083, 1.2083, 1.2083, 2, 3, 3.1875, 3.2708, 3.3958, 3.5208, 4, 4.125, 4.5, 4.875, 5, 5.5208, 5.75, 5.9583, 6, 6] },
+        },
+        6: {
+            7: { breakpoints: [0, 0.375, 0.375, 0.375, 0.375, 0.375, 0.375, 0.375, 0.375, 0.375, 0.375, 0.375, 1, 2, 2.625, 3, 4, 5, 6, 7, 8] },
+            8: { breakpoints: [0, 0.2292, 0.2292, 0.2292, 0.2292, 1, 2, 2.5833, 2.6458, 3, 3.5417, 4, 5, 5.4583, 6, 7, 7.3542, 7.3542, 7.6875, 7.8333, 8] },
+            5: { breakpoints: [0, 0.5, 1, 1.4792, 1.6875, 2, 2.375, 2.375, 2.375, 2.375, 3, 4, 5, 5.9792, 5.9792, 5.9792, 5.9792, 5.9792, 6, 7, 8] },
+            3: { breakpoints: [0, 0.1458, 0.1458, 0.1458, 0.1458, 0.1458, 0.1458, 0.1458, 0.1458, 1, 2, 3, 4, 5, 5.625, 5.625, 5.625, 5.625, 6, 7, 8] },
+            2: { breakpoints: [0, 0, 0, 0, 1, 2, 2.8125, 2.8125, 3, 3.3125, 3.5208, 4, 5, 5.2292, 5.2292, 5.2292, 5.2292, 5.2292, 6, 7, 8] },
+        },
+        7: {
+            6: { breakpoints: [0, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 0.6667, 1, 1.5208, 1.7083, 1.7083, 1.7083, 1.7083, 1.7083, 1.7083, 2] },
+            4: { breakpoints: [0, 0.9167, 0.9167, 0.9167, 0.9167, 0.9167, 0.9167, 1, 1.1042, 1.125, 1.2083, 1.2292, 1.2917, 1.5833, 1.5833, 1.5833, 1.6667, 1.7083, 1.7292, 1.7292, 2] },
+            0: { breakpoints: [0, 0, 0.0208, 0.1458, 0.3125, 0.5208, 0.6875, 1, 1.1667, 1.2292, 1.375, 1.4792, 1.6042, 1.7083, 1.8125, 1.875, 1.875, 1.875, 1.875, 1.875, 2] },
+        },
+        8: {
+            5: { startSegment: 11, reversed: true },
+            6: { startSegment: 4 },
+            7: { tracing: '8-like-3', breakpoints: [0, 1, 1.8542, 2, 3, 3.2083, 3.3958, 3.5208, 3.5833, 3.6875, 4, 4.3542, 4.7708, 5, 6, 7, 8, 9, 10, 11, 12] },
+            9: { tracing: '8-like-3', breakpoints: [0, 0, 0, 0, 0.3542, 0.5833, 1, 1.2083, 1.5625, 2, 3, 3.375, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
+            4: { tracing: '8-like-0', breakpoints: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 9, 9, 9, 10, 11, 12, 13, 14, 15] },
+            // the user's idea: both ends of the 3 move to the left tip of its middle bar, where the 8's loops close
+            3: {
+                tracing: '8-like-3',
+                breakpoints: [0, 1, 2, 3, 3.4375, 3.7083, 4, 4.2917, 4.5625, 5, 5.7292, 6, 6.1458, 7, 7.5, 8, 8.5, 9, 10, 11, 12],
+            },
+            // the user's idea: the 0's left and right sides move in to the middle of the 8's middle bar
+            0: {
+                tracing: '8-like-0',
+                breakpoints: [0, 1, 1.6042, 2, 3, 4, 5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 10, 11, 12, 13, 13.3958, 14, 15],
+            },
+        },
+        9: {
+            5: { breakpoints: [0, 1, 2, 2.1875, 2.1875, 2.1875, 2.1875, 2.1875, 2.1875, 2.1875, 3, 4, 5, 5.8333, 6, 6.375, 6.6875, 7, 7.5417, 8, 8] },
+            4: { breakpoints: [0, 1, 2, 3, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5.5, 6, 6.0208, 6.0208, 7, 8, 8] },
+            3: { breakpoints: [0, 1, 2, 3, 4, 4.6667, 5, 5.1875, 5.4375, 5.5, 5.5, 5.5, 5.5, 5.5, 5.6667, 6, 6.5417, 7, 7.4583, 8, 8] },
+            2: { breakpoints: [0, 1, 2, 2.8333, 2.8333, 2.8333, 2.8333, 2.8333, 2.8333, 3, 4, 4.3542, 4.5833, 4.8125, 5, 5.0625, 6, 7, 8, 8, 8] },
+            1: { breakpoints: [0, 1, 2, 3, 3.5, 4, 5, 5.3958, 5.6042, 6, 7, 7.2708, 7.2708, 7.5208, 7.5208, 7.5208, 7.5208, 7.5208, 7.5208, 7.5208, 8] },
+            0: { breakpoints: [0, 1, 1.6667, 2, 2.2083, 2.5, 3, 3.5, 4, 4.5, 4.7917, 5, 5.5, 6, 6.1875, 6.5417, 6.875, 7, 7.875, 8, 8] },
+            // turned back by 180° this is exactly the 6 (same segment split, same direction) → a pure spin
+            6: {
+                breakpoints: [0, 0.5, 1, 4 / 3, 5 / 3, 2, 7 / 3, 8 / 3, 3, 4, 13 / 3, 14 / 3, 5, 16 / 3, 17 / 3, 6, 19 / 3, 20 / 3, 7, 7.5, 8],
+                reversed: true,
+            },
+        },
+    },
+    spins: { 6: { 9: 180 }, 9: { 6: -180 } },
+    textLayout: { cellWidth: 13.5, spacing: 4, baselineY: 20, colonDotsY: [8, 16] },
+};
+return { squareDigits };
+})();
+
+// iconSets.ts
+const { iconSets, resolveIconSet } = (() => {
+// The built-in icon sets, by name. `round` is the default.
+const iconSets = {
+    round: roundDigits,
+    square: squareDigits,
+    condensed: condensedDigits,
+    slim: slimDigits,
+    handwritten: handwrittenDigits,
+};
+/** A set given by name or as a set object. */
+const resolveIconSet = (set = 'round') => {
+    if (typeof set !== 'string')
+        return set;
+    if (!(set in iconSets))
+        throw new Error(`morphico: unknown icon set "${set}" (known: ${Object.keys(iconSets).join(', ')})`);
+    return iconSets[set];
+};
+return { iconSets, resolveIconSet };
+})();
+
+// morph.ts
+const { EMPTY_STATE, hasState, createMorphingPath } = (() => {
+// One SVG <path> that morphs between the states of an icon set. Shared by icon() and every text() cell.
+/** The empty state: nothing is drawn. Shapes grow out of it and shrink into it while fading. */
+const EMPTY_STATE = ' ';
+/** How small a shape gets while it fades into (or out of) the empty state. */
+const EMPTY_SCALE = 0.3;
+const DEFAULT_DURATION = 400;
+// default layouts of every state, computed once per set on first use (nothing runs at import)
+const shapesBySet = new WeakMap();
+const shapesOf = (iconSet) => {
+    let shapes = shapesBySet.get(iconSet);
+    if (!shapes) {
+        shapes = defaultShapes(iconSet);
+        shapesBySet.set(iconSet, shapes);
+    }
+    return shapes;
+};
+const hasState = (iconSet, state) => state === EMPTY_STATE || state in iconSet.strokes;
+const prefersReducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+/** Blends towards the target in the start's frame while turning that frame by spin · progress. */
+const blend = (from, to, progress, spin) => (spin
+    ? rotateAroundCenter(interpolate(from, rotateAroundCenter(to, -spin), progress), spin * progress)
+    : interpolate(from, to, progress));
+const clampToUnit = (value) => Math.min(Math.max(value, 0), 1);
+const createMorphingPath = (pathElement, iconSet, initialState) => {
+    const shapes = shapesOf(iconSet);
+    let state = initialState;
+    let currentPath = null; // null while empty
+    let currentOpacity = 0;
+    let running = null;
+    const render = (path, opacity) => {
+        currentPath = path;
+        currentOpacity = path ? clampToUnit(opacity) : 0;
+        if (path)
+            pathElement.setAttribute('d', toPathData(path));
+        else
+            pathElement.removeAttribute('d');
+        if (currentOpacity < 1)
+            pathElement.setAttribute('opacity', String(+currentOpacity.toFixed(3)));
+        else
+            pathElement.removeAttribute('opacity');
+    };
+    /** Ends the running morph and resolves everyone waiting for it. */
+    const finish = (interrupted) => {
+        if (!running)
+            return;
+        const { stopAnimation, resolvers } = running;
+        running = null;
+        stopAnimation();
+        for (const resolve of resolvers)
+            resolve({ state, interrupted });
+    };
+    render(state === EMPTY_STATE ? null : shapes[state], 1);
+    return {
+        get state() { return state; },
+        morphTo(nextState, { duration = DEFAULT_DURATION, easing = 'easeInOutCubic' } = {}) {
+            // asked again for the state it is already heading to: wait for the running morph
+            if (running && nextState === state) {
+                const { resolvers } = running;
+                return new Promise((resolve) => { resolvers.push(resolve); });
+            }
+            const settled = !running;
+            if (settled && nextState === state)
+                return Promise.resolve({ state, interrupted: false });
+            finish(true);
+            const previousState = state;
+            state = nextState;
+            // settled: both sides use the pair's layouts; interrupted: start from the shape on screen
+            const target = nextState === EMPTY_STATE ? null
+                : previousState === EMPTY_STATE ? shapes[nextState] : shapeForPair(iconSet, shapes, nextState, previousState);
+            const start = !settled ? currentPath
+                : previousState === EMPTY_STATE ? null : shapeForPair(iconSet, shapes, previousState, nextState);
+            const startOpacity = currentOpacity;
+            const endOpacity = target ? 1 : 0;
+            if ((!start && !target) || duration <= 0 || prefersReducedMotion()) {
+                render(target, endOpacity);
+                return Promise.resolve({ state, interrupted: false });
+            }
+            const from = start ?? scaleAroundCenter(target, EMPTY_SCALE);
+            const to = target ?? scaleAroundCenter(start, EMPTY_SCALE);
+            const spin = (settled && iconSet.spins[previousState]?.[nextState]) || 0;
+            const ease = typeof easing === 'function' ? easing : easings[easing];
+            const startTime = performance.now();
+            return new Promise((resolve) => {
+                const stopAnimation = animate((frameTime) => {
+                    const progress = clampToUnit((frameTime - startTime) / duration);
+                    if (progress < 1) {
+                        const easedProgress = ease(progress);
+                        render(blend(from, to, easedProgress, spin), startOpacity + (endOpacity - startOpacity) * easedProgress);
+                        return true;
+                    }
+                    render(target, endOpacity);
+                    finish(false);
+                    return false;
+                });
+                running = { stopAnimation, resolvers: [resolve] };
+            });
+        },
+        stop: () => finish(true),
+    };
+};
+return { EMPTY_STATE, hasState, createMorphingPath };
+})();
+
+// svg.ts
+const { createSvgElement, createIconSvg } = (() => {
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const createSvgElement = (tagName, attributes = {}) => {
+    const element = document.createElementNS(SVG_NAMESPACE, tagName);
+    for (const [name, value] of Object.entries(attributes))
+        element.setAttribute(name, String(value));
+    return element;
+};
+/** An <svg> drawn in the set's stroke style, coloured by the CSS `color` (currentColor). */
+const createIconSvg = (iconSet, viewBox) => createSvgElement('svg', {
+    viewBox,
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': iconSet.strokeWidth,
+    'stroke-linecap': iconSet.lineCap,
+    'stroke-linejoin': iconSet.lineJoin,
+});
+return { createSvgElement, createIconSvg };
+})();
+
+// icon.ts
+const { icon } = (() => {
+// Layer 1: one icon that morphs between the states of a set, e.g. a single digit.
+const checkedState = (iconSet, state) => {
+    const normalized = state === '' ? EMPTY_STATE : state;
+    if (!hasState(iconSet, normalized))
+        throw new Error(`morphico: the icon set has no state "${state}"`);
+    return normalized;
+};
+/** Adds a morphing icon (an <svg>) to `element`. */
+const icon = (element, options = {}) => {
+    const { set, state = EMPTY_STATE, size = '1em', ...defaultMorphOptions } = options;
+    const iconSet = resolveIconSet(set);
+    const svg = createIconSvg(iconSet, '0 0 24 24');
+    svg.setAttribute('role', 'img');
+    svg.style.width = size;
+    svg.style.height = size;
+    const pathElement = svg.appendChild(createSvgElement('path'));
+    const morphingPath = createMorphingPath(pathElement, iconSet, checkedState(iconSet, state));
+    const updateLabel = () => svg.setAttribute('aria-label', morphingPath.state.trim());
+    updateLabel();
+    element.appendChild(svg);
+    return {
+        get state() { return morphingPath.state; },
+        to(nextState, { onEnd, ...morphOptions } = {}) {
+            const morph = morphingPath.morphTo(checkedState(iconSet, nextState), { ...defaultMorphOptions, ...morphOptions });
+            updateLabel();
+            if (onEnd)
+                morph.then(onEnd);
+            return morph;
+        },
+        destroy() {
+            morphingPath.stop();
+            svg.remove();
+        },
+    };
+};
+return { icon };
+})();
+
+// text.ts
+const { text } = (() => {
+// Layer 2: a line of characters (clock, counter, date) in narrow cells; changed digits morph.
+// Every character reuses the 24×24 icon drawing; only the viewBox is narrowed to its cell.
+/** Characters `text()` can show: digits, `-` and space morph; `:` `.` `,` `/` stay still. Anything else is removed. */
+const UNSUPPORTED_CHARACTERS = /[^0-9 :.,\/-]/g;
+/** Vertical part of the 24×24 grid shown in a cell: y 3…21 holds every digit including its stroke. */
+const CELL_TOP = 3;
+const CELL_HEIGHT = 18;
+/** Dot radius of `:` `.` `,` relative to the stroke width. */
+const DOT_SIZE = 0.6;
+const formatNumber = (value) => String(+value.toFixed(4));
+/** Draws `:` `.` `,` or `/` into the cell, matching the set's stroke width and digit positions. */
+const drawStaticCharacter = (svg, character, iconSet) => {
+    const { baselineY, colonDotsY } = iconSet.textLayout;
+    const dotRadius = iconSet.strokeWidth * DOT_SIZE;
+    const baseDotY = baselineY + iconSet.strokeWidth / 2 - dotRadius; // dot bottom = digit bottom
+    const dot = (y) => svg.appendChild(createSvgElement('circle', {
+        cx: 12, cy: formatNumber(y), r: formatNumber(dotRadius), fill: 'currentColor', stroke: 'none',
+    }));
+    const line = (fromX, fromY, toX, toY) => svg.appendChild(createSvgElement('path', {
+        d: `M${formatNumber(fromX)} ${formatNumber(fromY)}L${formatNumber(toX)} ${formatNumber(toY)}`,
+    }));
+    if (character === ':')
+        colonDotsY.forEach(dot);
+    if (character === '.' || character === ',')
+        dot(baseDotY);
+    if (character === ',')
+        line(12 + dotRadius * 0.4, baseDotY, 11, baselineY + 2.2);
+    if (character === '/')
+        line(9.5, baselineY, 14.5, 24 - baselineY);
+};
+/** Adds a line of morphing characters (a <span> of <svg> cells) to `element`. */
+const text = (element, options = {}) => {
+    const { set, value: initialValue = '', size = '1em', cellWidth, spacing, ...defaultMorphOptions } = options;
+    const iconSet = resolveIconSet(set);
+    const digitCellWidth = cellWidth ?? iconSet.textLayout.cellWidth;
+    const cellSpacing = spacing ?? iconSet.textLayout.spacing;
+    const inkBottom = iconSet.textLayout.baselineY + iconSet.strokeWidth / 2;
+    const line = document.createElement('span');
+    line.setAttribute('role', 'img');
+    line.style.whiteSpace = 'nowrap';
+    element.appendChild(line);
+    let cells = [];
+    let value = '';
+    const isMorphing = (character) => hasState(iconSet, character);
+    const widthOf = (character) => {
+        if (isMorphing(character))
+            return digitCellWidth;
+        return character === '/' ? digitCellWidth * 0.7 : digitCellWidth / 2;
+    };
+    /** CSS length: `units` grid units at the line's size. */
+    const scaled = (units) => `calc(${size} * ${formatNumber(units / CELL_HEIGHT)})`;
+    const createCell = (character, index) => {
+        const width = widthOf(character);
+        const svg = createIconSvg(iconSet, `${formatNumber(12 - width / 2)} ${CELL_TOP} ${formatNumber(width)} ${CELL_HEIGHT}`);
+        svg.setAttribute('aria-hidden', 'true');
+        Object.assign(svg.style, {
+            width: scaled(width),
+            height: size,
+            overflow: 'visible',
+            verticalAlign: scaled(inkBottom - CELL_TOP - CELL_HEIGHT), // digit bottom on the text baseline
+            marginLeft: index ? `var(--morphico-spacing, ${scaled(cellSpacing)})` : '0',
+        });
+        let morphingPath = null;
+        if (isMorphing(character))
+            morphingPath = createMorphingPath(svg.appendChild(createSvgElement('path')), iconSet, character);
+        else
+            drawStaticCharacter(svg, character, iconSet);
+        return { svg, morphingPath, character };
+    };
+    const rebuild = (characters) => {
+        for (const cell of cells)
+            cell.morphingPath?.stop();
+        cells = characters.map(createCell);
+        line.replaceChildren(...cells.map((cell) => cell.svg));
+    };
+    const show = (nextValue, { onEnd, ...morphOptions } = {}) => {
+        value = nextValue.replace(UNSUPPORTED_CHARACTERS, '');
+        line.setAttribute('aria-label', value.trim());
+        const characters = [...value];
+        const sameLayout = characters.length === cells.length && characters.every((character, index) => (cells[index].morphingPath ? isMorphing(character) : character === cells[index].character));
+        let change;
+        if (sameLayout) {
+            const morphs = cells.map((cell, index) => cell.morphingPath?.morphTo(characters[index], { ...defaultMorphOptions, ...morphOptions }));
+            const finishedValue = value;
+            change = Promise.all(morphs).then((results) => ({ value: finishedValue, interrupted: results.some((result) => result?.interrupted) }));
+        }
+        else {
+            rebuild(characters);
+            change = Promise.resolve({ value, interrupted: false });
+        }
+        if (onEnd)
+            change.then(onEnd);
+        return change;
+    };
+    show(initialValue);
+    return {
+        get value() { return value; },
+        set: show,
+        destroy() {
+            for (const cell of cells)
+                cell.morphingPath?.stop();
+            line.remove();
+        },
+    };
+};
+return { text };
+})();
+
 // index.ts
-// morphico public API. The icon() / text() layers come later; for now only the version is exported.
-/** Package version, e.g. "0.0.1" (tools/build.ts replaces 'dev'). */
-const version = '0.0.1';
+// morphico public API.
+/** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
+const version = '0.1.0';
 
-return { version };
+return { easings, icon, iconSets, text, version };
 })();