@forgeax/interface 0.4.1

package/dist/package/node/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { AppWindow, Box, BoxSelect, Braces, Check, ChevronRight, ChevronsDownUp, ChevronsUpDown, Clapperboard, Copy, Crosshair, Database, ExternalLink, Eye, File, FileCode2, FileCog, FilePlus, FileText, Flag, Folder, FolderPlus, FolderSearch, Hash, Image, Layers, Music, Pencil, Play, RefreshCw, ShieldCheck, Sparkles, SquareArrowOutUpRight, Star, TextCursorInput, Trash2, Type, Upload, } from 'lucide-react';
+import { buildMenu } from './menuRegistry.js';
+import { buildAssetPill, buildComponentPill, buildEntityPill } from '../../lib/composer-bridge.js';
+import { pushHealth } from '../StatusBar/healthStore.js';
+import { useShellStore } from '../../store.js';
+import { usePanelRenderers } from '../DockShell/panelRenderers.js';
+import { useHost } from '../../core/app-shell/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+const MENU_ICONS = {
+    'app-window': AppWindow,
+    box: Box,
+    'box-select': BoxSelect,
+    braces: Braces,
+    check: Check,
+    'chevrons-down-up': ChevronsDownUp,
+    'chevrons-up-down': ChevronsUpDown,
+    clapperboard: Clapperboard,
+    copy: Copy,
+    crosshair: Crosshair,
+    database: Database,
+    'external-link': ExternalLink,
+    eye: Eye,
+    file: File,
+    'file-code': FileCode2,
+    'file-cog': FileCog,
+    'file-plus': FilePlus,
+    'file-text': FileText,
+    flag: Flag,
+    folder: Folder,
+    'folder-plus': FolderPlus,
+    'folder-search': FolderSearch,
+    hash: Hash,
+    image: Image,
+    layers: Layers,
+    link: ExternalLink,
+    music: Music,
+    pencil: Pencil,
+    play: Play,
+    'refresh-cw': RefreshCw,
+    'shield-check': ShieldCheck,
+    spark: Sparkles,
+    sparkles: Sparkles,
+    'square-arrow-out-up-right': SquareArrowOutUpRight,
+    star: Star,
+    'text-cursor-input': TextCursorInput,
+    trash: Trash2,
+    'trash-2': Trash2,
+    type: Type,
+    upload: Upload,
+};
+function MenuIcon({ name }) {
+    if (!name)
+        return _jsx("span", { className: "fx-ctx-menu-icon" });
+    const Icon = MENU_ICONS[name] ?? File;
+    return _jsx(Icon, { className: "fx-ctx-menu-icon", "aria-hidden": "true" });
+}
+function menuTestId(label) {
+    return `ctx-menu-${label.replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '').toLowerCase()}`;
+}
+function menuItemClassName(it) {
+    return [
+        'fx-ctx-menu-item',
+        it.danger ? 'text-destructive focus:text-destructive fx-ctx-menu-danger' : '',
+        it.forge ? 'fx-ctx-menu-forge' : '',
+    ].filter(Boolean).join(' ');
+}
+function menuSubTriggerClassName(it) {
+    return [
+        'fx-ctx-menu-item',
+        it.danger ? 'text-destructive focus:text-destructive fx-ctx-menu-danger' : '',
+    ].filter(Boolean).join(' ');
+}
+function editorMenuItemToMenuItem(item) {
+    if (item.title)
+        return { kind: 'title', label: item.title, icon: item.icon };
+    if (item.sep)
+        return { kind: 'sep' };
+    return {
+        kind: 'item',
+        label: item.label ?? '',
+        icon: item.icon,
+        shortcut: item.shortcut,
+        forge: item.forge,
+        disabled: item.disabled,
+        danger: item.danger,
+        children: item.children?.map(editorMenuItemToMenuItem),
+        onClick: item.onClick ?? (() => { }),
+    };
+}
+function ContextMenuItems({ items }) {
+    return (_jsx(_Fragment, { children: items.map((it, i) => {
+            if (it.kind === 'sep')
+                return _jsx(DropdownMenuSeparator, {}, `s${i}`);
+            if (it.kind === 'title') {
+                return (_jsxs("div", { className: "fx-ctx-menu-title", children: [_jsx(MenuIcon, { name: it.icon }), _jsx("span", { children: it.label })] }, `t${i}`));
+            }
+            const children = it.children?.filter((child) => child.kind === 'sep' || child.kind === 'title' || (child.kind === 'item' && child.label));
+            if (children && children.length > 0) {
+                return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { disabled: it.disabled, className: menuSubTriggerClassName(it), "data-testid": menuTestId(it.label), children: [_jsx(MenuIcon, { name: it.icon }), _jsx("span", { className: "fx-ctx-menu-label", children: it.label }), _jsx(ChevronRight, { className: "fx-ctx-menu-sub-arrow", "aria-hidden": "true" })] }), _jsx(DropdownMenuSubContent, { className: "min-w-[180px] forgeax-ctx-menu-panel fx-ctx-menu-sub-panel", sideOffset: 6, alignOffset: -5, onContextMenu: (e) => e.preventDefault(), children: _jsx(ContextMenuItems, { items: children }) })] }, `sub${i}`));
+            }
+            return (_jsxs(DropdownMenuItem, { disabled: it.disabled, className: menuItemClassName(it), "data-testid": menuTestId(it.label), onSelect: () => {
+                    if (!it.disabled)
+                        it.onClick();
+                }, children: [_jsx(MenuIcon, { name: it.icon }), _jsx("span", { className: "fx-ctx-menu-label", children: it.label }), it.shortcut && _jsx("span", { className: "fx-ctx-menu-kbd", children: it.shortcut })] }, `i${i}`));
+        }) }));
+}
+/**
+ * App-wide context menu host. ONE controlled Radix DropdownMenu renders EVERY
+ * context menu, fed by two in-process sources:
+ *   1. a capture-phase `contextmenu` listener over main-window DOM (via the
+ *      `buildMenu` registry), and
+ *   2. the editor's injected single-realm renderer callback, which carries the
+ *      real item closures (no cross-window protocol copy).
+ * Radix owns focus / ↑↓ nav / Esc / outside-click / collision flipping.
+ */
+export function ContextMenu() {
+    const [state, setState] = useState(null);
+    const renderers = usePanelRenderers();
+    const host = useHost();
+    useEffect(() => {
+        const onCtx = (e) => {
+            e.preventDefault();
+            const selection = window.getSelection()?.toString() ?? '';
+            const items = buildMenu(e.target, selection);
+            if (items.length === 0) {
+                setState(null);
+                return;
+            }
+            setState({ x: e.clientX, y: e.clientY, items });
+        };
+        document.addEventListener('contextmenu', onCtx, { capture: true });
+        return () => document.removeEventListener('contextmenu', onCtx, { capture: true });
+    }, []);
+    // Editor menus are injected structurally by the single-realm host. Their
+    // onClick closures stay in-process, so the UI capability has one body instead
+    // of a serialised cross-window protocol mirror.
+    useEffect(() => renderers.editor?.setContextMenuRenderer?.((menu) => {
+        if (!menu) {
+            setState(null);
+            return;
+        }
+        const items = menu.items.map(editorMenuItemToMenuItem);
+        setState(items.length ? { x: menu.x, y: menu.y, items } : null);
+    }), [renderers.editor]);
+    // Project typed editor coordination into the host commands directly. This is
+    // the single-realm replacement for the iframe-message adapter's postMessage
+    // mirror; editor-core remains injected through PanelRenderers, not imported.
+    useEffect(() => renderers.editor?.installBridge?.({
+        onEditorHealth: ({ level, code, message }) => {
+            pushHealth({ level, source: 'edit', code, message });
+        },
+        onEditorConsole: (entry) => {
+            useShellStore.getState().pushConsole(entry);
+        },
+        onEditorNetwork: (entry) => {
+            useShellStore.getState().pushNetwork(entry);
+        },
+        onEditorRef: (p) => {
+            if (p.kind === 'component' && typeof p.entityName === 'string' && typeof p.comp === 'string') {
+                const pill = buildComponentPill({
+                    entityId: p.entityId,
+                    entityName: p.entityName,
+                    comp: p.comp,
+                    value: p.value,
+                });
+                void host.commands.execute('app.chat.insertPill', { pill }).catch(() => { });
+            }
+            else if (p.kind === 'asset' && typeof p.guid === 'string') {
+                const pill = buildAssetPill({ guid: p.guid, name: p.name, assetKind: p.assetKind, packPath: p.packPath });
+                void host.commands.execute('app.chat.insertPill', { pill }).catch(() => { });
+            }
+            else if (p.kind === 'entity' && typeof p.id === 'number' && typeof p.name === 'string') {
+                const pill = buildEntityPill({ id: p.id, name: p.name, components: p.components, source: p.source });
+                void host.commands.execute('app.chat.insertPill', { pill }).catch(() => { });
+            }
+        },
+        onAddAssetToChat: (refs) => {
+            for (const ref of refs) {
+                if (ref.type === 'asset' && typeof ref.guid === 'string') {
+                    const pill = buildAssetPill({
+                        guid: ref.guid,
+                        name: ref.name,
+                        assetKind: ref.kind,
+                        packPath: ref.path,
+                        payload: ref.payload,
+                    });
+                    void host.commands.execute('app.chat.insertPill', { pill }).catch(() => { });
+                }
+                else if (ref.type === 'folder' && typeof ref.path === 'string') {
+                    const pill = buildAssetPill({
+                        guid: `folder:${ref.path}`,
+                        name: ref.name || 'Folder',
+                        assetKind: 'folder',
+                        packPath: ref.path,
+                        payload: ref.summary,
+                    });
+                    void host.commands.execute('app.chat.insertPill', { pill }).catch(() => { });
+                }
+            }
+        },
+    }), [host, renderers.editor]);
+    return (_jsxs(DropdownMenu, { open: state !== null, 
+        // This is an app-wide context menu, not a modal dialog. Keep the
+        // underlying panel hit-testable so an edge drawer can distinguish
+        // "returning to the panel" from clicking another surface.
+        modal: false, onOpenChange: (o) => {
+            if (!o)
+                setState(null);
+        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("span", { "aria-hidden": true, style: {
+                        position: 'fixed',
+                        left: state?.x ?? 0,
+                        top: state?.y ?? 0,
+                        width: 0,
+                        height: 0,
+                    } }) }), state && (_jsx(DropdownMenuContent, { align: "start", side: "bottom", sideOffset: 2, className: "min-w-[180px] forgeax-ctx-menu-panel", onContextMenu: (e) => e.preventDefault(), children: _jsx(ContextMenuItems, { items: state.items }) }))] }));
+}

package/dist/package/node/components/ContextMenu/menuRegistry.js

@@ -0,0 +1,152 @@
+import { buildReferenceFor, REFERENCE_LABEL, requestComposerInsert } from '../../lib/composer-bridge.js';
+import { aiIntentsFor, intentPill, actionIntentPill } from '../../lib/ai-intents.js';
+import { t } from '../../i18n/index.js';
+import { executeTextEditAction, selectedText, textEditTargetFrom, } from '../../lib/text-edit-actions.js';
+const copy = (text) => {
+    if (!text)
+        return;
+    navigator.clipboard?.writeText(text).catch((err) => {
+        console.warn('[ContextMenu] clipboard write failed', err);
+    });
+};
+const textOf = (el) => (el?.textContent ?? '').trim();
+function buildInputMenu(input, selection) {
+    const hasSel = selection.length > 0;
+    const execute = (action) => {
+        void executeTextEditAction(action, input).catch((error) => {
+            console.warn(`[ContextMenu] ${action} failed`, error);
+        });
+    };
+    return [
+        {
+            kind: 'item',
+            label: t('contextMenu.cut'),
+            disabled: !hasSel,
+            onClick: () => {
+                if (!hasSel)
+                    return;
+                execute('cut');
+            },
+        },
+        { kind: 'item', label: t('contextMenu.copy'), disabled: !hasSel, onClick: () => execute('copy') },
+        {
+            kind: 'item',
+            label: t('contextMenu.paste'),
+            onClick: () => execute('paste'),
+        },
+        { kind: 'sep' },
+        {
+            kind: 'item',
+            label: t('contextMenu.selectAll'),
+            onClick: () => execute('selectAll'),
+        },
+    ];
+}
+/** "引用到 Chat" menu item for a concrete pill, or null. */
+function referenceItemFor(pill) {
+    if (!pill)
+        return null;
+    return { kind: 'item', label: REFERENCE_LABEL, onClick: () => requestComposerInsert(pill) };
+}
+/** Selected-text fallback pill (when the target isn't a registered unit). */
+function selectionPill(selection) {
+    const s = selection.trim();
+    if (!s)
+        return null;
+    return {
+        kind: 'log',
+        display: s.length > 30 ? s.slice(0, 30) + '…' : s,
+        icon: '📝',
+        detail: `[${t('contextMenu.textReference')}: "${s}"]`,
+        tooltip: { title: `📝 ${t('contextMenu.selectedTextReference')}`, lines: [s.slice(0, 100)] },
+    };
+}
+/** 右键唤 AI(P1-10):意图项列表 —— kind 专属 + 通用兜底 + data-fx-action derive。
+ *  点击 = 把「detail 带指令的 pill」插 composer,用户可补充后发送(不 autoSend,
+ *  §8 人为最终权威:发送权留给用户)。 */
+function aiIntentItems(target, refKind, pill) {
+    const items = [];
+    if (pill) {
+        for (const intent of aiIntentsFor(refKind)) {
+            items.push({
+                kind: 'item',
+                label: `AI:${intent.label}`,
+                onClick: () => requestComposerInsert(intentPill(pill, intent)),
+            });
+        }
+    }
+    // ActionRegistry derive:右键落在已登记功能上 → 「让 AI 执行此功能」(注册即得)。
+    const act = actionIntentPill(target);
+    if (act) {
+        items.push({
+            kind: 'item',
+            label: `AI:让 AI 执行「${act.title}」`,
+            onClick: () => requestComposerInsert(act.pill),
+        });
+    }
+    return items;
+}
+export function buildMenu(target, selection) {
+    if (!(target instanceof Element))
+        return [];
+    // 1) Native inputs — cut/copy/paste/select-all.
+    const inputEl = textEditTargetFrom(target);
+    if (inputEl) {
+        const selText = selectedText(inputEl);
+        return buildInputMenu(inputEl, selText);
+    }
+    // 2) Code blocks — copy only.
+    const codeWrap = target.closest('.md-code-wrap, pre.md-code');
+    if (codeWrap) {
+        const code = textOf(codeWrap.querySelector('code') ?? codeWrap);
+        return [{ kind: 'item', label: t('contextMenu.copyCode'), disabled: !code, onClick: () => copy(code) }];
+    }
+    const inlineCode = target.closest('.md-inline-code');
+    if (inlineCode) {
+        const code = textOf(inlineCode);
+        return [{ kind: 'item', label: t('contextMenu.copy'), disabled: !code, onClick: () => copy(selection || code) }];
+    }
+    // 3) Game-slug breadcrumb — copy path (not a referenceable unit).
+    const slug = target.closest('.fp-slug');
+    if (slug) {
+        const path = textOf(slug);
+        return [{ kind: 'item', label: t('contextMenu.copyPath'), disabled: !path, onClick: () => copy(path) }];
+    }
+    // 4) Registered referenceable units (the SSOT). One lookup covers files,
+    //    dirs, agents, plugins, workspace/game/session rows, chat messages, etc.
+    const ref = buildReferenceFor(target);
+    // Units with their own dedicated menu (e.g. workspace tabs) opt out of the
+    // global menu so the two don't stack and intercept each other's clicks.
+    if (ref?.descriptor.ownMenu)
+        return [];
+    const pill = ref?.pill ?? selectionPill(selection);
+    const refItem = referenceItemFor(pill);
+    const aiItems = aiIntentItems(target, ref?.descriptor.kind, pill);
+    const copyItems = (ref?.descriptor.copy?.(ref.el) ?? []).map((c) => ({
+        kind: 'item', label: c.label, onClick: () => copy(c.text),
+    }));
+    if (ref || copyItems.length > 0) {
+        return withAiIntents(withReference(refItem, copyItems), aiItems);
+    }
+    // 5) Plain selected text — reference + copy.
+    if (selection.trim().length > 0) {
+        return withAiIntents(withReference(refItem, [{ kind: 'item', label: t('contextMenu.copy'), onClick: () => copy(selection) }]), aiItems);
+    }
+    // 6) Catch-all: reference + AI intents if we have any.
+    return withAiIntents(refItem ? [refItem] : [], aiItems);
+}
+function withReference(ref, items) {
+    if (!ref)
+        return items;
+    if (items.length === 0)
+        return [ref];
+    return [ref, { kind: 'sep' }, ...items];
+}
+/** 把 AI 意图项作为独立分组挂到菜单尾部(有内容才加分隔)。 */
+function withAiIntents(items, aiItems) {
+    if (aiItems.length === 0)
+        return items;
+    if (items.length === 0)
+        return aiItems;
+    return [...items, { kind: 'sep' }, ...aiItems];
+}

package/dist/package/node/components/DetachedSurface.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { DetachedSurfaceFrame, DetachedSurfaceStatus, SurfacePlaceholder, SurfaceRegion, } from '@forgeax/app-shell/react';
+import { useTranslation } from '../i18n/index.js';
+import { useExtensionManifest } from '../lib/use-extension-manifest.js';
+import { StandaloneExtensionIframe } from './MainArea/StandaloneExtensionIframe.js';
+import { ConsolePanel } from './MainArea/ConsolePanel.js';
+import { TelemetryViewer } from './MainArea/TelemetryViewer.js';
+import { Sidebar } from './Sidebar/Sidebar.js';
+import { MainArea } from './MainArea/MainArea.js';
+import { usePanelRenderers } from './DockShell/panelRenderers.js';
+import { FatalBanner } from './StatusBar/FatalBanner.js';
+import { PanelShell } from './PanelShell/PanelShell.js';
+export function DetachedSurface({ surface }) {
+    if (surface.kind === 'plugin') {
+        return _jsx(DetachedExtensionSurface, { surface: surface });
+    }
+    return _jsx(DetachedPanelSurface, { surface: surface });
+}
+/** Built-in panels (agents / files / chat) hosted in their own OS window. All
+ *  are fully store-driven (no props), and main.tsx has booted the store +
+ *  streams for this window, so they render & stay live like in the main shell.
+ *  Wrapped full-bleed since they normally live inside a sized layout slot. */
+function DetachedPanelSurface({ surface }) {
+    const { t } = useTranslation();
+    const renderers = usePanelRenderers();
+    const chatDescriptor = renderers.panels?.chat;
+    const viewportDescriptor = renderers.panels?.viewport;
+    const SceneEditor = renderers.surfaces?.SceneEditor;
+    const AgentsBrowser = renderers.detached?.AgentsBrowser;
+    const FilesBrowser = renderers.detached?.FilesBrowser;
+    let body;
+    switch (surface.id) {
+        case 'chat':
+            // chat is the standalone @forgeax/chat application injected via panels['chat'] (R4); a
+            // detached chat window has no keep-alive layer so render it directly.
+            body = (_jsx(_Fragment, { children: chatDescriptor ? (_jsx("div", { "data-fx-slot": "DockPanel:chat", style: { display: 'contents' }, children: chatDescriptor.render() })) : (_jsx(NoEditorBody, {})) }));
+            break;
+        case 'agents':
+            // Studio injects detached.AgentsBrowser from the chat application.
+            body = (_jsx(_Fragment, { children: AgentsBrowser ? (_jsx("div", { "data-fx-slot": "AgentsBrowser", style: { display: 'contents' }, children: _jsx(AgentsBrowser, {}) })) : (_jsx(NoEditorBody, {})) }));
+            break;
+        case 'files':
+            // Studio injects detached.FilesBrowser from the resource editor.
+            body = (_jsx(_Fragment, { children: FilesBrowser ? (_jsx("div", { "data-fx-slot": "FilesBrowser", style: { display: 'contents' }, children: _jsx(FilesBrowser, {}) })) : (_jsx(NoEditorBody, {})) }));
+            break;
+        // DockShell panels popped into their own OS window (design §0.2.2 / #10).
+        case 'console':
+            body = _jsx(ConsolePanel, {});
+            break;
+        case 'telemetry':
+            body = _jsx(TelemetryViewer, {});
+            break;
+        case 'tools':
+            body = _jsx(Sidebar, {});
+            break;
+        case 'main':
+            body = _jsx(MainArea, {});
+            break;
+        // Viewport panel — detach the WHOLE panel, including its shared PanelShell
+        // header. The SceneEditor remains a pure renderer surface; operation controls
+        // must never be injected into the game-view content as a detached-only fallback.
+        // Detached windows have no keep-alive layer, so replace the descriptor's docked
+        // anchor body with the real surface while preserving the same panel chrome.
+        // 2026-06-30: 'preview'/'edit' merged into single 'viewport' panel.
+        case 'viewport':
+        case 'edit': // legacy backward compat
+        case 'preview': // legacy backward compat
+            body = (_jsx(PanelShell, { id: "viewport", panel: {
+                    title: 'Viewport',
+                    header: { visible: true, showTitle: false },
+                    content: { padding: 'none', scroll: 'none', tone: 'tool' },
+                    dockChrome: { singleTab: 'hideTitle' },
+                    ...viewportDescriptor,
+                    render: () => (_jsx(SurfaceRegion, { overlay: _jsx(FatalBanner, { source: "edit" }), children: SceneEditor ? (_jsx("div", { "data-fx-slot": "SceneEditor", style: { display: 'contents' }, children: _jsx(SceneEditor, {}) })) : (_jsx(NoEditorBody, {})) })),
+                } }));
+            break;
+        default: {
+            const editorPanelId = surface.id.startsWith('ep:') ? surface.id.slice(3) : null;
+            const editorPanel = editorPanelId ? renderers.panels?.[editorPanelId] : undefined;
+            if (!editorPanelId || !editorPanel) {
+                return (_jsx(DetachedSurfaceFrame, { centered: true, children: _jsx(DetachedSurfaceStatus, { children: t('detachedSurface.unknownPanel', { id: surface.id }) }) }));
+            }
+            body = _jsx(PanelShell, { id: surface.id, panel: editorPanel });
+            break;
+        }
+    }
+    return (_jsx(DetachedSurfaceFrame, { panel: true, children: body }));
+}
+function DetachedExtensionSurface({ surface }) {
+    const { t } = useTranslation();
+    const manifest = useExtensionManifest(surface.id);
+    if (manifest === 'loading') {
+        return (_jsx(DetachedSurfaceFrame, { centered: true, children: _jsx(DetachedSurfaceStatus, { children: t('detachedSurface.loadingExtension', { id: surface.id }) }) }));
+    }
+    if (!manifest) {
+        return (_jsx(DetachedSurfaceFrame, { centered: true, children: _jsx(DetachedSurfaceStatus, { tone: "error", children: t('detachedSurface.extensionNotFound', { id: surface.id }) }) }));
+    }
+    return (_jsx(DetachedSurfaceFrame, { children: _jsx(StandaloneExtensionIframe, { plugin: manifest, pane: surface.pane, active: true }) }));
+}
+function NoEditorBody() {
+    return _jsx(SurfacePlaceholder, { title: "No editor configured" });
+}

package/dist/package/node/components/DockShell/DockPanelHost.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePanelRenderers } from './panelRenderers.js';
+import { PanelShell } from '../PanelShell/PanelShell.js';
+export function DockPanelHost({ id }) {
+    const { panels } = usePanelRenderers();
+    return _jsx(PanelShell, { id: id, panel: panels?.[id] });
+}