morphico 0.1.0 → 0.2.0

package/dist/morphico.mjs

@@ -1,4 +1,44 @@
-/*! morphico v0.1.0 | MIT License */
+/*! morphico v0.2.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.
@@ -29,7 +69,7 @@ return { easings, animate };
 })();
 
 // geometry.ts
-const { line, arc, cubic, pointOnCircle, ellipse, roundedPolyline, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, defaultShapes, shapeForPair } = (() => {
+const { 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. */
@@ -40,6 +80,15 @@ const line = (fromX, fromY, toX, toY) => ({ kind: 'line', from: [fromX, fromY],
 /** 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);
@@ -95,6 +144,38 @@ const roundedPolyline = (points, radii) => {
     }
     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];
@@ -117,10 +198,34 @@ const reorderSegments = (path, { startSegment = 0, reversed = false } = {}) => {
 };
 const interpolate = (from, to, progress) => from.map((value, index) => value + (to[index] - value) * progress);
 const formatNumber = (value) => String(+value.toFixed(3));
-/** SVG `d` attribute: `M x y` followed by one `C` per segment. */
-const toPathData = (path) => `M${formatNumber(path[0])} ${formatNumber(path[1])}` + toSegments(path)
-    .map(([, control1, control2, end]) => `C${[...control1, ...control2, ...end].map(formatNumber).join(' ')}`)
-    .join('');
+/** 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). */
@@ -230,20 +335,363 @@ const defaultBreakpoints = (strokes, segmentCount) => {
     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.entries(iconSet.strokes)
-    .map(([state, strokes]) => [state, layoutStrokes(strokes, defaultBreakpoints(strokes, iconSet.segmentCount))]));
-/** The shape of `state` laid out for morphing to or from `otherState`. */
+const 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 pairLayout = iconSet.pairLayouts[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 shapes[state];
-    const strokes = pairLayout.tracing ? iconSet.alternativeStrokes[pairLayout.tracing] : iconSet.strokes[state];
-    const laidOut = pairLayout.breakpoints ? layoutStrokes(strokes, pairLayout.breakpoints) : shapes[state];
-    const reordered = reorderSegments(laidOut, pairLayout);
-    return pairLayout.rotation ? rotateAroundCenter(reordered, pairLayout.rotation) : reordered;
+        return [];
+    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]));
 };
-return { line, arc, cubic, pointOnCircle, ellipse, roundedPolyline, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, defaultShapes, shapeForPair };
+/** 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
@@ -276,7 +724,8 @@ const HOOK_END_Y = 79;
 // the 6: hook at the top right, over the top, down the left side, round the bottom, up to the middle bar, back left
 const SIX_POINTS = [[47, 94 - HOOK_END_Y], [47, 3], [3, 3], [3, 91], [47, 91], [47, 47], [3, 47]];
 const SIX_RADII = [0, OUTER_RADIUS, OUTER_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0];
-const condensedDigits = {
+// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
+const condensedDigits = withTextCharacters({
     segmentCount: 20,
     strokeWidth: 6 / PIXELS_PER_UNIT,
     lineCap: 'round',
@@ -301,7 +750,6 @@ const condensedDigits = {
         8: drawn(50, [[3 + MIDDLE_RADIUS, 47], [3, 47], [3, 3], [47, 3], [47, 47], [3, 47], [3, 91], [47, 91], [47, 47], [3 + MIDDLE_RADIUS, 47]], [0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0]),
         // the 6 turned 180°, drawn the other way round (box first, then the small upturn)
         9: roundedPolyline(SIX_POINTS.map(fromImage(50)).map(turnedAround).reverse(), [...SIX_RADII].reverse().map((radius) => radius / PIXELS_PER_UNIT)),
-        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
     },
     alternativeStrokes: {
         // the 8 traced like the 0 (from the top, counter-clockwise): left side of the top box down to the middle of
@@ -381,10 +829,84 @@ const condensedDigits = {
     },
     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/
@@ -397,7 +919,8 @@ const { handwrittenDigits } = (() => {
 // the centre line — the marker stroke varies a little, so the pixel match is ~8–17 %).
 //  - every digit is one stroke of 3–7 free cubic curves; round ends and corners
 //  - the 4 is drawn out and back over its crossbar end and right stem (one continuous stroke)
-const handwrittenDigits = {
+// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
+const handwrittenDigits = withTextCharacters({
     segmentCount: 16,
     strokeWidth: 1.04,
     lineCap: 'round',
@@ -469,7 +992,6 @@ const handwrittenDigits = {
             cubic(14.01, 8.61, 14.16, 8.23, 14.66, 6.7, 15.3, 7.44),
             cubic(15.3, 7.44, 16.93, 9.31, 14.47, 18.24, 11.59, 19.86),
         ],
-        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
     },
     alternativeStrokes: {},
     // optimizer fits (tools/check.ts) for the pairs the user rated bad / midd / not sure
@@ -519,10 +1041,172 @@ const handwrittenDigits = {
     },
     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/
@@ -559,7 +1243,8 @@ const TWO_DIAGONAL_ANGLE = 39.5191;
 const FIVE_JOIN_ANGLE = 237.2;
 /** The 7's foot: on the measured diagonal (16, 4.2 → 7.45, 20.6), pulled in to the base line. */
 const SEVEN_FOOT = pointAtY([16, TOP_BAR_Y], [7.45, 20.6], BASE_Y);
-const roundDigits = {
+// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
+const roundDigits = withTextCharacters({
     segmentCount: 12,
     strokeWidth: STROKE_WIDTH,
     lineCap: 'round',
@@ -600,7 +1285,6 @@ const roundDigits = {
             arc(12, 8.4, BIG_RADIUS, SIX_TAIL_ANGLE + 180 - 360, SIX_TAIL_ANGLE + 180),
             line(...pointOnCircle(12, 8.4, BIG_RADIUS, SIX_TAIL_ANGLE + 180), ...NINE_TAIL_END),
         ],
-        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
     },
     alternativeStrokes: {
         // the 8 traced like the 0 (from the top, counter-clockwise): left half of the top circle down to the waist,
@@ -765,7 +1449,7 @@ const roundDigits = {
         9: { 6: -180, 8: -180 },
     },
     textLayout: { cellWidth: 10, spacing: 4, baselineY: 19.8, colonDotsY: [7.6, 15.6] },
-};
+});
 return { roundDigits };
 })();
 
@@ -805,7 +1489,8 @@ const SIX = [
     topArc(SIX_HOOK_ANGLE, -180),
     ...roundedPolyline([[8, 8], [8, 20], [16, 20], [16, SIX_LOOP_TOP], [8, SIX_LOOP_TOP], [8, SIX_LOOP_TOP + RADIUS]], [0, RADIUS, RADIUS, RADIUS, RADIUS, 0]),
 ];
-const slimDigits = {
+// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
+const slimDigits = withTextCharacters({
     segmentCount: 16,
     strokeWidth: 6 / 5.5,
     lineCap: 'round',
@@ -834,7 +1519,6 @@ const slimDigits = {
         8: [topArc(90, 450), bottomArc(270, -90)],
         // the 6 turned 180°, drawn the other way round
         9: SIX.map(turnedAround).reverse(),
-        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
     },
     alternativeStrokes: {
         // the 8 traced like the 0 (as in the round set): from the top counter-clockwise — left half of TOP down to the waist,
@@ -915,7 +1599,7 @@ const slimDigits = {
     // 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 };
 })();
 
@@ -948,7 +1632,8 @@ const EIGHT_RADIUS = 6;
 // the 6: hook from the top right, round the left side, then the closed bottom loop back to the left side
 const SIX_POINTS = [[15, 2], [2, 2], [2, 26], [19, 26], [19, 12], [2, 12]];
 const SIX_RADII = [0, SIX_RADIUS, SIX_RADIUS, SIX_RADIUS, SIX_RADIUS, 0];
-const squareDigits = {
+// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
+const squareDigits = withTextCharacters({
     segmentCount: 20,
     strokeWidth: STROKE_WIDTH,
     lineCap: 'round',
@@ -973,7 +1658,6 @@ const squareDigits = {
         8: drawn(20, [[7, 14], [3, 14], [3, 2], [17, 2], [17, 14], [2, 14], [2, 26], [18, 26], [18, 14], [7, 14]], [0, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, EIGHT_RADIUS, 0]),
         // the 6 turned 180°, drawn the other way round (loop first, then the hook)
         9: roundedPolyline(SIX_POINTS.map(fromImage(21)).map(turnedAround).reverse(), [...SIX_RADII].reverse().map((radius) => radius / PIXELS_PER_UNIT)),
-        '-': [line(9.5, 12, 14.5, 12)], // minus / hyphen: morphs like a digit
     },
     alternativeStrokes: {
         // the 8 traced like the 0 (from the top, counter-clockwise): left side of the top loop down to the middle of
@@ -1066,10 +1750,1219 @@ const squareDigits = {
     },
     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.
@@ -1079,14 +2972,44 @@ const iconSets = {
     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,
 };
-/** A set given by name or as a set object. */
-const resolveIconSet = (set = 'round') => {
-    if (typeof set !== 'string')
-        return set;
-    if (!(set in iconSets))
+// 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(', ')})`);
-    return iconSets[set];
+    }
+    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 };
 })();
@@ -1118,6 +3041,7 @@ const blend = (from, to, progress, spin) => (spin
 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;
@@ -1126,7 +3050,7 @@ const createMorphingPath = (pathElement, iconSet, initialState) => {
         currentPath = path;
         currentOpacity = path ? clampToUnit(opacity) : 0;
         if (path)
-            pathElement.setAttribute('d', toPathData(path));
+            pathElement.setAttribute('d', toPathData(path, pieceLength));
         else
             pathElement.removeAttribute('d');
         if (currentOpacity < 1)
@@ -1173,6 +3097,8 @@ const createMorphingPath = (pathElement, iconSet, initialState) => {
             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) => {
@@ -1180,7 +3106,8 @@ const createMorphingPath = (pathElement, iconSet, initialState) => {
                     const progress = clampToUnit((frameTime - startTime) / duration);
                     if (progress < 1) {
                         const easedProgress = ease(progress);
-                        render(blend(from, to, easedProgress, spin), startOpacity + (endOpacity - startOpacity) * easedProgress);
+                        const frame = withDrawnPieces(blend(from, to, easedProgress, spin), from, to, easedProgress, pieceLength, drawn);
+                        render(frame, startOpacity + (endOpacity - startOpacity) * easedProgress);
                         return true;
                     }
                     render(target, endOpacity);
@@ -1197,24 +3124,38 @@ return { EMPTY_STATE, hasState, createMorphingPath };
 })();
 
 // svg.ts
-const { createSvgElement, createIconSvg } = (() => {
+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, coloured by the CSS `color` (currentColor). */
-const createIconSvg = (iconSet, viewBox) => createSvgElement('svg', {
-    viewBox,
-    fill: 'none',
-    stroke: 'currentColor',
-    'stroke-width': iconSet.strokeWidth,
-    'stroke-linecap': iconSet.lineCap,
-    'stroke-linejoin': iconSet.lineJoin,
+/** 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 { createSvgElement, createIconSvg };
+return { hasFixedStrokeWidth, createSvgElement, createIconSvg, createStrokedElement };
 })();
 
 // icon.ts
@@ -1228,13 +3169,15 @@ const checkedState = (iconSet, state) => {
 };
 /** Adds a morphing icon (an <svg>) to `element`. */
 const icon = (element, options = {}) => {
-    const { set, state = EMPTY_STATE, size = '1em', ...defaultMorphOptions } = options;
-    const iconSet = resolveIconSet(set);
-    const svg = createIconSvg(iconSet, '0 0 24 24');
+    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;
-    const pathElement = svg.appendChild(createSvgElement('path'));
+    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();
@@ -1261,58 +3204,40 @@ return { icon };
 const { text } = (() => {
 // Layer 2: a line of characters (clock, counter, date) in narrow cells; changed digits morph.
 // Every character reuses the 24×24 icon drawing; only the viewBox is narrowed to its cell.
-/** Characters `text()` can show: digits, `-` and space morph; `:` `.` `,` `/` stay still. Anything else is removed. */
+/** 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;
-/** Dot radius of `:` `.` `,` relative to the stroke width. */
-const DOT_SIZE = 0.6;
 const formatNumber = (value) => String(+value.toFixed(4));
-/** Draws `:` `.` `,` or `/` into the cell, matching the set's stroke width and digit positions. */
-const drawStaticCharacter = (svg, character, iconSet) => {
-    const { baselineY, colonDotsY } = iconSet.textLayout;
-    const dotRadius = iconSet.strokeWidth * DOT_SIZE;
-    const baseDotY = baselineY + iconSet.strokeWidth / 2 - dotRadius; // dot bottom = digit bottom
-    const dot = (y) => svg.appendChild(createSvgElement('circle', {
-        cx: 12, cy: formatNumber(y), r: formatNumber(dotRadius), fill: 'currentColor', stroke: 'none',
-    }));
-    const line = (fromX, fromY, toX, toY) => svg.appendChild(createSvgElement('path', {
-        d: `M${formatNumber(fromX)} ${formatNumber(fromY)}L${formatNumber(toX)} ${formatNumber(toY)}`,
-    }));
-    if (character === ':')
-        colonDotsY.forEach(dot);
-    if (character === '.' || character === ',')
-        dot(baseDotY);
-    if (character === ',')
-        line(12 + dotRadius * 0.4, baseDotY, 11, baselineY + 2.2);
-    if (character === '/')
-        line(9.5, baselineY, 14.5, 24 - baselineY);
-};
 /** Adds a line of morphing characters (a <span> of <svg> cells) to `element`. */
 const text = (element, options = {}) => {
-    const { set, value: initialValue = '', size = '1em', cellWidth, spacing, ...defaultMorphOptions } = options;
+    const { set, value: initialValue = '', size = '1em', cellWidth, spacing, strokeWidth, lineCap, lineJoin, fill, ...defaultMorphOptions } = options;
+    const style = { strokeWidth, lineCap, lineJoin, fill };
     const iconSet = resolveIconSet(set);
-    const digitCellWidth = cellWidth ?? iconSet.textLayout.cellWidth;
-    const cellSpacing = spacing ?? iconSet.textLayout.spacing;
-    const inkBottom = iconSet.textLayout.baselineY + iconSet.strokeWidth / 2;
+    const { 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 isMorphing = (character) => hasState(iconSet, character);
     const widthOf = (character) => {
-        if (isMorphing(character))
-            return digitCellWidth;
-        return character === '/' ? digitCellWidth * 0.7 : digitCellWidth / 2;
+        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}`);
+        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),
@@ -1321,29 +3246,26 @@ const text = (element, options = {}) => {
             verticalAlign: scaled(inkBottom - CELL_TOP - CELL_HEIGHT), // digit bottom on the text baseline
             marginLeft: index ? `var(--morphico-spacing, ${scaled(cellSpacing)})` : '0',
         });
-        let morphingPath = null;
-        if (isMorphing(character))
-            morphingPath = createMorphingPath(svg.appendChild(createSvgElement('path')), iconSet, character);
-        else
-            drawStaticCharacter(svg, character, iconSet);
-        return { svg, morphingPath, character };
+        const morphingPath = createMorphingPath(svg.appendChild(createStrokedElement('path', style)), iconSet, character);
+        return { svg, morphingPath, width };
     };
     const rebuild = (characters) => {
         for (const cell of cells)
-            cell.morphingPath?.stop();
+            cell.morphingPath.stop();
         cells = characters.map(createCell);
         line.replaceChildren(...cells.map((cell) => cell.svg));
     };
     const show = (nextValue, { onEnd, ...morphOptions } = {}) => {
-        value = nextValue.replace(UNSUPPORTED_CHARACTERS, '');
+        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) => (cells[index].morphingPath ? isMorphing(character) : character === cells[index].character));
+        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 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) }));
+            change = Promise.all(morphs).then((results) => ({ value: finishedValue, interrupted: results.some((result) => result.interrupted) }));
         }
         else {
             rebuild(characters);
@@ -1359,7 +3281,7 @@ const text = (element, options = {}) => {
         set: show,
         destroy() {
             for (const cell of cells)
-                cell.morphingPath?.stop();
+                cell.morphingPath.stop();
             line.remove();
         },
     };
@@ -1370,6 +3292,6 @@ return { text };
 // index.ts
 // morphico public API.
 /** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
-const version = '0.1.0';
+const version = '0.2.0';
 
 export { easings, icon, iconSets, text, version };