@questpie/admin 3.5.3 → 3.5.5

package/dist/client/components/primitives/asset-preview.mjs

@@ -1,5 +1,6 @@
 import { cn } from "../../lib/utils.mjs";
 import { Button } from "../ui/button.mjs";
+import { resolveAssetUrl } from "../../utils/asset-url.mjs";
 import { Skeleton } from "../ui/skeleton.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
@@ -76,13 +77,14 @@ function AssetPreview({ asset, pendingFile, onRemove, onEdit, loading = false, p
 	const isImageType = isImage(mimeType);
 	const fileIconName = getFileIconName(mimeType);
 	const extension = getExtension(filename, mimeType);
+	const assetUrl = resolveAssetUrl(asset.url);
 	const thumbnailUrl = React.useMemo(() => {
 		if (pendingFile && isImageType) return URL.createObjectURL(pendingFile);
-		if (asset.url && isImageType) return asset.url;
+		if (assetUrl && isImageType) return assetUrl;
 		return null;
 	}, [
 		pendingFile,
-		asset.url,
+		assetUrl,
 		isImageType
 	]);
 	React.useEffect(() => {

package/dist/client/components/primitives/dropzone.d.mts

@@ -0,0 +1,100 @@
+import * as React from "react";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/client/components/primitives/dropzone.d.ts
+
+interface DropzoneProps {
+  /**
+   * Called when files are dropped or selected
+   */
+  onDrop: (files: File[]) => void;
+  /**
+   * Accepted file types (MIME types or extensions)
+   * @example ["image/*", "application/pdf", ".doc"]
+   */
+  accept?: string[];
+  /**
+   * Maximum file size in bytes
+   */
+  maxSize?: number;
+  /**
+   * Whether multiple files can be selected
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Disable the dropzone
+   */
+  disabled?: boolean;
+  /**
+   * Show loading state (e.g., during upload)
+   */
+  loading?: boolean;
+  /**
+   * Current upload progress (0-100)
+   */
+  progress?: number;
+  /**
+   * Visual density of the dropzone.
+   * @default "panel"
+   */
+  variant?: "panel" | "compact";
+  /**
+   * Custom label text
+   * @default "Drop files here or click to browse"
+   */
+  label?: string;
+  /**
+   * Helper text shown below the label
+   */
+  hint?: string;
+  /**
+   * Error message to display
+   */
+  error?: string;
+  /**
+   * Additional className
+   */
+  className?: string;
+  /**
+   * Children to render inside the dropzone (custom content)
+   */
+  children?: React.ReactNode;
+  /**
+   * Secondary action rendered inside the dropzone.
+   */
+  action?: {
+    label: string;
+    icon?: string;
+    onClick: () => void;
+    disabled?: boolean;
+  };
+  /**
+   * Callback when validation fails
+   */
+  onValidationError?: (errors: ValidationError[]) => void;
+}
+interface ValidationError {
+  file: File;
+  type: "type" | "size";
+  message: string;
+}
+declare function Dropzone({
+  onDrop,
+  accept,
+  maxSize,
+  multiple,
+  disabled,
+  loading,
+  progress,
+  variant,
+  label,
+  hint,
+  error,
+  className,
+  children,
+  action,
+  onValidationError
+}: DropzoneProps): react_jsx_runtime11.JSX.Element;
+//#endregion
+export { Dropzone };

package/dist/client/components/primitives/field-select-control.mjs

@@ -6,9 +6,10 @@ import { InputGroup } from "../ui/input-group.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/client/components/primitives/field-select-control.tsx
-function FieldSelectTrigger({ className, hasValue, asInputGroupControl, ...props }) {
+function FieldSelectTrigger({ className, hasValue, asInputGroupControl, static: staticPress = true, ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "outline",
+		static: staticPress,
 		"data-slot": asInputGroupControl ? "input-group-control" : void 0,
 		className: cn("qa-field-select-control qa-select-single control-surface w-full justify-between px-3 py-2 font-normal", "hover:bg-surface-low focus-visible:border-border-strong focus-visible:ring-ring/20 aria-expanded:border-border-strong aria-expanded:ring-ring/20 focus-visible:ring-[3px] aria-expanded:ring-[3px]", !hasValue && "text-muted-foreground", asInputGroupControl && "h-full min-w-0 flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0", className),
 		...props

package/dist/client/components/ui/button.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/client/components/ui/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type ButtonProps = Button.Props & VariantProps<typeof buttonVariants> & {
+  static?: boolean;
+};
+declare function Button$1({
+  className,
+  type,
+  variant,
+  size,
+  static: staticPress,
+  ...props
+}: ButtonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Button$1 as Button };

package/dist/client/components/ui/button.mjs

@@ -6,7 +6,7 @@ import { Button } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 
 //#region src/client/components/ui/button.tsx
-const buttonVariants = cva("qa-button font-chrome group/button text-foreground focus-visible:border-border-strong focus-visible:ring-ring/20 aria-invalid:border-border-strong aria-invalid:ring-ring/20 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--control-radius)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,border-color,box-shadow,transform,opacity] duration-150 ease-out outline-none select-none focus-visible:ring-[3px] active:scale-[0.96] disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100 aria-invalid:ring-[3px] motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("qa-button font-chrome group/button text-foreground focus-visible:border-border-strong focus-visible:ring-ring/20 aria-invalid:border-border-strong aria-invalid:ring-ring/20 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--control-radius)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,border-color,box-shadow,transform,opacity] duration-150 ease-out outline-none select-none focus-visible:ring-[3px] active:translate-y-px disabled:pointer-events-none disabled:opacity-50 disabled:active:translate-y-0 aria-invalid:ring-[3px] motion-reduce:active:translate-y-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground shadow-[var(--control-shadow)] hover:opacity-95",
@@ -39,7 +39,7 @@ function Button$1({ className, type = "button", variant = "default", size = "def
 		className: cn(buttonVariants({
 			variant,
 			size
-		}), staticPress && "active:scale-100", className),
+		}), staticPress && "active:translate-y-0", className),
 		...props
 	});
 }

package/dist/client/components/ui/dropdown-menu.d.mts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+
+//#region src/client/components/ui/dropdown-menu.d.ts
+declare function DropdownMenu({
+  ...props
+}: Menu.Root.Props): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuTrigger({
+  type,
+  ...props
+}: Menu.Trigger.Props): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuContent({
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  className,
+  ...props
+}: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuGroup({
+  ...props
+}: Menu.Group.Props): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<"div"> & {
+  inset?: boolean;
+}): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: Menu.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: Menu.Separator.Props): react_jsx_runtime18.JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">): react_jsx_runtime18.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger };

package/dist/client/components/ui/dropdown-menu.mjs

@@ -33,6 +33,20 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 		})
 	}) });
 }
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("qa-dropdown-menu__label text-muted-foreground font-chrome chrome-meta px-2.5 py-1.5 text-xs font-medium data-[inset]:pl-8", className),
+		...props
+	});
+}
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-slot": "dropdown-menu-item",
@@ -78,6 +92,13 @@ function DropdownMenuSeparator({ className, ...props }) {
 		...props
 	});
 }
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("qa-dropdown-menu__shortcut text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground font-chrome chrome-meta ml-auto text-[0.625rem]", className),
+		...props
+	});
+}
 
 //#endregion
-export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/client/components/ui/popover.mjs

@@ -25,7 +25,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsx(Popover.Popup, {
 			"data-slot": "popover-content",
-			className: cn("qa-popover__content floating-surface motion-floating text-popover-foreground z-50 flex min-w-48 origin-(--transform-origin) flex-col gap-4 p-2.5 text-xs outline-hidden data-ending-style:scale-[var(--motion-scale-enter)] data-ending-style:opacity-0 data-starting-style:scale-[var(--motion-scale-enter)] data-starting-style:opacity-0", className),
+			className: cn("qa-popover__content floating-surface motion-floating text-popover-foreground z-50 flex min-w-48 origin-(--transform-origin) flex-col gap-4 overflow-hidden p-2.5 text-xs outline-hidden data-ending-style:scale-[var(--motion-scale-enter)] data-ending-style:opacity-0 data-starting-style:scale-[var(--motion-scale-enter)] data-starting-style:opacity-0", className),
 			...props
 		})
 	}) });

package/dist/client/components/ui/search-input.d.mts

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+//#region src/client/components/ui/search-input.d.ts
+interface SearchInputProps extends Omit<React.ComponentProps<"input">, "type"> {
+  /**
+   * Keyboard shortcut to display (e.g., "⌘K")
+   */
+  shortcut?: string;
+  /**
+   * Callback when clear button is clicked
+   */
+  onClear?: () => void;
+  /**
+   * Show loading spinner instead of search icon
+   */
+  isLoading?: boolean;
+  /**
+   * Additional className for the container
+   */
+  containerClassName?: string;
+}
+/**
+ * SearchInput - Consistent search input with icon, loading state, clear button, and keyboard shortcut
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SearchInput
+ *   value={searchTerm}
+ *   onChange={(e) => setSearchTerm(e.target.value)}
+ *   onClear={() => setSearchTerm("")}
+ *   placeholder="Search..."
+ * />
+ *
+ * // With keyboard shortcut
+ * <SearchInput
+ *   shortcut="⌘K"
+ *   onClick={openSearchDialog}
+ *   readOnly
+ * />
+ *
+ * // Loading state
+ * <SearchInput isLoading={isSearching} ... />
+ * ```
+ */
+declare function SearchInput({
+  shortcut,
+  onClear,
+  isLoading,
+  containerClassName,
+  className,
+  value,
+  ...props
+}: SearchInputProps): React.ReactElement;
+//#endregion
+export { SearchInput };

package/dist/client/components/ui/select.mjs

@@ -10,7 +10,7 @@ const Select$1 = Select.Root;
 function SelectGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.Group, {
 		"data-slot": "select-group",
-		className: cn("qa-select__group scroll-my-1 p-1", className),
+		className: cn("qa-select__group scroll-my-1 p-0", className),
 		...props
 	});
 }
@@ -44,7 +44,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsxs(Select.Popup, {
 			"data-slot": "select-content",
-			className: cn("qa-select__content floating-surface motion-floating text-popover-foreground relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-ending-style:scale-[var(--motion-scale-enter)] data-ending-style:opacity-0 data-starting-style:scale-[var(--motion-scale-enter)] data-starting-style:opacity-0", className),
+			className: cn("qa-select__content floating-surface motion-floating text-popover-foreground relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto p-1 data-ending-style:scale-[var(--motion-scale-enter)] data-ending-style:opacity-0 data-starting-style:scale-[var(--motion-scale-enter)] data-starting-style:opacity-0", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),

package/dist/client/components/ui/sheet.d.mts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/client/components/ui/sheet.d.ts
+declare function Sheet({
+  ...props
+}: Dialog.Root.Props): react_jsx_runtime12.JSX.Element;
+declare function SheetContent({
+  className,
+  children,
+  side,
+  showCloseButton,
+  animated,
+  showOverlay,
+  ...props
+}: Dialog.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+  animated?: boolean;
+  showOverlay?: boolean;
+}): react_jsx_runtime12.JSX.Element;
+declare function SheetHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime12.JSX.Element;
+declare function SheetFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime12.JSX.Element;
+declare function SheetTitle({
+  className,
+  ...props
+}: Dialog.Title.Props): react_jsx_runtime12.JSX.Element;
+declare function SheetDescription({
+  className,
+  ...props
+}: Dialog.Description.Props): react_jsx_runtime12.JSX.Element;
+//#endregion
+export { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle };

package/dist/client/components/ui/table.d.mts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/client/components/ui/table.d.ts
+declare function Table({
+  className,
+  ...props
+}: React.ComponentProps<"table">): react_jsx_runtime1.JSX.Element;
+declare function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<"thead">): react_jsx_runtime1.JSX.Element;
+declare function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<"tbody">): react_jsx_runtime1.JSX.Element;
+declare function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<"tfoot">): react_jsx_runtime1.JSX.Element;
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends React.ComponentProps<"th"> {
+  stickyLeft?: number;
+  showStickyBorder?: boolean;
+}
+declare function TableHead({
+  className,
+  stickyLeft,
+  showStickyBorder,
+  style,
+  ...props
+}: TableHeadProps): react_jsx_runtime1.JSX.Element;
+interface TableCellProps extends React.ComponentProps<"td"> {
+  stickyLeft?: number;
+  showStickyBorder?: boolean;
+}
+declare function TableCell({
+  className,
+  stickyLeft,
+  showStickyBorder,
+  style,
+  ...props
+}: TableCellProps): react_jsx_runtime1.JSX.Element;
+declare function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/client/components/ui/table.mjs

@@ -28,6 +28,13 @@ function TableBody({ className, ...props }) {
 		...props
 	});
 }
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("qa-table__footer bg-background font-medium", className),
+		...props
+	});
+}
 const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
 	ref,
 	"data-slot": "table-row",
@@ -61,6 +68,13 @@ function TableCell({ className, stickyLeft, showStickyBorder, style, ...props })
 		...props
 	});
 }
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("qa-table__caption text-muted-foreground mt-4 text-xs", className),
+		...props
+	});
+}
 
 //#endregion
-export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/client/components/ui/tooltip.d.mts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/client/components/ui/tooltip.d.ts
+declare function Tooltip$1({
+  ...props
+}: Tooltip.Root.Props): react_jsx_runtime8.JSX.Element;
+declare function TooltipTrigger({
+  ...props
+}: Tooltip.Trigger.Props): react_jsx_runtime8.JSX.Element;
+declare function TooltipContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  children,
+  ...props
+}: Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): react_jsx_runtime8.JSX.Element;
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipTrigger };

package/dist/client/contexts/focus-context.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime50 from "react/jsx-runtime";
 
 //#region src/client/contexts/focus-context.d.ts
 
@@ -59,7 +59,7 @@ type FocusProviderProps = {
 declare function FocusProvider({
   children,
   onFocusChange
-}: FocusProviderProps): react_jsx_runtime16.JSX.Element;
+}: FocusProviderProps): react_jsx_runtime50.JSX.Element;
 /**
  * Use the focus context
  */

package/dist/client/hooks/use-admin-config.mjs

@@ -11,6 +11,11 @@ const adminConfigQueryKey = [
 	"admin",
 	"config"
 ];
+const publicAdminConfigQueryKey = [
+	"questpie",
+	"admin",
+	"public-config"
+];
 /** Query options factory for admin config — can be used for prefetching in loaders */
 function getAdminConfigQueryOptions(client) {
 	return {
@@ -23,6 +28,20 @@ function getAdminConfigQueryOptions(client) {
 		gcTime: 1800 * 1e3
 	};
 }
+/** Query options for auth-page-safe public branding/bootstrap config. */
+function getPublicAdminConfigQueryOptions(client) {
+	return {
+		queryKey: publicAdminConfigQueryKey,
+		queryFn: async () => {
+			if (!client || !client.routes) return {};
+			const routes = client.routes;
+			if (typeof routes.getPublicAdminConfig === "function") return routes.getPublicAdminConfig();
+			return {};
+		},
+		staleTime: 300 * 1e3,
+		gcTime: 1800 * 1e3
+	};
+}
 /** Standard query hook - returns loading/error states */
 function useAdminConfig(queryOptions) {
 	return useQuery({
@@ -36,4 +55,4 @@ function useSuspenseAdminConfig() {
 }
 
 //#endregion
-export { getAdminConfigQueryOptions, useAdminConfig, useSuspenseAdminConfig };
+export { getAdminConfigQueryOptions, getPublicAdminConfigQueryOptions, useAdminConfig, useSuspenseAdminConfig };

package/dist/client/hooks/use-autosave.mjs

@@ -0,0 +1,91 @@
+import { useTranslation } from "../i18n/hooks.mjs";
+import * as React from "react";
+import { toast } from "sonner";
+
+//#region src/client/hooks/use-autosave.ts
+/**
+* useAutosave — engine-agnostic debounced autosave for react-hook-form views.
+*
+* Extracted from the form view's `AutosaveManager`. The save pipeline
+* (`runAutosave`) is unchanged — it guards on dirty/submitting, submits via the
+* form, resets to the server result, and reports save state.
+*
+* The trigger is driven by `form.subscribe({ formState: { values: true } })`
+* (the same value-subscription `PreviewPatchBridge` uses) rather than DOM
+* `input`/`change` listeners. That makes it engine-agnostic: it catches native
+* input edits AND programmatic `field.onChange` emissions (e.g. the TipTap
+* rich-text field, whose contenteditable does not fire bubbling DOM events).
+*
+* Both the form view and the document view consume this hook so they share one
+* autosave code path.
+*/
+/**
+* Wire debounced autosave onto a form. Returns the imperative `runAutosave`
+* callback so callers can also flush manually if needed.
+*/
+function useAutosave({ form, id, enabled, debounce, isDirtyRef, isSubmittingRef, updateMutation, onPreviewCommit, onPreviewRefresh, onSavingChange, onSaved }) {
+	const { t } = useTranslation();
+	const timerRef = React.useRef(null);
+	const runAutosave = React.useCallback(async () => {
+		if (!id || !isDirtyRef.current || isSubmittingRef.current) return;
+		try {
+			onSavingChange(true);
+			await form.handleSubmit(async (data) => {
+				const result = await updateMutation.mutateAsync({
+					id,
+					data
+				});
+				form.reset(result, { keepTouched: true });
+				onPreviewCommit?.(result);
+				onPreviewRefresh?.();
+				onSaved(/* @__PURE__ */ new Date());
+				onSavingChange(false);
+			}, () => {
+				onSavingChange(false);
+			})();
+		} catch (error) {
+			onSavingChange(false);
+			console.error("Autosave failed:", error);
+			toast.error(t("error.autosaveFailed"), { description: error instanceof Error ? error.message : void 0 });
+		}
+	}, [
+		form,
+		id,
+		isDirtyRef,
+		isSubmittingRef,
+		onSaved,
+		onSavingChange,
+		onPreviewCommit,
+		onPreviewRefresh,
+		t,
+		updateMutation
+	]);
+	React.useEffect(() => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		if (!enabled || !id) return;
+		const scheduleAutosave = () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				runAutosave();
+			}, debounce);
+		};
+		const unsubscribe = form.subscribe({
+			formState: { values: true },
+			callback: scheduleAutosave
+		});
+		return () => {
+			unsubscribe();
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [
+		debounce,
+		enabled,
+		form,
+		id,
+		runAutosave
+	]);
+	return runAutosave;
+}
+
+//#endregion
+export { useAutosave };