convex-cms 0.0.9-alpha.9 → 0.0.11-alpha.2

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://badge.fury.io/js/convex-cms.svg)](https://www.npmjs.com/package/convex-cms)
 [![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-> **Alpha (v0.0.8)** Actively developed. APIs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
+> **Alpha (v0.0.10)** Actively developed. APIs & docs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
 
 A headless CMS built as a [Convex Component](https://docs.convex.dev/components). Content management that runs inside your Convex app.
 
@@ -11,6 +11,7 @@ A headless CMS built as a [Convex Component](https://docs.convex.dev/components)
 
 [Live Demo](https://convex-cms-example.vercel.app)
 
+
 ## Quick Start
 
 ### 1. Install
@@ -51,6 +52,8 @@ If you're building on Convex and need content management without the overhead of
 - **Data independence:** CMS that lives in your own convex deployment, extendable and customizable with your convex functions
 - **Agent-native content management:** Pre-built tools useful for AI agent integration with `@convex-dev/agent`
 
+
+
 ## Features
 
 | Feature | What it does |
@@ -62,6 +65,8 @@ If you're building on Convex and need content management without the overhead of
 | **CLI Admin UI** | Run for local development, content entry, and management |
 | **Embedded Admin UI** | Ship the admin interface as part of your React app |
 
+
+
 ## In Practice
 
 **Full control over the editorial experience?**  
@@ -79,7 +84,8 @@ CMS Client + agent tools. Pre-built tools for AI-driven workflows.
 *Any combination of these features works together seamlessly. Pick what fits your workflow.*
 
 
-## Batteries Included
+
+## Included Batteries
 
 Leverage included features or extend and customize within your own convex functions to your desire.
 
@@ -107,6 +113,9 @@ Leverage included features or extend and customize within your own convex functi
 - **Agent tools.** 23 pre-built tools with Zod schemas for AI integration
 - **Query builder.** Fluent API for complex content queries
 
+
+
+
 ### Admin UI
 - **Pre-built React interface.** CLI mode for development, embeddable for production
 - **Visual content editing.** Rich text, media picker, reference selector
@@ -137,8 +146,6 @@ When embedding CmsAdmin in your React app, you can control how it handles CSS va
 | `isolated` | Admin defines all CSS variables, ignoring parent app styles |
 | `inherit` | Admin inherits parent's shadcn variables, only defines sidebar fallbacks |
 
-**Critical for Tailwind 4 apps:** If Tailwind utility classes aren't applying to the embedded admin, add a `@source` directive to your app's CSS:
-
 ```css
 /* your-app/src/index.css */
 @import "tailwindcss";
@@ -147,6 +154,9 @@ When embedding CmsAdmin in your React app, you can control how it handles CSS va
 
 This tells Tailwind to scan the admin's compiled JavaScript for utility classes.
 
+
+
+
 ## Documentation
 
 | Guide | Description |
@@ -161,23 +171,33 @@ This tells Tailwind to scan the admin's compiled JavaScript for utility classes.
 | [Agent Tools](./docs/guides/agent-tools.md) | AI agent integration with Zod schemas |
 | [Integration Patterns](./docs/guides/integration-patterns.md) | Common setups and when to use each |
 
+
 | Reference | Description |
 |-----------|-------------|
 | [Client API](./docs/api/client-api.md) | createCmsClient methods |
-| [Admin API](./docs/api/admin-api.md) | 60+ defineAdminAPI functions |
+| [Admin API](./docs/api/admin-api.md) | 100+ defineAdminAPI functions |
 | [Code-First Schema](./docs/api/code-first-schema.md) | TypeScript-first content types |
 | [Field Types](./docs/api/field-types.md) | All 13 field types |
 | [Configuration](./docs/api/configuration.md) | All config options |
 
+
+
+
 ## Requirements
 
 - Convex ^1.17.0
 - Node.js 18+
 
+
+
+
 ## License
 
 Apache-2.0
 
+
+
+
 ## Support
 
 - [GitHub Issues](https://github.com/obkaro/convex-cms/issues): Bug reports and feature requests

package/admin/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useRouterState, useNavigate, Link } from '@tanstack/react-router'
 import { useAuth, useAdminConfig, useBreadcrumbContext } from '~/contexts'
-import { getRole } from 'convex-cms'
+import { getRole } from '~/lib/cmsExports'
 import {
   Breadcrumb,
   BreadcrumbItem,

package/admin/src/components/RouteGuard.tsx

@@ -27,7 +27,7 @@
 
 import type { ReactNode } from 'react';
 import { useAuth, type PermissionCheck } from '../contexts/AuthContext';
-import type { RoleName } from 'convex-cms';
+import type { RoleName } from '~/lib/cmsExports';
 import { Loader2 } from 'lucide-react';
 
 // =============================================================================

package/admin/src/components/UploadDropzone.tsx

@@ -3,7 +3,7 @@ import {
   useMediaUploadQueue,
   type UploadQueueFile,
   type UploadQueueFileStatus,
-} from 'convex-cms/react'
+} from '~/lib/cmsExports'
 import type { FunctionReference } from 'convex/server'
 import { CmsButton } from '~/components/cmsds/CmsButton'
 import { cn } from '~/lib/cn'

package/admin/src/components/ui/sidebar.tsx

@@ -478,7 +478,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
       },
       size: {
         default: "h-8 text-sm",

package/admin/src/contexts/AuthContext.tsx

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

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

@@ -77,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"
@@ -98,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",
@@ -115,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"
@@ -129,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"
@@ -157,19 +157,19 @@ export function EmbedSidebar() {
   return (
     <>
       <aside
-        className="fixed inset-y-0 left-0 z-50 flex flex-col border-r border-sidebar-border bg-sidebar"
+        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 border-b border-sidebar-border px-4">
+        <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>
             )}
@@ -197,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/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';