morphico 0.2.0 → 0.4.0

package/dist/morphico.js

@@ -1,4 +1,4 @@
-/*! morphico v0.2.0 | code: MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE)
+/*! morphico v0.4.0 | code: MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE)
  * Icons based on Lucide (https://lucide.dev), some of them from Feather (https://feathericons.com):
  *
  * ISC License
@@ -3017,7 +3017,7 @@ 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 = ' ';
@@ -3122,7 +3122,425 @@ 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, club without its stem. The states are the Lucide outlines made comparable for
+// morphing: clockwise, starting where the outline crosses the vertical middle at the top, scaled evenly to fill the
+// 24×24 box and centred (computed on first use, not at import). Roundness 1 = Lucide's own corners … 0 = sharp.
+const DEGREE = Math.PI / 180;
+const GRID_SIZE = 24;
+const GRID_CENTER = 12;
+const SAMPLES_PER_STROKE = 48;
+/** Enough for the shape that needs the most (puzzle: 24 strokes, its knobs ≈ 40 segments); the rest spreads by length. */
+const SEGMENT_COUNT = 48;
+/** The shapes as Lucide draws them (Lucide coordinates); the set's states are made from these. */
+const lucideShapeOutlines = {
+    circle: [arc(12, 12, 10, -90, 270)],
+    ellipse: ellipse(12, 12, 10, 6),
+    heart: [
+        arc(7.5, 9.5001, 5.5, -179.9989, -41.9423),
+        arc(12, 5.4415, 0.56, 136.9163, 43.0837),
+        arc(16.5101, 9.4738, 5.49, -138.3317, 0.2729),
+        cubic(22, 9.5, 22, 11.79, 20.5, 13.5, 19, 15),
+        line(19, 15, 13.508, 20.313),
+        arc(11.9996, 18.9997, 2, 41.0455, 138.2288),
+        line(10.508, 20.332, 5, 15),
+        cubic(5, 15, 3.5, 13.5, 2, 11.8, 2, 9.5),
+    ],
+    sparkle: [
+        arc(12, 2.9976, 1, -169.4202, -10.5798),
+        line(12.983, 2.814, 14.034, 8.372),
+        arc(15.9992, 8.0008, 2, 169.3026, 100.6974),
+        line(15.628, 9.966, 21.186, 11.017),
+        arc(21.0024, 12, 1, -79.4202, 79.4202),
+        line(21.186, 12.983, 15.628, 14.034),
+        arc(15.9992, 15.9992, 2, -100.6974, -169.3026),
+        line(14.034, 15.628, 12.983, 21.186),
+        arc(12, 21.0024, 1, 10.5798, 169.4202),
+        line(11.017, 21.186, 9.966, 15.628),
+        arc(8.0008, 15.9992, 2, -10.6974, -79.3026),
+        line(8.372, 14.034, 2.814, 12.983),
+        arc(2.9976, 12, 1, 100.5798, 259.4202),
+        line(2.814, 11.017, 8.372, 9.966),
+        arc(8.0008, 8.0008, 2, 79.3026, 10.6974),
+        line(9.966, 8.372, 11.017, 2.814),
+    ],
+    astroid: [
+        arc(12, 21.0024, 1, 10.5798, 169.4202),
+        arc(1.1555, 22.8445, 10, -9.5467, -80.4533),
+        arc(2.9976, 12, 1, 100.5798, 259.4202),
+        arc(1.1555, 1.1555, 10, 80.4533, 9.5467),
+        arc(12, 2.9976, 1, -169.4202, -10.5798),
+        arc(22.8445, 1.1555, 10, 170.4533, 99.5467),
+        arc(21.0024, 12, 1, -79.4202, 79.4202),
+        arc(22.8445, 22.8445, 10, -99.5467, -170.4533),
+    ],
+    bookmark: [
+        arc(17, 5, 2, -90, 0),
+        line(19, 5, 19, 20),
+        arc(18, 19.9997, 1, 0.0185, 119.7357),
+        line(17.504, 20.868, 12.992, 18.29),
+        arc(12, 20.0266, 2, -60.2643, -119.7357),
+        line(11.008, 18.29, 6.496, 20.868),
+        arc(6, 19.9997, 1, 60.2643, 179.9815),
+        line(5, 20, 5, 5),
+        arc(7, 5, 2, 180, 270),
+        line(7, 3, 17, 3),
+    ],
+    shield: [
+        cubic(20, 13, 20, 18, 16.5, 20.5, 12.34, 21.95),
+        arc(12.0191, 21.0029, 1, 71.2803, 110.4299),
+        cubic(11.67, 21.94, 7.5, 20.5, 4, 18, 4, 13),
+        line(4, 13, 4, 6),
+        arc(5, 6, 1, 180, 270),
+        cubic(5, 5, 7, 5, 9.5, 3.8, 11.24, 2.28),
+        arc(12, 3.1696, 1.17, -130.5094, -49.4906),
+        cubic(12.76, 2.28, 14.51, 3.81, 17, 5, 19, 5),
+        arc(19, 6, 1, -90, 0),
+        line(20, 6, 20, 13),
+    ],
+    moon: [
+        arc(11.9981, 12.0009, 9, 3.09, 266.904),
+        cubic(11.512, 3.014, 11.917, 2.992, 12.129, 3.474, 11.914, 3.817),
+        arc(17.002, 6.997, 6, -147.9941, -302.0059),
+        cubic(20.182, 12.085, 20.526, 11.87, 21.007, 12.081, 20.985, 12.486),
+    ],
+    tag: [
+        arc(11.1716, 4, 2, -44.9913, -89.9878),
+        line(11.172, 2, 4, 2),
+        arc(4, 4, 2, -90, -180),
+        line(2, 4, 2, 11.172),
+        arc(4, 11.1716, 2, 179.9878, 134.9913),
+        line(2.586, 12.586, 11.29, 21.29),
+        arc(13, 19.5691, 2.426, 134.8186, 45.1814),
+        line(14.71, 21.29, 21.29, 14.71),
+        arc(19.5691, 13, 2.426, 44.8186, -44.8186),
+        line(21.29, 11.29, 12.586, 2.586),
+    ],
+    square: [
+        line(5, 3, 19, 3),
+        arc(19, 5, 2, -90, 0),
+        line(21, 5, 21, 19),
+        arc(19, 19, 2, 0, 90),
+        line(19, 21, 5, 21),
+        arc(5, 19, 2, 90, 180),
+        line(3, 19, 3, 5),
+        arc(5, 5, 2, 180, 270),
+    ],
+    badge: [
+        arc(7.7549, 7.7531, 4, 167.4834, 282.6366),
+        arc(12, 6.0048, 4, -147.4051, -32.5949),
+        arc(16.2474, 7.7526, 4, -102.6711, 12.6711),
+        arc(17.9952, 12, 4, -57.4051, 57.4051),
+        arc(16.2469, 16.2451, 4, -12.6366, 102.5166),
+        arc(12.005, 18.0031, 4, 32.4617, 147.5383),
+        arc(7.7549, 16.2469, 4, 77.3634, 192.5166),
+        arc(5.9891, 12, 4, 122.3281, 237.6719),
+    ],
+    triangle: [
+        arc(12, 5.0035, 2, -30.1173, -149.8827),
+        line(10.27, 4, 2.27, 18),
+        arc(4.0021, 19, 2, -150, -269.9413),
+        line(4, 21, 20, 21),
+        arc(19.9979, 19, 2, 89.9413, -30),
+        line(21.73, 18, 13.73, 4),
+    ],
+    droplet: [
+        arc(12, 15, 7, 90, 0),
+        cubic(19, 15, 19, 13, 18, 11.1, 16, 9.5),
+        cubic(16, 9.5, 14, 7.9, 12.5, 5.5, 12, 3),
+        cubic(12, 3, 11.5, 5.5, 10, 7.9, 8, 9.5),
+        cubic(8, 9.5, 6, 11.1, 5, 13, 5, 15),
+        arc(12, 15, 7, 180, 90),
+    ],
+    pentagon: [
+        arc(12, 4.0021, 2, -125.803, -54.197),
+        line(13.17, 2.38, 21.17, 8.12),
+        arc(20.0009, 9.7427, 2, -54.2293, 18.2786),
+        line(21.9, 10.37, 18.86, 19.63),
+        arc(16.9618, 19, 2, 18.3608, 90.052),
+        line(16.96, 21, 7.04, 21),
+        arc(7.0382, 19, 2, 89.948, 161.6392),
+        line(5.14, 19.63, 2.1, 10.37),
+        arc(3.9991, 9.7427, 2, 161.7214, 234.2293),
+        line(2.83, 8.12, 10.83, 2.38),
+    ],
+    hexagon: [
+        line(21, 16, 21, 8),
+        arc(19, 8.0021, 2, -0.0588, -60),
+        line(20, 6.27, 13, 2.27),
+        arc(12, 4.0021, 2, -60, -120),
+        line(11, 2.27, 4, 6.27),
+        arc(5, 8.0021, 2, -120, -179.9412),
+        line(3, 8, 3, 16),
+        arc(5, 15.9979, 2, 179.9412, 120),
+        line(4, 17.73, 11, 21.73),
+        arc(12, 19.9979, 2, 120, 60),
+        line(13, 21.73, 20, 17.73),
+        arc(19, 15.9979, 2, 60, 0.0588),
+    ],
+    octagon: [
+        arc(4, 15.3116, 2, 134.9913, 179.9878),
+        line(2, 15.312, 2, 8.688),
+        arc(4, 8.6884, 2, -179.9878, -134.9913),
+        line(2.586, 7.274, 7.274, 2.586),
+        arc(8.6884, 4, 2, -135.0087, -90.0122),
+        line(8.688, 2, 15.312, 2),
+        arc(15.3116, 4, 2, -89.9878, -44.9913),
+        line(16.726, 2.586, 21.414, 7.274),
+        arc(20, 8.6884, 2, -45.0087, -0.0122),
+        line(22, 8.688, 22, 15.312),
+        arc(20, 15.3116, 2, 0.0122, 45.0087),
+        line(21.414, 16.726, 16.726, 21.414),
+        arc(15.3116, 20, 2, 44.9913, 89.9878),
+        line(15.312, 22, 8.688, 22),
+        arc(8.6884, 20, 2, 90.0122, 135.0087),
+        line(7.274, 21.414, 2.586, 16.726),
+    ],
+    squircle: [
+        cubic(12, 3, 19.2, 3, 21, 4.8, 21, 12),
+        cubic(21, 12, 21, 19.2, 19.2, 21, 12, 21),
+        cubic(12, 21, 4.8, 21, 3, 19.2, 3, 12),
+        cubic(3, 12, 3, 4.8, 4.8, 3, 12, 3),
+    ],
+    star: [
+        arc(12, 2.5301, 0.53, -153.6664, -26.3336),
+        line(12.475, 2.295, 14.785, 6.974),
+        arc(16.6883, 6.0335, 2.123, 153.7044, 98.3503),
+        line(16.38, 8.134, 21.546, 8.89),
+        arc(21.47, 9.4145, 0.53, -81.756, 45.7247),
+        line(21.84, 9.794, 18.104, 13.432),
+        arc(19.5857, 14.9525, 2.123, -134.26, -189.6958),
+        line(17.493, 15.31, 18.375, 20.45),
+        arc(17.8531, 20.5422, 0.53, -10.0155, 118.0314),
+        line(17.604, 21.01, 12.986, 18.582),
+        arc(11.9995, 20.4608, 2.122, -62.2968, -117.7032),
+        line(11.013, 18.582, 6.396, 21.01),
+        arc(6.148, 20.5416, 0.53, 62.1036, 189.9512),
+        line(5.626, 20.45, 6.507, 15.311),
+        arc(4.4155, 14.9522, 2.122, 9.7335, -45.7597),
+        line(5.896, 13.432, 2.16, 9.795),
+        arc(2.5282, 9.4138, 0.53, 134.0047, 261.9521),
+        line(2.454, 8.889, 7.619, 8.134),
+        arc(7.3135, 6.0341, 2.122, 81.7227, 26.2909),
+        line(9.216, 6.974, 11.525, 2.295),
+    ],
+    'rectangle-horizontal': [
+        line(4, 6, 20, 6),
+        arc(20, 8, 2, -90, 0),
+        line(22, 8, 22, 16),
+        arc(20, 16, 2, 0, 90),
+        line(20, 18, 4, 18),
+        arc(4, 16, 2, 90, 180),
+        line(2, 16, 2, 8),
+        arc(4, 8, 2, 180, 270),
+    ],
+    'message-circle': [
+        arc(1.1328, 17.079, 2, -21.6245, 12.4142),
+        line(3.086, 17.509, 2.021, 20.799),
+        arc(3.0005, 21.0005, 1, -168.3779, -284.8626),
+        line(3.257, 21.967, 6.67, 20.969),
+        arc(7.0591, 22.9308, 2, -101.2192, -69.2104),
+        arc(12.0003, 12.0003, 10, 115.0325, -205.7324),
+    ],
+    'message-square': [
+        arc(20, 17, 2, 0, 90),
+        line(20, 19, 6.828, 19),
+        arc(6.8284, 21, 2, -90.0122, -135.0087),
+        line(5.414, 19.586, 3.212, 21.788),
+        arc(2.71, 21.2859, 0.71, 45.0052, 179.9926),
+        line(2, 21.286, 2, 5),
+        arc(4, 5, 2, 180, 270),
+        line(4, 3, 20, 3),
+        arc(20, 5, 2, -90, 0),
+        line(22, 5, 22, 17),
+    ],
+    cloud: [
+        line(17.5, 19, 9, 19),
+        arc(9.0018, 12, 7, 90.0147, 343.3984),
+        line(15.71, 10, 17.5, 10),
+        arc(17.5, 14.5, 4.5, -90, 90),
+    ],
+    puzzle: [
+        arc(16.0975, 3.6833, 1, 135.0289, 13.459),
+        arc(19.5008, 4.5, 2.5, -166.4917, 76.5107),
+        arc(20.3167, 7.9035, 1, -103.459, -225.0289),
+        line(19.61, 8.611, 21.293, 10.293),
+        arc(19.5861, 12, 2.414, -45.0015, 45.0015),
+        line(21.293, 13.707, 19.61, 15.39),
+        arc(18.9025, 14.6833, 1, 44.9711, 166.541),
+        arc(15.4992, 15.5, 2.5, -13.5083, -256.5107),
+        arc(14.6833, 18.9035, 1, -76.541, 45.0289),
+        line(15.39, 19.611, 13.707, 21.293),
+        arc(12, 19.5861, 2.414, 44.9985, 135.0015),
+        line(10.293, 21.293, 8.61, 19.61),
+        arc(7.9025, 20.3167, 1, -44.9711, -166.541),
+        arc(4.4992, 19.5, 2.5, 13.5083, 256.5107),
+        arc(3.6833, 16.0965, 1, 76.541, -45.0289),
+        line(4.39, 15.389, 2.707, 13.707),
+        arc(4.4139, 12, 2.414, 134.9985, 225.0015),
+        line(2.707, 10.293, 4.39, 8.61),
+        arc(5.0975, 9.3167, 1, -135.0289, -13.459),
+        arc(8.5008, 8.5, 2.5, 166.4917, -76.5107),
+        arc(9.3167, 5.0965, 1, 103.459, 225.0289),
+        line(8.61, 4.389, 10.293, 2.707),
+        arc(12, 4.4139, 2.414, -135.0015, -44.9985),
+        line(13.707, 2.707, 15.39, 4.39),
+    ],
+    // without its stem line (Lucide's second piece)
+    club: [
+        arc(12, 7.51, 5.5, 16.2602, -196.2602),
+        arc(7.5026, 14.494, 5.5, -98.1803, -324.8563),
+        arc(16.5052, 14.5052, 5.5, 144.9978, -81.9018),
+        line(17.28, 9.06, 17.28, 9.05),
+    ],
+};
+// ---- making the outlines comparable ----
+const pointOnStroke = (stroke, progress) => strokePiece(stroke, 0, progress)[3];
+const samplesOf = (strokes) => strokes.flatMap((stroke, strokeIndex) => Array.from({ length: SAMPLES_PER_STROKE }, (_, sample) => {
+    const progress = sample / SAMPLES_PER_STROKE;
+    return { point: pointOnStroke(stroke, progress), strokeIndex, progress };
+}));
+const transformStroke = (stroke, scale, offsetX, offsetY) => {
+    const move = ([x, y]) => [x * scale + offsetX, y * scale + offsetY];
+    switch (stroke.kind) {
+        case 'line': return { ...stroke, from: move(stroke.from), to: move(stroke.to) };
+        case 'arc': return { ...stroke, center: move(stroke.center), radius: stroke.radius * scale };
+        case 'cubic': return { kind: 'cubic', segment: stroke.segment.map(move) };
+    }
+};
+/** Splits a stroke at `progress` into two strokes of the same kind (arcs stay arcs, so they keep their segment rule). */
+const splitStroke = (stroke, progress) => {
+    if (stroke.kind === 'arc') {
+        const splitAngle = stroke.startAngle + (stroke.endAngle - stroke.startAngle) * progress;
+        return [{ ...stroke, endAngle: splitAngle }, { ...stroke, startAngle: splitAngle }];
+    }
+    if (stroke.kind === 'line') {
+        const splitPoint = pointOnStroke(stroke, progress);
+        return [{ ...stroke, to: splitPoint }, { ...stroke, from: splitPoint }];
+    }
+    return [{ kind: 'cubic', segment: strokePiece(stroke, 0, progress) }, { kind: 'cubic', segment: strokePiece(stroke, progress, 1) }];
+};
+const fitToBox = (strokes) => {
+    const points = samplesOf(strokes).map(({ point }) => point);
+    const xValues = points.map(([x]) => x), yValues = points.map(([, y]) => y);
+    const minX = Math.min(...xValues), maxX = Math.max(...xValues), minY = Math.min(...yValues), maxY = Math.max(...yValues);
+    const scale = GRID_SIZE / Math.max(maxX - minX, maxY - minY);
+    return strokes.map((stroke) => transformStroke(stroke, scale, GRID_CENTER - ((minX + maxX) / 2) * scale, GRID_CENTER - ((minY + maxY) / 2) * scale));
+};
+/** Positive = clockwise on screen (y points down). */
+const signedArea = (strokes) => {
+    const points = samplesOf(strokes).map(({ point }) => point);
+    return points.reduce((sum, [x, y], index) => {
+        const [nextX, nextY] = points[(index + 1) % points.length];
+        return sum + x * nextY - nextX * y;
+    }, 0);
+};
+const clockwise = (strokes) => (signedArea(strokes) >= 0 ? strokes : strokes.slice().reverse().map(reversedStroke));
+/** Starts the closed outline where it crosses x = 12 highest up (splitting that stroke). */
+const startAtTopMiddle = (strokes) => {
+    const samples = samplesOf(strokes);
+    let best = null;
+    for (let index = 0; index < samples.length; index++) {
+        const sample = samples[index], next = samples[(index + 1) % samples.length];
+        const [x, y] = sample.point, [nextX, nextY] = next.point;
+        if ((x - GRID_CENTER) * (nextX - GRID_CENTER) > 0 || x === nextX)
+            continue;
+        const fraction = (GRID_CENTER - x) / (nextX - x);
+        const crossingY = y + (nextY - y) * fraction;
+        if (best && crossingY >= best.y)
+            continue;
+        const nextProgress = next.strokeIndex === sample.strokeIndex ? next.progress : 1;
+        best = { strokeIndex: sample.strokeIndex, progress: sample.progress + (nextProgress - sample.progress) * fraction, y: crossingY };
+    }
+    if (!best)
+        return strokes;
+    const { strokeIndex, progress } = best;
+    const before = strokes.slice(0, strokeIndex), after = strokes.slice(strokeIndex + 1);
+    if (progress < 1e-6)
+        return [...strokes.slice(strokeIndex), ...before];
+    if (progress > 1 - 1e-6)
+        return [...after, ...before, strokes[strokeIndex]];
+    const [firstPart, secondPart] = splitStroke(strokes[strokeIndex], progress);
+    return [secondPart, ...after, ...before, firstPart];
+};
+// ---- roundness: 1 = Lucide's own corners, 0 = sharp ----
+/** Lucide's corner arcs are small (radius 0.56 … 2.43); bigger arcs are part of the shape (circle, moon, droplet). */
+const LARGEST_CORNER_RADIUS = 2.5;
+const crossingOfLines = (point, direction, otherPoint, otherDirection) => {
+    const determinant = direction[0] * otherDirection[1] - direction[1] * otherDirection[0];
+    if (Math.abs(determinant) < 1e-9)
+        return null;
+    const along = ((otherPoint[0] - point[0]) * otherDirection[1] - (otherPoint[1] - point[1]) * otherDirection[0]) / determinant;
+    return [point[0] + direction[0] * along, point[1] + direction[1] * along];
+};
+/** Moves a stroke's start (or end) to `point`; a cubic's neighbouring control point moves along, so its direction there stays. */
+const withMovedEnd = (stroke, which, point) => {
+    if (stroke.kind === 'line')
+        return which === 'start' ? { ...stroke, from: point } : { ...stroke, to: point };
+    if (stroke.kind !== 'cubic')
+        return stroke;
+    const [start, control1, control2, end] = stroke.segment;
+    if (which === 'start') {
+        const shift = [point[0] - start[0], point[1] - start[1]];
+        return { kind: 'cubic', segment: [point, [control1[0] + shift[0], control1[1] + shift[1]], control2, end] };
+    }
+    const shift = [point[0] - end[0], point[1] - end[1]];
+    return { kind: 'cubic', segment: [start, control1, [control2[0] + shift[0], control2[1] + shift[1]], point] };
+};
+/**
+ * Every corner arc (small, between two lines / cubics) shrinks towards the sharp corner where its two neighbours'
+ * directions meet: radius × roundness, angles unchanged. At 0 the arc is a point on the corner. Same strokes in the
+ * same order at any roundness, so morphs keep working.
+ */
+const withCornerRoundness = (strokes, roundness) => {
+    const result = strokes.slice();
+    strokes.forEach((stroke, index) => {
+        const previousIndex = (index - 1 + strokes.length) % strokes.length, nextIndex = (index + 1) % strokes.length;
+        const isEdge = (neighbour) => neighbour.kind === 'line' || neighbour.kind === 'cubic';
+        if (stroke.kind !== 'arc' || stroke.radius > LARGEST_CORNER_RADIUS)
+            return;
+        if (!isEdge(strokes[previousIndex]) || !isEdge(strokes[nextIndex]))
+            return;
+        const turning = Math.sign(stroke.endAngle - stroke.startAngle);
+        const tangent = (angle) => [-Math.sin(angle * DEGREE) * turning, Math.cos(angle * DEGREE) * turning];
+        const start = pointOnStroke(stroke, 0), end = pointOnStroke(stroke, 1);
+        const corner = crossingOfLines(start, tangent(stroke.startAngle), end, tangent(stroke.endAngle));
+        if (!corner)
+            return;
+        const towardsCorner = ([x, y]) => [corner[0] + (x - corner[0]) * roundness, corner[1] + (y - corner[1]) * roundness];
+        result[index] = { ...stroke, center: towardsCorner(stroke.center), radius: stroke.radius * roundness };
+        result[previousIndex] = withMovedEnd(result[previousIndex], 'end', towardsCorner(start));
+        result[nextIndex] = withMovedEnd(result[nextIndex], 'start', towardsCorner(end));
+    });
+    return result;
+};
+/** The shape set at a roundness (0 = sharp … 1 = Lucide's own corners); its strokes are built on first use. */
+const shapeSetWithRoundness = (roundness) => {
+    let strokes = null;
+    return {
+        get strokes() {
+            strokes ??= Object.fromEntries(Object.entries(lucideShapeOutlines).map(([name, outline]) => [name, startAtTopMiddle(clockwise(fitToBox(withCornerRoundness(outline, roundness))))]));
+            return strokes;
+        },
+        alternativeStrokes: {},
+        pairLayouts: {},
+        spins: {},
+        segmentCount: SEGMENT_COUNT,
+        // shapes are filled (clip), not stroked; these only matter for the outlined band's corners
+        strokeWidth: 0,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        withRoundness: shapeSetWithRoundness,
+    };
+};
+/** The shape set of clip(): states `circle`, `ellipse`, `heart` … `puzzle` (see `lucideShapeOutlines`). */
+const clipShapes = shapeSetWithRoundness(1);
+return { lucideShapeOutlines, clipShapes };
 })();
 
 // svg.ts
@@ -3160,6 +3578,933 @@ const createStrokedElement = (tagName, style, attributes = {}) => createSvgEleme
 return { hasFixedStrokeWidth, createSvgElement, createIconSvg, createStrokedElement };
 })();
 
+// clip.ts
+const { clip } = (() => {
+// Layer 3: an element cut out by a morphing shape (a star, a heart, a speech bubble …), e.g. a photo or a card.
+// The shape is square (1:1), placed by its centre (x, y) and size in % or px of the element, can be turned and
+// outlined (only a band along its edge shows). Filled → CSS `clip-path: url(#id)`; outlined → `mask: url(#id)`
+// (clip-path ignores line width). The <clipPath> / <mask> live in one hidden <svg> per clip.
+const GRID_SIZE = 24;
+const GRID_CENTER = 12;
+const DEGREE = Math.PI / 180;
+/** Masks and their clip regions reach far past the element, so bands and turned shapes are never cut by them. */
+const FAR = 100000;
+/** In objectBoundingBox units (1 = the element's width / height): far around the element. */
+const INVERTED_SURROUNDING = 'M-1000 -1000H1001V1001H-1000Z';
+let clipCount = 0;
+const lengthToPixels = (length, reference, name) => {
+    if (typeof length === 'number' && Number.isFinite(length))
+        return (length / 100) * reference;
+    const match = typeof length === 'string' ? /^\s*(-?[\d.]+(?:e[-+]?\d+)?)\s*(px|%)\s*$/i.exec(length) : null;
+    if (!match)
+        throw new Error(`morphico: ${name} "${length}" is not a length — use a number (= %), '40%' or '120px'`);
+    const value = Number(match[1]);
+    return match[2] === 'px' ? value : (value / 100) * reference;
+};
+const checkedOutline = (outline) => {
+    if (!outline)
+        return false;
+    if (!(outline.width > 0))
+        throw new Error('morphico: outline.width must be a number of px above 0');
+    if (outline.band && !['inside', 'centre', 'outside'].includes(outline.band)) {
+        throw new Error(`morphico: outline.band "${outline.band}" — use 'inside', 'centre' or 'outside'`);
+    }
+    return outline;
+};
+/** Cuts `element` out by a morphing shape. */
+const clip = (element, options = {}) => {
+    const { set = clipShapes, state: initialState = 'circle', x = 50, y = 50, size, rotation = 0, roundness = 1, outline = false, inverted = false, ...defaultMorphOptions } = options;
+    const checkedState = (shapeSet, state) => {
+        if (!(state in shapeSet.strokes)) {
+            throw new Error(`morphico: unknown shape "${state}" (known: ${Object.keys(shapeSet.strokes).join(', ')})`);
+        }
+        return state;
+    };
+    for (const [name, length] of [['x', x], ['y', y], ['size', size]]) {
+        if (length !== undefined)
+            lengthToPixels(length, 1, name);
+    }
+    /** Where the change goes (or what shows when nothing moves). */
+    const target = {
+        state: checkedState(set, initialState), set: resolveIconSet(set, roundness), roundness,
+        x, y, size, rotation, outline: checkedOutline(outline), inverted,
+    };
+    const pieceLength = pieceLengthOf(set);
+    let frame = null; // null = resting at the target
+    let running = null;
+    let elementWidth = 0, elementHeight = 0;
+    // ---- the hidden <svg> with the <clipPath> (filled) and the <mask> (outlined) ----
+    const id = `morphico-clip-${++clipCount}`;
+    const svg = createSvgElement('svg', { width: 0, height: 0, 'aria-hidden': 'true', focusable: 'false' });
+    svg.style.position = 'absolute';
+    svg.style.pointerEvents = 'none';
+    const clipPathElement = svg.appendChild(createSvgElement('clipPath', { id: `${id}-shape`, clipPathUnits: 'objectBoundingBox' }));
+    const clipShape = clipPathElement.appendChild(createSvgElement('path'));
+    const farRegion = { maskUnits: 'userSpaceOnUse', x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR };
+    const maskElement = svg.appendChild(createSvgElement('mask', { id: `${id}-band`, ...farRegion }));
+    /** Every path drawn in element pixels for the outlined band (the band itself and its helpers). */
+    let bandPaths = [];
+    const buildBand = () => {
+        for (const helper of svg.querySelectorAll('.morphico-band-helper'))
+            helper.remove();
+        maskElement.replaceChildren();
+        bandPaths = [];
+        clipShape.setAttribute('clip-rule', target.inverted ? 'evenodd' : 'nonzero');
+        if (!target.outline)
+            return;
+        const { width, band = 'inside' } = target.outline;
+        // inverted: everything shows (white), the band is the hole (black)
+        const bandColor = target.inverted ? 'black' : 'white';
+        if (target.inverted) {
+            maskElement.append(createSvgElement('rect', { x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR, fill: 'white' }));
+        }
+        const pixelPath = (attributes) => {
+            const path = createSvgElement('path', attributes);
+            bandPaths.push(path);
+            return path;
+        };
+        // inside = a line twice as wide, clipped to the shape; outside = a line twice as wide, the shape cut out of it
+        const edgeLine = (lineWidth) => pixelPath({ fill: 'none', stroke: bandColor, 'stroke-width': lineWidth, 'stroke-linejoin': 'miter' });
+        if (band === 'centre') {
+            maskElement.append(edgeLine(width));
+        }
+        else if (band === 'inside') {
+            const insideClip = createSvgElement('clipPath', { id: `${id}-inside`, class: 'morphico-band-helper' });
+            insideClip.append(pixelPath({}));
+            svg.append(insideClip);
+            const line = edgeLine(2 * width);
+            line.setAttribute('clip-path', `url(#${id}-inside)`);
+            maskElement.append(line);
+        }
+        else {
+            // painting black over the inside would only work for luminance masks; a mask cut out of the line works for both
+            const outsideMask = createSvgElement('mask', { id: `${id}-outside`, class: 'morphico-band-helper', ...farRegion });
+            outsideMask.append(createSvgElement('rect', { x: -FAR, y: -FAR, width: 2 * FAR, height: 2 * FAR, fill: 'white' }), pixelPath({ fill: 'black' }));
+            svg.append(outsideMask);
+            const line = edgeLine(2 * width);
+            line.setAttribute('mask', `url(#${id}-outside)`);
+            maskElement.append(line);
+        }
+    };
+    const ownClipPath = element.style.clipPath;
+    const ownMask = element.style.mask;
+    const applyStyle = () => {
+        const mask = target.outline ? `url(#${id}-band)` : ownMask;
+        element.style.clipPath = target.outline ? ownClipPath : `url(#${id}-shape)`;
+        element.style.mask = mask;
+        element.style.setProperty('-webkit-mask', mask);
+    };
+    // ---- placement and drawing ----
+    const restingPlacement = () => ({
+        centerX: lengthToPixels(target.x, elementWidth, 'x'),
+        centerY: lengthToPixels(target.y, elementHeight, 'y'),
+        side: target.size === undefined ? Math.min(elementWidth, elementHeight) : lengthToPixels(target.size, elementWidth, 'size'),
+    });
+    const restingFrame = () => ({ shape: shapesOf(target.set)[target.state], rotation: target.rotation, placement: restingPlacement() });
+    /** The shape in element pixels: scaled to its square, turned around the square's centre, moved into place. */
+    const toElementPixels = ({ shape, rotation: angle, placement: { centerX, centerY, side } }) => {
+        const scale = side / GRID_SIZE;
+        const cos = Math.cos(angle * DEGREE), sin = Math.sin(angle * DEGREE);
+        const pixels = [];
+        for (let index = 0; index < shape.length; index += 2) {
+            const offsetX = (shape[index] - GRID_CENTER) * scale, offsetY = (shape[index + 1] - GRID_CENTER) * scale;
+            pixels.push(centerX + offsetX * cos - offsetY * sin, centerY + offsetX * sin + offsetY * cos);
+        }
+        return pixels;
+    };
+    const render = () => {
+        if (!elementWidth || !elementHeight)
+            return;
+        const pixels = toElementPixels(frame ?? restingFrame());
+        if (target.outline) {
+            const pathData = toPathData(pixels, pieceLength);
+            for (const path of bandPaths)
+                path.setAttribute('d', pathData);
+        }
+        else {
+            // objectBoundingBox: 0…1 of the element's width / height
+            const boxUnits = pixels.map((value, index) => value / (index % 2 ? elementHeight : elementWidth));
+            // inverted: a rectangle far around the element with the shape as a hole in it (clip-rule evenodd)
+            const surrounding = target.inverted ? INVERTED_SURROUNDING : '';
+            clipShape.setAttribute('d', surrounding + toPathData(boxUnits, pieceLength));
+        }
+    };
+    const measure = (width, height) => {
+        elementWidth = width;
+        elementHeight = height;
+        render();
+    };
+    // ---- changes ----
+    /** Ends the running change and resolves everyone waiting for it. */
+    const finish = (interrupted) => {
+        if (!running)
+            return;
+        const { stopAnimation, resolvers } = running;
+        running = null;
+        stopAnimation();
+        for (const resolve of resolvers)
+            resolve({ state: target.state, interrupted });
+    };
+    /** Updates the target (checked first, so a wrong value throws right away, not in an animation frame). */
+    const applyChanges = (changes) => {
+        for (const name of ['x', 'y', 'size']) {
+            if (changes[name] !== undefined)
+                lengthToPixels(changes[name], 1, name);
+        }
+        if (changes.state !== undefined)
+            target.state = checkedState(target.set, changes.state);
+        if (changes.roundness !== undefined && changes.roundness !== target.roundness) {
+            target.roundness = changes.roundness;
+            target.set = resolveIconSet(set, changes.roundness);
+        }
+        if (changes.x !== undefined)
+            target.x = changes.x;
+        if (changes.y !== undefined)
+            target.y = changes.y;
+        if (changes.size !== undefined)
+            target.size = changes.size;
+        if (changes.rotation !== undefined)
+            target.rotation = changes.rotation;
+        if (changes.outline !== undefined || changes.inverted !== undefined) {
+            if (changes.outline !== undefined)
+                target.outline = checkedOutline(changes.outline);
+            if (changes.inverted !== undefined)
+                target.inverted = changes.inverted;
+            buildBand();
+            applyStyle();
+        }
+    };
+    const change = (changes, morphOptions) => {
+        const settled = !running;
+        finish(true);
+        const previous = { state: target.state, set: target.set };
+        const from = frame ?? restingFrame();
+        applyChanges(changes);
+        const { duration = DEFAULT_DURATION, easing = 'easeInOutCubic' } = morphOptions;
+        if (duration <= 0 || prefersReducedMotion() || !elementWidth || !elementHeight) {
+            frame = null;
+            render();
+            return Promise.resolve({ state: target.state, interrupted: false });
+        }
+        // settled: both sides use the pair's layouts; interrupted: start from the shape on screen
+        const fromShape = settled
+            ? shapeForPair(previous.set, shapesOf(previous.set), previous.state, target.state) : from.shape;
+        const toShape = shapeForPair(target.set, shapesOf(target.set), target.state, previous.state);
+        const to = restingPlacement();
+        const ease = typeof easing === 'function' ? easing : easings[easing];
+        const startTime = performance.now();
+        return new Promise((resolve) => {
+            const stopAnimation = animate((frameTime) => {
+                const progress = clampToUnit((frameTime - startTime) / duration);
+                if (progress >= 1) {
+                    frame = null;
+                    render();
+                    finish(false);
+                    return false;
+                }
+                const easedProgress = ease(progress);
+                const between = (start, end) => start + (end - start) * easedProgress;
+                frame = {
+                    shape: interpolate(fromShape, toShape, easedProgress),
+                    rotation: between(from.rotation, target.rotation),
+                    placement: {
+                        centerX: between(from.placement.centerX, to.centerX),
+                        centerY: between(from.placement.centerY, to.centerY),
+                        side: between(from.placement.side, to.side),
+                    },
+                };
+                render();
+                return true;
+            });
+            running = { stopAnimation, resolvers: [resolve] };
+        });
+    };
+    // ---- start ----
+    const root = element.getRootNode();
+    // inside a shadow root, url(#id) only finds ids of that root
+    (root instanceof ShadowRoot ? root : document.body).append(svg);
+    buildBand();
+    applyStyle();
+    const box = element.getBoundingClientRect();
+    measure(box.width, box.height);
+    const resizeObserver = typeof ResizeObserver === 'function'
+        ? new ResizeObserver(([entry]) => {
+            const borderBox = entry.borderBoxSize?.[0];
+            if (borderBox)
+                measure(borderBox.inlineSize, borderBox.blockSize);
+            else
+                measure(entry.contentRect.width, entry.contentRect.height);
+        })
+        : null;
+    resizeObserver?.observe(element);
+    return {
+        get state() { return target.state; },
+        to(stateOrChanges, options = {}) {
+            const { onEnd, duration, easing, ...changes } = typeof stateOrChanges === 'string'
+                ? { ...options, state: stateOrChanges } : stateOrChanges;
+            const result = change(changes, { ...defaultMorphOptions, ...(duration !== undefined && { duration }), ...(easing && { easing }) });
+            if (onEnd)
+                result.then(onEnd);
+            return result;
+        },
+        set(changes) {
+            finish(true);
+            frame = null;
+            applyChanges(changes);
+            render();
+        },
+        destroy() {
+            finish(true);
+            resizeObserver?.disconnect();
+            svg.remove();
+            element.style.clipPath = ownClipPath;
+            element.style.mask = ownMask;
+            element.style.setProperty('-webkit-mask', ownMask);
+        },
+    };
+};
+return { clip };
+})();
+
+// sets/faces.ts
+const { OUTLINE_POINTS, PIECE_NAMES, faceExpressionNames, faceExpressionPieces, interpolateFace, blinked, smoothClosedPath, facePaths } = (() => {
+const OUTLINE_POINTS = 24;
+const PIECE_NAMES = ['leftBrow', 'rightBrow', 'leftEye', 'rightEye', 'leftPupil', 'rightPupil', 'mouth'];
+const DENSE_SAMPLES = 360;
+const toRadians = (degrees) => (degrees * Math.PI) / 180;
+const rotatePoint = ([x, y], degrees) => {
+    const angle = toRadians(degrees);
+    return [x * Math.cos(angle) - y * Math.sin(angle), x * Math.sin(angle) + y * Math.cos(angle)];
+};
+const denseBlobOutline = (options) => {
+    const { centre, width, height, rotation = 0, squareness = 0, topScale = 1 } = options;
+    const exponent = 2 + squareness * 6;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const outline = [];
+    for (let index = 0; index < DENSE_SAMPLES; index++) {
+        const angle = toRadians(-90 + (360 * index) / DENSE_SAMPLES);
+        const cosine = Math.cos(angle);
+        const sine = Math.sin(angle);
+        const y = halfHeight * Math.sign(sine) * Math.abs(sine) ** (2 / exponent);
+        const widthScale = 1 + ((topScale - 1) * (halfHeight - y)) / (2 * halfHeight);
+        const x = halfWidth * widthScale * Math.sign(cosine) * Math.abs(cosine) ** (2 / exponent);
+        const [turnedX, turnedY] = rotatePoint([x, y], rotation);
+        outline.push([centre[0] + turnedX, centre[1] + turnedY]);
+    }
+    const xs = outline.map(([x]) => x);
+    const left = Math.min(...xs);
+    const right = Math.max(...xs);
+    const lineY = ([leftY, rightY], x) => leftY + ((rightY - leftY) * (x - left)) / (right - left);
+    return outline.map(([x, y]) => {
+        let cutY = y;
+        if (options.cutTop)
+            cutY = Math.max(cutY, lineY(options.cutTop, x));
+        if (options.cutBottom)
+            cutY = Math.min(cutY, lineY(options.cutBottom, x));
+        return [x, cutY];
+    });
+};
+/** OUTLINE_POINTS points of a star-shaped outline, on rays at even angles from its box's centre (measured in the box
+ * stretched to a square, so a long flat shape still gets points on its round ends). */
+const resampleByAngle = (outline) => {
+    const xs = outline.map(([x]) => x);
+    const ys = outline.map(([, y]) => y);
+    const centreX = (Math.min(...xs) + Math.max(...xs)) / 2;
+    const centreY = (Math.min(...ys) + Math.max(...ys)) / 2;
+    const halfX = Math.max((Math.max(...xs) - Math.min(...xs)) / 2, 1e-9);
+    const halfY = Math.max((Math.max(...ys) - Math.min(...ys)) / 2, 1e-9);
+    const normalized = outline.map(([x, y]) => [(x - centreX) / halfX, (y - centreY) / halfY]);
+    const points = [];
+    for (let index = 0; index < OUTLINE_POINTS; index++) {
+        const angle = toRadians(-90 + (360 * index) / OUTLINE_POINTS);
+        const directionX = Math.cos(angle);
+        const directionY = Math.sin(angle);
+        let farthest = 0;
+        normalized.forEach((start, edgeIndex) => {
+            const end = normalized[(edgeIndex + 1) % normalized.length];
+            const edgeX = end[0] - start[0];
+            const edgeY = end[1] - start[1];
+            const denominator = directionX * edgeY - directionY * edgeX;
+            if (Math.abs(denominator) < 1e-12)
+                return;
+            const distance = (start[0] * edgeY - start[1] * edgeX) / denominator;
+            const along = (start[0] * directionY - start[1] * directionX) / denominator;
+            // a little slack: a ray passing exactly through a corner of the dense outline must still hit one of its edges
+            if (along >= -1e-9 && along <= 1 + 1e-9 && distance > farthest)
+                farthest = distance;
+        });
+        points.push([centreX + directionX * farthest * halfX, centreY + directionY * farthest * halfY]);
+    }
+    return points;
+};
+const blob = (options) => resampleByAngle(denseBlobOutline(options));
+const band = (options) => {
+    const { from, to, bend, thickness, endShare = 1 } = options;
+    const chordX = to[0] - from[0];
+    const chordY = to[1] - from[1];
+    const chordLength = Math.hypot(chordX, chordY);
+    // the quadratic's control point sits twice as far out as the curve's middle
+    const control = [
+        (from[0] + to[0]) / 2 + ((2 * bend * chordY) / chordLength),
+        (from[1] + to[1]) / 2 - ((2 * bend * chordX) / chordLength),
+    ];
+    const pointAt = (along) => {
+        const rest = 1 - along;
+        return [
+            rest * rest * from[0] + 2 * rest * along * control[0] + along * along * to[0],
+            rest * rest * from[1] + 2 * rest * along * control[1] + along * along * to[1],
+        ];
+    };
+    const tangentAt = (along) => {
+        const tangentX = 2 * (1 - along) * (control[0] - from[0]) + 2 * along * (to[0] - control[0]);
+        const tangentY = 2 * (1 - along) * (control[1] - from[1]) + 2 * along * (to[1] - control[1]);
+        const length = Math.hypot(tangentX, tangentY);
+        return [tangentX / length, tangentY / length];
+    };
+    const thicknessAt = (along) => thickness * (endShare + (1 - endShare) * Math.sin(Math.PI * along));
+    // side 1 = the upper edge (the left normal of a rightward curve), -1 = the lower edge
+    const edge = (along, side) => {
+        const [x, y] = pointAt(along);
+        const [tangentX, tangentY] = tangentAt(along);
+        const offset = (side * thicknessAt(along)) / 2;
+        return [x + tangentY * offset, y - tangentX * offset];
+    };
+    // a point on the half circle around an end: turn -90° = on the upper edge, 0 = the tip, 90° = on the lower edge
+    const capPoint = (along, turn) => {
+        const [x, y] = pointAt(along);
+        const [tangentX, tangentY] = tangentAt(along);
+        const radius = thicknessAt(along) / 2;
+        const outward = along === 1 ? 1 : -1;
+        const alongTangent = outward * Math.cos(turn) * radius;
+        const towardsLower = outward * Math.sin(turn) * radius;
+        return [x + tangentX * alongTangent - tangentY * towardsLower, y + tangentY * alongTangent + tangentX * towardsLower];
+    };
+    // clockwise from the top middle at the same angles as a blob's points (a quarter = the right end, half = the bottom
+    // middle, three quarters = the left end); the points within 30° of an end lie on its half circle, the rest along the
+    // edges
+    const capShare = Math.sin(Math.PI / 3);
+    return Array.from({ length: OUTLINE_POINTS }, (_, index) => {
+        const angle = (2 * Math.PI * index) / OUTLINE_POINTS;
+        const sine = Math.sin(angle);
+        if (Math.abs(sine) < capShare - 1e-9)
+            return edge(0.5 + (0.5 * sine) / capShare, Math.cos(angle) > 0 ? 1 : -1);
+        // the angle's distance past the cap's start, stretched from ±30° around the end to ±90° around the half circle
+        const endAngle = sine > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
+        return capPoint(sine > 0 ? 1 : 0, (angle - endAngle) * 3);
+    });
+};
+/** A piece that isn't there: every point on one spot (draws nothing). */
+const hidden = (at) => Array.from({ length: OUTLINE_POINTS }, () => [at[0], at[1]]);
+/** The piece mirrored onto the other half of the face, still clockwise from the top. */
+const mirrored = (points) => points.map((_, index) => {
+    const [x, y] = points[(OUTLINE_POINTS - index) % OUTLINE_POINTS];
+    return [24 - x, y];
+});
+/** A face from its left half (as seen) + the mouth. */
+const symmetricFace = ({ brow, eye, pupil, mouth }) => ({
+    leftBrow: brow,
+    rightBrow: mirrored(brow),
+    leftEye: eye,
+    rightEye: mirrored(eye),
+    leftPupil: pupil,
+    rightPupil: mirrored(pupil),
+    mouth,
+});
+/** The whole face mirrored: left and right pieces swap sides. */
+const mirroredFace = (face) => ({
+    leftBrow: mirrored(face.rightBrow),
+    rightBrow: mirrored(face.leftBrow),
+    leftEye: mirrored(face.rightEye),
+    rightEye: mirrored(face.leftEye),
+    leftPupil: mirrored(face.rightPupil),
+    rightPupil: mirrored(face.leftPupil),
+    mouth: mirrored(face.mouth),
+});
+// ---- the expressions (names from the user's pictures) ----
+const faceExpressionNames = [
+    'normal',
+    'smiling',
+    'pleading',
+    'wonder',
+    'focused',
+    'fright',
+    'angry',
+    'asleep',
+    'sad',
+    'surprised',
+    'laughing',
+    'tired',
+    'wink-left',
+    'wink-right',
+    'suspicious',
+    'confused',
+    'smug',
+    'irritated',
+    'bored',
+    'curious',
+    'empathetic',
+    'guilty',
+    'worried',
+    'disappointed',
+    'ashamed',
+    'embarrassed',
+    'yearning',
+    'triumphant',
+    'proud',
+    'excited',
+    'scornful',
+    'disgusted',
+];
+const buildFaceExpressions = () => {
+    const winkRight = {
+        ...symmetricFace({
+            brow: blob({ centre: [6.2, 4.4], width: 5.2, height: 1.9, squareness: 0.5, rotation: -6 }),
+            eye: blob({ centre: [6.4, 12], width: 8.4, height: 8.4 }),
+            pupil: blob({ centre: [7, 11.4], width: 3.2, height: 3.2 }),
+            mouth: band({ from: [9.6, 18.4], to: [14.8, 18], bend: -0.9, thickness: 1.2, endShare: 0.7 }),
+        }),
+        rightBrow: mirrored(blob({ centre: [6.2, 6], width: 5, height: 1.8, squareness: 0.5, rotation: 8 })),
+        rightEye: mirrored(band({ from: [3.2, 12.8], to: [9.6, 12.8], bend: 1.4, thickness: 1.6, endShare: 0.7 })),
+        rightPupil: hidden([17.6, 12]),
+    };
+    return {
+        normal: symmetricFace({
+            brow: blob({ centre: [6.2, 4.6], width: 5.2, height: 1.9, squareness: 0.5, rotation: -6 }),
+            eye: blob({ centre: [6.4, 12], width: 8.4, height: 8.4 }),
+            pupil: blob({ centre: [7, 10.7], width: 3.2, height: 3.2 }),
+            mouth: blob({ centre: [12, 18.8], width: 4.4, height: 1.8, squareness: 0.6 }),
+        }),
+        smiling: symmetricFace({
+            brow: blob({ centre: [6, 5.4], width: 5, height: 4.4, squareness: 0.2, cutBottom: [5.4, 5.4] }),
+            eye: blob({ centre: [6, 13], width: 9.2, height: 7.6 }),
+            pupil: blob({ centre: [6.8, 13.6], width: 3.6, height: 2.4 }),
+            mouth: band({ from: [9, 18.4], to: [15, 18.4], bend: -1, thickness: 1.3, endShare: 0.7 }),
+        }),
+        pleading: symmetricFace({
+            brow: blob({ centre: [6.6, 3.7], width: 4.6, height: 2, squareness: 0.5, rotation: -16 }),
+            eye: blob({ centre: [6.8, 12.4], width: 8.6, height: 9.6, topScale: 0.75, rotation: 12 }),
+            pupil: blob({ centre: [7.6, 10.7], width: 4, height: 4 }),
+            mouth: blob({ centre: [12, 17.6], width: 4.3, height: 4.8, squareness: 0.3, cutTop: [17.6, 17.6] }),
+        }),
+        wonder: symmetricFace({
+            brow: band({ from: [3.4, 4.8], to: [8.6, 3.3], bend: 0.7, thickness: 1.7 }),
+            eye: blob({ centre: [6.4, 12], width: 7.8, height: 9.6 }),
+            pupil: blob({ centre: [6.8, 11.2], width: 3.2, height: 4.2 }),
+            mouth: blob({ centre: [12, 18.6], width: 3.8, height: 1, squareness: 0.6 }),
+        }),
+        focused: symmetricFace({
+            brow: blob({ centre: [6, 4.4], width: 5.6, height: 2.2, squareness: 0.55, rotation: 3 }),
+            eye: blob({ centre: [6.2, 12.8], width: 9, height: 8, cutTop: [10, 11] }),
+            pupil: blob({ centre: [6.8, 13.2], width: 3.8, height: 2.8 }),
+            mouth: blob({ centre: [12, 18.8], width: 4.2, height: 1, squareness: 0.6 }),
+        }),
+        fright: symmetricFace({
+            brow: blob({ centre: [5.7, 3.5], width: 4.8, height: 2.2, squareness: 0.45, rotation: -8 }),
+            eye: blob({ centre: [6.2, 12.4], width: 8.4, height: 9.8, topScale: 0.7, rotation: 8 }),
+            pupil: blob({ centre: [7.2, 12], width: 3.6, height: 4.2 }),
+            mouth: blob({ centre: [12, 18.6], width: 3.8, height: 1.4, squareness: 0.5 }),
+        }),
+        angry: symmetricFace({
+            brow: blob({ centre: [6.4, 5.4], width: 5.2, height: 2, squareness: 0.5, rotation: 12 }),
+            eye: blob({ centre: [6.2, 12.6], width: 8.6, height: 8, cutTop: [9.2, 12] }),
+            pupil: blob({ centre: [7.4, 12.8], width: 3.4, height: 3.4 }),
+            mouth: blob({ centre: [12, 17.8], width: 4.2, height: 4, squareness: 0.3, cutTop: [17.8, 17.8] }),
+        }),
+        asleep: symmetricFace({
+            brow: blob({ centre: [6, 5.4], width: 4, height: 1.7, squareness: 0.4, rotation: 4 }),
+            eye: band({ from: [3, 12.4], to: [9.6, 12.4], bend: -1.2, thickness: 1.5, endShare: 0.6 }),
+            pupil: hidden([6.3, 13.4]),
+            mouth: blob({ centre: [12, 18.8], width: 2.6, height: 1.8 }),
+        }),
+        // more feelings, Claude's drafts (no pictures); the one-sided ones replace pieces of the right half — written in place
+        // (a blob or band is already clockwise from its top) or drawn on the left and mirrored
+        sad: symmetricFace({
+            brow: blob({ centre: [6.4, 5.2], width: 4.8, height: 1.9, squareness: 0.5, rotation: -18 }),
+            eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 8, cutTop: [11.2, 9.6] }),
+            pupil: blob({ centre: [6.8, 13.8], width: 3.2, height: 3.4 }),
+            mouth: band({ from: [9.4, 19.2], to: [14.6, 19.2], bend: 0.9, thickness: 1.2, endShare: 0.7 }),
+        }),
+        surprised: symmetricFace({
+            brow: band({ from: [3.6, 3.6], to: [8.6, 2.8], bend: 0.6, thickness: 1.6 }),
+            eye: blob({ centre: [6.4, 12], width: 8.6, height: 9 }),
+            pupil: blob({ centre: [6.4, 12], width: 2.4, height: 2.4 }),
+            mouth: blob({ centre: [12, 19], width: 2.8, height: 3.4 }),
+        }),
+        laughing: symmetricFace({
+            brow: blob({ centre: [6, 4.6], width: 5, height: 4.4, squareness: 0.2, cutBottom: [4.6, 4.6] }),
+            eye: band({ from: [3.2, 13], to: [9.6, 13], bend: 1.6, thickness: 1.6, endShare: 0.7 }),
+            pupil: hidden([6.4, 12]),
+            mouth: blob({ centre: [12, 17], width: 6, height: 6, squareness: 0.2, cutTop: [17, 17] }),
+        }),
+        tired: symmetricFace({
+            brow: blob({ centre: [6, 6], width: 5, height: 1.7, squareness: 0.5, rotation: -4 }),
+            eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.6, 11.6] }),
+            pupil: blob({ centre: [6.6, 13.6], width: 3.2, height: 3.2 }),
+            mouth: blob({ centre: [12, 19], width: 3.2, height: 0.9, squareness: 0.6 }),
+        }),
+        // wink-left / wink-right = the eye that closes, as seen; one is the other mirrored
+        'wink-left': mirroredFace(winkRight),
+        'wink-right': winkRight,
+        suspicious: {
+            ...symmetricFace({
+                brow: band({ from: [3.4, 4], to: [8.8, 3], bend: 0.8, thickness: 1.6 }),
+                eye: blob({ centre: [6.4, 12.6], width: 8.6, height: 7.6, cutTop: [10.8, 10.8] }),
+                pupil: blob({ centre: [4.6, 13.2], width: 3.2, height: 3 }),
+                mouth: blob({ centre: [12.6, 18.8], width: 3.6, height: 1, squareness: 0.6, rotation: -10 }),
+            }),
+            rightBrow: mirrored(blob({ centre: [6.4, 6.4], width: 5.2, height: 1.8, squareness: 0.5, rotation: 10 })),
+            rightEye: mirrored(blob({ centre: [6.4, 12.8], width: 8.6, height: 7.2, cutTop: [11.8, 11.8] })),
+            rightPupil: blob({ centre: [16.2, 13.4], width: 3.2, height: 3 }),
+        },
+        confused: {
+            ...symmetricFace({
+                brow: band({ from: [3.4, 3.8], to: [8.6, 2.6], bend: 0.7, thickness: 1.6 }),
+                eye: blob({ centre: [6.4, 12], width: 8.6, height: 9 }),
+                pupil: blob({ centre: [7.6, 10.6], width: 3, height: 3 }),
+                mouth: blob({ centre: [12.4, 19], width: 3.8, height: 1.1, squareness: 0.5, rotation: 12 }),
+            }),
+            rightBrow: mirrored(blob({ centre: [6.2, 5.8], width: 5, height: 1.8, squareness: 0.5, rotation: 10 })),
+            rightEye: mirrored(blob({ centre: [6.4, 12.6], width: 7.4, height: 7.4 })),
+            rightPupil: blob({ centre: [18.4, 11.4], width: 2.8, height: 2.8 }),
+        },
+        // the user's list of feelings (2026-11-01), Claude's drafts; the ones the set had already are skipped
+        smug: {
+            ...symmetricFace({
+                brow: blob({ centre: [6.2, 5], width: 5, height: 1.8, squareness: 0.5, rotation: -4 }),
+                eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.4, 11.4] }),
+                pupil: blob({ centre: [8, 13.4], width: 3, height: 3 }),
+                mouth: band({ from: [10.2, 18.8], to: [15.2, 17.6], bend: -0.6, thickness: 1.2, endShare: 0.6 }),
+            }),
+            rightBrow: mirrored(band({ from: [3.6, 4.2], to: [8.6, 3.4], bend: 0.6, thickness: 1.6 })),
+            rightPupil: blob({ centre: [19.4, 13.4], width: 3, height: 3 }),
+        },
+        irritated: symmetricFace({
+            brow: blob({ centre: [6.4, 5.8], width: 5.4, height: 1.8, squareness: 0.55, rotation: 6 }),
+            eye: blob({ centre: [6.4, 12.8], width: 8.6, height: 7.6, cutTop: [11.2, 11.8], cutBottom: [15.8, 15.8] }),
+            pupil: blob({ centre: [6.8, 13.6], width: 3.2, height: 3 }),
+            mouth: blob({ centre: [12.4, 18.8], width: 3.6, height: 0.9, squareness: 0.6, rotation: -8 }),
+        }),
+        bored: {
+            ...symmetricFace({
+                brow: blob({ centre: [6, 6.2], width: 5, height: 1.7, squareness: 0.5 }),
+                eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.8, 11.8] }),
+                pupil: blob({ centre: [8, 12.8], width: 3, height: 3 }),
+                mouth: blob({ centre: [13.4, 19], width: 3, height: 0.9, squareness: 0.6 }),
+            }),
+            rightPupil: blob({ centre: [19.4, 12.8], width: 3, height: 3 }),
+        },
+        curious: {
+            ...symmetricFace({
+                brow: band({ from: [3.4, 3.6], to: [8.6, 2.6], bend: 0.7, thickness: 1.6 }),
+                eye: blob({ centre: [6.4, 12], width: 8.6, height: 8.8 }),
+                pupil: blob({ centre: [7.8, 10.8], width: 3.2, height: 3.2 }),
+                mouth: blob({ centre: [12.6, 18.8], width: 2, height: 2.2 }),
+            }),
+            rightBrow: mirrored(blob({ centre: [6.2, 5.2], width: 5, height: 1.8, squareness: 0.5, rotation: 4 })),
+            rightPupil: blob({ centre: [19, 10.8], width: 3.2, height: 3.2 }),
+        },
+        empathetic: symmetricFace({
+            brow: blob({ centre: [6.4, 4.8], width: 5, height: 1.9, squareness: 0.5, rotation: -10 }),
+            eye: blob({ centre: [6.4, 12.4], width: 8.4, height: 8, cutTop: [10, 9.2] }),
+            pupil: blob({ centre: [6.8, 13], width: 3.4, height: 3.4 }),
+            mouth: band({ from: [10, 18.6], to: [14, 18.6], bend: -0.5, thickness: 1.1, endShare: 0.7 }),
+        }),
+        guilty: {
+            ...symmetricFace({
+                brow: blob({ centre: [6.4, 5], width: 4.6, height: 1.8, squareness: 0.5, rotation: -14 }),
+                eye: blob({ centre: [6.4, 12.6], width: 8.2, height: 8, cutTop: [10.6, 10.2] }),
+                pupil: blob({ centre: [5, 14.4], width: 3, height: 3 }),
+                mouth: blob({ centre: [11.4, 19], width: 2.8, height: 0.9, squareness: 0.6, rotation: 6 }),
+            }),
+            rightPupil: blob({ centre: [16.2, 14.4], width: 3, height: 3 }),
+        },
+        worried: symmetricFace({
+            brow: blob({ centre: [6.6, 4.2], width: 4.8, height: 1.9, squareness: 0.5, rotation: -20 }),
+            eye: blob({ centre: [6.4, 12.2], width: 8, height: 8.8, topScale: 0.85, rotation: 6 }),
+            pupil: blob({ centre: [6.8, 12.4], width: 2.6, height: 2.8 }),
+            mouth: band({ from: [10.2, 19], to: [13.8, 19], bend: 0.6, thickness: 1.1, endShare: 0.7 }),
+        }),
+        disappointed: symmetricFace({
+            brow: blob({ centre: [6.2, 5.6], width: 5, height: 1.8, squareness: 0.5, rotation: -8 }),
+            eye: blob({ centre: [6.4, 12.8], width: 8.4, height: 7.6, cutTop: [11.8, 11] }),
+            pupil: blob({ centre: [6.6, 14.4], width: 3, height: 3 }),
+            mouth: band({ from: [9.6, 19.2], to: [14.4, 19.2], bend: 0.4, thickness: 1.1, endShare: 0.8 }),
+        }),
+        ashamed: symmetricFace({
+            brow: blob({ centre: [6.4, 5.6], width: 4.6, height: 1.8, squareness: 0.5, rotation: -16 }),
+            eye: blob({ centre: [6.4, 13], width: 8.2, height: 7.6, cutTop: [12.2, 12.2] }),
+            pupil: blob({ centre: [6.4, 15], width: 3, height: 2.6 }),
+            mouth: blob({ centre: [12, 19.4], width: 2.4, height: 0.9, squareness: 0.6 }),
+        }),
+        embarrassed: {
+            ...symmetricFace({
+                brow: blob({ centre: [6.2, 4.8], width: 4.8, height: 1.8, squareness: 0.5, rotation: -12 }),
+                eye: blob({ centre: [6.4, 12.4], width: 8.2, height: 8.2 }),
+                pupil: blob({ centre: [4.4, 13.6], width: 3, height: 3 }),
+                mouth: band({ from: [9.8, 18.8], to: [14.2, 18.6], bend: -0.5, thickness: 1.1, endShare: 0.7 }),
+            }),
+            rightPupil: blob({ centre: [15.8, 13.6], width: 3, height: 3 }),
+        },
+        yearning: symmetricFace({
+            brow: blob({ centre: [6.2, 4], width: 4.8, height: 1.8, squareness: 0.5, rotation: -10 }),
+            eye: blob({ centre: [6.4, 12.6], width: 8.6, height: 8, cutTop: [11, 11] }),
+            pupil: blob({ centre: [6.8, 13.6], width: 4.2, height: 4.2 }),
+            mouth: blob({ centre: [12, 18.8], width: 2.6, height: 1.6 }),
+        }),
+        triumphant: symmetricFace({
+            brow: blob({ centre: [6.2, 4], width: 5.2, height: 2, squareness: 0.5, rotation: 8 }),
+            eye: blob({ centre: [6.4, 11.8], width: 8.6, height: 8.6, cutBottom: [14, 14] }),
+            pupil: blob({ centre: [6.8, 11.6], width: 3.4, height: 3.4 }),
+            mouth: blob({ centre: [12, 16.8], width: 7, height: 6.4, squareness: 0.3, cutTop: [16.8, 16.8] }),
+        }),
+        proud: symmetricFace({
+            brow: blob({ centre: [6.2, 3.8], width: 5, height: 1.9, squareness: 0.5, rotation: -4 }),
+            eye: blob({ centre: [6.4, 12.4], width: 8.6, height: 8, cutTop: [11, 11] }),
+            pupil: blob({ centre: [6.6, 13.6], width: 3.2, height: 3 }),
+            mouth: band({ from: [8.8, 18], to: [15.2, 18], bend: -1.2, thickness: 1.3, endShare: 0.7 }),
+        }),
+        excited: symmetricFace({
+            brow: band({ from: [3.4, 3.6], to: [8.6, 2.8], bend: 0.8, thickness: 1.6 }),
+            eye: blob({ centre: [6.4, 12], width: 9, height: 9.2 }),
+            pupil: blob({ centre: [7, 11], width: 4, height: 4 }),
+            mouth: blob({ centre: [12, 16.8], width: 6, height: 6, squareness: 0.2, cutTop: [16.8, 16.8] }),
+        }),
+        scornful: {
+            ...symmetricFace({
+                brow: blob({ centre: [6.2, 5.4], width: 5, height: 1.8, squareness: 0.5, rotation: 2 }),
+                eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.4, 11.4] }),
+                pupil: blob({ centre: [5.4, 14], width: 3, height: 3 }),
+                mouth: band({ from: [9.2, 18.8], to: [14.6, 18], bend: -0.2, thickness: 1.1, endShare: 0.7 }),
+            }),
+            rightBrow: mirrored(band({ from: [3.6, 4], to: [8.6, 3.2], bend: 0.6, thickness: 1.6 })),
+            rightPupil: blob({ centre: [16.6, 14], width: 3, height: 3 }),
+        },
+        disgusted: symmetricFace({
+            brow: blob({ centre: [6.6, 6], width: 5, height: 1.8, squareness: 0.5, rotation: 14 }),
+            eye: blob({ centre: [6.4, 12.6], width: 8.4, height: 7.6, cutTop: [11.4, 12.2], cutBottom: [14.8, 14.8] }),
+            pupil: blob({ centre: [6.8, 13.2], width: 3, height: 2.8 }),
+            // an upside-down "D": open, corners pulled down
+            mouth: blob({ centre: [12, 19.6], width: 5, height: 4.8, squareness: 0.2, cutBottom: [19.6, 19.6] }),
+        }),
+    };
+};
+let builtExpressions = null;
+/** Every expression's pieces, built on first use (nothing runs at import). */
+const faceExpressionPieces = () => (builtExpressions ??= buildFaceExpressions());
+// ---- morphing and drawing ----
+const interpolatePoints = (from, to, progress) => from.map(([fromX, fromY], index) => [fromX + (to[index][0] - fromX) * progress, fromY + (to[index][1] - fromY) * progress]);
+const interpolateFace = (from, to, progress) => Object.fromEntries(PIECE_NAMES.map((name) => [name, interpolatePoints(from[name], to[name], progress)]));
+const boxCentre = (points) => {
+    const xs = points.map(([x]) => x);
+    const ys = points.map(([, y]) => y);
+    return [(Math.min(...xs) + Math.max(...xs)) / 2, (Math.min(...ys) + Math.max(...ys)) / 2];
+};
+/** The face with its eyes partly closed: openness 1 = as drawn, 0 = shut to a flat slit (pupils gone). */
+const blinked = (face, openness) => {
+    if (openness >= 1)
+        return face;
+    const eyeScale = 0.25 + 0.75 * openness;
+    const squash = (points, middleY) => points.map(([x, y]) => [x, middleY + (y - middleY) * eyeScale]);
+    const shrink = (points, [centreX, centreY]) => points.map(([x, y]) => [centreX + (x - centreX) * openness, centreY + (y - centreY) * openness]);
+    const leftMiddle = boxCentre(face.leftEye)[1];
+    const rightMiddle = boxCentre(face.rightEye)[1];
+    return {
+        ...face,
+        leftEye: squash(face.leftEye, leftMiddle),
+        rightEye: squash(face.rightEye, rightMiddle),
+        leftPupil: squash(shrink(face.leftPupil, boxCentre(face.leftPupil)), leftMiddle),
+        rightPupil: squash(shrink(face.rightPupil, boxCentre(face.rightPupil)), rightMiddle),
+    };
+};
+const formatNumber = (value) => String(Math.round(value * 1000) / 1000);
+/** A smooth closed curve through the points: each handle points along the neighbours' chord and is a third of its own
+ * segment long (no loops where points sit close together, as at a band's round end). Empty for a hidden piece. */
+const smoothClosedPath = (points) => {
+    const [firstX, firstY] = points[0];
+    if (points.every(([x, y]) => Math.abs(x - firstX) < 1e-6 && Math.abs(y - firstY) < 1e-6))
+        return '';
+    const count = points.length;
+    const directionAt = (index) => {
+        const previous = points[(index - 1 + count) % count];
+        const next = points[(index + 1) % count];
+        const length = Math.hypot(next[0] - previous[0], next[1] - previous[1]) || 1;
+        return [(next[0] - previous[0]) / length, (next[1] - previous[1]) / length];
+    };
+    let path = `M${formatNumber(firstX)} ${formatNumber(firstY)}`;
+    for (let index = 0; index < count; index++) {
+        const start = points[index];
+        const end = points[(index + 1) % count];
+        const handleLength = Math.hypot(end[0] - start[0], end[1] - start[1]) / 3;
+        const startDirection = directionAt(index);
+        const endDirection = directionAt(index + 1);
+        const control1 = [start[0] + startDirection[0] * handleLength, start[1] + startDirection[1] * handleLength];
+        const control2 = [end[0] - endDirection[0] * handleLength, end[1] - endDirection[1] * handleLength];
+        path += `C${[...control1, ...control2, ...end].map(formatNumber).join(' ')}`;
+    }
+    return `${path}Z`;
+};
+const facePaths = (face) => ({
+    features: [face.leftBrow, face.rightBrow, face.leftEye, face.rightEye, face.mouth].map(smoothClosedPath).join(''),
+    eyes: [face.leftEye, face.rightEye].map(smoothClosedPath).join(''),
+    pupils: [face.leftPupil, face.rightPupil].map(smoothClosedPath).join(''),
+});
+return { OUTLINE_POINTS, PIECE_NAMES, faceExpressionNames, faceExpressionPieces, interpolateFace, blinked, smoothClosedPath, facePaths };
+})();
+
+// face.ts
+const { face } = (() => {
+// Layer 4: a face that morphs between feelings. 7 soft filled pieces (sets/faces.ts) — brows, eyes and mouth in the
+// CSS color, the pupils in their own color and clipped to the eyes. Blinking runs on top of any expression, by itself
+// every few seconds (option) or on blink().
+const BLINK_CLOSING = 90;
+const BLINK_SHUT = 50;
+const BLINK_OPENING = 150;
+const AUTO_BLINK_MIN_PAUSE = 2500;
+const AUTO_BLINK_EXTRA_PAUSE = 3500;
+const DEFAULT_FACE_DURATION = DEFAULT_DURATION + 100;
+/** Expressions whose eyes are already shut: blinking does nothing. */
+const EYES_SHUT = ['asleep', 'laughing'];
+let faceCount = 0;
+const checkedExpression = (state) => {
+    if (!faceExpressionNames.includes(state))
+        throw new Error(`morphico: face() has no expression "${state}"`);
+    return state;
+};
+const resolveEasing = (easing) => (typeof easing === 'function' ? easing : easings[easing ?? 'easeInOutCubic']);
+/** Adds a morphing face (an <svg>) to `element`. */
+const face = (element, options = {}) => {
+    const { state: firstState = 'normal', pupilColor = 'white', blink: blinksByItself = true, size = '100%', ...defaultMorphOptions } = options;
+    const expressions = faceExpressionPieces();
+    let state = checkedExpression(firstState);
+    let shownPieces = expressions[state];
+    let openness = 1;
+    const clipId = `morphico-face-${++faceCount}`;
+    const svg = createSvgElement('svg', { viewBox: '0 0 24 24', fill: 'currentColor', role: 'img' });
+    svg.style.width = size;
+    svg.style.height = size;
+    svg.style.overflow = 'visible';
+    const clipPath = svg.appendChild(createSvgElement('clipPath', { id: clipId }));
+    const eyesPath = clipPath.appendChild(createSvgElement('path'));
+    const featuresPath = svg.appendChild(createSvgElement('path'));
+    const pupilsPath = svg.appendChild(createSvgElement('path', { fill: pupilColor, 'clip-path': `url(#${clipId})` }));
+    const render = () => {
+        const paths = facePaths(blinked(shownPieces, openness));
+        featuresPath.setAttribute('d', paths.features);
+        eyesPath.setAttribute('d', paths.eyes);
+        pupilsPath.setAttribute('d', paths.pupils);
+    };
+    const updateLabel = () => svg.setAttribute('aria-label', state);
+    render();
+    updateLabel();
+    element.appendChild(svg);
+    // ---- morphing ----
+    let morph = null;
+    const endMorph = (interrupted) => {
+        if (!morph)
+            return;
+        const { stopAnimation, resolve, state: morphState } = morph;
+        morph = null;
+        stopAnimation();
+        resolve({ state: morphState, interrupted });
+    };
+    const morphTo = (nextState, morphOptions) => {
+        endMorph(true);
+        state = nextState;
+        updateLabel();
+        const fromPieces = shownPieces;
+        const toPieces = expressions[nextState];
+        const duration = morphOptions.duration ?? DEFAULT_FACE_DURATION;
+        if (prefersReducedMotion() || duration <= 0) {
+            shownPieces = toPieces;
+            render();
+            return Promise.resolve({ state: nextState, interrupted: false });
+        }
+        const easing = resolveEasing(morphOptions.easing);
+        let startTime = null;
+        return new Promise((resolve) => {
+            const stopAnimation = animate((frameTime) => {
+                startTime ??= frameTime;
+                const progress = Math.min((frameTime - startTime) / duration, 1);
+                shownPieces = interpolateFace(fromPieces, toPieces, easing(progress));
+                render();
+                if (progress < 1)
+                    return true;
+                endMorph(false);
+                return false;
+            });
+            morph = { stopAnimation, resolve, state: nextState };
+        });
+    };
+    // ---- blinking ----
+    let stopBlink = null;
+    let finishBlink = null;
+    const endBlink = () => {
+        stopBlink?.();
+        stopBlink = null;
+        if (openness < 1) {
+            openness = 1;
+            render();
+        }
+        finishBlink?.();
+        finishBlink = null;
+    };
+    const blink = () => {
+        if (EYES_SHUT.includes(state) || prefersReducedMotion())
+            return Promise.resolve();
+        endBlink();
+        let startTime = null;
+        return new Promise((resolve) => {
+            finishBlink = resolve;
+            stopBlink = animate((frameTime) => {
+                startTime ??= frameTime;
+                const elapsed = frameTime - startTime;
+                if (elapsed < BLINK_CLOSING)
+                    openness = 1 - elapsed / BLINK_CLOSING;
+                else if (elapsed < BLINK_CLOSING + BLINK_SHUT)
+                    openness = 0;
+                else
+                    openness = Math.min((elapsed - BLINK_CLOSING - BLINK_SHUT) / BLINK_OPENING, 1);
+                render();
+                if (openness < 1 || elapsed < BLINK_CLOSING)
+                    return true;
+                stopBlink = null;
+                finishBlink = null;
+                resolve();
+                return false;
+            });
+        });
+    };
+    let autoBlinkTimer;
+    const scheduleAutoBlink = () => {
+        autoBlinkTimer = setTimeout(() => {
+            if (typeof document === 'undefined' || !document.hidden)
+                void blink();
+            scheduleAutoBlink();
+        }, AUTO_BLINK_MIN_PAUSE + Math.random() * AUTO_BLINK_EXTRA_PAUSE);
+    };
+    if (blinksByItself && !prefersReducedMotion())
+        scheduleAutoBlink();
+    return {
+        get state() { return state; },
+        to(nextState, { onEnd, ...morphOptions } = {}) {
+            const result = morphTo(checkedExpression(nextState), { ...defaultMorphOptions, ...morphOptions });
+            if (onEnd)
+                result.then(onEnd);
+            return result;
+        },
+        blink,
+        destroy() {
+            clearTimeout(autoBlinkTimer);
+            endMorph(true);
+            endBlink();
+            svg.remove();
+        },
+    };
+};
+return { face };
+})();
+
 // icon.ts
 const { icon } = (() => {
 // Layer 1: one icon that morphs between the states of a set, e.g. a single digit.
@@ -3294,7 +4639,7 @@ return { text };
 // index.ts
 // morphico public API.
 /** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
-const version = '0.2.0';
+const version = '0.4.0';
 
-return { easings, icon, iconSets, text, version };
+return { clip, easings, face, icon, iconSets, faceExpressionNames, text, version };
 })();