@rokkit/app 1.0.0-next.128

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@rokkit/app",
+  "version": "1.0.0-next.128",
+  "description": "App-level controls for Rokkit applications - theme management and UI chrome",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "svelte": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./types": {
+      "types": "./src/types/index.ts",
+      "default": "./src/types/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "echo 'No build step needed for source-only package'"
+  },
+  "dependencies": {
+    "@rokkit/core": "1.0.0-next.128",
+    "@rokkit/states": "1.0.0-next.128",
+    "@rokkit/ui": "1.0.0-next.128"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/browser": "^4.0.18",
+    "playwright": "^1.58.2",
+    "svelte": "^5.53.5",
+    "svelte-check": "^4.4.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  }
+}

package/src/components/ThemeSwitcherToggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { vibe } from '@rokkit/states'
+	import { Toggle } from '@rokkit/ui'
+	import type { ThemeSwitcherToggleProps } from '../types/theme-switcher.js'
+	import {
+		defaultThemeSwitcherIcons,
+		buildThemeSwitcherOptions
+	} from '../types/theme-switcher.js'
+	import { ColorModeManager, type ColorMode } from '../utils/color-mode.svelte.js'
+
+	let {
+		modes = ['system', 'light', 'dark'],
+		includeSystem = true,
+		icons: userIcons,
+		labels: userLabels = {},
+		showLabels = false,
+		size = 'sm',
+		disabled = false,
+		class: className = '',
+		item: itemSnippet,
+		onchange
+	}: ThemeSwitcherToggleProps = $props()
+
+	const icons = $derived({ ...defaultThemeSwitcherIcons, ...userIcons })
+	const effectiveModes = $derived(includeSystem ? modes : modes.filter((m) => m !== 'system'))
+	const options = $derived(buildThemeSwitcherOptions(icons, effectiveModes, userLabels))
+
+	const manager = new ColorModeManager(vibe)
+	let value = $derived(manager.mode)
+
+	onMount(() => {
+		return manager.listen()
+	})
+
+	function handleChange(newValue: unknown) {
+		const mode = newValue as ColorMode
+		manager.mode = mode
+		onchange?.(mode)
+	}
+</script>
+
+<Toggle
+	{options}
+	{value}
+	onchange={handleChange}
+	{showLabels}
+	{size}
+	{disabled}
+	class={className}
+	item={itemSnippet}
+/>

package/src/components/index.ts

@@ -0,0 +1 @@
+export { default as ThemeSwitcherToggle } from './ThemeSwitcherToggle.svelte'

package/src/index.ts

@@ -0,0 +1,13 @@
+// Components
+export { ThemeSwitcherToggle } from './components/index.js'
+
+// Types
+export * from './types/index.js'
+
+// Utilities
+export {
+	ColorModeManager,
+	resolveMode,
+	type ColorMode,
+	type ResolvedMode
+} from './utils/color-mode.svelte.js'

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './theme-switcher.js'

package/src/types/theme-switcher.ts

@@ -0,0 +1,96 @@
+/**
+ * ThemeSwitcherToggle Types
+ *
+ * Types and defaults for the theme mode switcher component.
+ */
+
+import type { ToggleItemSnippet } from '@rokkit/ui'
+import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+import { messages } from '@rokkit/states'
+import type { ColorMode } from '../utils/color-mode.svelte.js'
+
+// =============================================================================
+// Icons
+// =============================================================================
+
+export interface ThemeSwitcherIcons {
+	system?: string
+	light?: string
+	dark?: string
+}
+
+export const defaultThemeSwitcherIcons: Required<ThemeSwitcherIcons> = {
+	system: DEFAULT_STATE_ICONS.mode.system,
+	light: DEFAULT_STATE_ICONS.mode.light,
+	dark: DEFAULT_STATE_ICONS.mode.dark
+}
+
+// =============================================================================
+// Options
+// =============================================================================
+
+export interface ThemeSwitcherOption {
+	value: ColorMode
+	text: string
+	icon: string
+	[key: string]: unknown
+}
+
+export interface ThemeSwitcherLabels {
+	system?: string
+	light?: string
+	dark?: string
+}
+
+/**
+ * Build toggle options from icons, modes, and labels
+ */
+export function buildThemeSwitcherOptions(
+	icons: Required<ThemeSwitcherIcons>,
+	modes: ColorMode[],
+	labels: ThemeSwitcherLabels = {}
+): ThemeSwitcherOption[] {
+	const mergedLabels = { ...messages.current.mode, ...labels }
+	const all: ThemeSwitcherOption[] = [
+		{ value: 'system', text: mergedLabels.system, icon: icons.system },
+		{ value: 'light', text: mergedLabels.light, icon: icons.light },
+		{ value: 'dark', text: mergedLabels.dark, icon: icons.dark }
+	]
+	return all.filter((o) => modes.includes(o.value))
+}
+
+// =============================================================================
+// Component Props
+// =============================================================================
+
+export interface ThemeSwitcherToggleProps {
+	/** Which modes to show. Default: ['system', 'light', 'dark'] */
+	modes?: ColorMode[]
+
+	/** Whether to include system mode. Default: true. Shortcut for filtering 'system' from modes. */
+	includeSystem?: boolean
+
+	/** Override icons per mode */
+	icons?: ThemeSwitcherIcons
+
+	/** Override labels per mode. Merged over messages.current.mode */
+	labels?: ThemeSwitcherLabels
+
+	/** Show text labels alongside icons. Default: false */
+	showLabels?: boolean
+
+	/** Size variant. Default: 'sm' */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Disabled state */
+	disabled?: boolean
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Custom snippet for rendering toggle items */
+	item?: ToggleItemSnippet
+
+	/** Called when mode changes */
+	onchange?: (mode: ColorMode) => void
+}

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

@@ -0,0 +1,82 @@
+/**
+ * Color Mode Manager
+ *
+ * Bridges three-mode UI (system/light/dark) with vibe's two-mode store (light/dark).
+ * Resolves 'system' to actual OS preference via matchMedia.
+ */
+
+export type ColorMode = 'system' | 'light' | 'dark'
+export type ResolvedMode = 'light' | 'dark'
+
+/**
+ * Resolve a ColorMode to an actual light/dark value.
+ * When 'system', queries the OS preference via matchMedia.
+ */
+export function resolveMode(mode: ColorMode): ResolvedMode {
+	if (mode === 'system') {
+		if (typeof window !== 'undefined') {
+			return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		}
+		return 'dark'
+	}
+	return mode
+}
+
+/**
+ * Theme target interface — anything with a settable mode property.
+ * Compatible with the vibe singleton from @rokkit/states.
+ */
+interface ThemeTarget {
+	mode: string
+}
+
+/**
+ * Reactive color mode manager that tracks system/light/dark,
+ * resolves to actual light/dark, and syncs to a theme target (e.g. vibe).
+ */
+export class ColorModeManager {
+	#mode = $state<ColorMode>('system')
+	#resolved = $state<ResolvedMode>('dark')
+	#target: ThemeTarget
+
+	constructor(target: ThemeTarget, initialMode: ColorMode = 'system') {
+		this.#target = target
+		this.#mode = initialMode
+		this.#resolved = resolveMode(initialMode)
+		this.#target.mode = this.#resolved
+	}
+
+	get mode(): ColorMode {
+		return this.#mode
+	}
+
+	set mode(value: ColorMode) {
+		if (value === this.#mode) return
+		this.#mode = value
+		this.#resolved = resolveMode(value)
+		this.#target.mode = this.#resolved
+	}
+
+	get resolved(): ResolvedMode {
+		return this.#resolved
+	}
+
+	/**
+	 * Start listening for OS preference changes.
+	 * Returns a cleanup function to stop listening.
+	 * Call in onMount or $effect.root.
+	 */
+	listen(): () => void {
+		if (typeof window === 'undefined') return () => {}
+
+		const mq = window.matchMedia('(prefers-color-scheme: dark)')
+		const handler = () => {
+			if (this.#mode === 'system') {
+				this.#resolved = resolveMode('system')
+				this.#target.mode = this.#resolved
+			}
+		}
+		mq.addEventListener('change', handler)
+		return () => mq.removeEventListener('change', handler)
+	}
+}