@neo-ui-kit/react 1.3.11 → 1.3.13

package/README.md

@@ -4,6 +4,15 @@ 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.13
+
+MelodyRoll skips repainting empty glow/voice/trail layers and a settled keyboard. A disappearing voice still clears its last frame, and keyboard hover, press and hit transitions retain their final frame. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md) for karaoke measurements and remaining limits under CPU ×16.
+
+## 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 +51,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.13.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

@@ -6327,6 +6327,7 @@ function renderGlow() {
     scene.noteStates = kept;
     scene.keyStates ??= /* @__PURE__ */ new Map();
     const keyStates = /* @__PURE__ */ new Map();
+    let keysUntil = 0;
     for (const key of style.keys) {
       const previous = scene.keyStates.get(key.midi);
       const active = state.pitch !== void 0 && key.midi === Math.round(state.pitch);
@@ -6334,6 +6335,7 @@ function renderGlow() {
       const pressed = scene.pressed?.includes(key.midi);
       const variant = hit ? "hit" : active ? "active" : pressed ? "pressed" : "base";
       const target = key[variant];
+      if (previous?.variant !== variant) scene.keysDirty = true;
       const item = {
         key,
         target,
@@ -6346,11 +6348,12 @@ function renderGlow() {
         hitStart: hit && !previous?.hit ? previous ? now : scene.keyTimes?.[key.midi] ?? now : previous?.hitStart ?? now
       };
       keyStates.set(key.midi, item);
-      until = Math.max(until, ...["color", "shadows", "shift"].map((name) => item[name].start + item[name].duration), hit && key.hitDuration > 0 ? item.hitStart + key.hitDuration * key.hitIterations : 0);
+      keysUntil = Math.max(keysUntil, ...["color", "shadows", "shift"].map((name) => item[name].start + item[name].duration), hit && key.hitDuration > 0 ? item.hitStart + key.hitDuration * key.hitIterations : 0);
     }
     scene.keyStates = keyStates;
     scene.noteTimes = scene.keyTimes = void 0;
-    scene.foregroundUntil = until;
+    scene.keysUntil = keysUntil;
+    scene.foregroundUntil = Math.max(until, keysUntil);
   }
   function drawForeground(scene, now) {
     if (!scene.foreground) return;
@@ -6434,6 +6437,10 @@ function renderGlow() {
       ctx.drawImage(painted, x - padding / dpr, top + height / 2 + (y - padding / dpr - top - height / 2) * scale, painted.width / dpr, painted.height / dpr * scale);
       ctx.restore();
     }
+    const keysAnimating = now < scene.keysUntil;
+    if (!scene.keysDirty && !scene.keysAnimating && !keysAnimating) return;
+    scene.keysDirty = false;
+    scene.keysAnimating = keysAnimating;
     keyCtx.clearRect(0, 0, style.keyWidth, style.keyHeight);
     scene.keySprites ??= /* @__PURE__ */ new Map();
     for (const item of scene.keyStates.values()) {
@@ -6489,7 +6496,11 @@ function renderGlow() {
   }
   function drawVoice(scene, now) {
     const { voiceCtx: ctx, laneWidth, laneHeight, state, voiceStyle: style, dpr } = scene;
+    const active = state.pitch !== void 0 || state.beat > 0;
+    if (!active && !scene.voicePainted) return;
+    scene.voicePainted = active;
     ctx.clearRect(0, 0, laneWidth, laneHeight);
+    if (!active) return;
     ctx.save();
     const head = state.lead * laneWidth - scene.headWidth / 2;
     const offset = laneWidth + 200;
@@ -6541,7 +6552,11 @@ function renderGlow() {
   }
   function drawTrail(scene) {
     const { trailCtx: ctx, laneWidth, laneHeight, state, trailStyle } = scene;
+    const active = scene.trail.some((point) => point.pitch !== void 0);
+    if (!active && !scene.trailPainted) return;
+    scene.trailPainted = active;
     ctx.clearRect(0, 0, laneWidth, laneHeight);
+    if (!active) return;
     const paths = [];
     let path = null;
     for (const point of scene.trail) {
@@ -6568,8 +6583,9 @@ function renderGlow() {
   }
   function draw(scene, now) {
     const { ctx, width, height, pad, radius: radius2, blur, color: color3, dpr } = scene;
-    ctx.clearRect(0, 0, width + pad * 2, height + pad * 2);
     const amount = value(scene, now);
+    if (amount > 0 || scene.glowPainted) ctx.clearRect(0, 0, width + pad * 2, height + pad * 2);
+    scene.glowPainted = amount > 0;
     if (amount > 0) {
       ctx.save();
       ctx.beginPath();
@@ -6661,6 +6677,7 @@ function renderGlow() {
           scene.keyCtx = scene.keyCanvas.getContext("2d");
           scene.noteCtx.setTransform(data.dpr, 0, 0, data.dpr, 0, 0);
           scene.keyCtx.setTransform(data.dpr, 0, 0, data.dpr, 0, 0);
+          scene.keysDirty = true;
           scene.sprites?.clear();
           scene.keySprites?.clear();
           scene.filteredSprites?.clear();
@@ -6699,6 +6716,7 @@ function renderGlow() {
         retargetVoice(scene, now, previous);
         retargetForeground(scene, now);
       } else if (scene && data.type === "keys") {
+        scene.keysDirty = true;
         scene.pressed = data.pressed;
         scene.hovered = data.hovered;
         retargetForeground(scene, now);
@@ -6757,18 +6775,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 +6954,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 +7163,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 +7194,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.13",
   "description": "NEO UI — React component library",
   "type": "module",
   "license": "MIT",