@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/index.d.mts

@@ -0,0 +1,80 @@
+import { FilterOperator, FilterRule, SortConfig, ViewConfiguration } from "../../shared/types/saved-views.types.mjs";
+import { RelationDisplayFields, RelationDisplayMode } from "./fields/relation/displays/types.mjs";
+import { BooleanField, BooleanFieldProps } from "./fields/boolean-field.mjs";
+import { ArrayFieldConfig, ArrayItemType, BaseFieldProps, DateFieldProps, DateTimeFieldProps, NumberFieldProps, ObjectFieldConfig, ObjectFieldLayout, RelationFieldConfig, RichTextFieldConfig, SelectFieldProps, SelectOption, TextFieldProps, TextareaFieldProps, TimeFieldConfig, TimeFieldProps, UploadFieldConfig } from "./fields/field-types.mjs";
+import { AuthLayout, AuthLayoutProps } from "../views/auth/auth-layout.mjs";
+import { LoginForm, LoginFormProps, LoginFormValues } from "../views/auth/login-form.mjs";
+import { ForgotPasswordForm, ForgotPasswordFormProps, ForgotPasswordFormValues } from "../views/auth/forgot-password-form.mjs";
+import { ResetPasswordForm, ResetPasswordFormProps, ResetPasswordFormValues } from "../views/auth/reset-password-form.mjs";
+import { AcceptInviteForm, AcceptInviteFormProps, AcceptInviteFormValues } from "../views/auth/accept-invite-form.mjs";
+import { SetupForm, SetupFormProps, SetupFormValues } from "../views/auth/setup-form.mjs";
+import { ArrayCell, JsonCell, ObjectCell } from "../views/collection/cells/complex-cells.mjs";
+import { BooleanCell, DateCell, DateTimeCell, EmailCell, NumberCell, RichTextCell, SelectCell, TextCell, TimeCell } from "../views/collection/cells/primitive-cells.mjs";
+import { RelationCell } from "../views/collection/cells/relation-cells.mjs";
+import { UploadCell } from "../views/collection/cells/upload-cells.mjs";
+import { FormView, FormViewProps, FormViewRegistryConfig } from "../views/collection/form-view.mjs";
+import { TableView, TableViewConfig, TableViewProps } from "../views/collection/table-view.mjs";
+import { AdminSidebarProps, LinkComponentProps } from "../views/layout/admin-sidebar.mjs";
+import { AdminLayout, AdminLayoutProps } from "../views/layout/admin-layout.mjs";
+import { AdminLayoutProvider, AdminLayoutProviderProps } from "../views/layout/admin-layout-provider.mjs";
+import { AdminRouter, AdminRouterProps } from "../views/layout/admin-router.mjs";
+import { DashboardPage, DashboardPageProps } from "../views/pages/dashboard-page.mjs";
+import { LoginPage, LoginPageProps } from "../views/pages/login-page.mjs";
+import { ForgotPasswordPage, ForgotPasswordPageProps } from "../views/pages/forgot-password-page.mjs";
+import { ResetPasswordPage, ResetPasswordPageProps } from "../views/pages/reset-password-page.mjs";
+import { InvitePage, InvitePageProps } from "../views/pages/invite-page.mjs";
+import { AcceptInvitePage, AcceptInvitePageProps } from "../views/pages/accept-invite-page.mjs";
+import { SetupPage, SetupPageProps } from "../views/pages/setup-page.mjs";
+import "../views/index.mjs";
+import "./actions/index.mjs";
+import { AdminLink, AdminLinkProps } from "./admin-link.mjs";
+import { AuthGuard, AuthGuardProps } from "./auth/auth-guard.mjs";
+import { AuthLoading, AuthLoadingProps } from "./auth/auth-loading.mjs";
+import "./auth/index.mjs";
+import { ArrayField, ArrayFieldItemType, ArrayFieldProps } from "./fields/array-field.mjs";
+import { AssetPreviewField, AssetPreviewFieldProps } from "./fields/asset-preview-field.mjs";
+import { BlocksField, BlocksFieldConfig, BlocksFieldProps } from "./fields/blocks-field/blocks-field.mjs";
+import { DateField } from "./fields/date-field.mjs";
+import { DatetimeField } from "./fields/datetime-field.mjs";
+import { EmailField } from "./fields/email-field.mjs";
+import { JsonField, JsonFieldMode, JsonFieldProps } from "./fields/json-field.mjs";
+import { NumberField } from "./fields/number-field.mjs";
+import { ObjectField, ObjectFieldProps } from "./fields/object-field.mjs";
+import { RelationField, RelationFieldProps } from "./fields/relation-field.mjs";
+import { RichTextEditorProps, RichTextFeatures } from "./fields/rich-text-editor/types.mjs";
+import { RichTextField } from "./fields/rich-text-field.mjs";
+import { SelectField } from "./fields/select-field.mjs";
+import { TextField } from "./fields/text-field.mjs";
+import { TextareaField } from "./fields/textarea-field.mjs";
+import { TimeField } from "./fields/time-field.mjs";
+import { UploadField, UploadFieldProps } from "./fields/upload-field.mjs";
+import "./fields/index.mjs";
+import "./filter-builder/index.mjs";
+import "./locale-switcher.mjs";
+import "./sheets/index.mjs";
+import "./ui/accordion.mjs";
+import "./ui/avatar.mjs";
+import "./ui/badge.mjs";
+import "./ui/button.mjs";
+import "./ui/card.mjs";
+import "./ui/checkbox.mjs";
+import "./ui/combobox.mjs";
+import "./ui/dialog.mjs";
+import "./ui/dropdown-menu.mjs";
+import "./ui/label.mjs";
+import "./ui/field.mjs";
+import "./ui/input.mjs";
+import "./ui/input-group.mjs";
+import "./ui/popover.mjs";
+import "./ui/scroll-area.mjs";
+import "./ui/select.mjs";
+import "./ui/separator.mjs";
+import "./ui/sheet.mjs";
+import "./ui/tooltip.mjs";
+import "./ui/sidebar.mjs";
+import "./ui/skeleton.mjs";
+import "./ui/spinner.mjs";
+import "./ui/switch.mjs";
+import "./ui/table.mjs";
+import "./ui/tabs.mjs";
+import "./ui/textarea.mjs";

package/dist/client/components/locale-switcher.d.mts

@@ -0,0 +1,2 @@
+import "../i18n/types.mjs";
+import "react";

package/dist/client/components/locale-switcher.mjs

@@ -0,0 +1,128 @@
+import { useResolveText } from "../i18n/hooks.mjs";
+import { cn } from "../lib/utils.mjs";
+import { getFlagUrl } from "../utils/locale-to-flag.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu.mjs";
+import { Icon } from "@iconify/react";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/locale-switcher.tsx
+const DROPDOWN_THRESHOLD = 4;
+function LocaleSwitcher({ locales, value, onChange, showFlag = true, labelMode = "code", className }) {
+	const resolveText = useResolveText();
+	const [imgError, setImgError] = useState(false);
+	const resolvedValue = value ?? locales[0]?.code ?? "";
+	const hasResolvedValue = resolvedValue.length > 0;
+	const localeOptions = locales.length ? locales : hasResolvedValue ? [{ code: resolvedValue }] : [];
+	const currentLocale = localeOptions.find((locale) => locale.code === resolvedValue) ?? { code: resolvedValue };
+	const canSwitch = !!onChange && localeOptions.length > 1;
+	const useDropdown = localeOptions.length >= DROPDOWN_THRESHOLD;
+	const flagMapping = useMemo(() => {
+		const mapping = {};
+		for (const locale of localeOptions) if (locale.flagCountryCode) mapping[locale.code.toLowerCase()] = locale.flagCountryCode;
+		return mapping;
+	}, [localeOptions]);
+	const hasCustomMapping = Object.keys(flagMapping).length > 0;
+	const getLocaleFlagUrl = (code, size = 24) => getFlagUrl(code, size, hasCustomMapping ? flagMapping : void 0);
+	if (!hasResolvedValue) return null;
+	const codeLabel = currentLocale.code.toUpperCase();
+	const nameLabel = currentLocale.label ? resolveText(currentLocale.label) : codeLabel;
+	const renderLabel = () => {
+		switch (labelMode) {
+			case "none": return null;
+			case "name": return /* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: nameLabel
+			});
+			case "both": return /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "uppercase tracking-wide",
+					children: codeLabel
+				}), currentLocale.label && /* @__PURE__ */ jsx("span", {
+					className: "font-normal text-muted-foreground",
+					children: resolveText(currentLocale.label)
+				})]
+			});
+			case "code":
+			default: return /* @__PURE__ */ jsx("span", {
+				className: "uppercase tracking-wide",
+				children: codeLabel
+			});
+		}
+	};
+	const baseClassName = cn("inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", className);
+	const interactiveClassName = cn(baseClassName, "cursor-pointer transition-colors hover:bg-muted/80 focus:outline-none focus:ring-1 focus:ring-ring");
+	const ariaLabel = `Switch locale (current: ${nameLabel})`;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [showFlag && !imgError && /* @__PURE__ */ jsx("img", {
+		src: getLocaleFlagUrl(resolvedValue),
+		alt: resolvedValue,
+		className: "h-2.5 w-3.5 rounded-[1px] object-cover",
+		onError: () => setImgError(true)
+	}), renderLabel()] });
+	if (!canSwitch) return /* @__PURE__ */ jsx("span", {
+		className: baseClassName,
+		children: content
+	});
+	if (!useDropdown) {
+		const handleCycle = (e) => {
+			e.stopPropagation();
+			const nextLocale = localeOptions[(localeOptions.findIndex((locale) => locale.code === resolvedValue) + 1) % localeOptions.length]?.code;
+			if (nextLocale) onChange(nextLocale);
+		};
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleCycle,
+			className: interactiveClassName,
+			"aria-label": ariaLabel,
+			title: ariaLabel,
+			children: content
+		});
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		className: interactiveClassName,
+		"aria-label": ariaLabel,
+		title: ariaLabel,
+		onClick: (e) => e.stopPropagation(),
+		children: [content, /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:caret-down",
+			className: "size-2.5"
+		})]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "start",
+		className: "min-w-[140px]",
+		children: localeOptions.map((locale) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onClick: (e) => {
+				e.stopPropagation();
+				onChange(locale.code);
+			},
+			className: "gap-2 text-xs",
+			children: [
+				showFlag && /* @__PURE__ */ jsx("img", {
+					src: getLocaleFlagUrl(locale.code),
+					alt: locale.code,
+					className: "h-2.5 w-3.5 rounded-[1px] object-cover",
+					onError: (event) => {
+						event.currentTarget.style.display = "none";
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "uppercase font-medium",
+					children: locale.code
+				}),
+				locale.label && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: resolveText(locale.label)
+				}),
+				locale.code === resolvedValue && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:check",
+					className: "ml-auto size-3"
+				})
+			]
+		}, locale.code))
+	})] });
+}
+
+//#endregion
+export { LocaleSwitcher };
+//# sourceMappingURL=locale-switcher.mjs.map

package/dist/client/components/locale-switcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-switcher.mjs","names":["mapping: Record<string, string>"],"sources":["../../../src/client/components/locale-switcher.tsx"],"sourcesContent":["import { Icon } from \"@iconify/react\";\nimport type * as React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { useResolveText } from \"../i18n/hooks\";\nimport type { I18nText } from \"../i18n/types\";\nimport { cn } from \"../lib/utils\";\nimport { getFlagUrl } from \"../utils/locale-to-flag\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./ui/dropdown-menu\";\n\nexport type LocaleOption = {\n  code: string;\n  label?: I18nText;\n  flagCountryCode?: string;\n};\n\nexport type LocaleSwitcherLabelMode = \"code\" | \"name\" | \"both\" | \"none\";\n\nexport interface LocaleSwitcherProps {\n  locales: LocaleOption[];\n  value?: string;\n  onChange?: (locale: string) => void;\n  showFlag?: boolean;\n  labelMode?: LocaleSwitcherLabelMode;\n  className?: string;\n}\n\nconst DROPDOWN_THRESHOLD = 4;\n\nexport function LocaleSwitcher({\n  locales,\n  value,\n  onChange,\n  showFlag = true,\n  labelMode = \"code\",\n  className,\n}: LocaleSwitcherProps): React.ReactElement | null {\n  const resolveText = useResolveText();\n  const [imgError, setImgError] = useState(false);\n  const resolvedValue = value ?? locales[0]?.code ?? \"\";\n  const hasResolvedValue = resolvedValue.length > 0;\n  const localeOptions = locales.length\n    ? locales\n    : hasResolvedValue\n      ? [{ code: resolvedValue } satisfies LocaleOption]\n      : [];\n  const currentLocale =\n    localeOptions.find((locale) => locale.code === resolvedValue) ??\n    ({ code: resolvedValue } satisfies LocaleOption);\n  const canSwitch = !!onChange && localeOptions.length > 1;\n  const useDropdown = localeOptions.length >= DROPDOWN_THRESHOLD;\n\n  const flagMapping = useMemo(() => {\n    const mapping: Record<string, string> = {};\n    for (const locale of localeOptions) {\n      if (locale.flagCountryCode) {\n        mapping[locale.code.toLowerCase()] = locale.flagCountryCode;\n      }\n    }\n    return mapping;\n  }, [localeOptions]);\n  const hasCustomMapping = Object.keys(flagMapping).length > 0;\n\n  const getLocaleFlagUrl = (code: string, size = 24) =>\n    getFlagUrl(code, size, hasCustomMapping ? flagMapping : undefined);\n\n  if (!hasResolvedValue) return null;\n\n  const codeLabel = currentLocale.code.toUpperCase();\n  const nameLabel = currentLocale.label\n    ? resolveText(currentLocale.label)\n    : codeLabel;\n  const renderLabel = () => {\n    switch (labelMode) {\n      case \"none\":\n        return null;\n      case \"name\":\n        return <span className=\"font-medium\">{nameLabel}</span>;\n      case \"both\":\n        return (\n          <span className=\"flex items-center gap-1\">\n            <span className=\"uppercase tracking-wide\">{codeLabel}</span>\n            {currentLocale.label && (\n              <span className=\"font-normal text-muted-foreground\">\n                {resolveText(currentLocale.label)}\n              </span>\n            )}\n          </span>\n        );\n      case \"code\":\n      default:\n        return <span className=\"uppercase tracking-wide\">{codeLabel}</span>;\n    }\n  };\n\n  const baseClassName = cn(\n    \"inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground\",\n    className,\n  );\n  const interactiveClassName = cn(\n    baseClassName,\n    \"cursor-pointer transition-colors hover:bg-muted/80 focus:outline-none focus:ring-1 focus:ring-ring\",\n  );\n  const ariaLabel = `Switch locale (current: ${nameLabel})`;\n\n  const content = (\n    <>\n      {showFlag && !imgError && (\n        <img\n          src={getLocaleFlagUrl(resolvedValue)}\n          alt={resolvedValue}\n          className=\"h-2.5 w-3.5 rounded-[1px] object-cover\"\n          onError={() => setImgError(true)}\n        />\n      )}\n      {renderLabel()}\n    </>\n  );\n\n  if (!canSwitch) {\n    return <span className={baseClassName}>{content}</span>;\n  }\n\n  if (!useDropdown) {\n    const handleCycle = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      const currentIndex = localeOptions.findIndex(\n        (locale) => locale.code === resolvedValue,\n      );\n      const nextIndex = (currentIndex + 1) % localeOptions.length;\n      const nextLocale = localeOptions[nextIndex]?.code;\n      if (nextLocale) onChange(nextLocale);\n    };\n\n    return (\n      <button\n        type=\"button\"\n        onClick={handleCycle}\n        className={interactiveClassName}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        className={interactiveClassName}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {content}\n        <Icon icon=\"ph:caret-down\" className=\"size-2.5\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"min-w-[140px]\">\n        {localeOptions.map((locale) => (\n          <DropdownMenuItem\n            key={locale.code}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange(locale.code);\n            }}\n            className=\"gap-2 text-xs\"\n          >\n            {showFlag && (\n              <img\n                src={getLocaleFlagUrl(locale.code)}\n                alt={locale.code}\n                className=\"h-2.5 w-3.5 rounded-[1px] object-cover\"\n                onError={(event) => {\n                  event.currentTarget.style.display = \"none\";\n                }}\n              />\n            )}\n            <span className=\"uppercase font-medium\">{locale.code}</span>\n            {locale.label && (\n              <span className=\"text-muted-foreground\">\n                {resolveText(locale.label)}\n              </span>\n            )}\n            {locale.code === resolvedValue && (\n              <Icon icon=\"ph:check\" className=\"ml-auto size-3\" />\n            )}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/media/media-grid.mjs

@@ -0,0 +1,139 @@
+import { cn } from "../../lib/utils.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/media/media-grid.tsx
+/**
+* MediaGrid Component
+*
+* Reusable grid display for assets with selection support.
+* Used in MediaPickerDialog and potentially in assets table view.
+*
+* Features:
+* - Responsive columns (2-5)
+* - Single/multiple/no selection modes
+* - Loading skeleton
+* - Click handling
+*
+* @example
+* ```tsx
+* <MediaGrid
+*   assets={assets}
+*   selectedIds={selectedIds}
+*   onSelectionChange={setSelectedIds}
+*   selectionMode="multiple"
+* />
+* ```
+*/
+/**
+* Get file icon color based on MIME type
+*/
+function getAssetTypeColor(mimeType) {
+	if (!mimeType) return "bg-muted";
+	const type = mimeType.toLowerCase();
+	if (type.startsWith("image/")) return "bg-info/10";
+	if (type.startsWith("video/")) return "bg-primary/10";
+	if (type.startsWith("audio/")) return "bg-success/10";
+	if (type === "application/pdf") return "bg-destructive/10";
+	return "bg-muted";
+}
+/**
+* Check if MIME type is an image
+*/
+function isImage(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("image/");
+}
+function MediaGridSkeleton({ columns = 4 }) {
+	const count = columns * 3;
+	const skeletonKeys = React$1.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-3", columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"),
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })]
+		}, key))
+	});
+}
+function AssetItem({ asset, selected, selectionMode, onToggle, onClick }) {
+	const [imageError, setImageError] = React$1.useState(false);
+	const thumbnailUrl = asset.url;
+	const isImageType = isImage(asset.mimeType);
+	const showCheckbox = selectionMode !== "none";
+	const handleClick = () => {
+		if (selectionMode !== "none") onToggle();
+		onClick?.();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleClick,
+		className: cn("group relative aspect-square w-full overflow-hidden rounded-lg border", "transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", selected ? "ring-primary border-primary ring-2" : "border-border/60 hover:border-border", "bg-muted/30"),
+		children: [
+			thumbnailUrl && isImageType && !imageError ? /* @__PURE__ */ jsx("img", {
+				src: thumbnailUrl,
+				alt: asset.alt || asset.filename || "Asset",
+				className: "h-full w-full object-cover",
+				onError: () => setImageError(true)
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cn("flex h-full w-full items-center justify-center", getAssetTypeColor(asset.mimeType)),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs font-medium uppercase",
+					children: asset.mimeType?.split("/")[1]?.slice(0, 4) || "FILE"
+				})
+			}),
+			showCheckbox && /* @__PURE__ */ jsx("div", {
+				className: cn("absolute right-2 top-2 flex size-5 items-center justify-center rounded-full border-2 transition-all", selected ? "bg-primary border-primary" : "border-white bg-black/20 backdrop-blur-sm group-hover:bg-black/40"),
+				children: selected && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:check-bold",
+					className: "size-3 text-white"
+				})
+			}),
+			asset.filename && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "truncate text-xs text-white",
+					title: asset.filename,
+					children: asset.filename
+				})
+			})
+		]
+	});
+}
+function MediaGrid({ assets, selectedIds = /* @__PURE__ */ new Set(), onSelectionChange, selectionMode = "none", loading = false, onAssetClick, columns = 4, className }) {
+	const handleToggle = (assetId) => {
+		if (!onSelectionChange) return;
+		const newSelection = new Set(selectedIds);
+		if (selectionMode === "single") {
+			newSelection.clear();
+			newSelection.add(assetId);
+		} else if (newSelection.has(assetId)) newSelection.delete(assetId);
+		else newSelection.add(assetId);
+		onSelectionChange(newSelection);
+	};
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(MediaGridSkeleton, { columns })
+	});
+	if (assets.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col items-center justify-center rounded-lg border border-dashed p-12", "bg-muted/30 text-muted-foreground", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: "No assets found"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-3", columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", className),
+		children: assets.map((asset) => /* @__PURE__ */ jsx(AssetItem, {
+			asset,
+			selected: selectedIds.has(asset.id),
+			selectionMode,
+			onToggle: () => handleToggle(asset.id),
+			onClick: onAssetClick ? () => onAssetClick(asset) : void 0
+		}, asset.id))
+	});
+}
+
+//#endregion
+export { MediaGrid };
+//# sourceMappingURL=media-grid.mjs.map

package/dist/client/components/media/media-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-grid.mjs","names":["React"],"sources":["../../../../src/client/components/media/media-grid.tsx"],"sourcesContent":["/**\n * MediaGrid Component\n *\n * Reusable grid display for assets with selection support.\n * Used in MediaPickerDialog and potentially in assets table view.\n *\n * Features:\n * - Responsive columns (2-5)\n * - Single/multiple/no selection modes\n * - Loading skeleton\n * - Click handling\n *\n * @example\n * ```tsx\n * <MediaGrid\n *   assets={assets}\n *   selectedIds={selectedIds}\n *   onSelectionChange={setSelectedIds}\n *   selectionMode=\"multiple\"\n * />\n * ```\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport type { Asset } from \"../../hooks/use-upload\";\nimport { cn } from \"../../lib/utils\";\nimport { Skeleton } from \"../ui/skeleton\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MediaGridProps {\n\t/**\n\t * Assets to display\n\t */\n\tassets: Asset[];\n\n\t/**\n\t * Currently selected asset IDs\n\t */\n\tselectedIds?: Set<string>;\n\n\t/**\n\t * Called when selection changes\n\t */\n\tonSelectionChange?: (ids: Set<string>) => void;\n\n\t/**\n\t * Selection mode\n\t * @default \"none\"\n\t */\n\tselectionMode?: \"single\" | \"multiple\" | \"none\";\n\n\t/**\n\t * Loading state (shows skeleton)\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Called when an asset is clicked\n\t */\n\tonAssetClick?: (asset: Asset) => void;\n\n\t/**\n\t * Number of columns\n\t * @default 4\n\t */\n\tcolumns?: 2 | 3 | 4 | 5;\n\n\t/**\n\t * Additional className\n\t */\n\tclassName?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Get file icon color based on MIME type\n */\nfunction getAssetTypeColor(mimeType?: string): string {\n\tif (!mimeType) return \"bg-muted\";\n\n\tconst type = mimeType.toLowerCase();\n\n\tif (type.startsWith(\"image/\")) return \"bg-info/10\";\n\tif (type.startsWith(\"video/\")) return \"bg-primary/10\";\n\tif (type.startsWith(\"audio/\")) return \"bg-success/10\";\n\tif (type === \"application/pdf\") return \"bg-destructive/10\";\n\n\treturn \"bg-muted\";\n}\n\n/**\n * Check if MIME type is an image\n */\nfunction isImage(mimeType?: string): boolean {\n\treturn !!mimeType?.toLowerCase().startsWith(\"image/\");\n}\n\n// ============================================================================\n// Skeleton Component\n// ============================================================================\n\nfunction MediaGridSkeleton({ columns = 4 }: { columns?: 2 | 3 | 4 | 5 }) {\n\tconst count = columns * 3; // Show 3 rows\n\tconst skeletonKeys = React.useMemo(\n\t\t() => Array.from({ length: count }, () => crypto.randomUUID()),\n\t\t[count],\n\t);\n\tconst gridClass =\n\t\tcolumns === 2\n\t\t\t? \"grid-cols-2\"\n\t\t\t: columns === 3\n\t\t\t\t? \"grid-cols-2 sm:grid-cols-3\"\n\t\t\t\t: columns === 5\n\t\t\t\t\t? \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5\"\n\t\t\t\t\t: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-4\";\n\n\treturn (\n\t\t<div className={cn(\"grid gap-3\", gridClass)}>\n\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t<div key={key} className=\"space-y-2\">\n\t\t\t\t\t<Skeleton className=\"aspect-square w-full rounded-lg\" />\n\t\t\t\t\t<Skeleton className=\"h-4 w-3/4\" />\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\n// ============================================================================\n// Asset Item Component\n// ============================================================================\n\ninterface AssetItemProps {\n\tasset: Asset;\n\tselected: boolean;\n\tselectionMode: \"single\" | \"multiple\" | \"none\";\n\tonToggle: () => void;\n\tonClick?: () => void;\n}\n\nfunction AssetItem({\n\tasset,\n\tselected,\n\tselectionMode,\n\tonToggle,\n\tonClick,\n}: AssetItemProps) {\n\tconst [imageError, setImageError] = React.useState(false);\n\tconst thumbnailUrl = asset.url;\n\tconst isImageType = isImage(asset.mimeType);\n\tconst showCheckbox = selectionMode !== \"none\";\n\n\tconst handleClick = () => {\n\t\tif (selectionMode !== \"none\") {\n\t\t\tonToggle();\n\t\t}\n\t\tonClick?.();\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={handleClick}\n\t\t\tclassName={cn(\n\t\t\t\t\"group relative aspect-square w-full overflow-hidden rounded-lg border\",\n\t\t\t\t\"transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n\t\t\t\tselected\n\t\t\t\t\t? \"ring-primary border-primary ring-2\"\n\t\t\t\t\t: \"border-border/60 hover:border-border\",\n\t\t\t\t\"bg-muted/30\",\n\t\t\t)}\n\t\t>\n\t\t\t{/* Thumbnail or icon */}\n\t\t\t{thumbnailUrl && isImageType && !imageError ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={thumbnailUrl}\n\t\t\t\t\talt={asset.alt || asset.filename || \"Asset\"}\n\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\tonError={() => setImageError(true)}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex h-full w-full items-center justify-center\",\n\t\t\t\t\t\tgetAssetTypeColor(asset.mimeType),\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"text-muted-foreground text-xs font-medium uppercase\">\n\t\t\t\t\t\t{asset.mimeType?.split(\"/\")[1]?.slice(0, 4) || \"FILE\"}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Selection checkbox */}\n\t\t\t{showCheckbox && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute right-2 top-2 flex size-5 items-center justify-center rounded-full border-2 transition-all\",\n\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t? \"bg-primary border-primary\"\n\t\t\t\t\t\t\t: \"border-white bg-black/20 backdrop-blur-sm group-hover:bg-black/40\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{selected && (\n\t\t\t\t\t\t<Icon icon=\"ph:check-bold\" className=\"size-3 text-white\" />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Filename overlay (on hover) */}\n\t\t\t{asset.filename && (\n\t\t\t\t<div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100\">\n\t\t\t\t\t<p className=\"truncate text-xs text-white\" title={asset.filename}>\n\t\t\t\t\t\t{asset.filename}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</button>\n\t);\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function MediaGrid({\n\tassets,\n\tselectedIds = new Set(),\n\tonSelectionChange,\n\tselectionMode = \"none\",\n\tloading = false,\n\tonAssetClick,\n\tcolumns = 4,\n\tclassName,\n}: MediaGridProps) {\n\t// Handle toggle selection\n\tconst handleToggle = (assetId: string) => {\n\t\tif (!onSelectionChange) return;\n\n\t\tconst newSelection = new Set(selectedIds);\n\n\t\tif (selectionMode === \"single\") {\n\t\t\t// Single mode: clear all and select only this one\n\t\t\tnewSelection.clear();\n\t\t\tnewSelection.add(assetId);\n\t\t} else {\n\t\t\t// Multiple mode: toggle this one\n\t\t\tif (newSelection.has(assetId)) {\n\t\t\t\tnewSelection.delete(assetId);\n\t\t\t} else {\n\t\t\t\tnewSelection.add(assetId);\n\t\t\t}\n\t\t}\n\n\t\tonSelectionChange(newSelection);\n\t};\n\n\t// Show loading skeleton\n\tif (loading) {\n\t\treturn (\n\t\t\t<div className={className}>\n\t\t\t\t<MediaGridSkeleton columns={columns} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Empty state\n\tif (assets.length === 0) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-col items-center justify-center rounded-lg border border-dashed p-12\",\n\t\t\t\t\t\"bg-muted/30 text-muted-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<p className=\"text-sm\">No assets found</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Grid columns class\n\tconst gridClass =\n\t\tcolumns === 2\n\t\t\t? \"grid-cols-2\"\n\t\t\t: columns === 3\n\t\t\t\t? \"grid-cols-2 sm:grid-cols-3\"\n\t\t\t\t: columns === 5\n\t\t\t\t\t? \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5\"\n\t\t\t\t\t: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-4\";\n\n\treturn (\n\t\t<div className={cn(\"grid gap-3\", gridClass, className)}>\n\t\t\t{assets.map((asset) => (\n\t\t\t\t<AssetItem\n\t\t\t\t\tkey={asset.id}\n\t\t\t\t\tasset={asset}\n\t\t\t\t\tselected={selectedIds.has(asset.id)}\n\t\t\t\t\tselectionMode={selectionMode}\n\t\t\t\t\tonToggle={() => handleToggle(asset.id)}\n\t\t\t\t\tonClick={onAssetClick ? () => onAssetClick(asset) : undefined}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/media/media-picker-dialog.mjs

@@ -0,0 +1,255 @@
+import { Button } from "../ui/button.mjs";
+import { useCollectionList } from "../../hooks/use-collection.mjs";
+import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet.mjs";
+import { Input } from "../ui/input.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.mjs";
+import { AssetPreview } from "../primitives/asset-preview.mjs";
+import { MediaGrid } from "./media-grid.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/media/media-picker-dialog.tsx
+/**
+* MediaPickerDialog Component
+*
+* Dialog for searching and selecting existing assets from the media library.
+* Used in UploadField and UploadManyField to allow browsing existing files.
+*
+* Features:
+* - Search by filename
+* - MIME type filtering
+* - Responsive grid display
+* - Single/multiple selection modes
+* - Pagination support
+*
+* @example
+* ```tsx
+* <MediaPickerDialog
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   mode="single"
+*   onSelect={(id) => field.onChange(id)}
+* />
+* ```
+*/
+const MIME_TYPE_FILTERS = [
+	{
+		value: "all",
+		label: "All Files",
+		mimePattern: void 0
+	},
+	{
+		value: "images",
+		label: "Images",
+		mimePattern: "image/"
+	},
+	{
+		value: "videos",
+		label: "Videos",
+		mimePattern: "video/"
+	},
+	{
+		value: "audio",
+		label: "Audio",
+		mimePattern: "audio/"
+	},
+	{
+		value: "documents",
+		label: "Documents",
+		mimePattern: "application/pdf"
+	}
+];
+function MediaPickerDialog({ open, onOpenChange, mode = "single", accept, onSelect, maxItems, collection }) {
+	const { collection: resolvedCollection, collections: availableUploadCollections } = useUploadCollection(collection);
+	const [selectedIds, setSelectedIds] = React$1.useState(/* @__PURE__ */ new Set());
+	const [searchQuery, setSearchQuery] = React$1.useState("");
+	const [mimeFilter, setMimeFilter] = React$1.useState("all");
+	const [previewAssetId, setPreviewAssetId] = React$1.useState(null);
+	const where = React$1.useMemo(() => {
+		const andConditions = [];
+		const selectedFilter = MIME_TYPE_FILTERS.find((f) => f.value === mimeFilter);
+		if (selectedFilter?.mimePattern) andConditions.push({ mimeType: { startsWith: selectedFilter.mimePattern } });
+		if (accept && accept.length > 0) {
+			const acceptPatterns = accept.map((pattern) => {
+				if (pattern.startsWith(".")) return { filename: { endsWith: pattern } };
+				if (pattern.endsWith("/*")) return { mimeType: { startsWith: pattern.slice(0, -1) } };
+				return { mimeType: pattern };
+			});
+			if (acceptPatterns.length === 1) andConditions.push(acceptPatterns[0]);
+			else andConditions.push({ OR: acceptPatterns });
+		}
+		if (andConditions.length === 0) return void 0;
+		if (andConditions.length === 1) return andConditions[0];
+		return { AND: andConditions };
+	}, [mimeFilter, accept]);
+	const trimmedSearch = searchQuery.trim();
+	const { data, isLoading } = useCollectionList(resolvedCollection || "", {
+		where,
+		search: trimmedSearch || void 0,
+		limit: 50,
+		orderBy: { createdAt: "desc" }
+	}, { enabled: open && !!resolvedCollection });
+	const assets = React$1.useMemo(() => data?.docs || [], [data?.docs]);
+	const previewAsset = React$1.useMemo(() => assets.find((asset) => asset.id === previewAssetId) ?? null, [assets, previewAssetId]);
+	React$1.useEffect(() => {
+		if (!open) {
+			setSelectedIds(/* @__PURE__ */ new Set());
+			setSearchQuery("");
+			setMimeFilter("all");
+			setPreviewAssetId(null);
+			return;
+		}
+	}, [open]);
+	React$1.useEffect(() => {
+		if (!open || assets.length === 0) return;
+		if (!previewAssetId) {
+			setPreviewAssetId(assets[0].id);
+			return;
+		}
+		if (!assets.some((asset) => asset.id === previewAssetId)) setPreviewAssetId(assets[0].id);
+	}, [
+		open,
+		assets,
+		previewAssetId
+	]);
+	const handleSelectionChange = (ids) => {
+		if (mode === "multiple" && maxItems && ids.size > maxItems) {
+			toast.warning(`Maximum ${maxItems} items allowed`);
+			return;
+		}
+		setSelectedIds(ids);
+	};
+	const handleSelect = () => {
+		if (!resolvedCollection) {
+			toast.error(availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Specify the collection for MediaPickerDialog.` : "No upload collection is configured for media library.");
+			return;
+		}
+		if (selectedIds.size === 0) {
+			toast.error("Please select at least one asset");
+			return;
+		}
+		if (mode === "single") {
+			const [id] = Array.from(selectedIds);
+			onSelect(id);
+		} else onSelect(Array.from(selectedIds));
+		onOpenChange(false);
+	};
+	const handleCancel = () => {
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "data-[side=right]:sm:max-w-6xl w-full p-0",
+			children: [
+				/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "px-6 pt-6",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Browse Media Library" }), /* @__PURE__ */ jsx(SheetDescription, { children: mode === "single" ? "Select an asset from your library" : `Select up to ${maxItems || "multiple"} assets` })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-4 overflow-hidden px-6 pb-6",
+					children: [
+						!resolvedCollection && /* @__PURE__ */ jsx("div", {
+							className: "rounded-lg border border-warning/40 bg-warning/5 p-3 text-sm text-warning",
+							children: availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Pass the collection prop to choose one.` : "No upload collection is configured for media library."
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-3 border-b pb-4 sm:flex-row",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "relative flex-1",
+								children: [/* @__PURE__ */ jsx(Icon, {
+									icon: "ph:magnifying-glass-bold",
+									className: "text-muted-foreground absolute left-3 top-1/2 size-4 -translate-y-1/2"
+								}), /* @__PURE__ */ jsx(Input, {
+									type: "text",
+									placeholder: "Search by filename...",
+									value: searchQuery,
+									onChange: (e) => setSearchQuery(e.target.value),
+									className: "pl-9"
+								})]
+							}), !accept && /* @__PURE__ */ jsxs(Select, {
+								value: mimeFilter,
+								onValueChange: (value) => setMimeFilter(value || "all"),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "w-full sm:w-[180px]",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:funnel-simple-bold",
+											className: "size-4"
+										}), /* @__PURE__ */ jsx(SelectValue, {})]
+									})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: MIME_TYPE_FILTERS.map((filter) => /* @__PURE__ */ jsx(SelectItem, {
+									value: filter.value,
+									children: filter.label
+								}, filter.value)) })]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 gap-4 overflow-hidden",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "flex-1 overflow-y-auto pr-1",
+								children: /* @__PURE__ */ jsx(MediaGrid, {
+									assets,
+									selectedIds,
+									onSelectionChange: handleSelectionChange,
+									selectionMode: mode,
+									loading: isLoading,
+									columns: 5,
+									className: "gap-2",
+									onAssetClick: (asset) => setPreviewAssetId(asset.id)
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "hidden lg:flex w-80 xl:w-96 shrink-0 flex-col gap-3 border-l pl-4",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-xs uppercase tracking-wide",
+									children: "Preview"
+								}), previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
+									asset: previewAsset,
+									variant: "card"
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "flex items-center justify-center rounded-lg border border-dashed p-6 text-xs text-muted-foreground",
+									children: "Select an asset to preview"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "lg:hidden border-t pt-4",
+							children: previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
+								asset: previewAsset,
+								variant: "compact"
+							}) : /* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center rounded-lg border border-dashed p-4 text-xs text-muted-foreground",
+								children: "Select an asset to preview"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(SheetFooter, {
+					className: "border-t px-6 py-4",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex w-full justify-end gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: handleCancel,
+							children: "Cancel"
+						}), /* @__PURE__ */ jsxs(Button, {
+							onClick: handleSelect,
+							disabled: selectedIds.size === 0 || isLoading,
+							children: ["Select ", selectedIds.size > 0 && `(${selectedIds.size})`]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { MediaPickerDialog };
+//# sourceMappingURL=media-picker-dialog.mjs.map