@questpie/admin 3.0.2 → 3.0.4

package/dist/client/styles/index.css

@@ -1,590 +1,4 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
-@import "@fontsource-variable/jetbrains-mono";
+/* QUESTPIE Admin — Default stylesheet
+   Alias for base.css. Import base.css directly for explicit intent. */
 
-/* ================================================================
-   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 {
-	--background: oklch(1 0 0);
-	--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.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;
-
-	/* 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: 1rem;
-	--spacing-input: 0.75rem;
-
-	/* 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 theme (.dark class) */
-.dark {
-	--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);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar: var(--sidebar);
-	--color-chart-5: var(--chart-5);
-	--color-chart-4: var(--chart-4);
-	--color-chart-3: var(--chart-3);
-	--color-chart-2: var(--chart-2);
-	--color-chart-1: var(--chart-1);
-	--color-ring: var(--ring);
-	--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);
-	--color-muted: var(--muted);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-secondary: var(--secondary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-primary: var(--primary);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-popover: var(--popover);
-	--color-card-foreground: var(--card-foreground);
-	--color-card: var(--card);
-	--color-foreground: var(--foreground);
-	--color-background: var(--background);
-}
-
-/* =============================================================================
-   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);
-}
-
-/* =============================================================================
-   Rich Text Editor Styles
-   ============================================================================= */
-
-.qp-rich-text-editor__content {
-	min-height: 200px;
-	padding: 0.75rem;
-	outline: none;
-}
-
-.qp-rich-text-editor__content > *:first-child {
-	margin-top: 0;
-}
-
-.qp-rich-text-editor__content > *:last-child {
-	margin-bottom: 0;
-}
-
-.qp-rich-text-editor__content p {
-	margin: 0 0 0.75rem;
-}
-
-.qp-rich-text-editor__content h1 {
-	font-size: 1.5rem;
-	font-weight: 600;
-	margin: 1rem 0 0.75rem;
-}
-
-.qp-rich-text-editor__content h2 {
-	font-size: 1.25rem;
-	font-weight: 600;
-	margin: 1rem 0 0.75rem;
-}
-
-.qp-rich-text-editor__content h3 {
-	font-size: 1.125rem;
-	font-weight: 600;
-	margin: 1rem 0 0.75rem;
-}
-
-.qp-rich-text-editor__content ul,
-.qp-rich-text-editor__content ol {
-	padding-left: 1.5rem;
-	margin: 0.75rem 0;
-}
-
-.qp-rich-text-editor__content blockquote {
-	border-left: 2px solid var(--border);
-	padding-left: 0.75rem;
-	color: var(--muted-foreground);
-	margin: 0.75rem 0;
-}
-
-.qp-rich-text-editor__content code {
-	background: var(--muted);
-	padding: 0.1rem 0.25rem;
-	font-size: 0.875em;
-	font-family: var(--font-mono);
-}
-
-.qp-rich-text-editor__content pre {
-	background: var(--muted);
-	padding: 0.75rem;
-	overflow-x: auto;
-	font-family: var(--font-mono);
-}
-
-.qp-rich-text-editor__content hr {
-	border: none;
-	border-top: 1px solid var(--border);
-	margin: 1rem 0;
-}
-
-.qp-rich-text-editor__content table {
-	border-collapse: collapse;
-	margin: 1rem 0;
-	width: 100%;
-}
-
-.qp-rich-text-editor__content th,
-.qp-rich-text-editor__content td {
-	border: 1px solid var(--border);
-	padding: 0.5rem;
-	text-align: left;
-}
-
-.tippy-box[data-theme~="qp-rich-text-editor"] {
-	background: var(--popover);
-	color: var(--popover-foreground);
-	border: 1px solid var(--border);
-}
-
-.qp-rich-text-editor__slash {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-	padding: 0.5rem;
-	min-width: 220px;
-}
-
-.qp-rich-text-editor__slash-item {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 0.125rem;
-	padding: 0.5rem;
-	font-size: 0.75rem;
-	line-height: 1.2;
-	color: var(--foreground);
-}
-
-.qp-rich-text-editor__slash-item--active,
-.qp-rich-text-editor__slash-item:hover {
-	background: var(--muted);
-}
-
-.qp-rich-text-editor__slash-title {
-	font-weight: 600;
-}
-
-.qp-rich-text-editor__slash-description {
-	color: var(--muted-foreground);
-}
-
-.qp-rich-text-editor__slash-empty {
-	padding: 0.5rem;
-	font-size: 0.75rem;
-	color: var(--muted-foreground);
-}
-
-/* =============================================================================
-   Base Styles
-   ============================================================================= */
-
-@layer base {
-	* {
-		@apply border-border outline-ring/50;
-	}
-	body {
-		@apply bg-background text-foreground;
-		font-family: var(--font-sans);
-	}
-}
-
-/* =============================================================================
-   Custom Scrollbar Styles
-   ============================================================================= */
-
-@utility scrollbar-thin {
-	scrollbar-width: thin;
-	scrollbar-color: color-mix(in oklch, var(--border) 50%, transparent)
-		transparent;
-
-	&::-webkit-scrollbar {
-		width: 6px;
-		height: 6px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: color-mix(in oklch, var(--border) 60%, transparent);
-		border-radius: 3px;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--border);
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-}
-
-/* =============================================================================
-   Field Focus Animation
-   ============================================================================= */
-
-@keyframes field-glow {
-	0%,
-	100% {
-		background-color: transparent;
-	}
-	50% {
-		background-color: color-mix(in oklch, var(--primary) 8%, transparent);
-	}
-}
-
-.animate-field-glow {
-	animation: field-glow 2s ease-in-out;
-}
-
-/* =============================================================================
-   Realtime Highlight Animation
-   ============================================================================= */
-
-@keyframes realtime-pulse {
-	0% {
-		border-left-color: var(--primary);
-	}
-	100% {
-		border-left-color: transparent;
-	}
-}
-
-.animate-realtime-pulse {
-	border-left: 3px solid transparent;
-	animation: realtime-pulse 1.5s ease-out;
-}
-
-/* Delete animation - red pulse + fade out */
-@keyframes realtime-delete {
-	0% {
-		background-color: color-mix(in oklch, var(--destructive) 25%, transparent);
-		opacity: 1;
-	}
-	70% {
-		background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
-		opacity: 0.7;
-	}
-	100% {
-		background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
-		opacity: 0;
-	}
-}
-
-.animate-realtime-delete {
-	animation: realtime-delete 1.5s ease-out forwards;
-	pointer-events: none;
-}
-
-/* =============================================================================
-   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;
-	}
-}
-
-/* =============================================================================
-   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);
-	}
-
-	.dark {
-		--muted-foreground: oklch(0.73 0 0);
-		--border: oklch(0.56 0 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;
-}
+@import "./base.css";

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

@@ -56,8 +56,10 @@ function autoExpandFields(config) {
 		const fieldDef = config.fields?.[fieldName];
 		if (fieldDef) {
 			const fieldType = fieldDef.name;
-			if (fieldType === "upload" || fieldType === "uploadMany") withFields[fieldName] = true;
-			else if (fieldType === "relation") {
+			if (fieldType === "upload" || fieldType === "uploadMany") {
+				const relationName = fieldDef["~options"]?.relationName ?? fieldName;
+				if (relationName) withFields[relationName] = true;
+			} else if (fieldType === "relation") {
 				const relationName = fieldDef["~options"]?.relationName ?? fieldName;
 				const nestedAvatarRelation = getNestedAvatarRelation(fieldDef);
 				const knownRelations = config.relations;

package/dist/client/utils/keyboard-shortcuts.mjs

@@ -0,0 +1,26 @@
+//#region src/client/utils/keyboard-shortcuts.ts
+function isModifierShortcut(event) {
+	return event.metaKey || event.ctrlKey;
+}
+function isEditableShortcutTarget(target) {
+	if (!(target instanceof Element)) return false;
+	return Boolean(target.closest([
+		"input",
+		"textarea",
+		"select",
+		"[contenteditable='true']",
+		"[role='textbox']",
+		".ProseMirror",
+		"[data-admin-rich-text-editor]"
+	].join(",")));
+}
+function shouldHandleAdminShortcut(event, options) {
+	if (event.defaultPrevented) return false;
+	if (!isModifierShortcut(event)) return false;
+	if (event.key.toLowerCase() !== options.key.toLowerCase()) return false;
+	if (!options.allowEditableTarget && isEditableShortcutTarget(event.target)) return false;
+	return true;
+}
+
+//#endregion
+export { isModifierShortcut, shouldHandleAdminShortcut };

package/dist/client/utils/use-lazy-component.mjs

@@ -0,0 +1,80 @@
+import * as React from "react";
+
+//#region src/client/utils/use-lazy-component.ts
+/**
+* Shared lazy component resolution helper.
+*
+* Handles three `MaybeLazyComponent` forms:
+*  - `React.ComponentType` — used directly, no async
+*  - `React.lazy(...)` — exotic component, used directly
+*  - `() => import(...)` — dynamic loader, resolved async
+*
+* @internal Not part of the public API.
+*/
+function isLazyLoader(loader, allowDynamicImportLoaders) {
+	if (!allowDynamicImportLoaders) return false;
+	return typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0 && !loader.$$typeof;
+}
+/**
+* Resolve a MaybeLazyComponent to a concrete React component.
+*
+* Returns `{ Component, loading }`:
+* - `loading: true` while a lazy loader is in-flight
+* - `Component: null` if loader is undefined or failed to resolve
+* - Falls back to null on error (callers should fall back to built-in)
+*/
+function useLazyComponent(loader, options = {}) {
+	const { allowDynamicImportLoaders = true } = options;
+	const [state, setState] = React.useState(() => {
+		if (!loader) return {
+			Component: null,
+			loading: false
+		};
+		if (!isLazyLoader(loader, allowDynamicImportLoaders)) return {
+			Component: loader,
+			loading: false
+		};
+		return {
+			Component: null,
+			loading: true
+		};
+	});
+	React.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false
+			});
+			return;
+		}
+		if (!isLazyLoader(loader, allowDynamicImportLoaders)) {
+			setState({
+				Component: loader,
+				loading: false
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false
+				});
+			} catch {
+				if (mounted) setState({
+					Component: null,
+					loading: false
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [allowDynamicImportLoaders, loader]);
+	return state;
+}
+
+//#endregion
+export { useLazyComponent };