horizon-layout 1.0.0

package/dist/HorizonLayout.svelte.d.ts

@@ -0,0 +1,49 @@
+import { type Snippet } from 'svelte';
+import type { Id, KeyboardControls, LayoutConfig, View } from './types.ts';
+import { SvelteMap } from 'svelte/reactivity';
+type $$ComponentProps = {
+    /** The layout configuration. Bind this to keep it in sync with user interactions. */
+    config: LayoutConfig;
+    /** Map from view Id to its View descriptor. */
+    views: SvelteMap<Id, View>;
+    /** Snippets rendered in every tab-group's toolbar (e.g. a maximise button). */
+    tabgroupControls?: Snippet<[Id]>[];
+    /** Prevent the user from dragging split dividers. */
+    disableResizeSplits?: boolean;
+    /** Prevent drag-and-drop tab rearrangement. */
+    disableDragAndDrop?: boolean;
+    /** Show the current split ratio as a floating label while resizing. */
+    showSplitRatio?: boolean;
+    /** Minimum allowed width as a fraction of the split container. */
+    minWidthRatio?: number;
+    /** Minimum allowed height as a fraction of the split container. */
+    minHeightRatio?: number;
+    /** Maximum nesting depth for splits (prevents infinite subdivision). */
+    maxDepth?: number;
+    /** Hide the tab bar entirely (useful when every group has exactly one tab). */
+    hideTabBar?: boolean;
+    /** Override the default keyboard shortcuts for splits and tab groups. */
+    keyboardControls?: KeyboardControls;
+    /** Format a split ratio as a display string. Default: "50.00%". */
+    formatRatio?: (ratio: number) => string;
+    /** Format a split ratio as a number for aria-valuenow. Default: 50.00. */
+    formatRatioForAria?: (ratio: number) => number;
+    /** Called when a popout window is closed by the user. */
+    onPopoutClose?: (viewId: Id) => void;
+    /**
+     * Called when the browser blocks a popout window after the fallback timeout.
+     * If not provided, the blocked tab is automatically moved into the main layout.
+     */
+    onPopoutBlocked?: (id: Id) => void;
+    /** Root CSS class applied to the layout element and used as a BEM prefix. */
+    baseClass?: string;
+    /**
+     * Skip config validation on every update. Set this when you have already
+     * validated the config yourself (e.g. with validateConfig) and want to avoid
+     * the redundant check.
+     */
+    skipValidation?: boolean;
+};
+declare const HorizonLayout: import("svelte").Component<$$ComponentProps, {}, "config">;
+type HorizonLayout = ReturnType<typeof HorizonLayout>;
+export default HorizonLayout;

package/dist/LayoutNode.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type {
+		Id,
+		KeyboardControls,
+		SplitConfig,
+		View,
+		TabGroupConfig,
+		NodeConfig
+	} from './types.js';
+	import { nodeConfigType } from './utils.js';
+	import HorizonSplit from './Split.svelte';
+	import HorizonTabGroup from './TabGroup.svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import type { DropTarget } from './internal-types.js';
+
+	let {
+		config = $bindable(),
+		views,
+		tabgroupControls,
+		disableResizeSplits,
+		disableDragAndDrop,
+		isDragging,
+		onStartTabDrag,
+		onHoverEnter,
+		onHoverExit,
+		canDrop,
+		remainingDepth,
+		showSplitRatio,
+		minWidthRatio,
+		minHeightRatio,
+		hideTabBar,
+		keyboardControls,
+		formatRatio,
+		formatRatioForAria,
+		baseClass
+	}: {
+		config: NodeConfig;
+		views: SvelteMap<Id, View>;
+		tabgroupControls: Snippet<[Id]>[];
+		disableResizeSplits: boolean;
+		disableDragAndDrop: boolean;
+		onStartTabDrag: (event: DragEvent, tabGroup: TabGroupConfig, tabId: Id) => void;
+		onHoverEnter: (tabGroup: TabGroupConfig, target: DropTarget) => void;
+		onHoverExit: (tabGroup: TabGroupConfig) => void;
+		canDrop: (tabGroup: TabGroupConfig, target: DropTarget) => boolean;
+		isDragging: boolean;
+		remainingDepth: number;
+		showSplitRatio: boolean;
+		minWidthRatio: number;
+		minHeightRatio: number;
+		hideTabBar: boolean;
+		keyboardControls: KeyboardControls;
+		formatRatio: (ratio: number) => string;
+		formatRatioForAria: (ratio: number) => number;
+		baseClass: string;
+	} = $props();
+</script>
+
+{#if nodeConfigType(config) === 'split'}
+	<HorizonSplit
+		bind:config={config as SplitConfig}
+		{views}
+		{tabgroupControls}
+		{disableResizeSplits}
+		{disableDragAndDrop}
+		{isDragging}
+		{onStartTabDrag}
+		{onHoverEnter}
+		{onHoverExit}
+		{canDrop}
+		remainingDepth={remainingDepth - 1}
+		{showSplitRatio}
+		{minWidthRatio}
+		{minHeightRatio}
+		{hideTabBar}
+		{keyboardControls}
+		{formatRatio}
+		{formatRatioForAria}
+		{baseClass}
+	></HorizonSplit>
+{:else}
+	<HorizonTabGroup
+		bind:config={config as TabGroupConfig}
+		{views}
+		disableDrag={disableDragAndDrop}
+		{isDragging}
+		{onStartTabDrag}
+		{onHoverEnter}
+		{onHoverExit}
+		{canDrop}
+		{remainingDepth}
+		{hideTabBar}
+		controls={tabgroupControls}
+		keyboardControls={keyboardControls.tabGroupControls ?? []}
+		baseClass={`${baseClass}-tabgroup`}
+	></HorizonTabGroup>
+{/if}

package/dist/LayoutNode.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { Id, KeyboardControls, View, TabGroupConfig, NodeConfig } from './types.ts';
+import { SvelteMap } from 'svelte/reactivity';
+import type { DropTarget } from './internal-types.ts';
+type $$ComponentProps = {
+    config: NodeConfig;
+    views: SvelteMap<Id, View>;
+    tabgroupControls: Snippet<[Id]>[];
+    disableResizeSplits: boolean;
+    disableDragAndDrop: boolean;
+    onStartTabDrag: (event: DragEvent, tabGroup: TabGroupConfig, tabId: Id) => void;
+    onHoverEnter: (tabGroup: TabGroupConfig, target: DropTarget) => void;
+    onHoverExit: (tabGroup: TabGroupConfig) => void;
+    canDrop: (tabGroup: TabGroupConfig, target: DropTarget) => boolean;
+    isDragging: boolean;
+    remainingDepth: number;
+    showSplitRatio: boolean;
+    minWidthRatio: number;
+    minHeightRatio: number;
+    hideTabBar: boolean;
+    keyboardControls: KeyboardControls;
+    formatRatio: (ratio: number) => string;
+    formatRatioForAria: (ratio: number) => number;
+    baseClass: string;
+};
+declare const LayoutNode: import("svelte").Component<$$ComponentProps, {}, "config">;
+type LayoutNode = ReturnType<typeof LayoutNode>;
+export default LayoutNode;

package/dist/PopoutContent.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { View } from './types.js';
+
+	let {
+		popout,
+		title,
+		view,
+		baseClass
+	}: {
+		popout: Window;
+		title: string;
+		view: View;
+		baseClass: string;
+	} = $props();
+
+	$effect(() => {
+		popout.document.title = title;
+	});
+</script>
+
+<main class="{baseClass} {baseClass}__popout">
+	<div class="{baseClass}__content">
+		{@render view.snippet()}
+	</div>
+</main>

package/dist/PopoutContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { View } from './types.ts';
+type $$ComponentProps = {
+    popout: Window;
+    title: string;
+    view: View;
+    baseClass: string;
+};
+declare const PopoutContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopoutContent = ReturnType<typeof PopoutContent>;
+export default PopoutContent;

package/dist/Split.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import type { SvelteMap } from 'svelte/reactivity';
+	import type { View, Id, SplitConfig, KeyboardControls, TabGroupConfig } from './types.js';
+	import { getModifier } from './internal-utils.js';
+	import HorizonLayoutNode from './LayoutNode.svelte';
+	import { type Snippet } from 'svelte';
+	import type { DropTarget } from './internal-types.js';
+
+	let {
+		config = $bindable(),
+		views,
+		tabgroupControls,
+		disableResizeSplits,
+		disableDragAndDrop,
+		isDragging,
+		onStartTabDrag,
+		onHoverEnter,
+		onHoverExit,
+		canDrop,
+		remainingDepth,
+		showSplitRatio,
+		minWidthRatio,
+		minHeightRatio,
+		hideTabBar,
+		keyboardControls,
+		formatRatio,
+		formatRatioForAria,
+		baseClass
+	}: {
+		config: SplitConfig;
+		views: SvelteMap<Id, View>;
+		tabgroupControls: Snippet<[Id]>[];
+		disableResizeSplits: boolean;
+		disableDragAndDrop: boolean;
+		isDragging: boolean;
+		onStartTabDrag: (event: DragEvent, tabGroup: TabGroupConfig, tabId: Id) => void;
+		onHoverEnter: (tabGroup: TabGroupConfig, target: DropTarget) => void;
+		onHoverExit: (tabGroup: TabGroupConfig) => void;
+		canDrop: (tabGroup: TabGroupConfig, target: DropTarget) => boolean;
+		remainingDepth: number;
+		showSplitRatio: boolean;
+		minWidthRatio: number;
+		minHeightRatio: number;
+		hideTabBar: boolean;
+		keyboardControls: KeyboardControls;
+		formatRatio: (ratio: number) => string;
+		formatRatioForAria: (ratio: number) => number;
+		baseClass: string;
+	} = $props();
+
+	let splitContainer = $state<HTMLElement | null>(null);
+
+	let activeResizer = $state<number | null>(null);
+
+	let isHorizontal = $derived(config.direction === 'horizontal');
+	let minRatio = $derived(isHorizontal ? minWidthRatio : minHeightRatio);
+
+	let posConstraints = $derived(
+		config.splitPoints.map((_, i) => ({
+			min: (config.splitPoints[i - 1] ?? 0) + minRatio,
+			max: (config.splitPoints[i + 1] ?? 1) - minRatio
+		}))
+	);
+
+	let splitRatioStyles = $derived(
+		config.splitPoints.map((_, i) => {
+			const ratio = config.splitPoints[i] ?? 0;
+			return isHorizontal ? `left: ${ratio * 100}%;` : `top: ${ratio * 100}%;`;
+		})
+	);
+
+	function startResize(event: PointerEvent, index: number) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disableResizeSplits) return;
+
+		const target = event.currentTarget as HTMLElement;
+		target.setPointerCapture(event.pointerId);
+		activeResizer = index;
+
+		const rect = splitContainer!.getBoundingClientRect();
+
+		function move(event: PointerEvent) {
+			const ratio = isHorizontal
+				? (event.clientX - rect.left) / rect.width
+				: (event.clientY - rect.top) / rect.height;
+			const { min, max } = posConstraints[index]!;
+			const clamped = Number(Math.min(Math.max(ratio, min), max).toFixed(4));
+			if (clamped !== config.splitPoints[index]) config.splitPoints[index] = clamped;
+		}
+
+		function stop(event: PointerEvent) {
+			activeResizer = null;
+			if (target.hasPointerCapture(event.pointerId)) {
+				target.releasePointerCapture(event.pointerId);
+			}
+			target.removeEventListener('pointermove', move);
+			target.removeEventListener('pointerup', stop);
+			target.removeEventListener('pointercancel', stop);
+		}
+
+		target.addEventListener('pointermove', move);
+		target.addEventListener('pointerup', stop);
+		target.addEventListener('pointercancel', stop);
+	}
+
+	function handleKeyDown(event: KeyboardEvent, index: number) {
+		const modifier = getModifier(event);
+		for (const control of keyboardControls.splitControls ?? []) {
+			for (const shortcut of control.shortcuts) {
+				if (modifier === (shortcut.modifier ?? null) && event.key === shortcut.key) {
+					event.preventDefault();
+					event.stopPropagation();
+					control.action({ config, index }, event);
+					return;
+				}
+			}
+		}
+	}
+</script>
+
+<div
+	class="{baseClass}-split {baseClass}-split--{config.direction}"
+	style="display: flex !important;"
+	bind:this={splitContainer}
+>
+	{#each config.views as view, i (view)}
+		{@const splitPoint = config.splitPoints[i]}
+		<div
+			class="{baseClass}-split__pane {baseClass}-split__pane--{config.direction}"
+			style={`flex: ${(splitPoint ?? 1) - (config.splitPoints[i - 1] ?? 0)} 1 0 !important;`}
+		>
+			<HorizonLayoutNode
+				bind:config={config.views[i]!}
+				{views}
+				{tabgroupControls}
+				{disableResizeSplits}
+				{disableDragAndDrop}
+				{onStartTabDrag}
+				{onHoverEnter}
+				{onHoverExit}
+				{canDrop}
+				{isDragging}
+				{remainingDepth}
+				{showSplitRatio}
+				{minWidthRatio}
+				{minHeightRatio}
+				{hideTabBar}
+				{keyboardControls}
+				{formatRatio}
+				{formatRatioForAria}
+				{baseClass}
+			></HorizonLayoutNode>
+		</div>
+
+		{#if i < config.splitPoints.length}
+			{@const isActive = activeResizer === i}
+			{@const constraints = posConstraints[i]!}
+			<div
+				class="{baseClass}-split__resizer {baseClass}-split__resizer--{config.direction}{isActive
+					? ` ${baseClass}-split__resizer--active`
+					: ''}"
+			>
+				<span
+					class="{baseClass}-split__resizer-handle {baseClass}-split__resizer-handle--{config.direction}{isActive
+						? ` ${baseClass}-split__resizer-handle--active`
+						: ''}"
+					role="slider"
+					tabindex={0}
+					aria-label="Resize pane {i + 1}"
+					aria-orientation={config.direction}
+					aria-valuemin={formatRatioForAria(constraints.min)}
+					aria-valuemax={formatRatioForAria(constraints.max)}
+					aria-valuenow={formatRatioForAria(splitPoint!)}
+					aria-valuetext={formatRatio(splitPoint!)}
+					onpointerdown={(event) => startResize(event, i)}
+					onfocus={() => {
+						if (!disableResizeSplits) activeResizer = i;
+					}}
+					onblur={() => (activeResizer = null)}
+					onkeydown={(event) => handleKeyDown(event, i)}
+				></span>
+			</div>
+
+			{#if showSplitRatio}
+				<div
+					class="{baseClass}-split__ratio {baseClass}-split__ratio--{config.direction}{isActive
+						? ` ${baseClass}-split__ratio--active`
+						: ''}"
+					style={splitRatioStyles[i]}
+				>
+					{formatRatio(splitPoint!)}
+				</div>
+			{/if}
+		{/if}
+	{/each}
+</div>

package/dist/Split.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { SvelteMap } from 'svelte/reactivity';
+import type { View, Id, SplitConfig, KeyboardControls, TabGroupConfig } from './types.ts';
+import { type Snippet } from 'svelte';
+import type { DropTarget } from './internal-types.ts';
+type $$ComponentProps = {
+    config: SplitConfig;
+    views: SvelteMap<Id, View>;
+    tabgroupControls: Snippet<[Id]>[];
+    disableResizeSplits: boolean;
+    disableDragAndDrop: boolean;
+    isDragging: boolean;
+    onStartTabDrag: (event: DragEvent, tabGroup: TabGroupConfig, tabId: Id) => void;
+    onHoverEnter: (tabGroup: TabGroupConfig, target: DropTarget) => void;
+    onHoverExit: (tabGroup: TabGroupConfig) => void;
+    canDrop: (tabGroup: TabGroupConfig, target: DropTarget) => boolean;
+    remainingDepth: number;
+    showSplitRatio: boolean;
+    minWidthRatio: number;
+    minHeightRatio: number;
+    hideTabBar: boolean;
+    keyboardControls: KeyboardControls;
+    formatRatio: (ratio: number) => string;
+    formatRatioForAria: (ratio: number) => number;
+    baseClass: string;
+};
+declare const Split: import("svelte").Component<$$ComponentProps, {}, "config">;
+type Split = ReturnType<typeof Split>;
+export default Split;

package/dist/TabGroup.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+	import type { Id, KeyboardControl, TabGroupConfig, View } from './types.js';
+	import { onDestroy, untrack, type Snippet } from 'svelte';
+	import { getModifier } from './internal-utils.js';
+	import type { SvelteMap } from 'svelte/reactivity';
+	import type { DropSide, DropTarget } from './internal-types.js';
+
+	let {
+		config = $bindable(),
+		views,
+		disableDrag,
+		isDragging,
+		onStartTabDrag,
+		onHoverEnter,
+		onHoverExit,
+		canDrop,
+		remainingDepth,
+		hideTabBar,
+		controls,
+		keyboardControls,
+		baseClass
+	}: {
+		config: TabGroupConfig;
+		views: SvelteMap<Id, View>;
+		disableDrag: boolean;
+		isDragging: boolean;
+		onStartTabDrag: (event: DragEvent, tabGroup: TabGroupConfig, tabId: Id) => void;
+		onHoverEnter: (tabGroup: TabGroupConfig, target: DropTarget) => void;
+		onHoverExit: (tabGroup: TabGroupConfig) => void;
+		canDrop: (tabGroup: TabGroupConfig, target: DropTarget) => boolean;
+		remainingDepth: number;
+		hideTabBar: boolean;
+		controls: Snippet<[Id]>[];
+		keyboardControls: KeyboardControl<TabGroupConfig>[];
+		baseClass: string;
+	} = $props();
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const modifier = getModifier(event);
+		for (const control of keyboardControls) {
+			for (const shortcut of control.shortcuts) {
+				if (modifier === (shortcut.modifier ?? null) && event.key === shortcut.key) {
+					event.preventDefault();
+					event.stopPropagation();
+					control.action(config, event);
+					return;
+				}
+			}
+		}
+	}
+
+	function startTabDrag(event: DragEvent, tabId: Id) {
+		if (!event.dataTransfer) return;
+		event.stopPropagation();
+		event.dataTransfer.dropEffect = 'move';
+		const currentTarget = event.currentTarget as HTMLElement;
+		event.dataTransfer.setDragImage(
+			currentTarget,
+			currentTarget.offsetWidth / 2,
+			currentTarget.offsetHeight / 2
+		);
+		onStartTabDrag(event, config, tabId);
+	}
+
+	// Track which target (if any) we are currently hovering over and which config
+	// object we reported to the parent, so we can reliably fire the exit callback
+	// even if the component's config reference changes mid-drag.
+	let hoverData: {
+		target: DropTarget;
+		reportedConfig: TabGroupConfig;
+	} | null = $state(null);
+
+	function handleHoverExit() {
+		if (!hoverData) return;
+		const reported = hoverData.reportedConfig;
+		hoverData = null;
+		onHoverExit(reported);
+	}
+
+	function handleHoverEnter(target: DropTarget) {
+		if (!isDragging || !canDrop(config, target)) {
+			handleHoverExit();
+			return;
+		}
+
+		if (
+			hoverData &&
+			hoverData.reportedConfig === config &&
+			hoverData.target.side === target.side &&
+			hoverData.target.tabIndex === target.tabIndex
+		) {
+			return;
+		}
+
+		handleHoverExit();
+		hoverData = { target, reportedConfig: config };
+		onHoverEnter(config, target);
+	}
+
+	function handleDragOver(event: DragEvent, target: DropTarget) {
+		event.preventDefault();
+		event.stopPropagation();
+		event.dataTransfer!.dropEffect = 'move';
+		handleHoverEnter(target);
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		handleHoverExit();
+	}
+
+	// Re-emit hover events if config or drag state changes while hovering,
+	// so the parent always has up-to-date references.
+	$effect(() => {
+		void config;
+		void isDragging;
+		void remainingDepth;
+		if (!isDragging) {
+			handleHoverExit();
+			return;
+		}
+		const target = untrack(() => hoverData?.target);
+		if (target) handleHoverEnter(target);
+	});
+
+	onDestroy(handleHoverExit);
+</script>
+
+<section class={baseClass}>
+	{#if !hideTabBar}
+		<div class="{baseClass}__tab-bar">
+			<!-- Tab list - keyboard navigation is handled on the list container. -->
+			<div role="tablist" tabindex={0} class="{baseClass}__tabs" onkeydown={handleKeyDown}>
+				{#each config.tabs as tabId, index (tabId)}
+					{@const tab = views.get(tabId)}
+					<div
+						class="{baseClass}__tab-drop-hint {baseClass}__tab-drop-hint--{index}{hoverData?.target
+							.tabIndex === index
+							? ` ${baseClass}__tab-drop-hint--hover`
+							: ''}"
+						aria-hidden="true"
+					></div>
+					{#if isDragging}
+						<div
+							class="{baseClass}__tab-drop-zone {baseClass}__tab-drop-zone--{index}"
+							aria-hidden="true"
+							ondragenter={(event) => handleDragOver(event, { tabIndex: index })}
+							ondragover={(event) => handleDragOver(event, { tabIndex: index })}
+							ondragleave={handleDragLeave}
+						></div>
+					{/if}
+					<div
+						role="tab"
+						class="{baseClass}__tab{index === config.activeTabIndex
+							? ` ${baseClass}__tab--active`
+							: ''}"
+						tabindex={-1}
+						draggable={!disableDrag}
+						ondragstart={(event) => startTabDrag(event, tabId)}
+						onclick={() => (config.activeTabIndex = index)}
+						onkeydown={null}
+					>
+						<span class="{baseClass}__tab-title">{tab?.title}</span>
+						<div class="{baseClass}__tab-controls">
+							{#each tab?.tabControls ?? [] as control (control)}
+								<span class="{baseClass}__tab-control">
+									{@render control(tabId)}
+								</span>
+							{/each}
+						</div>
+					</div>
+				{/each}
+				<div
+					class="{baseClass}__tab-drop-hint {baseClass}__tab-drop-hint--{config.tabs
+						.length} {baseClass}__tab-drop-hint--end{hoverData?.target.tabIndex ===
+					config.tabs.length
+						? ` ${baseClass}__tab-drop-hint--hover`
+						: ''}"
+					aria-hidden="true"
+				></div>
+				{#if isDragging}
+					<div
+						class="{baseClass}__tab-drop-zone {baseClass}__tab-drop-zone--{config.tabs
+							.length} {baseClass}__tab-drop-zone--end"
+						aria-hidden="true"
+						ondragenter={(event) => handleDragOver(event, { tabIndex: config.tabs.length })}
+						ondragover={(event) => handleDragOver(event, { tabIndex: config.tabs.length })}
+						ondragleave={handleDragLeave}
+					></div>
+				{/if}
+			</div>
+
+			<div class="{baseClass}__controls">
+				{#each controls as control (control)}
+					<div class="{baseClass}__control">
+						{@render control(config.tabs[config.activeTabIndex]!)}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div class="{baseClass}__body">
+		<div class="{baseClass}__content">
+			{@render views.get(config.tabs[config.activeTabIndex]!)?.snippet()}
+		</div>
+	</div>
+
+	{#if isDragging}
+		<div class="{baseClass}__drop-zones">
+			{#each ['top', 'right', 'bottom', 'left'] as side (side)}
+				<div
+					class="{baseClass}__drop-zone {baseClass}__drop-zone--{side}"
+					role="region"
+					ondragenter={(event) => handleDragOver(event, { side: side as DropSide })}
+					ondragover={(event) => handleDragOver(event, { side: side as DropSide })}
+					ondragleave={handleDragLeave}
+				></div>
+			{/each}
+		</div>
+		{#if hoverData?.target.side}
+			<div class="{baseClass}__drop-hint {baseClass}__drop-hint--{hoverData.target.side}"></div>
+		{/if}
+	{/if}
+</section>

package/dist/TabGroup.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Id, KeyboardControl, TabGroupConfig, View } from './types.ts';
+import { type Snippet } from 'svelte';
+import type { SvelteMap } from 'svelte/reactivity';
+import type { DropTarget } from './internal-types.ts';
+type $$ComponentProps = {
+    config: TabGroupConfig;
+    views: SvelteMap<Id, View>;
+    disableDrag: boolean;
+    isDragging: boolean;
+    onStartTabDrag: (event: DragEvent, tabGroup: TabGroupConfig, tabId: Id) => void;
+    onHoverEnter: (tabGroup: TabGroupConfig, target: DropTarget) => void;
+    onHoverExit: (tabGroup: TabGroupConfig) => void;
+    canDrop: (tabGroup: TabGroupConfig, target: DropTarget) => boolean;
+    remainingDepth: number;
+    hideTabBar: boolean;
+    controls: Snippet<[Id]>[];
+    keyboardControls: KeyboardControl<TabGroupConfig>[];
+    baseClass: string;
+};
+declare const TabGroup: import("svelte").Component<$$ComponentProps, {}, "config">;
+type TabGroup = ReturnType<typeof TabGroup>;
+export default TabGroup;