@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/{DataPanel.tsx → data-editor.tsx}

@@ -1,6 +1,12 @@
+import { Checkbox, FileInput, Select, TextInput, themeVars } from '../design-system';
 /**
- * DATA dock tab (W2, docs/DATA-TOOLS-DESIGN.md §2.4) — lists every
- * `src/data/*.data.json` of the open project and edits it in place.
+ * Data-asset EDITING machinery (docs/DATA-TOOLS-DESIGN.md §2.4, re-homed by
+ * the workspace-shell program W3 — docs/EDITOR-WORKSPACE-SHELL-TODO.md §9/W3,
+ * inventory row B5). Formerly `DataPanel.tsx`, the permanent bottom DATA tab;
+ * that tab is gone — each data asset now opens as a NAMED center form/table
+ * document (`data-documents.tsx`, kind `'data'`, title = the file's own name
+ * per §8, e.g. `tuning.data.json`). This module keeps the editing internals
+ * both eras share, unchanged:
  *
  * Architecture (spec §2.1): widgets are generated from the EMITTED
  * `*.schema.json` (JSON Schema, the interchange artifact) via
@@ -11,38 +17,31 @@
  * - **table** (`z.record`) → a grid: one row per key in the data file, one
  *   column per row-schema field, every cell a widget.
  *
- * Writes (D1, §2.5): every widget commit POSTs the whole updated file to
- * `/__editor/data-file` immediately — no local buffering, no save button;
- * undo is git. The `"$schema"` key is held out of editing everywhere and
- * re-serialized first so git diffs stay minimal.
+ * Writes (D1, §2.5): every widget commit hands the whole updated file to the
+ * caller's `writeFile` immediately — no local buffering, no save button. The
+ * write PATH itself (key-order fold → serialize → POST `/__editor/data-file`
+ * or history write) lives with the document host (`data-documents.tsx`) and
+ * is byte-identical to the old panel's; DATA-TOOLS-DESIGN's transaction rules
+ * stay authoritative. The `"$schema"` key is held out of editing everywhere
+ * and re-serialized first so git diffs stay minimal.
  *
  * Table rows can be added/removed (W6b) — see `TableEditor` below, which also
  * carries CSV export/import (W6c, `data-csv.ts`) — a spreadsheet-friendly
- * bulk-edit path for the same table. The empty state (`EmptyState`, W6d)
+ * bulk-edit path for the same table. The empty state (`DataEmptyState`, W6d)
  * teaches the create-a-data-asset recipe with a "Copy starter files" button;
- * no file-creating scaffold button this wave (deferred — needs a
- * purpose-scoped write verb, a security-surface decision). Still pending:
- * adding a whole new FIELD to a schema (a `.schema.ts` code change, not an
- * editor concern).
+ * it now renders inside the `Data Assets` center document when the project
+ * has no data assets yet. Still pending: adding a whole new FIELD to a
+ * schema (a `.schema.ts` code change, not an editor concern).
  *
  * Cross-asset refs (§2.2): a field declared with `dataRef(target)`
  * (`@engine/data/data-ref`) renders as a `stem#key` PICKER instead of free
- * text — `RefOptionsContext` reduces this panel's already-loaded `files`
- * state into `stem -> key[]` once per change and threads it to `Widget`'s
- * `'ref'` case (deep in `FieldList`/`TableEditor`) without prop-drilling.
+ * text — the host provides `RefOptionsContext` (loaded files reduced to
+ * `stem -> key[]`) and it threads to `Widget`'s `'ref'` case (deep in
+ * `FieldList`/`TableEditor`) without prop-drilling.
  */
 
-import {
-  createContext,
-  Fragment,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { connectDataFileEvents } from '../asset-events';
+import { createContext, Fragment, useContext, useEffect, useRef, useState } from 'react';
+import { Button, ColorInput, IconButton, NumberInput, Tooltip } from '../design-system';
 import { csvToTable, tableToCsv } from './data-csv';
 import {
   type DataAssetShape,
@@ -50,19 +49,16 @@ import {
   defaultValueForDescriptor,
   describeDataSchema,
 } from './inspectors/json-schema-fields';
-import { ColorInput } from './primitives/ColorInput';
-import { NumberInput } from './primitives/NumberInput';
-import { Tooltip } from './primitives/Tooltip';
 
 /** One file as served by GET /__editor/data-files (raw text, client parses). */
-interface ServerDataFile {
+export interface ServerDataFile {
   path: string;
   content: string;
   schema: string | null;
 }
 
 /** One file after client-side parsing + schema classification. */
-interface LoadedDataFile {
+export interface LoadedDataFile {
   /** Project-relative path, e.g. `src/data/tuning.data.json`. */
   path: string;
   /** Parsed data object (`"$schema"` entry included), or null on parse error. */
@@ -87,33 +83,38 @@ interface LoadedDataFile {
 
 /**
  * Every loaded file's own top-level keys, by asset stem — the `'ref'` widget
- * kind's picker options. `DataPanel` already fetches and parses every data
- * file's raw text (`GET /__editor/data-files`); this just reduces that same
- * state into `stem -> key[]` once per `files` change and threads it to
- * `Widget` (deep inside `FieldList`/`TableEditor`) via context instead of a
- * prop through every intermediate component — the SAME shape a `dataRef`
- * field's `refTarget` addresses (`json-schema-fields.ts`).
+ * kind's picker options. The document host (`data-documents.tsx`) already
+ * fetches and parses every data file's raw text (`GET /__editor/data-files`);
+ * this just reduces that same state into `stem -> key[]` once per files
+ * change and threads it to `Widget` (deep inside `FieldList`/`TableEditor`)
+ * via context instead of a prop through every intermediate component — the
+ * SAME shape a `dataRef` field's `refTarget` addresses
+ * (`json-schema-fields.ts`).
  */
-const RefOptionsContext = createContext<ReadonlyMap<string, string[]>>(new Map());
-
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '2px 4px',
-  fontSize: 12,
-  boxSizing: 'border-box',
-};
+export const RefOptionsContext = createContext<ReadonlyMap<string, string[]>>(new Map());
 
 const labelStyle: React.CSSProperties = {
   fontSize: 11,
-  color: '#8c8c8c',
+  color: themeVars.content.muted,
   width: 140,
   flexShrink: 0,
 };
 
+/**
+ * B-10: the table header row previously reused the plain label span with no
+ * visual separation from data rows — now a real header band (surface
+ * background + hairline bottom border), the Unity/Godot table convention.
+ */
+const tableHeadCellStyle: React.CSSProperties = {
+  ...labelStyle,
+  width: 'auto',
+  fontWeight: 600,
+  alignSelf: 'stretch',
+  background: themeVars.surface.chrome,
+  borderBottom: `1px solid ${themeVars.boundary.default}`,
+  padding: '3px 4px',
+};
+
 /** Scan a (valid-JSON) string literal starting at the opening quote; returns the index just past the closing quote. */
 function skipJsonString(text: string, i: number): number {
   let j = i + 1;
@@ -196,7 +197,7 @@ function extractTopLevelKeyOrder(text: string): string[] {
   return keys;
 }
 
-function parseServerFile(f: ServerDataFile): LoadedDataFile {
+export function parseServerFile(f: ServerDataFile): LoadedDataFile {
   let data: Record<string, unknown> | null = null;
   let error: string | undefined;
   try {
@@ -240,7 +241,10 @@ function parseServerFile(f: ServerDataFile): LoadedDataFile {
  * SESSION of edits, not just the first one: each commit's output order
  * becomes the next commit's `prevOrder`.
  */
-function nextKeyOrder(prevOrder: string[] | undefined, obj: Record<string, unknown>): string[] {
+export function nextKeyOrder(
+  prevOrder: string[] | undefined,
+  obj: Record<string, unknown>,
+): string[] {
   const existing = prevOrder ?? Object.keys(obj);
   const kept = [...new Set(existing)].filter((k) => k in obj);
   const added = Object.keys(obj).filter((k) => !existing.includes(k));
@@ -260,7 +264,7 @@ function nextKeyOrder(prevOrder: string[] | undefined, obj: Record<string, unkno
  * the very first value edit. Emitting the object manually, key by key, in
  * the exact order the caller hands us, sidesteps that reindexing entirely.
  */
-function serializeDataFile(obj: Record<string, unknown>, keyOrder?: string[]): string {
+export function serializeDataFile(obj: Record<string, unknown>, keyOrder?: string[]): string {
   const hasSchema = '$schema' in obj;
   const rest = (keyOrder ?? Object.keys(obj)).filter((k) => k !== '$schema' && k in obj);
   const order = hasSchema ? ['$schema', ...rest] : rest;
@@ -282,7 +286,7 @@ function serializeDataFile(obj: Record<string, unknown>, keyOrder?: string[]): s
  * than throwing — the write always succeeds, matching the panel's other
  * commit paths (`setCell` has the same defensive fallback).
  */
-function setDeep(
+export function setDeep(
   obj: Record<string, unknown>,
   path: string[],
   value: unknown,
@@ -298,139 +302,6 @@ function setDeep(
   return { ...obj, [head]: setDeep(childObj, rest, value) };
 }
 
-export function DataPanel({ active }: { active: boolean }) {
-  const [files, setFiles] = useState<LoadedDataFile[]>([]);
-  const [selectedPath, setSelectedPath] = useState<string | null>(null);
-
-  const refresh = useCallback(async () => {
-    try {
-      const res = await fetch('/__editor/data-files');
-      if (!res.ok) return;
-      const { files: raw } = (await res.json()) as { files: ServerDataFile[] };
-      setFiles(raw.map(parseServerFile));
-    } catch {
-      /* server unreachable — keep whatever we last had */
-    }
-  }, []);
-
-  // Re-scan whenever the tab is shown (D3: discovery IS the folder scan —
-  // never a cached manifest, so activating the tab always reflects disk).
-  useEffect(() => {
-    if (active) void refresh();
-  }, [active, refresh]);
-
-  // W6a: a NEW `src/data/*.data.json`/`*.schema.json` (or a deleted one)
-  // appears/disappears in the master list without switching tabs — the
-  // server's `src/`-scoped watcher broadcasts add/unlink only (a `change`
-  // event is deliberately excluded: it would echo this panel's own
-  // `/__editor/data-file` POST writes back into a refetch, clobbering
-  // in-flight drafts). `refresh` is the same rescan the tab-activation
-  // effect above already runs.
-  useEffect(() => connectDataFileEvents(() => void refresh()), [refresh]);
-
-  const selected = files.find((f) => f.path === selectedPath) ?? files[0] ?? null;
-
-  // `'ref'` widget picker options (§2.2's designer payoff): every loaded
-  // file's own top-level keys, keyed by asset stem — recomputed only when
-  // `files` actually changes (a fresh fetch, or a local commit updating one
-  // file's `data` in place).
-  const refOptionsByStem = useMemo(() => {
-    const map = new Map<string, string[]>();
-    for (const f of files) {
-      if (!f.data) continue;
-      const stem = f.path.replace(/^src\/data\//, '').replace(/\.data\.json$/, '');
-      map.set(
-        stem,
-        Object.keys(f.data).filter((k) => k !== '$schema'),
-      );
-    }
-    return map;
-  }, [files]);
-
-  /**
-   * D1 (spec §2.5): commit → write the file IMMEDIATELY, no buffering. The
-   * local copy is updated in the same tick so widgets stay live; disk is the
-   * document. D5 resolution: this deliberately BYPASSES the play-mode overlay
-   * (scene-entity-only) — a running game receives the change through the
-   * shipped `.data.json` HMR path instead (see the `/__editor/data-file`
-   * route's doc comment in editor-server.ts).
-   *
-   * Takes the whole `LoadedDataFile` (not just its path, #6) so it can read
-   * that file's CURRENT `keyOrder` straight from the caller's own prop/state
-   * closure — no stale-closure risk from reaching into the panel's `files`
-   * state inside this `useCallback([])`. `nextKeyOrder` folds the commit's
-   * keys into that order once, and the result becomes this file's `keyOrder`
-   * going forward, so a whole session of edits keeps the file's original
-   * on-disk key order (integer-like keys included) stable throughout.
-   */
-  const writeFile = useCallback((file: LoadedDataFile, nextData: Record<string, unknown>) => {
-    const order = nextKeyOrder(file.keyOrder, nextData);
-    const content = serializeDataFile(nextData, order);
-    setFiles((prev) =>
-      prev.map((f) => (f.path === file.path ? { ...f, data: nextData, keyOrder: order } : f)),
-    );
-    void fetch('/__editor/data-file', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: file.path, content }),
-    });
-  }, []);
-
-  if (files.length === 0) {
-    return <EmptyState />;
-  }
-
-  return (
-    <RefOptionsContext.Provider value={refOptionsByStem}>
-      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
-        {/* File list (master) */}
-        <div
-          style={{
-            width: 200,
-            flexShrink: 0,
-            borderRight: '1px solid #333',
-            overflowY: 'auto',
-            padding: '4px 0',
-          }}
-        >
-          {files.map((f) => {
-            const isSelected = f.path === selected?.path;
-            const name = f.path.replace(/^src\/data\//, '').replace(/\.data\.json$/, '');
-            return (
-              <button
-                key={f.path}
-                type="button"
-                data-testid={`data-file-${name}`}
-                onClick={() => setSelectedPath(f.path)}
-                title={f.path}
-                style={{
-                  display: 'block',
-                  width: '100%',
-                  textAlign: 'left',
-                  background: isSelected ? '#2c2c2c' : 'transparent',
-                  color: isSelected ? '#c5c8ce' : '#8c8c8c',
-                  border: 'none',
-                  borderLeft: isSelected ? '2px solid #579EFF' : '2px solid transparent',
-                  padding: '4px 10px',
-                  cursor: 'pointer',
-                  fontSize: 12,
-                }}
-              >
-                {name}
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Editor (detail) */}
-        <div style={{ flex: 1, minWidth: 0, overflow: 'auto', padding: 10 }}>
-          {selected && <DataFileEditor file={selected} writeFile={writeFile} />}
-        </div>
-      </div>
-    </RefOptionsContext.Provider>
-  );
-}
-
 /**
  * A minimal, paste-ready `.schema.ts` + `.data.json` pair (W6d) — mirrors the
  * shape of the shipped `tuning.*` trio (template/src/data/README.md), just
@@ -459,14 +330,16 @@ export type Example = z.infer<typeof ExampleSchema>;
 `;
 
 /**
- * DATA tab empty state (W6d, docs/DATA-TOOLS-DESIGN.md §3.5): the project has
- * no `src/data/*.data.json` yet. Teaches the concrete recipe rather than just
- * naming the shape, plus a one-click "Copy starter files" so the first asset
- * doesn't require memorizing the trio from scratch. Once the files exist +
- * `npm run emit-schemas` has run, the new asset appears here automatically —
- * no reload, W6a's src-watcher SSE channel picks it up.
+ * Data-assets empty state (W6d, docs/DATA-TOOLS-DESIGN.md §3.5): the project
+ * has no `src/data/*.data.json` yet. Teaches the concrete recipe rather than
+ * just naming the shape, plus a one-click "Copy starter files" so the first
+ * asset doesn't require memorizing the trio from scratch. Rendered by the
+ * `Data Assets` center document (`data-documents.tsx`) since W3 re-homed the
+ * bottom DATA tab. Once the files exist + `npm run emit-schemas` has run,
+ * the new asset appears automatically — no reload, W6a's src-watcher SSE
+ * channel picks it up.
  */
-function EmptyState() {
+export function DataEmptyState() {
   const [copied, setCopied] = useState(false);
 
   const copyStarter = () => {
@@ -477,7 +350,7 @@ function EmptyState() {
   };
 
   return (
-    <div style={{ padding: 12, fontSize: 12, color: '#8c8c8c', maxWidth: 480 }}>
+    <div style={{ padding: 12, fontSize: 12, color: themeVars.content.muted, maxWidth: 480 }}>
       <p style={{ margin: '0 0 8px' }}>
         No data assets yet — a data asset is a <code>src/data/*.data.json</code> file governed by a
         Zod schema (docs/DATA-TOOLS-DESIGN.md §2).
@@ -500,27 +373,14 @@ function EmptyState() {
         See the project's <code>src/data/README.md</code> for the full trio doctrine and the shipped{' '}
         <code>tuning.*</code> worked example.
       </p>
-      <button
-        type="button"
-        data-testid="data-empty-copy-starter"
-        onClick={copyStarter}
-        style={{
-          background: '#2c2c2c',
-          color: '#c5c8ce',
-          border: '1px solid #444',
-          borderRadius: 2,
-          padding: '4px 10px',
-          fontSize: 12,
-          cursor: 'pointer',
-        }}
-      >
+      <Button size="compact" data-testid="data-empty-copy-starter" onClick={copyStarter}>
         {copied ? 'Copied' : 'Copy starter files'}
-      </button>
+      </Button>
     </div>
   );
 }
 
-function DataFileEditor({
+export function DataFileEditor({
   file,
   writeFile,
 }: {
@@ -577,10 +437,16 @@ function DataFileEditor({
   );
 }
 
-function Message({ text, tone }: { text: string; tone: 'error' | 'warn' }) {
+function Message({ text: message, tone }: { text: string; tone: 'error' | 'warn' }) {
   return (
-    <div style={{ fontSize: 12, color: tone === 'error' ? '#FF6B6B' : '#FFD866', maxWidth: 560 }}>
-      {text}
+    <div
+      style={{
+        fontSize: 12,
+        color: tone === 'error' ? themeVars.semantic.danger : themeVars.semantic.warning,
+        maxWidth: 560,
+      }}
+    >
+      {message}
     </div>
   );
 }
@@ -685,43 +551,24 @@ function TableEditor({
   return (
     <div>
       <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
-        <button
-          type="button"
+        <Button
+          size="compact"
           data-testid="data-csv-export"
           onClick={exportCsv}
           title="Download this table as a CSV file"
-          style={{
-            background: '#2c2c2c',
-            color: '#c5c8ce',
-            border: '1px solid #444',
-            borderRadius: 2,
-            padding: '3px 10px',
-            fontSize: 12,
-            cursor: 'pointer',
-          }}
         >
           Export CSV
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          size="compact"
           data-testid="data-csv-import"
           onClick={() => fileInputRef.current?.click()}
           title="Import replaces every row in this file (undo is git)."
-          style={{
-            background: '#2c2c2c',
-            color: '#c5c8ce',
-            border: '1px solid #444',
-            borderRadius: 2,
-            padding: '3px 10px',
-            fontSize: 12,
-            cursor: 'pointer',
-          }}
         >
           Import CSV
-        </button>
-        <input
+        </Button>
+        <FileInput
           ref={fileInputRef}
-          type="file"
           accept=".csv,text/csv"
           style={{ display: 'none' }}
           onChange={(e) => void importCsv(e.target.files)}
@@ -743,11 +590,11 @@ function TableEditor({
           width: 'max-content',
         }}
       >
-        {/* Header row */}
-        <span style={{ ...labelStyle, width: 'auto' }} />
+        {/* Header row (B-10: real header band, not a bare label span) */}
+        <span style={tableHeadCellStyle} />
         {rowFields.map((f) => {
           const head = (
-            <span key={f.name} style={{ ...labelStyle, width: 'auto', fontWeight: 600 }}>
+            <span key={f.name} style={tableHeadCellStyle}>
               {f.name}
             </span>
           );
@@ -759,14 +606,21 @@ function TableEditor({
             head
           );
         })}
-        <span />
+        <span style={tableHeadCellStyle} />
 
         {rowKeys.map((rowKey) => {
           const row = data[rowKey];
           const rowObj = row && typeof row === 'object' ? (row as Record<string, unknown>) : {};
           return (
             <Fragment key={rowKey}>
-              <span style={{ ...labelStyle, width: 'auto', color: '#b0b0b0', fontWeight: 600 }}>
+              <span
+                style={{
+                  ...labelStyle,
+                  width: 'auto',
+                  color: themeVars.content.primary,
+                  fontWeight: 600,
+                }}
+              >
                 {rowKey}
               </span>
               {rowFields.map((f) => (
@@ -778,30 +632,24 @@ function TableEditor({
                   testId={`data-cell-${rowKey}-${f.name}`}
                 />
               ))}
-              <button
+              <IconButton
                 type="button"
+                variant="danger"
+                size="compact"
+                aria-label={`Remove row ${rowKey}`}
                 data-testid={`data-row-remove-${rowKey}`}
                 title="Remove row (undo is git)"
                 onClick={() => removeRow(rowKey)}
-                style={{
-                  background: 'transparent',
-                  border: 'none',
-                  color: '#8c8c8c',
-                  cursor: 'pointer',
-                  fontSize: 13,
-                  lineHeight: 1,
-                  padding: '2px 4px',
-                }}
               >
                 ×
-              </button>
+              </IconButton>
             </Fragment>
           );
         })}
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
-        <input
+        <TextInput
           data-testid="data-row-add-key"
           placeholder="new-row-key"
           value={newKey}
@@ -812,24 +660,12 @@ function TableEditor({
           onKeyDown={(e) => {
             if (e.key === 'Enter') addRow();
           }}
-          style={{ ...inputStyle, width: 160 }}
+          className="vgai-input"
+          style={{ width: 160 }}
         />
-        <button
-          type="button"
-          data-testid="data-row-add"
-          onClick={addRow}
-          style={{
-            background: '#2c2c2c',
-            color: '#c5c8ce',
-            border: '1px solid #444',
-            borderRadius: 2,
-            padding: '3px 10px',
-            fontSize: 12,
-            cursor: 'pointer',
-          }}
-        >
+        <Button size="compact" data-testid="data-row-add" onClick={addRow}>
           Add row
-        </button>
+        </Button>
       </div>
       {addError && (
         <div style={{ marginTop: 4 }}>
@@ -901,8 +737,8 @@ function FieldList({
               key={f.name}
               data-testid={testId}
               style={{
-                border: '1px solid #333',
-                borderRadius: 3,
+                border: `1px solid ${themeVars.boundary.default}`,
+                borderRadius: themeVars.shape.small,
                 padding: '6px 8px',
                 marginBottom: 6,
                 marginLeft: Math.min(path.length, 3) * 10,
@@ -936,7 +772,9 @@ function FieldList({
 
 function GroupHeader({ name, description }: { name: string; description?: string | undefined }) {
   const label = (
-    <div style={{ fontSize: 11, color: '#a0a0a0', fontWeight: 600, marginBottom: 4 }}>{name}</div>
+    <div style={{ fontSize: 11, color: themeVars.content.muted, fontWeight: 600, marginBottom: 4 }}>
+      {name}
+    </div>
   );
   return description ? (
     <Tooltip text={description} position="right">
@@ -975,8 +813,8 @@ function Widget({
       return <NumberCell field={field} value={value} onCommit={onCommit} testId={testId} />;
     case 'boolean':
       return (
-        <input
-          type="checkbox"
+        <Checkbox
+          className="vgai-checkbox"
           data-testid={testId}
           checked={Boolean(value)}
           onChange={(e) => onCommit(e.target.checked)}
@@ -990,18 +828,19 @@ function Widget({
       );
     case 'enum':
       return (
-        <select
+        <Select
           data-testid={testId}
           value={value == null ? '' : String(value)}
           onChange={(e) => onCommit(e.target.value)}
-          style={{ ...inputStyle, cursor: 'pointer' }}
+          className="vgai-select"
+          style={{ width: '100%' }}
         >
           {(field.options ?? []).map((opt) => (
             <option key={opt} value={opt}>
               {opt}
             </option>
           ))}
-        </select>
+        </Select>
       );
     case 'string':
       return <StringCell value={value} onCommit={onCommit} testId={testId} />;
@@ -1026,11 +865,12 @@ function Widget({
       const options = targetKeys.map((k) => `${targetStem}#${k}`);
       const isDangling = current !== '' && !options.includes(current);
       return (
-        <select
+        <Select
           data-testid={testId}
           value={current}
           onChange={(e) => onCommit(e.target.value)}
-          style={{ ...inputStyle, cursor: 'pointer' }}
+          className="vgai-select"
+          style={{ width: '100%' }}
         >
           <option value="">—</option>
           {options.map((opt) => (
@@ -1039,7 +879,7 @@ function Widget({
             </option>
           ))}
           {isDangling && <option value={current}>{current} (dangling)</option>}
-        </select>
+        </Select>
       );
     }
     default:
@@ -1147,7 +987,7 @@ function StringCell({
   };
 
   return (
-    <input
+    <TextInput
       data-testid={testId}
       value={draft}
       onChange={(e) => setDraft(e.target.value)}
@@ -1162,7 +1002,8 @@ function StringCell({
           (e.target as HTMLInputElement).blur();
         }
       }}
-      style={inputStyle}
+      className="vgai-input"
+      style={{ width: '100%' }}
     />
   );
 }
@@ -1230,7 +1071,7 @@ function JsonCell({
 
   return (
     <div>
-      <input
+      <TextInput
         data-testid={testId}
         value={draft}
         onChange={(e) => {
@@ -1248,7 +1089,16 @@ function JsonCell({
             (e.target as HTMLInputElement).blur();
           }
         }}
-        style={invalid ? { ...inputStyle, borderColor: '#FF6B6B', color: '#FF6B6B' } : inputStyle}
+        className="vgai-input"
+        style={
+          invalid
+            ? {
+                width: '100%',
+                borderColor: themeVars.semantic.danger,
+                color: themeVars.semantic.danger,
+              }
+            : { width: '100%' }
+        }
         title={
           invalid
             ? 'Not valid JSON — nothing written. Fix the JSON or press Escape to revert.'
@@ -1258,7 +1108,7 @@ function JsonCell({
       {invalid && (
         <div
           data-testid={`${testId}-error`}
-          style={{ fontSize: 10, color: '#FF6B6B', marginTop: 2 }}
+          style={{ fontSize: 10, color: themeVars.semantic.danger, marginTop: 2 }}
         >
           Not valid JSON — nothing written. Fix the JSON or press Escape to revert.
         </div>