weasel-icons 0.2.0 → 0.3.0

package/dist/icons/wifi/wifi-rig.js

@@ -0,0 +1,260 @@
+export const wifiStates = ['offline', 'connecting', 'connected'];
+// Lucide-derived outline; attribution and pinned source: THIRD_PARTY_NOTICES.md.
+// Join a network: inner, middle, then outer arcs acquire the signal, hold together, and retry. Connected performs one outward acknowledgement and stays solid.
+export const wifiArt = {
+    name: 'wifi',
+    parts: [
+        {
+            name: 'origin',
+            paths: ['M12 20h.01'],
+            poses: [{}, {}, {}],
+            pivot: [12, 12],
+            gestures: [],
+        },
+        {
+            name: 'arc-0',
+            paths: ['M2 8.82a15 15 0 0 1 20 0'],
+            poses: [
+                {
+                    opacity: 0.25,
+                },
+                {
+                    opacity: 0.2,
+                },
+                {
+                    opacity: 1,
+                },
+            ],
+            pivot: [12, 20],
+            gestures: [
+                null,
+                {
+                    duration: 2.4,
+                    repeatAfter: 3.7,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.48000000000000004,
+                            opacity: -0.08000000000000002,
+                            scaleX: -0.04,
+                            scaleY: -0.07,
+                        },
+                        {
+                            at: 0.6200000000000001,
+                            opacity: 0.8,
+                            scaleX: 0.025,
+                            scaleY: 0.025,
+                        },
+                        {
+                            at: 0.78,
+                            opacity: 0.8,
+                        },
+                        {
+                            at: 0.9,
+                            opacity: -0.08000000000000002,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                {
+                    duration: 1.2,
+                    repeatAfter: 2.2,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.34,
+                            opacity: -0.5,
+                            scaleX: -0.05,
+                            scaleY: -0.05,
+                        },
+                        {
+                            at: 0.66,
+                            scaleX: 0.015,
+                            scaleY: 0.015,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'arc-1',
+            paths: ['M5 12.859a10 10 0 0 1 14 0'],
+            poses: [
+                {
+                    opacity: 0.25,
+                },
+                {
+                    opacity: 0.55,
+                },
+                {
+                    opacity: 1,
+                },
+            ],
+            pivot: [12, 20],
+            gestures: [
+                null,
+                {
+                    duration: 2.4,
+                    repeatAfter: 3.7,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.28,
+                            opacity: -0.43000000000000005,
+                            scaleX: -0.04,
+                            scaleY: -0.07,
+                        },
+                        {
+                            at: 0.42000000000000004,
+                            opacity: 0.44999999999999996,
+                            scaleX: 0.025,
+                            scaleY: 0.025,
+                        },
+                        {
+                            at: 0.78,
+                            opacity: 0.44999999999999996,
+                        },
+                        {
+                            at: 0.9,
+                            opacity: -0.43000000000000005,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                {
+                    duration: 1.2,
+                    repeatAfter: 2.2,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.21000000000000002,
+                            opacity: -0.5,
+                            scaleX: -0.05,
+                            scaleY: -0.05,
+                        },
+                        {
+                            at: 0.53,
+                            scaleX: 0.015,
+                            scaleY: 0.015,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'arc-2',
+            paths: ['M8.5 16.429a5 5 0 0 1 7 0'],
+            poses: [
+                {
+                    opacity: 0.25,
+                },
+                {
+                    opacity: 1,
+                },
+                {
+                    opacity: 1,
+                },
+            ],
+            pivot: [12, 20],
+            gestures: [
+                null,
+                {
+                    duration: 2.4,
+                    repeatAfter: 3.7,
+                    loop: true,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.08,
+                            opacity: -0.88,
+                            scaleX: -0.04,
+                            scaleY: -0.07,
+                        },
+                        {
+                            at: 0.22000000000000003,
+                            opacity: 0,
+                            scaleX: 0.025,
+                            scaleY: 0.025,
+                        },
+                        {
+                            at: 0.78,
+                            opacity: 0,
+                        },
+                        {
+                            at: 0.9,
+                            opacity: -0.88,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+                {
+                    duration: 1.2,
+                    repeatAfter: 2.2,
+                    loop: false,
+                    frames: [
+                        {
+                            at: 0,
+                        },
+                        {
+                            at: 0.08,
+                            opacity: -0.5,
+                            scaleX: -0.05,
+                            scaleY: -0.05,
+                        },
+                        {
+                            at: 0.4,
+                            scaleX: 0.015,
+                            scaleY: 0.015,
+                        },
+                        {
+                            at: 1,
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'offline',
+            paths: ['M4 5L20 19'],
+            poses: [
+                {
+                    opacity: 1,
+                },
+                {
+                    opacity: 0,
+                },
+                {
+                    opacity: 0,
+                },
+            ],
+            pivot: [12, 12],
+            gestures: [],
+        },
+    ],
+};

package/dist/index.d.ts

@@ -28,3 +28,75 @@ export { ReplaceIcon, replaceStates, type ReplaceState, type ReplaceIconProps, }
 export { DeleteIcon, deleteStates, type DeleteState, type DeleteIconProps, } from "./icons/delete/delete-icon.js";
 export { SwapIcon, swapStates, type SwapState, type SwapIconProps } from "./icons/swap/swap-icon.js";
 export type { DogColors, MonkeyColors, HeartColors, ShipColors, AlertColors, } from "./shared/icon-colors.js";
+export { HomeIcon, homeStates, type HomeState, type HomeIconProps } from "./icons/home/home-icon.js";
+export { MenuIcon, menuStates, type MenuState, type MenuIconProps } from "./icons/menu/menu-icon.js";
+export { PlusIcon, plusStates, type PlusState, type PlusIconProps } from "./icons/plus/plus-icon.js";
+export { MinusIcon, minusStates, type MinusState, type MinusIconProps, } from "./icons/minus/minus-icon.js";
+export { ChevronDownIcon, chevronDownStates, type ChevronDownState, type ChevronDownIconProps, } from "./icons/chevron-down/chevron-down-icon.js";
+export { ChevronRightIcon, chevronRightStates, type ChevronRightState, type ChevronRightIconProps, } from "./icons/chevron-right/chevron-right-icon.js";
+export { ChevronLeftIcon, chevronLeftStates, type ChevronLeftState, type ChevronLeftIconProps, } from "./icons/chevron-left/chevron-left-icon.js";
+export { ChevronUpIcon, chevronUpStates, type ChevronUpState, type ChevronUpIconProps, } from "./icons/chevron-up/chevron-up-icon.js";
+export { ArrowRightIcon, arrowRightStates, type ArrowRightState, type ArrowRightIconProps, } from "./icons/arrow-right/arrow-right-icon.js";
+export { ArrowLeftIcon, arrowLeftStates, type ArrowLeftState, type ArrowLeftIconProps, } from "./icons/arrow-left/arrow-left-icon.js";
+export { ArrowUpIcon, arrowUpStates, type ArrowUpState, type ArrowUpIconProps, } from "./icons/arrow-up/arrow-up-icon.js";
+export { ArrowDownIcon, arrowDownStates, type ArrowDownState, type ArrowDownIconProps, } from "./icons/arrow-down/arrow-down-icon.js";
+export { ExternalLinkIcon, externalLinkStates, type ExternalLinkState, type ExternalLinkIconProps, } from "./icons/external-link/external-link-icon.js";
+export { MoreHorizontalIcon, moreHorizontalStates, type MoreHorizontalState, type MoreHorizontalIconProps, } from "./icons/more-horizontal/more-horizontal-icon.js";
+export { MoreVerticalIcon, moreVerticalStates, type MoreVerticalState, type MoreVerticalIconProps, } from "./icons/more-vertical/more-vertical-icon.js";
+export { UserIcon, userStates, type UserState, type UserIconProps } from "./icons/user/user-icon.js";
+export { UsersIcon, usersStates, type UsersState, type UsersIconProps, } from "./icons/users/users-icon.js";
+export { SettingsIcon, settingsStates, type SettingsState, type SettingsIconProps, } from "./icons/settings/settings-icon.js";
+export { LogInIcon, logInStates, type LogInState, type LogInIconProps, } from "./icons/log-in/log-in-icon.js";
+export { LogOutIcon, logOutStates, type LogOutState, type LogOutIconProps, } from "./icons/log-out/log-out-icon.js";
+export { LockIcon, lockStates, type LockState, type LockIconProps } from "./icons/lock/lock-icon.js";
+export { KeyIcon, keyStates, type KeyState, type KeyIconProps } from "./icons/key/key-icon.js";
+export { InfoIcon, infoStates, type InfoState, type InfoIconProps } from "./icons/info/info-icon.js";
+export { MailIcon, mailStates, type MailState, type MailIconProps } from "./icons/mail/mail-icon.js";
+export { SendIcon, sendStates, type SendState, type SendIconProps } from "./icons/send/send-icon.js";
+export { MessageCircleIcon, messageCircleStates, type MessageCircleState, type MessageCircleIconProps, } from "./icons/message-circle/message-circle-icon.js";
+export { PhoneIcon, phoneStates, type PhoneState, type PhoneIconProps, } from "./icons/phone/phone-icon.js";
+export { VideoIcon, videoStates, type VideoState, type VideoIconProps, } from "./icons/video/video-icon.js";
+export { MicIcon, micStates, type MicState, type MicIconProps } from "./icons/mic/mic-icon.js";
+export { PencilIcon, pencilStates, type PencilState, type PencilIconProps, } from "./icons/pencil/pencil-icon.js";
+export { FileTextIcon, fileTextStates, type FileTextState, type FileTextIconProps, } from "./icons/file-text/file-text-icon.js";
+export { FileIcon, fileStates, type FileState, type FileIconProps } from "./icons/file/file-icon.js";
+export { FolderIcon, folderStates, type FolderState, type FolderIconProps, } from "./icons/folder/folder-icon.js";
+export { SaveIcon, saveStates, type SaveState, type SaveIconProps } from "./icons/save/save-icon.js";
+export { UploadIcon, uploadStates, type UploadState, type UploadIconProps, } from "./icons/upload/upload-icon.js";
+export { ClipboardIcon, clipboardStates, type ClipboardState, type ClipboardIconProps, } from "./icons/clipboard/clipboard-icon.js";
+export { BookmarkIcon, bookmarkStates, type BookmarkState, type BookmarkIconProps, } from "./icons/bookmark/bookmark-icon.js";
+export { BookOpenIcon, bookOpenStates, type BookOpenState, type BookOpenIconProps, } from "./icons/book-open/book-open-icon.js";
+export { ImageIcon, imageStates, type ImageState, type ImageIconProps, } from "./icons/image/image-icon.js";
+export { CameraIcon, cameraStates, type CameraState, type CameraIconProps, } from "./icons/camera/camera-icon.js";
+export { ShareIcon, shareStates, type ShareState, type ShareIconProps, } from "./icons/share/share-icon.js";
+export { CalendarIcon, calendarStates, type CalendarState, type CalendarIconProps, } from "./icons/calendar/calendar-icon.js";
+export { ClockIcon, clockStates, type ClockState, type ClockIconProps, } from "./icons/clock/clock-icon.js";
+export { TimerIcon, timerStates, type TimerState, type TimerIconProps, } from "./icons/timer/timer-icon.js";
+export { MapPinIcon, mapPinStates, type MapPinState, type MapPinIconProps, } from "./icons/map-pin/map-pin-icon.js";
+export { GlobeIcon, globeStates, type GlobeState, type GlobeIconProps, } from "./icons/globe/globe-icon.js";
+export { CircleHelpIcon, circleHelpStates, type CircleHelpState, type CircleHelpIconProps, } from "./icons/circle-help/circle-help-icon.js";
+export { PlayIcon, playStates, type PlayState, type PlayIconProps } from "./icons/play/play-icon.js";
+export { PauseIcon, pauseStates, type PauseState, type PauseIconProps, } from "./icons/pause/pause-icon.js";
+export { VolumeIcon, volumeStates, type VolumeState, type VolumeIconProps, } from "./icons/volume/volume-icon.js";
+export { MusicIcon, musicStates, type MusicState, type MusicIconProps, } from "./icons/music/music-icon.js";
+export { SunIcon, sunStates, type SunState, type SunIconProps } from "./icons/sun/sun-icon.js";
+export { ShoppingCartIcon, shoppingCartStates, type ShoppingCartState, type ShoppingCartIconProps, } from "./icons/shopping-cart/shopping-cart-icon.js";
+export { ShoppingBagIcon, shoppingBagStates, type ShoppingBagState, type ShoppingBagIconProps, } from "./icons/shopping-bag/shopping-bag-icon.js";
+export { CreditCardIcon, creditCardStates, type CreditCardState, type CreditCardIconProps, } from "./icons/credit-card/credit-card-icon.js";
+export { WalletIcon, walletStates, type WalletState, type WalletIconProps, } from "./icons/wallet/wallet-icon.js";
+export { PackageIcon, packageStates, type PackageState, type PackageIconProps, } from "./icons/package/package-icon.js";
+export { TruckIcon, truckStates, type TruckState, type TruckIconProps, } from "./icons/truck/truck-icon.js";
+export { FilterIcon, filterStates, type FilterState, type FilterIconProps, } from "./icons/filter/filter-icon.js";
+export { SlidersIcon, slidersStates, type SlidersState, type SlidersIconProps, } from "./icons/sliders/sliders-icon.js";
+export { LayoutGridIcon, layoutGridStates, type LayoutGridState, type LayoutGridIconProps, } from "./icons/layout-grid/layout-grid-icon.js";
+export { LayoutDashboardIcon, layoutDashboardStates, type LayoutDashboardState, type LayoutDashboardIconProps, } from "./icons/layout-dashboard/layout-dashboard-icon.js";
+export { ListIcon, listStates, type ListState, type ListIconProps } from "./icons/list/list-icon.js";
+export { LayersIcon, layersStates, type LayersState, type LayersIconProps, } from "./icons/layers/layers-icon.js";
+export { MaximizeIcon, maximizeStates, type MaximizeState, type MaximizeIconProps, } from "./icons/maximize/maximize-icon.js";
+export { MinimizeIcon, minimizeStates, type MinimizeState, type MinimizeIconProps, } from "./icons/minimize/minimize-icon.js";
+export { CodeIcon, codeStates, type CodeState, type CodeIconProps } from "./icons/code/code-icon.js";
+export { TerminalIcon, terminalStates, type TerminalState, type TerminalIconProps, } from "./icons/terminal/terminal-icon.js";
+export { DatabaseIcon, databaseStates, type DatabaseState, type DatabaseIconProps, } from "./icons/database/database-icon.js";
+export { WifiIcon, wifiStates, type WifiState, type WifiIconProps } from "./icons/wifi/wifi-icon.js";
+export { CloudIcon, cloudStates, type CloudState, type CloudIconProps, } from "./icons/cloud/cloud-icon.js";
+export { MoonIcon, moonStates, type MoonState, type MoonIconProps } from "./icons/moon/moon-icon.js";

package/dist/index.js

@@ -27,3 +27,75 @@ export { BadgeCheckIcon, badgeCheckStates, } from "./icons/badge-check/badge-che
 export { ReplaceIcon, replaceStates, } from "./icons/replace/replace-icon.js";
 export { DeleteIcon, deleteStates, } from "./icons/delete/delete-icon.js";
 export { SwapIcon, swapStates } from "./icons/swap/swap-icon.js";
+export { HomeIcon, homeStates } from "./icons/home/home-icon.js";
+export { MenuIcon, menuStates } from "./icons/menu/menu-icon.js";
+export { PlusIcon, plusStates } from "./icons/plus/plus-icon.js";
+export { MinusIcon, minusStates, } from "./icons/minus/minus-icon.js";
+export { ChevronDownIcon, chevronDownStates, } from "./icons/chevron-down/chevron-down-icon.js";
+export { ChevronRightIcon, chevronRightStates, } from "./icons/chevron-right/chevron-right-icon.js";
+export { ChevronLeftIcon, chevronLeftStates, } from "./icons/chevron-left/chevron-left-icon.js";
+export { ChevronUpIcon, chevronUpStates, } from "./icons/chevron-up/chevron-up-icon.js";
+export { ArrowRightIcon, arrowRightStates, } from "./icons/arrow-right/arrow-right-icon.js";
+export { ArrowLeftIcon, arrowLeftStates, } from "./icons/arrow-left/arrow-left-icon.js";
+export { ArrowUpIcon, arrowUpStates, } from "./icons/arrow-up/arrow-up-icon.js";
+export { ArrowDownIcon, arrowDownStates, } from "./icons/arrow-down/arrow-down-icon.js";
+export { ExternalLinkIcon, externalLinkStates, } from "./icons/external-link/external-link-icon.js";
+export { MoreHorizontalIcon, moreHorizontalStates, } from "./icons/more-horizontal/more-horizontal-icon.js";
+export { MoreVerticalIcon, moreVerticalStates, } from "./icons/more-vertical/more-vertical-icon.js";
+export { UserIcon, userStates } from "./icons/user/user-icon.js";
+export { UsersIcon, usersStates, } from "./icons/users/users-icon.js";
+export { SettingsIcon, settingsStates, } from "./icons/settings/settings-icon.js";
+export { LogInIcon, logInStates, } from "./icons/log-in/log-in-icon.js";
+export { LogOutIcon, logOutStates, } from "./icons/log-out/log-out-icon.js";
+export { LockIcon, lockStates } from "./icons/lock/lock-icon.js";
+export { KeyIcon, keyStates } from "./icons/key/key-icon.js";
+export { InfoIcon, infoStates } from "./icons/info/info-icon.js";
+export { MailIcon, mailStates } from "./icons/mail/mail-icon.js";
+export { SendIcon, sendStates } from "./icons/send/send-icon.js";
+export { MessageCircleIcon, messageCircleStates, } from "./icons/message-circle/message-circle-icon.js";
+export { PhoneIcon, phoneStates, } from "./icons/phone/phone-icon.js";
+export { VideoIcon, videoStates, } from "./icons/video/video-icon.js";
+export { MicIcon, micStates } from "./icons/mic/mic-icon.js";
+export { PencilIcon, pencilStates, } from "./icons/pencil/pencil-icon.js";
+export { FileTextIcon, fileTextStates, } from "./icons/file-text/file-text-icon.js";
+export { FileIcon, fileStates } from "./icons/file/file-icon.js";
+export { FolderIcon, folderStates, } from "./icons/folder/folder-icon.js";
+export { SaveIcon, saveStates } from "./icons/save/save-icon.js";
+export { UploadIcon, uploadStates, } from "./icons/upload/upload-icon.js";
+export { ClipboardIcon, clipboardStates, } from "./icons/clipboard/clipboard-icon.js";
+export { BookmarkIcon, bookmarkStates, } from "./icons/bookmark/bookmark-icon.js";
+export { BookOpenIcon, bookOpenStates, } from "./icons/book-open/book-open-icon.js";
+export { ImageIcon, imageStates, } from "./icons/image/image-icon.js";
+export { CameraIcon, cameraStates, } from "./icons/camera/camera-icon.js";
+export { ShareIcon, shareStates, } from "./icons/share/share-icon.js";
+export { CalendarIcon, calendarStates, } from "./icons/calendar/calendar-icon.js";
+export { ClockIcon, clockStates, } from "./icons/clock/clock-icon.js";
+export { TimerIcon, timerStates, } from "./icons/timer/timer-icon.js";
+export { MapPinIcon, mapPinStates, } from "./icons/map-pin/map-pin-icon.js";
+export { GlobeIcon, globeStates, } from "./icons/globe/globe-icon.js";
+export { CircleHelpIcon, circleHelpStates, } from "./icons/circle-help/circle-help-icon.js";
+export { PlayIcon, playStates } from "./icons/play/play-icon.js";
+export { PauseIcon, pauseStates, } from "./icons/pause/pause-icon.js";
+export { VolumeIcon, volumeStates, } from "./icons/volume/volume-icon.js";
+export { MusicIcon, musicStates, } from "./icons/music/music-icon.js";
+export { SunIcon, sunStates } from "./icons/sun/sun-icon.js";
+export { ShoppingCartIcon, shoppingCartStates, } from "./icons/shopping-cart/shopping-cart-icon.js";
+export { ShoppingBagIcon, shoppingBagStates, } from "./icons/shopping-bag/shopping-bag-icon.js";
+export { CreditCardIcon, creditCardStates, } from "./icons/credit-card/credit-card-icon.js";
+export { WalletIcon, walletStates, } from "./icons/wallet/wallet-icon.js";
+export { PackageIcon, packageStates, } from "./icons/package/package-icon.js";
+export { TruckIcon, truckStates, } from "./icons/truck/truck-icon.js";
+export { FilterIcon, filterStates, } from "./icons/filter/filter-icon.js";
+export { SlidersIcon, slidersStates, } from "./icons/sliders/sliders-icon.js";
+export { LayoutGridIcon, layoutGridStates, } from "./icons/layout-grid/layout-grid-icon.js";
+export { LayoutDashboardIcon, layoutDashboardStates, } from "./icons/layout-dashboard/layout-dashboard-icon.js";
+export { ListIcon, listStates } from "./icons/list/list-icon.js";
+export { LayersIcon, layersStates, } from "./icons/layers/layers-icon.js";
+export { MaximizeIcon, maximizeStates, } from "./icons/maximize/maximize-icon.js";
+export { MinimizeIcon, minimizeStates, } from "./icons/minimize/minimize-icon.js";
+export { CodeIcon, codeStates } from "./icons/code/code-icon.js";
+export { TerminalIcon, terminalStates, } from "./icons/terminal/terminal-icon.js";
+export { DatabaseIcon, databaseStates, } from "./icons/database/database-icon.js";
+export { WifiIcon, wifiStates } from "./icons/wifi/wifi-icon.js";
+export { CloudIcon, cloudStates, } from "./icons/cloud/cloud-icon.js";
+export { MoonIcon, moonStates } from "./icons/moon/moon-icon.js";

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

@@ -0,0 +1,7 @@
+import type { StatefulIconProps } from "./icon-types.js";
+import { type Articulation } from "./articulation.js";
+/** Shared binding, never a shared drawing or a generic whole-icon animation. */
+export declare function ArticulatedIcon<State extends string>({ art, states, state, size, color, accentColor, strokeWidth, speed, alive, className, }: StatefulIconProps<State> & {
+    art: Articulation;
+    states: readonly [State, State, State];
+}): import("react/jsx-runtime").JSX.Element;

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)`,
+        };
+    });
+}