morphico 0.3.0 → 0.5.0

package/dist/esm/index.js

@@ -0,0 +1,50 @@
+/*! morphico v0.5.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.
+ */
+// morphico public API.
+export { clip } from './clip.js';
+export { easings } from './engine.js';
+export { face } from './face.js';
+export { icon } from './icon.js';
+export { faceExpressionNames } from './sets/faces.js';
+export { text } from './text.js';
+/** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
+export const version = '0.5.0';

package/dist/esm/morph.js

@@ -0,0 +1,107 @@
+/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
+// One SVG <path> that morphs between the states of an icon set. Shared by icon() and every text() cell.
+import { animate, easings } from './engine.js';
+import { defaultShapes, drawnPieces, interpolate, pieceLengthOf, rotateAroundCenter, scaleAroundCenter, shapeForPair, toPathData, withDrawnPieces, } from './geometry.js';
+/** The empty state: nothing is drawn. Shapes grow out of it and shrink into it while fading. */
+export const EMPTY_STATE = ' ';
+/** How small a shape gets while it fades into (or out of) the empty state. */
+const EMPTY_SCALE = 0.3;
+export const DEFAULT_DURATION = 400;
+// default layouts of every state, computed once per set on first use (nothing runs at import)
+const shapesBySet = new WeakMap();
+export const shapesOf = (iconSet) => {
+    let shapes = shapesBySet.get(iconSet);
+    if (!shapes) {
+        shapes = defaultShapes(iconSet);
+        shapesBySet.set(iconSet, shapes);
+    }
+    return shapes;
+};
+export const hasState = (iconSet, state) => state === EMPTY_STATE || state in iconSet.strokes;
+export const prefersReducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+/** Blends towards the target in the start's frame while turning that frame by spin · progress. */
+const blend = (from, to, progress, spin) => (spin
+    ? rotateAroundCenter(interpolate(from, rotateAroundCenter(to, -spin), progress), spin * progress)
+    : interpolate(from, to, progress));
+export const clampToUnit = (value) => Math.min(Math.max(value, 0), 1);
+export const createMorphingPath = (pathElement, iconSet, initialState) => {
+    const shapes = shapesOf(iconSet);
+    const pieceLength = pieceLengthOf(iconSet);
+    let state = initialState;
+    let currentPath = null; // null while empty
+    let currentOpacity = 0;
+    let running = null;
+    const render = (path, opacity) => {
+        currentPath = path;
+        currentOpacity = path ? clampToUnit(opacity) : 0;
+        if (path)
+            pathElement.setAttribute('d', toPathData(path, pieceLength));
+        else
+            pathElement.removeAttribute('d');
+        if (currentOpacity < 1)
+            pathElement.setAttribute('opacity', String(+currentOpacity.toFixed(3)));
+        else
+            pathElement.removeAttribute('opacity');
+    };
+    /** Ends the running morph and resolves everyone waiting for it. */
+    const finish = (interrupted) => {
+        if (!running)
+            return;
+        const { stopAnimation, resolvers } = running;
+        running = null;
+        stopAnimation();
+        for (const resolve of resolvers)
+            resolve({ state, interrupted });
+    };
+    render(state === EMPTY_STATE ? null : shapes[state], 1);
+    return {
+        get state() { return state; },
+        morphTo(nextState, { duration = DEFAULT_DURATION, easing = 'easeInOutCubic' } = {}) {
+            // asked again for the state it is already heading to: wait for the running morph
+            if (running && nextState === state) {
+                const { resolvers } = running;
+                return new Promise((resolve) => { resolvers.push(resolve); });
+            }
+            const settled = !running;
+            if (settled && nextState === state)
+                return Promise.resolve({ state, interrupted: false });
+            finish(true);
+            const previousState = state;
+            state = nextState;
+            // settled: both sides use the pair's layouts; interrupted: start from the shape on screen
+            const target = nextState === EMPTY_STATE ? null
+                : previousState === EMPTY_STATE ? shapes[nextState] : shapeForPair(iconSet, shapes, nextState, previousState);
+            const start = !settled ? currentPath
+                : previousState === EMPTY_STATE ? null : shapeForPair(iconSet, shapes, previousState, nextState);
+            const startOpacity = currentOpacity;
+            const endOpacity = target ? 1 : 0;
+            if ((!start && !target) || duration <= 0 || prefersReducedMotion()) {
+                render(target, endOpacity);
+                return Promise.resolve({ state, interrupted: false });
+            }
+            const from = start ?? scaleAroundCenter(target, EMPTY_SCALE);
+            const to = target ?? scaleAroundCenter(start, EMPTY_SCALE);
+            const spin = (settled && iconSet.spins[previousState]?.[nextState]) || 0;
+            // pieces that appear or go are drawn along their path (only from a settled shape, between two real states)
+            const drawn = settled && start && target ? drawnPieces(iconSet, previousState, nextState) : [];
+            const ease = typeof easing === 'function' ? easing : easings[easing];
+            const startTime = performance.now();
+            return new Promise((resolve) => {
+                const stopAnimation = animate((frameTime) => {
+                    const progress = clampToUnit((frameTime - startTime) / duration);
+                    if (progress < 1) {
+                        const easedProgress = ease(progress);
+                        const frame = withDrawnPieces(blend(from, to, easedProgress, spin), from, to, easedProgress, pieceLength, drawn);
+                        render(frame, startOpacity + (endOpacity - startOpacity) * easedProgress);
+                        return true;
+                    }
+                    render(target, endOpacity);
+                    finish(false);
+                    return false;
+                });
+                running = { stopAnimation, resolvers: [resolve] };
+            });
+        },
+        stop: () => finish(true),
+    };
+};

package/dist/esm/roundness.js

@@ -0,0 +1,37 @@
+/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
+const setsByRoundness = new WeakMap();
+/** The set, optionally with sharper corners (`roundness` 0 = sharp … 1 = its own). */
+export const resolveIconSet = (iconSet, roundness) => {
+    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;
+};
+/** The `set` option checked: a set object (names like `'weather'` were accepted before 0.5.0 — say what to do now). */
+export const checkedIconSet = (set, functionName) => {
+    if (typeof set === 'string') {
+        const capitalized = `${set.charAt(0).toUpperCase()}${set.slice(1)}`;
+        const exportName = ['round', 'square', 'condensed', 'slim', 'handwritten'].includes(set) ? `digits${capitalized}` : `icons${capitalized}`;
+        throw new Error(`morphico: ${functionName}() takes the set itself, not its name — import it: import { ${exportName} } from 'morphico/sets/${set}'`);
+    }
+    if (!set || typeof set !== 'object' || !('strokes' in set)) {
+        throw new Error(`morphico: ${functionName}() needs a set, e.g. import { digitsRound } from 'morphico/sets/round'`);
+    }
+    return set;
+};
+/** The second argument: what is shown first. Before 0.5.0 the options came second (with the first state inside) — say
+ * so instead of failing somewhere deeper. */
+export const checkedInit = (init, functionName) => {
+    if (typeof init !== 'string') {
+        throw new Error(`morphico: ${functionName}(element, init, options) — what it shows first is the second argument (a string), the options come third (since 0.5.0)`);
+    }
+    return init;
+};

package/dist/esm/sets/battery.js

@@ -0,0 +1,87 @@
+/*! morphico v0.5.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.
+ */
+import { LUCIDE_STROKE_WIDTH, lucideArc, lucideLine, lucidePoint } from './lucide.js';
+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: {},
+});
+export const iconsBattery = {
+    segmentCount: 12,
+    strokeWidth: LUCIDE_STROKE_WIDTH,
+    lineCap: 'round',
+    lineJoin: 'round',
+    ...fixedPiece(BODY),
+    morePieces: [fixedPiece(TERMINAL), ...[0, 1, 2].map(barPiece)],
+    spins: {},
+};

package/dist/esm/sets/bell.js

@@ -0,0 +1,101 @@
+/*! morphico v0.5.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.
+ */
+import { LUCIDE_SLASH, LUCIDE_STROKE_WIDTH, lucideArc, lucideCubic, lucideLine, lucidePoint } from './lucide.js';
+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 } } },
+};
+export const iconsBell = {
+    segmentCount: 12,
+    strokeWidth: LUCIDE_STROKE_WIDTH,
+    lineCap: 'round',
+    lineJoin: 'round',
+    ...clapper,
+    morePieces: [leftPart, rightPart, slash],
+    spins: {},
+};

package/dist/esm/sets/characters.js

@@ -0,0 +1,43 @@
+/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
+// 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).
+import { line } from '../geometry.js';
+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. */
+export 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,
+            }],
+    };
+};

package/dist/esm/sets/check-mark.js

@@ -0,0 +1,74 @@
+/*! morphico v0.5.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.
+ */
+// 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.
+import { line } from '../geometry.js';
+import { fromLucide } from './lucide.js';
+/** 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).
+ */
+export 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 } },
+        },
+    };
+};

package/dist/esm/sets/checkbox.js

@@ -0,0 +1,91 @@
+/*! morphico v0.5.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.
+ */
+// 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.)
+import { line, roundedPolygon } from '../geometry.js';
+import { checkMarkPiece } from './check-mark.js';
+import { fromLucide, LUCIDE_STROKE_WIDTH, lucideLength } from './lucide.js';
+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),
+    };
+};
+export const iconsCheckbox = buildCheckboxIcons(LUCIDE_RADIUS);