fix(studio): edit kind:'html'/'react' pages as source (no more crash) (#2109)

* fix(studio): edit kind:'html'/'react' pages as source, not the design canvas

A source page (ADR-0080/0081) IS a `source` string with no `regions`/`children`,
so the structured design canvas does not apply and was crashing on it. PagePreview
now detects kind html/react and renders a new SourcePageEditor — a code editor for
the `source` field (Monaco, JSX/TSX) beside a live runtime preview, patching
draft.source on edit. dev/sdui-source-editor-preview verifies it (no crash; code +
live interactive preview).

* chore(dev): add Task Desk (drawer + modal) to the scenarios harness

Covers the popup-edit patterns — a slide-out drawer to edit a row and a centered
modal to create — both wrapping the real ObjectForm in author-built React
overlays. Adds showcase_task schema/data to the in-memory adapter. Browser-verified.

* fix(dev): pass required type/name props to PagePreview in source-editor harness (tsc)

* fix(app-shell): drop 3 unused imports surfaced by console tsc (TS6133)

The source-editor harness deep-imports PagePreview, pulling these app-shell
metadata-admin source files into the console build's strict tsc — surfacing
pre-existing dead imports (React in color-variant-field + OutlineStrip, Heading1
in block-types). Removed. Fixes Bundle Analysis.

---------

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>

Author: os-zhuang

apps/console/dev/scenario-sources.ts

@@ -249,3 +249,71 @@ function Page() {
     </div>
   );
 }`;
+
+export const taskdeskSource = `
+function Page() {
+  const adapter = useAdapter();
+  const [editId, setEditId] = React.useState(null);   // drawer (edit existing)
+  const [creating, setCreating] = React.useState(false); // modal (create new)
+  const [reload, setReload] = React.useState(0);
+
+  const closeAll = () => { setEditId(null); setCreating(false); };
+  const afterWrite = () => { closeAll(); setReload((k) => k + 1); };
+
+  // Close overlays on Escape — the kind of detail a real app needs.
+  React.useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') closeAll(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-5 p-8">
+      <header className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">Task Desk</h1>
+          <p className="mt-1 text-sm text-slate-500">Click a task to edit in a <strong>drawer</strong>; create one in a <strong>modal</strong> — both wrap the real <code>&lt;ObjectForm&gt;</code>.</p>
+        </div>
+        <button onClick={() => setCreating(true)} className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500">+ New task</button>
+      </header>
+
+      <div className="rounded-xl border border-slate-200 bg-white p-2">
+        <ListView key={reload} objectName="showcase_task"
+          fields={['title', 'assignee', 'status', 'priority']}
+          navigation={{ mode: 'none' }} onRowClick={(r) => setEditId(r.id)} />
+      </div>
+
+      {/* Drawer — edit an existing task */}
+      {editId ? (
+        <div className="fixed inset-0 z-40">
+          <div className="absolute inset-0 bg-slate-900/30" onClick={closeAll} />
+          <div className="absolute inset-y-0 right-0 flex w-full max-w-md flex-col bg-white shadow-2xl">
+            <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4">
+              <h2 className="text-base font-semibold text-slate-900">Edit task</h2>
+              <button onClick={closeAll} className="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600" aria-label="Close">✕</button>
+            </div>
+            <div className="flex-1 overflow-y-auto p-5">
+              <ObjectForm key={'edit:' + editId + ':' + reload} objectName="showcase_task" mode="edit"
+                recordId={editId} onSuccess={afterWrite} onCancel={closeAll} />
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Modal — create a new task */}
+      {creating ? (
+        <div className="fixed inset-0 z-40 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-slate-900/40" onClick={closeAll} />
+          <div className="relative w-full max-w-lg rounded-2xl bg-white p-6 shadow-2xl">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-slate-900">New task</h2>
+              <button onClick={closeAll} className="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600" aria-label="Close">✕</button>
+            </div>
+            <ObjectForm key={'new:' + reload} objectName="showcase_task" mode="create"
+              onSuccess={afterWrite} onCancel={closeAll} />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}`;

apps/console/dev/sdui-scenarios-preview.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SchemaRenderer, SchemaRendererProvider, AdapterCtx } from '@object-ui/react';
 import { I18nProvider } from '@object-ui/i18n';
-import { triageSource, cockpitSource, invoiceSource } from './scenario-sources';
+import { triageSource, cockpitSource, invoiceSource, taskdeskSource } from './scenario-sources';
 
 // ---------------------------------------------------------------------------
 // In-memory multi-object adapter (just enough for ListView + ObjectForm)
@@ -45,6 +45,12 @@ const SCHEMAS: Record<string, any> = {
     health: { ...SELECT([['green', 'Green'], ['yellow', 'Yellow'], ['red', 'Red']]), label: 'Health' },
     budget: { type: 'currency', label: 'Budget' }, owner: { type: 'text', label: 'Owner' },
   } },
+  showcase_task: { name: 'showcase_task', label: 'Task', fields: {
+    title: { type: 'text', label: 'Title', required: true }, assignee: { type: 'text', label: 'Assignee' },
+    status: { ...SELECT([['backlog', 'Backlog'], ['todo', 'To Do'], ['in_progress', 'In Progress'], ['in_review', 'In Review'], ['done', 'Done']]), label: 'Status' },
+    priority: { ...SELECT([['low', 'Low'], ['medium', 'Medium'], ['high', 'High'], ['urgent', 'Urgent']]), label: 'Priority' },
+    estimate_hours: { type: 'number', label: 'Estimate (h)' },
+  } },
 };
 const store: Record<string, any[]> = {
   showcase_account: [
@@ -72,6 +78,11 @@ const store: Record<string, any[]> = {
     { id: 'p2', name: 'Billing Revamp', account: 'a1', status: 'planned', health: 'yellow', budget: 80000, owner: 'Sam Ortiz' },
     { id: 'p3', name: 'Mobile App v2', account: 'a3', status: 'active', health: 'red', budget: 210000, owner: 'Priya N.' },
   ],
+  showcase_task: [
+    { id: 't1', title: 'Wire up SSO', assignee: 'Dana Lee', status: 'in_progress', priority: 'high', estimate_hours: 8 },
+    { id: 't2', title: 'Migrate billing schema', assignee: 'Sam Ortiz', status: 'todo', priority: 'urgent', estimate_hours: 13 },
+    { id: 't3', title: 'Polish onboarding', assignee: 'Priya N.', status: 'backlog', priority: 'medium', estimate_hours: 5 },
+  ],
 };
 let nextId = 100;
 
@@ -99,6 +110,7 @@ const SCENARIOS: { key: string; label: string; source: string }[] = [
   { key: 'triage', label: 'Inquiry Triage', source: triageSource },
   { key: 'cockpit', label: 'Account Cockpit', source: cockpitSource },
   { key: 'invoice', label: 'Invoice Console', source: invoiceSource },
+  { key: 'taskdesk', label: 'Task Desk', source: taskdeskSource },
 ];
 
 function Harness() {

apps/console/dev/sdui-source-editor-preview.html

@@ -0,0 +1,4 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Studio source-page editor (kind:'react'/'html')</title></head>
+<body><div id="root" style="height:100vh"></div><script type="module" src="./sdui-source-editor-preview.tsx"></script></body></html>

apps/console/dev/sdui-source-editor-preview.tsx

@@ -0,0 +1,56 @@
+/* Verifies the Studio editor fix: opening a kind:'react'/'html' page shows the
+ * SourcePageEditor (code + live preview) instead of crashing on the design
+ * canvas. Mounts the real PagePreview with a react-page draft. Dev-only. */
+import '../src/index.css';
+import '@object-ui/components';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SchemaRendererProvider, AdapterCtx } from '@object-ui/react';
+import { I18nProvider } from '@object-ui/i18n';
+import { PagePreview } from '../../../packages/app-shell/src/views/metadata-admin/previews/PagePreview';
+
+const initialReact = `function Page() {
+  const [n, setN] = React.useState(0);
+  return (
+    <div className="p-10">
+      <h1 className="text-3xl font-bold text-slate-900">Hello from source</h1>
+      <p className="mt-1 text-slate-500">This page is edited as source, not a region tree.</p>
+      <button onClick={() => setN(n + 1)} className="mt-5 rounded-lg bg-indigo-600 px-5 py-2.5 font-semibold text-white hover:bg-indigo-500">Count {n}</button>
+    </div>
+  );
+}`;
+
+function Harness() {
+  const [draft, setDraft] = React.useState<Record<string, unknown>>({
+    type: 'page', kind: 'react', name: 'demo_source_page', label: 'Demo', source: initialReact,
+  });
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="border-b bg-white px-4 py-2 text-sm font-semibold">Studio · editing a kind:'react' page</div>
+      <div className="min-h-0 flex-1">
+        <PagePreview
+          type="page"
+          name="demo_source_page"
+          draft={draft as never}
+          editing
+          selection={null as never}
+          onSelectionChange={() => {}}
+          onPatch={(patch: Record<string, unknown>) => setDraft((d) => ({ ...d, ...patch }))}
+          locale={'en' as never}
+        />
+      </div>
+    </div>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <I18nProvider>
+      <AdapterCtx.Provider value={null}>
+        <SchemaRendererProvider dataSource={{}}>
+          <Harness />
+        </SchemaRendererProvider>
+      </AdapterCtx.Provider>
+    </I18nProvider>
+  </React.StrictMode>,
+);

packages/app-shell/src/views/metadata-admin/color-variant-field.tsx

@@ -11,7 +11,6 @@
  * field looks and behaves the same.
  */
 
-import * as React from 'react';
 import { cn } from '@object-ui/components';
 
 export interface ColorVariant { value: string; label: string; css: string }

packages/app-shell/src/views/metadata-admin/previews/OutlineStrip.tsx

@@ -12,7 +12,6 @@
  * outside design mode.
  */
 
-import * as React from 'react';
 import { Plus } from 'lucide-react';
 import { cn } from '@object-ui/components';
 

packages/app-shell/src/views/metadata-admin/previews/PagePreview.tsx

@@ -16,6 +16,7 @@ import { buildDefaultPageSchema } from '@object-ui/plugin-detail';
 import type { MetadataPreviewProps } from '../preview-registry';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
 import { OutlineStrip } from './OutlineStrip';
+import { SourcePageEditor } from './SourcePageEditor';
 import { PageBlockCanvas } from './PageBlockCanvas';
 import { InterfaceListPage } from '../../InterfaceListPage';
 import { t as tr } from '../i18n';
@@ -234,6 +235,21 @@ export function PagePreview({ draft, editing, selection, onSelectionChange, onPa
     );
   }
 
+  // Source page (ADR-0080/0081) → `kind:'html'`/`'react'` pages are a `source`
+  // string, not a region tree. The design canvas does not apply (and would
+  // choke on the absent regions/children), so edit the source directly with a
+  // live preview. This is the fix for the editor crashing on these pages.
+  const pageKind = (draft as { kind?: string }).kind;
+  if (pageKind === 'react' || pageKind === 'html') {
+    return (
+      <SourcePageEditor
+        draft={draft as Record<string, unknown>}
+        onPatch={canEdit ? onPatch : undefined}
+        readOnly={!canEdit}
+      />
+    );
+  }
+
   // Empty draft → no preview; but if we're in design mode show the
   // canvas so users can author from scratch.
   if (!schema || Object.keys(schema).length <= 1) {

packages/app-shell/src/views/metadata-admin/previews/SourcePageEditor.tsx

@@ -0,0 +1,138 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * SourcePageEditor — the Studio editor surface for `kind:'html'` and
+ * `kind:'react'` pages (ADR-0080/0081). These pages ARE a `source` string
+ * (JSX/HTML or real React), not a region tree — so the structured design
+ * canvas does not apply (and would choke on the missing `regions`/`children`).
+ * Instead we present a code editor for the `source` field beside a live preview
+ * rendered through the runtime SchemaRenderer. Edits patch `draft.source`.
+ *
+ * Mirrors JsonSourceEditor's Monaco + textarea-fallback + theme handling, but
+ * edits ONE field (the source) instead of the whole-record JSON, with a
+ * JSX/TSX language mode.
+ */
+
+import * as React from 'react';
+import { Skeleton } from '@object-ui/components';
+import { SchemaRenderer } from '@object-ui/react';
+import { PreviewShell, PreviewErrorBoundary } from './PreviewShell';
+
+const LazyMonaco = React.lazy(async () => {
+  const mod = await import('@monaco-editor/react');
+  return { default: mod.default };
+});
+
+export interface SourcePageEditorProps {
+  draft: Record<string, unknown>;
+  /** Patch the draft; undefined in read-only mode. */
+  onPatch?: (patch: Record<string, unknown>) => void;
+  readOnly?: boolean;
+  fallbackDelayMs?: number;
+}
+
+export function SourcePageEditor({ draft, onPatch, readOnly, fallbackDelayMs = 4000 }: SourcePageEditorProps) {
+  const kind = (draft as { kind?: string }).kind === 'react' ? 'react' : 'html';
+  const source = typeof draft.source === 'string' ? (draft.source as string) : '';
+
+  const [text, setText] = React.useState(source);
+  const lastCommittedRef = React.useRef(source);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  // Sync from upstream (Reset / inspector edits) without clobbering keystrokes.
+  React.useEffect(() => {
+    if (source !== lastCommittedRef.current) {
+      setText(source);
+      lastCommittedRef.current = source;
+    }
+  }, [source]);
+
+  // Monaco-unavailable fallback (headless / CSP) → plain textarea.
+  const [monacoUnavailable, setMonacoUnavailable] = React.useState(false);
+  React.useEffect(() => {
+    if (monacoUnavailable) return;
+    const id = setTimeout(() => {
+      const el = containerRef.current;
+      if (!el || !el.querySelector('.view-line')) setMonacoUnavailable(true);
+    }, fallbackDelayMs);
+    return () => clearTimeout(id);
+  }, [monacoUnavailable, fallbackDelayMs]);
+
+  const [theme, setTheme] = React.useState<'vs-dark' | 'light'>(() =>
+    typeof document !== 'undefined' && document.documentElement.classList.contains('dark') ? 'vs-dark' : 'light',
+  );
+  React.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    const update = () => setTheme(root.classList.contains('dark') ? 'vs-dark' : 'light');
+    const obs = new MutationObserver(update);
+    obs.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => obs.disconnect();
+  }, []);
+
+  const handleChange = (next: string | undefined) => {
+    const v = next ?? '';
+    setText(v);
+    lastCommittedRef.current = v;
+    onPatch?.({ source: v });
+  };
+
+  const previewSchema = React.useMemo(
+    () => ({ ...(draft as Record<string, unknown>), type: (draft as { type?: string }).type ?? 'page' }),
+    [draft],
+  );
+
+  return (
+    <PreviewShell hint={`page · ${kind} source`}>
+      <div className="grid h-full grid-cols-1 divide-y divide-border lg:grid-cols-2 lg:divide-x lg:divide-y-0">
+        {/* Code editor */}
+        <div ref={containerRef} className="h-full min-h-[260px] overflow-hidden bg-background">
+          {monacoUnavailable ? (
+            <textarea
+              value={text}
+              onChange={(e) => handleChange(e.target.value)}
+              readOnly={readOnly}
+              spellCheck={false}
+              aria-label="Page source"
+              className="h-full w-full resize-none bg-background p-3 font-mono text-xs leading-relaxed outline-none"
+            />
+          ) : (
+            <React.Suspense fallback={<Skeleton className="h-full w-full" />}>
+              <LazyMonaco
+                value={text}
+                language="typescript"
+                path={kind === 'react' ? 'page.tsx' : 'page.html.tsx'}
+                theme={theme}
+                onChange={handleChange}
+                options={{
+                  readOnly,
+                  minimap: { enabled: false },
+                  fontSize: 12,
+                  lineNumbers: 'on',
+                  scrollBeyondLastLine: false,
+                  automaticLayout: true,
+                  folding: true,
+                  wordWrap: 'on',
+                  tabSize: 2,
+                  scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 },
+                }}
+              />
+            </React.Suspense>
+          )}
+        </div>
+        {/* Live preview through the real runtime */}
+        <div className="h-full min-h-[260px] overflow-auto bg-muted/20">
+          <PreviewErrorBoundary fallbackHint="The page source threw while rendering — fix the code on the left.">
+            <SchemaRenderer schema={previewSchema as never} />
+          </PreviewErrorBoundary>
+        </div>
+      </div>
+    </PreviewShell>
+  );
+}
+
+export default SourcePageEditor;

packages/app-shell/src/views/metadata-admin/previews/block-types.ts

@@ -11,7 +11,6 @@
  */
 
 import {
-  Heading1,
   PanelTop,
   PanelBottom,
   PanelLeft,