@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/BuildPanel.tsx

@@ -1,455 +0,0 @@
-import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { getDownloadUrl, saveFile, startExport } from '../editor-api';
-
-type BuildTarget = 'web';
-type BuildPhase = 'idle' | 'building' | 'done';
-
-interface BuildResult {
-  ok: boolean;
-  code: number | null;
-}
-
-interface ProjectConfig {
-  name: string;
-  resolution: { width: number; height: number };
-  appId: string;
-}
-
-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 },
-];
-
-export function BuildPanel() {
-  const [config, setConfig] = useState<ProjectConfig>(DEFAULT_CONFIG);
-  const [phase, setPhase] = useState<BuildPhase>('idle');
-  const [selected, setSelected] = useState<BuildTarget>('web');
-  const [log, setLog] = useState<string[]>([]);
-  const [result, setResult] = useState<BuildResult | null>(null);
-  const logRef = useRef<HTMLDivElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
-  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Load config on mount
-  useEffect(() => {
-    fetch('/project.json')
-      .then((res) => (res.ok ? res.json() : DEFAULT_CONFIG))
-      .then((data) => setConfig({ ...DEFAULT_CONFIG, ...data }))
-      .catch(() => {});
-  }, []);
-
-  // Auto-scroll log
-  useEffect(() => {
-    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
-  }, [log]);
-
-  // Debounced save
-  const saveConfig = useCallback((cfg: ProjectConfig) => {
-    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    saveTimerRef.current = setTimeout(() => {
-      saveFile('project.json', JSON.stringify(cfg, null, 2)).catch(() => {});
-    }, 500);
-  }, []);
-
-  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 startBuild = useCallback(async () => {
-    setPhase('building');
-    setLog([]);
-    setResult(null);
-
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    try {
-      const res = await startExport(selected, controller.signal);
-
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ error: 'Build request failed' }));
-        setLog((prev) => [...prev, `Error: ${err.error ?? res.statusText}`]);
-        setResult({ ok: false, code: null });
-        setPhase('done');
-        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') {
-            try {
-              const text = JSON.parse(data) as string;
-              setLog((prev) => [...prev, text]);
-            } catch {
-              setLog((prev) => [...prev, data]);
-            }
-          } else if (event === 'done') {
-            try {
-              const r = JSON.parse(data) as BuildResult;
-              setResult(r);
-            } catch {
-              setResult({ ok: false, code: null });
-            }
-            setPhase('done');
-          }
-        }
-      }
-    } catch (err: unknown) {
-      if ((err as Error).name !== 'AbortError') {
-        setLog((prev) => [...prev, `Error: ${(err as Error).message}`]);
-        setResult({ ok: false, code: null });
-        setPhase('done');
-      }
-    }
-  }, [selected]);
-
-  const cancelBuild = useCallback(() => {
-    abortRef.current?.abort();
-    setPhase('idle');
-  }, []);
-
-  const targetInfo = TARGETS.find((t) => t.id === selected)!;
-
-  return (
-    <div style={{ display: 'flex', flex: 1, minHeight: 0, background: '#2c2c2c' }}>
-      {/* Left: target list */}
-      <div style={targetListStyle}>
-        {TARGETS.map((t) => (
-          <div
-            key={t.id}
-            onClick={() => {
-              if (phase !== 'building') setSelected(t.id);
-            }}
-            style={{
-              padding: '8px 12px',
-              cursor: phase === 'building' ? 'default' : 'pointer',
-              background: selected === t.id ? '#353535' : 'transparent',
-              borderLeft: `3px solid ${selected === t.id ? '#579EFF' : 'transparent'}`,
-              opacity: phase === 'building' && selected !== t.id ? 0.4 : 1,
-            }}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <FontAwesomeIcon
-                icon={t.icon}
-                style={{ fontSize: 13, color: selected === t.id ? '#579EFF' : '#888' }}
-              />
-              <div>
-                <div
-                  style={{
-                    fontSize: 12,
-                    fontWeight: 600,
-                    color: selected === t.id ? '#c5c8ce' : '#999',
-                  }}
-                >
-                  {t.label}
-                </div>
-                <div style={{ fontSize: 10, color: '#666', marginTop: 1 }}>{t.subtitle}</div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Right: phase-dependent content */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-        {/* Idle: settings + build button */}
-        {phase === 'idle' && (
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '10px 16px' }}>
-            <div style={sectionHeaderStyle}>Project</div>
-
-            <div style={fieldRowStyle}>
-              <label style={labelStyle}>Name</label>
-              <input
-                style={textInputStyle}
-                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 }}>
-                <input
-                  type="number"
-                  style={{ ...textInputStyle, 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: '#666' }}>&times;</span>
-                <input
-                  type="number"
-                  style={{ ...textInputStyle, 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>
-              <input
-                style={textInputStyle}
-                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: '#888' }}>{targetInfo.output}</span>
-            </div>
-
-            <div
-              style={{
-                marginTop: 'auto',
-                display: 'flex',
-                justifyContent: 'flex-end',
-                paddingTop: 8,
-              }}
-            >
-              <button type="button" onClick={startBuild} style={buildBtnStyle}>
-                Build
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Building: log */}
-        {phase === 'building' && (
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-            <div style={buildingHeaderStyle}>
-              <span>Building for {targetInfo.label}...</span>
-              <button type="button" onClick={cancelBuild} style={smallBtnStyle}>
-                Cancel
-              </button>
-            </div>
-            <div ref={logRef} style={logBoxStyle}>
-              {log.map((line, i) => (
-                <div key={i}>{line || '\u00A0'}</div>
-              ))}
-              <div
-                style={{
-                  display: 'inline-block',
-                  width: 6,
-                  height: 14,
-                  background: '#579EFF',
-                  animation: 'blink 1s step-end infinite',
-                }}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Done: result */}
-        {phase === 'done' && (
-          <div
-            style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 8,
-              padding: 16,
-            }}
-          >
-            <div style={{ fontSize: 28, color: result?.ok ? '#4ec9b0' : '#ff6b6b' }}>
-              {result?.ok ? '\u2713' : '\u2717'}
-            </div>
-            <div style={{ fontSize: 13, fontWeight: 600, color: '#c5c8ce' }}>
-              {result?.ok ? 'Build Complete' : 'Build Failed'}
-            </div>
-            {result?.ok ? (
-              <div style={{ fontSize: 12, color: '#888' }}>{targetInfo.output}</div>
-            ) : (
-              <div style={{ fontSize: 12, color: '#888' }}>
-                Exit code: {result?.code ?? 'unknown'}
-              </div>
-            )}
-            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
-              {result?.ok && selected === 'web' && (
-                <a
-                  href={getDownloadUrl(targetInfo.output)}
-                  download={targetInfo.output}
-                  style={downloadBtnStyle}
-                >
-                  Download
-                </a>
-              )}
-              <button
-                type="button"
-                onClick={() => {
-                  setPhase('idle');
-                  setLog([]);
-                  setResult(null);
-                }}
-                style={buildBtnStyle}
-              >
-                Build Again
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/* ---- Styles ---- */
-
-const targetListStyle: React.CSSProperties = {
-  width: 140,
-  flexShrink: 0,
-  borderRight: '1px solid #333',
-  overflowY: 'auto',
-};
-
-const sectionHeaderStyle: React.CSSProperties = {
-  fontSize: 10,
-  fontWeight: 700,
-  textTransform: 'uppercase',
-  color: '#666',
-  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: '#8c8c8c',
-  flexShrink: 0,
-};
-
-const textInputStyle: React.CSSProperties = {
-  flex: 1,
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '2px 6px',
-  fontSize: 12,
-  outline: 'none',
-  minWidth: 0,
-};
-
-const buildingHeaderStyle: React.CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '8px 12px',
-  fontSize: 12,
-  fontWeight: 600,
-  color: '#579EFF',
-  flexShrink: 0,
-  borderBottom: '1px solid #333',
-};
-
-const smallBtnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 4,
-  padding: '4px 12px',
-  fontSize: 11,
-  cursor: 'pointer',
-};
-
-const buildBtnStyle: React.CSSProperties = {
-  background: '#579EFF',
-  color: '#fff',
-  border: '1px solid #6AADFF',
-  borderRadius: 4,
-  padding: '6px 16px',
-  fontSize: 12,
-  fontWeight: 600,
-  cursor: 'pointer',
-};
-
-const downloadBtnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 4,
-  padding: '6px 16px',
-  fontSize: 12,
-  cursor: 'pointer',
-  textDecoration: 'none',
-  display: 'inline-block',
-};
-
-const logBoxStyle: React.CSSProperties = {
-  flex: 1,
-  overflowY: 'auto',
-  background: '#1a1a1a',
-  padding: '4px 8px',
-  fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
-  fontSize: 11,
-  lineHeight: '16px',
-  color: '#aaa',
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-all',
-  minHeight: 0,
-};

package/src/components/FolderTree.tsx

@@ -1,179 +0,0 @@
-import { faChevronDown, faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
-import { listAssets } from '../editor-api';
-
-// --- Types ---
-
-interface FolderTreeNode {
-  id: string;
-  name: string;
-  root: string;
-  path: string;
-  children: FolderTreeNode[];
-}
-
-interface FolderTreeProps {
-  currentPath: string;
-  currentRoot: string;
-  onNavigate: (root: string, path: string) => void;
-}
-
-interface FolderRow {
-  node: FolderTreeNode;
-  depth: number;
-  hasChildren: boolean;
-  isOpen: boolean;
-}
-
-// --- Helpers ---
-
-function makeNodeId(root: string, path: string): string {
-  return `${root}:${path}`;
-}
-
-async function fetchSubfolders(root: string, dir: string): Promise<FolderTreeNode[]> {
-  const entries = await listAssets(root, dir);
-  return entries
-    .filter((e) => e.type === 'directory')
-    .map((e) => {
-      const path = dir ? `${dir}/${e.name}` : e.name;
-      return {
-        id: makeNodeId(root, path),
-        name: e.name,
-        root,
-        path,
-        children: [],
-      };
-    });
-}
-
-/** Recursively replace children of a target node by ID. */
-function updateNodeChildren(
-  nodes: FolderTreeNode[],
-  targetId: string,
-  newChildren: FolderTreeNode[],
-): FolderTreeNode[] {
-  return nodes.map((node) => {
-    if (node.id === targetId) return { ...node, children: newChildren };
-    if (node.children.length > 0) {
-      const updated = updateNodeChildren(node.children, targetId, newChildren);
-      if (updated !== node.children) return { ...node, children: updated };
-    }
-    return node;
-  });
-}
-
-function flattenFolderRows(nodes: FolderTreeNode[], openIds: Set<string>, depth = 0): FolderRow[] {
-  const rows: FolderRow[] = [];
-  for (const node of nodes) {
-    const isOpen = openIds.has(node.id);
-    // Show as having children if explicitly opened (children may be loading)
-    // or if children array is non-empty
-    const hasChildren = node.children.length > 0 || isOpen;
-    rows.push({ node, depth, hasChildren, isOpen });
-    if (isOpen && node.children.length > 0) {
-      rows.push(...flattenFolderRows(node.children, openIds, depth + 1));
-    }
-  }
-  return rows;
-}
-
-// --- Main Component ---
-
-export function FolderTree({ currentPath, currentRoot, onNavigate }: FolderTreeProps) {
-  const [treeData, setTreeData] = useState<FolderTreeNode[]>([]);
-  const openIdsRef = useRef(new Set<string>());
-  const loadedRef = useRef(new Set<string>());
-  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
-
-  // Load top-level folders directly (no wrapper "public" node)
-  useEffect(() => {
-    fetchSubfolders('public', '').then((topFolders) => {
-      setTreeData(topFolders);
-    });
-  }, []);
-
-  const loadChildren = useCallback((id: string, root: string, path: string) => {
-    if (loadedRef.current.has(id)) return;
-    loadedRef.current.add(id);
-    fetchSubfolders(root, path).then((children) => {
-      setTreeData((prev) => updateNodeChildren(prev, id, children));
-    });
-  }, []);
-
-  const selectedId = makeNodeId(currentRoot, currentPath);
-  const rows = flattenFolderRows(treeData, openIdsRef.current);
-
-  return (
-    <div style={{ flex: 1, minHeight: 0, overflow: 'auto', paddingTop: 4 }}>
-      {rows.map((row) => {
-        const data = row.node;
-        const isActive = data.id === selectedId;
-
-        return (
-          <div
-            key={data.id}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              height: 24,
-              gap: 4,
-              paddingLeft: row.depth * 14,
-              cursor: 'pointer',
-              background: isActive ? '#579EFF33' : 'transparent',
-              color: isActive ? '#fff' : '#c5c8ce',
-              borderRadius: 2,
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              fontSize: 12,
-            }}
-            onClick={() => {
-              onNavigate(data.root, data.path);
-              if (!row.isOpen) {
-                openIdsRef.current.add(data.id);
-                loadChildren(data.id, data.root, data.path);
-                forceUpdate();
-              }
-            }}
-            onMouseEnter={(e) => {
-              if (!isActive) (e.currentTarget as HTMLDivElement).style.background = '#333';
-            }}
-            onMouseLeave={(e) => {
-              if (!isActive) (e.currentTarget as HTMLDivElement).style.background = 'transparent';
-            }}
-          >
-            {/* Expand/collapse arrow */}
-            <span
-              onClick={(e) => {
-                e.stopPropagation();
-                const set = openIdsRef.current;
-                if (set.has(data.id)) {
-                  set.delete(data.id);
-                } else {
-                  set.add(data.id);
-                  loadChildren(data.id, data.root, data.path);
-                }
-                forceUpdate();
-              }}
-              style={{
-                width: 10,
-                fontSize: 8,
-                textAlign: 'center',
-                flexShrink: 0,
-                color: '#8c8c8c',
-                userSelect: 'none',
-              }}
-            >
-              <FontAwesomeIcon icon={row.isOpen ? faChevronDown : faChevronRight} />
-            </span>
-            <span style={{ fontSize: 12, color: '#e8a740' }}>
-              <FontAwesomeIcon icon={faFolder} />
-            </span>
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{data.name}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}