convex-cms 0.0.7-alpha.0 → 0.0.8

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.6)** Actively developed. APIs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
+> **Alpha (v0.0.7)** Actively developed. APIs 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.
 
@@ -20,14 +20,14 @@ pnpm add convex-cms
 ```typescript
 // convex/convex.config.ts
 import { defineApp } from "convex/server";
-import convexCms from "convex-cms/convex.config";
+import cms from "convex-cms/convex.config";
 
 const app = defineApp();
-app.use(convexCms);
+app.use(cms);
 export default app;
 ```
 
-### 3. Choose Your Setup
+### 3. Initialize
 
 **For Admin UI:** Run `pnpm convex-cms init` then `pnpm convex-cms admin`
 → [Full Admin UI Setup](./docs/guides/admin-ui-setup.md)
@@ -37,13 +37,15 @@ export default app;
 
 ## Why Convex CMS?
 
-If you're building on Convex and need content management, this is the most integrated option:
+If you're building on Convex and need content management without the overhead of all the CMS plumbing, this is the most integrated option.
 
-- **Zero infrastructure.** Runs entirely within your Convex deployment
-- **True real-time.** Content updates via Convex subscriptions, not polling
-- **Type-safe.** Code-first schemas with full TypeScript inference
-- **Component isolation.** Separate database tables, versioned independently
-- **Agent-native.** 23 pre-built tools for AI agent integration via `@convex-dev/agent`
+### What you get:
+
+- **Typesafe admin API:** Admin APIs exported directly from your backend for use in your React queries and mutations
+- **Built in admin UI:** A well designed admin UI that you can view and edit content from
+- **Embeddable content manager:** Ability to embed and serve the prebuilt UI as part of you React application
+- **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
 
@@ -51,13 +53,11 @@ If you're building on Convex and need content management, this is the most integ
 |---------|--------------|
 | **Code-first config** | Define content types in TypeScript with full type inference |
 | **UI-defined config** | Create and modify content types through the admin interface |
-| **CMS Client** | Programmatic access via `createCmsClient` for custom queries and mutations |
-| **Admin API** | Pre-built functions via `defineAdminAPI` that power the admin UI |
-| **CLI Admin UI** | Run `npx convex-cms admin` for local development |
+| **CMS Client** | Programmatic access for custom queries and mutations |
+| **Admin API** | Pre-built functions that power the admin UI |
+| **CLI Admin UI** | Run for local development, content entry, and management |
 | **Embedded Admin UI** | Ship the admin interface as part of your React app |
 
-Any combination of these features works together seamlessly. Pick what fits your workflow.
-
 ## In Practice
 
 **Full control over the editorial experience?**  
@@ -70,9 +70,14 @@ Code-first config + Admin API + Embedded Admin UI. Type-safe schemas with a work
 UI-defined config + Admin API + Embedded Admin UI. Non-developers can add fields and content types.
 
 **Automated content pipelines?**  
-CMS Client + agent tools. 23 pre-built tools for AI-driven workflows.
+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
 
-## What's Included
+Leverage included features or extend and customize within your own convex functions to your desire.
 
 ### Core Content
 - **13 field types.** text, richText, number, boolean, date, datetime, select, multiSelect, reference, media, json, tags, category

package/admin/src/components/BreakingChangesWarningDialog.tsx

@@ -42,13 +42,13 @@ export function BreakingChangesWarningDialog({
       }
     >
       <div className="space-y-4">
-        <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3">
-          <AlertTriangle className="mt-0.5 size-5 shrink-0 text-amber-600" />
+        <div className="diff-modified flex items-start gap-3 rounded-lg border p-3">
+          <AlertTriangle className="mt-0.5 size-5 shrink-0 text-diff-modified" />
           <div className="space-y-1">
-            <p className="text-sm font-medium text-amber-800">
+            <p className="text-sm font-medium text-diff-modified">
               These changes may affect existing content
             </p>
-            <p className="text-sm text-amber-700">
+            <p className="text-sm text-diff-modified-foreground">
               The following changes could cause data loss or validation errors for existing entries.
               Review carefully before proceeding.
             </p>
@@ -65,7 +65,7 @@ export function BreakingChangesWarningDialog({
                 key={index}
                 className="flex items-start gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm"
               >
-                <span className="mt-0.5 size-1.5 shrink-0 rounded-full bg-amber-500" />
+                <span className="mt-0.5 size-1.5 shrink-0 rounded-full bg-warning" />
                 <span className="text-muted-foreground">{change}</span>
               </li>
             ))}

package/admin/src/components/BulkOperationModal.tsx

@@ -102,7 +102,7 @@ export function BulkOperationModal({
         <div className="space-y-4">
           {result.failed === 0 ? (
             <div className="flex flex-col items-center gap-3 py-4 text-center">
-              <div className="flex size-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
+              <div className="flex size-12 items-center justify-center rounded-full bg-diff-added-bg text-diff-added">
                 <CheckCircle className="size-6" />
               </div>
               <p className="text-sm text-muted-foreground">
@@ -116,33 +116,33 @@ export function BulkOperationModal({
           ) : (
             <div className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
-                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-center">
-                  <p className="text-2xl font-semibold text-emerald-700">
+                <div className="diff-added rounded-lg border p-3 text-center">
+                  <p className="text-2xl font-semibold text-diff-added">
                     {result.succeeded}
                   </p>
-                  <p className="text-xs text-emerald-600">Succeeded</p>
+                  <p className="text-xs text-diff-added-foreground">Succeeded</p>
                 </div>
-                <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-center">
-                  <p className="text-2xl font-semibold text-red-700">
+                <div className="diff-removed rounded-lg border p-3 text-center">
+                  <p className="text-2xl font-semibold text-diff-removed">
                     {result.failed}
                   </p>
-                  <p className="text-xs text-red-600">Failed</p>
+                  <p className="text-xs text-diff-removed-foreground">Failed</p>
                 </div>
               </div>
 
               {result.errors && result.errors.length > 0 && (
-                <div className="rounded-lg border border-amber-200 bg-amber-50 p-3">
-                  <p className="mb-2 text-sm font-medium text-amber-800">
+                <div className="diff-modified rounded-lg border p-3">
+                  <p className="mb-2 text-sm font-medium text-diff-modified">
                     Errors:
                   </p>
-                  <ul className="space-y-1 text-xs text-amber-700">
+                  <ul className="space-y-1 text-xs text-diff-modified-foreground">
                     {result.errors.slice(0, 5).map((error, index) => (
                       <li key={index} className="truncate">
                         • {error}
                       </li>
                     ))}
                     {result.errors.length > 5 && (
-                      <li className="text-amber-600">
+                      <li className="text-diff-modified-foreground/80">
                         ...and {result.errors.length - 5} more errors
                       </li>
                     )}
@@ -163,9 +163,9 @@ export function BulkOperationModal({
           </p>
           <p className="text-sm text-muted-foreground">{config.description}</p>
           {config.warning && (
-            <div className="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
-              <AlertTriangle className="mt-0.5 size-4 shrink-0 text-amber-600" />
-              <p className="text-sm text-amber-800">
+            <div className="diff-modified flex items-start gap-2 rounded-lg border p-3">
+              <AlertTriangle className="mt-0.5 size-4 shrink-0 text-diff-modified" />
+              <p className="text-sm">
                 <span className="font-medium">Note:</span> {config.warning}
               </p>
             </div>

package/admin/src/components/ContentEntryEditor.tsx

@@ -725,8 +725,8 @@ export function ContentEntryEditor({
                 className={cn(
                   'flex items-center gap-1.5 text-sm',
                   autosaveStatus === 'saving' && 'text-muted-foreground',
-                  autosaveStatus === 'saved' && 'text-emerald-600',
-                  autosaveStatus === 'error' && 'text-red-600'
+                  autosaveStatus === 'saved' && 'text-success',
+                  autosaveStatus === 'error' && 'text-destructive'
                 )}
                 data-testid="autosave-status"
               >
@@ -755,7 +755,7 @@ export function ContentEntryEditor({
           )}
 
           {isDirty && (
-            <span className="text-sm text-amber-600">Unsaved changes</span>
+            <span className="text-sm text-warning">Unsaved changes</span>
           )}
         </div>
       </div>
@@ -763,7 +763,7 @@ export function ContentEntryEditor({
       {/* Success/Error Messages */}
       {saveSuccess && (
         <div
-          className="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800"
+          className="diff-added flex items-center gap-2 rounded-lg border px-4 py-3 text-sm"
           role="status"
         >
           <CheckCircle className="size-4" />
@@ -773,7 +773,7 @@ export function ContentEntryEditor({
 
       {(submitError || publishError) && (
         <div
-          className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800"
+          className="diff-removed rounded-lg border px-4 py-3 text-sm"
           role="alert"
         >
           <span className="font-medium">Error:</span> {submitError || publishError}
@@ -886,7 +886,7 @@ export function ContentEntryEditor({
                 entry.status === 'scheduled' &&
                 entry.scheduledPublishAt && (
                   <span
-                    className="flex items-center gap-1 text-xs text-blue-600"
+                    className="flex items-center gap-1 text-xs text-info"
                     data-testid="scheduled-time"
                   >
                     <Clock className="size-3" />

package/admin/src/components/ContentTypeFormModal.tsx

@@ -940,7 +940,7 @@ export function ContentTypeFormModal({
 
 					{submitError && (
 						<div
-							className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800"
+							className="diff-removed rounded-lg border px-3 py-2 text-sm"
 							role="alert"
 							data-testid="submit-error"
 						>

package/admin/src/components/Header.tsx

@@ -78,11 +78,14 @@ function getBreadcrumbs(
 ): BreadcrumbData[] {
   const breadcrumbs: BreadcrumbData[] = [{ label: appName, to: '/' }]
 
-  if (pathname === '/') {
+  // Decode pathname to match non-encoded override keys
+  const decodedPathname = decodeURIComponent(pathname)
+
+  if (decodedPathname === '/') {
     return breadcrumbs
   }
 
-  const segments = pathname.split('/').filter(Boolean)
+  const segments = decodedPathname.split('/').filter(Boolean)
   let currentPath = ''
 
   segments.forEach((segment, index) => {

package/admin/src/components/SchemaDriftWarning.tsx

@@ -0,0 +1,126 @@
+/**
+ * Schema Drift Warning Component
+ *
+ * Displays a warning banner when code-defined content types
+ * are out of sync with the database schema.
+ */
+
+import { useQuery, useMutation } from "convex/react";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import { AlertTriangle, RefreshCw, XCircle, AlertCircle } from "lucide-react";
+import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import { useState } from "react";
+
+interface DriftIssue {
+	type: string;
+	severity: "error" | "warning" | "info";
+	contentTypeName: string;
+	fieldName?: string;
+	message: string;
+}
+
+interface SchemaDriftWarningProps {
+	api: CmsAdminApi;
+}
+
+export function SchemaDriftWarning({ api }: SchemaDriftWarningProps) {
+	const driftResults = useQuery(api.checkSchemaDrift, {});
+	const syncMutation = useMutation(api.syncCodeDefinedTypes);
+	const [isSyncing, setIsSyncing] = useState(false);
+	const [syncResult, setSyncResult] = useState<{
+		created: number;
+		updated: number;
+	} | null>(null);
+
+	if (driftResults === undefined) {
+		return null;
+	}
+
+	if (!driftResults || driftResults.length === 0) {
+		if (syncResult && (syncResult.created > 0 || syncResult.updated > 0)) {
+			return (
+				<Alert className="border-success/50 bg-success/10">
+					<AlertCircle className="size-4 text-success" />
+					<AlertTitle className="text-diff-added-foreground">
+						Sync Complete
+					</AlertTitle>
+					<AlertDescription className="text-diff-added-foreground/80">
+						{syncResult.created > 0 && (
+							<span>{syncResult.created} content type(s) created. </span>
+						)}
+						{syncResult.updated > 0 && (
+							<span>{syncResult.updated} content type(s) updated.</span>
+						)}
+					</AlertDescription>
+				</Alert>
+			);
+		}
+		return null;
+	}
+
+	const errors = driftResults.filter((d: DriftIssue) => d.severity === "error");
+	const warnings = driftResults.filter((d: DriftIssue) => d.severity === "warning");
+
+	const handleSync = async () => {
+		setIsSyncing(true);
+		setSyncResult(null);
+		try {
+			const result = await syncMutation({});
+			setSyncResult(result);
+		} catch (error) {
+			console.error("Sync failed:", error);
+		} finally {
+			setIsSyncing(false);
+		}
+	};
+
+	const variant = errors.length > 0 ? "destructive" : "default";
+	const Icon = errors.length > 0 ? XCircle : AlertTriangle;
+	const iconColor =
+		errors.length > 0 ? "text-destructive" : "text-warning";
+
+	return (
+		<Alert variant={variant} className={errors.length === 0 ? "border-warning/50 bg-warning/10" : ""}>
+			<Icon className={`size-4 ${iconColor}`} />
+			<AlertTitle className={errors.length === 0 ? "text-diff-modified-foreground" : ""}>
+				Schema Drift Detected
+			</AlertTitle>
+			<AlertDescription className={errors.length === 0 ? "text-diff-modified-foreground/80" : ""}>
+				<div className="space-y-2">
+					{errors.length > 0 && (
+						<p>
+							<strong>{errors.length} error(s)</strong>:{" "}
+							{errors
+								.slice(0, 3)
+								.map((e: DriftIssue) => e.message)
+								.join(" ")}
+							{errors.length > 3 && ` ...and ${errors.length - 3} more`}
+						</p>
+					)}
+					{warnings.length > 0 && (
+						<p>
+							<strong>{warnings.length} warning(s)</strong>: Code-defined types
+							may need syncing.
+						</p>
+					)}
+					<div className="mt-3 flex items-center gap-2">
+						<Button
+							size="sm"
+							variant={errors.length > 0 ? "destructive" : "outline"}
+							onClick={handleSync}
+							disabled={isSyncing}
+							className={errors.length === 0 ? "border-warning/50 text-diff-modified-foreground hover:bg-warning/20" : ""}
+						>
+							<RefreshCw className={`mr-1.5 size-3.5 ${isSyncing ? "animate-spin" : ""}`} />
+							{isSyncing ? "Syncing..." : "Sync Now"}
+						</Button>
+						<span className="text-xs opacity-75">
+							Syncs code-defined types to the database
+						</span>
+					</div>
+				</div>
+			</AlertDescription>
+		</Alert>
+	);
+}

package/admin/src/components/TaxonomyEditor.tsx

@@ -187,7 +187,7 @@ export function TaxonomyEditor({
     >
       <form onSubmit={handleSubmit} className="space-y-4">
         {submitError && (
-          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+          <div className="diff-removed rounded-lg border px-3 py-2 text-sm">
             {submitError}
           </div>
         )}
@@ -294,7 +294,7 @@ export function TaxonomyEditor({
                 Terms can have parent-child relationships (like categories)
               </p>
               {isEditing && (
-                <p className="text-xs text-amber-600">
+                <p className="text-xs text-warning">
                   Hierarchy type cannot be changed after creation
                 </p>
               )}

package/admin/src/components/TermTree.tsx

@@ -196,12 +196,12 @@ export function TermTree({
       </div>
 
       {error && (
-        <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+        <div className="diff-removed flex items-center justify-between rounded-lg border px-3 py-2 text-sm">
           {error}
           <button
             type="button"
             onClick={() => setError(null)}
-            className="text-red-600 hover:text-red-800"
+            className="text-diff-removed hover:text-diff-removed-foreground"
           >
             ×
           </button>
@@ -436,7 +436,7 @@ function TermEditModal({
     >
       <form onSubmit={handleSubmit} className="space-y-4">
         {submitError && (
-          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+          <div className="diff-removed rounded-lg border px-3 py-2 text-sm">
             {submitError}
           </div>
         )}

package/admin/src/components/UploadDropzone.tsx

@@ -158,10 +158,10 @@ export function UploadDropzone({
   const getStatusIcon = (status: UploadQueueFileStatus) => {
     switch (status) {
       case 'complete':
-        return <Check className="size-4 text-emerald-500" />
+        return <Check className="size-4 text-success" />
       case 'error':
       case 'cancelled':
-        return <X className="size-4 text-red-500" />
+        return <X className="size-4 text-destructive" />
       case 'uploading':
         return (
           <div className="size-4 animate-spin rounded-full border-2 border-muted border-t-primary" />
@@ -247,10 +247,10 @@ export function UploadDropzone({
               {!queue.isUploading && hasCompletedOrFailed && (
                 <div className="flex items-center gap-2">
                   {completedCount > 0 && (
-                    <span className="text-emerald-600">{completedCount} completed</span>
+                    <span className="text-success">{completedCount} completed</span>
                   )}
                   {errorCount > 0 && (
-                    <span className="text-red-500">{errorCount} failed</span>
+                    <span className="text-destructive">{errorCount} failed</span>
                   )}
                 </div>
               )}
@@ -293,8 +293,8 @@ export function UploadDropzone({
                 key={uploadFile.id}
                 className={cn(
                   'flex items-center gap-3 rounded-lg border bg-card p-3',
-                  uploadFile.status === 'error' && 'border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/20',
-                  uploadFile.status === 'complete' && 'border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/20'
+                  uploadFile.status === 'error' && 'border-diff-removed-border bg-diff-removed-bg',
+                  uploadFile.status === 'complete' && 'border-diff-added-border bg-diff-added-bg'
                 )}
               >
                 <div className="shrink-0">{getStatusIcon(uploadFile.status)}</div>
@@ -311,7 +311,7 @@ export function UploadDropzone({
                       {formatFileSize(uploadFile.file.size)}
                     </span>
                     {uploadFile.error && (
-                      <span className="text-xs text-red-500">{uploadFile.error}</span>
+                      <span className="text-xs text-destructive">{uploadFile.error}</span>
                     )}
                   </div>
                 </div>

package/admin/src/components/VersionCompare.tsx

@@ -82,11 +82,11 @@ export function VersionCompare({
   const getChangeStyles = (changeType: string) => {
     switch (changeType) {
       case 'added':
-        return 'border-emerald-200 bg-emerald-50'
+        return 'diff-added border'
       case 'removed':
-        return 'border-red-200 bg-red-50'
+        return 'diff-removed border'
       case 'modified':
-        return 'border-amber-200 bg-amber-50'
+        return 'diff-modified border'
       default:
         return 'border-border bg-card'
     }
@@ -95,11 +95,11 @@ export function VersionCompare({
   const getChangeIconStyles = (changeType: string) => {
     switch (changeType) {
       case 'added':
-        return 'bg-emerald-100 text-emerald-700'
+        return 'diff-icon-added'
       case 'removed':
-        return 'bg-red-100 text-red-700'
+        return 'diff-icon-removed'
       case 'modified':
-        return 'bg-amber-100 text-amber-700'
+        return 'diff-icon-modified'
       default:
         return 'bg-muted text-muted-foreground'
     }
@@ -144,7 +144,7 @@ export function VersionCompare({
               </p>
             </div>
           ) : !comparison ? (
-            <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
+            <div className="diff-removed rounded-lg border px-4 py-3 text-sm">
               Could not load version comparison
             </div>
           ) : !comparison.hasChanges ? (
@@ -209,21 +209,21 @@ export function VersionCompare({
 
                     <div className="mt-2 space-y-2">
                       {change.changeType !== 'added' && (
-                        <div className="rounded border border-red-200 bg-white p-2">
-                          <p className="mb-1 text-xs font-medium text-red-700">
+                        <div className="rounded border border-diff-removed-border bg-card p-2">
+                          <p className="mb-1 text-xs font-medium text-diff-removed">
                             Before:
                           </p>
-                          <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs text-red-900">
+                          <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs text-diff-removed-foreground">
                             {formatValue(change.fromValue)}
                           </pre>
                         </div>
                       )}
                       {change.changeType !== 'removed' && (
-                        <div className="rounded border border-emerald-200 bg-white p-2">
-                          <p className="mb-1 text-xs font-medium text-emerald-700">
+                        <div className="rounded border border-diff-added-border bg-card p-2">
+                          <p className="mb-1 text-xs font-medium text-diff-added">
                             After:
                           </p>
-                          <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs text-emerald-900">
+                          <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs text-diff-added-foreground">
                             {formatValue(change.toValue)}
                           </pre>
                         </div>

package/admin/src/components/VersionHistory.tsx

@@ -149,7 +149,7 @@ export function VersionHistory({
       </div>
 
       {rollbackSuccess && (
-        <div className="flex items-center gap-2 border-b bg-emerald-50 px-4 py-2 text-sm text-emerald-800">
+        <div className="flex items-center gap-2 border-b bg-diff-added-bg px-4 py-2 text-sm text-diff-added-foreground">
           <CheckCircle className="size-4" />
           Successfully rolled back to previous version
         </div>
@@ -198,7 +198,7 @@ export function VersionHistory({
                         {version.wasPublished && (
                           <Badge
                             variant="outline"
-                            className="border-emerald-500/50 text-emerald-600"
+                            className="border-success/50 text-success"
                           >
                             Published
                           </Badge>

package/admin/src/components/VersionRollbackModal.tsx

@@ -49,14 +49,14 @@ export function VersionRollbackModal({
           .
         </p>
 
-        <div className="rounded-lg border border-amber-200 bg-amber-50 p-3">
+        <div className="diff-modified rounded-lg border p-3">
           <div className="flex gap-2">
-            <AlertTriangle className="mt-0.5 size-4 shrink-0 text-amber-600" />
+            <AlertTriangle className="mt-0.5 size-4 shrink-0 text-diff-modified" />
             <div className="space-y-2">
-              <p className="text-sm font-medium text-amber-800">
+              <p className="text-sm font-medium text-diff-modified">
                 This action will:
               </p>
-              <ul className="space-y-1 text-sm text-amber-700">
+              <ul className="space-y-1 text-sm text-diff-modified-foreground">
                 <li>
                   • Create a new version with the content from version{' '}
                   {targetVersion}
@@ -69,7 +69,7 @@ export function VersionRollbackModal({
         </div>
 
         {error && (
-          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">
+          <div className="diff-removed rounded-lg border px-3 py-2 text-sm">
             <span className="font-medium">Error:</span> {error}
           </div>
         )}

package/admin/src/components/cmsds/CmsButton.tsx

@@ -31,9 +31,9 @@ const variantMap = {
 
 const customVariantClasses = {
   success:
-    'bg-emerald-600 text-white hover:bg-emerald-700 focus-visible:ring-emerald-500',
+    'bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success',
   warning:
-    'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500',
+    'bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning',
 } as Record<string, string>
 
 const LoadingSpinner = () => (

package/admin/src/components/cmsds/CmsDialog.tsx

@@ -52,7 +52,10 @@ export function CmsDialog({
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
-        <div className="min-h-0 flex-1 py-4 scrollbar-none">
+        <div
+          className="min-h-0 flex-1 overflow-y-auto py-4 [&::-webkit-scrollbar]:hidden"
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
           {children}
         </div>
         {footer && <DialogFooter className="shrink-0 border-t pt-4">{footer}</DialogFooter>}

package/admin/src/components/cmsds/CmsStatusBadge.tsx

@@ -92,12 +92,12 @@ const statusConfig: Record<
 
 const colorToClassName: Record<WorkflowStateColor, string> = {
   gray: "bg-muted text-muted-foreground",
-  yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
-  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
-  green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-  red: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+  yellow: "bg-diff-modified-bg text-diff-modified-foreground",
+  blue: "bg-info-bg text-info-foreground",
+  green: "bg-diff-added-bg text-diff-added-foreground",
+  red: "bg-diff-removed-bg text-diff-removed-foreground",
   purple: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",
-  orange: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400",
+  orange: "bg-diff-modified-bg text-diff-modified-foreground",
 };
 
 function getDefaultIcon() {

package/admin/src/components/fields/JsonField.tsx

@@ -160,7 +160,7 @@ export function JsonField({
             </span>
           )}
           {!syntaxError && textValue.trim() !== '' && (
-            <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+            <span className="flex items-center gap-1 text-success">
               <Check className="size-3" />
               Valid JSON
             </span>