morphico 0.3.0 → 0.4.0

package/dist/types/clip.d.ts

@@ -23,6 +23,8 @@ 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). */

package/dist/types/face.d.ts

@@ -0,0 +1,31 @@
+import type { MorphOptions, MorphResult } from './morph.js';
+import type { FaceExpression } from './sets/faces.js';
+export interface FaceOptions extends MorphOptions {
+    /** The expression shown first (default `'normal'`). */
+    state?: FaceExpression;
+    /** 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 {
+    /** The expression shown, or being morphed to. */
+    readonly state: FaceExpression;
+    /**
+     * 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`. */
+export declare const face: (element: Element, options?: FaceOptions) => Face;

package/dist/types/index.d.ts

@@ -1,13 +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 { IconSet, TextLayout } from './types.js';

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphico",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
   "license": "MIT AND ISC",
   "author": "Raycho Ivanov",