@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/Toolbar.tsx

@@ -8,56 +8,24 @@ import {
   faMaximize,
   faRotate,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useRef, useState } from 'react';
+import {
+  Checkbox,
+  EditorIcon,
+  EditorPopover,
+  FloatingToolbar,
+  IconButton,
+  Inline,
+  Keycap,
+  SplitButtonGroup,
+  Stack,
+  Text,
+  TextInput,
+  ToolbarDivider,
+  Tooltip,
+} from '../design-system';
 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,
@@ -75,153 +43,103 @@ function ModeButton({
   const active = store.transformMode === mode;
   return (
     <Tooltip text={label} hotkey={shortcut}>
-      <button
-        type="button"
-        style={active ? activeToolBtnStyle : toolBtnStyle}
+      <IconButton
+        aria-label={label}
+        aria-pressed={active}
+        size="comfortable"
         onClick={() => store.setTransformMode(mode)}
       >
-        <FontAwesomeIcon icon={faIcon} style={{ fontSize: 12 }} />
-      </button>
+        <EditorIcon icon={faIcon} size="md" />
+      </IconButton>
     </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);
+    const handler = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.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()}
+    <div ref={ref} className="vgai-viewport-popover-anchor">
+      <SplitButtonGroup>
+        <Tooltip text="Toggle Snap">
+          <IconButton
+            aria-label="Toggle snap"
+            aria-pressed={store.snapEnabled}
+            size="comfortable"
+            onClick={() => store.toggleSnap()}
           >
-            <input
-              type="checkbox"
-              checked={store.snapToSurface}
-              readOnly
-              style={{ cursor: 'pointer' }}
+            <EditorIcon icon={faMagnet} size="md" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip text="Snap Settings">
+          <IconButton
+            aria-label="Snap settings"
+            aria-expanded={popoverOpen}
+            size="comfortable"
+            onClick={() => setPopoverOpen(!popoverOpen)}
+          >
+            <EditorIcon icon={faCaretDown} size="xs" />
+          </IconButton>
+        </Tooltip>
+      </SplitButtonGroup>
+      {popoverOpen && (
+        <EditorPopover className="vgai-snap-popover">
+          <Stack gap={2}>
+            <Text variant="caption" tone="muted">
+              Translate
+            </Text>
+            <TextInput
+              type="number"
+              value={store.snapValues.translate}
+              step={0.25}
+              min={0.01}
+              onChange={(event) =>
+                store.setSnapValues({ translate: Number(event.target.value) || 1 })
+              }
             />
-            <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>
+            <Text variant="caption" tone="muted">
+              Rotate (deg)
+            </Text>
+            <TextInput
+              type="number"
+              value={store.snapValues.rotate}
+              step={5}
+              min={1}
+              onChange={(event) =>
+                store.setSnapValues({ rotate: Number(event.target.value) || 15 })
+              }
+            />
+            <Text variant="caption" tone="muted">
+              Scale
+            </Text>
+            <TextInput
+              type="number"
+              value={store.snapValues.scale}
+              step={0.05}
+              min={0.01}
+              onChange={(event) =>
+                store.setSnapValues({ scale: Number(event.target.value) || 0.25 })
+              }
+            />
+            <Inline gap={2} align="center" onClick={() => store.toggleSnapToSurface()}>
+              <Checkbox checked={store.snapToSurface} readOnly />
+              <Text>Snap to Surface</Text>
+            </Inline>
+            <Text variant="caption" tone="dim">
+              Hold <Keycap>V</Keycap> during translate for vertex snap
+            </Text>
+          </Stack>
+        </EditorPopover>
       )}
     </div>
   );
@@ -235,40 +153,32 @@ const pivotLabels: Record<PivotMode, string> = {
 
 function PivotButton({ store }: { store: EditorStore }) {
   const modes: PivotMode[] = ['active-element', 'median-point', 'individual-origins'];
+  const label = `Pivot: ${pivotLabels[store.pivotMode]}`;
   return (
-    <Tooltip text={`Pivot: ${pivotLabels[store.pivotMode]}`} hotkey=".">
-      <button
-        type="button"
-        style={store.pivotMode !== 'active-element' ? activeIconBtnStyle : iconBtnStyle}
+    <Tooltip text={label} hotkey=".">
+      <IconButton
+        aria-label={label}
+        aria-pressed={store.pivotMode !== 'active-element'}
+        size="comfortable"
         onClick={() => {
-          const idx = modes.indexOf(store.pivotMode);
-          store.setPivotMode(modes[(idx + 1) % modes.length]!);
+          const index = modes.indexOf(store.pivotMode);
+          store.setPivotMode(modes[(index + 1) % modes.length]!);
         }}
       >
-        <FontAwesomeIcon icon={faCrosshairs} style={{ fontSize: 12 }} />
-      </button>
+        <EditorIcon icon={faCrosshairs} size="md" />
+      </IconButton>
     </Tooltip>
   );
 }
 
 export function ToolStrip() {
   const store = useEditorStore();
+  const spaceLabel = `Space: ${store.transformSpace === 'world' ? 'World' : 'Local'}`;
   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)',
-      }}
+    <FloatingToolbar
+      label="Transform tools"
+      data-testid="threejs-toolstrip"
+      className="vgai-viewport-toolbar vgai-viewport-toolbar-left"
     >
       <ModeButton
         mode="translate"
@@ -279,29 +189,22 @@ export function ToolStrip() {
       />
       <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}
+      <ToolbarDivider />
+      <Tooltip text={spaceLabel}>
+        <IconButton
+          aria-label={spaceLabel}
+          aria-pressed={store.transformSpace === 'local'}
+          size="comfortable"
           onClick={() =>
             store.setTransformSpace(store.transformSpace === 'world' ? 'local' : 'world')
           }
         >
-          <FontAwesomeIcon
-            icon={store.transformSpace === 'world' ? faGlobe : faCube}
-            style={{ fontSize: 12 }}
-          />
-        </button>
+          <EditorIcon icon={store.transformSpace === 'world' ? faGlobe : faCube} size="md" />
+        </IconButton>
       </Tooltip>
-
-      <div style={sepStyle} />
-
+      <ToolbarDivider />
       <PivotButton store={store} />
-
       <SnapButton store={store} />
-    </div>
+    </FloatingToolbar>
   );
 }

package/src/components/VgaiVoxelLogo.tsx

@@ -0,0 +1,89 @@
+interface VgaiVoxelLogoProps {
+  size?: number;
+  animated?: boolean;
+}
+
+/** The grayscale VGAI Voxel V brand mark, with reduced-motion-safe assembly. */
+export function VgaiVoxelLogo({ size = 64, animated = true }: VgaiVoxelLogoProps) {
+  const motionClass = animated ? 'vgai-voxel-logo--animated' : '';
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 160 160"
+      aria-hidden="true"
+      focusable="false"
+      data-testid="vgai-voxel-logo"
+      style={{ display: 'block', overflow: 'visible', filter: 'drop-shadow(0 5px 7px #0000003d)' }}
+    >
+      <style>{`
+        .vgai-voxel-logo--animated .vgai-voxel-a,
+        .vgai-voxel-logo--animated .vgai-voxel-b,
+        .vgai-voxel-logo--animated .vgai-voxel-c {
+          transform-box: fill-box;
+          transform-origin: center;
+        }
+        .vgai-voxel-logo--animated .vgai-voxel-a {
+          animation: vgai-voxel-enter-a 680ms cubic-bezier(.2,.85,.25,1) 120ms both,
+            vgai-voxel-drift-a 3.6s ease-in-out 1.2s infinite;
+        }
+        .vgai-voxel-logo--animated .vgai-voxel-b {
+          animation: vgai-voxel-enter-b 720ms cubic-bezier(.2,.85,.25,1) 300ms both,
+            vgai-voxel-drift-b 4.2s ease-in-out 1.4s infinite;
+        }
+        .vgai-voxel-logo--animated .vgai-voxel-c {
+          animation: vgai-voxel-enter-c 700ms cubic-bezier(.2,.85,.25,1) 480ms both,
+            vgai-voxel-drift-c 3.1s ease-in-out 1.6s infinite;
+        }
+        @keyframes vgai-voxel-enter-a {
+          from { opacity: 0; transform: translate(-14px, -18px) rotate(-5deg) scale(.86); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes vgai-voxel-enter-b {
+          from { opacity: 0; transform: translate(18px, -5px) rotate(5deg) scale(.9); }
+          to { opacity: 1; transform: translate(0) rotate(0) scale(1); }
+        }
+        @keyframes vgai-voxel-enter-c {
+          from { opacity: 0; transform: translateY(20px) scale(.78); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes vgai-voxel-drift-a {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translate(-1px, -4px) rotate(-.6deg); }
+        }
+        @keyframes vgai-voxel-drift-b {
+          0%, 100% { transform: translate(0); }
+          50% { transform: translate(3px, -2px) rotate(.7deg); }
+        }
+        @keyframes vgai-voxel-drift-c {
+          0%, 100% { transform: translateY(0) scale(1); }
+          50% { transform: translateY(-2px) scale(1.025); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .vgai-voxel-logo--animated .vgai-voxel-a,
+          .vgai-voxel-logo--animated .vgai-voxel-b,
+          .vgai-voxel-logo--animated .vgai-voxel-c { animation: none; }
+        }
+      `}</style>
+      <g className={motionClass} transform="translate(15 14)">
+        <g className="vgai-voxel-idle">
+          <g className="vgai-voxel-a">
+            <path d="M7 21 35 5l28 16-28 16Z" fill="#F3F4F6" />
+            <path d="M7 21v33l28 16V37Z" fill="#B5BBC4" />
+            <path d="M63 21v33L35 70V37Z" fill="#666E79" />
+          </g>
+          <g className="vgai-voxel-b">
+            <path d="M67 49 95 33l28 16-28 16Z" fill="#E1E4E8" />
+            <path d="M67 49v33l28 16V65Z" fill="#969DA7" />
+            <path d="M123 49v33L95 98V65Z" fill="#4D5662" />
+          </g>
+          <g className="vgai-voxel-c">
+            <path d="M37 78 65 62l28 16-28 16Z" fill="#FFFFFF" />
+            <path d="M37 78v33l28 16V94Z" fill="#C8CDD3" />
+            <path d="M93 78v33l-28 16V94Z" fill="#737B86" />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}