@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/build-documents.tsx

@@ -0,0 +1,696 @@
+/**
+ * Build split (W3, docs/EDITOR-WORKSPACE-SHELL-TODO.md §5/§8/§9 W3 —
+ * inventory rows B4 + B15's W3 share): the permanent bottom BUILD tab
+ * (`BuildPanel.tsx`, deleted) mixed configuration + output log + progress in
+ * one drawer pane. Split per §5/§8:
+ *
+ *  - **Build Profiles** (configuration: target list, project name /
+ *    resolution / app id, the Build trigger) → a center DOCUMENT (kind
+ *    `'build-profiles'`). Chosen over the §5 row's focused-dialog
+ *    alternative because (a) §7.1 names Build Profiles among the real
+ *    first-party document implementers, (b) the configuration is a
+ *    persistent authored surface (it writes `vgai.game.json` through the
+ *    history service) someone tunes and re-runs, not a one-shot confirm —
+ *    document semantics, and (c) a modal would block the viewport while a
+ *    build streams. A future focused "quick build" dialog stays additive.
+ *  - **Build Output** (the log) → a workspace-utility registration
+ *    (`build-output`) — rendered by Dockview as a movable utility panel that
+ *    defaults to the bottom edge group, exactly like story utilities. Always available in server mode so
+ *    it is reachable before the first build (it owns its empty state);
+ *    starting a build raises `editor:show-build-output` so its current group
+ *    reveals and focuses it (the old `editor:show-build-tab` reflex, split in two).
+ *  - **build progress** → a workspace-STATUS registration
+ *    (`build-progress`, W0 registry). Registering now is correct even
+ *    though the status bar doesn't exist yet: the registry renders nowhere
+ *    until W4 consumes it — the contribution is inert, typed, tested.
+ *
+ * The build SESSION (phase/log/result) is a module-scope store so all three
+ * surfaces observe one truth — the old panel lost its log if the tab
+ * unmounted mid-build; the session now outlives any one surface.
+ *
+ * Build ACTIONS remain reachable everywhere they were: the PlayBar hammer,
+ * the palette `build.*` actions, and the `show-build` control command all
+ * open the Build Profiles document (whose Build button runs the same
+ * `startExport` server flow as before).
+ */
+
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  accent,
+  Button,
+  bg,
+  border,
+  danger,
+  EditorIcon,
+  EditorListButton,
+  fontMono,
+  success,
+  TextInput,
+  text,
+} from '../design-system';
+import { getDownloadUrl, readProjectTextFile, saveFile, startExport } from '../editor-api';
+import { getProjectFileHistory } from '../history/project-file-history';
+import { createHmrRegistrationGroup } from '../hmr-registration-group';
+import {
+  openWorkspaceDocument,
+  type WorkspaceDocumentContentProps,
+} from '../workspace-document-registry';
+import { registerWorkspaceStatus } from '../workspace-status-registry';
+import { registerWorkspaceUtility } from '../workspace-utility-registry';
+import { workspaceHistoryService } from './workspace-history';
+
+export type BuildTarget = 'web';
+export type BuildPhase = 'idle' | 'building' | 'done';
+
+export interface BuildResult {
+  ok: boolean;
+  code: number | null;
+}
+
+interface ProjectConfig {
+  name: string;
+  resolution: { width: number; height: number };
+  appId: string;
+}
+
+const MANIFEST_PATH = 'vgai.game.json';
+
+const DEFAULT_CONFIG: ProjectConfig = {
+  name: 'My Game',
+  resolution: { width: 1280, height: 720 },
+  appId: 'com.example.mygame',
+};
+
+const TARGETS: {
+  id: BuildTarget;
+  label: string;
+  subtitle: string;
+  output: string;
+  icon: typeof faGlobe;
+}[] = [
+  { id: 'web', label: 'Web', subtitle: 'HTML5 for itch.io', output: 'vgai-web.zip', icon: faGlobe },
+];
+
+// --- The build SESSION store (one truth for document/utility/status) -------
+
+export interface BuildSession {
+  readonly phase: BuildPhase;
+  readonly target: BuildTarget;
+  readonly log: readonly string[];
+  readonly result: BuildResult | null;
+}
+
+let _session: BuildSession = { phase: 'idle', target: 'web', log: [], result: null };
+let _version = 0;
+const _listeners = new Set<() => void>();
+let _abort: AbortController | null = null;
+
+function setSession(patch: Partial<BuildSession>): void {
+  _session = { ..._session, ...patch };
+  _version++;
+  for (const fn of _listeners) fn();
+}
+
+/** Subscribe to build-session changes. Returns unsubscribe. */
+export function subscribeBuildSession(fn: () => void): () => void {
+  _listeners.add(fn);
+  return () => {
+    _listeners.delete(fn);
+  };
+}
+
+/** Monotonic change counter — the `getSnapshot` for `useSyncExternalStore`. */
+export function buildSessionVersion(): number {
+  return _version;
+}
+
+/** The current build session (stable reference between changes). */
+export function getBuildSession(): BuildSession {
+  return _session;
+}
+
+/** Back to idle (the `Build Again` reset). No-op mid-build. */
+export function resetBuildSession(): void {
+  if (_session.phase === 'building') return;
+  setSession({ phase: 'idle', log: [], result: null });
+}
+
+/** Abort a running build (the old panel's Cancel, unchanged semantics). */
+export function cancelBuild(): void {
+  _abort?.abort();
+  setSession({ phase: 'idle' });
+}
+
+/**
+ * Run a build — the exact `startExport` SSE-stream consumption the old
+ * panel's `startBuild` had, moved to module scope so the session outlives
+ * any one surface. Raises `editor:show-build-output` so the bottom area
+ * focuses the Build Output utility.
+ */
+export async function startBuild(target: BuildTarget): Promise<void> {
+  if (_session.phase === 'building') return;
+  setSession({ phase: 'building', target, log: [], result: null });
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new CustomEvent('editor:show-build-output'));
+  }
+
+  const controller = new AbortController();
+  _abort = controller;
+
+  try {
+    const res = await startExport(target, controller.signal);
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: 'Build request failed' }));
+      setSession({
+        phase: 'done',
+        log: [..._session.log, `Error: ${err.error ?? res.statusText}`],
+        result: { ok: false, code: null },
+      });
+      return;
+    }
+
+    const reader = res.body!.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const parts = buffer.split('\n\n');
+      buffer = parts.pop()!;
+
+      for (const part of parts) {
+        if (part.startsWith(':')) continue;
+        const lines = part.split('\n');
+        let event = '';
+        let data = '';
+        for (const line of lines) {
+          if (line.startsWith('event: ')) event = line.slice(7);
+          else if (line.startsWith('data: ')) data = line.slice(6);
+        }
+        if (event === 'log') {
+          let lineText: string;
+          try {
+            lineText = JSON.parse(data) as string;
+          } catch {
+            lineText = data;
+          }
+          setSession({ log: [..._session.log, lineText] });
+        } else if (event === 'done') {
+          let result: BuildResult;
+          try {
+            result = JSON.parse(data) as BuildResult;
+          } catch {
+            result = { ok: false, code: null };
+          }
+          setSession({ phase: 'done', result });
+        }
+      }
+    }
+  } catch (err: unknown) {
+    if ((err as Error).name !== 'AbortError') {
+      setSession({
+        phase: 'done',
+        log: [..._session.log, `Error: ${(err as Error).message}`],
+        result: { ok: false, code: null },
+      });
+    }
+  }
+}
+
+/** Test-only reset. */
+export function __resetBuildSessionForTest(): void {
+  _abort?.abort();
+  _abort = null;
+  _session = { phase: 'idle', target: 'web', log: [], result: null };
+  _version++;
+  for (const fn of _listeners) fn();
+}
+
+// --- Shell contributions (utility + status) ---------------------------------
+
+const registrationGroup = createHmrRegistrationGroup(import.meta.hot, 'build-contributions');
+
+/**
+ * Idempotent one-time registration of the build shell contributions: the
+ * on-demand `Build Output` utility and the `build-progress` status
+ * contribution. Call in server mode only (builds spawn
+ * `npm run <script>` server-side — no browser-mode equivalent, same gate the
+ * old tab had). Output appears when a build starts, when a failure requests
+ * attention, or when the user explicitly opens it; an empty output tab does
+ * not occupy the clean default strip.
+ */
+export function ensureBuildContributionsRegistered(): void {
+  registrationGroup.ensure((track) => {
+    track(
+      registerWorkspaceUtility({
+        id: 'build-output',
+        title: 'Build Output',
+        Content: BuildOutputUtility,
+        visibleByDefault: false,
+        closeable: true,
+      }),
+    );
+    track(
+      registerWorkspaceStatus({
+        id: 'build-progress',
+        align: 'left',
+        Content: BuildProgressStatus,
+      }),
+    );
+  });
+}
+
+/** Test-only: allow re-registration after a registry reset. */
+export function __resetBuildContributionsForTest(): void {
+  registrationGroup.reset();
+}
+
+/** Build Output utility content: the session log (+ result line), or its
+ *  own empty state before any build has run. */
+export function BuildOutputUtility() {
+  useSyncExternalStore(subscribeBuildSession, buildSessionVersion);
+  const session = _session;
+  const logRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll (the old panel's log behavior, unchanged).
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+  });
+
+  if (session.phase === 'idle' && session.log.length === 0) {
+    return (
+      <div
+        data-testid="build-output-empty"
+        style={{ padding: 12, fontSize: 12, color: text[2], maxWidth: 480 }}
+      >
+        <p style={{ margin: 0 }}>
+          No build output yet — run a build from the <b>Build Profiles</b> document (toolbar hammer,
+          or the palette's Build actions).
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div
+      data-testid="build-output-utility"
+      style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}
+    >
+      <div ref={logRef} style={logBoxStyle}>
+        {session.log.map((line, i) => (
+          <div key={i}>{line || ' '}</div>
+        ))}
+        {session.phase === 'building' && (
+          <div
+            style={{
+              display: 'inline-block',
+              width: 6,
+              height: 14,
+              background: accent,
+              animation: 'blink 1s step-end infinite',
+            }}
+          />
+        )}
+        {session.phase === 'done' && session.result && (
+          <div style={{ color: session.result.ok ? success : danger, marginTop: 4 }}>
+            {session.result.ok
+              ? 'Build complete.'
+              : `Build failed (exit code: ${session.result.code ?? 'unknown'}).`}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Compact build-progress status contribution (§5 "build progress | status
+ *  bar"). Nothing while idle; consumed by nothing until W4's status bar. */
+export function BuildProgressStatus() {
+  useSyncExternalStore(subscribeBuildSession, buildSessionVersion);
+  const session = _session;
+  if (session.phase === 'idle') return null;
+  if (session.phase === 'building') {
+    return (
+      <span data-testid="status-build-progress" style={{ fontSize: 10, color: accent }}>
+        Building {session.target}…
+      </span>
+    );
+  }
+  return (
+    <span
+      data-testid="status-build-progress"
+      style={{ fontSize: 10, color: session.result?.ok ? success : danger }}
+    >
+      {session.result?.ok ? 'Build ✓' : 'Build ✗'}
+    </span>
+  );
+}
+
+// --- The Build Profiles document --------------------------------------------
+
+/** Stable §7.1 identity of the single Build Profiles document. */
+export const BUILD_PROFILES_DOCUMENT_ID = 'workspace:build-profiles';
+
+/** The narrow store surface (T6.3 tab hand-off). */
+export interface BuildDocumentStore {
+  setActiveViewportTab(tab: 'scene' | 'game'): void;
+}
+
+/** Open (or activate) the center `Build Profiles` document — the target of
+ *  every build ACTION entry point (PlayBar hammer, palette, `show-build`). */
+export function openBuildProfilesDocument(store: BuildDocumentStore): string {
+  return openWorkspaceDocument({
+    id: BUILD_PROFILES_DOCUMENT_ID,
+    title: 'Build Profiles',
+    kind: 'build-profiles',
+    Content: BuildProfilesDocumentContent,
+    closeable: true,
+    onActivate: () => store.setActiveViewportTab('scene'),
+  });
+}
+
+/** The configuration surface — the old panel's target list + settings form,
+ *  minus the log (Build Output's job now). */
+export function BuildProfilesDocumentContent(_props: WorkspaceDocumentContentProps) {
+  useSyncExternalStore(subscribeBuildSession, buildSessionVersion);
+  const session = _session;
+  // Session history via the workspace-history bridge (see its doc comment);
+  // the per-service manager is cached inside getProjectFileHistory.
+  const history = workspaceHistoryService();
+  const fileHistory = history ? getProjectFileHistory(history) : null;
+  const [config, setConfig] = useState<ProjectConfig>(DEFAULT_CONFIG);
+  const [selected, setSelected] = useState<BuildTarget>('web');
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const loadConfig = useCallback(async () => {
+    const manifestText = await readProjectTextFile(MANIFEST_PATH);
+    const manifest = manifestText
+      ? (JSON.parse(manifestText) as Partial<ProjectConfig>)
+      : DEFAULT_CONFIG;
+    setConfig({
+      ...DEFAULT_CONFIG,
+      ...manifest,
+      resolution: { ...DEFAULT_CONFIG.resolution, ...manifest.resolution },
+    });
+  }, []);
+
+  useEffect(() => {
+    void loadConfig().catch(() => {});
+    return (
+      fileHistory?.subscribeAll((path) => {
+        if (path === MANIFEST_PATH) void loadConfig().catch(() => {});
+      }) ?? (() => {})
+    );
+  }, [fileHistory, loadConfig]);
+
+  useEffect(
+    () => () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    },
+    [],
+  );
+
+  // Merge only the build-owned fields into the manifest. Roots and every
+  // unrelated authored field must survive a Build Profiles edit.
+  const saveConfig = useCallback(
+    (cfg: ProjectConfig) => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(async () => {
+        const currentText = await readProjectTextFile(MANIFEST_PATH);
+        if (!currentText)
+          throw new Error(`Cannot edit build settings: ${MANIFEST_PATH} is missing`);
+        const manifest = JSON.parse(currentText) as Record<string, unknown>;
+        const content = `${JSON.stringify(
+          { ...manifest, name: cfg.name, resolution: cfg.resolution, appId: cfg.appId },
+          null,
+          2,
+        )}\n`;
+        if (!fileHistory) {
+          await saveFile(MANIFEST_PATH, content);
+          return;
+        }
+        await fileHistory
+          .write(MANIFEST_PATH, content, {
+            label: 'Edit Build Settings',
+            kind: 'settings',
+            contentType: 'application/json',
+          })
+          .catch(() => void loadConfig().catch(() => {}));
+      }, 500);
+    },
+    [fileHistory, loadConfig],
+  );
+
+  const updateConfig = useCallback(
+    (patch: Partial<ProjectConfig>) => {
+      setConfig((prev) => {
+        const next = { ...prev, ...patch };
+        saveConfig(next);
+        return next;
+      });
+    },
+    [saveConfig],
+  );
+
+  const updateResolution = useCallback(
+    (key: 'width' | 'height', value: number) => {
+      setConfig((prev) => {
+        const next = { ...prev, resolution: { ...prev.resolution, [key]: Math.round(value) } };
+        saveConfig(next);
+        return next;
+      });
+    },
+    [saveConfig],
+  );
+
+  const phase = session.phase;
+  const targetInfo = TARGETS.find((t) => t.id === selected)!;
+
+  return (
+    <div
+      data-testid="build-profiles-document"
+      style={{ display: 'flex', flex: 1, minHeight: 0, background: bg[1], pointerEvents: 'auto' }}
+    >
+      {/* Left: target list (the "profiles") */}
+      <div style={targetListStyle}>
+        {TARGETS.map((t) => (
+          <EditorListButton
+            key={t.id}
+            selected={selected === t.id}
+            disabled={phase === 'building'}
+            onClick={() => {
+              if (phase !== 'building') setSelected(t.id);
+            }}
+            style={{
+              padding: '8px 12px',
+              opacity: phase === 'building' && selected !== t.id ? 0.4 : 1,
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <EditorIcon
+                icon={t.icon}
+                style={{ fontSize: 13, color: selected === t.id ? accent : text[2] }}
+              />
+              <div>
+                <div
+                  style={{
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: selected === t.id ? text[1] : text[2],
+                  }}
+                >
+                  {t.label}
+                </div>
+                <div style={{ fontSize: 10, color: text[3], marginTop: 1 }}>{t.subtitle}</div>
+              </div>
+            </div>
+          </EditorListButton>
+        ))}
+      </div>
+
+      {/* Right: settings + phase-dependent action row */}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0,
+          padding: '10px 16px',
+          maxWidth: 560,
+        }}
+      >
+        <div style={sectionHeaderStyle}>Project</div>
+
+        <div style={fieldRowStyle}>
+          <label style={labelStyle}>Name</label>
+          <TextInput
+            className="vgai-input"
+            style={{ flex: 1 }}
+            value={config.name}
+            onChange={(e) => updateConfig({ name: e.target.value })}
+          />
+        </div>
+
+        <div style={fieldRowStyle}>
+          <label style={labelStyle}>Resolution</label>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4, flex: 1 }}>
+            <TextInput
+              type="number"
+              className="vgai-input"
+              style={{ width: 0, flex: 1 }}
+              value={config.resolution.width}
+              onChange={(e) => {
+                const v = Number.parseInt(e.target.value, 10);
+                if (Number.isFinite(v) && v > 0) updateResolution('width', v);
+              }}
+            />
+            <span style={{ fontSize: 10, color: text[3] }}>&times;</span>
+            <TextInput
+              type="number"
+              className="vgai-input"
+              style={{ width: 0, flex: 1 }}
+              value={config.resolution.height}
+              onChange={(e) => {
+                const v = Number.parseInt(e.target.value, 10);
+                if (Number.isFinite(v) && v > 0) updateResolution('height', v);
+              }}
+            />
+          </div>
+        </div>
+
+        <div style={fieldRowStyle}>
+          <label style={labelStyle}>App ID</label>
+          <TextInput
+            className="vgai-input"
+            style={{ flex: 1 }}
+            value={config.appId}
+            onChange={(e) => updateConfig({ appId: e.target.value })}
+          />
+        </div>
+
+        <div style={{ ...fieldRowStyle, marginTop: 4 }}>
+          <label style={labelStyle}>Output</label>
+          <span style={{ fontSize: 12, color: text[2] }}>{targetInfo.output}</span>
+        </div>
+
+        {/* Action row: Build / Cancel / result — the log itself streams into
+            the Build Output utility (the split's whole point). */}
+        <div
+          style={{
+            marginTop: 12,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            paddingTop: 8,
+            borderTop: `1px solid ${border[1]}`,
+          }}
+        >
+          {phase === 'building' ? (
+            <>
+              <span style={{ fontSize: 12, fontWeight: 600, color: accent }}>
+                Building for {TARGETS.find((t) => t.id === session.target)?.label ?? session.target}
+                … (log in Build Output below)
+              </span>
+              <Button size="compact" onClick={cancelBuild}>
+                Cancel
+              </Button>
+            </>
+          ) : (
+            <>
+              {phase === 'done' && session.result && (
+                <span
+                  data-testid="build-profiles-result"
+                  style={{
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: session.result.ok ? success : danger,
+                  }}
+                >
+                  {session.result.ok
+                    ? '✓ Build complete'
+                    : `✗ Build failed (exit ${session.result.code ?? 'unknown'})`}
+                </span>
+              )}
+              {phase === 'done' && session.result?.ok && session.target === 'web' && (
+                <a
+                  href={getDownloadUrl(targetInfo.output)}
+                  download={targetInfo.output}
+                  className="vgai-btn"
+                  data-variant="secondary"
+                  data-size="default"
+                  style={{
+                    textDecoration: 'none',
+                    display: 'inline-flex',
+                  }}
+                >
+                  Download
+                </a>
+              )}
+              <Button
+                variant="primary"
+                data-testid="build-profiles-build"
+                onClick={() => {
+                  if (phase === 'done') resetBuildSession();
+                  void startBuild(selected);
+                }}
+                style={{ marginLeft: 'auto' }}
+              >
+                {phase === 'done' ? 'Build Again' : 'Build'}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---- Styles (carried from the old panel) ---- */
+
+const targetListStyle: React.CSSProperties = {
+  width: 160,
+  flexShrink: 0,
+  borderRight: `1px solid ${border[1]}`,
+  overflowY: 'auto',
+};
+
+const sectionHeaderStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  color: text[3],
+  letterSpacing: '0.05em',
+  marginBottom: 6,
+};
+
+const fieldRowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  marginBottom: 4,
+};
+
+const labelStyle: React.CSSProperties = {
+  width: 65,
+  fontSize: 11,
+  color: text[2],
+  flexShrink: 0,
+};
+
+const logBoxStyle: React.CSSProperties = {
+  flex: 1,
+  overflowY: 'auto',
+  background: bg[0],
+  padding: '4px 8px',
+  fontFamily: fontMono,
+  fontSize: 11,
+  lineHeight: '16px',
+  color: text[2],
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  minHeight: 0,
+};