@questpie/admin 2.0.0 → 3.0.0

package/dist/client/styles/index.css

@@ -1,129 +1,217 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "@fontsource-variable/dm-sans";
+@import "@fontsource-variable/geist";
 @import "@fontsource-variable/jetbrains-mono";
 
-/* =============================================================================
-   Admin Theme
-   ============================================================================= */
-
+/* ================================================================
+   QUESTPIE ADMIN THEME — Brutalist Flat
+   ================================================================
+
+   HOW THEMING WORKS
+   -----------------
+   This file is the ONLY place that controls the visual appearance
+   of the admin UI. Components use standard Tailwind utilities
+   (bg-card, border-border, rounded-md, shadow-sm) which resolve
+   to the values defined here.
+
+   TO CREATE A CUSTOM THEME
+   ------------------------
+   1. Copy this file
+   2. Change the variable values below
+   3. Import your copy instead of this one
+   4. That's it — zero component changes needed
+
+   VARIABLE REFERENCE
+   ------------------
+
+   -- Surface Colors -----------------------------------------
+   --background          Page background (darkest/lightest surface)
+   --foreground          Primary text color on background
+   --card                Elevated surface: cards, panels, sidebar
+   --card-foreground     Text on card surfaces
+   --popover             Floating surfaces: dropdowns, tooltips, dialogs
+   --popover-foreground  Text on floating surfaces
+   --input               Form input backgrounds
+   --muted               Subtle backgrounds: hover, table headers, toggles
+   --muted-foreground    Secondary/dimmed text (helper text, placeholders)
+   --accent              Interactive hover backgrounds
+   --accent-foreground   Text on accent backgrounds
+
+   -- Brand Colors -------------------------------------------
+   --primary             Brand accent: CTAs, focus rings, active states
+   --primary-foreground  Text on primary color backgrounds
+   --secondary           Secondary action backgrounds
+   --secondary-foreground Text on secondary backgrounds
+
+   -- Semantic Colors ----------------------------------------
+   --destructive         Errors, delete actions, danger states
+   --success             Confirmations, positive states
+   --warning             Caution states
+   --info                Informational emphasis
+
+   -- Structure ----------------------------------------------
+   --border              Default border color (all structural borders)
+   --ring                Focus ring color (usually same as --primary)
+
+   -- Sidebar ------------------------------------------------
+   Separate tokens for sidebar to allow independent theming.
+   --sidebar, --sidebar-foreground, --sidebar-primary,
+   --sidebar-accent, --sidebar-border, --sidebar-ring, etc.
+
+   -- Shape & Depth ------------------------------------------
+   --radius              Base border-radius
+                         0 -> brutalist sharp corners
+                         8px -> soft rounded corners
+   --shadow-*            Shadow scale (defined in @theme inline)
+                         none -> brutalist flat (no elevation)
+                         normal -> standard shadow depth
+
+   -- Typography ---------------------------------------------
+   --font-sans           Body text, descriptions, user content
+   --font-mono           UI chrome: nav, buttons, tabs, badges, labels
+
+   -- Spacing ------------------------------------------------
+   --spacing-card        Internal card/panel padding (default: 16px)
+   --spacing-section     Section gaps (default: 24px)
+   --spacing-input       Input internal padding (default: 12px)
+
+   -- Grid Texture -------------------------------------------
+   Controlled via body::before pseudo-element.
+   Uses --primary color, 40px grid, 3% opacity.
+   To disable: set body::before { display: none }
+   ================================================================ */
+
+/* Light theme (default — :root)
+   All colors use OKLCH for perceptually uniform contrast management.
+   L = lightness (0–1), C = chroma (saturation), H = hue angle. */
 :root {
-	/* Core Colors - Light Mode */
 	--background: oklch(1 0 0);
-	--foreground: oklch(0.2686 0 89.88);
-	--card: oklch(0.9842 0.0034 247.86);
-	--card-foreground: oklch(0.2686 0 89.88);
+	--foreground: oklch(0.269 0 0);
+	--card: oklch(0.98 0 0);
+	--card-foreground: oklch(0.269 0 0);
 	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.2686 0 89.88);
-	--primary: oklch(0.5984 0.3015 310.74);
-	--primary-foreground: oklch(0.98 0 0);
-	--secondary: oklch(0.9702 0 0);
-	--secondary-foreground: oklch(0.4386 0 89.88);
-	--muted: oklch(0.9702 0 0);
-	--muted-foreground: oklch(0.5555 0 0);
-	--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);
-
-	/* Chart Colors - Varied palette with brand cohesion */
-	--chart-1: oklch(0.65 0.28 310); /* Primary magenta */
-	--chart-2: oklch(0.65 0.2 250); /* Blue-violet */
-	--chart-3: oklch(0.7 0.18 180); /* Teal/cyan */
-	--chart-4: oklch(0.72 0.16 145); /* Emerald */
-	--chart-5: oklch(0.68 0.2 30); /* Warm coral */
-
-	/* Radius */
+	--popover-foreground: oklch(0.269 0 0);
+	--input: oklch(0.922 0 0);
+	--muted: oklch(0.955 0 0);
+	--muted-foreground: oklch(0.48 0 0);
+	--accent: oklch(0.955 0 0);
+	--accent-foreground: oklch(0.145 0 0);
+	--secondary: oklch(0.955 0 0);
+	--secondary-foreground: oklch(0.269 0 0);
+	--primary: oklch(0.541 0.281 303.5);
+	--primary-foreground: oklch(1 0 0);
+	--destructive: oklch(0.637 0.237 25);
+	--destructive-foreground: oklch(1 0 0);
+	--success: oklch(0.7 0.2 155);
+	--success-foreground: oklch(1 0 0);
+	--warning: oklch(0.7 0.16 65);
+	--warning-foreground: oklch(1 0 0);
+	--info: oklch(0.6 0.16 240);
+	--info-foreground: oklch(1 0 0);
+	--border: oklch(0.922 0 0);
+	--ring: oklch(0.541 0.281 303.5);
 	--radius: 0px;
+	--grid-opacity: 0.025;
 
-	/* Sidebar */
-	--sidebar: oklch(0.9842 0.0034 247.86);
-	--sidebar-foreground: oklch(0.2686 0 89.88);
-	--sidebar-primary: oklch(0.5984 0.3015 310.74);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.9702 0 0);
-	--sidebar-accent-foreground: oklch(0.2686 0 89.88);
-	--sidebar-border: oklch(0.9219 0 89.88);
-	--sidebar-ring: oklch(0.5984 0.3015 310.74);
-
-	/* Glass/Grid Vars */
-	--glass-blur: 16px;
-	--glass-blur-strong: 24px;
-	--glass-bg: oklch(1 0 0 / 0.6);
-	--glass-bg-subtle: oklch(1 0 0 / 0.4);
-	--glass-border: oklch(0 0 0 / 0.06);
-	--grid-line: oklch(0 0 0 / 0.015);
-	--grid-size: 24px;
-	--glow-primary: oklch(0.5984 0.3015 310.74 / 0.35);
-	--ambient-primary: oklch(0.5984 0.3015 310.74 / 0.18);
-	--ambient-secondary: oklch(0.5984 0.3015 310.74 / 0.08);
+	/* Chart Colors */
+	--chart-1: oklch(0.541 0.281 303.5);
+	--chart-2: oklch(0.7 0.2 155);
+	--chart-3: oklch(0.6 0.16 240);
+	--chart-4: oklch(0.7 0.16 65);
+	--chart-5: oklch(0.637 0.237 25);
+
+	/* Typography */
+	--font-sans: "Geist Variable", "Inter", sans-serif;
+	--font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
 
 	/* Spacing Scale */
 	--spacing-section: 1.5rem;
-	--spacing-card: 1.25rem;
+	--spacing-card: 1rem;
 	--spacing-input: 0.75rem;
 
-	/* Typography */
-	--font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
-	--font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+	/* Sidebar */
+	--sidebar: oklch(0.975 0 0);
+	--sidebar-foreground: oklch(0.269 0 0);
+	--sidebar-primary: oklch(0.541 0.281 303.5);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.955 0 0);
+	--sidebar-accent-foreground: oklch(0.269 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.541 0.281 303.5);
 }
 
-/* Dark Mode */
+/* Dark theme (.dark class) */
 .dark {
-	--background: oklch(0.1448 0 89.88);
-	--foreground: oklch(0.8699 0 89.88);
-	--card: oklch(0.2178 0 89.88);
-	--card-foreground: oklch(0.8699 0 89.88);
-	--popover: oklch(0.2178 0 89.88);
-	--popover-foreground: oklch(0.8699 0 89.88);
-	--primary: oklch(0.5984 0.3015 310.74);
-	--primary-foreground: oklch(0.98 0 0);
-	--secondary: oklch(0.1776 0 89.88);
-	--secondary-foreground: oklch(0.8699 0 89.88);
-	--muted: oklch(0.2178 0 89.88);
-	--muted-foreground: oklch(0.5555 0 89.88);
-	--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);
-
-	/* Chart Colors - Varied palette (dark mode optimized) */
-	--chart-1: oklch(0.72 0.24 310); /* Primary magenta - brighter */
-	--chart-2: oklch(0.7 0.18 250); /* Blue-violet */
-	--chart-3: oklch(0.75 0.16 180); /* Teal/cyan */
-	--chart-4: oklch(0.76 0.15 145); /* Emerald */
-	--chart-5: oklch(0.73 0.18 30); /* Warm coral */
-
-	--sidebar: oklch(0.1776 0 89.88);
-	--sidebar-foreground: oklch(0.8699 0 89.88);
-	--sidebar-primary: oklch(0.5984 0.3015 310.74);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.2178 0 89.88);
-	--sidebar-accent-foreground: oklch(0.8699 0 89.88);
-	--sidebar-border: oklch(0.3211 0 89.88);
-	--sidebar-ring: oklch(0.5984 0.3015 310.74);
-
-	--grid-line: oklch(1 0 0 / 0.015);
-	--glass-bg: oklch(0.15 0 0 / 0.7);
-	--glass-bg-subtle: oklch(0.15 0 0 / 0.5);
-	--glass-border: oklch(1 0 0 / 0.08);
-	--glow-primary: oklch(0.5984 0.3015 310.74 / 0.45);
-	--ambient-primary: oklch(0.5984 0.3015 310.74 / 0.24);
-	--ambient-secondary: oklch(0.5984 0.3015 310.74 / 0.12);
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.922 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.922 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.922 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.637 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(1 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.922 0 0);
+	--destructive: oklch(0.637 0.237 25);
+	--destructive-foreground: oklch(1 0 0);
+	--border: oklch(0.371 0 0);
+	--input: oklch(0.371 0 0);
+	--ring: oklch(0.541 0.281 303.5);
+	--success: oklch(0.765 0.219 155);
+	--success-foreground: oklch(1 0 0);
+	--warning: oklch(0.793 0.155 82);
+	--warning-foreground: oklch(0.145 0 0);
+	--info: oklch(0.77 0.119 222);
+	--info-foreground: oklch(0.145 0 0);
+	--grid-opacity: 0.06;
+
+	/* Chart Colors */
+	--chart-1: oklch(0.541 0.281 303.5);
+	--chart-2: oklch(0.765 0.219 155);
+	--chart-3: oklch(0.77 0.119 222);
+	--chart-4: oklch(0.793 0.155 82);
+	--chart-5: oklch(0.637 0.237 25);
+
+	/* Sidebar */
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.922 0 0);
+	--sidebar-primary: oklch(0.541 0.281 303.5);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.922 0 0);
+	--sidebar-border: oklch(0.371 0 0);
+	--sidebar-ring: oklch(0.541 0.281 303.5);
 }
 
 @theme inline {
+	/* Typography */
+	--font-sans: "Geist Variable", "Inter", sans-serif;
+	--font-mono:
+		"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
+
+	/* Shadow scale: none for brutalist flat */
+	--shadow-xs: none;
+	--shadow-sm: none;
+	--shadow: none;
+	--shadow-md: none;
+	--shadow-lg: none;
+	--shadow-xl: none;
+	--shadow-2xl: none;
+
+	/* Radius: all resolve to --radius (except full for avatars/pills) */
+	--radius-sm: var(--radius);
+	--radius-md: var(--radius);
+	--radius-lg: var(--radius);
+	--radius-xl: var(--radius);
+	--radius-2xl: var(--radius);
+	--radius-3xl: var(--radius);
+	--radius-4xl: var(--radius);
+	--radius-full: 9999px;
+
+	/* Color mappings */
 	--color-sidebar-ring: var(--sidebar-ring);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -141,9 +229,13 @@
 	--color-input: var(--input);
 	--color-border: var(--border);
 	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
 	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
 	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
 	--color-info: var(--info);
+	--color-info-foreground: var(--info-foreground);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-accent: var(--accent);
 	--color-muted-foreground: var(--muted-foreground);
@@ -158,14 +250,23 @@
 	--color-card: var(--card);
 	--color-foreground: var(--foreground);
 	--color-background: var(--background);
-	--radius-sm: 0px;
-	--radius-md: 0px;
-	--radius-lg: 0px;
-	--radius-xl: 0px;
-	--radius-2xl: 0px;
-	--radius-3xl: 0px;
-	--radius-4xl: 0px;
-	--radius-full: 0px;
+}
+
+/* =============================================================================
+   Grid Texture (matches landing page)
+   ============================================================================= */
+
+body::before {
+	content: "";
+	position: fixed;
+	inset: 0;
+	z-index: 0;
+	pointer-events: none;
+	background-image:
+		linear-gradient(var(--primary) 1px, transparent 1px),
+		linear-gradient(90deg, var(--primary) 1px, transparent 1px);
+	background-size: 40px 40px;
+	opacity: var(--grid-opacity, 0.025);
 }
 
 /* =============================================================================
@@ -258,7 +359,6 @@
 	background: var(--popover);
 	color: var(--popover-foreground);
 	border: 1px solid var(--border);
-	box-shadow: 0 0 20px oklch(0 0 0 / 40%);
 }
 
 .qp-rich-text-editor__slash {
@@ -299,84 +399,6 @@
 	color: var(--muted-foreground);
 }
 
-/* =============================================================================
-   QUESTPIE Atmospheric Utilities
-   ============================================================================= */
-
-@utility bg-grid-quest {
-	background-image:
-		linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
-		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
-	background-size: var(--grid-size, 24px) var(--grid-size, 24px);
-}
-
-/* Glow utilities - cyber aesthetic shadows */
-@utility glow-sm {
-	box-shadow: 0 0 10px oklch(0.55 0.3 300 / 15%);
-}
-
-@utility glow-md {
-	box-shadow: 0 0 15px oklch(0.55 0.3 300 / 20%);
-}
-
-@utility glow-lg {
-	box-shadow: 0 0 25px oklch(0.55 0.3 300 / 25%);
-}
-
-@utility glow-primary {
-	box-shadow: 0 0 20px var(--glow-primary, oklch(0.55 0.3 300 / 30%));
-}
-
-@utility glow-primary-sm {
-	box-shadow: 0 0 8px var(--glow-primary, oklch(0.55 0.3 300 / 25%));
-}
-
-@utility glow-destructive {
-	box-shadow: 0 0 20px oklch(0.65 0.22 27 / 30%);
-}
-
-/* Hover glow states */
-@utility hover-glow-sm {
-	&:hover {
-		box-shadow: 0 0 10px oklch(0.55 0.3 300 / 15%);
-	}
-}
-
-@utility hover-glow-md {
-	&:hover {
-		box-shadow: 0 0 15px oklch(0.55 0.3 300 / 20%);
-	}
-}
-
-@utility ambient-beam {
-	background: radial-gradient(
-		circle,
-		var(--ambient-primary, oklch(0.55 0.3 300 / 15%)) 0%,
-		transparent 70%
-	);
-	filter: blur(100px);
-}
-
-/* Glass Panel - for cards, sidebars, dialogs */
-@utility glass-panel {
-	background: var(--glass-bg);
-	backdrop-filter: blur(var(--glass-blur-strong));
-	border: 1px solid var(--glass-border);
-}
-
-/* Glass Panel Subtle - for inputs, accordions */
-@utility glass-subtle {
-	background: var(--glass-bg-subtle);
-	backdrop-filter: blur(var(--glass-blur));
-	border: 1px solid var(--glass-border);
-}
-
-/* Glass Surface - lighter glass for hover states */
-@utility glass-surface {
-	background: var(--glass-bg-subtle);
-	backdrop-filter: blur(var(--glass-blur));
-}
-
 /* =============================================================================
    Base Styles
    ============================================================================= */
@@ -395,7 +417,6 @@
    Custom Scrollbar Styles
    ============================================================================= */
 
-/* Thin scrollbar utility */
 @utility scrollbar-thin {
 	scrollbar-width: thin;
 	scrollbar-color: color-mix(in oklch, var(--border) 50%, transparent)
@@ -434,7 +455,7 @@
 		background-color: transparent;
 	}
 	50% {
-		background-color: hsl(var(--primary) / 0.08);
+		background-color: color-mix(in oklch, var(--primary) 8%, transparent);
 	}
 }
 
@@ -448,43 +469,30 @@
 
 @keyframes realtime-pulse {
 	0% {
-		background-color: oklch(0.72 0.19 142 / 0.25);
+		border-left-color: var(--primary);
 	}
 	100% {
-		background-color: transparent;
+		border-left-color: transparent;
 	}
 }
 
 .animate-realtime-pulse {
+	border-left: 3px solid transparent;
 	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);
+		background-color: color-mix(in oklch, var(--destructive) 25%, transparent);
 		opacity: 1;
 	}
 	70% {
-		background-color: oklch(0.65 0.2 27 / 0.15);
+		background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
 		opacity: 0.7;
 	}
 	100% {
-		background-color: oklch(0.65 0.2 27 / 0.1);
+		background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
 		opacity: 0;
 	}
 }
@@ -494,21 +502,89 @@
 	pointer-events: none;
 }
 
-.dark .animate-realtime-delete {
-	animation-name: realtime-delete-dark;
+/* =============================================================================
+   Reduced Motion — Respect user's motion preferences (WCAG 2.1 AA)
+   ============================================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+
+	.animate-field-glow,
+	.animate-realtime-pulse,
+	.animate-realtime-delete,
+	.animate-spin {
+		animation: none !important;
+	}
 }
 
-@keyframes realtime-delete-dark {
-	0% {
-		background-color: oklch(0.65 0.2 27 / 0.2);
-		opacity: 1;
+/* =============================================================================
+   High Contrast — Improve visibility for users needing more contrast
+   ============================================================================= */
+
+@media (prefers-contrast: more) {
+	:root {
+		--muted-foreground: oklch(0.37 0 0);
+		--border: oklch(0.66 0 0);
 	}
-	70% {
-		background-color: oklch(0.65 0.2 27 / 0.12);
-		opacity: 0.7;
+
+	.dark {
+		--muted-foreground: oklch(0.73 0 0);
+		--border: oklch(0.56 0 0);
 	}
-	100% {
-		background-color: oklch(0.65 0.2 27 / 0.08);
-		opacity: 0;
+}
+
+/* =============================================================================
+   Focus Visible — Enhanced focus styles for keyboard navigation
+   ============================================================================= */
+
+@layer base {
+	:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+
+	/* Skip link styles */
+	[href="#main-content"]:focus {
+		clip: auto;
+		clip-path: none;
+		height: auto;
+		width: auto;
+		overflow: visible;
+		white-space: nowrap;
+	}
+
+	/* Field focus pulse animation (preview click-to-focus) */
+	@keyframes field-focus-pulse {
+		0% {
+			box-shadow: 0 0 0 0 var(--primary);
+		}
+		50% {
+			box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent);
+		}
+		100% {
+			box-shadow: 0 0 0 0 transparent;
+		}
+	}
+
+	.field-focus-pulse {
+		animation: field-focus-pulse 0.6s ease-out;
+		border-radius: var(--radius);
 	}
 }
+
+
+iconify-icon {
+	display: inline-block;
+}
+
+iconify-icon:not([width]) {
+	width: 1em;
+	height: 1em;
+}

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

@@ -1,4 +1,21 @@
 //#region src/client/utils/auto-expand-fields.ts
+function getNestedAvatarRelation(fieldDef) {
+	const avatarField = fieldDef?.["~options"]?.listCell?.avatarField;
+	if (!avatarField || typeof avatarField !== "string") return;
+	const [firstSegment, ...rest] = avatarField.split(".");
+	if (!firstSegment || rest.length === 0) return;
+	return firstSegment;
+}
+function addRelationExpand(withFields, relationName, nestedRelation) {
+	if (!nestedRelation) {
+		if (!withFields[relationName]) withFields[relationName] = true;
+		return;
+	}
+	const existing = withFields[relationName];
+	const nestedWith = existing && typeof existing === "object" && !Array.isArray(existing) ? { ...existing.with ?? {} } : {};
+	nestedWith[nestedRelation] = true;
+	withFields[relationName] = { with: nestedWith };
+}
 /**
 * Auto-detect upload and relation fields that need to be expanded.
 *
@@ -6,9 +23,10 @@
 * data expansion when fetching from the backend:
 * - Upload fields need their asset data expanded
 * - Relation fields need their related record data expanded
+* - Relation avatar chips can request nested relation expansion (e.g. avatar)
 *
 * @param config - Collection configuration with fields and list view settings
-* @returns Object mapping field names to `true` for fields that need expansion
+* @returns Object mapping relation names to `true` or nested `with` config
 *
 * @example
 * ```tsx
@@ -41,13 +59,14 @@ function autoExpandFields(config) {
 			if (fieldType === "upload" || fieldType === "uploadMany") withFields[fieldName] = true;
 			else if (fieldType === "relation") {
 				const relationName = fieldDef["~options"]?.relationName ?? fieldName;
+				const nestedAvatarRelation = getNestedAvatarRelation(fieldDef);
 				const knownRelations = config.relations;
 				if (!relationName) continue;
 				if (!knownRelations || knownRelations.length === 0) {
-					withFields[relationName] = true;
+					addRelationExpand(withFields, relationName, nestedAvatarRelation);
 					continue;
 				}
-				if (knownRelations.includes(relationName)) withFields[relationName] = true;
+				if (knownRelations.includes(relationName)) addRelationExpand(withFields, relationName, nestedAvatarRelation);
 			}
 		}
 	}
@@ -61,5 +80,4 @@ function hasFieldsToExpand(expandedFields) {
 }
 
 //#endregion
-export { autoExpandFields, hasFieldsToExpand };
-//# sourceMappingURL=auto-expand-fields.mjs.map
+export { autoExpandFields, hasFieldsToExpand };