weasel-icons 0.1.0 → 0.3.0

package/dist/shared/articulated-icon.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useActionProgress, useBehaviorClock } from "./use-icon-motion.js";
+import { useMotionPreference } from "./use-motion-preference.js";
+import { sampleArticulation } from "./articulation.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+function PartPath({ part, index, pathIndex, rig, }) {
+    const d = useTransform(rig, (sample) => sample[index].paths[pathIndex]);
+    const offset = useTransform(rig, (sample) => (part.traceLength ?? 0) * (1 - sample[index].draw));
+    return (_jsx(motion.path, { d: d, fill: part.surface ? 'var(--weasel-surface, #fff)' : undefined, strokeDasharray: part.traceLength, strokeDashoffset: part.traceLength ? offset : undefined }));
+}
+function Part({ part, index, rig, name, accentColor, strokeWidth, }) {
+    const transform = useTransform(rig, (sample) => sample[index].transform);
+    const opacity = useTransform(rig, (sample) => sample[index].opacity);
+    return (_jsx(motion.g, { "data-layer": `${name}-${part.name}`, "data-part": part.name, transform: transform, opacity: opacity, style: ORIGIN, stroke: part.accent ? accentColor : undefined, strokeWidth: part.detail ? Math.min(strokeWidth * 0.8, 1.5) : undefined, children: part.paths.map((_, i) => (_jsx(PartPath, { part: part, index: index, pathIndex: i, rig: rig }, i))) }));
+}
+/** Shared binding, never a shared drawing or a generic whole-icon animation. */
+export function ArticulatedIcon({ art, states, state = states[0], size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const element = useRef(null);
+    const reduced = useMotionPreference();
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const w0 = usePoseWeight(state === states[0], pace, reduced);
+    const w1 = usePoseWeight(state === states[1], pace, reduced);
+    const w2 = usePoseWeight(state === states[2], pace, reduced);
+    const can0 = useCallback(() => w0.get() < 0.001, [w0]);
+    const can1 = useCallback(() => w1.get() < 0.001, [w1]);
+    const can2 = useCallback(() => w2.get() < 0.001, [w2]);
+    const duration = (index) => Math.max(0.8, ...art.parts.map((part) => part.gestures?.[index]?.duration ?? 0));
+    const e0 = useActionProgress(state === states[0] && art.parts.some((part) => Boolean(part.gestures?.[0])), pace, reduced, duration(0), can0);
+    const e1 = useActionProgress(state === states[1] && art.parts.some((part) => Boolean(part.gestures?.[1])), pace, reduced, duration(1), can1);
+    const e2 = useActionProgress(state === states[2] && art.parts.some((part) => Boolean(part.gestures?.[2])), pace, reduced, duration(2), can2);
+    const activeIndex = states.indexOf(state);
+    const performs = alive &&
+        !reduced &&
+        art.parts.some((part) => {
+            const gesture = part.gestures?.[activeIndex];
+            return (gesture && gesture.loop !== false) || part.spin?.state === activeIndex;
+        });
+    const life = usePoseWeight(performs, pace, reduced);
+    const time = useBehaviorClock(element, performs, pace, life, art.parts.some((part) => Boolean(part.spin)));
+    const rig = useTransform(() => sampleArticulation(art, [w0.get(), w1.get(), w2.get()], time.get(), life.get(), [
+        e0.get(),
+        e1.get(),
+        e2.get(),
+    ]));
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block' }, children: _jsx("g", { "data-layer": `${art.name}-body`, transform: "translate(12 12) scale(.84) translate(-12 -12)", children: art.parts.map((part, index) => (_jsx(Part, { part: part, index: index, rig: rig, name: art.name, accentColor: accentColor, strokeWidth: strokeWidth }, part.name))) }) }));
+}

package/dist/shared/articulation.d.ts

@@ -0,0 +1,62 @@
+/** Numeric articulation only. Subjects, state meanings and artwork stay in their rigs. */
+export interface PartPose {
+    x?: number;
+    y?: number;
+    angle?: number;
+    scaleX?: number;
+    scaleY?: number;
+    opacity?: number;
+    draw?: number;
+    /** Local, authored path displacement; zero retains the accepted drawing. */
+    flex?: number;
+}
+export interface PartGesture {
+    /** Finite entry action; living repeats use the same action followed by a quiet interval. */
+    duration: number;
+    repeatAfter: number;
+    /** A shutter, landing or acknowledgement should play once even when alive stays true. */
+    loop?: boolean;
+    frames: readonly (PartPose & {
+        at: number;
+    })[];
+}
+export interface ArticulatedPart {
+    name: string;
+    paths: readonly string[];
+    /** Compatible command streams with corresponding landmarks; node count never changes. */
+    pathStates?: readonly (readonly string[])[];
+    /** Numeric-coordinate offsets for flex. Fixed landmarks use zero offsets. */
+    pathOffsets?: readonly (readonly number[])[];
+    pivot?: readonly [number, number];
+    /** One pose per public state, in the rig's declared order. */
+    poses: readonly PartPose[];
+    gestures?: readonly (PartGesture | null | undefined)[];
+    accent?: boolean;
+    /** Status details retain room inside a heavier structural outline. */
+    detail?: boolean;
+    surface?: boolean;
+    traceLength?: number;
+    /** Clock phase is retained on pause; it is never multiplied by the living fade. */
+    spin?: {
+        state: number;
+        degreesPerSecond: number;
+    };
+}
+export interface Articulation {
+    name: string;
+    parts: readonly ArticulatedPart[];
+}
+/** Keyframe offsets have zero velocity at authored landmarks and hold outside the action. */
+export declare function gesturePose(gesture: PartGesture, progress: number): PartPose;
+export declare function sampleArticulation(art: Articulation, input: readonly number[], time?: number, living?: number, entries?: readonly number[]): {
+    paths: readonly string[];
+    transform: string;
+    x: number;
+    y: number;
+    angle: number;
+    scaleX: number;
+    scaleY: number;
+    opacity: number;
+    draw: number;
+    flex: number;
+}[];

package/dist/shared/articulation.js

@@ -0,0 +1,85 @@
+const channels = ['x', 'y', 'angle', 'scaleX', 'scaleY', 'opacity', 'draw', 'flex'];
+const defaults = { x: 0, y: 0, angle: 0, scaleX: 1, scaleY: 1, opacity: 1, draw: 1, flex: 0 };
+const finite = (n) => (Number.isFinite(n) ? n : 0);
+const unit = (n) => Math.max(0, Math.min(1, finite(n)));
+const smooth = (n) => {
+    const t = unit(n);
+    return t * t * t * (10 + t * (-15 + 6 * t));
+};
+const morphs = new WeakMap();
+function partPaths(part, weights, flex) {
+    if (!part.pathStates && !part.pathOffsets)
+        return part.paths;
+    let compiled = morphs.get(part);
+    if (!compiled) {
+        const number = /[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/gi;
+        compiled = part.paths.map((_, index) => {
+            const paths = part.pathStates?.map((state) => state[index]) ?? part.poses.map(() => part.paths[index]);
+            const literals = paths[0].split(number);
+            const values = paths.map((path) => (path.match(number) ?? []).map(Number));
+            if (part.pathOffsets && part.pathOffsets[index]?.length !== values[0].length)
+                throw new Error(`Incompatible path offsets: ${part.name}`);
+            for (const path of paths) {
+                if (JSON.stringify(path.split(number)) !== JSON.stringify(literals))
+                    throw new Error(`Incompatible path topology: ${part.name}`);
+            }
+            return { literals, values };
+        });
+        morphs.set(part, compiled);
+    }
+    return compiled.map(({ literals, values }, pathIndex) => literals
+        .map((literal, index) => index === literals.length - 1
+        ? literal
+        : literal +
+            (values.reduce((sum, row, state) => sum + row[index] * (weights[state] ?? 0), 0) +
+                (part.pathOffsets?.[pathIndex]?.[index] ?? 0) * flex))
+        .join(''));
+}
+/** Keyframe offsets have zero velocity at authored landmarks and hold outside the action. */
+export function gesturePose(gesture, progress) {
+    const t = unit(progress);
+    const frames = gesture.frames;
+    const right = frames.findIndex((frame) => frame.at >= t);
+    if (right <= 0)
+        return frames[right < 0 ? frames.length - 1 : 0] ?? {};
+    const a = frames[right - 1], b = frames[right];
+    const blend = smooth((t - a.at) / (b.at - a.at));
+    return Object.fromEntries(channels.map((key) => [key, (a[key] ?? 0) + ((b[key] ?? 0) - (a[key] ?? 0)) * blend]));
+}
+export function sampleArticulation(art, input, time = 0, living = 0, entries = []) {
+    const positive = input.map(unit);
+    const sum = positive.reduce((a, b) => a + b, 0);
+    const weights = sum > 0 ? positive.map((n) => n / sum) : positive.map((_, i) => Number(i === 0));
+    const life = unit(living);
+    return art.parts.map((part) => {
+        const pose = { ...defaults, x: 0, y: 0, angle: 0, scaleX: 0, scaleY: 0, opacity: 0, draw: 0 };
+        part.poses.forEach((target, i) => {
+            const weight = weights[i] ?? 0;
+            if (weight === 0)
+                return;
+            const gesture = part.gestures?.[i];
+            const entry = gesture ? gesturePose(gesture, entries[i] ?? 1) : {};
+            // Phase is independent of the living fade. Turning alive off cannot rewind an action.
+            const loop = gesture
+                ? gesturePose(gesture, Math.min((Math.max(0, finite(time)) % gesture.repeatAfter) / gesture.duration, 1))
+                : {};
+            for (const key of channels) {
+                pose[key] +=
+                    weight *
+                        ((target[key] ?? defaults[key]) +
+                            (entry[key] ?? 0) * (gesture?.loop === false ? 1 : 1 - life) +
+                            (loop[key] ?? 0) * (gesture?.loop === false ? 0 : life));
+            }
+        });
+        pose.opacity = unit(pose.opacity);
+        pose.draw = unit(pose.draw);
+        if (part.spin)
+            pose.angle += Math.max(0, finite(time)) * part.spin.degreesPerSecond;
+        const [px, py] = part.pivot ?? [12, 12];
+        return {
+            ...pose,
+            paths: partPaths(part, weights, pose.flex),
+            transform: `translate(${pose.x}px, ${pose.y}px) translate(${px}px, ${py}px) rotate(${pose.angle}deg) scale(${pose.scaleX}, ${pose.scaleY}) translate(${-px}px, ${-py}px)`,
+        };
+    });
+}

package/dist/shared/icon-colors.d.ts

@@ -17,18 +17,109 @@ export interface ShipColors {
     windows?: string;
     water?: string;
 }
-export interface LeafColors {
-    blade?: string;
-    stem?: string;
+export interface AlertColors {
+    /** Critical punctuation; defaults to red, independent of the triangle outline. */
+    critical?: string;
 }
 export interface IconColors {
+    bookmark: never;
+    'book-open': never;
+    image: never;
+    camera: never;
+    share: never;
+    calendar: never;
+    clock: never;
+    timer: never;
+    'map-pin': never;
+    globe: never;
+    'circle-help': never;
+    play: never;
+    pause: never;
+    volume: never;
+    music: never;
+    sun: never;
+    'shopping-cart': never;
+    'shopping-bag': never;
+    'credit-card': never;
+    wallet: never;
+    package: never;
+    truck: never;
+    filter: never;
+    sliders: never;
+    'layout-grid': never;
+    'layout-dashboard': never;
+    list: never;
+    layers: never;
+    maximize: never;
+    minimize: never;
+    code: never;
+    terminal: never;
+    database: never;
+    wifi: never;
+    cloud: never;
+    moon: never;
+    'log-in': never;
+    'log-out': never;
+    lock: never;
+    key: never;
+    info: never;
+    mail: never;
+    send: never;
+    'message-circle': never;
+    phone: never;
+    video: never;
+    mic: never;
+    pencil: never;
+    'file-text': never;
+    file: never;
+    folder: never;
+    save: never;
+    upload: never;
+    clipboard: never;
+    home: never;
+    menu: never;
+    plus: never;
+    minus: never;
+    'chevron-down': never;
+    'chevron-right': never;
+    'chevron-left': never;
+    'chevron-up': never;
+    'arrow-right': never;
+    'arrow-left': never;
+    'arrow-up': never;
+    'arrow-down': never;
+    'external-link': never;
+    'more-horizontal': never;
+    'more-vertical': never;
+    user: never;
+    users: never;
+    settings: never;
+    refresh: never;
+    copy: never;
+    eye: never;
+    link: never;
+    check: never;
+    close: never;
+    sparkles: never;
+    sparkle: never;
+    star: never;
+    wave: never;
     dog: DogColors;
     monkey: MonkeyColors;
     heart: HeartColors;
     ship: ShipColors;
-    leaf: LeafColors;
     rocket: never;
     search: never;
     bell: never;
     download: never;
+    shield: never;
+    cursor: never;
+    clapperboard: never;
+    plug: never;
+    bulb: never;
+    alert: AlertColors;
+    'badge-check': never;
+    replace: never;
+    delete: never;
+    swap: never;
 }

package/dist/shared/icon-types.d.ts

@@ -5,6 +5,7 @@ export interface StatefulIconProps<State extends string, Colors = never> {
     accentColor?: string;
     /** Optional, icon-specific detail colours. Unset parts inherit their defaults. */
     colors?: Colors;
+    /** Outline width in SVG units. Defaults to 1.65. */
     strokeWidth?: number;
     speed?: number;
     /** Keeps the icon performing after its state transition has settled. */

package/dist/shared/sparkle-motion.d.ts

@@ -0,0 +1,12 @@
+export declare const SPARKLE_BLINK_DURATION = 2.4;
+export declare function sampleTwinkle(time: number, alive: number, entry: number, start: number, repeats: readonly number[]): {
+    dark: number;
+    tilt: number;
+};
+export declare function sampleSparkleCore(weights: readonly number[], time: number, alive: number, entry: number, baseScale: number): {
+    core: string;
+    coreOpacity: number;
+    tint: number;
+};
+/** Lucide's ISC-licensed rounded four-point contour, shared by the two compositions. */
+export declare const SPARKLE_CORE = "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z";

package/dist/shared/sparkle-motion.js

@@ -0,0 +1,38 @@
+import { behaviorBeat } from "./behavior-curves.js";
+const clamp = (n) => Math.max(0, Math.min(1, n));
+export const SPARKLE_BLINK_DURATION = 2.4;
+/** Soft disappearance and recovery; no dark hold, flash or scale-pop. */
+function twinkle(time, start) {
+    const dark = clamp(behaviorBeat(time, start, 0.48, 0, 0.68));
+    return {
+        dark,
+        tilt: dark * Math.sin(((time - start) / 1.16) * Math.PI * 2) * 4,
+    };
+}
+export function sampleTwinkle(time, alive, entry, start, repeats) {
+    const first = twinkle(clamp(entry) * SPARKLE_BLINK_DURATION, start);
+    let recurring = { dark: 0, tilt: 0 };
+    if (alive > 0)
+        for (const at of repeats) {
+            const beat = twinkle(((time % 6.4) + 6.4) % 6.4, at);
+            if (beat.dark > 0)
+                recurring = { dark: beat.dark * clamp(alive), tilt: beat.tilt * clamp(alive) };
+        }
+    // Smooth union keeps overlapping entry/live fades bounded, without max() handoff kinks.
+    return {
+        dark: 1 - (1 - first.dark) * (1 - recurring.dark),
+        tilt: first.tilt * (1 - recurring.dark * 0.5) + recurring.tilt * (1 - first.dark * 0.5),
+    };
+}
+export function sampleSparkleCore(weights, time, alive, entry, baseScale) {
+    const [, shimmering, blink, dimmed] = weights.map(clamp), life = clamp(alive);
+    const beat = sampleTwinkle(time, life, entry, 0.05, [0.2, 3.2]);
+    const scale = baseScale - dimmed * 0.09 + shimmering * 0.025;
+    return {
+        core: `translate(12px, 12px) rotate(${shimmering * (-5 + life * Math.sin(time * 1.5) * 4) + blink * beat.tilt}deg) scale(${scale}) translate(-12px, -12px)`,
+        coreOpacity: clamp(1 - blink * beat.dark * 0.9),
+        tint: 0,
+    };
+}
+/** Lucide's ISC-licensed rounded four-point contour, shared by the two compositions. */
+export const SPARKLE_CORE = 'M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z';

package/dist/shared/use-icon-motion.d.ts

@@ -1,10 +1,14 @@
 import { type RefObject } from 'react';
 import { type MotionValue } from 'motion/react';
 export declare function usePoseWeight(active: boolean, pace: number, reduced: boolean): MotionValue<number>;
+/** Finite action playhead: preserve interrupted progress; restart only once invisible.
+ * Motion owns scheduling, not React state or another recurring frame loop.
+ */
+export declare function useActionProgress(active: boolean, pace: number, reduced: boolean, duration: number, canRestart?: () => boolean): MotionValue<number>;
 /** Own the source subscription so changing speed disposes the previous spring.
  * Motion's source-following spring cleanup currently removes the subscription
  * without stopping the old animation when options change. A numeric spring has
  * the correct animation cleanup; we forward source values through one listener.
  */
 export declare function useFollowPose(source: MotionValue<number>, pace: number, reduced: boolean): MotionValue<number>;
-export declare function useBehaviorClock(element: RefObject<SVGSVGElement | null>, enabled: boolean, pace: number, amount: MotionValue<number>): MotionValue<number>;
+export declare function useBehaviorClock(element: RefObject<SVGSVGElement | null>, enabled: boolean, pace: number, amount: MotionValue<number>, coastWithAmount?: boolean): MotionValue<number>;

package/dist/shared/use-icon-motion.js

@@ -24,6 +24,32 @@ export function usePoseWeight(active, pace, reduced) {
     }, [active, pace, reduced, value, spring]);
     return value;
 }
+/** Finite action playhead: preserve interrupted progress; restart only once invisible.
+ * Motion owns scheduling, not React state or another recurring frame loop.
+ */
+export function useActionProgress(active, pace, reduced, duration, canRestart) {
+    const progress = useMotionValue(1);
+    const wasActive = useRef(false);
+    useEffect(() => {
+        const entered = active && !wasActive.current;
+        wasActive.current = active;
+        if (reduced) {
+            progress.jump(1);
+            return;
+        }
+        if (entered && progress.get() === 1 && (canRestart?.() ?? true))
+            progress.jump(0);
+        const remaining = 1 - progress.get();
+        if (remaining <= 0)
+            return;
+        const animation = animate(progress, 1, {
+            duration: (duration * remaining) / pace,
+            ease: 'linear',
+        });
+        return () => animation.stop();
+    }, [active, pace, reduced, duration, progress, canRestart]);
+    return progress;
+}
 /** Own the source subscription so changing speed disposes the previous spring.
  * Motion's source-following spring cleanup currently removes the subscription
  * without stopping the old animation when options change. A numeric spring has
@@ -49,7 +75,7 @@ export function useFollowPose(source, pace, reduced) {
     }, [source, value, options, reduced]);
     return value;
 }
-export function useBehaviorClock(element, enabled, pace, amount) {
+export function useBehaviorClock(element, enabled, pace, amount, coastWithAmount = false) {
     const time = useMotionValue(0);
     useEffect(() => {
         if (!element.current || (!enabled && amount.get() < 0.001))
@@ -57,7 +83,8 @@ export function useBehaviorClock(element, enabled, pace, amount) {
         const stop = subscribeBehavior(element.current, (delta) => {
             if (!enabled && amount.get() < 0.001)
                 return false;
-            time.set(time.get() + delta * pace);
+            const coast = coastWithAmount ? Math.max(0, Math.min(1, amount.get())) : 1;
+            time.set(time.get() + delta * pace * coast);
         });
         const unAmount = amount.on('change', (value) => {
             if (!enabled && value < 0.001)
@@ -67,6 +94,6 @@ export function useBehaviorClock(element, enabled, pace, amount) {
             stop();
             unAmount();
         };
-    }, [element, enabled, pace, amount, time]);
+    }, [element, enabled, pace, amount, time, coastWithAmount]);
     return time;
 }