@vgai/editor 0.2.0

package/src/components/Toolbar.tsx

@@ -0,0 +1,307 @@
+import {
+  faArrowsUpDownLeftRight,
+  faCaretDown,
+  faCrosshairs,
+  faCube,
+  faGlobe,
+  faMagnet,
+  faMaximize,
+  faRotate,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useRef, useState } from 'react';
+import { useEditorStore } from '../EditorContext';
+import type { EditorStore, PivotMode, TransformMode } from '../editor-store';
+import { Tooltip } from './primitives/Tooltip';
+
+// --- Shared styles ---
+
+const btnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '4px 10px',
+  cursor: 'pointer',
+  fontSize: '12px',
+  lineHeight: '18px',
+};
+
+const activeBtnStyle: React.CSSProperties = {
+  ...btnStyle,
+  background: '#579EFF',
+  border: '1px solid #6AADFF',
+  color: '#fff',
+};
+
+const sepStyle: React.CSSProperties = {
+  width: 1,
+  height: 20,
+  background: '#444',
+  margin: '0 6px',
+};
+
+// --- ToolStrip (floating over viewport) ---
+
+const toolBtnStyle: React.CSSProperties = {
+  ...btnStyle,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 5,
+  padding: '4px 8px',
+};
+
+const activeToolBtnStyle: React.CSSProperties = {
+  ...activeBtnStyle,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 5,
+  padding: '4px 8px',
+};
+
+function ModeButton({
+  mode,
+  faIcon,
+  shortcut,
+  label,
+  store,
+}: {
+  mode: TransformMode;
+  faIcon: typeof faArrowsUpDownLeftRight;
+  shortcut: string;
+  label: string;
+  store: EditorStore;
+}) {
+  const active = store.transformMode === mode;
+  return (
+    <Tooltip text={label} hotkey={shortcut}>
+      <button
+        type="button"
+        style={active ? activeToolBtnStyle : toolBtnStyle}
+        onClick={() => store.setTransformMode(mode)}
+      >
+        <FontAwesomeIcon icon={faIcon} style={{ fontSize: 12 }} />
+      </button>
+    </Tooltip>
+  );
+}
+
+const iconBtnStyle: React.CSSProperties = {
+  ...btnStyle,
+  display: 'flex',
+  alignItems: 'center',
+  padding: '4px 7px',
+};
+
+const activeIconBtnStyle: React.CSSProperties = {
+  ...activeBtnStyle,
+  display: 'flex',
+  alignItems: 'center',
+  padding: '4px 7px',
+};
+
+// --- Snap Popover ---
+
+function SnapButton({ store }: { store: EditorStore }) {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!popoverOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setPopoverOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [popoverOpen]);
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    background: '#1e1e1e',
+    border: '1px solid #444',
+    borderRadius: 2,
+    color: '#c5c8ce',
+    fontSize: 11,
+    padding: '2px 4px',
+    outline: 'none',
+  };
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+      <Tooltip text="Toggle Snap">
+        <button
+          type="button"
+          style={store.snapEnabled ? activeIconBtnStyle : iconBtnStyle}
+          onClick={() => store.toggleSnap()}
+        >
+          <FontAwesomeIcon icon={faMagnet} style={{ fontSize: 12 }} />
+        </button>
+      </Tooltip>
+      <Tooltip text="Snap Settings">
+        <button
+          type="button"
+          onClick={() => setPopoverOpen(!popoverOpen)}
+          style={{
+            ...iconBtnStyle,
+            padding: '4px 3px',
+            fontSize: 8,
+            borderLeft: 'none',
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            marginLeft: -1,
+          }}
+        >
+          <FontAwesomeIcon icon={faCaretDown} />
+        </button>
+      </Tooltip>
+      {popoverOpen && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            marginTop: 4,
+            background: '#2c2c2c',
+            border: '1px solid #444',
+            borderRadius: 4,
+            padding: 8,
+            zIndex: 1000,
+            minWidth: 150,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+          }}
+        >
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Translate</div>
+          <input
+            type="number"
+            value={store.snapValues.translate}
+            step={0.25}
+            min={0.01}
+            onChange={(e) => store.setSnapValues({ translate: Number(e.target.value) || 1 })}
+            style={inputStyle}
+          />
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2, marginTop: 6 }}>
+            Rotate (deg)
+          </div>
+          <input
+            type="number"
+            value={store.snapValues.rotate}
+            step={5}
+            min={1}
+            onChange={(e) => store.setSnapValues({ rotate: Number(e.target.value) || 15 })}
+            style={inputStyle}
+          />
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2, marginTop: 6 }}>Scale</div>
+          <input
+            type="number"
+            value={store.snapValues.scale}
+            step={0.05}
+            min={0.01}
+            onChange={(e) => store.setSnapValues({ scale: Number(e.target.value) || 0.25 })}
+            style={inputStyle}
+          />
+          <div style={{ height: 1, background: '#444', margin: '8px 0' }} />
+          <div
+            style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}
+            onClick={() => store.toggleSnapToSurface()}
+          >
+            <input
+              type="checkbox"
+              checked={store.snapToSurface}
+              readOnly
+              style={{ cursor: 'pointer' }}
+            />
+            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Snap to Surface</span>
+          </div>
+          <div style={{ fontSize: 10, color: '#666', marginTop: 6 }}>
+            Hold{' '}
+            <kbd
+              style={{ background: '#1e1e1e', padding: '1px 4px', borderRadius: 2, fontSize: 10 }}
+            >
+              V
+            </kbd>{' '}
+            during translate for vertex snap
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const pivotLabels: Record<PivotMode, string> = {
+  'active-element': 'Active Element',
+  'median-point': 'Median Point',
+  'individual-origins': 'Individual Origins',
+};
+
+function PivotButton({ store }: { store: EditorStore }) {
+  const modes: PivotMode[] = ['active-element', 'median-point', 'individual-origins'];
+  return (
+    <Tooltip text={`Pivot: ${pivotLabels[store.pivotMode]}`} hotkey=".">
+      <button
+        type="button"
+        style={store.pivotMode !== 'active-element' ? activeIconBtnStyle : iconBtnStyle}
+        onClick={() => {
+          const idx = modes.indexOf(store.pivotMode);
+          store.setPivotMode(modes[(idx + 1) % modes.length]!);
+        }}
+      >
+        <FontAwesomeIcon icon={faCrosshairs} style={{ fontSize: 12 }} />
+      </button>
+    </Tooltip>
+  );
+}
+
+export function ToolStrip() {
+  const store = useEditorStore();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 8,
+        left: 8,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        padding: '4px 6px',
+        background: 'rgba(36, 36, 36, 0.9)',
+        border: '1px solid #444',
+        borderRadius: 6,
+        pointerEvents: 'auto',
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      <ModeButton
+        mode="translate"
+        faIcon={faArrowsUpDownLeftRight}
+        shortcut="W"
+        label="Move"
+        store={store}
+      />
+      <ModeButton mode="rotate" faIcon={faRotate} shortcut="E" label="Rotate" store={store} />
+      <ModeButton mode="scale" faIcon={faMaximize} shortcut="R" label="Scale" store={store} />
+
+      <div style={sepStyle} />
+
+      <Tooltip text={`Space: ${store.transformSpace === 'world' ? 'World' : 'Local'}`}>
+        <button
+          type="button"
+          style={store.transformSpace === 'local' ? activeIconBtnStyle : iconBtnStyle}
+          onClick={() =>
+            store.setTransformSpace(store.transformSpace === 'world' ? 'local' : 'world')
+          }
+        >
+          <FontAwesomeIcon
+            icon={store.transformSpace === 'world' ? faGlobe : faCube}
+            style={{ fontSize: 12 }}
+          />
+        </button>
+      </Tooltip>
+
+      <div style={sepStyle} />
+
+      <PivotButton store={store} />
+
+      <SnapButton store={store} />
+    </div>
+  );
+}

package/src/components/ViewportOverlay.tsx

@@ -0,0 +1,234 @@
+import {
+  faBorderAll,
+  faCaretDown,
+  faChartSimple,
+  faCheck,
+  faEye,
+  faEyeSlash,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useRef, useState } from 'react';
+import { useEditorStore } from '../EditorContext';
+import type { EditorStore, ShadingMode } from '../editor-store';
+import { Tooltip } from './primitives/Tooltip';
+
+const iconBtn: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '4px 7px',
+  cursor: 'pointer',
+  fontSize: 12,
+  lineHeight: '18px',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const activeIconBtn: React.CSSProperties = {
+  ...iconBtn,
+  background: '#579EFF',
+  border: '1px solid #6AADFF',
+  color: '#fff',
+};
+
+const shadingLabels: Record<ShadingMode, string> = {
+  solid: 'Solid',
+  wireframe: 'Wire',
+  unlit: 'Unlit',
+};
+
+const shadingOrder: ShadingMode[] = ['solid', 'wireframe', 'unlit'];
+
+export function ViewportOverlay() {
+  const store = useEditorStore();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        padding: '4px 6px',
+        background: 'rgba(36, 36, 36, 0.9)',
+        border: '1px solid #444',
+        borderRadius: 6,
+        pointerEvents: 'auto',
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      {/* Grid toggle */}
+      <Tooltip text={`Grid: ${store.showGrid ? 'On' : 'Off'}`}>
+        <button
+          type="button"
+          style={store.showGrid ? activeIconBtn : iconBtn}
+          onClick={() => store.toggleGrid()}
+        >
+          <FontAwesomeIcon icon={faBorderAll} style={{ fontSize: 12 }} />
+        </button>
+      </Tooltip>
+
+      {/* Helpers toggle with dropdown */}
+      <HelpersButton store={store} />
+
+      {/* Shading mode cycle */}
+      <Tooltip text={`Shading: ${shadingLabels[store.shadingMode]}`}>
+        <button
+          type="button"
+          style={store.shadingMode !== 'solid' ? activeIconBtn : iconBtn}
+          onClick={() => {
+            const idx = shadingOrder.indexOf(store.shadingMode);
+            store.setShadingMode(shadingOrder[(idx + 1) % shadingOrder.length]!);
+          }}
+        >
+          <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: -0.5 }}>
+            {shadingLabels[store.shadingMode]}
+          </span>
+        </button>
+      </Tooltip>
+
+      {/* Stats toggle */}
+      <Tooltip text={`Stats: ${store.showStats ? 'On' : 'Off'}`}>
+        <button
+          type="button"
+          style={store.showStats ? activeIconBtn : iconBtn}
+          onClick={() => store.toggleStats()}
+        >
+          <FontAwesomeIcon icon={faChartSimple} style={{ fontSize: 12 }} />
+        </button>
+      </Tooltip>
+    </div>
+  );
+}
+
+function HelpersButton({ store }: { store: EditorStore }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const helperTypes = [
+    { key: 'lights' as const, label: 'Lights' },
+    { key: 'cameras' as const, label: 'Cameras' },
+    { key: 'colliders' as const, label: 'Colliders' },
+    { key: 'audio' as const, label: 'Audio' },
+    { key: 'splines' as const, label: 'Splines' },
+    { key: 'navmesh' as const, label: 'NavMesh' },
+  ];
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+      <Tooltip text={`Helpers: ${store.showHelpers ? 'On' : 'Off'}`}>
+        <button
+          type="button"
+          style={store.showHelpers ? activeIconBtn : iconBtn}
+          onClick={() => store.toggleHelpers()}
+        >
+          <FontAwesomeIcon icon={store.showHelpers ? faEye : faEyeSlash} style={{ fontSize: 12 }} />
+        </button>
+      </Tooltip>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        style={{
+          ...iconBtn,
+          padding: '4px 3px',
+          fontSize: 8,
+          borderLeft: 'none',
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          marginLeft: -1,
+        }}
+      >
+        <FontAwesomeIcon icon={faCaretDown} />
+      </button>
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            marginTop: 4,
+            background: '#2c2c2c',
+            border: '1px solid #444',
+            borderRadius: 4,
+            padding: '4px 0',
+            zIndex: 1000,
+            minWidth: 130,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+          }}
+        >
+          <div
+            role="menuitem"
+            tabIndex={0}
+            onClick={() => store.toggleHelpers()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') store.toggleHelpers();
+            }}
+            style={{
+              padding: '5px 12px',
+              cursor: 'pointer',
+              fontSize: 12,
+              color: '#c5c8ce',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+            }}
+          >
+            <span style={{ opacity: store.showHelpers ? 1 : 0 }}>
+              <FontAwesomeIcon icon={faCheck} style={{ fontSize: 10 }} />
+            </span>
+            All
+          </div>
+          <div style={{ height: 1, background: '#444', margin: '4px 0' }} />
+          {helperTypes.map((h) => (
+            <div
+              role="menuitem"
+              tabIndex={0}
+              key={h.key}
+              onClick={() => store.toggleHelperType(h.key)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') store.toggleHelperType(h.key);
+              }}
+              style={{
+                padding: '5px 12px',
+                cursor: 'pointer',
+                fontSize: 12,
+                color: '#c5c8ce',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+              }}
+            >
+              <span style={{ opacity: store.helperVisibility[h.key] ? 1 : 0 }}>
+                <FontAwesomeIcon icon={faCheck} style={{ fontSize: 10 }} />
+              </span>
+              {h.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}