@firtoz/router-toolkit 5.5.1 → 6.0.0

package/README.md

@@ -13,7 +13,7 @@ Type-safe React Router 7 framework mode helpers with enhanced fetching, form sub
 - ✅ **Type-safe routing** - Full TypeScript support with React Router 7 framework mode
 - 🚀 **Enhanced fetching** - Dynamic fetchers with caching and query parameter support
 - 📝 **Form submission** - Type-safe form handling with Zod validation
-- 📤 **Concurrent submissions** - Multiple parallel submissions per action with per-operation tracking and optimistic UI (`useConcurrentDynamicSubmitter`)
+- 📤 **Concurrent submissions** - Multiple parallel submissions per action with per-operation tracking and optimistic UI (`ConcurrentSubmitterProvider` + `useConcurrentSubmitter`)
 - 🔄 **State tracking** - Monitor fetcher state changes with ease
 - 🎯 **Zero configuration** - Works out of the box with React Router 7
 - 📦 **Tree-shakeable** - Import only what you need
@@ -279,25 +279,37 @@ export default function ContactForm() {
 }
 ```
 
-### `useConcurrentDynamicSubmitter`
+### `ConcurrentSubmitterProvider` + `useConcurrentSubmitter`
 
-Run multiple submissions to the same action in parallel, each tracked independently. No single fetcher; each call returns `{ id, promise }` and adds an entry to `operations` with `submittedData` (for optimistic UI) and `data` when done.
+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.
 
-- **`submitJson(data)`** — POST JSON; `submittedData` is the payload you send.
-- **`submitFormData(formData, submittedData?)`** — POST multipart/form-data (e.g. file uploads). Optional `submittedData` is a serializable object for the operations list (e.g. `{ type: "upload", label: "photo.jpg" }`); FormData/File are not stored in state.
+- **`submitJson(path, args, data, options?)`** — POST JSON to the given route; path/args are per call.
+- **`submitFormData(path, args, formData, submittedData?, options?)`** — POST multipart/form-data. Optional `submittedData` is a serializable object for the operations list (e.g. `{ type: "upload", label: "photo.jpg" }`); FormData/File are not stored in state.
 
 ```tsx
-import { useConcurrentDynamicSubmitter } from '@firtoz/router-toolkit';
+// Root (e.g. root.tsx)
+import { ConcurrentSubmitterProvider } from '@firtoz/router-toolkit';
+
+export default function App() {
+  return (
+    <ConcurrentSubmitterProvider>
+      <Outlet />
+    </ConcurrentSubmitterProvider>
+  );
+}
+
+// Any route or component
+import { useConcurrentSubmitter } from '@firtoz/router-toolkit';
 
 function UploadList() {
-  const { operations, submitFormData } = useConcurrentDynamicSubmitter<
+  const { operations, submitFormData } = useConcurrentSubmitter<
     typeof import("./api.upload")
-  >("/api/upload");
+  >();
 
   const handleUpload = (file: File) => {
     const fd = new FormData();
     fd.set("file", file);
-    submitFormData(fd, { type: "upload", label: file.name });
+    submitFormData("/api/upload", undefined, fd, { type: "upload", label: file.name });
   };
 
   return (
@@ -321,8 +333,7 @@ function UploadList() {
 ```
 
 - **`operations`**: `Record<string, Operation<T>>` — each operation has `id`, `status` (`"pending"` | `"done"` | `"error"`), `submittedData` (payload or display object), and when done `data` (action response).
-- **`submitJson(data)`**: returns `{ id, promise }`.
-- **`submitFormData(formData, submittedData?)`**: returns `{ id, promise }`; `submittedData` defaults to `{}` and is used only for display in the operations list.
+- **`submitJson(path, args, data, options?)`** / **`submitFormData(path, args, formData, submittedData?, options?)`**: each returns `{ id, promise }`. `submittedData` defaults to `{}` and is used only for display in the operations list.
 
 ### `useFetcherStateChanged`
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@firtoz/router-toolkit",
-	"version": "5.5.1",
+	"version": "6.0.0",
 	"description": "Type-safe React Router 7 framework mode helpers with enhanced fetching, form submission, and state management",
 	"main": "./src/index.ts",
 	"module": "./src/index.ts",

package/src/ConcurrentSubmitterProvider.tsx

@@ -0,0 +1,329 @@
+/**
+ * @fileoverview Global provider for concurrent form submissions via React Router fetchers.
+ *
+ * Mounts components that use useFetcher with unique keys so each submission goes through
+ * the framework (correct .data URL and turbo-stream decoding). Path/args are per submission.
+ *
+ * @example
+ * ```tsx
+ * // Root:
+ * <ConcurrentSubmitterProvider>
+ *   <Outlet />
+ * </ConcurrentSubmitterProvider>
+ *
+ * // Anywhere: use useConcurrentSubmitter() from "./useConcurrentSubmitter"
+ * ```
+ */
+
+import React, {
+	useCallback,
+	useMemo,
+	useRef,
+	useState,
+	createContext,
+} from "react";
+import { href, useFetcher } from "react-router";
+import type { SubmitTarget } from "react-router";
+
+/** Status of a single concurrent submission */
+export type OperationStatus = "pending" | "done" | "error";
+
+/** One tracked submission: pending → done (or error). Includes submitted payload for optimistic UI. */
+export type Operation<TResponse = unknown, TFormData = unknown> = {
+	id: string;
+	status: OperationStatus;
+	/** Data that was sent (for optimistic display while pending, or to show what was submitted) */
+	submittedData: TFormData;
+	/** Response from the action when status is "done" */
+	data?: TResponse;
+	error?: unknown;
+};
+
+/** Result of submitJson / submitFormData: id to look up in operations, promise to await */
+export type SubmitJsonResult<T> = {
+	id: string;
+	promise: Promise<T>;
+};
+
+/** Optional serializable payload for FormData submissions (for display in operations list). */
+export type FormDataSubmittedData = Record<string, unknown>;
+
+export type SubmitJsonOptions = {
+	method?: "POST" | "PUT" | "PATCH" | "DELETE";
+};
+
+export type SubmitFormDataOptions = {
+	headers?: HeadersInit;
+	method?: "POST" | "PUT" | "PATCH" | "DELETE";
+};
+
+type PendingJson = {
+	kind: "json";
+	actionUrl: string;
+	method: string;
+	encType: "application/json";
+	data: unknown;
+};
+
+type PendingForm = {
+	kind: "form";
+	actionUrl: string;
+	method: string;
+	encType: "multipart/form-data";
+	formData: FormData;
+};
+
+type PendingSubmit = PendingJson | PendingForm;
+
+type OperationState = Operation<unknown, unknown> & {
+	resolve: (value: unknown) => void;
+	reject: (error: unknown) => void;
+	pendingSubmit?: PendingSubmit;
+};
+
+function buildActionUrl(path: string, args?: Record<string, string>): string {
+	// biome-ignore lint/suspicious/noExplicitAny: path is dynamic from caller
+	return args ? href(path as any, args as any) : (href(path as any) as string);
+}
+
+type ContextValue = {
+	operations: Record<string, Operation<unknown, unknown>>;
+	addJsonSubmission: (
+		path: string,
+		args: Record<string, string> | undefined,
+		data: unknown,
+		options?: SubmitJsonOptions,
+	) => SubmitJsonResult<unknown>;
+	addFormSubmission: (
+		path: string,
+		args: Record<string, string> | undefined,
+		formData: FormData,
+		submittedData: FormDataSubmittedData,
+		options?: SubmitFormDataOptions,
+	) => SubmitJsonResult<unknown>;
+	onSettle: (id: string, data?: unknown, error?: unknown) => void;
+};
+
+export const ConcurrentSubmitterContext = createContext<ContextValue | null>(
+	null,
+);
+
+function FetcherRunner({
+	id,
+	pendingSubmit,
+	onSettle,
+}: {
+	id: string;
+	pendingSubmit: PendingSubmit;
+	onSettle: (id: string, data?: unknown, error?: unknown) => void;
+}) {
+	const fetcher = useFetcher({ key: id });
+	const submittedRef = useRef(false);
+	const settledRef = useRef(false);
+	const prevStateRef = useRef(fetcher.state);
+
+	React.useEffect(() => {
+		if (!pendingSubmit || submittedRef.current) return;
+		submittedRef.current = true;
+
+		if (pendingSubmit.kind === "json") {
+			fetcher.submit(pendingSubmit.data as SubmitTarget, {
+				action: pendingSubmit.actionUrl,
+				method: pendingSubmit.method as "POST" | "PUT" | "PATCH" | "DELETE",
+				encType: "application/json",
+			});
+		} else {
+			fetcher.submit(pendingSubmit.formData, {
+				action: pendingSubmit.actionUrl,
+				method: pendingSubmit.method as "POST" | "PUT" | "PATCH" | "DELETE",
+				encType: "multipart/form-data",
+			});
+		}
+	}, [pendingSubmit, fetcher.submit]);
+
+	React.useEffect(() => {
+		const wasSubmitting = prevStateRef.current === "submitting";
+		prevStateRef.current = fetcher.state;
+
+		if (wasSubmitting && fetcher.state === "idle" && !settledRef.current) {
+			settledRef.current = true;
+			if (fetcher.data !== undefined) {
+				onSettle(id, fetcher.data, undefined);
+			} else {
+				const err =
+					(fetcher as { error?: unknown }).error ??
+					new Error("Submission failed");
+				onSettle(id, undefined, err);
+			}
+		}
+	}, [id, fetcher.state, fetcher.data, onSettle]);
+
+	return null;
+}
+
+export function ConcurrentSubmitterProvider({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const nextIdRef = useRef(0);
+	const [operationsState, setOperationsState] = useState<
+		Record<string, OperationState>
+	>({});
+
+	const onSettle = useCallback(
+		(id: string, data?: unknown, error?: unknown) => {
+			setOperationsState((prev) => {
+				const op = prev[id];
+				if (!op) return prev;
+				const { resolve, reject, ...rest } = op;
+				if (error !== undefined) {
+					reject(error);
+					return {
+						...prev,
+						[id]: {
+							...rest,
+							status: "error" as OperationStatus,
+							error,
+							resolve,
+							reject,
+							pendingSubmit: undefined,
+						},
+					};
+				}
+				resolve(data);
+				return {
+					...prev,
+					[id]: {
+						...rest,
+						status: "done" as OperationStatus,
+						data,
+						resolve,
+						reject,
+						pendingSubmit: undefined,
+					},
+				};
+			});
+		},
+		[],
+	);
+
+	const addJsonSubmission = useCallback(
+		(
+			path: string,
+			args: Record<string, string> | undefined,
+			data: unknown,
+			options: SubmitJsonOptions = {},
+		): SubmitJsonResult<unknown> => {
+			const id = `op-${++nextIdRef.current}`;
+			const method = options.method ?? "POST";
+			const actionUrl = buildActionUrl(path, args);
+
+			let resolve!: (value: unknown) => void;
+			let reject!: (error: unknown) => void;
+			const promise = new Promise<unknown>((res, rej) => {
+				resolve = res;
+				reject = rej;
+			});
+
+			const pendingSubmit: PendingJson = {
+				kind: "json",
+				actionUrl,
+				method,
+				encType: "application/json",
+				data,
+			};
+
+			const op: OperationState = {
+				id,
+				status: "pending",
+				submittedData: data as Record<string, unknown>,
+				resolve,
+				reject,
+				pendingSubmit,
+			};
+
+			setOperationsState((prev) => ({ ...prev, [id]: op }));
+			return { id, promise };
+		},
+		[],
+	);
+
+	const addFormSubmission = useCallback(
+		(
+			path: string,
+			args: Record<string, string> | undefined,
+			formData: FormData,
+			submittedData: FormDataSubmittedData,
+			options: SubmitFormDataOptions = {},
+		): SubmitJsonResult<unknown> => {
+			const id = `op-${++nextIdRef.current}`;
+			const method = options.method ?? "POST";
+			const actionUrl = buildActionUrl(path, args);
+
+			let resolve!: (value: unknown) => void;
+			let reject!: (error: unknown) => void;
+			const promise = new Promise<unknown>((res, rej) => {
+				resolve = res;
+				reject = rej;
+			});
+
+			const pendingSubmit: PendingForm = {
+				kind: "form",
+				actionUrl,
+				method,
+				encType: "multipart/form-data",
+				formData,
+			};
+
+			const op: OperationState = {
+				id,
+				status: "pending",
+				submittedData,
+				resolve,
+				reject,
+				pendingSubmit,
+			};
+
+			setOperationsState((prev) => ({ ...prev, [id]: op }));
+			return { id, promise };
+		},
+		[],
+	);
+
+	const operations = useMemo(() => {
+		const result: Record<string, Operation<unknown, unknown>> = {};
+		for (const [k, v] of Object.entries(operationsState)) {
+			const { resolve: _r, reject: _j, pendingSubmit: _p, ...rest } = v;
+			result[k] = rest;
+		}
+		return result;
+	}, [operationsState]);
+
+	const value = useMemo<ContextValue>(
+		() => ({
+			operations,
+			addJsonSubmission,
+			addFormSubmission,
+			onSettle,
+		}),
+		[operations, addJsonSubmission, addFormSubmission, onSettle],
+	);
+
+	return (
+		<ConcurrentSubmitterContext.Provider value={value}>
+			{children}
+			{Object.entries(operationsState).map(
+				([id, op]) =>
+					op.pendingSubmit && (
+						<FetcherRunner
+							key={id}
+							id={id}
+							pendingSubmit={op.pendingSubmit}
+							onSettle={onSettle}
+						/>
+					),
+			)}
+		</ConcurrentSubmitterContext.Provider>
+	);
+}

package/src/index.ts

@@ -1,8 +1,8 @@
+export * from "./ConcurrentSubmitterProvider";
 export * from "./formAction";
 export * from "./types/index";
 export * from "./useCachedFetch";
+export * from "./useConcurrentSubmitter";
 export * from "./useDynamicFetcher";
 export * from "./useDynamicSubmitter";
-export * from "./useConcurrentDynamicSubmitter";
 export * from "./useFetcherStateChanged";
-// Test comment to trigger release

package/src/types/RouteWithActionModule.ts

@@ -0,0 +1,18 @@
+import type { Func } from "./Func";
+import type { RegisterPages } from "./RegisterPages";
+import type { z } from "zod";
+
+/**
+ * Route module shape for type-safe form actions: route path, action handler, and form schema.
+ * Use with useDynamicSubmitter and useConcurrentSubmitter.
+ */
+export type RouteWithActionModule = {
+	route: keyof RegisterPages;
+	action: Func;
+	formSchema: z.ZodType;
+};
+
+/** Action result type inferred from the route module's action */
+export type ActionResult<TModule extends RouteWithActionModule> = Awaited<
+	ReturnType<TModule["action"]>
+>;

package/src/types/index.ts

@@ -3,4 +3,5 @@ export * from "./Func";
 export * from "./HrefArgs";
 export * from "./RegisterPages";
 export * from "./RoutePath";
+export * from "./RouteWithActionModule";
 export * from "./RouteWithLoaderModule";

package/src/useConcurrentSubmitter.tsx

@@ -0,0 +1,86 @@
+/**
+ * @fileoverview Typed hook for concurrent form submissions. Use within ConcurrentSubmitterProvider.
+ */
+
+import { useCallback, useContext } from "react";
+import type { z } from "zod";
+import type { RegisterPages } from "./types/RegisterPages";
+import type {
+	ActionResult,
+	RouteWithActionModule,
+} from "./types/RouteWithActionModule";
+import { ConcurrentSubmitterContext } from "./ConcurrentSubmitterProvider";
+import type {
+	FormDataSubmittedData,
+	Operation,
+	SubmitFormDataOptions,
+	SubmitJsonOptions,
+	SubmitJsonResult,
+} from "./ConcurrentSubmitterProvider";
+
+export type { ActionResult };
+
+type RouteParams<R extends keyof RegisterPages> = RegisterPages[R]["params"];
+
+export type UseConcurrentSubmitterReturn<TInfo extends RouteWithActionModule> =
+	{
+		operations: Record<
+			string,
+			Operation<
+				ActionResult<TInfo>,
+				z.infer<TInfo["formSchema"]> | FormDataSubmittedData
+			>
+		>;
+		submitJson: (
+			path: TInfo["route"],
+			args: RouteParams<TInfo["route"]> | undefined,
+			data: z.infer<TInfo["formSchema"]>,
+			options?: SubmitJsonOptions,
+		) => SubmitJsonResult<ActionResult<TInfo>>;
+		submitFormData: (
+			path: TInfo["route"],
+			args: RouteParams<TInfo["route"]> | undefined,
+			formData: FormData,
+			submittedData?: FormDataSubmittedData,
+			options?: SubmitFormDataOptions,
+		) => SubmitJsonResult<ActionResult<TInfo>>;
+	};
+
+export function useConcurrentSubmitter<
+	TInfo extends RouteWithActionModule,
+>(): UseConcurrentSubmitterReturn<TInfo> {
+	const ctx = useContext(ConcurrentSubmitterContext);
+	if (!ctx) {
+		throw new Error(
+			"useConcurrentSubmitter must be used within a ConcurrentSubmitterProvider",
+		);
+	}
+
+	const submitJson = useCallback(
+		(
+			path: string,
+			args: Record<string, string> | undefined,
+			data: unknown,
+			options?: SubmitJsonOptions,
+		) => ctx.addJsonSubmission(path, args, data, options),
+		[ctx],
+	) as UseConcurrentSubmitterReturn<TInfo>["submitJson"];
+
+	const submitFormData = useCallback(
+		(
+			path: string,
+			args: Record<string, string> | undefined,
+			formData: FormData,
+			submittedData: FormDataSubmittedData = {},
+			options?: SubmitFormDataOptions,
+		) => ctx.addFormSubmission(path, args, formData, submittedData, options),
+		[ctx],
+	) as UseConcurrentSubmitterReturn<TInfo>["submitFormData"];
+
+	return {
+		operations:
+			ctx.operations as UseConcurrentSubmitterReturn<TInfo>["operations"],
+		submitJson,
+		submitFormData,
+	};
+}

package/src/useDynamicSubmitter.tsx

@@ -122,23 +122,8 @@ import {
 	useFetcher,
 } from "react-router";
 import type { z } from "zod";
-import type { Func } from "./types/Func";
 import type { HrefArgs } from "./types/HrefArgs";
-import type { RegisterPages } from "./types/RegisterPages";
-
-/**
- * Represents a route module with the required exports for useDynamicSubmitter.
- *
- * A valid route module must export:
- * - `route`: The route path (e.g., "/admin/posts/:id")
- * - `action`: The form action handler created with `formAction`
- * - `formSchema`: The Zod schema for form validation
- */
-type RouteModule = {
-	route: keyof RegisterPages;
-	action: Func;
-	formSchema: z.ZodType;
-};
+import type { RouteWithActionModule } from "./types/RouteWithActionModule";
 
 /**
  * Function type for submitting form data with a SubmitTarget.
@@ -155,7 +140,7 @@ type RouteModule = {
  * submitter.submit(formRef.current, { method: "POST" });
  * ```
  */
-type SubmitFunc<TModule extends RouteModule> = (
+type SubmitFunc<TModule extends RouteWithActionModule> = (
 	target: z.infer<TModule["formSchema"]> & SubmitTarget,
 	options: Omit<SubmitOptions, "action" | "method" | "encType"> & {
 		method: Exclude<SubmitOptions["method"], "GET">;
@@ -195,7 +180,7 @@ type SubmitJsonOptions = Omit<
  * await submitter.submitJson(data, { method: "PUT" });
  * ```
  */
-type SubmitJsonFunc<TModule extends RouteModule> = (
+type SubmitJsonFunc<TModule extends RouteWithActionModule> = (
 	data: z.infer<TModule["formSchema"]>,
 	options?: SubmitJsonOptions,
 ) => Promise<void>;
@@ -282,7 +267,7 @@ type SubmitForm = (
  * }
  * ```
  */
-export const useDynamicSubmitter = <TInfo extends RouteModule>(
+export const useDynamicSubmitter = <TInfo extends RouteWithActionModule>(
 	path: TInfo["route"],
 	...args: TInfo["route"] extends "undefined"
 		? HrefArgs<"/">
@@ -311,21 +296,27 @@ export const useDynamicSubmitter = <TInfo extends RouteModule>(
 		(target, options) => {
 			return fetcher.submit(target, {
 				...options,
+				method: (options?.method ??
+					"POST") as import("react-router").HTMLFormMethod,
 				action: url,
 				encType: "multipart/form-data",
-			});
+			} as Parameters<typeof fetcher.submit>[1]);
 		},
 		[fetcher.submit, url],
 	);
 
 	const submitJson: SubmitJsonFunc<TInfo> = useCallback(
 		(data, options = {}) => {
-			return fetcher.submit(data as SubmitTarget, {
-				...options,
-				method: options.method ?? "POST",
-				action: url,
-				encType: "application/json",
-			});
+			return fetcher.submit(
+				data as SubmitTarget,
+				{
+					...options,
+					method: (options.method ??
+						"POST") as import("react-router").HTMLFormMethod,
+					action: url,
+					encType: "application/json",
+				} as Parameters<typeof fetcher.submit>[1],
+			);
 		},
 		[fetcher.submit, url],
 	);

package/src/useConcurrentDynamicSubmitter.tsx

@@ -1,264 +0,0 @@
-/**
- * @fileoverview Concurrent type-safe form submissions for React Router 7
- *
- * Lets you run multiple submissions to the same (or logical) action in parallel,
- * each tracked independently with pending → done state. No single fetcher;
- * each submission is a promise and an entry in `operations`.
- *
- * @example
- * ```tsx
- * const { operations, submitJson } = useConcurrentDynamicSubmitter<typeof import("./api.upload")>("/api/upload");
- *
- * const a = submitJson({ fileId: "1", name: "a.pdf" });
- * const b = submitJson({ fileId: "2", name: "b.pdf" });
- *
- * // FormData: pass serializable submittedData for display (no File/FormData in state)
- * submitFormData(formData, { type: "upload", label: "photo.jpg" });
- * submitFormData(convertFormData, { type: "convert", label: "anim.gif" });
- * // Map operations: op.submittedData for labels, op.data when done
- * {Object.values(operations).map((op) => (
- *   <div key={op.id}>
- *     {op.status === "pending" && <Skeleton>{op.submittedData.label}</Skeleton>}
- *     {op.status === "done" && <Item data={op.data} />}
- *   </div>
- * ))}
- * ```
- */
-
-import { useCallback, useMemo, useRef, useState } from "react";
-import { href } from "react-router";
-import type { z } from "zod";
-import type { HrefArgs } from "./types/HrefArgs";
-import type { RegisterPages } from "./types/RegisterPages";
-
-type RouteModule = {
-	route: keyof RegisterPages;
-	action: (...args: unknown[]) => unknown;
-	formSchema: z.ZodType;
-};
-
-/** Action result type inferred from the route module's action */
-export type ActionResult<TModule extends RouteModule> = Awaited<
-	ReturnType<TModule["action"]>
->;
-
-/** Status of a single concurrent submission */
-export type OperationStatus = "pending" | "done" | "error";
-
-/** One tracked submission: pending → done (or error). Includes submitted payload for optimistic UI. */
-export type Operation<TResponse, TFormData = unknown> = {
-	id: string;
-	status: OperationStatus;
-	/** Data that was sent (for optimistic display while pending, or to show what was submitted) */
-	submittedData: TFormData;
-	/** Response from the action when status is "done" */
-	data?: TResponse;
-	error?: unknown;
-};
-
-/** Result of submitJson / submitFormData: id to look up in operations, promise to await */
-export type SubmitJsonResult<T> = {
-	id: string;
-	promise: Promise<T>;
-};
-
-type SubmitJsonOptions = {
-	method?: "POST" | "PUT" | "PATCH" | "DELETE";
-};
-
-/** Optional serializable payload for FormData submissions (for display in operations list; FormData/File are not stored in state). */
-export type FormDataSubmittedData = Record<string, unknown>;
-
-/** Options for submitFormData (e.g. Accept: application/json so the action returns JSON instead of redirecting). */
-export type SubmitFormDataOptions = {
-	headers?: HeadersInit;
-	method?: "POST" | "PUT" | "PATCH" | "DELETE";
-};
-
-/**
- * Submits JSON to the action URL via fetch and returns the parsed JSON.
- */
-async function submitJsonToAction<T>(
-	actionUrl: string,
-	data: unknown,
-	options: SubmitJsonOptions & { fetchFn?: typeof fetch },
-): Promise<T> {
-	const { method = "POST", fetchFn = fetch } = options;
-	const res = await fetchFn(actionUrl, {
-		method,
-		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify(data),
-	});
-	if (!res.ok) {
-		const text = await res.text();
-		throw new Error(`Action failed: ${res.status} ${text}`);
-	}
-	const json = (await res.json()) as T;
-	return json;
-}
-
-/**
- * Submits FormData to the action URL. No Content-Type header — browser sets multipart/form-data with boundary.
- * Optional headers (e.g. Accept: application/json) let the action return JSON instead of redirecting.
- */
-async function submitFormDataToAction<T>(
-	actionUrl: string,
-	formData: FormData,
-	options: SubmitFormDataOptions & { fetchFn?: typeof fetch },
-): Promise<T> {
-	const { method = "POST", headers, fetchFn = fetch } = options;
-	const res = await fetchFn(actionUrl, {
-		method,
-		...(headers && { headers }),
-		body: formData,
-	});
-	if (!res.ok) {
-		const text = await res.text();
-		throw new Error(`Action failed: ${res.status} ${text}`);
-	}
-	const json = (await res.json()) as T;
-	return json;
-}
-
-/**
- * Hook for multiple concurrent submissions to a dynamic route action.
- * Each submission gets an id and appears in `operations` as pending → done (or error).
- * Strongly typed: form data from route's formSchema, result from action return type.
- *
- * @template TInfo - Route module type (e.g. `typeof import("./api.upload")`)
- * @param path - Route path
- * @param args - Route params if path has segments
- * @returns operations map (id → Operation), submitJson, submitFormData (each returns { id, promise })
- */
-export function useConcurrentDynamicSubmitter<TInfo extends RouteModule>(
-	path: TInfo["route"],
-	...args: TInfo["route"] extends "undefined"
-		? HrefArgs<"/">
-		: HrefArgs<TInfo["route"]>
-): {
-	operations: Record<
-		string,
-		Operation<
-			ActionResult<TInfo>,
-			z.infer<TInfo["formSchema"]> | FormDataSubmittedData
-		>
-	>;
-	submitJson: (
-		data: z.infer<TInfo["formSchema"]>,
-		options?: SubmitJsonOptions,
-	) => SubmitJsonResult<ActionResult<TInfo>>;
-	submitFormData: (
-		formData: FormData,
-		submittedData?: FormDataSubmittedData,
-		options?: SubmitFormDataOptions,
-	) => SubmitJsonResult<ActionResult<TInfo>>;
-} {
-	const actionUrl = useMemo(() => {
-		// biome-ignore lint/suspicious/noExplicitAny: Intentional
-		return href(path, ...(args as any));
-	}, [path, args]);
-
-	type JsonFormData = z.infer<TInfo["formSchema"]>;
-	type Op = Operation<
-		ActionResult<TInfo>,
-		JsonFormData | FormDataSubmittedData
-	>;
-
-	const nextIdRef = useRef(0);
-	const [operations, setOperations] = useState<Record<string, Op>>({});
-
-	const submitJson = useCallback(
-		(
-			data: JsonFormData,
-			options: SubmitJsonOptions = {},
-		): SubmitJsonResult<ActionResult<TInfo>> => {
-			const id = `op-${++nextIdRef.current}`;
-			setOperations((prev) => ({
-				...prev,
-				[id]: { id, status: "pending", submittedData: data },
-			}));
-
-			const promise = submitJsonToAction<ActionResult<TInfo>>(
-				actionUrl,
-				data,
-				options,
-			)
-				.then((responseData) => {
-					setOperations((prev) => ({
-						...prev,
-						[id]: {
-							id,
-							status: "done",
-							submittedData: data,
-							data: responseData,
-						},
-					}));
-					return responseData;
-				})
-				.catch((error) => {
-					setOperations((prev) => ({
-						...prev,
-						[id]: {
-							id,
-							status: "error",
-							submittedData: data,
-							error,
-						},
-					}));
-					throw error;
-				});
-
-			return { id, promise };
-		},
-		[actionUrl],
-	);
-
-	const submitFormData = useCallback(
-		(
-			formData: FormData,
-			submittedData: FormDataSubmittedData = {},
-			options: SubmitFormDataOptions = {},
-		): SubmitJsonResult<ActionResult<TInfo>> => {
-			const id = `op-${++nextIdRef.current}`;
-			setOperations((prev) => ({
-				...prev,
-				[id]: { id, status: "pending", submittedData },
-			}));
-
-			const promise = submitFormDataToAction<ActionResult<TInfo>>(
-				actionUrl,
-				formData,
-				options,
-			)
-				.then((responseData) => {
-					setOperations((prev) => ({
-						...prev,
-						[id]: {
-							id,
-							status: "done",
-							submittedData,
-							data: responseData,
-						},
-					}));
-					return responseData;
-				})
-				.catch((error) => {
-					setOperations((prev) => ({
-						...prev,
-						[id]: {
-							id,
-							status: "error",
-							submittedData,
-							error,
-						},
-					}));
-					throw error;
-				});
-
-			return { id, promise };
-		},
-		[actionUrl],
-	);
-
-	return { operations, submitJson, submitFormData };
-}