@neo-ui-kit/react 1.3.4 → 1.3.6

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.4.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.6.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-NVKL7ONR.js → chunk-6VBE5UOI.js}

@@ -9,6 +9,287 @@ import {
   useMotion
 } from "./chunk-FCOU3ODR.js";
 
+// src/core/border-worker.js
+function renderBorders() {
+  const scenes = /* @__PURE__ */ new Map();
+  let frame = null, fps = 30, last2 = -Infinity;
+  const release = (scene) => {
+    for (const layer of scene.layers) {
+      layer.mask.close();
+      layer.texture.close();
+    }
+  };
+  const draw = (scene) => {
+    const { ctx, width, height, points, length, radius } = scene;
+    ctx.clearRect(0, 0, width, height);
+    for (const layer of scene.layers) {
+      const paint = layer.ctx;
+      paint.globalCompositeOperation = "source-over";
+      paint.clearRect(0, 0, width, height);
+      for (const light of scene.lights) {
+        const index = (light.phase + scene.elapsed * light.speed / length) % 1 * 1024;
+        const lo = Math.floor(index), hi = (lo + 1) % 1024, weight = index - lo;
+        const x = points[lo * 2] * (1 - weight) + points[hi * 2] * weight;
+        const y = points[lo * 2 + 1] * (1 - weight) + points[hi * 2 + 1] * weight;
+        paint.drawImage(layer.texture, x - radius + 16, y - radius + 16, radius * 2, radius * 2);
+      }
+      paint.globalCompositeOperation = "destination-in";
+      paint.drawImage(layer.mask, 0, 0, width, height);
+      ctx.globalAlpha = layer.opacity;
+      ctx.drawImage(layer.buffer, 0, 0, width, height);
+    }
+    ctx.globalAlpha = 1;
+  };
+  const 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.elapsed += Math.min(0.1, Math.max(0, (now - scene.previous) / 1e3));
+        scene.previous = now;
+        draw(scene);
+      }
+      last2 = now;
+    }
+    schedule2();
+  }
+  onmessage = ({ data }) => {
+    const scene = scenes.get(data.id);
+    if (data.type === "rate") fps = data.fps;
+    else if (data.type === "remove") {
+      if (scene) release(scene);
+      scenes.delete(data.id);
+    } else if (data.type === "visible") {
+      if (scene) {
+        scene.visible = data.visible;
+        scene.previous = null;
+      }
+    } else if (data.type === "update") {
+      if (scene) release(scene);
+      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(next.canvas.width, next.canvas.height);
+        layer.ctx = layer.buffer.getContext("2d");
+        layer.ctx.setTransform(data.dpr, 0, 0, data.dpr, 0, 0);
+      }
+      scenes.set(data.id, next);
+      draw(next);
+      postMessage({ id: data.id, elapsed: next.elapsed, revision: data.revision });
+    }
+    schedule2();
+  };
+}
+var worker = null;
+var workerUrl = null;
+var serial = 0;
+var unavailable = false;
+var frameRate = 30;
+var clients = /* @__PURE__ */ new Map();
+var visibilityChanged = () => {
+  for (const client of clients.values()) client.visibility();
+};
+var resized = () => {
+  for (const client of clients.values()) client.update();
+};
+function setBorderFrameRate(fps) {
+  frameRate = fps;
+  worker?.postMessage({ type: "rate", fps });
+}
+function stopWorker() {
+  worker?.terminate();
+  if (workerUrl) URL.revokeObjectURL(workerUrl);
+  worker = workerUrl = null;
+  document.removeEventListener("visibilitychange", visibilityChanged);
+  window.removeEventListener("resize", resized);
+}
+function startWorker() {
+  if (worker) return worker;
+  try {
+    workerUrl = URL.createObjectURL(new Blob([`(${renderBorders.toString()})()`], { type: "text/javascript" }));
+    worker = new Worker(workerUrl);
+  } catch {
+    unavailable = true;
+    stopWorker();
+    return null;
+  }
+  worker.onmessage = ({ data }) => clients.get(data.id)?.ready(data);
+  worker.onerror = () => {
+    unavailable = true;
+    const pending = [...clients.values()];
+    stopWorker();
+    for (const client of pending) client.fail();
+  };
+  worker.postMessage({ type: "rate", fps: frameRate });
+  document.addEventListener("visibilitychange", visibilityChanged);
+  window.addEventListener("resize", resized);
+  return worker;
+}
+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 id = ++serial, host = item.element;
+  const groups = [...item.overlay.querySelectorAll(".ad-border-aura, .ad-border-core")];
+  const originalVisibility = groups.map((group) => group.style.visibility);
+  const canvas = document.createElement("canvas");
+  canvas.style.cssText = "position:absolute;left:-16px;top:-16px;pointer-events:none;visibility:hidden";
+  item.overlay.append(canvas);
+  let revision = 0, disposed = false, queued = false, signature = "", transferred = false;
+  let inView = false, visible = false, elapsed = item.elapsed, since = performance.now();
+  const renderer = { ready: false, update: queue, dispose };
+  const visibility = () => {
+    const motion = host.closest("[data-ad-motion]")?.dataset.adMotion !== "off";
+    const next = inView && motion && !document.hidden && !host.closest("[data-ad-offscreen], [data-ad-paused]");
+    canvas.style.display = motion ? "" : "none";
+    if (next === visible) return;
+    if (visible && renderer.ready) elapsed += (performance.now() - since) / 1e3;
+    since = performance.now();
+    visible = next;
+    thread.postMessage({ type: "visible", id, visible });
+  };
+  const observer = new IntersectionObserver((entries) => {
+    inView = entries[0].isIntersecting;
+    visibility();
+  }, { rootMargin: "16px" });
+  observer.observe(host);
+  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 = host; node; node = node.parentElement)
+    tokens.observe(node, { attributes: true, attributeFilter: ["style", "class", "data-ad-theme", "data-ad-color-scheme", "data-ad-motion", "data-ad-offscreen", "data-ad-paused"] });
+  clients.set(id, {
+    visibility,
+    update: queue,
+    ready(data) {
+      if (disposed || data.revision !== revision) return;
+      elapsed = data.elapsed;
+      since = performance.now();
+      renderer.ready = true;
+      groups.forEach((group) => {
+        group.style.visibility = "hidden";
+      });
+      canvas.style.visibility = "";
+      visibility();
+    },
+    fail() {
+      item.elapsed = elapsed + (visible && renderer.ready ? (performance.now() - since) / 1e3 : 0);
+      item.previousTime = null;
+      dispose();
+    }
+  });
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    renderer.ready = false;
+    revision++;
+    observer.disconnect();
+    tokens.disconnect();
+    groups.forEach((group, index) => {
+      group.style.visibility = originalVisibility[index];
+    });
+    canvas.remove();
+    clients.delete(id);
+    if (worker === thread) thread.postMessage({ type: "remove", id });
+    if (!clients.size) stopWorker();
+  }
+  function queue() {
+    if (disposed || queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      if (!disposed) void update();
+    });
+  }
+  async function update() {
+    const dpr = devicePixelRatio || 1;
+    const width = item.overlay.clientWidth + 32, height = item.overlay.clientHeight + 32;
+    const radius = item.lights[0].radius;
+    const styles = groups.map((group) => ({
+      mask: group.style.maskImage,
+      gradient: getComputedStyle(group.firstElementChild).backgroundImage,
+      opacity: Number(getComputedStyle(group).opacity)
+    }));
+    const key = JSON.stringify([item.geometry, dpr, styles]);
+    if (!item.length || key === signature) return;
+    signature = key;
+    const current = ++revision, images = [];
+    try {
+      const layers = [];
+      for (const style of styles) {
+        const mask = new Image();
+        mask.src = JSON.parse(style.mask.slice(4, -1));
+        await mask.decode();
+        const maskCanvas = document.createElement("canvas");
+        maskCanvas.width = Math.ceil(width * dpr);
+        maskCanvas.height = Math.ceil(height * dpr);
+        maskCanvas.getContext("2d").drawImage(mask, 0, 0, maskCanvas.width, maskCanvas.height);
+        const bitmap = await createImageBitmap(maskCanvas);
+        images.push(bitmap);
+        const texture = document.createElement("canvas");
+        texture.width = texture.height = Math.ceil(radius * 2 * dpr);
+        const ctx = texture.getContext("2d");
+        ctx.scale(dpr, dpr);
+        const gradient = ctx.createRadialGradient(radius, radius, 0, radius, radius, radius);
+        for (const stop of style.gradient.slice(style.gradient.indexOf(",") + 1, -1).split(/,\s*(?![^()]*\))/)) {
+          const match = stop.trim().match(/^(.*)\s+([\d.]+)%$/);
+          if (!match) throw new Error("Invalid border gradient");
+          gradient.addColorStop(Number(match[2]) / 100, match[1]);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, radius * 2, radius * 2);
+        const spot = await createImageBitmap(texture);
+        images.push(spot);
+        layers.push({ mask: bitmap, texture: spot, opacity: style.opacity });
+      }
+      if (disposed || current !== revision) {
+        images.forEach((image) => image.close());
+        return;
+      }
+      const points = new Float32Array(2048);
+      for (let index = 0; index < 1024; index++) {
+        const point = item.contour.point(index / 1024);
+        points[index * 2] = point.x;
+        points[index * 2 + 1] = point.y;
+      }
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      const surface = transferred ? void 0 : canvas.transferControlToOffscreen();
+      transferred = true;
+      thread.postMessage({
+        type: "update",
+        id,
+        revision: current,
+        canvas: surface,
+        width,
+        height,
+        dpr,
+        radius,
+        lights: item.lights.map(({ phase, speed }) => ({ phase, speed })),
+        points,
+        length: item.length,
+        layers,
+        elapsed: item.elapsed,
+        visible
+      }, [...images, points.buffer, ...surface ? [surface] : []]);
+    } catch {
+      images.forEach((image) => image.close());
+      if (!disposed) clients.get(id)?.fail();
+    }
+  }
+  visibility();
+  queue();
+  return renderer;
+}
+
 // src/core/motion-engine.js
 var uid = 0;
 var U = {
@@ -27,8 +308,18 @@ var timer = null;
 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);
 U.setMotionFrameRate = (fps) => {
   FRAME = 1e3 / Math.max(1, Math.min(120, fps));
+  setBorderFrameRate(1e3 / FRAME);
+  const now = performance.now();
+  for (const animation of looping) {
+    animation.__adStart = now - (animation.currentTime || 0);
+    if (FRAME > 1e3 / 60) animation.pause();
+  }
+  if (timer !== null) clearTimeout(timer);
+  timer = null;
+  refreshMotion();
 };
 var looping = /* @__PURE__ */ new Set();
 var pendingAnimations = /* @__PURE__ */ new Set();
@@ -60,7 +351,7 @@ function scan(now, animations = pendingAnimations) {
   for (const animation of animations)
     if (!looping.has(animation) && animation.playState === "running" && isLoop(animation)) {
       animation.__adStart = now - (animation.currentTime || 0);
-      animation.pause();
+      if (FRAME > 1e3 / 60) animation.pause();
       looping.add(animation);
     }
   pendingAnimations.clear();
@@ -74,6 +365,7 @@ function scan(now, animations = pendingAnimations) {
     }
     const hidden = document.hidden || target.closest("[data-ad-offscreen], [data-ad-paused]");
     if (hidden) {
+      if (FRAME <= 1e3 / 60 && animation.playState === "running") animation.pause();
       animation.__adHeld = true;
       continue;
     }
@@ -81,6 +373,7 @@ function scan(now, animations = pendingAnimations) {
       animation.__adStart = now - (animation.currentTime || 0);
       animation.__adHeld = false;
     }
+    if (FRAME <= 1e3 / 60 && animation.playState === "paused") animation.play();
     active.push(animation);
   }
 }
@@ -109,7 +402,8 @@ function tick(now) {
     item.sync();
   }
   if (now - last >= FRAME - 6) {
-    for (const animation of active) animation.currentTime = now - animation.__adStart;
+    if (FRAME > 1e3 / 60)
+      for (const animation of active) animation.currentTime = now - animation.__adStart;
     for (const scope of running) scope.tick(now);
     for (const listener of tickers) listener(now);
     last = now;
@@ -122,7 +416,7 @@ function tick(now) {
   }
 }
 function hasVisibleWork() {
-  if (needsScan || tickers.size || active.length) return true;
+  if (needsScan || tickers.size || active.length && FRAME > 1e3 / 60) return true;
   for (const item of measurements)
     if (item.element.isConnected && item.element._adInView !== false) return true;
   for (const scope of running)
@@ -432,7 +726,7 @@ U.attachBorder = (element, { shell = false, round = false, scope, defer = false
     previousInlinePosition
   };
   item.paint = (time) => {
-    if (!item.length) return;
+    if (!item.length || item.worker?.ready) return;
     if (item.previousTime !== null)
       item.elapsed += Math.min(0.1, Math.max(0, time - item.previousTime));
     item.previousTime = time;
@@ -488,6 +782,10 @@ U.attachBorder = (element, { shell = false, round = false, scope, defer = false
       }
     }
     item.paint(scope?.time || 0);
+    if (scope) {
+      item.worker ??= createBorderWorker(item);
+      item.worker?.update();
+    }
   };
   const queueMeasurement = () => {
     if (item.destroyed) return;
@@ -504,6 +802,7 @@ U.attachBorder = (element, { shell = false, round = false, scope, defer = false
     measurements.delete(item);
     unsubscribe?.();
     item.observer.disconnect();
+    item.worker?.dispose();
     overlay.remove();
     if (item.patchedPosition) element.style.position = item.previousInlinePosition;
     borders.delete(element);

package/dist/chunks/{chunk-N5XCG6VF.js → chunk-X7KO7G4S.js}

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

package/dist/core/border-worker.d.ts

@@ -0,0 +1,7 @@
+export function setBorderFrameRate(fps: any): void;
+/** The SVG/CSS border remains intact until its replacement has painted, and is the fallback. */
+export function createBorderWorker(item: any): {
+    ready: boolean;
+    update: () => void;
+    dispose: () => void;
+} | null;

package/dist/core.js

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

package/dist/forms.js

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

package/dist/index.js

@@ -61,7 +61,7 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-N5XCG6VF.js";
+} from "./chunks/chunk-X7KO7G4S.js";
 import {
   ThemeProvider,
   getMotionStats,
@@ -76,7 +76,7 @@ import {
   useTabShape,
   useThemePalette,
   useTick
-} from "./chunks/chunk-NVKL7ONR.js";
+} from "./chunks/chunk-6VBE5UOI.js";
 import {
   LocaleProvider,
   addMessages,
@@ -3839,15 +3839,15 @@ var planet = {
         const pixel = (y * width + x) * 4;
         if (radial > 1.12) continue;
         const light = clamp01(0.48 - dx * 0.8 - dy * 0.3, 0.08, 1.2);
-        if (radial > 1) {
-          const alpha = Math.exp(-(radial - 1) * 88) * 0.58 * light;
+        if (edge <= -0.5) {
+          const alpha2 = Math.exp(-(radial - 1) * 88) * 0.58 * light;
           image.data[pixel] = 255;
           image.data[pixel + 1] = 40;
           image.data[pixel + 2] = 82;
-          image.data[pixel + 3] = 255 * alpha;
+          image.data[pixel + 3] = 255 * alpha2;
           continue;
         }
-        const z = Math.sqrt(1 - dx * dx - dy * dy);
+        const z = Math.sqrt(Math.max(0, 1 - dx * dx - dy * dy));
         const terrainNoise = fbm(dx * 18 + z * 7, dy * 21 + z * 5, 6);
         const crust = Math.pow(
           1 - Math.abs(
@@ -3860,10 +3860,14 @@ var planet = {
         const bloom = Math.exp(-Math.max(0, edge) / (15 * scale)) * light;
         const shade = clamp01(0.48 - dx * 0.78 - z * 0.55, 0.07, 0.95);
         const terrain = (10 + 61 * ridge + 26 * terrainNoise) * shade;
-        image.data[pixel] = terrain + rim * 239 + bloom * 75;
-        image.data[pixel + 1] = terrain * 0.14 + rim * 165 + bloom * 8;
-        image.data[pixel + 2] = terrain * 0.34 + rim * 183 + bloom * 25;
-        image.data[pixel + 3] = 255;
+        const coverage = clamp01(edge + 0.5);
+        const alpha = coverage === 1 ? 1 : coverage + (1 - coverage) * Math.exp(-Math.max(0, radial - 1) * 88) * 0.58 * light;
+        const surface = coverage / alpha;
+        const atmosphere = 1 - surface;
+        image.data[pixel] = (terrain + rim * 239 + bloom * 75) * surface + 255 * atmosphere;
+        image.data[pixel + 1] = (terrain * 0.14 + rim * 165 + bloom * 8) * surface + 40 * atmosphere;
+        image.data[pixel + 2] = (terrain * 0.34 + rim * 183 + bloom * 25) * surface + 82 * atmosphere;
+        image.data[pixel + 3] = 255 * alpha;
       }
   }
 };

package/package.json

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