@vgai/editor 0.2.0

package/src/components/primitives/JsonInput.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Type-preserving JSON input for the component inspector's raw path.
+ *
+ * Same invariant as DataPanel's `JsonCell` (W2 hardening, fd9f450c), kept as
+ * a separate primitive on purpose — the inspector writes the in-memory scene
+ * store, DataPanel writes files; the two systems stay uncoupled:
+ * **a commit must never widen a typed value into a JSON string.**
+ * `commit()` parses the draft and hands `onCommit` the PARSED value; on parse
+ * failure it REFUSES — draft kept, error shown, no write. Unlike the sibling
+ * keystroke-live inputs, this commits on blur/Enter only (mid-edit JSON is
+ * almost always invalid).
+ */
+export function JsonInput({
+  value,
+  onCommit,
+  style,
+}: {
+  value: unknown;
+  onCommit: (value: unknown) => void;
+  style?: React.CSSProperties;
+}) {
+  const display = value === undefined ? '' : JSON.stringify(value);
+  const [draft, setDraft] = useState(display);
+  const [invalid, setInvalid] = useState(false);
+  // Escape below calls `.blur()` imperatively to drop focus, which fires the
+  // native blur/focusout event SYNCHRONOUSLY, inside the same handler/render —
+  // so the resulting `onBlur={commit}` call closes over the PRE-revert
+  // `draft`/`display` (React hasn't re-rendered yet) and would re-derive
+  // `invalid: true` right after Escape just cleared it. This ref lets Escape
+  // tell the nested commit to no-op instead of racing it.
+  const revertingRef = useRef(false);
+
+  // Re-sync when the underlying value changes (undo, another widget, reload).
+  useEffect(() => {
+    setDraft(display);
+    setInvalid(false);
+  }, [display]);
+
+  const commit = () => {
+    if (revertingRef.current) {
+      revertingRef.current = false;
+      return;
+    }
+    if (draft === display) {
+      setInvalid(false);
+      return;
+    }
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(draft);
+    } catch {
+      setInvalid(true); // refuse: keep the draft, no onCommit, no write
+      return;
+    }
+    setInvalid(false);
+    onCommit(parsed);
+  };
+
+  return (
+    <div>
+      <input
+        data-testid="json-input"
+        value={draft}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          if (invalid) setInvalid(false);
+        }}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commit();
+          } else if (e.key === 'Escape') {
+            revertingRef.current = true;
+            setDraft(display);
+            setInvalid(false);
+            (e.target as HTMLInputElement).blur();
+          }
+        }}
+        style={invalid ? { ...style, borderColor: '#FF6B6B', color: '#FF6B6B' } : style}
+        title={
+          invalid
+            ? 'Not valid JSON — nothing written. Fix the JSON or press Escape to revert.'
+            : undefined
+        }
+      />
+      {invalid && (
+        <div
+          data-testid="json-input-error"
+          style={{ fontSize: 10, color: '#FF6B6B', marginTop: 2 }}
+        >
+          Not valid JSON — nothing written. Fix the JSON or press Escape to revert.
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/primitives/NumberInput.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useRef, useState } from 'react';
+import { useInteractiveEditScope } from '../../interactive-edit-scope';
+
+interface NumberInputProps {
+  value: number | null; // null = mixed (multi-edit)
+  onChange: (value: number) => void;
+  /**
+   * Fires once per discrete edit gesture — a drag's pointerup (with the
+   * drag's FINAL value) or a typed edit's blur/Enter — instead of on every
+   * intermediate `onChange` call (which still fires on every pointermove
+   * during a drag, for callers that want live feedback as the value moves).
+   * Optional: existing callers that only wired `onChange` are unaffected. A
+   * caller whose `onChange` triggers something expensive per call (a file
+   * write, a network POST — see DataPanel's DATA-tab number cells, #3)
+   * should commit through THIS instead, so a 2-second scrub fires exactly
+   * one commit, not dozens.
+   */
+  onChangeEnd?: (value: number) => void;
+  step?: number;
+  label?: string;
+  labelColor?: string;
+  style?: React.CSSProperties;
+  /** Stable test hook (set on the wrapper; the edit <input> is its descendant). */
+  testId?: string | undefined;
+}
+
+export function NumberInput({
+  value,
+  onChange,
+  onChangeEnd,
+  step = 0.1,
+  label,
+  labelColor,
+  style,
+  testId,
+}: NumberInputProps) {
+  const [editing, setEditing] = useState(false);
+  const [text, setText] = useState('');
+  const dragRef = useRef({ startX: 0, startVal: 0, dragging: false, gesture: false, lastVal: 0 });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const editScope = useInteractiveEditScope();
+
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  const isMixed = value === null;
+  const numValue = value ?? 0;
+  const display = isMixed ? '—' : Number.isFinite(numValue) ? numValue.toFixed(3) : '0.000';
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    dragRef.current = {
+      startX: e.clientX,
+      startVal: numValue,
+      dragging: false,
+      gesture: false,
+      lastVal: numValue,
+    };
+    const onMove = (me: PointerEvent) => {
+      const dx = me.clientX - dragRef.current.startX;
+      if (Math.abs(dx) > 3) dragRef.current.dragging = true;
+      if (dragRef.current.dragging) {
+        // Coalesce the whole scrub into a single undo step: open the gesture
+        // just before the first value change (so the snapshot is pre-drag).
+        if (!dragRef.current.gesture) {
+          dragRef.current.gesture = true;
+          editScope?.begin();
+        }
+        const newVal = dragRef.current.startVal + dx * step;
+        const rounded = Math.round(newVal / step) * step;
+        dragRef.current.lastVal = rounded;
+        onChange(rounded);
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      if (dragRef.current.gesture) editScope?.end();
+      if (dragRef.current.dragging) {
+        // One commit for the whole gesture (#3) — `onChange` above already
+        // fired per pointermove for callers that want live feedback; this is
+        // the single "the user is done" signal, with the drag's final value.
+        onChangeEnd?.(dragRef.current.lastVal);
+      } else {
+        setEditing(true);
+        setText(isMixed ? '' : display);
+      }
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  };
+
+  const commitEdit = () => {
+    setEditing(false);
+    const n = Number.parseFloat(text);
+    if (Number.isFinite(n)) {
+      onChange(n);
+      onChangeEnd?.(n);
+    }
+  };
+
+  return (
+    <div data-testid={testId} style={{ display: 'flex', alignItems: 'center', gap: 2, ...style }}>
+      {label && (
+        <span
+          style={{
+            fontSize: 10,
+            fontWeight: 700,
+            color: labelColor ?? '#8c8c8c',
+            width: 12,
+            textAlign: 'center',
+            userSelect: 'none',
+          }}
+        >
+          {label}
+        </span>
+      )}
+      {editing ? (
+        <input
+          ref={inputRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onBlur={commitEdit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') commitEdit();
+            if (e.key === 'Escape') setEditing(false);
+          }}
+          placeholder={isMixed ? '—' : undefined}
+          style={{
+            width: '100%',
+            background: '#1e1e1e',
+            color: '#c5c8ce',
+            border: '1px solid #579EFF',
+            borderRadius: 2,
+            padding: '2px 4px',
+            fontSize: 12,
+            outline: 'none',
+          }}
+        />
+      ) : (
+        <div
+          onPointerDown={handlePointerDown}
+          style={{
+            width: '100%',
+            background: '#1e1e1e',
+            border: '1px solid #333',
+            borderRadius: 2,
+            padding: '2px 4px',
+            fontSize: 12,
+            cursor: 'ew-resize',
+            userSelect: 'none',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: isMixed ? '#666' : undefined,
+            fontStyle: isMixed ? 'italic' : undefined,
+          }}
+        >
+          {display}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/primitives/Panel.tsx

@@ -0,0 +1,68 @@
+import type React from 'react';
+
+interface PanelOwnProps {
+  name: React.ReactNode;
+  actions?: React.ReactNode;
+  onHeaderClick?: () => void;
+}
+
+type PanelProps = PanelOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof PanelOwnProps>;
+
+export function Panel({ name, actions, onHeaderClick, style, children, ...rest }: PanelProps) {
+  return (
+    <div
+      {...rest}
+      style={{
+        background: '#242424',
+        display: 'flex',
+        flexDirection: 'column',
+        pointerEvents: 'auto',
+        ...style,
+      }}
+    >
+      {/* Header */}
+      <div
+        role={onHeaderClick ? 'button' : undefined}
+        tabIndex={onHeaderClick ? 0 : undefined}
+        onClick={onHeaderClick}
+        onKeyDown={
+          onHeaderClick
+            ? (e) => {
+                if (e.key === 'Enter') onHeaderClick();
+              }
+            : undefined
+        }
+        style={{
+          padding: '4px 8px',
+          background: '#2c2c2c',
+          borderBottom: '1px solid #333',
+          fontWeight: 600,
+          fontSize: 11,
+          textTransform: 'uppercase',
+          color: '#8c8c8c',
+          display: 'flex',
+          alignItems: 'center',
+          flexShrink: 0,
+          cursor: onHeaderClick ? 'pointer' : undefined,
+          userSelect: 'none',
+          pointerEvents: 'auto',
+        }}
+      >
+        <span style={{ flexShrink: 0 }}>{name}</span>
+        {actions && (
+          <div
+            style={{
+              marginLeft: 'auto',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+            }}
+          >
+            {actions}
+          </div>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/components/primitives/SectionHeader.tsx

@@ -0,0 +1,45 @@
+import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+
+interface SectionHeaderProps {
+  label: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export function SectionHeader({ label, defaultOpen = true, children }: SectionHeaderProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div style={{ borderBottom: '1px solid #333' }}>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen(!open)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setOpen(!open);
+          }
+        }}
+        style={{
+          padding: '6px 8px',
+          cursor: 'pointer',
+          fontWeight: 600,
+          fontSize: 11,
+          textTransform: 'uppercase',
+          color: '#8c8c8c',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          userSelect: 'none',
+        }}
+      >
+        <FontAwesomeIcon icon={open ? faChevronDown : faChevronRight} style={{ fontSize: 8 }} />
+        {label}
+      </div>
+      {open && <div style={{ padding: '0 8px 8px' }}>{children}</div>}
+    </div>
+  );
+}

package/src/components/primitives/Tooltip.tsx

@@ -0,0 +1,82 @@
+import { useRef, useState } from 'react';
+
+interface TooltipProps {
+  text: string;
+  hotkey?: string;
+  children: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+}
+
+const positionStyles: Record<string, React.CSSProperties> = {
+  bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 6 },
+  top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 6 },
+  left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 6 },
+  right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 6 },
+};
+
+export function Tooltip({
+  text,
+  hotkey,
+  children,
+  position = 'bottom',
+  delay = 400,
+}: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>(null);
+
+  const show = () => {
+    timer.current = setTimeout(() => setVisible(true), delay);
+  };
+
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setVisible(false);
+  };
+
+  return (
+    <div
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      style={{ position: 'relative', display: 'inline-flex' }}
+    >
+      {children}
+      {visible && (
+        <div
+          style={{
+            position: 'absolute',
+            ...positionStyles[position],
+            background: '#1e1e1e',
+            border: '1px solid #555',
+            borderRadius: 4,
+            padding: '4px 8px',
+            zIndex: 10000,
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.6)',
+          }}
+        >
+          <span style={{ fontSize: 11, color: '#c5c8ce' }}>{text}</span>
+          {hotkey && (
+            <kbd
+              style={{
+                background: '#333',
+                border: '1px solid #555',
+                borderRadius: 3,
+                padding: '1px 5px',
+                fontFamily: 'monospace',
+                fontSize: 10,
+                color: '#ccc',
+              }}
+            >
+              {hotkey}
+            </kbd>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/primitives/Vec3Input.tsx

@@ -0,0 +1,62 @@
+import { NumberInput } from './NumberInput';
+
+interface Vec3InputProps {
+  value: [number | null, number | null, number | null];
+  onChange: (value: [number, number, number]) => void;
+  /** Per-axis callback for multi-edit. When provided, takes priority over onChange. */
+  onAxisChange?: (axis: 0 | 1 | 2, value: number) => void;
+  step?: number;
+  /** When set, each axis field gets `data-testid="{prefix}-x|y|z"` for e2e. */
+  testIdPrefix?: string | undefined;
+}
+
+export function Vec3Input({
+  value,
+  onChange,
+  onAxisChange,
+  step = 0.1,
+  testIdPrefix,
+}: Vec3InputProps) {
+  const tid = (axis: 'x' | 'y' | 'z') => (testIdPrefix ? `${testIdPrefix}-${axis}` : undefined);
+  const handleAxis = (axis: 0 | 1 | 2) => (v: number) => {
+    if (onAxisChange) {
+      onAxisChange(axis, v);
+    } else {
+      const tuple: [number, number, number] = [value[0] ?? 0, value[1] ?? 0, value[2] ?? 0];
+      tuple[axis] = v;
+      onChange(tuple);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: 4 }}>
+      <NumberInput
+        label="X"
+        labelColor="#E06178"
+        value={value[0]}
+        onChange={handleAxis(0)}
+        step={step}
+        style={{ flex: 1 }}
+        testId={tid('x')}
+      />
+      <NumberInput
+        label="Y"
+        labelColor="#C2ED66"
+        value={value[1]}
+        onChange={handleAxis(1)}
+        step={step}
+        style={{ flex: 1 }}
+        testId={tid('y')}
+      />
+      <NumberInput
+        label="Z"
+        labelColor="#6BABF5"
+        value={value[2]}
+        onChange={handleAxis(2)}
+        step={step}
+        style={{ flex: 1 }}
+        testId={tid('z')}
+      />
+    </div>
+  );
+}