@ansh-ui/react 0.2.0 → 0.3.1

package/dist/styles.css

@@ -1294,6 +1294,353 @@
   }
 }
 
+/* ==========================================================================
+   Motion UI — presentation components with motion of their own.
+
+   Split out of `components.css`, which is already ~830 lines. Everything here targets a plain
+   `ansh-*` class or a `data-*` attribute and contains nothing React-specific, so it is shared
+   verbatim with `@ansh-ui/vue`'s build the same way every other stylesheet in this directory is.
+   ========================================================================== */
+
+/* --- Rotating headline word ---------------------------------------------- */
+
+/*
+ * Deliberately NOT `overflow: hidden` on this element. An inline-level box with clipped overflow
+ * is baseline-aligned by its bottom margin edge rather than by its text, which drops the rotating
+ * word below the line of the sentence containing it. The clipping happens on `__clip` instead,
+ * which is absolutely positioned and so takes no part in baseline alignment.
+ */
+.ansh-rotate {
+  position: relative;
+  display: inline-block;
+}
+
+/*
+ * The width and baseline holder, in normal flow. `visibility: hidden` rather than `display: none`
+ * — a display-none element contributes no size, which would defeat the point of measuring the
+ * longest word.
+ */
+.ansh-rotate__sizer {
+  display: grid;
+  grid-template-areas: 'word';
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ansh-rotate__ghost {
+  grid-area: word;
+  white-space: nowrap;
+}
+
+.ansh-rotate__clip {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.ansh-rotate__word {
+  display: inline-block;
+  white-space: nowrap;
+  will-change: transform, opacity;
+}
+
+.ansh-rotate[data-animation='slide'] .ansh-rotate__word {
+  animation: ansh-rotate-slide var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized) both;
+}
+
+.ansh-rotate[data-animation='fade'] .ansh-rotate__word {
+  animation: ansh-rotate-fade var(--ansh-duration-slow, 420ms) var(--ansh-ease-standard) both;
+}
+
+.ansh-rotate[data-animation='flip'] .ansh-rotate__word {
+  animation: ansh-rotate-flip var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized) both;
+  transform-origin: 50% 0;
+}
+
+@keyframes ansh-rotate-slide {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes ansh-rotate-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ansh-rotate-flip {
+  from {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0);
+    opacity: 1;
+  }
+}
+
+/* --- Before/after comparison --------------------------------------------- */
+
+.ansh-compare {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ansh-radius-lg);
+  /* Without this a drag that starts on the surface scrolls the page on touch instead of moving
+     the divider — the single most common defect in comparison sliders on mobile. */
+  touch-action: none;
+  user-select: none;
+}
+
+.ansh-compare__layer {
+  position: absolute;
+  inset: 0;
+}
+
+.ansh-compare__layer > * {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * The revealed layer sits above and is clipped. Clipping rather than resizing is what keeps its
+ * contents from reflowing as the handle moves.
+ */
+.ansh-compare__layer--before {
+  z-index: 1;
+}
+
+.ansh-compare__handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 2px;
+  margin-left: -1px;
+  background: var(--ansh-content-primary);
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.ansh-compare__handle:focus-visible {
+  outline: 2px solid var(--ansh-border-focus);
+  outline-offset: 2px;
+}
+
+.ansh-compare__grip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.25rem;
+  height: 2.25rem;
+  transform: translate(-50%, -50%);
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-content-primary);
+  box-shadow: var(--ansh-shadow-lg);
+}
+
+/* The double chevron, drawn with borders so no icon asset or SVG is needed. */
+.ansh-compare__grip::before,
+.ansh-compare__grip::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 0.4rem;
+  height: 0.4rem;
+  border-top: 2px solid var(--ansh-surface-canvas);
+  border-right: 2px solid var(--ansh-surface-canvas);
+}
+
+.ansh-compare__grip::before {
+  left: 30%;
+  transform: translate(0, -50%) rotate(-135deg);
+}
+
+.ansh-compare__grip::after {
+  right: 30%;
+  transform: translate(0, -50%) rotate(45deg);
+}
+
+.ansh-compare[data-dragging] {
+  cursor: ew-resize;
+}
+
+/* --- Device / browser mockup --------------------------------------------- */
+
+.ansh-mock {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--ansh-surface-raised);
+  border: 1px solid var(--ansh-border-default);
+  box-shadow: var(--ansh-shadow-lg);
+}
+
+.ansh-mock--browser,
+.ansh-mock--window {
+  border-radius: var(--ansh-radius-lg);
+}
+
+.ansh-mock__chrome {
+  display: flex;
+  align-items: center;
+  gap: var(--ansh-space-3);
+  padding: var(--ansh-space-3) var(--ansh-space-4);
+  background: var(--ansh-surface-sunken);
+  border-bottom: 1px solid var(--ansh-border-subtle);
+}
+
+.ansh-mock__dots {
+  display: flex;
+  gap: var(--ansh-space-2);
+  flex-shrink: 0;
+}
+
+.ansh-mock__dots i {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-border-strong);
+}
+
+.ansh-mock__url,
+.ansh-mock__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ansh-text-xs);
+  color: var(--ansh-content-tertiary);
+}
+
+.ansh-mock__url {
+  padding: var(--ansh-space-1) var(--ansh-space-3);
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-surface-raised);
+  font-family: var(--ansh-font-mono);
+}
+
+.ansh-mock__title {
+  text-align: center;
+}
+
+.ansh-mock__screen {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--ansh-surface-canvas);
+}
+
+/* The phone frame: a thick bezel and a notch, no chrome bar. */
+.ansh-mock--phone {
+  border-radius: 2.25rem;
+  border-width: 0.6rem;
+  border-color: var(--ansh-content-primary);
+  padding: 0;
+  position: relative;
+}
+
+.ansh-mock--phone .ansh-mock__screen {
+  border-radius: 1.7rem;
+}
+
+.ansh-mock__notch {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  width: 38%;
+  height: 1.1rem;
+  border-radius: 0 0 var(--ansh-radius-lg) var(--ansh-radius-lg);
+  background: var(--ansh-content-primary);
+}
+
+/* --- Card stack ----------------------------------------------------------- */
+
+.ansh-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ansh-space-4);
+}
+
+.ansh-stack__deck {
+  position: relative;
+  display: grid;
+  /* One cell: every card stacks in it, and the tallest card sets the height so the deck does not
+     resize as cards advance. */
+  grid-template-areas: 'card';
+  isolation: isolate;
+}
+
+.ansh-stack__card {
+  grid-area: card;
+  transition:
+    transform var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized),
+    opacity var(--ansh-duration-slow, 420ms) var(--ansh-ease-standard);
+  will-change: transform, opacity;
+}
+
+.ansh-stack__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ansh-space-3);
+}
+
+.ansh-stack__button {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--ansh-radius-full);
+  border: 1px solid var(--ansh-border-default);
+  background: var(--ansh-surface-raised);
+  color: var(--ansh-content-secondary);
+  font: inherit;
+  font-size: var(--ansh-text-lg);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ansh-stack__button:hover {
+  border-color: var(--ansh-border-strong);
+  color: var(--ansh-content-primary);
+}
+
+.ansh-stack__count {
+  font-family: var(--ansh-font-mono);
+  font-size: var(--ansh-text-xs);
+  color: var(--ansh-content-tertiary);
+  min-width: 3.5rem;
+  text-align: center;
+}
+
+/*
+ * Reduced motion. The library's kernel handles JS-driven motion, but these components animate in
+ * CSS, so they need their own guard — `@ansh-ui/tokens` neutralises durations globally, and this
+ * additionally removes the transform travel so cards and words change in place rather than
+ * snapping across a distance in 0.01ms.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .ansh-rotate__word {
+    animation: none !important;
+  }
+
+  .ansh-stack__card {
+    transition: none !important;
+  }
+}
+
 /* ==========================================================================
    Forms
    ========================================================================== */
@@ -5363,6 +5710,123 @@ button.ansh-stepper__button:hover {
   text-underline-offset: 2px;
 }
 
+/* --- Carousel ------------------------------------------------------------- */
+
+.ansh-carousel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ansh-space-3);
+}
+
+.ansh-carousel__viewport {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ansh-radius-lg);
+  /* Without this a horizontal drag scrolls the page on touch instead of moving the track — the
+     same defect the comparison slider guards against. */
+  touch-action: pan-y;
+}
+
+.ansh-carousel__track {
+  display: flex;
+  transition: transform var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized);
+  will-change: transform;
+}
+
+.ansh-carousel__slide {
+  /* `flex: 0 0 100%` rather than `width: 100%`: flex items shrink by default, so eight slides in a
+     row would each collapse to an eighth of the viewport instead of queueing beside it. */
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+.ansh-carousel__viewport[data-dragging] {
+  cursor: grabbing;
+}
+
+.ansh-carousel__arrow {
+  position: absolute;
+  top: calc(50% - 1.25rem);
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ansh-radius-full);
+  border: 1px solid var(--ansh-border-default);
+  background: var(--ansh-surface-overlay);
+  color: var(--ansh-content-primary);
+  font: inherit;
+  font-size: var(--ansh-text-xl);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ansh-carousel__arrow:hover:not(:disabled) {
+  border-color: var(--ansh-border-strong);
+}
+
+.ansh-carousel__arrow:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.ansh-carousel__arrow--prev {
+  left: var(--ansh-space-3);
+}
+
+.ansh-carousel__arrow--next {
+  right: var(--ansh-space-3);
+}
+
+.ansh-carousel__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ansh-space-3);
+}
+
+.ansh-carousel__dots {
+  display: flex;
+  gap: var(--ansh-space-2);
+}
+
+.ansh-carousel__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-border-strong);
+  cursor: pointer;
+  transition: background-color var(--ansh-duration-fast) var(--ansh-ease-standard);
+}
+
+.ansh-carousel__dot[aria-current] {
+  background: var(--ansh-accent-default);
+}
+
+.ansh-carousel__pause {
+  display: grid;
+  place-items: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  padding: 0 var(--ansh-space-2);
+  border-radius: var(--ansh-radius-full);
+  border: 1px solid var(--ansh-border-default);
+  background: transparent;
+  color: var(--ansh-content-secondary);
+  font: inherit;
+  font-size: var(--ansh-text-xs);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ansh-carousel__track {
+    transition: none !important;
+  }
+}
+
 /* ==========================================================================
    Feedback — alerts, banners, callouts
    ========================================================================== */

package/dist/{use-observers-B9qtimrk.d.cts → use-observers-DvA7hSz4.d.cts}

@@ -93,7 +93,16 @@ declare function useReducedMotion(): boolean;
  * ship in production render paths; the `enabled` flag exists so it can be gated on `NODE_ENV`.
  */
 declare function useFrameBudget(enabled?: boolean): BudgetReport | null;
+/**
+ * Live count of components currently subscribed to the shared ticker.
+ *
+ * Intended for a devtools-style overlay, alongside `useFrameBudget` — the ticker only exposes
+ * `subscriberCount` as a getter with no change event, so this piggybacks on `onBudget`'s existing
+ * ~4 Hz sample instead of opening a second interval or rAF loop just to poll one number.
+ */
+declare function useTickerSubscriberCount(enabled?: boolean): number;
 /** Merge several refs into one callback ref, for components that both forward and use a ref. */
 declare function useMergedRef<T>(...refs: Array<React.Ref<T> | undefined | null>): (node: T | null) => void;
 
-export { type InViewOptions as I, useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useWindowScroll as h, useElementSize as u };
+export { useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useTickerSubscriberCount as h, useWindowScroll as i, useElementSize as u };
+export type { InViewOptions as I };

package/dist/{use-observers-B9qtimrk.d.ts → use-observers-DvA7hSz4.d.ts}

@@ -93,7 +93,16 @@ declare function useReducedMotion(): boolean;
  * ship in production render paths; the `enabled` flag exists so it can be gated on `NODE_ENV`.
  */
 declare function useFrameBudget(enabled?: boolean): BudgetReport | null;
+/**
+ * Live count of components currently subscribed to the shared ticker.
+ *
+ * Intended for a devtools-style overlay, alongside `useFrameBudget` — the ticker only exposes
+ * `subscriberCount` as a getter with no change event, so this piggybacks on `onBudget`'s existing
+ * ~4 Hz sample instead of opening a second interval or rAF loop just to poll one number.
+ */
+declare function useTickerSubscriberCount(enabled?: boolean): number;
 /** Merge several refs into one callback ref, for components that both forward and use a ref. */
 declare function useMergedRef<T>(...refs: Array<React.Ref<T> | undefined | null>): (node: T | null) => void;
 
-export { type InViewOptions as I, useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useWindowScroll as h, useElementSize as u };
+export { useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useTickerSubscriberCount as h, useWindowScroll as i, useElementSize as u };
+export type { InViewOptions as I };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansh-ui/react",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Ansh for React and Next.js — premium animated components and motion hooks.",
   "license": "MIT",
   "type": "module",
@@ -74,8 +74,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@ansh-ui/tokens": "0.2.0",
-    "@ansh-ui/core": "0.2.0"
+    "@ansh-ui/core": "0.3.1",
+    "@ansh-ui/tokens": "0.3.1"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/dist/chunk-6VRF7X5C.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-observers.ts"],"names":["useRef","useEffect","getTicker","useState","observeIntersection","observeResize","trackScroll","trackContainerScroll","trackPointer","onReducedMotionChange","useCallback"],"mappings":"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","file":"chunk-6VRF7X5C.cjs","sourcesContent":["import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'\nimport {\n  type BudgetReport,\n  type FrameState,\n  type PointerState,\n  type ScrollProgress,\n  type ScrollTrackOptions,\n  getTicker,\n  observeIntersection,\n  observeResize,\n  onReducedMotionChange,\n  trackContainerScroll,\n  trackPointer,\n  trackScroll,\n} from '@ansh-ui/core'\n\n/**\n * Subscribe to the shared ticker.\n *\n * The callback is held in a ref and never re-subscribes, so a component that closes over changing\n * props doesn't tear down and rebuild its subscription on every render. That matters: resubscribing\n * changes execution order within the phase, which can visibly reorder dependent animations.\n */\nexport function useTicker(\n  callback: (state: FrameState) => void,\n  options: {\n    phase?: 'read' | 'compute' | 'write' | 'post'\n    priority?: number\n    enabled?: boolean\n  } = {},\n): void {\n  const callbackRef = useRef(callback)\n  callbackRef.current = callback\n\n  const { phase = 'write', priority = 0, enabled = true } = options\n\n  useEffect(() => {\n    if (!enabled) return\n    const ticker = getTicker()\n    return ticker.add((state) => callbackRef.current(state), { phase, priority, name: 'useTicker' })\n  }, [phase, priority, enabled])\n}\n\nexport interface InViewOptions {\n  /** Fraction visible before triggering, in `[0, 1]`. Default `0`. */\n  threshold?: number\n  /** Extra margin around the root. Default `'0px'`. */\n  rootMargin?: string\n  /** Stop observing after the first intersection. Default `false`. */\n  once?: boolean\n  root?: Element | null\n}\n\n/**\n * Is the element in the viewport?\n *\n * Uses the pooled observer, so a page with 200 scroll-revealed elements creates one\n * `IntersectionObserver` rather than 200.\n */\nexport function useInView<El extends Element = HTMLDivElement>(\n  options: InViewOptions = {},\n): [RefObject<El | null>, boolean] {\n  const ref = useRef<El | null>(null)\n  const [inView, setInView] = useState(false)\n\n  const { threshold = 0, rootMargin = '0px', once = false, root = null } = options\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    let released = false\n    const stop = observeIntersection(\n      element,\n      (entry) => {\n        setInView(entry.isIntersecting)\n        if (entry.isIntersecting && once && !released) {\n          released = true\n          // Release inside a microtask: unsubscribing from within the observer callback would\n          // mutate the pool's callback set while it is being iterated.\n          queueMicrotask(() => stop())\n        }\n      },\n      { threshold, rootMargin, root },\n    )\n\n    return () => {\n      released = true\n      stop()\n    }\n  }, [threshold, rootMargin, once, root])\n\n  return [ref, inView]\n}\n\n/**\n * Track an element's size.\n *\n * Returns state rather than a MotionValue because size changes at interaction rate, not frame\n * rate, so a re-render per change is appropriate and far more ergonomic.\n */\nexport function useElementSize<El extends Element = HTMLDivElement>(): [\n  RefObject<El | null>,\n  { width: number; height: number },\n] {\n  const ref = useRef<El | null>(null)\n  const [size, setSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n    return observeResize(element, ({ width, height }) => {\n      // Guard against redundant renders: ResizeObserver fires on sub-pixel changes during\n      // animation, and setting identical state still costs a render pass in React 18.\n      setSize((previous) =>\n        previous.width === width && previous.height === height ? previous : { width, height },\n      )\n    })\n  }, [])\n\n  return [ref, size]\n}\n\n/**\n * Track an element's scroll progress through the viewport.\n *\n * The returned progress is a **ref**, not state, deliberately — scroll progress changes every\n * frame, and rendering on each change would make scrolling janky. Read `progress.current` inside a\n * `useTicker` callback, or pass the `onChange` callback and write to the DOM directly.\n */\nexport function useScrollProgress<El extends HTMLElement = HTMLDivElement>(\n  options: ScrollTrackOptions & { onChange?: (progress: ScrollProgress) => void } = {},\n): [RefObject<El | null>, RefObject<ScrollProgress>] {\n  const ref = useRef<El | null>(null)\n  const progressRef = useRef<ScrollProgress>({\n    progress: 0,\n    velocity: 0,\n    scroll: 0,\n    direction: 0,\n    inView: false,\n  })\n\n  const onChangeRef = useRef(options.onChange)\n  onChangeRef.current = options.onChange\n\n  const { axis = 'y', container = null } = options\n  const offsetKey = JSON.stringify(options.offset ?? null)\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    return trackScroll(\n      element,\n      (progress) => {\n        progressRef.current = progress\n        onChangeRef.current?.(progress)\n      },\n      {\n        axis,\n        container,\n        ...(options.offset ? { offset: options.offset } : {}),\n      },\n    )\n    // `offsetKey` stands in for the offset object, which is usually an inline literal and would\n    // otherwise change identity on every render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [axis, container, offsetKey])\n\n  return [ref, progressRef]\n}\n\n/** Track the window's (or a container's) overall scroll progress. */\nexport function useWindowScroll(\n  onChange?: (info: { progress: number; scroll: number; velocity: number; max: number }) => void,\n  options: { axis?: 'y' | 'x'; container?: HTMLElement | null } = {},\n): RefObject<{ progress: number; scroll: number; velocity: number; max: number }> {\n  const stateRef = useRef({ progress: 0, scroll: 0, velocity: 0, max: 1 })\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n\n  const { axis = 'y', container = null } = options\n\n  useEffect(\n    () =>\n      trackContainerScroll(\n        (info) => {\n          stateRef.current = info\n          onChangeRef.current?.(info)\n        },\n        { axis, container },\n      ),\n    [axis, container],\n  )\n\n  return stateRef\n}\n\n/**\n * Track pointer position over an element.\n *\n * Returns a ref to the live state object, which is mutated in place by the tracker. Reading it\n * inside a `useTicker` callback is the intended use; it deliberately does not trigger renders.\n */\nexport function usePointer<El extends HTMLElement = HTMLDivElement>(\n  options: { smoothing?: number; trackOutside?: boolean; enabled?: boolean } = {},\n): [RefObject<El | null>, RefObject<Readonly<PointerState> | null>] {\n  const ref = useRef<El | null>(null)\n  const stateRef = useRef<Readonly<PointerState> | null>(null)\n\n  const { smoothing, trackOutside = false, enabled = true } = options\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element || !enabled) return\n\n    const tracker = trackPointer(element, {\n      ...(smoothing !== undefined ? { smoothing } : {}),\n      trackOutside,\n    })\n    stateRef.current = tracker.state\n\n    return () => {\n      tracker.destroy()\n      stateRef.current = null\n    }\n  }, [smoothing, trackOutside, enabled])\n\n  return [ref, stateRef]\n}\n\n/**\n * Does the user prefer reduced motion?\n *\n * Returns `false` during SSR and on the first client render, then updates. That ordering is\n * deliberate: returning the real value during SSR is impossible (the server cannot know), and\n * returning it on the first client render would be a hydration mismatch.\n */\nexport function useReducedMotion(): boolean {\n  const [reduced, setReduced] = useState(false)\n  useEffect(() => onReducedMotionChange(setReduced), [])\n  return reduced\n}\n\n/**\n * Live frame-budget telemetry — FPS, frame cost percentiles, and the adaptive quality scalar.\n *\n * Intended for a development overlay. Subscribing causes a re-render every frame, so this must not\n * ship in production render paths; the `enabled` flag exists so it can be gated on `NODE_ENV`.\n */\nexport function useFrameBudget(enabled = true): BudgetReport | null {\n  const [report, setReport] = useState<BudgetReport | null>(null)\n\n  useEffect(() => {\n    if (!enabled) return\n    const ticker = getTicker()\n    // Sample at ~4 Hz rather than per frame. A number that changes 60 times a second is\n    // unreadable, and rendering it 60 times a second distorts the very measurement being shown.\n    let last = 0\n    return ticker.onBudget((next) => {\n      const now = performance.now()\n      if (now - last < 250) return\n      last = now\n      setReport(next)\n    })\n  }, [enabled])\n\n  return report\n}\n\n/** Merge several refs into one callback ref, for components that both forward and use a ref. */\nexport function useMergedRef<T>(\n  ...refs: Array<React.Ref<T> | undefined | null>\n): (node: T | null) => void {\n  return useCallback((node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) continue\n      if (typeof ref === 'function') ref(node)\n      else (ref as React.MutableRefObject<T | null>).current = node\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs)\n}\n"]}