/** * SvDockManager - a full docking manager built on . It adds the * three "pro" features a tiled layout alone does not have: * * - Floating / pop-out windows: drag a tab out of the dock (or hit the float * button) to pop it into a movable, resizable window; drag it back to redock. * - Tab reordering: drag a tab along its own strip to reorder it. * - Pinning / auto-hide: collapse a panel to an edge strip; a fly-out reveals * it on hover, and "pin" docks it back. * * The docked area is an in "manager mode" (it delegates every * gesture here); floating windows are each a small too. The * whole workspace is the serializable `DockManagerState` from `dock-manager-model`. * * Build the initial workspace with the base `dockGroup`/`dockTabs`/`dockPane` * helpers: * * let workspace = $state({ * main: dockGroup('row', [dockTabs([dockPane('a','A')]), dockTabs([dockPane('b','B')])]), * floating: [], autoHide: [], * }) * {#snippet pane(p)} ... {/snippet} */ import { type Snippet } from 'svelte'; import type { DockPane } from './dock-model'; import { type DockManagerState, type DockSide } from './dock-manager-model'; /** Imperative handle exposed via `onReady`. */ export type DockManagerApi = { getState: () => DockManagerState; setState: (s: DockManagerState) => void; float: (paneId: string) => void; popout: (paneId: string) => void; autoHide: (paneId: string) => void; maximize: (tabsId: string) => void; close: (paneId: string) => void; focus: (paneId: string) => void; }; /** Granular lifecycle events (in addition to `onChange`). */ export type DockEvent = { type: 'activePane'; paneId: string; tabsId: string; } | { type: 'close'; paneId: string; } | { type: 'float'; paneId: string; } | { type: 'popout'; paneId: string; } | { type: 'autoHide'; paneId: string; side: DockSide; } | { type: 'pin'; paneId: string; } | { type: 'maximize'; tabsId: string; maximized: boolean; } | { type: 'window'; windowId: string; action: 'minimize' | 'maximize' | 'close' | 'autoHide'; } | { type: 'focus'; paneId: string; }; type Props = { /** The whole workspace: tiled `main` + `floating` windows + `autoHide` edges. Bindable. */ workspace: DockManagerState; /** Renders each pane's content, keyed off the `DockPane`. */ pane: Snippet<[DockPane]>; /** Notified after any change. */ onChange?: (workspace: DockManagerState) => void; /** Granular lifecycle events (activePane / close / float / popout / ...). */ onEvent?: (event: DockEvent) => void; /** Minimum pane size in px along a split. Default 80. */ minSize?: number; /** Allow dragging tabs to reorder them within a strip. Default `true`. */ reorderEnabled?: boolean; /** Which side of each panel its tab strip sits on. Default `'top'`. */ headerPosition?: 'top' | 'bottom' | 'left' | 'right'; /** Keep inactive tabs mounted (hidden) so their content state persists. * Default `false` (only the active tab renders). */ keepAlive?: boolean; /** Hide the tab button on a single-pane leaf (no redundant title bar; the panel * actions still show). Applies to the docked area, floating windows, and fly-outs. */ hideSingleTab?: boolean; /** Offer the "pop out to a new browser window" panel action. Default `false` - * most apps only need in-app floating windows, so the OS pop-out stays hidden * unless you opt in. The `popout()` API still works regardless. */ allowPopout?: boolean; /** Locked / split mode: a fixed set of resizable panes. Tabs can't be dragged * (no reorder / float / dock) and the panel action buttons are hidden - only * splitter resize + tab switching remain. Turns the manager into a plain * split-view workspace. Default `false`. */ locked?: boolean; /** Receive the imperative API once, on mount. */ onReady?: (api: DockManagerApi) => void; }; declare const SvDockManager: import("svelte").Component; type SvDockManager = ReturnType; export default SvDockManager;