@dyrected/admin 2.5.45 → 2.5.47

package/dist/admin.css

@@ -191,10 +191,60 @@
     --sidebar-accent-foreground: 259 100% 62%;
     --sidebar-border: 256 51% 90%;
     --sidebar-ring: 259 100% 62%;
+  }
+
+.dy-admin-ui.dark,
+  .dy-admin-ui[data-theme="dark"] {
+    --background: 240 10% 4%;          /* #09090B charcoal */
+    --foreground: 78 38% 95%;          /* warm lime-white */
+
+    --card: 240 8% 7%;                 /* #111114 */
+    --card-foreground: 78 38% 95%;
+
+    --popover: 240 8% 7%;
+    --popover-foreground: 78 38% 95%;
+
+    --primary: 81 100% 59%;            /* Signal Lime */
+    --primary-foreground: 60 3% 6%;
+    --intelligence: 259 100% 70%;      /* Brighter Violet */
+    --intelligence-foreground: 0 0% 100%;
+
+    --secondary: 259 45% 15%;
+    --secondary-foreground: 266 82% 92%;
+
+    --muted: 240 7% 13%;
+    --muted-foreground: 252 9% 68%;
+
+    --accent: 259 44% 16%;
+    --accent-foreground: 266 82% 88%;
+
+    --destructive: 0 72% 58%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 256 20% 21%;
+    --input: 256 20% 21%;
+    --ring: 259 100% 70% / 0.34;
+
+    --sidebar-background: 240 10% 4%;
+    --sidebar-foreground: 78 38% 95%;
+    --sidebar-primary: 81 100% 59%;
+    --sidebar-primary-foreground: 60 3% 6%;
+    --sidebar-accent: 259 44% 16%;
+    --sidebar-accent-foreground: 266 82% 88%;
+    --sidebar-border: 256 20% 21%;
+    --sidebar-ring: 259 100% 70%;
+  }
+
+.dy-admin-ui {
     color-scheme: light;
     font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
   }
 
+.dy-admin-ui.dark,
+  .dy-admin-ui[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
 .dy-admin-ui :where(h1, h2, h3, h4, h5, h6){
     font-family: var(--font-serif), ui-serif, Georgia, serif;
     font-weight: 500;

package/dist/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: {
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
-    size?: "icon" | "default" | "sm" | "lg";
+    size?: "default" | "sm" | "lg" | "icon";
 } & import('class-variance-authority/types').ClassProp) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/hooks/admin-theme-context.d.ts

@@ -0,0 +1,9 @@
+import { AdminThemePreference, ResolvedAdminTheme } from './admin-theme';
+import * as React from "react";
+export interface AdminThemeContextValue {
+    theme: AdminThemePreference;
+    resolvedTheme: ResolvedAdminTheme;
+    setTheme: (theme: AdminThemePreference) => void;
+    themeClassName: string;
+}
+export declare const AdminThemeContext: React.Context<AdminThemeContextValue>;

package/dist/hooks/admin-theme-provider.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare function AdminThemeProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AdminThemedRoot({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/admin-theme.d.ts

@@ -0,0 +1,4 @@
+export type AdminThemePreference = "system" | "light" | "dark";
+export type ResolvedAdminTheme = "light" | "dark";
+export declare function resolveAdminTheme(preference: AdminThemePreference, systemTheme: ResolvedAdminTheme): ResolvedAdminTheme;
+export declare function adminThemeClassName(resolvedTheme: ResolvedAdminTheme): "dy-admin-ui dark" | "dy-admin-ui";

package/dist/hooks/use-admin-theme.d.ts

@@ -0,0 +1,2 @@
+export type { AdminThemePreference, ResolvedAdminTheme } from './admin-theme';
+export declare function useAdminTheme(): import('./admin-theme-context').AdminThemeContextValue;

package/dist/hooks/use-admin-theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { HashRouter, Link, MemoryRouter, Route, Routes, useLocation, useNavigate
 import { QueryClient, QueryClientProvider, useInfiniteQuery, useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createClient } from "@dyrected/sdk";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bold, BookOpen, Braces, Calendar, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDown, Circle, Clock, Clock3, Code, Code2, Compass, Copy, Database, Download, ExternalLink, Eye, EyeOff, FileDown, FileIcon, FileText, FileUp, Filter, Globe, GripVertical, Heading1, Heading2, Image as Image$1, Info, Italic, KeyRound, Layers, LayoutDashboard, Library, Link as Link$1, List, ListOrdered, Loader2, Lock, LogOut, Mail, Menu, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pencil, Play, Plus, Quote, RotateCcw, Save, Scissors, Search, Settings, Settings2, Share2, Shield, Smartphone, Sparkles, Strikethrough, Table, Trash2, Underline, Undo2, Upload, UploadCloud, Users, Video, Volume2, X, XCircle, icons } from "lucide-react";
+import { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bold, BookOpen, Braces, Calendar, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDown, Circle, Clock, Clock3, Code, Code2, Compass, Copy, Database, Download, ExternalLink, Eye, EyeOff, FileDown, FileIcon, FileText, FileUp, Filter, Globe, GripVertical, Heading1, Heading2, Image as Image$1, Info, Italic, KeyRound, Layers, LayoutDashboard, Library, Link as Link$1, List, ListOrdered, Loader2, Lock, LogOut, Mail, Menu, Monitor, Moon, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Pencil, Play, Plus, Quote, RotateCcw, Save, Scissors, Search, Settings, Settings2, Share2, Shield, Smartphone, Sparkles, Strikethrough, Sun, Table, Trash2, Underline, Undo2, Upload, UploadCloud, Users, Video, Volume2, X, XCircle, icons } from "lucide-react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -75,7 +75,8 @@ function DyrectedProvider({ children, apiKey: initialApiKey, baseUrl: initialBas
 	const [apiKey, setApiKey] = useState(() => initialApiKey || (typeof window !== "undefined" ? localStorage.getItem("dyrected_key") : null) || void 0);
 	const [siteId, setSiteId] = useState(() => initialSiteId || (typeof window !== "undefined" ? localStorage.getItem("dyrected_site_id") : null) || void 0);
 	const [schemas, setSchemas] = useState(null);
-	const [user, setUser] = useState(null);
+	const initialTokenUser = useMemo(() => initialToken ? decodeTokenPayload(initialToken) : null, [initialToken]);
+	const [user, setUser] = useState(() => initialTokenUser);
 	const [authCollectionSlug, setAuthCollectionSlug] = useState(() => (typeof window !== "undefined" ? localStorage.getItem("dyrected_admin_auth_collection") : null) || null);
 	const client = useMemo(() => {
 		if (!baseUrl) return null;
@@ -106,6 +107,7 @@ function DyrectedProvider({ children, apiKey: initialApiKey, baseUrl: initialBas
 			cancelled = true;
 		};
 	}, [client]);
+	const activeUser = initialTokenUser ?? user;
 	useEffect(() => {
 		if (initialToken && client) client.setToken(initialToken);
 	}, [initialToken, client]);
@@ -143,18 +145,18 @@ function DyrectedProvider({ children, apiKey: initialApiKey, baseUrl: initialBas
 		schemas
 	]);
 	useEffect(() => {
-		if (initialToken || !client || !schemas || user) return;
+		if (initialToken || !client || !schemas || activeUser) return;
 		const token = localStorage.getItem("dyrected_token");
 		const resolvedCollectionSlug = authCollectionSlug || getAdminCollectionSlug(schemas);
 		if (!token || !resolvedCollectionSlug) return;
 		client.setToken(token);
 		client.collection(resolvedCollectionSlug).me().then((nextUser) => setUser(nextUser), () => setUser(null));
 	}, [
+		activeUser,
 		authCollectionSlug,
 		client,
 		initialToken,
-		schemas,
-		user
+		schemas
 	]);
 	const logout = useCallback(() => {
 		localStorage.removeItem("dyrected_url");
@@ -183,13 +185,37 @@ function DyrectedProvider({ children, apiKey: initialApiKey, baseUrl: initialBas
 			logout,
 			isAuthenticated: !!baseUrl && !!apiKey,
 			schemas,
-			user,
+			user: activeUser,
 			initialToken,
 			components
 		},
 		children
 	});
 }
+function decodeTokenPayload(token) {
+	const payload = token.split(".")[1];
+	if (!payload) return null;
+	try {
+		const normalized = payload.replace(/-/g, "+").replace(/_/g, "/");
+		const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, "=");
+		const json = decodeURIComponent(atob(padded).split("").map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`).join(""));
+		const parsed = JSON.parse(json);
+		if (!parsed || typeof parsed !== "object") return null;
+		const user = parsed;
+		const roles = Array.isArray(user.roles) ? user.roles.filter((role) => typeof role === "string").map(normalizeCloudRole) : [];
+		const role = typeof user.role === "string" ? normalizeCloudRole(user.role) : void 0;
+		return {
+			...user,
+			...role ? { role } : {},
+			roles: roles.length > 0 ? roles : role ? [role] : roles
+		};
+	} catch {
+		return null;
+	}
+}
+function normalizeCloudRole(role) {
+	return role === "owner" ? "admin" : role;
+}
 //#endregion
 //#region src/providers/query-provider.tsx
 function QueryProvider({ children }) {
@@ -376,9 +402,40 @@ function BrandingProvider({ children }) {
 	]), children] });
 }
 //#endregion
+//#region src/hooks/admin-theme.ts
+function resolveAdminTheme(preference, systemTheme) {
+	return preference === "system" ? systemTheme : preference;
+}
+function adminThemeClassName(resolvedTheme) {
+	return resolvedTheme === "dark" ? "dy-admin-ui dark" : "dy-admin-ui";
+}
+//#endregion
+//#region src/hooks/admin-theme-context.ts
+var AdminThemeContext = React$1.createContext(null);
+//#endregion
+//#region src/hooks/use-admin-theme.ts
+function getSystemTheme$1() {
+	if (typeof window === "undefined" || !window.matchMedia) return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function useAdminTheme() {
+	const context = React$1.useContext(AdminThemeContext);
+	if (!context) {
+		const resolvedTheme = getSystemTheme$1();
+		return {
+			theme: "system",
+			resolvedTheme,
+			setTheme: () => void 0,
+			themeClassName: adminThemeClassName(resolvedTheme)
+		};
+	}
+	return context;
+}
+//#endregion
 //#region src/components/ui/dropdown-menu.tsx
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSubTrigger = React$1.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
 	ref,
 	className: cn("dy-flex dy-cursor-default dy-select-none dy-items-center dy-gap-2 dy-rounded-sm dy-px-2 dy-py-1.5 dy-text-sm dy-outline-none focus:dy-bg-accent data-[state=open]:dy-bg-accent [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0", inset && "dy-pl-8", className),
@@ -392,15 +449,19 @@ var DropdownMenuSubContent = React$1.forwardRef(({ className, ...props }, ref) =
 	...props
 }));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React$1.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx("div", {
-	className: "dy-admin-ui",
-	children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
-		ref,
-		sideOffset,
-		className: cn("dy-z-50 dy-max-h-[var(--radix-dropdown-menu-content-available-height)] dy-min-w-[8rem] dy-overflow-y-auto dy-overflow-x-hidden dy-rounded-md dy-border dy-bg-popover dy-p-1 dy-text-popover-foreground dy-shadow-md data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-slide-in-from-left-2 data-[side=top]:dy-slide-in-from-bottom-2 dy-origin-[--radix-dropdown-menu-content-transform-origin]", className),
-		...props
-	})
-}) }));
+var DropdownMenuContent = React$1.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+	const { resolvedTheme, themeClassName } = useAdminTheme();
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx("div", {
+		className: themeClassName,
+		"data-theme": resolvedTheme,
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+			ref,
+			sideOffset,
+			className: cn("dy-z-50 dy-max-h-[var(--radix-dropdown-menu-content-available-height)] dy-min-w-[8rem] dy-overflow-y-auto dy-overflow-x-hidden dy-rounded-md dy-border dy-bg-popover dy-p-1 dy-text-popover-foreground dy-shadow-md data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-slide-in-from-left-2 data-[side=top]:dy-slide-in-from-bottom-2 dy-origin-[--radix-dropdown-menu-content-transform-origin]", className),
+			...props
+		})
+	}) });
+});
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React$1.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
 	ref,
@@ -449,6 +510,42 @@ var DropdownMenuShortcut = ({ className, ...props }) => {
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 //#endregion
+//#region src/components/ui/button.tsx
+var buttonVariants = cva("dy-inline-flex dy-items-center dy-justify-center dy-gap-2 dy-whitespace-nowrap dy-rounded-md dy-text-sm dy-font-medium dy-ring-offset-background dy-transition-colors focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-pointer-events-none disabled:dy-opacity-50 [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0", {
+	variants: {
+		variant: {
+			default: "dy-bg-primary dy-text-primary-foreground hover:dy-bg-primary/90",
+			destructive: "dy-bg-destructive dy-text-destructive-foreground hover:dy-bg-destructive/90",
+			outline: "dy-border dy-border-input dy-bg-background hover:dy-bg-accent hover:dy-text-accent-foreground",
+			secondary: "dy-bg-secondary dy-text-secondary-foreground hover:dy-bg-secondary/80",
+			ghost: "hover:dy-bg-accent hover:dy-text-accent-foreground",
+			link: "dy-text-primary dy-underline-offset-4 hover:dy-underline"
+		},
+		size: {
+			default: "dy-h-10 dy-px-4 dy-py-2",
+			sm: "dy-h-9 dy-rounded-md dy-px-3",
+			lg: "dy-h-11 dy-rounded-md dy-px-8",
+			icon: "dy-h-10 dy-w-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+Button.displayName = "Button";
+//#endregion
 //#region src/components/layout/admin-shell.tsx
 function getUserString(user, key) {
 	const value = user?.[key];
@@ -496,6 +593,63 @@ function NavGroup({ label, children, collapsed, defaultExpanded = true }) {
 		})]
 	});
 }
+function ThemeSelector({ collapsed = false, mobile = false }) {
+	const { resolvedTheme, setTheme, theme } = useAdminTheme();
+	const Icon = resolvedTheme === "dark" ? Moon : Sun;
+	const options = [
+		{
+			value: "system",
+			label: "System",
+			icon: Monitor
+		},
+		{
+			value: "light",
+			label: "Light",
+			icon: Sun
+		},
+		{
+			value: "dark",
+			label: "Dark",
+			icon: Moon
+		}
+	];
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			size: mobile || collapsed ? "icon" : "sm",
+			className: cn("dy-text-muted-foreground hover:dy-bg-accent hover:dy-text-foreground", collapsed || mobile ? "dy-h-8 dy-w-8" : "dy-h-7 dy-w-full dy-justify-start dy-px-2.5 dy-text-[11px]"),
+			title: "Theme",
+			"aria-label": "Change admin theme",
+			children: [/* @__PURE__ */ jsx(Icon, { className: "dy-h-3.5 dy-w-3.5" }), !collapsed && !mobile && /* @__PURE__ */ jsx("span", { children: "Theme" })]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side: collapsed || mobile ? "bottom" : "top",
+		align: "end",
+		sideOffset: 8,
+		className: "dy-w-40",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "dy-px-2 dy-py-1.5 dy-text-xs dy-text-muted-foreground",
+				children: "Theme"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: theme,
+				onValueChange: (value) => setTheme(value),
+				children: options.map((option) => {
+					const OptionIcon = option.icon;
+					return /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+						value: option.value,
+						className: "dy-cursor-pointer",
+						children: [/* @__PURE__ */ jsx(OptionIcon, { className: "dy-h-4 dy-w-4" }), option.label]
+					}, option.value);
+				})
+			})
+		]
+	})] });
+}
 function SidebarInner({ schemas, isLoading, location, logout, isEmbedded, collapsed, onToggleCollapse, onNavigate }) {
 	const { client, user } = useDyrected();
 	const collections = schemas?.collections?.filter((c) => !c?.admin?.hidden && !c?.slug.startsWith("platform_")) ?? [];
@@ -507,7 +661,7 @@ function SidebarInner({ schemas, isLoading, location, logout, isEmbedded, collap
 	}) : /* @__PURE__ */ jsx("div", { className: "dy-my-2 dy-mx-3 dy-h-px dy-bg-border" });
 	const branding = schemas?.admin?.branding;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "dy-flex dy-flex-col dy-min-h-screen dy-admin-ui",
+		className: "dy-flex dy-flex-col dy-min-h-screen",
 		children: [
 			!isEmbedded && /* @__PURE__ */ jsx("div", {
 				className: cn("dy-flex dy-items-center dy-h-14 dy-shrink-0 dy-transition-all", collapsed ? "dy-justify-center dy-px-2" : "dy-gap-2.5 dy-px-4"),
@@ -641,6 +795,7 @@ function SidebarInner({ schemas, isLoading, location, logout, isEmbedded, collap
 						collapsed,
 						onClick: onNavigate
 					}),
+					/* @__PURE__ */ jsx(ThemeSelector, { collapsed }),
 					!isEmbedded && user && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsxs("button", {
@@ -782,9 +937,12 @@ function AdminShell({ children, isEmbedded = false }) {
 								className: "dy-h-7 dy-w-auto"
 							})
 						}),
-						user && /* @__PURE__ */ jsx("div", {
-							className: "dy-ml-auto dy-flex dy-h-8 dy-w-8 dy-items-center dy-justify-center dy-rounded-full dy-bg-primary/10 dy-text-primary dy-font-semibold dy-text-xs dy-shrink-0",
-							children: (user.name || user.email || "?")[0].toUpperCase()
+						/* @__PURE__ */ jsxs("div", {
+							className: "dy-ml-auto dy-flex dy-items-center dy-gap-1.5",
+							children: [/* @__PURE__ */ jsx(ThemeSelector, { mobile: true }), user && /* @__PURE__ */ jsx("div", {
+								className: "dy-flex dy-h-8 dy-w-8 dy-items-center dy-justify-center dy-rounded-full dy-bg-primary/10 dy-text-primary dy-font-semibold dy-text-xs dy-shrink-0",
+								children: (user.name || user.email || "?")[0].toUpperCase()
+							})]
 						})
 					]
 				}), /* @__PURE__ */ jsx("div", {
@@ -796,42 +954,6 @@ function AdminShell({ children, isEmbedded = false }) {
 	}) });
 }
 //#endregion
-//#region src/components/ui/button.tsx
-var buttonVariants = cva("dy-inline-flex dy-items-center dy-justify-center dy-gap-2 dy-whitespace-nowrap dy-rounded-md dy-text-sm dy-font-medium dy-ring-offset-background dy-transition-colors focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-pointer-events-none disabled:dy-opacity-50 [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0", {
-	variants: {
-		variant: {
-			default: "dy-bg-primary dy-text-primary-foreground hover:dy-bg-primary/90",
-			destructive: "dy-bg-destructive dy-text-destructive-foreground hover:dy-bg-destructive/90",
-			outline: "dy-border dy-border-input dy-bg-background hover:dy-bg-accent hover:dy-text-accent-foreground",
-			secondary: "dy-bg-secondary dy-text-secondary-foreground hover:dy-bg-secondary/80",
-			ghost: "hover:dy-bg-accent hover:dy-text-accent-foreground",
-			link: "dy-text-primary dy-underline-offset-4 hover:dy-underline"
-		},
-		size: {
-			default: "dy-h-10 dy-px-4 dy-py-2",
-			sm: "dy-h-9 dy-rounded-md dy-px-3",
-			lg: "dy-h-11 dy-rounded-md dy-px-8",
-			icon: "dy-h-10 dy-w-10"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-var Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
-		className: cn(buttonVariants({
-			variant,
-			size,
-			className
-		})),
-		ref,
-		...props
-	});
-});
-Button.displayName = "Button";
-//#endregion
 //#region src/components/ui/badge.tsx
 var badgeVariants = cva("dy-inline-flex dy-items-center dy-rounded-full dy-border dy-px-2.5 dy-py-0.5 dy-text-xs dy-font-semibold dy-transition-colors focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2", {
 	variants: { variant: {
@@ -1222,13 +1344,17 @@ Input.displayName = "Input";
 //#region src/components/ui/popover.tsx
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-	ref,
-	align,
-	sideOffset,
-	className: cn("dy-admin-ui dy-z-[100] dy-w-72 dy-rounded-md dy-border dy-bg-popover dy-p-0 dy-text-popover-foreground dy-shadow-md dy-outline-none data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-slide-in-from-left-2 data-[side=top]:dy-slide-in-from-bottom-2 dy-origin-[--radix-popover-content-transform-origin]", className),
-	...props
-}) }));
+var PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
+	const { resolvedTheme, themeClassName } = useAdminTheme();
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		ref,
+		align,
+		sideOffset,
+		"data-theme": resolvedTheme,
+		className: cn(themeClassName, "dy-z-[100] dy-w-72 dy-rounded-md dy-border dy-bg-popover dy-p-0 dy-text-popover-foreground dy-shadow-md dy-outline-none data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-slide-in-from-left-2 data-[side=top]:dy-slide-in-from-bottom-2 dy-origin-[--radix-popover-content-transform-origin]", className),
+		...props
+	}) });
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 //#endregion
@@ -1259,23 +1385,27 @@ var SelectScrollDownButton = React$1.forwardRef(({ className, ...props }, ref) =
 	children: /* @__PURE__ */ jsx(ChevronDown, { className: "dy-h-4 dy-w-4" })
 }));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React$1.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx("div", {
-	className: "dy-admin-ui",
-	children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
-		ref,
-		className: cn("dy-relative dy-z-[100] dy-max-h-[--radix-select-content-available-height] dy-min-w-[8rem] dy-overflow-y-auto dy-overflow-x-hidden dy-rounded-md dy-border dy-bg-popover dy-text-popover-foreground dy-shadow-md data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-translate-x-1 data-[side=top]:dy--translate-y-1 dy-origin-[--radix-select-content-transform-origin]", position === "popper" && "data-[side=bottom]:dy-translate-y-1 data-[side=left]:dy--translate-x-1 data-[side=right]:dy-translate-x-1 data-[side=top]:dy--translate-y-1", className),
-		position,
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-			/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
-				className: cn("dy-p-1", position === "popper" && "dy-h-[var(--radix-select-trigger-height)] dy-w-full dy-min-w-[var(--radix-select-trigger-width)]"),
-				children
-			}),
-			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
-		]
-	})
-}) }));
+var SelectContent = React$1.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+	const { resolvedTheme, themeClassName } = useAdminTheme();
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx("div", {
+		className: themeClassName,
+		"data-theme": resolvedTheme,
+		children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+			ref,
+			className: cn("dy-relative dy-z-[100] dy-max-h-[--radix-select-content-available-height] dy-min-w-[8rem] dy-overflow-y-auto dy-overflow-x-hidden dy-rounded-md dy-border dy-bg-popover dy-text-popover-foreground dy-shadow-md data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-translate-x-1 data-[side=top]:dy--translate-y-1 dy-origin-[--radix-select-content-transform-origin]", position === "popper" && "data-[side=bottom]:dy-translate-y-1 data-[side=left]:dy--translate-x-1 data-[side=right]:dy-translate-x-1 data-[side=top]:dy--translate-y-1", className),
+			position,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+					className: cn("dy-p-1", position === "popper" && "dy-h-[var(--radix-select-trigger-height)] dy-w-full dy-min-w-[var(--radix-select-trigger-width)]"),
+					children
+				}),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectLabel = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
 	ref,
@@ -1953,21 +2083,25 @@ var DialogOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__P
 	...props
 }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs("div", {
-	className: "dy-admin-ui",
-	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-		ref,
-		className: cn("dy-fixed dy-left-[50%] dy-top-[50%] dy-z-50 dy-grid dy-w-full dy-max-w-lg dy-translate-x-[-50%] dy-translate-y-[-50%] dy-gap-4 dy-border dy-bg-background dy-p-6 dy-shadow-2xl dy-duration-200 data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[state=closed]:dy-slide-out-to-left-1/2 data-[state=closed]:dy-slide-out-to-top-[48%] data-[state=open]:dy-slide-in-from-left-1/2 data-[state=open]:dy-slide-in-from-top-[48%] sm:dy-rounded-xl", className),
-		...props,
-		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-			className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-accent data-[state=open]:dy-text-muted-foreground",
-			children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
-				className: "dy-sr-only",
-				children: "Close"
+var DialogContent = React$1.forwardRef(({ className, children, ...props }, ref) => {
+	const { resolvedTheme, themeClassName } = useAdminTheme();
+	return /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs("div", {
+		className: themeClassName,
+		"data-theme": resolvedTheme,
+		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			ref,
+			className: cn("dy-fixed dy-left-[50%] dy-top-[50%] dy-z-50 dy-grid dy-w-full dy-max-w-lg dy-translate-x-[-50%] dy-translate-y-[-50%] dy-gap-4 dy-border dy-bg-background dy-p-6 dy-shadow-2xl dy-duration-200 data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[state=closed]:dy-slide-out-to-left-1/2 data-[state=closed]:dy-slide-out-to-top-[48%] data-[state=open]:dy-slide-in-from-left-1/2 data-[state=open]:dy-slide-in-from-top-[48%] sm:dy-rounded-xl", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+				className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-accent data-[state=open]:dy-text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
+					className: "dy-sr-only",
+					children: "Close"
+				})]
 			})]
 		})]
-	})]
-}) }));
+	}) });
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("dy-flex dy-flex-col dy-space-y-1.5 dy-text-center sm:dy-text-left", className),
@@ -2826,21 +2960,25 @@ var sheetVariants = cva("dy-fixed dy-z-50 dy-gap-4 dy-bg-background dy-p-6 dy-sh
 	} },
 	defaultVariants: { side: "right" }
 });
-var SheetContent = React$1.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsx(SheetPortal, { children: /* @__PURE__ */ jsxs("div", {
-	className: "dy-admin-ui",
-	children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-		ref,
-		className: cn(sheetVariants({ side }), className),
-		...props,
-		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-			className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-secondary",
-			children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
-				className: "dy-sr-only",
-				children: "Close"
+var SheetContent = React$1.forwardRef(({ side = "right", className, children, ...props }, ref) => {
+	const { resolvedTheme, themeClassName } = useAdminTheme();
+	return /* @__PURE__ */ jsx(SheetPortal, { children: /* @__PURE__ */ jsxs("div", {
+		className: themeClassName,
+		"data-theme": resolvedTheme,
+		children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			ref,
+			className: cn(sheetVariants({ side }), className),
+			...props,
+			children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+				className: "dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-secondary",
+				children: [/* @__PURE__ */ jsx(X, { className: "dy-h-4 dy-w-4" }), /* @__PURE__ */ jsx("span", {
+					className: "dy-sr-only",
+					children: "Close"
+				})]
 			})]
 		})]
-	})]
-}) }));
+	}) });
+});
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("dy-flex dy-flex-col dy-space-y-2 dy-text-center sm:dy-text-left", className),
@@ -13297,6 +13435,49 @@ var Toaster$1 = ({ ...props }) => {
 	});
 };
 //#endregion
+//#region src/hooks/admin-theme-provider.tsx
+function getSystemTheme() {
+	if (typeof window === "undefined" || !window.matchMedia) return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function AdminThemeProvider({ children }) {
+	const [theme, setTheme] = usePreferences("theme", "system");
+	const [systemTheme, setSystemTheme] = React$1.useState(() => getSystemTheme());
+	React$1.useEffect(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const media = window.matchMedia("(prefers-color-scheme: dark)");
+		const syncSystemTheme = () => {
+			setSystemTheme(media.matches ? "dark" : "light");
+		};
+		syncSystemTheme();
+		media.addEventListener("change", syncSystemTheme);
+		return () => media.removeEventListener("change", syncSystemTheme);
+	}, []);
+	const resolvedTheme = resolveAdminTheme(theme, systemTheme);
+	const value = React$1.useMemo(() => ({
+		theme,
+		resolvedTheme,
+		setTheme,
+		themeClassName: adminThemeClassName(resolvedTheme)
+	}), [
+		resolvedTheme,
+		setTheme,
+		theme
+	]);
+	return /* @__PURE__ */ jsx(AdminThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function AdminThemedRoot({ children }) {
+	const { resolvedTheme, themeClassName } = useAdminTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: `${themeClassName} dy-h-full`,
+		"data-theme": resolvedTheme,
+		children
+	});
+}
+//#endregion
 //#region src/index.tsx
 function CollectionRoute() {
 	const { slug } = useParams();
@@ -13383,21 +13564,21 @@ function AdminUI({ apiKey, baseUrl = "/dyrected", siteId, onNavigate, isEmbedded
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "dy-admin-ui dy-h-full",
-		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(DyrectedProvider, {
+		children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(DyrectedProvider, {
 			apiKey,
 			baseUrl,
 			siteId,
 			components,
 			initialToken,
 			defaultTechStack,
-			children: [/* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsx(HashRouter, { children: /* @__PURE__ */ jsx(AdminRoutes, {
+			children: /* @__PURE__ */ jsx(AdminThemeProvider, { children: /* @__PURE__ */ jsxs(AdminThemedRoot, { children: [/* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsx(HashRouter, { children: /* @__PURE__ */ jsx(AdminRoutes, {
 				onNavigate,
 				isEmbedded
 			}) }) }), /* @__PURE__ */ jsx(Toaster$1, {
 				position: "top-right",
 				expand: true,
 				richColors: true
-			})]
+			})] }) })
 		}) })
 	});
 }
@@ -13429,15 +13610,15 @@ function renderAdminUI(container, props) {
 function AdminStandalone({ apiKey, baseUrl, siteId }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "dy-admin-ui dy-h-full",
-		children: /* @__PURE__ */ jsxs(DyrectedProvider, {
+		children: /* @__PURE__ */ jsx(DyrectedProvider, {
 			apiKey,
 			baseUrl,
 			siteId,
-			children: [/* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsx(MemoryRouter, { children: /* @__PURE__ */ jsx(AdminRoutes, {}) }) }), /* @__PURE__ */ jsx(Toaster$1, {
+			children: /* @__PURE__ */ jsx(AdminThemeProvider, { children: /* @__PURE__ */ jsxs(AdminThemedRoot, { children: [/* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsx(MemoryRouter, { children: /* @__PURE__ */ jsx(AdminRoutes, {}) }) }), /* @__PURE__ */ jsx(Toaster$1, {
 				position: "top-right",
 				expand: true,
 				richColors: true
-			})]
+			})] }) })
 		})
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyrected/admin",
-  "version": "2.5.45",
+  "version": "2.5.47",
   "type": "module",
   "files": [
     "dist"
@@ -64,8 +64,8 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.25.76",
-    "@dyrected/core": "^2.5.45",
-    "@dyrected/sdk": "^2.5.45"
+    "@dyrected/core": "^2.5.47",
+    "@dyrected/sdk": "^2.5.47"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",