@treenity/react 3.0.0 → 3.0.1

package/src/Inspector.tsx

@@ -1,26 +1,18 @@
 // Inspector — view + edit panel for selected node (Unity-style inspector)
-// Shell only: delegates rendering to registered views, provides generic edit UI
-
+// Shell only: header, rendered view, delegates editing to NodeEditor
+
+import './Inspector.css';
+import { ConfirmDialog } from '#components/ConfirmDialog';
+import { PathBreadcrumb } from '#components/PathBreadcrumb';
+import { Badge } from '#components/ui/badge';
+import { Button } from '#components/ui/button';
+import { ScrollArea } from '#components/ui/scroll-area';
 import { Render, RenderContext } from '#context';
-import {
-  getActions,
-  getActionSchema,
-  getComponents,
-  getPlainFields,
-  getSchema,
-  getViewContexts,
-  pickDefaultContext,
-} from '#mods/editor-ui/node-utils';
-import { type ComponentData, type GroupPerm, type NodeData, resolve, resolveExact } from '@treenity/core/core';
-import type { TypeSchema } from '@treenity/core/schema/types';
-import { createElement, useEffect, useRef, useState } from 'react';
-import { AclEditor } from './AclEditor';
-import * as cache from './cache';
-import { set, usePath } from './hooks';
-import { useSchema } from './schema-loader';
-import { trpc } from './trpc';
-
-type AnyClass = { new(): Record<string, unknown> };
+import { getViewContexts, pickDefaultContext } from '#mods/editor-ui/node-utils';
+import { useState } from 'react';
+import { ErrorBoundary } from './ErrorBoundary';
+import { usePath } from './hooks';
+import { NodeEditor } from './NodeEditor';
 
 type Props = {
   path: string | null;
@@ -32,553 +24,24 @@ type Props = {
   toast: (msg: string) => void;
 };
 
-// Breadcrumb from path
-function Breadcrumb({ path, onSelect }: { path: string; onSelect: (p: string) => void }) {
-  if (path === '/')
-    return (
-      <div className="editor-breadcrumb">
-        <span>/</span>
-      </div>
-    );
-  const parts = path.split('/').filter(Boolean);
-  const crumbs: { label: string; path: string }[] = [{ label: '/', path: '/' }];
-  let cur = '';
-  for (const p of parts) {
-    cur += '/' + p;
-    crumbs.push({ label: p, path: cur });
-  }
-  return (
-    <div className="editor-breadcrumb">
-      {crumbs.map((c, i) => (
-        <span key={c.path}>
-          {i > 0 && <span className="sep">/</span>}
-          <span onClick={() => onSelect(c.path)}>{c.label === '/' ? 'root' : c.label}</span>
-        </span>
-      ))}
-    </div>
-  );
-}
-
-// Pretty-print action result value
-function ResultView({ value }: { value: unknown }) {
-  if (value === undefined || value === null) return null;
-  if (typeof value !== 'object')
-    return <span className="font-mono text-[11px]">{String(value)}</span>;
-
-  // Object/array with typed $type → render via Render
-  if ('$type' in (value as any)) {
-    return <Render value={value as ComponentData} />;
-  }
-
-  // Plain object — key/value pairs
-  const entries = Object.entries(value as Record<string, unknown>);
-  if (entries.length === 0) return <span className="text-muted-foreground text-[11px]">empty</span>;
-
-  return (
-    <div className="flex flex-col gap-0.5">
-      {entries.map(([k, v]) => (
-        <div key={k} className="flex gap-2 text-[11px]">
-          <span className="text-muted-foreground shrink-0">{k}</span>
-          <span className="font-mono text-foreground/80 truncate">
-            {typeof v === 'object' && v !== null ? JSON.stringify(v) : String(v ?? '')}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// Action pills — compact action buttons that expand on click
-function ActionCardList({
-  path,
-  componentName,
-  compType,
-  toast,
-  onActionComplete,
-}: {
-  path: string;
-  componentName: string;
-  compType: string;
-  compData: Record<string, unknown>;
-  toast: (msg: string) => void;
-  onActionComplete?: () => void;
-}) {
-  const schema = useSchema(compType);
-  const [expanded, setExpanded] = useState<string | null>(null);
-  const [paramsText, setParamsText] = useState<Record<string, string>>({});
-  const [schemaData, setSchemaData] = useState<Record<string, Record<string, unknown>>>({});
-  const [running, setRunning] = useState<string | null>(null);
-  const [results, setResults] = useState<Record<string, { ok: boolean; value: unknown }>>({});
-  const [resultMode, setResultMode] = useState<Record<string, 'pretty' | 'json'>>({});
-
-  if (schema === undefined) return null;
-
-  const actions = getActions(compType, schema);
-  if (actions.length === 0) return null;
-
-  async function run(a: string) {
-    setRunning(a);
-    try {
-      const actionSchema = getActionSchema(compType, a);
-      let data: unknown = {};
-      if (actionSchema) {
-        data = schemaData[a] ?? {};
-      } else {
-        const raw = (paramsText[a] ?? '').trim();
-        if (raw && raw !== '{}') {
-          try { data = JSON.parse(raw); }
-          catch { toast('Invalid JSON params'); setRunning(null); return; }
-        }
-      }
-      const result = await trpc.execute.mutate({ path, key: componentName, action: a, data });
-      const fresh = (await trpc.get.query({ path, watch: true })) as NodeData | undefined;
-      if (fresh) cache.put(fresh);
-      onActionComplete?.();
-      setResults((prev) => ({ ...prev, [a]: { ok: true, value: result } }));
-      setExpanded(a);
-    } catch (e) {
-      setResults((prev) => ({
-        ...prev,
-        [a]: { ok: false, value: e instanceof Error ? e.message : String(e) },
-      }));
-      setExpanded(a);
-    } finally {
-      setRunning(null);
-    }
-  }
-
-  return (
-    <div className="action-pills">
-      <div className="flex flex-wrap gap-1.5">
-        {actions.map((a) => (
-          <button
-            key={a}
-            className={`action-pill${expanded === a ? ' active' : ''}${running === a ? ' running' : ''}`}
-            onClick={() => setExpanded(expanded === a ? null : a)}
-          >
-            {running === a ? '...' : a}
-            {results[a] && !results[a].ok && expanded !== a && (
-              <span className="ml-1 text-destructive">!</span>
-            )}
-            {results[a]?.ok && expanded !== a && (
-              <span className="ml-1 text-primary/60">✓</span>
-            )}
-          </button>
-        ))}
-      </div>
-
-      {expanded && (() => {
-        const a = expanded;
-        const actionSchema = getActionSchema(compType, a);
-        const hasParams = actionSchema !== null && Object.keys(actionSchema.properties).length > 0;
-        const noParams = actionSchema !== null && Object.keys(actionSchema.properties).length === 0;
-        const result = results[a];
-        const mode = resultMode[a] ?? 'pretty';
-
-        return (
-          <div className="action-detail">
-            {/* Params section */}
-            {hasParams && (
-              <div className="flex flex-col gap-1.5 mb-2">
-                {Object.entries(actionSchema!.properties).map(([field, prop]) => {
-                  const p = prop as { type: string; title?: string; format?: string };
-                  const val = (schemaData[a] ?? {})[field];
-                  const setField = (v: unknown) =>
-                    setSchemaData((prev) => ({
-                      ...prev,
-                      [a]: { ...(prev[a] ?? {}), [field]: v },
-                    }));
-                  return (
-                    <div key={field} className="action-detail-field">
-                      <label>{p.title ?? field}</label>
-                      {p.type === 'number' || p.format === 'number' ? (
-                        <input type="number" value={String(val ?? 0)}
-                          onChange={(e) => setField(Number(e.target.value))} />
-                      ) : p.type === 'boolean' ? (
-                        <label className="flex items-center gap-1.5 cursor-pointer">
-                          <input type="checkbox" checked={!!val} className="w-auto"
-                            onChange={(e) => setField(e.target.checked)} />
-                          <span className="text-[11px]">{val ? 'true' : 'false'}</span>
-                        </label>
-                      ) : (
-                        <input value={String(val ?? '')}
-                          onChange={(e) => setField(e.target.value)} />
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-
-            {/* Free-form JSON params for untyped actions */}
-            {!hasParams && !noParams && (
-              <textarea
-                className="action-params-input mb-2"
-                value={paramsText[a] ?? '{}'}
-                onChange={(e) => setParamsText((prev) => ({ ...prev, [a]: e.target.value }))}
-                spellCheck={false}
-                rows={2}
-              />
-            )}
-
-            {/* Run button */}
-            <button
-              className="action-run-btn"
-              disabled={running !== null}
-              onClick={() => run(a)}
-            >
-              {running === a ? '...' : '▶'} {a}
-            </button>
-
-            {/* Result */}
-            {result && (
-              <div className={`action-result-box${result.ok ? '' : ' error'}`}>
-                {!result.ok ? (
-                  <span className="text-destructive font-mono text-[11px]">{String(result.value)}</span>
-                ) : result.value === undefined || result.value === null ? (
-                  <span className="text-primary text-[11px]">✓ done</span>
-                ) : (
-                  <>
-                    <div className="flex items-center justify-between mb-1">
-                      <span className="text-[10px] text-muted-foreground uppercase tracking-wider">Result</span>
-                      {typeof result.value === 'object' && (
-                        <div className="flex gap-0.5">
-                          <button
-                            className={`action-mode-btn${mode === 'pretty' ? ' active' : ''}`}
-                            onClick={() => setResultMode((p) => ({ ...p, [a]: 'pretty' }))}
-                          >View</button>
-                          <button
-                            className={`action-mode-btn${mode === 'json' ? ' active' : ''}`}
-                            onClick={() => setResultMode((p) => ({ ...p, [a]: 'json' }))}
-                          >JSON</button>
-                        </div>
-                      )}
-                    </div>
-                    {mode === 'json' ? (
-                      <pre className="text-[11px] font-mono text-foreground/60 whitespace-pre-wrap break-all leading-relaxed">
-                        {JSON.stringify(result.value, null, 2)}
-                      </pre>
-                    ) : (
-                      <ResultView value={result.value} />
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      })()}
-    </div>
-  );
-}
-
-function renderField(
-  name: string,
-  fieldSchema: {
-    type: string;
-    label: string;
-    placeholder?: string;
-    readOnly?: boolean;
-    enum?: string[];
-    items?: { type?: string; properties?: Record<string, unknown> };
-    refType?: string;
-  },
-  plainData: Record<string, unknown>,
-  setPlainData: (fn: (prev: Record<string, unknown>) => Record<string, unknown>) => void,
-) {
-  const ctx = fieldSchema.readOnly ? 'react' : 'react:form';
-  const handler = resolveExact(fieldSchema.type, ctx) ?? resolveExact('string', ctx);
-  if (!handler)
-    return (
-      <div key={name} className="text-[--danger] text-xs">
-        No form handler: {fieldSchema.type}
-      </div>
-    );
-  const fieldData: { $type: string; [k: string]: unknown } = {
-    $type: fieldSchema.type,
-    value: plainData[name],
-    label: fieldSchema.label,
-    placeholder: fieldSchema.placeholder,
-  };
-  if (fieldSchema.items) fieldData.items = fieldSchema.items;
-  if (fieldSchema.enum) fieldData.enum = fieldSchema.enum;
-  if (fieldSchema.refType) fieldData.refType = fieldSchema.refType;
-  const isComplex = fieldSchema.type === 'object' || fieldSchema.type === 'array';
-  return (
-    <div key={name} className={isComplex ? 'field stack' : 'field'}>
-      {fieldSchema.type !== 'boolean' && <label>{fieldSchema.label}</label>}
-      {createElement(handler as any, {
-        value: fieldData,
-        onChange: fieldSchema.readOnly
-          ? undefined
-          : (next: { value: unknown }) => setPlainData((prev) => ({ ...prev, [name]: next.value })),
-      })}
-    </div>
-  );
-}
-
-// Inline string-array editor for raw component fields without schema
-function StringArrayField({
-  value,
-  onChange,
-}: {
-  value: unknown[];
-  onChange: (next: unknown[]) => void;
-}) {
-  const [input, setInput] = useState('');
-  const isStrings = value.every((v) => typeof v === 'string');
-
-  if (!isStrings) {
-    return (
-      <textarea
-        value={JSON.stringify(value, null, 2)}
-        onChange={(e) => {
-          try {
-            onChange(JSON.parse(e.target.value));
-          } catch {
-            /* typing */
-          }
-        }}
-      />
-    );
-  }
-
-  const tags = value as string[];
-  return (
-    <div className="flex-1 space-y-1">
-      <div className="flex flex-wrap gap-1">
-        {tags.map((tag, i) => (
-          <span
-            key={i}
-            className="inline-flex items-center gap-0.5 text-[11px] font-mono bg-muted text-foreground/70 px-1.5 py-0.5 rounded"
-          >
-            {tag}
-            <button
-              type="button"
-              className="ml-0.5 border-0 bg-transparent p-0 text-muted-foreground/40 hover:text-foreground leading-none cursor-pointer"
-              onClick={() => onChange(tags.filter((_, j) => j !== i))}
-            >
-              ×
-            </button>
-          </span>
-        ))}
-      </div>
-      <input
-        className="text-xs w-full"
-        placeholder="Add item..."
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key !== 'Enter') return;
-          e.preventDefault();
-          const t = input.trim();
-          if (t && !tags.includes(t)) onChange([...tags, t]);
-          setInput('');
-        }}
-      />
-    </div>
-  );
-}
-
-function NodeCard({
-  path,
-  type,
-  onChangeType,
-}: {
-  path: string;
-  type: string;
-  onChangeType: (t: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  return (
-    <div className="card">
-      <div
-        className="card-header cursor-pointer select-none"
-        onClick={() => setOpen((v) => !v)}
-      >
-        <span>Node</span>
-        <span className="flex items-center gap-2 normal-case tracking-normal font-normal text-[11px] font-mono text-foreground/50">
-          {path}
-          <span className="text-primary">{type}</span>
-          {open ? (
-            <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m6 9 6 6 6-6"/></svg>
-          ) : (
-            <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m9 18 6-6-6-6"/></svg>
-          )}
-        </span>
-      </div>
-      {open && (
-        <div className="card-body">
-          <div className="field">
-            <label>$path</label>
-            <input value={path} readOnly />
-          </div>
-          <div className="field">
-            <label>$type</label>
-            <input value={type} onChange={(e) => onChangeType(e.target.value)} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ComponentBody({
-  ctype, cdata, setCD, path, componentName, toast, onActionComplete,
-}: {
-  ctype: string;
-  cdata: Record<string, unknown>;
-  setCD: (fn: (prev: Record<string, unknown>) => Record<string, unknown>) => void;
-  path: string;
-  componentName: string;
-  toast: (msg: string) => void;
-  onActionComplete?: () => void;
-}) {
-  const cschema = useSchema(ctype);
-  if (cschema === undefined) return null;
-
-  return (
-    <div className="card-body">
-      {cschema && Object.keys(cschema.properties).length > 0 ? (
-        Object.entries(cschema.properties).map(([field, prop]) => {
-          const p = prop as {
-            type: string; title: string; format?: string; description?: string;
-            readOnly?: boolean; enum?: string[]; items?: { type?: string; properties?: Record<string, unknown> };
-            refType?: string;
-          };
-          return renderField(field, {
-            type: p.format ?? p.type, label: p.title ?? field, placeholder: p.description,
-            readOnly: p.readOnly, enum: p.enum, items: p.items, refType: p.refType,
-          }, cdata, setCD);
-        })
-      ) : Object.keys(cdata).length > 0 ? (
-        Object.entries(cdata).map(([k, v]) => (
-          <div key={k} className={`field${Array.isArray(v) || (typeof v === 'object' && v !== null) ? ' stack' : ''}`}>
-            <label>{k}</label>
-            {typeof v === 'boolean' ? (
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" checked={!!cdata[k]} className="w-auto"
-                  onChange={(e) => setCD((prev) => ({ ...prev, [k]: e.target.checked }))} />
-                {cdata[k] ? 'true' : 'false'}
-              </label>
-            ) : typeof v === 'number' ? (
-              <input type="number" value={String(cdata[k] ?? 0)}
-                onChange={(e) => setCD((prev) => ({ ...prev, [k]: Number(e.target.value) }))} />
-            ) : Array.isArray(v) ? (
-              <StringArrayField value={cdata[k] as unknown[]}
-                onChange={(next) => setCD((prev) => ({ ...prev, [k]: next }))} />
-            ) : typeof v === 'object' ? (
-              (() => {
-                const h = resolve('object', 'react:form');
-                return h
-                  ? createElement(h as any, {
-                      value: { $type: 'object', value: cdata[k] },
-                      onChange: (next: { value: unknown }) => setCD((prev) => ({ ...prev, [k]: next.value })),
-                    })
-                  : <pre className="text-[11px] font-mono text-foreground/60">{JSON.stringify(cdata[k], null, 2)}</pre>;
-              })()
-            ) : (
-              <input value={String(cdata[k] ?? '')}
-                onChange={(e) => setCD((prev) => ({ ...prev, [k]: e.target.value }))} />
-            )}
-          </div>
-        ))
-      ) : (
-        <pre className="text-[11px] font-mono text-foreground/60 bg-muted/30 rounded p-2 whitespace-pre-wrap">
-          {JSON.stringify(cdata, null, 2)}
-        </pre>
-      )}
-      <ActionCardList path={path} componentName={componentName} compType={ctype} compData={cdata} toast={toast} onActionComplete={onActionComplete} />
-    </div>
-  );
-}
-
 export function Inspector({ path, currentUserId, onDelete, onAddComponent, onSelect, onSetRoot, toast }: Props) {
   const node = usePath(path);
-
-  const [context, setContext] = useState('react');
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [editing, setEditing] = useState(false);
-  const [nodeType, setNodeType] = useState('');
-  const [compTexts, setCompTexts] = useState<Record<string, string>>({});
-  const [compData, setCompData] = useState<Record<string, Record<string, unknown>>>({});
-  const [plainData, setPlainData] = useState<Record<string, unknown>>({});
-  const [tab, setTab] = useState<'properties' | 'json'>('properties');
-  const [jsonText, setJsonText] = useState('');
-  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
-  const [aclOwner, setAclOwner] = useState('');
-  const [aclRules, setAclRules] = useState<GroupPerm[]>([]);
-  const [dirty, setDirty] = useState(false);
-  const [stale, setStale] = useState(false);
-  const syncedPathRef = useRef<string | null>(null);
-  const syncedRevRef = useRef<unknown>(null);
-
-  function syncFromNode(n: NodeData) {
-    setNodeType(n.$type);
-    setAclOwner((n.$owner as string) ?? '');
-    setAclRules(n.$acl ? [...(n.$acl as GroupPerm[])] : []);
-    const texts: Record<string, string> = {};
-    const cdata: Record<string, Record<string, unknown>> = {};
-    for (const [name, comp] of getComponents(n)) {
-      texts[name] = JSON.stringify(comp, null, 2);
-      const d: Record<string, unknown> = {};
-      for (const [k, v] of Object.entries(comp)) {
-        if (!k.startsWith('$')) d[k] = v;
-      }
-      cdata[name] = d;
-    }
-    setCompTexts(texts);
-    setCompData(cdata);
-    setPlainData(getPlainFields(n));
-    setJsonText(JSON.stringify(n, null, 2));
-    setTab('properties');
-  }
-
-  useEffect(() => {
-    if (!node) return;
-
-    const pathChanged = node.$path !== syncedPathRef.current;
-    if (pathChanged) {
-      setContext(pickDefaultContext(node.$type));
-      syncFromNode(node);
-      syncedPathRef.current = node.$path;
-      syncedRevRef.current = node.$rev;
-      setDirty(false);
-      setStale(false);
-      return;
-    }
-
-    if (node.$rev !== syncedRevRef.current) {
-      if (dirty) {
-        setStale(true);
-      } else {
-        syncFromNode(node);
-        syncedRevRef.current = node.$rev;
-      }
-    }
-  }, [node?.$path, node?.$rev]);
-
-  // Dirty-tracking wrappers — mark form as edited on any user change
-  const dSetNodeType: typeof setNodeType = (v) => { setNodeType(v); setDirty(true); };
-  const dSetCompData: typeof setCompData = (v) => { setCompData(v); setDirty(true); };
-  const dSetPlainData: typeof setPlainData = (v) => { setPlainData(v); setDirty(true); };
-  const dSetJsonText: typeof setJsonText = (v) => { setJsonText(v); setDirty(true); };
-  const dSetAclOwner: typeof setAclOwner = (v) => { setAclOwner(v); setDirty(true); };
-  const dSetAclRules: typeof setAclRules = (v) => { setAclRules(v); setDirty(true); };
+  const [context, setContext] = useState('react');
 
-  function handleReset() {
-    if (!node) return;
-    const current = cache.get(node.$path) ?? node;
-    syncFromNode(current);
-    syncedRevRef.current = current.$rev;
-    setDirty(false);
-    setStale(false);
+  // Reset context when path changes
+  const [prevPath, setPrevPath] = useState(path);
+  if (path !== prevPath) {
+    setPrevPath(path);
+    if (node) setContext(pickDefaultContext(node.$type));
   }
 
   if (!node) {
     return (
-      <div className="editor">
-        <div className="editor-empty">
-          <div className="icon">&#9741;</div>
+      <div className="flex flex-1 flex-col overflow-hidden bg-background">
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground/40">
+          <div className="text-[32px] opacity-30">&#9741;</div>
           <p>Select a node to inspect</p>
         </div>
       </div>
@@ -586,272 +49,89 @@ export function Inspector({ path, currentUserId, onDelete, onAddComponent, onSel
   }
 
   const nodeName = node.$path === '/' ? '/' : node.$path.slice(node.$path.lastIndexOf('/') + 1);
-  const components = getComponents(node);
   const viewContexts = getViewContexts(node.$type, node);
-  const schemaHandler = resolve(node.$type, 'schema');
-  const schema = schemaHandler ? (schemaHandler() as TypeSchema) : null;
-
-  // Main component: when the node IS the component (its $type has a registered class).
-  // Show the class's fields (with defaults as fallback for unset fields).
-  const mainCompCls = resolve(node.$type, 'class') as AnyClass | null;
-  const mainCompDefaults = mainCompCls ? new mainCompCls() : null;
-
-  async function handleSave() {
-    if (!node) return;
-    let toSave: NodeData;
-    if (tab === 'json') {
-      try {
-        toSave = JSON.parse(jsonText);
-      } catch {
-        toast('Invalid JSON');
-        return;
-      }
-    } else {
-      toSave = { $path: node.$path, $type: nodeType, ...plainData };
-      if (aclOwner) toSave.$owner = aclOwner;
-      if (aclRules.length > 0) toSave.$acl = aclRules;
-      for (const [name, comp] of components) {
-        const ctype = (comp as ComponentData).$type;
-        const cschema = getSchema(ctype);
-        const cd = compData[name];
-        if ((cschema || (cd && Object.keys(cd).length > 0)) && cd) {
-          toSave[name] = { $type: ctype, ...cd };
-        } else {
-          const text = compTexts[name];
-          if (text === undefined) continue;
-          try {
-            toSave[name] = JSON.parse(text);
-          } catch {
-            toast(`Invalid JSON in component: ${name}`);
-            return;
-          }
-        }
-      }
-    }
-    await set(toSave);
-    const fresh = cache.get(node.$path);
-    if (fresh) {
-      syncFromNode(fresh);
-      syncedRevRef.current = fresh.$rev;
-    }
-    setDirty(false);
-    setStale(false);
-    toast('Saved');
-  }
-
-  function handleAdd() {
-    if (!node) return;
-    onAddComponent(node.$path);
-  }
-
-  function handleRemoveComponent(name: string) {
-    if (!node) return;
-    const next = { ...node };
-    delete next[name];
-    set(next);
-  }
-
-  function toggleCollapse(name: string) {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(name)) next.delete(name);
-      else next.add(name);
-      return next;
-    });
-  }
 
   return (
     <div className="editor">
       {/* Header */}
-      <div className="editor-header">
-        <Breadcrumb path={node.$path} onSelect={onSelect} />
-        <div className="editor-title">
+      <div className="px-6 pt-4 pb-3 border-b border-border bg-card shrink-0">
+        <PathBreadcrumb path={node.$path} onSelect={onSelect} />
+        <div className="flex items-center gap-2.5 flex-wrap">
           <h2>{nodeName}</h2>
-          <span className="editor-type-badge">{node.$type}</span>
+          <Badge variant="outline" className="font-mono text-[10px]">{node.$type}</Badge>
           <a
             href={node.$path}
             target="_blank"
             rel="noopener"
-            className="text-[11px] text-[--text-3] hover:text-[--accent] no-underline"
+            className="text-[11px] text-muted-foreground hover:text-primary no-underline"
           >
             View &#8599;
           </a>
           {onSetRoot && (
-            <button
-              className="sm ghost text-[11px]"
-              onClick={() => onSetRoot(node.$path)}
-              title="Focus subtree"
-            >
+            <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[11px]" onClick={() => onSetRoot(node.$path)} title="Focus subtree">
               &#8962;
-            </button>
+            </Button>
           )}
           {viewContexts.length > 1 && (
-            <span className="context-buttons">
+            <span className="flex gap-0.5">
               {viewContexts.map((c) => (
-                <button
+                <Button
                   key={c}
-                  className={`sm context-btn${context === c ? ' active' : ''}`}
+                  variant={context === c ? 'default' : 'ghost'}
+                  size="sm"
+                  className="h-6 px-2 text-[11px]"
                   onClick={() => setContext(c)}
                 >
-                  {c}
-                </button>
+                  {c.replace('react:', '')}
+                </Button>
               ))}
             </span>
           )}
-          <span className="spacer" />
-          <button className={editing ? 'sm' : 'sm primary'} onClick={() => setEditing(!editing)}>
+          <span className="flex-1" />
+          <Button variant={editing ? 'ghost' : 'default'} size="sm" className="h-7" onClick={() => setEditing(!editing)}>
             {editing ? 'Close' : 'Edit'}
-          </button>
-          <button
-            className="sm danger"
-            onClick={() => {
-              if (confirm(`Delete ${node.$path}?`)) onDelete(node.$path);
-            }}
+          </Button>
+          <Button
+            variant="destructive"
+            size="sm"
+            className="h-7"
+            onClick={() => setConfirmDelete(true)}
           >
             Delete
-          </button>
+          </Button>
+          <ConfirmDialog
+            open={confirmDelete}
+            onOpenChange={setConfirmDelete}
+            title={`Delete ${node.$path}?`}
+            description="This action cannot be undone."
+            variant="destructive"
+            onConfirm={() => onDelete(node.$path)}
+          />
         </div>
       </div>
 
       {/* Rendered view */}
-      <div className="editor-body">
-        <RenderContext name={context}>
-          <div className="node-view">
-            <Render value={node} />
-          </div>
-        </RenderContext>
-      </div>
-
-      {/* Slide-out edit panel */}
-      <div className={`edit-panel${editing ? ' open' : ''}`}>
-        <div className="edit-panel-header">
-          <span>Edit {nodeName}</span>
-          <button className="sm ghost" onClick={() => setEditing(false)}>
-            &#10005;
-          </button>
-        </div>
-
-        <div className="edit-panel-tabs">
-          <button
-            className={`editor-tab${tab === 'properties' ? ' active' : ''}`}
-            onClick={() => setTab('properties')}
-          >
-            Properties
-          </button>
-          <button
-            className={`editor-tab${tab === 'json' ? ' active' : ''}`}
-            onClick={() => {
-              setTab('json');
-              setJsonText(JSON.stringify({ ...node, ...plainData }, null, 2));
-            }}
-          >
-            JSON
-          </button>
-        </div>
-
-        <div className="edit-panel-body">
-          {tab === 'properties' ? (
-            <>
-              <NodeCard path={node.$path} type={nodeType} onChangeType={dSetNodeType} />
-
-              <AclEditor
-                path={node.$path}
-                owner={aclOwner}
-                rules={aclRules}
-                currentUserId={currentUserId}
-                onChange={(o, r) => {
-                  dSetAclOwner(o);
-                  dSetAclRules(r);
-                }}
-              />
-
-              {(mainCompCls || schema) && (
-                <div className="card">
-                  <div className="card-header">{node.$type}</div>
-                  <ComponentBody
-                    ctype={node.$type}
-                    cdata={plainData}
-                    setCD={(fn) => dSetPlainData(fn)}
-                    path={node.$path}
-                    componentName=""
-                    toast={toast}
-                    onActionComplete={handleReset}
-                  />
-                </div>
-              )}
-
-              {components.map(([name, comp]) => (
-                <div key={name} className="card">
-                  <div className="card-header cursor-pointer select-none" onClick={() => toggleCollapse(name)}>
-                    <span className="font-mono text-[12px]">{name}</span>
-                    <span className="flex items-center gap-2">
-                      <span className="component-type">{(comp as ComponentData).$type}</span>
-                      <button
-                        className="sm danger"
-                        onClick={(e) => { e.stopPropagation(); handleRemoveComponent(name); }}
-                      >
-                        Remove
-                      </button>
-                    </span>
-                  </div>
-                  {!collapsed.has(name) && (
-                    <ComponentBody
-                      ctype={(comp as ComponentData).$type}
-                      cdata={compData[name] ?? {}}
-                      setCD={(fn) => dSetCompData((prev) => ({ ...prev, [name]: fn(prev[name] ?? {}) }))}
-                      path={node.$path}
-                      componentName={name}
-                      toast={toast}
-                      onActionComplete={handleReset}
-                    />
-                  )}
-                </div>
-              ))}
-
-              {!schema && !mainCompDefaults && Object.keys(plainData).length > 0 && (
-                <div className="card">
-                  <div className="card-header">Data</div>
-                  <div className="card-body">
-                    {Object.entries(plainData).map(([k, v]) => (
-                      <div key={k} className="field">
-                        <label>{k}</label>
-                        <input
-                          value={typeof v === 'string' ? v : JSON.stringify(v)}
-                          onChange={(e) =>
-                            dSetPlainData((prev) => ({ ...prev, [k]: e.target.value }))
-                          }
-                        />
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </>
-          ) : (
-            <div className="json-view">
-              <textarea
-                value={jsonText}
-                onChange={(e) => dSetJsonText(e.target.value)}
-                spellCheck={false}
-              />
-            </div>
-          )}
+      <ScrollArea className="flex-1">
+        <div className="p-4">
+          <ErrorBoundary>
+            <RenderContext name={context}>
+              <div className="node-view">
+                <Render value={node} />
+              </div>
+            </RenderContext>
+          </ErrorBoundary>
         </div>
+      </ScrollArea>
 
-        <div className="edit-panel-actions">
-          {stale && (
-            <button className="ghost" onClick={handleReset} title="Node updated externally">
-              Reset
-            </button>
-          )}
-          <button className="primary" onClick={handleSave}>
-            Save
-          </button>
-          {tab === 'properties' && (
-            <button onClick={handleAdd}>+ Component</button>
-          )}
-        </div>
-      </div>
+      {/* Slide-out edit panel */}
+      <NodeEditor
+        node={node}
+        open={editing}
+        onClose={() => setEditing(false)}
+        currentUserId={currentUserId}
+        toast={toast}
+        onAddComponent={onAddComponent}
+      />
     </div>
   );
 }