@forgeax/interface 0.4.1

package/dist/package/node/components/SettingsPrimitives.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createRestartableTimeoutTaskLifecycle } from '@forgeax/app-shell/react';
+import { Eye, EyeOff, UploadCloud, Copy, Check } from 'lucide-react';
+import { useTranslation } from '../i18n/index.js';
+export function Section({ icon, title, hint, children, }) {
+    return (_jsxs("div", { className: "settings-section", children: [_jsxs("div", { className: "settings-section-head", children: [_jsx("span", { className: "settings-section-icon", children: icon }), _jsx("span", { className: "settings-section-title", children: title })] }), hint && _jsx("div", { className: "settings-section-hint", children: hint }), _jsx("div", { className: "settings-section-body", children: children })] }));
+}
+export function EnvField({ label, masked, placeholder, onSave, busy, visible, notSetHint, onReset, resetTitle, }) {
+    const { t } = useTranslation();
+    const stored = masked ?? '';
+    const [value, setValue] = useState(visible ? stored : '');
+    const [revealed, setRevealed] = useState(false);
+    // Settings-panel section switches reuse this component instance at the same
+    // tree position (section nodes carry no keys), so without a reset the draft
+    // of e.g. ANTHROPIC_BASE_URL leaks into FORGEAX_UPLOAD_BRANCH. Re-key the
+    // local state on field identity.
+    useEffect(() => {
+        setValue(visible ? (masked ?? '') : '');
+        setRevealed(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [label]);
+    const trimmed = value.trim();
+    const dirty = visible ? trimmed !== stored : trimmed.length > 0;
+    const slot = visible ? placeholder : (masked ? t('settings.drawer.savedMasked', { masked }) : (notSetHint ?? t('settings.drawer.envNotSet')));
+    const commit = () => {
+        if (!trimmed || !dirty || busy)
+            return;
+        onSave(trimmed);
+        if (!visible)
+            setValue('');
+        setRevealed(false);
+    };
+    const reset = () => {
+        if (!onReset || busy || !masked)
+            return;
+        onReset();
+        setValue('');
+        setRevealed(false);
+    };
+    return (_jsxs("div", { className: "settings-row", children: [_jsx("label", { className: `settings-label${label.length > 28 ? ' settings-label--long' : ''}`, title: label, children: label }), _jsxs("div", { className: `settings-input-wrap${visible ? '' : ' with-eye'}`, children: [_jsx("input", { className: "settings-input", type: visible || revealed ? 'text' : 'password', value: value, placeholder: slot ?? '', spellCheck: false, autoComplete: "off", onChange: (e) => setValue(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter')
+                            commit(); }, disabled: busy }), !visible && (_jsx("button", { type: "button", className: "settings-eye-btn", onClick: () => setRevealed((v) => !v), title: revealed ? t('settings.drawer.hide') : t('settings.drawer.show'), tabIndex: -1, children: revealed ? _jsx(EyeOff, { size: 12 }) : _jsx(Eye, { size: 12 }) }))] }), onReset && (_jsx("button", { type: "button", className: "settings-cancel-btn", onClick: reset, disabled: busy || !masked, title: resetTitle ?? t('settings.upload.resetTokenTitle'), children: t('common.reset') })), _jsx("button", { className: "settings-save-btn", onClick: commit, disabled: busy || !dirty, title: dirty ? '' : (visible ? t('settings.drawer.noChanges') : t('settings.drawer.enterNewKeyHint')), children: t('common.save') })] }));
+}
+function fmtBytes(n) {
+    if (n < 1024)
+        return `${n} B`;
+    if (n < 1024 * 1024)
+        return `${(n / 1024).toFixed(1)} KB`;
+    return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+async function callUploadCommand(args) {
+    try {
+        const r = await fetch('/api/commands/upload/execute', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ args }),
+        });
+        const j = (await r.json().catch(() => null));
+        if (!j?.result)
+            return { ok: false, kind: 'transport', error: `HTTP ${r.status}` };
+        if (!j.result.ok)
+            return { ok: false, kind: 'transport', error: j.result.error ?? 'command failed' };
+        return j.result.data;
+    }
+    catch (e) {
+        return { ok: false, kind: 'network', error: e.message };
+    }
+}
+const PERSONAL_TOKEN_URL = 'https://github.com/settings/tokens/new?scopes=repo&description=ForgeaX+Upload';
+/** Full snapshot URL + copy button — the thing users paste back as feedback. */
+function SnapshotUrlRow({ url }) {
+    const { t } = useTranslation();
+    const [copied, setCopied] = useState(false);
+    const copiedResetTaskRef = useRef(null);
+    useEffect(() => {
+        const task = createRestartableTimeoutTaskLifecycle({
+            delayMs: 2000,
+            task: () => setCopied(false),
+        });
+        copiedResetTaskRef.current = task;
+        return () => {
+            copiedResetTaskRef.current = null;
+            task.dispose();
+        };
+    }, []);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(url);
+        }
+        catch {
+            // clipboard API unavailable (http / permission) — legacy path
+            const ta = document.createElement('textarea');
+            ta.value = url;
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            ta.remove();
+        }
+        setCopied(true);
+        copiedResetTaskRef.current?.schedule();
+    };
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 6, maxWidth: '100%' }, children: [_jsx("code", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: '0 1 auto' }, children: url }), _jsxs("button", { className: "settings-edit-btn", style: { flex: 'none' }, onClick: () => void copy(), children: [copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }), " ", copied ? t('settings.upload.copied') : t('settings.upload.copyUrl')] })] }));
+}
+export function UploadPanel({ tokenSet }) {
+    const { t } = useTranslation();
+    const [phase, setPhase] = useState('idle');
+    const [plan, setPlan] = useState(null);
+    const [outcome, setOutcome] = useState(null);
+    const doPlan = async () => {
+        setPhase('planning');
+        setOutcome(null);
+        setPlan(null);
+        const res = await callUploadCommand([]);
+        if (res.ok && res.kind === 'plan') {
+            setPlan(res);
+            setPhase('planned');
+        }
+        else {
+            setOutcome(res);
+            setPhase('idle');
+        }
+    };
+    const doConfirm = async () => {
+        if (!plan?.nonce)
+            return;
+        setPhase('pushing');
+        const res = await callUploadCommand(['confirm', plan.nonce]);
+        setOutcome(res.ok && res.kind === 'result' ? res : res);
+        setPlan(null);
+        setPhase('idle');
+    };
+    const cancel = () => { setPlan(null); setPhase('idle'); };
+    const running = phase === 'planning' || phase === 'pushing';
+    const btnLabel = phase === 'planning' ? t('settings.upload.btnPlanning')
+        : phase === 'pushing' ? t('settings.upload.btnPushing')
+            : t('settings.upload.btnIdle');
+    return (_jsxs("div", { style: { marginTop: 8 }, children: [phase !== 'planned' && (_jsxs("button", { className: "settings-edit-btn", onClick: () => void doPlan(), disabled: running, children: [_jsx(UploadCloud, { size: 12 }), " ", btnLabel] })), phase === 'idle' && !outcome && tokenSet === false && (_jsxs("div", { className: "settings-help", style: { marginTop: 6 }, children: [t('settings.upload.tokenHintPrefix'), ' ', _jsx("a", { href: PERSONAL_TOKEN_URL, target: "_blank", rel: "noreferrer", children: t('settings.upload.tokenHintLink') }), ' ', t('settings.upload.tokenHintSuffix')] })), phase === 'planned' && plan && (_jsxs("div", { className: "settings-help", style: { lineHeight: 1.7 }, children: [_jsxs("div", { children: [t('settings.upload.planSummary', { count: plan.fileCount, bytes: fmtBytes(plan.bytes) }), ' ', _jsx("code", { children: "workspace.tar.gz" }), " \u2192 ", _jsx("code", { children: plan.repo }), " @ ", _jsx("code", { children: plan.branch }), ' ', t('settings.upload.planPath', { namespace: plan.namespace })] }), plan.skippedSymlinks.length > 0 && (_jsx("div", { children: t('settings.upload.skippedSymlinks', { count: plan.skippedSymlinks.length }) })), plan.skippedLarge.length > 0 && (_jsx("div", { children: t('settings.upload.skippedLarge', { count: plan.skippedLarge.length }) })), plan.secretHits.length > 0 && (_jsx("div", { style: { color: 'var(--danger, #e5534b)' }, children: t('settings.upload.secretBlocked', {
+                            count: plan.secretHits.length,
+                            samples: plan.secretHits.slice(0, 3).map((h) => h.rel).join(', '),
+                        }) })), !plan.tokenConfigured && (_jsxs("div", { style: { color: 'var(--danger, #e5534b)' }, children: [t('settings.upload.tokenMissingTitle'), _jsx("br", {}), t('settings.upload.tokenMissingStep1Before'), _jsx("a", { href: PERSONAL_TOKEN_URL, target: "_blank", rel: "noreferrer", style: { color: 'inherit', textDecoration: 'underline' }, children: t('settings.upload.tokenMissingStep1Link') }), t('settings.upload.tokenMissingStep1After'), _jsx("br", {}), t('settings.upload.tokenMissingStep2'), _jsx("br", {}), t('settings.upload.tokenMissingStep3')] })), plan.fileCount === 0 && _jsx("div", { children: t('settings.upload.empty') }), _jsxs("div", { style: { display: 'flex', gap: 6, marginTop: 6 }, children: [plan.nonce && (_jsx("button", { className: "settings-edit-btn", onClick: () => void doConfirm(), children: t('settings.upload.confirm') })), _jsx("button", { className: "settings-edit-btn", onClick: cancel, children: t('settings.upload.cancel') })] })] })), outcome && (_jsx("div", { className: "settings-help", style: { marginTop: 6 }, children: outcome.ok ? (_jsxs(_Fragment, { children: [outcome.skipped ? (_jsxs("span", { children: [_jsx("span", { className: "ok-pill", children: t('settings.upload.skippedSame') }), ' ', _jsx("a", { href: `${outcome.repoUrl}/tree/${outcome.branch}/${outcome.path}`, target: "_blank", rel: "noreferrer", children: t('settings.upload.viewExisting') })] })) : (_jsxs("span", { children: [_jsx("span", { className: "ok-pill", children: t('settings.upload.uploaded', {
+                                        count: outcome.sourceFileCount,
+                                        sourceBytes: fmtBytes(outcome.sourceBytes),
+                                        archiveBytes: fmtBytes(outcome.archiveBytes),
+                                    }) }), ' ', _jsx("a", { href: `${outcome.repoUrl}/tree/${outcome.branch}/${outcome.path}`, target: "_blank", rel: "noreferrer", children: t('settings.upload.viewSnapshot') }), ' ', _jsx("a", { href: `${outcome.repoUrl}/tree/${outcome.branch}/${outcome.namespace}/data`, target: "_blank", rel: "noreferrer", children: t('settings.upload.allVersions') }), ' ', _jsxs("code", { children: ["@", outcome.commit.slice(0, 7)] })] })), _jsx(SnapshotUrlRow, { url: `${outcome.repoUrl}/raw/${outcome.branch}/${outcome.path}/workspace.tar.gz` })] })) : (_jsx("span", { className: "err-pill", style: { whiteSpace: 'normal' }, children: t('settings.upload.failed', { error: outcome.error }) })) }))] }));
+}

package/dist/package/node/components/Sidebar/BusHealthLamp.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '../../i18n/index.js';
+import { useSharedHealth } from '../../lib/shell-live-data.js';
+import { useShellStore } from '../../store.js';
+function classify(bus) {
+    return {
+        kind: 'ok',
+        extensionCount: bus.extensionCount,
+        brokenCount: bus.brokenCount,
+        listenerCount: bus.listenerCount,
+        ringSize: bus.ringSize,
+    };
+}
+// P3.87 (2026-05-17): Upgrade BusHealthLamp from static <span> chip to
+// clickable <button> deep-link → openSettings('plugins') 钻 Bus admin tab. 0 store
+// change (reuse setMode), 0 Sidebar.tsx change (Sidebar.tsx player WIP — we
+// stay inside BusHealthLamp.tsx + Sidebar.css). When state.kind ≠ 'ok'
+// (loading / down), fall back to plain <span> so disabled visual = the same
+// as before; only the healthy chip becomes interactive.
+//
+// P4.48 (2026-05-17): Insert a sub-span `.bus-chip-sigma` rendering "Σ"
+// before the count text when state.kind === 'ok'. 5th surface of the
+// Σ-prefix muscle-memory language (after AgentsHub header P4.45 + WbGallery
+// stats P4.46 + AgentsPanel header P4.47 + BusAdminPanel summary P4.42).
+// The extension health chip is the player's most-visible at-all-times
+// indicator, so closing the gap here brings the language to the highest
+// dwell-time surface. Σ glyph only renders in the healthy ok-state to avoid
+// "Σ…" / "Σ down" clutter on loading / down chips. Inline next to the dot,
+// 0 layout shift on width (Σ adds ~6px; chip has flex room).
+export function BusHealthLamp() {
+    const { t } = useTranslation();
+    const health = useSharedHealth();
+    const openOverlay = useShellStore((s) => s.openOverlay);
+    const state = health.state === 'loading'
+        ? { kind: 'loading' }
+        : health.state === 'down'
+            ? { kind: 'down', reason: 'health request failed' }
+            : health.value.bus
+                ? classify(health.value.bus)
+                : { kind: 'down', reason: 'no bus field' };
+    const tone = state.kind === 'ok'
+        ? state.brokenCount > 0
+            ? 'warn'
+            : state.extensionCount > 0
+                ? 'ok'
+                : 'idle'
+        : state.kind === 'loading'
+            ? 'idle'
+            : 'down';
+    const baseTitle = state.kind === 'ok'
+        ? `Bus: ${state.extensionCount} plugin · ${state.brokenCount} broken · ${state.listenerCount} listener · ring ${state.ringSize}`
+        : state.kind === 'loading'
+            ? 'Bus: loading…'
+            : `Bus down: ${state.reason}`;
+    const label = state.kind === 'ok'
+        ? state.brokenCount > 0
+            ? `${state.extensionCount - state.brokenCount}/${state.extensionCount}`
+            : String(state.extensionCount)
+        : state.kind === 'loading'
+            ? '…'
+            : 'down';
+    const isLink = state.kind === 'ok';
+    const title = isLink ? t('busHealthLamp.linkTitle', { base: baseTitle }) : baseTitle;
+    // P4.48 — Σ glyph rendered only in 'ok' state. In loading/down branches
+    // the count slot reads '…' / 'down' and a Σ would read as "Σ down" which
+    // is semantically wrong (Σ implies a count). So gate strictly on isLink.
+    const showSigma = isLink;
+    if (!isLink) {
+        return (_jsxs("span", { className: `bus-chip bus-chip-${tone}`, title: title, "aria-label": title, children: [_jsx("span", { className: "bus-chip-dot" }), _jsx("span", { className: "bus-chip-text", children: label })] }));
+    }
+    return (_jsxs("button", { type: "button", className: `bus-chip bus-chip-${tone} is-link`, title: title, "aria-label": title, onClick: () => openOverlay('settings', 'plugins'), children: [_jsx("span", { className: "bus-chip-dot" }), showSigma && _jsx("span", { className: "bus-chip-sigma", "aria-hidden": "true", children: "\u03A3" }), _jsx("span", { className: "bus-chip-text", children: label }), state.kind === 'ok' && state.ringSize > 0 && (_jsxs("span", { className: "bus-chip-ring", "aria-hidden": "true", title: `event ring · ${state.ringSize} recent emits buffered`, children: ["R", state.ringSize] })), state.kind === 'ok' && (_jsxs("span", { className: "bus-chip-listeners", "aria-hidden": "true", title: `listeners · ${state.listenerCount} live subscriber${state.listenerCount === 1 ? '' : 's'} on bus`, children: ["L", state.listenerCount] })), _jsx("span", { className: "bus-chip-arrow", "aria-hidden": "true", children: "\u2192" })] }));
+}

package/dist/package/node/components/Sidebar/FilesPanel.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createIntervalTaskLifecycle, createRestartableTimeoutTaskLifecycle, } from '@forgeax/app-shell/react';
+import { ChevronRight, ChevronDown, Folder, FolderOpen, FileCode2, FileJson, FileText, FileImage, FileAudio, FileArchive, FileCog, Box, Table2, File as FileIcon, } from 'lucide-react';
+import { useShellStore } from '../../store.js';
+import { publish } from '../../lib/bus.js';
+import { useBusSnapshot } from '../../lib/use-bus-snapshot.js';
+import { useTranslation } from '../../i18n/index.js';
+import { FAMILY_ORDER, familyOf } from '../../lib/file-family.js';
+function fileIconFor(name) {
+    switch (familyOf(name)) {
+        case 'code': return FileCode2;
+        case 'config': return FileJson;
+        case 'doc': return FileText;
+        case 'scene': return FileCode2;
+        case 'pack': return FileArchive;
+        case 'meta': return FileCog;
+        case 'image': return FileImage;
+        case 'audio': return FileAudio;
+        case 'model': return Box;
+        case 'data': return Table2;
+        default: return FileIcon;
+    }
+}
+function aggregateFamilies(tree) {
+    const tally = {
+        code: { count: 0, firstPath: null },
+        config: { count: 0, firstPath: null },
+        doc: { count: 0, firstPath: null },
+        scene: { count: 0, firstPath: null },
+        pack: { count: 0, firstPath: null },
+        meta: { count: 0, firstPath: null },
+        image: { count: 0, firstPath: null },
+        audio: { count: 0, firstPath: null },
+        model: { count: 0, firstPath: null },
+        data: { count: 0, firstPath: null },
+    };
+    const walk = (n) => {
+        if (n.type === 'file') {
+            const fam = familyOf(n.name);
+            tally[fam].count += 1;
+            if (tally[fam].firstPath === null)
+                tally[fam].firstPath = n.path;
+            return;
+        }
+        for (const c of n.children ?? [])
+            walk(c);
+    };
+    if (tree)
+        walk(tree);
+    return FAMILY_ORDER.map((m) => ({
+        key: m.key,
+        label: m.label,
+        count: tally[m.key].count,
+        firstPath: tally[m.key].firstPath,
+    }));
+}
+// P4.54 — recursive file count under a directory node. Used by TreeRow.dir
+// to render a 9px dim count badge after the folder name (`src 23`) so the
+// player can size each folder without expanding it. Pure derive over the
+// already-fetched tree, 0 new endpoint / 0 store / 0 poll. Cached per node
+// via WeakMap keyed on the children array reference — tree is replaced
+// wholesale on each 5s poll, so identity equality is enough.
+const dirFileCountCache = new WeakMap();
+function countFilesIn(node) {
+    if (node.type === 'file')
+        return 1;
+    const cached = dirFileCountCache.get(node);
+    if (cached !== undefined)
+        return cached;
+    let n = 0;
+    for (const c of node.children ?? [])
+        n += countFilesIn(c);
+    dirFileCountCache.set(node, n);
+    return n;
+}
+// Collect every ancestor dir path so we can auto-expand on jump.
+function ancestorsOf(path, rootPath) {
+    const out = [];
+    if (!path.startsWith(rootPath))
+        return out;
+    const tail = path.slice(rootPath.length).replace(/^\//, '');
+    if (!tail)
+        return out;
+    const parts = tail.split('/').slice(0, -1);
+    let acc = rootPath;
+    out.push(acc);
+    for (const p of parts) {
+        acc = `${acc}/${p}`;
+        out.push(acc);
+    }
+    return out;
+}
+export function FilesPanel() {
+    const openFile = (path) => { publish('resource-editor:open-file', { path }); };
+    const activeFilePath = useBusSnapshot('resource-editor:files')?.activeFilePath ?? null;
+    const activeSlug = useShellStore((s) => s.activeGameSlug);
+    const [tree, setTree] = useState(null);
+    const [expanded, setExpanded] = useState(new Set());
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Re-run when the authoritative active game projection changes. An earlier
+    // version closed over the initial slug, so switching
+    // project left the tree stuck on the old slug until full reload.
+    //
+    // expanded init is keyed by `isFirstLoad`: only the first successful
+    // tree fetch for a given slug seeds the default expansion. Subsequent
+    // 5s polls keep the user's manual expansion intact — earlier this same
+    // block called setExpanded() unconditionally, which silently re-collapsed
+    // every folder the user clicked into within 1-2s of opening it.
+    useEffect(() => {
+        let cancelled = false;
+        let isFirstLoad = true;
+        setLoading(true);
+        setError(null);
+        setTree(null);
+        const load = async () => {
+            try {
+                const slug = activeSlug ?? undefined;
+                if (!slug) {
+                    setError('no active game');
+                    setLoading(false);
+                    return;
+                }
+                const tr = await fetch(`/api/files/tree?root=.forgeax/games/${encodeURIComponent(slug)}`).then((r) => r.json());
+                if (cancelled)
+                    return;
+                if (tr.error || !tr.tree) {
+                    setError(tr.error ?? 'no tree');
+                }
+                else {
+                    setTree(tr.tree);
+                    if (isFirstLoad) {
+                        setExpanded(new Set([tr.tree.path, `${tr.tree.path}/src`, `${tr.tree.path}/design`]));
+                        isFirstLoad = false;
+                    }
+                }
+                setLoading(false);
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError(e.message);
+                    setLoading(false);
+                }
+            }
+        };
+        load();
+        const poll = createIntervalTaskLifecycle({
+            task: () => { void load(); },
+            intervalMs: 5_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            poll.dispose();
+        };
+    }, [activeSlug]);
+    return _jsx(FilesPanelView, { loading: loading, error: error, tree: tree, activeSlug: activeSlug, expanded: expanded, setExpanded: setExpanded, previewPath: activeFilePath, openFile: openFile });
+}
+function FilesPanelView({ loading, error, tree, activeSlug, expanded, setExpanded, previewPath, openFile }) {
+    const { t } = useTranslation();
+    const [flashPath, setFlashPath] = useState(null);
+    const [pendingScrollPath, setPendingScrollPath] = useState(null);
+    const flashTaskRef = useRef(null);
+    const flashTargetRef = useRef(null);
+    const families = useMemo(() => aggregateFamilies(tree), [tree]);
+    const total = useMemo(() => families.reduce((s, f) => s + f.count, 0), [families]);
+    useEffect(() => {
+        const task = createRestartableTimeoutTaskLifecycle({
+            delayMs: 1500,
+            task: () => {
+                const path = flashTargetRef.current;
+                setFlashPath((cur) => (cur === path ? null : cur));
+            },
+        });
+        flashTaskRef.current = task;
+        return () => {
+            task.dispose();
+            flashTaskRef.current = null;
+        };
+    }, []);
+    // Two-phase: click sets pendingScrollPath + expands ancestors → React
+    // re-renders the new rows → this effect (re-run when expanded changes)
+    // finds the row and runs scroll/focus/flash. Avoids the rAF-before-
+    // commit race the naive inline approach hits.
+    useEffect(() => {
+        if (!pendingScrollPath)
+            return;
+        const el = document.querySelector(`[data-fp-path="${CSS.escape(pendingScrollPath)}"]`);
+        if (!el)
+            return; // not yet expanded — will re-fire on next expanded update
+        el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        el.focus({ preventScroll: true });
+        setFlashPath(pendingScrollPath);
+        flashTargetRef.current = pendingScrollPath;
+        setPendingScrollPath(null);
+        flashTaskRef.current?.schedule();
+    }, [pendingScrollPath, expanded]);
+    const onTypeClick = (fam) => {
+        if (!fam.firstPath || !tree)
+            return;
+        const next = new Set(expanded);
+        for (const a of ancestorsOf(fam.firstPath, tree.path))
+            next.add(a);
+        setExpanded(next);
+        setPendingScrollPath(fam.firstPath);
+    };
+    if (loading) {
+        return (_jsxs("div", { className: "files-panel", children: [_jsx("div", { className: "fp-header", children: _jsxs("span", { className: "fp-slug", children: [".forgeax/games / ", activeSlug ?? '…'] }) }), _jsx("div", { className: "fp-empty", children: t('common.loading') })] }));
+    }
+    if (error || !tree) {
+        return (_jsxs("div", { className: "files-panel", children: [_jsx("div", { className: "fp-header", children: _jsxs("span", { className: "fp-slug", children: [".forgeax/games / ", activeSlug ?? '—'] }) }), _jsx("div", { className: "fp-empty", children: error ?? 'empty' })] }));
+    }
+    return (_jsxs("div", { className: "files-panel rail-panel", children: [_jsx("div", { className: "fp-header", children: _jsxs("span", { className: "fp-slug", children: [".forgeax/games / ", activeSlug] }) }), _jsxs("div", { className: "fp-types", role: "toolbar", "aria-label": "file type distribution", children: [_jsx("span", { className: "fp-types-label", "aria-hidden": "true", children: "FILES" }), families.filter((f) => f.count > 0).map((f) => (_jsxs("button", { type: "button", className: `fp-type-chip fam-${f.key}`, onClick: () => onTypeClick(f), disabled: !f.firstPath, title: `${f.label} · ${t('filesPanel.fileCount', { count: f.count })}${f.firstPath ? ` · ${t('filesPanel.jumpToFile', { name: f.firstPath.split('/').pop() ?? '' })}` : ''}`, "aria-label": `${f.label} ${f.count} files — jump to first`, children: [_jsx("span", { className: `fp-type-dot fam-${f.key}`, "aria-hidden": "true" }), _jsx("span", { className: "fp-type-label", children: f.label }), _jsx("span", { className: "fp-type-count", children: f.count })] }, f.key))), total > 0 && (_jsxs("span", { className: "fp-types-total", title: `Σ ${t('filesPanel.fileCount', { count: total })} · ${t('filesPanel.splitByFamily')}`, "aria-label": `${total} files total across all families`, children: [_jsx("span", { className: "fp-types-vsep", "aria-hidden": "true" }), _jsx("span", { className: "fp-types-sigma", "aria-hidden": "true", children: "\u03A3" }), _jsx("span", { className: "fp-types-total-n", children: total })] }))] }), _jsx("div", { className: "file-tree reveal-stagger", children: _jsx(TreeRow, { node: tree, depth: 0, expanded: expanded, setExpanded: setExpanded, activeFile: previewPath, flashPath: flashPath, onOpen: (p) => void openFile(p) }) })] }));
+}
+function TreeRow({ node, depth, expanded, setExpanded, activeFile, flashPath, onOpen }) {
+    const { t } = useTranslation();
+    if (node.type === 'dir') {
+        const isOpen = expanded.has(node.path);
+        const FolderGlyph = isOpen ? FolderOpen : Folder;
+        const toggle = () => {
+            const next = new Set(expanded);
+            isOpen ? next.delete(node.path) : next.add(node.path);
+            setExpanded(next);
+        };
+        const fileCount = countFilesIn(node);
+        return (_jsxs(_Fragment, { children: [_jsxs("button", { className: "fp-row dir", style: { paddingLeft: 6 + depth * 12 }, onClick: toggle, title: `${node.name} · ${t('filesPanel.fileCount', { count: fileCount })} · ${isOpen ? t('filesPanel.clickToCollapse') : t('filesPanel.clickToExpand')}`, children: [_jsx("span", { className: "fp-chev", children: isOpen ? _jsx(ChevronDown, { size: 11 }) : _jsx(ChevronRight, { size: 11 }) }), _jsx(FolderGlyph, { size: 13, className: "fp-folder-ico" }), _jsx("span", { className: "fp-name", children: node.name }), fileCount > 0 && (_jsx("span", { className: "fp-dir-count", "aria-label": `${fileCount} files in folder`, children: fileCount }))] }), isOpen && (node.children ?? []).map((c) => (_jsx(TreeRow, { node: c, depth: depth + 1, expanded: expanded, setExpanded: setExpanded, activeFile: activeFile, flashPath: flashPath, onOpen: onOpen }, c.path)))] }));
+    }
+    const Icon = fileIconFor(node.name);
+    const isActive = activeFile === node.path;
+    const isFlash = flashPath === node.path;
+    const fam = familyOf(node.name);
+    return (_jsxs("button", { className: `fp-row file fam-${fam} ${isActive ? 'active' : ''} ${isFlash ? 'is-flash' : ''}`, style: { paddingLeft: 6 + depth * 12 + 14 }, onClick: () => onOpen(node.path), title: node.path, "data-fp-path": node.path, children: [_jsx(Icon, { size: 13, className: "fp-file-ico" }), _jsx("span", { className: "fp-name", children: node.name })] }));
+}

package/dist/package/node/components/Sidebar/Sidebar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePanelRenderers } from '../DockShell/panelRenderers.js';
+/** Generic shell tools panel. Page launchers live exclusively in ActivityRail;
+ * this panel only hosts the application-supplied agents/tools body. */
+export function Sidebar() {
+    const SidebarAgents = usePanelRenderers().slots?.SidebarAgents;
+    return (_jsx("aside", { className: "studio-sidebar", "data-fx-slot": "Sidebar", children: SidebarAgents ? _jsx(SidebarAgents, {}) : null }));
+}

package/dist/package/node/components/Sidebar/sidebar-types.js

@@ -0,0 +1 @@
+export {};

package/dist/package/node/components/SlotDebugOverlay/SlotDebugOverlay.js

@@ -0,0 +1 @@
+export { SlotDebugOverlay } from '@forgeax/app-shell/react';

package/dist/package/node/components/SlotDebugOverlay/hashHue.js

@@ -0,0 +1 @@
+export { hashSlotHue as hashHue } from '@forgeax/app-shell/react';

package/dist/package/node/components/SlotDebugOverlay/index.js

@@ -0,0 +1 @@
+export { SlotDebugOverlay, hashSlotHue as hashHue, isSlotDebugEnabled, } from '@forgeax/app-shell/react';

package/dist/package/node/components/SlotDebugOverlay/isSlotDebugEnabled.js

@@ -0,0 +1 @@
+export { isSlotDebugEnabled } from '@forgeax/app-shell/react';

package/dist/package/node/components/StatusBar/FatalBanner.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FatalBanner — the "reason + Reload" banner pinned to the top of a Play / Edit
+ * region when the engine reports a region-fatal failure (device-lost, scene
+ * instantiate failed, WebGPU init failed, missing module, …).
+ *
+ * Why this is its OWN component (not part of the bottom status bar):
+ * the latest-state indicator + full log moved to the GlobalStatusBar chip + the
+ * Info dock panel, so the wide HealthStatusBar strip was retired. The fatal
+ * banner is a DIFFERENT concern — it must sit OVER the black viewport so the
+ * user knows why Play / Edit is empty and can recover in one click — so it is
+ * extracted here and mounted by the Play / Edit surface wrappers
+ * (SurfacePanels), independent of the bottom strip.
+ *
+ * Data: the per-region `fatal` channel of healthStore (promoted there by
+ * push() when an error matches FATAL_CODES / FATAL_TEXT_PATTERNS). Pure
+ * presentation; the `.preview-fatal-banner` styling lives in MainArea.css and
+ * is shared by both regions.
+ */
+import { AlertOctagon, RotateCcw, X } from 'lucide-react';
+import { useHealthStore } from './healthStore.js';
+/** Reason → human title. Falls back to a generic line. */
+function titleFor(code, source) {
+    switch (code) {
+        case 'device-lost':
+        case 'context-lost':
+            return 'GPU device lost';
+        case 'scene-instantiate-failed':
+            return 'Scene failed to load';
+        case 'webgpu-init-failed':
+            return 'WebGPU init failed';
+        case 'module-missing':
+            return 'Module missing';
+        case 'load-timeout':
+            return 'Load timed out';
+        case 'createApp-failed':
+            return 'Engine failed to start';
+        default:
+            return `${source === 'edit' ? 'Edit' : 'Play'} failed`;
+    }
+}
+/**
+ * Banner for one region. Renders nothing when that region has no live fatal.
+ * `source` is 'play' or 'edit' — the only two regions that surface a banner.
+ */
+export function FatalBanner({ source }) {
+    const fatal = useHealthStore((s) => s.fatal[source]);
+    const clearFatal = useHealthStore((s) => s.clearFatal);
+    if (!fatal)
+        return null;
+    return (_jsxs("div", { className: "preview-fatal-banner", role: "alert", "aria-live": "assertive", children: [_jsx(AlertOctagon, { className: "pfb-icon", size: 16 }), _jsxs("div", { className: "pfb-body", children: [_jsx("div", { className: "pfb-title", children: titleFor(fatal.code, source) }), _jsx("div", { className: "pfb-msg", title: fatal.message, children: fatal.message })] }), _jsxs("button", { type: "button", className: "pfb-retry", title: "Reload the page to recover this region", onClick: () => window.location.reload(), children: [_jsx(RotateCcw, { size: 13 }), " Reload"] }), _jsx("button", { type: "button", className: "pfb-retry pfb-dismiss", title: "Dismiss this banner", "aria-label": "Dismiss", onClick: () => clearFatal(source), children: _jsx(X, { size: 13 }) })] }));
+}