@vgai/editor 0.2.0

package/src/components/inspectors/CameraSection.tsx

@@ -0,0 +1,105 @@
+import type { SceneCamera } from '@engine/scene/scene-types';
+import { useEditorStore } from '../../EditorContext';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Tooltip } from '../primitives/Tooltip';
+import type { SectionProps } from './multi-edit-utils';
+import { commonNum, commonStr } from './multi-edit-utils';
+
+const cameraTypes: SceneCamera['type'][] = ['perspective', 'orthographic'];
+
+export function CameraSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  if (!entities.every((e) => e.camera)) return null;
+
+  const camType = commonStr(entities, (e) => e.camera?.type);
+  const near = commonNum(entities, (e) => e.camera?.near ?? 0.1);
+  const far = commonNum(entities, (e) => e.camera?.far ?? 1000);
+  const width = commonNum(entities, (e) => e.camera?.width ?? 1920);
+  const height = commonNum(entities, (e) => e.camera?.height ?? 1080);
+
+  const update = (partial: Partial<SceneCamera>) => {
+    store.batchMutate(ids, (entity) => {
+      if (entity.camera) Object.assign(entity.camera, partial);
+    });
+  };
+
+  return (
+    <SectionHeader label="Camera">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Type</div>
+          <select
+            value={camType ?? ''}
+            onChange={(e) => update({ type: e.target.value as SceneCamera['type'] })}
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              color: camType === null ? '#666' : '#c5c8ce',
+              fontStyle: camType === null ? 'italic' : 'normal',
+              border: '1px solid #333',
+              borderRadius: 2,
+              padding: '3px 4px',
+              fontSize: 12,
+            }}
+          >
+            {camType === null && (
+              <option value="" disabled>
+                (mixed)
+              </option>
+            )}
+            {cameraTypes.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+        {camType === 'perspective' && (
+          <div>
+            <Tooltip text="Vertical field of view in degrees" position="right">
+              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>FOV (deg)</div>
+            </Tooltip>
+            <NumberInput
+              value={commonNum(entities, (e) => e.camera?.fov ?? 60)}
+              onChange={(v) => update({ fov: v })}
+              step={1}
+            />
+          </div>
+        )}
+        {camType === 'orthographic' && (
+          <div>
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Ortho Size</div>
+            <NumberInput
+              value={commonNum(entities, (e) => e.camera?.orthoSize ?? 5)}
+              onChange={(v) => update({ orthoSize: v })}
+              step={0.5}
+            />
+          </div>
+        )}
+        <div>
+          <Tooltip text="Nearest visible distance" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Near</div>
+          </Tooltip>
+          <NumberInput value={near} onChange={(v) => update({ near: v })} step={0.1} />
+        </div>
+        <div>
+          <Tooltip text="Farthest visible distance" position="right">
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Far</div>
+          </Tooltip>
+          <NumberInput value={far} onChange={(v) => update({ far: v })} step={10} />
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Width</div>
+            <NumberInput value={width} onChange={(v) => update({ width: v })} step={1} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Height</div>
+            <NumberInput value={height} onChange={(v) => update({ height: v })} step={1} />
+          </div>
+        </div>
+      </div>
+    </SectionHeader>
+  );
+}

package/src/components/inspectors/ComponentsSection.tsx

@@ -0,0 +1,358 @@
+import type { SceneEntity } from '@engine/scene/scene-types';
+import { useEditorStore } from '../../EditorContext';
+import { getLoadedComponents } from '../../script-loader';
+import { ColorInput } from '../primitives/ColorInput';
+import { JsonInput } from '../primitives/JsonInput';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Tooltip } from '../primitives/Tooltip';
+import { Vec3Input } from '../primitives/Vec3Input';
+import type { SectionProps } from './multi-edit-utils';
+import { type FieldDescriptor, introspectSchema } from './zod-fields';
+
+type ComponentMap = NonNullable<SceneEntity['components']>;
+type ComponentData = Record<string, unknown>;
+
+const inputStyle: React.CSSProperties = {
+  flex: 1,
+  background: '#1e1e1e',
+  color: '#c5c8ce',
+  border: '1px solid #333',
+  borderRadius: 2,
+  padding: '2px 4px',
+  fontSize: 12,
+};
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#8c8c8c',
+  width: 70,
+  flexShrink: 0,
+};
+
+export function ComponentsSection({ entities }: SectionProps) {
+  const store = useEditorStore();
+  if (entities.length !== 1) return null;
+  const entity = entities[0]!;
+  const id = entity.id!;
+  const components = (entity.components ?? {}) as Record<string, ComponentData>;
+  const componentNames = Object.keys(components);
+
+  // Loaded project component classes (with optional `static schema`).
+  const classes = getLoadedComponents();
+
+  // Component names that have a schema and could be added to this entity.
+  const addable = Object.keys(classes)
+    .filter((name) => classes[name]?.schema && !(name in components))
+    .sort();
+
+  if (componentNames.length === 0 && addable.length === 0) return null;
+
+  /** Write a single field value, preserving the rest of the component data. */
+  const setField = (compName: string, key: string, value: unknown) => {
+    const next: Record<string, ComponentData> = {
+      ...components,
+      [compName]: { ...components[compName], [key]: value },
+    };
+    store.updateEntity(id, { components: next as unknown as ComponentMap });
+  };
+
+  const addComponent = (compName: string) => {
+    const schema = classes[compName]?.schema;
+    const data: ComponentData = {};
+    if (schema) {
+      for (const f of introspectSchema(schema)) {
+        if (f.default !== undefined) data[f.name] = f.default;
+      }
+    }
+    const next: Record<string, ComponentData> = { ...components, [compName]: data };
+    store.updateEntity(id, { components: next as unknown as ComponentMap });
+  };
+
+  const removeComponent = (compName: string) => {
+    const next = { ...components };
+    delete next[compName];
+    store.updateEntity(id, { components: next as unknown as ComponentMap });
+  };
+
+  return (
+    <SectionHeader label="Components">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {componentNames.map((compName) => {
+          const data = components[compName] ?? {};
+          const schema = classes[compName]?.schema;
+          const fields = schema ? introspectSchema(schema) : null;
+
+          return (
+            <div key={compName} data-testid={`component-section-${compName}`}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginBottom: 4,
+                }}
+              >
+                <span style={{ fontSize: 11, fontWeight: 600, color: '#b0b0b0' }}>{compName}</span>
+                <button
+                  type="button"
+                  title="Remove component"
+                  data-testid={`component-remove-${compName}`}
+                  onClick={() => removeComponent(compName)}
+                  style={{
+                    background: 'transparent',
+                    border: 'none',
+                    color: '#777',
+                    cursor: 'pointer',
+                    fontSize: 12,
+                    lineHeight: 1,
+                    padding: 0,
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+
+              {fields
+                ? renderSchemaFields(compName, fields, data, setField)
+                : renderRawFields(compName, data, setField)}
+            </div>
+          );
+        })}
+
+        {addable.length > 0 && (
+          <select
+            data-testid="component-add"
+            value=""
+            onChange={(e) => {
+              if (e.target.value) addComponent(e.target.value);
+            }}
+            style={{ ...inputStyle, cursor: 'pointer' }}
+          >
+            <option value="">+ Add component…</option>
+            {addable.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+    </SectionHeader>
+  );
+}
+
+/** Schema-driven path: render a typed widget per descriptor. */
+function renderSchemaFields(
+  compName: string,
+  fields: FieldDescriptor[],
+  data: ComponentData,
+  setField: (compName: string, key: string, value: unknown) => void,
+) {
+  const known = new Set(fields.map((f) => f.name));
+  // Any values present on the component but absent from the schema still get an
+  // editable raw row so authored data is never silently hidden.
+  const extras = Object.keys(data).filter((k) => !known.has(k));
+
+  return (
+    <>
+      {fields.map((f) => {
+        const value = f.name in data ? data[f.name] : f.default;
+        return (
+          <FieldRow key={f.name} name={f.name} description={f.description}>
+            {renderWidget(compName, f, value, setField)}
+          </FieldRow>
+        );
+      })}
+      {extras.map((key) => (
+        <FieldRow key={key} name={key}>
+          <RawInput compName={compName} fieldKey={key} value={data[key]} setField={setField} />
+        </FieldRow>
+      ))}
+    </>
+  );
+}
+
+/** Fallback path: the original typeof-based rendering, unchanged in spirit. */
+function renderRawFields(
+  compName: string,
+  data: ComponentData,
+  setField: (compName: string, key: string, value: unknown) => void,
+) {
+  return (
+    <>
+      {Object.entries(data).map(([key, val]) => (
+        <FieldRow key={key} name={key}>
+          <RawInput compName={compName} fieldKey={key} value={val} setField={setField} />
+        </FieldRow>
+      ))}
+    </>
+  );
+}
+
+function FieldRow({
+  name,
+  description,
+  children,
+}: {
+  name: string;
+  description?: string | undefined;
+  children: React.ReactNode;
+}) {
+  const label = <span style={labelStyle}>{name}</span>;
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }}>
+      {description ? (
+        <Tooltip text={description} position="right">
+          {label}
+        </Tooltip>
+      ) : (
+        label
+      )}
+      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
+    </div>
+  );
+}
+
+/**
+ * Stable e2e/test hook for a component field widget — `component-field-<Comp>.<field>`,
+ * mirroring the Data panel's `data-field-${fieldPath.join('.')}` grammar
+ * (DataPanel.tsx) so the two inspectors are locatable the same way.
+ */
+function fieldTestId(compName: string, fieldName: string): string {
+  return `component-field-${compName}.${fieldName}`;
+}
+
+function renderWidget(
+  compName: string,
+  f: FieldDescriptor,
+  value: unknown,
+  setField: (compName: string, key: string, value: unknown) => void,
+) {
+  const testId = fieldTestId(compName, f.name);
+  switch (f.kind) {
+    case 'number':
+      return (
+        <NumberInput
+          value={typeof value === 'number' ? value : Number(value) || 0}
+          onChange={(v) => setField(compName, f.name, v)}
+          testId={testId}
+        />
+      );
+    case 'boolean':
+      return (
+        <input
+          type="checkbox"
+          data-testid={testId}
+          checked={Boolean(value)}
+          onChange={(e) => setField(compName, f.name, e.target.checked)}
+        />
+      );
+    case 'color':
+      return (
+        <div data-testid={testId}>
+          <ColorInput
+            value={typeof value === 'string' ? value : '#ffffff'}
+            onChange={(v) => setField(compName, f.name, v)}
+          />
+        </div>
+      );
+    case 'vec3': {
+      const arr = Array.isArray(value) ? value : [0, 0, 0];
+      return (
+        <Vec3Input
+          value={[Number(arr[0]) || 0, Number(arr[1]) || 0, Number(arr[2]) || 0]}
+          onChange={(v) => setField(compName, f.name, v)}
+          testIdPrefix={testId}
+        />
+      );
+    }
+    case 'enum':
+    case 'select':
+      return (
+        <select
+          data-testid={testId}
+          value={value == null ? '' : String(value)}
+          onChange={(e) => setField(compName, f.name, e.target.value)}
+          style={{ ...inputStyle, cursor: 'pointer' }}
+        >
+          {(f.options ?? []).map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      );
+    default:
+      return (
+        <RawInput
+          compName={compName}
+          fieldKey={f.name}
+          value={value}
+          setField={setField}
+          testId={testId}
+        />
+      );
+  }
+}
+
+/** Type-preserving text/checkbox input matching the legacy behavior. */
+function RawInput({
+  compName,
+  fieldKey,
+  value,
+  setField,
+  testId,
+}: {
+  compName: string;
+  fieldKey: string;
+  value: unknown;
+  setField: (compName: string, key: string, value: unknown) => void;
+  testId?: string;
+}) {
+  const id = testId ?? fieldTestId(compName, fieldKey);
+  if (typeof value === 'boolean') {
+    return (
+      <input
+        type="checkbox"
+        data-testid={id}
+        checked={value}
+        onChange={(e) => setField(compName, fieldKey, e.target.checked)}
+      />
+    );
+  }
+  if (typeof value === 'object' && value !== null) {
+    // Object/array-valued field: parse-refuse JSON commit (never widen to a
+    // string — the W2 invariant, see primitives/JsonInput.tsx). Commits on
+    // blur/Enter, unlike the keystroke-live branches below.
+    // `JsonInput` hardcodes its own `data-testid="json-input"` internally
+    // (kept untouched) — wrap it in the same DataPanel idiom (DataPanel.tsx
+    // ColorInput wrapper) so this field is still locatable by the house grammar.
+    return (
+      <div data-testid={id}>
+        <JsonInput
+          value={value}
+          onCommit={(v) => setField(compName, fieldKey, v)}
+          style={inputStyle}
+        />
+      </div>
+    );
+  }
+  const display = value === null || value === undefined ? '' : String(value);
+  return (
+    <input
+      data-testid={id}
+      value={display}
+      onChange={(e) => {
+        const raw = e.target.value;
+        if (typeof value === 'number') {
+          const n = Number.parseFloat(raw);
+          setField(compName, fieldKey, Number.isFinite(n) ? n : 0);
+        } else {
+          setField(compName, fieldKey, raw);
+        }
+      }}
+      style={inputStyle}
+    />
+  );
+}