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

package/dist/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/dist/components/SliderWidth.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 declare const WIDTH_BOUNDS: {
+    readonly min: 480;
+    readonly max: 860;
+    readonly step: 1;
+};
+type $$ComponentProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    oncommit?: (width: number) => void;
+    caption?: import('svelte').Snippet<[number]>;
+    ariaLabel: string;
+    testId?: string;
+};
+declare const SliderWidth: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SliderWidth = ReturnType<typeof SliderWidth>;
+export default SliderWidth;

package/dist/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/dist/components/SliderZoom.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 declare const ZOOM_BOUNDS: {
+    readonly min: 0.25;
+    readonly max: 1.25;
+    readonly step: 0.001;
+};
+type $$ComponentProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    oncommit?: (zoom: number) => void;
+    caption?: import('svelte').Snippet<[number]>;
+    ariaLabel: string;
+    testId?: string;
+};
+declare const SliderZoom: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SliderZoom = ReturnType<typeof SliderZoom>;
+export default SliderZoom;

package/dist/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/dist/i18n/LanguageMenu.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+     * 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';
+type $$ComponentProps = {
+    prefs: {
+        readonly locale: string;
+        set: (next: string) => void;
+    };
+    locales: readonly string[];
+    labels: Record<string, string>;
+    triggerLabel: string;
+    icon: Component<{
+        size?: number;
+    }>;
+    dropUp?: boolean;
+};
+declare const LanguageMenu: Component<$$ComponentProps, {}, "">;
+type LanguageMenu = ReturnType<typeof LanguageMenu>;
+export default LanguageMenu;

package/dist/i18n/locale-prefs.svelte.d.ts

@@ -0,0 +1,24 @@
+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;
+}
+export declare function createLocalePrefs(options: LocalePrefsOptions): LocalePrefs;

package/dist/i18n/locale-prefs.svelte.js

@@ -0,0 +1,85 @@
+// 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';
+function readCookie(name) {
+    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) {
+    const { baseKey, cookieName, locales, defaultLocale } = options;
+    const maxAge = options.cookieMaxAge ?? 34560000;
+    let locale = $state(defaultLocale);
+    const currentProfile = () => typeof location === 'undefined'
+        ? null
+        : sanitizeWorkspaceProfile(new URLSearchParams(location.search).get('profile') ?? '');
+    const keyFor = (profile) => storageKey(baseKey, profile ?? currentProfile());
+    const resolve = () => {
+        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) => {
+        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() {
+            return locale;
+        },
+        key(profile) {
+            return keyFor(profile);
+        },
+        read() {
+            return resolve();
+        },
+        adopt() {
+            locale = resolve();
+        },
+        set(next) {
+            if (!locales.includes(next))
+                return; // junk → silent no-op
+            locale = next;
+            persist(next);
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 declare const CONTAINER_BASE_VERSION = "0.1.0";
+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';
+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';
+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';
+export { createActionTable } from './registry/action-registry';
+export type { ActionTable } from './registry/action-registry';
+export { sanitizeWorkspaceProfile, storageKey } from './storage/namespace';
+export { createPrefsStore } from './storage/create-prefs-store';
+export type { PrefsStore, PrefsStoreOptions } from './storage/create-prefs-store';
+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';
+export { createLocalePrefs } from './i18n/locale-prefs.svelte';
+export type { LocalePrefs, LocalePrefsOptions } from './i18n/locale-prefs.svelte';
+export { default as LanguageMenu } from './i18n/LanguageMenu.svelte';
+export { default as SliderWidth, WIDTH_BOUNDS } from './components/SliderWidth.svelte';
+export { default as SliderZoom, ZOOM_BOUNDS } from './components/SliderZoom.svelte';
+export { default as SidebarContainer, SIDEBAR_COLLAPSED_WIDTH } from './components/SidebarContainer.svelte';

package/dist/index.js

@@ -0,0 +1,35 @@
+/**
+ * @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';
+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 { createGutterResize } from './interaction/gutter-resize';
+// ── registry (W3, D8) ──
+export { createActionTable } from './registry/action-registry';
+// ── storage (W2, D4) ──
+export { sanitizeWorkspaceProfile, storageKey } from './storage/namespace';
+export { createPrefsStore } from './storage/create-prefs-store';
+// ── theming (R2 W2, ADR-0063 D2) ──
+export { createThemePrefs } 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 { 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';