@forgeax/interface 0.4.1

package/dist/package/browser/components/DockShell/DockRegion.js

@@ -0,0 +1,315 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { RotateCcw } from 'lucide-react';
+import { DockviewReact, themeAbyss, } from 'dockview';
+import 'dockview/dist/styles/dockview.css';
+import { AnchoredResizeHandle, DockLayoutMenu } from '@forgeax/app-shell/react';
+import { createDockLayoutControlState, createDockLayoutPersistence, createDockPanelCommands, createDockReadyActivation, createDockScopeTransition, hasMountedPanelPlacement, installDockLayoutObservation, installDockLayoutReset, installDockPanelCommandSubscriptions, installDockPanelVisibilityTracking, pruneSerializedDockLayout, } from '@forgeax/app-shell/dock';
+import { useTranslation, t as panelT } from '../../i18n';
+import { BASE_PANEL_COMPONENTS, BASE_PANEL_TITLE, BASE_PANEL_WINDOWING, buildEditorPanelComponents, CORE_PANEL_IDS, OPTIONAL_PANEL_IDS, } from './panelRegistry';
+import { usePanelRenderers } from './panelRenderers';
+import { DockTab } from './DockTab';
+import { iconForDockPanel } from '../../lib/panel-tab-icons';
+import { resolveRegion } from './resolveRegion';
+import { registerDockRegion, registerDockviewApi } from './dockviewRegistry';
+import { auxBarWidthStore, useAuxBarWidth } from './useAuxBarWidth';
+import { chatWidthStore, useChatWidth } from '../ChatColumn/useChatWidth';
+import { SessionTabStrip } from '../ChatColumn/SessionTabStrip';
+import { useHost } from '../../core/app-shell';
+import { pageLayoutStore, pageLayoutToDockview } from '../../core/page-platform';
+import { getCurrentProject } from '../../lib/project-context';
+import { pageRuntimeOwnsPanel } from './panelWindowing';
+import { withDockTitleRestore } from './dockTitle';
+import { installEdgeDrawer } from './edgeDrawer';
+import { FOOTER_PANEL_IDS } from './footer-panels';
+import { isFooterPanelId, isFooterPanelUserVisible, setFooterPanelUserVisible, subscribeFooterPanelVisibility, requestFooterPanelEnsure, } from './footer-panel-visibility';
+import { createPanelTabCommands } from './panelTabCommands';
+import { createStudioTabContextMenuHandler } from './studioTabMenuProvider';
+import { installUeDockDrag } from './ueDrag/controller';
+import { pingAnchorRelayout } from '../../lib/surfaceAnchors';
+import './DockShell.css';
+const FORGEAX_DOCK_THEME = { ...themeAbyss, name: 'forgeax-abyss', gap: 6 };
+export function DockRegion({ region }) {
+    const host = useHost();
+    const renderers = usePanelRenderers();
+    const editorPanelIds = renderers.editorPanelIds;
+    const auxBarWidth = useAuxBarWidth();
+    const chatWidth = useChatWidth();
+    const pageSession = useSyncExternalStore(host.pages.subscribe, host.pages.getSnapshot, host.pages.getSnapshot);
+    const activePage = pageSession.instances.find((page) => page.encodedKey === pageSession.activeKey);
+    const resolvedPage = activePage ? host.pageRegistry.get(activePage.typeId) : undefined;
+    const pageScope = useMemo(() => {
+        if (region === 'ChatDock' || !activePage || !resolvedPage || resolvedPage.status !== 'available')
+            return null;
+        const layout = 'grid' in resolvedPage.layout
+            ? resolvedPage.layout
+            : pageLayoutToDockview(activePage.typeId, resolvedPage.definition.title, resolvedPage.panels, resolvedPage.layout);
+        return {
+            layoutId: activePage.typeId,
+            identity: { pageTypeId: activePage.typeId, layoutVersion: resolvedPage.definition.layoutVersion ?? 1 },
+            layout,
+            panelIds: resolvedPage.panels.map((panel) => panel.id),
+        };
+    }, [activePage, region, resolvedPage]);
+    const pagePanelIds = useMemo(() => new Set(pageScope?.panelIds ?? []), [pageScope]);
+    const panels = renderers.panels;
+    const isMember = useCallback((id) => {
+        if (id === 'chat')
+            return region === 'ChatDock';
+        if (region === 'ChatDock')
+            return false;
+        if (id.startsWith('ep:') && !editorPanelIds.includes(id.slice(3)))
+            return false;
+        if (pageScope && !pagePanelIds.has(id))
+            return false;
+        const descriptor = panels?.[id];
+        if (descriptor && !(descriptor.when?.() ?? true))
+            return false;
+        return resolveRegion(id, descriptor ?? {}, {}) === region;
+    }, [editorPanelIds, pagePanelIds, pageScope, panels, region]);
+    const isMemberRef = useRef(isMember);
+    useLayoutEffect(() => { isMemberRef.current = isMember; }, [isMember]);
+    const components = useMemo(() => ({
+        ...(resolvedPage?.status === 'available' && activePage
+            ? Object.fromEntries(resolvedPage.panels
+                .filter((placement) => pageRuntimeOwnsPanel(placement.id, new Set(Object.keys(BASE_PANEL_COMPONENTS)), editorPanelIds))
+                .map((placement) => [placement.id, withDockTitleRestore(() => (placement.panelType.runtime.kind === 'iframe'
+                    ? _jsx("iframe", { src: placement.panelType.runtime.src, title: placement.id, style: { width: '100%', height: '100%', border: 0 } })
+                    : placement.panelType.runtime.render({
+                        pageKey: activePage.key,
+                        placementId: placement.id,
+                        pageContext: activePage.context,
+                        initialProps: placement.initialProps,
+                    })))]))
+            : {}),
+        ...BASE_PANEL_COMPONENTS,
+        ...buildEditorPanelComponents(editorPanelIds),
+    }), [activePage, editorPanelIds, resolvedPage]);
+    const componentKeys = useMemo(() => new Set(Object.keys(components)), [components]);
+    const componentKeysRef = useRef(componentKeys);
+    useLayoutEffect(() => { componentKeysRef.current = componentKeys; }, [componentKeys]);
+    /** Stable signature — HMR refreshes panel render fns without changing registered ids. */
+    const componentKeysSignature = useMemo(() => [...componentKeys].sort().join('\0'), [componentKeys]);
+    const pageScopeKey = useMemo(() => {
+        if (!pageScope)
+            return '';
+        return `${pageScope.layoutId}:${pageScope.identity.layoutVersion}:${pageScope.panelIds.join(',')}`;
+    }, [pageScope]);
+    const readyActivation = useMemo(() => createDockReadyActivation(), []);
+    const layoutControl = useMemo(() => createDockLayoutControlState(), []);
+    const applyScopeRef = useRef(() => { });
+    const wrapRef = useRef(null);
+    const [chatMounted, setChatMounted] = useState(true);
+    const storageKey = useCallback((scope) => (`forgeax:project:${getCurrentProject()}:page-layout:${scope.layoutId}:${region}`), [region]);
+    const persistedScope = useCallback((scope) => ({
+        key: storageKey(scope),
+        identity: scope.identity,
+    }), [storageKey]);
+    const layoutPersistence = useMemo(() => createDockLayoutPersistence({
+        load: (key, identity) => pageLayoutStore.load(key, identity),
+        save: (key, identity, layout) => pageLayoutStore.save(key, identity, layout),
+        remove: (key) => pageLayoutStore.remove(key),
+    }), []);
+    const titleFor = useCallback((id) => {
+        const panelId = id.startsWith('ep:') ? id.slice(3) : id;
+        const key = `dockShell.panelTitles.${panelId}`;
+        const localized = panelT(key);
+        return localized !== key ? localized : panels?.[panelId]?.title ?? BASE_PANEL_TITLE[id] ?? id;
+    }, [panels]);
+    const windowingSources = useMemo(() => ({
+        basePanelIds: new Set(Object.keys(BASE_PANEL_COMPONENTS)),
+        baseWindowing: BASE_PANEL_WINDOWING,
+        pageWindowing: {},
+    }), []);
+    const panelTabCommands = useMemo(() => createPanelTabCommands({
+        getApi: () => readyActivation.getCurrent(),
+        titleFor,
+    }), [readyActivation, titleFor]);
+    const getTabContextMenuItems = useMemo(() => createStudioTabContextMenuHandler({
+        region,
+        getWrapEl: () => wrapRef.current,
+        getApi: () => readyActivation.getCurrent(),
+        commands: panelTabCommands,
+        windowingSources,
+    }), [panelTabCommands, region, windowingSources, readyActivation]);
+    const applyScope = useCallback((api, scope) => {
+        if (region === 'ChatDock') {
+            try {
+                api.clear();
+            }
+            catch { /* noop */ }
+            if (componentKeysRef.current.has('chat')) {
+                api.addPanel({ id: 'chat', component: 'chat', title: titleFor('chat') });
+            }
+            return;
+        }
+        if (!scope || region !== 'DockShell') {
+            try {
+                api.clear();
+            }
+            catch { /* noop */ }
+            return;
+        }
+        layoutPersistence.restore(persistedScope(scope), (saved) => {
+            const allowedPanelIds = new Set(scope.panelIds);
+            const candidate = saved ? pruneSerializedDockLayout(saved, componentKeysRef.current, allowedPanelIds) : null;
+            const defaultLayout = pruneSerializedDockLayout(scope.layout, componentKeysRef.current, allowedPanelIds);
+            if (!defaultLayout)
+                return;
+            try {
+                api.clear();
+            }
+            catch { /* noop */ }
+            try {
+                if (candidate) {
+                    api.fromJSON(candidate);
+                    if (hasMountedPanelPlacement(scope.panelIds, new Set(api.panels.map((panel) => panel.id))))
+                        return;
+                    try {
+                        api.clear();
+                    }
+                    catch { /* noop */ }
+                }
+                api.fromJSON(defaultLayout);
+            }
+            catch {
+                try {
+                    api.clear();
+                    api.fromJSON(defaultLayout);
+                }
+                catch { /* invalid contribution stays empty */ }
+            }
+            pingAnchorRelayout();
+        });
+    }, [layoutPersistence, persistedScope, region, titleFor]);
+    useLayoutEffect(() => { applyScopeRef.current = applyScope; }, [applyScope]);
+    const scopeTransition = useMemo(() => createDockScopeTransition({
+        getLive: () => readyActivation.getCurrent(),
+        save: (api, scope) => {
+            if (region === 'DockShell')
+                layoutPersistence.save(persistedScope(scope), api.toJSON());
+        },
+        apply: (api, scope) => applyScopeRef.current(api, scope),
+    }, pageScope), [layoutPersistence, persistedScope, readyActivation, region]);
+    const onReady = useCallback((event) => {
+        const api = event.api;
+        const wrap = wrapRef.current;
+        const activated = readyActivation.replace(api, [
+            () => registerDockviewApi(api),
+            ...(wrap ? [() => registerDockRegion({ viewId: api.id, region, api, wrapEl: wrap })] : []),
+            () => installDockPanelVisibilityTracking(api, {
+                onAdded: (id) => { if (region === 'ChatDock' && id === 'chat')
+                    setChatMounted(true); },
+                onRemoved: (id) => { if (region === 'ChatDock' && id === 'chat')
+                    setChatMounted(false); },
+            }),
+            () => installDockLayoutObservation(api, {
+                getCurrentScope: scopeTransition.getCurrent,
+                ...(region === 'DockShell' ? {
+                    captureAndSave: (scope) => (layoutPersistence.captureAndSave(persistedScope(scope), () => {
+                        const raw = api.toJSON();
+                        const pruned = pruneSerializedDockLayout(raw, componentKeysRef.current, new Set(scope.panelIds));
+                        return pruned ?? raw;
+                    })),
+                } : {}),
+                onCommitted: () => {
+                    layoutControl.refresh();
+                    pingAnchorRelayout();
+                },
+            }),
+            ...(region === 'DockShell' && wrap ? [
+                () => installEdgeDrawer(api, wrap),
+                () => installUeDockDrag(api, wrap, {
+                    region,
+                    moveTo: () => { },
+                    titleFor,
+                }),
+            ] : []),
+        ]);
+        if (activated)
+            scopeTransition.applyCurrent();
+    }, [layoutControl, layoutPersistence, persistedScope, readyActivation, region, scopeTransition, titleFor]);
+    useEffect(() => () => {
+        readyActivation.dispose();
+    }, [readyActivation]);
+    useEffect(() => {
+        scopeTransition.transition(pageScope);
+    }, [componentKeysSignature, pageScope, pageScopeKey, scopeTransition]);
+    const basePanelCommands = useMemo(() => createDockPanelCommands({
+        getPanel: (id) => readyActivation.getCurrent()?.getPanel(id)?.api,
+        addPanel: (options) => { readyActivation.getCurrent()?.addPanel(options); },
+        canOpen: (id) => Boolean(readyActivation.getCurrent() && isMemberRef.current(id) && componentKeysRef.current.has(id)),
+        titleFor,
+        authoredLayout: () => scopeTransition.getCurrent()?.layout,
+        fallbackPanelId: () => readyActivation.getCurrent()?.panels.find((panel) => panel.api.location.type === 'grid')?.id,
+    }), [readyActivation, scopeTransition, titleFor]);
+    const panelCommands = useMemo(() => ({
+        open(id) {
+            if (FOOTER_PANEL_IDS.has(id)) {
+                setFooterPanelUserVisible(id, true);
+                requestFooterPanelEnsure();
+                return basePanelCommands.focus(id) || Boolean(readyActivation.getCurrent()?.getPanel(id));
+            }
+            return basePanelCommands.open(id);
+        },
+        close(id) {
+            if (FOOTER_PANEL_IDS.has(id))
+                setFooterPanelUserVisible(id, false);
+            return basePanelCommands.close(id);
+        },
+        focus(id) {
+            return basePanelCommands.focus(id);
+        },
+        reveal(id) {
+            if (FOOTER_PANEL_IDS.has(id)) {
+                setFooterPanelUserVisible(id, true);
+                requestFooterPanelEnsure();
+                if (!readyActivation.getCurrent()?.getPanel(id))
+                    return true;
+                return basePanelCommands.reveal(id);
+            }
+            return basePanelCommands.reveal(id);
+        },
+    }), [basePanelCommands, readyActivation]);
+    const reopen = useCallback((id) => { panelCommands.open(id); }, [panelCommands]);
+    useEffect(() => installDockPanelCommandSubscriptions({
+        onOpen: (listener) => ({ dispose: host.bus.on('panel:open', ({ id }) => listener(id)) }),
+        onClose: (listener) => ({ dispose: host.bus.on('panel:close', ({ id }) => listener(id)) }),
+        onFocus: (listener) => ({ dispose: host.bus.on('panel:focus', ({ id }) => listener(id)) }),
+        onReveal: (listener) => ({ dispose: host.bus.on('panel:reveal', ({ id }) => listener(id)) }),
+    }, panelCommands), [host, panelCommands]);
+    useEffect(() => installDockLayoutReset({
+        onReset: (listener) => ({ dispose: host.bus.on('dock:reset', listener) }),
+    }, {
+        getCurrentScope: scopeTransition.getCurrent,
+        clear: (scope) => layoutPersistence.clear(persistedScope(scope)),
+        getLive: readyActivation.getCurrent,
+        apply: (api, scope) => applyScope(api, scope),
+    }), [applyScope, host, layoutPersistence, persistedScope, readyActivation, scopeTransition]);
+    const eligible = Object.keys(panels ?? {}).filter(isMember).length;
+    if (region !== 'DockShell' && region !== 'ChatDock' && eligible === 0)
+        return null;
+    const dockview = (_jsx(DockviewReact, { className: "fx-dockshell", theme: FORGEAX_DOCK_THEME, components: components, defaultTabComponent: DockTab, getTabContextMenuItems: getTabContextMenuItems, onReady: onReady, disableFloatingGroups: false, hideBorders: true }));
+    return (_jsxs("div", { className: `fx-dockwrap fx-dockregion fx-dockregion-${region}`, ref: wrapRef, "data-fx-slot": region, style: region === 'AuxBar' ? { width: auxBarWidth } : region === 'ChatDock' ? { width: chatWidth, ...(chatMounted ? {} : { display: 'none' }) } : undefined, children: [region === 'AuxBar' && (_jsx(AnchoredResizeHandle, { orientation: "col", className: "fx-auxbar-resizer", ariaLabel: "Resize auxiliary bar", readSize: auxBarWidthStore.getSnapshot, writeSize: auxBarWidthStore.setSize, resizingBodyClassName: "fx-auxbar-resizing" })), region === 'ChatDock' && (_jsx(AnchoredResizeHandle, { orientation: "col", className: "fx-chat-resizer", ariaLabel: "Resize chat panel", readSize: chatWidthStore.getSnapshot, writeSize: chatWidthStore.setSize, resizingBodyClassName: "fx-chat-resizing" })), region === 'ChatDock' ? (_jsxs("div", { className: "fx-chatdock-inner", style: { width: chatWidth }, children: [_jsx(SessionTabStrip, {}), dockview] })) : dockview, region === 'DockShell' && !pageScope && (_jsx("div", { className: "fx-page-empty", role: "status", children: _jsx("span", { children: panelT('dockShell.emptySurface') }) })), region === 'DockShell' && (_jsx(LayoutControl, { getApi: readyActivation.getCurrent, layoutControl: layoutControl, panels: (pageScope?.panelIds ?? []).map((id) => ({ id, title: titleFor(id) })), onReopen: reopen }))] }));
+}
+function LayoutControl({ getApi, layoutControl, panels, onReopen, }) {
+    const host = useHost();
+    const { t } = useTranslation();
+    const onToggle = useCallback((listener) => ({
+        dispose: host.bus.on('dock:layout-toggle', (payload) => listener(payload.rect)),
+    }), [host]);
+    useEffect(() => subscribeFooterPanelVisibility(() => layoutControl.refresh()), [layoutControl]);
+    const isPanelOpen = useCallback((panelId) => (isFooterPanelId(panelId)
+        ? isFooterPanelUserVisible(panelId)
+        : Boolean(getApi()?.getPanel(panelId))), [getApi]);
+    const closePanel = useCallback((panelId) => {
+        if (isFooterPanelId(panelId))
+            setFooterPanelUserVisible(panelId, false);
+        getApi()?.getPanel(panelId)?.api.close();
+    }, [getApi]);
+    return (_jsx(DockLayoutMenu, { state: layoutControl, onToggle: onToggle, isPanelOpen: isPanelOpen, closePanel: closePanel, reopenPanel: onReopen, onReset: () => { void host.commands.execute('app.dock.reset'); }, resetLabel: t('dockShell.resetLayout'), sectionLabel: t('dockShell.mainPanels'), emptyLabel: t('dockShell.emptySurface'), resetIcon: _jsx(RotateCcw, { size: 12 }), panels: panels.map((panel) => {
+            const Icon = iconForDockPanel(panel.id);
+            return { ...panel, icon: _jsx(Icon, { size: 13 }) };
+        }) }));
+}
+export const PAGE_DOCK_PANEL_IDS = [...CORE_PANEL_IDS, ...OPTIONAL_PANEL_IDS];