@questpie/admin 1.1.0 → 2.0.0

package/dist/client/scope/provider.mjs

@@ -0,0 +1,159 @@
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/scope/provider.tsx
+/**
+* Scope Provider
+*
+* Provides scope context for multi-tenant applications.
+* Manages the selected scope ID and persists it to localStorage.
+*/
+const ScopeContext = createContext(null);
+/**
+* Provider component for scope selection.
+*
+* Wrap your admin app with this provider to enable scope-based filtering.
+*
+* @example
+* ```tsx
+* <ScopeProvider
+*   headerName="x-selected-property"
+*   storageKey="admin-property"
+* >
+*   <AdminProvider {...props}>
+*     {children}
+*   </AdminProvider>
+* </ScopeProvider>
+* ```
+*/
+function ScopeProvider({ children, headerName, storageKey, defaultScope = null }) {
+	const [isLoading, setIsLoading] = useState(!!storageKey);
+	const [scopeId, setScopeId] = useState(() => {
+		if (typeof window === "undefined") return defaultScope;
+		if (storageKey) return localStorage.getItem(storageKey) ?? defaultScope;
+		return defaultScope;
+	});
+	useEffect(() => {
+		if (storageKey && typeof window !== "undefined") {
+			setScopeId(localStorage.getItem(storageKey) ?? defaultScope);
+			setIsLoading(false);
+		}
+	}, [storageKey]);
+	const setScope = useCallback((id) => {
+		setScopeId(id);
+		if (storageKey && typeof window !== "undefined") if (id) localStorage.setItem(storageKey, id);
+		else localStorage.removeItem(storageKey);
+	}, [storageKey]);
+	const value = {
+		scopeId,
+		setScope,
+		clearScope: useCallback(() => {
+			setScope(null);
+		}, [setScope]),
+		headerName,
+		isLoading
+	};
+	return /* @__PURE__ */ jsx(ScopeContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Hook to access the current scope context.
+*
+* @throws Error if used outside of ScopeProvider
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { scopeId, setScope, clearScope } = useScope();
+*
+*   return (
+*     <div>
+*       Current scope: {scopeId ?? 'None'}
+*       <button onClick={() => setScope('org_123')}>
+*         Switch to Org 123
+*       </button>
+*       <button onClick={clearScope}>Clear</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useScope() {
+	const context = useContext(ScopeContext);
+	if (!context) throw new Error("useScope must be used within a ScopeProvider");
+	return context;
+}
+/**
+* Hook to check if we're inside a ScopeProvider.
+* Returns null if not inside a provider (doesn't throw).
+*/
+function useScopeSafe() {
+	return useContext(ScopeContext);
+}
+/**
+* Hook to create a fetch wrapper that automatically injects the scope header.
+*
+* Use this when creating the QuestpieClient to ensure all API calls
+* include the selected scope.
+*
+* @example
+* ```tsx
+* function AdminWithScopedClient() {
+*   const scopedFetch = useScopedFetch();
+*
+*   const client = useMemo(() =>
+*     createClient<typeof cms>({
+*       baseURL: '/api',
+*       fetch: scopedFetch,
+*     }),
+*     [scopedFetch]
+*   );
+*
+*   return <AdminProvider client={client} {...rest} />;
+* }
+* ```
+*/
+function useScopedFetch() {
+	const { scopeId, headerName } = useScope();
+	return useCallback((input, init) => {
+		const headers = new Headers(init?.headers);
+		if (scopeId) headers.set(headerName, scopeId);
+		return fetch(input, {
+			...init,
+			headers
+		});
+	}, [scopeId, headerName]);
+}
+/**
+* Creates a fetch function that injects scope headers.
+* Use this outside of React components.
+*
+* @example
+* ```ts
+* let currentScopeId: string | null = null;
+*
+* const scopedFetch = createScopedFetch(
+*   'x-selected-property',
+*   () => currentScopeId
+* );
+*
+* const client = createClient({ fetch: scopedFetch, ... });
+* ```
+*/
+function createScopedFetch(headerName, getScopeId) {
+	return (input, init) => {
+		const headers = new Headers(init?.headers);
+		const scopeId = getScopeId();
+		if (scopeId) headers.set(headerName, scopeId);
+		return fetch(input, {
+			...init,
+			headers
+		});
+	};
+}
+
+//#endregion
+export { ScopeProvider, createScopedFetch, useScope, useScopeSafe, useScopedFetch };
+//# sourceMappingURL=provider.mjs.map

package/dist/client/scope/provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.mjs","names":["value: ScopeContextValue"],"sources":["../../../src/client/scope/provider.tsx"],"sourcesContent":["/**\n * Scope Provider\n *\n * Provides scope context for multi-tenant applications.\n * Manages the selected scope ID and persists it to localStorage.\n */\n\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\nimport type { ScopeContextValue, ScopeProviderProps } from \"./types\";\n\n/**\n * Fetch function type (browser-compatible, avoids Bun-specific types)\n */\ntype FetchFn = (\n\tinput: RequestInfo | URL,\n\tinit?: RequestInit,\n) => Promise<Response>;\n\nconst ScopeContext = createContext<ScopeContextValue | null>(null);\n\n/**\n * Provider component for scope selection.\n *\n * Wrap your admin app with this provider to enable scope-based filtering.\n *\n * @example\n * ```tsx\n * <ScopeProvider\n *   headerName=\"x-selected-property\"\n *   storageKey=\"admin-property\"\n * >\n *   <AdminProvider {...props}>\n *     {children}\n *   </AdminProvider>\n * </ScopeProvider>\n * ```\n */\nexport function ScopeProvider({\n\tchildren,\n\theaderName,\n\tstorageKey,\n\tdefaultScope = null,\n}: ScopeProviderProps) {\n\tconst [isLoading, setIsLoading] = useState(!!storageKey);\n\tconst [scopeId, setScopeId] = useState<string | null>(() => {\n\t\t// Don't access localStorage during SSR\n\t\tif (typeof window === \"undefined\") {\n\t\t\treturn defaultScope;\n\t\t}\n\t\t// Initial load from localStorage\n\t\tif (storageKey) {\n\t\t\tconst stored = localStorage.getItem(storageKey);\n\t\t\treturn stored ?? defaultScope;\n\t\t}\n\t\treturn defaultScope;\n\t});\n\n\t// Handle hydration mismatch - only run once on mount\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentionally only runs on mount\n\tuseEffect(() => {\n\t\tif (storageKey && typeof window !== \"undefined\") {\n\t\t\tconst stored = localStorage.getItem(storageKey);\n\t\t\tsetScopeId(stored ?? defaultScope);\n\t\t\tsetIsLoading(false);\n\t\t}\n\t}, [storageKey]);\n\n\tconst setScope = useCallback(\n\t\t(id: string | null) => {\n\t\t\tsetScopeId(id);\n\t\t\tif (storageKey && typeof window !== \"undefined\") {\n\t\t\t\tif (id) {\n\t\t\t\t\tlocalStorage.setItem(storageKey, id);\n\t\t\t\t} else {\n\t\t\t\t\tlocalStorage.removeItem(storageKey);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[storageKey],\n\t);\n\n\tconst clearScope = useCallback(() => {\n\t\tsetScope(null);\n\t}, [setScope]);\n\n\tconst value: ScopeContextValue = {\n\t\tscopeId,\n\t\tsetScope,\n\t\tclearScope,\n\t\theaderName,\n\t\tisLoading,\n\t};\n\n\treturn (\n\t\t<ScopeContext.Provider value={value}>{children}</ScopeContext.Provider>\n\t);\n}\n\n/**\n * Hook to access the current scope context.\n *\n * @throws Error if used outside of ScopeProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { scopeId, setScope, clearScope } = useScope();\n *\n *   return (\n *     <div>\n *       Current scope: {scopeId ?? 'None'}\n *       <button onClick={() => setScope('org_123')}>\n *         Switch to Org 123\n *       </button>\n *       <button onClick={clearScope}>Clear</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useScope(): ScopeContextValue {\n\tconst context = useContext(ScopeContext);\n\tif (!context) {\n\t\tthrow new Error(\"useScope must be used within a ScopeProvider\");\n\t}\n\treturn context;\n}\n\n/**\n * Hook to check if we're inside a ScopeProvider.\n * Returns null if not inside a provider (doesn't throw).\n */\nexport function useScopeSafe(): ScopeContextValue | null {\n\treturn useContext(ScopeContext);\n}\n\n/**\n * Hook to create a fetch wrapper that automatically injects the scope header.\n *\n * Use this when creating the QuestpieClient to ensure all API calls\n * include the selected scope.\n *\n * @example\n * ```tsx\n * function AdminWithScopedClient() {\n *   const scopedFetch = useScopedFetch();\n *\n *   const client = useMemo(() =>\n *     createClient<typeof cms>({\n *       baseURL: '/api',\n *       fetch: scopedFetch,\n *     }),\n *     [scopedFetch]\n *   );\n *\n *   return <AdminProvider client={client} {...rest} />;\n * }\n * ```\n */\nexport function useScopedFetch(): FetchFn {\n\tconst { scopeId, headerName } = useScope();\n\n\treturn useCallback(\n\t\t(input: RequestInfo | URL, init?: RequestInit) => {\n\t\t\tconst headers = new Headers(init?.headers);\n\t\t\tif (scopeId) {\n\t\t\t\theaders.set(headerName, scopeId);\n\t\t\t}\n\t\t\treturn fetch(input, { ...init, headers });\n\t\t},\n\t\t[scopeId, headerName],\n\t);\n}\n\n/**\n * Creates a fetch function that injects scope headers.\n * Use this outside of React components.\n *\n * @example\n * ```ts\n * let currentScopeId: string | null = null;\n *\n * const scopedFetch = createScopedFetch(\n *   'x-selected-property',\n *   () => currentScopeId\n * );\n *\n * const client = createClient({ fetch: scopedFetch, ... });\n * ```\n */\nexport function createScopedFetch(\n\theaderName: string,\n\tgetScopeId: () => string | null,\n): FetchFn {\n\treturn (input: RequestInfo | URL, init?: RequestInit) => {\n\t\tconst headers = new Headers(init?.headers);\n\t\tconst scopeId = getScopeId();\n\t\tif (scopeId) {\n\t\t\theaders.set(headerName, scopeId);\n\t\t}\n\t\treturn fetch(input, { ...init, headers });\n\t};\n}\n"],"mappings":";;;;;;;;;;AAwBA,MAAM,eAAe,cAAwC,KAAK;;;;;;;;;;;;;;;;;;AAmBlE,SAAgB,cAAc,EAC7B,UACA,YACA,YACA,eAAe,QACO;CACtB,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,CAAC,WAAW;CACxD,MAAM,CAAC,SAAS,cAAc,eAA8B;AAE3D,MAAI,OAAO,WAAW,YACrB,QAAO;AAGR,MAAI,WAEH,QADe,aAAa,QAAQ,WAAW,IAC9B;AAElB,SAAO;GACN;AAIF,iBAAgB;AACf,MAAI,cAAc,OAAO,WAAW,aAAa;AAEhD,cADe,aAAa,QAAQ,WAAW,IAC1B,aAAa;AAClC,gBAAa,MAAM;;IAElB,CAAC,WAAW,CAAC;CAEhB,MAAM,WAAW,aACf,OAAsB;AACtB,aAAW,GAAG;AACd,MAAI,cAAc,OAAO,WAAW,YACnC,KAAI,GACH,cAAa,QAAQ,YAAY,GAAG;MAEpC,cAAa,WAAW,WAAW;IAItC,CAAC,WAAW,CACZ;CAMD,MAAMA,QAA2B;EAChC;EACA;EACA,YAPkB,kBAAkB;AACpC,YAAS,KAAK;KACZ,CAAC,SAAS,CAAC;EAMb;EACA;EACA;AAED,QACC,oBAAC,aAAa;EAAgB;EAAQ;GAAiC;;;;;;;;;;;;;;;;;;;;;;;;AA0BzE,SAAgB,WAA8B;CAC7C,MAAM,UAAU,WAAW,aAAa;AACxC,KAAI,CAAC,QACJ,OAAM,IAAI,MAAM,+CAA+C;AAEhE,QAAO;;;;;;AAOR,SAAgB,eAAyC;AACxD,QAAO,WAAW,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;AA0BhC,SAAgB,iBAA0B;CACzC,MAAM,EAAE,SAAS,eAAe,UAAU;AAE1C,QAAO,aACL,OAA0B,SAAuB;EACjD,MAAM,UAAU,IAAI,QAAQ,MAAM,QAAQ;AAC1C,MAAI,QACH,SAAQ,IAAI,YAAY,QAAQ;AAEjC,SAAO,MAAM,OAAO;GAAE,GAAG;GAAM;GAAS,CAAC;IAE1C,CAAC,SAAS,WAAW,CACrB;;;;;;;;;;;;;;;;;;AAmBF,SAAgB,kBACf,YACA,YACU;AACV,SAAQ,OAA0B,SAAuB;EACxD,MAAM,UAAU,IAAI,QAAQ,MAAM,QAAQ;EAC1C,MAAM,UAAU,YAAY;AAC5B,MAAI,QACH,SAAQ,IAAI,YAAY,QAAQ;AAEjC,SAAO,MAAM,OAAO;GAAE,GAAG;GAAM;GAAS,CAAC"}

package/dist/client/scope/types.d.mts

@@ -0,0 +1,112 @@
+//#region src/client/scope/types.d.ts
+/**
+ * Scope Primitives Types
+ *
+ * Types for the scope selection system used in multi-tenant applications.
+ */
+/**
+ * Scope context value provided by ScopeProvider
+ */
+interface ScopeContextValue {
+  /** Current scope ID (null = no scope selected / global) */
+  scopeId: string | null;
+  /** Set the current scope */
+  setScope: (id: string | null) => void;
+  /** Clear the scope (set to null) */
+  clearScope: () => void;
+  /** Header name used for API requests */
+  headerName: string;
+  /** Whether scope is currently being loaded */
+  isLoading?: boolean;
+}
+/**
+ * Props for ScopeProvider component
+ */
+interface ScopeProviderProps {
+  children: React.ReactNode;
+  /**
+   * HTTP header name to use for scope ID in API requests.
+   * @example "x-selected-property"
+   * @example "x-tenant-id"
+   */
+  headerName: string;
+  /**
+   * localStorage key for persisting the selected scope.
+   * If not provided, scope won't be persisted.
+   * @example "admin-selected-property"
+   */
+  storageKey?: string;
+  /**
+   * Default scope ID to use if none is stored.
+   */
+  defaultScope?: string | null;
+}
+/**
+ * Option for ScopePicker
+ */
+interface ScopeOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+/**
+ * Props for ScopePicker component
+ */
+interface ScopePickerProps {
+  /**
+   * Collection to fetch options from.
+   * @example "properties"
+   * @example "organizations"
+   */
+  collection?: string;
+  /**
+   * Field to use as the label for options.
+   * @default "name"
+   */
+  labelField?: string;
+  /**
+   * Field to use as the value for options.
+   * @default "id"
+   */
+  valueField?: string;
+  /**
+   * Static options (alternative to collection-based options).
+   */
+  options?: ScopeOption[];
+  /**
+   * Async function to load options.
+   */
+  loadOptions?: () => Promise<ScopeOption[]>;
+  /**
+   * Placeholder text when no scope is selected.
+   * @default "Select..."
+   */
+  placeholder?: string;
+  /**
+   * Label shown above the picker.
+   */
+  label?: string;
+  /**
+   * Allow clearing the selection (show "All" option).
+   * @default false
+   */
+  allowClear?: boolean;
+  /**
+   * Text for the clear/all option.
+   * @default "All"
+   */
+  clearText?: string;
+  /**
+   * Additional CSS class name.
+   */
+  className?: string;
+  /**
+   * Render as compact (no label, smaller).
+   * @default false
+   */
+  compact?: boolean;
+}
+//#endregion
+export { ScopeContextValue, ScopeOption, ScopePickerProps, ScopeProviderProps };
+//# sourceMappingURL=types.d.mts.map

package/dist/client/scope/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/client/scope/types.ts"],"sourcesContent":[],"mappings":";;AASA;AAgBA;AAuBA;AAUA;;;;AAwB4B,UAzEX,iBAAA,CAyEW;;;;;;;;;;;;;;;UAzDX,kBAAA;YACN,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;UAsBA,WAAA;;;;SAIT,KAAA,CAAM;;;;;UAMG,gBAAA;;;;;;;;;;;;;;;;;;;;YAoBN;;;;sBAIU,QAAQ"}

package/dist/client/styles/index.css

@@ -25,6 +25,9 @@
 	--accent: oklch(0.97 0 0);
 	--accent-foreground: oklch(0.2686 0 89.88);
 	--destructive: oklch(0.58 0.22 27);
+	--success: oklch(0.59 0.18 145);
+	--warning: oklch(0.75 0.18 85);
+	--info: oklch(0.55 0.2 250);
 	--border: oklch(0.9219 0 89.88);
 	--input: oklch(0.9219 0 89.88);
 	--ring: oklch(0.5984 0.3015 310.74);
@@ -88,6 +91,9 @@
 	--accent: oklch(0.1776 0 89.88);
 	--accent-foreground: oklch(0.8699 0 89.88);
 	--destructive: oklch(0.704 0.191 22.216);
+	--success: oklch(0.7 0.17 145);
+	--warning: oklch(0.8 0.16 85);
+	--info: oklch(0.65 0.18 250);
 	--border: oklch(0.3211 0 89.88);
 	--input: oklch(0.3211 0 89.88);
 	--ring: oklch(0.5984 0.3015 310.74);
@@ -135,6 +141,9 @@
 	--color-input: var(--input);
 	--color-border: var(--border);
 	--color-destructive: var(--destructive);
+	--color-success: var(--success);
+	--color-warning: var(--warning);
+	--color-info: var(--info);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-accent: var(--accent);
 	--color-muted-foreground: var(--muted-foreground);
@@ -432,3 +441,74 @@
 .animate-field-glow {
 	animation: field-glow 2s ease-in-out;
 }
+
+/* =============================================================================
+   Realtime Highlight Animation
+   ============================================================================= */
+
+@keyframes realtime-pulse {
+	0% {
+		background-color: oklch(0.72 0.19 142 / 0.25);
+	}
+	100% {
+		background-color: transparent;
+	}
+}
+
+.animate-realtime-pulse {
+	animation: realtime-pulse 1.5s ease-out;
+}
+
+/* Dark mode - slightly brighter green for visibility */
+.dark .animate-realtime-pulse {
+	animation-name: realtime-pulse-dark;
+}
+
+@keyframes realtime-pulse-dark {
+	0% {
+		background-color: oklch(0.72 0.19 142 / 0.2);
+	}
+	100% {
+		background-color: transparent;
+	}
+}
+
+/* Delete animation - red pulse + fade out */
+@keyframes realtime-delete {
+	0% {
+		background-color: oklch(0.65 0.2 27 / 0.25);
+		opacity: 1;
+	}
+	70% {
+		background-color: oklch(0.65 0.2 27 / 0.15);
+		opacity: 0.7;
+	}
+	100% {
+		background-color: oklch(0.65 0.2 27 / 0.1);
+		opacity: 0;
+	}
+}
+
+.animate-realtime-delete {
+	animation: realtime-delete 1.5s ease-out forwards;
+	pointer-events: none;
+}
+
+.dark .animate-realtime-delete {
+	animation-name: realtime-delete-dark;
+}
+
+@keyframes realtime-delete-dark {
+	0% {
+		background-color: oklch(0.65 0.2 27 / 0.2);
+		opacity: 1;
+	}
+	70% {
+		background-color: oklch(0.65 0.2 27 / 0.12);
+		opacity: 0.7;
+	}
+	100% {
+		background-color: oklch(0.65 0.2 27 / 0.08);
+		opacity: 0;
+	}
+}

package/dist/client/utils/auto-expand-fields.mjs

@@ -0,0 +1,65 @@
+//#region src/client/utils/auto-expand-fields.ts
+/**
+* Auto-detect upload and relation fields that need to be expanded.
+*
+* This analyzes the collection config to determine which fields require
+* data expansion when fetching from the backend:
+* - Upload fields need their asset data expanded
+* - Relation fields need their related record data expanded
+*
+* @param config - Collection configuration with fields and list view settings
+* @returns Object mapping field names to `true` for fields that need expansion
+*
+* @example
+* ```tsx
+* const expandedFields = autoExpandFields({
+*   fields: config?.fields,
+*   list: config?.list,
+* });
+*
+* // Use with query
+* const { data } = useCollectionList(collection, {
+*   with: expandedFields,
+* });
+* ```
+*/
+function autoExpandFields(config) {
+	const withFields = {};
+	if (config.list?.with) for (const rel of config.list.with) withFields[rel] = true;
+	const columnFields = config.list?.columns ?? [];
+	const fieldsToCheck = [];
+	if (columnFields.length > 0) for (const col of columnFields) {
+		const fieldName = typeof col === "string" ? col : col.field;
+		if (fieldName === "_title") continue;
+		fieldsToCheck.push(fieldName);
+	}
+	else if (config.fields) fieldsToCheck.push(...Object.keys(config.fields));
+	for (const fieldName of fieldsToCheck) {
+		const fieldDef = config.fields?.[fieldName];
+		if (fieldDef) {
+			const fieldType = fieldDef.name;
+			if (fieldType === "upload" || fieldType === "uploadMany") withFields[fieldName] = true;
+			else if (fieldType === "relation") {
+				const relationName = fieldDef["~options"]?.relationName ?? fieldName;
+				const knownRelations = config.relations;
+				if (!relationName) continue;
+				if (!knownRelations || knownRelations.length === 0) {
+					withFields[relationName] = true;
+					continue;
+				}
+				if (knownRelations.includes(relationName)) withFields[relationName] = true;
+			}
+		}
+	}
+	return withFields;
+}
+/**
+* Check if there are any fields to expand
+*/
+function hasFieldsToExpand(expandedFields) {
+	return Object.keys(expandedFields).length > 0;
+}
+
+//#endregion
+export { autoExpandFields, hasFieldsToExpand };
+//# sourceMappingURL=auto-expand-fields.mjs.map

package/dist/client/utils/auto-expand-fields.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-expand-fields.mjs","names":["withFields: Record<string, boolean>","fieldsToCheck: string[]"],"sources":["../../../src/client/utils/auto-expand-fields.ts"],"sourcesContent":["/**\n * Auto Expand Fields Utility\n *\n * Automatically detects upload and relation fields that need to be expanded\n * when fetching data from the backend (e.g., for displaying in list views).\n */\n\nimport type { FieldDefinition } from \"../builder/field/field\";\n\nexport interface AutoExpandFieldsConfig {\n  /**\n   * Collection fields configuration\n   */\n  fields?: Record<string, FieldDefinition>;\n\n  /**\n   * List view configuration\n   */\n  list?: {\n    /**\n     * Explicit relations to include\n     */\n    with?: string[];\n\n    /**\n     * Columns to display\n     */\n    columns?: Array<string | { field: string }>;\n  };\n\n  /**\n   * Known relation names from collection metadata\n   */\n  relations?: string[];\n}\n\n/**\n * Auto-detect upload and relation fields that need to be expanded.\n *\n * This analyzes the collection config to determine which fields require\n * data expansion when fetching from the backend:\n * - Upload fields need their asset data expanded\n * - Relation fields need their related record data expanded\n *\n * @param config - Collection configuration with fields and list view settings\n * @returns Object mapping field names to `true` for fields that need expansion\n *\n * @example\n * ```tsx\n * const expandedFields = autoExpandFields({\n *   fields: config?.fields,\n *   list: config?.list,\n * });\n *\n * // Use with query\n * const { data } = useCollectionList(collection, {\n *   with: expandedFields,\n * });\n * ```\n */\nexport function autoExpandFields(\n  config: AutoExpandFieldsConfig,\n): Record<string, boolean> {\n  const withFields: Record<string, boolean> = {};\n\n  // Add explicitly configured relations\n  if (config.list?.with) {\n    for (const rel of config.list.with) {\n      withFields[rel] = true;\n    }\n  }\n\n  // Determine which columns are displayed\n  // TODO: this should adhere to visible columns based on adminPrefs\n  const columnFields = config.list?.columns ?? [];\n  const fieldsToCheck: string[] = [];\n\n  if (columnFields.length > 0) {\n    // Use explicitly configured columns\n    for (const col of columnFields) {\n      const fieldName = typeof col === \"string\" ? col : col.field;\n      if (fieldName === \"_title\") continue;\n      fieldsToCheck.push(fieldName);\n    }\n  } else if (config.fields) {\n    // When columns not set, check all fields (buildColumns auto-generates from them)\n    fieldsToCheck.push(...Object.keys(config.fields));\n  }\n\n  // Auto-detect upload and relation fields from columns\n  for (const fieldName of fieldsToCheck) {\n    const fieldDef = config.fields?.[fieldName] as any;\n    if (fieldDef) {\n      // fieldDef.name contains the field type (e.g., \"upload\", \"relation\")\n      const fieldType = fieldDef.name;\n\n      // Auto-expand upload and uploadMany fields\n      if (fieldType === \"upload\" || fieldType === \"uploadMany\") {\n        withFields[fieldName] = true;\n      }\n      // For relation fields, only expand if relationName is explicitly specified\n      // This ensures we don't try to expand relations that don't exist on the backend\n      else if (fieldType === \"relation\") {\n        const relationName =\n          fieldDef[\"~options\"]?.relationName ?? (fieldName as string);\n        const knownRelations = config.relations;\n        if (!relationName) continue;\n        if (!knownRelations || knownRelations.length === 0) {\n          withFields[relationName] = true;\n          continue;\n        }\n        if (knownRelations.includes(relationName)) {\n          withFields[relationName] = true;\n        }\n      }\n    }\n  }\n\n  return withFields;\n}\n\n/**\n * Check if there are any fields to expand\n */\nexport function hasFieldsToExpand(\n  expandedFields: Record<string, boolean>,\n): boolean {\n  return Object.keys(expandedFields).length > 0;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,SAAgB,iBACd,QACyB;CACzB,MAAMA,aAAsC,EAAE;AAG9C,KAAI,OAAO,MAAM,KACf,MAAK,MAAM,OAAO,OAAO,KAAK,KAC5B,YAAW,OAAO;CAMtB,MAAM,eAAe,OAAO,MAAM,WAAW,EAAE;CAC/C,MAAMC,gBAA0B,EAAE;AAElC,KAAI,aAAa,SAAS,EAExB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,YAAY,OAAO,QAAQ,WAAW,MAAM,IAAI;AACtD,MAAI,cAAc,SAAU;AAC5B,gBAAc,KAAK,UAAU;;UAEtB,OAAO,OAEhB,eAAc,KAAK,GAAG,OAAO,KAAK,OAAO,OAAO,CAAC;AAInD,MAAK,MAAM,aAAa,eAAe;EACrC,MAAM,WAAW,OAAO,SAAS;AACjC,MAAI,UAAU;GAEZ,MAAM,YAAY,SAAS;AAG3B,OAAI,cAAc,YAAY,cAAc,aAC1C,YAAW,aAAa;YAIjB,cAAc,YAAY;IACjC,MAAM,eACJ,SAAS,aAAa,gBAAiB;IACzC,MAAM,iBAAiB,OAAO;AAC9B,QAAI,CAAC,aAAc;AACnB,QAAI,CAAC,kBAAkB,eAAe,WAAW,GAAG;AAClD,gBAAW,gBAAgB;AAC3B;;AAEF,QAAI,eAAe,SAAS,aAAa,CACvC,YAAW,gBAAgB;;;;AAMnC,QAAO;;;;;AAMT,SAAgB,kBACd,gBACS;AACT,QAAO,OAAO,KAAK,eAAe,CAAC,SAAS"}