@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/design-system-stories/Workspace.stories.tsx

@@ -0,0 +1,538 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Button,
+  Checkbox,
+  EDITOR_THEME_CLASS,
+  EditorBadge,
+  EditorBanner,
+  EditorIcon,
+  EditorTab,
+  EditorTabList,
+  EditorToolbar,
+  EditorTree,
+  EditorTreeRow,
+  editorIcons,
+  editorThemeVariables,
+  FieldGroup,
+  FieldRow,
+  IconButton,
+  midnightHighContrastEditorTheme,
+  Select,
+  TextInput,
+  ToolbarDivider,
+  ToolbarGroup,
+  TreeDisclosureIcon,
+  themeVars,
+} from '../design-system';
+
+const meta = {
+  title: 'Editor Design System/Workspace',
+  parameters: { controls: { disable: true } },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const panelTitle = {
+  height: 'var(--vgai-panel-header-height)',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0 10px',
+  fontWeight: 600,
+  borderBottom: `1px solid ${themeVars.boundary.default}`,
+  background: themeVars.surface.chrome,
+  boxSizing: 'border-box',
+} as const;
+
+function ProjectAssets() {
+  const items = [
+    ['Player.glb', editorIcons.content.entity],
+    ['world.vscn.json', editorIcons.content.scene],
+    ['hud.tsx', editorIcons.content.code],
+    ['theme.mat.json', editorIcons.content.image],
+  ] as const;
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+        gap: 6,
+        padding: 8,
+      }}
+    >
+      {items.map(([name, icon]) => (
+        <button
+          key={name}
+          type="button"
+          className="vgai-btn"
+          style={{
+            height: 64,
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 6,
+            padding: 8,
+            color: themeVars.content.muted,
+            background: themeVars.surface.panel,
+            border: `1px solid ${themeVars.boundary.default}`,
+          }}
+        >
+          <EditorIcon icon={icon} size="lg" />
+          <span style={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {name}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function WorkspaceFixture({
+  playing = false,
+  narrow = false,
+}: {
+  playing?: boolean;
+  narrow?: boolean;
+}) {
+  return (
+    <div
+      data-testid="design-system-workspace"
+      style={{
+        width: '100%',
+        maxWidth: narrow ? 900 : 1280,
+        height: narrow ? 640 : 760,
+        display: 'grid',
+        gridTemplateRows:
+          'var(--vgai-command-bar-height) minmax(0, 1fr) var(--vgai-status-bar-height)',
+        overflow: 'hidden',
+        border: `1px solid ${themeVars.boundary.strong}`,
+        background: themeVars.surface.shell,
+        boxShadow: themeVars.elevation.large,
+      }}
+    >
+      <header
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr auto 1fr',
+          alignItems: 'center',
+          padding: '0 8px',
+          borderBottom: `1px solid ${themeVars.boundary.default}`,
+          background: themeVars.surface.chrome,
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+          <Button size="compact" style={{ minWidth: 0 }}>
+            <EditorIcon icon={editorIcons.content.project} />
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>Orbit Workshop</span>
+          </Button>
+          {!narrow && (
+            <nav aria-label="Application menus" style={{ display: 'flex' }}>
+              {['Edit', 'View', 'Window', 'Debug', 'Tools'].map((item) => (
+                <Button key={item} size="compact" style={{ borderColor: 'transparent' }}>
+                  {item}
+                </Button>
+              ))}
+            </nav>
+          )}
+        </div>
+        <ToolbarGroup aria-label="Game transport">
+          <IconButton aria-label={playing ? 'Pause' : 'Play'} aria-pressed={playing}>
+            <EditorIcon icon={playing ? editorIcons.transport.pause : editorIcons.transport.play} />
+          </IconButton>
+          <IconButton aria-label="Stop" disabled={!playing}>
+            <EditorIcon icon={editorIcons.transport.stop} />
+          </IconButton>
+        </ToolbarGroup>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', color: themeVars.content.dim }}>
+          {!narrow && 'Local session'}
+        </div>
+      </header>
+
+      <main
+        style={{
+          minWidth: 0,
+          minHeight: 0,
+          display: 'grid',
+          gridTemplateColumns: narrow ? '190px minmax(0, 1fr) 220px' : '240px minmax(0, 1fr) 285px',
+          gridTemplateRows: 'minmax(0, 1fr) 190px',
+        }}
+      >
+        <aside
+          aria-label="Project navigator"
+          style={{
+            gridColumn: 1,
+            gridRow: '1 / 3',
+            minWidth: 0,
+            display: 'grid',
+            gridTemplateRows: 'minmax(210px, 3fr) minmax(180px, 2fr)',
+            borderRight: `1px solid ${themeVars.boundary.default}`,
+            background: themeVars.surface.panel,
+          }}
+        >
+          <section style={{ minHeight: 0, overflow: 'hidden' }}>
+            <div style={panelTitle}>Hierarchy</div>
+            <EditorToolbar label="Hierarchy controls" compact>
+              <TextInput aria-label="Search hierarchy" placeholder="Search" style={{ flex: 1 }} />
+              <IconButton aria-label="Add entity" size="compact">
+                <EditorIcon icon={editorIcons.action.add} />
+              </IconButton>
+            </EditorToolbar>
+            <EditorTree label="Scene hierarchy">
+              <EditorTreeRow level={1} expanded leading={<TreeDisclosureIcon direction="down" />}>
+                Three.js
+              </EditorTreeRow>
+              <EditorTreeRow
+                level={2}
+                selected
+                leading={<EditorIcon icon={editorIcons.content.scene} />}
+              >
+                Main
+              </EditorTreeRow>
+              <EditorTreeRow level={3} leading={<EditorIcon icon={editorIcons.content.camera} />}>
+                Main Camera
+              </EditorTreeRow>
+              <EditorTreeRow level={3} leading={<EditorIcon icon={editorIcons.content.light} />}>
+                Sun
+              </EditorTreeRow>
+              <EditorTreeRow level={3} leading={<EditorIcon icon={editorIcons.content.entity} />}>
+                Player
+              </EditorTreeRow>
+              <EditorTreeRow level={1} expanded leading={<TreeDisclosureIcon direction="down" />}>
+                React
+              </EditorTreeRow>
+              <EditorTreeRow level={2} leading={<EditorIcon icon={editorIcons.content.code} />}>
+                HUD
+              </EditorTreeRow>
+            </EditorTree>
+          </section>
+          <section
+            style={{
+              minHeight: 0,
+              overflow: 'hidden',
+              borderTop: `1px solid ${themeVars.boundary.default}`,
+            }}
+          >
+            <div style={panelTitle}>Assets</div>
+            <EditorToolbar label="Asset controls" compact>
+              <Button size="compact">Project</Button>
+              <span style={{ flex: 1 }} />
+              <IconButton aria-label="Search assets" size="compact">
+                <EditorIcon icon={editorIcons.action.search} />
+              </IconButton>
+            </EditorToolbar>
+            <ProjectAssets />
+          </section>
+        </aside>
+
+        <section
+          aria-label="Document workspace"
+          style={{
+            gridColumn: 2,
+            gridRow: 1,
+            minWidth: 0,
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <EditorTabList aria-label="Open documents">
+            <EditorTab selected={!playing}>Scene</EditorTab>
+            <EditorTab selected={playing}>Game</EditorTab>
+            <EditorTab dirty>hud.tsx</EditorTab>
+          </EditorTabList>
+          <EditorToolbar label="Viewport tools">
+            <ToolbarGroup>
+              <IconButton aria-label="Move" aria-pressed="true">
+                <EditorIcon icon={editorIcons.tool.move} />
+              </IconButton>
+              <IconButton aria-label="Rotate">
+                <EditorIcon icon={editorIcons.tool.rotate} />
+              </IconButton>
+              <IconButton aria-label="Snap">
+                <EditorIcon icon={editorIcons.tool.snap} />
+              </IconButton>
+            </ToolbarGroup>
+            <ToolbarDivider />
+            <Button size="compact">Local</Button>
+            <span style={{ flex: 1 }} />
+            <IconButton aria-label="Frame selection">
+              <EditorIcon icon={editorIcons.tool.frame} />
+            </IconButton>
+          </EditorToolbar>
+          <div
+            role="img"
+            aria-label={playing ? 'Running game viewport' : 'Three-dimensional scene viewport'}
+            style={{
+              position: 'relative',
+              flex: 1,
+              overflow: 'hidden',
+              backgroundColor: themeVars.surface.inset,
+              backgroundImage: `linear-gradient(${themeVars.boundary.default} 1px, transparent 1px), linear-gradient(90deg, ${themeVars.boundary.default} 1px, transparent 1px)`,
+              backgroundSize: '32px 32px',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                inset: '18% 22%',
+                display: 'grid',
+                placeItems: 'center',
+                border: `1px solid ${playing ? themeVars.semantic.success : themeVars.accent.default}`,
+                borderRadius: themeVars.shape.medium,
+                background: playing ? themeVars.semantic.successMuted : themeVars.accent.muted,
+                color: playing ? themeVars.semantic.success : themeVars.accent.default,
+                boxShadow: themeVars.elevation.medium,
+              }}
+            >
+              <EditorIcon
+                icon={playing ? editorIcons.transport.play : editorIcons.content.entity}
+                size="lg"
+              />
+              <span>{playing ? 'Game running' : 'Selected Player object'}</span>
+            </div>
+            <div style={{ position: 'absolute', top: 10, right: 10 }}>
+              <EditorBadge>{playing ? '60 FPS' : 'Persp'}</EditorBadge>
+            </div>
+          </div>
+        </section>
+
+        <aside
+          aria-label="Inspector"
+          style={{
+            gridColumn: 3,
+            gridRow: '1 / 3',
+            minWidth: 0,
+            overflow: 'hidden',
+            borderLeft: `1px solid ${themeVars.boundary.default}`,
+            background: themeVars.surface.panel,
+          }}
+        >
+          <div style={panelTitle}>Inspector</div>
+          <EditorBanner tone="info" icon={<EditorIcon icon={editorIcons.status.info} />}>
+            Player · Three.js
+          </EditorBanner>
+          <FieldGroup>
+            <FieldRow label="Name" htmlFor="workspace-name">
+              <TextInput id="workspace-name" value="Player" readOnly />
+            </FieldRow>
+            <FieldRow label="Position" htmlFor="workspace-position">
+              <TextInput id="workspace-position" value="0, 1, 0" readOnly />
+            </FieldRow>
+            <FieldRow label="Visible" htmlFor="workspace-visible">
+              <Checkbox id="workspace-visible" defaultChecked />
+            </FieldRow>
+            <FieldRow label="Layer" htmlFor="workspace-layer">
+              <Select id="workspace-layer" defaultValue="default">
+                <option value="default">Default</option>
+                <option value="characters">Characters</option>
+              </Select>
+            </FieldRow>
+          </FieldGroup>
+          <div style={panelTitle}>Components</div>
+          <EditorTree label="Components">
+            <EditorTreeRow level={1} leading={<EditorIcon icon={editorIcons.content.component} />}>
+              Player Controller
+            </EditorTreeRow>
+            <EditorTreeRow level={1} leading={<EditorIcon icon={editorIcons.content.component} />}>
+              Character Motor
+            </EditorTreeRow>
+          </EditorTree>
+        </aside>
+
+        <section
+          aria-label="Debugger"
+          style={{
+            gridColumn: 2,
+            gridRow: 2,
+            minWidth: 0,
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            borderTop: `1px solid ${themeVars.boundary.default}`,
+            background: themeVars.surface.panel,
+          }}
+        >
+          <EditorTabList aria-label="Debugger panels">
+            <EditorTab badge={2}>Console</EditorTab>
+            <EditorTab selected>Profiler</EditorTab>
+            <EditorTab>State</EditorTab>
+            <EditorTab>Network</EditorTab>
+          </EditorTabList>
+          <div
+            style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, padding: 10 }}
+          >
+            {[
+              ['FPS', '60'],
+              ['Frame', '16.7 ms'],
+              ['Draw calls', '42'],
+              ['Triangles', '18.4k'],
+            ].map(([label, value]) => (
+              <div
+                key={label}
+                style={{
+                  padding: 8,
+                  border: `1px solid ${themeVars.boundary.default}`,
+                  borderRadius: themeVars.shape.small,
+                }}
+              >
+                <div style={{ color: themeVars.content.dim }}>{label}</div>
+                <strong style={{ color: themeVars.content.primary }}>{value}</strong>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+
+      <footer
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: '0 8px',
+          color: themeVars.content.dim,
+          background: themeVars.surface.chrome,
+          borderTop: `1px solid ${themeVars.boundary.default}`,
+          fontSize: 'var(--vgai-font-sm)',
+        }}
+      >
+        <span style={{ color: themeVars.semantic.success }}>Saved</span>
+        <span>main.vscn.json</span>
+        <span style={{ flex: 1 }} />
+        <span>{playing ? 'Play mode' : 'Edit mode'}</span>
+      </footer>
+    </div>
+  );
+}
+
+function ProjectLauncherFixture() {
+  const projects = [
+    ['Orbit Workshop', '~/Games/orbit-workshop', 'Edited 8 minutes ago'],
+    ['Forest Runner', '~/Games/forest-runner', 'Edited yesterday'],
+  ] as const;
+  return (
+    <main
+      style={{
+        width: 'min(920px, 100%)',
+        minHeight: 600,
+        padding: 32,
+        boxSizing: 'border-box',
+        color: themeVars.content.primary,
+        background: themeVars.surface.shell,
+        border: `1px solid ${themeVars.boundary.default}`,
+        boxShadow: themeVars.elevation.large,
+      }}
+    >
+      <header style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
+        <EditorIcon icon={editorIcons.content.project} size="lg" tone="accent" />
+        <div>
+          <h1 style={{ margin: 0, fontSize: 'var(--vgai-font-heading)' }}>VGAI Editor</h1>
+          <p style={{ margin: '4px 0 0', color: themeVars.content.muted }}>
+            Open a recent game or begin a new project.
+          </p>
+        </div>
+        <span style={{ flex: 1 }} />
+        <Button variant="primary" size="comfortable">
+          <EditorIcon icon={editorIcons.action.add} />
+          New project
+        </Button>
+      </header>
+      <section aria-labelledby="recent-projects-heading">
+        <h2
+          id="recent-projects-heading"
+          style={{ margin: '0 0 10px', fontSize: 'var(--vgai-font-xl)' }}
+        >
+          Recent projects
+        </h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 10 }}>
+          {projects.map(([name, path, edited]) => (
+            <button
+              key={name}
+              type="button"
+              className="vgai-btn"
+              style={{
+                minWidth: 0,
+                height: 118,
+                padding: 14,
+                display: 'grid',
+                gridTemplateColumns: '64px minmax(0, 1fr)',
+                gap: 14,
+                textAlign: 'left',
+                border: `1px solid ${themeVars.boundary.default}`,
+                background: themeVars.surface.panel,
+                color: themeVars.content.primary,
+              }}
+            >
+              <span
+                style={{
+                  display: 'grid',
+                  placeItems: 'center',
+                  height: 64,
+                  background: themeVars.surface.inset,
+                  borderRadius: themeVars.shape.medium,
+                }}
+              >
+                <EditorIcon icon={editorIcons.content.scene} size="lg" tone="accent" />
+              </span>
+              <span style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <strong>{name}</strong>
+                <span
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    color: themeVars.content.muted,
+                  }}
+                >
+                  {path}
+                </span>
+                <span style={{ color: themeVars.content.dim }}>{edited}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </section>
+      <section aria-labelledby="start-heading" style={{ marginTop: 28 }}>
+        <h2 id="start-heading" style={{ margin: '0 0 10px', fontSize: 'var(--vgai-font-xl)' }}>
+          Start
+        </h2>
+        <EditorToolbar label="Project actions">
+          <Button size="comfortable">
+            <EditorIcon icon={editorIcons.content.folder} />
+            Open folder
+          </Button>
+          <Button size="comfortable">
+            <EditorIcon icon={editorIcons.content.scene} />
+            Starter project
+          </Button>
+          <Button size="comfortable">
+            <EditorIcon icon={editorIcons.content.code} />
+            Empty project
+          </Button>
+        </EditorToolbar>
+      </section>
+    </main>
+  );
+}
+
+export const Editing: Story = { render: () => <WorkspaceFixture /> };
+
+export const Playing: Story = { render: () => <WorkspaceFixture playing /> };
+
+export const NarrowWorkspace: Story = { render: () => <WorkspaceFixture narrow /> };
+
+export const MidnightHighContrast: Story = {
+  render: () => (
+    <div
+      className={EDITOR_THEME_CLASS}
+      data-vgai-theme={midnightHighContrastEditorTheme.id}
+      style={{
+        ...editorThemeVariables(midnightHighContrastEditorTheme),
+        padding: 16,
+        background: themeVars.surface.shell,
+      }}
+    >
+      <WorkspaceFixture />
+    </div>
+  ),
+};
+
+export const ProjectLauncher: Story = { render: () => <ProjectLauncherFixture /> };