@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/debugger-panel-state.ts

@@ -0,0 +1,57 @@
+import { showWorkspaceUtility } from '../workspace-dock-controller';
+import { DEBUGGER_UTILITY_ID } from '../workspace-utility-commands';
+
+export type DebuggerTabId = 'state' | 'profiler' | 'network' | 'machines' | 'commands';
+
+let activeTab: DebuggerTabId = 'profiler';
+let selectedMachineNodeId: string | null = null;
+let version = 0;
+const listeners = new Set<() => void>();
+
+function notify(): void {
+  version++;
+  for (const listener of listeners) listener();
+}
+
+export function subscribeDebuggerPanel(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function debuggerPanelVersion(): number {
+  return version;
+}
+
+export function activeDebuggerTab(): DebuggerTabId {
+  return activeTab;
+}
+
+export function debuggerMachineNodeId(): string | null {
+  return selectedMachineNodeId;
+}
+
+export function setDebuggerTab(tab: DebuggerTabId, machineNodeId?: string): void {
+  const nextMachine = machineNodeId ?? selectedMachineNodeId;
+  if (activeTab === tab && selectedMachineNodeId === nextMachine) return;
+  activeTab = tab;
+  selectedMachineNodeId = nextMachine;
+  notify();
+}
+
+export function selectDebuggerMachine(nodeId: string): void {
+  if (selectedMachineNodeId === nodeId) return;
+  selectedMachineNodeId = nodeId;
+  notify();
+}
+
+/** Open one live-observation tool without replacing the document it observes. */
+export function openDebuggerPanel(tab: DebuggerTabId, machineNodeId?: string): void {
+  setDebuggerTab(tab, machineNodeId);
+  showWorkspaceUtility(DEBUGGER_UTILITY_ID);
+}
+
+export function __resetDebuggerPanelForTest(): void {
+  activeTab = 'profiler';
+  selectedMachineNodeId = null;
+  notify();
+}

package/src/components/inspector-widgets/AlignmentGrid.tsx

@@ -1,3 +1,4 @@
+import { Button } from '../../design-system';
 /**
  * AlignmentGrid — a 3×3 flex `justify-content`×`align-items` picker (spec 27
  * §5 C1). Ported from `visual-edit/inspector.tsx`'s `AlignmentGrid`
@@ -94,7 +95,7 @@ function AlignmentCell({
         alignItems: 'center',
         justifyContent: 'center',
         cursor: disabled ? 'not-allowed' : 'pointer',
-        borderRadius: 2,
+        borderRadius: THEME.radiusSmall,
         background: isActive ? THEME.accent : 'transparent',
       }}
     >
@@ -103,7 +104,7 @@ function AlignmentCell({
           width: isActive ? 6 : 4,
           height: isActive ? 6 : 4,
           borderRadius: '50%',
-          background: isActive ? '#fff' : THEME.textMuted,
+          background: isActive ? THEME.onAccent : THEME.textMuted,
         }}
       />
     </div>
@@ -127,7 +128,7 @@ export function AlignmentGrid({
         gridTemplateRows: 'repeat(3, 16px)',
         gap: 1,
         background: THEME.inputBg,
-        borderRadius: 6,
+        borderRadius: THEME.radiusMedium,
         padding: 4,
         opacity: disabled ? 0.35 : 1,
       }}
@@ -164,24 +165,17 @@ export function AnchorPresets({ onSelect, disabled }: AnchorPresetsProps): React
   return (
     <div data-testid="anchor-presets" style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
       {Object.entries(ANCHOR_PRESETS).map(([name, preset]) => (
-        <button
+        <Button
           key={name}
           type="button"
+          variant="secondary"
+          size="compact"
           data-testid={`anchor-preset-${name}`}
           disabled={disabled}
           onClick={() => onSelect(name, preset)}
-          style={{
-            background: 'rgba(255,255,255,0.06)',
-            border: `1px solid ${THEME.border}`,
-            borderRadius: 3,
-            color: THEME.text,
-            fontSize: 10,
-            padding: '3px 6px',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-          }}
         >
           {name}
-        </button>
+        </Button>
       ))}
     </div>
   );

package/src/components/inspector-widgets/BorderEditor.tsx

@@ -1,3 +1,4 @@
+import { Button, Select } from '../../design-system';
 /**
  * BorderEditor (per-side width/style/color) + BorderRadiusEditor (per-corner)
  * (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s `BorderEditor`
@@ -6,17 +7,12 @@
  * radius is the common case; independent sides are one click away).
  */
 
+import { faBorderAll, faBorderTopLeft } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
+import { EditorIcon } from '../../design-system';
 import { ColorSwatch } from './ColorPicker';
 import { ScrubbableInput } from './ScrubbableInput';
-import {
-  type ChangeHandlers,
-  fireChange,
-  fireEnd,
-  inputStyle,
-  miniButtonStyle,
-  THEME,
-} from './shared';
+import { type ChangeHandlers, fireChange, fireEnd, THEME } from './shared';
 
 const BORDER_STYLES = ['none', 'solid', 'dashed', 'dotted', 'double'];
 
@@ -101,28 +97,34 @@ export function BorderEditor({
           onChangeEnd={(v) => applyAll({ width: v }, true)}
           style={{ width: 64 }}
         />
-        <select
+        <Select
+          className="vgai-select"
           data-testid="border-style"
           value={value.top.style}
           disabled={disabled}
           onChange={(e) => applyAll({ style: e.target.value }, true)}
-          style={{ ...inputStyle(disabled), flex: 1, cursor: disabled ? 'not-allowed' : 'pointer' }}
+          style={{
+            flex: 1,
+            ...(disabled ? { background: THEME.dynamicBg, color: THEME.dynamic } : null),
+          }}
         >
           {BORDER_STYLES.map((o) => (
             <option key={o} value={o}>
               {o}
             </option>
           ))}
-        </select>
-        <button
+        </Select>
+        <Button
           type="button"
           data-testid="border-expand"
           title="Per-side borders"
+          aria-label="Edit borders per side"
           onClick={() => setExpanded(true)}
-          style={miniButtonStyle}
+          variant="ghost"
+          size="compact"
         >
-          ⊞
-        </button>
+          <EditorIcon icon={faBorderAll} />
+        </Button>
       </div>
     );
   }
@@ -142,15 +144,17 @@ export function BorderEditor({
       <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
         <span style={{ fontSize: 10, color: THEME.textMuted }}>Per-side</span>
         <div style={{ flex: 1 }} />
-        <button
+        <Button
           type="button"
+          variant="primary"
+          size="compact"
           data-testid="border-collapse"
           title="Uniform border"
+          aria-label="Use one border for all sides"
           onClick={() => setExpanded(false)}
-          style={{ ...miniButtonStyle, background: THEME.accent, color: '#fff' }}
         >
-          ⊞
-        </button>
+          <EditorIcon icon={faBorderAll} />
+        </Button>
       </div>
       {sides.map(({ key, label }) => (
         <div key={key} style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
@@ -176,16 +180,16 @@ export function BorderEditor({
             onChangeEnd={(v) => applySide(key, { width: v }, true)}
             style={{ width: 48 }}
           />
-          <select
+          <Select
+            className="vgai-select"
             data-testid={`border-${key}-style`}
             value={value[key].style}
             disabled={disabled}
             onChange={(e) => applySide(key, { style: e.target.value }, true)}
             style={{
-              ...inputStyle(disabled),
               flex: 1,
               fontSize: 10,
-              cursor: disabled ? 'not-allowed' : 'pointer',
+              ...(disabled ? { background: THEME.dynamicBg, color: THEME.dynamic } : null),
             }}
           >
             {BORDER_STYLES.map((o) => (
@@ -193,7 +197,7 @@ export function BorderEditor({
                 {o}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
       ))}
     </div>
@@ -243,7 +247,7 @@ export function BorderRadiusEditor({
       >
         <ScrubbableInput
           testId="border-radius"
-          label="⬔"
+          label={<EditorIcon icon={faBorderTopLeft} label="Radius" />}
           value={value.topLeft}
           min={0}
           disabled={disabled}
@@ -251,15 +255,17 @@ export function BorderRadiusEditor({
           onChangeEnd={(v) => applyAll(v, true)}
           style={{ flex: 1 }}
         />
-        <button
+        <Button
           type="button"
           data-testid="border-radius-expand"
           title="Independent corners"
+          aria-label="Edit radius per corner"
           onClick={() => setExpanded(true)}
-          style={miniButtonStyle}
+          variant="ghost"
+          size="compact"
         >
-          ⊞
-        </button>
+          <EditorIcon icon={faBorderTopLeft} />
+        </Button>
       </div>
     );
   }
@@ -274,17 +280,19 @@ export function BorderRadiusEditor({
   return (
     <div data-testid="border-radius-editor-expanded">
       <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
-        <span style={{ fontSize: 10, color: THEME.textMuted }}>⬔ corners</span>
+        <span style={{ fontSize: 10, color: THEME.textMuted }}>Corners</span>
         <div style={{ flex: 1 }} />
-        <button
+        <Button
           type="button"
+          variant="primary"
+          size="compact"
           data-testid="border-radius-collapse"
           title="Uniform radius"
+          aria-label="Use one radius for all corners"
           onClick={() => setExpanded(false)}
-          style={{ ...miniButtonStyle, background: THEME.accent, color: '#fff' }}
         >
-          ⊞
-        </button>
+          <EditorIcon icon={faBorderTopLeft} />
+        </Button>
       </div>
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
         {corners.map(({ key, label }) => (

package/src/components/inspector-widgets/ColorPicker.tsx

@@ -1,3 +1,4 @@
+import { Button, TextInput } from '../../design-system';
 /**
  * ColorPicker — HSV area + hue/alpha sliders, hex↔rgb↔hsl format cycle,
  * eyedropper, recent colors (spec 27 §5 C1). Ported from
@@ -36,7 +37,7 @@ import {
   rgbToHsv,
   toHex,
 } from './color-utils';
-import { FONT, FONT_MONO, fireChange, fireEnd, inputStyle, THEME } from './shared';
+import { FONT_MONO, fireChange, fireEnd, inputStyle, popoverStyle, THEME } from './shared';
 
 const PICKER_W = 200;
 const PICKER_H = 150;
@@ -306,9 +307,7 @@ export function ColorPicker({
       data-testid="inspector-color-picker"
       onMouseDown={(e) => e.stopPropagation()}
       style={{
-        background: THEME.surface,
-        border: `1px solid ${THEME.border}`,
-        borderRadius: 6,
+        ...popoverStyle,
         padding: 10,
         width: PICKER_W + 16,
         boxSizing: 'border-box',
@@ -320,7 +319,7 @@ export function ColorPicker({
         width={PICKER_W}
         height={PICKER_H}
         onMouseDown={(e) => beginDrag('sat', e)}
-        style={{ cursor: 'crosshair', borderRadius: 4, display: 'block' }}
+        style={{ cursor: 'crosshair', borderRadius: THEME.radiusSmall, display: 'block' }}
       />
       <canvas
         ref={hueCanvasRef}
@@ -328,7 +327,12 @@ export function ColorPicker({
         width={PICKER_W}
         height={HUE_H}
         onMouseDown={(e) => beginDrag('hue', e)}
-        style={{ cursor: 'pointer', borderRadius: 3, display: 'block', marginTop: 6 }}
+        style={{
+          cursor: 'pointer',
+          borderRadius: THEME.radiusSmall,
+          display: 'block',
+          marginTop: 6,
+        }}
       />
       <canvas
         ref={alphaCanvasRef}
@@ -336,20 +340,25 @@ export function ColorPicker({
         width={PICKER_W}
         height={HUE_H}
         onMouseDown={(e) => beginDrag('alpha', e)}
-        style={{ cursor: 'pointer', borderRadius: 3, display: 'block', marginTop: 6 }}
+        style={{
+          cursor: 'pointer',
+          borderRadius: THEME.radiusSmall,
+          display: 'block',
+          marginTop: 6,
+        }}
       />
       <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 8 }}>
         <div
           style={{
             width: 22,
             height: 22,
-            borderRadius: 4,
+            borderRadius: THEME.radiusSmall,
             flexShrink: 0,
             border: `1px solid ${THEME.border}`,
             background: previewBg,
           }}
         />
-        <input
+        <TextInput
           type="text"
           data-testid="color-picker-text"
           value={colorInput}
@@ -360,46 +369,29 @@ export function ColorPicker({
           onBlur={handleColorInputSubmit}
           style={{ ...inputStyle(), flex: 1, fontFamily: FONT_MONO, fontSize: 10 }}
         />
-        <button
+        <Button
           type="button"
+          variant="secondary"
+          size="compact"
           data-testid="color-format-toggle"
           onClick={cycleFormat}
           title="Cycle color format"
-          style={{
-            background: 'rgba(255,255,255,0.06)',
-            border: 'none',
-            borderRadius: 3,
-            color: THEME.textMuted,
-            fontSize: 9,
-            fontWeight: 600,
-            padding: '3px 5px',
-            cursor: 'pointer',
-            flexShrink: 0,
-            fontFamily: FONT,
-          }}
+          style={{ flexShrink: 0 }}
         >
           {format.toUpperCase()}
-        </button>
+        </Button>
         {(canEyedrop || eyedropperFallback || onEyedropperPick) && (
-          <button
+          <Button
             type="button"
+            variant="secondary"
+            size="compact"
             data-testid="color-picker-eyedropper"
             onClick={handleEyedropper}
             title="Eyedropper"
-            style={{
-              background: 'rgba(255,255,255,0.06)',
-              border: 'none',
-              borderRadius: 3,
-              color: THEME.textMuted,
-              fontSize: 11,
-              padding: '3px 5px',
-              cursor: 'pointer',
-              flexShrink: 0,
-              lineHeight: 1,
-            }}
+            style={{ flexShrink: 0 }}
           >
             ⌖
-          </button>
+          </Button>
         )}
       </div>
       {recentColors && recentColors.length > 0 && (
@@ -428,7 +420,7 @@ export function ColorPicker({
               style={{
                 width: 16,
                 height: 16,
-                borderRadius: 3,
+                borderRadius: THEME.radiusSmall,
                 cursor: 'pointer',
                 background: rc,
                 border: `1px solid ${THEME.border}`,
@@ -474,7 +466,7 @@ export function ColorSwatch({
         style={{
           width: 20,
           height: 20,
-          borderRadius: 4,
+          borderRadius: THEME.radiusSmall,
           flexShrink: 0,
           background: hex,
           border: `1px solid ${THEME.border}`,
@@ -485,7 +477,15 @@ export function ColorSwatch({
         <span style={{ fontSize: 10, color: THEME.textMuted, flexShrink: 0 }}>{label}</span>
       )}
       {open && !disabled && (
-        <div style={{ position: 'absolute', zIndex: 100, top: '100%', left: 0, marginTop: 4 }}>
+        <div
+          style={{
+            position: 'absolute',
+            zIndex: 'var(--vgai-z-dropdown)',
+            top: '100%',
+            left: 0,
+            marginTop: 4,
+          }}
+        >
           <ColorPicker
             value={value}
             onChange={onChange}

package/src/components/inspector-widgets/FontPicker.tsx

@@ -1,3 +1,4 @@
+import { Button, TextInput } from '../../design-system';
 /**
  * FontPicker — a searchable, windowed (virtualized-by-hand, no new dep) font
  * list (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s
@@ -10,7 +11,8 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { type ChangeHandlers, FONT, FONT_MONO, inputStyle, THEME } from './shared';
+import { DisclosureIcon } from '../../design-system';
+import { type ChangeHandlers, FONT, inputStyle, popoverStyle, THEME } from './shared';
 
 const ITEM_HEIGHT = 28;
 const MAX_VISIBLE = 10;
@@ -80,46 +82,36 @@ export function FontPicker({
 
   return (
     <div ref={containerRef} data-testid={testId} style={{ position: 'relative', flex: 1 }}>
-      <button
+      <Button
         type="button"
+        variant="secondary"
+        className="vgai-field-trigger"
+        disabled={disabled}
         data-testid="font-picker-input"
         onClick={() => {
           if (!disabled) setOpen((v) => !v);
         }}
-        style={{
-          ...inputStyle(disabled),
-          width: '100%',
-          textAlign: 'left',
-          fontSize: 10,
-          fontFamily: FONT_MONO,
-          cursor: disabled ? 'not-allowed' : 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
       >
         <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
           {displayValue || '—'}
         </span>
-        <span style={{ fontSize: 8, color: THEME.textMuted, marginLeft: 4 }}>▼</span>
-      </button>
+        <DisclosureIcon direction="down" tone="muted" style={{ marginLeft: 4 }} />
+      </Button>
       {open && (
         <div
           data-testid="font-picker-dropdown"
           style={{
+            ...popoverStyle,
             position: 'absolute',
             top: '100%',
             left: 0,
             right: 0,
-            zIndex: 100,
-            background: THEME.bg,
-            border: `1px solid ${THEME.border}`,
-            borderRadius: 4,
+            zIndex: 'var(--vgai-z-dropdown)',
             marginTop: 2,
           }}
         >
           <div style={{ padding: 4 }}>
-            <input
+            <TextInput
               ref={searchRef}
               type="text"
               data-testid="font-picker-search"
@@ -164,7 +156,7 @@ export function FontPicker({
                       cursor: 'pointer',
                       fontSize: 12,
                       background: isActive ? THEME.accent : 'transparent',
-                      color: isActive ? '#fff' : THEME.text,
+                      color: isActive ? THEME.onAccent : THEME.text,
                     }}
                   >
                     <span

package/src/components/inspector-widgets/GradientEditor.tsx

@@ -1,3 +1,4 @@
+import { Button } from '../../design-system';
 /**
  * GradientEditor — solid/gradient toggle, stop list (add/remove/drag),
  * linear/radial toggle, angle (spec 27 §5 C1). Ported from
@@ -151,7 +152,7 @@ export function GradientEditor({
           data-testid="gradient-preview"
           style={{
             height: 20,
-            borderRadius: 4,
+            borderRadius: THEME.radiusSmall,
             border: `1px solid ${THEME.border}`,
             background: composeGradient(value),
           }}
@@ -212,35 +213,26 @@ export function GradientEditor({
         />
         <span style={{ fontSize: 9, color: THEME.textMuted }}>Stop {selectedStop + 1}</span>
         {value.stops.length > 2 && (
-          <button
+          <Button
             type="button"
+            variant="ghost"
+            size="compact"
+            aria-label="Remove gradient stop"
             data-testid="gradient-remove-stop"
             onClick={() => removeStop(selectedStop)}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: THEME.textMuted,
-              cursor: 'pointer',
-              fontSize: 10,
-            }}
           >
             ×
-          </button>
+          </Button>
         )}
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="compact"
           data-testid="gradient-add-stop"
           onClick={addStop}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: THEME.accent,
-            cursor: 'pointer',
-            fontSize: 10,
-          }}
         >
           + stop
-        </button>
+        </Button>
       </div>
       <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
         <div style={{ display: 'flex', gap: 1, flex: 1 }}>

package/src/components/inspector-widgets/ScrubbableInput.tsx

@@ -1,3 +1,4 @@
+import { TextInput } from '../../design-system';
 /**
  * ScrubbableInput — a numeric input whose LABEL is a drag-to-scrub handle
  * (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s `ScrubbableInput`
@@ -11,11 +12,11 @@
  * into whatever CSS string they write.
  */
 
-import { useMemo, useRef } from 'react';
+import { type ReactNode, useMemo, useRef } from 'react';
 import { type ChangeHandlers, fireChange, fireEnd, inputStyle, rowStyle, THEME } from './shared';
 
 export interface ScrubbableInputProps extends ChangeHandlers<number> {
-  label: string;
+  label: ReactNode;
   unit?: string | undefined;
   step?: number | undefined;
   min?: number | undefined;
@@ -119,8 +120,10 @@ export function ScrubbableInput({
   return (
     <div style={{ ...rowStyle, ...extraStyle }}>
       <span
+        className="vgai-scrub-label"
         data-testid={testId ? `${testId}-label` : undefined}
         onMouseDown={handleScrubStart}
+        data-disabled={disabled || undefined}
         style={{
           fontSize: 11,
           color: disabled ? THEME.dynamic : THEME.textMuted,
@@ -132,7 +135,7 @@ export function ScrubbableInput({
       >
         {label}
       </span>
-      <input
+      <TextInput
         data-testid={testId}
         type="text"
         value={`${value}${unit}`}