@neo-ui-kit/react 1.3.11 → 1.3.12

package/README.md

@@ -4,6 +4,11 @@ Migration: replace `@ad-voice/ui` with `@neo-ui-kit/react` in dependencies and i
 
 NEO UI — React + TypeScript UI kit: glass/ruby surfaces, animated neon borders, fields, tabs, dialogs, audio controls and a melody editor.
 
+## 1.3.12
+
+- MelodyRoll avoids repeated full style measurements for unrelated animated CSS variables and native root shadows while its beat is idle. Theme aliases still trigger reconfiguration.
+- Live-pitch measurements reached 59.7/59.0 main-thread FPS at CPU ×8/×16 in the library fixture. A karaoke-style animated native shadow still limits ×16 page updates; stable 60 FPS is not established for that scenario. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md).
+
 ## 1.3.11
 
 LevelMeter resumes its waveform when a signal arrives after silence, including when the first animation frame precedes the next sample.
@@ -42,7 +47,7 @@ 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.11.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.12.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-пакет).

package/dist/index.js

@@ -6757,18 +6757,88 @@ function createMelodyGlow(root, initialState, onReady) {
   for (const layer of [canvas, voiceCanvas, trailCanvas, noteCanvas, keyCanvas]) layer.setAttribute("aria-hidden", "true");
   let state = initialState, disposed = false, transferred = false, inView = true, revision = 0, signature = "";
   const visible = () => inView && !document.hidden && !root.closest("[data-ad-paused], [data-ad-offscreen]");
-  const visibility = () => worker.postMessage({ type: "visible", id, visible: visible() });
+  let lastVisible;
+  const visibility = () => {
+    const next = visible();
+    if (next === lastVisible) return;
+    lastVisible = next;
+    worker.postMessage({ type: "visible", id, visible: next });
+  };
   const resize = new ResizeObserver(configure);
   const intersection = new IntersectionObserver(([entry]) => {
     inView = entry.isIntersecting;
     visibility();
   });
+  let variableUses, variableSheets = [], nativeShadowChanged = false;
+  const readVariableUses = () => {
+    const uses = /* @__PURE__ */ new Map();
+    const declarations = (style, selector) => {
+      for (const property of style) for (const [, variable] of style.getPropertyValue(property).matchAll(/var\(\s*(--[\w-]+)/g)) {
+        if (!uses.has(variable)) uses.set(variable, []);
+        uses.get(variable).push({ property, selector });
+      }
+    };
+    const visit = (rules) => {
+      for (const rule of rules) {
+        if (rule.selectorText?.includes("[style") || rule.conditionText?.includes("style(")) throw new Error("Style-dependent selectors require full measurement");
+        if (rule.style) declarations(rule.style, rule.selectorText);
+        if (rule.styleSheet) visit(rule.styleSheet.cssRules);
+        else if (rule.cssRules) visit(rule.cssRules);
+      }
+    };
+    variableSheets = [...document.styleSheets, ...document.adoptedStyleSheets ?? []];
+    for (const sheet of variableSheets) visit(sheet.cssRules);
+    for (let node = root; node; node = node.parentElement) declarations(node.style, node === root ? null : void 0);
+    return uses;
+  };
+  const affectsRendering = (records) => {
+    const changed = /* @__PURE__ */ new Set();
+    for (const record of records) {
+      if (["data-ad-paused", "data-ad-offscreen"].includes(record.attributeName)) continue;
+      if (record.attributeName !== "style") return true;
+      const old = document.createElement("div").style;
+      old.cssText = record.oldValue ?? "";
+      const current = record.target.style;
+      for (const property of /* @__PURE__ */ new Set([...old, ...current])) {
+        if (old.getPropertyValue(property) === current.getPropertyValue(property) && old.getPropertyPriority(property) === current.getPropertyPriority(property)) continue;
+        if (["opacity", "transform", "translate", "rotate", "scale", "z-index"].includes(property)) continue;
+        if (!property.startsWith("--")) return true;
+        changed.add(property);
+        if (current.getPropertyValue(property).includes("var(")) variableUses = void 0;
+      }
+    }
+    if (!changed.size) return false;
+    try {
+      const sheets = [...document.styleSheets, ...document.adoptedStyleSheets ?? []];
+      if (sheets.length !== variableSheets.length || sheets.some((sheet, i) => sheet !== variableSheets[i])) variableUses = void 0;
+      variableUses ??= readVariableUses();
+      for (const variable of changed) for (const use of variableUses.get(variable) ?? []) {
+        if (use.property.startsWith("--")) {
+          changed.add(use.property);
+          continue;
+        }
+        if (use.property === "box-shadow" && state.beat === 0 && (use.selector === null || use.selector && !use.selector.includes(",") && root.matches(use.selector) && !root.querySelector(use.selector))) {
+          nativeShadowChanged = true;
+          continue;
+        }
+        return true;
+      }
+      return false;
+    } catch {
+      return true;
+    }
+  };
   const tokens = new MutationObserver((records) => {
     visibility();
-    if (records.some((record) => !["data-ad-paused", "data-ad-offscreen"].includes(record.attributeName))) configure();
+    if (affectsRendering(records)) configure();
   });
+  const stylesheets = new MutationObserver((records) => {
+    variableUses = void 0;
+    if (records.some((record) => record.target.nodeName === "STYLE" || record.target.parentElement?.nodeName === "STYLE" || [...record.addedNodes, ...record.removedNodes].some((node) => node.nodeType === 1 && node.matches('style,link[rel="stylesheet"]')))) configure();
+  });
+  if (document.head) stylesheets.observe(document.head, { childList: true, subtree: true, characterData: true });
   for (let node = root; node; node = node.parentElement)
-    tokens.observe(node, { attributes: true, attributeFilter: ["style", "class", "data-ad-theme", "data-ad-color-scheme", "data-ad-motion", "data-ad-paused", "data-ad-offscreen"] });
+    tokens.observe(node, { attributes: true, attributeOldValue: true, attributeFilter: ["style", "class", "data-ad-theme", "data-ad-color-scheme", "data-ad-motion", "data-ad-paused", "data-ad-offscreen"] });
   resize.observe(root);
   resize.observe(lane);
   intersection.observe(root);
@@ -6866,6 +6936,7 @@ function createMelodyGlow(root, initialState, onReady) {
   };
   function configure() {
     if (disposed || !root.clientWidth || !root.clientHeight) return;
+    variableUses = void 0;
     const temporary = [];
     try {
       const probe = document.createElement("div");
@@ -7074,6 +7145,7 @@ function createMelodyGlow(root, initialState, onReady) {
     resize.disconnect();
     intersection.disconnect();
     tokens.disconnect();
+    stylesheets.disconnect();
     keyObserver.disconnect();
     keyboard.removeEventListener("pointerover", keysChanged);
     keyboard.removeEventListener("pointerout", keysChanged);
@@ -7104,6 +7176,10 @@ function createMelodyGlow(root, initialState, onReady) {
         if (next.notes === state.notes) delete sent.notes;
         if (next.hits === state.hits) delete sent.hits;
         state = next;
+        if (nativeShadowChanged && next.beat > 0) {
+          nativeShadowChanged = false;
+          configure();
+        }
         worker.postMessage({ type: "state", id, state: sent, time: performance.timeOrigin + performance.now() });
       }
     },

package/package.json

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