react-fresh-key 0.1.0

package/templates/js/utils.js

@@ -0,0 +1,95 @@
+// react-fresh-key v0.1.0 — vendored copy (JavaScript).
+// This file is yours now: edit it freely. Docs: https://www.npmjs.com/package/react-fresh-key
+/*!
+MIT License
+
+Copyright (c) 2026 Rafael Buzatto de Campos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+function isPlainObject(value) {
+    if (value === null || typeof value !== 'object')
+        return false;
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+/** An `Array` proper — not a subclass, which is treated as a class instance. */
+function isOrdinaryArray(value) {
+    return Array.isArray(value) && Object.getPrototypeOf(value) === Array.prototype;
+}
+/** Own enumerable keys, including symbol keys (which `Object.keys` omits). */
+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;
+}
+/** Shallow-compare two objects: same own enumerable keys, `Object.is` per value. */
+export 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;
+}
+/**
+ * Equality for a single watched value: `Object.is`, except that two *plain*
+ * objects (`{}` / `Object.create(null)`) or two ordinary arrays are compared
+ * one level deep — every own enumerable property, symbol keys included, plus
+ * array length. This lets the common inline-literal shapes converge —
+ * `useRemountKey([{ id }])`, `useRemountKeyWhen({ id, tab }, …)` — without
+ * hiding real changes. Anything else (class instances, including `Array`
+ * subclasses; Map/Set; Date; functions; nested objects' inner values) is
+ * compared by identity.
+ */
+export 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;
+}
+/** Compare two dependency lists element-wise with {@link isEqualDep}. */
+export 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;
+}
+/** Normalize a selector result into a deps list. */
+export function toDeps(value) {
+    return Array.isArray(value) ? value : [value];
+}

package/templates/js/withRemount.jsx

@@ -0,0 +1,162 @@
+// react-fresh-key v0.1.0 — vendored copy (JavaScript).
+// This file is yours now: edit it freely. Docs: https://www.npmjs.com/package/react-fresh-key
+/*!
+MIT License
+
+Copyright (c) 2026 Rafael Buzatto de Campos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+import { forwardRef, useState, } from 'react';
+import { areDepsEqual, shallowEqual, toDeps } from './utils';
+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 }.');
+}
+const REACT_MEMO_TYPE = Symbol.for('react.memo');
+/**
+ * `memo(C)` is an object `{ $$typeof, type: C }`; React applies the *inner*
+ * component's `defaultProps` when it renders, and `JSX.LibraryManagedAttributes`
+ * unwraps `memo` the same way. Mirror both so types and runtime agree.
+ * (`lazy` cannot be unwrapped before it loads; see {@link RemountedProps}.)
+ */
+function unwrapMemo(Component) {
+    let current = Component;
+    while (current !== null &&
+        typeof current === 'object' &&
+        current.$$typeof === REACT_MEMO_TYPE) {
+        current = current.type;
+    }
+    return current;
+}
+/**
+ * Apply `defaultProps` the way React does (a default fills in only when the
+ * prop is `undefined`). Returns the same object when nothing needs filling.
+ */
+function makeDefaultsResolver(Component) {
+    const defaults = unwrapMemo(Component)
+        ?.defaultProps;
+    if (!defaults)
+        return (props) => props;
+    const keys = Object.keys(defaults);
+    return (props) => {
+        let resolved = null;
+        for (const key of keys) {
+            if (props[key] === undefined) {
+                resolved ?? (resolved = { ...props });
+                resolved[key] = defaults[key];
+            }
+        }
+        return (resolved ?? props);
+    };
+}
+/**
+ * Single-useState implementation so the hook order is identical for both
+ * modes, with the raw `props` object as the convergence anchor: after a
+ * render-phase setState, React re-invokes the component with the *same*
+ * props object, so the comparison branch is skipped on that second pass.
+ * That makes the derivation converge even when a selector returns a fresh
+ * object on every call (it remounts once per props change instead of looping).
+ */
+function useWatchKey(props, spec, resolve) {
+    const [state, setState] = useState(() => ({
+        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;
+            }
+            // Unchanged: leave the snapshot alone (no extra render pass).
+        }
+        else if (!shallowEqual(state.props, props)) {
+            // Only consult the predicate when props actually changed (shallow),
+            // so parent re-renders with identical props stay single-pass.
+            const key = spec.when(resolve(state.props), resolve(props)) ? state.key + 1 : state.key;
+            setState({ props, deps: null, key });
+            return key;
+        }
+    }
+    return state.key;
+}
+/**
+ * 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 }`.
+ */
+export function withRemount(Component, watch) {
+    const spec = normalizeWatch(watch);
+    const resolve = makeDefaultsResolver(Component);
+    const Inner = Component;
+    const Wrapped = forwardRef((props, ref) => {
+        const key = useWatchKey(props, spec, resolve);
+        return <Inner key={key} ref={ref} {...props}/>;
+    });
+    const name = Component.displayName ?? Component.name ?? 'Component';
+    Wrapped.displayName = `withRemount(${name})`;
+    return Wrapped;
+}

package/templates/ts/Remount.tsx

@@ -0,0 +1,103 @@
+// react-fresh-key v0.1.0 — vendored copy (TypeScript).
+// This file is yours now: edit it freely. Docs: https://www.npmjs.com/package/react-fresh-key
+/*!
+MIT License
+
+Copyright (c) 2026 Rafael Buzatto de Campos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+import { Fragment, type ReactElement, type ReactNode } from 'react'
+import { useRemountKey, useRemountKeyWhen } from './useRemountKey'
+import type { DepsList } from './utils'
+
+/** Dependency-list mode for {@link Remount}; do not combine with `watch` or `when`. */
+export 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`. */
+export 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. */
+export type RemountProps<T = unknown> = RemountDepsProps | RemountWhenProps<T>
+
+const alwaysFalse = () => false
+
+/**
+ * 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.
+ */
+export function Remount<T = unknown>(props: RemountProps<T>): ReactElement {
+  const usingWhen = typeof props.when === 'function'
+  // Both hooks run unconditionally so the hook order is stable even if a
+  // caller (incorrectly) switches modes between renders.
+  const depsKey = useRemountKey(usingWhen ? [] : (props.deps ?? []))
+  const whenKey = useRemountKeyWhen(
+    usingWhen ? (props.watch as T) : (undefined as T),
+    usingWhen ? (props.when as (prev: T, next: T) => boolean) : alwaysFalse
+  )
+  const key = usingWhen ? whenKey : depsKey
+  return <Fragment key={`remount-${key}`}>{props.children}</Fragment>
+}

package/templates/ts/ResetBoundary.tsx

@@ -0,0 +1,256 @@
+// react-fresh-key v0.1.0 — vendored copy (TypeScript).
+// This file is yours now: edit it freely. Docs: https://www.npmjs.com/package/react-fresh-key
+/*!
+MIT License
+
+Copyright (c) 2026 Rafael Buzatto de Campos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+import {
+  Fragment,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+
+const ResetContext = createContext<(() => void) | null>(null)
+
+/** Props for the shared, zero-argument {@link ResetBoundary}. */
+export 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.
+ */
+export 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}. */
+export 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]
+
+// Infer the intersection through function parameters: a dynamic key needs a
+// payload valid for every possible action. A union of callable signatures
+// alone would incorrectly allow omitting required data when one key is void.
+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.
+   */
+  // biome-ignore lint/style/useShorthandFunctionType: Signature-level JSDoc supplies editor help for the returned reset function.
+  (...args: ResetArgs<RegistrationPayload<Events, Key>>): void
+}
+
+function useResetRequest<Args extends unknown[]>(onReset: ((...args: Args) => void) | undefined) {
+  const [generation, setGeneration] = useState(0)
+  const onResetRef = useRef(onReset)
+  useEffect(() => {
+    onResetRef.current = onReset
+  })
+
+  const request = useCallback((...args: Args) => {
+    setGeneration((g) => g + 1)
+    onResetRef.current?.(...args)
+  }, [])
+
+  return { generation, request }
+}
+
+/**
+ * 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}.
+ */
+export function ResetBoundary({ children, onReset }: ResetBoundaryProps): ReactElement {
+  const { generation, request } = useResetRequest(onReset)
+  // Preserve the zero-argument API, including when used as onClick={reset}.
+  const reset = useCallback(() => request(), [request])
+
+  return (
+    <ResetContext.Provider value={reset}>
+      <Fragment key={`reset-${generation}`}>{children}</Fragment>
+    </ResetContext.Provider>
+  )
+}
+
+/**
+ * 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.
+ */
+export function useResetBoundary(): () => void {
+  const reset = useContext(ResetContext)
+  if (reset === null) {
+    throw new Error('react-fresh-key: useResetBoundary must be used inside a <ResetBoundary>.')
+  }
+  return reset
+}
+
+/**
+ * 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.
+ */
+export 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.
+     */
+    // biome-ignore lint/style/useShorthandFunctionType: Signature-level JSDoc preserves editor help when the boundary is aliased.
+    (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.
+     */
+    // biome-ignore lint/style/useShorthandFunctionType: Signature-level JSDoc preserves editor help when the hook is aliased.
+    <Key extends keyof Events>(key: Key): RegisteredReset<Events, Key>
+  }
+} {
+  const Context = createContext<((event: ResetEvent<Events>) => void) | null>(null)
+
+  /**
+   * Provides this factory's reset scope; its subtree remounts when the matching hook requests it.
+   * @param props - Children and optional synchronous `onReset` request observer.
+   */
+  function TypedResetBoundary({
+    children,
+    onReset,
+  }: TypedResetBoundaryProps<Events>): ReactElement {
+    const { generation, request } = useResetRequest(onReset)
+    return (
+      <Context.Provider value={request}>
+        <Fragment key={`reset-${generation}`}>{children}</Fragment>
+      </Context.Provider>
+    )
+  }
+
+  /**
+   * Selects a reset action from the nearest boundary created by this factory.
+   * @param key - Registration key included in each request's `{ key, payload }` event.
+   * @returns A reset callback stable while the key and provider are unchanged.
+   * @throws If no boundary from this factory is above the caller.
+   */
+  function useRegisteredReset<Key extends keyof Events>(key: Key): RegisteredReset<Events, Key> {
+    const request = useContext(Context)
+    const reset = useCallback(
+      /**
+       * Requests a remount and forwards this registration's key and payload to `onReset`.
+       * @param payload - Request metadata forwarded unchanged to the matching boundary.
+       */
+      (payload?: Events[Key]) => {
+        // The public signature relates each key to its own payload. TypeScript
+        // cannot express that correlation when constructing a generic union.
+        request?.({ key, payload } as ResetEvent<Events>)
+      },
+      [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 as RegisteredReset<Events, Key>
+  }
+
+  return { ResetBoundary: TypedResetBoundary, useResetBoundary: useRegisteredReset }
+}