@neo-ui-kit/react 1.3.6 → 1.3.8

package/README.md

@@ -25,7 +25,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.6.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.8.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-X7KO7G4S.js → chunk-FRALT7ER.js}

@@ -1,7 +1,7 @@
 import {
   themes,
   usePauseOffscreen
-} from "./chunk-6VBE5UOI.js";
+} from "./chunk-YVRQTI7B.js";
 import {
   assignRef,
   clamp,

package/dist/chunks/{chunk-347P6ZE4.js → chunk-IFEK5PRT.js}

@@ -18,7 +18,16 @@ var clean = (v) => {
   return x === "/" ? x : x.replace(/\/$/, "");
 };
 var current = (m) => clean(m === "hash" ? location.hash.slice(1) || "/" : location.pathname);
-var morph = (update, transition) => transition && motionEnabled() && "startViewTransition" in document ? void document.startViewTransition(() => flushSync(update)) : update();
+var morph = (update, transition) => {
+  if (!transition || !motionEnabled() || !("startViewTransition" in document)) {
+    update();
+    return;
+  }
+  void document.startViewTransition(() => flushSync(update)).ready.catch((error) => {
+    const skipped = error instanceof DOMException && ["AbortError", "TimeoutError"].includes(error.name);
+    console[skipped ? "debug" : "error"](skipped ? "Route animation skipped" : "Route animation failed", error);
+  });
+};
 function matchPath(pattern, pathname) {
   const p = clean(pattern).split("/").filter(Boolean), v = clean(pathname).split("/").filter(Boolean), params = /* @__PURE__ */ Object.create(null);
   for (let i = 0, j = 0; i < p.length; i++, j++) {

package/dist/chunks/{chunk-6VBE5UOI.js → chunk-YVRQTI7B.js}

@@ -134,8 +134,8 @@ function startWorker() {
 }
 function createBorderWorker(item) {
   if (unavailable || typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof createImageBitmap === "undefined" || typeof HTMLCanvasElement === "undefined" || !HTMLCanvasElement.prototype.transferControlToOffscreen || typeof IntersectionObserver === "undefined" || typeof MutationObserver === "undefined") return null;
-  const thread = startWorker();
-  if (!thread) return null;
+  const thread2 = startWorker();
+  if (!thread2) return null;
   const id = ++serial, host = item.element;
   const groups = [...item.overlay.querySelectorAll(".ad-border-aura, .ad-border-core")];
   const originalVisibility = groups.map((group) => group.style.visibility);
@@ -153,7 +153,7 @@ function createBorderWorker(item) {
     if (visible && renderer.ready) elapsed += (performance.now() - since) / 1e3;
     since = performance.now();
     visible = next;
-    thread.postMessage({ type: "visible", id, visible });
+    thread2.postMessage({ type: "visible", id, visible });
   };
   const observer = new IntersectionObserver((entries) => {
     inView = entries[0].isIntersecting;
@@ -198,7 +198,7 @@ function createBorderWorker(item) {
     });
     canvas.remove();
     clients.delete(id);
-    if (worker === thread) thread.postMessage({ type: "remove", id });
+    if (worker === thread2) thread2.postMessage({ type: "remove", id });
     if (!clients.size) stopWorker();
   }
   function queue() {
@@ -264,7 +264,7 @@ function createBorderWorker(item) {
       canvas.style.height = `${height}px`;
       const surface = transferred ? void 0 : canvas.transferControlToOffscreen();
       transferred = true;
-      thread.postMessage({
+      thread2.postMessage({
         type: "update",
         id,
         revision: current,
@@ -290,6 +290,541 @@ function createBorderWorker(item) {
   return renderer;
 }
 
+// src/components/artwork/NeonWaves/neon-renderer.js
+function createNeonGeometry() {
+  const W = 600;
+  const H = 120;
+  const SKYLINE = [
+    [0, 0.93],
+    [0.16, 0.86],
+    [0.3, 0.82],
+    [0.42, 0.72],
+    [0.55, 0.64],
+    [0.64, 0.7],
+    [0.74, 0.52],
+    [0.84, 0.1],
+    [0.9, 0.56],
+    [0.95, 0.46],
+    [1, 0.08]
+  ];
+  const skyline = (x) => {
+    const i = Math.max(0, SKYLINE.findIndex(([at]) => at >= x) - 1);
+    const [x0, y0] = SKYLINE[i];
+    const [x1, y1] = SKYLINE[Math.min(SKYLINE.length - 1, i + 1)];
+    const k = x1 === x0 ? 0 : (x - x0) / (x1 - x0);
+    return y0 + (y1 - y0) * (1 - Math.cos(k * Math.PI)) / 2;
+  };
+  const SAMPLES = 36;
+  const toPath = (curve) => {
+    let d = `M${curve[0].toFixed(2)} ${curve[1].toFixed(2)}`;
+    for (let i = 2; i < curve.length; i += 6)
+      d += `C${curve.slice(i, i + 6).map((n) => n.toFixed(2)).join(" ")}`;
+    return d;
+  };
+  const smoothTo = (curve, c2x, c2y, x, y) => {
+    const n = curve.length;
+    curve.push(
+      2 * curve[n - 2] - curve[n - 4],
+      2 * curve[n - 1] - curve[n - 3],
+      c2x,
+      c2y,
+      x,
+      y
+    );
+  };
+  const smooth = (xs, ys) => {
+    const curve = [xs[0], ys[0]];
+    for (let i = 0; i < xs.length - 1; i += 1) {
+      const x0 = xs[i - 1] ?? xs[i], y0 = ys[i - 1] ?? ys[i];
+      const x1 = xs[i], y1 = ys[i], x2 = xs[i + 1], y2 = ys[i + 1];
+      const x3 = xs[i + 2] ?? x2, y3 = ys[i + 2] ?? y2;
+      curve.push(
+        x1 + (x2 - x0) / 6,
+        y1 + (y2 - y0) / 6,
+        x2 - (x3 - x1) / 6,
+        y2 - (y3 - y1) / 6,
+        x2,
+        y2
+      );
+    }
+    return curve;
+  };
+  const ridgeStrand = (t, drift) => {
+    const xs = [];
+    const ys = [];
+    for (let i = 0; i <= SAMPLES; i += 1) {
+      const x = i / SAMPLES;
+      const base = skyline(x);
+      const spread = H * (0.06 + 0.26 * base);
+      const ripple = Math.sin(x * 8 + drift + t * 7) * H * (0.03 + 0.05 * base) + Math.sin(x * 21 - drift * 1.3 + t * 11) * H * 0.014;
+      xs.push(x * (W + 20) - 10);
+      ys.push(base * H + (t - 0.5) * spread + ripple);
+    }
+    return smooth(xs, ys);
+  };
+  const twistStrand = (t, drift, main) => {
+    const a = Math.sin(drift + t * 1.4) * H * 0.095;
+    const b = Math.cos(drift * 0.8 + t * 1.8) * H * 0.08;
+    if (!main) {
+      const curve2 = [
+        -12,
+        H * (0.9 + t * 0.12) + b,
+        W * 0.21,
+        H * 0.98 + a,
+        W * 0.33,
+        H * 0.24 + t * H * 0.2 + a,
+        W * 0.52,
+        H * 0.75 + t * H * 0.25 + b
+      ];
+      smoothTo(
+        curve2,
+        W * 0.82,
+        H * 0.38 + t * H * 0.27 + a,
+        W + 8,
+        H * (0.48 + t * 0.5) + b
+      );
+      return curve2;
+    }
+    const curve = [
+      -12,
+      H * (0.38 + t * 0.58) + a,
+      W * 0.2,
+      H * 1.28 - t * H * 0.27 + a,
+      W * 0.32,
+      H * 0.34 + t * H * 0.21 + b,
+      W * 0.46,
+      H * 0.62 + t * H * 0.12
+    ];
+    smoothTo(
+      curve,
+      W * 0.67,
+      H * 1.14 - t * H * 0.09 + a,
+      W * 0.8,
+      H * 0.69 - t * H * 0.22 + b
+    );
+    smoothTo(
+      curve,
+      W * 0.94,
+      H * 0.43 - t * H * 0.44 + a,
+      W + 8,
+      H * 0.21 + t * H * 0.45
+    );
+    return curve;
+  };
+  const STEPS = 16;
+  const measure = (curve) => {
+    const xs = [curve[0]], ys = [curve[1]], lengths = [0];
+    for (let i = 2; i < curve.length; i += 6) {
+      const x0 = curve[i - 2], y0 = curve[i - 1];
+      const [x1, y1, x2, y2, x3, y3] = curve.slice(i, i + 6);
+      for (let k = 1; k <= STEPS; k += 1) {
+        const u = k / STEPS, v = 1 - u;
+        const x = v * v * v * x0 + 3 * v * v * u * x1 + 3 * v * u * u * x2 + u * u * u * x3;
+        const y = v * v * v * y0 + 3 * v * v * u * y1 + 3 * v * u * u * y2 + u * u * u * y3;
+        lengths.push(
+          lengths[lengths.length - 1] + Math.hypot(x - xs[xs.length - 1], y - ys[ys.length - 1])
+        );
+        xs.push(x);
+        ys.push(y);
+      }
+    }
+    return { xs, ys, lengths, total: lengths[lengths.length - 1] };
+  };
+  const pointAt = (track, fraction) => {
+    const distance = Math.min(1, Math.max(0, fraction)) * track.total;
+    let low = 0, high = track.lengths.length - 1;
+    while (high - low > 1) {
+      const middle = low + high >> 1;
+      if (track.lengths[middle] < distance) low = middle;
+      else high = middle;
+    }
+    const span = track.lengths[high] - track.lengths[low] || 1;
+    const k = (distance - track.lengths[low]) / span;
+    return {
+      x: track.xs[low] + (track.xs[high] - track.xs[low]) * k,
+      y: track.ys[low] + (track.ys[high] - track.ys[low]) * k
+    };
+  };
+  const COMET_LAP = 6;
+  const COMET_DASH = 0.016;
+  const COMET_WIDTH = 1.6;
+  const cometStrand = (i, comets, strands) => Math.min(strands - 1, Math.round((i + 0.5) / comets * (strands - 1)));
+  return {
+    W,
+    H,
+    toPath,
+    ridgeStrand,
+    twistStrand,
+    measure,
+    pointAt,
+    cometStrand,
+    COMET_LAP,
+    COMET_DASH,
+    COMET_WIDTH
+  };
+}
+var neonGeometry = createNeonGeometry();
+function renderNeon(createGeometry) {
+  const geometry = createGeometry(), scenes = /* @__PURE__ */ new Map();
+  let frame = null, fps = 30, last2 = -Infinity;
+  function draw(scene) {
+    const { ctx, width, height, padX, padY, sx, sy, options, time, gradient } = scene;
+    ctx.clearRect(-padX, -padY, width + padX * 2, height + padY * 2);
+    ctx.strokeStyle = gradient;
+    const tracks = /* @__PURE__ */ new Map();
+    const carried = new Set(
+      Array.from(
+        { length: options.comets },
+        (_, i) => geometry.cometStrand(i, options.comets, options.strands)
+      )
+    );
+    for (let i = 0; i < options.strands; i++) {
+      const t = i / Math.max(1, options.strands - 1), drift = time * 0.42 + options.phase;
+      const curve = options.shape === "ridge" ? geometry.ridgeStrand(t, drift) : geometry.twistStrand(t, drift, i < options.strands * 0.68);
+      ctx.beginPath();
+      ctx.moveTo(curve[0] * sx, curve[1] * sy);
+      for (let j = 2; j < curve.length; j += 6)
+        ctx.bezierCurveTo(
+          curve[j] * sx,
+          curve[j + 1] * sy,
+          curve[j + 2] * sx,
+          curve[j + 3] * sy,
+          curve[j + 4] * sx,
+          curve[j + 5] * sy
+        );
+      ctx.lineWidth = i === 5 ? 1 : 0.55;
+      ctx.globalAlpha = i === 5 ? 0.95 : 0.52;
+      ctx.stroke();
+      if (carried.has(i)) tracks.set(i, geometry.measure(curve));
+    }
+    for (let i = 0; i < options.comets; i++) {
+      const track = tracks.get(
+        geometry.cometStrand(i, options.comets, options.strands)
+      );
+      if (!track) continue;
+      const start = (time + i * geometry.COMET_LAP / options.comets + 1.8) / geometry.COMET_LAP % 1;
+      const tail = geometry.pointAt(track, start), head = geometry.pointAt(track, start + geometry.COMET_DASH);
+      const dx = (head.x - tail.x) * sx, dy = (head.y - tail.y) * sy;
+      const length = Math.round(Math.hypot(dx, dy) + geometry.COMET_WIDTH);
+      let sprite = scene.sprites.get(length);
+      if (!sprite) {
+        const padding = Math.ceil(
+          Math.max(0, ...scene.shadows.map((shadow) => shadow.blur)) * 2 + 2
+        );
+        const canvas = new OffscreenCanvas(
+          Math.ceil((length + padding * 2) * scene.dpr),
+          Math.ceil((geometry.COMET_WIDTH + padding * 2) * scene.dpr)
+        );
+        const paint = canvas.getContext("2d");
+        paint.scale(scene.dpr, scene.dpr);
+        paint.fillStyle = scene.color;
+        for (const shadow of [...scene.shadows].reverse()) {
+          paint.shadowColor = shadow.color;
+          paint.shadowBlur = shadow.blur * scene.dpr;
+          paint.beginPath();
+          paint.roundRect(
+            padding,
+            padding,
+            length,
+            geometry.COMET_WIDTH,
+            geometry.COMET_WIDTH / 2
+          );
+          paint.fill();
+        }
+        sprite = { canvas, padding };
+        scene.sprites.set(length, sprite);
+      }
+      const x = (tail.x + head.x) / 2, y = (tail.y + head.y) / 2;
+      ctx.save();
+      ctx.translate(x * sx, y * sy);
+      ctx.rotate(Math.atan2(dy, dx));
+      ctx.globalAlpha = Math.min(
+        1,
+        Math.max(0, (x + 20) / ((geometry.W + 40) * 0.35))
+      );
+      ctx.drawImage(
+        sprite.canvas,
+        -length / 2 - sprite.padding,
+        -geometry.COMET_WIDTH / 2 - sprite.padding,
+        sprite.canvas.width / scene.dpr,
+        sprite.canvas.height / scene.dpr
+      );
+      ctx.restore();
+    }
+    ctx.globalAlpha = 1;
+  }
+  function schedule2() {
+    if (frame === null && [...scenes.values()].some((scene) => scene.visible))
+      frame = requestAnimationFrame(tick2);
+  }
+  function tick2(now) {
+    frame = null;
+    if (now - last2 >= 1e3 / fps - 0.5) {
+      for (const scene of scenes.values()) {
+        if (!scene.visible) continue;
+        if (scene.previous !== null)
+          scene.time += Math.min(
+            0.1,
+            Math.max(0, (now - scene.previous) / 1e3)
+          );
+        scene.previous = now;
+        draw(scene);
+      }
+      last2 = now;
+    }
+    schedule2();
+  }
+  onmessage = ({ data }) => {
+    const previous = scenes.get(data.id);
+    if (data.type === "rate") fps = data.fps;
+    else if (data.type === "remove") scenes.delete(data.id);
+    else if (data.type === "visible") {
+      if (previous) {
+        previous.visible = data.visible;
+        previous.previous = null;
+      }
+    } else if (data.type === "update") {
+      const scene = {
+        ...data,
+        canvas: previous?.canvas ?? data.canvas,
+        time: previous?.time ?? data.time,
+        previous: null,
+        sprites: /* @__PURE__ */ new Map()
+      };
+      scene.canvas.width = Math.ceil((data.width + data.padX * 2) * data.dpr);
+      scene.canvas.height = Math.ceil((data.height + data.padY * 2) * data.dpr);
+      scene.ctx = scene.canvas.getContext("2d");
+      scene.ctx.setTransform(
+        data.dpr,
+        0,
+        0,
+        data.dpr,
+        data.padX * data.dpr,
+        data.padY * data.dpr
+      );
+      scene.sx = data.width / geometry.W;
+      scene.sy = data.height / geometry.H;
+      const [start, end] = data.options.shape === "ridge" ? [-10, 610] : [-12, 608];
+      scene.gradient = scene.ctx.createLinearGradient(
+        start * scene.sx,
+        0,
+        end * scene.sx,
+        0
+      );
+      for (const stop of data.stops)
+        scene.gradient.addColorStop(stop.at, stop.color);
+      scenes.set(data.id, scene);
+      draw(scene);
+      postMessage({ id: data.id });
+    }
+    schedule2();
+  };
+}
+var thread = null;
+var url = null;
+var serial2 = 0;
+var unavailable2 = false;
+var frameRate2 = 30;
+var clients2 = /* @__PURE__ */ new Map();
+var visibilityChanged2 = () => {
+  for (const client of clients2.values()) client.visibility();
+};
+var resized2 = () => {
+  for (const client of clients2.values()) client.update();
+};
+function setNeonFrameRate(fps) {
+  frameRate2 = fps;
+  thread?.postMessage({ type: "rate", fps });
+}
+function stopThread() {
+  thread?.terminate();
+  if (url) URL.revokeObjectURL(url);
+  thread = url = null;
+  document.removeEventListener("visibilitychange", visibilityChanged2);
+  window.removeEventListener("resize", resized2);
+}
+function createNeonRenderer(root, svg, initial) {
+  if (unavailable2 || typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof HTMLCanvasElement === "undefined" || !HTMLCanvasElement.prototype.transferControlToOffscreen || typeof IntersectionObserver === "undefined" || typeof MutationObserver === "undefined")
+    return null;
+  if (!thread) {
+    try {
+      url = URL.createObjectURL(
+        new Blob(
+          [`(${renderNeon.toString()})(${createNeonGeometry.toString()})`],
+          { type: "text/javascript" }
+        )
+      );
+      thread = new Worker(url);
+    } catch {
+      unavailable2 = true;
+      stopThread();
+      return null;
+    }
+    thread.onmessage = ({ data }) => clients2.get(data.id)?.ready();
+    thread.onerror = () => {
+      unavailable2 = true;
+      const pending = [...clients2.values()];
+      stopThread();
+      for (const client of pending) client.dispose();
+    };
+    thread.postMessage({ type: "rate", fps: frameRate2 });
+    document.addEventListener("visibilitychange", visibilityChanged2);
+    window.addEventListener("resize", resized2);
+  }
+  const worker2 = thread, id = ++serial2, canvas = document.createElement("canvas");
+  canvas.style.cssText = "position:absolute;pointer-events:none;visibility:hidden";
+  root.insertBefore(canvas, svg);
+  const originalVisibility = svg.style.visibility;
+  let options = initial, inView = false, visible = false, disposed = false, transferred = false, queued = false, signature = "";
+  let comets = null, cometVisibility = "";
+  const renderer = {
+    ready: false,
+    update(next = options) {
+      options = next;
+      queue();
+    },
+    dispose
+  };
+  const hideOriginal = () => {
+    if (!renderer.ready) return;
+    svg.style.visibility = "hidden";
+    const node = root.querySelector(".ad-neon-waves-comets");
+    if (node !== comets) {
+      comets = node;
+      cometVisibility = node?.style.visibility ?? "";
+    }
+    if (comets) comets.style.visibility = "hidden";
+  };
+  const visibility = () => {
+    const next = inView && !document.hidden && svg.closest("[data-ad-motion]")?.dataset.adMotion !== "off" && !root.closest("[data-ad-paused], [data-ad-offscreen]");
+    if (next !== visible) {
+      visible = next;
+      worker2.postMessage({ type: "visible", id, visible });
+    }
+  };
+  const intersection = new IntersectionObserver((entries) => {
+    inView = entries[0].isIntersecting;
+    visibility();
+  });
+  intersection.observe(root);
+  const tokens = new MutationObserver((records) => {
+    visibility();
+    if (records.some(
+      (record) => ["style", "class", "data-ad-theme", "data-ad-color-scheme"].includes(
+        record.attributeName
+      )
+    ))
+      queue();
+  });
+  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-paused",
+        "data-ad-offscreen",
+        "data-ad-motion"
+      ]
+    });
+  tokens.observe(svg, {
+    attributes: true,
+    attributeFilter: ["data-ad-motion", "data-ad-offscreen"]
+  });
+  clients2.set(id, {
+    visibility,
+    update: queue,
+    dispose,
+    ready() {
+      renderer.ready = true;
+      hideOriginal();
+      canvas.style.visibility = "";
+    }
+  });
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    renderer.ready = false;
+    intersection.disconnect();
+    tokens.disconnect();
+    svg.style.visibility = originalVisibility;
+    if (comets) comets.style.visibility = cometVisibility;
+    canvas.remove();
+    clients2.delete(id);
+    if (thread === worker2) worker2.postMessage({ type: "remove", id });
+    if (!clients2.size) stopThread();
+  }
+  function queue() {
+    if (queued || disposed) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      if (!disposed) update();
+    });
+  }
+  function update() {
+    try {
+      hideOriginal();
+      visibility();
+      const width = root.clientWidth, height = root.clientHeight, dpr = devicePixelRatio || 1;
+      if (!width || !height) return;
+      const padX = width / 30 + 2, padY = height / 2 + 2;
+      const stops = [...svg.querySelectorAll("stop")].map((stop) => {
+        const style2 = getComputedStyle(stop);
+        return {
+          at: Number(stop.getAttribute("offset") || 0),
+          color: `color-mix(in srgb, ${style2.stopColor} ${Number(style2.stopOpacity) * 100}%, transparent)`
+        };
+      });
+      const comet = root.querySelector(".ad-neon-waves-comet"), style = comet && getComputedStyle(comet);
+      const shadows = !style ? [] : style.boxShadow.split(/,\s*(?![^()]*\))/).map((shadow) => {
+        const values = shadow.match(
+          /^(.*?)\s+[-\d.]+px\s+[-\d.]+px\s+([\d.]+)px(?:\s+[-\d.]+px)?$/
+        );
+        if (!values) throw new Error("Invalid comet shadow");
+        return { color: values[1], blur: Number(values[2]) };
+      });
+      const config = {
+        width,
+        height,
+        dpr,
+        padX,
+        padY,
+        stops,
+        shadows,
+        color: style?.backgroundColor,
+        options: { ...options, comets: comet ? options.comets : 0 }
+      };
+      const key = JSON.stringify(config);
+      if (key === signature) return;
+      signature = key;
+      canvas.style.left = `${-padX}px`;
+      canvas.style.top = `${-padY}px`;
+      canvas.style.width = `${width + 2 * padX}px`;
+      canvas.style.height = `${height + 2 * padY}px`;
+      const surface = transferred ? void 0 : canvas.transferControlToOffscreen();
+      transferred = true;
+      worker2.postMessage(
+        {
+          type: "update",
+          id,
+          canvas: surface,
+          ...config,
+          visible,
+          time: options.time
+        },
+        surface ? [surface] : []
+      );
+    } catch {
+      dispose();
+    }
+  }
+  queue();
+  return renderer;
+}
+
 // src/core/motion-engine.js
 var uid = 0;
 var U = {
@@ -309,9 +844,11 @@ var last = 0;
 var weakDevice = typeof navigator !== "undefined" && ((navigator.hardwareConcurrency || 8) <= 4 || (navigator.deviceMemory || 8) <= 4);
 var FRAME = 1e3 / (weakDevice ? 20 : 30);
 setBorderFrameRate(1e3 / FRAME);
+setNeonFrameRate(1e3 / FRAME);
 U.setMotionFrameRate = (fps) => {
   FRAME = 1e3 / Math.max(1, Math.min(120, fps));
   setBorderFrameRate(1e3 / FRAME);
+  setNeonFrameRate(1e3 / FRAME);
   const now = performance.now();
   for (const animation of looping) {
     animation.__adStart = now - (animation.currentTime || 0);
@@ -1156,6 +1693,8 @@ var ThemeProvider = ({
 };
 
 export {
+  neonGeometry,
+  createNeonRenderer,
   refreshMotion,
   setMotionFrameRate,
   subscribeTick,

package/dist/components/artwork/NeonWaves/neon-renderer.d.ts

@@ -0,0 +1,60 @@
+export function setNeonFrameRate(fps: any): void;
+export function createNeonRenderer(root: any, svg: any, initial: any): {
+    ready: boolean;
+    update(next?: any): void;
+    dispose: () => void;
+} | null;
+export function createNeonGeometry(): {
+    W: number;
+    H: number;
+    toPath: (curve: any) => string;
+    ridgeStrand: (t: any, drift: any) => any[];
+    twistStrand: (t: any, drift: any, main: any) => number[];
+    measure: (curve: any) => {
+        xs: any[];
+        ys: any[];
+        lengths: number[];
+        total: number;
+    };
+    pointAt: (track: any, fraction: any) => {
+        x: any;
+        y: any;
+    };
+    cometStrand: (i: any, comets: any, strands: any) => number;
+    COMET_LAP: number;
+    COMET_DASH: number;
+    COMET_WIDTH: number;
+};
+export namespace neonGeometry {
+    export { W };
+    export { H };
+    export { toPath };
+    export { ridgeStrand };
+    export { twistStrand };
+    export { measure };
+    export { pointAt };
+    export { cometStrand };
+    export { COMET_LAP };
+    export { COMET_DASH };
+    export { COMET_WIDTH };
+}
+declare const W: 600;
+declare const H: 120;
+declare function toPath(curve: any): string;
+declare function ridgeStrand(t: any, drift: any): any[];
+declare function twistStrand(t: any, drift: any, main: any): number[];
+declare function measure(curve: any): {
+    xs: any[];
+    ys: any[];
+    lengths: number[];
+    total: number;
+};
+declare function pointAt(track: any, fraction: any): {
+    x: any;
+    y: any;
+};
+declare function cometStrand(i: any, comets: any, strands: any): number;
+declare const COMET_LAP: 6;
+declare const COMET_DASH: 0.016;
+declare const COMET_WIDTH: 1.6;
+export {};

package/dist/core.js

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

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-X7KO7G4S.js";
-import "./chunks/chunk-6VBE5UOI.js";
+} from "./chunks/chunk-FRALT7ER.js";
+import "./chunks/chunk-YVRQTI7B.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   Router,
   matchRoute,
   useRouter
-} from "./chunks/chunk-347P6ZE4.js";
+} from "./chunks/chunk-IFEK5PRT.js";
 import {
   Autocomplete,
   Avatar,
@@ -61,10 +61,12 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-X7KO7G4S.js";
+} from "./chunks/chunk-FRALT7ER.js";
 import {
   ThemeProvider,
+  createNeonRenderer,
   getMotionStats,
+  neonGeometry,
   refreshMotion,
   setMotionFrameRate,
   subscribeTick,
@@ -76,7 +78,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-6VBE5UOI.js";
+} from "./chunks/chunk-YVRQTI7B.js";
 import {
   LocaleProvider,
   addMessages,
@@ -3885,99 +3887,19 @@ function Planet({ children, ...p }) {
 // src/components/artwork/NeonWaves/NeonWaves.tsx
 import { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef22 } from "react";
 import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
-var W3 = 600;
-var H3 = 120;
-var SKYLINE = [[0, 0.93], [0.16, 0.86], [0.3, 0.82], [0.42, 0.72], [0.55, 0.64], [0.64, 0.7], [0.74, 0.52], [0.84, 0.1], [0.9, 0.56], [0.95, 0.46], [1, 0.08]];
-var skyline = (x) => {
-  const i = Math.max(0, SKYLINE.findIndex(([at]) => at >= x) - 1);
-  const [x0, y0] = SKYLINE[i];
-  const [x1, y1] = SKYLINE[Math.min(SKYLINE.length - 1, i + 1)];
-  const k = x1 === x0 ? 0 : (x - x0) / (x1 - x0);
-  return y0 + (y1 - y0) * (1 - Math.cos(k * Math.PI)) / 2;
-};
-var SAMPLES = 36;
-var toPath = (curve) => {
-  let d = `M${curve[0].toFixed(2)} ${curve[1].toFixed(2)}`;
-  for (let i = 2; i < curve.length; i += 6)
-    d += `C${curve.slice(i, i + 6).map((n) => n.toFixed(2)).join(" ")}`;
-  return d;
-};
-var smoothTo = (curve, c2x, c2y, x, y) => {
-  const n = curve.length;
-  curve.push(2 * curve[n - 2] - curve[n - 4], 2 * curve[n - 1] - curve[n - 3], c2x, c2y, x, y);
-};
-var smooth = (xs, ys) => {
-  const curve = [xs[0], ys[0]];
-  for (let i = 0; i < xs.length - 1; i += 1) {
-    const x0 = xs[i - 1] ?? xs[i], y0 = ys[i - 1] ?? ys[i];
-    const x1 = xs[i], y1 = ys[i], x2 = xs[i + 1], y2 = ys[i + 1];
-    const x3 = xs[i + 2] ?? x2, y3 = ys[i + 2] ?? y2;
-    curve.push(x1 + (x2 - x0) / 6, y1 + (y2 - y0) / 6, x2 - (x3 - x1) / 6, y2 - (y3 - y1) / 6, x2, y2);
-  }
-  return curve;
-};
-var ridgeStrand = (t, drift) => {
-  const xs = [];
-  const ys = [];
-  for (let i = 0; i <= SAMPLES; i += 1) {
-    const x = i / SAMPLES;
-    const base = skyline(x);
-    const spread = H3 * (0.06 + 0.26 * base);
-    const ripple2 = Math.sin(x * 8 + drift + t * 7) * H3 * (0.03 + 0.05 * base) + Math.sin(x * 21 - drift * 1.3 + t * 11) * H3 * 0.014;
-    xs.push(x * (W3 + 20) - 10);
-    ys.push(base * H3 + (t - 0.5) * spread + ripple2);
-  }
-  return smooth(xs, ys);
-};
-var twistStrand = (t, drift, main) => {
-  const a = Math.sin(drift + t * 1.4) * H3 * 0.095;
-  const b = Math.cos(drift * 0.8 + t * 1.8) * H3 * 0.08;
-  if (!main) {
-    const curve2 = [-12, H3 * (0.9 + t * 0.12) + b, W3 * 0.21, H3 * 0.98 + a, W3 * 0.33, H3 * 0.24 + t * H3 * 0.2 + a, W3 * 0.52, H3 * 0.75 + t * H3 * 0.25 + b];
-    smoothTo(curve2, W3 * 0.82, H3 * 0.38 + t * H3 * 0.27 + a, W3 + 8, H3 * (0.48 + t * 0.5) + b);
-    return curve2;
-  }
-  const curve = [-12, H3 * (0.38 + t * 0.58) + a, W3 * 0.2, H3 * 1.28 - t * H3 * 0.27 + a, W3 * 0.32, H3 * 0.34 + t * H3 * 0.21 + b, W3 * 0.46, H3 * 0.62 + t * H3 * 0.12];
-  smoothTo(curve, W3 * 0.67, H3 * 1.14 - t * H3 * 0.09 + a, W3 * 0.8, H3 * 0.69 - t * H3 * 0.22 + b);
-  smoothTo(curve, W3 * 0.94, H3 * 0.43 - t * H3 * 0.44 + a, W3 + 8, H3 * 0.21 + t * H3 * 0.45);
-  return curve;
-};
-var STEPS = 16;
-var measure = (curve) => {
-  const xs = [curve[0]], ys = [curve[1]], lengths = [0];
-  for (let i = 2; i < curve.length; i += 6) {
-    const x0 = curve[i - 2], y0 = curve[i - 1];
-    const [x1, y1, x2, y2, x3, y3] = curve.slice(i, i + 6);
-    for (let k = 1; k <= STEPS; k += 1) {
-      const u = k / STEPS, v = 1 - u;
-      const x = v * v * v * x0 + 3 * v * v * u * x1 + 3 * v * u * u * x2 + u * u * u * x3;
-      const y = v * v * v * y0 + 3 * v * v * u * y1 + 3 * v * u * u * y2 + u * u * u * y3;
-      lengths.push(lengths[lengths.length - 1] + Math.hypot(x - xs[xs.length - 1], y - ys[ys.length - 1]));
-      xs.push(x);
-      ys.push(y);
-    }
-  }
-  return { xs, ys, lengths, total: lengths[lengths.length - 1] };
-};
-var pointAt = (track, fraction) => {
-  const distance = Math.min(1, Math.max(0, fraction)) * track.total;
-  let low = 0, high = track.lengths.length - 1;
-  while (high - low > 1) {
-    const middle = low + high >> 1;
-    if (track.lengths[middle] < distance) low = middle;
-    else high = middle;
-  }
-  const span = track.lengths[high] - track.lengths[low] || 1;
-  const k = (distance - track.lengths[low]) / span;
-  return {
-    x: track.xs[low] + (track.xs[high] - track.xs[low]) * k,
-    y: track.ys[low] + (track.ys[high] - track.ys[low]) * k
-  };
-};
-var COMET_LAP = 6;
-var COMET_DASH = 0.016;
-var COMET_WIDTH = 1.6;
-var cometStrand = (i, comets, strands) => Math.min(strands - 1, Math.round((i + 0.5) / comets * (strands - 1)));
+var {
+  W: W3,
+  H: H3,
+  toPath,
+  ridgeStrand,
+  twistStrand,
+  measure,
+  pointAt,
+  cometStrand,
+  COMET_LAP,
+  COMET_DASH,
+  COMET_WIDTH
+} = neonGeometry;
 function NeonWaves({
   strands = 22,
   stars = true,
@@ -3995,6 +3917,7 @@ function NeonWaves({
   const cometElements = useRef22(null);
   const size = useRef22({ width: 0, height: 0 });
   const lastTime = useRef22(0);
+  const renderer = useRef22(null);
   const motion = useMotion();
   const id = useSvgId();
   const dots = useMemo3(() => {
@@ -4014,14 +3937,27 @@ function NeonWaves({
     const observer = createResizeObserver(([entry]) => {
       if (!entry) return;
       size.current = { width: entry.contentRect.width, height: entry.contentRect.height };
+      renderer.current?.update();
       painter.current(lastTime.current);
     });
     observer.observe(root);
     return () => observer.disconnect();
   }, []);
+  useEffect7(() => {
+    if (!rootRef.current || !ref.current) return;
+    renderer.current = createNeonRenderer(rootRef.current, ref.current, { strands, phase, shape, comets, time: lastTime.current });
+    return () => {
+      renderer.current?.dispose();
+      renderer.current = null;
+    };
+  }, []);
+  useEffect7(() => {
+    renderer.current?.update({ strands, phase, shape, comets, time: lastTime.current });
+  }, [strands, phase, shape, comets, motion]);
   usePauseOffscreen(ref);
   const paint = (time) => {
     lastTime.current = time;
+    if (renderer.current?.ready) return;
     if (lastDraw.current < 0 || time - lastDraw.current >= 1 / 16) {
       lastDraw.current = time;
       const node = ref.current;
@@ -6056,11 +5992,11 @@ function PlaybackTrack({ audio, playing, position: controlledPosition, disabled,
 // src/components/media/LevelMeter/LevelMeter.tsx
 import { useEffect as useEffect13, useRef as useRef28 } from "react";
 import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
-var SAMPLES2 = 64;
+var SAMPLES = 64;
 var WIDTH = 256;
 var HEIGHT = 24;
 var MID2 = HEIGHT / 2;
-var STEP = WIDTH / (SAMPLES2 - 1);
+var STEP = WIDTH / (SAMPLES - 1);
 var SAMPLE_MS = 28;
 var wavePath2 = (samples) => {
   const point = (i, level, side) => `${(i * STEP).toFixed(2)} ${(MID2 + side * (1 + level ** 0.68 * (MID2 - 3))).toFixed(2)}`;
@@ -6095,7 +6031,7 @@ function LevelMeter({
   useEffect13(() => {
     const shape = path.current;
     if (!shape) return;
-    const samples = Array.from({ length: SAMPLES2 + 1 }, () => 0);
+    const samples = Array.from({ length: SAMPLES + 1 }, () => 0);
     shape.setAttribute("d", wavePath2(samples));
     wake.current = () => void 0;
     if (!active) return;

package/dist/router.js

@@ -2,7 +2,7 @@ import {
   Router,
   matchRoute,
   useRouter
-} from "./chunks/chunk-347P6ZE4.js";
+} from "./chunks/chunk-IFEK5PRT.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {
   Router,

package/package.json

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