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

package/src/theming/ThemeToggle.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	/**
+	 * ThemeToggle — the generic three-state lamp mount (ADR-0063 D2).
+	 * The MECHANISM lives in theming/theme-prefs.svelte.ts; this component
+	 * carries NO words and NO skin: every label comes in as a prop, every
+	 * icon as a snippet, every color as a token var (boundary suite).
+	 * Structure follows the DSI footer lamp: one trigger whose icon is the
+	 * current choice, a popup with the three states, check on the active
+	 * one, click-outside closes, dropUp for rail-bottom mounts.
+	 */
+	import type { Component, Snippet } from 'svelte';
+
+	export type ThemeChoice = 'system' | 'light' | 'dark';
+
+	let {
+		/** The consumer's ThemePrefs instance (createThemePrefs). */
+		prefs,
+		/** aria-label / title for the trigger (consumer's words). */
+		triggerLabel,
+		/** Per-state words (consumer's dictionary). */
+		optionLabels,
+		/** Per-state icon components (consumer's icon set). */
+		icons,
+		/** Open the list upward (rail-bottom mounts). */
+		dropUp = false
+	}: {
+		prefs: {
+			readonly choice: ThemeChoice;
+			set: (c: ThemeChoice) => void;
+		};
+		triggerLabel: string;
+		optionLabels: Record<ThemeChoice, string>;
+		icons: Record<ThemeChoice, Component<{ size?: number; 'aria-hidden'?: boolean | 'true' | 'false' }>>;
+		dropUp?: boolean;
+	} = $props();
+
+	let open = $state(false);
+	let rootEl = $state<HTMLElement | null>(null);
+
+	const CHOICES: ThemeChoice[] = ['system', 'light', 'dark'];
+
+	const TriggerIcon = $derived(icons[prefs.choice]);
+
+	function choose(c: ThemeChoice): void {
+		open = false;
+		prefs.set(c);
+	}
+
+	// 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);
+	});
+</script>
+
+<div
+	class="cb-theme-toggle"
+	data-testid="cb-theme-toggle"
+	bind:this={rootEl}
+>
+	<button
+		type="button"
+		class="cb-theme-toggle-trigger"
+		title={triggerLabel}
+		aria-label={triggerLabel}
+		aria-expanded={open}
+		data-testid="cb-theme-toggle-trigger"
+		onclick={() => (open = !open)}
+	>
+		<TriggerIcon size={16} />
+	</button>
+	{#if open}
+		<div
+			class="cb-theme-toggle-list"
+			class:cb-drop-up={dropUp}
+			data-testid="cb-theme-toggle-list"
+			role="menu"
+		>
+			{#each CHOICES as c (c)}
+				{@const Icon = icons[c]}
+				<button
+					type="button"
+					class="cb-theme-option"
+					class:cb-option-active={prefs.choice === c}
+					data-testid={'cb-theme-option-' + c}
+					data-active={prefs.choice === c ? 'true' : 'false'}
+					role="menuitem"
+					onclick={() => choose(c)}
+				>
+					<span class="cb-theme-option-row">
+						<Icon size={13} aria-hidden="true" />
+						{optionLabels[c]}
+					</span>
+					{#if prefs.choice === c}<span aria-hidden="true">✓</span>{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Structure only — every color crosses through tokens (ground rule).
+	 * The outside-click close effect lives with the consumer host for now
+	 * (see tests); the component itself holds no globals. */
+	.cb-theme-toggle {
+		position: relative;
+		display: inline-block;
+	}
+	.cb-theme-toggle-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;
+		cursor: pointer;
+	}
+	.cb-theme-toggle-trigger:hover {
+		color: var(--color-text-primary);
+	}
+	.cb-theme-toggle-list {
+		position: absolute;
+		right: 0;
+		z-index: 50;
+		width: 9rem;
+		overflow: hidden;
+		margin-top: 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-theme-toggle-list.cb-drop-up {
+		bottom: 100%;
+		margin-top: 0;
+		margin-bottom: 0.25rem;
+	}
+	.cb-theme-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-theme-option:hover {
+		background: var(--color-surface-secondary);
+	}
+	.cb-theme-option.cb-option-active {
+		color: var(--color-accent-purple);
+		font-weight: 600;
+	}
+	.cb-theme-option-row {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+</style>

package/src/theming/applier.ts

@@ -0,0 +1,30 @@
+/**
+ * The pre-paint theme applier — an inline SCRIPT SOURCE STRING the consumer
+ * embeds in its HTML template (ADR-0063 D2). It re-derives the storage key
+ * with the SAME grammar as theming/theme-prefs.svelte.ts (namespace.ts:
+ * <baseKey> + '_' + sanitized ?profile=), reads the choice, resolves system
+ * against the OS, and sets html[data-theme] BEFORE first paint — no flash.
+ *
+ * It cannot import modules (it runs before the bundle), so the derivation is
+ * generated from this one function: consumers never hand-copy it.
+ *
+ * Pure string generation — no runes — so plain node (strip-types) can import
+ * it for HTML template generation (scripts/sync-theme-applier.mjs).
+ */
+
+/** Generate the inline script source for a consumer's theme base key. */
+export function themeApplierScript(baseKey: string): string {
+	return `try {
+	var m = location.search.match(/[?&]profile=([^&]*)/);
+	var prof = m ? m[1].replace(/[^A-Za-z0-9_-]/g, '').slice(0, 40) : '';
+	var k = '${baseKey}' + (prof ? '_' + prof : '');
+	var t = localStorage.getItem(k);
+	if (t !== 'light' && t !== 'dark' && t !== 'system') t = 'system';
+	document.documentElement.dataset.theme =
+		t === 'dark' || (t === 'system' && window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches)
+			? 'dark'
+			: 'light';
+} catch (e) {
+	document.documentElement.dataset.theme = 'light';
+}`;
+}

package/src/theming/theme-prefs.svelte.ts

@@ -0,0 +1,118 @@
+// The base Three-State Lamp — the switch MECHANISM (ADR-0063 D2, moved out
+// of DSI's hand-rolled twin). Owns a three-state choice (system / light /
+// dark), persists it under localStorage[<baseKey>], resolves it against the
+// OS, and sets html[data-theme] — the single hinge the token layer reads.
+// The ONLY other place that derives the storage key is the inline pre-paint
+// applier (theming/applier.ts) the consumer inlines in its HTML template;
+// key grammar flows through storage/namespace so the two cannot drift.
+// Key grammar: EVERY <baseKey> is profile-scoped (?profile= param), so each
+// desk remembers its own lamp.
+
+import { storageKey, sanitizeWorkspaceProfile } from '../storage/namespace';
+
+export type ThemeChoice = 'system' | 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
+
+export interface ThemePrefsOptions {
+	/** The un-suffixed localStorage key (e.g. 'dsi-theme', 'pg-theme'). */
+	baseKey: string;
+}
+
+export interface ThemePrefs {
+	readonly choice: ThemeChoice;
+	readonly resolved: ResolvedTheme;
+	/** Mount-time adoption: the pre-paint applier already resolved and set
+	 * the attribute before the bundle ran — ADOPT it (flash-free),
+	 * re-deriving the choice from storage. Paints only when the attribute
+	 * was somehow missing. */
+	adopt(): void;
+	/** Persist the CHOICE (never the resolved value — system keeps following
+	 * the OS), then paint. */
+	set(next: ThemeChoice): void;
+	/** Live OS following, only while the choice is system. */
+	listen(): void;
+}
+
+export function createThemePrefs(options: ThemePrefsOptions): ThemePrefs {
+	const baseKey = options.baseKey;
+
+	/** The active workspace profile — the sticky ?profile= param, sanitized
+	 * once here (mirror of the pre-paint derivation in the applier). */
+	const currentProfile = (): string | null =>
+		typeof location === 'undefined'
+			? null
+			: sanitizeWorkspaceProfile(new URLSearchParams(location.search).get('profile') ?? '');
+
+	const storageKeyFor = (): string => storageKey(baseKey, currentProfile());
+
+	const osPrefersDark = (): boolean =>
+		typeof window !== 'undefined' &&
+		!!window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+
+	/** Defensive read — SSR-safe, junk -> system. */
+	const readStoredChoice = (): ThemeChoice => {
+		if (typeof localStorage === 'undefined') return 'system';
+		try {
+			const raw = localStorage.getItem(storageKeyFor());
+			return raw === 'light' || raw === 'dark' || raw === 'system' ? raw : 'system';
+		} catch {
+			return 'system';
+		}
+	};
+
+	const resolve = (choice: ThemeChoice): ResolvedTheme =>
+		choice === 'system' ? (osPrefersDark() ? 'dark' : 'light') : choice;
+
+	let choice = $state<ThemeChoice>('system');
+	let resolved = $state<ResolvedTheme>('light');
+	let listeningMq: MediaQueryList | null = null;
+
+	const apply = () => {
+		if (typeof document !== 'undefined') document.documentElement.dataset.theme = resolved;
+	};
+	const persist = () => {
+		if (typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(storageKeyFor(), choice);
+		} catch {
+			/* blocked storage — the attribute still flips for this session */
+		}
+	};
+
+	return {
+		get choice(): ThemeChoice {
+			return choice;
+		},
+		get resolved(): ResolvedTheme {
+			return resolved;
+		},
+		adopt() {
+			choice = readStoredChoice();
+			const attr = typeof document !== 'undefined' ? document.documentElement.dataset.theme : undefined;
+			if (attr === 'dark' || attr === 'light') {
+				resolved = attr;
+			} else {
+				resolved = resolve(choice);
+				apply();
+			}
+			this.listen();
+		},
+		set(next: ThemeChoice) {
+			choice = next;
+			resolved = resolve(next);
+			persist();
+			apply();
+		},
+		listen() {
+			if (typeof window === 'undefined' || !window.matchMedia) return;
+			const mq = window.matchMedia('(prefers-color-scheme: dark)');
+			if (listeningMq === mq) return; // one listener per media-query object
+			listeningMq = mq;
+			mq.addEventListener('change', (e) => {
+					if (choice !== 'system') return; // pinned ignores the OS
+					resolved = e.matches ? 'dark' : 'light';
+					apply();
+				});
+		}
+	};
+}