@neo-ui-kit/react 1.3.12 → 1.3.13

package/README.md

@@ -4,6 +4,10 @@ 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.
@@ -47,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.12.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);

package/package.json

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