fancy-ui-react 0.2.0

package/dist/internals/motion/easing.js

@@ -0,0 +1,13 @@
+"use client";
+function expoIn(t) {
+  return t === 0 ? t : Math.pow(2, 10 * (t - 1));
+}
+function expoOut(t) {
+  return t === 1 ? t : 1 - Math.pow(2, -10 * t);
+}
+const linear = (t) => t;
+export {
+  expoIn,
+  expoOut,
+  linear
+};

package/dist/internals/motion/haptics.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Optional tactile feedback via `navigator.vibrate` — a touch-only, opt-in
+ * add-on (Pressable's `haptic` prop, StatusMorph's `haptic` prop). Nothing
+ * here ever throws: the Vibration API is unsupported on most desktop
+ * browsers and can be silently refused by a browser policy even where it
+ * exists (Safari on iOS has never implemented it, for instance), and a
+ * missing rumble is a non-event a user never notices — a thrown error
+ * breaking the surrounding click handler very much would be.
+ *
+ * No hook: both functions are called from a click handler, never from a
+ * render path. `canVibrate()` reads `navigator` and is therefore
+ * server-safe only because it guards on `typeof navigator`.
+ */
+export declare const HAPTIC_PATTERNS: {
+    readonly light: 10;
+    readonly medium: 25;
+    readonly heavy: 50;
+    readonly success: readonly [15, 60, 15];
+    readonly error: readonly [60, 60, 60, 60, 60];
+};
+export type HapticPattern = keyof typeof HAPTIC_PATTERNS;
+/** Whether this environment can even attempt a vibration. Checked before
+ * `vibrate()` calls into the API, and exported separately so a component
+ * can skip attaching pointer-tracking work entirely when it never could
+ * fire (e.g. gating a touch-only listener without needing to wait for a
+ * failed call to find that out). */
+export declare function canVibrate(): boolean;
+/**
+ * Fire a vibration pattern. Returns whether the browser accepted the
+ * request (`navigator.vibrate`'s own return value) — `false` for
+ * "unsupported", "not called from a user gesture", "the tab is
+ * backgrounded", or any other reason the platform declines. Never throws:
+ * some browsers throw rather than return `false` for a policy refusal, so
+ * the whole thing is wrapped rather than trusting the spec's "just returns
+ * a boolean" description. The `!== false` coerces `navigator.vibrate`'s
+ * result rather than returning it verbatim: lib.dom types the method as
+ * always returning `boolean`, but that is a type-level promise the DOM spec
+ * does not actually keep — a user agent is free to return `undefined`, and
+ * without the coercion this function's own `boolean` return type would be a
+ * runtime lie for a caller that checks `=== false`.
+ */
+export declare function vibrate(pattern: HapticPattern | number | number[]): boolean;

package/dist/internals/motion/haptics.js

@@ -0,0 +1,29 @@
+"use client";
+const HAPTIC_PATTERNS = {
+  light: 10,
+  medium: 25,
+  heavy: 50,
+  success: [15, 60, 15],
+  error: [60, 60, 60, 60, 60]
+};
+function canVibrate() {
+  return typeof navigator !== "undefined" && typeof navigator.vibrate === "function";
+}
+function resolvePattern(pattern) {
+  if (typeof pattern !== "string") return pattern;
+  const value = HAPTIC_PATTERNS[pattern];
+  return typeof value === "number" ? value : [...value];
+}
+function vibrate(pattern) {
+  try {
+    if (!canVibrate()) return false;
+    return navigator.vibrate(resolvePattern(pattern)) !== false;
+  } catch {
+    return false;
+  }
+}
+export {
+  HAPTIC_PATTERNS,
+  canVibrate,
+  vibrate
+};

package/dist/internals/motion/in-view.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The primitive every "reveal on scroll" / "notice when visible" component in
+ * this family uses instead of hand-rolling its own IntersectionObserver.
+ * Four components elsewhere in this library (blur-reveal, box-reveal,
+ * line-reveal, number-ticker) each carry a near-identical
+ * `new IntersectionObserver(...)` block, differing only in whether they
+ * honour `once: false` and whether `root`/`rootMargin` are exposed at all —
+ * this is the single, parameterized version those four independently
+ * reinvented, written once for the ten components that need it here.
+ *
+ * Two layers, as everywhere in `internals/`: `observeInView(node, options)` is
+ * the framework-free core (its own suite drives it directly against a
+ * hand-built node, no React), and `useInView(node, options)` is the hook the
+ * components use.
+ */
+export interface InViewOptions {
+    /** Disconnect after the first time the node becomes visible. Default true. */
+    once?: boolean;
+    /** IntersectionObserver threshold(s). Default 0.1. */
+    threshold?: number | number[];
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** IntersectionObserver root. Default null (the viewport). */
+    root?: Element | Document | null;
+    /** Called with the current intersecting state on every observer callback. */
+    onChange: (inView: boolean, entry?: IntersectionObserverEntry) => void;
+}
+/** What `observeInView` hands back. `update()` swaps the live options in
+ * place; `destroy()` disconnects for good. */
+export interface InViewHandle {
+    update(options: InViewOptions): void;
+    destroy(): void;
+}
+export declare function observeInView(node: Element, opts: InViewOptions): InViewHandle;
+export interface UseInViewOptions extends Omit<InViewOptions, "onChange"> {
+    /** Optional here (it is required on the core): the hook already returns the
+     * state, so a consumer only supplies this when it needs the entry itself. */
+    onChange?: InViewOptions["onChange"];
+    /** `false` observes nothing at all. Default true. */
+    enabled?: boolean;
+}
+/**
+ * Returns whether `node` is currently intersecting, and forwards every
+ * observer fire to `onChange`.
+ *
+ * Takes the NODE, not a ref (convention C-1): a node created by a conditional
+ * or by a presence-gated subtree is still `null` when a `[]`-deps effect
+ * fires, and that effect never re-runs.
+ *
+ * A LAYOUT effect, not a passive one: the no-IntersectionObserver branch calls
+ * `onChange(true)` synchronously, and a passive effect would paint one frame
+ * of hidden content before the fail-visible answer landed. Constructing the
+ * observer costs nothing measurable.
+ *
+ * The dependency array is exactly the core's own rebuild rule: `threshold`,
+ * `rootMargin` and `root` are the observer's constructor arguments and force a
+ * new one; `once` and `onChange` are read live on every fire and must NOT —
+ * an inline `onChange` closure changes identity every render, and re-observing
+ * for that alone would throw away more than intended. `firedOnce` lives in a
+ * ref so it survives a rebuild but not an unmount, matching the core handle's
+ * per-instance lifetime.
+ *
+ * SSR: `false`, matching an un-run observer. A consumer that needs the
+ * revealed state in the server HTML uses the `initial="visible"` pattern
+ * `Reveal` already has.
+ */
+export declare function useInView(node: Element | null, options?: UseInViewOptions): boolean;

package/dist/internals/motion/in-view.js

@@ -0,0 +1,97 @@
+"use client";
+import { useState, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../dom/ssr.js";
+import { useEventCallback } from "../dom/use-event-callback.js";
+import { useLiveRef } from "../dom/use-live-ref.js";
+const DEFAULT_THRESHOLD = 0.1;
+const DEFAULT_ROOT_MARGIN = "0px";
+function observerInit(options) {
+  return {
+    threshold: options.threshold ?? DEFAULT_THRESHOLD,
+    rootMargin: options.rootMargin ?? DEFAULT_ROOT_MARGIN,
+    root: options.root ?? null
+  };
+}
+function sameObserverInit(a, b) {
+  const ia = observerInit(a);
+  const ib = observerInit(b);
+  return JSON.stringify(ia.threshold) === JSON.stringify(ib.threshold) && ia.rootMargin === ib.rootMargin && ia.root === ib.root;
+}
+function noop() {
+}
+function observeInView(node, opts) {
+  if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
+    opts.onChange(true);
+    return { update: noop, destroy: noop };
+  }
+  let current = opts;
+  let observer;
+  let firedOnce = false;
+  function build(o) {
+    observer?.disconnect();
+    observer = void 0;
+    if (firedOnce) return;
+    observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        current.onChange(entry.isIntersecting, entry);
+        if (entry.isIntersecting && (current.once ?? true)) {
+          firedOnce = true;
+          observer?.disconnect();
+          observer = void 0;
+        }
+      }
+    }, observerInit(o));
+    observer.observe(node);
+  }
+  build(current);
+  return {
+    update(newOpts) {
+      const needsRebuild = !sameObserverInit(current, newOpts);
+      current = newOpts;
+      if (needsRebuild) build(newOpts);
+    },
+    destroy() {
+      observer?.disconnect();
+    }
+  };
+}
+function useInView(node, options = {}) {
+  const { once, threshold, rootMargin, root, enabled = true, onChange } = options;
+  const [inView, setInView] = useState(false);
+  const onceRef = useLiveRef(once);
+  const handleChange = useEventCallback(onChange);
+  const firedOnce = useRef(false);
+  const thresholdKey = JSON.stringify(threshold ?? DEFAULT_THRESHOLD);
+  useIsomorphicLayoutEffect(() => {
+    if (!node || !enabled) return;
+    if (firedOnce.current) return;
+    const handle = observeInView(node, {
+      // A getter, not a captured value: `once` is read off this object on
+      // every fire, so flipping it takes effect without a rebuild.
+      get once() {
+        return onceRef.current;
+      },
+      threshold,
+      rootMargin,
+      root,
+      // Rest args, forwarded as received: the fail-visible branch calls
+      // `onChange(true)` with ONE argument, and re-expanding it to
+      // `(visible, entry)` would hand the consumer an explicit
+      // `undefined` second argument the core never sent.
+      onChange: (...args) => {
+        const [visible] = args;
+        setInView(visible);
+        if (visible && (onceRef.current ?? true)) firedOnce.current = true;
+        handleChange(...args);
+      }
+    });
+    return () => {
+      handle.destroy();
+    };
+  }, [node, enabled, thresholdKey, rootMargin, root]);
+  return inView;
+}
+export {
+  observeInView,
+  useInView
+};

package/dist/internals/motion/media-query.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Live `matchMedia` state as a hook.
+ *
+ * `useSyncExternalStore`, and this file is the archetype for choosing it: a
+ * store React does not own, mutated outside React's knowledge, that must not
+ * tear across a concurrent render — and whose `getServerSnapshot` returns
+ * `fallback` for the server render AND the hydration render, which eliminates
+ * the whole mismatch class rather than papering over it. A
+ * `useState` + `useEffect` version reaches the same end state with one extra
+ * committed frame and a real hydration mismatch the moment someone
+ * "optimises" the initializer into a lazy `window.matchMedia` read.
+ *
+ * The Svelte source's `start()`/`stop()` pair has no counterpart here (D-4): it
+ * exists only because that framework has no lifecycle-bound reactive
+ * primitive, so the factory had to be constructible during SSR before any
+ * effect ran. `useSyncExternalStore` IS that lifecycle, with the hydration
+ * guarantee on top. The consuming pattern collapses from three lines to
+ * `const reduced = useReducedMotion();`.
+ *
+ * `getSnapshot` is called by React on every render and again after every store
+ * change, so it must not allocate: `window.matchMedia(query)` mints a NEW
+ * `MediaQueryList` on each call, and one `useReducedMotion()` in a
+ * scroll-driven tree turns that into garbage on every frame. The list is
+ * therefore memoised per query, and dropped again on the two events that can
+ * make a memoised one wrong:
+ *
+ * - `window.matchMedia` itself being replaced. The cache is keyed on the
+ *   current function as well as the query, which is what keeps the source's
+ *   own rationale intact: a test that overrides `matchMedia` wholesale
+ *   installs a different function, the key stops matching, and the very next
+ *   call resolves against the new implementation.
+ * - A `change` event actually firing. A real `MediaQueryList.matches` is live
+ *   — the browser updates the object you already hold — but a stub that
+ *   captures `matches` at construction is not, and re-resolving once per real
+ *   preference change (a rare, user-driven event) costs nothing and makes the
+ *   hook correct against both. The subscription itself stays on the list it
+ *   was added to, so no listener is stranded.
+ *
+ * Between those, every render reuses one list. `matches` is a boolean, so
+ * snapshot identity is a non-issue either way.
+ */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/**
+ * `true` while `query` matches. `fallback` is the answer on the server, during
+ * hydration, and on a host without `matchMedia` at all.
+ */
+export declare function useMediaQuery(query: string, fallback?: boolean): boolean;
+/** `useMediaQuery(REDUCED_MOTION_QUERY, false)` — reduced motion is never
+ * assumed before the browser has actually been asked. */
+export declare function useReducedMotion(): boolean;

package/dist/internals/motion/media-query.js

@@ -0,0 +1,54 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function canMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+let cachedImpl;
+let cache = /* @__PURE__ */ new Map();
+function mediaQueryList(query) {
+  if (cachedImpl !== window.matchMedia) {
+    cachedImpl = window.matchMedia;
+    cache = /* @__PURE__ */ new Map();
+  }
+  const existing = cache.get(query);
+  if (existing) return existing;
+  const mql = window.matchMedia(query);
+  cache.set(query, mql);
+  return mql;
+}
+function invalidate(query) {
+  cache.delete(query);
+}
+function useMediaQuery(query, fallback = false) {
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      if (!canMatchMedia()) return () => {
+      };
+      const mql = mediaQueryList(query);
+      const handleChange = () => {
+        invalidate(query);
+        onStoreChange();
+      };
+      mql.addEventListener("change", handleChange);
+      return () => {
+        mql.removeEventListener("change", handleChange);
+      };
+    },
+    [query]
+  );
+  const getSnapshot = useCallback(() => {
+    if (!canMatchMedia()) return fallback;
+    return mediaQueryList(query).matches;
+  }, [query, fallback]);
+  const getServerSnapshot = useCallback(() => fallback, [fallback]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function useReducedMotion() {
+  return useMediaQuery(REDUCED_MOTION_QUERY, false);
+}
+export {
+  REDUCED_MOTION_QUERY,
+  useMediaQuery,
+  useReducedMotion
+};

package/dist/internals/motion/presence.d.ts

@@ -0,0 +1,108 @@
+/**
+ * `usePresence` — the mount/unmount clock every transition-driven surface in
+ * this package runs on.
+ *
+ * The framework this library ports from hands a conditional block's exit
+ * animation to its own scheduler: the block stays alive until its LAST
+ * transition finishes, and only then is it destroyed. React has no such thing
+ * — a component that stops rendering a subtree removes it in the same commit —
+ * so the clock has to be owned explicitly. This hook is that owner, and owning
+ * it in one place rather than per component buys three things:
+ *
+ * - **Cleanup timing, for free.** Every effect cleanup inside the subtree — a
+ *   scroll lock's release, a dismissable layer's splice, a focus trap's destroy
+ *   path — lands at the instant the exit settles, exactly where the source's
+ *   outro-delayed `destroy()` put it. No other module needs a "delay my
+ *   teardown" mechanism.
+ * - **Reversal.** ONE bidirectional leg per node, never a split in/out pair, so
+ *   a reopen mid-close resumes from the position the close actually reached
+ *   instead of snapping back to the far end. Reversal smoothing only exists for
+ *   a unified leg; having one hook own both directions makes that structural
+ *   rather than a convention a port could break. The node is never unmounted
+ *   during such a reversal — which is why `onEnterStart` is the hook a focus
+ *   trap re-arms from.
+ * - **Grouping.** Several nodes can share one clock (a dialog's scrim and its
+ *   panel), so they leave together and the unmount is a tie rather than a
+ *   straggler.
+ *
+ * `register()` is called during render and returns a CACHED, identity-stable
+ * ref callback, so React never detaches and reattaches an animated node. The
+ * transition and its params are rewritten on every render into a per-key slot
+ * and read at the instant a leg starts, never at render time. That is what lets
+ * `params` take a `(entering: boolean) => P` factory, and the factory form is
+ * the documented default: a single bidirectional transition cannot tell
+ * entering from leaving on its own (its `direction` reports `"both"` on both
+ * invocations, computed once for the life of the node), but `open` can — so the
+ * factory is called with the answer, and `usePresence` passes a real
+ * `"in"`/`"out"` down so a preset's own direction-dependent easing default
+ * resolves correctly.
+ *
+ * Phase: layout effect throughout (contract §4). The source starts an intro
+ * before paint; a passive effect would paint one frame at rest first, and a
+ * reduced-motion close would cost an extra frame instead of settling inside the
+ * same effect that started it.
+ *
+ * SSR: `mounted` starts at `open`, no leg ever runs, and nothing here reads a
+ * browser global in a render path. A surface that is open on the server paints
+ * at rest — which is also the client's behaviour on a first render, because
+ * `appear` defaults to false.
+ */
+import type { RefCallback } from "react";
+import type { SurfaceState } from "./anchored.js";
+import type { TransitionFn } from "./transitions.js";
+/** The three values `Presence` renders into `data-state`, because its source
+ *  renders three. An anchored surface renders `surfaceState`'s two instead —
+ *  the two vocabularies are not interchangeable (convention C-5). */
+export type PresenceState = "opening" | "open" | "closing";
+export interface UsePresenceOptions {
+    /**
+     * Animate an entrance when `open` is ALREADY true on the very first render.
+     * Default FALSE, reproducing two source rules that happen to agree: a LOCAL
+     * transition never plays on the initial render of the block that owns it,
+     * and hydration defaults intros off. A surface mounting for the first time
+     * already open therefore paints visible with no intro.
+     */
+    appear?: boolean;
+    /**
+     * Set `inert` on every attached node while closing, clear it on enter.
+     * Default true — the source sets it itself, synchronously, immediately
+     * before the exit starts, which is what keeps a closing panel from
+     * answering a click. `false` is the explicit opt-out, and it means this
+     * hook never touches `inert` at all.
+     *
+     * Written as the ATTRIBUTE, through `toggleAttribute`, never as the
+     * `inert` IDL property — the one mechanism this package uses everywhere
+     * (`useInertAttribute` is the same write behind a ref). The attribute is
+     * what `:not([inert])` selectors and assistive technology key on, a real
+     * browser reflects it to the IDL property for anything reading that
+     * instead, and it is the only one of the two that exists under jsdom, so
+     * the behaviour a test pins is the behaviour that ships.
+     */
+    inert?: boolean;
+    onEnterStart?: () => void;
+    onEnterEnd?: () => void;
+    /** Fires at the dismiss instant, before the exit paints. */
+    onExitStart?: () => void;
+    onExitEnd?: () => void;
+}
+export interface PresenceHandle {
+    /** Render the subtree while true. Stays true through the WHOLE exit. */
+    readonly mounted: boolean;
+    /** Three values. For anything whose source renders three. */
+    readonly state: PresenceState;
+    /** Two values — `state === "closing" ? "closing" : "open"`. THE value every
+     *  anchored surface renders into `data-state` (convention C-5). */
+    readonly surfaceState: SurfaceState;
+    /** `=== open`. Pass to `active:` options and to params factories. */
+    readonly entering: boolean;
+    /** Attach the single animated element. */
+    register<P>(transition: TransitionFn<P>, params?: P | ((entering: boolean) => P)): RefCallback<HTMLElement>;
+    /** Attach one of several elements sharing this clock (a dialog's scrim +
+     *  panel). The subtree unmounts only when EVERY keyed exit has finished. */
+    register<P>(key: string, transition: TransitionFn<P>, params?: P | ((entering: boolean) => P)): RefCallback<HTMLElement>;
+}
+/**
+ * Owns one surface's mount/unmount clock. `mounted` stays true through the
+ * whole exit and goes false only once every registered node's leg has settled.
+ */
+export declare function usePresence(open: boolean, options?: UsePresenceOptions): PresenceHandle;

package/dist/internals/motion/presence.js

@@ -0,0 +1,197 @@
+"use client";
+import { useState } from "react";
+import { useConstant, useIsomorphicLayoutEffect } from "../dom/ssr.js";
+import { useEventCallback } from "../dom/use-event-callback.js";
+import { useLiveRef } from "../dom/use-live-ref.js";
+import { runTransition } from "./animate.js";
+const DEFAULT_KEY = "default";
+function createPresenceCore(deps) {
+  const slots = /* @__PURE__ */ new Map();
+  let leg = null;
+  let starting = false;
+  let inertApplied = false;
+  let firstRun = true;
+  function ensureSlot(key) {
+    const existing = slots.get(key);
+    if (existing) return existing;
+    const slot = {
+      node: null,
+      buildSpec: null,
+      run: void 0,
+      legTo: null,
+      finished: false,
+      pendingLeg: null,
+      // Block body, never a concise arrow: React 19 reads a returned value
+      // as a cleanup function (convention C-3).
+      ref: (node) => {
+        if (node) {
+          slot.node = node;
+          const pending = slot.pendingLeg;
+          slot.pendingLeg = null;
+          if (pending !== null && leg === pending) startSlot(slot, pending);
+          return;
+        }
+        slot.pendingLeg = leg !== null && !slot.finished ? leg : null;
+        slot.run?.abort();
+        slot.run = void 0;
+        slot.node = null;
+        slot.legTo = null;
+        slot.finished = false;
+      }
+    };
+    slots.set(key, slot);
+    return slot;
+  }
+  function register(a, b, c) {
+    const keyed = typeof a === "string";
+    const slot = ensureSlot(keyed ? a : DEFAULT_KEY);
+    const transition = keyed ? b : a;
+    const params = keyed ? c : b;
+    slot.buildSpec = (node, entering) => {
+      const resolved = typeof params === "function" ? params(entering) : params;
+      return transition(node, resolved, { direction: entering ? "in" : "out" });
+    };
+    return slot.ref;
+  }
+  function startSlot(slot, to) {
+    const node = slot.node;
+    const buildSpec = slot.buildSpec;
+    if (!node || !buildSpec) return;
+    const counterpart = slot.run;
+    slot.legTo = to;
+    slot.finished = false;
+    slot.run = void 0;
+    const handle = { current: void 0 };
+    const run = runTransition(node, buildSpec(node, to === 1), to, counterpart, () => {
+      slot.finished = true;
+      if (to === 1) {
+        handle.current?.abort();
+        slot.run = void 0;
+      }
+      settle(to);
+    });
+    handle.current = run;
+    if (!slot.finished) slot.run = run;
+  }
+  function startLegs(to) {
+    starting = true;
+    try {
+      for (const slot of slots.values()) {
+        if (!slot.node) continue;
+        if (slot.legTo === to) continue;
+        startSlot(slot, to);
+      }
+    } finally {
+      starting = false;
+    }
+    settle(to);
+  }
+  function settle(to) {
+    if (starting) return;
+    if (leg !== to) return;
+    for (const slot of slots.values()) {
+      if (!slot.node) continue;
+      if (slot.legTo !== to || !slot.finished) return;
+    }
+    leg = null;
+    if (to === 1) {
+      deps.setState("open");
+      deps.onEnterEnd();
+      return;
+    }
+    deps.setMounted(false);
+    deps.setState("open");
+    deps.onExitEnd();
+  }
+  function beginEnter() {
+    leg = 1;
+    if (inertApplied) {
+      inertApplied = false;
+      for (const slot of slots.values()) {
+        slot.node?.toggleAttribute("inert", false);
+      }
+    }
+    deps.setState("opening");
+    deps.onEnterStart();
+  }
+  function beginExit() {
+    leg = 0;
+    deps.onExitStart();
+    deps.setState("closing");
+    if (deps.inertRef.current) {
+      inertApplied = true;
+      for (const slot of slots.values()) {
+        slot.node?.toggleAttribute("inert", true);
+      }
+    }
+  }
+  function sync(open, mounted, appear) {
+    const first = firstRun;
+    firstRun = false;
+    if (open) {
+      if (!mounted) {
+        beginEnter();
+        deps.setMounted(true);
+        return;
+      }
+      if (first && !appear) {
+        return;
+      }
+      if (leg !== 1) beginEnter();
+      startLegs(1);
+      return;
+    }
+    if (!mounted) return;
+    if (leg !== 0) beginExit();
+    startLegs(0);
+  }
+  function teardown() {
+    for (const slot of slots.values()) {
+      slot.run?.abort();
+      slot.run = void 0;
+      slot.legTo = null;
+      slot.finished = false;
+      slot.pendingLeg = null;
+    }
+    leg = null;
+    inertApplied = false;
+    firstRun = true;
+  }
+  return { register, sync, teardown };
+}
+function usePresence(open, options = {}) {
+  const { appear = false, inert = true } = options;
+  const [mounted, setMounted] = useState(open);
+  const [state, setState] = useState("open");
+  const onEnterStart = useEventCallback(options.onEnterStart);
+  const onEnterEnd = useEventCallback(options.onEnterEnd);
+  const onExitStart = useEventCallback(options.onExitStart);
+  const onExitEnd = useEventCallback(options.onExitEnd);
+  const inertRef = useLiveRef(inert);
+  const appearRef = useLiveRef(appear);
+  const core = useConstant(
+    () => createPresenceCore({
+      setMounted,
+      setState,
+      onEnterStart,
+      onEnterEnd,
+      onExitStart,
+      onExitEnd,
+      inertRef
+    })
+  );
+  useIsomorphicLayoutEffect(() => {
+    core.sync(open, mounted, appearRef.current);
+  }, [core, appearRef, open, mounted]);
+  useIsomorphicLayoutEffect(() => core.teardown, [core]);
+  return {
+    mounted,
+    state,
+    surfaceState: state === "closing" ? "closing" : "open",
+    entering: open,
+    register: core.register
+  };
+}
+export {
+  usePresence
+};