convex-cms 0.0.6 → 0.0.7

package/README.md

@@ -1,86 +1,11 @@
 # Convex CMS
 
-> **Alpha Status (v0.0.5)** — Actively developed. APIs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
+[![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)
 
-A headless CMS built as a [Convex Component](https://docs.convex.dev/components) — content management that runs inside your Convex app.
+> **Alpha (v0.0.7)** Actively developed. APIs may change. [Report issues](https://github.com/obkaro/convex-cms/issues).
 
-## Why Convex CMS?
-
-If you're building on Convex and need content management, 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`
-
-## Choose Your Path
-
-### Need an Admin Interface?
-
-Use **`defineAdminAPI`** — one line creates all the backend functions for a working admin UI.
-
-```
-Your App                         Admin UI
-    │                               │
-    └── convex/admin.ts ────────────┘
-        defineAdminAPI()
-            │
-            ├── listContentTypes
-            ├── getEntry
-            ├── publishEntry
-            └── ... (60+ functions across 11 domains)
-                    │
-                    ▼
-            CMS Component
-```
-
-→ **[Admin UI Setup Guide](./docs/guides/admin-ui-setup.md)**
-
-### Building Custom Content Logic?
-
-Use **`createCmsClient`** — full programmatic control with typed methods in your Convex functions.
-
-```
-Your Convex Functions
-    │
-    └── cms.contentEntries.list(ctx, { status: "published" })
-        cms.contentTypes.create(ctx, { name: "blog", ... })
-        cms.mediaAssets.upload(ctx, { ... })
-            │
-            ▼
-        CMS Component
-```
-
-→ **[Getting Started Guide](./docs/guides/getting-started.md)**
-
-### Want Full Type Safety?
-
-Use **code-first schemas** — define content types with Convex validators, get TypeScript inference.
-
-```typescript
-const blogPost = defineContentType({
-  name: "blog_post",
-  validator: v.object({
-    title: v.string(),
-    content: v.string(),
-  }),
-});
-
-// TypeScript knows entry.data.title is string
-const entry = await cms.typedContentEntries.get<"blog_post">(ctx, id);
-```
-
-→ **[Code-First Schema Reference](./docs/api/code-first-schema.md)**
-
-### Need Both?
-
-**Most apps use both.** This is the typical setup:
-
-- `defineAdminAPI` powers the admin interface for content editors
-- `createCmsClient` gives you typed methods for custom queries on your frontend
-
-They work together through the same CMS component.
+A headless CMS built as a [Convex Component](https://docs.convex.dev/components). Content management that runs inside your Convex app.
 
 ## Quick Start
 
@@ -95,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)
@@ -110,35 +35,77 @@ export default app;
 **For Custom Functions:** Create a CMS client and use it in your functions
 → [Full Getting Started Guide](./docs/guides/getting-started.md)
 
-## What's Included
+## Why Convex CMS?
+
+If you're building on Convex and need content management without the overhead of all the CMS plumbing, this is the most integrated option.
+
+### 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.** Pre-built tools useful for AI agent integration with `@convex-dev/agent`
+
+## Features
+
+| Feature | What it does |
+|---------|--------------|
+| **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 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 |
+
+## In Practice
+
+**Full control over the editorial experience?**  
+Code-first config + CMS Client. You define the schema in TypeScript and build exactly the UI you want.
+
+**Ship fast with a ready-made admin?**  
+Code-first config + Admin API + Embedded Admin UI. Type-safe schemas with a working admin interface out of the box.
+
+**Content team needs to modify schemas without deploys?**  
+UI-defined config + Admin API + Embedded Admin UI. Non-developers can add fields and content types.
+
+**Automated content pipelines?**  
+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
+
+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
-- **Publishing workflows** — draft → scheduled → published with version history
-- **Content versioning** — Snapshots, comparison, and rollback
-- **Scheduled publishing** — Convex scheduler integration for future publish dates
+- **13 field types.** text, richText, number, boolean, date, datetime, select, multiSelect, reference, media, json, tags, category
+- **Publishing workflows.** Draft → scheduled → published with version history
+- **Content versioning.** Snapshots, comparison, and rollback
+- **Scheduled publishing.** Convex scheduler integration for future publish dates
 
 ### Media Management
-- **File uploads** — Direct to Convex storage with folder organization
-- **Image variants** — Automatic resizing and format conversion
-- **Metadata & tagging** — Alt text, descriptions, taxonomy support
+- **File uploads.** Direct to Convex storage with folder organization
+- **Image variants.** Automatic resizing and format conversion
+- **Metadata & tagging.** Alt text, descriptions, taxonomy support
 
 ### Organization
-- **Taxonomies** — Hierarchical categories and flat tags
-- **Content locking** — Prevent concurrent edit conflicts
-- **Soft delete & trash** — Configurable retention with restore
+- **Taxonomies.** Hierarchical categories and flat tags
+- **Content locking.** Prevent concurrent edit conflicts
+- **Soft delete & trash.** Configurable retention with restore
 
 ### Integration
-- **RBAC** — 4 built-in roles + custom roles with fine-grained permissions
-- **Multi-locale** — Content localization with fallback chains
-- **Webhooks** — Event-driven integration with external systems
-- **Event system** — All mutations emit events for async processing
-- **Agent tools** — 23 pre-built tools with Zod schemas for AI integration
-- **Query builder** — Fluent API for complex content queries
+- **RBAC.** 4 built-in roles + custom roles with fine-grained permissions
+- **Multi-locale.** Content localization with fallback chains
+- **Webhooks.** Event-driven integration with external systems
+- **Event system.** All mutations emit events for async processing
+- **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
+- **Pre-built React interface.** CLI mode for development, embeddable for production
+- **Visual content editing.** Rich text, media picker, reference selector
 
 ## Admin UI Modes
 

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

@@ -95,7 +95,7 @@ export interface ContentType {
 
 export interface ContentEntry {
   _id: string
-  contentTypeId: string
+  contentTypeName: string
   slug: string
   status: 'draft' | 'published' | 'scheduled' | 'archived'
   data: Record<string, unknown>
@@ -645,7 +645,7 @@ export function ContentEntryEditor({
           })) as ContentEntry
         } else {
           savedEntry = (await createEntry({
-            contentTypeId: contentType._id,
+            contentTypeName: contentType.name,
             data: dataForBackend,
           })) as ContentEntry
         }
@@ -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

@@ -32,6 +32,7 @@ import {
 	List,
 	Tag,
 	FolderOpen,
+	Code2,
 } from "lucide-react";
 import { cn } from "~/lib/cn";
 import { BreakingChangesWarningDialog } from "./BreakingChangesWarningDialog";
@@ -139,7 +140,7 @@ interface ContentTypeFormModalProps {
 	onClose: () => void;
 	onCreated?: (contentType: unknown) => void;
 	onUpdated?: (contentType: unknown) => void;
-	contentType?: ContentType | null;
+	contentType?: (ContentType & { source?: "code" | "database" }) | null;
 }
 
 function generateMachineName(displayName: string): string {
@@ -164,6 +165,8 @@ export function ContentTypeFormModal({
 	contentType,
 }: ContentTypeFormModalProps) {
 	const isEditing = !!contentType;
+	const isCodeDefined = contentType?.source === "code";
+	const isReadOnly = isCodeDefined;
 
 	const [displayName, setDisplayName] = useState("");
 	const [machineName, setMachineName] = useState("");
@@ -512,34 +515,62 @@ export function ContentTypeFormModal({
 			<CmsDialog
 				open={isOpen}
 				onOpenChange={(open) => !open && handleClose()}
-				title={isEditing ? "Edit Content Type" : "Create Content Type"}
+				title={
+					isCodeDefined
+						? "View Content Type"
+						: isEditing
+							? "Edit Content Type"
+							: "Create Content Type"
+				}
 				size="2xl"
 				footer={
-					<>
-						<CmsButton
-							variant="outline"
-							onClick={handleClose}
-							disabled={isSubmitting}
-						>
-							Cancel
-						</CmsButton>
-						<CmsButton
-							variant="primary"
-							onClick={handleSubmit}
-							disabled={validationErrors.length > 0}
-							loading={isSubmitting}
-							data-testid={
-								isEditing
-									? "update-content-type-submit"
-									: "create-content-type-submit"
-							}
-						>
-							{isEditing ? "Save Changes" : "Create Content Type"}
+					isReadOnly ? (
+						<CmsButton variant="outline" onClick={handleClose}>
+							Close
 						</CmsButton>
-					</>
+					) : (
+						<>
+							<CmsButton
+								variant="outline"
+								onClick={handleClose}
+								disabled={isSubmitting}
+							>
+								Cancel
+							</CmsButton>
+							<CmsButton
+								variant="primary"
+								onClick={handleSubmit}
+								disabled={validationErrors.length > 0}
+								loading={isSubmitting}
+								data-testid={
+									isEditing
+										? "update-content-type-submit"
+										: "create-content-type-submit"
+								}
+							>
+								{isEditing ? "Save Changes" : "Create Content Type"}
+							</CmsButton>
+						</>
+					)
 				}
 			>
 				<form onSubmit={handleSubmit} className="space-y-6">
+					{isCodeDefined && (
+						<div className="flex items-start gap-3 rounded-lg border border-violet-200 bg-violet-50 p-3">
+							<Code2 className="mt-0.5 size-5 shrink-0 text-violet-600" />
+							<div className="space-y-1">
+								<p className="text-sm font-medium text-violet-900">
+									Managed by Code
+								</p>
+								<p className="text-sm text-violet-700">
+									This content type is defined in your codebase and cannot be
+									edited through the admin interface. To make changes, update
+									the definition in your code.
+								</p>
+							</div>
+						</div>
+					)}
+
 					{/* Basic Info Section */}
 					<div className="space-y-4">
 						<h4 className="text-sm font-semibold text-foreground">
@@ -555,8 +586,8 @@ export function ContentTypeFormModal({
 								value={displayName}
 								onChange={(e) => handleDisplayNameChange(e.target.value)}
 								placeholder="e.g., Blog Post"
-								disabled={isSubmitting}
-								autoFocus
+								disabled={isSubmitting || isReadOnly}
+								autoFocus={!isReadOnly}
 								data-testid="display-name-input"
 							/>
 						</div>
@@ -570,7 +601,7 @@ export function ContentTypeFormModal({
 								value={machineName}
 								onChange={(e) => handleMachineNameChange(e.target.value)}
 								placeholder="e.g., blog_post"
-								disabled={isSubmitting || isEditing}
+								disabled={isSubmitting || isEditing || isReadOnly}
 								className={cn(
 									!isValidMachineName(machineName) &&
 										machineName &&
@@ -592,7 +623,7 @@ export function ContentTypeFormModal({
 								value={description}
 								onChange={(e) => setDescription(e.target.value)}
 								placeholder="Optional description of this content type"
-								disabled={isSubmitting}
+								disabled={isSubmitting || isReadOnly}
 								rows={2}
 							/>
 						</div>
@@ -602,7 +633,7 @@ export function ContentTypeFormModal({
 								id="singleton"
 								checked={singleton}
 								onCheckedChange={(checked) => setSingleton(checked as boolean)}
-								disabled={isSubmitting}
+								disabled={isSubmitting || isReadOnly}
 							/>
 							<Label htmlFor="singleton" className="cursor-pointer">
 								Singleton (only one entry allowed)
@@ -614,17 +645,19 @@ export function ContentTypeFormModal({
 					<div className="space-y-4">
 						<div className="flex items-center justify-between">
 							<h4 className="text-sm font-semibold text-foreground">Fields</h4>
-							<CmsButton
-								type="button"
-								variant="secondary"
-								size="sm"
-								onClick={addField}
-								disabled={isSubmitting}
-								data-testid="add-field-button"
-							>
-								<Plus className="size-3.5" />
-								Add Field
-							</CmsButton>
+							{!isReadOnly && (
+								<CmsButton
+									type="button"
+									variant="secondary"
+									size="sm"
+									onClick={addField}
+									disabled={isSubmitting}
+									data-testid="add-field-button"
+								>
+									<Plus className="size-3.5" />
+									Add Field
+								</CmsButton>
+							)}
 						</div>
 
 						<div className="space-y-2">
@@ -632,41 +665,46 @@ export function ContentTypeFormModal({
 								<div
 									key={index}
 									className={cn(
-										"flex cursor-pointer items-center gap-2 rounded-lg border p-2 transition-colors hover:bg-muted/50",
+										"flex items-center gap-2 rounded-lg border p-2 transition-colors",
+										!isReadOnly && "cursor-pointer hover:bg-muted/50",
 										activeFieldIndex === index && "border-primary bg-primary/5",
 									)}
 									onClick={() => {
-										setActiveFieldIndex(index);
-										setShowFieldEditor(true);
+										if (!isReadOnly) {
+											setActiveFieldIndex(index);
+											setShowFieldEditor(true);
+										}
 									}}
 									data-testid={`field-item-${index}`}
 								>
-									<div className="flex flex-col gap-0.5">
-										{index > 0 && (
-											<button
-												type="button"
-												onClick={(e) => {
-													e.stopPropagation();
-													moveField(index, index - 1);
-												}}
-												className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
-											>
-												<ChevronUp className="size-3" />
-											</button>
-										)}
-										{index < fields.length - 1 && (
-											<button
-												type="button"
-												onClick={(e) => {
-													e.stopPropagation();
-													moveField(index, index + 1);
-												}}
-												className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
-											>
-												<ChevronDown className="size-3" />
-											</button>
-										)}
-									</div>
+									{!isReadOnly && (
+										<div className="flex flex-col gap-0.5">
+											{index > 0 && (
+												<button
+													type="button"
+													onClick={(e) => {
+														e.stopPropagation();
+														moveField(index, index - 1);
+													}}
+													className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+												>
+													<ChevronUp className="size-3" />
+												</button>
+											)}
+											{index < fields.length - 1 && (
+												<button
+													type="button"
+													onClick={(e) => {
+														e.stopPropagation();
+														moveField(index, index + 1);
+													}}
+													className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+												>
+													<ChevronDown className="size-3" />
+												</button>
+											)}
+										</div>
+									)}
 
 									<div className="flex size-8 items-center justify-center rounded bg-muted text-muted-foreground">
 										{FIELD_TYPE_INFO[field.type].icon}
@@ -682,23 +720,25 @@ export function ContentTypeFormModal({
 										</p>
 									</div>
 
-									<button
-										type="button"
-										onClick={(e) => {
-											e.stopPropagation();
-											removeField(index);
-										}}
-										disabled={isSubmitting || fields.length === 1}
-										className="rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
-									>
-										<X className="size-4" />
-									</button>
+									{!isReadOnly && (
+										<button
+											type="button"
+											onClick={(e) => {
+												e.stopPropagation();
+												removeField(index);
+											}}
+											disabled={isSubmitting || fields.length === 1}
+											className="rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
+										>
+											<X className="size-4" />
+										</button>
+									)}
 								</div>
 							))}
 						</div>
 
-						{/* Field Editor Panel */}
-						{showFieldEditor && activeField && activeFieldIndex !== null && (
+						{/* Field Editor Panel - hidden in read-only mode */}
+						{!isReadOnly && showFieldEditor && activeField && activeFieldIndex !== null && (
 							<div
 								className="rounded-lg border bg-muted/30 p-4"
 								data-testid="field-editor"
@@ -900,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"
 						>