@neo-ui-kit/react 1.3.12 → 1.3.14

package/README.md

@@ -4,6 +4,20 @@ 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.14
+
+Animated borders composite their moving lights in bounded buffers instead of repainting full-size intermediate surfaces. The same masks, glow textures, speeds and overlapping-light composition are preserved.
+
+LevelMeter computes each sample's SVG coordinates once, writes only the final contour after a delayed frame, and skips identical contours. Sampling, attack/release, SVG geometry, gradients and glow remain unchanged. CPU ×8/×16 measurements and limitations are recorded in the performance report; this does not establish a universal 60 FPS guarantee.
+
+The unchanged SVG subtree is reused across signal updates. A committed value reaches the renderer before the next paint, including when waking from silence; accessible values still update with the signal.
+
+LevelMeter renders its waveform in a shared worker when supported, retaining the SVG fallback and existing glow. Its accessible values remain on the main thread.
+
+## 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 +61,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.14.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/chunks/{chunk-OCH27SNY.js → chunk-BHX5MDJL.js}

@@ -20,23 +20,55 @@ function renderBorders() {
     }
   };
   const draw = (scene) => {
-    const { ctx, width, height, points, length, radius } = scene;
+    const { ctx, width, height, points, length, radius, dpr } = scene;
+    const lights = scene.lights.map((light) => {
+      const index = (light.phase + scene.elapsed * light.speed / length) % 1 * 1024;
+      const lo = Math.floor(index), hi = (lo + 1) % 1024, weight = index - lo;
+      return {
+        x: points[lo * 2] * (1 - weight) + points[hi * 2] * weight - radius + 16,
+        y: points[lo * 2 + 1] * (1 - weight) + points[hi * 2 + 1] * weight - radius + 16
+      };
+    });
+    const regions = lights.map(({ x, y }) => ({
+      x: Math.max(0, Math.floor(x * dpr - 1) / dpr),
+      y: Math.max(0, Math.floor(y * dpr - 1) / dpr),
+      right: Math.min(scene.canvas.width, Math.ceil((x + radius * 2) * dpr + 1)) / dpr,
+      bottom: Math.min(scene.canvas.height, Math.ceil((y + radius * 2) * dpr + 1)) / dpr
+    }));
+    const [first, second] = regions;
+    if (second && first.x < second.right && second.x < first.right && first.y < second.bottom && second.y < first.bottom) {
+      regions.splice(0, 2, {
+        x: Math.min(first.x, second.x),
+        y: Math.min(first.y, second.y),
+        right: Math.max(first.right, second.right),
+        bottom: Math.max(first.bottom, second.bottom)
+      });
+    }
     ctx.clearRect(0, 0, width, height);
     for (const layer of scene.layers) {
       const paint = layer.ctx;
-      paint.globalCompositeOperation = "source-over";
-      paint.clearRect(0, 0, width, height);
-      for (const light of scene.lights) {
-        const index = (light.phase + scene.elapsed * light.speed / length) % 1 * 1024;
-        const lo = Math.floor(index), hi = (lo + 1) % 1024, weight = index - lo;
-        const x = points[lo * 2] * (1 - weight) + points[hi * 2] * weight;
-        const y = points[lo * 2 + 1] * (1 - weight) + points[hi * 2 + 1] * weight;
-        paint.drawImage(layer.texture, x - radius + 16, y - radius + 16, radius * 2, radius * 2);
-      }
-      paint.globalCompositeOperation = "destination-in";
-      paint.drawImage(layer.mask, 0, 0, width, height);
       ctx.globalAlpha = layer.opacity;
-      ctx.drawImage(layer.buffer, 0, 0, width, height);
+      for (const { x, y, right, bottom } of regions) {
+        const w = right - x, h = bottom - y;
+        paint.globalCompositeOperation = "source-over";
+        paint.clearRect(0, 0, layer.buffer.width / dpr, layer.buffer.height / dpr);
+        for (const light of lights)
+          paint.drawImage(layer.texture, light.x - x, light.y - y, radius * 2, radius * 2);
+        paint.globalCompositeOperation = "destination-in";
+        paint.drawImage(
+          layer.mask,
+          x * layer.mask.width / width,
+          y * layer.mask.height / height,
+          w * layer.mask.width / width,
+          h * layer.mask.height / height,
+          0,
+          0,
+          w,
+          h
+        );
+        const scaleX = width * dpr / scene.canvas.width, scaleY = height * dpr / scene.canvas.height;
+        ctx.drawImage(layer.buffer, 0, 0, w * dpr, h * dpr, x * scaleX, y * scaleY, w * scaleX, h * scaleY);
+      }
     }
     ctx.globalAlpha = 1;
   };
@@ -76,7 +108,10 @@ function renderBorders() {
       next.ctx = next.canvas.getContext("2d");
       next.ctx.setTransform(data.dpr, 0, 0, data.dpr, 0, 0);
       for (const layer of next.layers) {
-        layer.buffer = new OffscreenCanvas(next.canvas.width, next.canvas.height);
+        layer.buffer = new OffscreenCanvas(
+          Math.min(next.canvas.width, Math.ceil(next.radius * 4 * data.dpr) + 4),
+          Math.min(next.canvas.height, Math.ceil(next.radius * 4 * data.dpr) + 4)
+        );
         layer.ctx = layer.buffer.getContext("2d");
         layer.ctx.setTransform(data.dpr, 0, 0, data.dpr, 0, 0);
       }

package/dist/chunks/{chunk-L6VCC7AS.js → chunk-VEAA27XZ.js}

@@ -2,7 +2,7 @@ import {
   themes,
   useBorder,
   usePauseOffscreen
-} from "./chunk-OCH27SNY.js";
+} from "./chunk-BHX5MDJL.js";
 import {
   assignRef,
   clamp,

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

@@ -13,6 +13,16 @@
     0 0 0.22rem color-mix(in srgb, var(--ad-red) 78%, transparent)
   );
 }
+.ad-level-meter-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.ad-level-meter[data-ad-canvas] > svg {
+  visibility: hidden;
+}
 .ad-level-meter-axis {
   stroke: color-mix(in srgb, var(--ad-red) 24%, transparent);
   stroke-width: 0.7;

package/dist/core.js

@@ -11,7 +11,7 @@ import {
   useSmoothWheel,
   useTabShape,
   useTick
-} from "./chunks/chunk-OCH27SNY.js";
+} from "./chunks/chunk-BHX5MDJL.js";
 import {
   LocaleProvider,
   addMessages,

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-L6VCC7AS.js";
-import "./chunks/chunk-OCH27SNY.js";
+} from "./chunks/chunk-VEAA27XZ.js";
+import "./chunks/chunk-BHX5MDJL.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-L6VCC7AS.js";
+} from "./chunks/chunk-VEAA27XZ.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -79,7 +79,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-OCH27SNY.js";
+} from "./chunks/chunk-BHX5MDJL.js";
 import {
   LocaleProvider,
   addMessages,
@@ -5968,20 +5968,262 @@ function PlaybackTrack({ audio, playing, position: controlledPosition, disabled,
 }
 
 // src/components/media/LevelMeter/LevelMeter.tsx
-import { useEffect as useEffect13, useRef as useRef27 } from "react";
+import { useEffect as useEffect13, useLayoutEffect as useLayoutEffect5, useMemo as useMemo5, useRef as useRef27 } from "react";
 import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 var SAMPLES = 64;
 var WIDTH = 256;
 var HEIGHT = 24;
 var MID2 = HEIGHT / 2;
 var STEP = WIDTH / (SAMPLES - 1);
+var X = Array.from({ length: SAMPLES + 1 }, (_, i) => (i * STEP).toFixed(2));
 var SAMPLE_MS = 28;
+var waveSample = (level) => {
+  const height = 1 + level ** 0.68 * (MID2 - 3);
+  return { level, upper: (MID2 - height).toFixed(2), lower: (MID2 + height).toFixed(2) };
+};
 var wavePath2 = (samples) => {
-  const point = (i, level, side) => `${(i * STEP).toFixed(2)} ${(MID2 + side * (1 + level ** 0.68 * (MID2 - 3))).toFixed(2)}`;
-  const upper = samples.map((level, i) => point(i, level, -1));
-  const lower = samples.map((level, i) => point(i, level, 1)).reverse();
+  const upper = samples.map((sample, i) => `${X[i]} ${sample.upper}`);
+  const lower = samples.map((sample, i) => `${X[i]} ${sample.lower}`).reverse();
   return `M${upper.join("L")}L${lower.join("L")}Z`;
 };
+function renderMeters() {
+  const scenes = /* @__PURE__ */ new Map();
+  onmessage = ({ data }) => {
+    if (data.remove !== void 0) {
+      scenes.delete(data.remove);
+      return;
+    }
+    const completed = [], failed = [];
+    for (const frame of data.frames ?? []) {
+      try {
+        let scene = scenes.get(frame.id);
+        if (frame.canvas) {
+          const ctx2 = frame.canvas.getContext("2d");
+          if (!ctx2 || !frame.style) throw new Error("Canvas unavailable");
+          scene = { canvas: frame.canvas, ctx: ctx2, style: frame.style, fill: "", path: new Path2D(), revision: frame.revision };
+          scenes.set(frame.id, scene);
+          frame.canvas.addEventListener("contextlost", () => {
+            scenes.delete(frame.id);
+            postMessage({ failed: [frame.id] });
+          });
+        }
+        if (!scene) continue;
+        const { canvas, ctx } = scene;
+        if (frame.style) {
+          scene.style = frame.style;
+          scene.revision = frame.revision;
+          canvas.width = frame.style.width;
+          canvas.height = frame.style.height;
+          scene.fill = frame.style.fill;
+          if (frame.style.stops.length) {
+            const gradient = ctx.createLinearGradient(0, 0, 260.06, 0);
+            for (const stop of frame.style.stops) gradient.addColorStop(stop.at, stop.color);
+            scene.fill = gradient;
+          }
+        }
+        if (frame.d !== void 0) scene.path = new Path2D(frame.d);
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.scale(canvas.width / 256, canvas.height / 24);
+        ctx.globalAlpha = scene.style.lineAlpha;
+        ctx.strokeStyle = scene.style.stroke;
+        ctx.lineWidth = scene.style.lineWidth;
+        ctx.beginPath();
+        ctx.moveTo(0, 12);
+        ctx.lineTo(256, 12);
+        ctx.stroke();
+        ctx.translate(frame.offset, 0);
+        ctx.globalAlpha = scene.style.fillAlpha;
+        ctx.fillStyle = scene.fill;
+        ctx.fill(scene.path);
+        completed.push({ id: frame.id, revision: scene.revision });
+      } catch {
+        scenes.delete(frame.id);
+        failed.push(frame.id);
+      }
+    }
+    postMessage({ ack: true, completed, failed });
+  };
+}
+var meterWorker;
+var meterUrl;
+var meterSerial = 0;
+var meterBusy = false;
+var meterQueued = false;
+var meterClients = /* @__PURE__ */ new Map();
+var meterFrames = /* @__PURE__ */ new Map();
+function stopMeters() {
+  meterWorker?.terminate();
+  if (meterUrl) URL.revokeObjectURL(meterUrl);
+  meterWorker = void 0;
+  meterUrl = void 0;
+  meterBusy = false;
+  meterFrames.clear();
+}
+function failMeters() {
+  for (const client of [...meterClients.values()]) client.dispose();
+  stopMeters();
+}
+function sendMeter(frame) {
+  if (frame) {
+    const pending = meterFrames.get(frame.id);
+    if (pending) Object.assign(pending, frame);
+    else meterFrames.set(frame.id, frame);
+  }
+  if (meterQueued || meterBusy || !meterWorker || !meterFrames.size) return;
+  meterQueued = true;
+  queueMicrotask(() => {
+    meterQueued = false;
+    if (!meterWorker || meterBusy || !meterFrames.size) return;
+    const frames = [...meterFrames.values()];
+    meterFrames.clear();
+    meterBusy = true;
+    try {
+      meterWorker.postMessage({ frames }, frames.flatMap((frame2) => frame2.canvas ? [frame2.canvas] : []));
+    } catch {
+      failMeters();
+    }
+  });
+}
+function startMeters() {
+  if (meterWorker) return meterWorker;
+  try {
+    meterUrl = URL.createObjectURL(new Blob([`(${renderMeters.toString()})()`], { type: "text/javascript" }));
+    const worker = new Worker(meterUrl);
+    meterWorker = worker;
+    worker.onerror = () => {
+      if (meterWorker === worker) failMeters();
+    };
+    worker.onmessage = ({ data }) => {
+      if (meterWorker !== worker) return;
+      if (data.ack) meterBusy = false;
+      for (const id of data.failed ?? []) meterClients.get(id)?.dispose();
+      for (const item of data.completed ?? []) meterClients.get(item.id)?.ready(item.revision);
+      sendMeter();
+    };
+    return worker;
+  } catch {
+    stopMeters();
+    return void 0;
+  }
+}
+function waveCanvas(shape, initial) {
+  if (typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof Path2D === "undefined" || typeof MutationObserver === "undefined" || typeof HTMLCanvasElement === "undefined" || !HTMLCanvasElement.prototype.transferControlToOffscreen) return null;
+  const svg = shape.ownerSVGElement, root = svg?.parentElement;
+  const axis = svg?.querySelector("line");
+  if (!svg || !root || !axis) return null;
+  const canvas = document.createElement("canvas");
+  const worker = startMeters();
+  if (!worker) return null;
+  const id = ++meterSerial;
+  canvas.className = "ad-level-meter-canvas";
+  canvas.setAttribute("aria-hidden", "true");
+  root.append(canvas);
+  const ancestors = [];
+  for (let node = root; node; node = node.parentElement) ancestors.push(node);
+  let disposed = false, enabled = false, queued = false, ready = false, transferred = false, revision = 0;
+  let current = initial, offset = 0, sent = "";
+  const native = () => {
+    root.removeAttribute("data-ad-canvas");
+    canvas.hidden = true;
+    shape.setAttribute("d", current);
+    shape.setAttribute("transform", `translate(${offset} 0)`);
+  };
+  const draw = (d, shift) => {
+    current = d;
+    offset = shift;
+    if (!enabled || disposed) return false;
+    sendMeter({ id, revision, offset, ...sent !== d ? { d } : {} });
+    sent = d;
+    return ready;
+  };
+  function update() {
+    if (disposed) return;
+    const surface = getComputedStyle(svg), wave = getComputedStyle(shape), line2 = getComputedStyle(axis);
+    const host = getComputedStyle(root);
+    const gradient = svg.querySelector("linearGradient");
+    const width = parseFloat(surface.width), height = parseFloat(surface.height);
+    const unsupported = [surface.transform, surface.backgroundImage, wave.stroke, wave.filter, wave.clipPath, wave.maskImage, line2.strokeDasharray].some((value) => value !== "none") || line2.strokeLinecap !== "butt" || wave.fill.startsWith("url(") && (!gradient || wave.fill.match(/#([^"')]+)["']?\)$/)?.[1] !== gradient.id || ["gradientUnits", "gradientTransform", "x1", "x2", "y1", "y2"].some((name) => gradient.hasAttribute(name))) || [surface, host].some((style) => ["Top", "Right", "Bottom", "Left"].some((side) => parseFloat(style.getPropertyValue(`padding-${side.toLowerCase()}`)) > 0 || parseFloat(style.getPropertyValue(`border-${side.toLowerCase()}-width`)) > 0)) || [svg, ...ancestors].some((node) => node.getAnimations?.({ subtree: node === svg }).some((animation) => animation.playState === "running"));
+    enabled = width > 0 && height > 0 && !unsupported;
+    if (!enabled) {
+      native();
+      return;
+    }
+    const ratio = devicePixelRatio || 1;
+    canvas.style.filter = surface.filter;
+    canvas.style.opacity = surface.opacity;
+    canvas.style.backgroundColor = surface.backgroundColor;
+    const stops = wave.fill.startsWith("url(") ? [...svg.querySelectorAll("stop")].map((stop) => {
+      const style = getComputedStyle(stop);
+      return { at: stop.offset.baseVal, color: `color-mix(in srgb, ${style.stopColor} ${Number(style.stopOpacity) * 100}%, transparent)` };
+    }) : [];
+    try {
+      const surface2 = transferred ? void 0 : canvas.transferControlToOffscreen();
+      transferred = true;
+      ready = false;
+      revision++;
+      native();
+      sent = current;
+      sendMeter({ id, revision, d: current, offset, ...surface2 ? { canvas: surface2 } : {}, style: {
+        width: Math.ceil(width * ratio),
+        height: Math.ceil(height * ratio),
+        stroke: line2.stroke,
+        lineWidth: parseFloat(line2.strokeWidth),
+        lineAlpha: Number(line2.opacity) * Number(line2.strokeOpacity),
+        fillAlpha: Number(wave.opacity) * Number(wave.fillOpacity),
+        fill: wave.fill,
+        stops
+      } });
+    } catch {
+      dispose();
+    }
+  }
+  function queue() {
+    if (queued || disposed) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      if (!disposed) update();
+    });
+  }
+  const resized = createResizeObserver(queue);
+  resized.observe(svg);
+  const styles = new MutationObserver(queue);
+  for (const node of ancestors) styles.observe(node, { attributes: true, attributeFilter: ["style", "class", "data-ad-theme", "data-ad-color-scheme"] });
+  styles.observe(svg, { subtree: true, childList: true, attributes: true, attributeFilter: ["style", "class", "fill", "stroke", "stop-color", "stop-opacity", "offset"] });
+  styles.observe(document.head, { subtree: true, childList: true, characterData: true });
+  const transition = (event) => {
+    if (event.target instanceof Element && (event.target.contains(svg) || svg.contains(event.target))) queue();
+  };
+  const events = ["transitionrun", "transitionend", "transitioncancel", "animationstart", "animationend", "animationcancel"];
+  for (const event of events) document.addEventListener(event, transition);
+  window.addEventListener("resize", queue);
+  canvas.addEventListener("contextlost", dispose);
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    enabled = false;
+    resized.disconnect();
+    styles.disconnect();
+    window.removeEventListener("resize", queue);
+    canvas.removeEventListener("contextlost", dispose);
+    for (const event of events) document.removeEventListener(event, transition);
+    meterFrames.delete(id);
+    meterClients.delete(id);
+    if (meterWorker === worker) worker?.postMessage({ remove: id });
+    if (!meterClients.size) stopMeters();
+    native();
+    canvas.remove();
+  }
+  meterClients.set(id, { dispose, ready(next) {
+    if (disposed || !enabled || next !== revision || ready) return;
+    ready = true;
+    canvas.hidden = false;
+    root.setAttribute("data-ad-canvas", "");
+  } });
+  update();
+  return { draw, dispose };
+}
 var loudness = (analyser, buffer) => {
   analyser.getFloatTimeDomainData(buffer);
   let sum = 0;
@@ -6002,15 +6244,16 @@ function LevelMeter({
   const target = useRef27(0);
   const wake = useRef27(() => void 0);
   const level = clamp(value) / 100;
-  useEffect13(() => {
+  useLayoutEffect5(() => {
     target.current = active ? level : 0;
     if (active && level > 0) wake.current();
   }, [active, level]);
   useEffect13(() => {
     const shape = path.current;
     if (!shape) return;
-    const samples = Array.from({ length: SAMPLES + 1 }, () => 0);
-    shape.setAttribute("d", wavePath2(samples));
+    const samples = Array.from({ length: SAMPLES + 1 }, () => waveSample(0));
+    let drawnPath = wavePath2(samples);
+    shape.setAttribute("d", drawnPath);
     wake.current = () => void 0;
     if (!active) return;
     let context;
@@ -6024,6 +6267,8 @@ function LevelMeter({
       source.connect(analyser);
     }
     const buffer = new Float32Array(analyser?.fftSize ?? 0);
+    const painter = waveCanvas(shape, drawnPath);
+    let nativePath = drawnPath;
     let envelope = 0;
     let carry = 0;
     let last = performance.now();
@@ -6032,24 +6277,32 @@ function LevelMeter({
       carry += Math.min(250, now - last);
       last = now;
       const input = analyser ? loudness(analyser, buffer) : target.current;
+      const sampled = carry >= SAMPLE_MS;
       while (carry >= SAMPLE_MS) {
         carry -= SAMPLE_MS;
         envelope += (input - envelope) * (input > envelope ? 0.3 : 0.11);
         if (envelope < 1e-3) envelope = 0;
         samples.shift();
-        samples.push(envelope);
-        shape.setAttribute("d", wavePath2(samples));
+        samples.push(waveSample(envelope));
+      }
+      if (sampled) {
+        const nextPath = wavePath2(samples);
+        drawnPath = nextPath;
       }
-      if (!analyser && input === 0 && envelope === 0 && samples.every((sample) => sample === 0)) {
-        shape.setAttribute("transform", "translate(0 0)");
+      const quiet = !analyser && input === 0 && envelope === 0 && samples.every((sample) => sample.level === 0);
+      const shift = quiet ? 0 : Number((-(carry / SAMPLE_MS) * STEP).toFixed(3));
+      if (!painter?.draw(drawnPath, shift)) {
+        if (nativePath !== drawnPath) {
+          shape.setAttribute("d", drawnPath);
+          nativePath = drawnPath;
+        }
+        shape.setAttribute("transform", `translate(${shift} 0)`);
+      }
+      if (quiet) {
         stop?.();
         stop = void 0;
         return;
       }
-      shape.setAttribute(
-        "transform",
-        `translate(${(-(carry / SAMPLE_MS) * STEP).toFixed(3)} 0)`
-      );
     };
     wake.current = () => {
       if (stop) return;
@@ -6061,10 +6314,35 @@ function LevelMeter({
     return () => {
       wake.current = () => void 0;
       stop?.();
+      painter?.dispose();
       source?.disconnect();
       void context?.close();
     };
   }, [active, stream]);
+  const waveform = useMemo5(() => /* @__PURE__ */ jsxs39(
+    "svg",
+    {
+      viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx48("defs", { children: /* @__PURE__ */ jsxs39("linearGradient", { id: `${id}-wave`, children: [
+          /* @__PURE__ */ jsx48("stop", { stopColor: "var(--ad-primary-700)" }),
+          /* @__PURE__ */ jsx48("stop", { offset: "0.52", stopColor: "var(--ad-red)" }),
+          /* @__PURE__ */ jsx48("stop", { offset: "1", stopColor: "var(--ad-secondary-100)" })
+        ] }) }),
+        /* @__PURE__ */ jsx48("line", { className: "ad-level-meter-axis", x2: WIDTH, y1: MID2, y2: MID2 }),
+        /* @__PURE__ */ jsx48(
+          "path",
+          {
+            ref: path,
+            className: "ad-level-meter-wave",
+            fill: `url(#${id}-wave)`
+          }
+        )
+      ]
+    }
+  ), [id]);
   return /* @__PURE__ */ jsx48(
     "div",
     {
@@ -6076,30 +6354,7 @@ function LevelMeter({
       "aria-valuenow": stream ? void 0 : Math.round(active ? level * 100 : 0),
       "data-active": active,
       "data-compact": compact || void 0,
-      children: /* @__PURE__ */ jsxs39(
-        "svg",
-        {
-          viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
-          preserveAspectRatio: "none",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsx48("defs", { children: /* @__PURE__ */ jsxs39("linearGradient", { id: `${id}-wave`, children: [
-              /* @__PURE__ */ jsx48("stop", { stopColor: "var(--ad-primary-700)" }),
-              /* @__PURE__ */ jsx48("stop", { offset: "0.52", stopColor: "var(--ad-red)" }),
-              /* @__PURE__ */ jsx48("stop", { offset: "1", stopColor: "var(--ad-secondary-100)" })
-            ] }) }),
-            /* @__PURE__ */ jsx48("line", { className: "ad-level-meter-axis", x2: WIDTH, y1: MID2, y2: MID2 }),
-            /* @__PURE__ */ jsx48(
-              "path",
-              {
-                ref: path,
-                className: "ad-level-meter-wave",
-                fill: `url(#${id}-wave)`
-              }
-            )
-          ]
-        }
-      )
+      children: waveform
     }
   );
 }
@@ -6147,7 +6402,7 @@ var KaraokeLyrics = ({
 );
 
 // src/components/media/MelodyRoll/MelodyRoll.tsx
-import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect5, useMemo as useMemo5, useRef as useRef28, useState as useState13 } from "react";
+import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect6, useMemo as useMemo6, useRef as useRef28, useState as useState13 } from "react";
 
 // src/components/media/MelodyRoll/melody-glow.js
 function renderGlow() {
@@ -6327,6 +6582,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 +6590,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 +6603,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 +6692,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 +6751,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 +6807,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 +6838,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 +6932,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 +6971,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);
@@ -7236,7 +7509,7 @@ var MelodyRoll = ({
   const glow3 = useRef28(null);
   const [glowReady, setGlowReady] = useState13(false);
   const [span, setSpan] = useControllable(windowProp, defaultWindow, onWindowChange);
-  const indexed = useMemo5(() => {
+  const indexed = useMemo6(() => {
     let low2 = 60, high2 = 64;
     const blocks = [];
     for (let i = 0; i < notes.length; i += 128) {
@@ -7260,7 +7533,7 @@ var MelodyRoll = ({
   const x = (seconds) => (seconds - from) / span * 100;
   const rangeStart = glowReady ? origin : from;
   const rangeEnd = glowReady ? origin + span * 2 : from + span;
-  const visible = useMemo5(() => indexed.blocks.filter((block) => block.end >= rangeStart && block.start <= rangeEnd).flatMap((block) => block.notes.filter((note) => note.end >= rangeStart && note.start <= rangeEnd)), [indexed, rangeStart, rangeEnd]);
+  const visible = useMemo6(() => indexed.blocks.filter((block) => block.end >= rangeStart && block.start <= rangeEnd).flatMap((block) => block.notes.filter((note) => note.end >= rangeStart && note.start <= rangeEnd)), [indexed, rangeStart, rangeEnd]);
   const phases = glowReady ? "" : visible.map((note) => note.end < from || note.start > from + span ? "x" : position >= note.start && position <= note.end ? "n" : position > note.end ? "p" : "-").join("");
   const hits = hitIds?.size ? visible.map((note) => hitIds.has(note.id) ? "h" : "-").join("") : "";
   const glowState = { beat: clamp(beat, 0, 1), pitch: livePitch, high, rows, lead, accuracy: clamp(accuracy, 0, 1), level: clamp(level, 0, 1), hit, position, span, notes: visible, hits, showLyrics };
@@ -7272,11 +7545,11 @@ var MelodyRoll = ({
       glow3.current = null;
     };
   }, []);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     glow3.current?.update(glowState);
   }, [beat, livePitch, high, rows, lead, accuracy, level, hit, position, span, visible, hits, showLyrics]);
   const nativeHits = glowReady ? "" : hits;
-  const noteElements = useMemo5(() => glowReady ? void 0 : visible.map((note, i) => {
+  const noteElements = useMemo6(() => glowReady ? void 0 : visible.map((note, i) => {
     const hidden = phases[i] === "x";
     return /* @__PURE__ */ jsx50(
       "span",
@@ -7316,7 +7589,7 @@ var MelodyRoll = ({
     setSpan(clamp(span * (event.deltaY > 0 ? 1.12 : 1 / 1.12), 2, 20));
   };
   const nativeState = glowReady ? null : glowState;
-  const content = useMemo5(() => /* @__PURE__ */ jsxs41("div", { className: "ad-melody-roll-content", children: [
+  const content = useMemo6(() => /* @__PURE__ */ jsxs41("div", { className: "ad-melody-roll-content", children: [
     /* @__PURE__ */ jsx50(
       PianoKeyboard,
       {
@@ -7374,7 +7647,7 @@ var MelodyRoll = ({
 import { useRef as useRef30 } from "react";
 
 // src/components/layout/FloatingPanel/useFloatingPanel.ts
-import { useCallback as useCallback2, useEffect as useEffect15, useLayoutEffect as useLayoutEffect6, useRef as useRef29, useState as useState14 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect15, useLayoutEffect as useLayoutEffect7, useRef as useRef29, useState as useState14 } from "react";
 var resizeEdges = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
 var threshold = 3;
 var panelControls = "button, a, input, select, textarea, [role=slider], [role=button], [role=switch], [role=listbox], [contenteditable=true], .ad-rotary-knob";
@@ -7386,7 +7659,7 @@ var useFloatingPanel = (frameRef, options = {}) => {
   const latest = useRef29(options);
   latest.current = options;
   const saved = options.layout;
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     drag.current = null;
     setLive(null);
   }, [saved?.left, saved?.top, saved?.width, saved?.height]);
@@ -7548,7 +7821,7 @@ var FloatingPanel = ({ layout: saved, onLayoutChange, defaultSize, limits, onDra
 };
 
 // src/components/media/Sparkline/Sparkline.tsx
-import { useMemo as useMemo6, useRef as useRef31 } from "react";
+import { useMemo as useMemo7, useRef as useRef31 } from "react";
 import { Fragment as Fragment5, jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
 var DEMO3 = [12, 23, 17, 31, 43, 24, 28, 20, 41, 29, 51, 34, 38, 22, 31, 16, 23];
 var Sparkline = (p) => {
@@ -7556,7 +7829,7 @@ var Sparkline = (p) => {
   const id = useSvgId();
   const ref = useRef31(null);
   usePauseOffscreen(ref);
-  const { line: line2, lastX, lastY } = useMemo6(() => {
+  const { line: line2, lastX, lastY } = useMemo7(() => {
     if (!values.length) return { line: "", lastX: 0, lastY: 0 };
     let min = p.fit ? Infinity : 0;
     let max = p.fit ? -Infinity : 1;
@@ -7628,7 +7901,7 @@ import { useRef as useRef32 } from "react";
 import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
 var POINTS = 23;
 var STEP2 = 65 / (POINTS - 1);
-var X = Array.from({ length: POINTS }, (_, k) => k * STEP2 / 65 * 600);
+var X2 = Array.from({ length: POINTS }, (_, k) => k * STEP2 / 65 * 600);
 var strand = (j, t) => {
   const ys = Array.from({ length: POINTS + 2 }, (_, k) => {
     const i = (k - 1) * STEP2;
@@ -7637,7 +7910,7 @@ var strand = (j, t) => {
   let d = `M0 ${ys[1].toFixed(2)}`;
   for (let k = 1; k < POINTS; k += 1) {
     const y0 = ys[k - 1], y1 = ys[k], y2 = ys[k + 1], y3 = ys[k + 2];
-    const x1 = X[k - 1], x2 = X[k], third = (x2 - x1) / 3;
+    const x1 = X2[k - 1], x2 = X2[k], third = (x2 - x1) / 3;
     d += `C${(x1 + third).toFixed(2)} ${(y1 + (y2 - y0) / 6).toFixed(2)} ${(x2 - third).toFixed(2)} ${(y2 - (y3 - y1) / 6).toFixed(2)} ${x2.toFixed(2)} ${y2.toFixed(2)}`;
   }
   return d;

package/package.json

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