convex-cms 0.0.9-alpha.8 → 0.0.10

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

@@ -36,9 +36,7 @@ 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);
@@ -79,7 +77,7 @@ export function EmbedSidebar() {
         type="button"
         onClick={() => handleNavClick(item)}
         className={cn(
-          "flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm font-medium transition-colors",
+          "flex w-full hover:cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-left text-sm font-medium transition-colors",
           isActive(item.path, item.exact)
             ? "bg-sidebar-accent text-sidebar-accent-foreground"
             : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground"
@@ -100,7 +98,7 @@ export function EmbedSidebar() {
     <Collapsible key={item.id} defaultOpen={isContentActive}>
       <CollapsibleTrigger
         className={cn(
-          "flex w-full items-center gap-3 rounded-md px-2 py-2 text-sm font-medium transition-colors",
+          "flex w-full hover:cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm font-medium transition-colors",
           isContentActive
             ? "bg-sidebar-accent text-sidebar-accent-foreground"
             : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
@@ -117,7 +115,7 @@ export function EmbedSidebar() {
             type="button"
             onClick={() => navigate("content")}
             className={cn(
-              "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+              "flex w-full hover:cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
               normalizedPath === "/content"
                 ? "bg-sidebar-accent/60 text-sidebar-accent-foreground"
                 : "text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground"
@@ -131,7 +129,7 @@ export function EmbedSidebar() {
               type="button"
               onClick={() => navigateToContentType(type._id)}
               className={cn(
-                "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+                "flex w-full hover:cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
                 normalizedPath === `/entries/type/${type._id}`
                   ? "bg-sidebar-accent/60 text-sidebar-accent-foreground"
                   : "text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground"
@@ -154,19 +152,24 @@ export function EmbedSidebar() {
     </Collapsible>
   );
 
+  const sidebarWidth = layout.sidebarWidth;
+
   return (
     <>
-      <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">
+      <aside
+        className="fixed inset-y-0 left-0 z-50 flex flex-col border-r bg-sidebar"
+        style={{ width: sidebarWidth }}
+      >
+        <div className="flex h-14 items-center gap-2 px-4">
           <button
             type="button"
             onClick={() => navigate("dashboard")}
             className="flex items-center gap-2 font-semibold text-sidebar-foreground"
           >
             {branding.logo ? (
-              <img src={branding.logo} alt={branding.appName} className="size-8" />
+              <img src={branding.logo} alt={branding.appName} className="size-8 bg-primary" />
             ) : (
-              <div className="flex size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <div className="flex size-8 items-center justify-center rounded-lg bg-primary text-sidebar-primary-foreground">
                 <Layers className="size-4" />
               </div>
             )}
@@ -194,10 +197,10 @@ export function EmbedSidebar() {
           )}
         </nav>
 
-        <div className="border-t border-sidebar-border p-4">
+        <div className="p-4">
           <div className="flex items-center justify-between text-xs text-sidebar-foreground/60">
             <span>Version</span>
-            <span className="font-mono">0.1.0</span>
+            <span className="font-mono">0.0.11</span>
           </div>
         </div>
       </aside>

package/admin/src/embed/contexts/ApiContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import { createContext, useContext, type ReactNode } from "react";
-import type { BaseAdminAPI } from "convex-cms";
+import type { BaseAdminAPI } from "~/lib/cmsExports";
 
 // CmsAdminApi accepts BaseAdminAPI with optional namespaced exports.
 // This allows the API to work with Convex's FilterApi which removes

package/admin/src/embed/index.tsx

@@ -36,6 +36,7 @@
 
 import { useConvex } from "convex/react";
 import { useMemo } from "react";
+import { cn } from "../lib/cn";
 import { SettingsConfigProvider } from "../contexts/SettingsConfigContext";
 import {
   AuthProvider,
@@ -46,7 +47,6 @@ 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 {
@@ -129,6 +129,7 @@ export function CmsAdmin({
   basePath = "/admin",
   className,
   themeMode = "isolated",
+  darkModeControl = "independent",
   initialRoute = "dashboard",
   onNavigate,
 }: CmsAdminProps & {
@@ -165,7 +166,7 @@ export function CmsAdmin({
   return (
     <div className={cn("h-full", className)} data-cms-admin={themeMode}>
       <ApiProvider api={api}>
-        <ThemeProvider>
+        <ThemeProvider themeMode={themeMode} darkModeControl={darkModeControl}>
           <SettingsConfigProvider baseConfig={adminConfig} api={settingsApi}>
             <AuthProvider
               getUser={authConfig.getUser}

package/admin/src/embed/types.ts

@@ -26,4 +26,10 @@ export interface CmsAdminProps {
    * - 'inherit': Admin inherits parent app's CSS variables (for shadcn apps)
    */
   themeMode?: "isolated" | "inherit";
+  /**
+   * Dark mode control behavior:
+   * - 'independent' (default): Admin has its own dark mode toggle
+   * - 'follow-parent': Admin follows parent app's dark mode (hides toggle in inherit mode)
+   */
+  darkModeControl?: "independent" | "follow-parent";
 }

package/admin/src/hooks/usePermissions.ts

@@ -30,7 +30,7 @@ import {
   type Action,
   type OwnershipScope,
   type Permission,
-} from 'convex-cms';
+} from '../../../src/component/index';
 
 // =============================================================================
 // Types

package/admin/src/index.css

@@ -0,0 +1,432 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/inter";
+@import "@fontsource/jetbrains-mono";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--background: oklch(0.985 0 0);
+	--foreground: oklch(0.19 0 286.2);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.2 0 286.04);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0.005 285);
+	--primary: oklch(0.21 0.01 285.89);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.967 0.001 285);
+	--secondary-foreground: oklch(0.24 0 286.25);
+	--muted: oklch(0.967 0.001 285);
+	--muted-foreground: oklch(0.556 0.01 285);
+	--accent: oklch(0.967 0.001 285);
+	--accent-foreground: oklch(0.205 0.006 285);
+	--destructive: oklch(0.637 0.237 25);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(0.928 0.002 285);
+	--input: oklch(0.928 0.002 285);
+	--ring: oklch(0.205 0.006 285);
+
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.371 0.01 285);
+	--sidebar-primary: oklch(0.205 0.006 285);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.967 0.001 285);
+	--sidebar-accent-foreground: oklch(0.205 0.006 285);
+	--sidebar-border: oklch(0.937 0.003 253);
+	--sidebar-ring: oklch(0.623 0.214 255);
+
+	--success: oklch(0.527 0.154 152);
+	--success-foreground: oklch(1 0 0);
+	--warning: oklch(0.769 0.188 70);
+	--warning-foreground: oklch(0 0 0);
+	--info: oklch(0.623 0.214 255);
+	--info-bg: oklch(0.965 0.03 255);
+	--info-foreground: oklch(0.5 0.17 255);
+
+	--diff-added: oklch(0.527 0.154 152);
+	--diff-added-bg: oklch(0.965 0.03 152);
+	--diff-added-border: oklch(0.85 0.1 152);
+	--diff-added-foreground: oklch(0.45 0.13 152);
+	--diff-removed: oklch(0.637 0.237 25);
+	--diff-removed-bg: oklch(0.965 0.03 25);
+	--diff-removed-border: oklch(0.88 0.09 25);
+	--diff-removed-foreground: oklch(0.53 0.18 25);
+	--diff-modified: oklch(0.769 0.188 70);
+	--diff-modified-bg: oklch(0.965 0.03 70);
+	--diff-modified-border: oklch(0.88 0.1 70);
+	--diff-modified-foreground: oklch(0.53 0.15 70);
+
+	--purple: oklch(0.628 0.2 303);
+	--purple-bg: oklch(0.965 0.03 303);
+	--purple-foreground: oklch(0.45 0.13 303);
+
+	--chart-1: oklch(0.646 0.17 31);
+	--chart-2: oklch(0.52 0.105 180);
+	--chart-3: oklch(0.37 0.06 230);
+	--chart-4: oklch(0.77 0.13 85);
+	--chart-5: oklch(0.72 0.17 55);
+
+	--radius: 0.5rem;
+}
+
+.dark {
+	--background: oklch(0.145 0.005 285);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.18 0.005 285);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.18 0.005 285);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 0 0);
+	--primary-foreground: oklch(0.205 0.006 285);
+	--secondary: oklch(0.25 0.006 285);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.25 0.006 285);
+	--muted-foreground: oklch(0.715 0.008 285);
+	--accent: oklch(0.25 0.006 285);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.59 0.2 25);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(0.3 0.006 285);
+	--input: oklch(0.3 0.006 285);
+	--ring: oklch(0.87 0.005 285);
+
+	--sidebar: oklch(0.205 0.006 285);
+	--sidebar-foreground: oklch(0.967 0.001 285);
+	--sidebar-primary: oklch(0.55 0.2 255);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.25 0.006 285);
+	--sidebar-accent-foreground: oklch(0.967 0.001 285);
+	--sidebar-border: oklch(0.25 0.006 285);
+	--sidebar-ring: oklch(0.623 0.214 255);
+
+	--success: oklch(0.58 0.15 152);
+	--success-foreground: oklch(1 0 0);
+	--warning: oklch(0.769 0.188 70);
+	--warning-foreground: oklch(0 0 0);
+	--info: oklch(0.68 0.19 255);
+	--info-bg: oklch(0.3 0.08 255);
+	--info-foreground: oklch(0.85 0.1 255);
+
+	--diff-added: oklch(0.58 0.15 152);
+	--diff-added-bg: oklch(0.25 0.08 152);
+	--diff-added-border: oklch(0.4 0.1 152);
+	--diff-added-foreground: oklch(0.75 0.12 152);
+	--diff-removed: oklch(0.62 0.18 25);
+	--diff-removed-bg: oklch(0.25 0.08 25);
+	--diff-removed-border: oklch(0.4 0.1 25);
+	--diff-removed-foreground: oklch(0.75 0.12 25);
+	--diff-modified: oklch(0.65 0.16 70);
+	--diff-modified-bg: oklch(0.25 0.08 70);
+	--diff-modified-border: oklch(0.4 0.1 70);
+	--diff-modified-foreground: oklch(0.75 0.12 70);
+
+	--purple: oklch(0.68 0.18 303);
+	--purple-bg: oklch(0.3 0.08 303);
+	--purple-foreground: oklch(0.85 0.1 303);
+
+	--chart-1: oklch(0.646 0.17 31);
+	--chart-2: oklch(0.52 0.105 180);
+	--chart-3: oklch(0.55 0.08 230);
+	--chart-4: oklch(0.77 0.13 85);
+	--chart-5: oklch(0.72 0.17 55);
+}
+
+[data-cms-admin="isolated"] {
+	--background: oklch(0.985 0 0);
+	--foreground: oklch(0.145 0.005 285);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0.005 285);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0.005 285);
+	--primary: oklch(0.205 0.006 285);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.967 0.001 285);
+	--secondary-foreground: oklch(0.205 0.006 285);
+	--muted: oklch(0.967 0.001 285);
+	--muted-foreground: oklch(0.556 0.01 285);
+	--accent: oklch(0.967 0.001 285);
+	--accent-foreground: oklch(0.205 0.006 285);
+	--destructive: oklch(0.637 0.237 25);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(0.928 0.002 285);
+	--input: oklch(0.928 0.002 285);
+	--ring: oklch(0.205 0.006 285);
+
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.371 0.01 285);
+	--sidebar-primary: oklch(0.205 0.006 285);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.967 0.001 285);
+	--sidebar-accent-foreground: oklch(0.205 0.006 285);
+	--sidebar-border: oklch(0.937 0.003 253);
+	--sidebar-ring: oklch(0.623 0.214 255);
+
+	--success: oklch(0.527 0.154 152);
+	--success-foreground: oklch(1 0 0);
+	--warning: oklch(0.769 0.188 70);
+	--warning-foreground: oklch(0 0 0);
+	--info: oklch(0.623 0.214 255);
+	--info-bg: oklch(0.965 0.03 255);
+	--info-foreground: oklch(0.5 0.17 255);
+
+	--diff-added: oklch(0.527 0.154 152);
+	--diff-added-bg: oklch(0.965 0.03 152);
+	--diff-added-border: oklch(0.85 0.1 152);
+	--diff-added-foreground: oklch(0.45 0.13 152);
+	--diff-removed: oklch(0.637 0.237 25);
+	--diff-removed-bg: oklch(0.965 0.03 25);
+	--diff-removed-border: oklch(0.88 0.09 25);
+	--diff-removed-foreground: oklch(0.53 0.18 25);
+	--diff-modified: oklch(0.769 0.188 70);
+	--diff-modified-bg: oklch(0.965 0.03 70);
+	--diff-modified-border: oklch(0.88 0.1 70);
+	--diff-modified-foreground: oklch(0.53 0.15 70);
+
+	--purple: oklch(0.628 0.2 303);
+	--purple-bg: oklch(0.965 0.03 303);
+	--purple-foreground: oklch(0.45 0.13 303);
+
+	--chart-1: oklch(0.646 0.17 31);
+	--chart-2: oklch(0.52 0.105 180);
+	--chart-3: oklch(0.37 0.06 230);
+	--chart-4: oklch(0.77 0.13 85);
+	--chart-5: oklch(0.72 0.17 55);
+
+	--radius: 0.5rem;
+}
+
+[data-cms-admin="isolated"].dark,
+[data-cms-admin="isolated"] .dark {
+	--background: oklch(0.145 0.005 285);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.18 0.005 285);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.18 0.005 285);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 0 0);
+	--primary-foreground: oklch(0.205 0.006 285);
+	--secondary: oklch(0.25 0.006 285);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.25 0.006 285);
+	--muted-foreground: oklch(0.715 0.008 285);
+	--accent: oklch(0.25 0.006 285);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.59 0.2 25);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(0.3 0.006 285);
+	--input: oklch(0.3 0.006 285);
+	--ring: oklch(0.87 0.005 285);
+
+	--sidebar: oklch(0.205 0.006 285);
+	--sidebar-foreground: oklch(0.967 0.001 285);
+	--sidebar-primary: oklch(0.55 0.2 255);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.25 0.006 285);
+	--sidebar-accent-foreground: oklch(0.967 0.001 285);
+	--sidebar-border: oklch(0.25 0.006 285);
+	--sidebar-ring: oklch(0.623 0.214 255);
+
+	--success: oklch(0.58 0.15 152);
+	--success-foreground: oklch(1 0 0);
+	--warning: oklch(0.769 0.188 70);
+	--warning-foreground: oklch(0 0 0);
+	--info: oklch(0.68 0.19 255);
+	--info-bg: oklch(0.3 0.08 255);
+	--info-foreground: oklch(0.85 0.1 255);
+
+	--diff-added: oklch(0.58 0.15 152);
+	--diff-added-bg: oklch(0.25 0.08 152);
+	--diff-added-border: oklch(0.4 0.1 152);
+	--diff-added-foreground: oklch(0.75 0.12 152);
+	--diff-removed: oklch(0.62 0.18 25);
+	--diff-removed-bg: oklch(0.25 0.08 25);
+	--diff-removed-border: oklch(0.4 0.1 25);
+	--diff-removed-foreground: oklch(0.75 0.12 25);
+	--diff-modified: oklch(0.65 0.16 70);
+	--diff-modified-bg: oklch(0.25 0.08 70);
+	--diff-modified-border: oklch(0.4 0.1 70);
+	--diff-modified-foreground: oklch(0.75 0.12 70);
+
+	--purple: oklch(0.68 0.18 303);
+	--purple-bg: oklch(0.3 0.08 303);
+	--purple-foreground: oklch(0.85 0.1 303);
+
+	--chart-1: oklch(0.646 0.17 31);
+	--chart-2: oklch(0.52 0.105 180);
+	--chart-3: oklch(0.55 0.08 230);
+	--chart-4: oklch(0.77 0.13 85);
+	--chart-5: oklch(0.72 0.17 55);
+}
+
+/* Inherit mode: CSS variables cascade naturally from parent app's :root.
+   No definitions needed here - the parent app's variables take precedence. */
+
+@theme {
+	--font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+	--sidebar-width: 16rem;
+	--sidebar-width-icon: 3rem;
+
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
+
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--color-diff-added: var(--diff-added);
+	--color-diff-added-bg: var(--diff-added-bg);
+	--color-diff-added-border: var(--diff-added-border);
+	--color-diff-added-foreground: var(--diff-added-foreground);
+	--color-diff-removed: var(--diff-removed);
+	--color-diff-removed-bg: var(--diff-removed-bg);
+	--color-diff-removed-border: var(--diff-removed-border);
+	--color-diff-removed-foreground: var(--diff-removed-foreground);
+	--color-diff-modified: var(--diff-modified);
+	--color-diff-modified-bg: var(--diff-modified-bg);
+	--color-diff-modified-border: var(--diff-modified-border);
+	--color-diff-modified-foreground: var(--diff-modified-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-bg: var(--info-bg);
+	--color-info-foreground: var(--info-foreground);
+
+	--color-purple: var(--purple);
+	--color-purple-bg: var(--purple-bg);
+	--color-purple-foreground: var(--purple-foreground);
+
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-2xl: calc(var(--radius) + 8px);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+		font-feature-settings: "rlig" 1, "calt" 1;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	button:not([disabled]),
+	[role="button"]:not([disabled]) {
+		cursor: pointer;
+	}
+
+	[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 {
+	.status-draft {
+		background-color: var(--muted);
+		color: var(--muted-foreground);
+	}
+
+	.status-published {
+		background-color: var(--diff-added-bg);
+		color: var(--diff-added-foreground);
+	}
+
+	.status-scheduled {
+		background-color: var(--info-bg);
+		color: var(--info-foreground);
+	}
+
+	.status-archived {
+		background-color: var(--diff-modified-bg);
+		color: var(--diff-modified-foreground);
+	}
+
+	.surface-base {
+		@apply bg-card border border-border;
+	}
+
+	.surface-elevated {
+		@apply bg-card border border-border shadow-sm;
+	}
+
+	.surface-floating {
+		@apply bg-popover border border-border shadow-lg;
+	}
+
+	.focus-ring {
+		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+	}
+
+	.scrollbar-none {
+		overflow-y: auto;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+	}
+
+	.scrollbar-none::-webkit-scrollbar {
+		display: none;
+	}
+}

package/admin/src/lib/cmsExports.ts

@@ -0,0 +1,6 @@
+// Re-export CMS utilities that admin components need
+// Using relative imports to avoid circular dependency with convex-cms package
+export { getRole, getRolePermissions } from '../../../src/client/index';
+export type { RoleName, BaseAdminAPI } from '../../../src/client/index';
+export { useMediaUploadQueue } from '../../../src/react/index';
+export type { UploadQueueFile, UploadQueueFileStatus } from '../../../src/react/index';