@questpie/admin 1.1.1 → 3.0.0

package/dist/client/hooks/use-reactive-fields.d.mts

@@ -0,0 +1,78 @@
+import { UseFormReturn } from "react-hook-form";
+import { FieldReactiveSchema } from "questpie/client";
+
+//#region src/client/hooks/use-reactive-fields.d.ts
+
+/**
+ * Reactive field state
+ */
+interface ReactiveFieldState {
+  hidden?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+}
+/**
+ * Reactive field result
+ */
+interface ReactiveFieldResult {
+  field: string;
+  type: "hidden" | "readOnly" | "disabled" | "compute";
+  value: unknown;
+  error?: string;
+}
+/**
+ * Options for useReactiveFields hook
+ */
+interface UseReactiveFieldsOptions {
+  /** Collection or global name */
+  collection: string;
+  /** Entity type - collection or global */
+  mode?: "collection" | "global";
+  /** Map of field paths to their reactive configs */
+  reactiveConfigs: Record<string, FieldReactiveSchema>;
+  /** Debounce delay in ms */
+  debounce?: number;
+  /** Whether to enable reactive updates */
+  enabled?: boolean;
+  /** Form instance - pass directly when calling outside FormProvider */
+  form?: UseFormReturn<any>;
+}
+/**
+ * Result from useReactiveFields hook
+ */
+interface UseReactiveFieldsResult {
+  /** Field states (hidden, readOnly, disabled) by field path */
+  fieldStates: Record<string, ReactiveFieldState>;
+  /** Whether a reactive update is pending */
+  isPending: boolean;
+  /** Last error */
+  error: Error | null;
+  /** Force refresh reactive states */
+  refresh: () => void;
+}
+/**
+ * Hook to manage reactive field states.
+ * Watches form changes and triggers server-side handlers when dependencies change.
+ *
+ * @example
+ * ```tsx
+ * const { fieldStates, isPending } = useReactiveFields({
+ *   collection: "posts",
+ *   reactiveConfigs: fieldsWithReactive,
+ * });
+ *
+ * // Apply states to fields
+ * const isHidden = fieldStates["slug"]?.hidden ?? false;
+ * const isReadOnly = fieldStates["slug"]?.readOnly ?? false;
+ * ```
+ */
+declare function useReactiveFields({
+  collection,
+  mode,
+  reactiveConfigs,
+  debounce,
+  enabled,
+  form: formProp
+}: UseReactiveFieldsOptions): UseReactiveFieldsResult;
+//#endregion
+export { ReactiveFieldResult, ReactiveFieldState, UseReactiveFieldsOptions, UseReactiveFieldsResult, useReactiveFields };

package/dist/client/hooks/use-reactive-fields.mjs

@@ -0,0 +1,201 @@
+import { useAdminStore } from "../runtime/provider.mjs";
+import * as React from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useFormContext, useWatch } from "react-hook-form";
+
+//#region src/client/hooks/use-reactive-fields.ts
+/**
+* Reactive Fields Hook
+*
+* Watches form changes and triggers server-side reactive handlers.
+* Supports batched RPC calls with debouncing.
+*/
+/**
+* Get sibling data for a field path (for fields inside arrays)
+*/
+function getSiblingData(values, fieldPath) {
+	const parts = fieldPath.split(".");
+	const numericIndex = parts.findIndex((p) => /^\d+$/.test(p));
+	if (numericIndex === -1) return null;
+	const arrayItemPath = parts.slice(0, numericIndex + 1).join(".");
+	let sibling = values;
+	for (const part of arrayItemPath.split(".")) if (sibling && typeof sibling === "object") sibling = sibling[part];
+	else return null;
+	return typeof sibling === "object" ? sibling : null;
+}
+function normalizeWatchDeps(deps) {
+	if (!deps?.length) return [];
+	return deps.filter((dep) => dep.length > 0 && !dep.startsWith("$"));
+}
+function buildReactiveRequestDescriptors(reactiveConfigs) {
+	const descriptors = [];
+	for (const [field, config] of Object.entries(reactiveConfigs)) for (const type of [
+		"hidden",
+		"readOnly",
+		"disabled",
+		"compute"
+	]) {
+		const reactiveConfig = config[type];
+		if (!reactiveConfig) continue;
+		descriptors.push({
+			field,
+			type,
+			watchDeps: normalizeWatchDeps(reactiveConfig.watch)
+		});
+	}
+	return descriptors;
+}
+function buildDependencyGraph(descriptors) {
+	const graph = /* @__PURE__ */ new Map();
+	for (const descriptor of descriptors) for (const dep of descriptor.watchDeps) {
+		const items = graph.get(dep) ?? [];
+		items.push(descriptor);
+		graph.set(dep, items);
+	}
+	return graph;
+}
+function mapDepValues(deps, watchedValues) {
+	if (deps.length === 0) return {};
+	const values = Array.isArray(watchedValues) ? watchedValues : [watchedValues];
+	const result = {};
+	for (const [index, dep] of deps.entries()) result[dep] = values[index];
+	return result;
+}
+function getChangedDeps(prevDeps, nextDeps) {
+	const changed = [];
+	for (const [dep, value] of Object.entries(nextDeps)) if (prevDeps[dep] !== value) changed.push(dep);
+	return changed;
+}
+/**
+* Hook to manage reactive field states.
+* Watches form changes and triggers server-side handlers when dependencies change.
+*
+* @example
+* ```tsx
+* const { fieldStates, isPending } = useReactiveFields({
+*   collection: "posts",
+*   reactiveConfigs: fieldsWithReactive,
+* });
+*
+* // Apply states to fields
+* const isHidden = fieldStates["slug"]?.hidden ?? false;
+* const isReadOnly = fieldStates["slug"]?.readOnly ?? false;
+* ```
+*/
+function useReactiveFields({ collection, mode = "collection", reactiveConfigs, debounce = 100, enabled = true, form: formProp }) {
+	const client = useAdminStore((s) => s.client);
+	const formContext = useFormContext();
+	const form = formProp ?? formContext;
+	const [fieldStates, setFieldStates] = React.useState({});
+	const requestDescriptors = React.useMemo(() => buildReactiveRequestDescriptors(reactiveConfigs), [reactiveConfigs]);
+	const dependencyGraph = React.useMemo(() => buildDependencyGraph(requestDescriptors), [requestDescriptors]);
+	const watchDeps = React.useMemo(() => [...new Set(requestDescriptors.flatMap((item) => item.watchDeps))], [requestDescriptors]);
+	const watchedDepValues = useWatch({
+		control: form?.control,
+		name: watchDeps,
+		disabled: !form || watchDeps.length === 0
+	});
+	const currentDepValues = React.useMemo(() => mapDepValues(watchDeps, watchedDepValues), [watchDeps, watchedDepValues]);
+	const prevFormValuesRef = React.useRef({});
+	const prevDepValuesRef = React.useRef({});
+	const isInitializedRef = React.useRef(false);
+	const debounceTimerRef = React.useRef(null);
+	const mutateRef = React.useRef(void 0);
+	const reactiveMutation = useMutation({
+		mutationFn: async (descriptors) => {
+			if (!client) return { results: [] };
+			const formData = form.getValues() ?? {};
+			const prevData = prevFormValuesRef.current;
+			const requests = descriptors.map((descriptor) => ({
+				field: descriptor.field,
+				type: descriptor.type,
+				siblingData: getSiblingData(formData, descriptor.field),
+				prevSiblingData: getSiblingData(prevData, descriptor.field)
+			}));
+			return client.routes.batchReactive({
+				collection,
+				type: mode,
+				formData,
+				prevData,
+				requests
+			});
+		},
+		onSuccess: (response) => {
+			setFieldStates((prevState) => {
+				const nextState = { ...prevState };
+				for (const result of response.results) {
+					if (!nextState[result.field]) nextState[result.field] = {};
+					if (result.type === "compute") {
+						if (result.value !== void 0) form.setValue(result.field, result.value, {
+							shouldDirty: true,
+							shouldTouch: false,
+							shouldValidate: true
+						});
+					} else nextState[result.field][result.type] = result.value;
+				}
+				return nextState;
+			});
+			prevFormValuesRef.current = { ...form.getValues() ?? {} };
+		}
+	});
+	mutateRef.current = reactiveMutation.mutate;
+	React.useEffect(() => {
+		isInitializedRef.current = false;
+		prevFormValuesRef.current = {};
+		prevDepValuesRef.current = {};
+		if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+	}, [
+		collection,
+		mode,
+		requestDescriptors
+	]);
+	React.useEffect(() => {
+		if (!enabled || requestDescriptors.length === 0) return;
+		if (!isInitializedRef.current) {
+			isInitializedRef.current = true;
+			prevFormValuesRef.current = { ...form.getValues() ?? {} };
+			prevDepValuesRef.current = currentDepValues;
+			mutateRef.current?.(requestDescriptors);
+			return;
+		}
+		if (watchDeps.length === 0) return;
+		const changedDeps = getChangedDeps(prevDepValuesRef.current, currentDepValues);
+		if (changedDeps.length === 0) return;
+		prevDepValuesRef.current = currentDepValues;
+		const affectedDescriptors = /* @__PURE__ */ new Map();
+		for (const dep of changedDeps) {
+			const depDescriptors = dependencyGraph.get(dep) ?? [];
+			for (const descriptor_0 of depDescriptors) affectedDescriptors.set(`${descriptor_0.field}:${descriptor_0.type}`, descriptor_0);
+		}
+		if (affectedDescriptors.size === 0) return;
+		if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		debounceTimerRef.current = setTimeout(() => {
+			mutateRef.current?.([...affectedDescriptors.values()]);
+		}, debounce);
+		return () => {
+			if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		};
+	}, [
+		enabled,
+		requestDescriptors,
+		form,
+		currentDepValues,
+		watchDeps,
+		dependencyGraph,
+		debounce
+	]);
+	React.useEffect(() => {
+		return () => {
+			if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		};
+	}, []);
+	return {
+		fieldStates,
+		isPending: reactiveMutation.isPending,
+		error: reactiveMutation.error ?? null,
+		refresh: () => mutateRef.current?.(requestDescriptors)
+	};
+}
+
+//#endregion
+export { useReactiveFields };

package/dist/client/hooks/use-realtime-highlight.mjs

@@ -0,0 +1,158 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+
+//#region src/client/hooks/use-realtime-highlight.ts
+/**
+* Hook to track realtime data changes and highlight affected rows
+*
+* Compares previous data with new data and returns IDs of changed/new items.
+* Used to show visual feedback (pulse animation) when data updates via SSE.
+*/
+/**
+* Track realtime changes and return IDs of changed/new rows
+*
+* @example
+* ```tsx
+* const { isHighlighted } = useRealtimeHighlight(data?.docs, { enabled: realtime });
+*
+* {items.map((row) => (
+*   <TableRow className={cn(
+*     isHighlighted(row.id) && "animate-realtime-pulse",
+*   )}>
+* ))}
+* ```
+*/
+function useRealtimeHighlight(docs, t0) {
+	const $ = c(18);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { highlightDuration: t2, enabled: t3, initializationGracePeriod: t4 } = t1;
+	const highlightDuration = t2 === void 0 ? 1500 : t2;
+	const enabled = t3 === void 0 ? true : t3;
+	const initializationGracePeriod = t4 === void 0 ? 500 : t4;
+	let t5;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ new Set();
+		$[2] = t5;
+	} else t5 = $[2];
+	const [highlightedIds, setHighlightedIds] = useState(t5);
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ new Map();
+		$[3] = t6;
+	} else t6 = $[3];
+	const prevDocsRef = useRef(t6);
+	const hasInitializedRef = useRef(false);
+	const initializedAtRef = useRef(0);
+	let t7;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ new Set();
+		$[4] = t7;
+	} else t7 = $[4];
+	const timersRef = useRef(t7);
+	let t8;
+	let t9;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => () => {
+			for (const timer of timersRef.current) clearTimeout(timer);
+		};
+		t9 = [];
+		$[5] = t8;
+		$[6] = t9;
+	} else {
+		t8 = $[5];
+		t9 = $[6];
+	}
+	useEffect(t8, t9);
+	let t10;
+	let t11;
+	if ($[7] !== docs || $[8] !== enabled || $[9] !== highlightDuration || $[10] !== initializationGracePeriod) {
+		t10 = () => {
+			if (!enabled || !docs) return;
+			const currentMap = /* @__PURE__ */ new Map();
+			for (const doc of docs) currentMap.set(doc.id, getDocFingerprint(doc));
+			if (!hasInitializedRef.current) {
+				hasInitializedRef.current = true;
+				initializedAtRef.current = Date.now();
+				prevDocsRef.current = currentMap;
+				return;
+			}
+			if (Date.now() - initializedAtRef.current < initializationGracePeriod) {
+				prevDocsRef.current = currentMap;
+				return;
+			}
+			const changedIds = [];
+			for (const doc_0 of docs) {
+				const prevFingerprint = prevDocsRef.current.get(doc_0.id);
+				const currentFingerprint = currentMap.get(doc_0.id);
+				if (!prevFingerprint) changedIds.push(doc_0.id);
+				else if (prevFingerprint !== currentFingerprint) changedIds.push(doc_0.id);
+			}
+			prevDocsRef.current = currentMap;
+			if (changedIds.length > 0) {
+				setHighlightedIds((prev) => {
+					const next = new Set(prev);
+					for (const id of changedIds) next.add(id);
+					return next;
+				});
+				const timer_0 = setTimeout(() => {
+					setHighlightedIds((prev_0) => {
+						const next_0 = new Set(prev_0);
+						for (const id_0 of changedIds) next_0.delete(id_0);
+						return next_0;
+					});
+					timersRef.current.delete(timer_0);
+				}, highlightDuration);
+				timersRef.current.add(timer_0);
+			}
+		};
+		t11 = [
+			docs,
+			enabled,
+			highlightDuration,
+			initializationGracePeriod
+		];
+		$[7] = docs;
+		$[8] = enabled;
+		$[9] = highlightDuration;
+		$[10] = initializationGracePeriod;
+		$[11] = t10;
+		$[12] = t11;
+	} else {
+		t10 = $[11];
+		t11 = $[12];
+	}
+	useEffect(t10, t11);
+	let t12;
+	if ($[13] !== highlightedIds) {
+		t12 = (id_1) => highlightedIds.has(id_1);
+		$[13] = highlightedIds;
+		$[14] = t12;
+	} else t12 = $[14];
+	let t13;
+	if ($[15] !== highlightedIds || $[16] !== t12) {
+		t13 = {
+			highlightedIds,
+			isHighlighted: t12
+		};
+		$[15] = highlightedIds;
+		$[16] = t12;
+		$[17] = t13;
+	} else t13 = $[17];
+	return t13;
+}
+/**
+* Create a fingerprint for a doc to detect changes
+* Uses updatedAt if available, otherwise JSON stringify
+*/
+function getDocFingerprint(doc) {
+	if (doc.updatedAt) return `${doc.id}:${String(doc.updatedAt)}`;
+	return JSON.stringify(doc);
+}
+
+//#endregion
+export { useRealtimeHighlight };

package/dist/client/hooks/use-saved-views.mjs

@@ -0,0 +1,140 @@
+import { useAdminStore } from "../runtime/provider.mjs";
+import { c } from "react/compiler-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+//#region src/client/hooks/use-saved-views.ts
+/**
+* Hook to fetch saved views for a collection
+*
+* Note: This hook requires the `adminModule` to be used in your app setup.
+* If admin_saved_views collection is not available, returns empty array.
+*/
+function useSavedViews(collectionName) {
+	const $ = c(9);
+	const client = useAdminStore(_temp);
+	let t0;
+	if ($[0] !== collectionName) {
+		t0 = ["admin_saved_views", collectionName];
+		$[0] = collectionName;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== client?.collections || $[3] !== collectionName) {
+		t1 = async () => {
+			const collections = client?.collections;
+			if (!collections?.admin_saved_views) return { docs: [] };
+			return { docs: (await collections.admin_saved_views.find({ where: { collectionName } }))?.docs ?? [] };
+		};
+		$[2] = client?.collections;
+		$[3] = collectionName;
+		$[4] = t1;
+	} else t1 = $[4];
+	const t2 = !!client;
+	let t3;
+	if ($[5] !== t0 || $[6] !== t1 || $[7] !== t2) {
+		t3 = {
+			queryKey: t0,
+			queryFn: t1,
+			enabled: t2
+		};
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return useQuery(t3);
+}
+/**
+* Hook to save a new view
+*/
+function _temp(s) {
+	return s.client;
+}
+function useSaveView(collectionName) {
+	const $ = c(9);
+	const client = useAdminStore(_temp2);
+	const queryClient = useQueryClient();
+	let t0;
+	if ($[0] !== client?.collections || $[1] !== collectionName) {
+		t0 = async (data) => {
+			const collections = client?.collections;
+			if (!collections?.admin_saved_views) throw new Error("admin_saved_views collection not available. Make sure to use the adminModule in your app setup.");
+			return collections.admin_saved_views.create({
+				...data,
+				collectionName,
+				userId: data.userId || "anonymous",
+				isDefault: false
+			});
+		};
+		$[0] = client?.collections;
+		$[1] = collectionName;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== collectionName || $[4] !== queryClient) {
+		t1 = () => {
+			queryClient.invalidateQueries({ queryKey: ["admin_saved_views", collectionName] });
+		};
+		$[3] = collectionName;
+		$[4] = queryClient;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== t0 || $[7] !== t1) {
+		t2 = {
+			mutationFn: t0,
+			onSuccess: t1
+		};
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return useMutation(t2);
+}
+/**
+* Hook to update an existing view
+*/
+function _temp2(s) {
+	return s.client;
+}
+function useDeleteSavedView(collectionName) {
+	const $ = c(8);
+	const client = useAdminStore(_temp4);
+	const queryClient = useQueryClient();
+	let t0;
+	if ($[0] !== client?.collections) {
+		t0 = async (viewId) => {
+			const collections = client?.collections;
+			if (!collections?.admin_saved_views) throw new Error("admin_saved_views collection not available. Make sure to use the adminModule in your app setup.");
+			return collections.admin_saved_views.delete({ id: viewId });
+		};
+		$[0] = client?.collections;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== collectionName || $[3] !== queryClient) {
+		t1 = () => {
+			queryClient.invalidateQueries({ queryKey: ["admin_saved_views", collectionName] });
+		};
+		$[2] = collectionName;
+		$[3] = queryClient;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t0 || $[6] !== t1) {
+		t2 = {
+			mutationFn: t0,
+			onSuccess: t1
+		};
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return useMutation(t2);
+}
+function _temp4(s) {
+	return s.client;
+}
+
+//#endregion
+export { useDeleteSavedView, useSaveView, useSavedViews };

package/dist/client/hooks/use-search-param-toggle.d.mts

@@ -0,0 +1,12 @@
+//#region src/client/hooks/use-search-param-toggle.d.ts
+interface UseSearchParamToggleOptions {
+  defaultValue?: boolean;
+  trueValue?: string;
+  legacyKeys?: Array<{
+    key: string;
+    trueValue?: string;
+  }>;
+}
+declare function useSearchParamToggle(key: string, options?: UseSearchParamToggleOptions): readonly [boolean, (next: boolean | ((prev: boolean) => boolean)) => void];
+//#endregion
+export { useSearchParamToggle };

package/dist/client/hooks/use-search-param-toggle.mjs

@@ -0,0 +1,115 @@
+import { SEARCH_PARAMS_EVENT } from "../lib/events.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/client/hooks/use-search-param-toggle.ts
+function isTruthyParam(value, trueValue) {
+	if (value === null) return false;
+	if (value === trueValue) return true;
+	if (value === "true" || value === "1") return true;
+	return false;
+}
+function readToggleFromUrl(key, defaultValue, trueValue, legacyKeys = []) {
+	if (typeof window === "undefined") return defaultValue;
+	const params = new URLSearchParams(window.location.search);
+	const value = params.get(key);
+	if (isTruthyParam(value, trueValue)) return true;
+	for (const legacy of legacyKeys) if (isTruthyParam(params.get(legacy.key), legacy.trueValue ?? "true")) return true;
+	if (value === null) return defaultValue;
+	return false;
+}
+function writeToggleToUrl(key, value, trueValue, legacyKeys = []) {
+	if (typeof window === "undefined") return;
+	const url = new URL(window.location.href);
+	if (value) url.searchParams.set(key, trueValue);
+	else url.searchParams.delete(key);
+	for (const legacy of legacyKeys) url.searchParams.delete(legacy.key);
+	window.history.replaceState({}, "", url.toString());
+	window.dispatchEvent(new Event(SEARCH_PARAMS_EVENT));
+}
+function useSearchParamToggle(key, t0) {
+	const $ = c(22);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const options = t1;
+	const defaultValue = options.defaultValue ?? false;
+	const trueValue = options.trueValue ?? "true";
+	let t2;
+	if ($[2] !== options.legacyKeys) {
+		t2 = options.legacyKeys ?? [];
+		$[2] = options.legacyKeys;
+		$[3] = t2;
+	} else t2 = $[3];
+	const legacyKeys = t2;
+	let t3;
+	if ($[4] !== defaultValue || $[5] !== key || $[6] !== legacyKeys || $[7] !== trueValue) {
+		t3 = () => readToggleFromUrl(key, defaultValue, trueValue, legacyKeys);
+		$[4] = defaultValue;
+		$[5] = key;
+		$[6] = legacyKeys;
+		$[7] = trueValue;
+		$[8] = t3;
+	} else t3 = $[8];
+	const [value, setValue] = React.useState(t3);
+	let t4;
+	let t5;
+	if ($[9] !== defaultValue || $[10] !== key || $[11] !== legacyKeys || $[12] !== trueValue) {
+		t4 = () => {
+			const syncFromUrl = () => {
+				setValue(readToggleFromUrl(key, defaultValue, trueValue, legacyKeys));
+			};
+			window.addEventListener("popstate", syncFromUrl);
+			window.addEventListener(SEARCH_PARAMS_EVENT, syncFromUrl);
+			return () => {
+				window.removeEventListener("popstate", syncFromUrl);
+				window.removeEventListener(SEARCH_PARAMS_EVENT, syncFromUrl);
+			};
+		};
+		t5 = [
+			key,
+			defaultValue,
+			trueValue,
+			legacyKeys
+		];
+		$[9] = defaultValue;
+		$[10] = key;
+		$[11] = legacyKeys;
+		$[12] = trueValue;
+		$[13] = t4;
+		$[14] = t5;
+	} else {
+		t4 = $[13];
+		t5 = $[14];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[15] !== key || $[16] !== legacyKeys || $[17] !== trueValue) {
+		t6 = (next) => {
+			setValue((prev) => {
+				const resolved = typeof next === "function" ? next(prev) : next;
+				writeToggleToUrl(key, resolved, trueValue, legacyKeys);
+				return resolved;
+			});
+		};
+		$[15] = key;
+		$[16] = legacyKeys;
+		$[17] = trueValue;
+		$[18] = t6;
+	} else t6 = $[18];
+	const setToggle = t6;
+	let t7;
+	if ($[19] !== setToggle || $[20] !== value) {
+		t7 = [value, setToggle];
+		$[19] = setToggle;
+		$[20] = value;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+}
+
+//#endregion
+export { useSearchParamToggle };