@vgai/editor 0.2.0 → 0.4.0-canary.20260715.1

package/src/components/StartupLoadingScreen.tsx

@@ -0,0 +1,96 @@
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import { EditorIcon, space, themeVars } from '../design-system';
+import { VgaiVoxelLogo } from './VgaiVoxelLogo';
+
+/** Lightweight first paint while the local project is being detected and validated. */
+export function StartupLoadingScreen() {
+  return (
+    <main
+      role="status"
+      aria-live="polite"
+      aria-label="Opening project"
+      data-testid="startup-loading-screen"
+      style={{
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        placeItems: 'center',
+        background: themeVars.surface.shell,
+        color: themeVars.content.primary,
+        fontFamily: themeVars.typography.sans,
+        pointerEvents: 'auto',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          minWidth: 220,
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: space[6],
+        }}
+      >
+        <div
+          aria-hidden="true"
+          style={{
+            width: 68,
+            height: 68,
+            display: 'grid',
+            placeItems: 'center',
+          }}
+        >
+          <VgaiVoxelLogo size={68} />
+        </div>
+
+        <div style={{ textAlign: 'center' }}>
+          <div
+            style={{
+              color: themeVars.content.primary,
+              fontSize: 'var(--vgai-font-2xl)',
+              fontWeight: 600,
+              letterSpacing: 0.2,
+            }}
+          >
+            VGAI Editor
+          </div>
+          <div
+            style={{
+              marginTop: space[2],
+              color: themeVars.content.dim,
+              fontSize: 'var(--vgai-font-base)',
+            }}
+          >
+            Preparing your local workspace
+          </div>
+        </div>
+
+        <div
+          style={{
+            width: '100%',
+            height: 1,
+            background: themeVars.boundary.default,
+            borderRadius: themeVars.shape.small,
+          }}
+        />
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: space[3],
+            color: themeVars.content.muted,
+            fontSize: 'var(--vgai-font-base)',
+          }}
+        >
+          <EditorIcon
+            icon={faCircleNotch}
+            spin
+            aria-hidden="true"
+            style={{ color: themeVars.accent.default }}
+          />
+          <span>Opening project…</span>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/components/StateWatchPanel.tsx

@@ -0,0 +1,302 @@
+import { themeVars } from '../design-system';
+/**
+ * State Watch — the human door onto the game's registered state PROVIDERS
+ * (`ctx.debug.registerStateProvider`, docs/SYNTHETIC-PLAYER-SPEC.md §3.6):
+ * lists every provider with its honesty-tier badge (D14) and live-polls the
+ * selected provider's value (250ms — `NetworkSection`'s poll idiom) into a
+ * JSON tree.
+ *
+ * Reads the live adapter through `getActiveDebug()` and renders NOTHING when
+ * no debug adapter is active — same degrade-to-absent discipline as
+ * `NetworkSection`. The poll covers both the adapter's IDENTITY changing
+ * (play started/stopped, hot reload) and the selected value changing.
+ *
+ * Layout: `DataPanel`'s master/detail idiom — a provider list on the left
+ * (themeVars.accent.default left-border marks the selection, same as the Data tab's file
+ * list), the selected provider's live value on the right under a slim
+ * header naming what is being watched.
+ */
+
+import { useEffect, useState } from 'react';
+import { getActiveDebug } from '../authoring/active-systems';
+import { EditorListButton } from '../design-system';
+
+type ProviderInfo = { name: string; tier: 'observable' | 'assisted' };
+
+const TIER_COLORS: Record<ProviderInfo['tier'], string> = {
+  observable: themeVars.semantic.success,
+  assisted: themeVars.semantic.warning,
+};
+
+function TierBadge({ tier, name }: { tier: ProviderInfo['tier']; name: string }) {
+  const color = TIER_COLORS[tier];
+  return (
+    <span
+      data-testid={`state-tier-${name}`}
+      title={
+        tier === 'assisted'
+          ? 'Assisted (X-ray) state — not observable by a player; proofs consuming it are flagged'
+          : 'Observable state — a player could see this'
+      }
+      style={{
+        border: `1px solid ${color}55`,
+        background: `${color}14`,
+        color,
+        borderRadius: themeVars.shape.small,
+        padding: '0 4px',
+        fontSize: 9,
+        fontWeight: 700,
+        lineHeight: '14px',
+        textTransform: 'uppercase',
+        letterSpacing: 0.4,
+        flexShrink: 0,
+      }}
+    >
+      {tier}
+    </span>
+  );
+}
+
+/** Leaf color by JSON type — the same monokai accents ConsolePanel's
+ *  subsystem chips draw from, so typed values scan apart at a glance. */
+function leafColor(value: unknown): string {
+  if (value === null || value === undefined) return themeVars.content.muted;
+  switch (typeof value) {
+    case 'number':
+      return '#78dce8';
+    case 'boolean':
+      return '#fc9867';
+    case 'string':
+      return '#a9dc76';
+    default:
+      return themeVars.content.primary;
+  }
+}
+
+/** Small recursive JSON tree — objects/arrays indent behind a guide line,
+ *  primitives render inline, color-keyed by type. Depth-capped defensively;
+ *  leaves the raw JSON reachable via the browser console rather than ever
+ *  crashing the dock on a cyclic value (JSON.stringify in the leaf catches
+ *  those). */
+function JsonNode({ value, depth }: { value: unknown; depth: number }) {
+  if (value !== null && typeof value === 'object' && depth < 6) {
+    const entries = Array.isArray(value)
+      ? value.map((v, i) => [String(i), v] as const)
+      : Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) {
+      return (
+        <span style={{ color: themeVars.content.muted }}>{Array.isArray(value) ? '[]' : '{}'}</span>
+      );
+    }
+    return (
+      <div
+        style={
+          depth === 0
+            ? undefined
+            : {
+                paddingLeft: 10,
+                marginLeft: 3,
+                borderLeft: `1px solid ${themeVars.boundary.default}`,
+              }
+        }
+      >
+        {entries.map(([key, v]) => (
+          <div key={key}>
+            <span style={{ color: themeVars.accent.default }}>{key}</span>
+            <span style={{ color: themeVars.content.muted }}>: </span>
+            <JsonNode value={v} depth={depth + 1} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+  let label: string;
+  try {
+    label = JSON.stringify(value) ?? 'undefined';
+  } catch {
+    label = String(value);
+  }
+  return <span style={{ color: leafColor(value) }}>{label}</span>;
+}
+
+export function StateWatchPanel() {
+  const [providers, setProviders] = useState<ProviderInfo[] | null>(() => {
+    const debug = getActiveDebug();
+    return debug ? debug.providers() : null;
+  });
+  const [selected, setSelected] = useState<string | null>(null);
+  const [value, setValue] = useState<unknown>(undefined);
+  const [readError, setReadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const tick = () => {
+      const debug = getActiveDebug();
+      setProviders(debug ? debug.providers() : null);
+    };
+    tick();
+    const intervalId = setInterval(tick, 250);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  // Poll the SELECTED provider's value (NetworkSection's 250ms idiom) — a
+  // separate effect keyed on the selection so switching providers reads
+  // immediately instead of waiting out the interval.
+  useEffect(() => {
+    if (!selected) return;
+    const tick = () => {
+      const debug = getActiveDebug();
+      if (!debug) return;
+      try {
+        setValue(debug.state(selected));
+        setReadError(null);
+      } catch (err) {
+        setReadError(err instanceof Error ? err.message : String(err));
+      }
+    };
+    tick();
+    const intervalId = setInterval(tick, 250);
+    return () => clearInterval(intervalId);
+  }, [selected]);
+
+  if (!providers) return null;
+
+  const selectedExists = selected !== null && providers.some((p) => p.name === selected);
+
+  return (
+    <div
+      data-testid="state-watch-panel"
+      style={{
+        flex: 1,
+        minHeight: 0,
+        display: 'flex',
+        fontSize: 11,
+        color: themeVars.content.primary,
+        background: themeVars.surface.inset,
+      }}
+    >
+      {/* Provider list (master) — DataPanel's file-list idiom */}
+      <div
+        style={{
+          width: 220,
+          flexShrink: 0,
+          overflowY: 'auto',
+          borderRight: `1px solid ${themeVars.boundary.default}`,
+          padding: '4px 0',
+        }}
+      >
+        {providers.length === 0 ? (
+          <div style={{ padding: 12, fontSize: 12, color: themeVars.content.muted }}>
+            <p style={{ margin: '0 0 6px' }}>No state providers registered.</p>
+            <p style={{ margin: 0 }}>
+              Register one from a GameComponent with{' '}
+              <code>ctx.debug.registerStateProvider(name, fn)</code>.
+            </p>
+          </div>
+        ) : (
+          providers.map((p) => {
+            const isSelected = selected === p.name;
+            return (
+              <EditorListButton
+                key={p.name}
+                selected={isSelected}
+                data-testid={`state-provider-${p.name}`}
+                onClick={() => setSelected(p.name)}
+                title={p.name}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  padding: '3px 8px',
+                  fontSize: 11,
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: themeVars.typography.mono,
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {p.name}
+                </span>
+                <TierBadge tier={p.tier} name={p.name} />
+              </EditorListButton>
+            );
+          })
+        )}
+      </div>
+      {/* Live value (detail) */}
+      <div
+        data-testid="state-watch-value"
+        style={{
+          flex: 1,
+          minWidth: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          fontFamily: themeVars.typography.mono,
+        }}
+      >
+        {selectedExists && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: '4px 8px',
+              borderBottom: `1px solid ${themeVars.boundary.default}`,
+              flexShrink: 0,
+            }}
+          >
+            <span
+              style={{
+                color: themeVars.content.primary,
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {selected}
+            </span>
+            <span
+              title="Polled every 250ms while playing"
+              style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}
+            >
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: '50%',
+                  background: themeVars.semantic.success,
+                }}
+              />
+              <span style={{ color: themeVars.content.muted, fontSize: 9 }}>live</span>
+            </span>
+          </div>
+        )}
+        <div
+          style={{
+            flex: 1,
+            minHeight: 0,
+            overflow: 'auto',
+            padding: '6px 8px',
+            lineHeight: '17px',
+          }}
+        >
+          {!selectedExists ? (
+            <span style={{ color: themeVars.content.dim }}>
+              Select a provider to watch its live value.
+            </span>
+          ) : readError ? (
+            <span style={{ color: themeVars.semantic.danger }}>{readError}</span>
+          ) : (
+            <JsonNode value={value} depth={0} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StatsOverlay.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { themeVars } from '../design-system';
 import { useEditorStats } from '../EditorContext';
 
 export function StatsOverlay() {
@@ -11,18 +12,24 @@ export function StatsOverlay() {
   }, []);
 
   return (
+    // EDITOR-STYLE-AUDIT.md V-10 — this was an EIGHTH one-off "dark panel"
+    // value (`rgba(0,0,0,0.7)`, flat black, no border) directly stacked
+    // above-right of ViewportOverlay's cluster and CameraInfo's pill in the
+    // same corner. Given the same border/radius treatment as its siblings so
+    // the whole corner reads as one family.
     <div
       style={{
         position: 'absolute',
         top: 48,
         right: 8,
-        background: 'rgba(0, 0, 0, 0.7)',
-        borderRadius: 4,
+        background: themeVars.surface.overlay,
+        border: `1px solid ${themeVars.boundary.strong}`,
+        borderRadius: themeVars.shape.medium,
         padding: '6px 10px',
         pointerEvents: 'auto',
-        fontSize: 11,
-        color: '#c5c8ce',
-        fontFamily: 'monospace',
+        fontSize: 'var(--vgai-font-base)',
+        color: themeVars.content.primary,
+        fontFamily: themeVars.typography.mono,
         lineHeight: '16px',
       }}
     >

package/src/components/StatusBar.tsx

@@ -0,0 +1,64 @@
+import { chromeSize, themeVars } from '../design-system';
+/**
+ * W4 (docs/EDITOR-WORKSPACE-SHELL-TODO.md §1.5/§4.1/§9 W4) — the narrow
+ * STATUS BAR: the first (and only) consumer of the W0 workspace-status
+ * registry. "Status is status, not a command": compact session state on the
+ * left (save/dirty/failure, error count, play state, connection while
+ * active, build progress), concise selection information on the right —
+ * the §4.1 mock's bottom line.
+ *
+ * The bar renders every registered contribution in (align, order,
+ * registration-sequence) order; a contribution that is currently
+ * meaningless returns null itself (the registry contract), so inactive
+ * items occupy no space and the flex `gap` never double-spaces.
+ *
+ * Mounted by `DefaultEditorLayout` into the `#editor-bottom` portal BELOW
+ * the bottom dock/drawer, matching the mock's row order (drawer line, then
+ * status line).
+ */
+
+import { useSyncExternalStore } from 'react';
+import {
+  subscribeWorkspaceStatus,
+  workspaceStatusContributions,
+  workspaceStatusRegistryVersion,
+} from '../workspace-status-registry';
+
+export function StatusBar() {
+  useSyncExternalStore(subscribeWorkspaceStatus, workspaceStatusRegistryVersion);
+  const left = workspaceStatusContributions('left');
+  const right = workspaceStatusContributions('right');
+
+  return (
+    <div
+      data-testid="status-bar"
+      // W5 a11y — the shell's `status` landmark (§9/W5): a live region ATs
+      // announce politely; also why focus mode keeps this bar visible.
+      role="status"
+      style={{
+        height: chromeSize.statusBar,
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: '0 8px',
+        background: themeVars.surface.chrome,
+        borderTop: `1px solid ${themeVars.boundary.default}`,
+        fontSize: 'var(--vgai-font-sm)',
+        color: themeVars.content.muted,
+        pointerEvents: 'auto',
+        userSelect: 'none',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {left.map((c) => (
+        <c.Content key={c.id} />
+      ))}
+      <div style={{ marginLeft: 'auto' }} />
+      {right.map((c) => (
+        <c.Content key={c.id} />
+      ))}
+    </div>
+  );
+}

package/src/components/ThemeManagerDialog.css

@@ -0,0 +1,89 @@
+.vgai-theme-manager-content {
+  min-height: 0;
+  flex: 1;
+  align-items: stretch;
+}
+
+.vgai-theme-list {
+  width: 220px;
+  flex: 0 0 auto;
+  padding: var(--vgai-space-4);
+  overflow-y: auto;
+  background: var(--vgai-surface-panel);
+  border-right: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  box-sizing: border-box;
+}
+
+.vgai-theme-choice {
+  width: 100%;
+  height: auto;
+  min-height: var(--vgai-control-comfortable-height);
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: var(--vgai-space-2);
+  text-align: left;
+}
+
+.vgai-theme-choice[aria-pressed="true"] {
+  color: var(--vgai-content-primary);
+  background: var(--vgai-accent-muted);
+}
+
+.vgai-theme-list-action {
+  width: 100%;
+  margin-top: var(--vgai-space-2);
+}
+.vgai-theme-tokens {
+  min-width: 0;
+  flex: 1;
+  padding: var(--vgai-space-8);
+  overflow-y: auto;
+}
+.vgai-theme-name-row {
+  margin-bottom: var(--vgai-space-8);
+}
+.vgai-theme-name-field {
+  min-width: 0;
+  flex: 1;
+}
+.vgai-theme-readonly-note {
+  margin-bottom: var(--vgai-space-8);
+}
+.vgai-theme-group {
+  margin-bottom: var(--vgai-space-10);
+}
+.vgai-theme-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(220px, 1fr));
+  gap: var(--vgai-space-4) var(--vgai-space-8);
+}
+.vgai-theme-value > .vgai-input {
+  min-width: 0;
+  flex: 1;
+}
+.vgai-theme-swatch-input,
+.vgai-theme-swatch-preview {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  padding: 1px;
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-sm);
+  box-sizing: border-box;
+}
+.vgai-theme-swatch-input {
+  background: transparent;
+  cursor: pointer;
+}
+.vgai-theme-message {
+  margin-right: auto;
+}
+
+@media (max-width: 760px) {
+  .vgai-theme-list {
+    width: 180px;
+  }
+  .vgai-theme-field-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}