@softov/scena 0.1.2

package/dist/ui/layout/SingleLayout.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { SectionHeader } from './SectionHeader.js';
+import { useMountTitle } from './MountTitle.js';
+// One mount fills the surface; no tab strip. Active mount picked via
+// `state.activeContainerKey`, falling back to the most recently opened. When the
+// active mount declares a title/icon/actions (mount.props ?? component.props), a
+// SectionHeader strip renders above it — this is how sidebar sections get their
+// `[icon Title] [actions] [⋯]` header.
+export function SingleLayout({ mounts, state, renderMount }) {
+    const scena = useScena();
+    const active = mounts.find((m) => m.key === state.activeContainerKey) ??
+        mounts[mounts.length - 1];
+    const compProps = active ? scena.components.get(active.component.component)?.props : undefined;
+    const titleLabel = active?.props?.title ?? compProps?.title;
+    const title = useMountTitle(active, '');
+    const icon = active?.props?.icon ?? compProps?.icon;
+    const color = active?.props?.color ?? compProps?.color;
+    const actions = active?.props?.actions ?? compProps?.actions;
+    const showHeader = Boolean(titleLabel || (actions && actions.length));
+    return (_jsxs("div", { className: "oo-layout oo-layout--single", style: { height: '100%', width: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [showHeader ? _jsx(SectionHeader, { title: title || active?.key || '', icon: icon, color: color, actions: actions }) : null, _jsx("div", { style: { flex: 1, minHeight: 0, position: 'relative' }, children: mounts.length === 0 ? (_jsx("div", { style: { padding: 24, color: 'var(--oo-color-muted)' }, children: "Nothing open." })) : (
+                // Keep every mount mounted; show only the active one so switching
+                // between mounts doesn't unmount (and reset) the others.
+                mounts.map((m) => (_jsx("div", { className: "oo-layout__mount", "data-active": m === active || undefined, style: { position: 'absolute', inset: 0, overflow: 'auto', display: m === active ? 'block' : 'none' }, children: renderMount(m) }, m.key)))) })] }));
+}

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

@@ -0,0 +1,9 @@
+import type { LayoutProps } from '../../types/layout.js';
+import type { ResolvedMount } from '../../types/mount-surface.js';
+import type { CampusNodeRenderProps } from '../campus/types.js';
+export interface SpatialCardData {
+    mount: ResolvedMount;
+    renderMount: LayoutProps['renderMount'];
+    onClose: () => void;
+}
+export declare function SpatialCard({ selected, data }: CampusNodeRenderProps): import("react").JSX.Element;

package/dist/ui/layout/SpatialCard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { useMountTitle } from './MountTitle.js';
+import { NAMED_GLYPH } from '../display/Icon.js';
+export function SpatialCard({ selected, data }) {
+    const { mount, renderMount, onClose } = data;
+    const scena = useScena();
+    // Per-field merge: mount.props ?? component.props ?? key.
+    const compProps = scena.components.get(mount.component.component)?.props;
+    const title = useMountTitle(mount, mount.key);
+    const icon = mount.props?.icon ?? compProps?.icon;
+    const color = mount.props?.color ?? compProps?.color;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "oo-spatial-card__header", "data-campus-drag": true, "data-color": color, style: {
+                    padding: 'var(--oo-spacing-xs) var(--oo-spacing-sm)',
+                    borderBottom: '1px solid var(--oo-color-border)',
+                    fontSize: 'var(--oo-font-size-xs)',
+                    color: selected ? 'var(--oo-color-fg)' : 'var(--oo-color-muted)',
+                    background: selected ? 'var(--oo-color-active)' : 'var(--oo-color-surface)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    cursor: 'grab',
+                    userSelect: 'none',
+                    touchAction: 'none',
+                    flex: '0 0 auto',
+                }, children: [_jsxs("span", { title: title, style: { display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [icon ? _jsx("span", { className: "oo-spatial-card__icon", "aria-hidden": true, children: icon }) : null, _jsx("span", { className: "oo-spatial-card__title", style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: title })] }), _jsx("span", { onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                            e.stopPropagation();
+                            onClose();
+                        }, title: "Close", style: { cursor: 'pointer' }, children: NAMED_GLYPH.closePanel })] }), _jsx("div", { className: "oo-spatial-card__body", style: { flex: 1, overflow: 'auto', minHeight: 0 }, children: renderMount(mount) })] }));
+}

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

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

package/dist/ui/layout/SpatialLayout.js

@@ -0,0 +1,446 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import { CampusView } from '../campus/CampusView.js';
+import { CampusMappa } from '../campus/CampusMappa.js';
+import { SpatialCard } from './SpatialCard.js';
+import { Toolbar } from '../navigation/Toolbar.js';
+// Free-form positioning with three arrangement strategies:
+//
+//   cascade — staircase offsets per mount index (default)
+//   grid    — auto-near-square; n=4 → 2x2, n=9 → 3x3, n=5 → 2/2/1, etc.
+//   manual  — user-positioned (drag header to move, edges/corners resize).
+//             Bounds persisted in state.spatial.bounds[mount.key].
+//
+// First user drag while in cascade/grid snapshots every mount's current
+// bounds and switches to manual, so other mounts don't shift.
+//
+// SpatialLayout is now a mount-aware adapter over <CampusView>: it owns
+// the arrangement strategy, selection, toolbar, context menus, and
+// per-mount spatial commands. Pan/zoom/wheel/grid/drag live in Campus.
+const CARD_DEFAULT_W = 960;
+const CARD_DEFAULT_H = 768;
+const CASCADE_STEP = 36;
+const CASCADE_START = 40;
+const GRID_MARGIN = 16;
+const GRID_GAP = 16;
+// World half-extent for the canvas. Hardcoded here because SpatialLayout
+// doesn't take props from outside the layout registry; a future surface
+// option could lift this into state.spatial.maxDepth. ±8000 world pixels
+// is roughly 20× the default card size in each direction.
+const MAX_DEPTH = 8000;
+function computeInitialBounds(index, total, arrangement) {
+    if (arrangement === 'grid' && total > 0) {
+        const cols = Math.max(1, Math.floor(Math.sqrt(total)));
+        const col = index % cols;
+        const row = Math.floor(index / cols);
+        return {
+            x: GRID_MARGIN + col * (CARD_DEFAULT_W + GRID_GAP),
+            y: GRID_MARGIN + row * (CARD_DEFAULT_H + GRID_GAP),
+            w: CARD_DEFAULT_W,
+            h: CARD_DEFAULT_H,
+        };
+    }
+    return {
+        x: CASCADE_START + index * CASCADE_STEP,
+        y: CASCADE_START + index * CASCADE_STEP,
+        w: CARD_DEFAULT_W,
+        h: CARD_DEFAULT_H,
+    };
+}
+const DEFAULT_VIEWPORT = { scale: 1, panX: 0, panY: 0 };
+// Stable identity for the "no saved bounds" case. An inline `?? {}` would mint
+// a new object every render and defeat the bounds useMemo below.
+const EMPTY_BOUNDS = {};
+const ZOOM_STEP = 1.1;
+// CampusView node registry. Spatial mounts all render as the `card` type.
+const CARD_NODE_TYPES = { card: SpatialCard };
+export function SpatialLayout({ surface, mounts, state, setState, renderMount, onClose, onActivate, }) {
+    const scena = useScena();
+    // Background + per-card context menus.
+    const [bgMenu, setBgMenu] = useState(null);
+    const [cardMenu, setCardMenu] = useState(null);
+    const arrangement = state.spatial?.arrangement ?? 'cascade';
+    const savedBounds = state.spatial?.bounds ?? EMPTY_BOUNDS;
+    const selectedKey = state.spatial?.selectedKey;
+    const viewport = state.spatial?.viewport ?? DEFAULT_VIEWPORT;
+    const spatialRef = useRef({ arrangement, bounds: savedBounds, selectedKey, viewport });
+    spatialRef.current = { arrangement, bounds: savedBounds, selectedKey, viewport };
+    function applySpatial(patch) {
+        const next = { ...spatialRef.current, ...patch };
+        spatialRef.current = next;
+        setState({ spatial: next });
+    }
+    // CampusView is fully controlled; its onViewportChange routes here.
+    function onViewportChange(next) {
+        applySpatial({ viewport: next });
+    }
+    // Effective bounds: manual reads saved (with cascade fallback for fresh
+    // mounts); cascade/grid recompute every render so adding a mount restacks.
+    const effectiveBounds = useMemo(() => {
+        const map = {};
+        mounts.forEach((m, i) => {
+            if (arrangement === 'manual') {
+                map[m.key] = savedBounds[m.key] ?? computeInitialBounds(i, mounts.length, 'cascade');
+            }
+            else {
+                map[m.key] = computeInitialBounds(i, mounts.length, arrangement);
+            }
+        });
+        return map;
+    }, [mounts, arrangement, savedBounds]);
+    function setArrangement(next) {
+        if (next === 'manual') {
+            const snapshot = {};
+            for (const m of mounts)
+                snapshot[m.key] = effectiveBounds[m.key];
+            applySpatial({ arrangement: 'manual', bounds: snapshot });
+        }
+        else {
+            applySpatial({ arrangement: next, bounds: {} });
+        }
+    }
+    function commitBoundsForMount(key, next) {
+        // First drag/resize while in cascade/grid → snapshot ALL mounts so
+        // others don't shift when arrangement flips to manual.
+        if (spatialRef.current.arrangement !== 'manual') {
+            const snapshot = {};
+            for (const m of mounts)
+                snapshot[m.key] = effectiveBounds[m.key];
+            snapshot[key] = next;
+            applySpatial({ arrangement: 'manual', bounds: snapshot, selectedKey: key });
+            return;
+        }
+        applySpatial({
+            bounds: { ...spatialRef.current.bounds, [key]: next },
+            selectedKey: key,
+        });
+    }
+    function select(key) {
+        if (spatialRef.current.selectedKey === key)
+            return;
+        applySpatial({ selectedKey: key });
+        if (key)
+            onActivate(key);
+    }
+    // ----- Campus controller + spatial-only command handlers -----
+    const campusRef = useRef(null);
+    function fitToView() {
+        if (mounts.length === 0) {
+            campusRef.current?.fitToView();
+            return;
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const m of mounts) {
+            const b = effectiveBounds[m.key];
+            if (!b)
+                continue;
+            minX = Math.min(minX, b.x);
+            minY = Math.min(minY, b.y);
+            maxX = Math.max(maxX, b.x + b.w);
+            maxY = Math.max(maxY, b.y + b.h);
+        }
+        if (!isFinite(minX))
+            return;
+        campusRef.current?.fitToView({
+            x: minX, y: minY, w: maxX - minX, h: maxY - minY,
+        });
+    }
+    function centerOnSelected() {
+        const key = selectedKey;
+        if (!key)
+            return;
+        const b = effectiveBounds[key];
+        if (!b)
+            return;
+        campusRef.current?.centerOn(b.x + b.w / 2, b.y + b.h / 2);
+    }
+    function centerOnCard(key) {
+        const b = effectiveBounds[key];
+        if (!b)
+            return;
+        campusRef.current?.centerOn(b.x + b.w / 2, b.y + b.h / 2);
+    }
+    function resetBoundsForCard(key) {
+        const idx = mounts.findIndex((m) => m.key === key);
+        if (idx < 0)
+            return;
+        commitBoundsForMount(key, computeInitialBounds(idx, mounts.length, 'cascade'));
+    }
+    // ----- Spatial-only commands (registered at mount; auto-disposed). -----
+    // Imperative spatial actions can't be expressed as pure state writes
+    // (they need DOM measurements). Registering them inside this layout via
+    // handlersRef keeps closures current across renders.
+    const handlersRef = useRef({
+        fitToView,
+        resetViewport: () => campusRef.current?.resetViewport(),
+        centerOnSelected,
+        setArrangement,
+        centerOnCard,
+        resetBoundsForCard,
+    });
+    handlersRef.current = {
+        fitToView,
+        resetViewport: () => campusRef.current?.resetViewport(),
+        centerOnSelected,
+        setArrangement,
+        centerOnCard,
+        resetBoundsForCard,
+    };
+    useEffect(() => {
+        const subs = [
+            scena.commands.register({
+                id: 'surface.fitToView',
+                title: 'Fit to view',
+                description: 'Frame all cards',
+                icon: '⛶',
+                color: 'blue',
+                slots: ['surface:context'],
+                when: '$/surface/layoutId == "spatial"',
+                run: (ctx) => {
+                    handlersRef.current.fitToView();
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'surface.resetZoom',
+                title: 'Reset zoom',
+                icon: '↺',
+                slots: ['surface:context'],
+                when: '$/surface/layoutId == "spatial"',
+                run: (ctx) => {
+                    handlersRef.current.resetViewport();
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'surface.centerSelected',
+                title: 'Center on selected',
+                icon: '◎',
+                color: 'teal',
+                slots: ['surface:context'],
+                when: '$/surface/layoutId == "spatial" && $/surface/hasSelection == true',
+                run: (ctx) => {
+                    handlersRef.current.centerOnSelected();
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'surface.setArrangement.cascade',
+                title: 'Arrange: Cascade',
+                icon: '▤',
+                slots: ['surface:context'],
+                when: '$/surface/layoutId == "spatial" && $/surface/arrangement != "cascade"',
+                run: (ctx) => {
+                    handlersRef.current.setArrangement('cascade');
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'surface.setArrangement.grid',
+                title: 'Arrange: Grid',
+                icon: '▦',
+                color: 'violet',
+                slots: ['surface:context'],
+                when: '$/surface/layoutId == "spatial" && $/surface/arrangement != "grid"',
+                run: (ctx) => {
+                    handlersRef.current.setArrangement('grid');
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'surface.setArrangement.manual',
+                title: 'Arrange: Manual',
+                icon: '✥',
+                slots: ['surface:context'],
+                when: '$/surface/layoutId == "spatial" && $/surface/arrangement != "manual"',
+                run: (ctx) => {
+                    handlersRef.current.setArrangement('manual');
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'card.centerOn',
+                title: 'Center on this card',
+                icon: '◎',
+                color: 'teal',
+                slots: ['card:context'],
+                when: '$/surface/layoutId == "spatial"',
+                run: (ctx) => {
+                    const key = ctx.store.get('$/tab/key');
+                    if (!key)
+                        return;
+                    handlersRef.current.centerOnCard(key);
+                    ctx.host?.closeMenu();
+                },
+            }),
+            scena.commands.register({
+                id: 'card.resetBounds',
+                title: 'Reset bounds',
+                description: 'Recompute size + position',
+                icon: '↺',
+                slots: ['card:context'],
+                when: '$/surface/layoutId == "spatial"',
+                run: (ctx) => {
+                    const key = ctx.store.get('$/tab/key');
+                    if (!key)
+                        return;
+                    handlersRef.current.resetBoundsForCard(key);
+                    ctx.host?.closeMenu();
+                },
+            }),
+        ];
+        return () => {
+            for (const s of subs)
+                s.dispose();
+        };
+    }, [scena]);
+    // CampusView nodes — one `card` per mount, positioned at its effective
+    // bounds. Card-specific behavior (title/icon/close/body) rides on `data`;
+    // CampusView owns drag/resize/select/context generically.
+    const cardNodes = useMemo(() => mounts.map((mount) => ({
+        id: mount.key,
+        type: 'card',
+        bounds: effectiveBounds[mount.key],
+        selected: mount.key === selectedKey,
+        data: {
+            mount,
+            renderMount,
+            onClose: () => onClose(mount.key),
+        },
+    })), [mounts, effectiveBounds, selectedKey, renderMount, onClose]);
+    // Minimap nodes — colored by the registered component's opens.color
+    // so a "user" card lights up violet, a "file" blue, etc.
+    const mappaNodes = mounts.flatMap((m) => {
+        const b = effectiveBounds[m.key];
+        if (!b)
+            return [];
+        const def = scena.components.get(m.component.component);
+        const color = def?.opens?.color;
+        return [{ id: m.key, bounds: b, color, selected: m.key === selectedKey }];
+    });
+    function onContainerContextMenu(e) {
+        e.preventDefault();
+        setBgMenu({ x: e.clientX, y: e.clientY });
+    }
+    if (mounts.length === 0) {
+        return (_jsx("div", { style: { padding: 24, color: 'var(--oo-color-muted)' }, children: "Nothing open." }));
+    }
+    return (_jsxs("div", { className: "oo-layout oo-layout--spatial", style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs(Toolbar, { className: "oo-spatial-toolbar", children: [_jsxs("label", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [_jsx("span", { style: { color: 'var(--oo-color-muted)' }, children: "arrange:" }), _jsxs("select", { value: arrangement, onChange: (e) => setArrangement(e.target.value), children: [_jsx("option", { value: "cascade", children: "cascade" }), _jsx("option", { value: "grid", children: "grid" }), _jsx("option", { value: "manual", children: "manual" })] })] }), _jsx("button", { type: "button", onClick: () => campusRef.current?.zoomBy(1 / ZOOM_STEP), title: "Zoom out", "aria-label": "Zoom out", children: "\u2212" }), _jsx(ZoomPercentInput, { value: viewport.scale, onCommit: (scale) => campusRef.current?.zoomToScale(scale) }), _jsx("button", { type: "button", onClick: () => campusRef.current?.zoomBy(ZOOM_STEP), title: "Zoom in", "aria-label": "Zoom in", children: "+" }), _jsx("button", { type: "button", onClick: fitToView, title: "Fit all cards to viewport", children: "Fit" }), _jsx("button", { type: "button", onClick: () => campusRef.current?.resetViewport(), title: "Reset zoom + pan", children: "Reset" }), _jsxs("span", { style: {
+                            color: 'var(--oo-color-muted)',
+                            fontSize: 'var(--oo-font-size-xs)',
+                        }, children: ["drag header to move \u00B7 drag edges to resize \u00B7 ctrl+wheel zooms \u00B7 drag empty area to pan \u00B7 first drag locks to ", _jsx("em", { children: "manual" })] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, position: 'relative' }, children: _jsx(CampusView, { ref: campusRef, viewport: viewport, onViewportChange: onViewportChange, maxDepth: MAX_DEPTH, nodes: cardNodes, nodeTypes: CARD_NODE_TYPES, onNodeCommit: (key, next) => commitBoundsForMount(key, next), onNodeSelect: (key) => select(key), onNodeContextMenu: (key, e) => setCardMenu({ x: e.clientX, y: e.clientY, key }), onBackgroundClick: () => select(undefined), onBackgroundContextMenu: onContainerContextMenu, children: _jsx(CampusMappa, { nodes: mappaNodes, onJumpTo: (worldX, worldY) => campusRef.current?.centerOn(worldX, worldY) }) }) }), selectedKey ? (_jsx(SelectionFooter, { selectedKey: selectedKey, onCenter: () => centerOnCard(selectedKey), onReset: () => resetBoundsForCard(selectedKey), onClose: () => onClose(selectedKey), onDeselect: () => select(undefined) })) : null, bgMenu ? (_jsx(ContextMenu, { x: bgMenu.x, y: bgMenu.y, onClose: () => setBgMenu(null), spec: { query: { slot: 'surface:context' }, footerHints: true }, context: {
+                    '$/surface/name': surface,
+                    '$/surface/layoutId': 'spatial',
+                    '$/surface/mountCount': mounts.length,
+                    '$/surface/closedHistory': 0,
+                    '$/surface/arrangement': arrangement,
+                    '$/surface/hasSelection': Boolean(selectedKey),
+                } })) : null, cardMenu ? (_jsx(ContextMenu, { x: cardMenu.x, y: cardMenu.y, onClose: () => setCardMenu(null), spec: { query: { slot: 'card:context' }, footerHints: true }, context: {
+                    '$/surface/name': surface,
+                    '$/surface/layoutId': 'spatial',
+                    '$/surface/mountCount': mounts.length,
+                    '$/surface/closedHistory': 0,
+                    '$/surface/arrangement': arrangement,
+                    '$/tab/key': cardMenu.key,
+                    '$/tab/index': mounts.findIndex((m) => m.key === cardMenu.key),
+                    '$/tab/canSplit': false,
+                    '$/tab/canMove': false,
+                    '$/tab/isActive': cardMenu.key === selectedKey,
+                    '$/tab/isPinned': false,
+                    '$/group/tabCount': mounts.length,
+                } })) : null] }));
+}
+function SelectionFooter({ selectedKey, onCenter, onReset, onClose, onDeselect, }) {
+    return (_jsxs("div", { className: "oo-spatial-footer", role: "toolbar", "aria-label": "Selected card actions", style: {
+            position: 'absolute',
+            bottom: 16,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            padding: '6px 8px',
+            background: 'rgba(20, 20, 24, 0.78)',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            borderRadius: 9999,
+            color: '#fff',
+            fontSize: 'var(--oo-font-size-xs)',
+            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.32)',
+            pointerEvents: 'auto',
+            zIndex: 50,
+        }, onPointerDown: (e) => e.stopPropagation(), children: [_jsx("span", { style: {
+                    padding: '0 8px',
+                    color: 'rgba(255, 255, 255, 0.65)',
+                    fontFamily: 'var(--oo-font-mono)',
+                    maxWidth: 180,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, title: selectedKey, children: selectedKey }), _jsx(FooterButton, { icon: "\u25CE", label: "Center on this card", onClick: onCenter }), _jsx(FooterButton, { icon: "\u21BA", label: "Reset bounds", onClick: onReset }), _jsx(FooterButton, { icon: "\u2715", label: "Close", onClick: onClose, variant: "danger" }), _jsx(FooterButton, { icon: "\u2297", label: "Deselect", onClick: onDeselect })] }));
+}
+function FooterButton({ icon, label, onClick, variant, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, title: label, "aria-label": label, style: {
+            width: 28,
+            height: 28,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: 'none',
+            borderRadius: '50%',
+            background: 'rgba(255, 255, 255, 0.08)',
+            color: variant === 'danger' ? 'rgb(255, 130, 130)' : '#fff',
+            cursor: 'pointer',
+            font: 'inherit',
+            lineHeight: 1,
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.18)';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)';
+        }, children: icon }));
+}
+function ZoomPercentInput({ value, onCommit }) {
+    const percent = Math.round(value * 100);
+    const [draft, setDraft] = useState(`${percent}`);
+    const [editing, setEditing] = useState(false);
+    if (!editing && draft !== `${percent}`) {
+        setDraft(`${percent}`);
+    }
+    function commit() {
+        const n = parseInt(draft, 10);
+        if (Number.isFinite(n) && n > 0) {
+            onCommit(n / 100);
+        }
+        else {
+            setDraft(`${percent}`);
+        }
+        setEditing(false);
+    }
+    return (_jsx("input", { type: "text", inputMode: "numeric", value: editing ? draft : `${percent}%`, onFocus: (e) => {
+            setEditing(true);
+            setDraft(`${percent}`);
+            requestAnimationFrame(() => e.target.select?.());
+        }, onChange: (e) => setDraft(e.target.value.replace(/[^\d]/g, '')), onBlur: commit, onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                e.target.blur();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                setDraft(`${percent}`);
+                setEditing(false);
+                e.target.blur();
+            }
+        }, title: "Zoom percent", "aria-label": "Zoom percent", style: {
+            width: 56,
+            textAlign: 'center',
+            font: 'inherit',
+            padding: '2px 4px',
+            border: '1px solid var(--oo-color-border)',
+            borderRadius: 'var(--oo-radius-sm, 4px)',
+            background: 'var(--oo-color-canvas)',
+            color: 'var(--oo-color-fg)',
+        } }));
+}

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

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