react-fresh-key 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,390 @@
+import { Dispatch, SetStateAction, ReactNode, ReactElement, ComponentType, LazyExoticComponent, MemoExoticComponent, ComponentPropsWithRef, JSX, ComponentProps, ForwardRefExoticComponent } from 'react';
+
+/**
+ * Watched values used by remount and state-reset APIs.
+ *
+ * List length and corresponding entries are compared. Entries use `Object.is`,
+ * except that plain objects and ordinary arrays compare one level deep using
+ * their own enumerable string and symbol properties; arrays also compare
+ * length. Equal content preserves state even when object identities differ.
+ * Nested objects, functions, Maps, Sets, Dates, and class instances (including
+ * array subclasses) compare by identity.
+ *
+ * Treat the list and its values as immutable. A new list is fine when its
+ * entries compare equal; values created anew on every render that cannot
+ * compare equal can cause hooks to hit React's re-render limit.
+ */
+type DepsList = readonly unknown[];
+
+/**
+ * Returns a numeric key that changes whenever any value in `deps` changes.
+ * Values are compared with `Object.is` — like React's own dependency
+ * comparison — except that plain objects and ordinary arrays are compared
+ * one level deep. Distinct objects with equal content preserve the key;
+ * `[{ id }]` written inline therefore converges instead of looping.
+ *
+ * A hook cannot remount the component it runs in, so apply the key to an
+ * inner subtree:
+ *
+ * ```tsx
+ * function Profile({ userId }: { userId: string }) {
+ *   const key = useRemountKey([userId])
+ *   return <ProfileForm key={key} userId={userId} />
+ * }
+ * ```
+ *
+ * The key is derived purely during render (the setState-in-render
+ * "derived state" pattern), so it is SSR-deterministic and StrictMode-safe.
+ * In the render where deps change, the *new* key is returned immediately.
+ *
+ * **Stability contract** — put primitives, references you already hold
+ * (props, state, memoized values), or flat plain objects/arrays in `deps`.
+ * A value that is a *new, non-equal* reference on every render — a nested
+ * object literal, `new Map()`, `new Date()`, a class instance built inline —
+ * can never compare equal and will trip React's re-render limit. Hold such
+ * values in state or `useMemo` first.
+ *
+ * @param deps Watched values, compared using {@link DepsList} rules. Treat the
+ * list and its values as immutable; changing their contents in place is not
+ * detected reliably. An empty list keeps the initial key.
+ * @returns A key local to this hook instance, starting at `0` and increasing
+ * when dependencies change. Apply it to a descendant element's `key` prop.
+ */
+declare function useRemountKey(deps: DepsList): number;
+/**
+ * Predicate flavor of {@link useRemountKey}: tracks an arbitrary `value` and
+ * bumps the key when `when(prev, next)` returns `true` for a changed value.
+ *
+ * `prev` is the last recorded value. Whenever a changed value is observed,
+ * the snapshot advances even if the predicate returns `false`. Equal values
+ * retain the existing snapshot and skip the predicate. Equality uses
+ * `Object.is`, or a one-level shallow comparison for plain objects and ordinary
+ * arrays, so a flat inline object (`useRemountKeyWhen({ id, tab }, …)`) converges.
+ *
+ * ```tsx
+ * const key = useRemountKeyWhen(user, (prev, next) => prev.id !== next.id)
+ * ```
+ *
+ * **Stability contract**: the same as {@link useRemountKey} — a value that is
+ * a new, non-equal reference on every render (nested literals, Map, Date,
+ * class instances built inline) cannot converge; hold it in state or `useMemo`.
+ *
+ * @param value The immutable value to track. Replace changed objects instead
+ * of mutating them in place.
+ * @param when A pure render-time predicate comparing the last recorded value
+ * with the new value. It is skipped on initial render and for equal values;
+ * changing only the predicate does not trigger a comparison.
+ * @returns A key starting at `0`, increased when a changed value satisfies
+ * `when`. Apply it to a descendant element; it cannot remount this hook's owner.
+ */
+declare function useRemountKeyWhen<T>(value: T, when: (prev: T, next: T) => boolean): number;
+
+/**
+ * Like `useState`, but the state snaps back to `initial` whenever any value
+ * in `deps` changes.
+ *
+ * This is the cheap alternative to a full remount: only this piece of state
+ * resets — DOM state (focus, scroll, uncontrolled inputs), refs, and effects
+ * are untouched. Reach for this first; remount only when you need everything
+ * gone.
+ *
+ * ```tsx
+ * function Comment({ postId }: { postId: string }) {
+ *   const [draft, setDraft] = useResettableState('', [postId])
+ *   // draft clears when the user navigates to another post
+ * }
+ * ```
+ *
+ * Reset happens purely during render (no effect, no flash of stale state),
+ * and the render in which deps change already sees the fresh value — so
+ * code after the hook never observes state that belongs to the old deps.
+ *
+ * `deps` follow {@link DepsList} comparison rules: `Object.is`, with plain
+ * objects and ordinary arrays compared one level deep. Dependencies must be
+ * able to compare equal across rerenders: nested literals or new class
+ * instances created on every render can cause a re-render loop. Keep those
+ * values in state or memoize them, and replace changed values rather than
+ * mutating them in place.
+ *
+ * @param initial The value, or a pure lazy initializer, used on mount and on
+ * each dependency change. Resets use the current render's `initial`; changing
+ * only this argument does not reset existing state. Wrap a function-valued
+ * initial state in an initializer, as with React's `useState`.
+ * @param deps Immutable watched values that determine when to reset. An empty
+ * list disables dependency-driven resets.
+ * @returns The current state and a stable setter accepting either the next
+ * value or a pure updater function. A dependency change returns fresh state
+ * in the same render, without remounting the component.
+ */
+declare function useResettableState<T>(initial: T | (() => T), deps: DepsList): [T, Dispatch<SetStateAction<T>>];
+
+/** Dependency-list mode for {@link Remount}; do not combine with `watch` or `when`. */
+interface RemountDepsProps {
+    /**
+     * Remount children when a dependency changes. Values use `Object.is`, except
+     * plain objects and ordinary arrays are compared one level deep.
+     */
+    deps: DepsList;
+    watch?: never;
+    when?: never;
+    /** Children that remount together; the component containing this boundary stays mounted. */
+    children?: ReactNode;
+}
+/** Predicate mode for {@link Remount}; provide both `watch` and `when`, without `deps`. */
+interface RemountWhenProps<T> {
+    deps?: never;
+    /**
+     * Value compared across renders before consulting `when`. Uses `Object.is`,
+     * except plain objects and ordinary arrays are compared one level deep.
+     */
+    watch: T;
+    /**
+     * Pure predicate called during render when `watch` changes. Return `true` to
+     * remount children. The tracked snapshot advances even when this returns `false`.
+     * React may evaluate the predicate more than once; avoid side effects.
+     *
+     * @param prev Previous tracked value, not necessarily the value at the last remount.
+     * @param next Incoming `watch` value.
+     */
+    when: (prev: T, next: T) => boolean;
+    /** Children that remount together; the component containing this boundary stays mounted. */
+    children?: ReactNode;
+}
+/** Choose `deps` or `watch` + `when`, and keep that mode for the boundary's lifetime. */
+type RemountProps<T = unknown> = RemountDepsProps | RemountWhenProps<T>;
+/**
+ * Declarative remount boundary. Everything inside is unmounted and mounted
+ * fresh (state, refs, effects, DOM) when the watched values change.
+ *
+ * Used by a parent it is nicer `key` syntax; used *inside* a component around
+ * its own subtree, it lets the component own its reset policy:
+ *
+ * ```tsx
+ * <Remount deps={[userId]}>
+ *   <ProfileForm userId={userId} />
+ * </Remount>
+ *
+ * <Remount watch={user} when={(prev, next) => prev.id !== next.id}>
+ *   <ProfileForm user={user} />
+ * </Remount>
+ * ```
+ *
+ * Pick one mode (`deps` or `watch`+`when`) and stick to it for the lifetime
+ * of the element.
+ *
+ * @param props Watched inputs, reset policy, and children to remount together.
+ * @returns A keyed fragment; no wrapper DOM element is added.
+ */
+declare function Remount<T = unknown>(props: RemountProps<T>): ReactElement;
+
+/**
+ * What to watch for remounting:
+ *
+ * - `['userId', 'mode']` — prop names; remount when any of them changes.
+ * - `(props) => props.user.id` — selector; remount when the returned value
+ *   (or any element, if it returns an array) changes. Same as `{ select }`.
+ * - `{ select: (props) => value | deps[] }` — explicit selector form.
+ * - `{ when: (prev, next) => boolean }` — predicate over previous/next props;
+ *   remount when it returns `true`.
+ *
+ * Predicates are always explicit (`{ when }`). A bare function is always a
+ * selector — there is no arity-based guessing.
+ *
+ * Selected values use `Object.is`, except plain objects and ordinary arrays
+ * are compared one level deep. Selectors and predicates run during render:
+ * keep them pure, because React may evaluate them more than once.
+ *
+ * Declared `defaultProps` are applied before callbacks, including through
+ * `memo`. Inner defaults behind `lazy` and JavaScript parameter defaults
+ * cannot be resolved by the wrapper; handle any optional props accordingly.
+ */
+type WatchSpec<P extends object> = ReadonlyArray<keyof P> | ((props: P) => unknown) | {
+    /**
+     * Pure selector of the incoming props. Return one watched value or an
+     * array of dependencies; remount when any selected dependency changes.
+     *
+     * @param props Incoming props with available `defaultProps` applied.
+     */
+    select: (props: P) => unknown;
+} | {
+    /**
+     * Pure predicate called when props differ shallowly (`Object.is` per
+     * prop). Return `true` to remount. The snapshot advances on a detected
+     * change even when this returns `false`.
+     *
+     * @param prev Previous tracked props, not necessarily those at the last remount.
+     * @param next Incoming props. Available `defaultProps` are applied to both arguments.
+     */
+    when: (prev: P, next: P) => boolean;
+};
+/**
+ * `true` when `C` is a `lazy` component, possibly wrapped in any number of
+ * `memo` layers. Mirrors the runtime `unwrapMemo`, which also looks through
+ * every memo layer and then stops at a lazy object it cannot open.
+ */
+type ContainsLazy<C> = C extends LazyExoticComponent<infer _Component> ? true : C extends MemoExoticComponent<infer T> ? ContainsLazy<T> : false;
+/**
+ * The props the wrapper accepts: whatever React's JSX checker would accept
+ * for the original component (so props covered by `defaultProps` stay
+ * optional — through `memo` too), with the ref type inferred from the
+ * original.
+ *
+ * `lazy` is the one exception, at any depth of `memo` nesting: its inner
+ * component's defaults are unknowable until the module loads, so the wrapper
+ * requires those props as declared. That keeps the types truthful about what
+ * selectors and predicates receive.
+ */
+type RemountedProps<C extends ComponentType<any>> = ContainsLazy<C> extends true ? ComponentPropsWithRef<C> : JSX.LibraryManagedAttributes<C, ComponentPropsWithRef<C>>;
+/**
+ * Wrap a component with a remount policy declared *at the definition site*,
+ * so call sites don't need to know which props warrant a fresh mount:
+ *
+ * ```tsx
+ * // Profile.tsx
+ * function Profile({ userId }: ProfileProps) { ... }
+ * export default withRemount(Profile, ['userId'])
+ *
+ * // Anywhere else — no key juggling required:
+ * <Profile userId={id} />
+ * ```
+ *
+ * Parents can still override identity the normal way with their own `key`.
+ * Refs are forwarded, and the ref type is inferred from the wrapped
+ * component (a `forwardRef<HTMLInputElement, …>` component yields a wrapper
+ * that accepts `Ref<HTMLInputElement>` and nothing else). Props covered by
+ * `defaultProps` stay optional, except behind `lazy`; see {@link RemountedProps}.
+ *
+ * Call this once outside rendering. Creating a wrapper during render creates
+ * a new component type each time and discards its state. Selectors and
+ * predicates must be pure; they run during render and may be evaluated again.
+ *
+ * @param Component Component whose entire subtree remounts when the rule matches.
+ * @param watch Prop names, a selector, `{ select }`, or `{ when }`; see {@link WatchSpec}.
+ * @returns A component accepting the original props and supported ref type.
+ * @throws If the watch specification is invalid; pass predicates as `{ when }`.
+ */
+declare function withRemount<C extends ComponentType<any>>(Component: C, watch: WatchSpec<ComponentProps<C>>): ForwardRefExoticComponent<RemountedProps<C>>;
+
+/** Props for the shared, zero-argument {@link ResetBoundary}. */
+interface ResetBoundaryProps {
+    /** Subtree to remount on reset. Its local state, refs, effects, and DOM are recreated. */
+    children?: ReactNode;
+    /**
+     * Observes each reset request synchronously, with no arguments (for example, analytics).
+     * This is not a mount lifecycle callback; initialize focus in the remounted UI itself.
+     * Use {@link createResetBoundary} to receive typed request metadata.
+     */
+    onReset?: () => void;
+}
+/**
+ * A typed reset request. Check `key` to narrow `payload` to that action's type.
+ * `Events` maps registration keys to the payloads declared by the component author.
+ */
+type ResetEvent<Events extends object> = {
+    [Key in keyof Events]-?: {
+        /** Registration key selected by the descendant's hook. */
+        key: Key;
+        /** Original argument passed to reset, or undefined for a call without a payload. */
+        payload: Events[Key];
+    };
+}[keyof Events];
+/** Props for a boundary returned by {@link createResetBoundary}. */
+interface TypedResetBoundaryProps<Events extends object> {
+    /** Subtree to remount when a descendant requests a reset through this factory's hook. */
+    children?: ReactNode;
+    /**
+     * Observes each reset request synchronously. Does not signal that the new subtree has mounted.
+     * @param event - Registration key and unchanged payload. Narrow on `event.key` before reading action-specific fields.
+     */
+    onReset?: (event: ResetEvent<Events>) => void;
+}
+type ResetArgs<Payload> = undefined extends Payload ? [payload?: Payload] : [payload: Payload];
+type RegistrationPayload<Events extends object, Key extends keyof Events> = {
+    [K in Key]-?: (payload: Events[K]) => void;
+}[Key] extends (payload: infer Payload) => void ? Payload : never;
+type RegisteredReset<Events extends object, Key extends keyof Events> = {
+    /**
+     * Requests a remount from the matching boundary and reports this registration's key and payload.
+     * Supply a payload unless the action's declared type accepts undefined.
+     * @param payload - Data for the selected action. May be omitted only if its type accepts undefined.
+     */
+    (...args: ResetArgs<RegistrationPayload<Events, Key>>): void;
+};
+/**
+ * Imperative reset from below: any descendant can call the function returned
+ * by {@link useResetBoundary} to unmount and freshly mount everything inside
+ * the nearest boundary — state, refs, effects, DOM.
+ *
+ * Handy for "start over" buttons, clearing a wizard after submit, or error
+ * recovery, without the parent knowing anything about it:
+ *
+ * ```tsx
+ * <ResetBoundary>
+ *   <CheckoutWizard />
+ * </ResetBoundary>
+ *
+ * // deep inside CheckoutWizard:
+ * const reset = useResetBoundary();
+ * <button onClick={reset}>Start over</button>
+ * ```
+ *
+ * Boundaries nest; `useResetBoundary` targets the nearest one.
+ * @param props - Subtree and optional synchronous reset observer.
+ * @returns A resettable subtree accessible through {@link useResetBoundary}.
+ */
+declare function ResetBoundary({ children, onReset }: ResetBoundaryProps): ReactElement;
+/**
+ * Returns the nearest {@link ResetBoundary}'s reset function.
+ * @returns A stable, zero-argument function that remounts the boundary's entire subtree.
+ * @throws If no shared {@link ResetBoundary} is above the caller. Factory boundaries use their own hook.
+ */
+declare function useResetBoundary(): () => void;
+/**
+ * Creates a boundary and registration hook that share a typed reset contract.
+ * Create it once at module scope; aliases and destructured exports are safe.
+ *
+ * ```tsx
+ * const checkoutReset = createResetBoundary<{
+ *   restart: { step: number }
+ *   completed: { orderId: string }
+ *   dismissed: void
+ * }>()
+ * export const ClientResetBoundary = checkoutReset.ResetBoundary
+ * export const useResetClientRegistration = checkoutReset.useResetBoundary
+ *
+ * // Inside a descendant of ClientResetBoundary:
+ * const reset = useResetClientRegistration('restart')
+ * // In an event handler:
+ * reset({ step: 2 })
+ * ```
+ *
+ * The hook targets the nearest boundary created by this factory call. It
+ * captures a registration key without subscriptions or registration effects.
+ * The reset function is stable while that key and provider remain unchanged.
+ * Payloads are forwarded unchanged to `onReset({ key, payload })`.
+ * @returns A matching boundary and hook. Export either under an application-specific name without binding.
+ */
+declare function createResetBoundary<Events extends object>(): {
+    /** Boundary providing this factory's reset scope and typed request observer. */
+    ResetBoundary: {
+        /**
+         * Provides this factory's reset scope. Nested instances use the nearest matching provider.
+         * @param props - Subtree to remount and optional `onReset` observer of typed requests.
+         * @returns A resettable subtree accessible through this factory's hook.
+         */
+        (props: TypedResetBoundaryProps<Events>): ReactElement;
+    };
+    /** Registration hook for the nearest boundary from this factory; safe to alias or destructure. */
+    useResetBoundary: {
+        /**
+         * Selects a reset action from the nearest boundary created by this factory.
+         * Safe to alias, for example `export const useResetClientRegistration = scope.useResetBoundary`.
+         * @param key - An action key from the shared event map; determines the reset payload's type.
+         * @returns A reset function stable while key and provider are unchanged. Pass the action's payload when calling it; use void for payload-free actions.
+         * @throws If no boundary from this factory call is above the caller.
+         */
+        <Key extends keyof Events>(key: Key): RegisteredReset<Events, Key>;
+    };
+};
+
+export { type DepsList, Remount, type RemountDepsProps, type RemountProps, type RemountWhenProps, type RemountedProps, ResetBoundary, type ResetBoundaryProps, type ResetEvent, type TypedResetBoundaryProps, type WatchSpec, createResetBoundary, useRemountKey, useRemountKeyWhen, useResetBoundary, useResettableState, withRemount };

package/dist/index.js

@@ -0,0 +1,286 @@
+// scripts/react-jsx-runtime.mjs
+import { createElement, Fragment } from "react";
+
+// src/useRemountKey.ts
+import { useState } from "react";
+
+// src/utils.ts
+function isPlainObject(value) {
+  if (value === null || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function isOrdinaryArray(value) {
+  return Array.isArray(value) && Object.getPrototypeOf(value) === Array.prototype;
+}
+function ownEnumerableKeys(value) {
+  const keys = Object.keys(value);
+  for (const sym of Object.getOwnPropertySymbols(value)) {
+    if (Object.prototype.propertyIsEnumerable.call(value, sym)) keys.push(sym);
+  }
+  return keys;
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  const keysA = ownEnumerableKeys(a);
+  const keysB = ownEnumerableKeys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!Object.prototype.propertyIsEnumerable.call(b, key) || !Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+function isEqualDep(a, b) {
+  if (Object.is(a, b)) return true;
+  if (isOrdinaryArray(a) && isOrdinaryArray(b)) return a.length === b.length && shallowEqual(a, b);
+  if (isPlainObject(a) && isPlainObject(b)) return shallowEqual(a, b);
+  return false;
+}
+function areDepsEqual(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!isEqualDep(a[i], b[i])) return false;
+  }
+  return true;
+}
+function toDeps(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
+// src/useRemountKey.ts
+function useRemountKey(deps) {
+  const [state, setState] = useState({
+    deps,
+    key: 0
+  });
+  if (!areDepsEqual(state.deps, deps)) {
+    const key = state.key + 1;
+    setState({ deps, key });
+    return key;
+  }
+  return state.key;
+}
+function useRemountKeyWhen(value, when) {
+  const [state, setState] = useState({
+    value,
+    key: 0
+  });
+  if (!isEqualDep(state.value, value)) {
+    const key = when(state.value, value) ? state.key + 1 : state.key;
+    setState({ value, key });
+    return key;
+  }
+  return state.key;
+}
+
+// src/useResettableState.ts
+import { useCallback, useState as useState2 } from "react";
+function resolveInitial(initial) {
+  return typeof initial === "function" ? initial() : initial;
+}
+function useResettableState(initial, deps) {
+  const [state, setState] = useState2(() => ({
+    deps,
+    value: resolveInitial(initial)
+  }));
+  const setValue = useCallback((action) => {
+    setState((s) => ({
+      deps: s.deps,
+      value: typeof action === "function" ? action(s.value) : action
+    }));
+  }, []);
+  if (!areDepsEqual(state.deps, deps)) {
+    const value = resolveInitial(initial);
+    setState({ deps, value });
+    return [value, setValue];
+  }
+  return [state.value, setValue];
+}
+
+// src/Remount.tsx
+import { Fragment as Fragment2 } from "react";
+var alwaysFalse = () => false;
+function Remount(props) {
+  var _a;
+  const usingWhen = typeof props.when === "function";
+  const depsKey = useRemountKey(usingWhen ? [] : (_a = props.deps) != null ? _a : []);
+  const whenKey = useRemountKeyWhen(
+    usingWhen ? props.watch : void 0,
+    usingWhen ? props.when : alwaysFalse
+  );
+  const key = usingWhen ? whenKey : depsKey;
+  return /* @__PURE__ */ createElement(Fragment2, { key: `remount-${key}` }, props.children);
+}
+
+// src/withRemount.tsx
+import {
+  forwardRef,
+  useState as useState3
+} from "react";
+function normalizeWatch(watch) {
+  if (Array.isArray(watch)) {
+    const names = watch;
+    return { mode: "select", select: (props) => names.map((n) => props[n]) };
+  }
+  if (typeof watch === "function") {
+    if (watch.length >= 2) {
+      throw new Error(
+        "react-fresh-key: a bare function passed to withRemount is a selector `(props) => value`. For a predicate `(prev, next) => boolean`, pass `{ when: fn }` instead."
+      );
+    }
+    const select = watch;
+    return { mode: "select", select: (props) => toDeps(select(props)) };
+  }
+  if (watch && typeof watch === "object") {
+    if ("select" in watch && typeof watch.select === "function") {
+      const select = watch.select;
+      return { mode: "select", select: (props) => toDeps(select(props)) };
+    }
+    if ("when" in watch && typeof watch.when === "function") {
+      return { mode: "when", when: watch.when };
+    }
+  }
+  throw new Error(
+    "react-fresh-key: invalid watch spec. Expected a prop-name array, a selector function, { select }, or { when }."
+  );
+}
+var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
+function unwrapMemo(Component) {
+  let current = Component;
+  while (current !== null && typeof current === "object" && current.$$typeof === REACT_MEMO_TYPE) {
+    current = current.type;
+  }
+  return current;
+}
+function makeDefaultsResolver(Component) {
+  var _a;
+  const defaults = (_a = unwrapMemo(Component)) == null ? void 0 : _a.defaultProps;
+  if (!defaults) return (props) => props;
+  const keys = Object.keys(defaults);
+  return (props) => {
+    let resolved = null;
+    for (const key of keys) {
+      if (props[key] === void 0) {
+        resolved != null ? resolved : resolved = { ...props };
+        resolved[key] = defaults[key];
+      }
+    }
+    return resolved != null ? resolved : props;
+  };
+}
+function useWatchKey(props, spec, resolve) {
+  const [state, setState] = useState3(() => ({
+    props,
+    deps: spec.mode === "select" ? spec.select(resolve(props)) : null,
+    key: 0
+  }));
+  if (state.props !== props) {
+    if (spec.mode === "select") {
+      const deps = spec.select(resolve(props));
+      if (!areDepsEqual(state.deps, deps)) {
+        const key = state.key + 1;
+        setState({ props, deps, key });
+        return key;
+      }
+    } else if (!shallowEqual(state.props, props)) {
+      const key = spec.when(resolve(state.props), resolve(props)) ? state.key + 1 : state.key;
+      setState({ props, deps: null, key });
+      return key;
+    }
+  }
+  return state.key;
+}
+function withRemount(Component, watch) {
+  var _a, _b;
+  const spec = normalizeWatch(watch);
+  const resolve = makeDefaultsResolver(Component);
+  const Inner = Component;
+  const Wrapped = forwardRef((props, ref) => {
+    const key = useWatchKey(props, spec, resolve);
+    return /* @__PURE__ */ createElement(Inner, { key, ref, ...props });
+  });
+  const name = (_b = (_a = Component.displayName) != null ? _a : Component.name) != null ? _b : "Component";
+  Wrapped.displayName = `withRemount(${name})`;
+  return Wrapped;
+}
+
+// src/ResetBoundary.tsx
+import {
+  Fragment as Fragment3,
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useEffect,
+  useRef,
+  useState as useState4
+} from "react";
+var ResetContext = createContext(null);
+function useResetRequest(onReset) {
+  const [generation, setGeneration] = useState4(0);
+  const onResetRef = useRef(onReset);
+  useEffect(() => {
+    onResetRef.current = onReset;
+  });
+  const request = useCallback2((...args) => {
+    var _a;
+    setGeneration((g) => g + 1);
+    (_a = onResetRef.current) == null ? void 0 : _a.call(onResetRef, ...args);
+  }, []);
+  return { generation, request };
+}
+function ResetBoundary({ children, onReset }) {
+  const { generation, request } = useResetRequest(onReset);
+  const reset = useCallback2(() => request(), [request]);
+  return /* @__PURE__ */ createElement(ResetContext.Provider, { value: reset }, /* @__PURE__ */ createElement(Fragment3, { key: `reset-${generation}` }, children));
+}
+function useResetBoundary() {
+  const reset = useContext(ResetContext);
+  if (reset === null) {
+    throw new Error("react-fresh-key: useResetBoundary must be used inside a <ResetBoundary>.");
+  }
+  return reset;
+}
+function createResetBoundary() {
+  const Context = createContext(null);
+  function TypedResetBoundary({
+    children,
+    onReset
+  }) {
+    const { generation, request } = useResetRequest(onReset);
+    return /* @__PURE__ */ createElement(Context.Provider, { value: request }, /* @__PURE__ */ createElement(Fragment3, { key: `reset-${generation}` }, children));
+  }
+  function useRegisteredReset(key) {
+    const request = useContext(Context);
+    const reset = useCallback2(
+      /**
+       * Requests a remount and forwards this registration's key and payload to `onReset`.
+       * @param payload - Request metadata forwarded unchanged to the matching boundary.
+       */
+      (payload) => {
+        request == null ? void 0 : request({ key, payload });
+      },
+      [request, key]
+    );
+    if (request === null) {
+      throw new Error(
+        "react-fresh-key: useResetBoundary must be used inside a boundary from the same createResetBoundary() call."
+      );
+    }
+    return reset;
+  }
+  return { ResetBoundary: TypedResetBoundary, useResetBoundary: useRegisteredReset };
+}
+export {
+  Remount,
+  ResetBoundary,
+  createResetBoundary,
+  useRemountKey,
+  useRemountKeyWhen,
+  useResetBoundary,
+  useResettableState,
+  withRemount
+};
+//# sourceMappingURL=index.js.map