@nice2dev/icons 1.3.16 → 1.3.18

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @nice2dev/icons — Changelog
 
+## 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
+
+- 59a1a84: Icons, showcase feedback round 41:
+
+  - **Removed** (breaking): NtdGym (use NtdDumbbell), NtdPizzaFood (NtdPizza), NtdDelivery (NtdTruck),
+    NtdOmniVerkBadge, NtdOmniVerkLogo, NtdOmniVerkSpinner (`<NtdOmniVerk animation="spin" />` or NiceSpinner) and
+    NtdOmniVerkWatermark (NiceLogo).
+  - **`animationSpeed`** on every icon, the style decorators and SmilAnimationWrapper — and every animation now runs
+    at half its earlier pace by default: CSS animations, `smilAnimation`, gradient animations and the icons' own
+    (NtdOmniVerk, NtdOmniVerkAnimated). `animationSpeed={2}` is the old pace; an explicit duration keeps its length.
+    createIcon's new `animated` option scales an icon's own SVG animation times.
+  - **Redrawn**: NtdNuke, NtdRunning, NtdDumbbell, NtdBeer, NtdCrown, NtdTarget, NtdMolecule, NtdPlate, NtdFood,
+    NtdCoffeeFood, NtdTruck, NtdRefresh, NtdLayers, NtdTrash, NtdCoins; NtdPlanet's ring is primary with a thin
+    accent rim.
+
 ## 1.3.16
 
 ### 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
@@ -524,7 +544,7 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 ### Brand & Logo (14 icons)
 
-`NtdNiceToDev` · `NtdNiceMonogram` · `NtdNiceOrbit` · `NtdNiceSpark` · `NtdNiceShield` · `NtdNiceBadge` · `NtdNiceCore` · `NtdNiceCrest` · `NtdNiceHelix` · `NtdNicePortal` · `NtdNicePulseMark` · `NtdNiceFlagship` · `NtdOmniVerk` · `NtdOmniVerkLogo`
+`NtdNiceToDev` · `NtdNiceMonogram` · `NtdNiceOrbit` · `NtdNiceSpark` · `NtdNiceShield` · `NtdNiceBadge` · `NtdNiceCore` · `NtdNiceCrest` · `NtdNiceHelix` · `NtdNicePortal` · `NtdNicePulseMark` · `NtdNiceFlagship` · `NtdOmniVerk` · `NtdOmniVerkAnimated`
 
 ### Brand Studio (25 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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ANIMATION_SLOWDOWN = 2;
+function animationScale(speed) {
+  const s = typeof speed === "number" && speed > 0 && Number.isFinite(speed) ? speed : 1;
+  return ANIMATION_SLOWDOWN / s;
+}
+function durationScale(durationGiven, speed) {
+  return durationGiven ? animationScale(speed) / ANIMATION_SLOWDOWN : animationScale(speed);
+}
+const SMIL_ELEMENTS = /* @__PURE__ */ new Set([
+  "animate",
+  "animateTransform",
+  "animateMotion",
+  "animateColor",
+  "set"
+]);
+const TIME_PROPS = ["dur", "begin", "end"];
+const CLOCK = /^(\d*\.?\d+)(ms|s|min|h)?$/;
+function scaleTime(value, scale) {
+  if (typeof value === "number") {
+    return Number((value * scale).toFixed(4));
+  }
+  return value.split(";").map((part) => {
+    const m = CLOCK.exec(part.trim());
+    if (!m) {
+      return part;
+    }
+    return `${Number((Number(m[1]) * scale).toFixed(4))}${m[2] ?? "s"}`;
+  }).join(";");
+}
+function retimeTree(node, scale) {
+  if (scale === 1) {
+    return 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";
+    const isFragment = n.type === React.Fragment;
+    if (!isHost && !isFragment) {
+      return n;
+    }
+    const next = {};
+    if (isHost && SMIL_ELEMENTS.has(n.type)) {
+      for (const key of TIME_PROPS) {
+        const v = props[key];
+        if (typeof v === "string" || typeof v === "number") {
+          next[key] = scaleTime(v, scale);
+        }
+      }
+    }
+    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 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

@@ -2,6 +2,8 @@
 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");
@@ -26,11 +28,12 @@ function useColorScheme() {
   return React.useSyncExternalStore(subscribeColorScheme, getColorScheme, () => "light");
 }
 const BOX_CENTER = [12, 12];
-function renderGradientDef(id, preset, type, angle, animation) {
+function renderGradientDef(id, preset, type, angle, animation, timeScale = 1) {
   const stops = types.GRADIENT_PRESETS[preset];
   if (!stops) {
     return null;
   }
+  const loop = `${Number((3 * timeScale).toFixed(4))}s`;
   const stopEls = stops.map((color, i) => {
     const offset = `${Math.round(i / (stops.length - 1) * 100)}%`;
     const nextColor = stops[(i + 1) % stops.length];
@@ -40,7 +43,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "stop-color",
           values: `${color};${nextColor};${color}`,
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         }
       ) }, i);
@@ -60,7 +63,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
           type: "rotate",
           from: "0 12 12",
           to: "360 12 12",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "spin"
@@ -74,7 +77,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "x1",
           values: "-24;24;-24",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "shift-x1"
@@ -84,7 +87,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "x2",
           values: "0;48;0",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "shift-x2"
@@ -167,7 +170,13 @@ function renderCutoutShape(shape, fill, maskId) {
   }
 }
 function createIcon(options) {
-  const { displayName, viewBox = "0 0 24 24", paths, textCenter = BOX_CENTER } = options;
+  const {
+    displayName,
+    viewBox = "0 0 24 24",
+    paths,
+    textCenter = BOX_CENTER,
+    animated = false
+  } = options;
   const solidDuotone = (props) => paths.solid({ ...props, accentColor: props.secondaryColor, accentOpacity: 1 });
   const perfect = {
     x: options.perfectStackX ?? textCenter[0],
@@ -194,8 +203,13 @@ function createIcon(options) {
       strokeLinejoin: propLinejoin,
       animation,
       animationDuration,
+      animationSpeed: animationSpeed$1,
+      animationMode = "loop",
+      playKey,
+      replayOnClick = false,
+      reducedMotion: reducedMotion$1 = "auto",
       smilAnimation,
-      smilDuration = 1,
+      smilDuration,
       smilRepeatCount = "indefinite",
       smilEasing = "ease-in-out",
       smilDelay = 0,
@@ -228,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);
@@ -255,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)`);
@@ -271,26 +292,34 @@ function createIcon(options) {
       }
       const transformString = transforms.length > 0 ? transforms.join(" ") : void 0;
       const transitionValue = transition === true ? "transform 0.3s ease" : typeof transition === "string" ? `transform ${transition}` : void 0;
+      const timeScale = animationSpeed.animationScale(animationSpeed$1);
       const animStyle = {
         // the variable carries the duration to the parts an icon animates inside itself
         ...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,
-          duration: smilDuration,
+          // 1 s before 1.3.17 by default; a given smilDuration keeps its length
+          duration: (smilDuration ?? 1) * animationSpeed.durationScale(smilDuration !== void 0, animationSpeed$1),
           repeatCount: smilRepeatCount,
           easing: smilEasing,
           delay: smilDelay
         },
         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.motionTree(rendered, timeScale, still) : rendered;
       const stacked = stacking.renderStackChildren(children, {
         variant,
         primaryColor: effectivePrimary,
@@ -302,9 +331,9 @@ function createIcon(options) {
         textSize
       });
       const drawn = stacked ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        rendered,
+        paced,
         stacked
-      ] }) : rendered;
+      ] }) : paced;
       const iconContent = variant === "mini" ? /* @__PURE__ */ jsxRuntime.jsx(
         "g",
         {
@@ -329,22 +358,36 @@ 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(gradId, gradient, gradientType, gradientAngle, gradientAnimation) }),
+            gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: renderGradientDef(
+              gradId,
+              gradient,
+              gradientType,
+              gradientAngle,
+              still ? void 0 : gradientAnimation,
+              timeScale
+            ) }),
             is3d && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: render3dFilterDef(filterId) }),
             isCutout && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: maskId, children: [
               /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }),
-              /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
-                ...renderProps,
-                primaryColor: "black",
-                secondaryColor: "black",
-                accentColor: "white",
-                primaryOpacity: 1,
-                secondaryOpacity: 1,
-                accentOpacity: 1,
-                uid: `${uid}m`
-              }) })
+              /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: (() => {
+                const mask = paths.solid({
+                  ...renderProps,
+                  primaryColor: "black",
+                  secondaryColor: "black",
+                  accentColor: "white",
+                  primaryOpacity: 1,
+                  secondaryOpacity: 1,
+                  accentOpacity: 1,
+                  uid: `${uid}m`
+                });
+                return animated ? animationSpeed.motionTree(mask, timeScale, still) : mask;
+              })() })
             ] }) }),
             smilAnimation ? needsSmilScaleWrapper ? /* @__PURE__ */ jsxRuntime.jsxs(
               "g",
@@ -361,7 +404,8 @@ function createIcon(options) {
               smilAnimationElements
             ] }) : is3d ? /* @__PURE__ */ jsxRuntime.jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent
           ]
-        }
+        },
+        `${playKey ?? ""}:${replays}`
       );
     }
   );