@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

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

@@ -0,0 +1,183 @@
+import { faFolderOpen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import type { Meta, StoryObj } from '@storybook/react';
+import type React from 'react';
+import {
+  Button,
+  Checkbox,
+  DisclosureIcon,
+  EDITOR_THEME_CLASS,
+  EditorIcon,
+  type EditorTheme,
+  editorThemeVariables,
+  graphiteDarkEditorTheme,
+  IconButton,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  midnightHighContrastEditorTheme,
+  Panel,
+  SectionHeader,
+  Select,
+  TextInput,
+  themeVars,
+} from '../design-system';
+
+const meta = {
+  title: 'Editor Design System/Foundation',
+  parameters: { controls: { disable: true } },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const row: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  gap: 8,
+};
+
+const section: React.CSSProperties = {
+  display: 'grid',
+  gap: 8,
+};
+
+export const Controls: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 20, maxWidth: 640 }}>
+      <div style={section}>
+        <strong>Buttons</strong>
+        <div style={row}>
+          <Button variant="primary">Create</Button>
+          <Button variant="success">Ready</Button>
+          <Button variant="danger">Delete</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="ghost">Cancel</Button>
+          <Button disabled>Disabled</Button>
+          <IconButton aria-label="Add item">
+            <EditorIcon icon={faPlus} />
+          </IconButton>
+          <IconButton aria-label="Delete item">
+            <EditorIcon icon={faTrash} tone="danger" />
+          </IconButton>
+        </div>
+      </div>
+
+      <div style={section}>
+        <strong>Fields</strong>
+        <div style={row}>
+          <TextInput aria-label="Name" defaultValue="Player" />
+          <Select aria-label="World kind" defaultValue="threejs">
+            <option value="threejs">Three.js</option>
+            <option value="react">React</option>
+            <option value="pixijs">PixiJS</option>
+          </Select>
+          <label style={row}>
+            <Checkbox defaultChecked /> Visible
+          </label>
+          <TextInput aria-label="Unavailable" value="Read only" disabled readOnly />
+        </div>
+      </div>
+
+      <div style={section}>
+        <strong>Disclosure and menu semantics</strong>
+        <div style={row}>
+          <span style={row}>
+            <DisclosureIcon direction="right" /> Collapsed
+          </span>
+          <span style={row}>
+            <DisclosureIcon direction="down" /> Expanded
+          </span>
+        </div>
+        <Menu style={{ width: 220 }}>
+          <MenuItem>
+            <EditorIcon icon={faFolderOpen} /> Open project…
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem disabled>Unavailable action</MenuItem>
+        </Menu>
+      </div>
+    </div>
+  ),
+};
+
+export const Structure: Story = {
+  render: () => (
+    <Panel name="Inspector" style={{ width: 320, minHeight: 260 }}>
+      <SectionHeader label="Transform">
+        <div style={{ display: 'grid', gap: 6, color: themeVars.content.muted }}>
+          <TextInput aria-label="X position" defaultValue="0.000" />
+          <TextInput aria-label="Y position" defaultValue="1.000" />
+          <TextInput aria-label="Z position" defaultValue="0.000" />
+        </div>
+      </SectionHeader>
+      <SectionHeader label="Material" defaultOpen={false}>
+        Material controls
+      </SectionHeader>
+    </Panel>
+  ),
+};
+
+export const DensityAndStress: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 16, width: 250 }}>
+      <div style={section}>
+        <strong>Control density</strong>
+        <div style={row}>
+          <Button size="compact">Compact</Button>
+          <Button size="default">Default</Button>
+          <Button size="comfortable">Comfortable</Button>
+          <Button aria-pressed="true">Selected</Button>
+          <Button aria-busy="true">Busy</Button>
+        </div>
+      </div>
+      <div style={section}>
+        <strong>Narrow and exceptional states</strong>
+        <TextInput aria-label="Invalid project name" aria-invalid defaultValue="Invalid/name" />
+        <Menu>
+          <MenuItem style={{ whiteSpace: 'normal' }}>
+            A deliberately long menu label that must remain readable in a narrow panel
+          </MenuItem>
+          <MenuItem disabled>Unavailable action</MenuItem>
+        </Menu>
+      </div>
+    </div>
+  ),
+};
+
+function ThemeProof({ theme, label }: { theme: EditorTheme; label: string }) {
+  return (
+    <div
+      className={EDITOR_THEME_CLASS}
+      data-vgai-theme={theme.id}
+      style={{
+        ...editorThemeVariables(theme),
+        width: 300,
+        padding: 16,
+        border: `1px solid ${themeVars.boundary.strong}`,
+        borderRadius: themeVars.shape.medium,
+        background: themeVars.surface.panel,
+        color: themeVars.content.primary,
+        fontFamily: themeVars.typography.sans,
+      }}
+    >
+      <strong>{label}</strong>
+      <div style={{ ...row, marginTop: 12 }}>
+        <Button variant="primary">Primary</Button>
+        <Button>Secondary</Button>
+        <IconButton aria-label="Add">
+          <EditorIcon icon={faPlus} />
+        </IconButton>
+      </div>
+    </div>
+  );
+}
+
+export const ThemeScopes: Story = {
+  render: () => (
+    <div style={row}>
+      <ThemeProof theme={graphiteDarkEditorTheme} label="Graphite dark" />
+      <ThemeProof theme={midnightHighContrastEditorTheme} label="Midnight high contrast" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  DisclosureIcon,
+  DropIndicator,
+  EditorBadge,
+  EditorBanner,
+  EditorIcon,
+  EditorPopover,
+  EditorTab,
+  EditorTabList,
+  EditorToolbar,
+  EditorTree,
+  EditorTreeRow,
+  editorIcons,
+  FieldGroup,
+  FieldRow,
+  IconButton,
+  ResizeHandle,
+  Select,
+  StateSurface,
+  Text,
+  TextInput,
+  ToolbarDivider,
+  ToolbarGroup,
+  TreeDisclosureIcon,
+  themeVars,
+} from '../design-system';
+
+const meta = {
+  title: 'Editor Design System/Patterns',
+  parameters: { controls: { disable: true } },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const gallery = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+  gap: 20,
+} as const;
+
+const card = {
+  minWidth: 0,
+  overflow: 'hidden',
+  border: `1px solid ${themeVars.boundary.default}`,
+  borderRadius: themeVars.shape.medium,
+  background: themeVars.surface.panel,
+} as const;
+
+const cardTitle = {
+  padding: '8px 10px',
+  borderBottom: `1px solid ${themeVars.boundary.default}`,
+  color: themeVars.content.primary,
+} as const;
+
+export const CompletePatternGallery: Story = {
+  render: () => (
+    <div style={gallery}>
+      <section style={card}>
+        <div style={cardTitle}>Toolbars</div>
+        <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>
+        </EditorToolbar>
+        <EditorToolbar label="Transport" compact>
+          <ToolbarGroup>
+            <IconButton aria-label="Play">
+              <EditorIcon icon={editorIcons.transport.play} />
+            </IconButton>
+            <IconButton aria-label="Pause" disabled>
+              <EditorIcon icon={editorIcons.transport.pause} />
+            </IconButton>
+            <IconButton aria-label="Stop" disabled>
+              <EditorIcon icon={editorIcons.transport.stop} />
+            </IconButton>
+          </ToolbarGroup>
+        </EditorToolbar>
+      </section>
+
+      <section style={card}>
+        <div style={cardTitle}>Tabs</div>
+        <EditorTabList aria-label="Documents">
+          <EditorTab selected>Scene</EditorTab>
+          <EditorTab dirty>Player.prefab</EditorTab>
+          <EditorTab badge={3}>Console</EditorTab>
+          <EditorTab disabled>Unavailable</EditorTab>
+        </EditorTabList>
+      </section>
+
+      <section style={card}>
+        <div style={cardTitle}>Hierarchy rows</div>
+        <EditorTree label="Example hierarchy">
+          <EditorTreeRow
+            level={1}
+            expanded
+            leading={<TreeDisclosureIcon direction="down" />}
+            actions={<EditorIcon icon={editorIcons.status.visible} tone="dim" />}
+          >
+            Main
+          </EditorTreeRow>
+          <EditorTreeRow
+            level={2}
+            selected
+            leading={<EditorIcon icon={editorIcons.content.camera} />}
+            actions={<EditorIcon icon={editorIcons.status.locked} tone="dim" />}
+          >
+            Main Camera
+          </EditorTreeRow>
+          <EditorTreeRow level={2} muted leading={<EditorIcon icon={editorIcons.content.light} />}>
+            Disabled Light
+          </EditorTreeRow>
+          <EditorTreeRow
+            level={2}
+            dragging
+            leading={<EditorIcon icon={editorIcons.content.entity} />}
+          >
+            Dragged Entity
+          </EditorTreeRow>
+        </EditorTree>
+      </section>
+
+      <section style={card}>
+        <div style={cardTitle}>Inspector fields</div>
+        <FieldGroup>
+          <FieldRow label="Name" htmlFor="pattern-name">
+            <TextInput id="pattern-name" value="Main Camera" readOnly />
+          </FieldRow>
+          <FieldRow label="Projection" htmlFor="pattern-projection">
+            <Select id="pattern-projection" defaultValue="perspective">
+              <option value="perspective">Perspective</option>
+              <option value="orthographic">Orthographic</option>
+            </Select>
+          </FieldRow>
+          <FieldRow
+            label="Visible"
+            htmlFor="pattern-visible"
+            hint="Included in editor and game rendering."
+          >
+            <Checkbox id="pattern-visible" defaultChecked />
+          </FieldRow>
+          <FieldRow label="Invalid" htmlFor="pattern-invalid">
+            <TextInput id="pattern-invalid" aria-invalid value="Not a number" readOnly />
+          </FieldRow>
+        </FieldGroup>
+      </section>
+
+      <section style={{ ...card, display: 'grid', gap: 8, paddingBottom: 8 }}>
+        <div style={cardTitle}>Banners and popovers</div>
+        <EditorBanner tone="info" icon={<EditorIcon icon={editorIcons.status.info} />}>
+          Informational editor notice
+        </EditorBanner>
+        <EditorBanner tone="warning" icon={<EditorIcon icon={editorIcons.status.warning} />}>
+          This document has external changes
+        </EditorBanner>
+        <EditorBanner tone="error" icon={<EditorIcon icon={editorIcons.status.error} />}>
+          World failed to mount
+        </EditorBanner>
+        <EditorPopover style={{ margin: '4px 10px', padding: 10 }}>
+          Floating surface <EditorBadge>3</EditorBadge>
+        </EditorPopover>
+      </section>
+
+      <section style={card}>
+        <div style={cardTitle}>Empty, loading, and error states</div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+          <StateSurface
+            compact
+            icon={<EditorIcon icon={editorIcons.content.folder} />}
+            title="No assets"
+          />
+          <StateSurface
+            compact
+            tone="loading"
+            icon={<EditorIcon icon={editorIcons.action.refresh} />}
+            title="Loading"
+          />
+          <StateSurface
+            compact
+            tone="error"
+            icon={<EditorIcon icon={editorIcons.status.error} />}
+            title="Failed"
+          />
+        </div>
+      </section>
+
+      <section style={{ ...card, minHeight: 160, position: 'relative', display: 'flex' }}>
+        <div style={cardTitle}>Drag and resize feedback</div>
+        <div
+          style={{ position: 'relative', flex: 1, margin: 12, background: themeVars.surface.inset }}
+        >
+          <DropIndicator position="inside" />
+        </div>
+        <ResizeHandle
+          orientation="vertical"
+          label="Resize preview panels"
+          valueNow={64}
+          tabIndex={0}
+        />
+        <div
+          style={{ width: 80, display: 'grid', placeItems: 'center', color: themeVars.content.dim }}
+        >
+          <DisclosureIcon direction="right" />
+        </div>
+      </section>
+    </div>
+  ),
+};
+
+export const ModalDialog: Story = {
+  render: () => (
+    <div style={{ minHeight: 360 }}>
+      <Dialog labelledBy="pattern-dialog-title">
+        <DialogHeader titleId="pattern-dialog-title" title="Save scene" />
+        <DialogBody>
+          <Text tone="muted">Choose where the current scene document should be saved.</Text>
+          <FieldGroup>
+            <FieldRow label="Filename" htmlFor="pattern-dialog-filename">
+              <TextInput id="pattern-dialog-filename" defaultValue="main.vscn.json" />
+            </FieldRow>
+          </FieldGroup>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="ghost" size="comfortable">
+            Cancel
+          </Button>
+          <Button variant="primary" size="comfortable">
+            Save
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </div>
+  ),
+};