@neo-ui-kit/react 1.3.1 → 1.3.3

package/README.md

@@ -25,13 +25,19 @@ import "@neo-ui-kit/react/styles.css";
 To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
 
 ```bash
-npm install /path/to/adui/release/neo-ui-kit-react-1.3.1.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.3.tgz
 ```
 
 Maintainers publish new versions from `Pro100Dimka/adui` using the `release.yml` GitHub Actions workflow, a matching `v<version>` tag, and the `npm-publication` environment. npm trusts its OIDC identity; no `NPM_TOKEN` is required. The workflow checks the project and packed consumer before publishing the tested archive. Published `1.0.0` cannot be overwritten: code and README changes in npm require a new package version. See the [repository release instructions](https://github.com/Pro100Dimka/adui#npm-пакет).
 
 ## Theme
 
+Decorations inside `data-ad-paused` or `data-ad-offscreen` boundaries retain their
+phase while paused. After changing either attribute yourself, call `refreshMotion()`
+(imported from `@neo-ui-kit/react`) after the DOM update.
+This refreshes both CSS and scripted decorations on the next shared frame.
+`usePauseOffscreen` handles its own notifications.
+
 Two colours build the whole palette (a primary scale, a secondary scale and tinted neutrals):
 
 ```tsx
@@ -221,6 +227,20 @@ function Preferences() {
 
 Canvas-rendered volume knob. Drag near the edge to rotate, drag from the center to move linearly, click the outer scale to jump. Wheel and arrow keys change the value, Shift gives a fine step, PageUp/PageDown change by 10, Home/End set 0/100, Escape cancels a drag, double-click resets. `onValueChange` fires while adjusting, `onValueCommit` after the gesture. `readOnly` turns it into a gauge.
 
+## 1.3.2 release notes
+
+- Waveform updates only its moving layers and pauses invisible sparks and fully clipped sheen.
+- RotaryKnob completes all canvas layers after StrictMode restarts, avoids duplicate pending renders of the same size, and waits for square canvas dimensions before drawing its feedback ring.
+- Scripted decorations respect pause/offscreen boundaries. `refreshMotion()` batches boundary changes without checking ancestors on every frame.
+- FormFields helper selectors avoid invalidating unrelated descendants while keeping the same layout.
+- Playground code windows can expand to the full browser viewport. The editor and preview resize together without resetting the draft.
+
+Standalone profiling on an RTX 3060, Electron 42.11.8, at 1920×1050 with CPU ×4
+showed 36.9 → 58.9 FPS over 45 seconds for 20 cards combining a waveform, knob,
+and animated border. This is a measured scenario, not a guarantee of 60 FPS for
+every application. CPU ×16/×32 and software compositing still have substantial
+slowdowns; changing rasterization alone did not remove them.
+
 ## 1.3.1 release notes
 
 - ThemePicker gallery cards accept separate backgrounds and keep selected/unselected pictures at the same size, with readable captions and theme-coloured accent lines.

package/dist/chunks/{chunk-TQWTM23C.js → chunk-N5XCG6VF.js}

@@ -1,7 +1,7 @@
 import {
   themes,
   usePauseOffscreen
-} from "./chunk-WOUWYJ6U.js";
+} from "./chunk-NVKL7ONR.js";
 import {
   assignRef,
   clamp,
@@ -2635,6 +2635,7 @@ var RotaryKnob = (p) => {
     let latestHover = null;
     let previousFrame = 0;
     let disposed = false;
+    let renderingSize = 0;
     async function render() {
       if (disposed || !painted) return;
       const cssSize = root.getBoundingClientRect().width;
@@ -2644,7 +2645,8 @@ var RotaryKnob = (p) => {
           cssSize * Math.max(2, Math.min(devicePixelRatio || 1, 2.5))
         )
       );
-      if (!size || canvas.width === size && canvas.height === size) return;
+      if (!size || renderingSize === size || [canvas, rotor, feedback].every((layer) => layer.width === size && layer.height === size)) return;
+      renderingSize = size;
       canvas.width = canvas.height = size;
       const center = size / 2;
       const radius = size * 0.445;
@@ -2788,6 +2790,7 @@ var RotaryKnob = (p) => {
         }
       });
       if (disposed || canvas.width !== size || canvas.height !== size) return;
+      renderingSize = 0;
       ctx.drawImage(picture, 0, 0);
       rotor.width = rotor.height = size;
       feedback.width = feedback.height = size;
@@ -3316,6 +3319,8 @@ var RotaryKnob = (p) => {
           "canvas",
           {
             className: "knob__surface knob__feedback",
+            width: 0,
+            height: 0,
             "aria-hidden": "true",
             ref: feedbackRef
           }

package/dist/chunks/{chunk-WOUWYJ6U.js → chunk-NVKL7ONR.js}

@@ -36,6 +36,7 @@ var pendingTargets = /* @__PURE__ */ new Set();
 var active = [];
 var lastScan = -Infinity;
 var needsScan = false;
+var boundariesChanged = false;
 var tickers = /* @__PURE__ */ new Set();
 U.subscribeTick = (listener) => {
   tickers.add(listener);
@@ -54,7 +55,7 @@ function scan(now, animations = pendingAnimations) {
   lastScan = now;
   needsScan = false;
   for (const target of pendingTargets)
-    for (const animation of target.getAnimations?.() || []) pendingAnimations.add(animation);
+    for (const animation of target.getAnimations?.({ subtree: true }) || []) pendingAnimations.add(animation);
   pendingTargets.clear();
   for (const animation of animations)
     if (!looping.has(animation) && animation.playState === "running" && isLoop(animation)) {
@@ -85,6 +86,16 @@ function scan(now, animations = pendingAnimations) {
 }
 function tick(now) {
   raf = null;
+  if (boundariesChanged) {
+    boundariesChanged = false;
+    for (const scope of preferenceScopes) {
+      const runnable = scope.enabled && !scope.root.closest?.("[data-ad-offscreen], [data-ad-paused]");
+      if (runnable === running.has(scope)) continue;
+      scope.previous = null;
+      if (runnable) running.add(scope);
+      else running.delete(scope);
+    }
+  }
   if (needsScan || now - lastScan > 400) scan(now);
   const deadline = performance.now() + 8;
   for (const item of measurements) {
@@ -132,6 +143,7 @@ function schedule() {
 }
 function refreshMotion() {
   needsScan = true;
+  boundariesChanged = true;
   schedule();
 }
 var wake = () => {
@@ -247,7 +259,7 @@ U.createMotion = (root = document) => {
       this.previous = null;
       const target = root.dataset ? root : root.host || document.documentElement;
       target.dataset.adMotion = enabled ? "on" : "off";
-      if (this.enabled) running.add(this);
+      if (this.enabled && !root.closest?.("[data-ad-offscreen], [data-ad-paused]")) running.add(this);
       else running.delete(this);
       schedule();
       return this.enabled;

package/dist/components/forms/FormFields/styles.css

@@ -47,7 +47,8 @@
     align-self: start;
     margin-block-start: calc(var(--ad-space-1) * 1.5);
   }
-  .ad-form-field > :has(> .ad-field) > :not(.ad-field) {
+  .ad-form-field > * > .ad-field ~ :not(.ad-field),
+  .ad-form-field > * > :not(.ad-field):has(~ .ad-field) {
     grid-row: 4;
   }
 }

package/dist/core.d.ts

@@ -2,7 +2,7 @@ export { ThemeProvider, themes, } from "./components/foundation/ThemeProvider/Th
 export type { ThemeName, ThemeProviderProps, } from "./components/foundation/ThemeProvider/ThemeProvider";
 export { useReducedMotion, useMotion } from "./core/providers/context";
 export { useBorder, usePauseOffscreen, useTick, useDecoration, useSmoothWheel, useTabShape, } from "./core/motion/hooks";
-export { getMotionStats, setMotionFrameRate, subscribeTick } from "./core/motion-engine.js";
+export { getMotionStats, refreshMotion, setMotionFrameRate, subscribeTick } from "./core/motion-engine.js";
 export { LocaleProvider, addMessages, getLocale, plural, setLocale, tr, translate, useLocale, useTr } from "./core/i18n";
 export type { Locale, LocaleProviderProps, Messages } from "./core/i18n";
 export { messages as builtInMessages } from "./core/messages";

package/dist/core.js

@@ -1,6 +1,7 @@
 import {
   ThemeProvider,
   getMotionStats,
+  refreshMotion,
   setMotionFrameRate,
   subscribeTick,
   themes,
@@ -10,7 +11,7 @@ import {
   useSmoothWheel,
   useTabShape,
   useTick
-} from "./chunks/chunk-WOUWYJ6U.js";
+} from "./chunks/chunk-NVKL7ONR.js";
 import {
   LocaleProvider,
   addMessages,
@@ -35,6 +36,7 @@ export {
   getLocale,
   getMotionStats,
   plural,
+  refreshMotion,
   setLocale,
   setMotionFrameRate,
   subscribeTick,

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-TQWTM23C.js";
-import "./chunks/chunk-WOUWYJ6U.js";
+} from "./chunks/chunk-N5XCG6VF.js";
+import "./chunks/chunk-NVKL7ONR.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {

package/dist/index.d.ts

@@ -151,7 +151,7 @@ export { WaveDecoration } from "./components/media/WaveDecoration/WaveDecoration
 export { Waveform } from "./components/media/Waveform/Waveform";
 export { useWaveformPeaks } from "./components/media/Waveform/useWaveformPeaks";
 export * from "./components/media/shared";
-export { getMotionStats, setMotionFrameRate, subscribeTick } from "./core/motion-engine.js";
+export { getMotionStats, refreshMotion, setMotionFrameRate, subscribeTick } from "./core/motion-engine.js";
 export { Router, useRouter, matchRoute, } from "./components/navigation/Router/Router";
 export type { RouterProps, RouterValue, RouteDefinition, RouteMatch, RouteAccessContext, } from "./components/navigation/Router/Router";
 export { Form, useForm, useFormContext } from "./components/forms/Form/Form";

package/dist/index.js

@@ -61,7 +61,7 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-TQWTM23C.js";
+} from "./chunks/chunk-N5XCG6VF.js";
 import {
   ThemeProvider,
   getMotionStats,
@@ -76,7 +76,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-WOUWYJ6U.js";
+} from "./chunks/chunk-NVKL7ONR.js";
 import {
   LocaleProvider,
   addMessages,
@@ -5789,8 +5789,6 @@ function Waveform({
       "data-playing": playing || void 0,
       style: {
         ...p.style,
-        "--ad-wave-played": `${progress * 100}%`,
-        "--ad-wave-progress": progress,
         "--ad-wave-hover": hover === null ? void 0 : `${hover * 100}%`,
         ...color3 ? { "--ad-wave-color": color3 } : {}
       },
@@ -5836,7 +5834,7 @@ function Waveform({
         seek(clamp(next, 0, duration));
       },
       children: [
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-floor", "aria-hidden": true }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-floor", style: { transform: `scaleX(${progress})` }, "aria-hidden": true }),
         /* @__PURE__ */ jsxs37(
           "svg",
           {
@@ -5879,13 +5877,13 @@ function Waveform({
             /* @__PURE__ */ jsx46("path", { d: corePath })
           ] })
         ] }),
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-bloom", style: { maskImage: masks.bloom, WebkitMaskImage: masks.bloom }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", {}) }),
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-lit", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", {}) }),
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-lit ad-waveform-lit-core", style: { maskImage: masks.core, WebkitMaskImage: masks.core }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", {}) }),
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-sheen-clip", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-window", children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-window-inner", children: /* @__PURE__ */ jsx46("i", { className: "ad-waveform-sheen" }) }) }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-bloom", style: { maskImage: masks.bloom, WebkitMaskImage: masks.bloom }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", { style: { transform: `scaleX(${progress})` } }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-lit", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", { style: { transform: `scaleX(${progress})` } }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-lit ad-waveform-lit-core", style: { maskImage: masks.core, WebkitMaskImage: masks.core }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", { style: { transform: `scaleX(${progress})` } }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-sheen-clip", "data-ad-paused": progress === 0 ? "" : void 0, style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-window", style: { transform: `translateX(calc(${progress * 100}% - 100%))` }, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-window-inner", style: { transform: `translateX(calc(100% - ${progress * 100}%))` }, children: /* @__PURE__ */ jsx46("i", { className: "ad-waveform-sheen" }) }) }) }),
         /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-depth", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true }),
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-shade", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-follow", children: /* @__PURE__ */ jsx46("i", { className: "ad-waveform-spot" }) }) }),
-        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-follow", "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-cursor", children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-sparks", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx46("i", {}, i)) }) }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-shade", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-follow", style: { transform: `translateX(${progress * 100}%)` }, children: /* @__PURE__ */ jsx46("i", { className: "ad-waveform-spot" }) }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-follow", style: { transform: `translateX(${progress * 100}%)` }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-cursor", children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-sparks", "data-ad-paused": playing ? void 0 : "", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx46("i", {}, i)) }) }) }),
         hover !== null && !disabled && /* @__PURE__ */ jsx46("span", { className: "ad-waveform-hover", "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-tip", children: timeText(hover * duration) }) })
       ]
     }
@@ -6825,6 +6823,7 @@ export {
   quantumFieldExperienceControls,
   quantumFieldModes,
   quantumFieldResolution,
+  refreshMotion,
   resizeEdges,
   resolveToken,
   resolveTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-ui-kit/react",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "NEO UI — React component library",
   "type": "module",
   "license": "MIT",