@specverse/engines 4.2.2 → 4.3.0

package/libs/instance-factories/applications/templates/react-starter/operation-view-generator.ts

@@ -0,0 +1,209 @@
+/**
+ * Per-operation view generator for ReactAppStarter
+ *
+ * Auto-generates `src/views/{Op}View.tsx` files for every non-standard
+ * controller command and every service operation. Each generated view
+ * is a thin shell that imports `OperationExecutor` from `../lib/` and
+ * invokes it with the op's metadata.
+ *
+ * Logic ported from app-demo's runtime-engine.ts:380-427 — same skip
+ * list for "standard" CURVED-protocol operations so we don't double
+ * up on things that already have declared list/detail/form/dashboard
+ * views.
+ */
+
+/**
+ * CURVED + lifecycle + framework ops that should NOT get an operation
+ * view. These either have dedicated CRUD views, are runtime helpers,
+ * or are relationship-integrity checks. Copied verbatim from
+ * app-demo/src/runtime/runtime-engine.ts:382-388.
+ */
+const STANDARD_OPS = new Set([
+  'create', 'retrieve', 'retrieve_many', 'update', 'delete',
+  'validate', 'evolve', 'list', 'query', 'get',
+  'attachProfile', 'detachProfile', 'hasProfile',
+  'handleChildAdded', 'handleChildRemoved',
+  'validateRelationshipIntegrity', 'repairRelationshipIntegrity',
+]);
+
+export interface OperationViewDescriptor {
+  /** File name without extension, e.g. `PublishView`. */
+  viewName: string;
+  /** Human-readable label for the page. */
+  label: string;
+  /** Service or controller class name (e.g. `AuthService`, `PostController`). */
+  serviceName: string;
+  /** Operation method name (e.g. `login`, `publish`). */
+  operationName: string;
+  /** Parameters declaration. Accepted in either `{ name: def }` or array form. */
+  parameters?: Record<string, any> | Array<any>;
+  /** Optional: parameter names that must be supplied before Execute. */
+  requires?: string[];
+  /** Optional: display return-type hint next to the title. */
+  returns?: string;
+  /** Source: determines which endpoint shape the executor uses. */
+  source: 'service' | 'controller';
+}
+
+/**
+ * Normalize a parameters block into `{ name: typeStr }`. Handles
+ * every shape the parser / inference pipeline can emit:
+ *   - `query: String`              → `{ query: "String" }`
+ *   - `query: { type: "String" }`  → `{ query: "String" }`
+ *   - `id: "UUID required"`        → `{ id: "UUID" }` (strip modifiers)
+ *   - Broken shapes (e.g. inference bug producing `["object Object"]`
+ *     for services) fall back to "String" so the executor renders
+ *     a plain text input instead of blowing up.
+ */
+function normalizeParameters(raw: any): Record<string, string> | undefined {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return undefined;
+  const out: Record<string, string> = {};
+  for (const [name, def] of Object.entries(raw)) {
+    let type: string;
+    if (typeof def === 'string') {
+      type = def;
+    } else if (def && typeof def === 'object' && 'type' in def && typeof (def as any).type === 'string') {
+      type = (def as any).type;
+    } else {
+      // Malformed entry (e.g. inference bug on services) — render as text input.
+      type = 'String';
+    }
+    // Strip space-delim modifiers: "UUID required" → "UUID".
+    out[name] = (type.split(/\s+/)[0] || 'String');
+  }
+  return Object.keys(out).length > 0 ? out : undefined;
+}
+
+/**
+ * Enumerate all operation views to generate for a spec. Returns an
+ * array of descriptors — one per non-standard command + service op.
+ * Consumers emit a `.tsx` per descriptor via `emitOperationView`.
+ */
+export function collectOperationViews(spec: {
+  controllers?: Record<string, any>;
+  services?: Record<string, any> | any[];
+}): OperationViewDescriptor[] {
+  const out: OperationViewDescriptor[] = [];
+  const seen = new Set<string>();
+
+  // Non-standard controller commands. A controller's operations object
+  // may use `commands` or `operations` as its key — accept both so we
+  // don't mis-classify a spec that uses either form.
+  const controllers = spec.controllers ?? {};
+  for (const [ctlName, ctl] of Object.entries(controllers)) {
+    const ops = (ctl?.operations ?? ctl?.commands ?? {}) as Record<string, any>;
+    for (const [opName, op] of Object.entries(ops)) {
+      if (STANDARD_OPS.has(opName)) continue;
+      const viewName = capitalize(opName) + 'View';
+      if (seen.has(viewName)) continue;
+      seen.add(viewName);
+      out.push({
+        viewName,
+        label: humanize(opName),
+        serviceName: ctlName,
+        operationName: opName,
+        parameters: normalizeParameters(op?.parameters ?? op?.params),
+        requires: op?.requires,
+        returns: op?.returns,
+        source: 'controller',
+      });
+    }
+  }
+
+  // Services. Operations may be an object keyed by name OR an array
+  // of { name, parameters, ... } objects.
+  const services = spec.services ?? {};
+  for (const [svcName, svc] of Object.entries(services)) {
+    const rawOps = svc?.operations;
+    const opEntries: Array<[string, any]> = Array.isArray(rawOps)
+      ? rawOps.map((o: any) => [o.name, o])
+      : Object.entries((rawOps ?? {}) as Record<string, any>);
+    for (const [opName, op] of opEntries) {
+      if (!opName) continue;
+      if (STANDARD_OPS.has(opName)) continue;
+      const viewName = capitalize(opName) + 'View';
+      if (seen.has(viewName)) continue;
+      seen.add(viewName);
+      out.push({
+        viewName,
+        label: humanize(opName),
+        serviceName: svcName,
+        operationName: opName,
+        parameters: normalizeParameters(op?.parameters ?? op?.params),
+        requires: op?.requires,
+        returns: op?.returns,
+        source: 'service',
+      });
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Emit a single `src/views/{Op}View.tsx` file. A thin shell that
+ * imports `OperationExecutor` from `../lib/` and passes the op's
+ * metadata as props. Matches the structure of app-demo's
+ * OperationView but inlined so users have one file per op to edit.
+ */
+export function emitOperationView(desc: OperationViewDescriptor): string {
+  const paramsJson = desc.parameters
+    ? JSON.stringify(desc.parameters, null, 2).replace(/\n/g, '\n        ')
+    : 'undefined';
+  const requiresJson = desc.requires
+    ? JSON.stringify(desc.requires)
+    : 'undefined';
+
+  const returnsPill = desc.returns
+    ? `\n        <span className="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded font-mono">\n          → ${escapeJsx(desc.returns)}\n        </span>`
+    : '';
+
+  return `/**
+ * ${desc.viewName} — generated by @specverse/realize (ReactAppStarter)
+ *
+ * Auto-generated operation view for ${desc.source} ${desc.serviceName}.${desc.operationName}.
+ * Safe to edit; the generator will not overwrite a hand-edited file
+ * (content-hashing in .specverse-gen/hashes.json).
+ */
+import { OperationExecutor } from '../lib/OperationExecutor';
+
+export function ${desc.viewName}() {
+  return (
+    <div className="p-6 space-y-4">
+      <div className="flex items-center gap-2">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          ${escapeJsx(desc.label)}
+        </h2>${returnsPill}
+      </div>
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        Execute ${escapeJsx(desc.serviceName)}.${escapeJsx(desc.operationName)}
+      </p>
+      <div className="max-w-lg">
+        <OperationExecutor
+          serviceName="${desc.serviceName}"
+          operationName="${desc.operationName}"
+          parameters={${paramsJson}}
+          requires={${requiresJson}}
+          source="${desc.source}"
+        />
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function capitalize(s: string): string {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}
+
+function humanize(s: string): string {
+  return s
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, c => c.toUpperCase())
+    .trim();
+}
+
+function escapeJsx(s: string): string {
+  return s.replace(/[<>&]/g, ch => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' }[ch]!));
+}

package/libs/instance-factories/applications/templates/react-starter/package-json-generator.ts

@@ -33,6 +33,7 @@ export async function generate(context: PackageJsonGeneratorContext): Promise<st
       react: '^18.2.0',
       'react-dom': '^18.2.0',
       '@tanstack/react-query': '^5.0.0',
+      'lucide-react': '^0.400.0',
     },
     devDependencies: {
       '@types/react': '^18.2.0',

package/libs/instance-factories/applications/templates/react-starter/skeletons/detail.tsx.template

@@ -4,93 +4,86 @@
  * Safe to edit. Edits are preserved across regeneration via content
  * hashing (see .specverse-gen/hashes.json). To accept an upstream
  * regeneration of this file, delete it first, then run `spv realize`.
+ *
+ * Inspection-only view: entity picker + rendered fields + related lists.
+ * All mutations (create, update, delete, evolve) live in the form view.
+ * To edit/delete, navigate to the form via the sidebar.
  */
-import { use{{PLURAL_MODEL}}Query, useDelete{{MODEL_NAME}}Mutation } from '../hooks/useApi';
+{{RELATED_TAB_IMPORT}}
+import { use{{PLURAL_MODEL}}Query } from '../hooks/useApi';
 {{RELATED_IMPORTS}}
 import type { {{MODEL_NAME}} } from '../types/api';
 
 interface {{MODEL_NAME}}DetailViewProps {
-  entityId: string | number;
-  onEdit?: (item: {{MODEL_NAME}}) => void;
-  onBack?: () => void;
-  /** Called after the delete mutation succeeds. */
-  onDeleted?: () => void;
+  /** Initial selection. When absent, the first entity in the list is shown. */
+  entityId?: string | number;
+  /** Called when the user picks a different entity from the picker. */
+  onEntityChange?: (id: string | number) => void;
+  /** Called when the user clicks a resolved belongsTo cell or a related-list
+   *  row. Wired by App.tsx to navigate to the target model's detail view. */
+  onNavigate?: (model: string, id: string | number) => void;
 }
 
 export function {{MODEL_NAME}}DetailView({
   entityId,
-  onEdit,
-  onBack,
-  onDeleted,
+  onEntityChange,
+  onNavigate,
 }: {{MODEL_NAME}}DetailViewProps) {
+  // onNavigate is referenced from walker-emitted FK cells + related-row
+  // clicks below; reference it here so TS doesn't flag it unused for
+  // models without belongsTo or hasMany.
+  void onNavigate;
   const { data: items = [], isLoading, error } = use{{PLURAL_MODEL}}Query();
-  const deleteItem = useDelete{{MODEL_NAME}}Mutation();
 {{RELATED_HOOKS}}
+{{RELATED_TAB_STATE}}
 
+  // Resolve which entity to display: explicit prop wins, else first item.
+  const activeId = entityId ?? (items[0] as any)?.id;
   const item = items.find(
-    (x: {{MODEL_NAME}}) => (x as any).id === entityId
+    (x: {{MODEL_NAME}}) => (x as any).id === activeId
   );
 
   if (isLoading) return <div className="p-4 text-gray-500">Loading…</div>;
   if (error) return <div className="p-4 text-red-600">Error loading {{PLURAL_LOWER}}: {String(error)}</div>;
-  if (!item) return <div className="p-4 text-gray-400">No {{SINGULAR_LOWER}} matching id {String(entityId)}.</div>;
-
-  const handleDelete = async () => {
-    if (!confirm('Delete this {{SINGULAR_LOWER}}?')) return;
-    try {
-      await deleteItem.mutateAsync((item as any).id);
-      onDeleted?.();
-    } catch {
-      // deleteItem.error is surfaced below
-    }
-  };
 
   return (
     <div className="p-6 space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          {onBack && (
-            <button
-              type="button"
-              onClick={onBack}
-              className="text-sm text-gray-500 hover:text-gray-700"
-            >
-              ← Back
-            </button>
-          )}
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-            {{MODEL_NAME}} detail
-          </h2>
-        </div>
-        <div className="flex gap-2">
-          {onEdit && (
-            <button
-              type="button"
-              onClick={() => onEdit(item)}
-              className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
-            >
-              Edit
-            </button>
+      <div className="flex items-center gap-3">
+        <label
+          htmlFor="{{SINGULAR_LOWER}}-picker"
+          className="text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          Select {{MODEL_NAME}}:
+        </label>
+        <select
+          id="{{SINGULAR_LOWER}}-picker"
+          value={activeId == null ? '' : String(activeId)}
+          onChange={e => onEntityChange?.(e.target.value)}
+          className="flex-1 max-w-xl rounded border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+        >
+          {items.length === 0 && (
+            <option value="">No {{PLURAL_LOWER}} yet</option>
           )}
-          <button
-            type="button"
-            onClick={handleDelete}
-            disabled={deleteItem.isPending}
-            className="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60"
-          >
-            {deleteItem.isPending ? 'Deleting…' : 'Delete'}
-          </button>
-        </div>
+          {items.map((x: {{MODEL_NAME}}) => (
+            <option key={String((x as any).id)} value={String((x as any).id)}>
+              {getEntityDisplayName(x)}
+            </option>
+          ))}
+        </select>
       </div>
 
-      {/* Pattern-rendered detail body (fields). Edit freely. */}
-      {{BODY}}
-
-      {deleteItem.isError && (
-        <div className="p-2 text-sm text-red-600">
-          Delete failed: {String(deleteItem.error)}
+      {!item && (
+        <div className="rounded-lg border border-gray-200 bg-white p-6 text-sm text-gray-400 dark:border-gray-700 dark:bg-gray-900">
+          No {{SINGULAR_LOWER}} to display.
         </div>
       )}
+
+      {item && (
+        <>
+          {/* Pattern-rendered detail body (fields + related). Edit freely. */}
+          {{BODY}}
+        </>
+      )}
     </div>
   );
 }

package/libs/instance-factories/applications/templates/react-starter/skeletons/form.tsx.template

@@ -6,36 +6,56 @@
  * regeneration of this file, delete it first, then run `spv realize`.
  *
  * Controlled form. One field per non-auto-generated attribute.
- * Mode: 'create' (default) or 'update' — passed as a prop.
+ * Mode: 'create' (default) or 'update'. When the model has one or
+ * more lifecycles AND mode = 'update', an "Evolve" tab appears
+ * alongside "Edit" that drives a state transition via PATCH /:id/evolve.
  */
 import { useEffect, useState } from 'react';
 import {
   use{{PLURAL_MODEL}}Query,
   useCreate{{MODEL_NAME}}Mutation,
   useUpdate{{MODEL_NAME}}Mutation,
+  useDelete{{MODEL_NAME}}Mutation,
+{{LIFECYCLE_IMPORTS}}
 } from '../hooks/useApi';
 {{RELATED_IMPORTS}}
 import type { {{MODEL_NAME}} } from '../types/api';
+import { {{MODEL_NAME}}ListView } from './{{MODEL_NAME}}ListView';
 
 type FormMode = 'create' | 'update';
+type ActiveTab = 'edit' | 'evolve';
 
 interface {{MODEL_NAME}}FormViewProps {
   mode?: FormMode;
   /** Required in update mode. */
   entityId?: string | number;
   onSuccess?: (item: {{MODEL_NAME}}) => void;
-  onCancel?: () => void;
+  /** Called after the delete mutation succeeds. Wired by App.tsx to
+   *  navigate back to the list view. */
+  onDeleted?: () => void;
+  /** Called when the user clicks a row in the embedded
+   *  {{MODEL_NAME}}ListView below the form. Wired by App.tsx to
+   *  re-navigate to this form with `entityId` set, so clicking a
+   *  row loads that entity's data into the form for update. */
+  onSelectEntity?: (item: {{MODEL_NAME}}) => void;
 }
 
 export function {{MODEL_NAME}}FormView({
   mode = 'create',
   entityId,
   onSuccess,
-  onCancel,
+  onDeleted,
+  onSelectEntity,
 }: {{MODEL_NAME}}FormViewProps) {
+  // Referenced from the walker-emitted <{{MODEL_NAME}}ListView
+  // onSelect={onSelectEntity} /> below; void it here so strict TS
+  // doesn't flag it when body positioning elides the reference.
+  void onSelectEntity;
   const { data: items = [] } = use{{PLURAL_MODEL}}Query();
   const createItem = useCreate{{MODEL_NAME}}Mutation();
   const updateItem = useUpdate{{MODEL_NAME}}Mutation();
+  const deleteItem = useDelete{{MODEL_NAME}}Mutation();
+{{LIFECYCLE_HOOK}}
 {{RELATED_HOOKS}}
 
   const existing =
@@ -44,6 +64,8 @@ export function {{MODEL_NAME}}FormView({
       : undefined;
 
   const [formData, setFormData] = useState<Partial<{{MODEL_NAME}}>>(existing ?? {});
+  const [activeTab, setActiveTab] = useState<ActiveTab>('edit');
+{{LIFECYCLE_STATE}}
 
   // When the fetched list lands after initial render (update mode),
   // hydrate the form with the loaded entity's data.
@@ -55,6 +77,21 @@ export function {{MODEL_NAME}}FormView({
     setFormData(prev => ({ ...prev, [field]: value }) as Partial<{{MODEL_NAME}}>);
   };
 
+  const handleClear = () => {
+    setFormData(existing ?? {});
+  };
+
+  const handleDelete = async () => {
+    if (mode !== 'update' || entityId == null) return;
+    if (!confirm('Delete this {{SINGULAR_LOWER}}?')) return;
+    try {
+      await deleteItem.mutateAsync(entityId as any);
+      onDeleted?.();
+    } catch {
+      // deleteItem.error is surfaced below
+    }
+  };
+
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
     try {
@@ -71,46 +108,97 @@ export function {{MODEL_NAME}}FormView({
     }
   };
 
+{{LIFECYCLE_HANDLER}}
+
   const mutation = mode === 'create' ? createItem : updateItem;
   const submitLabel =
     mode === 'create'
       ? mutation.isPending ? 'Creating…' : 'Create {{MODEL_NAME}}'
       : mutation.isPending ? 'Updating…' : 'Update {{MODEL_NAME}}';
 
+  const hasLifecycles = {{HAS_LIFECYCLES}};
+  const showTabs = mode === 'update' && hasLifecycles;
+
   return (
-    <form onSubmit={handleSubmit} className="p-6 space-y-6">
+    <div className="p-6 space-y-6">
       <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
         {mode === 'create' ? 'New {{MODEL_NAME}}' : 'Edit {{MODEL_NAME}}'}
       </h2>
 
-      {/* Pattern-rendered form fields. Edit freely. */}
-      {{BODY}}
-
-      <div className="flex gap-2 border-t border-gray-200 dark:border-gray-700 pt-4">
-        <button
-          type="submit"
-          disabled={mutation.isPending}
-          className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
-        >
-          {submitLabel}
-        </button>
-        {onCancel && (
+      {showTabs && (
+        <div className="flex gap-1 border-b border-gray-200 dark:border-gray-700">
           <button
             type="button"
-            onClick={onCancel}
-            className="rounded border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800"
+            onClick={() => setActiveTab('edit')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeTab === 'edit' ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
           >
-            Cancel
+            Edit
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('evolve')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeTab === 'evolve' ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
+          >
+            Evolve
           </button>
-        )}
-      </div>
-
-      {mutation.isError && (
-        <div className="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
-          {mode === 'create' ? 'Create failed: ' : 'Update failed: '}
-          {String(mutation.error)}
         </div>
       )}
-    </form>
+
+      {(!showTabs || activeTab === 'edit') && (
+        <>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Pattern-rendered form fields. Edit freely. */}
+{{FIELDS_BODY}}
+
+            <div className="flex gap-2">
+              <button
+                type="submit"
+                disabled={mutation.isPending}
+                className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
+              >
+                {submitLabel}
+              </button>
+              {mode === 'update' && (
+                <button
+                  type="button"
+                  onClick={handleDelete}
+                  disabled={deleteItem.isPending}
+                  className="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60"
+                >
+                  {deleteItem.isPending ? 'Deleting…' : 'Delete'}
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={handleClear}
+                disabled={mutation.isPending}
+                className="rounded border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-60 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800"
+              >
+                Clear
+              </button>
+            </div>
+
+            {mutation.isError && (
+              <div className="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+                {mode === 'create' ? 'Create failed: ' : 'Update failed: '}
+                {String(mutation.error)}
+              </div>
+            )}
+
+            {deleteItem.isError && (
+              <div className="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+                Delete failed: {String(deleteItem.error)}
+              </div>
+            )}
+          </form>
+
+          {/* Existing entities list sits outside the <form> so its
+              search input and inner interactions don't submit the form. */}
+{{EXISTING_LIST_BODY}}
+        </>
+      )}
+
+{{LIFECYCLE_PANEL}}
+    </div>
   );
 }

package/libs/instance-factories/applications/templates/react-starter/skeletons/list.tsx.template

@@ -13,9 +13,15 @@ import type { {{MODEL_NAME}} } from '../types/api';
 interface {{MODEL_NAME}}ListViewProps {
   onSelect?: (item: {{MODEL_NAME}}) => void;
   onCreate?: () => void;
+  /** Called when the user clicks a resolved belongsTo cell.
+   *  Wired by App.tsx to switch to the target model's detail view. */
+  onNavigate?: (model: string, id: string | number) => void;
 }
 
-export function {{MODEL_NAME}}ListView({ onSelect, onCreate }: {{MODEL_NAME}}ListViewProps) {
+export function {{MODEL_NAME}}ListView({ onSelect, onCreate, onNavigate }: {{MODEL_NAME}}ListViewProps) {
+  // onNavigate is referenced from walker-emitted FK cells below; reference
+  // it here so TS doesn't flag it as unused for models without belongsTo.
+  void onNavigate;
   const { data: items = [], isLoading, error } = use{{PLURAL_MODEL}}Query();
   const deleteItem = useDelete{{MODEL_NAME}}Mutation();
 {{RELATED_HOOKS}}
@@ -46,15 +52,17 @@ export function {{MODEL_NAME}}ListView({ onSelect, onCreate }: {{MODEL_NAME}}Lis
           placeholder="Search {{PLURAL_LOWER}}…"
           value={searchTerm}
           onChange={e => setSearchTerm(e.target.value)}
-          className="w-64 rounded border border-gray-300 px-3 py-2 text-sm"
+          className="w-64 rounded border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
         />
-        <button
-          type="button"
-          onClick={onCreate}
-          className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
-        >
-          + New {{MODEL_NAME}}
-        </button>
+        {onCreate && (
+          <button
+            type="button"
+            onClick={onCreate}
+            className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          >
+            + New {{MODEL_NAME}}
+          </button>
+        )}
       </div>
 
       {/* Pattern-rendered list body (table + rows). Edit freely. */}