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

package/src/components/PaneBase.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	/**
+	 * PaneBase — one pane's fixed-width column shell (split from DSI's
+	 * PanelColumn, ADR-0062 W4, D8): the GENERIC chrome — the inline
+	 * triple width lock, the selection ring, the narrow-container query,
+	 * the activate/loupe gestures — lives here; the consumer supplies its
+	 * own vocabulary as SNIPPETS (header / toolbar / content / footer).
+	 * The package never reads a consumer store, type, or translation.
+	 *
+	 * Gestures (owner contract, carried verbatim from the split):
+	 * - pointerdown/focusin anywhere INSIDE the column fire onactivate
+	 *   (interacting with a pane focuses its floor slot).
+	 * - click with Alt held, target outside a control, fires onloupe —
+	 *   evaluated on the CLICK phase (never pointerdown: a dialog under
+	 *   an in-flight press eats its own compatibility mousedown), with
+	 *   ONE closest() exclusion instead of per-control stopPropagation.
+	 */
+	let {
+		width,
+		paneId,
+		sessionTag = null,
+		selected = false,
+		onactivate,
+		onloupe,
+		header,
+		toolbar,
+		children,
+		footer
+	}: {
+		/** Column width in px — triple-locked inline (width/min/max). */
+		width: number;
+		/** The pane's id — data-panel-id (the zoom's selection-follow hook). */
+		paneId: string;
+		/** Opaque session-ish tag — data-session-id (null when the pane
+		 *  carries no session; the value is never interpreted here). */
+		sessionTag?: string | null;
+		/** Selection cue — the ring on the selected column. */
+		selected?: boolean;
+		/** Activate (select) this pane — pointerdown/focusin inside. */
+		onactivate?: () => void;
+		/** Loupe trigger — Alt+Click release outside a control. */
+		onloupe?: () => void;
+		/** Header strip slot (the consumer's floor chrome). */
+		header: Snippet;
+		/** Toolbar slot under the header (badges, controls). */
+		toolbar?: Snippet;
+		/** Content slot — the pane body. */
+		children: Snippet;
+		/** Footer slot (after the content). */
+		footer?: Snippet;
+	} = $props();
+
+	/** The loupe trigger: Alt held, target not inside a control —
+	 *  evaluated on click release (see the props doc). */
+	function handleLoupeTrigger(event: MouseEvent): void {
+		if (!event.altKey) return;
+		const target = event.target;
+		if (
+			target instanceof Element &&
+			target.closest('button, a, input, textarea, [role="button"]') !== null
+		) {
+			return;
+		}
+		onloupe?.();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events — the column is a
+     LAYOUT container, not a control: pointerdown is a passive
+     selection-follow, focusin is the keyboard parity for the same
+     selection, every real control inside stays itself, and the
+     click-phase Alt+Click is the loupe trigger. -->
+<div
+	class="column"
+	class:selected
+	data-testid="panel-column"
+	data-panel-id={paneId}
+	data-session-id={sessionTag}
+	style="width: {width}px; min-width: {width}px; max-width: {width}px;"
+	onpointerdown={() => onactivate?.()}
+	onfocusin={() => onactivate?.()}
+	onclick={handleLoupeTrigger}
+>
+	{@render header()}
+	{#if toolbar}
+		{@render toolbar()}
+	{/if}
+	<div class="body">
+		{@render children()}
+	</div>
+	{#if footer}
+		{@render footer()}
+	{/if}
+</div>
+
+<style>
+	.column {
+		position: relative; /* the width badge's absolute anchor */
+		/* Size container: the column's inline size is the narrow-header
+		   trigger — header children query it instead of receiving width
+		   as props. */
+		container-type: inline-size;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: var(--color-surface-primary, var(--color-surface-elevated));
+		border-right: 1px solid var(--color-surface-border);
+		flex-shrink: 0;
+	}
+
+	/* Selection ring — a rounded gradient drawn OUTSIDE the column (same
+	   geometry the flat outline had: the band sits in the resize seam, so
+	   it never paints over any child component; the floor row carries
+	   matching breathing room so the ring's segments are not clipped by
+	   the viewport's overflow; both live inside the zoom transform, so
+	   they scale in lockstep at any zoom). The ring is a masked
+	   pseudo-element, not an outline: outlines cannot take a gradient or
+	   a radius. The content-box + exclude mask carves the band; the
+	   corners round without touching the column's own square seams. */
+	.column.selected::after {
+		content: '';
+		position: absolute;
+		inset: -3px;
+		z-index: 5;
+		pointer-events: none; /* the gutter and header own their pointers */
+		border-radius: 0.75rem;
+		padding: 5px;
+		/* Theme vars only (D7): the consumer's theme re-points them. */
+		background: linear-gradient(
+			135deg,
+			var(--color-accent-blue) 0%,
+			var(--color-accent-purple) 45%,
+			var(--color-accent-rose) 100%
+		);
+		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		-webkit-mask-composite: xor;
+		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		mask-composite: exclude;
+	}
+
+	/* Narrow columns (<530px): header text hides, icons carry identity.
+	   :global because the text spans live in child components — Svelte
+	   scoping stops at this component's own elements, and the container
+	   query must reach the descendants. */
+	@container (max-width: 529px) {
+		.column :global(.narrow-hide) {
+			display: none;
+		}
+	}
+
+	.body {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+</style>

package/src/components/PanelHeaderSkeleton.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	/**
+	 * PanelHeaderSkeleton — a pane column's header-strip LAYOUT skeleton
+	 * (split from DSI's PanelHeader, ADR-0062 W4, D8): the strip carries
+	 * the geometry — flex row, label side + actions side, the bottom
+	 * border, the selected wash — and the consumer renders its own
+	 * controls INTO the slots (labels, copy buttons, chevrons, close).
+	 * No consumer vocabulary: no stores, no icons, no translation.
+	 *
+	 * The element ref is BINDABLE: a consumer whose verbs need the strip's
+	 * geometry (e.g. a canvas-capture button aiming at the strip's
+	 * PARENT — the column) binds it back.
+	 */
+	let {
+		title,
+		selected = false,
+		labelTestId,
+		headerEl = $bindable(undefined),
+		leading,
+		actions
+	}: {
+		/** Tooltip for the whole strip (the consumer's label text). */
+		title?: string;
+		/** Selection cue — the selected column's header carries the wash. */
+		selected?: boolean;
+		/** The label span's testid — the consumer's DOM hook (its own
+		 *  variants override; the default hook is the consumer's choice). */
+		labelTestId?: string;
+		/** The strip element — bind back for geometry-aimed verbs. */
+		headerEl?: HTMLDivElement | undefined;
+		/** Leading slot: the identity (label, copy control). */
+		leading: Snippet;
+		/** Actions slot: the verbs (chevrons, capture, close). */
+		actions: Snippet;
+	} = $props();
+</script>
+
+<div class="panel-header" class:selected data-testid="panel-header" {title} bind:this={headerEl}>
+	<span class="label" data-testid={labelTestId ?? 'panel-header-label'}>
+		{@render leading()}
+	</span>
+	<span class="actions">
+		{@render actions()}
+	</span>
+</div>
+
+<style>
+	.panel-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.25rem 0.5rem;
+		min-height: 1.75rem;
+		font-size: 0.6875rem;
+		color: var(--color-text-secondary);
+		border-bottom: 1px solid var(--color-surface-border);
+		background: var(--color-surface-primary, var(--color-surface-elevated));
+		flex-shrink: 0;
+	}
+
+	/* Focus tint: the selected column's floor strip carries the same tint
+	   as the conversation header/footer below it — the column you would
+	   type into reads as one tinted frame. */
+	.panel-header.selected {
+		background: var(--color-header-wash);
+	}
+
+	.label {
+		min-width: 0;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.actions {
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+	}
+</style>

package/src/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/src/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/src/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>