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

package/src/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/src/components/SliderWidth.svelte

@@ -0,0 +1,80 @@
+<script module lang="ts">
+	/**
+	 * SliderWidth — the honest uniform-width control (ADR-0063 D4, moved
+	 * from DSI's control bar). Default bounds are the panel-prefs defaults
+	 * the floor clamps against (480..860, step 1); a consumer overrides
+	 * them via props — the clamp site stays the CONSUMER's (the commit
+	 * callback routes wherever the route owner decides), so the
+	 * single-bound-site rule holds. Every thumb move commits (per-input
+	 * cadence) — panels resize LIVE under the dragging thumb.
+	 */
+	export const WIDTH_BOUNDS = { min: 480, max: 860, step: 1 } as const;
+</script>
+
+<script lang="ts">
+	let {
+		/** Bound width (px); updates flow back up via $bindable per input. */
+		value = $bindable(730),
+		/** Bounds — default WIDTH_BOUNDS, prop-overridable. */
+		min = WIDTH_BOUNDS.min,
+		max = WIDTH_BOUNDS.max,
+		step = WIDTH_BOUNDS.step,
+		/** LIVE commit per input event (the honest-slider contract). */
+		oncommit,
+		/** Caption content — consumer words (the base ships none). */
+		caption,
+		/** Accessible name for the input (consumer words). */
+		ariaLabel,
+		/** Testid stem: <stem>, <stem>-input, <stem>-value. */
+		testId = 'cb-slider-width'
+	}: {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		oncommit?: (width: number) => void;
+		caption?: import('svelte').Snippet<[number]>;
+		ariaLabel: string;
+		testId?: string;
+	} = $props();
+</script>
+
+<label class="cb-slider-width" data-testid={testId}>
+	{#if caption}
+		<span class="cb-slider-caption">
+			{@render caption(value)}
+		</span>
+	{/if}
+	<input
+		type="range"
+		{min}
+		{max}
+		{step}
+		bind:value
+		oninput={() => oncommit?.(value)}
+		data-testid={testId + '-input'}
+		aria-label={ariaLabel}
+	/>
+</label>
+
+<style>
+	.cb-slider-width {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-size: 0.6875rem;
+		color: var(--color-text-secondary);
+	}
+	.cb-slider-caption {
+		display: flex;
+		justify-content: space-between;
+	}
+	.cb-slider-width input {
+		width: 100%;
+		accent-color: var(--color-accent-blue);
+	}
+	.cb-slider-width input:focus-visible {
+		outline: 2px solid var(--color-accent-blue);
+		outline-offset: 2px;
+	}
+</style>

package/src/components/SliderZoom.svelte

@@ -0,0 +1,77 @@
+<script module lang="ts">
+	/**
+	 * SliderZoom — the honest floor-zoom control (ADR-0063 D4, moved from
+	 * DSI's control bar). Default bounds 0.25..1.25 (the floor's zoom
+	 * scale); prop-overridable. The bound value carries EVERY thumb move
+	 * live to the owner (PanelsZoom re-measures per move — spec-13's
+	 * no-phantom-scrollbar contract rides on this cadence).
+	 */
+	export const ZOOM_BOUNDS = { min: 0.25, max: 1.25, step: 0.001 } as const;
+</script>
+
+<script lang="ts">
+	let {
+		/** Floor zoom multiplier; updates flow back up via $bindable per input. */
+		value = $bindable(1),
+		min = ZOOM_BOUNDS.min,
+		max = ZOOM_BOUNDS.max,
+		step = ZOOM_BOUNDS.step,
+		/** Optional LIVE commit per input event (bind already carries value). */
+		oncommit,
+		/** Caption content — consumer words (the base ships none). */
+		caption,
+		/** Accessible name for the input (consumer words). */
+		ariaLabel,
+		/** Testid stem: <stem>, <stem>-input, <stem>-value. */
+		testId = 'cb-slider-zoom'
+	}: {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		oncommit?: (zoom: number) => void;
+		caption?: import('svelte').Snippet<[number]>;
+		ariaLabel: string;
+		testId?: string;
+	} = $props();
+</script>
+
+<label class="cb-slider-zoom" data-testid={testId}>
+	{#if caption}
+		<span class="cb-slider-caption">
+			{@render caption(value)}
+		</span>
+	{/if}
+	<input
+		type="range"
+		{min}
+		{max}
+		{step}
+		bind:value
+		oninput={() => oncommit?.(value)}
+		data-testid={testId + '-input'}
+		aria-label={ariaLabel}
+	/>
+</label>
+
+<style>
+	.cb-slider-zoom {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-size: 0.6875rem;
+		color: var(--color-text-secondary);
+	}
+	.cb-slider-caption {
+		display: flex;
+		justify-content: space-between;
+	}
+	.cb-slider-zoom input {
+		width: 100%;
+		accent-color: var(--color-accent-blue);
+	}
+	.cb-slider-zoom input:focus-visible {
+		outline: 2px solid var(--color-accent-blue);
+		outline-offset: 2px;
+	}
+</style>

package/src/i18n/LanguageMenu.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	/**
+	 * LanguageMenu — the generic mount over a LocalePrefs store (ADR-0063 D3).
+	 * The base carries NO words and NO skin: the language list and its labels
+	 * are consumer props, the trigger icon is a consumer component, colors
+	 * cross only through tokens. Native names are NOT translated copy —
+	 * every locale shows every name in its own language (that is the point
+	 * of a language menu), which is why they arrive as data, not snippets.
+	 */
+	import type { Component } from 'svelte';
+
+	let {
+		/** The consumer's createLocalePrefs instance. */
+		prefs,
+		/** Locale ids in display order (validated by the store). */
+		locales,
+		/** Native names per locale id. */
+		labels,
+		/** aria-label / title for the trigger (consumer's words). */
+		triggerLabel,
+		/** The trigger icon (consumer's icon set — e.g. a languages glyph). */
+		icon,
+		/** Open the list upward (rail-bottom mounts). */
+		dropUp = false
+	}: {
+		prefs: {
+			readonly locale: string;
+			set: (next: string) => void;
+		};
+		locales: readonly string[];
+		labels: Record<string, string>;
+		triggerLabel: string;
+		icon: Component<{ size?: number }>;
+		dropUp?: boolean;
+	} = $props();
+
+	let open = $state(false);
+	let rootEl = $state<HTMLElement | null>(null);
+
+	// outside click closes — one window listener while open (removed on close)
+	$effect(() => {
+		if (!open) return;
+		const onDocClick = (ev: MouseEvent) => {
+			if (rootEl && !rootEl.contains(ev.target as Node)) open = false;
+		};
+		document.addEventListener('click', onDocClick);
+		return () => document.removeEventListener('click', onDocClick);
+	});
+
+	function choose(loc: string): void {
+		open = false;
+		prefs.set(loc);
+	}
+
+	const TriggerIcon = $derived(icon);
+</script>
+
+<div
+	class="cb-language-menu"
+	data-testid="language-menu"
+	bind:this={rootEl}
+>
+	<button
+		type="button"
+		class="cb-language-trigger"
+		title={triggerLabel}
+		aria-label={triggerLabel}
+		aria-expanded={open}
+		data-testid="language-menu-trigger"
+		onclick={() => (open = !open)}
+	>
+		<TriggerIcon size={16} />
+		<span class="cb-language-code">{prefs.locale.toUpperCase()}</span>
+	</button>
+	{#if open}
+		<div
+			class="cb-language-list"
+			class:cb-drop-up={dropUp}
+			data-testid="language-menu-list"
+			role="menu"
+		>
+			{#each locales as loc (loc)}
+				<button
+					type="button"
+					class="cb-language-option"
+					class:cb-option-active={prefs.locale === loc}
+					data-testid={'locale-option-' + loc}
+					data-active={prefs.locale === loc ? 'true' : 'false'}
+					role="menuitem"
+					onclick={() => choose(loc)}
+				>
+					{labels[loc] ?? loc}
+					{#if prefs.locale === loc}<span aria-hidden="true">✓</span>{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Structure only — colors cross through tokens (ground rule). */
+	.cb-language-menu {
+		position: relative;
+		display: inline-block;
+	}
+	.cb-language-trigger {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary);
+		border-radius: 0.25rem;
+		padding: 0.25rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+	}
+	.cb-language-trigger:hover {
+		color: var(--color-text-primary);
+	}
+	.cb-language-code {
+		text-transform: uppercase;
+	}
+	.cb-language-list {
+		position: absolute;
+		right: 0;
+		z-index: 50;
+		width: 9rem;
+		overflow: hidden;
+		margin-top: 0.25rem;
+		padding-top: 0.25rem;
+		padding-bottom: 0.25rem;
+		border-radius: 0.375rem;
+		border: 1px solid var(--color-surface-border);
+		background: var(--color-surface-elevated);
+		color: var(--color-text-primary);
+		box-shadow: 0 4px 6px -1px var(--color-surface-border);
+	}
+	.cb-language-list.cb-drop-up {
+		bottom: 100%;
+		margin-top: 0;
+		margin-bottom: 0.25rem;
+	}
+	.cb-language-option {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.375rem 0.75rem;
+		text-align: left;
+		font-size: 0.75rem;
+		border: none;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+	.cb-language-option:hover {
+		background: var(--color-surface-secondary);
+	}
+	.cb-language-option.cb-option-active {
+		color: var(--color-accent-purple);
+		font-weight: 600;
+	}
+</style>

package/src/i18n/locale-prefs.svelte.ts

@@ -0,0 +1,112 @@
+// The base locale survival store (ADR-0063 D3): a client-side choice with
+// DUAL-WRITE persistence — localStorage[<baseKey>] (profile-suffixed via
+// storage/namespace) AND a mirror cookie the consumer names (DSI passes
+// 'dsi.locale' so its SSR chain stays the reader; the base only mirrors,
+// never races the SSR chain). Reads resolve cookie first, then storage,
+// then the consumer default. Junk is junk: anything outside the
+// consumer's locale list falls back to the default, never throws.
+//
+// SSR (no document / no localStorage): reads return the default, writes
+// are silent no-ops — the consumer's SSR chain owns truth.
+
+import { storageKey, sanitizeWorkspaceProfile } from '../storage/namespace';
+
+export interface LocalePrefsOptions {
+	/** The un-suffixed localStorage key (e.g. 'dsi.locale', 'pg.locale'). */
+	baseKey: string;
+	/** The mirror cookie name. The consumer's SSR chain reads THIS name. */
+	cookieName: string;
+	/** The valid locale ids — anything else is junk. */
+	locales: readonly string[];
+	/** Fallback when nothing (or junk) is stored. */
+	defaultLocale: string;
+	/** Cookie lifetime seconds (default ~400 days, matching common SSR locale cookies). */
+	cookieMaxAge?: number;
+}
+
+export interface LocalePrefs {
+	readonly locale: string;
+	/** The exact storage key this store uses for a profile. */
+	key(profile?: string | null): string;
+	/** Boot-time adoption: resolve cookie → storage → default into state. */
+	adopt(): void;
+	/** Validate + dual-write (storage + cookie) + update state. */
+	set(next: string): void;
+	/** Raw resolution without touching state (SSR-safe). */
+	read(): string;
+}
+
+function readCookie(name: string): string | null {
+	if (typeof document === 'undefined') return null;
+	try {
+		const m = document.cookie.match(new RegExp('(?:^|;\\s*)' + name.replace(/[.$?*|{}()\[\]\\/+^]/g, '\\$&') + '=([^;]*)'));
+		return m ? decodeURIComponent(m[1]) : null;
+	} catch {
+		return null;
+	}
+}
+
+export function createLocalePrefs(options: LocalePrefsOptions): LocalePrefs {
+	const { baseKey, cookieName, locales, defaultLocale } = options;
+	const maxAge = options.cookieMaxAge ?? 34560000;
+
+	let locale = $state<string>(defaultLocale);
+
+	const currentProfile = (): string | null =>
+		typeof location === 'undefined'
+			? null
+			: sanitizeWorkspaceProfile(new URLSearchParams(location.search).get('profile') ?? '');
+
+	const keyFor = (profile?: string | null): string => storageKey(baseKey, profile ?? currentProfile());
+
+	const resolve = (): string => {
+		const cookie = readCookie(cookieName);
+		if (cookie !== null && locales.includes(cookie)) return cookie;
+		if (typeof localStorage !== 'undefined') {
+			try {
+				const raw = localStorage.getItem(keyFor());
+				if (raw !== null && locales.includes(raw)) return raw;
+			} catch {
+				// blocked storage — the cookie already had its say
+			}
+		}
+		return defaultLocale;
+	};
+
+	const persist = (next: string): void => {
+		if (typeof localStorage !== 'undefined') {
+			try {
+				localStorage.setItem(keyFor(), next);
+			} catch {
+				// store full or blocked — the cookie still holds the choice
+			}
+		}
+		if (typeof document !== 'undefined') {
+			try {
+				document.cookie = cookieName + '=' + encodeURIComponent(next) + '; path=/; max-age=' + maxAge + '; samesite=lax';
+			} catch {
+				// cookie write blocked — the storage mirror holds
+			}
+		}
+	};
+
+	return {
+		get locale(): string {
+			return locale;
+		},
+		key(profile?: string | null): string {
+			return keyFor(profile);
+		},
+		read(): string {
+			return resolve();
+		},
+		adopt() {
+			locale = resolve();
+		},
+		set(next: string) {
+			if (!locales.includes(next)) return; // junk → silent no-op
+			locale = next;
+			persist(next);
+		}
+	};
+}

package/src/index.ts

@@ -0,0 +1,67 @@
+/**
+ * @deepseek-insight/container-base — the ONLY public entry.
+ * Internals are reached exclusively through here (no deep imports).
+ */
+
+/** Probe export for workspace resolution (Wave 1); real surface lands W2+. */
+export const CONTAINER_BASE_VERSION = '0.1.0';
+
+// ── components (W4, D6/D8) ──
+export { default as PanelsZoom } from './components/PanelsZoom.svelte';
+export { default as ResizeGutter } from './components/ResizeGutter.svelte';
+export { default as RailColumn } from './components/RailColumn.svelte';
+export { default as PaneBase } from './components/PaneBase.svelte';
+export { default as PanelHeaderSkeleton } from './components/PanelHeaderSkeleton.svelte';
+export { default as ChordPaletteOverlay } from './components/ChordPaletteOverlay.svelte';
+
+// ── layout (W3, D8) ──
+export type { PaneCore, WidthClamp, PaneMoveDir } from './layout/floor-math';
+export { resizeOne, scaleProportionally, isUniformRow, movePanelWithin } from './layout/floor-math';
+export { slotAfter, insertAtAnchor, focusedSlot } from './layout/placement';
+
+// ── interaction (W5, D5) ──
+export {
+	CHORD_WINDOW_MS,
+	IDLE_CHORD,
+	chordKey,
+	decideChordKeydown,
+	hasAnyPreset,
+	isEditableTarget
+} from './interaction/chord-machine';
+export type {
+	ChordPrefix,
+	ChordState,
+	ChordKey,
+	ChordAction,
+	ChordTables,
+	ChordOptionRow
+} from './interaction/chord-machine';
+
+export { createGutterResize } from './interaction/gutter-resize';
+export type { GutterResizeMachine } from './interaction/gutter-resize';
+// ── registry (W3, D8) ──
+export { createActionTable } from './registry/action-registry';
+export type { ActionTable } from './registry/action-registry';
+
+// ── storage (W2, D4) ──
+export { sanitizeWorkspaceProfile, storageKey } from './storage/namespace';
+export { createPrefsStore } from './storage/create-prefs-store';
+export type { PrefsStore, PrefsStoreOptions } from './storage/create-prefs-store';
+
+// ── theming (R2 W2, ADR-0063 D2) ──
+export { createThemePrefs } from './theming/theme-prefs.svelte';
+export type { ThemeChoice, ResolvedTheme, ThemePrefs, ThemePrefsOptions } from './theming/theme-prefs.svelte';
+export { themeApplierScript } from './theming/applier';
+export { default as ThemeToggle } from './theming/ThemeToggle.svelte';
+
+// ── i18n (R2 W3, ADR-0063 D3) ──
+export { createLocalePrefs } from './i18n/locale-prefs.svelte';
+export type { LocalePrefs, LocalePrefsOptions } from './i18n/locale-prefs.svelte';
+export { default as LanguageMenu } from './i18n/LanguageMenu.svelte';
+
+// ── sliders (R2 W4, ADR-0063 D4) ──
+export { default as SliderWidth, WIDTH_BOUNDS } from './components/SliderWidth.svelte';
+export { default as SliderZoom, ZOOM_BOUNDS } from './components/SliderZoom.svelte';
+
+// ── sidebar (R2 W5, ADR-0063 D5) ──
+export { default as SidebarContainer, SIDEBAR_COLLAPSED_WIDTH } from './components/SidebarContainer.svelte';