convex-cms 0.0.9-alpha.6 → 0.0.9-alpha.8

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -18,8 +18,12 @@ export interface Settings {
 }
 
 type SettingsApi = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getSettings: FunctionReference<"query", "public", Record<string, never>, Settings | null>;
+  getSettings: FunctionReference<
+    "query",
+    "public",
+    Record<string, never>,
+    Settings | null
+  >;
 };
 
 interface SettingsConfigContextValue {
@@ -27,21 +31,22 @@ interface SettingsConfigContextValue {
   settings: Settings | undefined;
 }
 
-const SettingsConfigContext = createContext<SettingsConfigContextValue | null>(null);
+const SettingsConfigContext = createContext<SettingsConfigContextValue | null>(
+  null
+);
 
-export function SettingsConfigProvider({
+// Component that queries settings (only rendered when api is provided)
+function SettingsConfigProviderWithQuery({
   baseConfig,
   children,
   api,
 }: {
   baseConfig: AdminConfig;
   children: ReactNode;
-  api?: SettingsApi;
+  api: SettingsApi;
 }) {
-  // Use skip pattern when api is not provided
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const queryArg = api ? api.getSettings : ("skip" as any);
-  const settings = useQuery(queryArg) as Settings | undefined;
+  // Proper skip pattern: function ref first, args (or "skip") second
+  const settings = useQuery(api.getSettings, {}) ?? undefined;
 
   const mergedConfig = useMemo((): AdminConfig => {
     if (!settings) return baseConfig;
@@ -50,7 +55,8 @@ export function SettingsConfigProvider({
       ...baseConfig,
       navigation: {
         ...baseConfig.navigation,
-        showMedia: baseConfig.navigation.showMedia && settings.features.mediaManagement,
+        showMedia:
+          baseConfig.navigation.showMedia && settings.features.mediaManagement,
       },
     };
   }, [baseConfig, settings]);
@@ -69,10 +75,60 @@ export function SettingsConfigProvider({
   );
 }
 
+// Component without query (when api is not provided)
+function SettingsConfigProviderWithoutQuery({
+  baseConfig,
+  children,
+}: {
+  baseConfig: AdminConfig;
+  children: ReactNode;
+}) {
+  const contextValue = useMemo(
+    () => ({ baseConfig, settings: undefined }),
+    [baseConfig]
+  );
+
+  return (
+    <SettingsConfigContext.Provider value={contextValue}>
+      <AdminConfigProvider config={baseConfig}>{children}</AdminConfigProvider>
+    </SettingsConfigContext.Provider>
+  );
+}
+
+export function SettingsConfigProvider({
+  baseConfig,
+  children,
+  api,
+}: {
+  baseConfig: AdminConfig;
+  children: ReactNode;
+  api?: SettingsApi;
+}) {
+  // Use component splitting to avoid calling useQuery without a valid function ref
+  if (api) {
+    return (
+      <SettingsConfigProviderWithQuery
+        baseConfig={baseConfig}
+        api={api}
+        children={children}
+      />
+    );
+  }
+
+  return (
+    <SettingsConfigProviderWithoutQuery
+      baseConfig={baseConfig}
+      children={children}
+    />
+  );
+}
+
 export function useSettingsConfig(): SettingsConfigContextValue {
   const ctx = useContext(SettingsConfigContext);
   if (!ctx) {
-    throw new Error("useSettingsConfig must be used within SettingsConfigProvider");
+    throw new Error(
+      "useSettingsConfig must be used within SettingsConfigProvider"
+    );
   }
   return ctx;
 }

package/admin/src/embed/components/EmbedLayout.tsx

@@ -3,6 +3,7 @@
  *
  * A router-agnostic layout for the embedded admin that uses
  * EmbedSidebar instead of the router-dependent Sidebar.
+ * Uses CSS Grid for proper container-relative positioning.
  */
 
 import type { ReactNode } from "react";
@@ -18,9 +19,12 @@ export function EmbedLayout({ children }: EmbedLayoutProps) {
   const { layout } = useAdminConfig();
 
   return (
-    <div className="flex min-h-screen bg-background">
+    <div
+      className="grid h-full bg-background"
+      style={{ gridTemplateColumns: `${layout.sidebarWidth}px 1fr` }}
+    >
       <EmbedSidebar />
-      <div className="flex flex-1 flex-col" style={{ marginLeft: layout.sidebarWidth }}>
+      <div className="flex flex-col overflow-hidden">
         <EmbedHeader />
         <main className="flex-1 overflow-auto p-6">{children}</main>
       </div>

package/admin/src/embed/components/EmbedSidebar.tsx

@@ -36,7 +36,9 @@ function pathToRoute(path: string): EmbedRoute {
 export function EmbedSidebar() {
   const { currentPath, navigate, navigateToContentType } = useEmbedNavigation();
   const config = useAdminConfig();
-  const { navItems, branding, layout } = config;
+  const { navItems, branding,
+    // layout
+  } = config;
   const api = useApi();
 
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -152,14 +154,9 @@ export function EmbedSidebar() {
     </Collapsible>
   );
 
-  const sidebarWidth = layout.sidebarWidth;
-
   return (
     <>
-      <aside
-        className="fixed inset-y-0 left-0 z-50 flex flex-col border-r border-sidebar-border bg-sidebar"
-        style={{ width: sidebarWidth }}
-      >
+      <aside className="sticky top-0 z-40 flex h-full flex-col overflow-hidden border-r border-sidebar-border bg-sidebar">
         <div className="flex h-14 items-center gap-2 border-b border-sidebar-border px-4">
           <button
             type="button"

package/admin/src/embed/index.tsx

@@ -46,6 +46,7 @@ import {
 import { ThemeProvider } from "../contexts/ThemeContext";
 import { RouteGuard } from "../components/RouteGuard";
 import { resolveAdminConfig } from "../lib/admin-config";
+import { cn } from "../lib/cn";
 import type { CmsAdminProps, CmsAdminAuthConfig } from "./types";
 import { ApiProvider } from "./contexts/ApiContext";
 import {
@@ -127,6 +128,7 @@ export function CmsAdmin({
   auth,
   basePath = "/admin",
   className,
+  themeMode = "isolated",
   initialRoute = "dashboard",
   onNavigate,
 }: CmsAdminProps & {
@@ -143,7 +145,10 @@ export function CmsAdmin({
 
   if (!convex) {
     return (
-      <div className="flex min-h-full items-center justify-center bg-background p-6">
+      <div
+        className={cn("flex h-full items-center justify-center bg-background p-6", className)}
+        data-cms-admin={themeMode}
+      >
         <div className="diff-modified max-w-lg space-y-4 rounded-lg border p-6 text-center">
           <h2 className="text-xl font-semibold text-diff-modified">
             ConvexProvider Required
@@ -158,7 +163,7 @@ export function CmsAdmin({
   }
 
   return (
-    <div className={className}>
+    <div className={cn("h-full", className)} data-cms-admin={themeMode}>
       <ApiProvider api={api}>
         <ThemeProvider>
           <SettingsConfigProvider baseConfig={adminConfig} api={settingsApi}>
@@ -173,9 +178,7 @@ export function CmsAdmin({
                 onNavigate={onNavigate}
               >
                 <RouteGuard>
-                  <div className="min-h-screen">
-                    <EmbedRouter />
-                  </div>
+                  <EmbedRouter />
                 </RouteGuard>
               </EmbedNavigationProvider>
             </AuthProvider>

package/admin/src/embed/types.ts

@@ -20,4 +20,10 @@ export interface CmsAdminProps {
   auth: CmsAdminAuthConfig;
   basePath?: string;
   className?: string;
+  /**
+   * Theme mode for CSS variable scoping:
+   * - 'isolated' (default): Admin uses its own theme, ignores parent app styles
+   * - 'inherit': Admin inherits parent app's CSS variables (for shadcn apps)
+   */
+  themeMode?: "isolated" | "inherit";
 }

package/admin/src/pages/SettingsPage.tsx

@@ -126,22 +126,110 @@ export interface SettingsPageProps {
 	navigation: AdminNavigation;
 }
 
-export function SettingsPage({
+// Unconfigured settings page (no useQuery needed)
+function SettingsPageUnconfigured() {
+	return (
+		<RouteGuard requiredPermission={{ resource: "settings", action: "manage" }}>
+			<div className="space-y-6 p-6">
+				<CmsPageHeader
+					title="Settings"
+					description="Configure your CMS settings and preferences."
+				/>
+
+				<div className="space-y-6">
+					<AppearanceSection />
+
+					<Alert>
+						<Info className="size-4" />
+						<AlertDescription>
+							<strong>Settings not configured.</strong> To enable CMS settings,
+							export{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								getSettings
+							</code>
+							,{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								updateSettings
+							</code>
+							, and{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								resetSettings
+							</code>{" "}
+							from your{" "}
+							<code className="rounded bg-muted px-1 py-0.5 text-xs">
+								convex/admin.ts
+							</code>{" "}
+							file.
+						</AlertDescription>
+					</Alert>
+
+					<CmsSurface elevation="base" className="p-6">
+						<div className="mb-4 flex items-center gap-2">
+							<h2 className="text-lg font-semibold text-foreground">Features</h2>
+							<Badge variant="secondary" className="gap-1">
+								<Lock className="size-3" />
+								Default values
+							</Badge>
+						</div>
+						<p className="mb-4 text-sm text-muted-foreground">
+							Showing default feature flags. Configure settings in your admin
+							API to customize.
+						</p>
+						<div className="space-y-4">
+							{(
+								[
+									"versioning",
+									"scheduling",
+									"localization",
+									"mediaManagement",
+								] as const
+							).map((feature) => (
+								<div
+									key={feature}
+									className="flex items-center justify-between opacity-75"
+								>
+									<div>
+										<Label className="text-sm font-medium capitalize">
+											{feature}
+										</Label>
+									</div>
+									<Switch checked={DEFAULT_FEATURES[feature]} disabled={true} />
+								</div>
+							))}
+						</div>
+					</CmsSurface>
+
+					<CmsSurface elevation="base" className="p-6">
+						<h2 className="mb-4 text-lg font-semibold text-foreground">API</h2>
+						<div className="space-y-4">
+							<div>
+								<Label className="text-sm font-medium">
+									Convex Deployment URL
+								</Label>
+								<code className="mt-1 block rounded-md bg-muted px-3 py-2 text-sm">
+									{import.meta.env.VITE_CONVEX_URL || "Not configured"}
+								</code>
+							</div>
+						</div>
+					</CmsSurface>
+				</div>
+			</div>
+		</RouteGuard>
+	);
+}
+
+// Configured settings page with query
+function SettingsPageConfigured({
 	api,
-	navigation: _navigation,
-}: SettingsPageProps) {
+}: {
+	api: CmsAdminApi & { getSettings: NonNullable<CmsAdminApi["getSettings"]> };
+}) {
 	const { canManageSettings } = usePermissions();
 	const canEdit = canManageSettings();
 	const adminConfig = useAdminConfig();
 
-	const isConfigured = useMemo(() => {
-		return api.getSettings != null;
-	}, [api]);
-
-	const settings = useQuery(
-		isConfigured ? api.getSettings : ("skip" as unknown as typeof api.getSettings),
-		isConfigured ? {} : "skip"
-	);
+	// Proper skip pattern: valid function ref, args as second param
+	const settings = useQuery(api.getSettings, {});
 
 	const updateSettingsMutation = useMutation(
 		api.updateSettings ?? ((() => {}) as unknown as typeof api.updateSettings)
@@ -197,7 +285,7 @@ export function SettingsPage({
 	);
 
 	const handleSave = useCallback(async () => {
-		if (!formData || !isDirty || !isConfigured || !api.updateSettings) return;
+		if (!formData || !isDirty || !api.updateSettings) return;
 
 		setFeedbackStatus("saving");
 		setErrorMessage(null);
@@ -219,10 +307,10 @@ export function SettingsPage({
 				error instanceof Error ? error.message : "Failed to save settings",
 			);
 		}
-	}, [formData, isDirty, isConfigured, api.updateSettings, updateSettingsMutation]);
+	}, [formData, isDirty, api.updateSettings, updateSettingsMutation]);
 
 	const handleReset = useCallback(async () => {
-		if (!isConfigured || !api.resetSettings) return;
+		if (!api.resetSettings) return;
 
 		const confirmed = window.confirm(
 			"Are you sure you want to reset all settings to their defaults? This action cannot be undone.",
@@ -257,7 +345,7 @@ export function SettingsPage({
 				error instanceof Error ? error.message : "Failed to reset settings",
 			);
 		}
-	}, [isConfigured, api.resetSettings, resetSettingsMutation]);
+	}, [api.resetSettings, resetSettingsMutation]);
 
 	const handleDiscard = useCallback(() => {
 		if (normalizedSettings) {
@@ -268,71 +356,6 @@ export function SettingsPage({
 		}
 	}, [normalizedSettings]);
 
-	if (!isConfigured) {
-		return (
-			<RouteGuard
-				requiredPermission={{ resource: "settings", action: "manage" }}
-			>
-				<div className="space-y-6 p-6">
-					<CmsPageHeader
-						title="Settings"
-						description="Configure your CMS settings and preferences."
-					/>
-
-					<div className="space-y-6">
-						<AppearanceSection />
-
-						<Alert>
-							<Info className="size-4" />
-							<AlertDescription>
-								<strong>Settings not configured.</strong> To enable CMS settings, export{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">getSettings</code>,{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">updateSettings</code>, and{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">resetSettings</code> from your{" "}
-								<code className="rounded bg-muted px-1 py-0.5 text-xs">convex/admin.ts</code> file.
-							</AlertDescription>
-						</Alert>
-
-						<CmsSurface elevation="base" className="p-6">
-							<div className="mb-4 flex items-center gap-2">
-								<h2 className="text-lg font-semibold text-foreground">Features</h2>
-								<Badge variant="secondary" className="gap-1">
-									<Lock className="size-3" />
-									Default values
-								</Badge>
-							</div>
-							<p className="mb-4 text-sm text-muted-foreground">
-								Showing default feature flags. Configure settings in your admin API to customize.
-							</p>
-							<div className="space-y-4">
-								{(["versioning", "scheduling", "localization", "mediaManagement"] as const).map((feature) => (
-									<div key={feature} className="flex items-center justify-between opacity-75">
-										<div>
-											<Label className="text-sm font-medium capitalize">{feature}</Label>
-										</div>
-										<Switch checked={DEFAULT_FEATURES[feature]} disabled={true} />
-									</div>
-								))}
-							</div>
-						</CmsSurface>
-
-						<CmsSurface elevation="base" className="p-6">
-							<h2 className="mb-4 text-lg font-semibold text-foreground">API</h2>
-							<div className="space-y-4">
-								<div>
-									<Label className="text-sm font-medium">Convex Deployment URL</Label>
-									<code className="mt-1 block rounded-md bg-muted px-3 py-2 text-sm">
-										{import.meta.env.VITE_CONVEX_URL || "Not configured"}
-									</code>
-								</div>
-							</div>
-						</CmsSurface>
-					</div>
-				</div>
-			</RouteGuard>
-		);
-	}
-
 	if (settings === undefined) {
 		return (
 			<RouteGuard
@@ -547,3 +570,24 @@ export function SettingsPage({
 		</RouteGuard>
 	);
 }
+
+// Main wrapper that decides which component to render
+export function SettingsPage({
+	api,
+	navigation: _navigation,
+}: SettingsPageProps) {
+	// Check if settings API is configured
+	if (api.getSettings) {
+		return (
+			<SettingsPageConfigured
+				api={
+					api as CmsAdminApi & {
+						getSettings: NonNullable<CmsAdminApi["getSettings"]>;
+					}
+				}
+			/>
+		);
+	}
+
+	return <SettingsPageUnconfigured />;
+}

package/admin/src/routes/__root.tsx

@@ -231,7 +231,10 @@ function ConvexProviderWrapper({
   return (
     <ConvexProvider client={convex}>
       <ApiProvider api={api.admin}>
-        <SettingsConfigProvider baseConfig={adminConfig}>
+        <SettingsConfigProvider
+          baseConfig={adminConfig}
+          api={{ getSettings: api.admin.getSettings }}
+        >
           {children}
         </SettingsConfigProvider>
       </ApiProvider>

package/admin/src/styles/globals.css

@@ -12,12 +12,21 @@
     @apply border-border;
   }
 
+  /* Standalone mode - admin owns the document */
   body {
     @apply bg-background text-foreground;
     font-feature-settings: 'rlig' 1, 'calt' 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  /* Embedded mode - scope styles to container */
+  [data-cms-admin] {
+    @apply bg-background text-foreground;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 }
 
 @layer utilities {

package/admin/src/styles/theme.css

@@ -2,10 +2,13 @@
    CMS Admin Theme - CSS Custom Properties
    Professional & Clean (Linear/Notion aesthetic)
 
-   Consumers can import this file and override
-   any variable in their own :root {} block.
+   Theme modes:
+   - Standalone: Uses :root for the entire document
+   - Isolated (embedded): Admin uses its own theme via [data-cms-admin="isolated"]
+   - Inherit (embedded): Admin inherits parent's colors via [data-cms-admin="inherit"]
    ============================================ */
 
+/* Standalone mode - admin owns the document */
 :root {
   /* Main colors */
   --background: hsl(0 0% 98%);
@@ -64,7 +67,106 @@
   --info-foreground: hsl(217 91% 30%);
 }
 
-.dark {
+/* Isolated mode - forces admin's own theme, ignores parent styles */
+[data-cms-admin="isolated"] {
+  /* Main colors */
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(240 10% 3.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
+  --primary: hsl(240 5.9% 10%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(240 4.8% 95.9%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+  --accent: hsl(240 4.8% 95.9%);
+  --accent-foreground: hsl(240 5.9% 10%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(240 5.9% 90%);
+  --input: hsl(240 5.9% 90%);
+  --ring: hsl(240 5.9% 10%);
+
+  /* Sidebar */
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+  /* Semantic: Diff/Change indicators */
+  --diff-added: hsl(142 76% 36%);
+  --diff-added-bg: hsl(142 76% 95%);
+  --diff-added-border: hsl(142 76% 85%);
+  --diff-added-foreground: hsl(142 76% 25%);
+
+  --diff-removed: hsl(0 84% 60%);
+  --diff-removed-bg: hsl(0 86% 97%);
+  --diff-removed-border: hsl(0 93% 85%);
+  --diff-removed-foreground: hsl(0 72% 30%);
+
+  --diff-modified: hsl(38 92% 50%);
+  --diff-modified-bg: hsl(48 96% 97%);
+  --diff-modified-border: hsl(48 96% 82%);
+  --diff-modified-foreground: hsl(38 92% 25%);
+
+  /* Semantic: Success/Warning/Info states */
+  --success: hsl(142 76% 36%);
+  --success-foreground: hsl(0 0% 100%);
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --info: hsl(217 91% 60%);
+  --info-bg: hsl(214 95% 97%);
+  --info-foreground: hsl(217 91% 30%);
+}
+
+/* Inherit mode - uses parent's colors with fallbacks for layout */
+[data-cms-admin="inherit"] {
+  /* Sidebar variables with fallbacks (prevents broken layout) */
+  --sidebar: var(--sidebar, hsl(0 0% 98%));
+  --sidebar-foreground: var(--sidebar-foreground, hsl(240 5.3% 26.1%));
+  --sidebar-primary: var(--sidebar-primary, hsl(240 5.9% 10%));
+  --sidebar-primary-foreground: var(--sidebar-primary-foreground, hsl(0 0% 98%));
+  --sidebar-accent: var(--sidebar-accent, hsl(240 4.8% 95.9%));
+  --sidebar-accent-foreground: var(--sidebar-accent-foreground, hsl(240 5.9% 10%));
+  --sidebar-border: var(--sidebar-border, hsl(220 13% 91%));
+  --sidebar-ring: var(--sidebar-ring, hsl(217.2 91.2% 59.8%));
+
+  /* Semantic variables with fallbacks */
+  --diff-added: var(--diff-added, hsl(142 76% 36%));
+  --diff-added-bg: var(--diff-added-bg, hsl(142 76% 95%));
+  --diff-added-border: var(--diff-added-border, hsl(142 76% 85%));
+  --diff-added-foreground: var(--diff-added-foreground, hsl(142 76% 25%));
+
+  --diff-removed: var(--diff-removed, hsl(0 84% 60%));
+  --diff-removed-bg: var(--diff-removed-bg, hsl(0 86% 97%));
+  --diff-removed-border: var(--diff-removed-border, hsl(0 93% 85%));
+  --diff-removed-foreground: var(--diff-removed-foreground, hsl(0 72% 30%));
+
+  --diff-modified: var(--diff-modified, hsl(38 92% 50%));
+  --diff-modified-bg: var(--diff-modified-bg, hsl(48 96% 97%));
+  --diff-modified-border: var(--diff-modified-border, hsl(48 96% 82%));
+  --diff-modified-foreground: var(--diff-modified-foreground, hsl(38 92% 25%));
+
+  --success: var(--success, hsl(142 76% 36%));
+  --success-foreground: var(--success-foreground, hsl(0 0% 100%));
+  --warning: var(--warning, hsl(38 92% 50%));
+  --warning-foreground: var(--warning-foreground, hsl(0 0% 100%));
+  --info: var(--info, hsl(217 91% 60%));
+  --info-bg: var(--info-bg, hsl(214 95% 97%));
+  --info-foreground: var(--info-foreground, hsl(217 91% 30%));
+}
+
+/* Dark mode - standalone and isolated modes */
+.dark,
+[data-cms-admin="isolated"].dark,
+[data-cms-admin="isolated"] .dark {
   /* Main colors */
   --background: hsl(240 10% 3.9%);
   --foreground: hsl(0 0% 98%);
@@ -121,3 +223,39 @@
   --info-bg: hsl(217 50% 15%);
   --info-foreground: hsl(217 80% 80%);
 }
+
+/* Dark mode sidebar fallbacks for inherit mode */
+[data-cms-admin="inherit"].dark,
+[data-cms-admin="inherit"] .dark {
+  --sidebar: var(--sidebar, hsl(240 5.9% 10%));
+  --sidebar-foreground: var(--sidebar-foreground, hsl(240 4.8% 95.9%));
+  --sidebar-primary: var(--sidebar-primary, hsl(224.3 76.3% 48%));
+  --sidebar-primary-foreground: var(--sidebar-primary-foreground, hsl(0 0% 100%));
+  --sidebar-accent: var(--sidebar-accent, hsl(240 3.7% 15.9%));
+  --sidebar-accent-foreground: var(--sidebar-accent-foreground, hsl(240 4.8% 95.9%));
+  --sidebar-border: var(--sidebar-border, hsl(240 3.7% 15.9%));
+  --sidebar-ring: var(--sidebar-ring, hsl(217.2 91.2% 59.8%));
+
+  --diff-added: var(--diff-added, hsl(142 70% 50%));
+  --diff-added-bg: var(--diff-added-bg, hsl(142 50% 15%));
+  --diff-added-border: var(--diff-added-border, hsl(142 50% 25%));
+  --diff-added-foreground: var(--diff-added-foreground, hsl(142 70% 80%));
+
+  --diff-removed: var(--diff-removed, hsl(0 70% 55%));
+  --diff-removed-bg: var(--diff-removed-bg, hsl(0 50% 15%));
+  --diff-removed-border: var(--diff-removed-border, hsl(0 50% 25%));
+  --diff-removed-foreground: var(--diff-removed-foreground, hsl(0 70% 80%));
+
+  --diff-modified: var(--diff-modified, hsl(38 80% 55%));
+  --diff-modified-bg: var(--diff-modified-bg, hsl(38 50% 15%));
+  --diff-modified-border: var(--diff-modified-border, hsl(38 50% 25%));
+  --diff-modified-foreground: var(--diff-modified-foreground, hsl(38 80% 80%));
+
+  --success: var(--success, hsl(142 70% 50%));
+  --success-foreground: var(--success-foreground, hsl(0 0% 100%));
+  --warning: var(--warning, hsl(38 80% 55%));
+  --warning-foreground: var(--warning-foreground, hsl(0 0% 100%));
+  --info: var(--info, hsl(217 80% 60%));
+  --info-bg: var(--info-bg, hsl(217 50% 15%));
+  --info-foreground: var(--info-foreground, hsl(217 80% 80%));
+}

package/admin-dist/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2026-01-28T12:28:07.860Z",
+  "date": "2026-01-28T14:07:30.300Z",
   "preset": "node-server",
   "framework": {
     "name": "nitro",

package/admin-dist/public/assets/{CmsEmptyState-la_kLGHv.js → CmsEmptyState-DTlpzjOI.js}

@@ -1 +1 @@
-import{j as e,C as n,h as x}from"./main-BrFRroF1.js";function d({icon:s,title:m,description:r,action:t,className:l,...a}){return e.jsxs("div",{className:x("flex flex-col items-center justify-center py-12 text-center",l),...a,children:[s&&e.jsx("div",{className:"mb-4 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground",children:s}),e.jsx("h3",{className:"text-base font-semibold text-foreground",children:m}),r&&e.jsx("p",{className:"mt-1 max-w-sm text-sm text-muted-foreground",children:r}),t&&e.jsx(n,{variant:t.variant??"primary",onClick:t.onClick,className:"mt-4",children:t.label})]})}export{d as C};
+import{j as e,C as n,h as x}from"./main-CA-4LyFT.js";function d({icon:s,title:m,description:r,action:t,className:l,...a}){return e.jsxs("div",{className:x("flex flex-col items-center justify-center py-12 text-center",l),...a,children:[s&&e.jsx("div",{className:"mb-4 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground",children:s}),e.jsx("h3",{className:"text-base font-semibold text-foreground",children:m}),r&&e.jsx("p",{className:"mt-1 max-w-sm text-sm text-muted-foreground",children:r}),t&&e.jsx(n,{variant:t.variant??"primary",onClick:t.onClick,className:"mt-4",children:t.label})]})}export{d as C};