@neo-ui-kit/react 1.3.9 → 1.3.10

package/README.md

@@ -4,6 +4,12 @@ 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.10
+
+- MelodyRoll renders notes, lyrics, key effects and voice effects in a shared worker while keeping native keyboard input and focus.
+- Bounded sprite caches and stable DOM reduce playback work; CSS/SVG fallback remains available.
+- CPU ×8 measurements are near 60 FPS; ×16 page updates measured 49.5–59.8 FPS while worker rendering stayed near 60. Stable 60 FPS for the complete scene is not yet established. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md).
+
 ## 1.3.9
 
 - Rounded field variants share the existing neon outline; outlined and underlined fields have transparent backgrounds, and filled fields have no animated border.
@@ -32,7 +38,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.9.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.10.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-пакет).
@@ -189,6 +195,8 @@ Keep `rows`, `columns`, `options`, and `initialValues` immutable: replace them w
 
 MelodyRoll also expects an immutable `notes` array: keep its reference stable during playback and replace it after editing notes. It caches pitch bounds and time bounds for blocks of 128 notes, skipping blocks outside the visible window. Input order and overlapping notes are preserved; heavily interleaved unsorted data can still require a full scan. The moving strip uses nearby time coordinates instead of ever-growing song offsets. Beat, voice level and accuracy updates are scoped to the elements that use them, avoiding restyling the whole keyboard and note strip. These changes preserve the existing glow, transitions, lyrics, seeking and wheel zoom; CPU ×8/×16 stress results are in the performance report.
 
+Version 1.3.10 renders notes, lyrics, key effects, beat glow, voice marker and the three-layer voice trail through a shared OffscreenCanvas worker. Two adjacent note windows bound the data sent to it; unchanged note batches are not resent on each tick. Native keyboard buttons retain pointer input, keyboard activation and focus. CSS supplies colours, shadows, timing and text geometry; readable webfont sources are loaded into the worker before handoff. Note sprites are cached (512 base sprites; filtered sprites limited to 8 × 1024² physical pixels), and structural DOM stays unchanged during playback. CSS/SVG remains active until readiness and returns on failure, unavailable APIs/CSP, or unsupported styles/font sources. Hidden/paused scenes stop drawing; the last unmount terminates the worker. Canvas and CSS antialiasing differ slightly. In repeated 30-second runs, page updates reached about 59.9–60 FPS at CPU ×8 and 49.5–59.5 FPS at ×16; the worker drawing loop stayed near 60 FPS. Stable 60 FPS for the complete scene is **not yet established**. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md) for measurements and limits.
+
 For large tables, use `pageSize` or opt into `virtualize` to bound mounted rows. Virtualization bounds rendering, not the cost of client-side sorting/filtering: use the manual server contracts for datasets that are too large to process locally. Open Select/Autocomplete lists are not virtualized: filter very large datasets before supplying options. `PeoplePicker.onSearch(query, signal)` receives an optional `AbortSignal`; forward it to your data client to cancel superseded requests. Expensive custom renderers, validators, and aggregates still need their own work budget.
 
 ## Entry points

package/dist/chunks/{chunk-VK6GHRLV.js → chunk-RM7YNNMZ.js}

@@ -49,6 +49,7 @@ var PianoKeyboard = /* @__PURE__ */ memo(function PianoKeyboard2({
   const key = (midi, top, size, black) => {
     const props = {
       className: "ad-piano-key",
+      "data-midi": midi,
       "data-black": black || void 0,
       "data-active": midi === activeMidi || void 0,
       "data-hit": midi === activeMidi && hit || void 0,

package/dist/components/media/MelodyRoll/melody-glow.d.ts

@@ -0,0 +1,5 @@
+export function createMelodyGlow(root: any, initialState: any, onReady: any): {
+    update(next: any): void;
+    ready(data: any): void;
+    dispose: () => void;
+} | null;

package/dist/components/media/MelodyRoll/styles.css

@@ -9,11 +9,10 @@
   --ad-roll-keys: clamp(2.75rem, 8%, 4.5rem);
   position: relative;
   display: grid;
-  grid-template-columns: var(--ad-roll-keys) minmax(0, 1fr);
   width: 100%;
   height: 100%;
   min-height: 8rem;
-  overflow: hidden;
+  overflow: visible;
   isolation: isolate;
   /* Room for the hairline edge that the glass layer below draws. */
   padding: 0.0625rem;
@@ -21,11 +20,66 @@
   box-shadow: 0 0 calc(var(--ad-roll-beat) * 1.6rem) rgb(from var(--ad-primary) r g b / 0.25);
   transition: box-shadow 0.12s;
 }
+.ad-melody-roll-content {
+  display: grid;
+  grid-template-columns: var(--ad-roll-keys) minmax(0, 1fr);
+  width: calc(100% + 0.125rem);
+  height: calc(100% + 0.125rem);
+  margin: -0.0625rem;
+  padding: 0.0625rem;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.ad-melody-glow {
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
+}
+.ad-melody-voice-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  pointer-events: none;
+}
+.ad-melody-note-canvas, .ad-melody-key-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.ad-melody-key-canvas { z-index: -1; }
+.ad-melody-roll[data-ad-foreground] .ad-melody-roll-seconds { visibility: hidden; }
+.ad-melody-roll-keys { isolation: isolate; }
+.ad-melody-roll[data-ad-foreground] .ad-melody-note:not([data-render-probe]) {
+  visibility: hidden;
+  transition: none;
+  animation: none;
+}
+.ad-melody-roll[data-ad-foreground] .ad-melody-roll-keys:not([data-render-probe]) > .ad-piano-key {
+  background: transparent;
+  box-shadow: none;
+  color: transparent;
+  border-color: transparent;
+  filter: none;
+  translate: none;
+  transition: none;
+  animation: none;
+}
+.ad-melody-roll[data-ad-glow] {
+  box-shadow: none;
+  transition: none;
+}
+.ad-melody-roll[data-ad-glow] :is(.ad-melody-roll-light, .ad-melody-playhead-light, .ad-melody-voice, svg.ad-melody-trail) {
+  visibility: hidden;
+}
 /* The glass: its own still layer, so the frosted backdrop is never redrawn by the beat or by the
    notes moving over it. */
 .ad-melody-roll::before,
-.ad-melody-roll::after {
-  --ad-roll-beat: inherit;
+.ad-melody-roll-light {
   content: "";
   position: absolute;
   inset: 0;
@@ -42,10 +96,9 @@
   backdrop-filter: blur(0.5rem);
 }
 /* The beat: a brighter edge and a warmer light over the glass, faded in with the music. */
-.ad-melody-roll::after {
+.ad-melody-roll-light {
   border-color: rgb(from var(--ad-primary) r g b / 0.35);
   background: radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%);
-  opacity: var(--ad-roll-beat);
   transition: opacity 0.12s;
   will-change: opacity;
 }
@@ -161,15 +214,13 @@
     0 0 1rem var(--ad-primary);
 }
 /* The playhead flares on the beat: a wider glow, drawn once, faded in. */
-.ad-melody-playhead::after {
-  --ad-roll-beat: inherit;
+.ad-melody-playhead-light {
   content: "";
   position: absolute;
   inset: 0;
   box-shadow:
     0 0 1.6rem #fff,
     0 0 2.6rem var(--ad-primary);
-  opacity: var(--ad-roll-beat);
   will-change: opacity;
 }
 /* The singer's voice: grows with loudness, greens with accuracy. */

package/dist/editor.js

@@ -1,6 +1,6 @@
 import {
   PianoRoll
-} from "./chunks/chunk-VK6GHRLV.js";
+} from "./chunks/chunk-RM7YNNMZ.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {