@neo-ui-kit/react 1.3.16 → 1.3.18

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.3.16.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.18.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-TMCWA446.js → chunk-NTNL3ELP.js}

@@ -2590,6 +2590,7 @@ var RotaryKnob = (p) => {
   const baseRef = useRef14(null);
   const feedbackRef = useRef14(null);
   const rotorRef = useRef14(null);
+  const rasterRef = useRef14(null);
   const controlRef = useRef14(null);
   const readoutRef = useRef14(null);
   const controllerRef = useRef14(null);
@@ -2660,6 +2661,69 @@ var RotaryKnob = (p) => {
     let previousFrame = 0;
     let disposed = false;
     let renderingSize = 0;
+    let rasterTimer = 0;
+    const raster = rasterRef.current;
+    const rasterContext = paintable ? raster?.getContext("2d") : null;
+    function invalidateRaster() {
+      clearTimeout(rasterTimer);
+      if (!rasterContext || !("filter" in rasterContext) || !raster) return;
+      raster.hidden = true;
+      delete root.dataset.rasterized;
+      if (!disposed) rasterTimer = window.setTimeout(cacheRaster, 500);
+    }
+    function cacheRaster() {
+      if (!raster || !rasterContext || disposed || renderingSize || drag || animationFrame || root.matches(":hover") || !canvas.width) return;
+      const size = parseFloat(getComputedStyle(root).width);
+      if (!size) return;
+      const ratio = devicePixelRatio || 1;
+      const padding = Math.ceil(parseFloat(getComputedStyle(root).fontSize) * 8);
+      const extent = size + padding * 2;
+      raster.width = raster.height = Math.ceil(extent * ratio);
+      Object.assign(raster.style, {
+        left: `${-padding}px`,
+        top: `${-padding}px`,
+        width: `${raster.width / ratio}px`,
+        height: `${raster.height / ratio}px`
+      });
+      const turned = document.createElement("canvas");
+      turned.width = turned.height = Math.ceil(size * ratio);
+      const turning = turned.getContext("2d");
+      if (!turning) return;
+      turning.translate(size * ratio / 2, size * ratio / 2);
+      turning.rotate((valueAngle(visualValue) - initialAngle) / degrees);
+      turning.drawImage(
+        rotor,
+        -size * ratio / 2,
+        -size * ratio / 2,
+        size * ratio,
+        size * ratio
+      );
+      for (const [source, element] of [
+        [canvas, canvas],
+        [feedback, feedback],
+        [turned, rotor.parentElement]
+      ]) {
+        if (!element) return;
+        rasterContext.filter = getComputedStyle(element).filter.replace(
+          /(-?[\d.]+)px/g,
+          (_, pixels) => `${Number(pixels) * ratio}px`
+        );
+        rasterContext.drawImage(
+          source,
+          0,
+          0,
+          source === turned ? size * ratio : source.width,
+          source === turned ? size * ratio : source.height,
+          padding * ratio,
+          padding * ratio,
+          size * ratio,
+          size * ratio
+        );
+      }
+      rasterContext.filter = "none";
+      raster.hidden = false;
+      root.dataset.rasterized = "true";
+    }
     async function render() {
       if (disposed || !painted) return;
       const cssSize = root.getBoundingClientRect().width;
@@ -2671,6 +2735,7 @@ var RotaryKnob = (p) => {
       );
       if (!size || renderingSize === size || [canvas, rotor, feedback].every((layer) => layer.width === size && layer.height === size)) return;
       renderingSize = size;
+      invalidateRaster();
       canvas.width = canvas.height = size;
       const center = size / 2;
       const radius = size * 0.445;
@@ -2947,6 +3012,7 @@ var RotaryKnob = (p) => {
     }
     function paintFeedback() {
       if (!painted || !feedback.width || disposed) return;
+      invalidateRaster();
       const scale2 = feedback.width * 0.445;
       const start = (startAngle - 90) / degrees;
       const end = (valueAngle(visualValue) - 90) / degrees;
@@ -3254,6 +3320,14 @@ var RotaryKnob = (p) => {
     root.addEventListener("pointerleave", resetHover, {
       signal: listeners.signal
     });
+    for (const event of ["pointerenter", "pointerleave"])
+      root.addEventListener(event, invalidateRaster, { signal: listeners.signal });
+    const tokens = typeof MutationObserver === "undefined" ? null : new MutationObserver(invalidateRaster);
+    for (let node = root; node; node = node.parentElement)
+      tokens?.observe(node, {
+        attributes: true,
+        attributeFilter: ["style", "class", "data-ad-theme", "data-ad-color-scheme"]
+      });
     window.addEventListener("blur", () => finishDrag(true), {
       signal: listeners.signal
     });
@@ -3289,6 +3363,8 @@ var RotaryKnob = (p) => {
       finishDrag();
       listeners.abort();
       observer.disconnect();
+      tokens?.disconnect();
+      clearTimeout(rasterTimer);
       clearTimeout(renderTimer);
       cancelAnimationFrame(animationFrame);
       cancelAnimationFrame(hoverFrame);
@@ -3350,6 +3426,7 @@ var RotaryKnob = (p) => {
           }
         ),
         /* @__PURE__ */ jsx29("span", { className: "knob__surface knob__rotor-frame", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("canvas", { className: "knob__rotor", ref: rotorRef }) }),
+        /* @__PURE__ */ jsx29("canvas", { className: "knob__raster", ref: rasterRef, hidden: true, "aria-hidden": "true" }),
         /* @__PURE__ */ jsx29("span", { className: "knob__sheen", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx29(
           "div",

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

@@ -27,16 +27,18 @@
   transition: opacity 0.35s;
   pointer-events: none;
 }
-.ad-card-light::before {
-  --ad-spot-x: inherit;
-  --ad-spot-y: inherit;
+.ad-card-spotlight {
+  position: absolute;
+  inset: 0;
+  transform: translate3d(var(--ad-spot-x, 50%), var(--ad-spot-y, 0%), 0);
+}
+.ad-card-spotlight::before {
   content: "";
   position: absolute;
   width: 44rem;
   height: 44rem;
-  left: var(--ad-spot-x, 50%);
-  top: var(--ad-spot-y, 0%);
-  transform: translate3d(-50%, -50%, 0);
+  left: -22rem;
+  top: -22rem;
   background: radial-gradient(
     22rem circle,
     rgb(from var(--ad-primary) r g b / 0.08),

package/dist/components/media/RotaryKnob/styles.css

@@ -76,6 +76,13 @@
   user-select: none;
   -webkit-user-select: none;
 }
+.ad-rotary-knob .knob__raster {
+  position: absolute;
+  pointer-events: none;
+}
+.ad-rotary-knob[data-rasterized] .knob__surface {
+  visibility: hidden;
+}
 .ad-rotary-knob .knob__control:active,
 .ad-rotary-knob.is-dragging .knob__control {
   cursor: grabbing;

package/dist/forms.js

@@ -4,7 +4,7 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-TMCWA446.js";
+} from "./chunks/chunk-NTNL3ELP.js";
 import "./chunks/chunk-6VPAU3TV.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-TMCWA446.js";
+} from "./chunks/chunk-NTNL3ELP.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -357,7 +357,11 @@ var Card = ({
       }
     ),
     children,
-    createElement3("span", { ref: spotlight, className: "ad-card-light", "aria-hidden": true })
+    createElement3(
+      "span",
+      { className: "ad-card-light", "aria-hidden": true },
+      createElement3("span", { ref: spotlight, className: "ad-card-spotlight" })
+    )
   );
 };
 

package/package.json

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