morphico 0.3.0 → 0.5.0

package/dist/types/{iconSets.d.ts → all.d.ts}

@@ -24,5 +24,3 @@ export declare const iconSets: {
     battery: IconSet;
 };
 export type IconSetName = keyof typeof iconSets;
-/** 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/clip.d.ts

@@ -23,33 +23,28 @@ export interface ClipChanges {
     roundness?: number;
     /** `false` (default) = the whole shape shows; an outline = only a band along its edge (not animated). */
     outline?: false | ClipOutline;
+    /** `true` = the other way round: the shape (or band) is a hole, the rest of the element shows (not animated). */
+    inverted?: boolean;
 }
 export interface ClipOptions extends ClipChanges, MorphOptions {
     /** The shape set (default: the built-in shapes, based on Lucide). */
     set?: IconSet;
-    /** The shape shown first (default `'circle'`). */
-    state?: string;
 }
 export interface ClipChangeOptions extends ClipChanges, MorphOptions {
     /** Called when the change ends, with the same result the promise resolves to. */
     onEnd?: (result: MorphResult) => void;
 }
 export interface Clip {
-    /** The shape shown, or being morphed to. */
-    readonly state: string;
     /**
      * Morphs to the shape `state` and animates the given changes along (move, resize, turn, roundness), or — called with
      * only an object — animates those changes and keeps the shape. The promise resolves when it ends; an interrupted
-     * change resolves with `interrupted: true`. Without animation when the user prefers reduced motion.
+     * change resolves with `interrupted: true`. Without animation when the user prefers reduced motion; `duration: 0`
+     * jumps (e.g. while a slider is dragged).
      */
     to(state: string, options?: ClipChangeOptions): Promise<MorphResult>;
     to(changes: ClipChangeOptions): Promise<MorphResult>;
-    /** Jumps (no animation), e.g. while a slider is dragged. Stops a running change (it resolves as interrupted). */
-    set(changes: ClipChanges & {
-        state?: string;
-    }): void;
     /** Stops, removes the hidden <svg> and gives the element back its own clip-path / mask. */
     destroy(): void;
 }
-/** Cuts `element` out by a morphing shape. */
-export declare const clip: (element: HTMLElement | SVGElement, options?: ClipOptions) => Clip;
+/** Cuts `element` out by a morphing shape, `init` first. */
+export declare const clip: (element: HTMLElement | SVGElement, init: string, options?: ClipOptions) => Clip;

package/dist/types/face.d.ts

@@ -0,0 +1,27 @@
+import type { MorphOptions, MorphResult } from './morph.js';
+import type { FaceExpression } from './sets/faces.js';
+export interface FaceOptions extends MorphOptions {
+    /** Color of the pupils (default `'white'`). Brows, eyes and mouth take the CSS `color`. */
+    pupilColor?: string;
+    /** Blink by itself every few seconds (default `true`). Off when the user prefers reduced motion. */
+    blink?: boolean;
+    /** CSS width and height of the face (default `'100%'`: it fills the element). */
+    size?: string;
+}
+export interface FaceChangeOptions extends MorphOptions {
+    /** Called when the morph ends, with the same result the promise resolves to. */
+    onEnd?: (result: MorphResult) => void;
+}
+export interface Face {
+    /**
+     * Morphs to another expression. The promise resolves when the morph ends; an interrupted morph resolves with
+     * `interrupted: true`. Without animation when the user prefers reduced motion.
+     */
+    to(state: FaceExpression, options?: FaceChangeOptions): Promise<MorphResult>;
+    /** Closes the eyes and opens them again, on top of the expression (none while asleep or with reduced motion). */
+    blink(): Promise<void>;
+    /** Stops everything and removes the face from the page. */
+    destroy(): void;
+}
+/** Adds a morphing face (an <svg>) to `element`, showing the expression `init` first. */
+export declare const face: (element: Element, init: FaceExpression, options?: FaceOptions) => Face;

package/dist/types/icon.d.ts

@@ -1,14 +1,11 @@
-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, StyleOptions {
-    /** A built-in set by name (default `'round'`) or a set object. */
-    set?: IconSetName | IconSet;
+    /** The set, e.g. `digitsRound` from `'morphico/sets/round'` or `iconsWeather` from `'morphico/sets/weather'`. */
+    set: 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). */
     size?: string;
 }
@@ -17,8 +14,6 @@ export interface ChangeOptions extends MorphOptions {
     onEnd?: (result: MorphResult) => void;
 }
 export interface Icon {
-    /** The state shown, or being morphed to. */
-    readonly state: string;
     /**
      * Morphs to `state` (`'0'`…`'9'`, `'-'`, or `' '` for empty). The promise resolves when the morph ends;
      * an interrupted morph resolves with `interrupted: true`. Without animation when the user prefers reduced motion.
@@ -27,5 +22,5 @@ export interface Icon {
     /** Stops any morph and removes the icon from the page. */
     destroy(): void;
 }
-/** Adds a morphing icon (an <svg>) to `element`. */
-export declare const icon: (element: Element, options?: IconOptions) => Icon;
+/** Adds a morphing icon (an <svg>) to `element`, showing `init` first (`''` or `' '` = empty). */
+export declare const icon: (element: Element, init: string, options: IconOptions) => Icon;

package/dist/types/index.d.ts

@@ -1,15 +1,17 @@
 export { clip } from './clip.js';
 export { easings } from './engine.js';
+export { face } from './face.js';
 export { icon } from './icon.js';
-export { iconSets } from './iconSets.js';
+export { faceExpressionNames } from './sets/faces.js';
 export { text } from './text.js';
 export type { Clip, ClipChangeOptions, ClipChanges, ClipOptions, ClipOutline, Length } from './clip.js';
 export type { Easing } from './engine.js';
+export type { Face, FaceChangeOptions, FaceOptions } from './face.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 { FaceExpression } from './sets/faces.js';
 export type { StyleOptions } from './svg.js';
-export type { SetOptions, Text, TextOptions, TextResult } from './text.js';
+export type { Text, TextChangeOptions, TextOptions, TextResult } from './text.js';
 export type { IconSet, TextLayout } from './types.js';
 /** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
 export declare const version: string;

package/dist/types/roundness.d.ts

@@ -0,0 +1,8 @@
+import type { IconSet } from './types.js';
+/** The set, optionally with sharper corners (`roundness` 0 = sharp … 1 = its own). */
+export declare const resolveIconSet: (iconSet: IconSet, roundness?: number) => IconSet;
+/** The `set` option checked: a set object (names like `'weather'` were accepted before 0.5.0 — say what to do now). */
+export declare const checkedIconSet: (set: unknown, functionName: string) => IconSet;
+/** 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 declare const checkedInit: (init: unknown, functionName: string) => string;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import type { Point } from '../types.js';
+export declare const OUTLINE_POINTS = 24;
+export declare const PIECE_NAMES: readonly ['leftBrow', 'rightBrow', 'leftEye', 'rightEye', 'leftPupil', 'rightPupil', 'mouth'];
+type PieceName = typeof PIECE_NAMES[number];
+/** One expression: the outline points of every piece. */
+export type FacePieces = Record<PieceName, Point[]>;
+export declare const faceExpressionNames: readonly ['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'];
+export type FaceExpression = typeof faceExpressionNames[number];
+/** Every expression's pieces, built on first use (nothing runs at import). */
+export declare const faceExpressionPieces: () => Record<FaceExpression, FacePieces>;
+export declare const interpolateFace: (from: FacePieces, to: FacePieces, progress: number) => FacePieces;
+/** The face with its eyes partly closed: openness 1 = as drawn, 0 = shut to a flat slit (pupils gone). */
+export declare const blinked: (face: FacePieces, openness: number) => FacePieces;
+/** 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. */
+export declare const smoothClosedPath: (points: Point[]) => string;
+export interface FacePaths {
+    /** Brows, eyes and mouth (one colour). */
+    features: string;
+    /** Both eyes, to clip the pupils with. */
+    eyes: string;
+    pupils: string;
+}
+export declare const facePaths: (face: FacePieces) => FacePaths;
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/types/text.d.ts

@@ -1,12 +1,9 @@
-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, StyleOptions {
-    /** A built-in set by name (default `'round'`) or a set object. */
-    set?: IconSetName | IconSet;
-    /** The text shown first (default: empty). */
-    value?: string;
+    /** A digit set, e.g. `digitsRound` from `'morphico/sets/round'`. */
+    set: IconSet;
     /** CSS height of the line (default `'1em'`: it follows the font size). */
     size?: string;
     /** Width of a digit cell in grid units, where a digit is 16 high (default: the set's own). */
@@ -17,25 +14,23 @@ export interface TextOptions extends MorphOptions, StyleOptions {
 export interface TextResult {
     /** The text the change was heading to. */
     value: string;
-    /** `true` when a newer `set()` (or `destroy()`) took over before every digit finished. */
+    /** `true` when a newer `to()` (or `destroy()`) took over before every digit finished. */
     interrupted: boolean;
 }
-export interface SetOptions extends MorphOptions {
+export interface TextChangeOptions extends MorphOptions {
     /** Called when every changed digit has finished, with the same result the promise resolves to. */
     onEnd?: (result: TextResult) => void;
 }
 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 every cell's width stay the same,
+     * Morphs to `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>;
+    to(value: string, options?: TextChangeOptions): Promise<TextResult>;
     /** Stops all morphs and removes the line from the page. */
     destroy(): void;
 }
-/** Adds a line of morphing characters (a <span> of <svg> cells) to `element`. */
-export declare const text: (element: Element, options?: TextOptions) => Text;
+/** Adds a line of morphing characters (a <span> of <svg> cells) to `element`, showing `init` first. */
+export declare const text: (element: Element, init: string, options: TextOptions) => Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphico",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
   "license": "MIT AND ISC",
   "author": "Raycho Ivanov",
@@ -16,10 +16,102 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "default": "./dist/morphico.mjs"
+      "default": "./dist/esm/index.js"
+    },
+    "./all": {
+      "types": "./dist/types/all.d.ts",
+      "default": "./dist/esm/all.js"
+    },
+    "./sets/round": {
+      "types": "./dist/types/sets/round.d.ts",
+      "default": "./dist/esm/sets/round.js"
+    },
+    "./sets/square": {
+      "types": "./dist/types/sets/square.d.ts",
+      "default": "./dist/esm/sets/square.js"
+    },
+    "./sets/condensed": {
+      "types": "./dist/types/sets/condensed.d.ts",
+      "default": "./dist/esm/sets/condensed.js"
+    },
+    "./sets/slim": {
+      "types": "./dist/types/sets/slim.d.ts",
+      "default": "./dist/esm/sets/slim.js"
+    },
+    "./sets/handwritten": {
+      "types": "./dist/types/sets/handwritten.d.ts",
+      "default": "./dist/esm/sets/handwritten.js"
+    },
+    "./sets/media": {
+      "types": "./dist/types/sets/media.d.ts",
+      "default": "./dist/esm/sets/media.js"
+    },
+    "./sets/menu": {
+      "types": "./dist/types/sets/menu.d.ts",
+      "default": "./dist/esm/sets/menu.js"
+    },
+    "./sets/checkbox": {
+      "types": "./dist/types/sets/checkbox.d.ts",
+      "default": "./dist/esm/sets/checkbox.js"
+    },
+    "./sets/radio": {
+      "types": "./dist/types/sets/radio.d.ts",
+      "default": "./dist/esm/sets/radio.js"
+    },
+    "./sets/folder": {
+      "types": "./dist/types/sets/folder.d.ts",
+      "default": "./dist/esm/sets/folder.js"
+    },
+    "./sets/theme": {
+      "types": "./dist/types/sets/theme.d.ts",
+      "default": "./dist/esm/sets/theme.js"
+    },
+    "./sets/weather": {
+      "types": "./dist/types/sets/weather.d.ts",
+      "default": "./dist/esm/sets/weather.js"
+    },
+    "./sets/eye": {
+      "types": "./dist/types/sets/eye.d.ts",
+      "default": "./dist/esm/sets/eye.js"
+    },
+    "./sets/volume": {
+      "types": "./dist/types/sets/volume.d.ts",
+      "default": "./dist/esm/sets/volume.js"
+    },
+    "./sets/toggle": {
+      "types": "./dist/types/sets/toggle.d.ts",
+      "default": "./dist/esm/sets/toggle.js"
+    },
+    "./sets/lock": {
+      "types": "./dist/types/sets/lock.d.ts",
+      "default": "./dist/esm/sets/lock.js"
+    },
+    "./sets/bell": {
+      "types": "./dist/types/sets/bell.d.ts",
+      "default": "./dist/esm/sets/bell.js"
+    },
+    "./sets/mic": {
+      "types": "./dist/types/sets/mic.d.ts",
+      "default": "./dist/esm/sets/mic.js"
+    },
+    "./sets/chevron": {
+      "types": "./dist/types/sets/chevron.d.ts",
+      "default": "./dist/esm/sets/chevron.js"
+    },
+    "./sets/copy": {
+      "types": "./dist/types/sets/copy.d.ts",
+      "default": "./dist/esm/sets/copy.js"
+    },
+    "./sets/wifi": {
+      "types": "./dist/types/sets/wifi.d.ts",
+      "default": "./dist/esm/sets/wifi.js"
+    },
+    "./sets/battery": {
+      "types": "./dist/types/sets/battery.d.ts",
+      "default": "./dist/esm/sets/battery.js"
     }
   },
-  "module": "./dist/morphico.mjs",
+  "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "jsdelivr": "./dist/morphico.js",
   "unpkg": "./dist/morphico.js",