morphico 0.1.0 → 0.2.0

package/dist/types/geometry.d.ts

@@ -1,8 +1,10 @@
-import type { CubicSegment, IconSet, PairLayout, PathNumbers, Point, Stroke } from './types.js';
+import type { CubicSegment, IconSet, PairLayout, PathNumbers, PieceSet, Point, Stroke } from './types.js';
 export declare const line: (fromX: number, fromY: number, toX: number, toY: number) => Stroke;
 /** Angles in degrees. Because y points down, `endAngle > startAngle` draws clockwise on screen. */
 export declare const arc: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => Stroke;
 export declare const cubic: (startX: number, startY: number, control1X: number, control1Y: number, control2X: number, control2Y: number, endX: number, endY: number) => Stroke;
+/** The same line or arc, drawn in the opposite direction. */
+export declare const reversedStroke: (stroke: Stroke) => Stroke;
 export declare const pointOnCircle: (centerX: number, centerY: number, radius: number, angle: number) => Point;
 /** A full ellipse as four cubic quarters, drawn counter-clockwise on screen, starting at the top. */
 export declare const ellipse: (centerX: number, centerY: number, radiusX: number, radiusY: number) => Stroke[];
@@ -12,14 +14,25 @@ export declare const ellipse: (centerX: number, centerY: number, radiusX: number
  * Straight-through points and reversals (going back along the same line) always stay sharp.
  */
 export declare const roundedPolyline: (points: Point[], radii: number | number[]) => Stroke[];
+/**
+ * A closed polygon with every corner rounded by `radius` (clamped per corner so neighbouring arcs never overlap).
+ * Always a line and an arc per corner, whatever the radius, so pair layouts (stroke indices) stay valid; at radius 0
+ * the arc shrinks to the corner point, so the corner is really sharp (and `stroke-linejoin` decides how it looks).
+ * Starts after the first corner with a line (`startsWithArc`: with the arc of the first corner), clockwise if the
+ * corners are listed clockwise on screen.
+ */
+export declare const roundedPolygon: (corners: Point[], radius: number, startsWithArc?: boolean) => Stroke[];
 export declare const segmentCountOf: (path: PathNumbers) => number;
 export declare const toSegments: (path: PathNumbers) => CubicSegment[];
 export declare const fromSegments: (segments: CubicSegment[]) => PathNumbers;
 /** Same picture, different segment order: start a closed loop at another segment and/or draw it backwards. */
 export declare const reorderSegments: (path: PathNumbers, { startSegment, reversed }?: PairLayout) => PathNumbers;
 export declare const interpolate: (from: PathNumbers, to: PathNumbers, progress: number) => PathNumbers;
-/** SVG `d` attribute: `M x y` followed by one `C` per segment. */
-export declare const toPathData: (path: PathNumbers) => string;
+/**
+ * SVG `d` attribute: per piece `M x y` followed by one `C` per segment (`pieceLength`: see pieceLengthOf).
+ * Pieces shrunk to a single point are left out.
+ */
+export declare const toPathData: (path: PathNumbers, pieceLength?: number) => string;
 /** Shrinks (factor < 1) or grows the whole shape around the icon center (12, 12). */
 export declare const scaleAroundCenter: (path: PathNumbers, factor: number) => PathNumbers;
 /** Rotates the whole shape around the icon center (12, 12). */
@@ -34,7 +47,49 @@ export declare const strokePiece: (stroke: Stroke, startProgress: number, endPro
 export declare const layoutStrokes: (strokes: Stroke[], breakpoints: number[]) => PathNumbers;
 /** Default breakpoints: segments spread over the strokes by length, arcs get at least one segment per 90°. */
 export declare const defaultBreakpoints: (strokes: Stroke[], segmentCount: number) => number[];
+/** The set itself is the first piece. */
+export declare const piecesOf: (iconSet: IconSet) => PieceSet[];
+/** Path numbers of one piece: start point + 6 per segment. */
+export declare const pieceLengthOf: (iconSet: IconSet) => number;
+/** Splits a shape into the path numbers of its pieces. */
+export declare const splitPieces: (path: PathNumbers, pieceLength: number) => PathNumbers[];
 /** Every state of the set laid out with its default breakpoints. */
 export declare const defaultShapes: (iconSet: IconSet) => Record<string, PathNumbers>;
-/** The shape of `state` laid out for morphing to or from `otherState`. */
+/**
+ * `shape` pressed flat onto the straight line `from` → `to`: every point moves onto the line, keeping its position
+ * along the line's direction (the shape's extent along it is stretched to the line's length).
+ */
+export declare const flattenOntoLine: (shape: PathNumbers, from: Point, to: Point) => PathNumbers;
+/** The shape of `state` laid out for morphing to or from `otherState` (each piece by its own pair layout). */
 export declare const shapeForPair: (iconSet: IconSet, shapes: Record<string, PathNumbers>, state: string, otherState: string) => PathNumbers;
+/** The first `fraction` (0…1) of a piece along its length, as if a pen had drawn that far. */
+export declare const trimPiece: (piece: PathNumbers, fraction: number) => PathNumbers;
+/**
+ * The x range a morph's wipe edge moves through: the box (x 2…22), or — if a piece slides in — from the box's side
+ * to that piece's leading side at rest, so the edge rides at its front and it starts just outside the box.
+ */
+export declare const wipeRange: (slidingPiece: PathNumbers | null, direction: 'left' | 'right') => [number, number];
+/**
+ * A piece behind a vertical edge (PairLayout.wipe): at `fraction` 0…1 of the wipe, the edge has moved that far
+ * through `edgeRange` in `direction`, and only the part it has passed shows. That part must be one stretch of the
+ * path. `slides` (PairLayout.slide): the piece moves with the edge from outside the box; only its part inside shows.
+ */
+export declare const wipePiece: (piece: PathNumbers, fraction: number, direction: 'left' | 'right', edgeRange?: [number, number], slides?: boolean) => PathNumbers;
+/** A piece drawn along its path during a morph: drawn in (it appears) or erased (it goes). */
+export interface DrawnPiece {
+    pieceIndex: number;
+    drawsIn: boolean;
+    /** When the drawing in happens: from `start` to `end` of the morph (0…1); erasing runs it in reverse. */
+    start: number;
+    end: number;
+    /** Revealed behind a moving edge instead of along its path (PairLayout.wipe), moving with it (PairLayout.slide). */
+    wipe?: 'left' | 'right';
+    slide?: boolean;
+}
+/** The pieces drawn (or erased) along their path when morphing `state` → `otherState` (PairLayout.draw). */
+export declare const drawnPieces: (iconSet: IconSet, state: string, otherState: string) => DrawnPiece[];
+/**
+ * A frame of a morph `from` → `to` at `progress` with the drawn pieces replaced: drawn in from the start along
+ * `to`'s piece, or erased back along `from`'s piece.
+ */
+export declare const withDrawnPieces: (frame: PathNumbers, from: PathNumbers, to: PathNumbers, progress: number, pieceLength: number, drawn: DrawnPiece[]) => PathNumbers;

package/dist/types/icon.d.ts

@@ -1,9 +1,12 @@
 import type { IconSetName } from './iconSets.js';
 import type { MorphOptions, MorphResult } from './morph.js';
+import type { StyleOptions } from './svg.js';
 import type { IconSet } from './types.js';
-export interface IconOptions extends MorphOptions {
+export interface IconOptions extends MorphOptions, StyleOptions {
     /** A built-in set by name (default `'round'`) or a set object. */
     set?: IconSetName | IconSet;
+    /** Corner roundness: 0 = sharp … 1 = the icon's own corners (default, also the maximum). Icon sets only. */
+    roundness?: number;
     /** The state shown first (default: empty, `' '`). */
     state?: string;
     /** CSS width and height of the icon (default `'1em'`: it follows the font size). */

package/dist/types/iconSets.d.ts

@@ -5,7 +5,24 @@ export declare const iconSets: {
     condensed: IconSet;
     slim: IconSet;
     handwritten: IconSet;
+    media: IconSet;
+    menu: IconSet;
+    checkbox: IconSet;
+    radio: IconSet;
+    folder: IconSet;
+    theme: IconSet;
+    weather: IconSet;
+    eye: IconSet;
+    volume: IconSet;
+    toggle: IconSet;
+    lock: IconSet;
+    bell: IconSet;
+    mic: IconSet;
+    chevron: IconSet;
+    copy: IconSet;
+    wifi: IconSet;
+    battery: IconSet;
 };
 export type IconSetName = keyof typeof iconSets;
-/** A set given by name or as a set object. */
-export declare const resolveIconSet: (set?: IconSetName | IconSet) => IconSet;
+/** A set given by name or as a set object, optionally with sharper corners (`roundness` 0 = sharp … 1 = own). */
+export declare const resolveIconSet: (set?: IconSetName | IconSet, roundness?: number) => IconSet;

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ export type { Easing } from './engine.js';
 export type { ChangeOptions, Icon, IconOptions } from './icon.js';
 export type { IconSetName } from './iconSets.js';
 export type { EasingName, MorphOptions, MorphResult } from './morph.js';
+export type { StyleOptions } from './svg.js';
 export type { SetOptions, Text, TextOptions, TextResult } from './text.js';
 export type { IconSet, TextLayout } from './types.js';
 /** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */

package/dist/types/sets/battery.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const batteryIcons: IconSet;

package/dist/types/sets/bell.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const bellIcons: IconSet;

package/dist/types/sets/characters.d.ts

@@ -0,0 +1,5 @@
+import type { IconSet, TextLayout } from '../types.js';
+/** Adds `-` `/` `.` `,` `:` to a digit set (which needs a text layout) as morphing states. */
+export declare const withTextCharacters: (iconSet: IconSet & {
+    textLayout: TextLayout;
+}) => IconSet;

package/dist/types/sets/check-mark.d.ts

@@ -0,0 +1,7 @@
+import type { PieceSet, Point } from '../types.js';
+/**
+ * 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 declare const checkMarkPiece: (hiddenAt: Point) => PieceSet;

package/dist/types/sets/checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const checkboxIcons: IconSet;

package/dist/types/sets/chevron.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const chevronIcons: IconSet;

package/dist/types/sets/copy.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const copyIcons: IconSet;

package/dist/types/sets/eye.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const eyeIcons: IconSet;

package/dist/types/sets/folder.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const folderIcons: IconSet;

package/dist/types/sets/lock.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const lockIcons: IconSet;

package/dist/types/sets/lucide.d.ts

@@ -0,0 +1,18 @@
+import type { Point, Stroke } from '../types.js';
+export declare const LUCIDE_SCALE: number;
+/** Lucide's 2-unit line, scaled with the icon. */
+export declare const LUCIDE_STROKE_WIDTH: number;
+/** A point (or corner) of a Lucide icon moved into our icon box. */
+export declare const fromLucide: ([x, y]: Point) => Point;
+/** A length of a Lucide icon (e.g. a corner radius) in our icon box. */
+export declare const lucideLength: (length: number) => number;
+/** A straight line between two Lucide points. */
+export declare const lucideLine: (fromX: number, fromY: number, toX: number, toY: number) => Stroke;
+/** A circular arc in Lucide coordinates (angles in degrees, `endAngle > startAngle` = clockwise on screen). */
+export declare const lucideArc: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => Stroke;
+/** A cubic Bézier curve in Lucide coordinates. */
+export declare const lucideCubic: (...coordinates: [number, number, number, number, number, number, number, number]) => Stroke;
+/** A missing piece at rest: a single point, never drawn (see toPathData). */
+export declare const lucidePoint: (x: number, y: number) => Stroke[];
+/** The diagonal slash of Lucide's "-off" icons, from the top left. */
+export declare const LUCIDE_SLASH: Stroke[];

package/dist/types/sets/media.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const mediaIcons: IconSet;

package/dist/types/sets/menu.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const menuIcons: IconSet;

package/dist/types/sets/mic.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const micIcons: IconSet;

package/dist/types/sets/radio.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const radioIcons: IconSet;

package/dist/types/sets/theme.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const themeIcons: IconSet;

package/dist/types/sets/toggle.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const toggleIcons: IconSet;

package/dist/types/sets/volume.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const volumeIcons: IconSet;

package/dist/types/sets/weather.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const weatherIcons: IconSet;

package/dist/types/sets/wifi.d.ts

@@ -0,0 +1,2 @@
+import type { IconSet } from '../types.js';
+export declare const wifiIcons: IconSet;

package/dist/types/svg.d.ts

@@ -1,4 +1,24 @@
 import type { IconSet } from './types.js';
+/** How the lines are drawn. Every option defaults to the set's own look. */
+export interface StyleOptions {
+    /**
+     * Line width. A number is in grid units (an icon is 24 × 24; Lucide-based sets use 16/18 · 2 ≈ 1.78) and scales with the icon;
+     * a CSS length (`'2px'`, `'0.1rem'`, `'0.08em'`) stays that wide whatever the icon's size.
+     */
+    strokeWidth?: number | string;
+    /** Line ends: `'round'`, `'butt'` (flat, ends exactly at the line's end) or `'square'` (flat, half a width longer). */
+    lineCap?: IconSet['lineCap'];
+    /** Corners where lines meet: `'round'`, `'miter'` (sharp) or `'bevel'` (cut off). */
+    lineJoin?: IconSet['lineJoin'];
+    /** `true` fills closed shapes with the CSS `color` too; a CSS color fills them with that color. */
+    fill?: boolean | string;
+}
+/** A CSS length as stroke width: drawn at that width on screen instead of scaling with the icon. */
+export declare const hasFixedStrokeWidth: (style: StyleOptions) => style is StyleOptions & {
+    strokeWidth: string;
+};
 export declare const createSvgElement: <TagName extends keyof SVGElementTagNameMap>(tagName: TagName, attributes?: Record<string, string | number>) => SVGElementTagNameMap[TagName];
-/** An <svg> drawn in the set's stroke style, coloured by the CSS `color` (currentColor). */
-export declare const createIconSvg: (iconSet: IconSet, viewBox: string) => SVGSVGElement;
+/** An <svg> drawn in the set's stroke style (or the given style), colored by the CSS `color` (currentColor). */
+export declare const createIconSvg: (iconSet: IconSet, viewBox: string, style?: StyleOptions) => SVGSVGElement;
+/** A stroked child element (path, circle); with a fixed (CSS length) stroke width its line doesn't scale. */
+export declare const createStrokedElement: <TagName extends 'path' | 'circle'>(tagName: TagName, style: StyleOptions, attributes?: Record<string, string | number>) => SVGElementTagNameMap[TagName];

package/dist/types/text.d.ts

@@ -1,7 +1,8 @@
 import type { IconSetName } from './iconSets.js';
 import type { MorphOptions } from './morph.js';
+import type { StyleOptions } from './svg.js';
 import type { IconSet } from './types.js';
-export interface TextOptions extends MorphOptions {
+export interface TextOptions extends MorphOptions, StyleOptions {
     /** A built-in set by name (default `'round'`) or a set object. */
     set?: IconSetName | IconSet;
     /** The text shown first (default: empty). */
@@ -27,9 +28,10 @@ export interface Text {
     /** The text shown, or being morphed to (after unsupported characters were removed). */
     readonly value: string;
     /**
-     * Shows `value`. Unsupported characters are removed first. If the length and the places of `:` `.` `,` `/`
-     * stay the same, only the changed digits morph; otherwise the line is rebuilt without animation
-     * (pad with spaces, e.g. `String(count).padStart(3, ' ')`, to keep counters morphing).
+     * Shows `value`. Unsupported characters are removed first. If the length and every cell's width stay the same,
+     * the changed characters morph; otherwise the line is rebuilt without animation. Cells: digits, space and `-` are
+     * one width, `:` `.` `,` half of it, `/` 0.7 of it — so `5` ↔ `-` or `.` ↔ `,` morph, `5` ↔ `:` rebuilds.
+     * Pad with spaces (e.g. `String(count).padStart(3, ' ')`) to keep counters morphing.
      */
     set(value: string, options?: SetOptions): Promise<TextResult>;
     /** Stops all morphs and removes the line from the page. */

package/dist/types/types.d.ts

@@ -47,6 +47,34 @@ export interface PairLayout {
     tracing?: string;
     /** Rotate by this many degrees around the icon center (only for shapes that look the same turned). */
     rotation?: number;
+    /**
+     * For states drawn as one straight line (`-`, `/`, a dot): lay the line out as the other state pressed flat onto
+     * it (every point keeps its position along the line), so the morph flattens the other shape onto the line.
+     * The other side keeps its own layout for this pair. Overrides every option above.
+     */
+    flatten?: boolean;
+    /**
+     * The piece is not there in this state: during the morph the other state's piece is drawn along its own path,
+     * like a pen writing it (erased back the same way in reverse). Overrides every option above.
+     * A number (0…1) is the share of the morph the drawing takes: erasing happens at its start, drawing in at its end.
+     * `[start, end]` (0…1): drawing in happens between these points of the morph (e.g. to stagger several pieces);
+     * erasing runs the same in reverse (between `1 - end` and `1 - start`).
+     */
+    draw?: boolean | number | [start: number, end: number];
+    /**
+     * Like `draw`, but the piece is revealed behind a vertical edge moving across the icon box (x 2…22) in this
+     * direction instead of along its path (hidden the same way in reverse). Every wiped piece of a morph uses the same
+     * edge, so a cloud can cover a sun as it moves in. Timing from `draw` if given (else the whole morph).
+     * The piece's visible part must be one stretch of its path: lay it out to start where the edge reaches it last.
+     */
+    wipe?: 'left' | 'right';
+    /**
+     * With `wipe`: the piece moves in with the edge instead of standing still — it slides in from just outside the
+     * box's side (x 2 or 22; the part outside the box is not shown), its leading side riding at the edge, so it covers
+     * what the edge wipes away (a cloud crawling over the sun). Other sliding pieces of the morph move along with the
+     * first one (rain with its cloud).
+     */
+    slide?: boolean;
 }
 /** How a set's characters sit in the narrow cells of `text()`. Numbers are in grid units (digits are 16 high). */
 export interface TextLayout {
@@ -59,21 +87,36 @@ export interface TextLayout {
     /** y of the two dots of `:` (the centres of the 8's loops). */
     colonDotsY: [top: number, bottom: number];
 }
-export interface IconSet {
-    /** Cubic segments per shape. The state that needs the most segments decides it. */
-    segmentCount: number;
-    strokeWidth: number;
-    /** SVG `stroke-linecap`: flat (`butt`) or rounded line ends. */
-    lineCap: 'butt' | 'round' | 'square';
-    /** SVG `stroke-linejoin`: sharp (`miter`) or rounded corners. */
-    lineJoin: 'miter' | 'round' | 'bevel';
+/** One piece of every state: a continuous line per state, plus the tuning of its morphs. */
+export interface PieceSet {
     /** The strokes of each state, as one continuous line in drawing order. */
     strokes: Record<string, Stroke[]>;
     /** Alternative tracings: the same picture (with round joins) drawn in a different order. */
     alternativeStrokes: Record<string, Stroke[]>;
     /** `pairLayouts[state][otherState]`: how to lay out `state` when morphing to or from `otherState`. */
     pairLayouts: Record<string, Record<string, PairLayout>>;
+}
+/**
+ * A family of states that morph into each other. The set itself is the first piece of every state;
+ * `morePieces` adds further pieces for icons drawn in several parts (e.g. pause = two bars).
+ */
+export interface IconSet extends PieceSet {
+    /** Cubic segments per piece. The state that needs the most segments decides it. */
+    segmentCount: number;
+    strokeWidth: number;
+    /** SVG `stroke-linecap`: flat (`butt`) or rounded line ends. */
+    lineCap: 'butt' | 'round' | 'square';
+    /** SVG `stroke-linejoin`: sharp (`miter`) or rounded corners. */
+    lineJoin: 'miter' | 'round' | 'bevel';
+    /**
+     * Further pieces, drawn together with the first one. Every state needs strokes in every piece:
+     * a state made of fewer parts repeats one of them (drawn on top of itself, so it doesn't show).
+     */
+    morePieces?: PieceSet[];
     /** `spins[fromState][toState]`: degrees to rotate around the icon center while morphing. */
     spins: Record<string, Record<string, number>>;
-    textLayout: TextLayout;
+    /** Only sets that `text()` can use (digits). */
+    textLayout?: TextLayout;
+    /** Sets built from rounded corners: the same set with every corner radius times `roundness` (0 = sharp, 1 = own). */
+    withRoundness?: (roundness: number) => IconSet;
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "morphico",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
-  "license": "MIT",
+  "license": "MIT AND ISC",
   "author": "Raycho Ivanov",
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
   "jsdelivr": "./dist/morphico.js",
   "unpkg": "./dist/morphico.js",
   "files": [
-    "dist"
+    "dist",
+    "LICENSE-lucide"
   ],
   "sideEffects": false,
   "scripts": {