morphico 0.3.0 → 0.5.0

package/dist/esm/sets/wifi.js

@@ -0,0 +1,68 @@
+/*! 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 = ['none', 'low', 'medium', 'high'];
+const DOT = [lucideLine(12, 20, 12.01, 20)];
+/** The arcs, small to big, each clockwise from its left end. */
+const ARCS = [
+    [lucideArc(12, 19.9997, 5, -134.427, -45.573)],
+    [lucideArc(12, 20.0004, 10, -134.427, -45.573)],
+    [lucideArc(12, 20.0003, 15, -131.8103, -48.1897)],
+];
+const NO_ARC = lucidePoint(12, 20);
+/** Arc `arcIndex` in each state: itself, else the outermost arc that state has (or a point on the dot). */
+const arcPiece = (arcIndex) => ({
+    strokes: Object.fromEntries(STATES.map((state, level) => [state, level > arcIndex ? ARCS[arcIndex] : level > 0 ? ARCS[level - 1] : NO_ARC])),
+    alternativeStrokes: {},
+    pairLayouts: {},
+});
+export const iconsWifi = {
+    segmentCount: 4,
+    strokeWidth: LUCIDE_STROKE_WIDTH,
+    lineCap: 'round',
+    lineJoin: 'round',
+    strokes: Object.fromEntries(STATES.map((state) => [state, DOT])),
+    alternativeStrokes: {},
+    pairLayouts: {},
+    morePieces: [0, 1, 2].map(arcPiece),
+    spins: {},
+};

package/dist/esm/svg.js

@@ -0,0 +1,31 @@
+/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+/** A CSS length as stroke width: drawn at that width on screen instead of scaling with the icon. */
+export const hasFixedStrokeWidth = (style) => typeof style.strokeWidth === 'string';
+export const createSvgElement = (tagName, attributes = {}) => {
+    const element = document.createElementNS(SVG_NAMESPACE, tagName);
+    for (const [name, value] of Object.entries(attributes))
+        element.setAttribute(name, String(value));
+    return element;
+};
+/** An <svg> drawn in the set's stroke style (or the given style), colored by the CSS `color` (currentColor). */
+export const createIconSvg = (iconSet, viewBox, style = {}) => {
+    const svg = createSvgElement('svg', {
+        viewBox,
+        fill: style.fill === true ? 'currentColor' : style.fill || 'none',
+        stroke: 'currentColor',
+        'stroke-linecap': style.lineCap ?? iconSet.lineCap,
+        'stroke-linejoin': style.lineJoin ?? iconSet.lineJoin,
+    });
+    // a CSS length goes into the style (attributes can't hold rem / em / calc reliably); children inherit it
+    if (hasFixedStrokeWidth(style))
+        svg.style.strokeWidth = style.strokeWidth;
+    else
+        svg.setAttribute('stroke-width', String(style.strokeWidth ?? iconSet.strokeWidth));
+    return svg;
+};
+/** A stroked child element (path, circle); with a fixed (CSS length) stroke width its line doesn't scale. */
+export const createStrokedElement = (tagName, style, attributes = {}) => createSvgElement(tagName, {
+    ...attributes,
+    ...(hasFixedStrokeWidth(style) && { 'vector-effect': 'non-scaling-stroke' }),
+});

package/dist/esm/text.js

@@ -0,0 +1,88 @@
+/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
+// Layer 2: a line of characters (clock, counter, date) in narrow cells; changed digits morph.
+// Every character reuses the 24×24 icon drawing; only the viewBox is narrowed to its cell.
+import { createMorphingPath, hasState } from './morph.js';
+import { checkedIconSet, checkedInit } from './roundness.js';
+import { createIconSvg, createStrokedElement } from './svg.js';
+/** Characters `text()` can show: digits, space, `-` `:` `.` `,` `/` — all of them morph. Anything else is removed. */
+const UNSUPPORTED_CHARACTERS = /[^0-9 :.,\/-]/g;
+/** Vertical part of the 24×24 grid shown in a cell: y 3…21 holds every digit including its stroke. */
+const CELL_TOP = 3;
+const CELL_HEIGHT = 18;
+const formatNumber = (value) => String(+value.toFixed(4));
+/** Adds a line of morphing characters (a <span> of <svg> cells) to `element`, showing `init` first. */
+export const text = (element, init, options) => {
+    const firstValue = checkedInit(init, 'text');
+    const { set, size = '1em', cellWidth, spacing, strokeWidth, lineCap, lineJoin, fill, ...defaultMorphOptions } = options;
+    const style = { strokeWidth, lineCap, lineJoin, fill };
+    const iconSet = checkedIconSet(set, 'text');
+    const { textLayout } = iconSet;
+    if (!textLayout)
+        throw new Error('morphico: text() needs a digit set (this set has no text layout)');
+    const digitCellWidth = cellWidth ?? textLayout.cellWidth;
+    const cellSpacing = spacing ?? textLayout.spacing;
+    const unitWidth = typeof strokeWidth === 'number' ? strokeWidth : iconSet.strokeWidth; // a CSS length: about the set's own
+    const inkBottom = textLayout.baselineY + unitWidth / 2;
+    const line = document.createElement('span');
+    line.setAttribute('role', 'img');
+    line.style.whiteSpace = 'nowrap';
+    element.appendChild(line);
+    let cells = [];
+    let value = '';
+    const widthOf = (character) => {
+        if (character === '/')
+            return digitCellWidth * 0.7;
+        return ':.,'.includes(character) ? digitCellWidth / 2 : digitCellWidth;
+    };
+    /** CSS length: `units` grid units at the line's size. */
+    const scaled = (units) => `calc(${size} * ${formatNumber(units / CELL_HEIGHT)})`;
+    const createCell = (character, index) => {
+        const width = widthOf(character);
+        const svg = createIconSvg(iconSet, `${formatNumber(12 - width / 2)} ${CELL_TOP} ${formatNumber(width)} ${CELL_HEIGHT}`, style);
+        svg.setAttribute('aria-hidden', 'true');
+        Object.assign(svg.style, {
+            width: scaled(width),
+            height: size,
+            overflow: 'visible',
+            verticalAlign: scaled(inkBottom - CELL_TOP - CELL_HEIGHT), // digit bottom on the text baseline
+            marginLeft: index ? `var(--morphico-spacing, ${scaled(cellSpacing)})` : '0',
+        });
+        const morphingPath = createMorphingPath(svg.appendChild(createStrokedElement('path', style)), iconSet, character);
+        return { svg, morphingPath, width };
+    };
+    const rebuild = (characters) => {
+        for (const cell of cells)
+            cell.morphingPath.stop();
+        cells = characters.map(createCell);
+        line.replaceChildren(...cells.map((cell) => cell.svg));
+    };
+    const show = (nextValue, { onEnd, ...morphOptions } = {}) => {
+        value = [...nextValue.replace(UNSUPPORTED_CHARACTERS, '')].filter((character) => hasState(iconSet, character)).join('');
+        line.setAttribute('aria-label', value.trim());
+        const characters = [...value];
+        const sameLayout = characters.length === cells.length
+            && characters.every((character, index) => widthOf(character) === cells[index].width);
+        let change;
+        if (sameLayout) {
+            const morphs = cells.map((cell, index) => cell.morphingPath.morphTo(characters[index], { ...defaultMorphOptions, ...morphOptions }));
+            const finishedValue = value;
+            change = Promise.all(morphs).then((results) => ({ value: finishedValue, interrupted: results.some((result) => result.interrupted) }));
+        }
+        else {
+            rebuild(characters);
+            change = Promise.resolve({ value, interrupted: false });
+        }
+        if (onEnd)
+            change.then(onEnd);
+        return change;
+    };
+    show(firstValue);
+    return {
+        to: show,
+        destroy() {
+            for (const cell of cells)
+                cell.morphingPath.stop();
+            line.remove();
+        },
+    };
+};

package/dist/esm/types.js

@@ -0,0 +1,3 @@
+/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
+// Shared types. Coordinates live in the 24×24 icon grid; y points down.
+export {};