@vgai/editor 0.2.0

package/src/ui-editor/inspector.tsx

@@ -0,0 +1,563 @@
+/**
+ * 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',
+};