@neo-ui-kit/react 1.3.14 → 1.3.16

package/README.md

@@ -4,6 +4,10 @@ Migration: replace `@ad-voice/ui` with `@neo-ui-kit/react` in dependencies and i
 
 NEO UI — React + TypeScript UI kit: glass/ruby surfaces, animated neon borders, fields, tabs, dialogs, audio controls and a melody editor.
 
+## 1.3.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.
@@ -61,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.14.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.16.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-BHX5MDJL.js → chunk-6VPAU3TV.js}

@@ -11,15 +11,158 @@ 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) => {
+    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;
@@ -89,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") {
@@ -105,15 +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(
-          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);
+      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);
@@ -121,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-VEAA27XZ.js → chunk-TMCWA446.js}

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

package/dist/components/feedback/Dialog/styles.css

@@ -19,9 +19,18 @@ html:has(.ad-dialog[open]) {
 }
 /* Pointer light: a soft glow under the cursor, painted over the window's own surface. */
 .ad.ad-dialog[data-ad-material] {
-  background:
-    radial-gradient(26rem circle at var(--ad-spot-x, -40rem) var(--ad-spot-y, -40rem), rgb(from var(--ad-primary) r g b / 0.11), transparent 60%),
-    var(--ad-surface-dialog);
+  background: var(--ad-surface-dialog);
+}
+.ad-dialog-spotlight {
+  position: absolute;
+  left: -26rem;
+  top: -26rem;
+  width: 52rem;
+  height: 52rem;
+  z-index: -2;
+  pointer-events: none;
+  background: radial-gradient(26rem circle, rgb(from var(--ad-primary) r g b / 0.11), transparent 60%);
+  transform: translate3d(var(--ad-spot-x, -40rem), var(--ad-spot-y, -40rem), 0);
 }
 .ad-dialog > .ad-header {
   flex-wrap: nowrap;

package/dist/components/layout/Card/styles.css

@@ -18,23 +18,31 @@
   margin-bottom: var(--ad-space-3);
 }
 /* Pointer spotlight: a soft ruby light under the cursor, faded in on hover. */
-.ad-card::after {
-  /* The pointer position is not inherited by default: the light reads it from its own card. */
+.ad-card-light {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 0.35s;
+  pointer-events: none;
+}
+.ad-card-light::before {
   --ad-spot-x: inherit;
   --ad-spot-y: inherit;
   content: "";
   position: absolute;
-  inset: 0;
-  border-radius: inherit;
+  width: 44rem;
+  height: 44rem;
+  left: var(--ad-spot-x, 50%);
+  top: var(--ad-spot-y, 0%);
+  transform: translate3d(-50%, -50%, 0);
   background: radial-gradient(
-    22rem circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 0%),
+    22rem circle,
     rgb(from var(--ad-primary) r g b / 0.08),
     transparent 60%
   );
-  opacity: 0;
-  transition: opacity 0.35s;
-  pointer-events: none;
 }
-.ad-card:hover::after {
+.ad-card:hover > .ad-card-light {
   opacity: 1;
 }

package/dist/core.js

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

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-VEAA27XZ.js";
-import "./chunks/chunk-BHX5MDJL.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-VEAA27XZ.js";
+} from "./chunks/chunk-TMCWA446.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -79,7 +79,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-BHX5MDJL.js";
+} from "./chunks/chunk-6VPAU3TV.js";
 import {
   LocaleProvider,
   addMessages,
@@ -315,6 +315,7 @@ var Card = ({
   ...p
 }) => {
   const ref = useRef(null);
+  const spotlight = useRef(null);
   useBorder(ref, border, shell);
   usePauseOffscreen(ref);
   return createElement3(
@@ -330,12 +331,14 @@ var Card = ({
       "data-ad-padding": padding,
       // A soft light follows the pointer across the surface.
       onPointerMove: (event) => {
+        const style = spotlight.current?.style;
+        if (!style) return;
         const box = event.currentTarget.getBoundingClientRect();
-        event.currentTarget.style.setProperty(
+        style.setProperty(
           "--ad-spot-x",
           `${event.clientX - box.left}px`
         );
-        event.currentTarget.style.setProperty(
+        style.setProperty(
           "--ad-spot-y",
           `${event.clientY - box.top}px`
         );
@@ -353,7 +356,8 @@ var Card = ({
         compact: level > 2
       }
     ),
-    children
+    children,
+    createElement3("span", { ref: spotlight, className: "ad-card-light", "aria-hidden": true })
   );
 };
 
@@ -2865,7 +2869,7 @@ var Dialog = (p) => {
     p.defaultOpen ?? false,
     p.onOpenChange
   ), [pending, setPending] = useState5(false), [error, setError] = useState5();
-  const ref = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
+  const ref = useRef10(null), spotlight = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
   useLayoutEffect2(() => {
     confirming.current = false;
     setPending(false);
@@ -2911,13 +2915,15 @@ var Dialog = (p) => {
         pressedOutside.current = false;
       },
       onPointerMove: (e) => {
+        const style = spotlight.current?.style;
+        if (!style) return;
         const box = e.currentTarget.getBoundingClientRect();
-        e.currentTarget.style.setProperty("--ad-spot-x", `${e.clientX - box.left}px`);
-        e.currentTarget.style.setProperty("--ad-spot-y", `${e.clientY - box.top}px`);
+        style.setProperty("--ad-spot-x", `${e.clientX - box.left}px`);
+        style.setProperty("--ad-spot-y", `${e.clientY - box.top}px`);
       },
-      onPointerLeave: (e) => {
-        e.currentTarget.style.removeProperty("--ad-spot-x");
-        e.currentTarget.style.removeProperty("--ad-spot-y");
+      onPointerLeave: () => {
+        spotlight.current?.style.removeProperty("--ad-spot-x");
+        spotlight.current?.style.removeProperty("--ad-spot-y");
       },
       "aria-describedby": p.description ? descId : void 0,
       onCancel: (e) => {
@@ -2925,6 +2931,7 @@ var Dialog = (p) => {
         if (!pending) setOpen(false);
       },
       children: [
+        /* @__PURE__ */ jsx23("span", { ref: spotlight, className: "ad-dialog-spotlight", "aria-hidden": "true" }),
         p.art && /* @__PURE__ */ jsx23("div", { className: "ad-dialog-art", "aria-hidden": "true", children: p.art }),
         /* @__PURE__ */ jsx23(
           Header,

package/package.json

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