@nice2dev/icons 1.3.17 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @nice2dev/icons — Changelog
 
+## 1.4.0
+
+No changes in this release.
+
+## 1.3.18
+
+### Patch Changes
+
+- 00b696e: Icons and motion (OmniVerk wishlist §1, §8):
+
+  - **Reduced motion:** for users who ask for it (`prefers-reduced-motion: reduce`) every `Ntd*` icon holds still on
+    its own — no CSS animation class, and its SVG (SMIL) animations jump to their last frame (an entrance shows its
+    result, a loop rests on the shape as drawn): the icons' own animations (NtdOmniVerk…), `smilAnimation`, gradient
+    animations, the style decorators and `SmilAnimationWrapper`. `reducedMotion="ignore"` plays anyway. The
+    stylesheet has a reduced-motion rule for anything animated by hand. `withReducedMotionProps` also clears
+    `smilAnimation`; `useReducedMotion` follows the same store.
+  - NiceSetupWizard pauses SVG animations in its `loadingIndicator` for reduced motion (CSS animations stopped
+    already; SMIL kept going).
+  - **`animationMode="single"`** plays a looping `animation` once (the parts an icon animates inside itself
+    included): the stylesheet repeats `var(--ntd-anim-iterations, infinite)`. **`playKey`** starts the animations over
+    when it changes; **`replayOnClick`** on every click.
+  - InteractiveIcon with a `click` trigger plays again on every click; `AnimationController.play()` starts over while
+    already playing.
+
+- 92418c0: OmniVerk wishlist §3, packaging:
+
+  - No test declarations in `dist` any more: erp-adapter (16 files), auth (12), ui-communication (8), ui-presentations
+    (14), and the test `setup.d.ts` of ui-3d, ui-graphics and game-engine.
+  - **One stylesheet per package**: icons, ui-3d and ui-graphics ship theirs in `dist/esm` only — where `exports`
+    points; the `dist/cjs` copy was reached from nothing.
+  - design-tokens builds its CLI as ES modules only: `bin` and `./cli` point at `dist/cli/index.js`; the CommonJS
+    `dist/cli/index.cjs` nothing referred to is gone.
+  - ui README: the Tools section and its link say 12 components (the link pointed at `#tools-14-components`).
+
 ## 1.3.17
 
 ### Patch Changes

package/README.md

@@ -110,6 +110,11 @@ Every icon component accepts these props (extends `SVGProps<SVGSVGElement>`):
 | `strokeLinejoin`    | `'round' \| 'miter' \| 'bevel'` | `'round'`        | Stroke line join style                |
 | `animation`         | `IconAnimation`                 | `undefined`      | CSS animation name                    |
 | `animationDuration` | `string`                        | CSS default      | Duration override (e.g. `'0.5s'`)     |
+| `animationSpeed`    | `number`                        | `1`              | Pace multiplier; `2` = twice as slow  |
+| `animationMode`     | `'loop' \| 'single'`            | `'loop'`         | `'single'` plays the animation once   |
+| `playKey`           | `string \| number`              | `undefined`      | A new value plays it again            |
+| `replayOnClick`     | `boolean`                       | `false`          | Each click plays it again             |
+| `reducedMotion`     | `'auto' \| 'ignore'`            | `'auto'`         | `'ignore'` keeps moving under reduce  |
 | `gradient`          | `GradientPreset`                | `undefined`      | Apply a gradient fill preset          |
 | `gradientType`      | `'linear' \| 'radial'`          | `'linear'`       | Gradient shape                        |
 | `gradientAngle`     | `number`                        | `135`            | Angle for linear gradients (degrees)  |
@@ -203,6 +208,21 @@ sand pours while it holds, in step with the turns at any `animationDuration`:
 
 See [Full Animation Catalog](#full-animation-catalog) for the complete list.
 
+**Once, and again on demand (1.3.18).** Animations loop. `animationMode="single"` plays one run and
+stops; `replayOnClick` plays it again on every click (your `onClick` still runs), and a new `playKey`
+plays it again from code — both remount the `<svg>`, so built-in SMIL entrances replay too:
+
+```tsx
+<NtdOmniVerk animation="flip" animationMode="single" replayOnClick />
+<NtdBell animation="shake" animationMode="single" playKey={unread} />
+```
+
+**Reduced motion (1.3.18).** Under `prefers-reduced-motion: reduce` every icon stops by itself: SMIL
+animations jump to their end frame (an entrance shows its final state, a loop its base state), the
+`ntd-anim-*` class is left out and gradients stand still — no stylesheet needed. A backstop in
+`animations.css` covers icons rendered elsewhere. `reducedMotion="ignore"` keeps an icon moving (e.g.
+a progress indicator that must be seen to work).
+
 ---
 
 ### Stacking icons

package/dist/cjs/animationControls.js

@@ -188,7 +188,7 @@ const AnimationController = /* @__PURE__ */ React.forwardRef(function AnimationC
   const [singleState, setSingleState] = React.useState(
     autoPlay ? "playing" : "idle"
   );
-  const singleIterationRef = React.useRef(0);
+  const [singleIteration, setSingleIteration] = React.useState(0);
   const sequenceConfig = isSequence ? animation : { steps: [{ animation, duration: 1e3 }] };
   const sequence = useAnimationSequence(sequenceConfig);
   const state = isSequence ? sequence.state : singleState;
@@ -247,7 +247,7 @@ const AnimationController = /* @__PURE__ */ React.forwardRef(function AnimationC
         sequence.play();
       } else {
         setSingleState("playing");
-        singleIterationRef.current++;
+        setSingleIteration((n) => n + 1);
       }
       onStart?.();
     },
@@ -264,7 +264,7 @@ const AnimationController = /* @__PURE__ */ React.forwardRef(function AnimationC
         sequence.reset();
       } else {
         setSingleState("idle");
-        singleIterationRef.current++;
+        setSingleIteration((n) => n + 1);
       }
     },
     goToStep: (index) => {
@@ -310,7 +310,7 @@ const AnimationController = /* @__PURE__ */ React.forwardRef(function AnimationC
       ...children.props.style,
       ...animationStyles
     },
-    key: isSequence ? `seq-${currentStepIndex}-${sequence.loopIteration}` : `single-${singleIterationRef.current}`
+    key: isSequence ? `seq-${currentStepIndex}-${sequence.loopIteration}` : `single-${singleIteration}`
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -335,6 +335,7 @@ const InteractiveIcon = /* @__PURE__ */ React.forwardRef(
     const [isActive, setIsActive] = React.useState(false);
     const [isLeaving, setIsLeaving] = React.useState(false);
     const [hasPlayed, setHasPlayed] = React.useState(false);
+    const [plays, setPlays] = React.useState(0);
     const wrapperRef = React.useRef(null);
     const timeoutRef = React.useRef(null);
     const setRefs = React.useCallback(
@@ -368,11 +369,13 @@ const InteractiveIcon = /* @__PURE__ */ React.forwardRef(
         timeoutRef.current = setTimeout(() => {
           setIsActive(true);
           setHasPlayed(true);
+          setPlays((n) => n + 1);
           onInteractionStart?.();
         }, config.delay);
       } else {
         setIsActive(true);
         setHasPlayed(true);
+        setPlays((n) => n + 1);
         onInteractionStart?.();
       }
     }, [disabled, config.once, config.delay, hasPlayed, clearTimer, onInteractionStart]);
@@ -425,7 +428,9 @@ const InteractiveIcon = /* @__PURE__ */ React.forwardRef(
       style: {
         ...children.props.style,
         ...animationStyles
-      }
+      },
+      // a click plays the animation again: a new key restarts it
+      ...config.trigger === "click" ? { key: `play-${plays}` } : {}
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",

package/dist/cjs/animationSpeed.js

@@ -63,7 +63,40 @@ function retimeTree(node, scale) {
   };
   return walk(node);
 }
+function stillTree(node) {
+  const walk = (n) => {
+    if (Array.isArray(n)) {
+      return n.map(walk);
+    }
+    if (!React.isValidElement(n)) {
+      return n;
+    }
+    const props = n.props;
+    const isHost = typeof n.type === "string";
+    if (!isHost && n.type !== React.Fragment) {
+      return n;
+    }
+    const next = {};
+    if (isHost && SMIL_ELEMENTS.has(n.type)) {
+      next.begin = "0s";
+      next.dur = "0.001s";
+      next.repeatCount = "1";
+      next.repeatDur = void 0;
+      next.end = void 0;
+    }
+    if (props.children !== void 0) {
+      next.children = React.Children.map(props.children, walk);
+    }
+    return Object.keys(next).length > 0 ? React.cloneElement(n, next) : n;
+  };
+  return walk(node);
+}
+function motionTree(node, scale, still) {
+  return still ? stillTree(node) : retimeTree(node, scale);
+}
 exports.ANIMATION_SLOWDOWN = ANIMATION_SLOWDOWN;
 exports.animationScale = animationScale;
 exports.durationScale = durationScale;
+exports.motionTree = motionTree;
 exports.retimeTree = retimeTree;
+exports.stillTree = stillTree;

package/dist/cjs/createIcon.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const animationSpeed = require("./animationSpeed.js");
+const reducedMotion = require("./reducedMotion.js");
 const sharpen = require("./sharpen.js");
 const smilAnimations = require("./smilAnimations.js");
 const stacking = require("./stacking.js");
@@ -203,6 +204,10 @@ function createIcon(options) {
       animation,
       animationDuration,
       animationSpeed: animationSpeed$1,
+      animationMode = "loop",
+      playKey,
+      replayOnClick = false,
+      reducedMotion: reducedMotion$1 = "auto",
       smilAnimation,
       smilDuration,
       smilRepeatCount = "indefinite",
@@ -237,6 +242,8 @@ function createIcon(options) {
       const gradId = React.useId();
       const uid = React.useId();
       const center = { x: 12, y: 12 };
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
+      const [replays, setReplays] = React.useState(0);
       const colorScheme = useColorScheme();
       const adaptiveColor = lightColor && darkColor ? colorScheme === "dark" ? darkColor : lightColor : void 0;
       const primaryColor = adaptiveColor ?? (color ? `var(${types.SEMANTIC_COLOR_VARS[color]}, ${types.SEMANTIC_COLOR_DEFAULTS[color]})` : propPrimaryColor);
@@ -264,7 +271,12 @@ function createIcon(options) {
       const filterId = React.useId();
       const isCutout = variant === "cutout";
       const maskId = React.useId();
-      const classes = ["ntd-icon", animation ? `ntd-anim-${animation}` : "", className ?? ""].filter(Boolean).join(" ");
+      const classes = [
+        "ntd-icon",
+        animation && !still ? `ntd-anim-${animation}` : "",
+        reducedMotion$1 === "ignore" ? "ntd-motion-ignore" : "",
+        className ?? ""
+      ].filter(Boolean).join(" ");
       const transforms = [];
       if (rotate) {
         transforms.push(`rotate(${rotate}deg)`);
@@ -286,12 +298,14 @@ function createIcon(options) {
         ...animationDuration ? { animationDuration, "--ntd-anim-duration": animationDuration } : {},
         // animations.css multiplies its times by it (default 2 there, the slowdown)
         ...animationSpeed$1 !== void 0 ? { "--ntd-anim-scale": String(timeScale) } : {},
+        // a looping animation once (1.3.18): animations.css repeats `var(--ntd-anim-iterations, infinite)`
+        ...animationMode === "single" ? { "--ntd-anim-iterations": "1" } : {},
         ...transformString ? { transform: transformString } : {},
         ...transformString ? { transformOrigin } : {},
         ...transitionValue ? { transition: transitionValue } : {},
         ...style
       };
-      const smilAnimationElements = smilAnimation ? smilAnimations.generateSmilAnimation(
+      const smilGenerated = smilAnimation ? smilAnimations.generateSmilAnimation(
         {
           type: smilAnimation,
           // 1 s before 1.3.17 by default; a given smilDuration keeps its length
@@ -302,9 +316,10 @@ function createIcon(options) {
         },
         center
       ) : null;
+      const smilAnimationElements = still ? animationSpeed.stillTree(smilGenerated) : smilGenerated;
       const needsSmilScaleWrapper = smilAnimation && ["heartbeat", "scale-pulse", "grow", "shrink", "rubber", "pop"].includes(smilAnimation);
       const rendered = isCutout ? renderCutoutShape(cutoutShape, gradient ? effectivePrimary : resolvedSecondary, maskId) : variant === "sharp" ? sharpen.sharpenTree(renderer(renderProps)) : variant === "rounded" ? sharpen.roundTree(renderer(renderProps)) : variant === "wireframe" ? sharpen.wireTree(renderer(renderProps), effectivePrimary) : renderer(renderProps);
-      const paced = animated ? animationSpeed.retimeTree(rendered, timeScale) : rendered;
+      const paced = animated ? animationSpeed.motionTree(rendered, timeScale, still) : rendered;
       const stacked = stacking.renderStackChildren(children, {
         variant,
         primaryColor: effectivePrimary,
@@ -343,6 +358,10 @@ function createIcon(options) {
           "aria-hidden": title ? void 0 : true,
           "aria-label": title,
           ...rest,
+          onClick: replayOnClick ? (event) => {
+            setReplays((n) => n + 1);
+            rest.onClick?.(event);
+          } : rest.onClick,
           children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
             gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: renderGradientDef(
@@ -350,7 +369,7 @@ function createIcon(options) {
               gradient,
               gradientType,
               gradientAngle,
-              gradientAnimation,
+              still ? void 0 : gradientAnimation,
               timeScale
             ) }),
             is3d && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: render3dFilterDef(filterId) }),
@@ -367,7 +386,7 @@ function createIcon(options) {
                   accentOpacity: 1,
                   uid: `${uid}m`
                 });
-                return animated ? animationSpeed.retimeTree(mask, timeScale) : mask;
+                return animated ? animationSpeed.motionTree(mask, timeScale, still) : mask;
               })() })
             ] }) }),
             smilAnimation ? needsSmilScaleWrapper ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -385,7 +404,8 @@ function createIcon(options) {
               smilAnimationElements
             ] }) : is3d ? /* @__PURE__ */ jsxRuntime.jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent
           ]
-        }
+        },
+        `${playKey ?? ""}:${replays}`
       );
     }
   );

package/dist/cjs/iconStyles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const animationSpeed = require("./animationSpeed.js");
+const reducedMotion = require("./reducedMotion.js");
 const wrapperBase = {
   position: "relative",
   display: "inline-flex",
@@ -21,6 +22,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       vineColor = "#22c55e",
       petalColor = "#f472b6",
@@ -28,6 +30,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 2;
       const lc = leafColor ?? vineColor;
       const dur = `${duration}s`;
@@ -69,7 +72,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const dashLen = 250;
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           children,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -201,7 +204,8 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -214,12 +218,14 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       colors,
       sparkleColor = "#fbbf24",
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 1.5;
       const cols = colors ?? ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ec4899"];
       const dur = `${duration * 0.6}s`;
@@ -270,7 +276,7 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
           { cx: 97, cy: 45, r: 1.1 }
         ] : []
       ];
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           children,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -387,7 +393,8 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -400,6 +407,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       glowColor = "#0ff",
       secondaryGlow,
@@ -407,6 +415,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 4;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const glow2 = secondaryGlow ?? glowColor;
@@ -420,7 +429,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       ].filter(Boolean).join(" ");
       const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
       const animName = `ntd_neon_${uid}`;
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           animate && flicker && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
             @keyframes ${animName} {
@@ -440,7 +449,8 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -453,12 +463,14 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       strokeColor = "#374151",
       roughness = 2,
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 1.5;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const filterId = `ntd_sketch_${uid}`;
@@ -475,7 +487,7 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
         { x1: 10, y1: 12, x2: 16, y2: 10 },
         { x1: 84, y1: 12, x2: 90, y2: 10 }
       ];
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -582,7 +594,8 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -595,12 +608,14 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       tintColor = "#818cf8",
       bleedColor = "#f0abfc",
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 2;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const filterId = `ntd_wc_${uid}`;
@@ -630,7 +645,7 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
           { cx: 92, cy: 55, r: 1 }
         ] : []
       ];
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
@@ -740,7 +755,8 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -753,6 +769,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       starColor = "#e2e8f0",
       nebulaColor = "#7c3aed",
@@ -760,6 +777,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 2;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const nebulaFilter = `ntd_cosm_${uid}`;
@@ -811,7 +829,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const lineLen = 80;
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -960,7 +978,8 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -973,6 +992,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       brassColor = "#b45309",
       pipeColor = "#78350f",
@@ -980,6 +1000,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 3;
       const makeGear = (cx, cy, r, teeth) => {
         const inner = r * 0.68;
@@ -1032,7 +1053,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
         { cx: 55, cy: -4, r: 2.2 },
         { cx: 47, cy: -10, r: 1.6 }
       ];
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
@@ -1137,7 +1158,8 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -1150,12 +1172,14 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       crystalColor = "#bae6fd",
       glowColor = "#38bdf8",
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 2;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const glowFilterId = `ntd_frost_${uid}`;
@@ -1213,7 +1237,7 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
         { cx: 14, cy: 96, r: 1 },
         { cx: 86, cy: 96, r: 1.1 }
       ];
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1332,7 +1356,8 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -1345,6 +1370,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       pixelColor = "#22d3ee",
       scanlineColor = "#000000",
@@ -1352,6 +1378,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 0.5;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const scanAnimName = `ntd_pixel_scan_${uid}`;
@@ -1390,7 +1417,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
         { x: 48, y: 96 }
       ] : [];
       const allPixels = intensity === "subtle" ? basePixels.filter((_, i) => i % 2 === 0) : [...basePixels, ...extraPixels];
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           animate && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
             @keyframes ${scanAnimName} {
@@ -1472,7 +1499,8 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -1485,6 +1513,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       cellColor = "#86efac",
       membraneColor = "#4ade80",
@@ -1492,6 +1521,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 3;
       const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
       const blobFilterId = `ntd_org_${uid}`;
@@ -1522,7 +1552,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
         { cx: 60, cy: 95, r: 1.5 }
       ];
       const bubbleCount = intensity === "subtle" ? 2 : intensity === "dense" ? 6 : 4;
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1642,7 +1672,8 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),
@@ -1655,6 +1686,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed: animationSpeed$1,
+      reducedMotion: reducedMotion$1,
       intensity = "normal",
       primaryColor = "#6366f1",
       secondaryColor = "#8b5cf6",
@@ -1662,6 +1694,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = reducedMotion.useStillMotion(reducedMotion$1);
       const duration = durationProp ?? 8;
       const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
         const a = (i * 120 - 90 + rotDeg) * Math.PI / 180;
@@ -1694,7 +1727,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
-      return animationSpeed.retimeTree(
+      return animationSpeed.motionTree(
         /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
@@ -1788,7 +1821,8 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
         ] }),
-        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1),
+        still
       );
     }
   ),