@funstack/router 0.0.10 → 1.0.0

package/dist/docs/LearnActionsPage.tsx

@@ -0,0 +1,228 @@
+import { CodeBlock } from "../components/CodeBlock.js";
+
+export function LearnActionsPage() {
+  return (
+    <div className="learn-content">
+      <h2>Form Actions</h2>
+
+      <p className="page-intro">
+        FUNSTACK Router can intercept <code>{"<form>"}</code> submissions and
+        run an <strong>action</strong> function on the client before navigation
+        occurs. This guide explains how actions work, when to use them, and
+        important considerations for progressive enhancement.
+      </p>
+
+      <div className="callout warning">
+        <p className="callout-title">Important: Progressive Enhancement</p>
+        <p>
+          A <code>{'<form method="post">'}</code> should work even{" "}
+          <strong>before JavaScript has loaded</strong>. The browser natively
+          submits POST forms to the server, so your server must be prepared to
+          handle these requests. The router&rsquo;s <code>action</code> function
+          is a <strong>client-side shortcut</strong> that runs only after
+          hydration &mdash; it does not replace server-side form handling.
+        </p>
+        <p>
+          If your server cannot handle the POST request, users on slow
+          connections, users with JavaScript disabled, or users who submit the
+          form before hydration completes will experience a broken form. Always
+          ensure your server handles POST submissions for the same URL as a
+          baseline.
+        </p>
+      </div>
+
+      <section>
+        <h3>How It Works</h3>
+        <p>
+          When a <code>{'<form method="post">'}</code> is submitted, the router
+          matches the form&rsquo;s destination URL against the route
+          definitions. If a matched route defines an <code>action</code>, the
+          router intercepts the submission via the Navigation API instead of
+          letting the browser send it to the server. The flow is:
+        </p>
+        <ol>
+          <li>
+            User submits a form with <code>method="post"</code>
+          </li>
+          <li>
+            The Navigation API fires a <code>navigate</code> event with{" "}
+            <code>formData</code>
+          </li>
+          <li>
+            The router finds the deepest matched route that has an{" "}
+            <code>action</code>
+          </li>
+          <li>
+            The <code>action</code> function runs with the form data wrapped in
+            a <code>Request</code>
+          </li>
+          <li>
+            The action&rsquo;s return value is passed to the route&rsquo;s{" "}
+            <code>loader</code> as <code>actionResult</code>
+          </li>
+          <li>The loader runs and the UI updates with fresh data</li>
+        </ol>
+        <p>
+          If the matched route does <strong>not</strong> define an action, the
+          router does not intercept the submission and the browser sends it to
+          the server as a normal POST request.
+        </p>
+      </section>
+
+      <section>
+        <h3>Defining an Action</h3>
+        <p>
+          Add an <code>action</code> function to your route definition. It
+          receives an <code>ActionArgs</code> object with the route params, a{" "}
+          <code>Request</code>, and an <code>AbortSignal</code>:
+        </p>
+        <CodeBlock language="tsx">{`import { route } from "@funstack/router";
+
+const editRoute = route({
+  path: "/posts/:postId/edit",
+  action: async ({ params, request, signal }) => {
+    const formData = await request.formData();
+    const title = formData.get("title") as string;
+    const body = formData.get("body") as string;
+
+    const res = await fetch(\`/api/posts/\${params.postId}\`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title, body }),
+      signal,
+    });
+    return res.json();
+  },
+  loader: async ({ params, actionResult, signal }) => {
+    // After a successful action, actionResult contains
+    // the return value. On normal navigations it is undefined.
+    const res = await fetch(\`/api/posts/\${params.postId}\`, { signal });
+    return res.json();
+  },
+  component: EditPostPage,
+});`}</CodeBlock>
+      </section>
+
+      <section>
+        <h3>The Form</h3>
+        <p>
+          Use a standard HTML <code>{"<form>"}</code> element with{" "}
+          <code>method="post"</code>. There is no special form component needed
+          &mdash; the router hooks into the Navigation API which intercepts
+          native form submissions:
+        </p>
+        <CodeBlock language="tsx">{`function EditPostPage({ data, params }: EditPostProps) {
+  return (
+    <form method="post" action={\`/posts/\${params.postId}/edit\`}>
+      <input name="title" defaultValue={data.title} />
+      <textarea name="body" defaultValue={data.body} />
+      <button type="submit">Save</button>
+    </form>
+  );
+}`}</CodeBlock>
+        <p>
+          Note that the form&rsquo;s <code>action</code> attribute points to the
+          same URL that the route matches. This is essential for progressive
+          enhancement: before hydration, the browser will POST to this URL on
+          the server.
+        </p>
+      </section>
+
+      <section>
+        <h3>Progressive Enhancement in Detail</h3>
+        <p>
+          The action feature is designed as an{" "}
+          <strong>enhancement layer</strong>. The baseline behavior of a POST
+          form is a server round-trip, and the router&rsquo;s action provides a
+          faster, client-side alternative once hydration is complete. This
+          means:
+        </p>
+        <ul>
+          <li>
+            <strong>Before hydration</strong> &mdash; The browser submits the
+            form to the server as a normal POST request. Your server must handle
+            it and return an appropriate response (typically a redirect or a
+            re-rendered page).
+          </li>
+          <li>
+            <strong>After hydration</strong> &mdash; The router intercepts the
+            submission, runs your <code>action</code> function on the client,
+            and updates the UI without a full page reload.
+          </li>
+        </ul>
+        <p>
+          Both paths should produce the same end result for the user. The client
+          action is a shortcut, not a replacement.
+        </p>
+
+        <div className="callout warning">
+          <p className="callout-title">
+            When your server cannot handle POST requests
+          </p>
+          <p>
+            If you are building a purely client-side application (e.g. a SPA
+            with no server-side form handling), consider using React 19&rsquo;s{" "}
+            <code>{"<form action={fn}>"}</code> pattern instead. When a form
+            action is a <strong>function</strong> rather than a URL, the browser
+            will not attempt a server round-trip on submission. Note that in a
+            client-only app the form will not work until React hydrates, since
+            the function only exists in the JavaScript bundle.
+          </p>
+          <p>
+            In contrast, FUNSTACK Router&rsquo;s <code>action</code> intercepts
+            URL-based form submissions. If the client has not hydrated yet, the
+            browser will POST to the URL, which will fail without server
+            handling.
+          </p>
+        </div>
+      </section>
+
+      <section>
+        <h3>Action Result and Loader</h3>
+        <p>
+          When a route defines both an <code>action</code> and a{" "}
+          <code>loader</code>, the loader runs after the action completes. The
+          action&rsquo;s return value is passed to the loader via the{" "}
+          <code>actionResult</code> parameter:
+        </p>
+        <CodeBlock language="typescript">{`action: async ({ request }) => {
+  const formData = await request.formData();
+  // ... process form
+  return { success: true, message: "Saved!" };
+},
+loader: async ({ params, actionResult, signal }) => {
+  // actionResult is { success: true, message: "Saved!" }
+  // after the action, or undefined on normal navigation
+  const data = await fetchData(params.id, signal);
+  return { ...data, actionResult };
+},`}</CodeBlock>
+        <p>
+          This lets your UI display feedback from the action (e.g. success
+          messages or validation errors) alongside the refreshed data.
+        </p>
+      </section>
+
+      <section>
+        <h3>Summary</h3>
+        <ul>
+          <li>
+            <code>action</code> intercepts POST form submissions on the client
+            after hydration
+          </li>
+          <li>
+            Your server must handle the same POST endpoint for progressive
+            enhancement
+          </li>
+          <li>
+            The action&rsquo;s return value flows to the loader as{" "}
+            <code>actionResult</code>
+          </li>
+          <li>
+            For SPAs without server-side form handling, prefer React 19&rsquo;s{" "}
+            <code>{"<form action={fn}>"}</code> pattern
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/dist/docs/LearnNavigationApiPage.tsx

@@ -210,7 +210,7 @@ function App() {
               Ephemeral <code>info</code>
             </strong>{" "}
             &mdash; Pass non-persisted context data during navigation via{" "}
-            <code>navigation.navigate(url, {"{ info }"}))</code>
+            <code>navigation.navigate(url, {"{ info }"})</code>
           </li>
           <li>
             <strong>navigation.entries()</strong> &mdash; Access the full

package/dist/docs/LearnRouteDefinitionsPage.tsx

@@ -0,0 +1,285 @@
+import { CodeBlock } from "../components/CodeBlock.js";
+
+export function LearnRouteDefinitionsPage() {
+  return (
+    <div className="learn-content">
+      <h2>RSC with Route Features</h2>
+
+      <p className="page-intro">
+        When using React Server Components as route components, you may also
+        want route features like loaders, typed hooks (
+        <code>useRouteParams</code>, <code>useRouteData</code>), and navigation
+        state. The challenge is that route definitions referencing server
+        components cannot be imported from client modules. This guide shows how
+        to split a route definition into a <strong>shared part</strong>{" "}
+        (importable by client components for type safety) and a{" "}
+        <strong>server part</strong> (where the component is attached), enabling
+        full route features alongside RSC.
+      </p>
+
+      <section>
+        <h3>The Problem</h3>
+        <p>
+          In an RSC architecture, server modules and client modules cannot
+          freely import from each other. This creates a dilemma for type-safe
+          routing:
+        </p>
+        <ul>
+          <li>
+            <strong>If routes live in a server module</strong> &mdash; they can
+            reference server components, but client components cannot import the
+            route objects for type-safe hooks like <code>useRouteParams</code>{" "}
+            or <code>useRouteData</code>.
+          </li>
+          <li>
+            <strong>If routes live in a shared module</strong> &mdash; client
+            components can import them, but server components cannot be
+            referenced (importing a server component makes a module
+            server-only).
+          </li>
+        </ul>
+        <p>
+          There is no single location where route objects can both reference
+          server components <em>and</em> be imported by client components.
+        </p>
+      </section>
+
+      <section>
+        <h3>The Key Insight</h3>
+        <p>
+          The only part of a route definition that is inherently server-specific
+          is the <strong>component</strong> (because it may be a server
+          component). Everything else &mdash; <code>id</code>, <code>path</code>
+          , <code>loader</code>, <code>action</code>, and navigation state
+          &mdash; is client-safe. Loaders and actions run in the browser during
+          navigation, so they can live in shared modules.
+        </p>
+        <p>
+          This means we can split a route definition at exactly one point: the
+          component reference. FUNSTACK Router supports this split through
+          partial route definitions and <code>bindRoute()</code>.
+        </p>
+      </section>
+
+      <section>
+        <h3>Step 1: Define the Route (Shared Module)</h3>
+        <p>
+          Call <code>route()</code> <strong>without</strong> a{" "}
+          <code>component</code> property to create a partial route definition.
+          This object carries all type information and is safe to import from
+          client modules:
+        </p>
+        <CodeBlock language="typescript">{`// src/pages/user/loader.ts
+"use client";
+import type { User } from "../../types";
+
+export async function loadUser({ params, signal }) {
+  const res = await fetch(\`/api/users/\${params.userId}\`, { signal });
+  return res.json() as Promise<User>;
+}`}</CodeBlock>
+        <CodeBlock language="typescript">{`// src/pages/user/route.ts — shared module (no "use client" directive)
+import { route } from "@funstack/router/server";
+import { loadUser } from "./loader";
+
+export const userRoute = route({
+  id: "user",
+  path: "/:userId",
+  loader: loadUser,
+});
+// Inferred types:
+//   Params = { userId: string }  — from path
+//   Data   = User                — from loader return type`}</CodeBlock>
+        <p>
+          The <code>id</code> property is required for partial routes &mdash; it
+          is used at runtime to match the route context and at the type level to
+          carry type information for hooks.
+        </p>
+      </section>
+
+      <section>
+        <h3>Step 2: Bind the Component (Server Module)</h3>
+        <p>
+          Use <code>bindRoute()</code> from <code>@funstack/router/server</code>{" "}
+          to attach a component to the partial route. This produces a full route
+          definition for <code>{"<Router />"}</code>:
+        </p>
+        <CodeBlock language="tsx">{`// src/App.tsx — Server Component
+import { bindRoute } from "@funstack/router/server";
+import { Router } from "@funstack/router";
+import { userRoute } from "./pages/user/route";
+import { UserProfile } from "./pages/user/UserProfile";
+
+const routes = [
+  bindRoute(userRoute, {
+    component: <UserProfile />,
+  }),
+];
+
+export default function App() {
+  return <Router routes={routes} />;
+}`}</CodeBlock>
+        <p>
+          Because <code>bindRoute()</code> lives in the server entry point, the
+          component can be a server component. The resulting route definition is
+          fully compatible with <code>{"<Router />"}</code> &mdash; it is the
+          same type as what <code>route()</code> with a component produces.
+        </p>
+        <p>
+          <code>bindRoute()</code> also accepts optional <code>children</code>,{" "}
+          <code>exact</code>, and <code>requireChildren</code> properties in the
+          second argument, just like the regular <code>route()</code> function.
+        </p>
+      </section>
+
+      <section>
+        <h3>Type-Safe Hooks in Client Components</h3>
+        <p>
+          The partial route object from Step 1 can be imported in client
+          components and passed to hooks for full type safety:
+        </p>
+        <CodeBlock language="tsx">{`// src/pages/user/UserActions.tsx
+"use client";
+import { useRouteParams, useRouteData } from "@funstack/router";
+import { userRoute } from "./route";
+
+export function UserActions() {
+  const { userId } = useRouteParams(userRoute);
+  // userId: string ✓
+
+  const user = useRouteData(userRoute);
+  // user: User ✓
+
+  return (
+    <div>
+      <h2>{user.name}</h2>
+      <p>User ID: {userId}</p>
+    </div>
+  );
+}`}</CodeBlock>
+        <p>
+          All typed hooks &mdash; <code>useRouteParams</code>,{" "}
+          <code>useRouteData</code>, and <code>useRouteState</code> &mdash;
+          accept both partial route definitions and full route definitions. The
+          type information flows naturally from path patterns, loader return
+          types, and <code>routeState</code>.
+        </p>
+      </section>
+
+      <section>
+        <h3>Navigation State</h3>
+        <p>
+          <code>routeState()</code> also supports partial route definitions.
+          When called without a <code>component</code>, it produces a partial
+          route carrying the state type:
+        </p>
+        <CodeBlock language="typescript">{`// src/pages/settings/route.ts — shared module
+import { routeState } from "@funstack/router/server";
+
+type SettingsState = { tab: string };
+
+export const settingsRoute = routeState<SettingsState>()({
+  id: "settings",
+  path: "/settings",
+});
+// Params = {}, State = { tab: string }`}</CodeBlock>
+        <CodeBlock language="tsx">{`// src/pages/settings/SettingsPanel.tsx
+"use client";
+import { useRouteState } from "@funstack/router";
+import { settingsRoute } from "./route";
+
+export function SettingsPanel() {
+  const state = useRouteState(settingsRoute);
+  // state: { tab: string } | undefined ✓
+  // ...
+}`}</CodeBlock>
+      </section>
+
+      <section>
+        <h3>Nested Routes</h3>
+        <p>
+          Partial routes use relative path segments, the same as regular routes.
+          Use <code>bindRoute()</code> with <code>children</code> to build
+          nested route trees:
+        </p>
+        <CodeBlock language="typescript">{`// src/pages/users/route.ts
+import { route } from "@funstack/router/server";
+export const usersRoute = route({ id: "users", path: "/users" });
+
+// src/pages/users/profile/route.ts
+import { route } from "@funstack/router/server";
+import { fetchUser } from "./fetchUser"; // "use client" module
+export const userProfileRoute = route({
+  id: "userProfile",
+  path: "/:userId",       // relative to parent
+  loader: fetchUser,
+});
+
+// src/pages/users/settings/route.ts
+import { route } from "@funstack/router/server";
+export const userSettingsRoute = route({
+  id: "userSettings",
+  path: "/:userId/settings",  // relative to parent
+});`}</CodeBlock>
+        <CodeBlock language="tsx">{`// src/App.tsx
+const routes = [
+  bindRoute(usersRoute, {
+    component: <Outlet />,
+    children: [
+      bindRoute(userProfileRoute, {
+        component: <UserProfile />,
+      }),
+      bindRoute(userSettingsRoute, {
+        component: <UserSettings />,
+      }),
+    ],
+  }),
+];`}</CodeBlock>
+        <p>
+          For layout routes that don't need typed hooks, <code>id</code> is
+          optional. A route without <code>id</code> can still be used with{" "}
+          <code>bindRoute()</code>:
+        </p>
+        <CodeBlock language="typescript">{`import { route, bindRoute } from "@funstack/router/server";
+const layout = route({ path: "/dashboard" });
+bindRoute(layout, { component: <Outlet />, children: [...] });`}</CodeBlock>
+      </section>
+
+      <section>
+        <h3>Recommended Project Structure</h3>
+        <p>
+          This pattern encourages <strong>collocating</strong> each route
+          definition with the page components that use it:
+        </p>
+        <CodeBlock language="bash">{`src/
+  pages/
+    user/
+      route.ts            ← Step 1: id, path (shared module)
+      loader.ts           ← "use client" — loader function
+      UserProfile.tsx     ← Server component (the page)
+      UserActions.tsx     ← "use client" — imports ./route for hooks
+    settings/
+      route.ts            ← Step 1: id, path, routeState (shared module)
+      Settings.tsx        ← Server component (the page)
+      SettingsPanel.tsx   ← "use client" — imports ./route for hooks
+  App.tsx                 ← Step 2: bindRoute() assembles route tree`}</CodeBlock>
+        <p>This structure provides several benefits:</p>
+        <ul>
+          <li>
+            <strong>Locality</strong> &mdash; The route definition sits next to
+            the components that use it. Imports are short and obvious.
+          </li>
+          <li>
+            <strong>Encapsulation</strong> &mdash; Each page "owns" its route.
+            Adding a new page means adding a folder with a route and components,
+            then one <code>bindRoute()</code> call in <code>App.tsx</code>.
+          </li>
+          <li>
+            <strong>Local type safety</strong> &mdash; Path params and loader
+            data types are defined once in <code>route.ts</code> and consumed by
+            sibling client components. No separate type declarations needed.
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/dist/docs/LearnRscPage.tsx

@@ -269,6 +269,12 @@ export default function App() {
             See also the <a href="/learn/ssr">Server-Side Rendering</a> guide
             for how the router handles SSR and hydration
           </li>
+          <li>
+            For type-safe hooks in client components, see the{" "}
+            <a href="/learn/rsc/route-features">RSC with Route Features</a>{" "}
+            guide which explains how to split route definitions across the
+            server/client boundary
+          </li>
         </ul>
       </section>
     </div>

package/dist/docs/LearnSsgPage.tsx

@@ -103,11 +103,9 @@ export function LearnSsgPage() {
         </p>
         <p>
           If you only need loaders to run at build time (not on the client),
-          consider using{" "}
-          <a href="/learn/react-server-components">React Server Components</a>{" "}
-          with SSG. RSC lets you fetch data on the server during the build and
-          send the result as static HTML, without shipping loader code to the
-          client.
+          consider using <a href="/learn/rsc">React Server Components</a> with
+          SSG. RSC lets you fetch data on the server during the build and send
+          the result as static HTML, without shipping loader code to the client.
         </p>
       </section>
 

package/dist/docs/index.md

@@ -3,6 +3,7 @@
 ## Available Documentation
 
 - [Examples](./ExamplesPage.tsx)
+- [FAQ](./FaqPage.tsx)
 - [Getting Started](./GettingStartedPage.tsx)
 
 ### API Reference
@@ -14,8 +15,10 @@
 
 ### Learn
 
+- [Form Actions](./LearnActionsPage.tsx) - FUNSTACK Router can intercept submissions and run an action function on the client before navigation occurs. This guide explains how actions work, when to use them, and important considerations for progressive enhancement.
 - [Navigation API](./LearnNavigationApiPage.tsx) - FUNSTACK Router is built on the Navigation API , a modern browser API that provides a unified way to handle navigation. This guide explains the key differences from the older History API and the benefits this brings to your application.
 - [Nested Routes](./LearnNestedRoutesPage.tsx) - Nested routes let you build complex page layouts where parts of the UI persist across navigation while other parts change. Think of a dashboard with a sidebar that stays in place while the main content area updates—that's nested routing in action.
+- [RSC with Route Features](./LearnRouteDefinitionsPage.tsx) - When using React Server Components as route components, you may also want route features like loaders, typed hooks ( useRouteParams, useRouteData), and navigation state. The challenge is that route definitions referencing server components cannot be imported from client modules. This guide shows how to split a route definition into a shared part (importable by client components for type safety) and a server part (where the component is attached), enabling full route features alongside RSC.
 - [React Server Components](./LearnRscPage.tsx) - FUNSTACK Router is designed to work with React Server Components (RSC). The package provides a dedicated server entry point so that route definitions can live in server modules, keeping client bundle sizes small.
 - [Static Site Generation](./LearnSsgPage.tsx) - When your server or static site generator knows the URL being rendered, you can use the ssr prop to match path-based routes during SSR. This produces richer server-rendered HTML — users see page content immediately instead of just the app shell.
 - [How SSR Works](./LearnSsrBasicPage.tsx) - FUNSTACK Router supports server-side rendering with a two-stage model. During SSR, pathless (layout) routes without loaders render to produce an app shell, while path-based routes and loaders activate only after client hydration.

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as ExtractRouteState, c as PathParams, d as RouteComponentPropsWithData, f as RouteDefinition, h as routeState, i as ExtractRouteParams, l as RouteComponentProps, m as route, n as ExtractRouteData, o as LoaderArgs, p as TypefulOpaqueRouteDefinition, r as ExtractRouteId, s as OpaqueRouteDefinition, t as ActionArgs, u as RouteComponentPropsOf } from "./route-DRcgs0Pt.mjs";
+import { _ as routeState, a as ExtractRouteParams, c as OpaqueRouteDefinition, d as RouteComponentProps, f as RouteComponentPropsOf, g as route, h as TypefulOpaqueRouteDefinition, i as ExtractRouteId, l as PartialRouteDefinition, m as RouteDefinition, n as ActionArgs, o as ExtractRouteState, p as RouteComponentPropsWithData, r as ExtractRouteData, s as LoaderArgs, t as bindRoute, u as PathParams } from "./bindRoute-BtT4qPKI.mjs";
 import { ComponentType, ReactNode } from "react";
 
 //#region src/types.d.ts
@@ -167,12 +167,6 @@ declare function Router({
  */
 declare function Outlet(): ReactNode;
 //#endregion
-//#region src/hooks/useNavigate.d.ts
-/**
- * Returns a function for programmatic navigation.
- */
-declare function useNavigate(): (to: string, options?: NavigateOptions) => void;
-//#endregion
 //#region src/hooks/useLocation.d.ts
 /**
  * Returns the current location object.
@@ -244,7 +238,7 @@ declare function useBlocker(options: UseBlockerOptions): void;
  * }
  * ```
  */
-declare function useRouteParams<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteParams<T>;
+declare function useRouteParams<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown> | PartialRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteParams<T>;
 //#endregion
 //#region src/hooks/useRouteState.d.ts
 /**
@@ -268,7 +262,7 @@ declare function useRouteParams<T extends TypefulOpaqueRouteDefinition<string, R
  * }
  * ```
  */
-declare function useRouteState<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteState<T> | undefined;
+declare function useRouteState<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown> | PartialRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteState<T> | undefined;
 //#endregion
 //#region src/hooks/useRouteData.d.ts
 /**
@@ -295,7 +289,7 @@ declare function useRouteState<T extends TypefulOpaqueRouteDefinition<string, Re
  * }
  * ```
  */
-declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteData<T>;
+declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown> | PartialRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteData<T>;
 //#endregion
 //#region src/hooks/useIsPending.d.ts
 /**
@@ -303,5 +297,16 @@ declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Rec
  */
 declare function useIsPending(): boolean;
 //#endregion
-export { type ActionArgs, type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type MatchedRoute, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type SSRConfig, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, route, routeState, useBlocker, useIsPending, useLocation, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
+//#region src/bypassInterception.d.ts
+/**
+ * Perform a full page reload, bypassing the router's interception.
+ */
+declare function hardReload(): void;
+/**
+ * Navigate to the given URL with a full page navigation,
+ * bypassing the router's interception.
+ */
+declare function hardNavigate(url: string): void;
+//#endregion
+export { type ActionArgs, type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type MatchedRoute, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PartialRouteDefinition, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type SSRConfig, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, bindRoute, hardNavigate, hardReload, route, routeState, useBlocker, useIsPending, useLocation, useRouteData, useRouteParams, useRouteState, useSearchParams };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router/index.tsx","../src/Outlet.tsx","../src/hooks/useNavigate.ts","../src/hooks/useLocation.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts"],"mappings":";;;;cAGM,6BAAA;;AAFoE;;;;;;;KAgB9D,uBAAA;EAAA,CACT,6BAAA,UAyB0B;EAvB3B,IAAA,WA4Be;EA1Bf,QAAA,GAAW,uBAAA;EAgCc;;;;;;EAzBzB,KAAA;EAPA;;;;;EAaA,eAAA,YAM2B;EAA3B,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAE3B;EAAA,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,wCAAA;EAE3B,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA,SAAmB,OAAA;IACnB,cAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;AAmBN;KAAY,YAAA;sCAEV,KAAA,EAAO,uBAAA,EAAP;EAEA,MAAA,EAAQ,MAAA,kBAAR;EAEA,QAAA;AAAA;;;;KAcU,cAAA;EAMQ,4DAJlB,OAAA,WAAkB,YAAA,WAUR;EARV,YAAA;EAEA,QAAA,EAAU,QAAA;AAAA;;;;KAMA,eAAA;EAYA,uDAVV,OAAA;EAEA,KAAA,YASA;EAPA,IAAA;AAAA;;;AAmBF;KAbY,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;;AAqBF;;;KAXY,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;;ACjGR;;KD0GY,YAAA;;;;AAhJ8D;;KCsC9D,SAAA;EDpCkC;;AAc9C;;;;EC6BE,IAAA;EDL2B;;;;;;;;;;;ECiB3B,UAAA;AAAA;AAAA,KAGU,WAAA;EACV,MAAA,EAAQ,eAAA;EDjCR;;;;;;;ECyCA,UAAA,GAAa,kBAAA;ED3Bc;;;;;;ECkC3B,QAAA,GAAW,YAAA;ED5BL;;;;;;;;;;;;;;;AA4BR;;;;;ECqBE,GAAA,GAAM,SAAA;AAAA;AAAA,iBAGQ,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA,QAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;ADzGyD;iBEM1D,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,IAAgB,EAAA,UAAY,OAAA,GAAU,eAAA;;;;;;iBCAtC,WAAA,CAAA,GAAe,QAAA;;;KCJ1B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;ANF8D;EMOxE,WAAA;AAAA;;;ANSF;;;;;;;;;;;;;;;;;;;;;;;;;iBMqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;ANrCsC;;;;;AAgB1E;;;;;;;;;;;;iBOSgB,cAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;APhC0C;;;;;AAgB1E;;;;;;;;;;;;;iBQUgB,aAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;ARjC2C;;;;;AAgB1E;;;;;;;;;;;;;;;;iBSagB,YAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBC/Bd,YAAA,CAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router/index.tsx","../src/Outlet.tsx","../src/hooks/useLocation.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts","../src/bypassInterception.ts"],"mappings":";;;;cAGM,6BAAA;;AAFoE;;;;;;;KAgB9D,uBAAA;EAAA,CACT,6BAAA,UAyB0B;EAvB3B,IAAA,WA4Be;EA1Bf,QAAA,GAAW,uBAAA;EAgCc;;;;;;EAzBzB,KAAA;EAPA;;;;;EAaA,eAAA,YAM2B;EAA3B,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAE3B;EAAA,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,wCAAA;EAE3B,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA,SAAmB,OAAA;IACnB,cAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;AAmBN;KAAY,YAAA;sCAEV,KAAA,EAAO,uBAAA,EAAP;EAEA,MAAA,EAAQ,MAAA,kBAAR;EAEA,QAAA;AAAA;;;;KAcU,cAAA;EAMQ,4DAJlB,OAAA,WAAkB,YAAA,WAUR;EARV,YAAA;EAEA,QAAA,EAAU,QAAA;AAAA;;;;KAMA,eAAA;EAYA,uDAVV,OAAA;EAEA,KAAA,YASA;EAPA,IAAA;AAAA;;;AAmBF;KAbY,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;;AAqBF;;;KAXY,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;;AChGR;;KDyGY,YAAA;;;;AAhJ8D;;KCuC9D,SAAA;EDrCkC;;AAc9C;;;;EC8BE,IAAA;EDN2B;;;;;;;;;;;ECkB3B,UAAA;AAAA;AAAA,KAGU,WAAA;EACV,MAAA,EAAQ,eAAA;EDlCR;;;;;;;EC0CA,UAAA,GAAa,kBAAA;ED5Bc;;;;;;ECmC3B,QAAA,GAAW,YAAA;ED7BL;;;;;;;;;;;;;;;AA4BR;;;;;ECsBE,GAAA,GAAM,SAAA;AAAA;AAAA,iBAGQ,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA,QAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;AD1GyD;iBEM1D,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,GAAe,QAAA;;;KCJ1B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;ALF8D;EKOxE,WAAA;AAAA;;;ALSF;;;;;;;;;;;;;;;;;;;;;;;;;iBKqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;ALrCsC;;;;;AAgB1E;;;;;;;;;;;;iBMUgB,cAAA,WAEV,4BAAA,SAEE,MAAA,sCAIF,sBAAA,SAA+B,MAAA,oCAAA,CACnC,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;ANnC0C;;;;;AAgB1E;;;;;;;;;;;;;iBOWgB,aAAA,WAEV,4BAAA,SAEE,MAAA,sCAIF,sBAAA,SAA+B,MAAA,oCAAA,CACnC,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;APpC2C;;;;;AAgB1E;;;;;;;;;;;;;;;;iBQcgB,YAAA,WAEV,4BAAA,SAEE,MAAA,sCAIF,sBAAA,SAA+B,MAAA,oCAAA,CACnC,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBClCd,YAAA,CAAA;;;ATL0D;;;AAAA,iBUW1D,UAAA,CAAA;;AVKhB;;;iBUGgB,YAAA,CAAa,GAAA"}