@neo-ui-kit/react 1.4.9 → 1.4.11

package/README.md

@@ -65,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.4.9.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.4.11.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-A4ZF2JYW.js → chunk-6URATN43.js}

@@ -25,9 +25,19 @@ function renderBorders() {
       @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>;
+      @group(0) @binding(6) var<storage, read> contour: array<vec2f, 1024>;
+      // Cover the 25px mask stroke and its antialiasing, without shading the empty interior.
       @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);
+        let at = (i / 2) % 1024;
+        let before = normalize(contour[at] - contour[(at + 1023) % 1024]);
+        let after = normalize(contour[(at + 1) % 1024] - contour[at]);
+        let first = vec2f(before.y, -before.x);
+        let second = vec2f(after.y, -after.x);
+        let normal = normalize(first + second);
+        let miter = normal / max(dot(normal, second), 0.5);
+        let side = select(-16.0, 16.0, i % 2 == 0);
+        let p = (contour[at] + vec2f(16) + miter * side) / u.size.xy;
+        return vec4f(p.x * 2 - 1, 1 - p.y * 2, 0, 1);
       }
       fn spot(p: vec2f, origin: vec2f, texture: texture_2d<f32>) -> vec4f {
         let uv = (p - origin) / (u.size.w * 2);
@@ -63,7 +73,7 @@ function renderBorders() {
         layout: "auto",
         vertex: { module: shader, entryPoint: "vertex" },
         fragment: { module: shader, entryPoint: "fragment", targets: [{ format }] },
-        primitive: { topology: "triangle-list" }
+        primitive: { topology: "triangle-strip" }
       });
     } catch (error) {
       device.destroy();
@@ -78,7 +88,7 @@ function renderBorders() {
         throw new Error(info.message || "Border GPU device lost");
       });
     });
-    return (scene) => {
+    const painter = (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) => {
@@ -91,6 +101,8 @@ function renderBorders() {
         return texture;
       });
       const buffer = device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+      const contour = device.createBuffer({ size: scene.points.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+      device.queue.writeBuffer(contour, 0, scene.points);
       const values = new Float32Array(16);
       values.set([
         scene.width,
@@ -105,7 +117,8 @@ function renderBorders() {
       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() }))
+        ...textures.map((texture, index) => ({ binding: index + 2, resource: texture.createView() })),
+        { binding: 6, resource: { buffer: contour } }
       ] });
       return {
         draw(current) {
@@ -132,19 +145,22 @@ function renderBorders() {
             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.draw(2050);
             }
           }
           pass.end();
-          device.queue.submit([encoder.finish()]);
+          return encoder.finish();
         },
         dispose() {
           context.unconfigure();
           buffer.destroy();
+          contour.destroy();
           textures.forEach((texture) => texture.destroy());
         }
       };
     };
+    painter.submit = (commands) => device.queue.submit(commands);
+    return painter;
   }
   let gpu;
   const pending = [];
@@ -159,10 +175,7 @@ function renderBorders() {
     }
   };
   const draw = (scene) => {
-    if (scene.gpu) {
-      scene.gpu.draw(scene);
-      return;
-    }
+    if (scene.gpu) return scene.gpu.draw(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;
@@ -222,12 +235,15 @@ function renderBorders() {
   function tick2(now) {
     frame = null;
     if (now - last2 >= 1e3 / fps - 0.5) {
+      const commands = [];
       for (const scene of scenes.values()) {
         if (!scene.visible) continue;
         if (scene.previous !== null) scene.elapsed += Math.min(0.1, Math.max(0, (now - scene.previous) / 1e3));
         scene.previous = now;
-        draw(scene);
+        const command = draw(scene);
+        if (command) commands.push(command);
       }
+      if (commands.length) gpu.submit(commands);
       last2 = now;
     }
     schedule2();
@@ -262,7 +278,8 @@ function renderBorders() {
         }
       }
       scenes.set(data.id, next);
-      draw(next);
+      const command = draw(next);
+      if (command) gpu.submit([command]);
       postMessage({ id: data.id, elapsed: next.elapsed, revision: data.revision });
     }
     schedule2();

package/dist/chunks/{chunk-2YGODRDJ.js → chunk-GHRYZ3BG.js}

@@ -2,7 +2,7 @@ import {
   themes,
   useBorder,
   usePauseOffscreen
-} from "./chunk-A4ZF2JYW.js";
+} from "./chunk-6URATN43.js";
 import {
   assignRef,
   clamp,
@@ -768,7 +768,7 @@ function buttonView(p, name = "Button") {
       onPointerMove: trackLight,
       onPointerLeave: resetLight,
       children: [
-        /* @__PURE__ */ jsx8("span", { className: "ad-button-fx", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx8("span", { className: "ad-button-fx", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("span", { className: "ad-button-plasma" }) }),
         /* @__PURE__ */ jsx8("span", { className: "ad-button-orbit", "aria-hidden": "true" }),
         loading && /* @__PURE__ */ jsx8("span", { className: "ad-spinner", "aria-hidden": "true" }),
         icon && /* @__PURE__ */ jsx8(Icon, { name: icon }),

package/dist/components/controls/shared.css

@@ -594,10 +594,18 @@
   overflow: hidden;
   pointer-events: none;
 }
-.ad-button-fx::before {
-  content: "";
+.ad-button-plasma {
   position: absolute;
   inset: -40% -10% -40% 30%;
+  opacity: 0;
+  transition: opacity 0.4s;
+  will-change: transform;
+}
+.ad-button-plasma::before {
+  /* Cache the filtered texture independently of its moving parent. */
+  content: "";
+  position: absolute;
+  inset: 0;
   background:
     radial-gradient(circle at 72% 30%, #fff 0 1.2%, transparent 2.6%),
     radial-gradient(circle at 86% 68%, var(--ad-secondary-100) 0 1.4%, transparent 3.2%),
@@ -611,9 +619,6 @@
     radial-gradient(ellipse at 80% 50%, rgb(from var(--ad-secondary) r g b / 0.44), transparent 65%);
   mask-image: linear-gradient(90deg, transparent, #000 40%);
   filter: saturate(1.35);
-  opacity: 0;
-  transition: opacity 0.4s;
-  will-change: transform;
 }
 /* The breath: a faint light over the face that swells and settles. */
 .ad-button-fx::after {
@@ -654,8 +659,8 @@
   );
   will-change: transform;
 }
-:is(.ad-button, .ad-icon-button):is([data-ad-variant="primary"], [data-ad-variant="danger"]) > .ad-button-fx::before,
-.ad-toggle-button[aria-pressed="true"] > .ad-button-fx::before {
+:is(.ad-button, .ad-icon-button):is([data-ad-variant="primary"], [data-ad-variant="danger"]) > .ad-button-fx > .ad-button-plasma,
+.ad-toggle-button[aria-pressed="true"] > .ad-button-fx > .ad-button-plasma {
   opacity: 0.85;
   animation: ad-btn-plasma 7s ease-in-out infinite alternate;
 }
@@ -671,7 +676,7 @@
 .ad-toggle-button[aria-pressed="true"] > .ad-button-orbit::before {
   animation: ad-btn-orbit 4.5s linear infinite;
 }
-:is(.ad-button, .ad-icon-button, .ad-toggle-button):hover:not(:disabled) > .ad-button-fx::before {
+:is(.ad-button, .ad-icon-button, .ad-toggle-button):hover:not(:disabled) > .ad-button-fx > .ad-button-plasma {
   opacity: 0.9;
   animation: ad-btn-plasma 7s ease-in-out infinite alternate;
 }
@@ -685,12 +690,14 @@
   display: none;
 }
 /* Icon-only buttons are small: the plasma centres on them instead of the right side. */
-.ad-icon-button > .ad-button-fx::before {
+.ad-icon-button > .ad-button-fx > .ad-button-plasma {
   inset: -30%;
+}
+.ad-icon-button .ad-button-plasma::before {
   mask-image: radial-gradient(closest-side, #000 40%, transparent);
 }
 /* Ghost buttons stay subtle: only the comet, no plasma. */
-:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"] > .ad-button-fx::before {
+:is(.ad-button, .ad-icon-button)[data-ad-variant="ghost"] > .ad-button-fx > .ad-button-plasma {
   display: none;
 }
 @keyframes ad-btn-plasma {

package/dist/core.js

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

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-2YGODRDJ.js";
-import "./chunks/chunk-A4ZF2JYW.js";
+} from "./chunks/chunk-GHRYZ3BG.js";
+import "./chunks/chunk-6URATN43.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-2YGODRDJ.js";
+} from "./chunks/chunk-GHRYZ3BG.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -79,7 +79,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-A4ZF2JYW.js";
+} from "./chunks/chunk-6URATN43.js";
 import {
   LocaleProvider,
   addMessages,

package/package.json

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