@timber-js/app 0.2.0-alpha.13 → 0.2.0-alpha.132

package/src/client/link-pending-store.ts

@@ -0,0 +1,116 @@
+/**
+ * Link Pending Store — per-link pending state.
+ *
+ * Tracks which link instance is currently navigating so that only the
+ * clicked link shows pending. Uses useState in Link — the pending
+ * state is set as an urgent update (outside startTransition) so it
+ * shows immediately, then reset inside the transition so it commits
+ * atomically with the new tree.
+ *
+ * Flow:
+ * 1. Link click → setLinkForCurrentNavigation(instance) stores the ref
+ * 2. NavigationRoot → activateLinkPending() calls
+ *    instance.setIsPending(LINK_PENDING) as an urgent update
+ * 3. Inside startTransition → resetLinkPending() commits with new tree
+ *
+ * SINGLETON GUARANTEE: Uses `globalThis` via `Symbol.for` keys because
+ * the RSC client bundler can duplicate this module across chunks.
+ *
+ * See design/19-client-navigation.md §"Per-Link Pending State"
+ */
+
+import type { LinkStatus } from './use-link-status.js';
+
+// ─── Types ───────────────────────────────────────────────────────
+
+export interface LinkPendingInstance {
+  setIsPending: (status: LinkStatus) => void;
+}
+
+// ─── Constants ───────────────────────────────────────────────────
+
+const LINK_PENDING_KEY = Symbol.for('__timber_link_pending');
+
+/** Status object: link navigation in flight */
+export const LINK_PENDING: LinkStatus = { isPending: true };
+
+/** Status object: link idle */
+export const LINK_IDLE: LinkStatus = { isPending: false };
+
+// ─── Singleton Storage ───────────────────────────────────────────
+
+function getStore(): { current: LinkPendingInstance | null } {
+  const g = globalThis as Record<symbol, unknown>;
+  if (!g[LINK_PENDING_KEY]) {
+    g[LINK_PENDING_KEY] = { current: null };
+  }
+  return g[LINK_PENDING_KEY] as { current: LinkPendingInstance | null };
+}
+
+// ─── Public API ──────────────────────────────────────────────────
+
+/**
+ * Register the link instance that initiated the current navigation.
+ * Called from Link's click handler. Does NOT call setIsPending —
+ * that happens via activateLinkPending() called from NavigationRoot.
+ *
+ * Resets the previous link to idle immediately if a different link
+ * is being registered (handles overlapping link clicks).
+ */
+export function setLinkForCurrentNavigation(link: LinkPendingInstance | null): void {
+  const store = getStore();
+  if (store.current && store.current !== link) {
+    store.current.setIsPending(LINK_IDLE);
+  }
+  store.current = link;
+}
+
+/**
+ * Activate pending state on the current link instance.
+ * Called as an urgent update (outside startTransition) so the link
+ * shows pending immediately. The corresponding resetLinkPending()
+ * is called inside the transition so it commits atomically with
+ * the new tree.
+ */
+export function activateLinkPending(): void {
+  const store = getStore();
+  store.current?.setIsPending(LINK_PENDING);
+}
+
+/**
+ * Reset the current link's pending state and clear the store.
+ * Call inside startTransition so the reset commits atomically
+ * with the new tree (no frame where pending=false but old content
+ * is still visible).
+ */
+export function resetLinkPending(): void {
+  const store = getStore();
+  if (store.current) {
+    store.current.setIsPending(LINK_IDLE);
+    store.current = null;
+  }
+}
+
+/**
+ * @deprecated No longer needed with useOptimistic. Kept for callers.
+ */
+export function getCurrentNavId(): number {
+  return 0;
+}
+
+/**
+ * Clean up the link pending store entirely.
+ */
+export function clearLinkPendingSetter(): void {
+  getStore().current = null;
+}
+
+/**
+ * Unmount a link instance from navigation tracking.
+ */
+export function unmountLinkForCurrentNavigation(link: LinkPendingInstance): void {
+  const store = getStore();
+  if (store.current === link) {
+    store.current = null;
+  }
+}

package/src/client/link.tsx

@@ -18,10 +18,41 @@
 // - params and fully-resolved string href are mutually exclusive
 // - searchParams and inline query string are mutually exclusive
 
-import type { AnchorHTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react';
-import type { SearchParamsDefinition } from '#/search-params/create.js';
-import { LinkStatusProvider } from './link-status-provider.js';
+import {
+  useTransition,
+  type AnchorHTMLAttributes,
+  type ReactNode,
+  type MouseEvent as ReactMouseEvent,
+} from 'react';
+import type { SearchParamsDefinition } from '../search-params/define.js';
+import { getSearchParamsDefinition } from '../search-params/registry.js';
+import type { LinkFunction } from './index.js';
+import { classifyUrlSegment, type UrlSegment } from '../routing/segment-classify.js';
+import { LinkStatusContext } from './use-link-status.js';
 import { getRouterOrNull } from './router-ref.js';
+import { getSsrData } from './ssr-data.js';
+import { mergePreservedSearchParams } from '../shared/merge-search-params.js';
+import { getLinkCodec } from '../params/codec-registry.js';
+import type { LinkStatus } from './use-link-status.js';
+
+const LINK_PENDING: LinkStatus = { isPending: true };
+const LINK_IDLE: LinkStatus = { isPending: false };
+
+// ─── Current Search Params ────────────────────────────────────────
+
+/**
+ * Read the current URL's search string without requiring a React hook.
+ * On the client, reads window.location.search. During SSR, reads from
+ * the request context (getSsrData). Returns empty string if unavailable.
+ */
+function getCurrentSearch(): string {
+  if (typeof window !== 'undefined') return window.location.search;
+  const data = getSsrData();
+  if (!data) return '';
+  const sp = new URLSearchParams(data.searchParams);
+  const str = sp.toString();
+  return str ? `?${str}` : '';
+}
 
 // ─── Types ───────────────────────────────────────────────────────
 
@@ -33,8 +64,12 @@ export type OnNavigateHandler = (e: OnNavigateEvent) => void;
 
 /**
  * Base props shared by all Link variants.
+ *
+ * Exported so the public `LinkFunction` interface (declared in
+ * `./index.ts`, where module augmentation can merge into it) can
+ * compose this without duplication.
  */
-interface LinkBaseProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+export interface LinkBaseProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
   /** Prefetch the RSC payload on hover */
   prefetch?: boolean;
   /**
@@ -42,6 +77,20 @@ interface LinkBaseProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'h
    * Set to false for tabbed interfaces where content changes within a fixed layout.
    */
   scroll?: boolean;
+  /**
+   * Preserve search params from the current URL across navigation.
+   *
+   * - `true` — preserve ALL current search params (target params take precedence)
+   * - `string[]` — preserve only the named params (e.g. `['private', 'token']`)
+   *
+   * Useful for route-group gating where a search param (e.g. `?private=access`)
+   * must persist across internal navigations. The target href's own search params
+   * always take precedence over preserved ones.
+   *
+   * During SSR, reads search params from the request context. On the client,
+   * reads from the current URL and updates reactively when the URL changes.
+   */
+  preserveSearchParams?: true | string[];
   /**
    * Called before client-side navigation commits. Call `e.preventDefault()`
    * to cancel the default navigation — the caller is then responsible for
@@ -54,48 +103,70 @@ interface LinkBaseProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'h
   children?: ReactNode;
 }
 
+// ─── Typed Link Props ────────────────────────────────────────────
+
 /**
- * Link with a fully-resolved string href.
- * When using a string href with params already interpolated,
- * the params prop is not available.
+ * Widen server-side string params to string | number for Link convenience.
+ * Exported for use by codegen-generated overloads.
  */
-export interface LinkPropsWithHref extends LinkBaseProps {
-  href: string;
-  params?: never;
-  /**
-   * Typed search params — serialized via the route's SearchParamsDefinition.
-   * Mutually exclusive with an inline query string in href.
-   */
-  searchParams?: {
-    definition: SearchParamsDefinition<Record<string, unknown>>;
-    values: Record<string, unknown>;
-  };
-}
+export type LinkSegmentParams<T> = {
+  [K in keyof T]: [string] extends [T[K]] ? string | number : T[K];
+};
+
+// ─── External Href Types ─────────────────────────────────────────
+//
+// `ExternalHref` and the public `LinkFunction` interface live in
+// `./index.ts` rather than this file. They MUST be originally declared
+// in the same module that the codegen augments (`@timber-js/app/client`)
+// so that codegen-generated per-route call signatures merge with the
+// same interface that types the `Link` constant. Re-exporting an
+// interface via `export type {}` does NOT participate in module
+// augmentation merging — only originally-declared interfaces do.
+// See TIM-624.
+
+// ─── searchParams prop shapes ────────────────────────────────────
+//
+// Per-route Link overloads (emitted by codegen) pass the flat values shape:
+//     searchParams={{ page: 2, q: 'boots' }}
+// The framework looks up the route's SearchParamsDefinition from the
+// search-params registry at runtime (see TIM-830).
+//
+// The catch-all overload in client/index.ts (external/computed hrefs)
+// additionally accepts the legacy wrapped shape:
+//     searchParams={{ definition: def, values: { page: 2 } }}
+// because there is no way to look up a definition from a computed string.
+//
+// `resolveHref` discriminates at runtime by presence of a `definition` key.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ParamValue = string | number | string[] | { toString(): string; [key: string]: any };
+
+type WrappedSearchParamsProp = {
+  definition: SearchParamsDefinition<Record<string, unknown>>;
+  values: Record<string, unknown>;
+};
+type FlatSearchParamsProp = Record<string, unknown>;
+type LinkSearchParamsProp = WrappedSearchParamsProp | FlatSearchParamsProp;
 
 /**
- * Link with a route pattern + params for interpolation.
- * e.g. <Link href="/products/[id]" params={{ id: "123" }}>
- *      <Link href="/products/[id]" params={{ id: 123 }}>
+ * Runtime-only loose props used internally by the Link implementation.
+ * Not exposed to callers — the public API uses LinkFunction.
  */
-export interface LinkPropsWithParams extends LinkBaseProps {
-  /** Route pattern with dynamic segments (e.g. "/products/[id]") */
+interface LinkRuntimeProps extends LinkBaseProps {
   href: string;
-  /**
-   * Dynamic segment values to interpolate into the href.
-   * Single dynamic segments accept string | number (numbers are stringified).
-   * Catch-all segments accept string[].
-   */
-  params: Record<string, string | number | string[]>;
-  /**
-   * Typed search params — serialized via the route's SearchParamsDefinition.
-   */
-  searchParams?: {
-    definition: SearchParamsDefinition<Record<string, unknown>>;
-    values: Record<string, unknown>;
-  };
+  segmentParams?: Record<string, ParamValue>;
+  searchParams?: LinkSearchParamsProp;
 }
 
-export type LinkProps = LinkPropsWithHref | LinkPropsWithParams;
+// Legacy exports for backward compat (used by buildLinkProps, tests, etc.)
+export type LinkPropsWithHref = LinkBaseProps & {
+  href: string;
+  segmentParams?: never;
+  searchParams?: LinkSearchParamsProp;
+};
+export type LinkPropsWithParams = LinkRuntimeProps & {
+  segmentParams: Record<string, ParamValue>;
+};
+export type LinkProps = LinkRuntimeProps;
 
 // ─── Dangerous URL Scheme Detection ──────────────────────────────
 
@@ -141,57 +212,111 @@ export function isInternalHref(href: string): boolean {
  * - [...param]       → catch-all (joined with /)
  * - [[...param]]     → optional catch-all (omitted if undefined/empty)
  */
-export function interpolateParams(
-  pattern: string,
-  params: Record<string, string | number | string[]>
-): string {
-  return (
-    pattern
-      .replace(
-        /\[\[\.\.\.(\w+)\]\]|\[\.\.\.(\w+)\]|\[(\w+)\]/g,
-        (_match, optionalCatchAll, catchAll, single) => {
-          if (optionalCatchAll) {
-            const value = params[optionalCatchAll];
-            if (value === undefined || (Array.isArray(value) && value.length === 0)) {
-              return '';
-            }
-            const segments = Array.isArray(value) ? value : [value];
-            return segments.map(encodeURIComponent).join('/');
-          }
+/**
+ * Parse a route pattern's path portion into classified segments.
+ * Exported for testing. Uses the shared character-based classifier.
+ */
+export function parseSegments(pattern: string): UrlSegment[] {
+  return pattern.split('/').filter(Boolean).map(classifyUrlSegment);
+}
 
-          if (catchAll) {
-            const value = params[catchAll];
-            if (value === undefined) {
-              throw new Error(
-                `<Link> missing required catch-all param "${catchAll}" for pattern "${pattern}".`
-              );
-            }
-            const segments = Array.isArray(value) ? value : [value];
-            if (segments.length === 0) {
-              throw new Error(
-                `<Link> catch-all param "${catchAll}" must have at least one segment for pattern "${pattern}".`
-              );
-            }
-            return segments.map(encodeURIComponent).join('/');
-          }
+/**
+ * Resolve a single classified segment into its string representation.
+ * Returns null for optional catch-all with no value (filtered out before join).
+ *
+ * When schema codecs are registered (via virtual:timber-schema), uses
+ * codec.serialize() for URL construction instead of plain String().
+ */
+function resolveSegment(
+  seg: UrlSegment,
+  params: Record<string, ParamValue>,
+  pattern: string
+): string | null {
+  switch (seg.kind) {
+    case 'static':
+      return seg.value;
+
+    case 'optional-catch-all': {
+      const value = params[seg.name];
+      if (value === undefined || (Array.isArray(value) && value.length === 0)) {
+        return null;
+      }
+      const codec = getLinkCodec(`[[...${seg.name}]]`);
+      if (codec) {
+        const serialized = codec.serialize(value);
+        if (!serialized) return null;
+        // Codec returns a path string (may contain '/') — encode each segment
+        return serialized.split('/').map(encodeURIComponent).join('/');
+      }
+      const segments = Array.isArray(value) ? value : [value];
+      return segments.map(encodeURIComponent).join('/');
+    }
 
-          // single dynamic segment
-          const value = params[single];
-          if (value === undefined) {
-            throw new Error(`<Link> missing required param "${single}" for pattern "${pattern}".`);
-          }
-          if (Array.isArray(value)) {
-            throw new Error(
-              `<Link> param "${single}" expected a string but received an array for pattern "${pattern}".`
-            );
-          }
-          // Accept numbers — coerce to string for URL interpolation
-          return encodeURIComponent(String(value));
+    case 'catch-all': {
+      const value = params[seg.name];
+      if (value === undefined) {
+        throw new Error(
+          `<Link> missing required catch-all param "${seg.name}" for pattern "${pattern}".`
+        );
+      }
+      const codec = getLinkCodec(`[...${seg.name}]`);
+      if (codec) {
+        const serialized = codec.serialize(value);
+        if (!serialized) {
+          throw new Error(
+            `<Link> catch-all param "${seg.name}" codec returned null for pattern "${pattern}".`
+          );
         }
-      )
-      // Clean up trailing slash from empty optional catch-all
-      .replace(/\/+$/, '') || '/'
-  );
+        // Codec returns a path string (may contain '/') — encode each segment
+        return serialized.split('/').map(encodeURIComponent).join('/');
+      }
+      const segments = Array.isArray(value) ? value : [value];
+      if (segments.length === 0) {
+        throw new Error(
+          `<Link> catch-all param "${seg.name}" must have at least one segment for pattern "${pattern}".`
+        );
+      }
+      return segments.map(encodeURIComponent).join('/');
+    }
+
+    case 'dynamic': {
+      const value = params[seg.name];
+      if (value === undefined) {
+        throw new Error(`<Link> missing required param "${seg.name}" for pattern "${pattern}".`);
+      }
+      if (Array.isArray(value)) {
+        throw new Error(
+          `<Link> param "${seg.name}" expected a string but received an array for pattern "${pattern}".`
+        );
+      }
+      const codec = getLinkCodec(`[${seg.name}]`);
+      const str = codec ? (codec.serialize(value) ?? String(value)) : String(value);
+      return encodeURIComponent(str);
+    }
+  }
+}
+
+/**
+ * Split a URL pattern into the path portion and any trailing ?query/#hash suffix.
+ * Uses URL parsing for correctness rather than manual index arithmetic.
+ */
+function splitPatternSuffix(pattern: string): [path: string, suffix: string] {
+  if (!pattern.includes('?') && !pattern.includes('#')) {
+    return [pattern, ''];
+  }
+  const url = new URL(pattern, 'http://x');
+  const suffix = url.search + url.hash;
+  const path = pattern.slice(0, pattern.length - suffix.length);
+  return [path, suffix];
+}
+
+export function interpolateParams(pattern: string, params: Record<string, ParamValue>): string {
+  const [pathPart, suffix] = splitPatternSuffix(pattern);
+
+  const resolved = parseSegments(pathPart)
+    .map((seg) => resolveSegment(seg, params, pattern))
+    .filter((s): s is string => s !== null);
+  return ('/' + resolved.join('/') || '/') + suffix;
 }
 
 // ─── Resolve Href ───────────────────────────────────────────────
@@ -204,13 +329,19 @@ export function interpolateParams(
  * - searchParams serialization via SearchParamsDefinition
  * - Validation that searchParams and inline query strings are exclusive
  */
+/**
+ * Runtime discriminator: treat `searchParams` as the legacy wrapped shape
+ * only when it literally has a `definition` key. Everything else is the
+ * flat `Partial<T>` values shape (TIM-830).
+ */
+function isWrappedSearchParamsProp(sp: LinkSearchParamsProp): sp is WrappedSearchParamsProp {
+  return 'definition' in sp;
+}
+
 export function resolveHref(
   href: string,
-  params?: Record<string, string | number | string[]>,
-  searchParams?: {
-    definition: SearchParamsDefinition<Record<string, unknown>>;
-    values: Record<string, unknown>;
-  }
+  params?: Record<string, ParamValue>,
+  searchParams?: LinkSearchParamsProp
 ): string {
   let resolvedPath = href;
 
@@ -229,9 +360,46 @@ export function resolveHref(
       );
     }
 
-    const qs = searchParams.definition.serialize(searchParams.values);
-    if (qs) {
-      resolvedPath = `${resolvedPath}?${qs}`;
+    let definition: SearchParamsDefinition<Record<string, unknown>> | undefined;
+    let values: Record<string, unknown>;
+
+    if (isWrappedSearchParamsProp(searchParams)) {
+      // Legacy wrapped shape — used by the catch-all overload for
+      // computed/external hrefs where no route lookup is possible.
+      definition = searchParams.definition;
+      values = searchParams.values;
+    } else {
+      // Flat shape (TIM-830): look up the definition from the runtime
+      // registry using the un-interpolated href pattern (e.g. '/products/[id]').
+      // The search-params registry is populated eagerly at startup by the
+      // virtual:timber-search-params-registry module generated by the
+      // timber-routing Vite plugin.
+      definition = getSearchParamsDefinition(href) as
+        | SearchParamsDefinition<Record<string, unknown>>
+        | undefined;
+      values = searchParams;
+    }
+
+    if (definition) {
+      const qs = definition.serialize(values);
+      if (qs) {
+        resolvedPath = `${resolvedPath}?${qs}`;
+      }
+    } else {
+      // No registered definition — serialize flat object as plain query params.
+      const usp = new URLSearchParams();
+      for (const [key, val] of Object.entries(values)) {
+        if (val === undefined || val === null) continue;
+        if (Array.isArray(val)) {
+          for (const item of val) usp.append(key, String(item));
+        } else {
+          usp.set(key, String(val));
+        }
+      }
+      const qs = usp.toString();
+      if (qs) {
+        resolvedPath = `${resolvedPath}?${qs}`;
+      }
     }
   }
 
@@ -250,11 +418,8 @@ interface LinkOutputProps {
  */
 export function buildLinkProps(
   props: Pick<LinkPropsWithHref, 'href'> & {
-    params?: Record<string, string | number | string[]>;
-    searchParams?: {
-      definition: SearchParamsDefinition<Record<string, unknown>>;
-      values: Record<string, unknown>;
-    };
+    params?: Record<string, ParamValue>;
+    searchParams?: LinkSearchParamsProp;
   }
 ): LinkOutputProps {
   const resolvedHref = resolveHref(props.href, props.params, props.searchParams);
@@ -302,23 +467,52 @@ function shouldInterceptClick(
  * navigation via the router. No global event delegation — each Link owns
  * its own click handling.
  *
- * Supports typed routes via codegen overloads. At runtime:
- * - `params` prop interpolates dynamic segments in the href pattern
+ * Supports typed routes via the Routes interface (populated by codegen).
+ * At runtime:
+ * - `segmentParams` prop interpolates dynamic segments in the href pattern
  * - `searchParams` prop serializes query parameters via a SearchParamsDefinition
+ *
+ * Typed via the LinkFunction callable interface. The base call signature
+ * forbids segmentParams; per-route signatures are added by codegen via
+ * interface merging. See TIM-624.
  */
-export function Link({
-  href,
-  prefetch,
-  scroll,
-  params,
-  searchParams,
-  onNavigate,
-  onClick: userOnClick,
-  onMouseEnter: userOnMouseEnter,
-  children,
-  ...rest
-}: LinkProps) {
-  const { href: resolvedHref } = buildLinkProps({ href, params, searchParams });
+// Cast to LinkFunction — the callable interface provides the public type,
+// but the implementation destructures LinkRuntimeProps internally.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Link: LinkFunction = function LinkImpl(props: any) {
+  const {
+    href,
+    prefetch,
+    scroll,
+    segmentParams,
+    searchParams,
+    preserveSearchParams,
+    onNavigate,
+    onClick: userOnClick,
+    onMouseEnter: userOnMouseEnter,
+    children,
+    ...rest
+  } = props as LinkRuntimeProps;
+  const { href: baseHref } = buildLinkProps({ href, params: segmentParams, searchParams });
+
+  // ─── Per-link pending state ─────────────────────────────────────────
+  // Each Link owns a useTransition. On click, it wraps
+  // router.navigate() in startTransition — only this Link re-renders
+  // for isPending, zero siblings touched. The transition tracks the
+  // full navigation lifecycle (fetch + render + commit).
+  const [isPending, startTransition] = useTransition();
+  const linkStatus = isPending ? LINK_PENDING : LINK_IDLE;
+
+  // Preserve search params from the current URL when requested.
+  // useSearchParams() works during both SSR (reads from request context)
+  // and on the client (reads from window.location, reactive to URL changes).
+  // We read current search params directly to avoid unconditional hook calls.
+  // On the client, window.location.search is always current; during SSR,
+  // getSsrData() provides the request's search params.
+  const resolvedHref = preserveSearchParams
+    ? mergePreservedSearchParams(baseHref, getCurrentSearch(), preserveSearchParams)
+    : baseHref;
+
   const internal = isInternalHref(resolvedHref);
 
   // ─── Click handler ───────────────────────────────────────────
@@ -347,11 +541,30 @@ export function Link({
         }
 
         const router = getRouterOrNull();
-        if (!router) return; // SSR or pre-hydration — fall through to browser nav
+        if (!router) return;
+
+        const navHref = preserveSearchParams
+          ? mergePreservedSearchParams(baseHref, getCurrentSearch(), preserveSearchParams)
+          : resolvedHref;
+
+        const resolved = new URL(navHref, window.location.href);
+
+        if (
+          resolved.pathname === window.location.pathname &&
+          resolved.search === window.location.search &&
+          resolved.hash
+        ) {
+          return;
+        }
 
         event.preventDefault();
+
         const shouldScroll = scroll !== false;
-        void router.navigate(resolvedHref, { scroll: shouldScroll });
+        const absoluteHref = resolved.pathname + resolved.search;
+
+        startTransition(async () => {
+          await router.navigate(absoluteHref, { scroll: shouldScroll });
+        });
       }
     : userOnClick; // External links — just pass through user's onClick
 
@@ -362,14 +575,18 @@ export function Link({
           userOnMouseEnter?.(event);
           const router = getRouterOrNull();
           if (router) {
-            router.prefetch(resolvedHref);
+            const prefetchHref = preserveSearchParams
+              ? mergePreservedSearchParams(baseHref, getCurrentSearch(), preserveSearchParams)
+              : resolvedHref;
+            const resolved = new URL(prefetchHref, window.location.href);
+            router.prefetch(resolved.pathname + resolved.search);
           }
         }
       : userOnMouseEnter;
 
   return (
     <a {...rest} href={resolvedHref} onClick={handleClick} onMouseEnter={handleMouseEnter}>
-      <LinkStatusProvider href={resolvedHref}>{children}</LinkStatusProvider>
+      <LinkStatusContext.Provider value={linkStatus}>{children}</LinkStatusContext.Provider>
     </a>
   );
-}
+};