convex-cms 0.0.6 → 0.0.7

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>

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

@@ -113,7 +113,7 @@ export function ReferenceField({
     api.admin.listEntries,
     showPicker
       ? {
-          contentTypeId: contentTypeFilter || undefined,
+          contentTypeName: contentTypeFilter || undefined,
           search: searchQuery || undefined,
           paginationOpts: { numItems: 50, cursor: null },
         }
@@ -124,15 +124,15 @@ export function ReferenceField({
     if (!entriesResult?.page) return []
     if (allowedContentTypes.length === 0) return entriesResult.page
 
-    const allowedIds = filteredContentTypes.map((ct) => ct._id)
+    const allowedNames = filteredContentTypes.map((ct) => ct.name)
     return entriesResult.page.filter((entry) =>
-      allowedIds.includes(entry.contentTypeId)
+      allowedNames.includes(entry.contentTypeName)
     )
   }, [entriesResult?.page, allowedContentTypes, filteredContentTypes])
 
-  const getContentTypeName = useCallback(
-    (contentTypeId: string) => {
-      const ct = contentTypes?.page?.find((c) => c._id === contentTypeId)
+  const getContentTypeDisplayName = useCallback(
+    (contentTypeName: string) => {
+      const ct = contentTypes?.page?.find((c) => c.name === contentTypeName)
       return ct?.displayName || ct?.name || 'Unknown'
     },
     [contentTypes?.page]
@@ -177,7 +177,7 @@ export function ReferenceField({
       data?: Record<string, unknown>
       slug?: string
       status: string
-      contentTypeId: string
+      contentTypeName: string
     },
     showRemove = true
   ) => (
@@ -194,7 +194,7 @@ export function ReferenceField({
         </p>
         <div className="flex items-center gap-2">
           <span className="text-xs text-muted-foreground">
-            {getContentTypeName(entry.contentTypeId)}
+            {getContentTypeDisplayName(entry.contentTypeName)}
           </span>
           <CmsStatusBadge status={entry.status as ContentStatus} />
         </div>
@@ -329,7 +329,7 @@ export function ReferenceField({
                           </p>
                           <div className="flex items-center gap-2">
                             <span className="text-xs text-muted-foreground">
-                              {getContentTypeName(entry.contentTypeId)}
+                              {getContentTypeDisplayName(entry.contentTypeName)}
                             </span>
                             <Badge
                               variant="secondary"

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

@@ -315,7 +315,7 @@ export function TagField({
         <div className="border-t px-3 py-1.5 text-xs text-muted-foreground">
           {value?.length ?? 0} tag{(value?.length ?? 0) !== 1 ? 's' : ''}
           {minTags && (value?.length ?? 0) < minTags && (
-            <span className="text-amber-600"> (minimum {minTags})</span>
+            <span className="text-warning"> (minimum {minTags})</span>
           )}
           {maxTags && <span> / {maxTags} max</span>}
         </div>

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -1,10 +1,14 @@
 import { useQuery } from "convex/react";
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { api } from "../../convex/_generated/api";
+import { api as localApi } from "../../convex/_generated/api";
 import type { AdminConfig } from "~/lib/admin-config";
 import { AdminConfigProvider } from "./AdminConfigContext";
 
-type Settings = NonNullable<typeof api.admin.getSettings._returnType>;
+type Settings = NonNullable<typeof localApi.admin.getSettings._returnType>;
+
+type SettingsApi = {
+  getSettings: typeof localApi.admin.getSettings;
+};
 
 interface SettingsConfigContextValue {
   baseConfig: AdminConfig;
@@ -16,11 +20,14 @@ const SettingsConfigContext = createContext<SettingsConfigContextValue | null>(n
 export function SettingsConfigProvider({
   baseConfig,
   children,
+  api,
 }: {
   baseConfig: AdminConfig;
   children: ReactNode;
+  api?: SettingsApi;
 }) {
-  const settings = useQuery(api.admin.getSettings);
+  const resolvedApi = api ?? localApi.admin;
+  const settings = useQuery(resolvedApi.getSettings);
 
   const mergedConfig = useMemo((): AdminConfig => {
     if (!settings) return baseConfig;

package/admin/src/embed/index.tsx

@@ -30,7 +30,7 @@
 
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { useMemo, type ReactNode } from "react";
-import { AdminConfigProvider } from "../contexts/AdminConfigContext";
+import { SettingsConfigProvider } from "../contexts/SettingsConfigContext";
 import {
   AuthProvider,
   type GetUserHook,
@@ -51,11 +51,14 @@ import { EmbedLayout } from "./components/EmbedLayout";
 import {
   EmbedDashboard,
   EmbedContent,
+  EmbedContentTypeEntries,
   EmbedContentTypes,
   EmbedMedia,
   EmbedSettings,
   EmbedTrash,
   EmbedTaxonomies,
+  EmbedNewEntry,
+  EmbedEntry,
 } from "./pages";
 
 function adaptAuthConfig(auth: CmsAdminAuthConfig): {
@@ -85,11 +88,11 @@ function ConvexProviderWrapper({
   if (!convex) {
     return (
       <div className="flex min-h-full items-center justify-center bg-background p-6">
-        <div className="max-w-lg space-y-4 rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
-          <h2 className="text-xl font-semibold text-amber-900">
+        <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">
             Convex Configuration Required
           </h2>
-          <p className="text-sm text-amber-800">
+          <p className="text-sm text-diff-modified-foreground">
             Please provide a valid convexUrl prop to the CmsAdmin component.
           </p>
         </div>
@@ -119,8 +122,21 @@ function EmbedRouter() {
         return <EmbedTaxonomies />;
       case "trash":
         return <EmbedTrash />;
-      case "entries":
+      case "entries": {
+        // Handle new entry action
+        if (currentRoute.params.action === "new") {
+          return <EmbedNewEntry />;
+        }
+        // Handle existing entry edit
+        if (currentRoute.params.entryId) {
+          return <EmbedEntry />;
+        }
+        // Handle content type specific entries
+        if (currentRoute.params.contentTypeId) {
+          return <EmbedContentTypeEntries contentTypeId={currentRoute.params.contentTypeId} />;
+        }
         return <EmbedContent />;
+      }
       default:
         return <EmbedDashboard />;
     }
@@ -144,13 +160,17 @@ export function CmsAdmin({
 }) {
   const adminConfig = useMemo(() => resolveAdminConfig(config), [config]);
   const authConfig = useMemo(() => adaptAuthConfig(auth), [auth]);
+  const settingsApi = useMemo(
+    () => (api.getSettings ? { getSettings: api.getSettings } : undefined),
+    [api]
+  );
 
   return (
     <div className={className}>
       <ApiProvider api={api}>
         <ThemeProvider>
-          <AdminConfigProvider config={adminConfig}>
-            <ConvexProviderWrapper convexUrl={convexUrl}>
+          <ConvexProviderWrapper convexUrl={convexUrl}>
+            <SettingsConfigProvider baseConfig={adminConfig} api={settingsApi}>
               <AuthProvider
                 getUser={authConfig.getUser}
                 getUserRole={authConfig.getUserRole}
@@ -168,8 +188,8 @@ export function CmsAdmin({
                   </RouteGuard>
                 </EmbedNavigationProvider>
               </AuthProvider>
-            </ConvexProviderWrapper>
-          </AdminConfigProvider>
+            </SettingsConfigProvider>
+          </ConvexProviderWrapper>
         </ThemeProvider>
       </ApiProvider>
     </div>

package/admin/src/embed/pages/ContentTypeEntries.tsx

@@ -0,0 +1,25 @@
+/**
+ * Embed Content Type Entries Page
+ *
+ * Thin wrapper around the shared ContentTypeEntriesPage component.
+ * Provides embed navigation and API access.
+ */
+
+import { useApi } from "../contexts/ApiContext";
+import { useEmbedNavigation } from "../navigation";
+import { useEmbedAdapter } from "../../lib/embed-adapter";
+import { ContentTypeEntriesPage } from "../../pages";
+
+export function EmbedContentTypeEntries({ contentTypeId }: { contentTypeId: string }) {
+	const api = useApi();
+	const embedNav = useEmbedNavigation();
+	const navigation = useEmbedAdapter(embedNav);
+
+	return (
+		<ContentTypeEntriesPage
+			api={api}
+			navigation={navigation}
+			contentTypeId={contentTypeId}
+		/>
+	);
+}