@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/asset-viewers/InputMapViewer.tsx

@@ -1,76 +1,125 @@
+import type { ActionValueType, InputBinding, InputMapFile } from '@engine/input/input-types';
 import { InputMapFileSchema } from '@engine/input/schema';
 import { resolveUrl } from '@engine/loader';
-import { useEffect, useState } from 'react';
-import { SectionHeader } from '../primitives/SectionHeader';
-
-const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
-const cellStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: '#c5c8ce',
-  padding: '3px 4px',
-  borderBottom: '1px solid #333',
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Select, TextInput, themeVars } from '../../design-system';
+import {
+  registerWorkspaceDocumentSaveHandler,
+  setWorkspaceDocumentDirty,
+} from '../../workspace-document-registry';
+import { subscribeProjectAsset, writeProjectAsset } from '../asset-editor-persistence';
+
+const VALUE_TYPES: ActionValueType[] = [
+  'digital',
+  'scalar',
+  'vector2',
+  'pointerDelta',
+  'pointerPosition',
+];
+const BINDING_TYPES_BY_VALUE_TYPE: Record<ActionValueType, InputBinding['type'][]> = {
+  digital: ['key', 'mouse_button', 'gamepad_button', 'gamepad_axis', 'touch_button'],
+  scalar: ['gamepad_axis', 'test_axis'],
+  vector2: ['mouse_move', 'gamepad_axis_pair', 'touch_stick', 'test_vector2'],
+  pointerDelta: ['mouse_move', 'test_pointer_delta'],
+  pointerPosition: ['test_pointer_position'],
 };
 
-interface Binding {
-  type: string;
-  code?: string;
-  button?: number;
-  axis?: number;
-  xAxis?: number;
-  yAxis?: number;
-  direction?: string;
-  deadzone?: number;
+export function compatibleBindingTypes(
+  valueType: ActionValueType,
+): readonly InputBinding['type'][] {
+  return BINDING_TYPES_BY_VALUE_TYPE[valueType];
 }
 
-interface InputMapData {
-  version?: number;
-  actions?: Record<string, { bindings: Binding[] }>;
+export function createInputBindingForValueType(valueType: ActionValueType): InputBinding {
+  return createInputBinding(BINDING_TYPES_BY_VALUE_TYPE[valueType][0]!);
 }
 
-function describeBinding(b: Binding): string {
-  switch (b.type) {
+export function createInputBinding(type: InputBinding['type']): InputBinding {
+  switch (type) {
     case 'key':
-      return b.code?.replace('Key', '') ?? 'Key';
+      return { type, code: 'Space' };
     case 'mouse_button':
-      return `Mouse ${b.button === 0 ? 'Left' : b.button === 1 ? 'Middle' : 'Right'}`;
+      return { type, button: 0 };
+    case 'mouse_move':
+      return { type };
     case 'gamepad_button':
-      return `Gamepad Button ${b.button}`;
+      return { type, button: 0 };
     case 'gamepad_axis':
-      return `Gamepad Axis ${b.axis}${b.direction ? ` ${b.direction}` : ''}`;
-    // No `mouse_move`/`gamepad_axis_pair` cases: those binding kinds are
-    // REJECTED at parse by InputMapFileSchema (T4.1/T4.6 dead stubs), so a
-    // file containing them never reaches this preview — it shows the
-    // invalid-file error state instead (R3, §7.2: this panel used to echo
-    // them from a raw fetch, past the schema).
-    default:
-      return b.type;
+      return { type, axis: 0, direction: 'positive', deadzone: 0.15 };
+    case 'gamepad_axis_pair':
+      return { type, xAxis: 0, yAxis: 1, deadzone: 0.15 };
+    case 'touch_button':
+      return { type, sourceId: 'button' };
+    case 'touch_stick':
+      return { type, sourceId: 'stick', deadzone: 0.15 };
+    case 'test_axis':
+      return { type, sourceId: 'axis', deadzone: 0.15 };
+    case 'test_vector2':
+      return { type, sourceId: 'vector', deadzone: 0.15 };
+    case 'test_pointer_delta':
+      return { type, sourceId: 'pointer-delta' };
+    case 'test_pointer_position':
+      return { type, sourceId: 'pointer-position' };
+  }
+}
+
+export function describeBinding(binding: InputBinding): string {
+  switch (binding.type) {
+    case 'key':
+      return binding.code;
+    case 'mouse_button':
+      return `Mouse button ${binding.button}`;
+    case 'mouse_move':
+      return 'Mouse movement';
+    case 'gamepad_button':
+      return `Gamepad button ${binding.button}`;
+    case 'gamepad_axis':
+      return `Gamepad axis ${binding.axis} ${binding.direction}`;
+    case 'gamepad_axis_pair':
+      return `Gamepad axes ${binding.xAxis}/${binding.yAxis}`;
+    case 'touch_button':
+      return `Touch button “${binding.sourceId}”`;
+    case 'touch_stick':
+      return `Touch stick “${binding.sourceId}”`;
+    case 'test_axis':
+    case 'test_vector2':
+    case 'test_pointer_delta':
+    case 'test_pointer_position':
+      return `${binding.type.replaceAll('_', ' ')} “${binding.sourceId}”`;
   }
 }
 
-/**
- * R3 (MASTER-ARCHITECTURE-REVIEW.md §7.2): the pure validate-before-preview
- * data path, exported for unit tests (the repo's component-test convention —
- * see network-inspector.test.ts: node environment, no jsdom; test the data
- * function the component renders from). The panel used to raw-fetch and
- * render whatever JSON came back — a file the runtime will reject (T4.6
- * fetch-validation) showed a normal-looking preview.
- */
 export function validateInputMapForViewer(
   json: unknown,
-): { ok: true; data: InputMapData } | { ok: false; issues: string[] } {
+): { ok: true; data: InputMapFile } | { ok: false; issues: string[] } {
   const result = InputMapFileSchema.safeParse(json);
-  if (!result.success) {
-    return {
-      ok: false,
-      issues: result.error.issues.map((i) => `${i.path.join('.') || '(root)'}: ${i.message}`),
-    };
-  }
-  // Render the original JSON (now proven valid) — the local view interfaces
-  // are a structural subset of InputMapFile.
-  return { ok: true, data: json as InputMapData };
+  // Preserve the authored bytes' optional/default shape; validation is the
+  // gate, while the editor presents `digital` when valueType is omitted.
+  if (result.success) return { ok: true, data: json as InputMapFile };
+  return {
+    ok: false,
+    issues: result.error.issues.map(
+      (issue) => `${issue.path.join('.') || '(root)'}: ${issue.message}`,
+    ),
+  };
+}
+
+export function renameInputAction(
+  inputMap: InputMapFile,
+  currentName: string,
+  requestedName: string,
+): InputMapFile | null {
+  if (requestedName === currentName) return inputMap;
+  if (requestedName.trim() === '' || inputMap.actions[requestedName]) return null;
+  const actions = { ...inputMap.actions };
+  const action = actions[currentName];
+  if (!action) return null;
+  delete actions[currentName];
+  actions[requestedName] = action;
+  return { ...inputMap, actions };
 }
 
-/** Loud invalid-file state: file name + first issues (a reusable asset-viewer error panel). */
+/** Loud invalid-file state shared by schema-backed asset editors. */
 export function AssetValidationError({
   kind,
   fileName,
@@ -80,21 +129,23 @@ export function AssetValidationError({
   fileName: string;
   issues: string[];
 }) {
-  const shown = issues.slice(0, 3);
+  const shown = issues.slice(0, 5);
   return (
     <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
-      <div style={{ color: '#F53352', fontSize: 12, fontWeight: 700 }}>
+      <div style={{ color: themeVars.semantic.danger, fontSize: 12, fontWeight: 700 }}>
         Invalid {kind} — the runtime will reject this file
       </div>
-      <div style={{ color: '#c5c8ce', fontSize: 11, wordBreak: 'break-all' }}>{fileName}</div>
+      <div style={{ color: themeVars.content.primary, fontSize: 11, wordBreak: 'break-all' }}>
+        {fileName}
+      </div>
       <div
         style={{
-          color: '#F53352',
+          color: themeVars.semantic.danger,
           fontSize: 11,
-          fontFamily: 'monospace',
+          fontFamily: themeVars.typography.mono,
           whiteSpace: 'pre-wrap',
-          border: '1px solid #F53352',
-          borderRadius: 3,
+          border: `1px solid ${themeVars.semantic.danger}`,
+          borderRadius: themeVars.shape.small,
           padding: 8,
         }}
       >
@@ -107,100 +158,427 @@ export function AssetValidationError({
   );
 }
 
-export function InputMapViewer({ assetPath }: { assetPath: string }) {
-  const [data, setData] = useState<InputMapData | null>(null);
-  const [error, setError] = useState(false);
-  const [invalid, setInvalid] = useState<string[] | null>(null);
+function NumberField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number | undefined;
+  onChange: (value: number | undefined) => void;
+}) {
+  return (
+    <label
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        fontSize: 10,
+        color: themeVars.content.muted,
+      }}
+    >
+      {label}
+      <TextInput
+        className="vgai-input"
+        type="number"
+        value={value ?? ''}
+        onChange={(event) =>
+          onChange(event.target.value === '' ? undefined : Number(event.target.value))
+        }
+        style={{ width: 68 }}
+      />
+    </label>
+  );
+}
+
+function BindingFields({
+  binding,
+  onChange,
+}: {
+  binding: InputBinding;
+  onChange: (binding: InputBinding) => void;
+}) {
+  const number = (label: string, key: 'button' | 'axis' | 'xAxis' | 'yAxis' | 'deadzone') => (
+    <NumberField
+      label={label}
+      value={(binding as unknown as Record<string, number | undefined>)[key]}
+      onChange={(value) => {
+        const next = { ...binding } as unknown as Record<string, unknown>;
+        if (value === undefined) delete next[key];
+        else next[key] = value;
+        onChange(next as unknown as InputBinding);
+      }}
+    />
+  );
+  if (binding.type === 'key') {
+    return (
+      <TextInput
+        aria-label="Keyboard code"
+        className="vgai-input"
+        value={binding.code}
+        onChange={(event) => onChange({ ...binding, code: event.target.value })}
+        style={{ width: 120 }}
+      />
+    );
+  }
+  if ('sourceId' in binding) {
+    return (
+      <>
+        <TextInput
+          aria-label="Source id"
+          className="vgai-input"
+          value={binding.sourceId}
+          onChange={(event) => onChange({ ...binding, sourceId: event.target.value })}
+          style={{ width: 120 }}
+        />
+        {'deadzone' in binding && number('Deadzone', 'deadzone')}
+      </>
+    );
+  }
+  switch (binding.type) {
+    case 'mouse_button':
+    case 'gamepad_button':
+      return number('Button', 'button');
+    case 'mouse_move':
+      return number('Deadzone', 'deadzone');
+    case 'gamepad_axis':
+      return (
+        <>
+          {number('Axis', 'axis')}
+          <Select
+            className="vgai-select"
+            aria-label="Axis direction"
+            value={binding.direction}
+            onChange={(event) =>
+              onChange({ ...binding, direction: event.target.value as 'positive' | 'negative' })
+            }
+          >
+            <option value="positive">positive</option>
+            <option value="negative">negative</option>
+          </Select>
+          {number('Deadzone', 'deadzone')}
+        </>
+      );
+    case 'gamepad_axis_pair':
+      return (
+        <>
+          {number('X axis', 'xAxis')}
+          {number('Y axis', 'yAxis')}
+          {number('Deadzone', 'deadzone')}
+        </>
+      );
+    default:
+      return null;
+  }
+}
+
+function BindingRow({
+  binding,
+  valueType,
+  onChange,
+  onRemove,
+}: {
+  binding: InputBinding;
+  valueType: ActionValueType;
+  onChange: (binding: InputBinding) => void;
+  onRemove: () => void;
+}) {
+  const compatibleTypes = compatibleBindingTypes(valueType);
+  const compatible = compatibleTypes.includes(binding.type);
+  const shownTypes = compatible
+    ? compatibleTypes
+    : [binding.type, ...compatibleTypes.filter((type) => type !== binding.type)];
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 6,
+        padding: 7,
+        background: themeVars.surface.inset,
+        border: `1px solid ${themeVars.boundary.default}`,
+        borderRadius: themeVars.shape.small,
+      }}
+    >
+      <Select
+        className="vgai-select"
+        aria-label="Binding type"
+        value={binding.type}
+        onChange={(event) =>
+          onChange(createInputBinding(event.target.value as InputBinding['type']))
+        }
+      >
+        {shownTypes.map((type) => (
+          <option key={type} value={type}>
+            {type}
+          </option>
+        ))}
+      </Select>
+      <BindingFields binding={binding} onChange={onChange} />
+      <span
+        title={describeBinding(binding)}
+        style={{
+          flex: 1,
+          minWidth: 100,
+          color: compatible ? themeVars.content.dim : themeVars.semantic.danger,
+          fontSize: 10,
+        }}
+      >
+        {describeBinding(binding)}
+        {!compatible && ` · not read by ${valueType} actions`}
+      </span>
+      <Button type="button" variant="danger" size="compact" onClick={onRemove}>
+        Remove
+      </Button>
+    </div>
+  );
+}
+
+export function InputMapViewer({
+  assetPath,
+  documentId = assetPath,
+}: {
+  assetPath: string;
+  documentId?: string;
+}) {
+  const [data, setData] = useState<InputMapFile | null>(null);
+  const [loadIssues, setLoadIssues] = useState<string[] | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+  const [revision, setRevision] = useState(0);
   const fileName = assetPath.split('/').pop() ?? assetPath;
 
+  useEffect(
+    () => subscribeProjectAsset(assetPath, () => setRevision((value) => value + 1)),
+    [assetPath],
+  );
   useEffect(() => {
     let cancelled = false;
     setData(null);
-    setError(false);
-    setInvalid(null);
-    fetch(resolveUrl(assetPath))
-      .then((r) => r.json())
+    setLoadIssues(null);
+    fetch(resolveUrl(assetPath), { cache: 'no-store' })
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
       .then((json) => {
         if (cancelled) return;
         const result = validateInputMapForViewer(json);
-        if (result.ok) setData(result.data);
-        else setInvalid(result.issues);
+        if (result.ok) {
+          setData(result.data);
+          setWorkspaceDocumentDirty(documentId, false);
+        } else setLoadIssues(result.issues);
       })
-      .catch(() => {
-        if (!cancelled) setError(true);
+      .catch((reason) => {
+        if (!cancelled) setLoadIssues([reason instanceof Error ? reason.message : String(reason)]);
       });
     return () => {
       cancelled = true;
     };
-  }, [assetPath]);
+  }, [assetPath, documentId, revision]);
 
-  if (error) {
-    return <div style={{ padding: 16, color: '#F53352', fontSize: 12 }}>Failed to load file</div>;
-  }
-  if (invalid) {
-    return <AssetValidationError kind="input map" fileName={fileName} issues={invalid} />;
-  }
-  if (!data) {
-    return <div style={{ padding: 16, color: '#8c8c8c', fontSize: 12 }}>Loading...</div>;
-  }
+  const change = (next: InputMapFile) => {
+    setData(next);
+    setSaved(false);
+    setSaveError(null);
+    setWorkspaceDocumentDirty(documentId, true);
+  };
 
-  const actions = data.actions ? Object.entries(data.actions) : [];
+  const save = useCallback(async (): Promise<boolean> => {
+    if (!data) return false;
+    const result = validateInputMapForViewer(data);
+    if (!result.ok) {
+      setSaveError(result.issues.join('\n'));
+      return false;
+    }
+    try {
+      const ok = await writeProjectAsset(assetPath, `${JSON.stringify(result.data, null, 2)}\n`, {
+        label: `Edit ${fileName}`,
+        kind: 'settings',
+      });
+      if (!ok) throw new Error('The project history rejected the input-map write.');
+      setData(result.data);
+      setWorkspaceDocumentDirty(documentId, false);
+      setSaved(true);
+      return true;
+    } catch (reason) {
+      setSaveError(reason instanceof Error ? reason.message : String(reason));
+      return false;
+    }
+  }, [assetPath, data, documentId, fileName]);
+
+  useEffect(() => registerWorkspaceDocumentSaveHandler(documentId, save), [documentId, save]);
+
+  if (loadIssues)
+    return <AssetValidationError kind="input map" fileName={fileName} issues={loadIssues} />;
+  if (!data)
+    return (
+      <div style={{ padding: 16, color: themeVars.content.muted, fontSize: 12 }}>Loading…</div>
+    );
+
+  const entries = Object.entries(data.actions);
+  const updateAction = (name: string, valueType: ActionValueType, bindings: InputBinding[]) => {
+    const actions = { ...data.actions };
+    actions[name] = { valueType, bindings };
+    change({ ...data, actions });
+  };
 
   return (
-    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
-        {fileName}
+    <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <div style={{ color: themeVars.content.primary, fontSize: 13, fontWeight: 600, flex: 1 }}>
+          {fileName}
+        </div>
+        <span style={{ color: themeVars.content.dim, fontSize: 10 }}>version {data.version}</span>
+        {saved && <span style={{ color: themeVars.semantic.success, fontSize: 11 }}>Saved</span>}
+        <Button type="button" variant="primary" size="compact" onClick={() => void save()}>
+          Save
+        </Button>
       </div>
-
-      <SectionHeader label="Actions">
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          {actions.map(([name, action]) => (
-            <div
-              key={name}
-              style={{ ...cellStyle, display: 'flex', flexDirection: 'column', gap: 2 }}
-            >
-              <span style={{ fontWeight: 600 }}>{name}</span>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
-                {action.bindings.map((b, i) => (
-                  <span
-                    key={i}
-                    style={{
-                      background: '#333',
-                      border: '1px solid #444',
-                      borderRadius: 3,
-                      padding: '1px 6px',
-                      fontSize: 10,
-                      color: '#c5c8ce',
-                    }}
-                  >
-                    {describeBinding(b)}
-                  </span>
+      {entries.map(([name, action]) => {
+        const valueType = action.valueType ?? 'digital';
+        return (
+          <section
+            key={name}
+            style={{
+              border: `1px solid ${themeVars.boundary.default}`,
+              borderRadius: themeVars.shape.medium,
+              background: themeVars.surface.chrome,
+              padding: 9,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 7,
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+              <TextInput
+                aria-label="Action name"
+                className="vgai-input"
+                defaultValue={name}
+                onBlur={(event) => {
+                  const renamed = renameInputAction(data, name, event.target.value);
+                  if (renamed) {
+                    if (renamed !== data) change(renamed);
+                    return;
+                  }
+                  event.target.value = name;
+                  setSaveError('Action names must be non-empty and unique.');
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') event.currentTarget.blur();
+                  if (event.key === 'Escape') {
+                    event.currentTarget.value = name;
+                    event.currentTarget.blur();
+                  }
+                }}
+                style={{ flex: 1, minWidth: 120, fontWeight: 600 }}
+              />
+              <Select
+                aria-label="Action value type"
+                className="vgai-select"
+                value={valueType}
+                onChange={(event) =>
+                  updateAction(name, event.target.value as ActionValueType, action.bindings)
+                }
+              >
+                {VALUE_TYPES.map((type) => (
+                  <option key={type} value={type}>
+                    {type}
+                  </option>
                 ))}
-              </div>
+              </Select>
+              <Button
+                type="button"
+                variant="danger"
+                size="compact"
+                onClick={() => {
+                  const actions = { ...data.actions };
+                  delete actions[name];
+                  change({ ...data, actions });
+                }}
+              >
+                Delete action
+              </Button>
             </div>
-          ))}
-          {actions.length === 0 && (
-            <div style={{ fontSize: 11, color: '#8c8c8c', padding: 4 }}>No actions defined</div>
-          )}
-        </div>
-      </SectionHeader>
-
-      <SectionHeader label="Info" defaultOpen={false}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-          <div>
-            <div style={labelStyle}>Path</div>
-            <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>
-              {assetPath}
-            </div>
-          </div>
-          {data.version != null && (
-            <div>
-              <div style={labelStyle}>Version</div>
-              <div style={{ fontSize: 11, color: '#c5c8ce' }}>{data.version}</div>
-            </div>
-          )}
-        </div>
-      </SectionHeader>
+            {action.bindings.map((binding, index) => (
+              <BindingRow
+                key={`${binding.type}:${index}`}
+                binding={binding}
+                valueType={valueType}
+                onChange={(nextBinding) =>
+                  updateAction(
+                    name,
+                    valueType,
+                    action.bindings.map((item, itemIndex) =>
+                      itemIndex === index ? nextBinding : item,
+                    ),
+                  )
+                }
+                onRemove={() =>
+                  updateAction(
+                    name,
+                    valueType,
+                    action.bindings.filter((_, itemIndex) => itemIndex !== index),
+                  )
+                }
+              />
+            ))}
+            <Button
+              type="button"
+              variant="secondary"
+              size="compact"
+              onClick={() =>
+                updateAction(name, valueType, [
+                  ...action.bindings,
+                  createInputBindingForValueType(valueType),
+                ])
+              }
+              style={{ alignSelf: 'flex-start' }}
+            >
+              + Add binding
+            </Button>
+          </section>
+        );
+      })}
+      <Button
+        type="button"
+        variant="primary"
+        size="compact"
+        onClick={() => {
+          let index = entries.length + 1;
+          while (data.actions[`action_${index}`]) index++;
+          change({
+            ...data,
+            actions: {
+              ...data.actions,
+              [`action_${index}`]: { valueType: 'digital', bindings: [] },
+            },
+          });
+        }}
+        style={{ alignSelf: 'flex-start' }}
+      >
+        + Add action
+      </Button>
+      {entries.length === 0 && (
+        <div style={{ color: themeVars.content.dim, fontSize: 11 }}>No actions defined.</div>
+      )}
+      {saveError && (
+        <pre
+          style={{
+            margin: 0,
+            color: themeVars.semantic.danger,
+            fontFamily: themeVars.typography.mono,
+            whiteSpace: 'pre-wrap',
+            fontSize: 10,
+          }}
+        >
+          {saveError}
+        </pre>
+      )}
+      <div style={{ color: themeVars.content.dim, fontSize: 10, wordBreak: 'break-all' }}>
+        {assetPath}
+      </div>
     </div>
   );
 }