morphico 0.1.0 → 0.3.0

package/dist/morphico.js

@@ -1,4 +1,44 @@
-/*! morphico v0.1.0 | MIT License */
+/*! morphico v0.3.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.
+ */
 var morphico = (function () {
 'use strict';
 // engine.ts
@@ -31,7 +71,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. */
@@ -42,6 +82,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);
@@ -97,6 +146,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];
@@ -119,10 +200,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). */
@@ -232,20 +337,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, pointOnCircle, ellipse, roundedPolyline, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, defaultShapes, shapeForPair };
+return { line, arc, cubic, reversedStroke, pointOnCircle, ellipse, roundedPolyline, roundedPolygon, segmentCountOf, toSegments, fromSegments, reorderSegments, interpolate, toPathData, scaleAroundCenter, rotateAroundCenter, strokePiece, layoutStrokes, defaultBreakpoints, piecesOf, pieceLengthOf, splitPieces, defaultShapes, flattenOntoLine, shapeForPair, trimPiece, wipeRange, wipePiece, drawnPieces, withDrawnPieces };
+})();
+
+// sets/lucide.ts
+const { LUCIDE_SCALE, LUCIDE_STROKE_WIDTH, fromLucide, lucideLength, lucideLine, lucideArc, lucideCubic, lucidePoint, LUCIDE_SLASH } = (() => {
+// Shared by every Lucide-based icon set: Lucide draws in y 3…21 (18 units) with a 2-unit line; our icons get the
+// same room as the digits (16 units, y 4…20; user's choice 2026-10-26), so every icon is scaled around the centre
+// 12,12 — line width included, so each icon looks exactly like Lucide's, only with more margin in its box.
+const LUCIDE_SCALE = 16 / 18;
+/** Lucide's 2-unit line, scaled with the icon. */
+const LUCIDE_STROKE_WIDTH = 2 * LUCIDE_SCALE;
+/** A point (or corner) of a Lucide icon moved into our icon box. */
+const fromLucide = ([x, y]) => [12 + (x - 12) * LUCIDE_SCALE, 12 + (y - 12) * LUCIDE_SCALE];
+/** A length of a Lucide icon (e.g. a corner radius) in our icon box. */
+const lucideLength = (length) => length * LUCIDE_SCALE;
+// Strokes written in Lucide coordinates (for the icon sets added from 2026-10-28 on).
+/** A straight line between two Lucide points. */
+const lucideLine = (fromX, fromY, toX, toY) => line(...fromLucide([fromX, fromY]), ...fromLucide([toX, toY]));
+/** A circular arc in Lucide coordinates (angles in degrees, `endAngle > startAngle` = clockwise on screen). */
+const lucideArc = (centerX, centerY, radius, startAngle, endAngle) => arc(...fromLucide([centerX, centerY]), lucideLength(radius), startAngle, endAngle);
+/** A cubic Bézier curve in Lucide coordinates. */
+const lucideCubic = (...coordinates) => {
+    const [startX, startY, control1X, control1Y, control2X, control2Y, endX, endY] = coordinates;
+    return cubic(...fromLucide([startX, startY]), ...fromLucide([control1X, control1Y]), ...fromLucide([control2X, control2Y]), ...fromLucide([endX, endY]));
+};
+/** A missing piece at rest: a single point, never drawn (see toPathData). */
+const lucidePoint = (x, y) => [lucideLine(x, y, x, y)];
+/** The diagonal slash of Lucide's "-off" icons, from the top left. */
+const LUCIDE_SLASH = [lucideLine(2, 2, 22, 22)];
+return { LUCIDE_SCALE, LUCIDE_STROKE_WIDTH, fromLucide, lucideLength, lucideLine, lucideArc, lucideCubic, lucidePoint, LUCIDE_SLASH };
+})();
+
+// sets/check-mark.ts
+const { checkMarkPiece } = (() => {
+// The check mark shared by "checkbox" and "radio" (Lucide 1.61.0 "square-check" / "circle-check" and their "-big"
+// versions draw the same checks; ISC, see LICENSE-lucide). Coordinates are Lucide's, scaled by fromLucide.
+// Drawn left to right, short stroke then long stroke. unchecked has no check: the check is drawn in like a pen
+// writing it — down the short stroke, up the long one (the user's sketch; PairLayout.draw) — and erased back.
+/** A straight line between two Lucide points, moved into our icon box. */
+const lucideLine = (from, to) => line(...fromLucide(from), ...fromLucide(to));
+const CHECK = [lucideLine([8, 12], [10.5, 14.5]), lucideLine([10.5, 14.5], [16, 9])];
+const BIG_CHECK = [lucideLine([9, 11], [12, 14]), lucideLine([12, 14], [22, 4])];
+// every check ↔ check: short stroke 4 segments, long stroke 8 (of 12), so the corners meet
+const CHECK_FOR_CHECK = { breakpoints: [0, 0.25, 0.5, 0.75, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2] };
+const CHECK_STATES = ['unchecked', 'checked', 'checked-big'];
+/**
+ * The check piece of a set with the states unchecked, checked, checked-big (12 segments).
+ * `hiddenAt`: a Lucide point on the outline at the check's height, where unchecked's check rests at rest
+ * (tiny, under the outline's line, so it doesn't show — morphs draw the check instead).
+ */
+const checkMarkPiece = (hiddenAt) => {
+    const [x, y] = hiddenAt;
+    return {
+        strokes: {
+            unchecked: [lucideLine([x, y - 0.1], [x, y]), lucideLine([x, y], [x, y + 0.1])],
+            checked: CHECK,
+            'checked-big': BIG_CHECK,
+        },
+        alternativeStrokes: {},
+        pairLayouts: {
+            ...Object.fromEntries(CHECK_STATES.map((state) => [state, Object.fromEntries(CHECK_STATES.filter((other) => other !== state).map((other) => [other, CHECK_FOR_CHECK]))])),
+            unchecked: { checked: { draw: true }, 'checked-big': { draw: true } },
+        },
+    };
+};
+return { checkMarkPiece };
+})();
+
+// sets/checkbox.ts
+const { checkboxIcons } = (() => {
+// Icon set "checkbox": unchecked, checked, checked-big — Lucide 1.61.0 icons "square", "square-check",
+// "square-check-big" (ISC, see LICENSE-lucide). Coordinates below are Lucide's; fromLucide / lucideLength scale them
+// into our icon box (more margin, like the digits — see lucide.ts). Built from rounded corners, so `roundness` works.
+// Two pieces:
+//   piece 1, the box: the same square in unchecked and checked (it doesn't move); checked-big opens its top right
+//     corner where the big check leaves the box — both ends of the gap pull back to the gap's edges.
+//   piece 2, the check (check-mark.ts, shared with "radio"): drawn in like a pen from unchecked (the user's sketch).
+//     (Rejected: a box copy folding into the check — tangled; the check sliding in from the left edge — user: bad.)
+const SQUARE_CORNERS = [[3, 3], [21, 3], [21, 21], [3, 21]].map(fromLucide);
+const LUCIDE_RADIUS = lucideLength(2);
+/** square-check-big's box: the square without its top right corner (gap from 17.344,3 to 21,10.656). */
+const openBox = (square) => {
+    const [top, , right, bottomRight, bottom, bottomLeft, left, topLeft] = square;
+    return [
+        line(...fromLucide([21, 10.656]), ...right.to),
+        bottomRight, bottom, bottomLeft, left, topLeft,
+        line(...top.from, ...fromLucide([17.344, 3])),
+    ];
+};
+// box, checked/unchecked ↔ checked-big: the square laid out so its 12 segments line up with the open box's —
+// top (2: the part that stays, the part in the gap), top right corner (2, in the gap), right side (2: in the gap,
+// the part that stays), bottom right, bottom, bottom left, left (2), top left — started at the corner's second half.
+// The open box gets two zero-length segments at each end of the gap, where the vanishing parts pull back to.
+const SQUARE_FOR_OPEN_BOX = { breakpoints: [0, 0.8817, 1, 1.5, 2, 2.404, 3, 4, 5, 6, 6.5, 7, 8], startSegment: 3 };
+const OPEN_BOX_FOR_SQUARE = { breakpoints: [0, 0, 0, 1, 2, 3, 4, 4.5, 5, 6, 7, 7, 7] };
+/** The check rests (hidden) on the box's left edge. */
+const CHECK_PIECE = checkMarkPiece([3, 12]);
+const buildCheckboxIcons = (radius) => {
+    const square = roundedPolygon(SQUARE_CORNERS, radius);
+    return {
+        segmentCount: 12,
+        strokeWidth: LUCIDE_STROKE_WIDTH,
+        lineCap: 'round',
+        lineJoin: 'round',
+        strokes: { unchecked: square, checked: square, 'checked-big': openBox(square) },
+        alternativeStrokes: {},
+        pairLayouts: {
+            unchecked: { 'checked-big': SQUARE_FOR_OPEN_BOX },
+            checked: { 'checked-big': SQUARE_FOR_OPEN_BOX },
+            'checked-big': { unchecked: OPEN_BOX_FOR_SQUARE, checked: OPEN_BOX_FOR_SQUARE },
+        },
+        morePieces: [CHECK_PIECE],
+        spins: {},
+        withRoundness: (roundness) => buildCheckboxIcons(LUCIDE_RADIUS * roundness),
+    };
+};
+const checkboxIcons = buildCheckboxIcons(LUCIDE_RADIUS);
+return { checkboxIcons };
+})();
+
+// sets/characters.ts
+const { withTextCharacters } = (() => {
+// The characters every digit set shares besides 0–9: `-` `/` `.` `,` `:` (space = the empty state, see morph.ts).
+// Each is drawn as one straight line, placed by the set's text layout and stroke width, and morphs to and from
+// every digit by flattening (the user's choice 2026-10-27): the digit is pressed flat onto the line.
+// `:` has two dots, so digit sets get a second piece: for every other state it repeats the first piece exactly
+// (same strokes and layouts, drawn on top of itself, so it doesn't show).
+const DIGITS = [...'0123456789'];
+/** Half the length of a dot's line, relative to the stroke width: round ends make it a dot 1.1 × the stroke wide. */
+const DOT_HALF_LENGTH = 0.05;
+/** Adds `-` `/` `.` `,` `:` to a digit set (which needs a text layout) as morphing states. */
+const withTextCharacters = (iconSet) => {
+    const { baselineY, colonDotsY } = iconSet.textLayout;
+    const dotHalfLength = iconSet.strokeWidth * DOT_HALF_LENGTH;
+    const dotY = baselineY; // dot centre on the line the digits stand on
+    const dot = (y) => line(12 - dotHalfLength, y, 12 + dotHalfLength, y);
+    const characters = {
+        '-': [line(9.5, 12, 14.5, 12)],
+        '/': [line(9.5, baselineY, 14.5, 24 - baselineY)],
+        '.': [dot(dotY)],
+        ',': [line(12.3, dotY, 11, baselineY + 2.2)], // from the dot down to the left
+        ':': [dot(colonDotsY[0])],
+    };
+    const flattenPairs = (layouts) => {
+        const merged = { ...layouts };
+        for (const character of Object.keys(characters)) {
+            merged[character] = { ...merged[character], ...Object.fromEntries(DIGITS.map((digit) => [digit, { flatten: true }])) };
+        }
+        return merged;
+    };
+    const pairLayouts = flattenPairs(iconSet.pairLayouts);
+    const strokes = { ...iconSet.strokes, ...characters };
+    return {
+        ...iconSet,
+        strokes,
+        pairLayouts,
+        morePieces: [{
+                strokes: { ...strokes, ':': [dot(colonDotsY[1])] },
+                alternativeStrokes: iconSet.alternativeStrokes,
+                pairLayouts,
+            }],
+    };
+};
+return { withTextCharacters };
 })();
 
 // sets/condensed.ts
@@ -278,7 +726,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',
@@ -303,7 +752,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
@@ -383,10 +831,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/
@@ -399,7 +921,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',
@@ -471,7 +994,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
@@ -521,10 +1043,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/
@@ -561,7 +1245,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',
@@ -602,7 +1287,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,
@@ -767,7 +1451,7 @@ const roundDigits = {
         9: { 6: -180, 8: -180 },
     },
     textLayout: { cellWidth: 10, spacing: 4, baselineY: 19.8, colonDotsY: [7.6, 15.6] },
-};
+});
 return { roundDigits };
 })();
 
@@ -807,7 +1491,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',
@@ -836,7 +1521,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,
@@ -917,7 +1601,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 };
 })();
 
@@ -950,7 +1634,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',
@@ -975,7 +1660,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
@@ -1068,10 +1752,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.
@@ -1081,20 +2974,50 @@ 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 };
 })();
 
 // morph.ts
-const { EMPTY_STATE, hasState, createMorphingPath } = (() => {
+const { EMPTY_STATE, DEFAULT_DURATION, shapesOf, hasState, prefersReducedMotion, clampToUnit, createMorphingPath } = (() => {
 // One SVG <path> that morphs between the states of an icon set. Shared by icon() and every text() cell.
 /** The empty state: nothing is drawn. Shapes grow out of it and shrink into it while fading. */
 const EMPTY_STATE = ' ';
@@ -1120,6 +3043,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;
@@ -1128,7 +3052,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)
@@ -1175,6 +3099,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) => {
@@ -1182,7 +3108,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);
@@ -1195,28 +3122,748 @@ const createMorphingPath = (pathElement, iconSet, initialState) => {
         stop: () => finish(true),
     };
 };
-return { EMPTY_STATE, hasState, createMorphingPath };
+return { EMPTY_STATE, DEFAULT_DURATION, shapesOf, hasState, prefersReducedMotion, clampToUnit, createMorphingPath };
+})();
+
+// sets/shapes.ts
+const { lucideShapeOutlines, clipShapes } = (() => {
+// Shapes for clip(): closed outlines that cut out an element. From Lucide 1.61.0 (ISC, see LICENSE-lucide), imported
+// by `node tools/import-lucide.ts <name>`; tag without its dot. The states are the Lucide outlines made comparable for
+// morphing: clockwise, starting where the outline crosses the vertical middle at the top, scaled evenly to fill the
+// 24×24 box and centred (computed on first use, not at import). Roundness 1 = Lucide's own corners … 0 = sharp.
+const DEGREE = Math.PI / 180;
+const GRID_SIZE = 24;
+const GRID_CENTER = 12;
+const SAMPLES_PER_STROKE = 48;
+/** Enough for the shape that needs the most (puzzle: 24 strokes, its knobs ≈ 40 segments); the rest spreads by length. */
+const SEGMENT_COUNT = 48;
+/** The shapes as Lucide draws them (Lucide coordinates); the set's states are made from these. */
+const lucideShapeOutlines = {
+    circle: [arc(12, 12, 10, -90, 270)],
+    ellipse: ellipse(12, 12, 10, 6),
+    heart: [
+        arc(7.5, 9.5001, 5.5, -179.9989, -41.9423),
+        arc(12, 5.4415, 0.56, 136.9163, 43.0837),
+        arc(16.5101, 9.4738, 5.49, -138.3317, 0.2729),
+        cubic(22, 9.5, 22, 11.79, 20.5, 13.5, 19, 15),
+        line(19, 15, 13.508, 20.313),
+        arc(11.9996, 18.9997, 2, 41.0455, 138.2288),
+        line(10.508, 20.332, 5, 15),
+        cubic(5, 15, 3.5, 13.5, 2, 11.8, 2, 9.5),
+    ],
+    sparkle: [
+        arc(12, 2.9976, 1, -169.4202, -10.5798),
+        line(12.983, 2.814, 14.034, 8.372),
+        arc(15.9992, 8.0008, 2, 169.3026, 100.6974),
+        line(15.628, 9.966, 21.186, 11.017),
+        arc(21.0024, 12, 1, -79.4202, 79.4202),
+        line(21.186, 12.983, 15.628, 14.034),
+        arc(15.9992, 15.9992, 2, -100.6974, -169.3026),
+        line(14.034, 15.628, 12.983, 21.186),
+        arc(12, 21.0024, 1, 10.5798, 169.4202),
+        line(11.017, 21.186, 9.966, 15.628),
+        arc(8.0008, 15.9992, 2, -10.6974, -79.3026),
+        line(8.372, 14.034, 2.814, 12.983),
+        arc(2.9976, 12, 1, 100.5798, 259.4202),
+        line(2.814, 11.017, 8.372, 9.966),
+        arc(8.0008, 8.0008, 2, 79.3026, 10.6974),
+        line(9.966, 8.372, 11.017, 2.814),
+    ],
+    astroid: [
+        arc(12, 21.0024, 1, 10.5798, 169.4202),
+        arc(1.1555, 22.8445, 10, -9.5467, -80.4533),
+        arc(2.9976, 12, 1, 100.5798, 259.4202),
+        arc(1.1555, 1.1555, 10, 80.4533, 9.5467),
+        arc(12, 2.9976, 1, -169.4202, -10.5798),
+        arc(22.8445, 1.1555, 10, 170.4533, 99.5467),
+        arc(21.0024, 12, 1, -79.4202, 79.4202),
+        arc(22.8445, 22.8445, 10, -99.5467, -170.4533),
+    ],
+    bookmark: [
+        arc(17, 5, 2, -90, 0),
+        line(19, 5, 19, 20),
+        arc(18, 19.9997, 1, 0.0185, 119.7357),
+        line(17.504, 20.868, 12.992, 18.29),
+        arc(12, 20.0266, 2, -60.2643, -119.7357),
+        line(11.008, 18.29, 6.496, 20.868),
+        arc(6, 19.9997, 1, 60.2643, 179.9815),
+        line(5, 20, 5, 5),
+        arc(7, 5, 2, 180, 270),
+        line(7, 3, 17, 3),
+    ],
+    shield: [
+        cubic(20, 13, 20, 18, 16.5, 20.5, 12.34, 21.95),
+        arc(12.0191, 21.0029, 1, 71.2803, 110.4299),
+        cubic(11.67, 21.94, 7.5, 20.5, 4, 18, 4, 13),
+        line(4, 13, 4, 6),
+        arc(5, 6, 1, 180, 270),
+        cubic(5, 5, 7, 5, 9.5, 3.8, 11.24, 2.28),
+        arc(12, 3.1696, 1.17, -130.5094, -49.4906),
+        cubic(12.76, 2.28, 14.51, 3.81, 17, 5, 19, 5),
+        arc(19, 6, 1, -90, 0),
+        line(20, 6, 20, 13),
+    ],
+    moon: [
+        arc(11.9981, 12.0009, 9, 3.09, 266.904),
+        cubic(11.512, 3.014, 11.917, 2.992, 12.129, 3.474, 11.914, 3.817),
+        arc(17.002, 6.997, 6, -147.9941, -302.0059),
+        cubic(20.182, 12.085, 20.526, 11.87, 21.007, 12.081, 20.985, 12.486),
+    ],
+    tag: [
+        arc(11.1716, 4, 2, -44.9913, -89.9878),
+        line(11.172, 2, 4, 2),
+        arc(4, 4, 2, -90, -180),
+        line(2, 4, 2, 11.172),
+        arc(4, 11.1716, 2, 179.9878, 134.9913),
+        line(2.586, 12.586, 11.29, 21.29),
+        arc(13, 19.5691, 2.426, 134.8186, 45.1814),
+        line(14.71, 21.29, 21.29, 14.71),
+        arc(19.5691, 13, 2.426, 44.8186, -44.8186),
+        line(21.29, 11.29, 12.586, 2.586),
+    ],
+    square: [
+        line(5, 3, 19, 3),
+        arc(19, 5, 2, -90, 0),
+        line(21, 5, 21, 19),
+        arc(19, 19, 2, 0, 90),
+        line(19, 21, 5, 21),
+        arc(5, 19, 2, 90, 180),
+        line(3, 19, 3, 5),
+        arc(5, 5, 2, 180, 270),
+    ],
+    badge: [
+        arc(7.7549, 7.7531, 4, 167.4834, 282.6366),
+        arc(12, 6.0048, 4, -147.4051, -32.5949),
+        arc(16.2474, 7.7526, 4, -102.6711, 12.6711),
+        arc(17.9952, 12, 4, -57.4051, 57.4051),
+        arc(16.2469, 16.2451, 4, -12.6366, 102.5166),
+        arc(12.005, 18.0031, 4, 32.4617, 147.5383),
+        arc(7.7549, 16.2469, 4, 77.3634, 192.5166),
+        arc(5.9891, 12, 4, 122.3281, 237.6719),
+    ],
+    triangle: [
+        arc(12, 5.0035, 2, -30.1173, -149.8827),
+        line(10.27, 4, 2.27, 18),
+        arc(4.0021, 19, 2, -150, -269.9413),
+        line(4, 21, 20, 21),
+        arc(19.9979, 19, 2, 89.9413, -30),
+        line(21.73, 18, 13.73, 4),
+    ],
+    droplet: [
+        arc(12, 15, 7, 90, 0),
+        cubic(19, 15, 19, 13, 18, 11.1, 16, 9.5),
+        cubic(16, 9.5, 14, 7.9, 12.5, 5.5, 12, 3),
+        cubic(12, 3, 11.5, 5.5, 10, 7.9, 8, 9.5),
+        cubic(8, 9.5, 6, 11.1, 5, 13, 5, 15),
+        arc(12, 15, 7, 180, 90),
+    ],
+    pentagon: [
+        arc(12, 4.0021, 2, -125.803, -54.197),
+        line(13.17, 2.38, 21.17, 8.12),
+        arc(20.0009, 9.7427, 2, -54.2293, 18.2786),
+        line(21.9, 10.37, 18.86, 19.63),
+        arc(16.9618, 19, 2, 18.3608, 90.052),
+        line(16.96, 21, 7.04, 21),
+        arc(7.0382, 19, 2, 89.948, 161.6392),
+        line(5.14, 19.63, 2.1, 10.37),
+        arc(3.9991, 9.7427, 2, 161.7214, 234.2293),
+        line(2.83, 8.12, 10.83, 2.38),
+    ],
+    hexagon: [
+        line(21, 16, 21, 8),
+        arc(19, 8.0021, 2, -0.0588, -60),
+        line(20, 6.27, 13, 2.27),
+        arc(12, 4.0021, 2, -60, -120),
+        line(11, 2.27, 4, 6.27),
+        arc(5, 8.0021, 2, -120, -179.9412),
+        line(3, 8, 3, 16),
+        arc(5, 15.9979, 2, 179.9412, 120),
+        line(4, 17.73, 11, 21.73),
+        arc(12, 19.9979, 2, 120, 60),
+        line(13, 21.73, 20, 17.73),
+        arc(19, 15.9979, 2, 60, 0.0588),
+    ],
+    octagon: [
+        arc(4, 15.3116, 2, 134.9913, 179.9878),
+        line(2, 15.312, 2, 8.688),
+        arc(4, 8.6884, 2, -179.9878, -134.9913),
+        line(2.586, 7.274, 7.274, 2.586),
+        arc(8.6884, 4, 2, -135.0087, -90.0122),
+        line(8.688, 2, 15.312, 2),
+        arc(15.3116, 4, 2, -89.9878, -44.9913),
+        line(16.726, 2.586, 21.414, 7.274),
+        arc(20, 8.6884, 2, -45.0087, -0.0122),
+        line(22, 8.688, 22, 15.312),
+        arc(20, 15.3116, 2, 0.0122, 45.0087),
+        line(21.414, 16.726, 16.726, 21.414),
+        arc(15.3116, 20, 2, 44.9913, 89.9878),
+        line(15.312, 22, 8.688, 22),
+        arc(8.6884, 20, 2, 90.0122, 135.0087),
+        line(7.274, 21.414, 2.586, 16.726),
+    ],
+    squircle: [
+        cubic(12, 3, 19.2, 3, 21, 4.8, 21, 12),
+        cubic(21, 12, 21, 19.2, 19.2, 21, 12, 21),
+        cubic(12, 21, 4.8, 21, 3, 19.2, 3, 12),
+        cubic(3, 12, 3, 4.8, 4.8, 3, 12, 3),
+    ],
+    star: [
+        arc(12, 2.5301, 0.53, -153.6664, -26.3336),
+        line(12.475, 2.295, 14.785, 6.974),
+        arc(16.6883, 6.0335, 2.123, 153.7044, 98.3503),
+        line(16.38, 8.134, 21.546, 8.89),
+        arc(21.47, 9.4145, 0.53, -81.756, 45.7247),
+        line(21.84, 9.794, 18.104, 13.432),
+        arc(19.5857, 14.9525, 2.123, -134.26, -189.6958),
+        line(17.493, 15.31, 18.375, 20.45),
+        arc(17.8531, 20.5422, 0.53, -10.0155, 118.0314),
+        line(17.604, 21.01, 12.986, 18.582),
+        arc(11.9995, 20.4608, 2.122, -62.2968, -117.7032),
+        line(11.013, 18.582, 6.396, 21.01),
+        arc(6.148, 20.5416, 0.53, 62.1036, 189.9512),
+        line(5.626, 20.45, 6.507, 15.311),
+        arc(4.4155, 14.9522, 2.122, 9.7335, -45.7597),
+        line(5.896, 13.432, 2.16, 9.795),
+        arc(2.5282, 9.4138, 0.53, 134.0047, 261.9521),
+        line(2.454, 8.889, 7.619, 8.134),
+        arc(7.3135, 6.0341, 2.122, 81.7227, 26.2909),
+        line(9.216, 6.974, 11.525, 2.295),
+    ],
+    'rectangle-horizontal': [
+        line(4, 6, 20, 6),
+        arc(20, 8, 2, -90, 0),
+        line(22, 8, 22, 16),
+        arc(20, 16, 2, 0, 90),
+        line(20, 18, 4, 18),
+        arc(4, 16, 2, 90, 180),
+        line(2, 16, 2, 8),
+        arc(4, 8, 2, 180, 270),
+    ],
+    'rectangle-vertical': [
+        line(8, 2, 16, 2),
+        arc(16, 4, 2, -90, 0),
+        line(18, 4, 18, 20),
+        arc(16, 20, 2, 0, 90),
+        line(16, 22, 8, 22),
+        arc(8, 20, 2, 90, 180),
+        line(6, 20, 6, 4),
+        arc(8, 4, 2, 180, 270),
+    ],
+    'message-circle': [
+        arc(1.1328, 17.079, 2, -21.6245, 12.4142),
+        line(3.086, 17.509, 2.021, 20.799),
+        arc(3.0005, 21.0005, 1, -168.3779, -284.8626),
+        line(3.257, 21.967, 6.67, 20.969),
+        arc(7.0591, 22.9308, 2, -101.2192, -69.2104),
+        arc(12.0003, 12.0003, 10, 115.0325, -205.7324),
+    ],
+    'message-square': [
+        arc(20, 17, 2, 0, 90),
+        line(20, 19, 6.828, 19),
+        arc(6.8284, 21, 2, -90.0122, -135.0087),
+        line(5.414, 19.586, 3.212, 21.788),
+        arc(2.71, 21.2859, 0.71, 45.0052, 179.9926),
+        line(2, 21.286, 2, 5),
+        arc(4, 5, 2, 180, 270),
+        line(4, 3, 20, 3),
+        arc(20, 5, 2, -90, 0),
+        line(22, 5, 22, 17),
+    ],
+    diamond: [
+        arc(4.4033, 12.005, 2.41, -134.9707, -225.0293),
+        line(2.7, 13.71, 10.29, 21.3),
+        arc(11.995, 19.5967, 2.41, 135.0293, 44.9707),
+        line(13.7, 21.3, 21.29, 13.71),
+        arc(19.5867, 12.005, 2.41, 45.0293, -45.0293),
+        line(21.29, 10.3, 13.7, 2.71),
+        arc(11.995, 4.4133, 2.41, -44.9707, -135.0293),
+        line(10.29, 2.71, 2.7, 10.3),
+    ],
+    cloud: [
+        line(17.5, 19, 9, 19),
+        arc(9.0018, 12, 7, 90.0147, 343.3984),
+        line(15.71, 10, 17.5, 10),
+        arc(17.5, 14.5, 4.5, -90, 90),
+    ],
+    puzzle: [
+        arc(16.0975, 3.6833, 1, 135.0289, 13.459),
+        arc(19.5008, 4.5, 2.5, -166.4917, 76.5107),
+        arc(20.3167, 7.9035, 1, -103.459, -225.0289),
+        line(19.61, 8.611, 21.293, 10.293),
+        arc(19.5861, 12, 2.414, -45.0015, 45.0015),
+        line(21.293, 13.707, 19.61, 15.39),
+        arc(18.9025, 14.6833, 1, 44.9711, 166.541),
+        arc(15.4992, 15.5, 2.5, -13.5083, -256.5107),
+        arc(14.6833, 18.9035, 1, -76.541, 45.0289),
+        line(15.39, 19.611, 13.707, 21.293),
+        arc(12, 19.5861, 2.414, 44.9985, 135.0015),
+        line(10.293, 21.293, 8.61, 19.61),
+        arc(7.9025, 20.3167, 1, -44.9711, -166.541),
+        arc(4.4992, 19.5, 2.5, 13.5083, 256.5107),
+        arc(3.6833, 16.0965, 1, 76.541, -45.0289),
+        line(4.39, 15.389, 2.707, 13.707),
+        arc(4.4139, 12, 2.414, 134.9985, 225.0015),
+        line(2.707, 10.293, 4.39, 8.61),
+        arc(5.0975, 9.3167, 1, -135.0289, -13.459),
+        arc(8.5008, 8.5, 2.5, 166.4917, -76.5107),
+        arc(9.3167, 5.0965, 1, 103.459, 225.0289),
+        line(8.61, 4.389, 10.293, 2.707),
+        arc(12, 4.4139, 2.414, -135.0015, -44.9985),
+        line(13.707, 2.707, 15.39, 4.39),
+    ],
+};
+// ---- making the outlines comparable ----
+const pointOnStroke = (stroke, progress) => strokePiece(stroke, 0, progress)[3];
+const samplesOf = (strokes) => strokes.flatMap((stroke, strokeIndex) => Array.from({ length: SAMPLES_PER_STROKE }, (_, sample) => {
+    const progress = sample / SAMPLES_PER_STROKE;
+    return { point: pointOnStroke(stroke, progress), strokeIndex, progress };
+}));
+const transformStroke = (stroke, scale, offsetX, offsetY) => {
+    const move = ([x, y]) => [x * scale + offsetX, y * scale + offsetY];
+    switch (stroke.kind) {
+        case 'line': return { ...stroke, from: move(stroke.from), to: move(stroke.to) };
+        case 'arc': return { ...stroke, center: move(stroke.center), radius: stroke.radius * scale };
+        case 'cubic': return { kind: 'cubic', segment: stroke.segment.map(move) };
+    }
+};
+/** Splits a stroke at `progress` into two strokes of the same kind (arcs stay arcs, so they keep their segment rule). */
+const splitStroke = (stroke, progress) => {
+    if (stroke.kind === 'arc') {
+        const splitAngle = stroke.startAngle + (stroke.endAngle - stroke.startAngle) * progress;
+        return [{ ...stroke, endAngle: splitAngle }, { ...stroke, startAngle: splitAngle }];
+    }
+    if (stroke.kind === 'line') {
+        const splitPoint = pointOnStroke(stroke, progress);
+        return [{ ...stroke, to: splitPoint }, { ...stroke, from: splitPoint }];
+    }
+    return [{ kind: 'cubic', segment: strokePiece(stroke, 0, progress) }, { kind: 'cubic', segment: strokePiece(stroke, progress, 1) }];
+};
+const fitToBox = (strokes) => {
+    const points = samplesOf(strokes).map(({ point }) => point);
+    const xValues = points.map(([x]) => x), yValues = points.map(([, y]) => y);
+    const minX = Math.min(...xValues), maxX = Math.max(...xValues), minY = Math.min(...yValues), maxY = Math.max(...yValues);
+    const scale = GRID_SIZE / Math.max(maxX - minX, maxY - minY);
+    return strokes.map((stroke) => transformStroke(stroke, scale, GRID_CENTER - ((minX + maxX) / 2) * scale, GRID_CENTER - ((minY + maxY) / 2) * scale));
+};
+/** Positive = clockwise on screen (y points down). */
+const signedArea = (strokes) => {
+    const points = samplesOf(strokes).map(({ point }) => point);
+    return points.reduce((sum, [x, y], index) => {
+        const [nextX, nextY] = points[(index + 1) % points.length];
+        return sum + x * nextY - nextX * y;
+    }, 0);
+};
+const clockwise = (strokes) => (signedArea(strokes) >= 0 ? strokes : strokes.slice().reverse().map(reversedStroke));
+/** Starts the closed outline where it crosses x = 12 highest up (splitting that stroke). */
+const startAtTopMiddle = (strokes) => {
+    const samples = samplesOf(strokes);
+    let best = null;
+    for (let index = 0; index < samples.length; index++) {
+        const sample = samples[index], next = samples[(index + 1) % samples.length];
+        const [x, y] = sample.point, [nextX, nextY] = next.point;
+        if ((x - GRID_CENTER) * (nextX - GRID_CENTER) > 0 || x === nextX)
+            continue;
+        const fraction = (GRID_CENTER - x) / (nextX - x);
+        const crossingY = y + (nextY - y) * fraction;
+        if (best && crossingY >= best.y)
+            continue;
+        const nextProgress = next.strokeIndex === sample.strokeIndex ? next.progress : 1;
+        best = { strokeIndex: sample.strokeIndex, progress: sample.progress + (nextProgress - sample.progress) * fraction, y: crossingY };
+    }
+    if (!best)
+        return strokes;
+    const { strokeIndex, progress } = best;
+    const before = strokes.slice(0, strokeIndex), after = strokes.slice(strokeIndex + 1);
+    if (progress < 1e-6)
+        return [...strokes.slice(strokeIndex), ...before];
+    if (progress > 1 - 1e-6)
+        return [...after, ...before, strokes[strokeIndex]];
+    const [firstPart, secondPart] = splitStroke(strokes[strokeIndex], progress);
+    return [secondPart, ...after, ...before, firstPart];
+};
+// ---- roundness: 1 = Lucide's own corners, 0 = sharp ----
+/** Lucide's corner arcs are small (radius 0.56 … 2.43); bigger arcs are part of the shape (circle, moon, droplet). */
+const LARGEST_CORNER_RADIUS = 2.5;
+const crossingOfLines = (point, direction, otherPoint, otherDirection) => {
+    const determinant = direction[0] * otherDirection[1] - direction[1] * otherDirection[0];
+    if (Math.abs(determinant) < 1e-9)
+        return null;
+    const along = ((otherPoint[0] - point[0]) * otherDirection[1] - (otherPoint[1] - point[1]) * otherDirection[0]) / determinant;
+    return [point[0] + direction[0] * along, point[1] + direction[1] * along];
+};
+/** Moves a stroke's start (or end) to `point`; a cubic's neighbouring control point moves along, so its direction there stays. */
+const withMovedEnd = (stroke, which, point) => {
+    if (stroke.kind === 'line')
+        return which === 'start' ? { ...stroke, from: point } : { ...stroke, to: point };
+    if (stroke.kind !== 'cubic')
+        return stroke;
+    const [start, control1, control2, end] = stroke.segment;
+    if (which === 'start') {
+        const shift = [point[0] - start[0], point[1] - start[1]];
+        return { kind: 'cubic', segment: [point, [control1[0] + shift[0], control1[1] + shift[1]], control2, end] };
+    }
+    const shift = [point[0] - end[0], point[1] - end[1]];
+    return { kind: 'cubic', segment: [start, control1, [control2[0] + shift[0], control2[1] + shift[1]], point] };
+};
+/**
+ * Every corner arc (small, between two lines / cubics) shrinks towards the sharp corner where its two neighbours'
+ * directions meet: radius × roundness, angles unchanged. At 0 the arc is a point on the corner. Same strokes in the
+ * same order at any roundness, so morphs keep working.
+ */
+const withCornerRoundness = (strokes, roundness) => {
+    const result = strokes.slice();
+    strokes.forEach((stroke, index) => {
+        const previousIndex = (index - 1 + strokes.length) % strokes.length, nextIndex = (index + 1) % strokes.length;
+        const isEdge = (neighbour) => neighbour.kind === 'line' || neighbour.kind === 'cubic';
+        if (stroke.kind !== 'arc' || stroke.radius > LARGEST_CORNER_RADIUS)
+            return;
+        if (!isEdge(strokes[previousIndex]) || !isEdge(strokes[nextIndex]))
+            return;
+        const turning = Math.sign(stroke.endAngle - stroke.startAngle);
+        const tangent = (angle) => [-Math.sin(angle * DEGREE) * turning, Math.cos(angle * DEGREE) * turning];
+        const start = pointOnStroke(stroke, 0), end = pointOnStroke(stroke, 1);
+        const corner = crossingOfLines(start, tangent(stroke.startAngle), end, tangent(stroke.endAngle));
+        if (!corner)
+            return;
+        const towardsCorner = ([x, y]) => [corner[0] + (x - corner[0]) * roundness, corner[1] + (y - corner[1]) * roundness];
+        result[index] = { ...stroke, center: towardsCorner(stroke.center), radius: stroke.radius * roundness };
+        result[previousIndex] = withMovedEnd(result[previousIndex], 'end', towardsCorner(start));
+        result[nextIndex] = withMovedEnd(result[nextIndex], 'start', towardsCorner(end));
+    });
+    return result;
+};
+/** The shape set at a roundness (0 = sharp … 1 = Lucide's own corners); its strokes are built on first use. */
+const shapeSetWithRoundness = (roundness) => {
+    let strokes = null;
+    return {
+        get strokes() {
+            strokes ??= Object.fromEntries(Object.entries(lucideShapeOutlines).map(([name, outline]) => [name, startAtTopMiddle(clockwise(fitToBox(withCornerRoundness(outline, roundness))))]));
+            return strokes;
+        },
+        alternativeStrokes: {},
+        pairLayouts: {},
+        spins: {},
+        segmentCount: SEGMENT_COUNT,
+        // shapes are filled (clip), not stroked; these only matter for the outlined band's corners
+        strokeWidth: 0,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        withRoundness: shapeSetWithRoundness,
+    };
+};
+/** The shape set of clip(): states `circle`, `ellipse`, `heart` … `puzzle` (see `lucideShapeOutlines`). */
+const clipShapes = shapeSetWithRoundness(1);
+return { lucideShapeOutlines, clipShapes };
 })();
 
 // svg.ts
-const { 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 };
+})();
+
+// clip.ts
+const { clip } = (() => {
+// Layer 3: an element cut out by a morphing shape (a star, a heart, a speech bubble …), e.g. a photo or a card.
+// The shape is square (1:1), placed by its centre (x, y) and size in % or px of the element, can be turned and
+// outlined (only a band along its edge shows). Filled → CSS `clip-path: url(#id)`; outlined → `mask: url(#id)`
+// (clip-path ignores line width). The <clipPath> / <mask> live in one hidden <svg> per clip.
+const GRID_SIZE = 24;
+const GRID_CENTER = 12;
+const DEGREE = Math.PI / 180;
+/** Masks and their clip regions reach far past the element, so bands and turned shapes are never cut by them. */
+const FAR = 100000;
+let clipCount = 0;
+const lengthToPixels = (length, reference, name) => {
+    if (typeof length === 'number' && Number.isFinite(length))
+        return (length / 100) * reference;
+    const match = typeof length === 'string' ? /^\s*(-?[\d.]+(?:e[-+]?\d+)?)\s*(px|%)\s*$/i.exec(length) : null;
+    if (!match)
+        throw new Error(`morphico: ${name} "${length}" is not a length — use a number (= %), '40%' or '120px'`);
+    const value = Number(match[1]);
+    return match[2] === 'px' ? value : (value / 100) * reference;
+};
+const checkedOutline = (outline) => {
+    if (!outline)
+        return false;
+    if (!(outline.width > 0))
+        throw new Error('morphico: outline.width must be a number of px above 0');
+    if (outline.band && !['inside', 'centre', 'outside'].includes(outline.band)) {
+        throw new Error(`morphico: outline.band "${outline.band}" — use 'inside', 'centre' or 'outside'`);
+    }
+    return outline;
+};
+/** Cuts `element` out by a morphing shape. */
+const clip = (element, options = {}) => {
+    const { set = clipShapes, state: initialState = 'circle', x = 50, y = 50, size, rotation = 0, roundness = 1, outline = false, ...defaultMorphOptions } = options;
+    const checkedState = (shapeSet, state) => {
+        if (!(state in shapeSet.strokes)) {
+            throw new Error(`morphico: unknown shape "${state}" (known: ${Object.keys(shapeSet.strokes).join(', ')})`);
+        }
+        return state;
+    };
+    for (const [name, length] of [['x', x], ['y', y], ['size', size]]) {
+        if (length !== undefined)
+            lengthToPixels(length, 1, name);
+    }
+    /** Where the change goes (or what shows when nothing moves). */
+    const target = {
+        state: checkedState(set, initialState), set: resolveIconSet(set, roundness), roundness,
+        x, y, size, rotation, outline: checkedOutline(outline),
+    };
+    const pieceLength = pieceLengthOf(set);
+    let frame = null; // null = resting at the target
+    let running = null;
+    let elementWidth = 0, elementHeight = 0;
+    // ---- the hidden <svg> with the <clipPath> (filled) and the <mask> (outlined) ----
+    const id = `morphico-clip-${++clipCount}`;
+    const svg = createSvgElement('svg', { width: 0, height: 0, 'aria-hidden': 'true', focusable: 'false' });
+    svg.style.position = 'absolute';
+    svg.style.pointerEvents = 'none';
+    const clipPathElement = svg.appendChild(createSvgElement('clipPath', { id: `${id}-shape`, clipPathUnits: 'objectBoundingBox' }));
+    const clipShape = clipPathElement.appendChild(createSvgElement('path'));
+    const farRegion = { maskUnits: 'userSpaceOnUse', x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR };
+    const maskElement = svg.appendChild(createSvgElement('mask', { id: `${id}-band`, ...farRegion }));
+    /** Every path drawn in element pixels for the outlined band (the band itself and its helpers). */
+    let bandPaths = [];
+    const buildBand = () => {
+        for (const helper of svg.querySelectorAll('.morphico-band-helper'))
+            helper.remove();
+        maskElement.replaceChildren();
+        bandPaths = [];
+        if (!target.outline)
+            return;
+        const { width, band = 'inside' } = target.outline;
+        const pixelPath = (attributes) => {
+            const path = createSvgElement('path', attributes);
+            bandPaths.push(path);
+            return path;
+        };
+        // inside = a line twice as wide, clipped to the shape; outside = a line twice as wide, the shape cut out of it
+        const edgeLine = (lineWidth) => pixelPath({ fill: 'none', stroke: 'white', 'stroke-width': lineWidth, 'stroke-linejoin': 'miter' });
+        if (band === 'centre') {
+            maskElement.append(edgeLine(width));
+        }
+        else if (band === 'inside') {
+            const insideClip = createSvgElement('clipPath', { id: `${id}-inside`, class: 'morphico-band-helper' });
+            insideClip.append(pixelPath({}));
+            svg.append(insideClip);
+            const line = edgeLine(2 * width);
+            line.setAttribute('clip-path', `url(#${id}-inside)`);
+            maskElement.append(line);
+        }
+        else {
+            // painting black over the inside would only work for luminance masks; a mask cut out of the line works for both
+            const outsideMask = createSvgElement('mask', { id: `${id}-outside`, class: 'morphico-band-helper', ...farRegion });
+            outsideMask.append(createSvgElement('rect', { x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR, fill: 'white' }), pixelPath({ fill: 'black' }));
+            svg.append(outsideMask);
+            const line = edgeLine(2 * width);
+            line.setAttribute('mask', `url(#${id}-outside)`);
+            maskElement.append(line);
+        }
+    };
+    const ownClipPath = element.style.clipPath;
+    const ownMask = element.style.mask;
+    const applyStyle = () => {
+        const mask = target.outline ? `url(#${id}-band)` : ownMask;
+        element.style.clipPath = target.outline ? ownClipPath : `url(#${id}-shape)`;
+        element.style.mask = mask;
+        element.style.setProperty('-webkit-mask', mask);
+    };
+    // ---- placement and drawing ----
+    const restingPlacement = () => ({
+        centerX: lengthToPixels(target.x, elementWidth, 'x'),
+        centerY: lengthToPixels(target.y, elementHeight, 'y'),
+        side: target.size === undefined ? Math.min(elementWidth, elementHeight) : lengthToPixels(target.size, elementWidth, 'size'),
+    });
+    const restingFrame = () => ({ shape: shapesOf(target.set)[target.state], rotation: target.rotation, placement: restingPlacement() });
+    /** The shape in element pixels: scaled to its square, turned around the square's centre, moved into place. */
+    const toElementPixels = ({ shape, rotation: angle, placement: { centerX, centerY, side } }) => {
+        const scale = side / GRID_SIZE;
+        const cos = Math.cos(angle * DEGREE), sin = Math.sin(angle * DEGREE);
+        const pixels = [];
+        for (let index = 0; index < shape.length; index += 2) {
+            const offsetX = (shape[index] - GRID_CENTER) * scale, offsetY = (shape[index + 1] - GRID_CENTER) * scale;
+            pixels.push(centerX + offsetX * cos - offsetY * sin, centerY + offsetX * sin + offsetY * cos);
+        }
+        return pixels;
+    };
+    const render = () => {
+        if (!elementWidth || !elementHeight)
+            return;
+        const pixels = toElementPixels(frame ?? restingFrame());
+        if (target.outline) {
+            const pathData = toPathData(pixels, pieceLength);
+            for (const path of bandPaths)
+                path.setAttribute('d', pathData);
+        }
+        else {
+            // objectBoundingBox: 0…1 of the element's width / height
+            const boxUnits = pixels.map((value, index) => value / (index % 2 ? elementHeight : elementWidth));
+            clipShape.setAttribute('d', toPathData(boxUnits, pieceLength));
+        }
+    };
+    const measure = (width, height) => {
+        elementWidth = width;
+        elementHeight = height;
+        render();
+    };
+    // ---- changes ----
+    /** Ends the running change and resolves everyone waiting for it. */
+    const finish = (interrupted) => {
+        if (!running)
+            return;
+        const { stopAnimation, resolvers } = running;
+        running = null;
+        stopAnimation();
+        for (const resolve of resolvers)
+            resolve({ state: target.state, interrupted });
+    };
+    /** Updates the target (checked first, so a wrong value throws right away, not in an animation frame). */
+    const applyChanges = (changes) => {
+        for (const name of ['x', 'y', 'size']) {
+            if (changes[name] !== undefined)
+                lengthToPixels(changes[name], 1, name);
+        }
+        if (changes.state !== undefined)
+            target.state = checkedState(target.set, changes.state);
+        if (changes.roundness !== undefined && changes.roundness !== target.roundness) {
+            target.roundness = changes.roundness;
+            target.set = resolveIconSet(set, changes.roundness);
+        }
+        if (changes.x !== undefined)
+            target.x = changes.x;
+        if (changes.y !== undefined)
+            target.y = changes.y;
+        if (changes.size !== undefined)
+            target.size = changes.size;
+        if (changes.rotation !== undefined)
+            target.rotation = changes.rotation;
+        if (changes.outline !== undefined) {
+            target.outline = checkedOutline(changes.outline);
+            buildBand();
+            applyStyle();
+        }
+    };
+    const change = (changes, morphOptions) => {
+        const settled = !running;
+        finish(true);
+        const previous = { state: target.state, set: target.set };
+        const from = frame ?? restingFrame();
+        applyChanges(changes);
+        const { duration = DEFAULT_DURATION, easing = 'easeInOutCubic' } = morphOptions;
+        if (duration <= 0 || prefersReducedMotion() || !elementWidth || !elementHeight) {
+            frame = null;
+            render();
+            return Promise.resolve({ state: target.state, interrupted: false });
+        }
+        // settled: both sides use the pair's layouts; interrupted: start from the shape on screen
+        const fromShape = settled
+            ? shapeForPair(previous.set, shapesOf(previous.set), previous.state, target.state) : from.shape;
+        const toShape = shapeForPair(target.set, shapesOf(target.set), target.state, previous.state);
+        const to = restingPlacement();
+        const ease = typeof easing === 'function' ? easing : easings[easing];
+        const startTime = performance.now();
+        return new Promise((resolve) => {
+            const stopAnimation = animate((frameTime) => {
+                const progress = clampToUnit((frameTime - startTime) / duration);
+                if (progress >= 1) {
+                    frame = null;
+                    render();
+                    finish(false);
+                    return false;
+                }
+                const easedProgress = ease(progress);
+                const between = (start, end) => start + (end - start) * easedProgress;
+                frame = {
+                    shape: interpolate(fromShape, toShape, easedProgress),
+                    rotation: between(from.rotation, target.rotation),
+                    placement: {
+                        centerX: between(from.placement.centerX, to.centerX),
+                        centerY: between(from.placement.centerY, to.centerY),
+                        side: between(from.placement.side, to.side),
+                    },
+                };
+                render();
+                return true;
+            });
+            running = { stopAnimation, resolvers: [resolve] };
+        });
+    };
+    // ---- start ----
+    const root = element.getRootNode();
+    // inside a shadow root, url(#id) only finds ids of that root
+    (root instanceof ShadowRoot ? root : document.body).append(svg);
+    buildBand();
+    applyStyle();
+    const box = element.getBoundingClientRect();
+    measure(box.width, box.height);
+    const resizeObserver = typeof ResizeObserver === 'function'
+        ? new ResizeObserver(([entry]) => {
+            const borderBox = entry.borderBoxSize?.[0];
+            if (borderBox)
+                measure(borderBox.inlineSize, borderBox.blockSize);
+            else
+                measure(entry.contentRect.width, entry.contentRect.height);
+        })
+        : null;
+    resizeObserver?.observe(element);
+    return {
+        get state() { return target.state; },
+        to(stateOrChanges, options = {}) {
+            const { onEnd, duration, easing, ...changes } = typeof stateOrChanges === 'string'
+                ? { ...options, state: stateOrChanges } : stateOrChanges;
+            const result = change(changes, { ...defaultMorphOptions, ...(duration !== undefined && { duration }), ...(easing && { easing }) });
+            if (onEnd)
+                result.then(onEnd);
+            return result;
+        },
+        set(changes) {
+            finish(true);
+            frame = null;
+            applyChanges(changes);
+            render();
+        },
+        destroy() {
+            finish(true);
+            resizeObserver?.disconnect();
+            svg.remove();
+            element.style.clipPath = ownClipPath;
+            element.style.mask = ownMask;
+            element.style.setProperty('-webkit-mask', ownMask);
+        },
+    };
+};
+return { clip };
 })();
 
 // icon.ts
@@ -1230,13 +3877,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();
@@ -1263,58 +3912,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),
@@ -1323,29 +3954,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);
@@ -1361,7 +3989,7 @@ const text = (element, options = {}) => {
         set: show,
         destroy() {
             for (const cell of cells)
-                cell.morphingPath?.stop();
+                cell.morphingPath.stop();
             line.remove();
         },
     };
@@ -1372,7 +4000,7 @@ 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.3.0';
 
-return { easings, icon, iconSets, text, version };
+return { clip, easings, icon, iconSets, text, version };
 })();