@neo-ui-kit/react 1.3.13 → 1.3.15

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.15
+
+Animated borders use a shared WebGPU pipeline when available, combining the existing masks and glow textures in one pass. Rendering is limited to the moving lights. Canvas 2D and SVG remain fallback paths; speeds, colors and effects are retained. See the performance report for laptop measurements and pixel-comparison limits.
+
+## 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.
@@ -51,7 +65,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.13.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.15.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-6VPAU3TV.js}

@@ -11,32 +11,207 @@ import {
 
 // src/core/border-worker.js
 function renderBorders() {
+  async function createGpuPainter() {
+    if (!navigator.gpu) return null;
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) return null;
+    const device = await adapter.requestDevice();
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    const shader = device.createShaderModule({ code: `
+      struct Uniforms { size: vec4f, canvas: vec4f, lights: vec4f, padding: vec4f };
+      @group(0) @binding(0) var<uniform> u: Uniforms;
+      @group(0) @binding(1) var linearSampler: sampler;
+      @group(0) @binding(2) var mask0: texture_2d<f32>;
+      @group(0) @binding(3) var glow0: texture_2d<f32>;
+      @group(0) @binding(4) var mask1: texture_2d<f32>;
+      @group(0) @binding(5) var glow1: texture_2d<f32>;
+      @vertex fn vertex(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+        let positions = array<vec2f, 3>(vec2f(-1,-1), vec2f(3,-1), vec2f(-1,3));
+        return vec4f(positions[i], 0, 1);
+      }
+      fn spot(p: vec2f, origin: vec2f, texture: texture_2d<f32>) -> vec4f {
+        let uv = (p - origin) / (u.size.w * 2);
+        if (any(uv < vec2f(0)) || any(uv > vec2f(1))) { return vec4f(0); }
+        return textureSampleLevel(texture, linearSampler, uv, 0);
+      }
+      fn layer(p: vec2f, mask: texture_2d<f32>, glow: texture_2d<f32>) -> vec4f {
+        let alpha = textureSampleLevel(mask, linearSampler, p / u.size.xy, 0).a;
+        if (alpha == 0) { return vec4f(0); }
+        let first = spot(p, u.lights.xy, glow);
+        let second = spot(p, u.lights.zw, glow);
+        return (second + first * (1 - second.a)) * alpha;
+      }
+      fn filtered(q: vec2f, mask: texture_2d<f32>, glow: texture_2d<f32>) -> vec4f {
+        let base = floor(q - vec2f(.5)) + vec2f(.5);
+        let f = fract(q - vec2f(.5));
+        let a = layer(base / u.size.z, mask, glow);
+        let b = layer((base + vec2f(1,0)) / u.size.z, mask, glow);
+        let c = layer((base + vec2f(0,1)) / u.size.z, mask, glow);
+        let d = layer((base + vec2f(1,1)) / u.size.z, mask, glow);
+        return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);
+      }
+      @fragment fn fragment(@builtin(position) p: vec4f) -> @location(0) vec4f {
+        let q = p.xy * u.canvas.xy / (u.size.xy * u.size.z);
+        let aura = filtered(q, mask0, glow0) * u.canvas.z;
+        let core = filtered(q, mask1, glow1) * u.canvas.w;
+        return core + aura * (1-core.a);
+      }
+    ` });
+    let pipeline;
+    try {
+      pipeline = await device.createRenderPipelineAsync({
+        layout: "auto",
+        vertex: { module: shader, entryPoint: "vertex" },
+        fragment: { module: shader, entryPoint: "fragment", targets: [{ format }] },
+        primitive: { topology: "triangle-list" }
+      });
+    } catch (error) {
+      device.destroy();
+      throw error;
+    }
+    const sampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
+    device.addEventListener("uncapturederror", (event) => {
+      throw event.error;
+    });
+    device.lost.then((info) => {
+      setTimeout(() => {
+        throw new Error(info.message || "Border GPU device lost");
+      });
+    });
+    return (scene) => {
+      const context = scene.canvas.getContext("webgpu");
+      context.configure({ device, format, alphaMode: "premultiplied" });
+      const textures = scene.layers.flatMap((layer) => [layer.mask, layer.texture]).map((image) => {
+        const texture = device.createTexture({
+          size: [image.width, image.height],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        device.queue.copyExternalImageToTexture({ source: image }, { texture, premultipliedAlpha: true }, [image.width, image.height]);
+        return texture;
+      });
+      const buffer = device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+      const values = new Float32Array(16);
+      values.set([
+        scene.width,
+        scene.height,
+        scene.dpr,
+        scene.radius,
+        scene.canvas.width,
+        scene.canvas.height,
+        scene.layers[0].opacity,
+        scene.layers[1].opacity
+      ]);
+      const bindGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [
+        { binding: 0, resource: { buffer } },
+        { binding: 1, resource: sampler },
+        ...textures.map((texture, index) => ({ binding: index + 2, resource: texture.createView() }))
+      ] });
+      return {
+        draw(current) {
+          current.lights.forEach((light, index) => {
+            const at = (light.phase + current.elapsed * light.speed / current.length) % 1 * 1024;
+            const lo = Math.floor(at), hi = (lo + 1) % 1024, weight = at - lo;
+            for (let axis = 0; axis < 2; axis++) values[8 + index * 2 + axis] = current.points[lo * 2 + axis] * (1 - weight) + current.points[hi * 2 + axis] * weight - current.radius + 16;
+          });
+          device.queue.writeBuffer(buffer, 0, values);
+          const encoder = device.createCommandEncoder();
+          const pass = encoder.beginRenderPass({ colorAttachments: [{
+            view: context.getCurrentTexture().createView(),
+            loadOp: "clear",
+            storeOp: "store",
+            clearValue: [0, 0, 0, 0]
+          }] });
+          pass.setPipeline(pipeline);
+          pass.setBindGroup(0, bindGroup);
+          for (let i = 0; i < 2; i++) {
+            const sx = current.width * current.dpr / current.canvas.width, sy = current.height * current.dpr / current.canvas.height;
+            const x = Math.max(0, Math.floor((values[8 + i * 2] * current.dpr - 2) * sx));
+            const y = Math.max(0, Math.floor((values[9 + i * 2] * current.dpr - 2) * sy));
+            const r = Math.min(current.canvas.width, Math.ceil(((values[8 + i * 2] + current.radius * 2) * current.dpr + 2) * sx));
+            const b = Math.min(current.canvas.height, Math.ceil(((values[9 + i * 2] + current.radius * 2) * current.dpr + 2) * sy));
+            if (r > x && b > y) {
+              pass.setScissorRect(x, y, r - x, b - y);
+              pass.draw(3);
+            }
+          }
+          pass.end();
+          device.queue.submit([encoder.finish()]);
+        },
+        dispose() {
+          context.unconfigure();
+          buffer.destroy();
+          textures.forEach((texture) => texture.destroy());
+        }
+      };
+    };
+  }
+  let gpu;
+  const pending = [];
+  onmessage = (event) => pending.push(event);
   const scenes = /* @__PURE__ */ new Map();
   let frame = null, fps = 60, last2 = -Infinity;
   const release = (scene) => {
+    scene.gpu?.dispose();
     for (const layer of scene.layers) {
       layer.mask.close();
       layer.texture.close();
     }
   };
   const draw = (scene) => {
-    const { ctx, width, height, points, length, radius } = scene;
+    if (scene.gpu) {
+      scene.gpu.draw(scene);
+      return;
+    }
+    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;
   };
@@ -57,7 +232,7 @@ function renderBorders() {
     }
     schedule2();
   }
-  onmessage = ({ data }) => {
+  const receive = ({ data }) => {
     const scene = scenes.get(data.id);
     if (data.type === "rate") fps = data.fps;
     else if (data.type === "remove") {
@@ -73,12 +248,18 @@ function renderBorders() {
       const next = { ...data, canvas: scene?.canvas ?? data.canvas, elapsed: scene?.elapsed ?? data.elapsed, previous: null };
       next.canvas.width = Math.ceil(data.width * data.dpr);
       next.canvas.height = Math.ceil(data.height * data.dpr);
-      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.ctx = layer.buffer.getContext("2d");
-        layer.ctx.setTransform(data.dpr, 0, 0, data.dpr, 0, 0);
+      if (gpu) next.gpu = gpu(next);
+      else {
+        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(
+            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);
+        }
       }
       scenes.set(data.id, next);
       draw(next);
@@ -86,6 +267,18 @@ function renderBorders() {
     }
     schedule2();
   };
+  createGpuPainter().catch((error) => {
+    console.warn("Border GPU initialization failed; using Canvas 2D", error);
+    return null;
+  }).then((value) => {
+    gpu = value;
+    onmessage = receive;
+    pending.splice(0).forEach(receive);
+  }).catch((error) => {
+    setTimeout(() => {
+      throw error;
+    });
+  });
 }
 var worker = null;
 var workerUrl = null;

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

@@ -2,7 +2,7 @@ import {
   themes,
   useBorder,
   usePauseOffscreen
-} from "./chunk-OCH27SNY.js";
+} from "./chunk-6VPAU3TV.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-6VPAU3TV.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-TMCWA446.js";
+import "./chunks/chunk-6VPAU3TV.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-TMCWA446.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -79,7 +79,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-OCH27SNY.js";
+} from "./chunks/chunk-6VPAU3TV.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;
+      }
+      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 (!analyser && input === 0 && envelope === 0 && samples.every((sample) => sample === 0)) {
-        shape.setAttribute("transform", "translate(0 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() {
@@ -7254,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) {
@@ -7278,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 };
@@ -7290,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",
@@ -7334,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,
       {
@@ -7392,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";
@@ -7404,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]);
@@ -7566,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) => {
@@ -7574,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;
@@ -7646,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;
@@ -7655,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.13",
+  "version": "1.3.15",
   "description": "NEO UI — React component library",
   "type": "module",
   "license": "MIT",