@depup/tanstack__react-router 1.166.4-depup.0

package/dist/esm/ClientOnly.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export interface ClientOnlyProps {
+    /**
+     * The children to render when the JS is loaded.
+     */
+    children: React.ReactNode;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: React.ReactNode;
+}
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     <Chart />
+ *   </ClientOnly>
+ * )
+ * ```
+ */
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * let hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+export declare function useHydrated(): boolean;

package/dist/esm/ClientOnly.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+function ClientOnly({ children, fallback = null }) {
+  return useHydrated() ? /* @__PURE__ */ jsx(React__default.Fragment, { children }) : /* @__PURE__ */ jsx(React__default.Fragment, { children: fallback });
+}
+function useHydrated() {
+  return React__default.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+export {
+  ClientOnly,
+  useHydrated
+};
+//# sourceMappingURL=ClientOnly.js.map

package/dist/esm/ClientOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when the JS is loaded.\n   */\n  children: React.ReactNode\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n *   <ClientOnly fallback={<FakeChart />}>\n *     <Chart />\n *   </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n  return useHydrated() ? (\n    <React.Fragment>{children}</React.Fragment>\n  ) : (\n    <React.Fragment>{fallback}</React.Fragment>\n  )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n *   <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n *     Click me\n *   </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): boolean {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  )\n}\n\nfunction subscribe() {\n  return () => {}\n}\n"],"names":["React"],"mappings":";;AA8BO,SAAS,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,SAAO,YAAA,IACL,oBAACA,eAAM,UAAN,EAAgB,SAAA,CAAS,IAE1B,oBAACA,eAAM,UAAN,EAAgB,UAAA,SAAA,CAAS;AAE9B;AAqBO,SAAS,cAAuB;AACrC,SAAOA,eAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;"}

package/dist/esm/HeadContent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Render route-managed head tags (title, meta, links, styles, head scripts).
+ * Place inside the document head of your app shell.
+ * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
+ */
+export declare function HeadContent(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/HeadContent.dev.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Render route-managed head tags (title, meta, links, styles, head scripts).
+ * Place inside the document head of your app shell.
+ *
+ * Development version: filters out dev styles link after hydration and
+ * includes a fallback cleanup effect for hydration mismatch cases.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
+ */
+export declare function HeadContent(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/HeadContent.dev.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createElement } from "react";
+import { Asset } from "./Asset.js";
+import { useRouter } from "./useRouter.js";
+import { useHydrated } from "./ClientOnly.js";
+import { useTags } from "./headContentUtils.js";
+const DEV_STYLES_ATTR = "data-tanstack-router-dev-styles";
+function HeadContent() {
+  const tags = useTags();
+  const router = useRouter();
+  const nonce = router.options.ssr?.nonce;
+  const hydrated = useHydrated();
+  React.useEffect(() => {
+    if (hydrated) {
+      document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
+    }
+  }, [hydrated]);
+  const filteredTags = hydrated ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR]) : tags;
+  return /* @__PURE__ */ jsx(Fragment, { children: filteredTags.map((tag) => /* @__PURE__ */ createElement(Asset, { ...tag, key: `tsr-meta-${JSON.stringify(tag)}`, nonce })) });
+}
+export {
+  HeadContent
+};
+//# sourceMappingURL=HeadContent.dev.js.map

package/dist/esm/HeadContent.dev.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadContent.dev.js","sources":["../../src/HeadContent.dev.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useHydrated } from './ClientOnly'\nimport { useTags } from './headContentUtils'\n\nconst DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n *\n * Development version: filters out dev styles link after hydration and\n * includes a fallback cleanup effect for hydration mismatch cases.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const hydrated = useHydrated()\n\n  // Fallback cleanup for hydration mismatch cases\n  // Runs when hydration completes to remove any orphaned dev styles links from DOM\n  React.useEffect(() => {\n    if (hydrated) {\n      document\n        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)\n        .forEach((el) => el.remove())\n    }\n  }, [hydrated])\n\n  // Filter out dev styles after hydration\n  const filteredTags = hydrated\n    ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])\n    : tags\n\n  return (\n    <>\n      {filteredTags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,kBAAkB;AAWjB,SAAS,cAAc;AAC5B,QAAM,OAAO,QAAA;AACb,QAAM,SAAS,UAAA;AACf,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,QAAM,WAAW,YAAA;AAIjB,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eACG,iBAAiB,QAAQ,eAAe,GAAG,EAC3C,QAAQ,CAAC,OAAO,GAAG,OAAA,CAAQ;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,eAAe,WACjB,KAAK,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,eAAe,CAAC,IAClD;AAEJ,yCAEK,UAAA,aAAa,IAAI,CAAC,QACjB,8BAAC,SAAO,GAAG,KAAK,KAAK,YAAY,KAAK,UAAU,GAAG,CAAC,IAAI,OAAc,CACvE,GACH;AAEJ;"}

package/dist/esm/HeadContent.js

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { createElement } from "react";
+import { Asset } from "./Asset.js";
+import { useRouter } from "./useRouter.js";
+import { useTags } from "./headContentUtils.js";
+function HeadContent() {
+  const tags = useTags();
+  const router = useRouter();
+  const nonce = router.options.ssr?.nonce;
+  return /* @__PURE__ */ jsx(Fragment, { children: tags.map((tag) => /* @__PURE__ */ createElement(Asset, { ...tag, key: `tsr-meta-${JSON.stringify(tag)}`, nonce })) });
+}
+export {
+  HeadContent
+};
+//# sourceMappingURL=HeadContent.js.map

package/dist/esm/HeadContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useTags } from './headContentUtils'\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,cAAc;AAC5B,QAAM,OAAO,QAAA;AACb,QAAM,SAAS,UAAA;AACf,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,yCAEK,UAAA,KAAK,IAAI,CAAC,QACT,8BAAC,SAAO,GAAG,KAAK,KAAK,YAAY,KAAK,UAAU,GAAG,CAAC,IAAI,OAAc,CACvE,GACH;AAEJ;"}

package/dist/esm/Match.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare const Match: React.NamedExoticComponent<{
+    matchId: string;
+}>;
+export declare const MatchInner: React.NamedExoticComponent<{
+    matchId: string;
+}>;
+/**
+ * Render the next child match in the route tree. Typically used inside
+ * a route component to render nested routes.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/outletComponent
+ */
+export declare const Outlet: React.NamedExoticComponent<object>;

package/dist/esm/Match.js

@@ -0,0 +1,238 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import invariant from "tiny-invariant";
+import warning from "tiny-warning";
+import { isNotFound, rootRouteId, createControlledPromise, isRedirect, getLocationChangeInfo } from "@tanstack/router-core";
+import { isServer } from "@tanstack/router-core/isServer";
+import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
+import { useRouterState } from "./useRouterState.js";
+import { useRouter } from "./useRouter.js";
+import { CatchNotFound } from "./not-found.js";
+import { matchContext } from "./matchContext.js";
+import { SafeFragment } from "./SafeFragment.js";
+import { renderRouteNotFound } from "./renderRouteNotFound.js";
+import { ScrollRestoration } from "./scroll-restoration.js";
+import { ClientOnly } from "./ClientOnly.js";
+const Match = React.memo(function MatchImpl({
+  matchId
+}) {
+  const router = useRouter();
+  const matchState = useRouterState({
+    select: (s) => {
+      const matchIndex = s.matches.findIndex((d) => d.id === matchId);
+      const match = s.matches[matchIndex];
+      invariant(
+        match,
+        `Could not find match for matchId "${matchId}". Please file an issue!`
+      );
+      return {
+        routeId: match.routeId,
+        ssr: match.ssr,
+        _displayPending: match._displayPending,
+        resetKey: s.loadedAt,
+        parentRouteId: s.matches[matchIndex - 1]?.routeId
+      };
+    },
+    structuralSharing: true
+  });
+  const route = router.routesById[matchState.routeId];
+  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+  const pendingElement = PendingComponent ? /* @__PURE__ */ jsx(PendingComponent, {}) : null;
+  const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent;
+  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch;
+  const routeNotFoundComponent = route.isRoot ? (
+    // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
+    route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component
+  ) : route.options.notFoundComponent;
+  const resolvedNoSsr = matchState.ssr === false || matchState.ssr === "data-only";
+  const ResolvedSuspenseBoundary = (
+    // If we're on the root route, allow forcefully wrapping in suspense
+    (!route.isRoot || route.options.wrapInSuspense || resolvedNoSsr) && (route.options.wrapInSuspense ?? PendingComponent ?? (route.options.errorComponent?.preload || resolvedNoSsr)) ? React.Suspense : SafeFragment
+  );
+  const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
+  const ResolvedNotFoundBoundary = routeNotFoundComponent ? CatchNotFound : SafeFragment;
+  const ShellComponent = route.isRoot ? route.options.shellComponent ?? SafeFragment : SafeFragment;
+  return /* @__PURE__ */ jsxs(ShellComponent, { children: [
+    /* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: /* @__PURE__ */ jsx(ResolvedSuspenseBoundary, { fallback: pendingElement, children: /* @__PURE__ */ jsx(
+      ResolvedCatchBoundary,
+      {
+        getResetKey: () => matchState.resetKey,
+        errorComponent: routeErrorComponent || ErrorComponent,
+        onCatch: (error, errorInfo) => {
+          if (isNotFound(error)) throw error;
+          warning(false, `Error in route match: ${matchId}`);
+          routeOnCatch?.(error, errorInfo);
+        },
+        children: /* @__PURE__ */ jsx(
+          ResolvedNotFoundBoundary,
+          {
+            fallback: (error) => {
+              if (!routeNotFoundComponent || error.routeId && error.routeId !== matchState.routeId || !error.routeId && !route.isRoot)
+                throw error;
+              return React.createElement(routeNotFoundComponent, error);
+            },
+            children: resolvedNoSsr || matchState._displayPending ? /* @__PURE__ */ jsx(ClientOnly, { fallback: pendingElement, children: /* @__PURE__ */ jsx(MatchInner, { matchId }) }) : /* @__PURE__ */ jsx(MatchInner, { matchId })
+          }
+        )
+      }
+    ) }) }),
+    matchState.parentRouteId === rootRouteId && router.options.scrollRestoration ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(OnRendered, {}),
+      /* @__PURE__ */ jsx(ScrollRestoration, {})
+    ] }) : null
+  ] });
+});
+function OnRendered() {
+  const router = useRouter();
+  const prevLocationRef = React.useRef(
+    void 0
+  );
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      suppressHydrationWarning: true,
+      ref: (el) => {
+        if (el && (prevLocationRef.current === void 0 || prevLocationRef.current.href !== router.latestLocation.href)) {
+          router.emit({
+            type: "onRendered",
+            ...getLocationChangeInfo(router.state)
+          });
+          prevLocationRef.current = router.latestLocation;
+        }
+      }
+    },
+    router.latestLocation.state.__TSR_key
+  );
+}
+const MatchInner = React.memo(function MatchInnerImpl({
+  matchId
+}) {
+  const router = useRouter();
+  const { match, key, routeId } = useRouterState({
+    select: (s) => {
+      const match2 = s.matches.find((d) => d.id === matchId);
+      const routeId2 = match2.routeId;
+      const remountFn = router.routesById[routeId2].options.remountDeps ?? router.options.defaultRemountDeps;
+      const remountDeps = remountFn?.({
+        routeId: routeId2,
+        loaderDeps: match2.loaderDeps,
+        params: match2._strictParams,
+        search: match2._strictSearch
+      });
+      const key2 = remountDeps ? JSON.stringify(remountDeps) : void 0;
+      return {
+        key: key2,
+        routeId: routeId2,
+        match: {
+          id: match2.id,
+          status: match2.status,
+          error: match2.error,
+          invalid: match2.invalid,
+          _forcePending: match2._forcePending,
+          _displayPending: match2._displayPending
+        }
+      };
+    },
+    structuralSharing: true
+  });
+  const route = router.routesById[routeId];
+  const out = React.useMemo(() => {
+    const Comp = route.options.component ?? router.options.defaultComponent;
+    if (Comp) {
+      return /* @__PURE__ */ jsx(Comp, {}, key);
+    }
+    return /* @__PURE__ */ jsx(Outlet, {});
+  }, [key, route.options.component, router.options.defaultComponent]);
+  if (match._displayPending) {
+    throw router.getMatch(match.id)?._nonReactive.displayPendingPromise;
+  }
+  if (match._forcePending) {
+    throw router.getMatch(match.id)?._nonReactive.minPendingPromise;
+  }
+  if (match.status === "pending") {
+    const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
+    if (pendingMinMs) {
+      const routerMatch = router.getMatch(match.id);
+      if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
+        if (!(isServer ?? router.isServer)) {
+          const minPendingPromise = createControlledPromise();
+          routerMatch._nonReactive.minPendingPromise = minPendingPromise;
+          setTimeout(() => {
+            minPendingPromise.resolve();
+            routerMatch._nonReactive.minPendingPromise = void 0;
+          }, pendingMinMs);
+        }
+      }
+    }
+    throw router.getMatch(match.id)?._nonReactive.loadPromise;
+  }
+  if (match.status === "notFound") {
+    invariant(isNotFound(match.error), "Expected a notFound error");
+    return renderRouteNotFound(router, route, match.error);
+  }
+  if (match.status === "redirected") {
+    invariant(isRedirect(match.error), "Expected a redirect error");
+    throw router.getMatch(match.id)?._nonReactive.loadPromise;
+  }
+  if (match.status === "error") {
+    if (isServer ?? router.isServer) {
+      const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent;
+      return /* @__PURE__ */ jsx(
+        RouteErrorComponent,
+        {
+          error: match.error,
+          reset: void 0,
+          info: {
+            componentStack: ""
+          }
+        }
+      );
+    }
+    throw match.error;
+  }
+  return out;
+});
+const Outlet = React.memo(function OutletImpl() {
+  const router = useRouter();
+  const matchId = React.useContext(matchContext);
+  const routeId = useRouterState({
+    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId
+  });
+  const route = router.routesById[routeId];
+  const parentGlobalNotFound = useRouterState({
+    select: (s) => {
+      const matches = s.matches;
+      const parentMatch = matches.find((d) => d.id === matchId);
+      invariant(
+        parentMatch,
+        `Could not find parent match for matchId "${matchId}"`
+      );
+      return parentMatch.globalNotFound;
+    }
+  });
+  const childMatchId = useRouterState({
+    select: (s) => {
+      const matches = s.matches;
+      const index = matches.findIndex((d) => d.id === matchId);
+      return matches[index + 1]?.id;
+    }
+  });
+  const pendingElement = router.options.defaultPendingComponent ? /* @__PURE__ */ jsx(router.options.defaultPendingComponent, {}) : null;
+  if (parentGlobalNotFound) {
+    return renderRouteNotFound(router, route, void 0);
+  }
+  if (!childMatchId) {
+    return null;
+  }
+  const nextMatch = /* @__PURE__ */ jsx(Match, { matchId: childMatchId });
+  if (routeId === rootRouteId) {
+    return /* @__PURE__ */ jsx(React.Suspense, { fallback: pendingElement, children: nextMatch });
+  }
+  return nextMatch;
+});
+export {
+  Match,
+  MatchInner,
+  Outlet
+};
+//# sourceMappingURL=Match.js.map

package/dist/esm/Match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport {\n  createControlledPromise,\n  getLocationChangeInfo,\n  isNotFound,\n  isRedirect,\n  rootRouteId,\n} from '@tanstack/router-core'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { CatchNotFound } from './not-found'\nimport { matchContext } from './matchContext'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { ScrollRestoration } from './scroll-restoration'\nimport { ClientOnly } from './ClientOnly'\nimport type {\n  AnyRoute,\n  ParsedLocation,\n  RootRouteOptions,\n} from '@tanstack/router-core'\n\nexport const Match = React.memo(function MatchImpl({\n  matchId,\n}: {\n  matchId: string\n}) {\n  const router = useRouter()\n  const matchState = useRouterState({\n    select: (s) => {\n      const matchIndex = s.matches.findIndex((d) => d.id === matchId)\n      const match = s.matches[matchIndex]\n      invariant(\n        match,\n        `Could not find match for matchId \"${matchId}\". Please file an issue!`,\n      )\n      return {\n        routeId: match.routeId,\n        ssr: match.ssr,\n        _displayPending: match._displayPending,\n        resetKey: s.loadedAt,\n        parentRouteId: s.matches[matchIndex - 1]?.routeId as string,\n      }\n    },\n    structuralSharing: true as any,\n  })\n\n  const route: AnyRoute = router.routesById[matchState.routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      (route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component)\n    : route.options.notFoundComponent\n\n  const resolvedNoSsr =\n    matchState.ssr === false || matchState.ssr === 'data-only'\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense || resolvedNoSsr) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      ((route.options.errorComponent as any)?.preload || resolvedNoSsr))\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const ShellComponent = route.isRoot\n    ? ((route.options as RootRouteOptions).shellComponent ?? SafeFragment)\n    : SafeFragment\n  return (\n    <ShellComponent>\n      <matchContext.Provider value={matchId}>\n        <ResolvedSuspenseBoundary fallback={pendingElement}>\n          <ResolvedCatchBoundary\n            getResetKey={() => matchState.resetKey}\n            errorComponent={routeErrorComponent || ErrorComponent}\n            onCatch={(error, errorInfo) => {\n              // Forward not found errors (we don't want to show the error component for these)\n              if (isNotFound(error)) throw error\n              warning(false, `Error in route match: ${matchId}`)\n              routeOnCatch?.(error, errorInfo)\n            }}\n          >\n            <ResolvedNotFoundBoundary\n              fallback={(error) => {\n                // If the current not found handler doesn't exist or it has a\n                // route ID which doesn't match the current route, rethrow the error\n                if (\n                  !routeNotFoundComponent ||\n                  (error.routeId && error.routeId !== matchState.routeId) ||\n                  (!error.routeId && !route.isRoot)\n                )\n                  throw error\n\n                return React.createElement(routeNotFoundComponent, error as any)\n              }}\n            >\n              {resolvedNoSsr || matchState._displayPending ? (\n                <ClientOnly fallback={pendingElement}>\n                  <MatchInner matchId={matchId} />\n                </ClientOnly>\n              ) : (\n                <MatchInner matchId={matchId} />\n              )}\n            </ResolvedNotFoundBoundary>\n          </ResolvedCatchBoundary>\n        </ResolvedSuspenseBoundary>\n      </matchContext.Provider>\n      {matchState.parentRouteId === rootRouteId &&\n      router.options.scrollRestoration ? (\n        <>\n          <OnRendered />\n          <ScrollRestoration />\n        </>\n      ) : null}\n    </ShellComponent>\n  )\n})\n\n// On Rendered can't happen above the root layout because it actually\n// renders a dummy dom element to track the rendered state of the app.\n// We render a script tag with a key that changes based on the current\n// location state.__TSR_key. Also, because it's below the root layout, it\n// allows us to fire onRendered events even after a hydration mismatch\n// error that occurred above the root layout (like bad head/link tags,\n// which is common).\nfunction OnRendered() {\n  const router = useRouter()\n\n  const prevLocationRef = React.useRef<undefined | ParsedLocation<{}>>(\n    undefined,\n  )\n\n  return (\n    <script\n      key={router.latestLocation.state.__TSR_key}\n      suppressHydrationWarning\n      ref={(el) => {\n        if (\n          el &&\n          (prevLocationRef.current === undefined ||\n            prevLocationRef.current.href !== router.latestLocation.href)\n        ) {\n          router.emit({\n            type: 'onRendered',\n            ...getLocationChangeInfo(router.state),\n          })\n          prevLocationRef.current = router.latestLocation\n        }\n      }}\n    />\n  )\n}\n\nexport const MatchInner = React.memo(function MatchInnerImpl({\n  matchId,\n}: {\n  matchId: string\n}): any {\n  const router = useRouter()\n\n  const { match, key, routeId } = useRouterState({\n    select: (s) => {\n      const match = s.matches.find((d) => d.id === matchId)!\n      const routeId = match.routeId as string\n\n      const remountFn =\n        (router.routesById[routeId] as AnyRoute).options.remountDeps ??\n        router.options.defaultRemountDeps\n      const remountDeps = remountFn?.({\n        routeId,\n        loaderDeps: match.loaderDeps,\n        params: match._strictParams,\n        search: match._strictSearch,\n      })\n      const key = remountDeps ? JSON.stringify(remountDeps) : undefined\n\n      return {\n        key,\n        routeId,\n        match: {\n          id: match.id,\n          status: match.status,\n          error: match.error,\n          invalid: match.invalid,\n          _forcePending: match._forcePending,\n          _displayPending: match._displayPending,\n        },\n      }\n    },\n    structuralSharing: true as any,\n  })\n\n  const route = router.routesById[routeId] as AnyRoute\n\n  const out = React.useMemo(() => {\n    const Comp = route.options.component ?? router.options.defaultComponent\n    if (Comp) {\n      return <Comp key={key} />\n    }\n    return <Outlet />\n  }, [key, route.options.component, router.options.defaultComponent])\n\n  if (match._displayPending) {\n    throw router.getMatch(match.id)?._nonReactive.displayPendingPromise\n  }\n\n  if (match._forcePending) {\n    throw router.getMatch(match.id)?._nonReactive.minPendingPromise\n  }\n\n  // see also hydrate() in packages/router-core/src/ssr/ssr-client.ts\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n    if (pendingMinMs) {\n      const routerMatch = router.getMatch(match.id)\n      if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {\n        // Create a promise that will resolve after the minPendingMs\n        if (!(isServer ?? router.isServer)) {\n          const minPendingPromise = createControlledPromise<void>()\n\n          routerMatch._nonReactive.minPendingPromise = minPendingPromise\n\n          setTimeout(() => {\n            minPendingPromise.resolve()\n            // We've handled the minPendingPromise, so we can delete it\n            routerMatch._nonReactive.minPendingPromise = undefined\n          }, pendingMinMs)\n        }\n      }\n    }\n    throw router.getMatch(match.id)?._nonReactive.loadPromise\n  }\n\n  if (match.status === 'notFound') {\n    invariant(isNotFound(match.error), 'Expected a notFound error')\n    return renderRouteNotFound(router, route, match.error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw router.getMatch(match.id)?._nonReactive.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (isServer ?? router.isServer) {\n      const RouteErrorComponent =\n        (route.options.errorComponent ??\n          router.options.defaultErrorComponent) ||\n        ErrorComponent\n      return (\n        <RouteErrorComponent\n          error={match.error as any}\n          reset={undefined as any}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    throw match.error\n  }\n\n  return out\n})\n\n/**\n * Render the next child match in the route tree. Typically used inside\n * a route component to render nested routes.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/outletComponent\n */\nexport const Outlet = React.memo(function OutletImpl() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const parentGlobalNotFound = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return parentMatch.globalNotFound\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  if (routeId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["match","routeId","key"],"mappings":";;;;;;;;;;;;;;;AA0BO,MAAM,QAAQ,MAAM,KAAK,SAAS,UAAU;AAAA,EACjD;AACF,GAEG;AACD,QAAM,SAAS,UAAA;AACf,QAAM,aAAa,eAAe;AAAA,IAChC,QAAQ,CAAC,MAAM;AACb,YAAM,aAAa,EAAE,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,OAAO;AAC9D,YAAM,QAAQ,EAAE,QAAQ,UAAU;AAClC;AAAA,QACE;AAAA,QACA,qCAAqC,OAAO;AAAA,MAAA;AAE9C,aAAO;AAAA,QACL,SAAS,MAAM;AAAA,QACf,KAAK,MAAM;AAAA,QACX,iBAAiB,MAAM;AAAA,QACvB,UAAU,EAAE;AAAA,QACZ,eAAe,EAAE,QAAQ,aAAa,CAAC,GAAG;AAAA,MAAA;AAAA,IAE9C;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,QAAkB,OAAO,WAAW,WAAW,OAAO;AAE5D,QAAM,mBACJ,MAAM,QAAQ,oBAAoB,OAAO,QAAQ;AAEnD,QAAM,iBAAiB,mBAAmB,oBAAC,kBAAA,CAAA,CAAiB,IAAK;AAEjE,QAAM,sBACJ,MAAM,QAAQ,kBAAkB,OAAO,QAAQ;AAEjD,QAAM,eAAe,MAAM,QAAQ,WAAW,OAAO,QAAQ;AAE7D,QAAM,yBAAyB,MAAM;AAAA;AAAA,IAEhC,MAAM,QAAQ,qBACf,OAAO,QAAQ,eAAe,QAAQ;AAAA,MACtC,MAAM,QAAQ;AAElB,QAAM,gBACJ,WAAW,QAAQ,SAAS,WAAW,QAAQ;AACjD,QAAM;AAAA;AAAA,KAEH,CAAC,MAAM,UAAU,MAAM,QAAQ,kBAAkB,mBACjD,MAAM,QAAQ,kBACb,qBACE,MAAM,QAAQ,gBAAwB,WAAW,kBACjD,MAAM,WACN;AAAA;AAEN,QAAM,wBAAwB,sBAC1B,gBACA;AAEJ,QAAM,2BAA2B,yBAC7B,gBACA;AAEJ,QAAM,iBAAiB,MAAM,SACvB,MAAM,QAA6B,kBAAkB,eACvD;AACJ,8BACG,gBAAA,EACC,UAAA;AAAA,IAAA,oBAAC,aAAa,UAAb,EAAsB,OAAO,SAC5B,UAAA,oBAAC,0BAAA,EAAyB,UAAU,gBAClC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa,MAAM,WAAW;AAAA,QAC9B,gBAAgB,uBAAuB;AAAA,QACvC,SAAS,CAAC,OAAO,cAAc;AAE7B,cAAI,WAAW,KAAK,EAAG,OAAM;AAC7B,kBAAQ,OAAO,yBAAyB,OAAO,EAAE;AACjD,yBAAe,OAAO,SAAS;AAAA,QACjC;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU,CAAC,UAAU;AAGnB,kBACE,CAAC,0BACA,MAAM,WAAW,MAAM,YAAY,WAAW,WAC9C,CAAC,MAAM,WAAW,CAAC,MAAM;AAE1B,sBAAM;AAER,qBAAO,MAAM,cAAc,wBAAwB,KAAY;AAAA,YACjE;AAAA,YAEC,UAAA,iBAAiB,WAAW,kBAC3B,oBAAC,cAAW,UAAU,gBACpB,UAAA,oBAAC,YAAA,EAAW,SAAkB,EAAA,CAChC,IAEA,oBAAC,cAAW,QAAA,CAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,MAElC;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACC,WAAW,kBAAkB,eAC9B,OAAO,QAAQ,oBACb,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW;AAAA,0BACX,mBAAA,CAAA,CAAkB;AAAA,IAAA,EAAA,CACrB,IACE;AAAA,EAAA,GACN;AAEJ,CAAC;AASD,SAAS,aAAa;AACpB,QAAM,SAAS,UAAA;AAEf,QAAM,kBAAkB,MAAM;AAAA,IAC5B;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,0BAAwB;AAAA,MACxB,KAAK,CAAC,OAAO;AACX,YACE,OACC,gBAAgB,YAAY,UAC3B,gBAAgB,QAAQ,SAAS,OAAO,eAAe,OACzD;AACA,iBAAO,KAAK;AAAA,YACV,MAAM;AAAA,YACN,GAAG,sBAAsB,OAAO,KAAK;AAAA,UAAA,CACtC;AACD,0BAAgB,UAAU,OAAO;AAAA,QACnC;AAAA,MACF;AAAA,IAAA;AAAA,IAdK,OAAO,eAAe,MAAM;AAAA,EAAA;AAiBvC;AAEO,MAAM,aAAa,MAAM,KAAK,SAAS,eAAe;AAAA,EAC3D;AACF,GAEQ;AACN,QAAM,SAAS,UAAA;AAEf,QAAM,EAAE,OAAO,KAAK,QAAA,IAAY,eAAe;AAAA,IAC7C,QAAQ,CAAC,MAAM;AACb,YAAMA,SAAQ,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO;AACpD,YAAMC,WAAUD,OAAM;AAEtB,YAAM,YACH,OAAO,WAAWC,QAAO,EAAe,QAAQ,eACjD,OAAO,QAAQ;AACjB,YAAM,cAAc,YAAY;AAAA,QAC9B,SAAAA;AAAAA,QACA,YAAYD,OAAM;AAAA,QAClB,QAAQA,OAAM;AAAA,QACd,QAAQA,OAAM;AAAA,MAAA,CACf;AACD,YAAME,OAAM,cAAc,KAAK,UAAU,WAAW,IAAI;AAExD,aAAO;AAAA,QACL,KAAAA;AAAAA,QACA,SAAAD;AAAAA,QACA,OAAO;AAAA,UACL,IAAID,OAAM;AAAA,UACV,QAAQA,OAAM;AAAA,UACd,OAAOA,OAAM;AAAA,UACb,SAASA,OAAM;AAAA,UACf,eAAeA,OAAM;AAAA,UACrB,iBAAiBA,OAAM;AAAA,QAAA;AAAA,MACzB;AAAA,IAEJ;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,QAAQ,OAAO,WAAW,OAAO;AAEvC,QAAM,MAAM,MAAM,QAAQ,MAAM;AAC9B,UAAM,OAAO,MAAM,QAAQ,aAAa,OAAO,QAAQ;AACvD,QAAI,MAAM;AACR,aAAO,oBAAC,UAAU,GAAK;AAAA,IACzB;AACA,+BAAQ,QAAA,EAAO;AAAA,EACjB,GAAG,CAAC,KAAK,MAAM,QAAQ,WAAW,OAAO,QAAQ,gBAAgB,CAAC;AAElE,MAAI,MAAM,iBAAiB;AACzB,UAAM,OAAO,SAAS,MAAM,EAAE,GAAG,aAAa;AAAA,EAChD;AAEA,MAAI,MAAM,eAAe;AACvB,UAAM,OAAO,SAAS,MAAM,EAAE,GAAG,aAAa;AAAA,EAChD;AAGA,MAAI,MAAM,WAAW,WAAW;AAE9B,UAAM,eACJ,MAAM,QAAQ,gBAAgB,OAAO,QAAQ;AAC/C,QAAI,cAAc;AAChB,YAAM,cAAc,OAAO,SAAS,MAAM,EAAE;AAC5C,UAAI,eAAe,CAAC,YAAY,aAAa,mBAAmB;AAE9D,YAAI,EAAE,YAAY,OAAO,WAAW;AAClC,gBAAM,oBAAoB,wBAAA;AAE1B,sBAAY,aAAa,oBAAoB;AAE7C,qBAAW,MAAM;AACf,8BAAkB,QAAA;AAElB,wBAAY,aAAa,oBAAoB;AAAA,UAC/C,GAAG,YAAY;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAO,SAAS,MAAM,EAAE,GAAG,aAAa;AAAA,EAChD;AAEA,MAAI,MAAM,WAAW,YAAY;AAC/B,cAAU,WAAW,MAAM,KAAK,GAAG,2BAA2B;AAC9D,WAAO,oBAAoB,QAAQ,OAAO,MAAM,KAAK;AAAA,EACvD;AAEA,MAAI,MAAM,WAAW,cAAc;AAGjC,cAAU,WAAW,MAAM,KAAK,GAAG,2BAA2B;AAM9D,UAAM,OAAO,SAAS,MAAM,EAAE,GAAG,aAAa;AAAA,EAChD;AAEA,MAAI,MAAM,WAAW,SAAS;AAM5B,QAAI,YAAY,OAAO,UAAU;AAC/B,YAAM,uBACH,MAAM,QAAQ,kBACb,OAAO,QAAQ,0BACjB;AACF,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,MAAM;AAAA,UACb,OAAO;AAAA,UACP,MAAM;AAAA,YACJ,gBAAgB;AAAA,UAAA;AAAA,QAClB;AAAA,MAAA;AAAA,IAGN;AAEA,UAAM,MAAM;AAAA,EACd;AAEA,SAAO;AACT,CAAC;AAQM,MAAM,SAAS,MAAM,KAAK,SAAS,aAAa;AACrD,QAAM,SAAS,UAAA;AACf,QAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,QAAM,UAAU,eAAe;AAAA,IAC7B,QAAQ,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,GAAG;AAAA,EAAA,CACzD;AAED,QAAM,QAAQ,OAAO,WAAW,OAAO;AAEvC,QAAM,uBAAuB,eAAe;AAAA,IAC1C,QAAQ,CAAC,MAAM;AACb,YAAM,UAAU,EAAE;AAClB,YAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO;AACxD;AAAA,QACE;AAAA,QACA,4CAA4C,OAAO;AAAA,MAAA;AAErD,aAAO,YAAY;AAAA,IACrB;AAAA,EAAA,CACD;AAED,QAAM,eAAe,eAAe;AAAA,IAClC,QAAQ,CAAC,MAAM;AACb,YAAM,UAAU,EAAE;AAClB,YAAM,QAAQ,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,OAAO;AACvD,aAAO,QAAQ,QAAQ,CAAC,GAAG;AAAA,IAC7B;AAAA,EAAA,CACD;AAED,QAAM,iBAAiB,OAAO,QAAQ,8CACnC,OAAO,QAAQ,yBAAf,CAAA,CAAuC,IACtC;AAEJ,MAAI,sBAAsB;AACxB,WAAO,oBAAoB,QAAQ,OAAO,MAAS;AAAA,EACrD;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,oBAAC,OAAA,EAAM,SAAS,aAAA,CAAc;AAEhD,MAAI,YAAY,aAAa;AAC3B,+BACG,MAAM,UAAN,EAAe,UAAU,gBAAiB,UAAA,WAAU;AAAA,EAEzD;AAEA,SAAO;AACT,CAAC;"}

package/dist/esm/Matches.d.ts

@@ -0,0 +1,68 @@
+import { StructuralSharingOption, ValidateSelected } from './structuralSharing.js';
+import { AnyRouter, DeepPartial, Expand, MakeOptionalPathParams, MakeOptionalSearchParams, MakeRouteMatchUnion, MaskOptions, MatchRouteOptions, NoInfer, RegisteredRouter, ResolveRelativePath, ResolveRoute, RouteByPath, ToSubOptionsProps } from '@tanstack/router-core';
+import * as React from 'react';
+declare module '@tanstack/router-core' {
+    interface RouteMatchExtensions {
+        meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>;
+        links?: Array<React.JSX.IntrinsicElements['link'] | undefined>;
+        scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>;
+        styles?: Array<React.JSX.IntrinsicElements['style'] | undefined>;
+        headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>;
+    }
+}
+/**
+ * Internal component that renders the router's active match tree with
+ * suspense, error, and not-found boundaries. Rendered by `RouterProvider`.
+ */
+export declare function Matches(): import("react/jsx-runtime").JSX.Element;
+export type UseMatchRouteOptions<TRouter extends AnyRouter = RegisteredRouter, TFrom extends string = string, TTo extends string | undefined = undefined, TMaskFrom extends string = TFrom, TMaskTo extends string = ''> = ToSubOptionsProps<TRouter, TFrom, TTo> & DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> & DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> & MaskOptions<TRouter, TMaskFrom, TMaskTo> & MatchRouteOptions;
+/**
+ * Create a matcher function for testing locations against route definitions.
+ *
+ * The returned function accepts standard navigation options (`to`, `params`,
+ * `search`, etc.) and returns either `false` (no match) or the matched params
+ * object when the route matches the current or pending location.
+ *
+ * Useful for conditional rendering and active UI states.
+ *
+ * @returns A `matchRoute(options)` function that returns `false` or params.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchRouteHook
+ */
+export declare function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>(): <const TFrom extends string = string, const TTo extends string | undefined = undefined, const TMaskFrom extends string = TFrom, const TMaskTo extends string = "">(opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => false | Expand<ResolveRoute<TRouter, TFrom, TTo>["types"]["allParams"]>;
+export type MakeMatchRouteOptions<TRouter extends AnyRouter = RegisteredRouter, TFrom extends string = string, TTo extends string | undefined = undefined, TMaskFrom extends string = TFrom, TMaskTo extends string = ''> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+    children?: ((params?: RouteByPath<TRouter['routeTree'], ResolveRelativePath<TFrom, NoInfer<TTo>>>['types']['allParams']) => React.ReactNode) | React.ReactNode;
+};
+/**
+ * Component that conditionally renders its children based on whether a route
+ * matches the provided `from`/`to` options. If `children` is a function, it
+ * receives the matched params object.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/matchRouteComponent
+ */
+export declare function MatchRoute<TRouter extends AnyRouter = RegisteredRouter, const TFrom extends string = string, const TTo extends string | undefined = undefined, const TMaskFrom extends string = TFrom, const TMaskTo extends string = ''>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any;
+export interface UseMatchesBaseOptions<TRouter extends AnyRouter, TSelected, TStructuralSharing> {
+    select?: (matches: Array<MakeRouteMatchUnion<TRouter>>) => ValidateSelected<TRouter, TSelected, TStructuralSharing>;
+}
+export type UseMatchesResult<TRouter extends AnyRouter, TSelected> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected;
+export declare function useMatches<TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown, TStructuralSharing extends boolean = boolean>(opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>): UseMatchesResult<TRouter, TSelected>;
+/**
+ * Read the full array of active route matches or select a derived subset.
+ *
+ * Useful for debugging, breadcrumbs, or aggregating metadata across matches.
+ *
+ * @returns The array of matches (or the selected value).
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchesHook
+ */
+/**
+ * Read the full array of active route matches or select a derived subset.
+ *
+ * Useful for debugging, breadcrumbs, or aggregating metadata across matches.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchesHook
+ */
+export declare function useParentMatches<TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown, TStructuralSharing extends boolean = boolean>(opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>): UseMatchesResult<TRouter, TSelected>;
+/**
+ * Read the array of active route matches that are children of the current
+ * match (or selected parent) in the match tree.
+ */
+export declare function useChildMatches<TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown, TStructuralSharing extends boolean = boolean>(opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>): UseMatchesResult<TRouter, TSelected>;

package/dist/esm/Matches.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import warning from "tiny-warning";
+import { rootRouteId } from "@tanstack/router-core";
+import { isServer } from "@tanstack/router-core/isServer";
+import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
+import { useRouterState } from "./useRouterState.js";
+import { useRouter } from "./useRouter.js";
+import { Transitioner } from "./Transitioner.js";
+import { matchContext } from "./matchContext.js";
+import { Match } from "./Match.js";
+import { SafeFragment } from "./SafeFragment.js";
+function Matches() {
+  const router = useRouter();
+  const rootRoute = router.routesById[rootRouteId];
+  const PendingComponent = rootRoute.options.pendingComponent ?? router.options.defaultPendingComponent;
+  const pendingElement = PendingComponent ? /* @__PURE__ */ jsx(PendingComponent, {}) : null;
+  const ResolvedSuspense = (isServer ?? router.isServer) || typeof document !== "undefined" && router.ssr ? SafeFragment : React.Suspense;
+  const inner = /* @__PURE__ */ jsxs(ResolvedSuspense, { fallback: pendingElement, children: [
+    !(isServer ?? router.isServer) && /* @__PURE__ */ jsx(Transitioner, {}),
+    /* @__PURE__ */ jsx(MatchesInner, {})
+  ] });
+  return router.options.InnerWrap ? /* @__PURE__ */ jsx(router.options.InnerWrap, { children: inner }) : inner;
+}
+function MatchesInner() {
+  const router = useRouter();
+  const matchId = useRouterState({
+    select: (s) => {
+      return s.matches[0]?.id;
+    }
+  });
+  const resetKey = useRouterState({
+    select: (s) => s.loadedAt
+  });
+  const matchComponent = matchId ? /* @__PURE__ */ jsx(Match, { matchId }) : null;
+  return /* @__PURE__ */ jsx(matchContext.Provider, { value: matchId, children: router.options.disableGlobalCatchBoundary ? matchComponent : /* @__PURE__ */ jsx(
+    CatchBoundary,
+    {
+      getResetKey: () => resetKey,
+      errorComponent: ErrorComponent,
+      onCatch: process.env.NODE_ENV !== "production" ? (error) => {
+        warning(
+          false,
+          `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`
+        );
+        warning(false, error.message || error.toString());
+      } : void 0,
+      children: matchComponent
+    }
+  ) });
+}
+function useMatchRoute() {
+  const router = useRouter();
+  useRouterState({
+    select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],
+    structuralSharing: true
+  });
+  return React.useCallback(
+    (opts) => {
+      const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
+      return router.matchRoute(rest, {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch
+      });
+    },
+    [router]
+  );
+}
+function MatchRoute(props) {
+  const matchRoute = useMatchRoute();
+  const params = matchRoute(props);
+  if (typeof props.children === "function") {
+    return props.children(params);
+  }
+  return params ? props.children : null;
+}
+function useMatches(opts) {
+  return useRouterState({
+    select: (state) => {
+      const matches = state.matches;
+      return opts?.select ? opts.select(matches) : matches;
+    },
+    structuralSharing: opts?.structuralSharing
+  });
+}
+function useParentMatches(opts) {
+  const contextMatchId = React.useContext(matchContext);
+  return useMatches({
+    select: (matches) => {
+      matches = matches.slice(
+        0,
+        matches.findIndex((d) => d.id === contextMatchId)
+      );
+      return opts?.select ? opts.select(matches) : matches;
+    },
+    structuralSharing: opts?.structuralSharing
+  });
+}
+function useChildMatches(opts) {
+  const contextMatchId = React.useContext(matchContext);
+  return useMatches({
+    select: (matches) => {
+      matches = matches.slice(
+        matches.findIndex((d) => d.id === contextMatchId) + 1
+      );
+      return opts?.select ? opts.select(matches) : matches;
+    },
+    structuralSharing: opts?.structuralSharing
+  });
+}
+export {
+  MatchRoute,
+  Matches,
+  useChildMatches,
+  useMatchRoute,
+  useMatches,
+  useParentMatches
+};
+//# sourceMappingURL=Matches.js.map