@neo-ui-kit/react 0.0.0-stage → 1.0.1

package/dist/chunks/chunk-YKCUOZ7V.js

@@ -0,0 +1,777 @@
+import {
+  canObserveIntersection,
+  createResizeObserver,
+  reducedMotionQuery,
+  useMotion
+} from "./chunk-FCOU3ODR.js";
+
+// src/core/motion-engine.js
+var uid = 0;
+var U = {
+  uid: (p = "ad") => `${p}-${++uid}`,
+  svg(tag, attrs = {}) {
+    const n = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, String(v));
+    return n;
+  }
+};
+var seen = /* @__PURE__ */ new WeakMap();
+var running = /* @__PURE__ */ new Set();
+var measurements = /* @__PURE__ */ new Set();
+var raf = null;
+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);
+U.setMotionFrameRate = (fps) => {
+  FRAME = 1e3 / Math.max(1, Math.min(120, fps));
+};
+var looping = /* @__PURE__ */ new Set();
+var pendingAnimations = /* @__PURE__ */ new Set();
+var pendingTargets = /* @__PURE__ */ new Set();
+var active = [];
+var lastScan = -Infinity;
+var needsScan = false;
+var tickers = /* @__PURE__ */ new Set();
+U.subscribeTick = (listener) => {
+  tickers.add(listener);
+  schedule();
+  return () => {
+    tickers.delete(listener);
+    schedule();
+  };
+};
+var isLoop = (animation) => {
+  if (!animation.animationName || !animation.animationName.startsWith("ad-")) return false;
+  const timing = animation.effect && animation.effect.getTiming();
+  return !!timing && timing.iterations === Infinity;
+};
+function scan(now, animations = pendingAnimations) {
+  lastScan = now;
+  needsScan = false;
+  for (const target of pendingTargets)
+    for (const animation of target.getAnimations?.() || []) pendingAnimations.add(animation);
+  pendingTargets.clear();
+  for (const animation of animations)
+    if (!looping.has(animation) && animation.playState === "running" && isLoop(animation)) {
+      animation.__adStart = now - (animation.currentTime || 0);
+      animation.pause();
+      looping.add(animation);
+    }
+  pendingAnimations.clear();
+  active = [];
+  for (const animation of looping) {
+    const target = animation.effect && animation.effect.target;
+    if (!target || !target.isConnected || animation.playState === "idle" || !isLoop(animation)) {
+      looping.delete(animation);
+      if (target && target.isConnected && animation.playState === "paused") animation.play();
+      continue;
+    }
+    const hidden = document.hidden || target.closest("[data-ad-offscreen], [data-ad-paused]");
+    if (hidden) {
+      animation.__adHeld = true;
+      continue;
+    }
+    if (animation.__adHeld) {
+      animation.__adStart = now - (animation.currentTime || 0);
+      animation.__adHeld = false;
+    }
+    active.push(animation);
+  }
+}
+function tick(now) {
+  raf = null;
+  if (needsScan || now - lastScan > 400) scan(now);
+  const deadline = performance.now() + 8;
+  for (const item of measurements) {
+    if (!item.element.isConnected) {
+      measurements.delete(item);
+      continue;
+    }
+    if (item.element._adInView === false) continue;
+    if (performance.now() >= deadline) break;
+    measurements.delete(item);
+    item.sync();
+  }
+  if (now - last >= FRAME - 6) {
+    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;
+  }
+  if (hasVisibleWork() && !document.hidden) {
+    timer = setTimeout(() => {
+      timer = null;
+      schedule();
+    }, Math.max(0, FRAME - (performance.now() - now) - 4));
+  }
+}
+function hasVisibleWork() {
+  if (needsScan || tickers.size || active.length) return true;
+  for (const item of measurements)
+    if (item.element.isConnected && item.element._adInView !== false) return true;
+  for (const scope of running)
+    if (scope.enabled) {
+      for (const node of scope.callbacks.keys())
+        if (node.isConnected && node._adInView !== false) return true;
+    }
+  return false;
+}
+function schedule() {
+  if (document.hidden || !hasVisibleWork()) {
+    if (raf !== null) cancelAnimationFrame(raf);
+    if (timer !== null) clearTimeout(timer);
+    raf = timer = null;
+    return;
+  }
+  if (raf === null && timer === null) raf = requestAnimationFrame(tick);
+}
+function refreshMotion() {
+  needsScan = true;
+  schedule();
+}
+var wake = () => {
+  for (const s of running) s.previous = null;
+  if (document.hidden) scan(performance.now());
+  refreshMotion();
+};
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  document.addEventListener("visibilitychange", wake);
+  const onAnimation = (event) => {
+    if (!event.animationName.startsWith("ad-")) return;
+    pendingTargets.add(event.target);
+    needsScan = true;
+    schedule();
+  };
+  document.addEventListener("animationstart", onAnimation);
+  document.addEventListener("animationcancel", onAnimation);
+  scan(performance.now(), document.getAnimations?.() || []);
+  schedule();
+}
+var scopeCount = 0;
+var preferenceMedia = null;
+var preferenceScopes = /* @__PURE__ */ new Set();
+var onPreference = (event) => {
+  for (const scope of preferenceScopes)
+    if (!scope.explicit) scope.set(!event.matches, false);
+};
+var visibilityObserver = null;
+var visibilityScopes = /* @__PURE__ */ new Map();
+var observeScope = (node, scope) => {
+  if (!canObserveIntersection()) return;
+  let scopes = visibilityScopes.get(node);
+  if (!scopes) {
+    scopes = /* @__PURE__ */ new Set();
+    visibilityScopes.set(node, scopes);
+    visibilityObserver ??= new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          entry.target._adInView = entry.isIntersecting;
+          for (const watcher of visibilityScopes.get(entry.target) || []) watcher.previous = null;
+        }
+        schedule();
+      },
+      { rootMargin: "10%" }
+    );
+    visibilityObserver.observe(node);
+  }
+  scopes.add(scope);
+};
+var unobserveScope = (node, scope) => {
+  const scopes = visibilityScopes.get(node);
+  if (!scopes) return;
+  scopes.delete(scope);
+  if (scopes.size) return;
+  visibilityScopes.delete(node);
+  visibilityObserver.unobserve(node);
+  if (!visibilityScopes.size) {
+    visibilityObserver.disconnect();
+    visibilityObserver = null;
+  }
+};
+U.createMotion = (root = document) => {
+  scopeCount++;
+  if (!preferenceMedia) {
+    preferenceMedia = reducedMotionQuery();
+    preferenceMedia.addEventListener("change", onPreference);
+  }
+  const scope = {
+    root,
+    enabled: !preferenceMedia.matches,
+    time: 0,
+    previous: null,
+    explicit: false,
+    callbacks: /* @__PURE__ */ new Map(),
+    tick(now) {
+      if (!this.enabled) {
+        this.previous = null;
+        return;
+      }
+      let painted = false;
+      for (const [node, fn] of this.callbacks) {
+        if (!node.isConnected) {
+          this.callbacks.delete(node);
+          unobserveScope(node, this);
+          continue;
+        }
+        if (node._adInView === true || node._adInView !== false && node.getClientRects().length) {
+          if (!painted) {
+            if (this.previous !== null)
+              this.time += Math.min((now - this.previous) / 1e3, 0.1);
+            this.previous = now;
+            painted = true;
+          }
+          fn(this.time);
+        }
+      }
+      if (!painted) this.previous = null;
+    },
+    add(node, callback, immediate = true) {
+      this.callbacks.set(node, callback);
+      if (immediate) callback(this.time);
+      observeScope(node, this);
+      schedule();
+      return () => {
+        this.callbacks.delete(node);
+        unobserveScope(node, this);
+        schedule();
+      };
+    },
+    set(enabled, explicit = true) {
+      this.enabled = !!enabled;
+      this.explicit ||= explicit;
+      this.previous = null;
+      const target = root.dataset ? root : root.host || document.documentElement;
+      target.dataset.adMotion = enabled ? "on" : "off";
+      if (this.enabled) running.add(this);
+      else running.delete(this);
+      schedule();
+      return this.enabled;
+    },
+    dispose() {
+      if (this.disposed) return;
+      this.disposed = true;
+      --scopeCount;
+      running.delete(this);
+      for (const node of this.callbacks.keys()) unobserveScope(node, this);
+      this.callbacks.clear();
+      preferenceScopes.delete(this);
+      if (!preferenceScopes.size) {
+        preferenceMedia.removeEventListener("change", onPreference);
+        preferenceMedia = null;
+      }
+      schedule();
+    }
+  };
+  preferenceScopes.add(scope);
+  scope.set(scope.enabled, false);
+  return scope;
+};
+U.roundedPath = (w, h, corners) => {
+  const i = 0.65, R = w - i, B = h - i;
+  const factor = Math.min(
+    1,
+    w / (corners[0][0] + corners[1][0]),
+    w / (corners[2][0] + corners[3][0]),
+    h / (corners[0][1] + corners[3][1]),
+    h / (corners[1][1] + corners[2][1])
+  );
+  const [tl, tr, br, bl] = corners.map(([x2, y2]) => {
+    x2 = Math.max(0, x2 * factor - i);
+    y2 = Math.max(0, y2 * factor - i);
+    return x2 && y2 ? [x2, y2] : [0, 0];
+  });
+  const segments = [];
+  let d = `M${i + tl[0]} ${i}`, x = i + tl[0], y = i;
+  const line = (toX, toY) => {
+    const fromX = x, fromY = y, dx = toX - x, dy = toY - y;
+    const length2 = Math.hypot(dx, dy);
+    segments.push({ length: length2, point: (distance) => ({ x: fromX + dx * distance / length2, y: fromY + dy * distance / length2 }) });
+    d += `L${toX} ${toY}`;
+    x = toX;
+    y = toY;
+  };
+  const arc = (cx, cy, [rx, ry], angle, toX, toY) => {
+    if (!rx || !ry) return line(toX, toY);
+    const point = (t) => ({ x: cx + rx * Math.cos(angle + t * Math.PI / 2), y: cy + ry * Math.sin(angle + t * Math.PI / 2) });
+    const distances = [0];
+    if (rx !== ry) {
+      let previous = point(0);
+      for (let step = 1; step <= 32; step++) {
+        const next = point(step / 32);
+        distances.push(distances[step - 1] + Math.hypot(next.x - previous.x, next.y - previous.y));
+        previous = next;
+      }
+    }
+    const length2 = rx === ry ? rx * Math.PI / 2 : distances[32];
+    segments.push({ length: length2, point(distance) {
+      if (rx === ry) return point(distance / length2);
+      let lo = 0, hi = 32;
+      while (hi - lo > 1) {
+        const middle = lo + hi >> 1;
+        if (distances[middle] < distance) lo = middle;
+        else hi = middle;
+      }
+      return point((lo + (distance - distances[lo]) / (distances[hi] - distances[lo])) / 32);
+    } });
+    d += `A${rx} ${ry} 0 0 1 ${toX} ${toY}`;
+    x = toX;
+    y = toY;
+  };
+  line(R - tr[0], i);
+  arc(R - tr[0], i + tr[1], tr, -Math.PI / 2, R, i + tr[1]);
+  line(R, B - br[1]);
+  arc(R - br[0], B - br[1], br, 0, R - br[0], B);
+  line(i + bl[0], B);
+  arc(i + bl[0], B - bl[1], bl, Math.PI / 2, i, B - bl[1]);
+  line(i, i + tl[1]);
+  arc(i + tl[0], i + tl[1], tl, Math.PI, i + tl[0], i);
+  d += "Z";
+  const length = segments.reduce((total, segment) => total + segment.length, 0);
+  return {
+    d,
+    point(fraction) {
+      let distance = fraction * length;
+      for (const segment of segments) {
+        if (segment.length && distance <= segment.length) return segment.point(distance);
+        distance -= segment.length;
+      }
+      return { x: i + tl[0], y: i };
+    }
+  };
+};
+var borders = /* @__PURE__ */ new WeakMap();
+var AURA = [[25, 0.016], [22, 0.031], [19, 0.055], [16, 0.087], [13, 0.124], [10, 0.157], [7, 0.17], [4, 0.153]];
+var borderSerial = 0;
+var HALO = 16;
+var CORE_STOPS = [
+  ["var(--ad-neutral-200)", 0],
+  ["var(--ad-neutral-200)", 4],
+  ["var(--ad-secondary)", 16],
+  ["rgb(from var(--ad-primary) r g b / 0.85)", 40],
+  ["rgb(from var(--ad-primary) r g b / 0.32)", 72],
+  ["rgb(from var(--ad-primary) r g b / 0)", 100]
+];
+var AURA_STOPS = [
+  ["var(--ad-primary)", 0],
+  ["rgb(from var(--ad-primary) r g b / 0.7)", 40],
+  ["rgb(from var(--ad-primary) r g b / 0)", 100]
+];
+var radial = (stops) => `radial-gradient(circle closest-side, ${stops.map(([color, at]) => `${color} ${at}%`).join(", ")})`;
+var ringMask = (w, h, d, strokes) => {
+  const paths = strokes.map(([width, opacity]) => `<path d='${d}' stroke-width='${width}' stroke-opacity='${opacity}'/>`).join("");
+  return `url("data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${-HALO} ${-HALO} ${w + 2 * HALO} ${h + 2 * HALO}'><g fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'>${paths}</g></svg>`
+  )}")`;
+};
+U.attachBorder = (element, { shell = false, round = false, scope, defer = false } = {}) => {
+  if (borders.has(element)) return borders.get(element);
+  defer &&= !!scope;
+  if (defer && canObserveIntersection()) element._adInView = false;
+  let radius = round ? 28 : shell ? 102 : 116;
+  const overlay = document.createElement("div");
+  overlay.className = "ad-border";
+  overlay.setAttribute("aria-hidden", "true");
+  overlay.setAttribute("data-ad-component", "AnimatedBorder");
+  const edge = U.svg("svg", { fill: "none", preserveAspectRatio: "none" });
+  const path = U.svg("path", {
+    stroke: shell ? "rgb(from var(--ad-secondary) r g b / 0.65)" : "rgb(from var(--ad-primary) r g b / 0.16)",
+    "stroke-width": shell ? 1.1 : 0.6
+  });
+  edge.append(path);
+  const ring = (className) => {
+    const node = document.createElement("div");
+    node.className = className;
+    return node;
+  };
+  const aura = ring("ad-border-aura"), core = ring("ad-border-core");
+  overlay.append(edge, aura, core);
+  const instancePhase = ++borderSerial * 0.38196601125 % 1;
+  const lights = Array.from({ length: 2 }, (_, k) => {
+    const spot = (parent, stops) => {
+      const node = ring("ad-border-light");
+      node.style.background = radial(stops);
+      parent.append(node);
+      return node;
+    };
+    return {
+      radius,
+      phase: (k * 0.48 + 0.535 + instancePhase) % 1,
+      speed: round ? k ? 25 : 36 : k ? 86 : 125,
+      spots: [spot(aura, AURA_STOPS), spot(core, CORE_STOPS)],
+      at: null
+    };
+  });
+  const previousInlinePosition = element.style.position;
+  element.append(overlay);
+  const item = {
+    element,
+    overlay,
+    path,
+    lights,
+    length: 0,
+    elapsed: 0,
+    previousTime: null,
+    patchedPosition: false,
+    previousInlinePosition
+  };
+  item.paint = (time) => {
+    if (!item.length) return;
+    if (item.previousTime !== null)
+      item.elapsed += Math.min(0.1, Math.max(0, time - item.previousTime));
+    item.previousTime = time;
+    for (const light of lights) {
+      const p = item.contour.point((light.phase * item.length + item.elapsed * light.speed) % item.length / item.length);
+      light.at = p;
+      const transform = `translate3d(${(p.x - radius + HALO).toFixed(2)}px, ${(p.y - radius + HALO).toFixed(2)}px, 0)`;
+      for (const spot of light.spots) spot.style.transform = transform;
+    }
+  };
+  item.sync = () => {
+    const computed = getComputedStyle(element);
+    const sides = ["Top", "Right", "Bottom", "Left"];
+    const borderWidths = sides.map((side) => parseFloat(computed[`border${side}Width`]) || 0);
+    const [w, h] = [["width", 3, 1, "offsetWidth"], ["height", 0, 2, "offsetHeight"]].map(([axis, start, end, fallback]) => {
+      const value = parseFloat(computed[axis]);
+      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 corners = ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map((corner) => {
+      const values = (computed[`border${corner}Radius`] || computed.borderTopLeftRadius).split(/\s+/);
+      return [w, h].map((size, axis) => {
+        const value = values[axis] || values[0];
+        return (parseFloat(value) || 0) * (value.includes("%") ? size / 100 : 1);
+      });
+    });
+    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 = path.getTotalLength();
+    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);
+  };
+  const queueMeasurement = () => {
+    if (item.destroyed) return;
+    measurements.add(item);
+    schedule();
+  };
+  item.observer = createResizeObserver(defer ? queueMeasurement : item.sync);
+  item.observer.observe(element);
+  if (defer) queueMeasurement();
+  else item.sync();
+  const unsubscribe = scope?.add(element, item.paint, !defer);
+  item.destroy = () => {
+    item.destroyed = true;
+    measurements.delete(item);
+    unsubscribe?.();
+    item.observer.disconnect();
+    overlay.remove();
+    if (item.patchedPosition) element.style.position = item.previousInlinePosition;
+    borders.delete(element);
+  };
+  borders.set(element, item);
+  return item;
+};
+U.attachTabShape = (button) => {
+  if (seen.has(button)) return seen.get(button);
+  const id = U.uid("ad-tab-fill"), shape = U.svg("svg", {
+    class: "tab-shape ad-tab-shape",
+    "aria-hidden": "true",
+    fill: "none",
+    preserveAspectRatio: "none"
+  });
+  const defs = U.svg("defs"), grad = U.svg("linearGradient", { id, x1: 0, y1: 0, x2: 0, y2: 1 });
+  [
+    [0, "var(--ad-primary-700)", 0.77],
+    [0.38, "var(--ad-primary-900)", 0.86],
+    [0.76, "var(--ad-primary-900)", 0.94],
+    [1, "var(--ad-primary-600)", 0.94]
+  ].forEach(
+    ([offset, color, opacity]) => grad.append(
+      U.svg("stop", { offset, "stop-color": color, "stop-opacity": opacity })
+    )
+  );
+  defs.append(grad);
+  shape.append(defs);
+  const glow = U.svg("path", { class: "tab-shape__glow" }), edge = U.svg("path", { class: "tab-shape__edge", fill: `url(#${id})` }), floor = U.svg("path", { class: "tab-shape__floor" });
+  shape.append(glow, edge, floor);
+  const glints = U.svg("svg", {
+    class: "tab-shape ad-tab-shape ad-tab-shape-glint",
+    "aria-hidden": "true",
+    fill: "none",
+    preserveAspectRatio: "none"
+  });
+  const glint = ["wide", "near", "core"].map(
+    (part) => U.svg("path", { class: "tab-shape__glint", "data-part": part, pathLength: 100 })
+  );
+  glints.append(...glint);
+  button.prepend(shape, glints);
+  button.dataset.adShapeReady = "";
+  const position = () => {
+    const siblings = [...button.parentElement?.children || []].filter(
+      (node) => node instanceof HTMLElement && node.getAttribute("role") === "tab"
+    );
+    const index = siblings.indexOf(button);
+    return {
+      first: index === 0,
+      last: index === siblings.length - 1,
+      single: siblings.length === 1
+    };
+  };
+  const sync = () => {
+    const w = button.offsetWidth, h = button.offsetHeight;
+    if (!w || !h) return;
+    shape.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    glints.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    const { first, last: last2, single } = position();
+    const top = 1.5, bottom = h - 1.5, outer = 1.2;
+    const shoulder = Math.min(24, w * 0.11), corner = Math.min(34, w * 0.19), sideLift = Math.min(13, h * 0.28);
+    const notchWidth = Math.min(10, w * 0.05), notchDepth = Math.min(3.5, h * 0.08);
+    const radius = Math.min(10, h * 0.22, w * 0.05);
+    const leftOuter = single || first;
+    const rightOuter = single || last2;
+    let d = `M${w / 2 - notchWidth} ${bottom}`;
+    if (leftOuter) {
+      d += `H${outer + radius}Q${outer} ${bottom} ${outer} ${bottom - radius}V${top + radius}Q${outer} ${top} ${outer + radius} ${top}`;
+    } else {
+      d += `H${outer + 4.5}Q${outer + 1.5} ${bottom - 0.3} ${outer + 4.5} ${bottom - sideLift}L${shoulder} 13Q${shoulder + 4} ${top} ${corner} ${top}`;
+    }
+    d += `H${rightOuter ? w - (outer + radius) : w - corner}`;
+    if (rightOuter) {
+      d += `Q${w - outer} ${top} ${w - outer} ${top + radius}V${bottom - radius}Q${w - outer} ${bottom} ${w - (outer + radius)} ${bottom}`;
+    } else {
+      d += `Q${w - shoulder - 4} ${top} ${w - shoulder} 13L${w - (outer + 4.5)} ${bottom - sideLift}Q${w - (outer + 1.5)} ${bottom - 0.3} ${w - (outer + 4.5)} ${bottom}`;
+    }
+    d += `H${w / 2 + notchWidth}L${w / 2} ${bottom + notchDepth}L${w / 2 - notchWidth} ${bottom}Z`;
+    for (const path of [glow, edge, ...glint]) path.setAttribute("d", d);
+    const floorLeft = leftOuter ? outer + radius : outer + 5;
+    const floorRight = rightOuter ? w - (outer + radius) : w - (outer + 5);
+    floor.setAttribute(
+      "d",
+      `M${floorLeft} ${bottom}H${w / 2 - notchWidth - 1}L${w / 2} ${bottom + notchDepth}L${w / 2 + notchWidth + 1} ${bottom}H${floorRight}`
+    );
+    button.dataset.adTabEdge = single ? "single" : first ? "first" : last2 ? "last" : "middle";
+  };
+  const observer = createResizeObserver(sync);
+  observer.observe(button);
+  if (button.parentElement) observer.observe(button.parentElement);
+  sync();
+  const item = {
+    observer,
+    shape,
+    sync,
+    destroy() {
+      observer.disconnect();
+      shape.remove();
+      glints.remove();
+      button.removeAttribute("data-ad-shape-ready");
+      button.removeAttribute("data-ad-tab-edge");
+      seen.delete(button);
+    }
+  };
+  seen.set(button, item);
+  return item;
+};
+var createMotion = U.createMotion;
+var attachBorder = U.attachBorder;
+var attachTabShape = U.attachTabShape;
+var setMotionFrameRate = U.setMotionFrameRate;
+var subscribeTick = U.subscribeTick;
+function getMotionStats() {
+  return {
+    scopes: scopeCount,
+    running: running.size,
+    scheduled: raf !== null || timer !== null,
+    callbacks: [...running].reduce((n, s) => n + s.callbacks.size, 0)
+  };
+}
+
+// src/core/motion/hooks.ts
+import { useEffect, useLayoutEffect, useRef } from "react";
+function useDecoration(ref, paint) {
+  const enabled = useMotion();
+  const painter = useRef(paint);
+  painter.current = paint;
+  const scope = useRef(null);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const controller = createMotion(node);
+    scope.current = controller;
+    const unsubscribe = controller.add(
+      node,
+      (time) => painter.current(time)
+    );
+    return () => {
+      unsubscribe();
+      controller.dispose();
+      scope.current = null;
+    };
+  }, [ref]);
+  useLayoutEffect(() => {
+    scope.current?.set(enabled);
+  }, [enabled]);
+}
+function useBorder(ref, enabled = true, shell = false, round = false) {
+  const motion = useMotion();
+  const scope = useRef(null);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node || !enabled) return;
+    const controller = createMotion(node);
+    scope.current = controller;
+    const border = attachBorder(node, { shell, round, scope: controller, defer: true });
+    return () => {
+      border.destroy();
+      controller.dispose();
+      scope.current = null;
+    };
+  }, [ref, enabled, shell, round]);
+  useLayoutEffect(() => {
+    scope.current?.set(motion);
+  }, [motion, enabled, shell, round]);
+}
+function useTick(callback, active2 = true) {
+  const latest = useRef(callback);
+  latest.current = callback;
+  useEffect(() => {
+    if (!active2) return;
+    return subscribeTick((now) => latest.current(now));
+  }, [active2]);
+}
+var offscreenObserver = null;
+var offscreenCount = 0;
+var watchOffscreen = (node) => {
+  if (typeof IntersectionObserver === "undefined") return () => void 0;
+  offscreenObserver ??= new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) entry.target.toggleAttribute("data-ad-offscreen", !entry.isIntersecting);
+      refreshMotion();
+    },
+    { rootMargin: "12% 0px" }
+  );
+  offscreenObserver.observe(node);
+  offscreenCount++;
+  return () => {
+    offscreenObserver?.unobserve(node);
+    if (--offscreenCount === 0) {
+      offscreenObserver?.disconnect();
+      offscreenObserver = null;
+    }
+    node.removeAttribute("data-ad-offscreen");
+    refreshMotion();
+  };
+};
+function usePauseOffscreen(ref) {
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    return watchOffscreen(node);
+  }, [ref]);
+}
+function useTabShape(ref) {
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const shape = attachTabShape(node);
+    return () => shape.destroy();
+  }, [ref]);
+}
+function useSmoothWheel(ref) {
+  const enabled = useMotion();
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || !enabled || reducedMotionQuery().matches)
+      return;
+    let target = element.scrollTop;
+    let position = target;
+    let applied = target;
+    let frame = 0;
+    let last2 = 0;
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      frame = 0;
+      last2 = 0;
+    };
+    const glide = (now) => {
+      const shift = element.scrollTop - applied;
+      if (Math.abs(shift) > 1.5) {
+        position += shift;
+        target += shift;
+      }
+      const elapsed = Math.min(64, now - (last2 || now - 16));
+      last2 = now;
+      target = Math.max(
+        0,
+        Math.min(element.scrollHeight - element.clientHeight, target)
+      );
+      position += (target - position) * (1 - Math.exp(-elapsed / 95));
+      if (Math.abs(target - position) < 0.25) position = target;
+      element.scrollTop = position;
+      applied = element.scrollTop;
+      if (position === target) return stop();
+      frame = requestAnimationFrame(glide);
+    };
+    const onWheel = (event) => {
+      if (event.defaultPrevented || event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))
+        return;
+      const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+      if (event.deltaMode === 0 && Math.abs(delta) < 40) return;
+      for (let node = event.target; node && node !== element; node = node.parentElement) {
+        const canScroll = node.scrollHeight > node.clientHeight + 1 && /auto|scroll/.test(getComputedStyle(node).overflowY);
+        if (canScroll && (delta < 0 ? node.scrollTop > 0 : node.scrollTop + node.clientHeight < node.scrollHeight - 1))
+          return;
+      }
+      if (element.scrollHeight <= element.clientHeight + 1 || !/auto|scroll/.test(getComputedStyle(element).overflowY))
+        return;
+      event.preventDefault();
+      if (!frame) target = position = applied = element.scrollTop;
+      target = Math.max(
+        0,
+        Math.min(element.scrollHeight - element.clientHeight, target + delta)
+      );
+      if (!frame) frame = requestAnimationFrame(glide);
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      element.removeEventListener("wheel", onWheel);
+      stop();
+    };
+  }, [ref, enabled]);
+}
+
+export {
+  refreshMotion,
+  setMotionFrameRate,
+  subscribeTick,
+  getMotionStats,
+  useDecoration,
+  useBorder,
+  useTick,
+  usePauseOffscreen,
+  useTabShape,
+  useSmoothWheel
+};