@firtoz/router-toolkit 8.0.1 → 9.0.1

package/README.md

@@ -106,9 +106,15 @@ export default function Dashboard() {
 
 ### 3. Forms with Actions
 
+`useDynamicSubmitter` returns a **stable** `{ submit, submitJson, Form, fetcherKey }` and does not expose `state` / `data`. Use `useDynamicSubmitterFetcher(submitter)` when you need reactive loading or action results in JSX (or `submitter.fetcherKey` with `useFetcher` for advanced cases).
+
 ```tsx
 // app/routes/create-user.tsx
-import { useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 
 export const route: RoutePath<"/create-user"> = "/create-user";
 
@@ -119,15 +125,17 @@ export async function action({ request }) {
 }
 
 export default function CreateUser() {
-  const submitter = useDynamicSubmitter<typeof import("./create-user")>("/create-user");
-  
+  const path = "/create-user" as const;
+  const submitter = useDynamicSubmitter<typeof import("./create-user")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
+
   return (
     <submitter.Form method="post">
       <input name="name" placeholder="User name" required />
       <button type="submit">
-        {submitter.state === "submitting" ? "Creating..." : "Create"}
+        {fetcher.state === "submitting" ? "Creating..." : "Create"}
       </button>
-      {submitter.data?.success && <p>✅ User created!</p>}
+      {fetcher.data?.success && <p>✅ User created!</p>}
     </submitter.Form>
   );
 }
@@ -136,8 +144,8 @@ export default function CreateUser() {
 **Key Points:**
 - Export `route: RoutePath<"your-path">` in every route file
 - Use `useDynamicFetcher<typeof import("./route-file")>` for type-safe data fetching
-- Use `useDynamicSubmitter<typeof import("./route-file")>` for type-safe form submission
-- Full TypeScript inference for `fetcher.data` and `submitter.data`
+- Use `useDynamicSubmitter<typeof import("./route-file")>` for type-safe `submit` / `submitJson` / `Form`; use `useDynamicSubmitterFetcher(submitter)` for reactive `state` / `data` on the same submission (optional `keySuffix` when two submitters share one URL)
+- Await `submit` / `submitJson` for programmatic flows; full TypeScript inference on the resolved payload
 
 > **💡 Tip**: Start with `useDynamicFetcher` for data loading, then add `useDynamicSubmitter` for forms. The `useFetcherStateChanged` hook is great for notifications and side effects.
 
@@ -196,11 +204,15 @@ export default function UsersPage() {
 
 ### `useDynamicSubmitter`
 
-Type-safe form submission with Zod validation and enhanced submit functionality. Works seamlessly with route modules for full type inference.
+Type-safe `submit`, `submitJson`, and `Form` with a **stable** return object (`fetcherKey` included). Use `await submitJson(...)` (or `await submit(...)`) for action payloads; use `useDynamicSubmitterFetcher(submitter)` when you need `fetcher.state` / `fetcher.data` in the UI.
 
 ```tsx
 // app/routes/contact.tsx
-import { useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { z } from 'zod';
 import type { Route } from './+types/contact';
 
@@ -234,9 +246,11 @@ export async function action({ request }: Route.ActionArgs) {
   };
 }
 
-// 4. Use the hook with typeof import for full type inference
+// 4. Submitter + matching fetcher for reactive UI
 export default function ContactForm() {
-  const submitter = useDynamicSubmitter<typeof import("./contact")>("/contact");
+  const path = "/contact" as const;
+  const submitter = useDynamicSubmitter<typeof import("./contact")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div>
@@ -263,18 +277,18 @@ export default function ContactForm() {
         
         <button
           type="submit"
-          disabled={submitter.state === "submitting"}
+          disabled={fetcher.state === "submitting"}
         >
-          {submitter.state === "submitting" ? "Submitting..." : "Submit"}
+          {fetcher.state === "submitting" ? "Submitting..." : "Submit"}
         </button>
       </submitter.Form>
 
-      {submitter.data && (
+      {fetcher.data && (
         <div>
-          {submitter.data.success ? (
-            <p>✅ {submitter.data.message}</p>
+          {fetcher.data.success ? (
+            <p>✅ {fetcher.data.message}</p>
           ) : (
-            <p>❌ {submitter.data.message}</p>
+            <p>❌ {fetcher.data.message}</p>
           )}
         </div>
       )}
@@ -283,6 +297,22 @@ export default function ContactForm() {
 }
 ```
 
+#### Local `useState` vs `useDynamicSubmitterFetcher`
+
+Both are valid; pick based on how you want loading and action feedback to show up.
+
+**Local state around `await` (e.g. `saving` + `try` / `finally`)**
+
+- **Pros:** Matches the promise-first API; no extra hook; the pending flag tracks exactly your async handler (including extra `await`s in the same function); easy to reason about when you reload data after save (e.g. `useDynamicFetcher.load()`).
+- **Cons:** You must remember `finally` (or equivalent); one flag is awkward if several overlapping operations need distinct UX; you do not get declarative `fetcher.data` for the action unless you store the awaited value yourself.
+
+**`useDynamicSubmitterFetcher(submitter)`**
+
+- **Pros:** Declarative `fetcher.state` / `fetcher.data` / `fetcher.error` in JSX—good for `<submitter.Form>`, inline validation or handler errors, and staying aligned with React Router’s fetcher lifecycle on `submitter.fetcherKey`.
+- **Cons:** Second `useFetcher` subscription; UI follows RR’s state machine, not only “my handler,” unless you isolate keys with `keySuffix` when two widgets share one URL.
+
+**Rule of thumb:** Use **local pending state** when the flow is “run this async function, disable until it finishes.” Use **`useDynamicSubmitterFetcher`** when you want **reactive** fetcher fields in render without mirroring them into state.
+
 ### `ConcurrentSubmitterProvider` + `useConcurrentSubmitter`
 
 Run multiple submissions in parallel via the framework fetcher; each is tracked in `operations` with `submittedData` (for optimistic UI) and `data` when done. Wrap your app (or subtree) with `ConcurrentSubmitterProvider`, then use `useConcurrentSubmitter<TInfo>()` for typed `submitJson` / `submitFormData` with path and args per call.
@@ -345,7 +375,12 @@ Track changes in fetcher state and react to them. Perfect for triggering side ef
 
 ```tsx
 // app/routes/notification-form.tsx
-import { useDynamicSubmitter, useFetcherStateChanged, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  useFetcherStateChanged,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { useState } from 'react';
 import { z } from 'zod';
 import type { Route } from './+types/notification-form';
@@ -373,17 +408,19 @@ export async function action({ request }: Route.ActionArgs) {
 }
 
 export default function NotificationForm() {
-  const submitter = useDynamicSubmitter<typeof import("./notification-form")>("/notification-form");
+  const path = "/notification-form" as const;
+  const submitter = useDynamicSubmitter<typeof import("./notification-form")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
   const [notifications, setNotifications] = useState<string[]>([]);
 
-  // Track fetcher state changes for side effects
-  useFetcherStateChanged(submitter, (lastState, newState) => {
+  // Track fetcher state changes for side effects (pass the parallel fetcher, not submitter)
+  useFetcherStateChanged(fetcher, (lastState, newState) => {
     console.log(`Fetcher state changed from ${lastState} to ${newState}`);
     
     // Show success notification when form submission completes
     if (newState === 'idle' && lastState === 'submitting') {
-      if (submitter.data?.success) {
-        setNotifications(prev => [...prev, `✅ ${submitter.data.message}`]);
+      if (fetcher.data?.success) {
+        setNotifications(prev => [...prev, `✅ ${fetcher.data.message}`]);
       } else {
         setNotifications(prev => [...prev, `❌ Submission failed`]);
       }
@@ -421,12 +458,12 @@ export default function NotificationForm() {
         
         <button 
           type="submit" 
-          disabled={submitter.state === 'submitting'}
+          disabled={fetcher.state === 'submitting'}
         >
-          {submitter.state === 'submitting' ? 'Sending...' : 'Send Notification'}
+          {fetcher.state === 'submitting' ? 'Sending...' : 'Send Notification'}
         </button>
         
-        <p>Current state: <strong>{submitter.state}</strong></p>
+        <p>Current state: <strong>{fetcher.state}</strong></p>
       </submitter.Form>
 
       {/* Show notifications triggered by state changes */}
@@ -520,18 +557,23 @@ The `formAction` utility works seamlessly with `useDynamicSubmitter` when you ex
 
 ```tsx
 // app/routes/register.tsx (component)
-import { useDynamicSubmitter } from "@firtoz/router-toolkit";
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+} from "@firtoz/router-toolkit";
 
 export default function Register() {
-  const submitter = useDynamicSubmitter<typeof import("./register")>("/register");
+  const path = "/register" as const;
+  const submitter = useDynamicSubmitter<typeof import("./register")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <submitter.Form method="post">
       <input name="email" type="email" required />
       <input name="password" type="password" required />
       <input name="confirmPassword" type="password" required />
-      <button type="submit" disabled={submitter.state === "submitting"}>
-        {submitter.state === "submitting" ? "Registering..." : "Register"}
+      <button type="submit" disabled={fetcher.state === "submitting"}>
+        {fetcher.state === "submitting" ? "Registering..." : "Register"}
       </button>
     </submitter.Form>
   );
@@ -540,26 +582,25 @@ export default function Register() {
 
 #### Error Handling
 
-The `formAction` utility returns structured errors that you can handle in your components:
+The `formAction` utility returns structured errors. Inspect `fetcher.data` from `useDynamicSubmitterFetcher(submitter)`, or `await submitter.submitJson(...)` in an async handler:
 
 ```tsx
 export default function Register() {
-  const submitter = useDynamicSubmitter<typeof import("./register")>("/register");
+  const path = "/register" as const;
+  const submitter = useDynamicSubmitter<typeof import("./register")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
+
+  if (fetcher.data && !fetcher.data.success) {
+    const error = fetcher.data.error;
 
-  if (submitter.data && !submitter.data.success) {
-    const error = submitter.data.error;
-    
     switch (error.type) {
       case "validation":
-        // Handle Zod validation errors
         console.log("Validation errors:", error.error);
         break;
       case "handler":
-        // Handle business logic errors
         console.log("Handler error:", error.error);
         break;
       case "unknown":
-        // Handle unexpected errors
         console.log("Unknown error occurred");
         break;
     }
@@ -843,7 +884,11 @@ export default function LoaderTest() {
 
 ```tsx
 // app/routes/action-test.tsx
-import { useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { z } from 'zod';
 import type { Route } from './+types/action-test';
 
@@ -887,7 +932,9 @@ export async function action({ request }: Route.ActionArgs): Promise<ActionData>
 }
 
 export default function ActionTest() {
-  const submitter = useDynamicSubmitter<typeof import("./action-test")>("/action-test");
+  const path = "/action-test" as const;
+  const submitter = useDynamicSubmitter<typeof import("./action-test")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div className="p-6">
@@ -923,27 +970,27 @@ export default function ActionTest() {
 
         <button
           type="submit"
-          disabled={submitter.state === "submitting"}
+          disabled={fetcher.state === "submitting"}
           className="bg-green-500 text-white px-4 py-2 rounded disabled:opacity-50"
         >
-          {submitter.state === "submitting" ? "Submitting..." : "Submit"}
+          {fetcher.state === "submitting" ? "Submitting..." : "Submit"}
         </button>
       </submitter.Form>
 
-      {submitter.data && (
+      {fetcher.data && (
         <div className="mt-6">
           <h2 className="text-lg font-semibold mb-2">Action Result:</h2>
           <pre className="bg-gray-200 p-3 rounded text-sm text-gray-800">
-            {JSON.stringify(submitter.data, null, 2)}
+            {JSON.stringify(fetcher.data, null, 2)}
           </pre>
 
-          {submitter.data.success ? (
+          {fetcher.data.success ? (
             <div className="mt-4 p-3 bg-green-100 rounded">
-              <p className="text-green-800">✅ {submitter.data.message}</p>
+              <p className="text-green-800">✅ {fetcher.data.message}</p>
             </div>
           ) : (
             <div className="mt-4 p-3 bg-red-100 rounded">
-              <p className="text-red-800">❌ {submitter.data.message}</p>
+              <p className="text-red-800">❌ {fetcher.data.message}</p>
             </div>
           )}
         </div>
@@ -958,8 +1005,8 @@ export default function ActionTest() {
 ```tsx
 // app/routes/combined-test.tsx
 import {
-  useDynamicFetcher,
   useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
   type RoutePath,
 } from '@firtoz/router-toolkit';
 import { useLoaderData } from 'react-router';
@@ -1033,8 +1080,9 @@ export async function action({ request }: Route.ActionArgs): Promise<ActionData>
 
 export default function CombinedTest() {
   const loaderData = useLoaderData<LoaderData>();
-  const fetcher = useDynamicFetcher<typeof import("./combined-test")>("/combined-test");
-  const submitter = useDynamicSubmitter<typeof import("./combined-test")>("/combined-test");
+  const path = "/combined-test" as const;
+  const submitter = useDynamicSubmitter<typeof import("./combined-test")>(path);
+  const actionFetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div className="p-6">
@@ -1087,10 +1135,10 @@ export default function CombinedTest() {
 
             <button
               type="submit"
-              disabled={submitter.state === "submitting"}
+              disabled={actionFetcher.state === "submitting"}
               className="bg-purple-500 text-white px-4 py-2 rounded disabled:opacity-50"
             >
-              {submitter.state === "submitting" ? "Updating..." : "Update User"}
+              {actionFetcher.state === "submitting" ? "Updating..." : "Update User"}
             </button>
           </submitter.Form>
         </div>
@@ -1100,21 +1148,21 @@ export default function CombinedTest() {
       <div className="mt-6">
         <h2 className="text-lg font-semibold mb-2">Action Status:</h2>
         <pre className="bg-gray-200 p-3 rounded text-sm text-gray-800">
-          {JSON.stringify({ state: submitter.state }, null, 2)}
+          {JSON.stringify({ state: actionFetcher.state }, null, 2)}
         </pre>
       </div>
 
-      {submitter.data && (
+      {actionFetcher.data && (
         <div className="mt-6">
           <h2 className="text-lg font-semibold mb-2">Action Result:</h2>
           <pre className="bg-gray-200 p-3 rounded text-sm text-gray-800">
-            {JSON.stringify(submitter.data, null, 2)}
+            {JSON.stringify(actionFetcher.data, null, 2)}
           </pre>
 
-          {submitter.data.success ? (
+          {actionFetcher.data.success ? (
             <div className="mt-4 p-3 bg-green-100 rounded">
-              <p className="text-green-800">✅ {submitter.data.message}</p>
-              {submitter.data.updatedUser && (
+              <p className="text-green-800">✅ {actionFetcher.data.message}</p>
+              {actionFetcher.data.updatedUser && (
                 <p className="text-sm text-green-700 mt-1">
                   Tip: Reload the page to see if data persists (it won't in this demo)
                 </p>
@@ -1122,7 +1170,7 @@ export default function CombinedTest() {
             </div>
           ) : (
             <div className="mt-4 p-3 bg-red-100 rounded">
-              <p className="text-red-800">❌ {submitter.data.message}</p>
+              <p className="text-red-800">❌ {actionFetcher.data.message}</p>
             </div>
           )}
         </div>
@@ -1134,12 +1182,12 @@ export default function CombinedTest() {
 
 ## MaybeError Utility
 
-The router-toolkit includes the `@firtoz/maybe-error` package, which provides type-safe error handling utilities using discriminated unions. This is perfect for handling operations that may fail in your route loaders and actions.
+`@firtoz/maybe-error` is a **dependency** of router-toolkit (it is installed with this package), but it is **not** re-exported from `@firtoz/router-toolkit`. Import `success`, `fail`, `MaybeError`, `exhaustiveGuard`, and related symbols **from `@firtoz/maybe-error`** so your imports match runtime and dependency boundaries stay clear.
 
 ### Basic Usage
 
 ```tsx
-import { success, fail, type MaybeError } from '@firtoz/router-toolkit';
+import { success, fail, type MaybeError } from '@firtoz/maybe-error';
 
 // Define a function that may fail
 function divide(a: number, b: number): MaybeError<number> {
@@ -1162,7 +1210,8 @@ if (result.success) {
 
 ```tsx
 // app/routes/user-profile.tsx
-import { success, fail, type MaybeError, type RoutePath } from '@firtoz/router-toolkit';
+import { success, fail, type MaybeError } from '@firtoz/maybe-error';
+import { type RoutePath } from '@firtoz/router-toolkit';
 import type { Route } from './+types/user-profile';
 
 interface User {
@@ -1230,7 +1279,12 @@ export default function UserProfile() {
 
 ```tsx
 // app/routes/create-user.tsx
-import { success, fail, type MaybeError, useDynamicSubmitter, type RoutePath } from '@firtoz/router-toolkit';
+import { success, fail, type MaybeError } from '@firtoz/maybe-error';
+import {
+  useDynamicSubmitter,
+  useDynamicSubmitterFetcher,
+  type RoutePath,
+} from '@firtoz/router-toolkit';
 import { z } from 'zod';
 import type { Route } from './+types/create-user';
 
@@ -1280,7 +1334,9 @@ export async function action({ request }: Route.ActionArgs): Promise<MaybeError<
 }
 
 export default function CreateUser() {
-  const submitter = useDynamicSubmitter<typeof import("./create-user")>("/create-user");
+  const path = "/create-user" as const;
+  const submitter = useDynamicSubmitter<typeof import("./create-user")>(path);
+  const fetcher = useDynamicSubmitterFetcher(submitter);
 
   return (
     <div>
@@ -1297,24 +1353,24 @@ export default function CreateUser() {
           <input id="email" name="email" type="email" required />
         </div>
         
-        <button type="submit" disabled={submitter.state === "submitting"}>
-          {submitter.state === "submitting" ? "Creating..." : "Create User"}
+        <button type="submit" disabled={fetcher.state === "submitting"}>
+          {fetcher.state === "submitting" ? "Creating..." : "Create User"}
         </button>
       </submitter.Form>
 
-      {submitter.data && (
+      {fetcher.data && (
         <div>
-          {submitter.data.success ? (
+          {fetcher.data.success ? (
             <div className="success">
               <h3>User Created!</h3>
-              <p>Name: {submitter.data.result.name}</p>
-              <p>Email: {submitter.data.result.email}</p>
+              <p>Name: {fetcher.data.result.name}</p>
+              <p>Email: {fetcher.data.result.email}</p>
             </div>
           ) : (
             <div className="errors">
               <h3>Validation Errors:</h3>
               <ul>
-                {submitter.data.error.map((error, index) => (
+                {fetcher.data.error.map((error, index) => (
                   <li key={index}>
                     <strong>{error.field}:</strong> {error.message}
                   </li>

package/dist/{chunk-HX57TC2S.js → chunk-F4324Q33.js}

@@ -29,5 +29,5 @@ var useDynamicFetcher = (path, ...args) => {
 };
 
 export { useDynamicFetcher };
-//# sourceMappingURL=chunk-HX57TC2S.js.map
-//# sourceMappingURL=chunk-HX57TC2S.js.map
+//# sourceMappingURL=chunk-F4324Q33.js.map
+//# sourceMappingURL=chunk-F4324Q33.js.map

package/dist/chunk-F4324Q33.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useDynamicFetcher.ts"],"names":[],"mappings":";;;;AAgNO,IAAM,iBAAA,GAAoB,CAChC,IAAA,EAAA,GACG,IAAA,KAoBC;AACJ,EAAA,MAAM,GAAA,GAAM,QAAQ,MAAM;AAEzB,IAAA,OAAO,IAAA,CAAK,IAAA,EAAM,GAAI,IAAY,CAAA;AAAA,EACnC,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,MAAM,UAAU,UAAA,CAA4B;AAAA,IAC3C,GAAA,EAAK,WAAW,GAAG,CAAA;AAAA,GACnB,CAAA;AAED,EAAA,MAAM,IAAA,GAAO,WAAA;AAAA,IACZ,CAAC,WAAA,KAAyC;AACzC,MAAA,IAAI,CAAC,WAAA,IAAe,MAAA,CAAO,KAAK,WAAW,CAAA,CAAE,WAAW,CAAA,EAAG;AAC1D,QAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AAAA,MACxB;AAGA,MAAA,MAAM,SAAS,IAAI,GAAA,CAAI,GAAA,EAAK,MAAA,CAAO,SAAS,MAAM,CAAA;AAClD,MAAA,KAAA,MAAW,CAAC,GAAA,EAAK,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAA,EAAG;AACvD,QAAA,MAAA,CAAO,YAAA,CAAa,GAAA,CAAI,GAAA,EAAK,KAAK,CAAA;AAAA,MACnC;AAEA,MAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAA,CAAO,QAAA,GAAW,OAAO,MAAM,CAAA;AAAA,IACpD,CAAA;AAAA,IACA,CAAC,OAAA,CAAQ,IAAA,EAAM,GAAG;AAAA,GACnB;AAEA,EAAA,OAAO;AAAA,IACN,GAAG,OAAA;AAAA,IACH;AAAA,GACD;AACD","file":"chunk-F4324Q33.js","sourcesContent":["/**\n * @fileoverview Type-safe dynamic data fetching hook for React Router 7\n *\n * This module provides a hook that creates a type-safe fetcher for loading data\n * from dynamic routes with full TypeScript inference for the loader response and route params.\n *\n * @example\n * ### Route Setup (`app/routes/api.users.$userId.ts`)\n *\n * First, set up your route with the required exports:\n *\n * ```typescript\n * import type { RoutePath } from \"@firtoz/router-toolkit\";\n *\n * // Export the route path for type inference\n * export const route: RoutePath<\"/api/users/:userId\"> = \"/api/users/:userId\";\n *\n * // Define the loader with a typed return value\n * export const loader = async ({ params }: LoaderFunctionArgs) => {\n *   const user = await db.users.findUnique({ where: { id: params.userId } });\n *   return {\n *     user: {\n *       id: user.id,\n *       email: user.email,\n *       displayName: user.displayName,\n *       createdAt: user.createdAt.toISOString(),\n *     },\n *   };\n * };\n * ```\n *\n * @example\n * ### Using the hook in a component\n *\n * ```tsx\n * import { useDynamicFetcher } from \"@firtoz/router-toolkit\";\n * import { useEffect } from \"react\";\n *\n * function UserProfile({ userId }: { userId: string }) {\n *   // Type-safe fetcher with full inference\n *   const fetcher = useDynamicFetcher<typeof import(\"./api.users.$userId\")>(\n *     \"/api/users/:userId\",\n *     { userId }\n *   );\n *\n *   // Load data on mount\n *   useEffect(() => {\n *     fetcher.load();\n *   }, [fetcher.load]);\n *\n *   // fetcher.data is fully typed: { user: { id, email, displayName, createdAt } } | undefined\n *   if (fetcher.state === \"loading\") {\n *     return <div>Loading...</div>;\n *   }\n *\n *   if (!fetcher.data) {\n *     return <div>No user found</div>;\n *   }\n *\n *   return (\n *     <div>\n *       <h1>{fetcher.data.user.displayName}</h1>\n *       <p>{fetcher.data.user.email}</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ### Loading with query parameters\n *\n * ```tsx\n * function SearchResults() {\n *   const fetcher = useDynamicFetcher<typeof import(\"./api.search\")>(\"/api/search\");\n *\n *   const handleSearch = (query: string, page: number) => {\n *     // Pass query params to the load function\n *     fetcher.load({ q: query, page: String(page) });\n *   };\n *\n *   return (\n *     <div>\n *       <input onChange={(e) => handleSearch(e.target.value, 1)} />\n *       {fetcher.data?.results.map((result) => (\n *         <div key={result.id}>{result.title}</div>\n *       ))}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ### Combining with useDynamicSubmitter for full CRUD\n *\n * You can use `useDynamicFetcher` alongside `useDynamicSubmitter` to create\n * complete CRUD interfaces with type safety:\n *\n * ```tsx\n * import { useDynamicFetcher, useDynamicSubmitter } from \"@firtoz/router-toolkit\";\n * import { useEffect, useState } from \"react\";\n *\n * function PostEditor({ postId }: { postId: string }) {\n *   const fetcher = useDynamicFetcher<typeof import(\"./api.posts.$postId\")>(\n *     \"/api/posts/:postId\",\n *     { postId }\n *   );\n *\n *   const submitter = useDynamicSubmitter<typeof import(\"./api.posts.$postId\")>(\n *     \"/api/posts/:postId\",\n *     { postId }\n *   );\n *\n *   const [saving, setSaving] = useState(false);\n *\n *   useEffect(() => {\n *     fetcher.load();\n *   }, [fetcher.load]);\n *\n *   const handleSave = async (title: string, content: string) => {\n *     setSaving(true);\n *     try {\n *       await submitter.submitJson({ title, content }, { method: \"PUT\" });\n *       fetcher.load();\n *     } finally {\n *       setSaving(false);\n *     }\n *   };\n *\n *   if (!fetcher.data) return <div>Loading...</div>;\n *\n *   return (\n *     <form onSubmit={(e) => {\n *       e.preventDefault();\n *       const form = new FormData(e.currentTarget);\n *       void handleSave(form.get(\"title\") as string, form.get(\"content\") as string);\n *     }}>\n *       <input name=\"title\" defaultValue={fetcher.data.post.title} />\n *       <textarea name=\"content\" defaultValue={fetcher.data.post.content} />\n *       <button type=\"submit\" disabled={saving}>\n *         {saving ? \"Saving...\" : \"Save\"}\n *       </button>\n *     </form>\n *   );\n * }\n * ```\n *\n * **Submitter UX:** Local `saving` around `await submitter.submitJson` fits a promise-first save +\n * reload flow. For declarative `fetcher.state` / `fetcher.data` in JSX (e.g. with `submitter.Form`),\n * use {@link useDynamicSubmitterFetcher} instead. The package README documents trade-offs under\n * **useDynamicSubmitter** (heading “Local useState vs useDynamicSubmitterFetcher”).\n */\n\nimport { useCallback, useMemo } from \"react\";\nimport { href, useFetcher } from \"react-router\";\nimport type { HrefArgs } from \"./types/HrefArgs\";\nimport type { RouteWithLoaderModule } from \"./types/RouteWithLoaderModule\";\n\n/**\n * Creates a type-safe fetcher for loading data from dynamic routes.\n *\n * This hook provides full TypeScript inference for:\n * - Route parameters (from the route path)\n * - Loader response type (from the route's loader export)\n *\n * @template TInfo - The route module type (use `typeof import(\"./route-file\")`)\n *\n * @param path - The route path (must match the route's `route` export)\n * @param args - Route parameters (if the route has dynamic segments like `:id`)\n *\n * @returns An extended fetcher object with:\n * - `load` - Function to load data, optionally with query parameters\n * - `data` - Response data from the loader (typed)\n * - `state` - Fetcher state (\"idle\" | \"loading\" | \"submitting\")\n * - All other useFetcher properties (except `submit`)\n *\n * @example\n * ### Basic usage\n *\n * ```typescript\n * // In your route file (app/routes/api.products.$productId.ts):\n * export const route: RoutePath<\"/api/products/:productId\"> = \"/api/products/:productId\";\n * export const loader = async ({ params }: LoaderFunctionArgs) => {\n *   return { product: await getProduct(params.productId) };\n * };\n *\n * // In your component:\n * const fetcher = useDynamicFetcher<typeof import(\"./api.products.$productId\")>(\n *   \"/api/products/:productId\",\n *   { productId: \"abc123\" }\n * );\n *\n * useEffect(() => {\n *   fetcher.load();\n * }, [fetcher.load]);\n *\n * // fetcher.data is typed as { product: Product } | undefined\n * ```\n *\n * @example\n * ### With query parameters\n *\n * ```typescript\n * const fetcher = useDynamicFetcher<typeof import(\"./api.search\")>(\"/api/search\");\n *\n * // Load with query params: /api/search?q=hello&limit=10\n * fetcher.load({ q: \"hello\", limit: \"10\" });\n * ```\n */\nexport const useDynamicFetcher = <TInfo extends RouteWithLoaderModule>(\n\tpath: TInfo[\"route\"],\n\t...args: TInfo[\"route\"] extends \"undefined\"\n\t\t? HrefArgs<\"/\">\n\t\t: HrefArgs<TInfo[\"route\"]>\n): Omit<ReturnType<typeof useFetcher<TInfo[\"loader\"]>>, \"load\" | \"submit\"> & {\n\t/**\n\t * Load data from the route's loader.\n\t *\n\t * @param queryParams - Optional query parameters to append to the URL\n\t * @returns A promise that resolves when the load is complete\n\t *\n\t * @example\n\t * ```typescript\n\t * // Load without query params\n\t * fetcher.load();\n\t *\n\t * // Load with query params\n\t * fetcher.load({ page: \"2\", sort: \"name\" });\n\t * ```\n\t */\n\tload: (queryParams?: Record<string, string>) => Promise<void>;\n} => {\n\tconst url = useMemo(() => {\n\t\t// biome-ignore lint/suspicious/noExplicitAny: Intentional\n\t\treturn href(path, ...(args as any));\n\t}, [path, args]);\n\n\tconst fetcher = useFetcher<TInfo[\"loader\"]>({\n\t\tkey: `fetcher-${url}`,\n\t});\n\n\tconst load = useCallback(\n\t\t(queryParams?: Record<string, string>) => {\n\t\t\tif (!queryParams || Object.keys(queryParams).length === 0) {\n\t\t\t\treturn fetcher.load(url);\n\t\t\t}\n\n\t\t\t// Build URL with query parameters\n\t\t\tconst urlObj = new URL(url, window.location.origin);\n\t\t\tfor (const [key, value] of Object.entries(queryParams)) {\n\t\t\t\turlObj.searchParams.set(key, value);\n\t\t\t}\n\n\t\t\treturn fetcher.load(urlObj.pathname + urlObj.search);\n\t\t},\n\t\t[fetcher.load, url],\n\t);\n\n\treturn {\n\t\t...fetcher,\n\t\tload,\n\t};\n};\n"]}

package/dist/chunk-SBJFTOWW.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-SBJFTOWW.js.map
+//# sourceMappingURL=chunk-SBJFTOWW.js.map

package/dist/{chunk-2RLEUOSR.js.map → chunk-SBJFTOWW.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-2RLEUOSR.js","sourcesContent":[]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-SBJFTOWW.js"}

package/dist/{chunk-5MOCOBGV.js → chunk-UF5QHE5K.js}

@@ -41,5 +41,5 @@ var formAction = ({
 };
 
 export { formAction };
-//# sourceMappingURL=chunk-5MOCOBGV.js.map
-//# sourceMappingURL=chunk-5MOCOBGV.js.map
+//# sourceMappingURL=chunk-UF5QHE5K.js.map
+//# sourceMappingURL=chunk-UF5QHE5K.js.map

package/dist/chunk-UF5QHE5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/formAction.ts"],"names":[],"mappings":";;;;;AAuUO,IAAM,aAAa,CAKxB;AAAA,EACD,MAAA;AAAA,EACA;AACD,CAAA,KAA8D;AAC7D,EAAA,OAAO,OACN,IAAA,KACoE;AACpE,IAAA,IAAI;AACH,MAAA,MAAM,WAAA,GAAc,IAAA,CAAK,OAAA,CAAQ,OAAA,CAAQ,IAAI,cAAc,CAAA;AAC3D,MAAA,MAAM,MAAA,GAAS,WAAA,EAAa,QAAA,CAAS,kBAAkB,CAAA,IAAK,KAAA;AAE5D,MAAA,MAAM,WAAA,GAAc,SACjB,MAAM,MAAA,CAAO,eAAe,MAAM,IAAA,CAAK,QAAQ,IAAA,EAAM,IACrD,MAAM,GAAA,CACL,SAAS,MAAM,CAAA,CACf,eAAe,MAAM,IAAA,CAAK,OAAA,CAAQ,QAAA,EAAU,CAAA;AAEhD,MAAA,IAAI,CAAC,YAAY,OAAA,EAAS;AACzB,QAAA,OAAO,IAAA,CAAK;AAAA,UACX,IAAA,EAAM,YAAA;AAAA,UACN,OAAO,CAAA,CAAE,YAAA;AAAA,YACR,WAAA,CAAY;AAAA;AACb,SACA,CAAA;AAAA,MACF;AAEA,MAAA,MAAM,aAAA,GAAgB,MAAM,OAAA,CAAQ,IAAA,EAAM,YAAY,IAAI,CAAA;AAC1D,MAAA,IAAI,CAAC,cAAc,OAAA,EAAS;AAC3B,QAAA,OAAO,IAAA,CAAK;AAAA,UACX,IAAA,EAAM,SAAA;AAAA,UACN,OAAO,aAAA,CAAc;AAAA,SACrB,CAAA;AAAA,MACF;AAEA,MAAA,OAAO,aAAA;AAAA,IACR,SAAS,KAAA,EAAO;AAEf,MAAA,IAAI,iBAAiB,QAAA,EAAU;AAC9B,QAAA,MAAM,KAAA;AAAA,MACP;AAEA,MAAA,OAAA,CAAQ,KAAA,CAAM,mCAAmC,KAAK,CAAA;AACtD,MAAA,OAAO,IAAA,CAAK;AAAA,QACX,IAAA,EAAM;AAAA,OACN,CAAA;AAAA,IACF;AAAA,EACD,CAAA;AACD","file":"chunk-UF5QHE5K.js","sourcesContent":["/**\n * @fileoverview Type-safe form action utility for React Router 7\n *\n * This module provides a wrapper for React Router actions that handles form data and JSON\n * validation using Zod schemas and provides structured error handling with MaybeError.\n *\n * Supports both:\n * - **JSON requests** (`Content-Type: application/json`) - parsed with `request.json()` and validated directly\n * - **FormData requests** (`multipart/form-data` or `application/x-www-form-urlencoded`) - parsed with `request.formData()` and validated with zod-form-data\n *\n * ## Overview\n *\n * `formAction` is designed to work seamlessly with `useDynamicSubmitter` and `useDynamicFetcher`\n * to provide end-to-end type safety for your React Router forms.\n *\n * @example\n * ### Basic Route Setup (`app/routes/auth.login.tsx`)\n *\n * ```typescript\n * import { z } from \"zod\";\n * import { formAction, type RoutePath } from \"@firtoz/router-toolkit\";\n * import { success, fail } from \"@firtoz/maybe-error\";\n *\n * // 1. Export the route path for type inference\n * export const route: RoutePath<\"/auth/login\"> = \"/auth/login\";\n *\n * // 2. Define your form schema with Zod\n * export const formSchema = z.object({\n *   email: z.string().email(\"Please enter a valid email\"),\n *   password: z.string().min(8, \"Password must be at least 8 characters\"),\n *   rememberMe: z.boolean().optional().default(false),\n * });\n *\n * // 3. Create the action with formAction\n * export const action = formAction({\n *   schema: formSchema,\n *   handler: async ({ request }, data) => {\n *     // data is fully typed: { email: string, password: string, rememberMe: boolean }\n *     try {\n *       const user = await authenticateUser(data.email, data.password);\n *       if (data.rememberMe) {\n *         await createPersistentSession(user.id);\n *       }\n *       return success({ user });\n *     } catch (error) {\n *       return fail(\"Invalid email or password\");\n *     }\n *   },\n * });\n * ```\n *\n * @example\n * ### Using with useDynamicSubmitter\n *\n * The route above can be used with `useDynamicSubmitter` for type-safe form submissions.\n * The hook exposes {@link UseDynamicSubmitterResult.fetcherKey} (built with\n * {@link dynamicSubmitterFetcherKey}) so a parallel `useFetcher` stays aligned; prefer\n * {@link useDynamicSubmitterFetcher} instead of hand-rolling the key.\n *\n * The **optional** {@link useDynamicSubmitterFetcher} below is only for declarative UI that reads\n * `fetcher.state` / `fetcher.data` in render (same submission as `submitter`). For promise-first\n * flows, omit it and use `await submitter.submitJson(...)` plus local `useState` for pending.\n * Use {@link UseDynamicSubmitterOptions.keySuffix} when two submitters target the same URL and\n * must not share fetcher state.\n *\n * ```tsx\n * import {\n *   useDynamicSubmitter,\n *   useDynamicSubmitterFetcher,\n * } from \"@firtoz/router-toolkit\";\n *\n * function LoginForm() {\n *   const submitter = useDynamicSubmitter<typeof import(\"./auth.login\")>(\"/auth/login\");\n *   const fetcher = useDynamicSubmitterFetcher(submitter);\n *\n *   // Option 1: Submit as JSON (defaults to POST)\n *   const handleLoginJson = async () => {\n *     await submitter.submitJson({\n *       email: \"user@example.com\",\n *       password: \"secret123\",\n *       rememberMe: true,\n *     });\n *   };\n *\n *   // Option 2: Form + useDynamicSubmitterFetcher for reactive state/data\n *   return (\n *     <submitter.Form>\n *       <input name=\"email\" type=\"email\" placeholder=\"Email\" />\n *       <input name=\"password\" type=\"password\" placeholder=\"Password\" />\n *       <label>\n *         <input name=\"rememberMe\" type=\"checkbox\" /> Remember me\n *       </label>\n *       <button type=\"submit\" disabled={fetcher.state === \"submitting\"}>\n *         {fetcher.state === \"submitting\" ? \"Logging in...\" : \"Login\"}\n *       </button>\n *\n *       {fetcher.data && !fetcher.data.success && (\n *         <div className=\"error\">\n *           {fetcher.data.error.type === \"validation\"\n *             ? \"Please check your inputs\"\n *             : fetcher.data.error.type === \"handler\"\n *               ? fetcher.data.error.error\n *               : \"An unexpected error occurred\"}\n *         </div>\n *       )}\n *     </submitter.Form>\n *   );\n * }\n * ```\n *\n * @example\n * ### Combined loader + action route (`app/routes/admin.posts.$id.tsx`)\n *\n * You can combine `formAction` with a loader for full CRUD operations:\n *\n * ```typescript\n * import { z } from \"zod\";\n * import { formAction, type RoutePath } from \"@firtoz/router-toolkit\";\n * import { success, fail } from \"@firtoz/maybe-error\";\n * import type { LoaderFunctionArgs } from \"react-router\";\n *\n * export const route: RoutePath<\"/admin/posts/:id\"> = \"/admin/posts/:id\";\n *\n * // Loader for fetching data (used with useDynamicFetcher)\n * export const loader = async ({ params }: LoaderFunctionArgs) => {\n *   const post = await db.posts.findUnique({ where: { id: params.id } });\n *   return { post };\n * };\n *\n * // Form schema for updates\n * export const formSchema = z.object({\n *   title: z.string().min(1, \"Title is required\"),\n *   content: z.string().min(10, \"Content must be at least 10 characters\"),\n *   published: z.boolean().optional().default(false),\n * });\n *\n * // Action for handling form submissions (used with useDynamicSubmitter)\n * export const action = formAction({\n *   schema: formSchema,\n *   handler: async ({ params }, data) => {\n *     const updated = await db.posts.update({\n *       where: { id: params.id },\n *       data,\n *     });\n *     return success({ post: updated });\n *   },\n * });\n * ```\n *\n * @example\n * ### Full CRUD component using both hooks\n *\n * ```tsx\n * import { useDynamicFetcher, useDynamicSubmitter } from \"@firtoz/router-toolkit\";\n * import { useEffect, useState } from \"react\";\n *\n * function PostEditor({ postId }: { postId: string }) {\n *   const fetcher = useDynamicFetcher<typeof import(\"./admin.posts.$id\")>(\n *     \"/admin/posts/:id\",\n *     { id: postId }\n *   );\n *\n *   const submitter = useDynamicSubmitter<typeof import(\"./admin.posts.$id\")>(\n *     \"/admin/posts/:id\",\n *     { id: postId }\n *   );\n *\n *   const [saving, setSaving] = useState(false);\n *\n *   useEffect(() => {\n *     fetcher.load();\n *   }, [fetcher.load]);\n *\n *   if (fetcher.state === \"loading\" && !fetcher.data) {\n *     return <div>Loading...</div>;\n *   }\n *\n *   const post = fetcher.data?.post;\n *\n *   return (\n *     <submitter.Form\n *       method=\"PUT\"\n *       onSubmit={async (e) => {\n *         e.preventDefault();\n *         setSaving(true);\n *         try {\n *           const fd = new FormData(e.currentTarget);\n *           await submitter.submit(fd, { method: \"PUT\" });\n *           fetcher.load();\n *         } finally {\n *           setSaving(false);\n *         }\n *       }}\n *     >\n *       <input name=\"title\" defaultValue={post?.title} />\n *       <textarea name=\"content\" defaultValue={post?.content} />\n *       <label>\n *         <input name=\"published\" type=\"checkbox\" defaultChecked={post?.published} />\n *         Published\n *       </label>\n *       <button type=\"submit\" disabled={saving}>\n *         {saving ? \"Saving...\" : \"Save\"}\n *       </button>\n *     </submitter.Form>\n *   );\n * }\n * ```\n */\n\nimport { fail, type MaybeError } from \"@firtoz/maybe-error\";\nimport type { ActionFunctionArgs } from \"react-router\";\nimport { z } from \"zod\";\nimport { zfd } from \"zod-form-data\";\n\n/**\n * Error types that can be returned by formAction\n */\nexport type FormActionError<TError, TSchema extends z.ZodTypeAny> =\n\t| {\n\t\t\ttype: \"validation\";\n\t\t\terror: ReturnType<typeof z.treeifyError<z.infer<TSchema>>>;\n\t  }\n\t| {\n\t\t\ttype: \"handler\";\n\t\t\terror: TError;\n\t  }\n\t| {\n\t\t\ttype: \"unknown\";\n\t  };\n\n/**\n * Configuration object for formAction\n *\n * @template TSchema - The Zod schema type for form validation\n * @template TResult - The success result type from the handler\n * @template TError - The error type that the handler can return\n * @template ActionArgs - The action function arguments type (defaults to ActionFunctionArgs)\n */\nexport interface FormActionConfig<\n\tTSchema extends z.ZodTypeAny,\n\tTResult = undefined,\n\tTError = string,\n\tActionArgs extends ActionFunctionArgs = ActionFunctionArgs,\n> {\n\t/**\n\t * Zod schema to validate the form data against\n\t */\n\tschema: TSchema;\n\t/**\n\t * Handler function that processes the validated form data\n\t *\n\t * @param args - The original action function arguments\n\t * @param data - The validated form data (typed according to the schema)\n\t * @returns A promise that resolves to a MaybeError with the result or error\n\t */\n\thandler: (\n\t\targs: ActionArgs,\n\t\tdata: z.infer<TSchema>,\n\t) => Promise<MaybeError<TResult, TError>>;\n}\n\n/**\n * Creates a type-safe form action handler that validates form data or JSON and provides structured error handling.\n *\n * This function wraps a React Router action to:\n * 1. Detect content type (JSON vs FormData) from the request headers\n * 2. Parse and validate the request body using a Zod schema\n * 3. Call the provided handler with validated data\n * 4. Return structured errors for validation failures, handler errors, or unknown errors\n * 5. Preserve React Router Response objects (redirects, etc.) by re-throwing them\n *\n * **Content-Type handling:**\n * - `application/json`: Uses `request.json()` and validates directly with the schema\n * - `multipart/form-data` or `application/x-www-form-urlencoded`: Uses `request.formData()` and validates with zod-form-data\n *\n * @template TSchema - The Zod schema type for form validation\n * @template TResult - The success result type from the handler (defaults to undefined)\n * @template TError - The error type that the handler can return (defaults to string)\n * @template ActionArgs - The action function arguments type (defaults to ActionFunctionArgs)\n *\n * @param config - Configuration object containing schema and handler\n * @returns An action function that can be used with React Router\n *\n * @example\n * ```typescript\n * import { z } from \"zod\";\n * import { formAction } from \"@firtoz/router-toolkit\";\n * import { success, fail } from \"@firtoz/maybe-error\";\n *\n * const loginSchema = z.object({\n *   email: z.string().email(\"Invalid email format\"),\n *   password: z.string().min(8, \"Password must be at least 8 characters\"),\n * });\n *\n * export const action = formAction({\n *   schema: loginSchema,\n *   handler: async (args, data) => {\n *     try {\n *       const user = await authenticateUser(data.email, data.password);\n *       return success(user);\n *     } catch (error) {\n *       return fail(\"Invalid credentials\");\n *     }\n *   },\n * });\n * ```\n *\n * @example\n * ```typescript\n * // In your component, handle the different error types:\n * const actionData = useActionData<typeof action>();\n *\n * if (actionData && !actionData.success) {\n *   switch (actionData.error.type) {\n *     case \"validation\":\n *       // Handle validation errors - actionData.error.error contains field-specific errors\n *       break;\n *     case \"handler\":\n *       // Handle business logic errors - actionData.error.error contains your custom error\n *       break;\n *     case \"unknown\":\n *       // Handle unexpected errors\n *       break;\n *   }\n * }\n * ```\n */\nexport const formAction = <\n\tTSchema extends z.ZodTypeAny,\n\tTResult = undefined,\n\tTError = string,\n\tActionArgs extends ActionFunctionArgs = ActionFunctionArgs,\n>({\n\tschema,\n\thandler,\n}: FormActionConfig<TSchema, TResult, TError, ActionArgs>) => {\n\treturn async (\n\t\targs: ActionArgs,\n\t): Promise<MaybeError<TResult, FormActionError<TError, TSchema>>> => {\n\t\ttry {\n\t\t\tconst contentType = args.request.headers.get(\"Content-Type\");\n\t\t\tconst isJson = contentType?.includes(\"application/json\") ?? false;\n\n\t\t\tconst parseResult = isJson\n\t\t\t\t? await schema.safeParseAsync(await args.request.json())\n\t\t\t\t: await zfd\n\t\t\t\t\t\t.formData(schema)\n\t\t\t\t\t\t.safeParseAsync(await args.request.formData());\n\n\t\t\tif (!parseResult.success) {\n\t\t\t\treturn fail({\n\t\t\t\t\ttype: \"validation\" as const,\n\t\t\t\t\terror: z.treeifyError<z.infer<TSchema>>(\n\t\t\t\t\t\tparseResult.error as z.core.$ZodError<z.infer<TSchema>>,\n\t\t\t\t\t),\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst handlerResult = await handler(args, parseResult.data);\n\t\t\tif (!handlerResult.success) {\n\t\t\t\treturn fail({\n\t\t\t\t\ttype: \"handler\" as const,\n\t\t\t\t\terror: handlerResult.error,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn handlerResult;\n\t\t} catch (error) {\n\t\t\t// Re-throw Response objects (redirects, etc.) to preserve React Router behavior\n\t\t\tif (error instanceof Response) {\n\t\t\t\tthrow error;\n\t\t\t}\n\n\t\t\tconsole.error(\"Unexpected error in formAction:\", error);\n\t\t\treturn fail({\n\t\t\t\ttype: \"unknown\" as const,\n\t\t\t});\n\t\t}\n\t};\n};\n"]}