@neo-ui-kit/react 1.4.5 → 1.4.7

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.5.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.4.7.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-P5SNVRBZ.js → chunk-5KH4JI2K.js}

@@ -370,6 +370,7 @@ function createBorderWorker(item) {
       groups.forEach((group) => {
         group.style.visibility = "hidden";
       });
+      item.overlay.setAttribute("data-ready", "");
       canvas.style.visibility = "";
       visibility();
     },
@@ -389,6 +390,7 @@ function createBorderWorker(item) {
     groups.forEach((group, index) => {
       group.style.visibility = originalVisibility[index];
     });
+    item.overlay.setAttribute("data-ready", "");
     canvas.remove();
     clients.delete(id);
     if (worker === thread2) thread2.postMessage({ type: "remove", id });
@@ -404,7 +406,7 @@ function createBorderWorker(item) {
   }
   async function update() {
     const dpr = devicePixelRatio || 1;
-    const width = item.overlay.clientWidth + 32, height = item.overlay.clientHeight + 32;
+    const width = item.width + 32, height = item.height + 32;
     const radius = item.lights[0].radius;
     const styles = groups.map((group) => ({
       mask: group.style.maskImage,
@@ -1153,6 +1155,7 @@ function tick(now) {
   }
   if (needsScan || now - lastScan > 400) scan(now);
   const deadline = performance.now() + 8;
+  const updates = [];
   for (const item of measurements) {
     if (!item.element.isConnected) {
       measurements.delete(item);
@@ -1161,8 +1164,9 @@ function tick(now) {
     if (item.element._adInView === false) continue;
     if (performance.now() >= deadline) break;
     measurements.delete(item);
-    item.sync();
+    updates.push(item.measure());
   }
+  for (const update of updates) update?.();
   if (now - last >= FRAME - 6) {
     if (FRAME > 1e3 / 60)
       for (const animation of active) animation.currentTime = now - animation.__adStart;
@@ -1501,7 +1505,7 @@ U.attachBorder = (element, { shell = false, round = false, scope, defer = false
       for (const spot of light.spots) spot.style.transform = transform;
     }
   };
-  item.sync = () => {
+  item.measure = () => {
     const computed = getComputedStyle(element);
     const sides = ["Top", "Right", "Bottom", "Left"];
     const borderWidths = sides.map((side) => parseFloat(computed[`border${side}Width`]) || 0);
@@ -1510,10 +1514,7 @@ U.attachBorder = (element, { shell = false, round = false, scope, defer = false
       return Number.isFinite(value) ? value + (computed.boxSizing === "border-box" ? 0 : [start, end].reduce((sum, side) => sum + borderWidths[side] + (parseFloat(computed[`padding${sides[side]}`]) || 0), 0)) : element[fallback];
     });
     if (!w || !h) return;
-    if (computed.position === "static") {
-      item.patchedPosition = true;
-      element.style.position = "relative";
-    }
+    const patchPosition = computed.position === "static";
     const corners = ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map((corner) => {
       const values = (computed[`border${corner}Radius`] || computed.borderTopLeftRadius).split(/\s+/);
       return [w, h].map((size, axis) => {
@@ -1523,34 +1524,44 @@ U.attachBorder = (element, { shell = false, round = false, scope, defer = false
     });
     const geometry = `${w},${h},${corners},${borderWidths}`;
     if (item.geometry === geometry) return;
-    item.geometry = geometry;
-    overlay.style.inset = borderWidths.map((width) => `${-width}px`).join(" ");
-    overlay.style.width = `calc(100% + ${borderWidths[1] + borderWidths[3]}px)`;
-    overlay.style.height = `calc(100% + ${borderWidths[0] + borderWidths[2]}px)`;
-    item.contour = U.roundedPath(w, h, corners);
-    const { d } = item.contour;
-    edge.setAttribute("viewBox", `0 0 ${w} ${h}`);
-    path.setAttribute("d", d);
-    for (const [node, strokes] of [[aura, AURA], [core, [[shell ? 1.9 : 1.35, 1]]]]) {
-      const mask = ringMask(w, h, d, strokes);
-      node.style.maskImage = mask;
-      node.style.webkitMaskImage = mask;
-    }
-    item.length = item.contour.length;
-    radius = round ? 28 : Math.min(260, Math.max(42, item.length * 0.153));
-    for (const light of lights) {
-      light.radius = radius;
-      for (const spot of light.spots) {
-        spot.style.width = `${radius * 2}px`;
-        spot.style.height = `${radius * 2}px`;
+    return () => {
+      if (patchPosition) {
+        item.patchedPosition = true;
+        element.style.position = "relative";
       }
-    }
-    item.paint(scope?.time || 0);
-    if (scope) {
-      item.worker ??= createBorderWorker(item);
-      item.worker?.update();
-    }
+      item.geometry = geometry;
+      item.width = Math.round(w);
+      item.height = Math.round(h);
+      overlay.style.inset = borderWidths.map((width) => `${-width}px`).join(" ");
+      overlay.style.width = `calc(100% + ${borderWidths[1] + borderWidths[3]}px)`;
+      overlay.style.height = `calc(100% + ${borderWidths[0] + borderWidths[2]}px)`;
+      item.contour = U.roundedPath(w, h, corners);
+      const { d } = item.contour;
+      edge.setAttribute("viewBox", `0 0 ${w} ${h}`);
+      path.setAttribute("d", d);
+      for (const [node, strokes] of [[aura, AURA], [core, [[shell ? 1.9 : 1.35, 1]]]]) {
+        const mask = ringMask(w, h, d, strokes);
+        node.style.maskImage = mask;
+        node.style.webkitMaskImage = mask;
+      }
+      item.length = item.contour.length;
+      radius = round ? 28 : Math.min(260, Math.max(42, item.length * 0.153));
+      for (const light of lights) {
+        light.radius = radius;
+        for (const spot of light.spots) {
+          spot.style.width = `${radius * 2}px`;
+          spot.style.height = `${radius * 2}px`;
+        }
+      }
+      item.paint(scope?.time || 0);
+      if (scope) {
+        item.worker ??= createBorderWorker(item);
+        item.worker?.update();
+      }
+      if (!item.worker) overlay.setAttribute("data-ready", "");
+    };
   };
+  item.sync = () => item.measure()?.();
   const queueMeasurement = () => {
     if (item.destroyed) return;
     measurements.add(item);

package/dist/chunks/{chunk-4XHHN4GR.js → chunk-VRD5EAQ4.js}

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

package/dist/core.js

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

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-4XHHN4GR.js";
-import "./chunks/chunk-P5SNVRBZ.js";
+} from "./chunks/chunk-VRD5EAQ4.js";
+import "./chunks/chunk-5KH4JI2K.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-4XHHN4GR.js";
+} from "./chunks/chunk-VRD5EAQ4.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -79,7 +79,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-P5SNVRBZ.js";
+} from "./chunks/chunk-5KH4JI2K.js";
 import {
   LocaleProvider,
   addMessages,

package/dist/theme/base.css

@@ -126,6 +126,16 @@ button.ad:focus-visible {
   left: 0;
   will-change: transform;
 }
+.ad-border:not([data-ready]) :is(.ad-border-aura, .ad-border-core) {
+  visibility: hidden;
+}
+.ad-border[data-ready] > canvas {
+  animation: ad-border-reveal 160ms ease-out both;
+}
+@keyframes ad-border-reveal {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
 /* Paused borders should not reserve compositor layers for their four static spots. */
 [data-ad-offscreen] .ad-border-light,
 [data-ad-motion="off"] .ad-border-light {

package/package.json

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