@forgeax/interface 0.4.1

package/dist/package/browser/components/PanelShell/PanelShell.js

@@ -0,0 +1,459 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useReducer, } from 'react';
+import { createCoalescedFrameTaskLifecycle, createRestartableTimeoutTaskLifecycle, installElementResizeObservation, PanelEmptyState, PanelSurface, } from '@forgeax/app-shell/react';
+import { AlertCircle, Bell, Box, Braces, Camera, Check, Clapperboard, Copy, Columns3, Crosshair, Database, Download, Eye, ExternalLink, FileCode2, FileText, Filter, Folder, FolderPlus, Globe, Grid2X2, Gamepad2, Image, Layers, List, LogOut, Magnet, Maximize2, Monitor, MoreHorizontal, Move, Music, Package, Pause, Play, Plus, ChevronDown, Redo2, RefreshCw, RotateCcw, Save, Settings, Sparkles, Square, Star, Trash2, Type, Undo2, X, } from 'lucide-react';
+import { RecoveryBoundary } from '../ErrorBoundary';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '../ui/tooltip';
+import { Popover, PopoverAnchor, PopoverContent } from '../ui/popover';
+import { iconForDockPanel } from '../../lib/panel-tab-icons';
+import { useHost } from '../../core/app-shell';
+import { getContextExpressionKeys, resolvePanelActionState, } from '../../core/panels';
+import './PanelShell.css';
+const ICONS = {
+    AlertCircle,
+    Bell,
+    Box,
+    Braces,
+    Camera,
+    ChevronDown,
+    Check,
+    Clapperboard,
+    Columns3,
+    Copy,
+    Crosshair,
+    Database,
+    Download,
+    Eye,
+    FileCode2,
+    FileText,
+    Filter,
+    ExternalLink,
+    Folder,
+    FolderPlus,
+    Globe,
+    Grid2X2,
+    Gamepad2,
+    Image,
+    Layers,
+    List,
+    LogOut,
+    Magnet,
+    Maximize2,
+    Monitor,
+    Move,
+    Music,
+    Package,
+    Pause,
+    Play,
+    Plus,
+    Redo2,
+    RefreshCw,
+    RotateCcw,
+    Save,
+    Settings,
+    Sparkles,
+    Square,
+    Star,
+    Trash2,
+    Type,
+    Undo2,
+    X,
+};
+function ActionTooltip({ title, children }) {
+    return (_jsx(TooltipProvider, { delayDuration: 350, skipDelayDuration: 100, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "fx-panel-tooltip-trigger", children: children }) }), _jsx(TooltipContent, { side: "bottom", align: "center", sideOffset: 7, children: title })] }) }));
+}
+const LOCATION_RANK = {
+    'header/left': 0,
+    'header/center': 1,
+    'header/right': 2,
+    context: 3,
+};
+/** Visual left→right toolbar order: zone first, then per-zone `order`.
+ *  Sorting by `order` alone interleaves left/center/right (all use 10/20/…)
+ *  and breaks both overflow fold priority and flyout item order. */
+function compareActionsVisual(a, b) {
+    const locA = LOCATION_RANK[a.location ?? 'header/right'] ?? 2;
+    const locB = LOCATION_RANK[b.location ?? 'header/right'] ?? 2;
+    if (locA !== locB)
+        return locA - locB;
+    return (a.order ?? 0) - (b.order ?? 0);
+}
+function mergeActions(panelId, panelActions, contributedActions) {
+    const byId = new Map();
+    for (const action of panelActions)
+        byId.set(action.id, { ...action, panelId: action.panelId || panelId });
+    for (const action of contributedActions)
+        byId.set(action.id, action);
+    return [...byId.values()].sort(compareActionsVisual);
+}
+function useActionRegistryVersion() {
+    const host = useHost();
+    return useSyncExternalStore(host.panelActions.onChange, () => host.panelActions.version(), () => 0);
+}
+function useControlRegistryVersion() {
+    const host = useHost();
+    return useSyncExternalStore(host.panelControls.onChange, () => host.panelControls.version(), () => 0);
+}
+function useContextExpressionVersion(action) {
+    const host = useHost();
+    const [, bump] = useReducer((n) => n + 1, 0);
+    const keys = useMemo(() => {
+        const set = new Set();
+        for (const expr of [action.when, action.enablement, action.activeWhen, action.highlightWhen]) {
+            for (const key of getContextExpressionKeys(expr))
+                set.add(key);
+        }
+        return [...set].sort();
+    }, [action.activeWhen, action.enablement, action.highlightWhen, action.when]);
+    useEffect(() => {
+        if (keys.length === 0)
+            return undefined;
+        const cleanups = keys.map((key) => host.contextKeys.onChange(key, () => bump()));
+        return () => { for (const cleanup of cleanups)
+            void cleanup(); };
+    }, [host, keys]);
+    return keys.length;
+}
+function useContextKeyValue(key) {
+    const host = useHost();
+    const [, bump] = useReducer((n) => n + 1, 0);
+    useEffect(() => {
+        if (!key)
+            return undefined;
+        const cleanup = host.contextKeys.onChange(key, () => bump());
+        return () => { void cleanup(); };
+    }, [host, key]);
+    return key ? host.contextKeys.get(key) : undefined;
+}
+function executePanelCommand(host, command, panelId, actionId, location, args) {
+    void host.commands.execute(command, {
+        panelId,
+        actionId,
+        source: location === 'context' ? 'panel-context-menu' : 'panel-header',
+        args,
+    }).catch((err) => {
+        console.error(`[panel-actions] command "${command}" failed`, err);
+    });
+}
+const OverflowFlyoutContext = createContext(false);
+function PanelCommandButton({ action, panelId, location, }) {
+    const host = useHost();
+    const inOverflow = useContext(OverflowFlyoutContext);
+    useContextExpressionVersion(action);
+    const state = resolvePanelActionState(action, host.contextKeys);
+    if (!state.visible)
+        return null;
+    const Icon = action.icon ? ICONS[action.icon] : undefined;
+    // In the flyout, always surface the title so icon-only header buttons remain
+    // recognizable once relocated out of the toolbar.
+    const label = action.label ?? (inOverflow || !Icon ? action.title : '');
+    return (_jsx(ActionTooltip, { title: action.title, children: _jsxs("button", { type: "button", className: "fx-panel-action no-motion-lift", disabled: !state.enabled, "data-panel-id": panelId, "data-action-id": action.id, "data-testid": action.testId, "data-active": state.active ? 'true' : 'false', "data-highlight": state.highlighted ? 'true' : 'false', "data-has-label": label ? 'true' : 'false', "data-location": location, "aria-label": action.title, onClick: () => executePanelCommand(host, action.command, panelId, action.id, location, action.args), children: [Icon && _jsx(Icon, { size: 14 }), label && _jsx("span", { className: "fx-panel-action-label", children: label })] }) }));
+}
+function PanelMenuItem({ item, panelId, menuId, }) {
+    const host = useHost();
+    useContextExpressionVersion(item);
+    const state = resolvePanelActionState(item, host.contextKeys);
+    if (!state.visible)
+        return null;
+    if (item.kind === 'separator')
+        return _jsx(DropdownMenuSeparator, {});
+    const Icon = item.icon ? ICONS[item.icon] : undefined;
+    return (_jsxs(DropdownMenuItem, { className: `fx-panel-menu-item${item.tone === 'reset' ? ' is-reset' : ''}`, disabled: !state.enabled, "data-active": state.active ? 'true' : 'false', "data-highlight": state.highlighted ? 'true' : 'false', onSelect: (event) => {
+            if (item.checkable)
+                event.preventDefault();
+            executePanelCommand(host, item.command, panelId, item.id, 'header/right', item.args);
+        }, children: [item.checkable ? (_jsx("span", { className: "fx-panel-menu-checkbox", "data-checked": state.active ? 'true' : 'false', children: state.active && _jsx(Check, { size: 11 }) })) : (_jsx("span", { className: "fx-panel-menu-tico", children: Icon && _jsx(Icon, { size: 14, className: "fx-panel-menu-icon" }) })), item.checkable && Icon && _jsx(Icon, { size: 14, className: "fx-panel-menu-icon" }), _jsx("span", { className: "fx-panel-menu-label", children: item.title }), _jsx("span", { className: "fx-panel-menu-source", children: menuId })] }));
+}
+function PanelMenuButton({ action, panelId, location, }) {
+    const host = useHost();
+    useContextExpressionVersion(action);
+    const state = resolvePanelActionState(action, host.contextKeys);
+    const Icon = action.icon ? ICONS[action.icon] : undefined;
+    const contextLabel = useContextKeyValue(action.labelContextKey);
+    const contextItems = useContextKeyValue(action.itemsContextKey);
+    if (!state.visible)
+        return null;
+    const label = contextLabel ?? action.label ?? (!Icon ? action.title : '');
+    const items = [...(contextItems ?? action.items)].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const bodyItems = items.filter((item) => item.kind !== 'separator' && item.tone !== 'reset');
+    const footerItems = items.filter((item) => item.kind !== 'separator' && item.tone === 'reset');
+    return (_jsxs(DropdownMenu, { children: [_jsx(TooltipProvider, { delayDuration: 350, skipDelayDuration: 100, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "fx-panel-action no-motion-lift", disabled: !state.enabled, "data-panel-id": panelId, "data-action-id": action.id, "data-testid": action.testId, "data-active": state.active ? 'true' : 'false', "data-highlight": state.highlighted ? 'true' : 'false', "data-has-label": label ? 'true' : 'false', "data-location": location, "aria-label": action.title, children: [Icon && _jsx(Icon, { size: 14 }), label && _jsx("span", { className: "fx-panel-action-label", children: label }), _jsx(ChevronDown, { size: 12 })] }) }) }), _jsx(TooltipContent, { side: "bottom", align: "center", sideOffset: 7, children: action.title })] }) }), _jsxs(DropdownMenuContent, { className: "fx-panel-menu", align: location === 'header/right' ? 'end' : 'start', sideOffset: 6, children: [_jsx("div", { className: "fx-panel-menu-title", children: action.title }), _jsx("div", { className: "fx-panel-menu-scroll", children: bodyItems.map((item) => (_jsx(PanelMenuItem, { item: item, panelId: panelId, menuId: action.id }, item.id))) }), footerItems.length > 0 && (_jsxs("div", { className: "fx-panel-menu-footer", children: [_jsx(DropdownMenuSeparator, {}), footerItems.map((item) => (_jsx(PanelMenuItem, { item: item, panelId: panelId, menuId: action.id }, item.id)))] }))] })] }));
+}
+function PanelActionControl({ action, panelId, location, }) {
+    if (action.kind === 'control') {
+        if (location === 'context')
+            return null;
+        return _jsx(PanelRegisteredControl, { action: action, panelId: panelId });
+    }
+    if (action.kind === 'menu') {
+        if (location === 'context')
+            return null;
+        return _jsx(PanelMenuButton, { action: action, panelId: panelId, location: location });
+    }
+    return _jsx(PanelCommandButton, { action: action, panelId: panelId, location: location });
+}
+function PanelRegisteredControl({ action, panelId, }) {
+    const host = useHost();
+    useControlRegistryVersion();
+    useContextExpressionVersion(action);
+    const state = resolvePanelActionState(action, host.contextKeys);
+    if (!state.visible)
+        return null;
+    const control = host.panelControls.get(action.control);
+    if (!control)
+        return null;
+    return (_jsx("div", { className: "fx-panel-control", "data-control": action.control, "data-enabled": state.enabled ? 'true' : 'false', children: control.render({ panelId, actionId: action.id }) }));
+}
+function OverflowMenu({ panelId, actions, location, }) {
+    const [open, setOpen] = useState(false);
+    const lockedRef = useRef(false);
+    const closeTask = useRef(null);
+    const clearClose = () => {
+        closeTask.current?.cancel();
+    };
+    const scheduleClose = () => {
+        closeTask.current?.schedule();
+    };
+    useEffect(() => {
+        const task = createRestartableTimeoutTaskLifecycle({
+            delayMs: 180,
+            task: () => {
+                if (!lockedRef.current)
+                    setOpen(false);
+            },
+        });
+        closeTask.current = task;
+        return () => {
+            task.dispose();
+            closeTask.current = null;
+        };
+    }, []);
+    const align = location === 'header/right' ? 'end' : location === 'header/center' ? 'center' : 'start';
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                lockedRef.current = false;
+        }, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("button", { type: "button", className: "fx-panel-action fx-panel-overflow-trigger no-motion-lift", "data-panel-id": panelId, "data-has-label": "false", "data-location": location, "data-active": open ? 'true' : 'false', "aria-label": "More actions", "aria-expanded": open, onPointerEnter: () => {
+                        clearClose();
+                        setOpen(true);
+                    }, onPointerLeave: scheduleClose, onClick: () => {
+                        const next = !lockedRef.current;
+                        lockedRef.current = next;
+                        setOpen(next);
+                    }, children: _jsx(MoreHorizontal, { size: 14 }) }) }), _jsx(PopoverContent, { className: "fx-panel-overflow-flyout", style: { width: 'auto' }, align: align, sideOffset: 6, onOpenAutoFocus: (event) => event.preventDefault(), onPointerEnter: clearClose, onPointerLeave: scheduleClose, children: _jsx(OverflowFlyoutContext.Provider, { value: true, children: actions.map((action) => (_jsx(PanelActionControl, { action: action, panelId: panelId, location: location }, action.id))) }) })] }));
+}
+/** Default band for actions that omit `overflowPriority`. Zone-local `order` is
+ *  NOT used — it would scramble fold order across left/center/right. Ties break
+ *  by rightmost-first so the toolbar shrinks from the trailing edge. */
+const DEFAULT_OVERFLOW_PRIORITY = 100;
+function foldPriority(action) {
+    return action.overflowPriority ?? DEFAULT_OVERFLOW_PRIORITY;
+}
+/** Separator controls become horizontal rules in the flyout — never leave one
+ *  dangling at either end (or doubled up), which reads as a stray divider. */
+function isSeparatorAction(action) {
+    if (action.kind !== 'control')
+        return false;
+    return action.id.includes('separator') || action.control.includes('separator');
+}
+function sanitizeOverflowActions(actions) {
+    const trimmed = [];
+    for (const action of actions) {
+        if (isSeparatorAction(action) && (trimmed.length === 0 || isSeparatorAction(trimmed[trimmed.length - 1]))) {
+            continue;
+        }
+        trimmed.push(action);
+    }
+    while (trimmed.length > 0 && isSeparatorAction(trimmed[trimmed.length - 1])) {
+        trimmed.pop();
+    }
+    return trimmed;
+}
+const HEADER_LOCATIONS = ['header/left', 'header/center', 'header/right'];
+function headerLocationOf(action) {
+    const location = action.location ?? 'header/right';
+    return location === 'context' ? 'header/right' : location;
+}
+/**
+ * Renders the panel header and folds its icon buttons into a hover flyout when
+ * the header is too narrow. Folded actions keep the exact same
+ * `PanelActionControl` rendering — they are relocated, not restyled. The fold is
+ * decided for the header as a whole rather than per zone, so there is exactly
+ * one overflow menu, and the budget comes from the header's own width — which
+ * does not depend on the buttons — so folding cannot feed back into the
+ * available width and oscillate.
+ */
+function PanelHeaderBar({ panelId, panel }) {
+    const host = useHost();
+    const actionVersion = useActionRegistryVersion();
+    const actions = useMemo(() => mergeActions(panelId, panel.actions ?? [], host.panelActions.list(panelId)).filter((action) => (action.location ?? 'header/right') !== 'context'), [actionVersion, host, panel.actions, panelId]);
+    const headerRef = useRef(null);
+    const titleRef = useRef(null);
+    const measureRef = useRef(null);
+    const [foldCount, setFoldCount] = useState(0);
+    const foldOrder = useMemo(() => actions
+        .map((action, index) => ({ action, index }))
+        .filter(({ action }) => action.pinned !== true)
+        .sort((a, b) => {
+        const pa = foldPriority(a.action);
+        const pb = foldPriority(b.action);
+        if (pa !== pb)
+            return pa - pb; // lower priority folds first
+        return b.index - a.index; // otherwise the later (rightmost) folds first
+    })
+        .map(({ action }) => action.id), [actions]);
+    const clampedFold = Math.min(foldCount, foldOrder.length);
+    const foldedSet = useMemo(() => new Set(foldOrder.slice(0, clampedFold)), [foldOrder, clampedFold]);
+    // Keep flyout order identical to the toolbar's left→right sequence.
+    const overflow = sanitizeOverflowActions(actions
+        .filter((action) => foldedSet.has(action.id) && action.hideOnOverflow !== true)
+        .slice()
+        .sort(compareActionsVisual));
+    // Deterministically derive the exact number of items to fold from the live
+    // header width + measured per-item widths. Runs on every ResizeObserver tick
+    // (panel drag) for BOTH header and measure row, so it handles grow and shrink
+    // symmetrically without any "reset then converge" state dance.
+    const recompute = useCallback(() => {
+        const header = headerRef.current;
+        const measure = measureRef.current;
+        if (!header || !measure)
+            return;
+        const GAP = 6;
+        const TRIGGER = 26;
+        // Zones use the same gap as the toolbars inside them, so a button pair costs
+        // one GAP wherever a zone border happens to fall. An empty zone still emits
+        // its own gap; this slack absorbs that.
+        const SLACK = 12;
+        // Some Radix-wrapped controls measure as 0 inside the off-screen clone
+        // (visibility:hidden + inert). Fall back to the live toolbar width, then to
+        // a minimum, so those actions stay foldable instead of sticking on the bar.
+        const MIN_ACTION_WIDTH = 30;
+        const items = actions
+            .map((action) => {
+            const measured = measure.querySelector(`[data-fold-id="${CSS.escape(action.id)}"]`);
+            let width = measured ? measured.getBoundingClientRect().width : 0;
+            if (width <= 0.5) {
+                const live = header.querySelector(`[data-fold-live-id="${CSS.escape(action.id)}"]`);
+                width = live ? live.getBoundingClientRect().width : 0;
+            }
+            if (width <= 0.5) {
+                // Still mounted in the live toolbar? Keep a seat so it can fold.
+                const live = header.querySelector(`[data-fold-live-id="${CSS.escape(action.id)}"]`);
+                if (!live)
+                    return { id: action.id, width: 0 };
+                width = MIN_ACTION_WIDTH;
+            }
+            return { id: action.id, width };
+        })
+            .filter((item) => item.width > 0.5);
+        const rowWidth = (widths) => widths.reduce((sum, w) => sum + w, 0) + GAP * Math.max(0, widths.length - 1);
+        const style = getComputedStyle(header);
+        const titleWidth = titleRef.current?.getBoundingClientRect().width ?? 0;
+        const available = header.clientWidth
+            - parseFloat(style.paddingLeft)
+            - parseFloat(style.paddingRight)
+            - (titleWidth > 0 ? titleWidth + GAP : 0)
+            - SLACK;
+        const presentIds = new Set(items.map((item) => item.id));
+        const foldable = foldOrder.filter((id) => presentIds.has(id));
+        const dropped = new Set(actions.filter((action) => action.hideOnOverflow === true).map((action) => action.id));
+        const fits = (count) => {
+            const hidden = foldable.slice(0, count);
+            const hiddenSet = new Set(hidden);
+            const visibleWidths = items.filter((item) => !hiddenSet.has(item.id)).map((item) => item.width);
+            let width = rowWidth(visibleWidths);
+            // Folded-and-dropped actions never reach the flyout, so they alone do not
+            // cost the trigger's width.
+            if (hidden.some((id) => !dropped.has(id))) {
+                width += TRIGGER + (visibleWidths.length > 0 ? GAP : 0);
+            }
+            return width <= available + 0.5;
+        };
+        let next = 0;
+        while (next < foldable.length && !fits(next))
+            next += 1;
+        setFoldCount(next);
+        // The off-screen measure row duplicates every action's DOM purely to size
+        // it (width is read via data-fold-id). Those clones also carry the consumer
+        // data-testid (e.g. vp-play / vp-save), which would make getByTestId resolve
+        // to two elements. Strip identity from the clones so queries and tests match
+        // only the live visible instance.
+        measure.querySelectorAll('[data-testid]').forEach((el) => el.removeAttribute('data-testid'));
+    }, [actions, foldOrder]);
+    useLayoutEffect(() => {
+        // Keep the measure row out of the a11y tree, tab order and pointer/query
+        // surface — it exists solely to measure natural widths off-screen.
+        measureRef.current?.setAttribute('inert', '');
+        recompute();
+        const foldingFrameTask = createCoalescedFrameTaskLifecycle({
+            task: recompute,
+        });
+        const schedule = foldingFrameTask.schedule;
+        const disposeResizeObservation = installElementResizeObservation({
+            getElements: () => [headerRef.current, measureRef.current].filter((element) => element !== null),
+            onResize: schedule,
+        });
+        return () => {
+            foldingFrameTask.dispose();
+            disposeResizeObservation();
+        };
+    }, [recompute]);
+    return (_jsxs("header", { className: "fx-panel-header", ref: headerRef, children: [HEADER_LOCATIONS.map((location) => {
+                const zoneActions = actions.filter((action) => headerLocationOf(action) === location && !foldedSet.has(action.id));
+                const showOverflow = location === 'header/right' && overflow.length > 0;
+                return (_jsxs("div", { className: "fx-panel-header-zone", "data-zone": location.slice('header/'.length), children: [location === 'header/left' && panel.header?.showTitle === true && (() => {
+                            const PanelIcon = iconForDockPanel(panelId);
+                            return (_jsxs("div", { className: "fx-panel-title-block", ref: titleRef, children: [_jsx(PanelIcon, { className: "fx-panel-icon", size: 14, "aria-hidden": "true" }), _jsxs("div", { className: "fx-panel-title-wrap", children: [_jsx("div", { className: "fx-panel-title", title: panel.title, children: panel.title }), panel.header?.subtitle && _jsx("div", { className: "fx-panel-subtitle", children: panel.header.subtitle })] })] }));
+                        })(), (zoneActions.length > 0 || showOverflow) && (_jsxs("div", { className: "fx-panel-toolbar", "data-location": location, children: [zoneActions.map((action) => (_jsx("span", { "data-fold-live-id": action.id, className: "fx-panel-toolbar-item", children: _jsx(PanelActionControl, { action: action, panelId: panelId, location: location }) }, action.id))), showOverflow && (_jsx(OverflowMenu, { panelId: panelId, actions: overflow, location: "header/right" }))] }))] }, location));
+            }), _jsx("div", { ref: measureRef, className: "fx-panel-overflow-measure", "aria-hidden": "true", children: actions.map((action) => (_jsx("span", { "data-fold-id": action.id, className: "fx-panel-overflow-measure-item", children: _jsx(PanelActionControl, { action: action, panelId: panelId, location: headerLocationOf(action) }) }, action.id))) })] }));
+}
+/**
+ * Header visibility is DERIVED, not centrally whitelisted: a panel shows its
+ * operation header when it either opts in explicitly (`header.visible === true`,
+ * used for always-on chrome like Hierarchy / Viewport) OR currently has at least
+ * one non-context action whose `when` passes. Actions/controls are registered by
+ * feature extensions, so a panel "owns" its header simply by having live
+ * contributions — no separate registry of panel ids to maintain. `when` is
+ * evaluated here (not merely "has registrations") so a panel whose actions are
+ * all gated off never renders an empty header bar. Reactive to both the action
+ * registry and every context key those `when` expressions read.
+ */
+function usePanelHeaderVisible(panelId, panel) {
+    const host = useHost();
+    const actionVersion = useActionRegistryVersion();
+    const actions = useMemo(() => mergeActions(panelId, panel.actions ?? [], host.panelActions.list(panelId)).filter((action) => (action.location ?? 'header/right') !== 'context'), 
+    // actionVersion re-triggers when contributions (including kind:'control') change.
+    [actionVersion, host, panel.actions, panelId]);
+    const [, bump] = useReducer((n) => n + 1, 0);
+    const keys = useMemo(() => {
+        const set = new Set();
+        for (const action of actions) {
+            for (const key of getContextExpressionKeys(action.when))
+                set.add(key);
+        }
+        return [...set].sort();
+    }, [actions]);
+    useEffect(() => {
+        if (keys.length === 0)
+            return undefined;
+        const cleanups = keys.map((key) => host.contextKeys.onChange(key, () => bump()));
+        return () => { for (const cleanup of cleanups)
+            void cleanup(); };
+    }, [host, keys]);
+    if (panel.header?.visible === true)
+        return true;
+    return actions.some((action) => resolvePanelActionState(action, host.contextKeys).visible);
+}
+function PanelHeader({ panelId, panel }) {
+    const visible = usePanelHeaderVisible(panelId, panel);
+    if (!visible)
+        return null;
+    return _jsx(PanelHeaderBar, { panelId: panelId, panel: panel });
+}
+function PanelUnavailable({ id }) {
+    return (_jsx(PanelEmptyState, { title: "Panel not mounted", detail: id, "data-panel": id, "data-panel-unmounted": "1" }));
+}
+export function PanelShell({ id, panel, }) {
+    return (_jsx(PanelSurface, { id: id, registered: panel !== undefined, singleTab: panel?.dockChrome?.singleTab, header: panel ? _jsx(PanelHeader, { panelId: id, panel: panel }) : undefined, content: panel?.content, children: _jsx(RecoveryBoundary, { scope: `panel:${id}`, fullscreen: false, children: panel?.render() ?? _jsx(PanelUnavailable, { id: id }) }) }));
+}

package/dist/package/browser/components/Resize/ResizeHandle.d.ts

@@ -0,0 +1 @@
+export { ResizeHandle, useLocalSize, type ResizeHandleProps, } from '@forgeax/app-shell/react';

package/dist/package/browser/components/Resize/ResizeHandle.js

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

package/dist/package/browser/components/SceneBackground/SceneBackground.d.ts

@@ -0,0 +1,2 @@
+/** Ambient scene layer (forgeax-preview port; decorative, pointer-events: none). */
+export declare function SceneBackground(): import("react/jsx-runtime").JSX.Element;

package/dist/package/browser/components/SceneBackground/SceneBackground.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Ambient scene layer (forgeax-preview port; decorative, pointer-events: none). */
+export function SceneBackground() {
+    return (_jsxs("div", { className: "scene-fx", "aria-hidden": true, children: [_jsx("div", { className: "scene-noise" }), _jsx("div", { className: "scene-orb scene-orb--lime" }), _jsx("div", { className: "scene-orb scene-orb--teal" }), _jsx("div", { className: "scene-orb scene-orb--violet" }), _jsx("div", { className: "scene-sheen" }), _jsx("div", { className: "scene-grid" })] }));
+}

package/dist/package/browser/components/SchemaForm/SchemaForm.css

@@ -0,0 +1,138 @@
+.fx-sf {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 13px;
+  color: #ddd;
+}
+.fx-sf-panel {
+  padding: 12px;
+  border: 1px solid #333;
+  border-radius: 6px;
+  background: #1c1c1e;
+}
+.fx-sf-inline {
+  padding: 0;
+}
+.fx-sf-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.fx-sf-row-bool {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.fx-sf-label {
+  color: #aaa;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+.fx-sf-hint {
+  color: #777;
+  font-size: 11px;
+  line-height: 1.35;
+}
+.fx-sf-input {
+  background: #0e0e10;
+  color: #eee;
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font: inherit;
+}
+.fx-sf-input:focus {
+  outline: none;
+  border-color: #4a8cff;
+}
+.fx-sf-input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.fx-sf-textarea {
+  min-height: 80px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  resize: vertical;
+}
+.fx-sf-array,
+.fx-sf-object {
+  border: 1px dashed #333;
+  border-radius: 4px;
+  padding: 8px 10px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.fx-sf-array > legend,
+.fx-sf-object > legend {
+  color: #ccc;
+  padding: 0 6px;
+  font-size: 12px;
+}
+.fx-sf-array-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+.fx-sf-array-row > .fx-sf-row,
+.fx-sf-array-row > .fx-sf-array,
+.fx-sf-array-row > .fx-sf-object {
+  flex: 1;
+}
+.fx-sf-array-rm {
+  background: #2a1a1a;
+  color: #d99;
+  border: 1px solid #4a2222;
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.fx-sf-array-add {
+  align-self: flex-start;
+  background: transparent;
+  color: #4a8cff;
+  border: 1px dashed #2a4a7a;
+  border-radius: 4px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.fx-sf-error {
+  color: #f88;
+  background: rgba(120, 30, 30, 0.18);
+  border: 1px solid #5a2a2a;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+}
+.fx-sf-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+.fx-sf-btn {
+  padding: 6px 14px;
+  border-radius: 4px;
+  border: 1px solid #333;
+  background: #2a2a2c;
+  color: #eee;
+  font: inherit;
+  cursor: pointer;
+}
+.fx-sf-btn-primary {
+  background: #1f4a8a;
+  border-color: #2a5a9c;
+}
+.fx-sf-btn-primary:hover:not(:disabled) {
+  background: #2a5a9c;
+}
+.fx-sf-btn-ghost {
+  background: transparent;
+}
+.fx-sf-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}

package/dist/package/browser/components/SchemaForm/SchemaForm.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+import { type JsonSchema } from './schema-form-utils';
+import './SchemaForm.css';
+export type { JsonSchema } from './schema-form-utils';
+export { findMissingRequired } from './schema-form-utils';
+export interface SchemaFormProps {
+    schema: JsonSchema;
+    initialValue?: unknown;
+    onSubmit: (value: unknown) => void;
+    onCancel?: () => void;
+    /** Override the default "Run" label on the submit button. */
+    submitLabel?: string;
+    layout?: 'inline' | 'panel';
+    /** Disable the submit button (e.g. while a previous run is in flight). */
+    busy?: boolean;
+}
+export declare function SchemaForm({ schema, initialValue, onSubmit, onCancel, submitLabel, layout, busy, }: SchemaFormProps): ReactElement;