@deepseek-insight/container-base 0.0.0-stage → 0.1.0

package/dist/components/PanelsZoom.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	/**
+	 * PanelsZoom — the floor's zoom frame (Panel Floor W3 task 3.2,
+	 * ADR-0006 R9; OCI PanelsZoom port; container-base W4, ADR-0062).
+	 *
+	 * transform: scale(zoom) does NOT change layout width — scrollWidth
+	 * ignores transforms — so a scaled-down row that visually fits still
+	 * reports its unscaled width and the browser draws a phantom
+	 * horizontal scrollbar. The fix is a two-layer frame:
+	 *
+	 *   1. THIS component's viewport div carries the scrollable overflow
+	 *      and the grey workspace paint.
+	 *   2. The zoom-frame div inside it carries the LAYOUT width, set in
+	 *      JS to `row.scrollWidth × zoom` — the visual truth at every
+	 *      zoom. Layout width is what scrolling measures, so the
+	 *      scrollbar appears iff the scaled row truly overflows.
+	 *   3. The row inside the frame carries scale(zoom), origin
+	 *      top-left, width max-content (so it measures its natural
+	 *      width), and a counter-scaled height (100/zoom % — a
+	 *      scaled-down row still fills the frame vertically).
+	 *
+	 * The measurement effect re-runs on a GEOMETRY FINGERPRINT — the
+	 * string of all panel widths + count — because scrollWidth itself is
+	 * not reactive; the fingerprint is.
+	 *
+	 * Presentational + mechanical only: zoom, panels, and the selected
+	 * panel's id arrive as props (the id + the floor's id sequence drive
+	 * the selection-follow — selection change or reshuffle — the one
+	 * scroll this component writes itself); the row's children arrive as
+	 * a snippet.
+	 */
+	import ResizeGutter from './ResizeGutter.svelte';
+
+	let {
+		zoom = 1,
+		panels,
+		railWidth = null,
+		selectedPanelId = null,
+		children
+	}: {
+		/** Floor zoom multiplier (clamped by the consumer's prefs — one clamp site). */
+		zoom?: number;
+		/** Open panels — the geometry fingerprint source (widths + count)
+		 *  and the reorder fingerprint source (the id sequence). */
+		panels: Array<{ id: string; width: number }>;
+		/** Leading sticky-column width (px) — the embedded rail column;
+		 *  null/undefined = no rail column.
+		 *  RIDES THE FINGERPRINT (OCI `leading ? railWidth : ''`): mounting,
+		 *  unmounting, or resizing the rail changes row.scrollWidth, and
+		 *  scrollWidth itself is not reactive — the fingerprint is. */
+		railWidth?: number | null;
+		/** The focused panel's id — the selection-follow target: when it
+		 *  changes, a column the viewport cannot see is scrolled into view
+		 *  (the floor can be several viewports wide; the selection ring
+		 *  must never sit off-screen behind the scroll edge). */
+		selectedPanelId?: string | null;
+		/** Snippet: one rendered child per panel. */
+		children: import('svelte').Snippet;
+	} = $props();
+
+	// ResizeGutter is re-exported for hosts that compose the row the way
+	// the OCI floor does; the gutter itself stays a separate public face.
+	void ResizeGutter;
+
+	/** Scroll viewport (overflow-x lives here, grey workspace paint). */
+	let viewport = $state<HTMLDivElement | undefined>(undefined);
+	/** Zoom-frame div — JS-measured layout width lives here. */
+	let frame = $state<HTMLDivElement | undefined>(undefined);
+	/** Row div — transform-scaled, natural-width content. */
+	let row = $state<HTMLDivElement | undefined>(undefined);
+
+	/**
+	 * Geometry fingerprint: every panel width + the count + the leading
+	 * rail column's width (empty when absent — OCI `leading ? railWidth :
+	 * ''`). Any width change, add, remove, or rail mount/unmount/resize
+	 * changes the string and re-runs the measure effect below.
+	 * (scrollWidth is not reactive; the fingerprint is.)
+	 */
+	const geometryFingerprint = $derived(
+		panels.map((p) => p.width).join(',') + `#${panels.length}` + `|${railWidth ?? ''}`
+	);
+
+	/**
+	 * Reorder fingerprint: the panel-ID SEQUENCE. A move reshuffles the
+	 * columns — it changes this string while leaving the geometry
+	 * fingerprint untouched, and the reshuffle can push the focused
+	 * column past a viewport edge. Width-only edits never change it, so
+	 * a gutter drag or zoom still never steals the scroll.
+	 */
+	const orderFingerprint = $derived(panels.map((p) => p.id).join(','));
+
+	$effect(() => {
+		// The row's transform reads --zoom (a var, so the counter-scaled
+		// height calc can share it); keep it in lockstep with the prop.
+		if (row) row.style.setProperty('--zoom', String(zoom));
+	});
+
+	$effect(() => {
+		// Depend on the fingerprint (and zoom) — the re-measure triggers.
+		void geometryFingerprint;
+		void zoom;
+		if (!frame || !row) return;
+		// Measure in a rAF so the browser has laid the (possibly new)
+		// geometry out before scrollWidth is read. The frame carries BOTH
+		// layout dimensions (width AND height scaled) — a 1px height stub
+		// let overflow-y:hidden clip the row's real content under the
+		// viewport, breaking pointer events on panel children.
+		requestAnimationFrame(() => {
+			if (!frame || !row) return;
+			// Layout WIDTH only: scrollWidth is transform-blind, so the frame
+			// carries the scaled truth for horizontal scrolling. HEIGHT is NOT
+			// JS-set — the frame fills the viewport (height:100%) and the row
+			// counter-scales (100%/zoom) inside it; a JS height here would be
+			// circular (scrollHeight of a percentage-height child).
+			frame.style.width = `${Math.ceil(row.scrollWidth * zoom)}px`;
+		});
+	});
+
+	$effect(() => {
+		// Selection-follow: a NEWLY selected panel — or the focused panel
+		// after a RESHUFFLE — is scrolled into view: nearest, horizontal
+		// only (the viewport never scrolls vertically). Fires on the
+		// id-sequence change or the selection change ONLY: geometry edits
+		// never steal the scroll. Placed after the measure effect so, in
+		// the add+select flush, the frame's rAF runs before this one.
+		const target = selectedPanelId;
+		void orderFingerprint;
+		if (target === null) return;
+		requestAnimationFrame(() => {
+			if (!viewport) return;
+			const col = viewport.querySelector<HTMLElement>(
+				`[data-panel-id="${CSS.escape(target)}"]`
+			);
+			if (!col) return;
+			// getBoundingClientRect is transform-true (zoom included), and
+			// the frame carries the scaled layout width — visual coordinates
+			// ARE scrollLeft's coordinate space. The selection ring extends
+			// 4px × zoom outward, so it joins the reveal.
+			const vpRect = viewport.getBoundingClientRect();
+			const colRect = col.getBoundingClientRect();
+			const ring = 4 * zoom;
+			const left = colRect.left - vpRect.left + viewport.scrollLeft - ring;
+			const right = left + colRect.width + ring * 2;
+			let reveal: number | null = null;
+			if (left < viewport.scrollLeft) {
+				reveal = Math.max(0, left);
+			} else if (right > viewport.scrollLeft + viewport.clientWidth) {
+				reveal = right - viewport.clientWidth;
+			}
+			if (reveal === null) return; // fully visible (ring included) — hands off
+			// Inertial: the reveal GLIDES; prefers-reduced-motion collapses
+			// it to the instant jump.
+			const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			viewport.scrollTo({ left: reveal, behavior: reduceMotion ? 'auto' : 'smooth' });
+		});
+	});
+</script>
+
+<div class="panels-viewport" bind:this={viewport} data-testid="panels-viewport">
+	<div class="zoom-frame" bind:this={frame} data-testid="panels-zoom-frame">
+		<div class="panels-row" bind:this={row} data-testid="panels-row">
+			{@render children()}
+		</div>
+	</div>
+</div>
+
+<style>
+	.panels-viewport {
+		flex: 1;
+		min-width: 0;
+		overflow-x: auto;
+		overflow-y: hidden;
+		/* Grey workspace paint — the floor the panels sit on. */
+		background: var(--color-surface-secondary);
+	}
+
+	.zoom-frame {
+		/* Fills the viewport vertically — the row counter-scales inside. */
+		height: 100%;
+	}
+
+
+	.panels-row {
+		display: flex;
+		align-items: stretch;
+		/* SSC#2 G8 (2026-11-14/15): border-box so the 4px ring-breathing
+		 * padding sits INSIDE the counter-scaled height — content-box let
+		 * children resolve height:100% to the full calc'd value and overflow
+		 * the viewport bottom by the scaled padding whenever the row fits
+		 * horizontally (no scrollbar shrinking the viewport, i.e. any
+		 * zoomed-out desk). Matches DSI's resolved geometry.
+		 * The -8px in the calc reserves the selected ring's protrusion (3px
+		 * out + 5px band, PaneBase ::after) OUTSIDE the scaled fill: with the
+		 * row filling the viewport EXACTLY, the ring's bottom band landed
+		 * flush on the viewport edge at every zoom and read as cut off (the
+		 * operator's 2026-11-15 report). The reservation scales back up with
+		 * the row, so the slack stays proportional, not a fixed gap. */
+		box-sizing: border-box;
+		/* Natural width so the frame can measure the true row width. */
+		width: max-content;
+		/* The zoom transform — visual only, layout-blind by CSS design. */
+		transform: scale(var(--zoom, 1));
+		transform-origin: top left;
+		height: calc((100% - 8px) / var(--zoom, 1));
+		/* Counter-scaled height: a scaled-down row still fills the frame
+		   vertically, with the ring reservation above leaving the selected
+		   ring's bottom band visible at every zoom. */
+		/* Breathing room for the selected column's OUTWARD ring (4px
+		   extent beyond the border box). The padding lives INSIDE this
+		   transform, so it scales with zoom in lockstep with the ring. */
+		padding: 4px;
+	}
+</style>

package/dist/components/PanelsZoom.svelte.d.ts

@@ -0,0 +1,26 @@
+type $$ComponentProps = {
+    /** Floor zoom multiplier (clamped by the consumer's prefs — one clamp site). */
+    zoom?: number;
+    /** Open panels — the geometry fingerprint source (widths + count)
+     *  and the reorder fingerprint source (the id sequence). */
+    panels: Array<{
+        id: string;
+        width: number;
+    }>;
+    /** Leading sticky-column width (px) — the embedded rail column;
+     *  null/undefined = no rail column.
+     *  RIDES THE FINGERPRINT (OCI `leading ? railWidth : ''`): mounting,
+     *  unmounting, or resizing the rail changes row.scrollWidth, and
+     *  scrollWidth itself is not reactive — the fingerprint is. */
+    railWidth?: number | null;
+    /** The focused panel's id — the selection-follow target: when it
+     *  changes, a column the viewport cannot see is scrolled into view
+     *  (the floor can be several viewports wide; the selection ring
+     *  must never sit off-screen behind the scroll edge). */
+    selectedPanelId?: string | null;
+    /** Snippet: one rendered child per panel. */
+    children: import('svelte').Snippet;
+};
+declare const PanelsZoom: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelsZoom = ReturnType<typeof PanelsZoom>;
+export default PanelsZoom;

package/dist/components/RailColumn.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	/**
+	 * RailColumn — a fixed-width LEADING column inside the zoom row
+	 * (generalized from DSI's StickyColumnContainer, OCI ControlRail port;
+	 * ADR-0062 W4, D6: the i18n gutter label arrives as a PROP — the full
+	 * sidebar container is an R2 exception, the rail ships in R1).
+	 *
+	 * "Rail" = the width is TRIPLE-LOCKED (width/min/max all the same
+	 * px), unlike pane columns whose widths live in [MIN, MAX]: the rail
+	 * never flexes when the row measures itself at max-content. The
+	 * column's background paints the full column height — the rail inside
+	 * fills it (align-items: stretch).
+	 *
+	 * The trailing resize gutter is included BY DEFAULT (OCI parity) but
+	 * only when pane columns actually follow (showGutter) — a rail alone
+	 * on the floor has nothing to resize against. The gutter is the
+	 * column's flex SIBLING (the rail's overflow must never clip its hit
+	 * area) and reports mousedown through onResizeStart — the host owns
+	 * the drag math and the single clamp.
+	 */
+	let {
+		width,
+		label,
+		showGutter = true,
+		onResizeStart,
+		children
+	}: {
+		/** Sticky (fixed) column width in px — triple-locked, never flexes. */
+		width: number;
+		/** Accessible label for the trailing gutter (consumer-localized). */
+		label: string;
+		/** Trailing resize gutter — only when pane columns follow (OCI). */
+		showGutter?: boolean;
+		/** Gutter mousedown — the host runs the drag and owns the clamp. */
+		onResizeStart?: (e: MouseEvent) => void;
+		children: Snippet;
+	} = $props();
+</script>
+
+<div
+	class="rail-column"
+	data-testid="sidebar-column"
+	style="width: {width}px; min-width: {width}px; max-width: {width}px;"
+>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions — mouse-drag
+     resize handle; keyboard-driven resize is a known gap, not a silent
+     omission (filed per ADR-0062 §7) -->
+{#if showGutter}
+	<div
+		class="rail-gutter"
+		data-testid="sidebar-gutter"
+		role="separator"
+		aria-orientation="vertical"
+		aria-label={label}
+		title={label}
+		onmousedown={(e) => onResizeStart?.(e)}
+	></div>
+{/if}
+
+<style>
+	/* Column-geometry essentials (OCI StickyColumnContainer .rail-column):
+	   the triple-locked width arrives INLINE (width/min/max); this rule
+	   carries the flex-column shell + the surface paint. */
+	.rail-column {
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		background: var(--color-surface-elevated, var(--color-surface-elevated));
+		position: relative;
+		overflow: visible;
+	}
+
+	/* Resize gutter — 6px column right of the locked column (same seam
+	   as the app sidebar's own gutter in the out-of-zoom placement: one
+	   visual contract, two host sites). */
+	.rail-gutter {
+		width: 6px;
+		flex-shrink: 0;
+		cursor: col-resize;
+		transition: background-color 0.15s ease;
+	}
+
+	.rail-gutter:hover {
+		background: var(--color-accent-blue);
+		opacity: 0.25;
+	}
+</style>

package/dist/components/RailColumn.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Sticky (fixed) column width in px — triple-locked, never flexes. */
+    width: number;
+    /** Accessible label for the trailing gutter (consumer-localized). */
+    label: string;
+    /** Trailing resize gutter — only when pane columns follow (OCI). */
+    showGutter?: boolean;
+    /** Gutter mousedown — the host runs the drag and owns the clamp. */
+    onResizeStart?: (e: MouseEvent) => void;
+    children: Snippet;
+};
+declare const RailColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type RailColumn = ReturnType<typeof RailColumn>;
+export default RailColumn;

package/dist/components/ResizeGutter.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	/**
+	 * ResizeGutter — the 6px draggable seam after every pane (ADR-0006 R8
+	 * port, generalized for the container base, ADR-0062 W4 / D6: the i18n
+	 * labels arrive as PROPS — the package never learns a consumer's
+	 * translation system).
+	 *
+	 * The gutter does not resize anything itself — mousedown reports the
+	 * event upward through the injected onGutterDown hook, and the HOST
+	 * (the drag owner) snapshots widths and runs the resize math. No drag
+	 * state lives here.
+	 */
+	let {
+		index,
+		ariaLabel,
+		title,
+		onGutterDown
+	}: {
+		/** The pane index this seam trails — the host's drag payload. */
+		index: number;
+		/** Accessible name for the seam (consumer-localized). */
+		ariaLabel: string;
+		/** Hover tooltip (consumer-localized). */
+		title: string;
+		/** Mousedown — the HOST owns the drag and the clamp. */
+		onGutterDown?: (event: MouseEvent) => void;
+	} = $props();
+</script>
+
+<!-- A real button (a11y): the gutter is an interactive separator; drag
+     reports upward — the host owns the drag math. Button styling resets
+     to the 6px seam. Keyboard-driven resize is a known gap (filed, not
+     hidden — ADR-0062 §7). -->
+<button
+	type="button"
+	class="gutter"
+	data-testid="panel-gutter-{index}"
+	aria-label={ariaLabel}
+	{title}
+	onmousedown={(e) => {
+		e.preventDefault();
+		onGutterDown?.(e);
+	}}
+></button>
+
+<style>
+	.gutter {
+		display: block;
+		padding: 0;
+		border: none;
+		flex: 0 0 6px;
+		width: 6px;
+		align-self: stretch;
+		cursor: col-resize;
+		background: transparent;
+		transition: background-color 0.15s ease;
+	}
+
+	.gutter:hover,
+	.gutter:active {
+		background: var(--color-accent-blue);
+	}
+
+	.gutter:focus-visible {
+		outline: 2px solid var(--color-accent-blue);
+		outline-offset: -2px;
+	}
+</style>

package/dist/components/ResizeGutter.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    /** The pane index this seam trails — the host's drag payload. */
+    index: number;
+    /** Accessible name for the seam (consumer-localized). */
+    ariaLabel: string;
+    /** Hover tooltip (consumer-localized). */
+    title: string;
+    /** Mousedown — the HOST owns the drag and the clamp. */
+    onGutterDown?: (event: MouseEvent) => void;
+};
+declare const ResizeGutter: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResizeGutter = ReturnType<typeof ResizeGutter>;
+export default ResizeGutter;

package/dist/components/SidebarContainer.svelte

@@ -0,0 +1,174 @@
+<script module lang="ts">
+	/** The collapsed-stub geometry (OCI ControlRail parity — the width the
+	 *  DSI shell carries as a constant; kept here so base and consumers
+	 *  agree on the number). */
+	export const SIDEBAR_COLLAPSED_WIDTH = 34;
+</script>
+
+<script lang="ts">
+	/**
+	 * SidebarContainer — the generic sidebar shell (ADR-0063 D5). Contract
+	 * derived from DSI's AppSidebar (read-first mandate, Tasks 5.1): three
+	 * branches, one component —
+	 *
+	 *   collapsed        → 34px stub; ALL content (skin, words, controls)
+	 *                      arrives via the `collapsed` snippet — the base
+	 *                      owns only the geometry and the testid.
+	 *   embedded         → the BARE rail (no width wrapper, no gutter):
+	 *                      the hosting column owns both (OCI ControlRail).
+	 *   standalone       → width-carrying wrapper + badge slot + the rail
+	 *                      + the drag gutter as the rail's flex SIBLING
+	 *                      (the rail's overflow:hidden must never clip the
+	 *                      gutter's hit area — the 2026-09-11 bug).
+	 *
+	 * State is OWNED OUTSIDE (props + callbacks): collapse/width/drag live
+	 * with the page (OCI ownership split); the container renders and
+	 * reports. Words ride snippets/props; colors ride tokens — sections
+	 * render via the default snippet so the consumer composes its own.
+	 */
+	import type { Component, Snippet } from 'svelte';
+
+	let {
+		collapsed = false,
+		width = 400,
+		embedded = false,
+		/** The expanded rail's header row (brand, actions, collapse trigger). */
+		header,
+		/** The rail body — the consumer's sections (default snippet). */
+		children,
+		/** The collapsed-stub SKIN — paint only (gradient, texture). The base
+		 *  renders it as a pointer-transparent absolute underlay, so skin and
+		 *  content can never fight over paint order (the SSC#1 lesson). */
+		collapsedSkin,
+		/** The collapsed-stub CONTENT — interactive elements only (buttons,
+		 *  mounts). The base wraps it in a positioned layer above the skin. */
+		collapsedContent,
+		/** Width-badge slot (standalone wrapper only; consumer renders it). */
+		badge,
+		/** Gutter reports mousedown; the page owns drag + clamp. */
+		onResizeStart,
+		/** Accessible gutter name (consumer words). */
+		gutterLabel = 'Resize',
+		testId = 'sidebar',
+		testIdCollapsed = 'sidebar-collapsed'
+	}: {
+		collapsed?: boolean;
+		width?: number;
+		embedded?: boolean;
+		header?: Snippet;
+		children?: Snippet;
+		collapsedContent?: Snippet;
+		collapsedSkin?: Snippet;
+		badge?: Snippet;
+		onResizeStart?: (e: MouseEvent) => void;
+		gutterLabel?: string;
+		testId?: string;
+		testIdCollapsed?: string;
+	} = $props();
+</script>
+
+{#if collapsed}
+	<div class="cb-sidebar-stub" data-testid={testIdCollapsed}>
+		{#if collapsedSkin}
+			<div class="cb-stub-skin">{@render collapsedSkin()}</div>
+		{/if}
+		{#if collapsedContent}
+			<div class="cb-stub-content">{@render collapsedContent()}</div>
+		{/if}
+	</div>
+{:else if embedded}
+	<aside class="cb-sidebar cb-sidebar-embedded" data-testid={testId}>
+		{#if header}{@render header()}{/if}
+		{@render children?.()}
+	</aside>
+{:else}
+	<div class="cb-sidebar-wrap" style="width: {width}px" data-testid={testId + '-wrap'}>
+		{#if badge}{@render badge()}{/if}
+		<aside class="cb-sidebar" data-testid={testId}>
+			{#if header}{@render header()}{/if}
+			{@render children?.()}
+		</aside>
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions —
+		     mouse-drag resize handle (ResizeGutter pattern); keyboard-driven
+		     resize is a known gap, not a silent omission -->
+		<div
+			class="cb-sidebar-gutter"
+			data-testid={testId + '-gutter'}
+			role="separator"
+			aria-orientation="vertical"
+			aria-label={gutterLabel}
+			onmousedown={(e) => onResizeStart?.(e)}
+		></div>
+	</div>
+{/if}
+
+<style>
+	.cb-sidebar-stub {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		flex-shrink: 0;
+		width: 34px;
+		min-width: 34px;
+		height: 100%;
+		padding: 0.5rem 0;
+		border: none;
+		border-right: 1px solid var(--color-surface-border);
+		color: var(--color-text-secondary);
+		background: var(--color-surface-secondary);
+		isolation: isolate;
+	}
+	/* SSC#1 structural contract (2026-11-14): skin and content are SEPARATE
+	 * base-owned layers, so paint order is the DOM, not the consumer's
+	 * positioning choices. The skin layer is an absolute, pointer-transparent
+	 * underlay; the content layer is positioned and paints above by DOM
+	 * order. A consumer cannot re-earn the buried-buttons bug (DSI's
+	 * gradient once covered its static Restart/About buttons). */
+	.cb-stub-skin {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+	.cb-stub-content {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		flex: 1;
+		min-height: 0;
+		width: 100%;
+	}
+	.cb-sidebar-wrap {
+		position: relative;
+		display: flex;
+		flex-shrink: 0;
+		height: 100%;
+		min-height: 0;
+	}
+	.cb-sidebar {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+		background: var(--color-surface-elevated);
+	}
+	.cb-sidebar-embedded {
+		width: 100%;
+	}
+	.cb-sidebar-gutter {
+		width: 6px;
+		flex-shrink: 0;
+		cursor: col-resize;
+		transition: background-color 0.15s ease;
+	}
+	.cb-sidebar-gutter:hover {
+		background: var(--color-accent-blue);
+		opacity: 0.25;
+	}
+</style>

package/dist/components/SidebarContainer.svelte.d.ts

@@ -0,0 +1,42 @@
+/** The collapsed-stub geometry (OCI ControlRail parity — the width the
+ *  DSI shell carries as a constant; kept here so base and consumers
+ *  agree on the number). */
+export declare const SIDEBAR_COLLAPSED_WIDTH = 34;
+/**
+     * SidebarContainer — the generic sidebar shell (ADR-0063 D5). Contract
+     * derived from DSI's AppSidebar (read-first mandate, Tasks 5.1): three
+     * branches, one component —
+     *
+     *   collapsed        → 34px stub; ALL content (skin, words, controls)
+     *                      arrives via the `collapsed` snippet — the base
+     *                      owns only the geometry and the testid.
+     *   embedded         → the BARE rail (no width wrapper, no gutter):
+     *                      the hosting column owns both (OCI ControlRail).
+     *   standalone       → width-carrying wrapper + badge slot + the rail
+     *                      + the drag gutter as the rail's flex SIBLING
+     *                      (the rail's overflow:hidden must never clip the
+     *                      gutter's hit area — the 2026-09-11 bug).
+     *
+     * State is OWNED OUTSIDE (props + callbacks): collapse/width/drag live
+     * with the page (OCI ownership split); the container renders and
+     * reports. Words ride snippets/props; colors ride tokens — sections
+     * render via the default snippet so the consumer composes its own.
+     */
+import type { Component, Snippet } from 'svelte';
+type $$ComponentProps = {
+    collapsed?: boolean;
+    width?: number;
+    embedded?: boolean;
+    header?: Snippet;
+    children?: Snippet;
+    collapsedContent?: Snippet;
+    collapsedSkin?: Snippet;
+    badge?: Snippet;
+    onResizeStart?: (e: MouseEvent) => void;
+    gutterLabel?: string;
+    testId?: string;
+    testIdCollapsed?: string;
+};
+declare const SidebarContainer: Component<$$ComponentProps, {}, "">;
+type SidebarContainer = ReturnType<typeof SidebarContainer>;
+export default SidebarContainer;