@rokkit/app 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/app",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "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.1.13",
-    "@rokkit/core": "1.1.13",
-    "@rokkit/states": "1.1.13",
-    "@rokkit/ui": "1.1.13"
+    "@rokkit/actions": "1.1.15",
+    "@rokkit/core": "1.1.15",
+    "@rokkit/states": "1.1.15",
+    "@rokkit/ui": "1.1.15"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/components/SkinSwitcherToggle.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { vibe } from '@rokkit/states'
+	import { Toggle } from '@rokkit/ui'
+	import { buildSkinSwitcherOptions } from '../types/skin-switcher.js'
+
+	let {
+		skins = undefined,
+		labels = {},
+		showLabels = false,
+		size = 'sm',
+		disabled = false,
+		class: className = '',
+		onchange
+	}: {
+		skins?: Array<string | { name: string; label?: string; icon?: string }>
+		labels?: Record<string, string>
+		showLabels?: boolean
+		size?: 'sm' | 'md' | 'lg'
+		disabled?: boolean
+		class?: string
+		onchange?: (skin: string) => void
+	} = $props()
+
+	const options = $derived(buildSkinSwitcherOptions(skins ?? vibe.allowedSkins, labels))
+	let value = $derived(vibe.skin)
+
+	function handleChange(newValue: unknown) {
+		vibe.skin = newValue as string
+		onchange?.(newValue as string)
+	}
+</script>
+
+<Toggle
+	variant="group"
+	{options}
+	{value}
+	onchange={handleChange}
+	{showLabels}
+	{size}
+	{disabled}
+	class={className}
+/>

package/src/components/TableOfContents.svelte

@@ -1,7 +1,7 @@
 <script>
 	// @ts-nocheck
-	import { navigable } from '@rokkit/actions'
 	import { onMount } from 'svelte'
+	import { keyboard } from '@rokkit/actions'
 
 	let { container = 'main-content' } = $props()
 
@@ -97,6 +97,13 @@
 		scrollToHeading(id)
 	}
 
+	// Arrow/Enter keys → previous/next/select events, dispatched by the `keyboard` action.
+	const navKeys = {
+		previous: ['ArrowUp', 'ArrowLeft'],
+		next: ['ArrowDown', 'ArrowRight'],
+		select: ['Enter', ' ']
+	}
+
 	onMount(() => {
 		scan()
 		observe()
@@ -112,7 +119,7 @@
 		bind:this={navEl}
 		data-toc
 		aria-label="On this page"
-		use:navigable
+		use:keyboard={navKeys}
 		onprevious={handlePrevious}
 		onnext={handleNext}
 		onselect={handleSelect}

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as ThemeSwitcherToggle } from './ThemeSwitcherToggle.svelte'
 export { default as TableOfContents } from './TableOfContents.svelte'
+export { default as SkinSwitcherToggle } from './SkinSwitcherToggle.svelte'

package/src/index.ts

@@ -1,5 +1,5 @@
 // Components
-export { ThemeSwitcherToggle, TableOfContents } from './components/index.js'
+export { ThemeSwitcherToggle, SkinSwitcherToggle, TableOfContents } from './components/index.js'
 
 // Types
 export * from './types/index.js'

package/src/types/index.ts

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

package/src/types/skin-switcher.ts

@@ -0,0 +1,17 @@
+export interface SkinSwitcherOption {
+	value: string
+	label: string
+	icon?: string
+}
+
+export function buildSkinSwitcherOptions(
+	skins: Array<string | { name: string; label?: string; icon?: string }>,
+	labels: Record<string, string> = {}
+): SkinSwitcherOption[] {
+	return skins.map((s) => {
+		const name = typeof s === 'string' ? s : s.name
+		const label = typeof s === 'string' ? (labels[s] ?? s) : (s.label ?? labels[s.name] ?? s.name)
+		const icon = typeof s === 'string' ? undefined : s.icon
+		return { value: name, label, icon }
+	})
+}

package/src/types/theme-switcher.ts

@@ -31,7 +31,7 @@ export const defaultThemeSwitcherIcons: Required<ThemeSwitcherIcons> = {
 
 export interface ThemeSwitcherOption {
 	value: ColorMode
-	text: string
+	label: string
 	icon: string
 	[key: string]: unknown
 }
@@ -52,9 +52,9 @@ export function buildThemeSwitcherOptions(
 ): ThemeSwitcherOption[] {
 	const mergedLabels = { ...messages.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 }
+		{ value: 'system', label: mergedLabels.system, icon: icons.system },
+		{ value: 'light', label: mergedLabels.light, icon: icons.light },
+		{ value: 'dark', label: mergedLabels.dark, icon: icons.dark }
 	]
 	return all.filter((o) => modes.includes(o.value))
 }