@softov/scena 0.1.2

package/dist/ui/layout/SplitLayout.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useRef, useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import { MountTitle } from './MountTitle.js';
+import { Divisor } from '../display/Divisor.js';
+import { NAMED_GLYPH } from '../display/Icon.js';
+// Side-by-side panes with a draggable divider between each adjacent pair AND
+// a thin header per pane that acts as the drag handle for reorder (HTML5 DnD).
+// Ratios sum to 1 and are stored in `state.split.ratios`. Dragging the divider
+// at index i only adjusts ratios[i] and ratios[i+1] — the rest are preserved.
+const MIN_PANE_RATIO = 0.05;
+const DRAG_MIME = 'application/x-scena-split-index';
+// ----- Layout -----
+export function SplitLayout({ surface, mounts, state, setState, renderMount, onClose, onReorder, }) {
+    const scena = useScena();
+    const containerRef = useRef(null);
+    // Merge persisted order with new mounts so a freshly opened pane shows up
+    // even if state.split.order was captured before it existed.
+    const persistedOrder = state.split?.order ?? [];
+    const orderSet = new Set(persistedOrder);
+    const orderedKnown = persistedOrder
+        .map((k) => mounts.find((m) => m.key === k))
+        .filter((m) => Boolean(m));
+    const newMounts = mounts.filter((m) => !orderSet.has(m.key));
+    const orderedMounts = [...orderedKnown, ...newMounts];
+    const fallbackEqual = orderedMounts.length > 0 ? 1 / orderedMounts.length : 1;
+    const ratios = (() => {
+        const stored = state.split?.ratios;
+        if (stored && stored.length === orderedMounts.length)
+            return stored;
+        return orderedMounts.map(() => fallbackEqual);
+    })();
+    function onDividerCommit(cumulativeRatio, id) {
+        const index = id;
+        if (orderedMounts.length < 2)
+            return;
+        const before = ratios.slice(0, index).reduce((a, b) => a + b, 0);
+        const pair = (ratios[index] ?? 0) + (ratios[index + 1] ?? 0);
+        if (pair <= 0)
+            return;
+        let newPaneI = clamp(cumulativeRatio - before, MIN_PANE_RATIO, pair - MIN_PANE_RATIO);
+        let newPaneNext = pair - newPaneI;
+        if (newPaneNext < MIN_PANE_RATIO) {
+            newPaneNext = MIN_PANE_RATIO;
+            newPaneI = pair - newPaneNext;
+        }
+        const next = [...ratios];
+        next[index] = newPaneI;
+        next[index + 1] = newPaneNext;
+        setState({
+            split: {
+                order: state.split?.order,
+                ratios: next,
+                collapsed: state.split?.collapsed,
+            },
+        });
+    }
+    // ----- Drag-reorder via pane headers -----
+    const [dragOverIdx, setDragOverIdx] = useState(null);
+    // ----- Context menu state -----
+    // Per-pane right-click → `tab:context`; gutter / container right-click →
+    // `surface:context`. SplitLayout has no real "group" concept (each column
+    // is one mount) so we don't expose a per-pane [...] button — surface-level
+    // operations (close all, switch layout) live on the background menu.
+    const [paneMenu, setPaneMenu] = useState(null);
+    const [bgMenu, setBgMenu] = useState(null);
+    function onPaneContextMenu(e, key, idx) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPaneMenu({ x: e.clientX, y: e.clientY, key, idx });
+    }
+    function onBgContextMenu(e) {
+        if (e.target !== e.currentTarget)
+            return;
+        e.preventDefault();
+        setBgMenu({ x: e.clientX, y: e.clientY });
+    }
+    const baseContext = {
+        '$/surface/name': surface,
+        '$/surface/layoutId': 'split',
+        '$/surface/mountCount': mounts.length,
+        '$/surface/closedHistory': 0,
+        '$/tab/canSplit': false,
+        '$/tab/canMove': false,
+        '$/group/canClose': false,
+        '$/group/canMaximize': false,
+    };
+    function onHeaderDragStart(e, idx) {
+        e.dataTransfer.setData(DRAG_MIME, String(idx));
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    function onHeaderDragOver(e, idx) {
+        if (!e.dataTransfer.types.includes(DRAG_MIME))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOverIdx(idx);
+    }
+    function onHeaderDragLeave() {
+        setDragOverIdx(null);
+    }
+    function onHeaderDrop(e, toIdx) {
+        if (!e.dataTransfer.types.includes(DRAG_MIME))
+            return;
+        e.preventDefault();
+        const fromIdx = Number(e.dataTransfer.getData(DRAG_MIME));
+        setDragOverIdx(null);
+        if (Number.isFinite(fromIdx) && fromIdx !== toIdx) {
+            onReorder(fromIdx, toIdx);
+        }
+    }
+    if (orderedMounts.length === 0) {
+        return (_jsx("div", { style: { padding: 24, color: 'var(--oo-color-muted)' }, children: "Nothing open." }));
+    }
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: 'row',
+        height: '100%',
+        minHeight: 0,
+    };
+    return (_jsxs("div", { ref: containerRef, className: "oo-layout oo-layout--split", style: containerStyle, onContextMenu: onBgContextMenu, children: [orderedMounts.map((mount, i) => {
+                // Per-field merge: mount.props ?? component.props ?? key.
+                const compProps = scena.components.get(mount.component.component)?.props;
+                const color = mount.props?.color ?? compProps?.color;
+                return (_jsxs(Fragment, { children: [_jsxs("div", { "data-pane-index": i, "data-drag-over": dragOverIdx === i, "data-color": color, className: "oo-split-pane", style: {
+                                flex: ratios[i] ?? fallbackEqual,
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: [_jsxs("div", { className: "oo-split-pane-header", draggable: true, onDragStart: (e) => onHeaderDragStart(e, i), onDragOver: (e) => onHeaderDragOver(e, i), onDragLeave: onHeaderDragLeave, onDrop: (e) => onHeaderDrop(e, i), onContextMenu: (e) => onPaneContextMenu(e, mount.key, i), style: {
+                                        flex: '0 0 auto',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        padding: 'var(--oo-spacing-xs) var(--oo-spacing-sm)',
+                                        background: 'var(--oo-color-surface)',
+                                        borderBottom: '1px solid var(--oo-color-border)',
+                                        fontSize: 'var(--oo-font-size-xs)',
+                                        color: 'var(--oo-color-muted)',
+                                        cursor: 'grab',
+                                        userSelect: 'none',
+                                    }, children: [_jsx(MountTitle, { mount: mount, fallback: mount.key, iconClassName: "oo-split-pane-header__icon", titleClassName: "oo-split-pane-header__title" }), _jsx("span", { onClick: (e) => {
+                                                e.stopPropagation();
+                                                onClose(mount.key);
+                                            }, title: "Close", style: { cursor: 'pointer' }, children: NAMED_GLYPH.closePanel })] }), _jsx("div", { style: { flex: 1, overflow: 'auto', minHeight: 0 }, children: renderMount(mount) })] }), i < orderedMounts.length - 1 ? (_jsx(Divisor, { id: i, direction: "row", containerRef: containerRef, onCommit: onDividerCommit })) : null] }, mount.key));
+            }), paneMenu ? (_jsx(ContextMenu, { x: paneMenu.x, y: paneMenu.y, onClose: () => setPaneMenu(null), spec: { query: { slot: 'tab:context' }, footerHints: true }, context: {
+                    ...baseContext,
+                    '$/tab/key': paneMenu.key,
+                    '$/tab/index': paneMenu.idx,
+                    '$/tab/isActive': true,
+                    '$/tab/isPinned': false,
+                    '$/group/tabCount': mounts.length,
+                } })) : null, bgMenu ? (_jsx(ContextMenu, { x: bgMenu.x, y: bgMenu.y, onClose: () => setBgMenu(null), spec: { query: { slot: 'surface:context' }, footerHints: true }, context: baseContext })) : null] }));
+}
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}

package/dist/ui/layout/Splitter.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface SplitterProps {
+    orientation?: 'horizontal' | 'vertical';
+    ratio?: number;
+    min?: number;
+    max?: number;
+    handleSize?: number;
+    onRatioChange?: (ratio: number) => void;
+    first?: ReactNode;
+    second?: ReactNode;
+}
+export declare function Splitter({ orientation, ratio: ratioProp, min, max, handleSize, onRatioChange, first, second, }: SplitterProps): import("react").JSX.Element;

package/dist/ui/layout/Splitter.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+// Graph-renderable two-pane splitter. Used as a content primitive inside Pages
+// (Tela) or any other graph. Distinct from chrome ShellSplitter, which writes
+// to layout: state and lives between surfaces — this one is internal to a graph.
+export function Splitter({ orientation = 'horizontal', ratio: ratioProp = 0.5, min = 0.1, max = 0.9, handleSize = 4, onRatioChange, first, second, }) {
+    const [ratio, setRatio] = useState(clamp(ratioProp, min, max));
+    const containerRef = useRef(null);
+    const draggingRef = useRef(false);
+    const rafRef = useRef(null);
+    const pendingRef = useRef(null);
+    // Sync from external prop when it changes (e.g., $bind path updates).
+    useEffect(() => {
+        setRatio(clamp(ratioProp, min, max));
+    }, [ratioProp, min, max]);
+    function commitPending() {
+        if (pendingRef.current !== null) {
+            const v = pendingRef.current;
+            setRatio(v);
+            onRatioChange?.(v);
+            pendingRef.current = null;
+        }
+        rafRef.current = null;
+    }
+    function onPointerDown(e) {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        draggingRef.current = true;
+    }
+    function onPointerMove(e) {
+        if (!draggingRef.current || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const ratio = orientation === 'horizontal'
+            ? (e.clientX - rect.left) / rect.width
+            : (e.clientY - rect.top) / rect.height;
+        pendingRef.current = clamp(ratio, min, max);
+        if (rafRef.current === null) {
+            rafRef.current = requestAnimationFrame(commitPending);
+        }
+    }
+    function onPointerUp(e) {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            commitPending();
+        }
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        draggingRef.current = false;
+    }
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+    };
+    const handleStyle = orientation === 'horizontal'
+        ? { width: handleSize, cursor: 'ew-resize', background: 'var(--oo-color-border, rgba(0,0,0,0.1))' }
+        : { height: handleSize, cursor: 'ns-resize', background: 'var(--oo-color-border, rgba(0,0,0,0.1))' };
+    return (_jsxs("div", { ref: containerRef, className: "oo-splitter", style: containerStyle, children: [_jsx("div", { style: { flex: ratio, overflow: 'auto', minWidth: 0, minHeight: 0 }, children: first }), _jsx("div", { className: "oo-splitter-handle", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, style: { flex: '0 0 auto', userSelect: 'none', touchAction: 'none', ...handleStyle } }), _jsx("div", { style: { flex: 1 - ratio, overflow: 'auto', minWidth: 0, minHeight: 0 }, children: second })] }));
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}

package/dist/ui/layout/StackHeader.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { LayoutProps } from '../../types/layout.js';
+interface LayoutHeaderProps extends Pick<LayoutProps, 'mounts' | 'state' | 'setState'> {
+    title: string;
+    icon?: ReactNode;
+    color?: string;
+}
+export declare function StackHeader({ mounts, state, setState, title, icon, color, }: LayoutHeaderProps): import("react").JSX.Element;
+export {};

package/dist/ui/layout/StackHeader.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import { resolveMountTitle } from './MountTitle.js';
+import { NAMED_GLYPH } from '../display/Icon.js';
+export function StackHeader({ 
+// surface,
+mounts, state, setState, title, icon, color,
+// renderMount,
+// onClose,
+// onReorder,
+ }) {
+    const scena = useScena();
+    // Merge persisted order with new mounts so a freshly opened section shows up
+    // even if state.split.order was captured before it existed.
+    const persistedOrder = state.split?.order ?? [];
+    const orderSet = new Set(persistedOrder);
+    const orderedKnown = persistedOrder
+        .map((k) => mounts.find((m) => m.key === k))
+        .filter((m) => Boolean(m));
+    const newMounts = mounts.filter((m) => !orderSet.has(m.key));
+    // `allOrdered` is every mount in display order. `orderedMounts` is what
+    // we actually render after applying the user's hide toggles (state.stack.hidden).
+    // The `[...]` menu in the container strip operates on `allOrdered` so a
+    // hidden mount remains togglable.
+    const allOrdered = [...orderedKnown, ...newMounts];
+    const hidden = new Set(state.stack?.hidden ?? []);
+    // Container [...] menu position. When non-null the overflow menu is open.
+    const [overflowMenu, setOverflowMenu] = useState(null);
+    function setHidden(next) {
+        setState({ stack: { ...state.stack, hidden: [...next] } });
+    }
+    function toggleHidden(key) {
+        const next = new Set(hidden);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        setHidden(next);
+    }
+    function openOverflowMenu(e) {
+        e.stopPropagation();
+        const rect = e.currentTarget.getBoundingClientRect();
+        setOverflowMenu({ x: rect.right, y: rect.bottom + 2 });
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "oo-stack-container-header", "data-color": color, style: {
+                    flex: '0 0 auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: 'var(--oo-spacing-xs) var(--oo-spacing-sm)',
+                    background: 'var(--oo-color-surface)',
+                    borderBottom: '1px solid var(--oo-color-border)',
+                    fontSize: 'var(--oo-font-size-xs)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.06em',
+                    color: 'var(--oo-color-muted)',
+                    userSelect: 'none',
+                    minWidth: 0,
+                    minHeight: 32,
+                }, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [icon ? (_jsx("span", { className: "oo-stack-container-header__icon", "aria-hidden": true, children: icon })) : null, _jsx("span", { className: "oo-stack-container-header__title", children: title })] }), _jsx("button", { type: "button", className: "oo-stack-container-header__overflow", title: "Toggle panes", "aria-label": "Toggle panes", onClick: openOverflowMenu, style: {
+                            background: 'transparent',
+                            border: 'none',
+                            color: 'var(--oo-color-muted)',
+                            cursor: 'pointer',
+                            font: 'inherit',
+                            padding: '0 4px',
+                        }, children: NAMED_GLYPH.moreHoriz })] }), overflowMenu ? (_jsx(ContextMenu, { x: overflowMenu.x, y: overflowMenu.y, onClose: () => setOverflowMenu(null), spec: {
+                    footerHints: true,
+                    items: allOrdered.map((m) => {
+                        // Per-field merge with the component's registered default.
+                        const cp = scena.components.get(m.component.component)?.props;
+                        const visible = !hidden.has(m.key);
+                        return {
+                            title: resolveMountTitle(scena, m),
+                            icon: m.props?.icon ?? cp?.icon,
+                            color: m.props?.color ?? cp?.color,
+                            active: visible,
+                            onSelect: (h) => {
+                                toggleHidden(m.key);
+                                h.closeMenu();
+                            },
+                        };
+                    }),
+                } })) : null] }));
+}

package/dist/ui/layout/StackLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function StackLayout({ surface, mounts, state, setState, renderMount, onClose, onReorder, }: LayoutProps): import("react").JSX.Element;

package/dist/ui/layout/StackLayout.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import { StackHeader } from './StackHeader.js';
+import { MountTitle } from './MountTitle.js';
+import { NAMED_GLYPH } from '../display/Icon.js';
+// Vertical stack of mounts, each with a header that toggles collapsed.
+// Headers are draggable for reorder (HTML5 DnD). Used primarily for
+// sidebar:right multi-section panels.
+const DRAG_MIME = 'application/x-scena-stack-index';
+export function StackLayout({ surface, mounts, state, setState, renderMount, onClose, onReorder, }) {
+    const scena = useScena();
+    // Merge persisted order with new mounts so a freshly opened section shows up
+    // even if state.split.order was captured before it existed.
+    const persistedOrder = state.split?.order ?? [];
+    const orderSet = new Set(persistedOrder);
+    const orderedKnown = persistedOrder
+        .map((k) => mounts.find((m) => m.key === k))
+        .filter((m) => Boolean(m));
+    const newMounts = mounts.filter((m) => !orderSet.has(m.key));
+    // `allOrdered` is every mount in display order. `orderedMounts` is what
+    // we actually render after applying the user's hide toggles (state.stack.hidden).
+    // The `[...]` menu in the container strip operates on `allOrdered` so a
+    // hidden mount remains togglable.
+    const allOrdered = [...orderedKnown, ...newMounts];
+    const hidden = new Set(state.stack?.hidden ?? []);
+    const orderedMounts = allOrdered.filter((m) => !hidden.has(m.key));
+    const container = state.stack?.container;
+    const collapsed = new Set(state.split?.collapsed ?? []);
+    const [dragOverIdx, setDragOverIdx] = useState(null);
+    function toggleCollapsed(key) {
+        const next = new Set(collapsed);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        setState({
+            split: {
+                order: state.split?.order,
+                ratios: state.split?.ratios,
+                collapsed: [...next],
+            },
+        });
+    }
+    function onHeaderDragStart(e, idx) {
+        e.dataTransfer.setData(DRAG_MIME, String(idx));
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    function onHeaderDragOver(e, idx) {
+        if (!e.dataTransfer.types.includes(DRAG_MIME))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOverIdx(idx);
+    }
+    function onHeaderDragLeave() {
+        setDragOverIdx(null);
+    }
+    function onHeaderDrop(e, toIdx) {
+        if (!e.dataTransfer.types.includes(DRAG_MIME))
+            return;
+        e.preventDefault();
+        const fromIdx = Number(e.dataTransfer.getData(DRAG_MIME));
+        setDragOverIdx(null);
+        if (Number.isFinite(fromIdx) && fromIdx !== toIdx) {
+            onReorder(fromIdx, toIdx);
+        }
+    }
+    // ----- Context menu state -----
+    // Per-section right-click → `tab:context`; container background right-click
+    // → `surface:context`. Each section is a single mount so the per-section
+    // [...] button is omitted (would duplicate the right-click items).
+    const [sectionMenu, setSectionMenu] = useState(null);
+    const [bgMenu, setBgMenu] = useState(null);
+    function onSectionContextMenu(e, key, idx) {
+        e.preventDefault();
+        e.stopPropagation();
+        setSectionMenu({ x: e.clientX, y: e.clientY, key, idx });
+    }
+    function onBgContextMenu(e) {
+        if (e.target !== e.currentTarget)
+            return;
+        e.preventDefault();
+        setBgMenu({ x: e.clientX, y: e.clientY });
+    }
+    const baseContext = {
+        '$/surface/name': surface,
+        '$/surface/layoutId': 'stack',
+        '$/surface/mountCount': mounts.length,
+        '$/surface/closedHistory': 0,
+        '$/tab/canSplit': false,
+        '$/tab/canMove': mounts.length > 1,
+        '$/group/canClose': false,
+        '$/group/canMaximize': false,
+    };
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
+    };
+    return (_jsxs("div", { className: "oo-layout oo-layout--stack", style: containerStyle, onContextMenu: onBgContextMenu, children: [_jsx(StackHeader, { title: container?.title ?? 'Details', icon: container?.icon, color: container?.color, mounts: mounts, state: state, setState: setState }), orderedMounts.map((mount, idx) => {
+                const isCollapsed = collapsed.has(mount.key);
+                // Per-field merge: mount.props ?? component.props ?? key.
+                const compProps = scena.components.get(mount.component.component)?.props;
+                const color = mount.props?.color ?? compProps?.color;
+                return (_jsxs("div", { className: "oo-stack-section", "data-collapsed": isCollapsed, "data-drag-over": dragOverIdx === idx, "data-color": color, style: {
+                        flex: isCollapsed ? '0 0 auto' : 1,
+                        minHeight: 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        borderBottom: '1px solid var(--oo-color-border)',
+                    }, children: [_jsxs("div", { className: "oo-stack-header", draggable: true, onDragStart: (e) => onHeaderDragStart(e, idx), onDragOver: (e) => onHeaderDragOver(e, idx), onDragLeave: onHeaderDragLeave, onDrop: (e) => onHeaderDrop(e, idx), onClick: () => toggleCollapsed(mount.key), onContextMenu: (e) => onSectionContextMenu(e, mount.key, idx), style: {
+                                cursor: 'grab',
+                                padding: 'var(--oo-spacing-xs) var(--oo-spacing-sm)',
+                                background: 'var(--oo-color-surface)',
+                                fontSize: 'var(--oo-font-size-xs)',
+                                textTransform: 'uppercase',
+                                color: 'var(--oo-color-muted)',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                userSelect: 'none',
+                            }, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { "aria-hidden": true, children: isCollapsed ? '▶' : '▼' }), _jsx(MountTitle, { mount: mount, fallback: mount.key, iconClassName: "oo-stack-section__icon", titleClassName: "oo-stack-section__title" })] }), _jsx("span", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClose(mount.key);
+                                    }, title: "Close", style: { cursor: 'pointer' }, children: NAMED_GLYPH.closePanel })] }), !isCollapsed ? (_jsx("div", { style: { flex: 1, overflow: 'auto', minHeight: 0 }, children: renderMount(mount) })) : null] }, mount.key));
+            }), sectionMenu ? (_jsx(ContextMenu, { x: sectionMenu.x, y: sectionMenu.y, onClose: () => setSectionMenu(null), spec: { query: { slot: 'tab:context' }, footerHints: true }, context: {
+                    ...baseContext,
+                    '$/tab/key': sectionMenu.key,
+                    '$/tab/index': sectionMenu.idx,
+                    '$/tab/isActive': true,
+                    '$/tab/isPinned': false,
+                    '$/group/tabCount': mounts.length,
+                } })) : null, bgMenu ? (_jsx(ContextMenu, { x: bgMenu.x, y: bgMenu.y, onClose: () => setBgMenu(null), spec: { query: { slot: 'surface:context' }, footerHints: true }, context: baseContext })) : null] }));
+}

package/dist/ui/layout/TabLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function TabLayout({ surface, mounts, state, renderMount, onActivate, onClose, onReorder, }: LayoutProps): import("react").JSX.Element;

package/dist/ui/layout/TabLayout.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import { NAMED_GLYPH } from '../display/Icon.js';
+import { TabTitle } from './TabPanelLayout.js';
+// Tab strip + active mount. Tabs are draggable for reorder (HTML5 DnD).
+// Right-click on a tab opens slot `tab:context`. The [...] trailing button
+// opens slot `tab-group:context`. Right-click on the strip empty area opens
+// slot `surface:context`. The `view/title` slot still renders as inline
+// action buttons next to the strip for the active mount.
+const DRAG_MIME = 'application/x-scena-tab-index';
+export function TabLayout({ surface, mounts, state, renderMount, onActivate, onClose, onReorder, }) {
+    const scena = useScena();
+    const persistedOrder = state.split?.order ?? [];
+    const orderSet = new Set(persistedOrder);
+    const orderedKnown = persistedOrder
+        .map((k) => mounts.find((m) => m.key === k))
+        .filter((m) => Boolean(m));
+    const newMounts = mounts.filter((m) => !orderSet.has(m.key));
+    const orderedMounts = [...orderedKnown, ...newMounts];
+    const active = orderedMounts.find((m) => m.key === state.activeContainerKey) ??
+        orderedMounts[orderedMounts.length - 1];
+    // Pinned tab keys — render a pin icon instead of × for these. Click on
+    // the pin runs `tab.unpin` to flip the state back.
+    const pinned = new Set(state.split?.pinned ?? []);
+    const titleEntries = active
+        ? scena.commands.list({ slot: 'view/title', enabled: true })
+        : [];
+    const [dragOverIdx, setDragOverIdx] = useState(null);
+    // Per-tab context menu state. The capability paths injected via
+    // ContextMenu.context drive which commands show up in the picker.
+    const [tabMenu, setTabMenu] = useState(null);
+    const [groupMenu, setGroupMenu] = useState(null);
+    const [bgMenu, setBgMenu] = useState(null);
+    // Vertical wheel → horizontal scroll on the tab strip. Native listener
+    // (not React's onWheel) so we can preventDefault — React's synthetic wheel
+    // is passive and would let the page scroll vertically instead.
+    const tabsRef = useRef(null);
+    useEffect(() => {
+        const el = tabsRef.current;
+        if (!el)
+            return;
+        function onWheel(e) {
+            if (e.deltaY === 0)
+                return;
+            e.preventDefault();
+            el.scrollLeft += e.deltaY;
+        }
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
+    function onTabContextMenu(e, tabKey, tabIdx) {
+        e.preventDefault();
+        e.stopPropagation();
+        setTabMenu({ x: e.clientX, y: e.clientY, tabKey, tabIdx });
+    }
+    function openGroupMenu(e) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        setGroupMenu({ x: rect.right, y: rect.bottom + 2 });
+    }
+    function onBgContextMenu(e) {
+        // Only fire when the click really is on the empty body, not on a card.
+        if (e.target !== e.currentTarget)
+            return;
+        e.preventDefault();
+        setBgMenu({ x: e.clientX, y: e.clientY });
+    }
+    function onTabDragStart(e, idx) {
+        e.dataTransfer.setData(DRAG_MIME, String(idx));
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    function onTabDragOver(e, idx) {
+        if (!e.dataTransfer.types.includes(DRAG_MIME))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOverIdx(idx);
+    }
+    function onTabDragLeave() {
+        setDragOverIdx(null);
+    }
+    function onTabDrop(e, toIdx) {
+        if (!e.dataTransfer.types.includes(DRAG_MIME))
+            return;
+        e.preventDefault();
+        const fromIdx = Number(e.dataTransfer.getData(DRAG_MIME));
+        setDragOverIdx(null);
+        if (Number.isFinite(fromIdx) && fromIdx !== toIdx) {
+            onReorder(fromIdx, toIdx);
+        }
+    }
+    // Capability paths shared by every menu opened from this layout. The
+    // per-menu builder adds the mount-specific overrides on top.
+    const baseContext = {
+        '$/tab/canSplit': false,
+        '$/tab/canMove': false,
+        '$/group/canClose': false,
+        '$/group/canMaximize': false,
+        '$/surface/name': surface,
+        '$/surface/layoutId': 'tab',
+        '$/surface/mountCount': mounts.length,
+        '$/surface/closedHistory': 0,
+    };
+    // Host-contributed rows for the right-clicked tab (e.g. explorer's "Open
+    // with <viewer>" alternates). Empty for tabs no host claims.
+    const tabMenuMount = tabMenu
+        ? orderedMounts.find((m) => m.key === tabMenu.tabKey)
+        : undefined;
+    const tabMenuExtra = tabMenuMount
+        ? scena.mountMenus.collect('tab:context', tabMenuMount)
+        : undefined;
+    return (_jsxs("div", { className: "oo-layout oo-layout--tab", style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { className: "tab-bar", children: [_jsx("div", { className: "tab-bar__strip", ref: tabsRef, children: orderedMounts.map((m, idx) => {
+                            // Per-field merge: mount.props wins where defined; otherwise
+                            // fall through to the component's registered default
+                            // (ComponentDefinition.props); finally to the raw key.
+                            const isPinned = pinned.has(m.key);
+                            return (_jsx(TabTitle, { resourceKey: m.key, m: m, idx: idx, isPinned: isPinned, isActive: m === active, dragOverTab: dragOverIdx, onDragStart: (e) => onTabDragStart(e, idx), onDragOver: (e) => onTabDragOver(e, idx), onDragLeave: onTabDragLeave, onDrop: (e) => onTabDrop(e, idx), onClick: () => onActivate(m.key), onContextMenu: (e) => onTabContextMenu(e, m.key, idx), onClose: (e) => {
+                                    e.stopPropagation();
+                                    onClose(m.key);
+                                }, onUnpin: (e) => {
+                                    e.stopPropagation();
+                                    scena.store.set('$/tab/key', m.key);
+                                    scena.store.set('$/surface/name', surface);
+                                    void scena.commands.execute('tab.unpin');
+                                } }, m.key));
+                        }) }), _jsxs("div", { className: "tab-bar__extras", children: [titleEntries.map((cmd, i) => {
+                                const label = typeof cmd.title === 'function' ? cmd.title() : cmd.title;
+                                return (_jsxs("button", { onClick: () => scena.commands.execute(cmd.id), title: String(label), children: [cmd.icon ? `${cmd.icon} ` : '', String(label)] }, i));
+                            }), _jsx("button", { className: "tab-bar__more", title: "Group actions", "aria-label": "Group actions", onClick: openGroupMenu, children: NAMED_GLYPH.moreHoriz })] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, position: 'relative' }, onContextMenu: onBgContextMenu, children: orderedMounts.length === 0 ? (_jsx("div", { style: { padding: 24, color: 'var(--oo-color-muted)' }, children: "Nothing open." })) : (
+                // Keep every mount mounted (state/scroll survive tab switches) and
+                // show only the active one. Conditionally rendering just the active
+                // mount unmounts the others, losing their React state.
+                orderedMounts.map((m) => (_jsx("div", { className: "oo-layout__mount", "data-active": m === active || undefined, style: { height: '100%', overflow: 'auto', display: m === active ? 'block' : 'none' }, children: renderMount(m) }, m.key)))) }), tabMenu ? (_jsx(ContextMenu, { x: tabMenu.x, y: tabMenu.y, onClose: () => setTabMenu(null), spec: { query: { slot: 'tab:context' }, extraItems: tabMenuExtra, footerHints: true }, context: {
+                    ...baseContext,
+                    '$/tab/key': tabMenu.tabKey,
+                    '$/tab/index': tabMenu.tabIdx,
+                    '$/tab/isActive': tabMenu.tabKey === active?.key,
+                    '$/tab/isPinned': pinned.has(tabMenu.tabKey),
+                    '$/group/tabCount': orderedMounts.length,
+                } })) : null, groupMenu ? (_jsx(ContextMenu, { x: groupMenu.x, y: groupMenu.y, onClose: () => setGroupMenu(null), spec: { query: { slot: 'tab-group:context' }, footerHints: true }, context: {
+                    ...baseContext,
+                    '$/group/tabCount': orderedMounts.length,
+                } })) : null, bgMenu ? (_jsx(ContextMenu, { x: bgMenu.x, y: bgMenu.y, onClose: () => setBgMenu(null), spec: { query: { slot: 'surface:context' }, footerHints: true }, context: baseContext })) : null] }));
+}

package/dist/ui/layout/TabPanelLayout.d.ts

@@ -0,0 +1,20 @@
+import { type DragEvent as ReactDragEvent, type MouseEvent as ReactMouseEvent } from 'react';
+import type { LayoutProps } from '../../types/layout.js';
+import type { ResolvedMount } from '../../types/mount-surface.js';
+export declare function TabPanelLayout({ surface, mounts, state, setState, renderMount, onActivate, onClose, }: LayoutProps): import("react").JSX.Element;
+export declare function TabTitle({ m, resourceKey, isActive, dragOverTab, idx, onDragStart, onDragOver, onDragLeave, onDrop, onClick, onContextMenu, onClose, onUnpin, isPinned }: {
+    m: ResolvedMount | undefined;
+    resourceKey: string;
+    idx: number;
+    isActive: boolean;
+    dragOverTab: number | null;
+    isPinned: boolean;
+    onDragStart: (e: ReactDragEvent<HTMLDivElement>) => void;
+    onDragOver: (e: ReactDragEvent<HTMLDivElement>) => void;
+    onDragLeave: (e: ReactDragEvent<HTMLDivElement>) => void;
+    onDrop: (e: ReactDragEvent<HTMLDivElement>) => void;
+    onClick: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    onContextMenu: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    onClose: (e: ReactMouseEvent<HTMLElement>) => void;
+    onUnpin: (e: ReactMouseEvent<HTMLElement>) => void;
+}): import("react").JSX.Element;