@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/ui-editor/inspector.tsx

@@ -1,563 +0,0 @@
-/**
- * UIInspector — the property inspector for the selected UI node(s) (K2/K9/K10).
- *
- * Grouped sections: Layout/anchor (with one-click presets D2), Style/theme (with a
- * color eyedropper K10 and token picker), Props (with literal-vs-binding chips and
- * bind/unbind G4), and Events (J2). Multi-selection edits apply to all selected
- * nodes with a mixed-value indicator (K9). Edits route through the store (one undo
- * step each) and persist to the .vscn tree (C9).
- */
-
-import type { UINode } from '@engine/scene/schema';
-import { isBound } from '@vgai/scene-ui/bindings';
-import { useState } from 'react';
-import { getAuthoringOverride } from '../authoring/active-adapter';
-import { matchedInspectorSections } from '../inspector-section-registry';
-import { findNode, getNodePath as getNodePathLocal } from './node-ops';
-import { useUIStore } from './react-store';
-import type { UIEditStore } from './ui-edit-store';
-
-/** Exported for reuse by the spec-27 inspector-widgets kit
- *  (`components/inspector-widgets/AlignmentGrid.tsx`'s `AnchorPresets`) —
- *  same preset table, no duplication. */
-export const ANCHOR_PRESETS: Record<
-  string,
-  {
-    anchor: { left: number; top: number; right: number; bottom: number };
-    offset: { left: number; top: number; right: number; bottom: number };
-  }
-> = {
-  full: {
-    anchor: { left: 0, top: 0, right: 1, bottom: 1 },
-    offset: { left: 0, top: 0, right: 0, bottom: 0 },
-  },
-  top: {
-    anchor: { left: 0, top: 0, right: 1, bottom: 0 },
-    offset: { left: 0, top: 0, right: 0, bottom: 0 },
-  },
-  bottom: {
-    anchor: { left: 0, top: 1, right: 1, bottom: 1 },
-    offset: { left: 0, top: 0, right: 0, bottom: 0 },
-  },
-  left: {
-    anchor: { left: 0, top: 0, right: 0, bottom: 1 },
-    offset: { left: 0, top: 0, right: 0, bottom: 0 },
-  },
-  right: {
-    anchor: { left: 1, top: 0, right: 1, bottom: 1 },
-    offset: { left: 0, top: 0, right: 0, bottom: 0 },
-  },
-  center: {
-    anchor: { left: 0.5, top: 0.5, right: 0.5, bottom: 0.5 },
-    offset: { left: -60, top: -20, right: 60, bottom: 20 },
-  },
-  'top-left': {
-    anchor: { left: 0, top: 0, right: 0, bottom: 0 },
-    offset: { left: 0, top: 0, right: 120, bottom: 40 },
-  },
-  'top-right': {
-    anchor: { left: 1, top: 0, right: 1, bottom: 0 },
-    offset: { left: -120, top: 0, right: 0, bottom: 40 },
-  },
-};
-
-/**
- * C2 (docs/unified-world-editor/26-unified-editor-spec.md §4 C2) — `UIInspector`
- * is a THIN shell: it keeps its own header/name field (the one piece that isn't
- * shared with the 3D editor's `Inspector.tsx` shell) and renders whatever
- * `inspector-section-registry.ts` registrations match the current UI selection
- * (Layout/Style/Props/Events — registered by `authoring/ui-inspector-sections.tsx`,
- * the UI adapter's OWN sibling to `authoring/first-party-inspector/register.tsx`).
- * `LayoutSection`/`StyleSection`/`PropsSection`/`EventsSection` below are exported
- * so that registration module can wrap them; this mount point (`UIEditor.tsx:297`)
- * and every testid are unchanged — only WHO renders the four sections moved.
- */
-export function UIInspector({ store }: { store: UIEditStore }): React.ReactNode {
-  useUIStore(store);
-  const ids = store.selection;
-  if (ids.length === 0) return <Empty />;
-  const primaryId = store.primary as string;
-  const loc = findNode(store.roots, primaryId);
-  if (!loc) return <Empty />;
-  const node = loc.node;
-  const multi = ids.length > 1;
-
-  const adapter = getAuthoringOverride();
-  const editorNode = adapter ? adapter.hierarchy.node(primaryId) : null;
-  const matched = adapter && editorNode ? matchedInspectorSections(editorNode, adapter) : [];
-
-  const set = (path: string, value: unknown): void => {
-    if (multi) store.setPropMulti(ids, path, value);
-    else store.setProp(primaryId, path, value);
-  };
-
-  return (
-    <div data-testid="ui-inspector" style={panel}>
-      <div style={{ ...row, fontWeight: 700, justifyContent: 'space-between' }}>
-        <span>{multi ? `${ids.length} selected` : node.name}</span>
-        <span style={{ color: '#888', fontSize: 10 }}>{multi ? 'multi-edit' : node.kind}</span>
-      </div>
-      {!multi && (
-        <Field label="name">
-          <input
-            data-testid="insp-name"
-            style={input}
-            value={node.name}
-            onChange={(e) => set('name', e.target.value)}
-          />
-        </Field>
-      )}
-
-      {adapter &&
-        matched.map(({ Section }, i) => <Section key={i} adapter={adapter} nodeId={primaryId} />)}
-    </div>
-  );
-}
-
-/** K9 mixed-value detection: true when selected nodes among `ids` disagree on `path`. */
-export function mixedValue(store: UIEditStore, ids: string[], path: string): boolean {
-  if (ids.length <= 1) return false;
-  const vals = ids.map((id) => {
-    const l = findNode(store.roots, id);
-    return l ? JSON.stringify(getNodePathLocal(l.node, path)) : undefined;
-  });
-  return new Set(vals).size > 1;
-}
-
-export function LayoutSection({
-  store,
-  ids,
-  node,
-  set,
-  mixed,
-}: {
-  store: UIEditStore;
-  ids: string[];
-  node: UINode;
-  set: (path: string, value: unknown) => void;
-  mixed: (path: string) => boolean;
-}): React.ReactNode {
-  return (
-    <Section title="Layout">
-      <Field label="position">
-        <select
-          style={input}
-          value={node.layout?.position ?? 'flow'}
-          onChange={(e) => set('layout.position', e.target.value)}
-        >
-          <option value="flow">flow</option>
-          <option value="absolute">absolute</option>
-        </select>
-      </Field>
-      <div style={{ ...row, flexWrap: 'wrap', gap: 4 }}>
-        {Object.keys(ANCHOR_PRESETS).map((p) => (
-          <button
-            key={p}
-            data-testid={`anchor-${p}`}
-            style={miniBtn}
-            onClick={() => {
-              const preset = ANCHOR_PRESETS[p];
-              if (!preset) return;
-              // one undo step for the whole preset (C6/K4) — not three
-              store.setMany(ids, {
-                'layout.position': 'absolute',
-                'layout.anchor': preset.anchor,
-                'layout.offset': preset.offset,
-              });
-            }}
-          >
-            {p}
-          </button>
-        ))}
-      </div>
-      <NumberRow
-        label="width"
-        value={asNum(node.layout?.width)}
-        mixed={mixed('layout.width')}
-        onChange={(v) => set('layout.width', v)}
-        testid="insp-width"
-      />
-      <NumberRow
-        label="height"
-        value={asNum(node.layout?.height)}
-        mixed={mixed('layout.height')}
-        onChange={(v) => set('layout.height', v)}
-        testid="insp-height"
-      />
-      <Field label="direction">
-        <select
-          style={input}
-          value={node.layout?.direction ?? ''}
-          onChange={(e) => set('layout.direction', e.target.value || undefined)}
-        >
-          <option value="">—</option>
-          <option value="row">row</option>
-          <option value="column">column</option>
-        </select>
-      </Field>
-      <Field label="justify">
-        <select
-          style={input}
-          value={node.layout?.justify ?? ''}
-          onChange={(e) => set('layout.justify', e.target.value || undefined)}
-        >
-          {['', 'start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'].map(
-            (v) => (
-              <option key={v} value={v}>
-                {v || '—'}
-              </option>
-            ),
-          )}
-        </select>
-      </Field>
-      <Field label="align">
-        <select
-          style={input}
-          value={node.layout?.align ?? ''}
-          onChange={(e) => set('layout.align', e.target.value || undefined)}
-        >
-          {['', 'start', 'center', 'end', 'stretch'].map((v) => (
-            <option key={v} value={v}>
-              {v || '—'}
-            </option>
-          ))}
-        </select>
-      </Field>
-      <NumberRow label="gap" value={node.layout?.gap} onChange={(v) => set('layout.gap', v)} />
-      <NumberRow label="grow" value={node.layout?.grow} onChange={(v) => set('layout.grow', v)} />
-    </Section>
-  );
-}
-
-export function StyleSection({
-  node,
-  set,
-  mixed,
-}: {
-  node: UINode;
-  set: (path: string, value: unknown) => void;
-  mixed: (path: string) => boolean;
-}): React.ReactNode {
-  return (
-    <Section title="Style">
-      <ColorRow
-        label="background"
-        value={asStr(node.style?.backgroundColor)}
-        mixed={mixed('style.backgroundColor')}
-        onChange={(v) => set('style.backgroundColor', v)}
-        testid="insp-bg"
-      />
-      <ColorRow
-        label="color"
-        value={asStr(node.style?.color)}
-        mixed={mixed('style.color')}
-        onChange={(v) => set('style.color', v)}
-        testid="insp-color"
-      />
-      <NumberRow
-        label="fontSize"
-        value={asNum(node.style?.fontSize)}
-        onChange={(v) => set('style.fontSize', v)}
-      />
-      <NumberRow
-        label="radius"
-        value={asNum(node.style?.borderRadius)}
-        onChange={(v) => set('style.borderRadius', v)}
-      />
-      <NumberRow
-        label="opacity"
-        value={node.style?.opacity}
-        step={0.1}
-        onChange={(v) => set('style.opacity', v)}
-      />
-      <Field label="hover bg">
-        <input
-          style={input}
-          value={asStr(node.states?.hover?.backgroundColor) ?? ''}
-          placeholder="#…"
-          onChange={(e) => set('states.hover.backgroundColor', e.target.value || undefined)}
-        />
-      </Field>
-    </Section>
-  );
-}
-
-export function PropsSection({
-  store,
-  node,
-  id,
-}: {
-  store: UIEditStore;
-  node: UINode;
-  id: string;
-}): React.ReactNode {
-  const props = node.props ?? {};
-  const keys = Object.keys(props);
-  const [newKey, setNewKey] = useState('');
-  return (
-    <Section title="Props">
-      {keys.length === 0 && <div style={{ color: '#777', fontSize: 11 }}>no props</div>}
-      {keys.map((k) => {
-        const v = props[k];
-        const bound = isBound(v);
-        return (
-          <Field key={k} label={k}>
-            {bound ? (
-              <div style={{ ...row, gap: 4 }}>
-                <span
-                  data-testid={`bind-${k}`}
-                  style={{ ...input, color: '#c9a', fontStyle: 'italic', overflow: 'hidden' }}
-                >
-                  ~ {String((v as { $bind: { source: string } }).$bind.source)}
-                </span>
-                <button
-                  style={miniBtn}
-                  title="unbind"
-                  onClick={() => store.setProp(id, `props.${k}`, '')}
-                >
-                  ×
-                </button>
-              </div>
-            ) : (
-              <div style={{ ...row, gap: 4 }}>
-                <input
-                  data-testid={`prop-${k}`}
-                  style={input}
-                  value={String(v ?? '')}
-                  onChange={(e) => store.setProp(id, `props.${k}`, coerce(e.target.value))}
-                />
-                <button
-                  style={miniBtn}
-                  title="bind to data"
-                  onClick={() =>
-                    store.setProp(id, `props.${k}`, {
-                      $bind: { source: 'player.health', mode: 'one-way' },
-                    })
-                  }
-                >
-                  ⛓
-                </button>
-              </div>
-            )}
-          </Field>
-        );
-      })}
-      <div style={{ ...row, gap: 4, marginTop: 4 }}>
-        <input
-          style={{ ...input, flex: 1 }}
-          placeholder="add prop…"
-          value={newKey}
-          onChange={(e) => setNewKey(e.target.value)}
-        />
-        <button
-          style={miniBtn}
-          onClick={() => {
-            if (newKey) {
-              store.setProp(id, `props.${newKey}`, '');
-              setNewKey('');
-            }
-          }}
-        >
-          +
-        </button>
-      </div>
-    </Section>
-  );
-}
-
-export function EventsSection({
-  store,
-  node,
-  id,
-}: {
-  store: UIEditStore;
-  node: UINode;
-  id: string;
-}): React.ReactNode {
-  const events = node.events ?? {};
-  return (
-    <Section title="Events">
-      {Object.keys(events).map((ev) => (
-        <Field key={ev} label={ev}>
-          <input
-            data-testid={`event-${ev}`}
-            style={input}
-            value={events[ev] ?? ''}
-            onChange={(e) => store.setProp(id, `events.${ev}`, e.target.value)}
-          />
-        </Field>
-      ))}
-      <div style={{ ...row, gap: 4 }}>
-        <button style={miniBtn} onClick={() => store.setProp(id, 'events.onClick', 'game.action')}>
-          + onClick
-        </button>
-        <button style={miniBtn} onClick={() => store.setProp(id, 'events.onChange', 'game.action')}>
-          + onChange
-        </button>
-      </div>
-    </Section>
-  );
-}
-
-// --- field primitives ---
-
-function NumberRow({
-  label,
-  value,
-  onChange,
-  step,
-  testid,
-  mixed,
-}: {
-  label: string;
-  value: number | undefined;
-  onChange: (v: number | undefined) => void;
-  step?: number;
-  testid?: string;
-  mixed?: boolean;
-}): React.ReactNode {
-  return (
-    <Field label={label}>
-      <input
-        data-testid={testid}
-        type="number"
-        step={step ?? 1}
-        style={input}
-        value={mixed ? '' : (value ?? '')}
-        placeholder={mixed ? '— mixed —' : ''}
-        onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
-      />
-    </Field>
-  );
-}
-
-function ColorRow({
-  label,
-  value,
-  onChange,
-  testid,
-  mixed,
-}: {
-  label: string;
-  value: string | undefined;
-  onChange: (v: string) => void;
-  testid?: string;
-  mixed?: boolean;
-}): React.ReactNode {
-  const canEyedrop = typeof (globalThis as { EyeDropper?: unknown }).EyeDropper === 'function';
-  return (
-    <Field label={label}>
-      <div style={{ ...row, gap: 4 }}>
-        <input
-          data-testid={testid}
-          style={input}
-          value={mixed ? '' : (value ?? '')}
-          placeholder={mixed ? '— mixed —' : '#…/$token'}
-          onChange={(e) => onChange(e.target.value)}
-        />
-        {canEyedrop && (
-          <button
-            style={miniBtn}
-            data-testid={`${testid}-eyedropper`}
-            title="eyedropper"
-            onClick={async () => {
-              try {
-                const ED = (
-                  globalThis as unknown as {
-                    EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };
-                  }
-                ).EyeDropper;
-                const res = await new ED().open();
-                onChange(res.sRGBHex);
-              } catch {
-                /* cancelled */
-              }
-            }}
-          >
-            ◉
-          </button>
-        )}
-      </div>
-    </Field>
-  );
-}
-
-function Section({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}): React.ReactNode {
-  return (
-    <div style={{ borderTop: '1px solid #2a2a2a', paddingTop: 6, marginTop: 6 }}>
-      <div
-        style={{
-          fontSize: 10,
-          textTransform: 'uppercase',
-          color: '#888',
-          marginBottom: 4,
-          letterSpacing: 0.5,
-        }}
-      >
-        {title}
-      </div>
-      {children}
-    </div>
-  );
-}
-function Field({ label, children }: { label: string; children: React.ReactNode }): React.ReactNode {
-  return (
-    <div style={{ ...row, marginBottom: 3 }}>
-      <span style={{ width: 70, color: '#aaa', fontSize: 11 }}>{label}</span>
-      <div style={{ flex: 1 }}>{children}</div>
-    </div>
-  );
-}
-function Empty(): React.ReactNode {
-  return <div style={{ ...panel, color: '#777' }}>Select a UI node to edit its properties.</div>;
-}
-
-function asNum(v: unknown): number | undefined {
-  return typeof v === 'number' ? v : undefined;
-}
-function asStr(v: unknown): string | undefined {
-  return typeof v === 'string' ? v : undefined;
-}
-function coerce(s: string): string | number | boolean {
-  if (s === 'true') return true;
-  if (s === 'false') return false;
-  if (s !== '' && !Number.isNaN(Number(s))) return Number(s);
-  return s;
-}
-
-const panel: React.CSSProperties = {
-  padding: 8,
-  fontFamily: 'monospace',
-  fontSize: 12,
-  color: '#ddd',
-  background: '#161616',
-  height: '100%',
-  overflowY: 'auto',
-};
-const row: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 6 };
-const input: React.CSSProperties = {
-  width: '100%',
-  background: '#0d0d0d',
-  color: '#ddd',
-  border: '1px solid #333',
-  borderRadius: 3,
-  padding: '2px 4px',
-  fontSize: 11,
-  fontFamily: 'monospace',
-  boxSizing: 'border-box',
-};
-const miniBtn: React.CSSProperties = {
-  background: '#262626',
-  color: '#ccc',
-  border: '1px solid #3a3a3a',
-  borderRadius: 3,
-  padding: '2px 6px',
-  fontSize: 11,
-  cursor: 'pointer',
-};