morphico 0.4.0 → 0.5.0

package/dist/morphico.mjs

@@ -1,4642 +0,0 @@
-/*! morphico v0.4.0 | code: MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE)
- * Icons based on Lucide (https://lucide.dev), some of them from Feather (https://feathericons.com):
- *
- * ISC License
- *
- * Copyright (c) 2026 Lucide Icons and Contributors
- *
- * Permission to use, copy, modify, and/or distribute this software for any
- * purpose with or without fee is hereby granted, provided that the above
- * copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
- * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
- * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
- * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
- * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
- * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
- * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
- *
- * The MIT License (MIT) (for the Lucide icons derived from Feather, listed in LICENSE-lucide)
- *
- * Copyright (c) 2013-present Cole Bemis
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// 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, reversedStroke, pointOnCircle, ellipse, roundedPolyline, roundedPolygon, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, piecesOf, pieceLengthOf, splitPieces, defaultShapes, flattenOntoLine, shapeForPair, trimPiece, wipeRange, wipePiece, drawnPieces, withDrawnPieces } = (() => {
-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]] });
-/** The same line or arc, drawn in the opposite direction. */
-const reversedStroke = (stroke) => {
-    if (stroke.kind === 'line')
-        return { ...stroke, from: stroke.to, to: stroke.from };
-    if (stroke.kind === 'arc')
-        return { ...stroke, startAngle: stroke.endAngle, endAngle: stroke.startAngle };
-    const [start, control1, control2, end] = stroke.segment;
-    return { kind: 'cubic', segment: [end, control2, control1, start] };
-};
-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;
-};
-/**
- * A closed polygon with every corner rounded by `radius` (clamped per corner so neighbouring arcs never overlap).
- * Always a line and an arc per corner, whatever the radius, so pair layouts (stroke indices) stay valid; at radius 0
- * the arc shrinks to the corner point, so the corner is really sharp (and `stroke-linejoin` decides how it looks).
- * Starts after the first corner with a line (`startsWithArc`: with the arc of the first corner), clockwise if the
- * corners are listed clockwise on screen.
- */
-const roundedPolygon = (corners, radius, startsWithArc = false) => {
-    const cornerCount = corners.length;
-    const roundedCorners = corners.map((corner, index) => {
-        const previous = corners[(index + cornerCount - 1) % cornerCount], next = corners[(index + 1) % cornerCount];
-        const incoming = unitVector(previous, corner), outgoing = unitVector(corner, next);
-        const turn = Math.atan2(incoming[0] * outgoing[1] - incoming[1] * outgoing[0], incoming[0] * outgoing[0] + incoming[1] * outgoing[1]);
-        const halfTurnTangent = Math.tan(Math.abs(turn) / 2);
-        const shortestHalfEdge = Math.min(distanceBetween(previous, corner), distanceBetween(corner, next)) / 2;
-        const cornerRadius = Math.max(0, Math.min(radius, shortestHalfEdge / halfTurnTangent));
-        const tangentDistance = cornerRadius * halfTurnTangent;
-        const arcStart = [corner[0] - incoming[0] * tangentDistance, corner[1] - incoming[1] * tangentDistance];
-        const arcEnd = [corner[0] + outgoing[0] * tangentDistance, corner[1] + outgoing[1] * tangentDistance];
-        const inward = turn > 0 ? [-incoming[1], incoming[0]] : [incoming[1], -incoming[0]];
-        const center = [arcStart[0] + inward[0] * cornerRadius, arcStart[1] + inward[1] * cornerRadius];
-        const startAngle = Math.atan2(arcStart[1] - center[1], arcStart[0] - center[0]) / DEGREE;
-        return { arcStart, arcEnd, arc: arc(center[0], center[1], cornerRadius, startAngle, startAngle + turn / DEGREE) };
-    });
-    const strokes = roundedCorners.flatMap((roundedCorner, index) => {
-        const next = roundedCorners[(index + 1) % cornerCount];
-        return [line(...roundedCorner.arcEnd, ...next.arcStart), next.arc];
-    });
-    // the list above starts after corner 0 with a line and ends with corner 0's arc
-    return startsWithArc ? [strokes[strokes.length - 1], ...strokes.slice(0, -1)] : strokes;
-};
-const distanceBetween = (from, to) => Math.hypot(to[0] - from[0], to[1] - from[1]);
-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));
-/** A piece whose end lands on its start is closed (`Z`): its first corner then gets the line join, not two line ends. */
-const isClosedPiece = (piece) => Math.hypot(piece[piece.length - 2] - piece[0], piece[piece.length - 1] - piece[1]) < 1e-6;
-const hasLength = ([start, control1, control2, end]) => [control1, control2, end].some((point) => Math.hypot(point[0] - start[0], point[1] - start[1]) > 1e-6);
-/**
- * The segments of a piece as written to SVG. A closed piece starts at its first segment with length: a zero-length
- * first segment (a corner of radius 0) has no direction, so browsers would draw the closing corner wrongly.
- * Only the written order changes, not the picture.
- */
-const writtenSegments = (piece) => {
-    const segments = toSegments(piece);
-    if (!isClosedPiece(piece))
-        return segments;
-    const firstWithLength = Math.max(0, segments.findIndex(hasLength));
-    return [...segments.slice(firstWithLength), ...segments.slice(0, firstWithLength)];
-};
-/** A piece shrunk to a single point: not drawn at all (round line ends would show it as a dot). */
-const isPoint = (piece) => piece.every((value, index) => Math.abs(value - piece[index % 2]) < 1e-6);
-/**
- * SVG `d` attribute: per piece `M x y` followed by one `C` per segment (`pieceLength`: see pieceLengthOf).
- * Pieces shrunk to a single point are left out.
- */
-const toPathData = (path, pieceLength = path.length) => splitPieces(path, pieceLength).filter((piece) => !isPoint(piece)).map((piece) => {
-    const segments = writtenSegments(piece);
-    const [startX, startY] = segments[0][0];
-    return `M${formatNumber(startX)} ${formatNumber(startY)}` + segments
-        .map(([, control1, control2, end]) => `C${[...control1, ...control2, ...end].map(formatNumber).join(' ')}`)
-        .join('') + (isClosedPiece(piece) ? 'Z' : '');
-}).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 ----
-// A shape of a set with several pieces is the path numbers of every piece one after another.
-/** The set itself is the first piece. */
-const piecesOf = (iconSet) => [iconSet, ...(iconSet.morePieces ?? [])];
-/** Path numbers of one piece: start point + 6 per segment. */
-const pieceLengthOf = (iconSet) => 2 + 6 * iconSet.segmentCount;
-/** Splits a shape into the path numbers of its pieces. */
-const splitPieces = (path, pieceLength) => Array.from({ length: path.length / pieceLength }, (_, pieceIndex) => path.slice(pieceIndex * pieceLength, (pieceIndex + 1) * pieceLength));
-const strokesOf = (pieceSet, state, pieceIndex) => {
-    const strokes = pieceSet.strokes[state];
-    if (!strokes)
-        throw new Error(`state "${state}" has no strokes in piece ${pieceIndex}`);
-    return strokes;
-};
-/** Every state of the set laid out with its default breakpoints. */
-const defaultShapes = (iconSet) => Object.fromEntries(Object.keys(iconSet.strokes).map((state) => [state, piecesOf(iconSet).flatMap((pieceSet, pieceIndex) => {
-        const strokes = strokesOf(pieceSet, state, pieceIndex);
-        return layoutStrokes(strokes, defaultBreakpoints(strokes, iconSet.segmentCount));
-    })]));
-/**
- * `shape` pressed flat onto the straight line `from` → `to`: every point moves onto the line, keeping its position
- * along the line's direction (the shape's extent along it is stretched to the line's length).
- */
-const flattenOntoLine = (shape, from, to) => {
-    const direction = [to[0] - from[0], to[1] - from[1]];
-    const positions = Array.from({ length: shape.length / 2 }, (_, pointIndex) => shape[2 * pointIndex] * direction[0] + shape[2 * pointIndex + 1] * direction[1]);
-    const lowest = Math.min(...positions), highest = Math.max(...positions);
-    return positions.flatMap((position) => {
-        const along = highest - lowest > EPSILON ? (position - lowest) / (highest - lowest) : 0.5;
-        return [from[0] + direction[0] * along, from[1] + direction[1] * along];
-    });
-};
-/** The shape of `state` laid out for morphing to or from `otherState` (each piece by its own pair layout). */
-const shapeForPair = (iconSet, shapes, state, otherState) => {
-    const pieceLength = pieceLengthOf(iconSet);
-    const pieceForPair = (pieceSet, pieceIndex, pieceState, pieceOther, mayFlatten) => {
-        const defaultPiece = splitPieces(shapes[pieceState], pieceLength)[pieceIndex];
-        const pairLayout = pieceSet.pairLayouts[pieceState]?.[pieceOther];
-        if (!pairLayout)
-            return defaultPiece;
-        if ((pairLayout.draw || pairLayout.wipe) && mayFlatten) {
-            // not there: the other side's piece shrunk to its start point (not drawn); the morph draws it (see drawnPieces)
-            const otherPiece = pieceForPair(pieceSet, pieceIndex, pieceOther, pieceState, false);
-            return Array.from({ length: pieceLength }, (_, index) => otherPiece[index % 2]);
-        }
-        if (pairLayout.flatten && mayFlatten) {
-            const [line] = strokesOf(pieceSet, pieceState, pieceIndex);
-            if (line.kind !== 'line')
-                throw new Error(`flatten: state "${pieceState}" must be one straight line`);
-            // the other side as it is laid out for this pair (if it flattens too, its plain layout)
-            return flattenOntoLine(pieceForPair(pieceSet, pieceIndex, pieceOther, pieceState, false), line.from, line.to);
-        }
-        const strokes = pairLayout.tracing ? pieceSet.alternativeStrokes[pairLayout.tracing] : strokesOf(pieceSet, pieceState, pieceIndex);
-        const laidOut = pairLayout.breakpoints ? layoutStrokes(strokes, pairLayout.breakpoints) : defaultPiece;
-        const reordered = reorderSegments(laidOut, pairLayout);
-        return pairLayout.rotation ? rotateAroundCenter(reordered, pairLayout.rotation) : reordered;
-    };
-    return piecesOf(iconSet).flatMap((pieceSet, pieceIndex) => pieceForPair(pieceSet, pieceIndex, state, otherState, true));
-};
-// ---- drawing a piece along its path (PairLayout.draw) ----
-/** Rough length of a cubic segment: the average of its chord and its control polygon. */
-const segmentLength = ([start, control1, control2, end]) => {
-    const distance = (from, to) => Math.hypot(to[0] - from[0], to[1] - from[1]);
-    return (distance(start, end) + distance(start, control1) + distance(control1, control2) + distance(control2, end)) / 2;
-};
-/**
- * The part of a piece between two shares of its length (0…1). The segments outside shrink to the part's ends,
- * so the number count stays the same.
- */
-const pieceBetween = (piece, fromFraction, toFraction) => {
-    const segments = toSegments(piece);
-    const lengths = segments.map(segmentLength);
-    const totalLength = lengths.reduce((sum, length) => sum + length, 0);
-    const from = fromFraction * totalLength, to = toFraction * totalLength;
-    let travelled = 0;
-    const parts = segments.map((segment, index) => {
-        const segmentStart = travelled;
-        travelled += lengths[index];
-        if (!lengths[index] || travelled <= from || segmentStart >= to)
-            return null;
-        const startProgress = Math.max(0, (from - segmentStart) / lengths[index]);
-        const endProgress = Math.min(1, (to - segmentStart) / lengths[index]);
-        const [head] = splitCubic(segment, endProgress);
-        return startProgress > 0 ? splitCubic(head, startProgress / endProgress)[1] : head;
-    });
-    // before the part: its start point; after (or between): the end of the part drawn so far
-    let pen = parts.find((part) => part)?.[0] ?? segments[0][0];
-    return fromSegments(parts.map((part) => {
-        if (!part)
-            return [pen, pen, pen, pen];
-        pen = part[3];
-        return part;
-    }));
-};
-/** The first `fraction` (0…1) of a piece along its length, as if a pen had drawn that far. */
-const trimPiece = (piece, fraction) => pieceBetween(piece, 0, Math.min(Math.max(fraction, 0), 1));
-/** The x range a wipe's edge moves through (the icon box's drawing area, line width included). */
-const WIPE_FROM_X = 2;
-const WIPE_TO_X = 22;
-const WIPE_SAMPLES_PER_SEGMENT = 40;
-/** Points along a piece as [share of its length, x]. */
-const xAlong = (piece) => {
-    const segments = toSegments(piece);
-    const lengths = segments.map(segmentLength);
-    const totalLength = lengths.reduce((sum, length) => sum + length, 0) || 1;
-    const samples = [];
-    let travelled = 0;
-    segments.forEach((segment, index) => {
-        for (let step = 0; step <= WIPE_SAMPLES_PER_SEGMENT; step++) {
-            const progress = step / WIPE_SAMPLES_PER_SEGMENT;
-            const [x] = progress < 1 ? splitCubic(segment, progress)[1][0] : segment[3];
-            samples.push([(travelled + progress * lengths[index]) / totalLength, x]);
-        }
-        travelled += lengths[index];
-    });
-    return samples;
-};
-/**
- * The x range a morph's wipe edge moves through: the box (x 2…22), or — if a piece slides in — from the box's side
- * to that piece's leading side at rest, so the edge rides at its front and it starts just outside the box.
- */
-const wipeRange = (slidingPiece, direction) => {
-    if (!slidingPiece)
-        return [WIPE_FROM_X, WIPE_TO_X];
-    const xs = xAlong(slidingPiece).map(([, x]) => x);
-    return direction === 'right' ? [WIPE_FROM_X, Math.max(...xs)] : [Math.min(...xs), WIPE_TO_X];
-};
-/**
- * A piece behind a vertical edge (PairLayout.wipe): at `fraction` 0…1 of the wipe, the edge has moved that far
- * through `edgeRange` in `direction`, and only the part it has passed shows. That part must be one stretch of the
- * path. `slides` (PairLayout.slide): the piece moves with the edge from outside the box; only its part inside shows.
- */
-const wipePiece = (piece, fraction, direction, edgeRange = [WIPE_FROM_X, WIPE_TO_X], slides = false) => {
-    if (fraction >= 1)
-        return piece.slice();
-    const [fromX, toX] = edgeRange;
-    if (slides) {
-        // in the piece's own frame the box's side moves the other way: the leading part shows first
-        const shift = (1 - Math.max(fraction, 0)) * (toX - fromX) * (direction === 'right' ? -1 : 1);
-        return wipePiece(piece, fraction, direction === 'right' ? 'left' : 'right', edgeRange)
-            .map((value, index) => (index % 2 ? value : value + shift));
-    }
-    const travel = Math.max(fraction, 0) * (toX - fromX);
-    const edge = direction === 'right' ? fromX + travel : toX - travel;
-    // samples along the length: [share of the length, > 0 where the edge has passed]
-    const samples = xAlong(piece).map(([share, x]) => [share, direction === 'right' ? edge - x : x - edge]);
-    const first = samples.findIndex(([, passed]) => passed >= 0);
-    if (first < 0)
-        return pieceBetween(piece, 0, 0);
-    let last = samples.length - 1;
-    while (samples[last][1] < 0)
-        last--;
-    // where the edge crosses between two samples
-    const crossing = ([shareA, passedA], [shareB, passedB]) => shareA + (shareB - shareA) * (passedA / (passedA - passedB));
-    const from = first > 0 ? crossing(samples[first - 1], samples[first]) : 0;
-    const to = last < samples.length - 1 ? crossing(samples[last], samples[last + 1]) : 1;
-    return pieceBetween(piece, from, to);
-};
-/** The pieces drawn (or erased) along their path when morphing `state` → `otherState` (PairLayout.draw). */
-const drawnPieces = (iconSet, state, otherState) => piecesOf(iconSet).flatMap((pieceSet, pieceIndex) => {
-    const windowOf = (draw) => (Array.isArray(draw) ? draw : typeof draw === 'number' ? [1 - draw, 1] : [0, 1]);
-    // the layout of the state where the piece is absent
-    const absentIn = (absentState, presentState) => {
-        const pairLayout = pieceSet.pairLayouts[absentState]?.[presentState];
-        return pairLayout?.draw || pairLayout?.wipe ? pairLayout : undefined;
-    };
-    const drawIn = absentIn(state, otherState);
-    const pairLayout = drawIn ?? absentIn(otherState, state);
-    if (!pairLayout)
-        return [];
-    const [start, end] = windowOf(pairLayout.draw || true);
-    return [{ pieceIndex, drawsIn: Boolean(drawIn), start, end, wipe: pairLayout.wipe, slide: pairLayout.slide }];
-});
-/**
- * A frame of a morph `from` → `to` at `progress` with the drawn pieces replaced: drawn in from the start along
- * `to`'s piece, or erased back along `from`'s piece.
- */
-const withDrawnPieces = (frame, from, to, progress, pieceLength, drawn) => {
-    if (!drawn.length)
-        return frame;
-    const presentPiece = ({ pieceIndex, drawsIn }) => (drawsIn ? to : from).slice(pieceIndex * pieceLength, (pieceIndex + 1) * pieceLength);
-    // one edge for every wipe of the morph, riding at the front of the (first) sliding piece
-    const slider = drawn.find((piece) => piece.slide && piece.wipe);
-    const edgeRange = wipeRange(slider ? presentPiece(slider) : null, slider?.wipe ?? 'right');
-    const result = frame.slice();
-    for (const drawnPiece of drawn) {
-        const { pieceIndex, drawsIn, start, end, wipe, slide } = drawnPiece;
-        const present = presentPiece(drawnPiece);
-        // erasing is drawing in played backwards
-        const fraction = ((drawsIn ? progress : 1 - progress) - start) / (end - start);
-        result.splice(pieceIndex * pieceLength, pieceLength, ...(wipe ? wipePiece(present, fraction, wipe, edgeRange, slide) : trimPiece(present, fraction)));
-    }
-    return result;
-};
-return { line, arc, cubic, reversedStroke, pointOnCircle, ellipse, roundedPolyline, roundedPolygon, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, piecesOf, pieceLengthOf, splitPieces, defaultShapes, flattenOntoLine, shapeForPair, trimPiece, wipeRange, wipePiece, drawnPieces, withDrawnPieces };
-})();
-
-// sets/lucide.ts
-const { LUCIDE_SCALE, LUCIDE_STROKE_WIDTH, fromLucide, lucideLength, lucideLine, lucideArc, lucideCubic, lucidePoint, LUCIDE_SLASH } = (() => {
-// Shared by every Lucide-based icon set: Lucide draws in y 3…21 (18 units) with a 2-unit line; our icons get the
-// same room as the digits (16 units, y 4…20; user's choice 2026-10-26), so every icon is scaled around the centre
-// 12,12 — line width included, so each icon looks exactly like Lucide's, only with more margin in its box.
-const LUCIDE_SCALE = 16 / 18;
-/** Lucide's 2-unit line, scaled with the icon. */
-const LUCIDE_STROKE_WIDTH = 2 * LUCIDE_SCALE;
-/** A point (or corner) of a Lucide icon moved into our icon box. */
-const fromLucide = ([x, y]) => [12 + (x - 12) * LUCIDE_SCALE, 12 + (y - 12) * LUCIDE_SCALE];
-/** A length of a Lucide icon (e.g. a corner radius) in our icon box. */
-const lucideLength = (length) => length * LUCIDE_SCALE;
-// Strokes written in Lucide coordinates (for the icon sets added from 2026-10-28 on).
-/** A straight line between two Lucide points. */
-const lucideLine = (fromX, fromY, toX, toY) => line(...fromLucide([fromX, fromY]), ...fromLucide([toX, toY]));
-/** A circular arc in Lucide coordinates (angles in degrees, `endAngle > startAngle` = clockwise on screen). */
-const lucideArc = (centerX, centerY, radius, startAngle, endAngle) => arc(...fromLucide([centerX, centerY]), lucideLength(radius), startAngle, endAngle);
-/** A cubic Bézier curve in Lucide coordinates. */
-const lucideCubic = (...coordinates) => {
-    const [startX, startY, control1X, control1Y, control2X, control2Y, endX, endY] = coordinates;
-    return cubic(...fromLucide([startX, startY]), ...fromLucide([control1X, control1Y]), ...fromLucide([control2X, control2Y]), ...fromLucide([endX, endY]));
-};
-/** A missing piece at rest: a single point, never drawn (see toPathData). */
-const lucidePoint = (x, y) => [lucideLine(x, y, x, y)];
-/** The diagonal slash of Lucide's "-off" icons, from the top left. */
-const LUCIDE_SLASH = [lucideLine(2, 2, 22, 22)];
-return { LUCIDE_SCALE, LUCIDE_STROKE_WIDTH, fromLucide, lucideLength, lucideLine, lucideArc, lucideCubic, lucidePoint, LUCIDE_SLASH };
-})();
-
-// sets/check-mark.ts
-const { checkMarkPiece } = (() => {
-// The check mark shared by "checkbox" and "radio" (Lucide 1.61.0 "square-check" / "circle-check" and their "-big"
-// versions draw the same checks; ISC, see LICENSE-lucide). Coordinates are Lucide's, scaled by fromLucide.
-// Drawn left to right, short stroke then long stroke. unchecked has no check: the check is drawn in like a pen
-// writing it — down the short stroke, up the long one (the user's sketch; PairLayout.draw) — and erased back.
-/** A straight line between two Lucide points, moved into our icon box. */
-const lucideLine = (from, to) => line(...fromLucide(from), ...fromLucide(to));
-const CHECK = [lucideLine([8, 12], [10.5, 14.5]), lucideLine([10.5, 14.5], [16, 9])];
-const BIG_CHECK = [lucideLine([9, 11], [12, 14]), lucideLine([12, 14], [22, 4])];
-// every check ↔ check: short stroke 4 segments, long stroke 8 (of 12), so the corners meet
-const CHECK_FOR_CHECK = { breakpoints: [0, 0.25, 0.5, 0.75, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2] };
-const CHECK_STATES = ['unchecked', 'checked', 'checked-big'];
-/**
- * The check piece of a set with the states unchecked, checked, checked-big (12 segments).
- * `hiddenAt`: a Lucide point on the outline at the check's height, where unchecked's check rests at rest
- * (tiny, under the outline's line, so it doesn't show — morphs draw the check instead).
- */
-const checkMarkPiece = (hiddenAt) => {
-    const [x, y] = hiddenAt;
-    return {
-        strokes: {
-            unchecked: [lucideLine([x, y - 0.1], [x, y]), lucideLine([x, y], [x, y + 0.1])],
-            checked: CHECK,
-            'checked-big': BIG_CHECK,
-        },
-        alternativeStrokes: {},
-        pairLayouts: {
-            ...Object.fromEntries(CHECK_STATES.map((state) => [state, Object.fromEntries(CHECK_STATES.filter((other) => other !== state).map((other) => [other, CHECK_FOR_CHECK]))])),
-            unchecked: { checked: { draw: true }, 'checked-big': { draw: true } },
-        },
-    };
-};
-return { checkMarkPiece };
-})();
-
-// sets/checkbox.ts
-const { checkboxIcons } = (() => {
-// Icon set "checkbox": unchecked, checked, checked-big — Lucide 1.61.0 icons "square", "square-check",
-// "square-check-big" (ISC, see LICENSE-lucide). Coordinates below are Lucide's; fromLucide / lucideLength scale them
-// into our icon box (more margin, like the digits — see lucide.ts). Built from rounded corners, so `roundness` works.
-// Two pieces:
-//   piece 1, the box: the same square in unchecked and checked (it doesn't move); checked-big opens its top right
-//     corner where the big check leaves the box — both ends of the gap pull back to the gap's edges.
-//   piece 2, the check (check-mark.ts, shared with "radio"): drawn in like a pen from unchecked (the user's sketch).
-//     (Rejected: a box copy folding into the check — tangled; the check sliding in from the left edge — user: bad.)
-const SQUARE_CORNERS = [[3, 3], [21, 3], [21, 21], [3, 21]].map(fromLucide);
-const LUCIDE_RADIUS = lucideLength(2);
-/** square-check-big's box: the square without its top right corner (gap from 17.344,3 to 21,10.656). */
-const openBox = (square) => {
-    const [top, , right, bottomRight, bottom, bottomLeft, left, topLeft] = square;
-    return [
-        line(...fromLucide([21, 10.656]), ...right.to),
-        bottomRight, bottom, bottomLeft, left, topLeft,
-        line(...top.from, ...fromLucide([17.344, 3])),
-    ];
-};
-// box, checked/unchecked ↔ checked-big: the square laid out so its 12 segments line up with the open box's —
-// top (2: the part that stays, the part in the gap), top right corner (2, in the gap), right side (2: in the gap,
-// the part that stays), bottom right, bottom, bottom left, left (2), top left — started at the corner's second half.
-// The open box gets two zero-length segments at each end of the gap, where the vanishing parts pull back to.
-const SQUARE_FOR_OPEN_BOX = { breakpoints: [0, 0.8817, 1, 1.5, 2, 2.404, 3, 4, 5, 6, 6.5, 7, 8], startSegment: 3 };
-const OPEN_BOX_FOR_SQUARE = { breakpoints: [0, 0, 0, 1, 2, 3, 4, 4.5, 5, 6, 7, 7, 7] };
-/** The check rests (hidden) on the box's left edge. */
-const CHECK_PIECE = checkMarkPiece([3, 12]);
-const buildCheckboxIcons = (radius) => {
-    const square = roundedPolygon(SQUARE_CORNERS, radius);
-    return {
-        segmentCount: 12,
-        strokeWidth: LUCIDE_STROKE_WIDTH,
-        lineCap: 'round',
-        lineJoin: 'round',
-        strokes: { unchecked: square, checked: square, 'checked-big': openBox(square) },
-        alternativeStrokes: {},
-        pairLayouts: {
-            unchecked: { 'checked-big': SQUARE_FOR_OPEN_BOX },
-            checked: { 'checked-big': SQUARE_FOR_OPEN_BOX },
-            'checked-big': { unchecked: OPEN_BOX_FOR_SQUARE, checked: OPEN_BOX_FOR_SQUARE },
-        },
-        morePieces: [CHECK_PIECE],
-        spins: {},
-        withRoundness: (roundness) => buildCheckboxIcons(LUCIDE_RADIUS * roundness),
-    };
-};
-const checkboxIcons = buildCheckboxIcons(LUCIDE_RADIUS);
-return { checkboxIcons };
-})();
-
-// sets/characters.ts
-const { withTextCharacters } = (() => {
-// The characters every digit set shares besides 0–9: `-` `/` `.` `,` `:` (space = the empty state, see morph.ts).
-// Each is drawn as one straight line, placed by the set's text layout and stroke width, and morphs to and from
-// every digit by flattening (the user's choice 2026-10-27): the digit is pressed flat onto the line.
-// `:` has two dots, so digit sets get a second piece: for every other state it repeats the first piece exactly
-// (same strokes and layouts, drawn on top of itself, so it doesn't show).
-const DIGITS = [...'0123456789'];
-/** Half the length of a dot's line, relative to the stroke width: round ends make it a dot 1.1 × the stroke wide. */
-const DOT_HALF_LENGTH = 0.05;
-/** Adds `-` `/` `.` `,` `:` to a digit set (which needs a text layout) as morphing states. */
-const withTextCharacters = (iconSet) => {
-    const { baselineY, colonDotsY } = iconSet.textLayout;
-    const dotHalfLength = iconSet.strokeWidth * DOT_HALF_LENGTH;
-    const dotY = baselineY; // dot centre on the line the digits stand on
-    const dot = (y) => line(12 - dotHalfLength, y, 12 + dotHalfLength, y);
-    const characters = {
-        '-': [line(9.5, 12, 14.5, 12)],
-        '/': [line(9.5, baselineY, 14.5, 24 - baselineY)],
-        '.': [dot(dotY)],
-        ',': [line(12.3, dotY, 11, baselineY + 2.2)], // from the dot down to the left
-        ':': [dot(colonDotsY[0])],
-    };
-    const flattenPairs = (layouts) => {
-        const merged = { ...layouts };
-        for (const character of Object.keys(characters)) {
-            merged[character] = { ...merged[character], ...Object.fromEntries(DIGITS.map((digit) => [digit, { flatten: true }])) };
-        }
-        return merged;
-    };
-    const pairLayouts = flattenPairs(iconSet.pairLayouts);
-    const strokes = { ...iconSet.strokes, ...characters };
-    return {
-        ...iconSet,
-        strokes,
-        pairLayouts,
-        morePieces: [{
-                strokes: { ...strokes, ':': [dot(colonDotsY[1])] },
-                alternativeStrokes: iconSet.alternativeStrokes,
-                pairLayouts,
-            }],
-    };
-};
-return { withTextCharacters };
-})();
-
-// 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];
-// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
-const condensedDigits = withTextCharacters({
-    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)),
-    },
-    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/folder.ts
-const { folderIcons } = (() => {
-// Icon set "folder": closed, open — Lucide 1.61.0 icons "folder", "folder-open" (ISC, see LICENSE-lucide), imported
-// with `node tools/import-lucide.ts folder folder-open`. Coordinates below are Lucide's; lucideLine / lucideArc scale
-// them into our icon box (more margin, like the digits — see lucide.ts).
-// One piece each. The open folder is one line: the front flap (from its left tip over its top edge, down its right
-// edge), the bottom, the left side, the tab, the back panel's top edge and a short bit of its right side.
-// closed ↔ open: the closed folder is traced the open folder's way ("folder-like-open", same picture) — starting at
-// its top edge, which it runs along twice: the first pass drops and tilts into the flap's top edge, the second stays
-// as the back panel's top edge.
-const lucideLine = (fromX, fromY, toX, toY) => line(...fromLucide([fromX, fromY]), ...fromLucide([toX, toY]));
-const lucideArc = (centerX, centerY, radius, startAngle, endAngle) => arc(...fromLucide([centerX, centerY]), lucideLength(radius), startAngle, endAngle);
-/** Lucide "folder": counter-clockwise from the bottom right corner. */
-const FOLDER = [
-    lucideArc(20, 18, 2, 90, 0), // bottom right corner
-    lucideLine(22, 18, 22, 8), // right side, up
-    lucideArc(20, 8, 2, 0, -90), // top right corner
-    lucideLine(20, 6, 12.1, 6), // top edge, to the left
-    lucideArc(12.0804, 4.0001, 2, 89.4383, 146.6363),
-    lucideLine(10.41, 5.1, 9.6, 3.9), // tab slope
-    lucideArc(7.9297, 5, 2, -33.367, -89.9906),
-    lucideLine(7.93, 3, 4, 3), // tab top
-    lucideArc(4, 5, 2, -90, -180), // top left corner
-    lucideLine(2, 5, 2, 18), // left side, down
-    lucideArc(4, 18, 2, 180, 90), // bottom left corner
-    lucideLine(4, 20, 20, 20), // bottom
-];
-/** Lucide "folder-open": from the flap's left tip. */
-const FOLDER_OPEN = [
-    lucideLine(6, 14, 7.5, 11.1), // flap's left tip
-    lucideArc(9.2863, 11.9995, 2, -153.2735, -91.3273),
-    lucideLine(9.24, 10, 20, 10), // flap's top edge
-    lucideArc(20.0035, 12, 2, -90.1005, 14.4776),
-    lucideLine(21.94, 12.5, 20.4, 18.5), // flap's right edge
-    lucideArc(18.4635, 18, 2, 14.4762, 90.3867),
-    lucideLine(18.45, 20, 4, 20), // bottom
-    lucideArc(4, 18, 2, 90, 180),
-    lucideLine(2, 18, 2, 5), // left side, up
-    lucideArc(4, 5, 2, 180, 270),
-    lucideLine(4, 3, 7.9, 3), // tab top
-    lucideArc(7.9196, 4.9999, 2, -90.5617, -33.3637),
-    lucideLine(9.59, 3.9, 10.4, 5.1), // tab slope
-    lucideArc(12.0703, 4, 2, 146.633, 90.0094),
-    lucideLine(12.07, 6, 18, 6), // back panel's top edge
-    lucideArc(18, 8, 2, -90, 0),
-    lucideLine(20, 8, 20, 10), // back panel's right side, down to the flap
-];
-const [bottomRight, rightSide, topRight, topEdge, tabArc1, tabSlope, tabArc2, tabTop, topLeft, leftSide, bottomLeft, bottom] = FOLDER.map(reversedStroke); // clockwise, like the open folder
-/** The closed folder traced like the open one: top edge (→ flap), round the outline, top edge again (→ back panel). */
-const FOLDER_LIKE_OPEN = [
-    topEdge, topRight, rightSide, bottomRight, bottom, bottomLeft, leftSide, topLeft,
-    tabTop, tabArc2, tabSlope, tabArc1, topEdge, topRight, lucideLine(22, 8, 22, 10),
-];
-const folderIcons = {
-    segmentCount: 20,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    strokes: { closed: FOLDER, open: FOLDER_OPEN },
-    alternativeStrokes: { 'folder-like-open': FOLDER_LIKE_OPEN },
-    // fitted with tools/check.ts (cost 7838 → 411)
-    pairLayouts: {
-        closed: {
-            open: {
-                tracing: 'folder-like-open',
-                breakpoints: [0, 0, 0, 1, 2, 2.5208, 3, 4, 4.5625, 5, 6, 6.5, 7, 8, 9, 10, 11, 12, 13, 14, 15],
-            },
-        },
-    },
-    spins: {},
-};
-return { folderIcons };
-})();
-
-// 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)
-// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
-const handwrittenDigits = withTextCharacters({
-    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),
-        ],
-    },
-    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/media.ts
-const { mediaIcons } = (() => {
-// Icon set "media": play, pause, stop — Lucide 1.61.0 icons (ISC, see LICENSE-lucide).
-// First imported with `node tools/import-lucide.ts play pause square`, then rewritten as rounded polygons so the
-// corners can be made sharper (`withRoundness`); with Lucide's radii (play 2, pause 1, stop 2) the shapes match
-// the import within 0.005 units (Lucide's own rounding).
-// Two pieces: pause has two bars; play and stop draw their single shape in both pieces (the second copy lies
-// exactly on the first, so it doesn't show — during a morph to pause the two copies separate into the bars).
-// Every shape runs clockwise from its top left, like Lucide's. Coordinates below are Lucide's; fromLucide /
-// lucideLength scale them into our icon box (more margin, like the digits — see lucide.ts).
-/** Lucide's play: a triangle (left side x 5, tip at the right) with rounded corners, starting with the top left arc. */
-const PLAY_CORNERS = [[5, 1.5174], [22.9706, 11.9998], [5, 22.4827]].map(fromLucide);
-const RIGHT_BAR_CORNERS = [[14, 3], [19, 3], [19, 21], [14, 21]].map(fromLucide);
-const LEFT_BAR_CORNERS = [[5, 3], [10, 3], [10, 21], [5, 21]].map(fromLucide);
-const SQUARE_CORNERS = [[3, 3], [21, 3], [21, 21], [3, 21]].map(fromLucide);
-const LUCIDE_RADII = { play: lucideLength(2), pause: lucideLength(1), stop: lucideLength(2) };
-// play ↔ stop (both pieces, the user's sketch): corner to corner, edge to edge, and the tip opens up and down
-// into the square's right side. Play (top left corner, top, tip, bottom, bottom left corner, left):
-// 2 + 1 + 4 + 1 + 2 + 2 segments. Stop is laid out from its top edge and then started at its top left corner,
-// so its segments line up: top left 2, top 1, top right 1, right side 2, bottom right 1, bottom 1, bottom left 2, left 2.
-const PLAY_FOR_STOP = { breakpoints: [0, 0.5, 1, 2, 2.25, 2.5, 2.75, 3, 4, 4.5, 5, 5.5, 6] };
-const STOP_FOR_PLAY = { breakpoints: [0, 1, 2, 2.5, 3, 4, 5, 5.5, 6, 6.5, 7, 7.5, 8], startSegment: 10 };
-const buildMediaIcons = (radii) => {
-    const play = roundedPolygon(PLAY_CORNERS, radii.play, true);
-    const stop = roundedPolygon(SQUARE_CORNERS, radii.stop);
-    return {
-        segmentCount: 12,
-        strokeWidth: LUCIDE_STROKE_WIDTH,
-        lineCap: 'round',
-        lineJoin: 'round',
-        strokes: { play, pause: roundedPolygon(RIGHT_BAR_CORNERS, radii.pause), stop },
-        alternativeStrokes: {},
-        // play ↔ stop: the user's sketch (above); play ↔ pause, pause ↔ stop: tools/check.ts
-        pairLayouts: {
-            play: { pause: { breakpoints: [0, 0.7292, 1, 1.6458, 2, 2.25, 3, 3.3125, 3.3125, 4, 4.2708, 5, 6] }, stop: PLAY_FOR_STOP },
-            pause: { play: { startSegment: 10 }, stop: { startSegment: 11 } },
-            stop: { pause: { breakpoints: [0, 0.8333, 1, 2, 2.2917, 2.7083, 3, 4, 4.1667, 5, 6, 7, 8] }, play: STOP_FOR_PLAY },
-        },
-        morePieces: [
-            {
-                strokes: { play, pause: roundedPolygon(LEFT_BAR_CORNERS, radii.pause), stop },
-                // only the triangle's left side, traced down and back up like the left bar's loop (top left corner out
-                // and back, left edge down, bottom left corner out and back, left edge up): the left bar inflates from
-                // that edge, while the first piece (the whole triangle) opens into the right bar
-                alternativeStrokes: {
-                    'play-left-side': [
-                        play[0], reversedStroke(play[0]), reversedStroke(play[5]), reversedStroke(play[4]), play[4], play[5],
-                    ],
-                },
-                pairLayouts: {
-                    play: {
-                        pause: { tracing: 'play-left-side', breakpoints: [0, 0.7292, 1, 1.7292, 2, 3, 3.7292, 4, 4.7292, 5, 5.7708, 6, 6] },
-                        stop: PLAY_FOR_STOP,
-                    },
-                    pause: {
-                        stop: { breakpoints: [0, 1, 2, 2.0208, 2.9792, 3, 4, 5, 6, 6.3333, 6.6667, 7, 8] },
-                    },
-                    stop: { pause: { breakpoints: [0, 0.1667, 1, 2, 3, 4, 4.8333, 5, 6, 6.2917, 6.7083, 7, 8] }, play: STOP_FOR_PLAY },
-                },
-            },
-        ],
-        spins: {},
-        withRoundness: (roundness) => buildMediaIcons({
-            play: LUCIDE_RADII.play * roundness, pause: LUCIDE_RADII.pause * roundness, stop: LUCIDE_RADII.stop * roundness,
-        }),
-    };
-};
-const mediaIcons = buildMediaIcons(LUCIDE_RADII);
-return { mediaIcons };
-})();
-
-// sets/radio.ts
-const { radioIcons } = (() => {
-// Icon set "radio": unchecked, checked, checked-big — Lucide 1.61.0 icons "circle", "circle-check",
-// "circle-check-big" (ISC, see LICENSE-lucide). Coordinates below are Lucide's; fromLucide / lucideLength scale them
-// into our icon box (more margin, like the digits — see lucide.ts). Works like "checkbox", with a circle for the box.
-// Two pieces:
-//   piece 1, the circle (radius 10 around 12,12): the same full circle in unchecked and checked (it doesn't move);
-//     checked-big opens a gap at the top right (from 17,3.335 clockwise round to 21.801,10 is the open arc) where
-//     the big check leaves the circle — both ends of the gap pull back to the gap's edges.
-//   piece 2, the check (check-mark.ts, shared with "checkbox"): drawn in like a pen from unchecked.
-const [CENTER_X, CENTER_Y] = fromLucide([12, 12]);
-const RADIUS = lucideLength(10);
-/** The open arc of circle-check-big runs clockwise from 21.801,10 to 17,3.335 (the gap is the rest). */
-const OPEN_START_ANGLE = (Math.atan2(10 - 12, 21.801 - 12) * 180) / Math.PI;
-const OPEN_END_ANGLE = (Math.atan2(3.335 - 12, 17 - 12) * 180) / Math.PI + 360;
-/** The share of the full circle that stays in checked-big. */
-const OPEN_SHARE = (OPEN_END_ANGLE - OPEN_START_ANGLE) / 360;
-/** The full circle starts where the open arc starts, so the gap is its last part. */
-const CIRCLE = [arc(CENTER_X, CENTER_Y, RADIUS, OPEN_START_ANGLE, OPEN_START_ANGLE + 360)];
-const OPEN_CIRCLE = [arc(CENTER_X, CENTER_Y, RADIUS, OPEN_START_ANGLE, OPEN_END_ANGLE)];
-// circle, unchecked/checked ↔ checked-big: the open part 10 segments, the gap 2 (one per half), started at the gap's
-// second half — so it lines up with the open arc, which gets a zero-length segment at each end of the gap where
-// the vanishing halves pull back to.
-const openPart = Array.from({ length: 11 }, (_, index) => +((index / 10) * OPEN_SHARE).toFixed(4));
-const CIRCLE_FOR_OPEN_CIRCLE = { breakpoints: [...openPart, +((1 + OPEN_SHARE) / 2).toFixed(4), 1], startSegment: 11 };
-const OPEN_CIRCLE_FOR_CIRCLE = { breakpoints: [0, ...Array.from({ length: 11 }, (_, index) => index / 10), 1] };
-const radioIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    strokes: { unchecked: CIRCLE, checked: CIRCLE, 'checked-big': OPEN_CIRCLE },
-    alternativeStrokes: {},
-    pairLayouts: {
-        unchecked: { 'checked-big': CIRCLE_FOR_OPEN_CIRCLE },
-        checked: { 'checked-big': CIRCLE_FOR_OPEN_CIRCLE },
-        'checked-big': { unchecked: OPEN_CIRCLE_FOR_CIRCLE, checked: OPEN_CIRCLE_FOR_CIRCLE },
-    },
-    // the check rests (hidden) on the circle's left edge
-    morePieces: [checkMarkPiece([2, 12])],
-    spins: {},
-};
-return { radioIcons };
-})();
-
-// sets/menu.ts
-const { menuIcons } = (() => {
-// Icon set "menu": menu (☰), close (✕), back (←) — Lucide 1.61.0 icons "menu", "x", "arrow-left" (ISC, see
-// LICENSE-lucide), imported with `node tools/import-lucide.ts menu x arrow-left`. Coordinates below are Lucide's;
-// fromLucide scales them into our icon box (more margin, like the digits — see lucide.ts).
-// Three pieces, each one straight line, lined up so the lines of every state correspond:
-//   piece 1: top line      | "\" of the ✕           | upper half of the arrowhead
-//   piece 2: middle line   | hidden on the ✕'s centre | the arrow's shaft
-//   piece 3: bottom line   | "/" of the ✕           | lower half of the arrowhead
-// Lucide draws the arrowhead as one bent line; two lines meeting with round ends look the same.
-// Every line runs from left to right, so lines move without turning over.
-/** A straight line between two Lucide points, moved into our icon box. */
-const lucideLine = (from, to) => [line(...fromLucide(from), ...fromLucide(to))];
-const piece = (strokes, extras = { alternativeStrokes: {}, pairLayouts: {} }) => ({ strokes, ...extras });
-// close ↔ back: the ✕ drawn with its lines swapped ("/" in piece 1, "\" in piece 3), so each line only shortens
-// and tilts into its half of the arrowhead instead of turning over
-const BACKSLASH = lucideLine([6, 6], [18, 18]);
-const SLASH = lucideLine([6, 18], [18, 6]);
-const menuIcons = {
-    segmentCount: 1,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...piece({
-        menu: lucideLine([4, 5], [20, 5]),
-        close: BACKSLASH,
-        back: lucideLine([5, 12], [12, 5]),
-    }, { alternativeStrokes: { 'close-swapped': SLASH }, pairLayouts: { close: { back: { tracing: 'close-swapped', breakpoints: [0, 1] } } } }),
-    morePieces: [
-        piece({
-            menu: lucideLine([4, 12], [20, 12]),
-            // a tiny line on the centre of the ✕'s "\": hidden under it
-            close: lucideLine([11.5, 11.5], [12.5, 12.5]),
-            back: lucideLine([5, 12], [19, 12]),
-        }),
-        piece({
-            menu: lucideLine([4, 19], [20, 19]),
-            close: SLASH,
-            back: lucideLine([5, 12], [12, 19]),
-        }, { alternativeStrokes: { 'close-swapped': BACKSLASH }, pairLayouts: { close: { back: { tracing: 'close-swapped', breakpoints: [0, 1] } } } }),
-    ],
-    spins: {},
-};
-return { menuIcons };
-})();
-
-// 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);
-// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
-const roundDigits = withTextCharacters({
-    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),
-        ],
-    },
-    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]),
-];
-// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
-const slimDigits = withTextCharacters({
-    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(),
-    },
-    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];
-// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
-const squareDigits = withTextCharacters({
-    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)),
-    },
-    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 };
-})();
-
-// sets/theme.ts
-const { themeIcons } = (() => {
-// Icon set "theme": light (sun), dark (moon) — Lucide 1.61.0 icons "sun", "moon" (ISC, see LICENSE-lucide).
-// Coordinates below are Lucide's; lucideLine / lucideArc / lucideCubic scale them into our icon box (see lucide.ts).
-// Nine pieces:
-//   piece 1: the sun's circle | the moon's crescent — the circle grows into the moon and its top right quarter
-//     flattens and caves in evenly into the inner curve (the circle starts where the moon's outer arc starts).
-//   pieces 2–9: one ray each | nothing — rays run from their outer end inwards; light → dark: they fly outwards and
-//     vanish (erased towards their outer tip, PairLayout.draw — the user's sketch) within the first 60 % of the
-//     morph; dark → light: they fly back in during the last 60 %. At rest the moon's ray pieces are tiny lines hidden
-//     on its outline.
-const lucideLine = (fromX, fromY, toX, toY) => line(...fromLucide([fromX, fromY]), ...fromLucide([toX, toY]));
-const lucideArc = (centerX, centerY, radius, startAngle, endAngle) => arc(...fromLucide([centerX, centerY]), lucideLength(radius), startAngle, endAngle);
-const lucideCubic = (...coordinates) => {
-    const [startX, startY, control1X, control1Y, control2X, control2Y, endX, endY] = coordinates;
-    return cubic(...fromLucide([startX, startY]), ...fromLucide([control1X, control1Y]), ...fromLucide([control2X, control2Y]), ...fromLucide([endX, endY]));
-};
-/** Lucide "moon": the outer arc clockwise from its right end, the top tip, the inner arc back, the right tip. */
-const MOON = [
-    lucideArc(11.9981, 12.0009, 9, 3.09, 266.904),
-    lucideCubic(11.512, 3.014, 11.917, 2.992, 12.129, 3.474, 11.914, 3.817),
-    lucideArc(17.002, 6.997, 6, -147.9941, -302.0059),
-    lucideCubic(20.182, 12.085, 20.526, 11.87, 21.007, 12.081, 20.985, 12.486),
-];
-/** Lucide "sun"'s circle, started at the angle where the moon's outer arc starts. */
-const SUN_CIRCLE = [lucideArc(12, 12, 4, 3.09, 363.09)];
-/** The share of the circle under the moon's outer arc (3.09° … 266.904°). */
-const OUTER_SHARE = (266.904 - 3.09) / 360;
-const CIRCLE_FOR_MOON = [
-    ...Array.from({ length: 9 }, (_, index) => (index / 8) * OUTER_SHARE),
-    ...Array.from({ length: 4 }, (_, index) => OUTER_SHARE + ((index + 1) / 4) * (1 - OUTER_SHARE)),
-].map((breakpoint) => +breakpoint.toFixed(4));
-/** Lucide "sun"'s rays, each from its outer end inwards (erasing keeps the outer end: the ray flies out). */
-const RAYS = [
-    lucideLine(12, 2, 12, 4),
-    lucideLine(19.07, 4.93, 17.66, 6.34),
-    lucideLine(22, 12, 20, 12),
-    lucideLine(19.07, 19.07, 17.66, 17.66),
-    lucideLine(12, 22, 12, 20),
-    lucideLine(4.93, 19.07, 6.34, 17.66),
-    lucideLine(2, 12, 4, 12),
-    lucideLine(4.93, 4.93, 6.34, 6.34),
-];
-/** The moon's ray pieces at rest: a tiny line on the bottom of its outline (it doesn't show). */
-const HIDDEN_RAY = [lucideLine(11.95, 21, 12.05, 21)];
-const rayPiece = (ray) => ({
-    strokes: { light: [ray], dark: HIDDEN_RAY },
-    alternativeStrokes: {},
-    pairLayouts: { dark: { light: { draw: 0.6 } } },
-});
-const themeIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    strokes: { light: SUN_CIRCLE, dark: MOON },
-    alternativeStrokes: {},
-    // even, by hand: the circle's part under the outer arc (263.8°) → 8 equal segments of the outer arc; its top right
-    // quarter (96.2°) → 4 equal segments: tip, inner curve (2), tip. (The optimizer's fit made a lumpy notch.)
-    pairLayouts: {
-        light: { dark: { breakpoints: CIRCLE_FOR_MOON } },
-        dark: { light: { breakpoints: [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 2, 2.5, 3, 4] } },
-    },
-    morePieces: RAYS.map(rayPiece),
-    spins: {},
-};
-return { themeIcons };
-})();
-
-// sets/weather.ts
-const { weatherIcons } = (() => {
-// Icon set "weather": sunny, frosty, partly-cloudy, showers, cloudy, thunder, rain, snow, drizzle — Lucide 1.61.0
-// icons "sun", "sun-snow", "cloud-sun", "cloud-sun-rain", "cloud", "cloud-lightning", "cloud-rain", "cloud-snow",
-// "cloud-drizzle" (ISC, see LICENSE-lucide). frosty is added last, onto the finished set (withFrosty, at the end).
-// Coordinates below are Lucide's; lucideLine / lucideArc scale them into our icon box (see lucide.ts).
-// Pieces:
-//   sunny ↔ cloudy (experiment, the user's idea for a more realistic look): the cloud crawls in from the left over
-//     the sun — it slides in at full size from the box's left side (PairLayout.wipe + slide; its part outside the
-//     box doesn't show), and the sun's circle and rays disappear where its front has passed. (Rejected: the cloud
-//     standing still, revealed behind the edge — user: even worse.) (Before: sunny's circle inflated into the cloud with the
-//     default layout — confirmed "great" by the user — and the rays flew out, `draw: 0.6`.)
-//   piece 1, the cloud.
-//     sunny → partly-cloudy / showers: the small cloud crawls in from the left like the big one (user's choice; before:
-//     it expanded from its bottom left corner — rejected earlier: a circle copy turning into it, drawing it in).
-//   piece 2, the sun's circle: in cloudy a copy of the cloud (drawn on top of it, so it doesn't show) — sunny ↔ cloudy
-//     morphs it exactly like piece 1. sunny → partly-cloudy: the circle opens behind the cloud — its hidden part pulls
-//     back from the middle into both ends of the arc, the arc itself stays.
-//   pieces 3–10: one ray each | nothing — rays run from their outer end inwards; sunny → partly-cloudy: the 4 rays partly-cloudy
-//     keeps stay, the other 4 fly out. At rest a missing ray is a single point (never drawn, see toPathData).
-//   pieces 11–12: showers' rain lines, which are also rain's left and middle line; piece 14: rain's right line —
-//     nothing = a single point. partly-cloudy → showers: drawn downwards like a pen, one after the other, while the
-//     cloud's bottom opens. cloudy → rain: like cloudy → thunder (the cloud rises and opens), the 3 lines drawn down
-//     one after the other, left to right; from partly-cloudy / showers / thunder the same (showers' lines stretch,
-//     the bolt is erased); sunny → rain: the cloud crawls in with its rain (its left end carried by the bolt piece).
-//   pieces 11, 12, 14 are also snow's top flakes (the top of each rain line), pieces 15–17 its bottom flakes (hidden
-//     at the bottom of each rain line in rain): rain → snow: each line shrinks into its top flake while the bottom
-//     flake comes out of its lower end. → snow otherwise: the flakes appear one after the other, row by row (ride
-//     in with the cloud from sunny).
-//   drizzle's 6 short lines sit where snow's flakes are, so they are the same 6 pieces: rain → drizzle: each line
-//     shrinks into its short top piece, the bottom piece grows out of its lower end; snow ↔ drizzle: flake ↔ short
-//     line (halves, as rain ↔ snow); → drizzle otherwise like → snow (drawn row by row, riding in from sunny).
-//   snow and drizzle have rain's cloud: every other piece morphs exactly like rain's (withRainTwins).
-// The rules of this set (the user's): sun → any cloud = the cloud crawls in from the left and covers the sun;
-//   partly-cloudy / showers → a cloud without sun = like → cloudy (the sun erased back down).
-//   piece 13: the lightning bolt | nothing (a single point) — cloudy → thunder: the cloud rises a little and opens
-//     at the bottom (like cloudy → showers), the bolt strikes down from it like a pen. partly-cloudy / showers →
-//     thunder: like → cloudy (the cloud grows, the sun is erased back down), plus the bolt (and showers' rain erased).
-//     sunny → thunder: the cloud crawls in like sunny → cloudy, the bolt rides with it. The open cloud's lower left
-//     end curls back right, so during the crawl it is carried by the first rain piece (else it would poke out of the
-//     box's left side): piece 1 is laid out without it — together they look the same.
-//   showers otherwise morphs like partly-cloudy (sunny: the cloud crawls in, the circle opens; cloudy: the cloud
-//     shrinks and opens, the sun is drawn in), plus the rain: drawn down, or (from sunny) riding in with the cloud.
-const lucideLine = (fromX, fromY, toX, toY) => line(...fromLucide([fromX, fromY]), ...fromLucide([toX, toY]));
-const lucideArc = (centerX, centerY, radius, startAngle, endAngle) => arc(...fromLucide([centerX, centerY]), lucideLength(radius), startAngle, endAngle);
-/** Lucide "cloud", clockwise from the bottom right: bottom line, big bump, top line, right bump. */
-const CLOUD = [
-    lucideLine(17.5, 19, 9, 19),
-    lucideArc(9.0018, 12, 7, 90.0147, 343.3984),
-    lucideLine(15.71, 10, 17.5, 10),
-    lucideArc(17.5, 14.5, 4.5, -90, 90),
-];
-/** sunny → partly-cloudy / showers: the small cloud (and its rain) crawls in a bit later (user's request). */
-const SMALL_CLOUD_CRAWL = [0.4, 1];
-/** CLOUD traced from its leftmost point (sunny ↔ cloudy: it slides in from the left, its left side shows last). */
-const CLOUD_FROM_LEFT = [
-    lucideArc(9.0018, 12, 7, 180, 343.3984),
-    ...CLOUD.slice(2),
-    CLOUD[0],
-    lucideArc(9.0018, 12, 7, 90.0147, 180),
-];
-/** The sun's circle traced from its leftmost point (sunny ↔ cloudy: the wiping edge reaches it first). */
-const CIRCLE_FROM_LEFT = [lucideArc(12, 12, 4, 180, 540)];
-/** A wipe's piece laid out along an alternative tracing with the default spread. */
-const tracedForWipe = (tracing, strokes) => ({ tracing, breakpoints: defaultBreakpoints(strokes, 12) });
-/** The angle (from the icon centre) where the cloud starts, so the circle starts in the same direction. */
-const CIRCLE_START = 51.84;
-/** Lucide "sun"'s circle, clockwise from CIRCLE_START. */
-const SUN_CIRCLE = [lucideArc(12, 12, 4, CIRCLE_START, CIRCLE_START + 360)];
-/** Lucide "cloud-sun"'s small cloud, clockwise from the bottom right (the same build as CLOUD). */
-const SMALL_CLOUD = [
-    lucideLine(13, 22, 7, 22),
-    lucideArc(7.001, 17, 5, 90.0117, 348.463),
-    lucideLine(11.9, 16, 13, 16),
-    lucideArc(13, 19, 3, -90, 90),
-];
-/** SMALL_CLOUD traced from its leftmost point (sunny ↔ partly-cloudy: it slides in like the big cloud). */
-const SMALL_CLOUD_FROM_LEFT = [
-    lucideArc(7.001, 17, 5, 180, 348.463),
-    ...SMALL_CLOUD.slice(2),
-    SMALL_CLOUD[0],
-    lucideArc(7.001, 17, 5, 90.0117, 180),
-];
-/** Lucide "cloud-sun-rain"'s cloud: SMALL_CLOUD open at the bottom (where the rain falls), from its lower left end. */
-const OPEN_SMALL_CLOUD = [
-    lucideArc(7.0014, 17.0019, 5, 143.1569, 348.4412),
-    lucideLine(11.9, 16, 13, 16),
-    lucideArc(13.0044, 19, 3, -90.0842, 48.3025),
-];
-/** Where SMALL_CLOUD's gap (bottom) has its middle: the gap's two halves pull back into its ends from here. */
-const GAP_MIDDLE_X = 8.77;
-// partly-cloudy ↔ showers: the closed cloud traced from the gap's middle — 2 segments to the gap's left end, the open
-// cloud's part (4 along the big bump, 1 top line, 3 along the right bump), 2 back to the middle; the open cloud gets
-// 2 zero-length segments at each end.
-const CLOSED_FOR_OPEN = {
-    tracing: 'small-cloud-from-gap-middle',
-    breakpoints: [0, 1, 1.2057, 1.4043, 1.6029, 1.8014, 2, 3, 3.2561, 3.5122, 3.7683, 4, 5],
-};
-const OPEN_FOR_CLOSED = { breakpoints: [0, 0, 0, 0.25, 0.5, 0.75, 1, 2, 2.3333, 2.6667, 3, 3, 3] };
-/** The same gap on the big CLOUD (its bottom, from 143.16° on the big bump to 48.3° on the right bump). */
-const BIG_GAP_MIDDLE_X = 11.65;
-// cloudy ↔ showers: the big cloud traced from its gap's middle, split like CLOSED_FOR_OPEN — it shrinks and opens
-const BIG_CLOSED_FOR_OPEN = {
-    tracing: 'cloud-from-gap-middle',
-    breakpoints: [0, 1, 1.2097, 1.4073, 1.6049, 1.8024, 2, 3, 3.2561, 3.5122, 3.7683, 4, 5],
-};
-/** Lucide "cloud-lightning"'s cloud: CLOUD 2 units higher, open at the bottom (where the bolt strikes), from its
- * lower left end. */
-const THUNDER_CLOUD = [
-    lucideArc(9.0026, 10.0027, 7, 115.4004, 343.3756),
-    lucideLine(15.71, 8, 17.5, 8),
-    lucideArc(17.5079, 12.5, 4.5, -90.1, 83.7212),
-];
-/** The middle of CLOUD's part that is missing in THUNDER_CLOUD (its bottom, from 115.4° to 83.7°). */
-const THUNDER_GAP_MIDDLE_X = 11.94;
-// cloudy ↔ thunder: CLOUD traced from that middle — 2 segments to the gap's left end, 4 along the big bump, 1 top line,
-// 3 along the right bump, 2 back to the middle; the open cloud gets 2 zero-length segments at each end (OPEN_FOR_CLOSED).
-const CLOUD_FROM_THUNDER_GAP_MIDDLE = [
-    lucideLine(THUNDER_GAP_MIDDLE_X, 19, 9, 19),
-    ...CLOUD.slice(1),
-    lucideLine(17.5, 19, THUNDER_GAP_MIDDLE_X, 19),
-];
-const CLOUD_FOR_THUNDER = {
-    tracing: 'cloud-from-thunder-gap-middle',
-    breakpoints: [0, 1, 1.1002, 1.3252, 1.5501, 1.7751, 2, 3, 3.3217, 3.6434, 3.9651, 4, 5],
-};
-/** sunny ↔ thunder: THUNDER_CLOUD split at its leftmost point — the rest (from there over the top), and its lower
- * left end (from there down), each running away from the left side so the crawl shows one stretch of it. */
-const THUNDER_CLOUD_FROM_LEFT = [
-    lucideArc(9.0026, 10.0027, 7, 180, 343.3756),
-    ...THUNDER_CLOUD.slice(1),
-];
-const THUNDER_CLOUD_LEFT_END = [lucideArc(9.0026, 10.0027, 7, 180, 115.4004)];
-/** Lucide "cloud-lightning"'s bolt, from the top down. */
-const BOLT = [lucideLine(13, 12, 10, 17), lucideLine(10, 17, 14, 17), lucideLine(14, 17, 11, 22)];
-/** cloudy → thunder: the bolt strikes in the second half of the morph. */
-const BOLT_DRAWN = [0.5, 0.85];
-/** Lucide "cloud-rain"'s cloud (also "cloud-snow", "cloud-drizzle"): THUNDER_CLOUD with a wider gap, from its lower
- * left end. */
-const RAIN_CLOUD = [
-    lucideArc(9.0026, 10.0027, 7, 135.615, 343.3757),
-    lucideLine(15.71, 8, 17.5, 8),
-    lucideArc(17.5005, 12.5, 4.5, -90.0065, 56.2589),
-];
-/** The middle of CLOUD's part that is missing in RAIN_CLOUD (its bottom, from 135.6° to 56.3°). */
-const RAIN_GAP_MIDDLE_X = 11.79;
-const CLOUD_FROM_RAIN_GAP_MIDDLE = [
-    lucideLine(RAIN_GAP_MIDDLE_X, 19, 9, 19),
-    ...CLOUD.slice(1),
-    lucideLine(17.5, 19, RAIN_GAP_MIDDLE_X, 19),
-];
-// cloudy ↔ rain: split like CLOUD_FOR_THUNDER (2 | 4 big bump | 1 | 3 right bump | 2), RAIN_CLOUD with OPEN_FOR_CLOSED
-const CLOUD_FOR_RAIN = {
-    tracing: 'cloud-from-rain-gap-middle',
-    breakpoints: [0, 1, 1.18, 1.385, 1.59, 1.795, 2, 3, 3.2709, 3.5417, 3.8126, 4, 5],
-};
-/** sunny ↔ rain: RAIN_CLOUD split at its leftmost point, like THUNDER_CLOUD_FROM_LEFT / THUNDER_CLOUD_LEFT_END. */
-const RAIN_CLOUD_FROM_LEFT = [lucideArc(9.0026, 10.0027, 7, 180, 343.3757), ...RAIN_CLOUD.slice(1)];
-const RAIN_CLOUD_LEFT_END = [lucideArc(9.0026, 10.0027, 7, 180, 135.615)];
-/** Lucide "cloud-rain"'s lines, left to right, each from the top down. */
-const HEAVY_RAIN_LINES = [lucideLine(8, 14, 8, 20), lucideLine(12, 16, 12, 22), lucideLine(16, 14, 16, 20)];
-/** cloudy → rain: the lines are drawn one after the other. */
-const HEAVY_RAIN_DRAWN = [[0.45, 0.8], [0.55, 0.9], [0.65, 1]]; // once the bottom has opened
-/** Lucide "cloud-snow"'s flake centres for the pieces 11, 12, 14 (top flakes) and 15, 16, 17 (bottom flakes). */
-const SNOWFLAKE_CENTERS = [[8, 15], [12, 17], [16, 15], [8, 19], [12, 21], [16, 19]];
-/**
- * Lucide draws a flake as a dot (a tiny round-capped line, as wide as the line). Ours are a little bigger so they
- * show at small sizes (user's request): a tiny closed octagon of this radius, which the thick line fills in.
- */
-const SNOWFLAKE_RADIUS = 0.25;
-const SNOWFLAKES = SNOWFLAKE_CENTERS.map(([centerX, centerY]) => {
-    // clockwise from the top corner
-    const corners = Array.from({ length: 8 }, (_, index) => [
-        centerX + SNOWFLAKE_RADIUS * Math.cos(((index - 2) * Math.PI) / 4),
-        centerY + SNOWFLAKE_RADIUS * Math.sin(((index - 2) * Math.PI) / 4),
-    ]);
-    return corners.map((corner, index) => lucideLine(...corner, ...corners[(index + 1) % 8]));
-});
-// line → flake (rain / showers → snow): the line traced down and back up, its down pass ↔ the flake's right half, its
-// up pass ↔ the left half — the line narrows into the flake (segment by segment the octagon's corners zigzag)
-const LINE_OUT_AND_BACK = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((index) => +(index / 6).toFixed(4));
-const FLAKE_IN_HALVES = { breakpoints: [0, 0.5, 1, 2, 3, 3.5, 4, 4.5, 5, 6, 7, 7.5, 8] };
-const outAndBack = (stroke) => [stroke, reversedStroke(stroke)];
-/** → snow / drizzle: when each flake / short line appears (row by row: 8,15 · 16,15 · 12,17 · 8,19 · 16,19 · 12,21). */
-const SNOWFLAKE_STARTS = [0.45, 0.59, 0.52, 0.66, 0.8, 0.73];
-const fallingDrawn = (flakeIndex) => ({ draw: [SNOWFLAKE_STARTS[flakeIndex], SNOWFLAKE_STARTS[flakeIndex] + 0.1] });
-/** Lucide "cloud-drizzle"'s short lines (top down), in the order of the flakes (each one where a flake is). */
-const DRIZZLE_LINES = [[8, 14], [12, 16], [16, 14], [8, 19], [12, 21], [16, 19]]
-    .map(([x, y]) => lucideLine(x, y, x, y + 1));
-/** Pair layouts of several groups put together (per state). */
-const mergePairLayouts = (...groups) => {
-    const merged = {};
-    for (const group of groups) {
-        for (const [state, byOtherState] of Object.entries(group))
-            merged[state] = { ...merged[state], ...byOtherState };
-    }
-    return merged;
-};
-/** The drizzle pairs of precipitation piece `fallingIndex` (0…5) — showers' own lines (0, 1) just shorten. */
-const drizzlePairLayouts = (fallingIndex, hasShowersLine) => ({
-    ...Object.fromEntries(['cloudy', 'partly-cloudy', 'thunder', ...(hasShowersLine ? [] : ['showers'])]
-        .map((state) => [state, { drizzle: fallingDrawn(fallingIndex) }])),
-    sunny: { drizzle: RIDING_IN },
-    snow: { drizzle: FLAKE_IN_HALVES },
-    drizzle: { snow: { tracing: 'drizzle-line-out-and-back', breakpoints: LINE_OUT_AND_BACK } },
-});
-/** sunny → rain / snow: the precipitation rides in with the crawling cloud. */
-const RIDING_IN = { wipe: 'right', slide: true };
-/** Lucide "cloud-sun-rain"'s rain lines, each from the top down. */
-const RAIN_LINES = [lucideLine(7, 19, 7, 21), lucideLine(11, 20, 11, 22)];
-/** partly-cloudy → showers: the rain lines are drawn one after the other while the cloud opens. */
-const RAIN_DRAWN = [[0.35, 0.75], [0.55, 0.95]];
-/** Lucide "cloud-sun"'s sun: the part of the circle above the cloud, clockwise from its left end. */
-const SUN_ARC = [lucideArc(12.0004, 11.9985, 4, -119.6437, 9.3742)];
-/** The middle of the sun's hidden part (behind the cloud), from where it pulls back into both ends of SUN_ARC. */
-const HIDDEN_MIDDLE = (9.3742 + 240.3563) / 2;
-/** Lucide "sun"'s rays, each from its outer end inwards (erasing keeps the outer end: the ray flies out). */
-const RAYS = [
-    lucideLine(12, 2, 12, 4),
-    lucideLine(19.07, 4.93, 17.66, 6.34),
-    lucideLine(22, 12, 20, 12),
-    lucideLine(19.07, 19.07, 17.66, 17.66),
-    lucideLine(12, 22, 12, 20),
-    lucideLine(4.93, 19.07, 6.34, 17.66),
-    lucideLine(2, 12, 4, 12),
-    lucideLine(4.93, 4.93, 6.34, 6.34),
-];
-/** A missing piece at rest: a single point (never drawn), here on the cloud's bottom line. */
-const pointAt = (x, y) => [lucideLine(x, y, x, y)];
-const HIDDEN_RAY = pointAt(13, 19);
-/** partly-cloudy's and showers' missing rays (bottom right, bottom, bottom left, left). */
-const HIDDEN_RAY_PARTLY = pointAt(10, 22);
-const MISSING_RAYS_PARTLY = [3, 4, 5, 6];
-// sunny ↔ partly-cloudy, the sun's circle: traced from the middle of the hidden part, 4 segments to the arc's left
-// end, 4 along the arc (it stays), 4 back to the middle; the arc gets 4 zero-length segments at each end.
-const ARC_SHARE = (9.3742 + 119.6437) / 360;
-const CIRCLE_FOR_SUN_ARC = {
-    tracing: 'circle-from-hidden-middle',
-    breakpoints: [
-        ...[0, 1, 2, 3].map((index) => (index / 4) * ((1 - ARC_SHARE) / 2)),
-        ...[0, 1, 2, 3].map((index) => (1 - ARC_SHARE) / 2 + (index / 4) * ARC_SHARE),
-        ...[0, 1, 2, 3, 4].map((index) => (1 + ARC_SHARE) / 2 + (index / 4) * ((1 - ARC_SHARE) / 2)),
-    ].map((breakpoint) => +breakpoint.toFixed(4)),
-};
-const SUN_ARC_FOR_CIRCLE = { breakpoints: [0, 0, 0, 0, 0, 0.25, 0.5, 0.75, 1, 1, 1, 1, 1] };
-// cloudy → partly-cloudy: the sun is drawn like a pen from the arc's lower right end up over the top (the user's
-// direction), and the kept rays follow one after another, each growing out from the sun when the pen passes it.
-const SUN_ARC_DRAWN = [0.45, 0.85]; // after the cloud has shrunk away from the arc's start
-const RAY_DRAW_DURATION = 0.15;
-/** Kept rays → how far along the arc (from its lower right end, 0…1) the pen is when the ray starts. */
-const KEPT_RAY_PEN_POSITIONS = { 2: 0.07, 1: 0.42, 0: 0.77, 7: 1 };
-const rayDrawnAfterPen = (penPosition) => {
-    const start = SUN_ARC_DRAWN[0] + penPosition * (SUN_ARC_DRAWN[1] - SUN_ARC_DRAWN[0]);
-    return [+start.toFixed(4), +Math.min(start + RAY_DRAW_DURATION, 1).toFixed(4)];
-};
-/** States drawn with rain's cloud: apart from the precipitation they morph exactly like rain. */
-const RAIN_TWINS = ['snow', 'drizzle'];
-/** A piece that is the same in rain and its twins: the twins get rain's strokes and pair layouts. */
-const withRainTwins = (pieceSet) => {
-    const pairLayouts = Object.fromEntries(Object.entries(pieceSet.pairLayouts).map(([state, layouts]) => [state, { ...layouts, ...(layouts.rain ? Object.fromEntries(RAIN_TWINS.map((twin) => [twin, layouts.rain])) : {}) }]));
-    for (const twin of RAIN_TWINS)
-        if (pieceSet.pairLayouts.rain)
-            pairLayouts[twin] = pieceSet.pairLayouts.rain;
-    return {
-        ...pieceSet,
-        strokes: { ...pieceSet.strokes, ...Object.fromEntries(RAIN_TWINS.map((twin) => [twin, pieceSet.strokes.rain])) },
-        pairLayouts,
-    };
-};
-const sunCirclePiece = {
-    strokes: { sunny: SUN_CIRCLE, cloudy: CLOUD, 'partly-cloudy': SUN_ARC, showers: SUN_ARC, thunder: THUNDER_CLOUD, rain: RAIN_CLOUD },
-    alternativeStrokes: {
-        'cloud-from-rain-gap-middle': CLOUD_FROM_RAIN_GAP_MIDDLE,
-        'cloud-from-thunder-gap-middle': CLOUD_FROM_THUNDER_GAP_MIDDLE,
-        'circle-from-hidden-middle': [lucideArc(12, 12, 4, HIDDEN_MIDDLE, HIDDEN_MIDDLE + 360)],
-        'circle-from-left': CIRCLE_FROM_LEFT,
-    },
-    pairLayouts: {
-        sunny: {
-            cloudy: tracedForWipe('circle-from-left', CIRCLE_FROM_LEFT),
-            thunder: tracedForWipe('circle-from-left', CIRCLE_FROM_LEFT),
-            rain: tracedForWipe('circle-from-left', CIRCLE_FROM_LEFT),
-            'partly-cloudy': CIRCLE_FOR_SUN_ARC,
-            showers: CIRCLE_FOR_SUN_ARC,
-        },
-        cloudy: {
-            sunny: { wipe: 'left' },
-            'partly-cloudy': { draw: SUN_ARC_DRAWN },
-            showers: { draw: SUN_ARC_DRAWN },
-            thunder: CLOUD_FOR_THUNDER,
-            rain: CLOUD_FOR_RAIN,
-        },
-        rain: {
-            cloudy: OPEN_FOR_CLOSED,
-            sunny: { wipe: 'left' },
-            'partly-cloudy': { draw: SUN_ARC_DRAWN },
-            showers: { draw: SUN_ARC_DRAWN },
-        },
-        'partly-cloudy': { sunny: SUN_ARC_FOR_CIRCLE, cloudy: { reversed: true }, thunder: { reversed: true }, rain: { reversed: true } },
-        showers: { sunny: SUN_ARC_FOR_CIRCLE, cloudy: { reversed: true }, thunder: { reversed: true }, rain: { reversed: true } },
-        // the sun goes like → cloudy: crawled over from sunny, erased back down from partly-cloudy / showers
-        thunder: { cloudy: OPEN_FOR_CLOSED, sunny: { wipe: 'left' }, 'partly-cloudy': { draw: SUN_ARC_DRAWN }, showers: { draw: SUN_ARC_DRAWN } },
-    },
-};
-const rayPiece = (ray, rayIndex) => {
-    const missingInPartly = MISSING_RAYS_PARTLY.includes(rayIndex);
-    return {
-        strokes: {
-            sunny: [ray],
-            cloudy: HIDDEN_RAY,
-            'partly-cloudy': missingInPartly ? HIDDEN_RAY_PARTLY : [ray],
-            showers: missingInPartly ? HIDDEN_RAY_PARTLY : [ray],
-            thunder: HIDDEN_RAY,
-            rain: HIDDEN_RAY,
-        },
-        alternativeStrokes: {},
-        pairLayouts: {
-            cloudy: { sunny: { wipe: 'left' } },
-            thunder: { sunny: { wipe: 'left' } },
-            rain: { sunny: { wipe: 'left' } },
-            ...(missingInPartly
-                ? { 'partly-cloudy': { sunny: { draw: 0.6 } }, showers: { sunny: { draw: 0.6 } } }
-                // drawn from the sun outwards (the rays run outer end → inner end, so reversed)
-                : {
-                    cloudy: {
-                        sunny: { wipe: 'left' },
-                        'partly-cloudy': { draw: rayDrawnAfterPen(KEPT_RAY_PEN_POSITIONS[rayIndex]) },
-                        showers: { draw: rayDrawnAfterPen(KEPT_RAY_PEN_POSITIONS[rayIndex]) },
-                    },
-                    thunder: {
-                        sunny: { wipe: 'left' },
-                        'partly-cloudy': { draw: rayDrawnAfterPen(KEPT_RAY_PEN_POSITIONS[rayIndex]) },
-                        showers: { draw: rayDrawnAfterPen(KEPT_RAY_PEN_POSITIONS[rayIndex]) },
-                    },
-                    rain: {
-                        sunny: { wipe: 'left' },
-                        'partly-cloudy': { draw: rayDrawnAfterPen(KEPT_RAY_PEN_POSITIONS[rayIndex]) },
-                        showers: { draw: rayDrawnAfterPen(KEPT_RAY_PEN_POSITIONS[rayIndex]) },
-                    },
-                    'partly-cloudy': { cloudy: { reversed: true }, thunder: { reversed: true }, rain: { reversed: true } },
-                    showers: { cloudy: { reversed: true }, thunder: { reversed: true }, rain: { reversed: true } },
-                }),
-        },
-    };
-};
-/** Showers' rain line (if it has one) | rain's line: pieces 11, 12 (both) and 14 (rain only). */
-const rainPiece = (heavyRainLine, rainIndex) => {
-    const showersLine = RAIN_LINES[rainIndex];
-    const top = (showersLine ?? heavyRainLine).from;
-    const nothing = [line(...top, ...top)];
-    const carriesCloudEnd = rainIndex === 0;
-    return {
-        strokes: {
-            sunny: nothing,
-            cloudy: nothing,
-            'partly-cloudy': nothing,
-            showers: showersLine ? [showersLine] : nothing,
-            thunder: nothing,
-            rain: [heavyRainLine],
-            snow: SNOWFLAKES[rainIndex],
-            drizzle: [DRIZZLE_LINES[rainIndex]],
-        },
-        alternativeStrokes: {
-            ...(carriesCloudEnd ? { 'thunder-cloud-left-end': THUNDER_CLOUD_LEFT_END } : {}),
-            'rain-line-out-and-back': outAndBack(heavyRainLine),
-            'drizzle-line-out-and-back': outAndBack(DRIZZLE_LINES[rainIndex]),
-            ...(showersLine ? { 'showers-line-out-and-back': outAndBack(showersLine) } : {}),
-        },
-        pairLayouts: mergePairLayouts(drizzlePairLayouts(rainIndex, Boolean(showersLine)), showersLine
-            ? {
-                cloudy: { showers: { draw: RAIN_DRAWN[rainIndex] }, rain: { draw: HEAVY_RAIN_DRAWN[rainIndex] }, snow: fallingDrawn(rainIndex) },
-                'partly-cloudy': {
-                    showers: { draw: RAIN_DRAWN[rainIndex] },
-                    rain: { draw: HEAVY_RAIN_DRAWN[rainIndex] },
-                    snow: fallingDrawn(rainIndex),
-                },
-                // sunny → showers / rain: the rain rides in with the crawling cloud; sunny → thunder: it carries the cloud's
-                // left end
-                sunny: {
-                    showers: { wipe: 'right', slide: true, draw: SMALL_CLOUD_CRAWL },
-                    rain: RIDING_IN,
-                    snow: RIDING_IN,
-                    ...(carriesCloudEnd ? { thunder: RIDING_IN } : {}),
-                },
-                // showers → thunder: erased back up; thunder → rain: drawn down
-                thunder: {
-                    showers: { draw: RAIN_DRAWN[rainIndex] },
-                    rain: { draw: HEAVY_RAIN_DRAWN[rainIndex] },
-                    snow: fallingDrawn(rainIndex),
-                    ...(carriesCloudEnd ? { sunny: tracedForWipe('thunder-cloud-left-end', THUNDER_CLOUD_LEFT_END) } : {}),
-                },
-                rain: { snow: { tracing: 'rain-line-out-and-back', breakpoints: LINE_OUT_AND_BACK } },
-                showers: { snow: { tracing: 'showers-line-out-and-back', breakpoints: LINE_OUT_AND_BACK } },
-                snow: { rain: FLAKE_IN_HALVES, showers: FLAKE_IN_HALVES },
-            }
-            : {
-                ...Object.fromEntries(['cloudy', 'partly-cloudy', 'showers', 'thunder']
-                    .map((state) => [state, { rain: { draw: HEAVY_RAIN_DRAWN[rainIndex] }, snow: fallingDrawn(rainIndex) }])),
-                sunny: { rain: RIDING_IN, snow: RIDING_IN },
-                rain: { snow: { tracing: 'rain-line-out-and-back', breakpoints: LINE_OUT_AND_BACK } },
-                snow: { rain: FLAKE_IN_HALVES },
-            }),
-    };
-};
-/** Snow's bottom flakes / drizzle's bottom lines (pieces 15–17): in rain hidden at the bottom of its line, so
- * rain → snow / drizzle pulls them out of it. */
-const bottomFlakePiece = (flakeIndex) => {
-    const nothing = pointAt(...SNOWFLAKE_CENTERS[flakeIndex]);
-    const [lineBottomX, lineBottomY] = HEAVY_RAIN_LINES[flakeIndex - 3].to;
-    return {
-        strokes: {
-            sunny: nothing,
-            cloudy: nothing,
-            'partly-cloudy': nothing,
-            showers: nothing,
-            thunder: nothing,
-            rain: [line(lineBottomX, lineBottomY, lineBottomX, lineBottomY)],
-            snow: SNOWFLAKES[flakeIndex],
-            drizzle: [DRIZZLE_LINES[flakeIndex]],
-        },
-        alternativeStrokes: { 'drizzle-line-out-and-back': outAndBack(DRIZZLE_LINES[flakeIndex]) },
-        pairLayouts: mergePairLayouts(drizzlePairLayouts(flakeIndex, false), {
-            ...Object.fromEntries(['cloudy', 'partly-cloudy', 'showers', 'thunder'].map((state) => [state, { snow: fallingDrawn(flakeIndex) }])),
-            sunny: { snow: RIDING_IN },
-        }),
-    };
-};
-const boltTop = pointAt(13, 12);
-const boltPiece = {
-    strokes: { sunny: boltTop, cloudy: boltTop, 'partly-cloudy': boltTop, showers: boltTop, thunder: BOLT, rain: boltTop },
-    // (snow: like rain, withRainTwins)
-    alternativeStrokes: { 'rain-cloud-left-end': RAIN_CLOUD_LEFT_END },
-    pairLayouts: {
-        cloudy: { thunder: { draw: BOLT_DRAWN } },
-        'partly-cloudy': { thunder: { draw: BOLT_DRAWN } },
-        showers: { thunder: { draw: BOLT_DRAWN } },
-        // thunder → rain: pulled back up into the cloud
-        rain: { thunder: { draw: BOLT_DRAWN }, sunny: tracedForWipe('rain-cloud-left-end', RAIN_CLOUD_LEFT_END) },
-        // rides in with the crawling cloud; sunny → rain: carries the rain cloud's left end
-        sunny: { thunder: { wipe: 'right', slide: true }, rain: { wipe: 'right', slide: true } },
-    },
-};
-const rainTwinnedIcons = withRainTwins({
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    strokes: {
-        sunny: SUN_CIRCLE,
-        cloudy: CLOUD,
-        'partly-cloudy': SMALL_CLOUD,
-        showers: OPEN_SMALL_CLOUD,
-        thunder: THUNDER_CLOUD,
-        rain: RAIN_CLOUD,
-    },
-    alternativeStrokes: {
-        'cloud-from-rain-gap-middle': CLOUD_FROM_RAIN_GAP_MIDDLE,
-        'cloud-from-thunder-gap-middle': CLOUD_FROM_THUNDER_GAP_MIDDLE,
-        'thunder-cloud-from-left': THUNDER_CLOUD_FROM_LEFT,
-        'rain-cloud-from-left': RAIN_CLOUD_FROM_LEFT,
-        'cloud-from-left': CLOUD_FROM_LEFT,
-        'small-cloud-from-left': SMALL_CLOUD_FROM_LEFT,
-        'cloud-from-gap-middle': [
-            lucideLine(BIG_GAP_MIDDLE_X, 19, 9, 19),
-            ...CLOUD.slice(1),
-            lucideLine(17.5, 19, BIG_GAP_MIDDLE_X, 19),
-        ],
-        'small-cloud-from-gap-middle': [
-            lucideLine(GAP_MIDDLE_X, 22, 7, 22),
-            ...SMALL_CLOUD.slice(1),
-            lucideLine(13, 22, GAP_MIDDLE_X, 22),
-        ],
-    },
-    pairLayouts: {
-        // every cloud crawls in from the left over the sun
-        sunny: {
-            cloudy: { wipe: 'right', slide: true },
-            'partly-cloudy': { wipe: 'right', slide: true, draw: SMALL_CLOUD_CRAWL },
-            showers: { wipe: 'right', slide: true, draw: SMALL_CLOUD_CRAWL },
-            thunder: { wipe: 'right', slide: true },
-            rain: { wipe: 'right', slide: true },
-        },
-        cloudy: { sunny: tracedForWipe('cloud-from-left', CLOUD_FROM_LEFT), showers: BIG_CLOSED_FOR_OPEN, thunder: CLOUD_FOR_THUNDER, rain: CLOUD_FOR_RAIN },
-        'partly-cloudy': {
-            sunny: tracedForWipe('small-cloud-from-left', SMALL_CLOUD_FROM_LEFT),
-            showers: CLOSED_FOR_OPEN,
-            thunder: CLOSED_FOR_OPEN,
-            rain: CLOSED_FOR_OPEN,
-        },
-        showers: { 'partly-cloudy': OPEN_FOR_CLOSED, cloudy: OPEN_FOR_CLOSED },
-        rain: {
-            cloudy: OPEN_FOR_CLOSED,
-            'partly-cloudy': OPEN_FOR_CLOSED,
-            sunny: tracedForWipe('rain-cloud-from-left', RAIN_CLOUD_FROM_LEFT),
-        },
-        thunder: {
-            cloudy: OPEN_FOR_CLOSED,
-            'partly-cloudy': OPEN_FOR_CLOSED,
-            sunny: tracedForWipe('thunder-cloud-from-left', THUNDER_CLOUD_FROM_LEFT),
-        },
-    },
-    morePieces: [
-        ...[sunCirclePiece, ...RAYS.map(rayPiece)].map(withRainTwins),
-        ...HEAVY_RAIN_LINES.slice(0, 2).map(rainPiece),
-        withRainTwins(boltPiece),
-        rainPiece(HEAVY_RAIN_LINES[2], 2),
-        ...[3, 4, 5].map(bottomFlakePiece),
-    ],
-    spins: {},
-});
-// ---- frosty (Lucide "sun-snow"): half a small sun on the left, half a snowflake on the right ----
-// sunny ↔ frosty: the sun shrinks to its left half (its right half pulls back into the half's ends) while a copy of
-//   that right half (the bolt piece) straightens into the snowflake's spine; the 3 right rays bend into its branches,
-//   the other 5 move to frosty's shorter rays.
-// frosty → any cloud state (the set's rule): the cloud crawls in from the left and covers everything (the rain etc.
-//   rides along). A wipe needs every piece to show one stretch, so during the crawl the half sun's upper quarter and
-//   the spine (4 x-monotone parts) are carried by 6 spare pieces (a single point at rest, in every state); the 6th
-//   carries the open clouds' lower left end. frosty ↔ partly-cloudy / showers: the half sun becomes their sun arc,
-//   the kept rays move, the rest is covered.
-/** frosty's half sun, clockwise from its bottom (Lucide: centre 10,12, radius 3). */
-const HALF_SUN = [lucideArc(10, 12, 3, 90, 270)];
-/** For the crawl: from its leftmost point down / up (each one stretch for the wipe). */
-const HALF_SUN_LOWER = [lucideArc(10, 12, 3, 180, 90)];
-const HALF_SUN_UPPER = [lucideArc(10, 12, 3, 180, 270)];
-/** frosty's rays by ray piece (outer end first), the right three bent into the snowflake's branches. */
-const FROSTY_RAYS = [
-    [lucideLine(10, 3, 10, 4)],
-    [lucideLine(18, 6, 15.25, 6.5), lucideLine(15.25, 6.5, 14, 4)],
-    [lucideLine(20, 10, 18.5, 12), lucideLine(18.5, 12, 20, 14)],
-    [lucideLine(18, 18, 15.25, 17.5), lucideLine(15.25, 17.5, 14, 20)],
-    [lucideLine(10, 21, 10, 20)],
-    [lucideLine(3.64, 18.36, 4.34, 17.66)],
-    [lucideLine(2, 12, 3, 12)],
-    [lucideLine(3.64, 5.64, 4.34, 6.34)],
-];
-/** The snowflake's spine as one line: upper arm, out along the middle arm and back, lower arm. */
-const SPINE = [
-    lucideLine(17, 3, 14, 9), lucideLine(14, 9, 15.5, 12), lucideLine(15.5, 12, 22, 12),
-    lucideLine(22, 12, 15.5, 12), lucideLine(15.5, 12, 14, 15), lucideLine(14, 15, 17, 21),
-];
-/** The spine in parts that each run one way across (for the crawl). */
-const SPINE_PARTS = [
-    [lucideLine(17, 3, 14, 9)],
-    [lucideLine(14, 9, 15.5, 12), lucideLine(15.5, 12, 22, 12)],
-    [lucideLine(14, 15, 15.5, 12)],
-    [lucideLine(14, 15, 17, 21)],
-];
-// sunny ↔ frosty: the circle traced from its right point — 3 segments of its lower right quarter pull back into the half
-// sun's bottom end, 6 along the left half, 3 of the upper right quarter into its top end
-const CIRCLE_FOR_HALF_SUN = {
-    tracing: 'circle-from-right',
-    breakpoints: Array.from({ length: 13 }, (_, index) => +(index / 12).toFixed(4)),
-};
-const HALF_SUN_FOR_CIRCLE = { breakpoints: [0, 0, 0, 0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1, 1, 1, 1] };
-/** The circle's right half (top → right → bottom): the bolt piece's start in sunny → frosty (under the circle). */
-const CIRCLE_RIGHT_HALF = [lucideArc(12, 12, 4, -90, 90)];
-const CLOUD_STATES = ['cloudy', 'partly-cloudy', 'showers', 'thunder', 'rain', 'snow', 'drizzle'];
-/** Cloud states that keep a sun (its arc and 4 rays). */
-const SUN_CLOUD_STATES = ['partly-cloudy', 'showers'];
-const isNothing = (strokes) => strokes.length === 1 && strokes[0].kind === 'line' && strokes[0].from.every((value, axis) => value === strokes[0].to[axis]);
-const POINT_LAYOUT = { tracing: 'nothing', breakpoints: Array.from({ length: 13 }, (_, index) => +(index / 12).toFixed(4)) };
-/** The open clouds' lower left ends, carried by a spare piece while they crawl in. */
-const CLOUD_LEFT_ENDS = {
-    thunder: THUNDER_CLOUD_LEFT_END, rain: RAIN_CLOUD_LEFT_END, snow: RAIN_CLOUD_LEFT_END, drizzle: RAIN_CLOUD_LEFT_END,
-};
-const COVERED = { wipe: 'left' };
-/** `pieceSet` with frosty's strokes and `layouts[state][otherState]` added. */
-const addFrosty = (pieceSet, strokes, layouts, alternativeStrokes = {}) => ({
-    strokes: { ...pieceSet.strokes, frosty: strokes },
-    alternativeStrokes: { ...pieceSet.alternativeStrokes, ...alternativeStrokes },
-    pairLayouts: mergePairLayouts(pieceSet.pairLayouts, layouts),
-});
-/** Layouts for the given cloud states X: `frosty.X` and `X.frosty` (either may be left out). */
-const forCloudStates = (states, frostySide, otherSide) => {
-    const layouts = { frosty: {} };
-    for (const state of states) {
-        const frostyLayout = frostySide?.(state), otherLayout = otherSide?.(state);
-        if (frostyLayout)
-            layouts.frosty[state] = frostyLayout;
-        if (otherLayout)
-            layouts[state] = { frosty: otherLayout };
-    }
-    return layouts;
-};
-/** Erasing runs a window backwards: [0, 0.6] erases during 40 … 100 %, with SMALL_CLOUD_CRAWL. */
-const COVERED_BEFORE_CRAWL_ENDS = [1 - SMALL_CLOUD_CRAWL[1], 1 - SMALL_CLOUD_CRAWL[0]];
-// frosty ↔ partly-cloudy / showers: the spine's centre sits where the sun arc's right end is — the spine traced
-// backwards (lower arm, middle arm out and back, upper arm) shrinks into that end with its first 6 segments while
-// its upper arm unrolls from there up over the top into the arc with the last 6
-const SPINE_FOR_SUN_ARC = { tracing: 'spine-reversed', breakpoints: [0, 0.3333, 0.6667, 1, 2, 3, 4, 4.5, 5, 5.25, 5.5, 5.75, 6] };
-const SUN_ARC_FOR_SPINE = { tracing: 'sun-arc-reversed', breakpoints: [0, 0, 0, 0, 0, 0, 0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1] };
-/** Covered by the crawling cloud — for partly-cloudy / showers in step with their later crawl. */
-const coveredIn = (state) => (SUN_CLOUD_STATES.includes(state) ? { wipe: 'left', draw: COVERED_BEFORE_CRAWL_ENDS } : { wipe: 'left' });
-const withFrosty = (iconSet) => {
-    const [cloudPiece, sunPiece, ...otherPieces] = piecesOf(iconSet);
-    const rayPieces = otherPieces.slice(0, 8);
-    const [rain1, rain2, bolt, rain3, ...bottomFlakes] = otherPieces.slice(8);
-    const nothing = pointAt(12, 12);
-    const sparePiece = (layouts, alternativeStrokes) => ({
-        strokes: Object.fromEntries([...Object.keys(iconSet.strokes), 'frosty'].map((state) => [state, nothing])),
-        alternativeStrokes,
-        pairLayouts: layouts,
-    });
-    const coveredStates = CLOUD_STATES.filter((state) => !SUN_CLOUD_STATES.includes(state));
-    const circleFromRight = [lucideArc(12, 12, 4, 0, 360)];
-    const sunnyToFrosty = { sunny: { frosty: CIRCLE_FOR_HALF_SUN }, frosty: { sunny: HALF_SUN_FOR_CIRCLE } };
-    const cloud = {
-        ...iconSet,
-        ...addFrosty(cloudPiece, HALF_SUN, mergePairLayouts(
-        // sunny ↔ frosty: a copy of the sun (under piece 2), morphing like it
-        sunnyToFrosty, 
-        // → any cloud: it crawls in exactly as from sunny
-        forCloudStates(CLOUD_STATES, (state) => iconSet.pairLayouts.sunny[state], (state) => iconSet.pairLayouts[state]?.sunny)), { 'circle-from-right': circleFromRight }),
-    };
-    const sun = addFrosty(sunPiece, HALF_SUN, mergePairLayouts(sunnyToFrosty, 
-    // covered by the crawling cloud (its upper quarter on a spare piece)
-    forCloudStates(coveredStates, () => tracedForWipe('half-sun-lower', HALF_SUN_LOWER), coveredIn), 
-    // partly-cloudy / showers: laid out as the spine (the spares carry the half sun), which bends into the sun arc
-    forCloudStates(SUN_CLOUD_STATES, () => SPINE_FOR_SUN_ARC, () => SUN_ARC_FOR_SPINE)), {
-        'circle-from-right': circleFromRight,
-        'half-sun-lower': HALF_SUN_LOWER,
-        'spine-reversed': SPINE.map(reversedStroke).reverse(),
-        'sun-arc-reversed': SUN_ARC.map(reversedStroke).reverse(),
-    });
-    const rays = rayPieces.map((rayPiece, rayIndex) => addFrosty(rayPiece, FROSTY_RAYS[rayIndex], 
-    // where the cloud state has no such ray: covered, or (partly-cloudy / showers) flying out as from sunny;
-    // kept rays move
-    forCloudStates(CLOUD_STATES.filter((state) => isNothing(rayPiece.strokes[state])), undefined, (state) => (SUN_CLOUD_STATES.includes(state) ? { draw: 0.6 } : COVERED))));
-    // precipitation: rides in with the cloud, as from sunny
-    const precipitation = (pieceSet) => addFrosty(pieceSet, pieceSet.strokes.sunny, forCloudStates(CLOUD_STATES.filter((state) => !isNothing(pieceSet.strokes[state])), (state) => pieceSet.pairLayouts.sunny?.[state] ?? RIDING_IN));
-    const boltWithSpine = addFrosty(bolt, SPINE, mergePairLayouts({ sunny: { frosty: tracedForWipe('circle-right-half', CIRCLE_RIGHT_HALF) } }, 
-    // during the crawl the spares (or the sun piece) carry the spine; thunder's bolt rides in
-    forCloudStates(CLOUD_STATES, (state) => (state === 'thunder' ? RIDING_IN : POINT_LAYOUT))), { 'circle-right-half': CIRCLE_RIGHT_HALF, nothing: [lucideLine(12, 12, 12, 12)] });
-    const spares = [
-        // the spine's parts (covered); the first also carries the half sun's lower quarter for partly-cloudy / showers
-        ...SPINE_PARTS.map((part, partIndex) => sparePiece(mergePairLayouts(forCloudStates(coveredStates, () => tracedForWipe(`spine-part-${partIndex}`, part), coveredIn), partIndex === 0 ? forCloudStates(SUN_CLOUD_STATES, () => tracedForWipe('half-sun-lower', HALF_SUN_LOWER), coveredIn) : {}), { [`spine-part-${partIndex}`]: part, 'half-sun-lower': HALF_SUN_LOWER })),
-        // the half sun's upper quarter
-        sparePiece(forCloudStates(CLOUD_STATES, () => tracedForWipe('half-sun-upper', HALF_SUN_UPPER), coveredIn), { 'half-sun-upper': HALF_SUN_UPPER }),
-        // the open clouds' lower left end
-        sparePiece(forCloudStates(Object.keys(CLOUD_LEFT_ENDS), () => RIDING_IN, (state) => tracedForWipe(`${state}-cloud-left-end`, CLOUD_LEFT_ENDS[state])), Object.fromEntries(Object.entries(CLOUD_LEFT_ENDS).map(([state, end]) => [`${state}-cloud-left-end`, end]))),
-    ];
-    return {
-        ...cloud,
-        morePieces: [
-            sun, ...rays, precipitation(rain1), precipitation(rain2), boltWithSpine, precipitation(rain3),
-            ...bottomFlakes.map(precipitation), ...spares,
-        ],
-    };
-};
-const weatherIcons = withFrosty(rainTwinnedIcons);
-return { weatherIcons };
-})();
-
-// sets/eye.ts
-const { eyeIcons } = (() => {
-// the lids: top lid = arc around 12,15.7506 (r 10.75), bottom lid = arc around 12,8.2494; the corners: small arcs (r 1)
-const topLid = (startAngle, endAngle) => lucideArc(12, 15.7506, 10.75, startAngle, endAngle);
-const bottomLid = (startAngle, endAngle) => lucideArc(12, 8.2494, 10.75, startAngle, endAngle);
-const RIGHT_CORNER = lucideArc(21.0005, 12, 1, -20.365, 20.365);
-const LEFT_CORNER = lucideArc(2.9995, 12, 1, 159.635, 200.365);
-/** The middles of eye-off's gaps: on the top lid (between -120.724° and -96.796°) and the bottom lid (37.8° … 59.4°). */
-const TOP_GAP_MIDDLE = (-120.724 - 96.796) / 2;
-const BOTTOM_GAP_MIDDLE = (37.8063 + 59.3592) / 2;
-// each part: lid, corner, lid — 6 + 2 + 4 segments in both states, so the corner stays and the lids only shorten
-const PART_LAYOUT = { breakpoints: [0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1, 1.5, 2, 2.25, 2.5, 2.75, 3] };
-const rightPart = {
-    strokes: {
-        visible: [topLid(TOP_GAP_MIDDLE, -22.4122), RIGHT_CORNER, bottomLid(22.4122, BOTTOM_GAP_MIDDLE)],
-        hidden: [topLid(-96.796, -22.4122), RIGHT_CORNER, bottomLid(22.4122, 37.8063)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { visible: { hidden: PART_LAYOUT }, hidden: { visible: PART_LAYOUT } },
-};
-const leftPart = {
-    strokes: {
-        visible: [bottomLid(BOTTOM_GAP_MIDDLE, 157.5878), LEFT_CORNER, topLid(-157.5878, TOP_GAP_MIDDLE)],
-        hidden: [bottomLid(59.3592, 157.5878), LEFT_CORNER, topLid(-157.5878, -120.724)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { visible: { hidden: PART_LAYOUT }, hidden: { visible: PART_LAYOUT } },
-};
-/** eye-off's pupil: the half circle clockwise from 46° (lower right) to 224° (upper left). */
-const HALF_PUPIL = [lucideArc(12, 12, 3, 45.9957, 224.0043)];
-/** The middle of the pupil's gap (upper right), from where the gap pulls back into the half's ends. */
-const PUPIL_GAP_MIDDLE = (224.0043 + 405.9957) / 2;
-const GAP_HALF_SHARE = (405.9957 - 224.0043) / 2 / 360;
-const pupil = {
-    strokes: { visible: [lucideArc(12, 12, 3, -90, 270)], hidden: HALF_PUPIL },
-    alternativeStrokes: { 'pupil-from-gap-middle': [lucideArc(12, 12, 3, PUPIL_GAP_MIDDLE, PUPIL_GAP_MIDDLE + 360)] },
-    pairLayouts: {
-        // 3 segments per gap half, 6 along the half circle (it stays)
-        visible: {
-            hidden: {
-                tracing: 'pupil-from-gap-middle',
-                breakpoints: [
-                    ...[0, 1, 2].map((index) => (index / 3) * GAP_HALF_SHARE),
-                    ...[0, 1, 2, 3, 4, 5].map((index) => GAP_HALF_SHARE + (index / 6) * (1 - 2 * GAP_HALF_SHARE)),
-                    ...[0, 1, 2, 3].map((index) => 1 - GAP_HALF_SHARE + (index / 3) * GAP_HALF_SHARE),
-                ].map((breakpoint) => +breakpoint.toFixed(4)),
-            },
-        },
-        hidden: { visible: { breakpoints: [0, 0, 0, 0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1, 1, 1, 1] } },
-    },
-};
-const slash = {
-    strokes: { visible: lucidePoint(2, 2), hidden: LUCIDE_SLASH },
-    alternativeStrokes: {},
-    pairLayouts: { visible: { hidden: { draw: true } } },
-};
-const eyeIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...rightPart,
-    morePieces: [leftPart, pupil, slash],
-    spins: {},
-};
-return { eyeIcons };
-})();
-
-// sets/volume.ts
-const { volumeIcons } = (() => {
-/** Lucide's speaker, from the top of its front edge counterclockwise around. */
-const SPEAKER = [
-    lucideArc(10.295, 4.703, 0.705, -0.0828, -134.9415),
-    lucideLine(9.797, 4.204, 6.413, 7.587),
-    lucideArc(5.4201, 6.6, 1.4, 44.8292, 90.168),
-    lucideLine(5.416, 8, 3, 8),
-    lucideArc(3, 9, 1, -90, -180),
-    lucideLine(2, 9, 2, 15),
-    lucideArc(3, 15, 1, 180, 90),
-    lucideLine(3, 16, 5.416, 16),
-    lucideArc(5.4201, 17.4, 1.4, -90.168, -44.8292),
-    lucideLine(6.413, 16.413, 9.796, 19.797),
-    lucideArc(10.295, 19.299, 0.705, 135.0564, -0.0797),
-    lucideLine(11, 19.298, 11, 4.702),
-];
-/** The waves, each from its top end down. */
-const SMALL_WAVE = [lucideArc(12, 12, 5, -36.8699, 36.8699)];
-const BIG_WAVE = [lucideArc(13.0001, 12, 9, -45.0004, 45.0004)];
-/** The ✕, each line from its top end down (so a wave unfolds into it without turning over). */
-const X_SLASH = [lucideLine(21.5, 9.5, 16.5, 14.5)];
-const X_BACKSLASH = [lucideLine(16.5, 9.5, 21.5, 14.5)];
-/** No wave: a point on the middle of the speaker's front edge. */
-const NO_WAVE = lucidePoint(11, 12);
-const speaker = {
-    strokes: { muted: SPEAKER, low: SPEAKER, medium: SPEAKER, high: SPEAKER },
-    alternativeStrokes: {},
-    pairLayouts: {},
-};
-const smallWave = {
-    strokes: { muted: X_SLASH, low: NO_WAVE, medium: SMALL_WAVE, high: SMALL_WAVE },
-    alternativeStrokes: {},
-    pairLayouts: {},
-};
-const bigWave = {
-    strokes: { muted: X_BACKSLASH, low: NO_WAVE, medium: SMALL_WAVE, high: BIG_WAVE },
-    alternativeStrokes: {},
-    pairLayouts: {},
-};
-const volumeIcons = {
-    segmentCount: 16,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...speaker,
-    morePieces: [smallWave, bigWave],
-    spins: {},
-};
-return { volumeIcons };
-})();
-
-// sets/toggle.ts
-const { toggleIcons } = (() => {
-const HORIZONTAL = [lucideLine(5, 12, 19, 12)];
-const first = {
-    strokes: {
-        plus: HORIZONTAL,
-        minus: HORIZONTAL,
-        close: [lucideLine(6, 6, 18, 18)],
-        check: [lucideLine(4, 12, 9, 17)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: {},
-};
-const second = {
-    strokes: {
-        plus: [lucideLine(12, 5, 12, 19)],
-        minus: HORIZONTAL,
-        close: [lucideLine(18, 6, 6, 18)],
-        check: [lucideLine(20, 6, 9, 17)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: {},
-};
-const toggleIcons = {
-    segmentCount: 1,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...first,
-    morePieces: [second],
-    // plus turned by 45° clockwise is the ✕ (a little smaller): turn while blending
-    spins: { plus: { close: 45 }, close: { plus: -45 } },
-};
-return { toggleIcons };
-})();
-
-// sets/lock.ts
-const { lockIcons } = (() => {
-const BODY = [
-    lucideLine(5, 11, 19, 11),
-    lucideArc(19, 13, 2, -90, 0),
-    lucideLine(21, 13, 21, 20),
-    lucideArc(19, 20, 2, 0, 90),
-    lucideLine(19, 22, 5, 22),
-    lucideArc(5, 20, 2, 90, 180),
-    lucideLine(3, 20, 3, 13),
-    lucideArc(5, 13, 2, 180, 270),
-];
-const LEFT_LEG = lucideLine(7, 11, 7, 7);
-const body = { strokes: { locked: BODY, unlocked: BODY }, alternativeStrokes: {}, pairLayouts: {} };
-// left leg 2 segments, arch 6, right leg 4 — unlocked has no right leg: 4 zero-length segments at the arch's end
-const shackle = {
-    strokes: {
-        locked: [LEFT_LEG, lucideArc(12, 7, 5, 180, 360), lucideLine(17, 7, 17, 11)],
-        unlocked: [LEFT_LEG, lucideArc(12, 6.995, 5, 179.9424, 348.5218)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: {
-        locked: { unlocked: { breakpoints: [0, 0.5, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2, 2.25, 2.5, 2.75, 3] } },
-        unlocked: { locked: { breakpoints: [0, 0.5, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2, 2, 2, 2, 2] } },
-    },
-};
-const lockIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...body,
-    morePieces: [shackle],
-    spins: {},
-};
-return { lockIcons };
-})();
-
-// sets/bell.ts
-const { bellIcons } = (() => {
-const CLAPPER = [lucideArc(12, 19.9999, 2, 149.9971, 30.0029)];
-/** Where the dome is split in "on": the middle of bell-off's gap on it (196.86° … 236.27°). */
-const DOME_GAP_MIDDLE = (196.8632 + 236.2663) / 2;
-const dome = (startAngle, endAngle) => lucideArc(12, 8, 6, startAngle, endAngle);
-const clapper = { strokes: { on: CLAPPER, off: CLAPPER }, alternativeStrokes: {}, pairLayouts: {} };
-// bottom line (3 segments), left tip (2), left side (4), dome (3) — the same in both states
-const LEFT_LAYOUT = { breakpoints: [0, 0.3333, 0.6667, 1, 1.5, 2, 2.25, 2.5, 2.75, 3, 3.3333, 3.6667, 4] };
-const leftPart = {
-    strokes: {
-        on: [
-            lucideLine(20, 17, 4, 17),
-            lucideArc(4.0007, 16, 1, 90.0419, 222.3766),
-            lucideCubic(3.262, 15.326, 4.589, 13.956, 6, 12.499, 6, 8),
-            dome(180, DOME_GAP_MIDDLE),
-        ],
-        off: [
-            lucideLine(17, 17, 4, 17),
-            lucideArc(3.9996, 16, 1, 89.9795, 222.299),
-            lucideCubic(3.26, 15.327, 4.59, 13.956, 6, 12.499, 6, 8),
-            lucideArc(12, 7.9985, 6, 179.9859, 196.8632),
-        ],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: LEFT_LAYOUT }, off: { on: LEFT_LAYOUT } },
-};
-// dome (4 segments), right side (6), right tip (2) — off has no tip and only the side's upper part: 2 zero-length
-// segments at its end
-const rightPart = {
-    strokes: {
-        on: [
-            dome(DOME_GAP_MIDDLE, 360),
-            lucideCubic(18, 8, 18, 12.499, 19.41, 13.956, 20.74, 15.327),
-            lucideArc(20.0004, 16, 1, -42.299, 90.0205),
-        ],
-        off: [
-            lucideArc(12, 7.9998, 6, -123.7337, 0.0022),
-            lucideCubic(18, 8, 18, 10.687, 18.77, 12.653, 19.707, 14.05),
-        ],
-    },
-    alternativeStrokes: {},
-    pairLayouts: {
-        on: { off: { breakpoints: [0, 0.25, 0.5, 0.75, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2, 2.5, 3] } },
-        off: { on: { breakpoints: [0, 0.25, 0.5, 0.75, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2, 2, 2] } },
-    },
-};
-const slash = {
-    strokes: { on: lucidePoint(2, 2), off: LUCIDE_SLASH },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: { draw: true } } },
-};
-const bellIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...clapper,
-    morePieces: [leftPart, rightPart, slash],
-    spins: {},
-};
-return { bellIcons };
-})();
-
-// sets/mic.ts
-const { micIcons } = (() => {
-const STAND = [lucideLine(12, 19, 12, 22)];
-/** Where the mic's capsule is split: the middles of mic-off's gaps (right side y 11.85, left side y 6.3). */
-const RIGHT_SPLIT_Y = 11.85;
-const LEFT_SPLIT_Y = 6.3;
-/** Where the holder is split: the middle of its gap (10.17° … 45°). */
-const HOLDER_GAP_MIDDLE = (10.1709 + 44.9971) / 2;
-const stand = { strokes: { on: STAND, off: STAND }, alternativeStrokes: {}, pairLayouts: {} };
-// line, arc, line — 3 + 6 + 3 segments; off has no last line: 3 zero-length segments at its end
-const SPLIT_LAYOUT = { breakpoints: [0, 0.3333, 0.6667, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2, 2.3333, 2.6667, 3] };
-const CUT_LAYOUT = { breakpoints: [0, 0.3333, 0.6667, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2, 2, 2, 2] };
-const capsuleTop = {
-    strokes: {
-        // up the right side, over the top (counterclockwise), down the left side to the split
-        on: [lucideLine(15, RIGHT_SPLIT_Y, 15, 5), lucideArc(12, 5, 3, 0, -180), lucideLine(9, 5, 9, LEFT_SPLIT_Y)],
-        off: [lucideLine(15, 9.34, 15, 5), lucideArc(12.0001, 5.0181, 3, -0.3452, -153.2975)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: SPLIT_LAYOUT }, off: { on: CUT_LAYOUT } },
-};
-const capsuleBottom = {
-    strokes: {
-        // down the left side, around the bottom (counterclockwise), up the right side to the split
-        on: [lucideLine(9, LEFT_SPLIT_Y, 9, 12), lucideArc(12, 12, 3, 180, 0), lucideLine(15, 12, 15, RIGHT_SPLIT_Y)],
-        off: [lucideLine(9, 9, 9, 12), lucideArc(12, 11.9974, 3, 179.9496, 45.0356)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: SPLIT_LAYOUT }, off: { on: CUT_LAYOUT } },
-};
-// arc then line, 6 + 6 segments in both states (the arc only shortens)
-const HOLDER_LAYOUT = { breakpoints: [0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1, 1.1667, 1.3333, 1.5, 1.6667, 1.8333, 2] };
-const holderLeft = {
-    strokes: {
-        on: [lucideArc(12, 12, 7, HOLDER_GAP_MIDDLE, 180), lucideLine(5, 12, 5, 10)],
-        off: [lucideArc(12, 12.0005, 7, 44.9971, 180.0041), lucideLine(5, 12, 5, 10)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: HOLDER_LAYOUT }, off: { on: HOLDER_LAYOUT } },
-};
-const holderRight = {
-    strokes: {
-        on: [lucideArc(12, 12, 7, HOLDER_GAP_MIDDLE, 0), lucideLine(19, 12, 19, 10)],
-        off: [lucideArc(12, 11.9939, 7, 10.1709, 0.0499), lucideLine(19, 12, 19, 10)],
-    },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: HOLDER_LAYOUT }, off: { on: HOLDER_LAYOUT } },
-};
-const slash = {
-    strokes: { on: lucidePoint(2, 2), off: LUCIDE_SLASH },
-    alternativeStrokes: {},
-    pairLayouts: { on: { off: { draw: true } } },
-};
-const micIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...stand,
-    morePieces: [capsuleTop, capsuleBottom, holderLeft, holderRight, slash],
-    spins: {},
-};
-return { micIcons };
-})();
-
-// sets/chevron.ts
-const { chevronIcons } = (() => {
-const STATES = ['up', 'right', 'down', 'left'];
-/** chevron-up's corners (right end, tip, left end), turned clockwise by `quarterTurns` × 90° around 12,12. */
-const chevron = (quarterTurns) => {
-    const turn = ([x, y]) => {
-        let [dx, dy] = [x - 12, y - 12];
-        for (let step = 0; step < quarterTurns; step++)
-            [dx, dy] = [-dy, dx];
-        return [12 + dx, 12 + dy];
-    };
-    const [rightEnd, tip, leftEnd] = [[18, 15], [12, 9], [6, 15]].map(turn);
-    return [lucideLine(...rightEnd, ...tip), lucideLine(...tip, ...leftEnd)];
-};
-/** Degrees from one state to another: the shorter way round (half a turn: clockwise). */
-const turnBetween = (fromIndex, toIndex) => {
-    const quarterTurns = (toIndex - fromIndex + 4) % 4;
-    return quarterTurns === 3 ? -90 : quarterTurns * 90;
-};
-const chevronIcons = {
-    segmentCount: 2,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    strokes: Object.fromEntries(STATES.map((state, index) => [state, chevron(index)])),
-    alternativeStrokes: {},
-    pairLayouts: {},
-    spins: Object.fromEntries(STATES.map((state, fromIndex) => [state, Object.fromEntries(STATES
-            .filter((other) => other !== state).map((other) => [other, turnBetween(fromIndex, STATES.indexOf(other))]))])),
-};
-return { chevronIcons };
-})();
-
-// sets/copy.ts
-const { copyIcons } = (() => {
-/** The front page, clockwise from its top edge. */
-const FRONT_PAGE = [
-    lucideLine(10, 8, 20, 8),
-    lucideArc(20, 10, 2, -90, 0),
-    lucideLine(22, 10, 22, 20),
-    lucideArc(20, 20, 2, 0, 90),
-    lucideLine(20, 22, 10, 22),
-    lucideArc(10, 20, 2, 90, 180),
-    lucideLine(8, 20, 8, 10),
-    lucideArc(10, 10, 2, 180, 270),
-];
-/** The back page: the L that shows behind the front page, from its bottom end up and over. */
-const BACK_PAGE = [
-    lucideCubic(4, 16, 2.9, 16, 2, 15.1, 2, 14),
-    lucideLine(2, 14, 2, 4),
-    lucideCubic(2, 4, 2, 2.9, 2.9, 2, 4, 2),
-    lucideLine(4, 2, 14, 2),
-    lucideCubic(14, 2, 15.1, 2, 16, 2.9, 16, 4),
-];
-const CHECK = [lucideLine(20, 6, 9, 17), lucideLine(9, 17, 4, 12)];
-/** The check as a loop matching the page: corner → long end → corner → short end → corner. */
-const CHECK_LOOP = [lucideLine(9, 17, 20, 6), lucideLine(20, 6, 9, 17), lucideLine(9, 17, 4, 12), lucideLine(4, 12, 9, 17)];
-const page = {
-    strokes: { copy: FRONT_PAGE, copied: CHECK },
-    alternativeStrokes: { 'check-loop': CHECK_LOOP },
-    pairLayouts: {
-        // the page's default spread: 2 segments per edge, 1 per corner; each edge → one stroke of the loop, each
-        // corner → a zero-length segment at its end
-        copied: { copy: { tracing: 'check-loop', breakpoints: [0, 0.5, 1, 1, 1.5, 2, 2, 2.5, 3, 3, 3.5, 4, 4] } },
-    },
-};
-const backPage = {
-    strokes: { copy: BACK_PAGE, copied: lucidePoint(4, 16) },
-    alternativeStrokes: {},
-    pairLayouts: { copied: { copy: { draw: 0.5 } } },
-};
-const copyIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...page,
-    morePieces: [backPage],
-    spins: {},
-};
-return { copyIcons };
-})();
-
-// sets/wifi.ts
-const { wifiIcons } = (() => {
-const STATES = ['none', 'low', 'medium', 'high'];
-const DOT = [lucideLine(12, 20, 12.01, 20)];
-/** The arcs, small to big, each clockwise from its left end. */
-const ARCS = [
-    [lucideArc(12, 19.9997, 5, -134.427, -45.573)],
-    [lucideArc(12, 20.0004, 10, -134.427, -45.573)],
-    [lucideArc(12, 20.0003, 15, -131.8103, -48.1897)],
-];
-const NO_ARC = lucidePoint(12, 20);
-/** Arc `arcIndex` in each state: itself, else the outermost arc that state has (or a point on the dot). */
-const arcPiece = (arcIndex) => ({
-    strokes: Object.fromEntries(STATES.map((state, level) => [state, level > arcIndex ? ARCS[arcIndex] : level > 0 ? ARCS[level - 1] : NO_ARC])),
-    alternativeStrokes: {},
-    pairLayouts: {},
-});
-const wifiIcons = {
-    segmentCount: 4,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    strokes: Object.fromEntries(STATES.map((state) => [state, DOT])),
-    alternativeStrokes: {},
-    pairLayouts: {},
-    morePieces: [0, 1, 2].map(arcPiece),
-    spins: {},
-};
-return { wifiIcons };
-})();
-
-// sets/battery.ts
-const { batteryIcons } = (() => {
-const STATES = ['empty', 'low', 'medium', 'full'];
-const BODY = [
-    lucideLine(4, 6, 16, 6),
-    lucideArc(16, 8, 2, -90, 0),
-    lucideLine(18, 8, 18, 16),
-    lucideArc(16, 16, 2, 0, 90),
-    lucideLine(16, 18, 4, 18),
-    lucideArc(4, 16, 2, 90, 180),
-    lucideLine(2, 16, 2, 8),
-    lucideArc(4, 8, 2, 180, 270),
-];
-const TERMINAL = [lucideLine(22, 14, 22, 10)];
-const BAR_X = [6, 10, 14];
-/**
- * When bar `barIndex` is drawn in from `fromLevel` to `toLevel` (more bars): the bars coming in share the morph,
- * each taking 2 / (count + 1) of it, starting half of that after the one before.
- */
-const barDrawn = (barIndex, fromLevel, toLevel) => {
-    const count = toLevel - fromLevel;
-    const duration = 2 / (count + 1);
-    const start = (barIndex - fromLevel) * (duration / 2);
-    return { draw: [+start.toFixed(4), +(start + duration).toFixed(4)] };
-};
-const barPiece = (barIndex) => ({
-    strokes: Object.fromEntries(STATES.map((state, level) => [state, level > barIndex
-            ? [lucideLine(BAR_X[barIndex], 14, BAR_X[barIndex], 10)]
-            : lucidePoint(BAR_X[barIndex], 14)])),
-    alternativeStrokes: {},
-    // on the state without the bar, towards each state with it
-    pairLayouts: Object.fromEntries(STATES.slice(0, barIndex + 1).map((state, fromLevel) => [state, Object.fromEntries(STATES.slice(barIndex + 1).map((other, offset) => [other, barDrawn(barIndex, fromLevel, barIndex + 1 + offset)]))])),
-});
-const fixedPiece = (strokes) => ({
-    strokes: Object.fromEntries(STATES.map((state) => [state, strokes])),
-    alternativeStrokes: {},
-    pairLayouts: {},
-});
-const batteryIcons = {
-    segmentCount: 12,
-    strokeWidth: LUCIDE_STROKE_WIDTH,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...fixedPiece(BODY),
-    morePieces: [fixedPiece(TERMINAL), ...[0, 1, 2].map(barPiece)],
-    spins: {},
-};
-return { batteryIcons };
-})();
-
-// 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,
-    media: mediaIcons,
-    menu: menuIcons,
-    checkbox: checkboxIcons,
-    radio: radioIcons,
-    folder: folderIcons,
-    theme: themeIcons,
-    weather: weatherIcons,
-    eye: eyeIcons,
-    volume: volumeIcons,
-    toggle: toggleIcons,
-    lock: lockIcons,
-    bell: bellIcons,
-    mic: micIcons,
-    chevron: chevronIcons,
-    copy: copyIcons,
-    wifi: wifiIcons,
-    battery: batteryIcons,
-};
-// sets with sharper corners, built once per set and roundness (so their shapes are computed once too)
-const setsByRoundness = new WeakMap();
-/** A set given by name or as a set object, optionally with sharper corners (`roundness` 0 = sharp … 1 = own). */
-const resolveIconSet = (set = 'round', roundness) => {
-    if (typeof set === 'string' && !(set in iconSets)) {
-        throw new Error(`morphico: unknown icon set "${set}" (known: ${Object.keys(iconSets).join(', ')})`);
-    }
-    const iconSet = typeof set === 'string' ? iconSets[set] : set;
-    if (roundness === undefined || roundness >= 1)
-        return iconSet; // the own corners are the roundest
-    if (!iconSet.withRoundness)
-        throw new Error('morphico: this icon set has no adjustable roundness');
-    const clamped = Math.max(0, roundness);
-    let byRoundness = setsByRoundness.get(iconSet);
-    if (!byRoundness)
-        setsByRoundness.set(iconSet, byRoundness = new Map());
-    let sharper = byRoundness.get(clamped);
-    if (!sharper)
-        byRoundness.set(clamped, sharper = iconSet.withRoundness(clamped));
-    return sharper;
-};
-return { iconSets, resolveIconSet };
-})();
-
-// morph.ts
-const { EMPTY_STATE, DEFAULT_DURATION, shapesOf, hasState, prefersReducedMotion, clampToUnit, 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);
-    const pieceLength = pieceLengthOf(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, pieceLength));
-        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;
-            // pieces that appear or go are drawn along their path (only from a settled shape, between two real states)
-            const drawn = settled && start && target ? drawnPieces(iconSet, previousState, nextState) : [];
-            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);
-                        const frame = withDrawnPieces(blend(from, to, easedProgress, spin), from, to, easedProgress, pieceLength, drawn);
-                        render(frame, startOpacity + (endOpacity - startOpacity) * easedProgress);
-                        return true;
-                    }
-                    render(target, endOpacity);
-                    finish(false);
-                    return false;
-                });
-                running = { stopAnimation, resolvers: [resolve] };
-            });
-        },
-        stop: () => finish(true),
-    };
-};
-return { EMPTY_STATE, DEFAULT_DURATION, shapesOf, hasState, prefersReducedMotion, clampToUnit, createMorphingPath };
-})();
-
-// sets/shapes.ts
-const { lucideShapeOutlines, clipShapes } = (() => {
-// Shapes for clip(): closed outlines that cut out an element. From Lucide 1.61.0 (ISC, see LICENSE-lucide), imported
-// by `node tools/import-lucide.ts <name>`; tag without its dot, club without its stem. The states are the Lucide outlines made comparable for
-// morphing: clockwise, starting where the outline crosses the vertical middle at the top, scaled evenly to fill the
-// 24×24 box and centred (computed on first use, not at import). Roundness 1 = Lucide's own corners … 0 = sharp.
-const DEGREE = Math.PI / 180;
-const GRID_SIZE = 24;
-const GRID_CENTER = 12;
-const SAMPLES_PER_STROKE = 48;
-/** Enough for the shape that needs the most (puzzle: 24 strokes, its knobs ≈ 40 segments); the rest spreads by length. */
-const SEGMENT_COUNT = 48;
-/** The shapes as Lucide draws them (Lucide coordinates); the set's states are made from these. */
-const lucideShapeOutlines = {
-    circle: [arc(12, 12, 10, -90, 270)],
-    ellipse: ellipse(12, 12, 10, 6),
-    heart: [
-        arc(7.5, 9.5001, 5.5, -179.9989, -41.9423),
-        arc(12, 5.4415, 0.56, 136.9163, 43.0837),
-        arc(16.5101, 9.4738, 5.49, -138.3317, 0.2729),
-        cubic(22, 9.5, 22, 11.79, 20.5, 13.5, 19, 15),
-        line(19, 15, 13.508, 20.313),
-        arc(11.9996, 18.9997, 2, 41.0455, 138.2288),
-        line(10.508, 20.332, 5, 15),
-        cubic(5, 15, 3.5, 13.5, 2, 11.8, 2, 9.5),
-    ],
-    sparkle: [
-        arc(12, 2.9976, 1, -169.4202, -10.5798),
-        line(12.983, 2.814, 14.034, 8.372),
-        arc(15.9992, 8.0008, 2, 169.3026, 100.6974),
-        line(15.628, 9.966, 21.186, 11.017),
-        arc(21.0024, 12, 1, -79.4202, 79.4202),
-        line(21.186, 12.983, 15.628, 14.034),
-        arc(15.9992, 15.9992, 2, -100.6974, -169.3026),
-        line(14.034, 15.628, 12.983, 21.186),
-        arc(12, 21.0024, 1, 10.5798, 169.4202),
-        line(11.017, 21.186, 9.966, 15.628),
-        arc(8.0008, 15.9992, 2, -10.6974, -79.3026),
-        line(8.372, 14.034, 2.814, 12.983),
-        arc(2.9976, 12, 1, 100.5798, 259.4202),
-        line(2.814, 11.017, 8.372, 9.966),
-        arc(8.0008, 8.0008, 2, 79.3026, 10.6974),
-        line(9.966, 8.372, 11.017, 2.814),
-    ],
-    astroid: [
-        arc(12, 21.0024, 1, 10.5798, 169.4202),
-        arc(1.1555, 22.8445, 10, -9.5467, -80.4533),
-        arc(2.9976, 12, 1, 100.5798, 259.4202),
-        arc(1.1555, 1.1555, 10, 80.4533, 9.5467),
-        arc(12, 2.9976, 1, -169.4202, -10.5798),
-        arc(22.8445, 1.1555, 10, 170.4533, 99.5467),
-        arc(21.0024, 12, 1, -79.4202, 79.4202),
-        arc(22.8445, 22.8445, 10, -99.5467, -170.4533),
-    ],
-    bookmark: [
-        arc(17, 5, 2, -90, 0),
-        line(19, 5, 19, 20),
-        arc(18, 19.9997, 1, 0.0185, 119.7357),
-        line(17.504, 20.868, 12.992, 18.29),
-        arc(12, 20.0266, 2, -60.2643, -119.7357),
-        line(11.008, 18.29, 6.496, 20.868),
-        arc(6, 19.9997, 1, 60.2643, 179.9815),
-        line(5, 20, 5, 5),
-        arc(7, 5, 2, 180, 270),
-        line(7, 3, 17, 3),
-    ],
-    shield: [
-        cubic(20, 13, 20, 18, 16.5, 20.5, 12.34, 21.95),
-        arc(12.0191, 21.0029, 1, 71.2803, 110.4299),
-        cubic(11.67, 21.94, 7.5, 20.5, 4, 18, 4, 13),
-        line(4, 13, 4, 6),
-        arc(5, 6, 1, 180, 270),
-        cubic(5, 5, 7, 5, 9.5, 3.8, 11.24, 2.28),
-        arc(12, 3.1696, 1.17, -130.5094, -49.4906),
-        cubic(12.76, 2.28, 14.51, 3.81, 17, 5, 19, 5),
-        arc(19, 6, 1, -90, 0),
-        line(20, 6, 20, 13),
-    ],
-    moon: [
-        arc(11.9981, 12.0009, 9, 3.09, 266.904),
-        cubic(11.512, 3.014, 11.917, 2.992, 12.129, 3.474, 11.914, 3.817),
-        arc(17.002, 6.997, 6, -147.9941, -302.0059),
-        cubic(20.182, 12.085, 20.526, 11.87, 21.007, 12.081, 20.985, 12.486),
-    ],
-    tag: [
-        arc(11.1716, 4, 2, -44.9913, -89.9878),
-        line(11.172, 2, 4, 2),
-        arc(4, 4, 2, -90, -180),
-        line(2, 4, 2, 11.172),
-        arc(4, 11.1716, 2, 179.9878, 134.9913),
-        line(2.586, 12.586, 11.29, 21.29),
-        arc(13, 19.5691, 2.426, 134.8186, 45.1814),
-        line(14.71, 21.29, 21.29, 14.71),
-        arc(19.5691, 13, 2.426, 44.8186, -44.8186),
-        line(21.29, 11.29, 12.586, 2.586),
-    ],
-    square: [
-        line(5, 3, 19, 3),
-        arc(19, 5, 2, -90, 0),
-        line(21, 5, 21, 19),
-        arc(19, 19, 2, 0, 90),
-        line(19, 21, 5, 21),
-        arc(5, 19, 2, 90, 180),
-        line(3, 19, 3, 5),
-        arc(5, 5, 2, 180, 270),
-    ],
-    badge: [
-        arc(7.7549, 7.7531, 4, 167.4834, 282.6366),
-        arc(12, 6.0048, 4, -147.4051, -32.5949),
-        arc(16.2474, 7.7526, 4, -102.6711, 12.6711),
-        arc(17.9952, 12, 4, -57.4051, 57.4051),
-        arc(16.2469, 16.2451, 4, -12.6366, 102.5166),
-        arc(12.005, 18.0031, 4, 32.4617, 147.5383),
-        arc(7.7549, 16.2469, 4, 77.3634, 192.5166),
-        arc(5.9891, 12, 4, 122.3281, 237.6719),
-    ],
-    triangle: [
-        arc(12, 5.0035, 2, -30.1173, -149.8827),
-        line(10.27, 4, 2.27, 18),
-        arc(4.0021, 19, 2, -150, -269.9413),
-        line(4, 21, 20, 21),
-        arc(19.9979, 19, 2, 89.9413, -30),
-        line(21.73, 18, 13.73, 4),
-    ],
-    droplet: [
-        arc(12, 15, 7, 90, 0),
-        cubic(19, 15, 19, 13, 18, 11.1, 16, 9.5),
-        cubic(16, 9.5, 14, 7.9, 12.5, 5.5, 12, 3),
-        cubic(12, 3, 11.5, 5.5, 10, 7.9, 8, 9.5),
-        cubic(8, 9.5, 6, 11.1, 5, 13, 5, 15),
-        arc(12, 15, 7, 180, 90),
-    ],
-    pentagon: [
-        arc(12, 4.0021, 2, -125.803, -54.197),
-        line(13.17, 2.38, 21.17, 8.12),
-        arc(20.0009, 9.7427, 2, -54.2293, 18.2786),
-        line(21.9, 10.37, 18.86, 19.63),
-        arc(16.9618, 19, 2, 18.3608, 90.052),
-        line(16.96, 21, 7.04, 21),
-        arc(7.0382, 19, 2, 89.948, 161.6392),
-        line(5.14, 19.63, 2.1, 10.37),
-        arc(3.9991, 9.7427, 2, 161.7214, 234.2293),
-        line(2.83, 8.12, 10.83, 2.38),
-    ],
-    hexagon: [
-        line(21, 16, 21, 8),
-        arc(19, 8.0021, 2, -0.0588, -60),
-        line(20, 6.27, 13, 2.27),
-        arc(12, 4.0021, 2, -60, -120),
-        line(11, 2.27, 4, 6.27),
-        arc(5, 8.0021, 2, -120, -179.9412),
-        line(3, 8, 3, 16),
-        arc(5, 15.9979, 2, 179.9412, 120),
-        line(4, 17.73, 11, 21.73),
-        arc(12, 19.9979, 2, 120, 60),
-        line(13, 21.73, 20, 17.73),
-        arc(19, 15.9979, 2, 60, 0.0588),
-    ],
-    octagon: [
-        arc(4, 15.3116, 2, 134.9913, 179.9878),
-        line(2, 15.312, 2, 8.688),
-        arc(4, 8.6884, 2, -179.9878, -134.9913),
-        line(2.586, 7.274, 7.274, 2.586),
-        arc(8.6884, 4, 2, -135.0087, -90.0122),
-        line(8.688, 2, 15.312, 2),
-        arc(15.3116, 4, 2, -89.9878, -44.9913),
-        line(16.726, 2.586, 21.414, 7.274),
-        arc(20, 8.6884, 2, -45.0087, -0.0122),
-        line(22, 8.688, 22, 15.312),
-        arc(20, 15.3116, 2, 0.0122, 45.0087),
-        line(21.414, 16.726, 16.726, 21.414),
-        arc(15.3116, 20, 2, 44.9913, 89.9878),
-        line(15.312, 22, 8.688, 22),
-        arc(8.6884, 20, 2, 90.0122, 135.0087),
-        line(7.274, 21.414, 2.586, 16.726),
-    ],
-    squircle: [
-        cubic(12, 3, 19.2, 3, 21, 4.8, 21, 12),
-        cubic(21, 12, 21, 19.2, 19.2, 21, 12, 21),
-        cubic(12, 21, 4.8, 21, 3, 19.2, 3, 12),
-        cubic(3, 12, 3, 4.8, 4.8, 3, 12, 3),
-    ],
-    star: [
-        arc(12, 2.5301, 0.53, -153.6664, -26.3336),
-        line(12.475, 2.295, 14.785, 6.974),
-        arc(16.6883, 6.0335, 2.123, 153.7044, 98.3503),
-        line(16.38, 8.134, 21.546, 8.89),
-        arc(21.47, 9.4145, 0.53, -81.756, 45.7247),
-        line(21.84, 9.794, 18.104, 13.432),
-        arc(19.5857, 14.9525, 2.123, -134.26, -189.6958),
-        line(17.493, 15.31, 18.375, 20.45),
-        arc(17.8531, 20.5422, 0.53, -10.0155, 118.0314),
-        line(17.604, 21.01, 12.986, 18.582),
-        arc(11.9995, 20.4608, 2.122, -62.2968, -117.7032),
-        line(11.013, 18.582, 6.396, 21.01),
-        arc(6.148, 20.5416, 0.53, 62.1036, 189.9512),
-        line(5.626, 20.45, 6.507, 15.311),
-        arc(4.4155, 14.9522, 2.122, 9.7335, -45.7597),
-        line(5.896, 13.432, 2.16, 9.795),
-        arc(2.5282, 9.4138, 0.53, 134.0047, 261.9521),
-        line(2.454, 8.889, 7.619, 8.134),
-        arc(7.3135, 6.0341, 2.122, 81.7227, 26.2909),
-        line(9.216, 6.974, 11.525, 2.295),
-    ],
-    'rectangle-horizontal': [
-        line(4, 6, 20, 6),
-        arc(20, 8, 2, -90, 0),
-        line(22, 8, 22, 16),
-        arc(20, 16, 2, 0, 90),
-        line(20, 18, 4, 18),
-        arc(4, 16, 2, 90, 180),
-        line(2, 16, 2, 8),
-        arc(4, 8, 2, 180, 270),
-    ],
-    'message-circle': [
-        arc(1.1328, 17.079, 2, -21.6245, 12.4142),
-        line(3.086, 17.509, 2.021, 20.799),
-        arc(3.0005, 21.0005, 1, -168.3779, -284.8626),
-        line(3.257, 21.967, 6.67, 20.969),
-        arc(7.0591, 22.9308, 2, -101.2192, -69.2104),
-        arc(12.0003, 12.0003, 10, 115.0325, -205.7324),
-    ],
-    'message-square': [
-        arc(20, 17, 2, 0, 90),
-        line(20, 19, 6.828, 19),
-        arc(6.8284, 21, 2, -90.0122, -135.0087),
-        line(5.414, 19.586, 3.212, 21.788),
-        arc(2.71, 21.2859, 0.71, 45.0052, 179.9926),
-        line(2, 21.286, 2, 5),
-        arc(4, 5, 2, 180, 270),
-        line(4, 3, 20, 3),
-        arc(20, 5, 2, -90, 0),
-        line(22, 5, 22, 17),
-    ],
-    cloud: [
-        line(17.5, 19, 9, 19),
-        arc(9.0018, 12, 7, 90.0147, 343.3984),
-        line(15.71, 10, 17.5, 10),
-        arc(17.5, 14.5, 4.5, -90, 90),
-    ],
-    puzzle: [
-        arc(16.0975, 3.6833, 1, 135.0289, 13.459),
-        arc(19.5008, 4.5, 2.5, -166.4917, 76.5107),
-        arc(20.3167, 7.9035, 1, -103.459, -225.0289),
-        line(19.61, 8.611, 21.293, 10.293),
-        arc(19.5861, 12, 2.414, -45.0015, 45.0015),
-        line(21.293, 13.707, 19.61, 15.39),
-        arc(18.9025, 14.6833, 1, 44.9711, 166.541),
-        arc(15.4992, 15.5, 2.5, -13.5083, -256.5107),
-        arc(14.6833, 18.9035, 1, -76.541, 45.0289),
-        line(15.39, 19.611, 13.707, 21.293),
-        arc(12, 19.5861, 2.414, 44.9985, 135.0015),
-        line(10.293, 21.293, 8.61, 19.61),
-        arc(7.9025, 20.3167, 1, -44.9711, -166.541),
-        arc(4.4992, 19.5, 2.5, 13.5083, 256.5107),
-        arc(3.6833, 16.0965, 1, 76.541, -45.0289),
-        line(4.39, 15.389, 2.707, 13.707),
-        arc(4.4139, 12, 2.414, 134.9985, 225.0015),
-        line(2.707, 10.293, 4.39, 8.61),
-        arc(5.0975, 9.3167, 1, -135.0289, -13.459),
-        arc(8.5008, 8.5, 2.5, 166.4917, -76.5107),
-        arc(9.3167, 5.0965, 1, 103.459, 225.0289),
-        line(8.61, 4.389, 10.293, 2.707),
-        arc(12, 4.4139, 2.414, -135.0015, -44.9985),
-        line(13.707, 2.707, 15.39, 4.39),
-    ],
-    // without its stem line (Lucide's second piece)
-    club: [
-        arc(12, 7.51, 5.5, 16.2602, -196.2602),
-        arc(7.5026, 14.494, 5.5, -98.1803, -324.8563),
-        arc(16.5052, 14.5052, 5.5, 144.9978, -81.9018),
-        line(17.28, 9.06, 17.28, 9.05),
-    ],
-};
-// ---- making the outlines comparable ----
-const pointOnStroke = (stroke, progress) => strokePiece(stroke, 0, progress)[3];
-const samplesOf = (strokes) => strokes.flatMap((stroke, strokeIndex) => Array.from({ length: SAMPLES_PER_STROKE }, (_, sample) => {
-    const progress = sample / SAMPLES_PER_STROKE;
-    return { point: pointOnStroke(stroke, progress), strokeIndex, progress };
-}));
-const transformStroke = (stroke, scale, offsetX, offsetY) => {
-    const move = ([x, y]) => [x * scale + offsetX, y * scale + offsetY];
-    switch (stroke.kind) {
-        case 'line': return { ...stroke, from: move(stroke.from), to: move(stroke.to) };
-        case 'arc': return { ...stroke, center: move(stroke.center), radius: stroke.radius * scale };
-        case 'cubic': return { kind: 'cubic', segment: stroke.segment.map(move) };
-    }
-};
-/** Splits a stroke at `progress` into two strokes of the same kind (arcs stay arcs, so they keep their segment rule). */
-const splitStroke = (stroke, progress) => {
-    if (stroke.kind === 'arc') {
-        const splitAngle = stroke.startAngle + (stroke.endAngle - stroke.startAngle) * progress;
-        return [{ ...stroke, endAngle: splitAngle }, { ...stroke, startAngle: splitAngle }];
-    }
-    if (stroke.kind === 'line') {
-        const splitPoint = pointOnStroke(stroke, progress);
-        return [{ ...stroke, to: splitPoint }, { ...stroke, from: splitPoint }];
-    }
-    return [{ kind: 'cubic', segment: strokePiece(stroke, 0, progress) }, { kind: 'cubic', segment: strokePiece(stroke, progress, 1) }];
-};
-const fitToBox = (strokes) => {
-    const points = samplesOf(strokes).map(({ point }) => point);
-    const xValues = points.map(([x]) => x), yValues = points.map(([, y]) => y);
-    const minX = Math.min(...xValues), maxX = Math.max(...xValues), minY = Math.min(...yValues), maxY = Math.max(...yValues);
-    const scale = GRID_SIZE / Math.max(maxX - minX, maxY - minY);
-    return strokes.map((stroke) => transformStroke(stroke, scale, GRID_CENTER - ((minX + maxX) / 2) * scale, GRID_CENTER - ((minY + maxY) / 2) * scale));
-};
-/** Positive = clockwise on screen (y points down). */
-const signedArea = (strokes) => {
-    const points = samplesOf(strokes).map(({ point }) => point);
-    return points.reduce((sum, [x, y], index) => {
-        const [nextX, nextY] = points[(index + 1) % points.length];
-        return sum + x * nextY - nextX * y;
-    }, 0);
-};
-const clockwise = (strokes) => (signedArea(strokes) >= 0 ? strokes : strokes.slice().reverse().map(reversedStroke));
-/** Starts the closed outline where it crosses x = 12 highest up (splitting that stroke). */
-const startAtTopMiddle = (strokes) => {
-    const samples = samplesOf(strokes);
-    let best = null;
-    for (let index = 0; index < samples.length; index++) {
-        const sample = samples[index], next = samples[(index + 1) % samples.length];
-        const [x, y] = sample.point, [nextX, nextY] = next.point;
-        if ((x - GRID_CENTER) * (nextX - GRID_CENTER) > 0 || x === nextX)
-            continue;
-        const fraction = (GRID_CENTER - x) / (nextX - x);
-        const crossingY = y + (nextY - y) * fraction;
-        if (best && crossingY >= best.y)
-            continue;
-        const nextProgress = next.strokeIndex === sample.strokeIndex ? next.progress : 1;
-        best = { strokeIndex: sample.strokeIndex, progress: sample.progress + (nextProgress - sample.progress) * fraction, y: crossingY };
-    }
-    if (!best)
-        return strokes;
-    const { strokeIndex, progress } = best;
-    const before = strokes.slice(0, strokeIndex), after = strokes.slice(strokeIndex + 1);
-    if (progress < 1e-6)
-        return [...strokes.slice(strokeIndex), ...before];
-    if (progress > 1 - 1e-6)
-        return [...after, ...before, strokes[strokeIndex]];
-    const [firstPart, secondPart] = splitStroke(strokes[strokeIndex], progress);
-    return [secondPart, ...after, ...before, firstPart];
-};
-// ---- roundness: 1 = Lucide's own corners, 0 = sharp ----
-/** Lucide's corner arcs are small (radius 0.56 … 2.43); bigger arcs are part of the shape (circle, moon, droplet). */
-const LARGEST_CORNER_RADIUS = 2.5;
-const crossingOfLines = (point, direction, otherPoint, otherDirection) => {
-    const determinant = direction[0] * otherDirection[1] - direction[1] * otherDirection[0];
-    if (Math.abs(determinant) < 1e-9)
-        return null;
-    const along = ((otherPoint[0] - point[0]) * otherDirection[1] - (otherPoint[1] - point[1]) * otherDirection[0]) / determinant;
-    return [point[0] + direction[0] * along, point[1] + direction[1] * along];
-};
-/** Moves a stroke's start (or end) to `point`; a cubic's neighbouring control point moves along, so its direction there stays. */
-const withMovedEnd = (stroke, which, point) => {
-    if (stroke.kind === 'line')
-        return which === 'start' ? { ...stroke, from: point } : { ...stroke, to: point };
-    if (stroke.kind !== 'cubic')
-        return stroke;
-    const [start, control1, control2, end] = stroke.segment;
-    if (which === 'start') {
-        const shift = [point[0] - start[0], point[1] - start[1]];
-        return { kind: 'cubic', segment: [point, [control1[0] + shift[0], control1[1] + shift[1]], control2, end] };
-    }
-    const shift = [point[0] - end[0], point[1] - end[1]];
-    return { kind: 'cubic', segment: [start, control1, [control2[0] + shift[0], control2[1] + shift[1]], point] };
-};
-/**
- * Every corner arc (small, between two lines / cubics) shrinks towards the sharp corner where its two neighbours'
- * directions meet: radius × roundness, angles unchanged. At 0 the arc is a point on the corner. Same strokes in the
- * same order at any roundness, so morphs keep working.
- */
-const withCornerRoundness = (strokes, roundness) => {
-    const result = strokes.slice();
-    strokes.forEach((stroke, index) => {
-        const previousIndex = (index - 1 + strokes.length) % strokes.length, nextIndex = (index + 1) % strokes.length;
-        const isEdge = (neighbour) => neighbour.kind === 'line' || neighbour.kind === 'cubic';
-        if (stroke.kind !== 'arc' || stroke.radius > LARGEST_CORNER_RADIUS)
-            return;
-        if (!isEdge(strokes[previousIndex]) || !isEdge(strokes[nextIndex]))
-            return;
-        const turning = Math.sign(stroke.endAngle - stroke.startAngle);
-        const tangent = (angle) => [-Math.sin(angle * DEGREE) * turning, Math.cos(angle * DEGREE) * turning];
-        const start = pointOnStroke(stroke, 0), end = pointOnStroke(stroke, 1);
-        const corner = crossingOfLines(start, tangent(stroke.startAngle), end, tangent(stroke.endAngle));
-        if (!corner)
-            return;
-        const towardsCorner = ([x, y]) => [corner[0] + (x - corner[0]) * roundness, corner[1] + (y - corner[1]) * roundness];
-        result[index] = { ...stroke, center: towardsCorner(stroke.center), radius: stroke.radius * roundness };
-        result[previousIndex] = withMovedEnd(result[previousIndex], 'end', towardsCorner(start));
-        result[nextIndex] = withMovedEnd(result[nextIndex], 'start', towardsCorner(end));
-    });
-    return result;
-};
-/** The shape set at a roundness (0 = sharp … 1 = Lucide's own corners); its strokes are built on first use. */
-const shapeSetWithRoundness = (roundness) => {
-    let strokes = null;
-    return {
-        get strokes() {
-            strokes ??= Object.fromEntries(Object.entries(lucideShapeOutlines).map(([name, outline]) => [name, startAtTopMiddle(clockwise(fitToBox(withCornerRoundness(outline, roundness))))]));
-            return strokes;
-        },
-        alternativeStrokes: {},
-        pairLayouts: {},
-        spins: {},
-        segmentCount: SEGMENT_COUNT,
-        // shapes are filled (clip), not stroked; these only matter for the outlined band's corners
-        strokeWidth: 0,
-        lineCap: 'butt',
-        lineJoin: 'miter',
-        withRoundness: shapeSetWithRoundness,
-    };
-};
-/** The shape set of clip(): states `circle`, `ellipse`, `heart` … `puzzle` (see `lucideShapeOutlines`). */
-const clipShapes = shapeSetWithRoundness(1);
-return { lucideShapeOutlines, clipShapes };
-})();
-
-// svg.ts
-const { hasFixedStrokeWidth, createSvgElement, createIconSvg, createStrokedElement } = (() => {
-const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-/** A CSS length as stroke width: drawn at that width on screen instead of scaling with the icon. */
-const hasFixedStrokeWidth = (style) => typeof style.strokeWidth === 'string';
-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 (or the given style), colored by the CSS `color` (currentColor). */
-const createIconSvg = (iconSet, viewBox, style = {}) => {
-    const svg = createSvgElement('svg', {
-        viewBox,
-        fill: style.fill === true ? 'currentColor' : style.fill || 'none',
-        stroke: 'currentColor',
-        'stroke-linecap': style.lineCap ?? iconSet.lineCap,
-        'stroke-linejoin': style.lineJoin ?? iconSet.lineJoin,
-    });
-    // a CSS length goes into the style (attributes can't hold rem / em / calc reliably); children inherit it
-    if (hasFixedStrokeWidth(style))
-        svg.style.strokeWidth = style.strokeWidth;
-    else
-        svg.setAttribute('stroke-width', String(style.strokeWidth ?? iconSet.strokeWidth));
-    return svg;
-};
-/** A stroked child element (path, circle); with a fixed (CSS length) stroke width its line doesn't scale. */
-const createStrokedElement = (tagName, style, attributes = {}) => createSvgElement(tagName, {
-    ...attributes,
-    ...(hasFixedStrokeWidth(style) && { 'vector-effect': 'non-scaling-stroke' }),
-});
-return { hasFixedStrokeWidth, createSvgElement, createIconSvg, createStrokedElement };
-})();
-
-// clip.ts
-const { clip } = (() => {
-// Layer 3: an element cut out by a morphing shape (a star, a heart, a speech bubble …), e.g. a photo or a card.
-// The shape is square (1:1), placed by its centre (x, y) and size in % or px of the element, can be turned and
-// outlined (only a band along its edge shows). Filled → CSS `clip-path: url(#id)`; outlined → `mask: url(#id)`
-// (clip-path ignores line width). The <clipPath> / <mask> live in one hidden <svg> per clip.
-const GRID_SIZE = 24;
-const GRID_CENTER = 12;
-const DEGREE = Math.PI / 180;
-/** Masks and their clip regions reach far past the element, so bands and turned shapes are never cut by them. */
-const FAR = 100000;
-/** In objectBoundingBox units (1 = the element's width / height): far around the element. */
-const INVERTED_SURROUNDING = 'M-1000 -1000H1001V1001H-1000Z';
-let clipCount = 0;
-const lengthToPixels = (length, reference, name) => {
-    if (typeof length === 'number' && Number.isFinite(length))
-        return (length / 100) * reference;
-    const match = typeof length === 'string' ? /^\s*(-?[\d.]+(?:e[-+]?\d+)?)\s*(px|%)\s*$/i.exec(length) : null;
-    if (!match)
-        throw new Error(`morphico: ${name} "${length}" is not a length — use a number (= %), '40%' or '120px'`);
-    const value = Number(match[1]);
-    return match[2] === 'px' ? value : (value / 100) * reference;
-};
-const checkedOutline = (outline) => {
-    if (!outline)
-        return false;
-    if (!(outline.width > 0))
-        throw new Error('morphico: outline.width must be a number of px above 0');
-    if (outline.band && !['inside', 'centre', 'outside'].includes(outline.band)) {
-        throw new Error(`morphico: outline.band "${outline.band}" — use 'inside', 'centre' or 'outside'`);
-    }
-    return outline;
-};
-/** Cuts `element` out by a morphing shape. */
-const clip = (element, options = {}) => {
-    const { set = clipShapes, state: initialState = 'circle', x = 50, y = 50, size, rotation = 0, roundness = 1, outline = false, inverted = false, ...defaultMorphOptions } = options;
-    const checkedState = (shapeSet, state) => {
-        if (!(state in shapeSet.strokes)) {
-            throw new Error(`morphico: unknown shape "${state}" (known: ${Object.keys(shapeSet.strokes).join(', ')})`);
-        }
-        return state;
-    };
-    for (const [name, length] of [['x', x], ['y', y], ['size', size]]) {
-        if (length !== undefined)
-            lengthToPixels(length, 1, name);
-    }
-    /** Where the change goes (or what shows when nothing moves). */
-    const target = {
-        state: checkedState(set, initialState), set: resolveIconSet(set, roundness), roundness,
-        x, y, size, rotation, outline: checkedOutline(outline), inverted,
-    };
-    const pieceLength = pieceLengthOf(set);
-    let frame = null; // null = resting at the target
-    let running = null;
-    let elementWidth = 0, elementHeight = 0;
-    // ---- the hidden <svg> with the <clipPath> (filled) and the <mask> (outlined) ----
-    const id = `morphico-clip-${++clipCount}`;
-    const svg = createSvgElement('svg', { width: 0, height: 0, 'aria-hidden': 'true', focusable: 'false' });
-    svg.style.position = 'absolute';
-    svg.style.pointerEvents = 'none';
-    const clipPathElement = svg.appendChild(createSvgElement('clipPath', { id: `${id}-shape`, clipPathUnits: 'objectBoundingBox' }));
-    const clipShape = clipPathElement.appendChild(createSvgElement('path'));
-    const farRegion = { maskUnits: 'userSpaceOnUse', x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR };
-    const maskElement = svg.appendChild(createSvgElement('mask', { id: `${id}-band`, ...farRegion }));
-    /** Every path drawn in element pixels for the outlined band (the band itself and its helpers). */
-    let bandPaths = [];
-    const buildBand = () => {
-        for (const helper of svg.querySelectorAll('.morphico-band-helper'))
-            helper.remove();
-        maskElement.replaceChildren();
-        bandPaths = [];
-        clipShape.setAttribute('clip-rule', target.inverted ? 'evenodd' : 'nonzero');
-        if (!target.outline)
-            return;
-        const { width, band = 'inside' } = target.outline;
-        // inverted: everything shows (white), the band is the hole (black)
-        const bandColor = target.inverted ? 'black' : 'white';
-        if (target.inverted) {
-            maskElement.append(createSvgElement('rect', { x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR, fill: 'white' }));
-        }
-        const pixelPath = (attributes) => {
-            const path = createSvgElement('path', attributes);
-            bandPaths.push(path);
-            return path;
-        };
-        // inside = a line twice as wide, clipped to the shape; outside = a line twice as wide, the shape cut out of it
-        const edgeLine = (lineWidth) => pixelPath({ fill: 'none', stroke: bandColor, 'stroke-width': lineWidth, 'stroke-linejoin': 'miter' });
-        if (band === 'centre') {
-            maskElement.append(edgeLine(width));
-        }
-        else if (band === 'inside') {
-            const insideClip = createSvgElement('clipPath', { id: `${id}-inside`, class: 'morphico-band-helper' });
-            insideClip.append(pixelPath({}));
-            svg.append(insideClip);
-            const line = edgeLine(2 * width);
-            line.setAttribute('clip-path', `url(#${id}-inside)`);
-            maskElement.append(line);
-        }
-        else {
-            // painting black over the inside would only work for luminance masks; a mask cut out of the line works for both
-            const outsideMask = createSvgElement('mask', { id: `${id}-outside`, class: 'morphico-band-helper', ...farRegion });
-            outsideMask.append(createSvgElement('rect', { x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR, fill: 'white' }), pixelPath({ fill: 'black' }));
-            svg.append(outsideMask);
-            const line = edgeLine(2 * width);
-            line.setAttribute('mask', `url(#${id}-outside)`);
-            maskElement.append(line);
-        }
-    };
-    const ownClipPath = element.style.clipPath;
-    const ownMask = element.style.mask;
-    const applyStyle = () => {
-        const mask = target.outline ? `url(#${id}-band)` : ownMask;
-        element.style.clipPath = target.outline ? ownClipPath : `url(#${id}-shape)`;
-        element.style.mask = mask;
-        element.style.setProperty('-webkit-mask', mask);
-    };
-    // ---- placement and drawing ----
-    const restingPlacement = () => ({
-        centerX: lengthToPixels(target.x, elementWidth, 'x'),
-        centerY: lengthToPixels(target.y, elementHeight, 'y'),
-        side: target.size === undefined ? Math.min(elementWidth, elementHeight) : lengthToPixels(target.size, elementWidth, 'size'),
-    });
-    const restingFrame = () => ({ shape: shapesOf(target.set)[target.state], rotation: target.rotation, placement: restingPlacement() });
-    /** The shape in element pixels: scaled to its square, turned around the square's centre, moved into place. */
-    const toElementPixels = ({ shape, rotation: angle, placement: { centerX, centerY, side } }) => {
-        const scale = side / GRID_SIZE;
-        const cos = Math.cos(angle * DEGREE), sin = Math.sin(angle * DEGREE);
-        const pixels = [];
-        for (let index = 0; index < shape.length; index += 2) {
-            const offsetX = (shape[index] - GRID_CENTER) * scale, offsetY = (shape[index + 1] - GRID_CENTER) * scale;
-            pixels.push(centerX + offsetX * cos - offsetY * sin, centerY + offsetX * sin + offsetY * cos);
-        }
-        return pixels;
-    };
-    const render = () => {
-        if (!elementWidth || !elementHeight)
-            return;
-        const pixels = toElementPixels(frame ?? restingFrame());
-        if (target.outline) {
-            const pathData = toPathData(pixels, pieceLength);
-            for (const path of bandPaths)
-                path.setAttribute('d', pathData);
-        }
-        else {
-            // objectBoundingBox: 0…1 of the element's width / height
-            const boxUnits = pixels.map((value, index) => value / (index % 2 ? elementHeight : elementWidth));
-            // inverted: a rectangle far around the element with the shape as a hole in it (clip-rule evenodd)
-            const surrounding = target.inverted ? INVERTED_SURROUNDING : '';
-            clipShape.setAttribute('d', surrounding + toPathData(boxUnits, pieceLength));
-        }
-    };
-    const measure = (width, height) => {
-        elementWidth = width;
-        elementHeight = height;
-        render();
-    };
-    // ---- changes ----
-    /** Ends the running change 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: target.state, interrupted });
-    };
-    /** Updates the target (checked first, so a wrong value throws right away, not in an animation frame). */
-    const applyChanges = (changes) => {
-        for (const name of ['x', 'y', 'size']) {
-            if (changes[name] !== undefined)
-                lengthToPixels(changes[name], 1, name);
-        }
-        if (changes.state !== undefined)
-            target.state = checkedState(target.set, changes.state);
-        if (changes.roundness !== undefined && changes.roundness !== target.roundness) {
-            target.roundness = changes.roundness;
-            target.set = resolveIconSet(set, changes.roundness);
-        }
-        if (changes.x !== undefined)
-            target.x = changes.x;
-        if (changes.y !== undefined)
-            target.y = changes.y;
-        if (changes.size !== undefined)
-            target.size = changes.size;
-        if (changes.rotation !== undefined)
-            target.rotation = changes.rotation;
-        if (changes.outline !== undefined || changes.inverted !== undefined) {
-            if (changes.outline !== undefined)
-                target.outline = checkedOutline(changes.outline);
-            if (changes.inverted !== undefined)
-                target.inverted = changes.inverted;
-            buildBand();
-            applyStyle();
-        }
-    };
-    const change = (changes, morphOptions) => {
-        const settled = !running;
-        finish(true);
-        const previous = { state: target.state, set: target.set };
-        const from = frame ?? restingFrame();
-        applyChanges(changes);
-        const { duration = DEFAULT_DURATION, easing = 'easeInOutCubic' } = morphOptions;
-        if (duration <= 0 || prefersReducedMotion() || !elementWidth || !elementHeight) {
-            frame = null;
-            render();
-            return Promise.resolve({ state: target.state, interrupted: false });
-        }
-        // settled: both sides use the pair's layouts; interrupted: start from the shape on screen
-        const fromShape = settled
-            ? shapeForPair(previous.set, shapesOf(previous.set), previous.state, target.state) : from.shape;
-        const toShape = shapeForPair(target.set, shapesOf(target.set), target.state, previous.state);
-        const to = restingPlacement();
-        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) {
-                    frame = null;
-                    render();
-                    finish(false);
-                    return false;
-                }
-                const easedProgress = ease(progress);
-                const between = (start, end) => start + (end - start) * easedProgress;
-                frame = {
-                    shape: interpolate(fromShape, toShape, easedProgress),
-                    rotation: between(from.rotation, target.rotation),
-                    placement: {
-                        centerX: between(from.placement.centerX, to.centerX),
-                        centerY: between(from.placement.centerY, to.centerY),
-                        side: between(from.placement.side, to.side),
-                    },
-                };
-                render();
-                return true;
-            });
-            running = { stopAnimation, resolvers: [resolve] };
-        });
-    };
-    // ---- start ----
-    const root = element.getRootNode();
-    // inside a shadow root, url(#id) only finds ids of that root
-    (root instanceof ShadowRoot ? root : document.body).append(svg);
-    buildBand();
-    applyStyle();
-    const box = element.getBoundingClientRect();
-    measure(box.width, box.height);
-    const resizeObserver = typeof ResizeObserver === 'function'
-        ? new ResizeObserver(([entry]) => {
-            const borderBox = entry.borderBoxSize?.[0];
-            if (borderBox)
-                measure(borderBox.inlineSize, borderBox.blockSize);
-            else
-                measure(entry.contentRect.width, entry.contentRect.height);
-        })
-        : null;
-    resizeObserver?.observe(element);
-    return {
-        get state() { return target.state; },
-        to(stateOrChanges, options = {}) {
-            const { onEnd, duration, easing, ...changes } = typeof stateOrChanges === 'string'
-                ? { ...options, state: stateOrChanges } : stateOrChanges;
-            const result = change(changes, { ...defaultMorphOptions, ...(duration !== undefined && { duration }), ...(easing && { easing }) });
-            if (onEnd)
-                result.then(onEnd);
-            return result;
-        },
-        set(changes) {
-            finish(true);
-            frame = null;
-            applyChanges(changes);
-            render();
-        },
-        destroy() {
-            finish(true);
-            resizeObserver?.disconnect();
-            svg.remove();
-            element.style.clipPath = ownClipPath;
-            element.style.mask = ownMask;
-            element.style.setProperty('-webkit-mask', ownMask);
-        },
-    };
-};
-return { clip };
-})();
-
-// sets/faces.ts
-const { OUTLINE_POINTS, PIECE_NAMES, faceExpressionNames, faceExpressionPieces, interpolateFace, blinked, smoothClosedPath, facePaths } = (() => {
-const OUTLINE_POINTS = 24;
-const PIECE_NAMES = ['leftBrow', 'rightBrow', 'leftEye', 'rightEye', 'leftPupil', 'rightPupil', 'mouth'];
-const DENSE_SAMPLES = 360;
-const toRadians = (degrees) => (degrees * Math.PI) / 180;
-const rotatePoint = ([x, y], degrees) => {
-    const angle = toRadians(degrees);
-    return [x * Math.cos(angle) - y * Math.sin(angle), x * Math.sin(angle) + y * Math.cos(angle)];
-};
-const denseBlobOutline = (options) => {
-    const { centre, width, height, rotation = 0, squareness = 0, topScale = 1 } = options;
-    const exponent = 2 + squareness * 6;
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const outline = [];
-    for (let index = 0; index < DENSE_SAMPLES; index++) {
-        const angle = toRadians(-90 + (360 * index) / DENSE_SAMPLES);
-        const cosine = Math.cos(angle);
-        const sine = Math.sin(angle);
-        const y = halfHeight * Math.sign(sine) * Math.abs(sine) ** (2 / exponent);
-        const widthScale = 1 + ((topScale - 1) * (halfHeight - y)) / (2 * halfHeight);
-        const x = halfWidth * widthScale * Math.sign(cosine) * Math.abs(cosine) ** (2 / exponent);
-        const [turnedX, turnedY] = rotatePoint([x, y], rotation);
-        outline.push([centre[0] + turnedX, centre[1] + turnedY]);
-    }
-    const xs = outline.map(([x]) => x);
-    const left = Math.min(...xs);
-    const right = Math.max(...xs);
-    const lineY = ([leftY, rightY], x) => leftY + ((rightY - leftY) * (x - left)) / (right - left);
-    return outline.map(([x, y]) => {
-        let cutY = y;
-        if (options.cutTop)
-            cutY = Math.max(cutY, lineY(options.cutTop, x));
-        if (options.cutBottom)
-            cutY = Math.min(cutY, lineY(options.cutBottom, x));
-        return [x, cutY];
-    });
-};
-/** OUTLINE_POINTS points of a star-shaped outline, on rays at even angles from its box's centre (measured in the box
- * stretched to a square, so a long flat shape still gets points on its round ends). */
-const resampleByAngle = (outline) => {
-    const xs = outline.map(([x]) => x);
-    const ys = outline.map(([, y]) => y);
-    const centreX = (Math.min(...xs) + Math.max(...xs)) / 2;
-    const centreY = (Math.min(...ys) + Math.max(...ys)) / 2;
-    const halfX = Math.max((Math.max(...xs) - Math.min(...xs)) / 2, 1e-9);
-    const halfY = Math.max((Math.max(...ys) - Math.min(...ys)) / 2, 1e-9);
-    const normalized = outline.map(([x, y]) => [(x - centreX) / halfX, (y - centreY) / halfY]);
-    const points = [];
-    for (let index = 0; index < OUTLINE_POINTS; index++) {
-        const angle = toRadians(-90 + (360 * index) / OUTLINE_POINTS);
-        const directionX = Math.cos(angle);
-        const directionY = Math.sin(angle);
-        let farthest = 0;
-        normalized.forEach((start, edgeIndex) => {
-            const end = normalized[(edgeIndex + 1) % normalized.length];
-            const edgeX = end[0] - start[0];
-            const edgeY = end[1] - start[1];
-            const denominator = directionX * edgeY - directionY * edgeX;
-            if (Math.abs(denominator) < 1e-12)
-                return;
-            const distance = (start[0] * edgeY - start[1] * edgeX) / denominator;
-            const along = (start[0] * directionY - start[1] * directionX) / denominator;
-            // a little slack: a ray passing exactly through a corner of the dense outline must still hit one of its edges
-            if (along >= -1e-9 && along <= 1 + 1e-9 && distance > farthest)
-                farthest = distance;
-        });
-        points.push([centreX + directionX * farthest * halfX, centreY + directionY * farthest * halfY]);
-    }
-    return points;
-};
-const blob = (options) => resampleByAngle(denseBlobOutline(options));
-const band = (options) => {
-    const { from, to, bend, thickness, endShare = 1 } = options;
-    const chordX = to[0] - from[0];
-    const chordY = to[1] - from[1];
-    const chordLength = Math.hypot(chordX, chordY);
-    // the quadratic's control point sits twice as far out as the curve's middle
-    const control = [
-        (from[0] + to[0]) / 2 + ((2 * bend * chordY) / chordLength),
-        (from[1] + to[1]) / 2 - ((2 * bend * chordX) / chordLength),
-    ];
-    const pointAt = (along) => {
-        const rest = 1 - along;
-        return [
-            rest * rest * from[0] + 2 * rest * along * control[0] + along * along * to[0],
-            rest * rest * from[1] + 2 * rest * along * control[1] + along * along * to[1],
-        ];
-    };
-    const tangentAt = (along) => {
-        const tangentX = 2 * (1 - along) * (control[0] - from[0]) + 2 * along * (to[0] - control[0]);
-        const tangentY = 2 * (1 - along) * (control[1] - from[1]) + 2 * along * (to[1] - control[1]);
-        const length = Math.hypot(tangentX, tangentY);
-        return [tangentX / length, tangentY / length];
-    };
-    const thicknessAt = (along) => thickness * (endShare + (1 - endShare) * Math.sin(Math.PI * along));
-    // side 1 = the upper edge (the left normal of a rightward curve), -1 = the lower edge
-    const edge = (along, side) => {
-        const [x, y] = pointAt(along);
-        const [tangentX, tangentY] = tangentAt(along);
-        const offset = (side * thicknessAt(along)) / 2;
-        return [x + tangentY * offset, y - tangentX * offset];
-    };
-    // a point on the half circle around an end: turn -90° = on the upper edge, 0 = the tip, 90° = on the lower edge
-    const capPoint = (along, turn) => {
-        const [x, y] = pointAt(along);
-        const [tangentX, tangentY] = tangentAt(along);
-        const radius = thicknessAt(along) / 2;
-        const outward = along === 1 ? 1 : -1;
-        const alongTangent = outward * Math.cos(turn) * radius;
-        const towardsLower = outward * Math.sin(turn) * radius;
-        return [x + tangentX * alongTangent - tangentY * towardsLower, y + tangentY * alongTangent + tangentX * towardsLower];
-    };
-    // clockwise from the top middle at the same angles as a blob's points (a quarter = the right end, half = the bottom
-    // middle, three quarters = the left end); the points within 30° of an end lie on its half circle, the rest along the
-    // edges
-    const capShare = Math.sin(Math.PI / 3);
-    return Array.from({ length: OUTLINE_POINTS }, (_, index) => {
-        const angle = (2 * Math.PI * index) / OUTLINE_POINTS;
-        const sine = Math.sin(angle);
-        if (Math.abs(sine) < capShare - 1e-9)
-            return edge(0.5 + (0.5 * sine) / capShare, Math.cos(angle) > 0 ? 1 : -1);
-        // the angle's distance past the cap's start, stretched from ±30° around the end to ±90° around the half circle
-        const endAngle = sine > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
-        return capPoint(sine > 0 ? 1 : 0, (angle - endAngle) * 3);
-    });
-};
-/** A piece that isn't there: every point on one spot (draws nothing). */
-const hidden = (at) => Array.from({ length: OUTLINE_POINTS }, () => [at[0], at[1]]);
-/** The piece mirrored onto the other half of the face, still clockwise from the top. */
-const mirrored = (points) => points.map((_, index) => {
-    const [x, y] = points[(OUTLINE_POINTS - index) % OUTLINE_POINTS];
-    return [24 - x, y];
-});
-/** A face from its left half (as seen) + the mouth. */
-const symmetricFace = ({ brow, eye, pupil, mouth }) => ({
-    leftBrow: brow,
-    rightBrow: mirrored(brow),
-    leftEye: eye,
-    rightEye: mirrored(eye),
-    leftPupil: pupil,
-    rightPupil: mirrored(pupil),
-    mouth,
-});
-/** The whole face mirrored: left and right pieces swap sides. */
-const mirroredFace = (face) => ({
-    leftBrow: mirrored(face.rightBrow),
-    rightBrow: mirrored(face.leftBrow),
-    leftEye: mirrored(face.rightEye),
-    rightEye: mirrored(face.leftEye),
-    leftPupil: mirrored(face.rightPupil),
-    rightPupil: mirrored(face.leftPupil),
-    mouth: mirrored(face.mouth),
-});
-// ---- the expressions (names from the user's pictures) ----
-const faceExpressionNames = [
-    'normal',
-    'smiling',
-    'pleading',
-    'wonder',
-    'focused',
-    'fright',
-    'angry',
-    'asleep',
-    'sad',
-    'surprised',
-    'laughing',
-    'tired',
-    'wink-left',
-    'wink-right',
-    'suspicious',
-    'confused',
-    'smug',
-    'irritated',
-    'bored',
-    'curious',
-    'empathetic',
-    'guilty',
-    'worried',
-    'disappointed',
-    'ashamed',
-    'embarrassed',
-    'yearning',
-    'triumphant',
-    'proud',
-    'excited',
-    'scornful',
-    'disgusted',
-];
-const buildFaceExpressions = () => {
-    const winkRight = {
-        ...symmetricFace({
-            brow: blob({ centre: [6.2, 4.4], width: 5.2, height: 1.9, squareness: 0.5, rotation: -6 }),
-            eye: blob({ centre: [6.4, 12], width: 8.4, height: 8.4 }),
-            pupil: blob({ centre: [7, 11.4], width: 3.2, height: 3.2 }),
-            mouth: band({ from: [9.6, 18.4], to: [14.8, 18], bend: -0.9, thickness: 1.2, endShare: 0.7 }),
-        }),
-        rightBrow: mirrored(blob({ centre: [6.2, 6], width: 5, height: 1.8, squareness: 0.5, rotation: 8 })),
-        rightEye: mirrored(band({ from: [3.2, 12.8], to: [9.6, 12.8], bend: 1.4, thickness: 1.6, endShare: 0.7 })),
-        rightPupil: hidden([17.6, 12]),
-    };
-    return {
-        normal: symmetricFace({
-            brow: blob({ centre: [6.2, 4.6], width: 5.2, height: 1.9, squareness: 0.5, rotation: -6 }),
-            eye: blob({ centre: [6.4, 12], width: 8.4, height: 8.4 }),
-            pupil: blob({ centre: [7, 10.7], width: 3.2, height: 3.2 }),
-            mouth: blob({ centre: [12, 18.8], width: 4.4, height: 1.8, squareness: 0.6 }),
-        }),
-        smiling: symmetricFace({
-            brow: blob({ centre: [6, 5.4], width: 5, height: 4.4, squareness: 0.2, cutBottom: [5.4, 5.4] }),
-            eye: blob({ centre: [6, 13], width: 9.2, height: 7.6 }),
-            pupil: blob({ centre: [6.8, 13.6], width: 3.6, height: 2.4 }),
-            mouth: band({ from: [9, 18.4], to: [15, 18.4], bend: -1, thickness: 1.3, endShare: 0.7 }),
-        }),
-        pleading: symmetricFace({
-            brow: blob({ centre: [6.6, 3.7], width: 4.6, height: 2, squareness: 0.5, rotation: -16 }),
-            eye: blob({ centre: [6.8, 12.4], width: 8.6, height: 9.6, topScale: 0.75, rotation: 12 }),
-            pupil: blob({ centre: [7.6, 10.7], width: 4, height: 4 }),
-            mouth: blob({ centre: [12, 17.6], width: 4.3, height: 4.8, squareness: 0.3, cutTop: [17.6, 17.6] }),
-        }),
-        wonder: symmetricFace({
-            brow: band({ from: [3.4, 4.8], to: [8.6, 3.3], bend: 0.7, thickness: 1.7 }),
-            eye: blob({ centre: [6.4, 12], width: 7.8, height: 9.6 }),
-            pupil: blob({ centre: [6.8, 11.2], width: 3.2, height: 4.2 }),
-            mouth: blob({ centre: [12, 18.6], width: 3.8, height: 1, squareness: 0.6 }),
-        }),
-        focused: symmetricFace({
-            brow: blob({ centre: [6, 4.4], width: 5.6, height: 2.2, squareness: 0.55, rotation: 3 }),
-            eye: blob({ centre: [6.2, 12.8], width: 9, height: 8, cutTop: [10, 11] }),
-            pupil: blob({ centre: [6.8, 13.2], width: 3.8, height: 2.8 }),
-            mouth: blob({ centre: [12, 18.8], width: 4.2, height: 1, squareness: 0.6 }),
-        }),
-        fright: symmetricFace({
-            brow: blob({ centre: [5.7, 3.5], width: 4.8, height: 2.2, squareness: 0.45, rotation: -8 }),
-            eye: blob({ centre: [6.2, 12.4], width: 8.4, height: 9.8, topScale: 0.7, rotation: 8 }),
-            pupil: blob({ centre: [7.2, 12], width: 3.6, height: 4.2 }),
-            mouth: blob({ centre: [12, 18.6], width: 3.8, height: 1.4, squareness: 0.5 }),
-        }),
-        angry: symmetricFace({
-            brow: blob({ centre: [6.4, 5.4], width: 5.2, height: 2, squareness: 0.5, rotation: 12 }),
-            eye: blob({ centre: [6.2, 12.6], width: 8.6, height: 8, cutTop: [9.2, 12] }),
-            pupil: blob({ centre: [7.4, 12.8], width: 3.4, height: 3.4 }),
-            mouth: blob({ centre: [12, 17.8], width: 4.2, height: 4, squareness: 0.3, cutTop: [17.8, 17.8] }),
-        }),
-        asleep: symmetricFace({
-            brow: blob({ centre: [6, 5.4], width: 4, height: 1.7, squareness: 0.4, rotation: 4 }),
-            eye: band({ from: [3, 12.4], to: [9.6, 12.4], bend: -1.2, thickness: 1.5, endShare: 0.6 }),
-            pupil: hidden([6.3, 13.4]),
-            mouth: blob({ centre: [12, 18.8], width: 2.6, height: 1.8 }),
-        }),
-        // more feelings, Claude's drafts (no pictures); the one-sided ones replace pieces of the right half — written in place
-        // (a blob or band is already clockwise from its top) or drawn on the left and mirrored
-        sad: symmetricFace({
-            brow: blob({ centre: [6.4, 5.2], width: 4.8, height: 1.9, squareness: 0.5, rotation: -18 }),
-            eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 8, cutTop: [11.2, 9.6] }),
-            pupil: blob({ centre: [6.8, 13.8], width: 3.2, height: 3.4 }),
-            mouth: band({ from: [9.4, 19.2], to: [14.6, 19.2], bend: 0.9, thickness: 1.2, endShare: 0.7 }),
-        }),
-        surprised: symmetricFace({
-            brow: band({ from: [3.6, 3.6], to: [8.6, 2.8], bend: 0.6, thickness: 1.6 }),
-            eye: blob({ centre: [6.4, 12], width: 8.6, height: 9 }),
-            pupil: blob({ centre: [6.4, 12], width: 2.4, height: 2.4 }),
-            mouth: blob({ centre: [12, 19], width: 2.8, height: 3.4 }),
-        }),
-        laughing: symmetricFace({
-            brow: blob({ centre: [6, 4.6], width: 5, height: 4.4, squareness: 0.2, cutBottom: [4.6, 4.6] }),
-            eye: band({ from: [3.2, 13], to: [9.6, 13], bend: 1.6, thickness: 1.6, endShare: 0.7 }),
-            pupil: hidden([6.4, 12]),
-            mouth: blob({ centre: [12, 17], width: 6, height: 6, squareness: 0.2, cutTop: [17, 17] }),
-        }),
-        tired: symmetricFace({
-            brow: blob({ centre: [6, 6], width: 5, height: 1.7, squareness: 0.5, rotation: -4 }),
-            eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.6, 11.6] }),
-            pupil: blob({ centre: [6.6, 13.6], width: 3.2, height: 3.2 }),
-            mouth: blob({ centre: [12, 19], width: 3.2, height: 0.9, squareness: 0.6 }),
-        }),
-        // wink-left / wink-right = the eye that closes, as seen; one is the other mirrored
-        'wink-left': mirroredFace(winkRight),
-        'wink-right': winkRight,
-        suspicious: {
-            ...symmetricFace({
-                brow: band({ from: [3.4, 4], to: [8.8, 3], bend: 0.8, thickness: 1.6 }),
-                eye: blob({ centre: [6.4, 12.6], width: 8.6, height: 7.6, cutTop: [10.8, 10.8] }),
-                pupil: blob({ centre: [4.6, 13.2], width: 3.2, height: 3 }),
-                mouth: blob({ centre: [12.6, 18.8], width: 3.6, height: 1, squareness: 0.6, rotation: -10 }),
-            }),
-            rightBrow: mirrored(blob({ centre: [6.4, 6.4], width: 5.2, height: 1.8, squareness: 0.5, rotation: 10 })),
-            rightEye: mirrored(blob({ centre: [6.4, 12.8], width: 8.6, height: 7.2, cutTop: [11.8, 11.8] })),
-            rightPupil: blob({ centre: [16.2, 13.4], width: 3.2, height: 3 }),
-        },
-        confused: {
-            ...symmetricFace({
-                brow: band({ from: [3.4, 3.8], to: [8.6, 2.6], bend: 0.7, thickness: 1.6 }),
-                eye: blob({ centre: [6.4, 12], width: 8.6, height: 9 }),
-                pupil: blob({ centre: [7.6, 10.6], width: 3, height: 3 }),
-                mouth: blob({ centre: [12.4, 19], width: 3.8, height: 1.1, squareness: 0.5, rotation: 12 }),
-            }),
-            rightBrow: mirrored(blob({ centre: [6.2, 5.8], width: 5, height: 1.8, squareness: 0.5, rotation: 10 })),
-            rightEye: mirrored(blob({ centre: [6.4, 12.6], width: 7.4, height: 7.4 })),
-            rightPupil: blob({ centre: [18.4, 11.4], width: 2.8, height: 2.8 }),
-        },
-        // the user's list of feelings (2026-11-01), Claude's drafts; the ones the set had already are skipped
-        smug: {
-            ...symmetricFace({
-                brow: blob({ centre: [6.2, 5], width: 5, height: 1.8, squareness: 0.5, rotation: -4 }),
-                eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.4, 11.4] }),
-                pupil: blob({ centre: [8, 13.4], width: 3, height: 3 }),
-                mouth: band({ from: [10.2, 18.8], to: [15.2, 17.6], bend: -0.6, thickness: 1.2, endShare: 0.6 }),
-            }),
-            rightBrow: mirrored(band({ from: [3.6, 4.2], to: [8.6, 3.4], bend: 0.6, thickness: 1.6 })),
-            rightPupil: blob({ centre: [19.4, 13.4], width: 3, height: 3 }),
-        },
-        irritated: symmetricFace({
-            brow: blob({ centre: [6.4, 5.8], width: 5.4, height: 1.8, squareness: 0.55, rotation: 6 }),
-            eye: blob({ centre: [6.4, 12.8], width: 8.6, height: 7.6, cutTop: [11.2, 11.8], cutBottom: [15.8, 15.8] }),
-            pupil: blob({ centre: [6.8, 13.6], width: 3.2, height: 3 }),
-            mouth: blob({ centre: [12.4, 18.8], width: 3.6, height: 0.9, squareness: 0.6, rotation: -8 }),
-        }),
-        bored: {
-            ...symmetricFace({
-                brow: blob({ centre: [6, 6.2], width: 5, height: 1.7, squareness: 0.5 }),
-                eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.8, 11.8] }),
-                pupil: blob({ centre: [8, 12.8], width: 3, height: 3 }),
-                mouth: blob({ centre: [13.4, 19], width: 3, height: 0.9, squareness: 0.6 }),
-            }),
-            rightPupil: blob({ centre: [19.4, 12.8], width: 3, height: 3 }),
-        },
-        curious: {
-            ...symmetricFace({
-                brow: band({ from: [3.4, 3.6], to: [8.6, 2.6], bend: 0.7, thickness: 1.6 }),
-                eye: blob({ centre: [6.4, 12], width: 8.6, height: 8.8 }),
-                pupil: blob({ centre: [7.8, 10.8], width: 3.2, height: 3.2 }),
-                mouth: blob({ centre: [12.6, 18.8], width: 2, height: 2.2 }),
-            }),
-            rightBrow: mirrored(blob({ centre: [6.2, 5.2], width: 5, height: 1.8, squareness: 0.5, rotation: 4 })),
-            rightPupil: blob({ centre: [19, 10.8], width: 3.2, height: 3.2 }),
-        },
-        empathetic: symmetricFace({
-            brow: blob({ centre: [6.4, 4.8], width: 5, height: 1.9, squareness: 0.5, rotation: -10 }),
-            eye: blob({ centre: [6.4, 12.4], width: 8.4, height: 8, cutTop: [10, 9.2] }),
-            pupil: blob({ centre: [6.8, 13], width: 3.4, height: 3.4 }),
-            mouth: band({ from: [10, 18.6], to: [14, 18.6], bend: -0.5, thickness: 1.1, endShare: 0.7 }),
-        }),
-        guilty: {
-            ...symmetricFace({
-                brow: blob({ centre: [6.4, 5], width: 4.6, height: 1.8, squareness: 0.5, rotation: -14 }),
-                eye: blob({ centre: [6.4, 12.6], width: 8.2, height: 8, cutTop: [10.6, 10.2] }),
-                pupil: blob({ centre: [5, 14.4], width: 3, height: 3 }),
-                mouth: blob({ centre: [11.4, 19], width: 2.8, height: 0.9, squareness: 0.6, rotation: 6 }),
-            }),
-            rightPupil: blob({ centre: [16.2, 14.4], width: 3, height: 3 }),
-        },
-        worried: symmetricFace({
-            brow: blob({ centre: [6.6, 4.2], width: 4.8, height: 1.9, squareness: 0.5, rotation: -20 }),
-            eye: blob({ centre: [6.4, 12.2], width: 8, height: 8.8, topScale: 0.85, rotation: 6 }),
-            pupil: blob({ centre: [6.8, 12.4], width: 2.6, height: 2.8 }),
-            mouth: band({ from: [10.2, 19], to: [13.8, 19], bend: 0.6, thickness: 1.1, endShare: 0.7 }),
-        }),
-        disappointed: symmetricFace({
-            brow: blob({ centre: [6.2, 5.6], width: 5, height: 1.8, squareness: 0.5, rotation: -8 }),
-            eye: blob({ centre: [6.4, 12.8], width: 8.4, height: 7.6, cutTop: [11.8, 11] }),
-            pupil: blob({ centre: [6.6, 14.4], width: 3, height: 3 }),
-            mouth: band({ from: [9.6, 19.2], to: [14.4, 19.2], bend: 0.4, thickness: 1.1, endShare: 0.8 }),
-        }),
-        ashamed: symmetricFace({
-            brow: blob({ centre: [6.4, 5.6], width: 4.6, height: 1.8, squareness: 0.5, rotation: -16 }),
-            eye: blob({ centre: [6.4, 13], width: 8.2, height: 7.6, cutTop: [12.2, 12.2] }),
-            pupil: blob({ centre: [6.4, 15], width: 3, height: 2.6 }),
-            mouth: blob({ centre: [12, 19.4], width: 2.4, height: 0.9, squareness: 0.6 }),
-        }),
-        embarrassed: {
-            ...symmetricFace({
-                brow: blob({ centre: [6.2, 4.8], width: 4.8, height: 1.8, squareness: 0.5, rotation: -12 }),
-                eye: blob({ centre: [6.4, 12.4], width: 8.2, height: 8.2 }),
-                pupil: blob({ centre: [4.4, 13.6], width: 3, height: 3 }),
-                mouth: band({ from: [9.8, 18.8], to: [14.2, 18.6], bend: -0.5, thickness: 1.1, endShare: 0.7 }),
-            }),
-            rightPupil: blob({ centre: [15.8, 13.6], width: 3, height: 3 }),
-        },
-        yearning: symmetricFace({
-            brow: blob({ centre: [6.2, 4], width: 4.8, height: 1.8, squareness: 0.5, rotation: -10 }),
-            eye: blob({ centre: [6.4, 12.6], width: 8.6, height: 8, cutTop: [11, 11] }),
-            pupil: blob({ centre: [6.8, 13.6], width: 4.2, height: 4.2 }),
-            mouth: blob({ centre: [12, 18.8], width: 2.6, height: 1.6 }),
-        }),
-        triumphant: symmetricFace({
-            brow: blob({ centre: [6.2, 4], width: 5.2, height: 2, squareness: 0.5, rotation: 8 }),
-            eye: blob({ centre: [6.4, 11.8], width: 8.6, height: 8.6, cutBottom: [14, 14] }),
-            pupil: blob({ centre: [6.8, 11.6], width: 3.4, height: 3.4 }),
-            mouth: blob({ centre: [12, 16.8], width: 7, height: 6.4, squareness: 0.3, cutTop: [16.8, 16.8] }),
-        }),
-        proud: symmetricFace({
-            brow: blob({ centre: [6.2, 3.8], width: 5, height: 1.9, squareness: 0.5, rotation: -4 }),
-            eye: blob({ centre: [6.4, 12.4], width: 8.6, height: 8, cutTop: [11, 11] }),
-            pupil: blob({ centre: [6.6, 13.6], width: 3.2, height: 3 }),
-            mouth: band({ from: [8.8, 18], to: [15.2, 18], bend: -1.2, thickness: 1.3, endShare: 0.7 }),
-        }),
-        excited: symmetricFace({
-            brow: band({ from: [3.4, 3.6], to: [8.6, 2.8], bend: 0.8, thickness: 1.6 }),
-            eye: blob({ centre: [6.4, 12], width: 9, height: 9.2 }),
-            pupil: blob({ centre: [7, 11], width: 4, height: 4 }),
-            mouth: blob({ centre: [12, 16.8], width: 6, height: 6, squareness: 0.2, cutTop: [16.8, 16.8] }),
-        }),
-        scornful: {
-            ...symmetricFace({
-                brow: blob({ centre: [6.2, 5.4], width: 5, height: 1.8, squareness: 0.5, rotation: 2 }),
-                eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.4, 11.4] }),
-                pupil: blob({ centre: [5.4, 14], width: 3, height: 3 }),
-                mouth: band({ from: [9.2, 18.8], to: [14.6, 18], bend: -0.2, thickness: 1.1, endShare: 0.7 }),
-            }),
-            rightBrow: mirrored(band({ from: [3.6, 4], to: [8.6, 3.2], bend: 0.6, thickness: 1.6 })),
-            rightPupil: blob({ centre: [16.6, 14], width: 3, height: 3 }),
-        },
-        disgusted: symmetricFace({
-            brow: blob({ centre: [6.6, 6], width: 5, height: 1.8, squareness: 0.5, rotation: 14 }),
-            eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.4, 12.2], cutBottom: [14.8, 14.8] }),
-            pupil: blob({ centre: [6.8, 13.2], width: 3, height: 2.8 }),
-            // an upside-down "D": open, corners pulled down
-            mouth: blob({ centre: [12, 19.6], width: 5, height: 4.8, squareness: 0.2, cutBottom: [19.6, 19.6] }),
-        }),
-    };
-};
-let builtExpressions = null;
-/** Every expression's pieces, built on first use (nothing runs at import). */
-const faceExpressionPieces = () => (builtExpressions ??= buildFaceExpressions());
-// ---- morphing and drawing ----
-const interpolatePoints = (from, to, progress) => from.map(([fromX, fromY], index) => [fromX + (to[index][0] - fromX) * progress, fromY + (to[index][1] - fromY) * progress]);
-const interpolateFace = (from, to, progress) => Object.fromEntries(PIECE_NAMES.map((name) => [name, interpolatePoints(from[name], to[name], progress)]));
-const boxCentre = (points) => {
-    const xs = points.map(([x]) => x);
-    const ys = points.map(([, y]) => y);
-    return [(Math.min(...xs) + Math.max(...xs)) / 2, (Math.min(...ys) + Math.max(...ys)) / 2];
-};
-/** The face with its eyes partly closed: openness 1 = as drawn, 0 = shut to a flat slit (pupils gone). */
-const blinked = (face, openness) => {
-    if (openness >= 1)
-        return face;
-    const eyeScale = 0.25 + 0.75 * openness;
-    const squash = (points, middleY) => points.map(([x, y]) => [x, middleY + (y - middleY) * eyeScale]);
-    const shrink = (points, [centreX, centreY]) => points.map(([x, y]) => [centreX + (x - centreX) * openness, centreY + (y - centreY) * openness]);
-    const leftMiddle = boxCentre(face.leftEye)[1];
-    const rightMiddle = boxCentre(face.rightEye)[1];
-    return {
-        ...face,
-        leftEye: squash(face.leftEye, leftMiddle),
-        rightEye: squash(face.rightEye, rightMiddle),
-        leftPupil: squash(shrink(face.leftPupil, boxCentre(face.leftPupil)), leftMiddle),
-        rightPupil: squash(shrink(face.rightPupil, boxCentre(face.rightPupil)), rightMiddle),
-    };
-};
-const formatNumber = (value) => String(Math.round(value * 1000) / 1000);
-/** A smooth closed curve through the points: each handle points along the neighbours' chord and is a third of its own
- * segment long (no loops where points sit close together, as at a band's round end). Empty for a hidden piece. */
-const smoothClosedPath = (points) => {
-    const [firstX, firstY] = points[0];
-    if (points.every(([x, y]) => Math.abs(x - firstX) < 1e-6 && Math.abs(y - firstY) < 1e-6))
-        return '';
-    const count = points.length;
-    const directionAt = (index) => {
-        const previous = points[(index - 1 + count) % count];
-        const next = points[(index + 1) % count];
-        const length = Math.hypot(next[0] - previous[0], next[1] - previous[1]) || 1;
-        return [(next[0] - previous[0]) / length, (next[1] - previous[1]) / length];
-    };
-    let path = `M${formatNumber(firstX)} ${formatNumber(firstY)}`;
-    for (let index = 0; index < count; index++) {
-        const start = points[index];
-        const end = points[(index + 1) % count];
-        const handleLength = Math.hypot(end[0] - start[0], end[1] - start[1]) / 3;
-        const startDirection = directionAt(index);
-        const endDirection = directionAt(index + 1);
-        const control1 = [start[0] + startDirection[0] * handleLength, start[1] + startDirection[1] * handleLength];
-        const control2 = [end[0] - endDirection[0] * handleLength, end[1] - endDirection[1] * handleLength];
-        path += `C${[...control1, ...control2, ...end].map(formatNumber).join(' ')}`;
-    }
-    return `${path}Z`;
-};
-const facePaths = (face) => ({
-    features: [face.leftBrow, face.rightBrow, face.leftEye, face.rightEye, face.mouth].map(smoothClosedPath).join(''),
-    eyes: [face.leftEye, face.rightEye].map(smoothClosedPath).join(''),
-    pupils: [face.leftPupil, face.rightPupil].map(smoothClosedPath).join(''),
-});
-return { OUTLINE_POINTS, PIECE_NAMES, faceExpressionNames, faceExpressionPieces, interpolateFace, blinked, smoothClosedPath, facePaths };
-})();
-
-// face.ts
-const { face } = (() => {
-// Layer 4: a face that morphs between feelings. 7 soft filled pieces (sets/faces.ts) — brows, eyes and mouth in the
-// CSS color, the pupils in their own color and clipped to the eyes. Blinking runs on top of any expression, by itself
-// every few seconds (option) or on blink().
-const BLINK_CLOSING = 90;
-const BLINK_SHUT = 50;
-const BLINK_OPENING = 150;
-const AUTO_BLINK_MIN_PAUSE = 2500;
-const AUTO_BLINK_EXTRA_PAUSE = 3500;
-const DEFAULT_FACE_DURATION = DEFAULT_DURATION + 100;
-/** Expressions whose eyes are already shut: blinking does nothing. */
-const EYES_SHUT = ['asleep', 'laughing'];
-let faceCount = 0;
-const checkedExpression = (state) => {
-    if (!faceExpressionNames.includes(state))
-        throw new Error(`morphico: face() has no expression "${state}"`);
-    return state;
-};
-const resolveEasing = (easing) => (typeof easing === 'function' ? easing : easings[easing ?? 'easeInOutCubic']);
-/** Adds a morphing face (an <svg>) to `element`. */
-const face = (element, options = {}) => {
-    const { state: firstState = 'normal', pupilColor = 'white', blink: blinksByItself = true, size = '100%', ...defaultMorphOptions } = options;
-    const expressions = faceExpressionPieces();
-    let state = checkedExpression(firstState);
-    let shownPieces = expressions[state];
-    let openness = 1;
-    const clipId = `morphico-face-${++faceCount}`;
-    const svg = createSvgElement('svg', { viewBox: '0 0 24 24', fill: 'currentColor', role: 'img' });
-    svg.style.width = size;
-    svg.style.height = size;
-    svg.style.overflow = 'visible';
-    const clipPath = svg.appendChild(createSvgElement('clipPath', { id: clipId }));
-    const eyesPath = clipPath.appendChild(createSvgElement('path'));
-    const featuresPath = svg.appendChild(createSvgElement('path'));
-    const pupilsPath = svg.appendChild(createSvgElement('path', { fill: pupilColor, 'clip-path': `url(#${clipId})` }));
-    const render = () => {
-        const paths = facePaths(blinked(shownPieces, openness));
-        featuresPath.setAttribute('d', paths.features);
-        eyesPath.setAttribute('d', paths.eyes);
-        pupilsPath.setAttribute('d', paths.pupils);
-    };
-    const updateLabel = () => svg.setAttribute('aria-label', state);
-    render();
-    updateLabel();
-    element.appendChild(svg);
-    // ---- morphing ----
-    let morph = null;
-    const endMorph = (interrupted) => {
-        if (!morph)
-            return;
-        const { stopAnimation, resolve, state: morphState } = morph;
-        morph = null;
-        stopAnimation();
-        resolve({ state: morphState, interrupted });
-    };
-    const morphTo = (nextState, morphOptions) => {
-        endMorph(true);
-        state = nextState;
-        updateLabel();
-        const fromPieces = shownPieces;
-        const toPieces = expressions[nextState];
-        const duration = morphOptions.duration ?? DEFAULT_FACE_DURATION;
-        if (prefersReducedMotion() || duration <= 0) {
-            shownPieces = toPieces;
-            render();
-            return Promise.resolve({ state: nextState, interrupted: false });
-        }
-        const easing = resolveEasing(morphOptions.easing);
-        let startTime = null;
-        return new Promise((resolve) => {
-            const stopAnimation = animate((frameTime) => {
-                startTime ??= frameTime;
-                const progress = Math.min((frameTime - startTime) / duration, 1);
-                shownPieces = interpolateFace(fromPieces, toPieces, easing(progress));
-                render();
-                if (progress < 1)
-                    return true;
-                endMorph(false);
-                return false;
-            });
-            morph = { stopAnimation, resolve, state: nextState };
-        });
-    };
-    // ---- blinking ----
-    let stopBlink = null;
-    let finishBlink = null;
-    const endBlink = () => {
-        stopBlink?.();
-        stopBlink = null;
-        if (openness < 1) {
-            openness = 1;
-            render();
-        }
-        finishBlink?.();
-        finishBlink = null;
-    };
-    const blink = () => {
-        if (EYES_SHUT.includes(state) || prefersReducedMotion())
-            return Promise.resolve();
-        endBlink();
-        let startTime = null;
-        return new Promise((resolve) => {
-            finishBlink = resolve;
-            stopBlink = animate((frameTime) => {
-                startTime ??= frameTime;
-                const elapsed = frameTime - startTime;
-                if (elapsed < BLINK_CLOSING)
-                    openness = 1 - elapsed / BLINK_CLOSING;
-                else if (elapsed < BLINK_CLOSING + BLINK_SHUT)
-                    openness = 0;
-                else
-                    openness = Math.min((elapsed - BLINK_CLOSING - BLINK_SHUT) / BLINK_OPENING, 1);
-                render();
-                if (openness < 1 || elapsed < BLINK_CLOSING)
-                    return true;
-                stopBlink = null;
-                finishBlink = null;
-                resolve();
-                return false;
-            });
-        });
-    };
-    let autoBlinkTimer;
-    const scheduleAutoBlink = () => {
-        autoBlinkTimer = setTimeout(() => {
-            if (typeof document === 'undefined' || !document.hidden)
-                void blink();
-            scheduleAutoBlink();
-        }, AUTO_BLINK_MIN_PAUSE + Math.random() * AUTO_BLINK_EXTRA_PAUSE);
-    };
-    if (blinksByItself && !prefersReducedMotion())
-        scheduleAutoBlink();
-    return {
-        get state() { return state; },
-        to(nextState, { onEnd, ...morphOptions } = {}) {
-            const result = morphTo(checkedExpression(nextState), { ...defaultMorphOptions, ...morphOptions });
-            if (onEnd)
-                result.then(onEnd);
-            return result;
-        },
-        blink,
-        destroy() {
-            clearTimeout(autoBlinkTimer);
-            endMorph(true);
-            endBlink();
-            svg.remove();
-        },
-    };
-};
-return { face };
-})();
-
-// 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', roundness, strokeWidth, lineCap, lineJoin, fill, ...defaultMorphOptions } = options;
-    const iconSet = resolveIconSet(set, roundness);
-    const style = { strokeWidth, lineCap, lineJoin, fill };
-    const svg = createIconSvg(iconSet, '0 0 24 24', style);
-    svg.setAttribute('role', 'img');
-    svg.style.width = size;
-    svg.style.height = size;
-    svg.style.overflow = 'visible'; // sharp tips (roundness 0, miter joins) may reach past the 24 × 24 box
-    const pathElement = svg.appendChild(createStrokedElement('path', style));
-    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, space, `-` `:` `.` `,` `/` — all of them morph. 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;
-const formatNumber = (value) => String(+value.toFixed(4));
-/** 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, strokeWidth, lineCap, lineJoin, fill, ...defaultMorphOptions } = options;
-    const style = { strokeWidth, lineCap, lineJoin, fill };
-    const iconSet = resolveIconSet(set);
-    const { textLayout } = iconSet;
-    if (!textLayout)
-        throw new Error('morphico: text() needs a digit set (this set has no text layout)');
-    const digitCellWidth = cellWidth ?? textLayout.cellWidth;
-    const cellSpacing = spacing ?? textLayout.spacing;
-    const unitWidth = typeof strokeWidth === 'number' ? strokeWidth : iconSet.strokeWidth; // a CSS length: about the set's own
-    const inkBottom = textLayout.baselineY + unitWidth / 2;
-    const line = document.createElement('span');
-    line.setAttribute('role', 'img');
-    line.style.whiteSpace = 'nowrap';
-    element.appendChild(line);
-    let cells = [];
-    let value = '';
-    const widthOf = (character) => {
-        if (character === '/')
-            return digitCellWidth * 0.7;
-        return ':.,'.includes(character) ? digitCellWidth / 2 : digitCellWidth;
-    };
-    /** 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}`, style);
-        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',
-        });
-        const morphingPath = createMorphingPath(svg.appendChild(createStrokedElement('path', style)), iconSet, character);
-        return { svg, morphingPath, width };
-    };
-    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, '')].filter((character) => hasState(iconSet, character)).join('');
-        line.setAttribute('aria-label', value.trim());
-        const characters = [...value];
-        const sameLayout = characters.length === cells.length
-            && characters.every((character, index) => widthOf(character) === cells[index].width);
-        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.
-/** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
-const version = '0.4.0';
-
-export { clip, easings, face, icon, iconSets, faceExpressionNames, text, version };