@rokkit/app 1.0.5 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/app",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "App-level controls for Rokkit applications - theme management and UI chrome",
   "repository": {
     "type": "git",
@@ -37,10 +37,10 @@
     "build": "echo 'No build step needed for source-only package'"
   },
   "dependencies": {
-    "@rokkit/actions": "1.0.5",
-    "@rokkit/core": "1.0.5",
-    "@rokkit/states": "1.0.5",
-    "@rokkit/ui": "1.0.5"
+    "@rokkit/actions": "1.1.1",
+    "@rokkit/core": "1.1.1",
+    "@rokkit/states": "1.1.1",
+    "@rokkit/ui": "1.1.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/components/ThemeSwitcherToggle.svelte

@@ -7,6 +7,7 @@
 	import { ColorModeManager, type ColorMode } from '../utils/color-mode.svelte.js'
 
 	let {
+		variant = 'triad',
 		modes = ['system', 'light', 'dark'],
 		includeSystem = true,
 		icons: userIcons,
@@ -20,9 +21,18 @@
 	}: ThemeSwitcherToggleProps = $props()
 
 	const icons = $derived({ ...defaultThemeSwitcherIcons, ...userIcons })
-	const effectiveModes = $derived(includeSystem ? modes : modes.filter((m) => m !== 'system'))
+
+	// `single` and `pair` exclude system; `triad` honors `modes` + `includeSystem`.
+	const effectiveModes = $derived.by<ColorMode[]>(() => {
+		if (variant === 'single' || variant === 'pair') return ['light', 'dark']
+		return includeSystem ? modes : modes.filter((m) => m !== 'system')
+	})
+
 	const options = $derived(buildThemeSwitcherOptions(icons, effectiveModes, userLabels))
 
+	// `single` → Toggle's button variant (cycles); `pair` / `triad` → group.
+	const toggleVariant = $derived<'button' | 'group'>(variant === 'single' ? 'button' : 'group')
+
 	const manager = new ColorModeManager(vibe)
 	let value = $derived(manager.mode)
 
@@ -38,6 +48,7 @@
 </script>
 
 <Toggle
+	variant={toggleVariant}
 	{options}
 	{value}
 	onchange={handleChange}

package/src/types/theme-switcher.ts

@@ -63,11 +63,31 @@ export function buildThemeSwitcherOptions(
 // Component Props
 // =============================================================================
 
+/**
+ * Visual variant.
+ * - `'single'` — one icon-only button that cycles between light and dark on click.
+ *   System mode is not part of the cycle. The icon shows the mode you'd switch *to*.
+ * - `'pair'`   — two buttons: light and dark. Equivalent to `includeSystem={false}`
+ *   for the legacy triad UI.
+ * - `'triad'`  — three buttons: system, light, dark. Default.
+ */
+export type ThemeSwitcherVariant = 'single' | 'pair' | 'triad'
+
 export interface ThemeSwitcherToggleProps {
-	/** Which modes to show. Default: ['system', 'light', 'dark'] */
+	/** Visual variant. Default: 'triad'. */
+	variant?: ThemeSwitcherVariant
+
+	/**
+	 * Which modes to show. Only honored for `variant: 'triad'`.
+	 * Default: `['system', 'light', 'dark']`.
+	 */
 	modes?: ColorMode[]
 
-	/** Whether to include system mode. Default: true. Shortcut for filtering 'system' from modes. */
+	/**
+	 * Whether to include system mode. Default: true. Shortcut for filtering 'system'
+	 * from modes. Only honored for `variant: 'triad'`. For `'pair'` and `'single'`
+	 * system is never included.
+	 */
 	includeSystem?: boolean
 
 	/** Override icons per mode */
@@ -76,7 +96,7 @@ export interface ThemeSwitcherToggleProps {
 	/** Override labels per mode. Merged over messages.mode */
 	labels?: ThemeSwitcherLabels
 
-	/** Show text labels alongside icons. Default: false */
+	/** Show text labels alongside icons. Ignored for `variant: 'single'`. Default: false */
 	showLabels?: boolean
 
 	/** Size variant. Default: 'sm' */
@@ -88,7 +108,7 @@ export interface ThemeSwitcherToggleProps {
 	/** Additional CSS classes */
 	class?: string
 
-	/** Custom snippet for rendering toggle items */
+	/** Custom snippet for rendering toggle items (only honored for `'pair'` / `'triad'`) */
 	item?: ToggleItemSnippet
 
 	/** Called when mode changes */

package/src/utils/color-mode.svelte.ts

@@ -42,8 +42,21 @@ export class ColorModeManager {
 	constructor(target: ThemeTarget, initialMode: ColorMode = 'system') {
 		this.#target = target
 		this.#mode = initialMode
-		this.#resolved = resolveMode(initialMode)
-		this.#target.mode = this.#resolved
+		// Don't override target.mode at construction. If the target already
+		// has a meaningful light/dark value (loaded from storage, set by the
+		// flash-prevention init script, or persisted by a prior session),
+		// adopt it as the resolved state. Only fall back to deriving from
+		// `initialMode` when the target has no value to read.
+		//
+		// Without this guard, every mount of a consumer like
+		// `<ThemeSwitcherToggle/>` flipped target.mode to OS preference,
+		// causing user-visible mode changes on navigation between routes.
+		if (target.mode === 'light' || target.mode === 'dark') {
+			this.#resolved = target.mode
+		} else {
+			this.#resolved = resolveMode(initialMode)
+			this.#target.mode = this.#resolved
+		}
 	}
 
 	get mode(): ColorMode {