@rokkit/app 1.1.18 → 1.2.0

package/dist/components/SkinSwitcherToggle.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    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;
+};
+declare const SkinSwitcherToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkinSwitcherToggle = ReturnType<typeof SkinSwitcherToggle>;
+export default SkinSwitcherToggle;

package/dist/components/TableOfContents.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    container?: string;
+};
+declare const TableOfContents: import("svelte").Component<$$ComponentProps, {
+    rescan: () => void;
+}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

package/dist/components/ThemeSwitcherToggle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ThemeSwitcherToggleProps } from '../types/theme-switcher.js';
+declare const ThemeSwitcherToggle: import("svelte").Component<ThemeSwitcherToggleProps, {}, "">;
+type ThemeSwitcherToggle = ReturnType<typeof ThemeSwitcherToggle>;
+export default ThemeSwitcherToggle;

package/dist/components/index.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeSwitcherToggle, SkinSwitcherToggle, TableOfContents } from './components/index.js';
+export * from './types/index.js';
+export { ColorModeManager, resolveMode, type ColorMode, type ResolvedMode } from './utils/color-mode.svelte.js';

package/dist/types/index.d.ts

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

package/dist/types/skin-switcher.d.ts

@@ -0,0 +1,10 @@
+export type SkinSwitcherOption = {
+    value: string;
+    label: string;
+    icon?: string;
+};
+export declare function buildSkinSwitcherOptions(skins: Array<string | {
+    name: string;
+    label?: string;
+    icon?: string;
+}>, labels?: Record<string, string>): SkinSwitcherOption[];

package/dist/types/theme-switcher.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ThemeSwitcherToggle Types
+ *
+ * Types and defaults for the theme mode switcher component.
+ */
+import type { ToggleItemSnippet } from '@rokkit/ui';
+import type { ColorMode } from '../utils/color-mode.svelte.js';
+export interface ThemeSwitcherIcons {
+    system?: string;
+    light?: string;
+    dark?: string;
+}
+export declare const defaultThemeSwitcherIcons: Required<ThemeSwitcherIcons>;
+export interface ThemeSwitcherOption {
+    value: ColorMode;
+    label: string;
+    icon: string;
+    [key: string]: unknown;
+}
+export interface ThemeSwitcherLabels {
+    system?: string;
+    light?: string;
+    dark?: string;
+}
+/**
+ * Build toggle options from icons, modes, and labels
+ */
+export declare function buildThemeSwitcherOptions(icons: Required<ThemeSwitcherIcons>, modes: ColorMode[], labels?: ThemeSwitcherLabels): ThemeSwitcherOption[];
+/**
+ * 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 {
+    /** 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. Only honored for `variant: 'triad'`. For `'pair'` and `'single'`
+     * system is never included.
+     */
+    includeSystem?: boolean;
+    /** Override icons per mode */
+    icons?: ThemeSwitcherIcons;
+    /** Override labels per mode. Merged over messages.mode */
+    labels?: ThemeSwitcherLabels;
+    /** Show text labels alongside icons. Ignored for `variant: 'single'`. 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 (only honored for `'pair'` / `'triad'`) */
+    item?: ToggleItemSnippet;
+    /** Called when mode changes */
+    onchange?: (mode: ColorMode) => void;
+}

package/dist/utils/color-mode.svelte.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 declare function resolveMode(mode: ColorMode): ResolvedMode;
+/**
+ * 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 declare class ColorModeManager {
+    #private;
+    constructor(target: ThemeTarget, initialMode?: ColorMode);
+    get mode(): ColorMode;
+    set mode(value: ColorMode);
+    get resolved(): ResolvedMode;
+    /**
+     * Start listening for OS preference changes.
+     * Returns a cleanup function to stop listening.
+     * Call in onMount or $effect.root.
+     */
+    listen(): () => void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/app",
-  "version": "1.1.18",
+  "version": "1.2.0",
   "description": "App-level controls for Rokkit applications - theme management and UI chrome",
   "repository": {
     "type": "git",
@@ -11,41 +11,43 @@
     "access": "public"
   },
   "svelte": "./src/index.ts",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "svelte": "./src/index.ts",
       "default": "./src/index.ts"
     },
     "./types": {
-      "types": "./src/types/index.ts",
+      "types": "./dist/types/index.d.ts",
       "default": "./src/types/index.ts"
     }
   },
   "files": [
     "src",
+    "dist/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "prepublishOnly": "cp ../../LICENSE .",
+    "prepublishOnly": "cp ../../LICENSE . && bun run build",
     "postpublish": "rm -f LICENSE",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "build": "echo 'No build step needed for source-only package'"
+    "build": "svelte-package -i src -o dist"
   },
   "dependencies": {
-    "@rokkit/actions": "1.1.18",
-    "@rokkit/core": "1.1.18",
-    "@rokkit/states": "1.1.18",
-    "@rokkit/ui": "1.1.18"
+    "@rokkit/actions": "1.2.0",
+    "@rokkit/core": "1.2.0",
+    "@rokkit/states": "1.2.0",
+    "@rokkit/ui": "1.2.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",

package/src/components/TableOfContents.svelte

@@ -1,18 +1,19 @@
-<script>
-	// @ts-nocheck
+<script lang="ts">
 	import { onMount } from 'svelte'
 	import { keyboard } from '@rokkit/actions'
 
-	let { container = 'main-content' } = $props()
+	type Heading = { id: string; text: string; level: string }
 
-	let headings = $state([])
+	let { container = 'main-content' }: { container?: string } = $props()
+
+	let headings = $state<Heading[]>([])
 	let activeId = $state('')
 	let focusedIndex = $state(0)
-	let navEl = $state(null)
-	let observer = null
-	let scrollLockTimer = null
+	let navEl = $state<HTMLElement | null>(null)
+	let observer: IntersectionObserver | null = null
+	let scrollLockTimer: ReturnType<typeof setTimeout> | null = null
 
-	function slugify(text) {
+	function slugify(text: string | null) {
 		return (text ?? '')
 			.toLowerCase()
 			.trim()
@@ -40,7 +41,7 @@
 		observer?.disconnect()
 		const main = getContainer()
 		if (!main || headings.length === 0) return
-		observer = new IntersectionObserver(
+		const obs = new IntersectionObserver(
 			(entries) => {
 				const visible = entries
 					.filter((e) => e.isIntersecting)
@@ -49,17 +50,18 @@
 			},
 			{ root: main, rootMargin: '-5% 0px -70% 0px' }
 		)
+		observer = obs
 		headings.forEach(({ id }) => {
 			const el = document.getElementById(id)
-			if (el) observer.observe(el)
+			if (el) obs.observe(el)
 		})
 	}
 
-	function scrollToHeading(id) {
-		const el = document.getElementById(id)
+	function scrollToHeading(id: string | undefined) {
+		const el = document.getElementById(id ?? '')
 		const main = getContainer()
 		if (!el || !main) return
-		clearTimeout(scrollLockTimer)
+		clearTimeout(scrollLockTimer ?? undefined)
 		scrollLockTimer = setTimeout(() => {
 			scrollLockTimer = null
 		}, 1000)
@@ -74,7 +76,7 @@
 	}
 
 	function getItems() {
-		return navEl?.querySelectorAll('[data-toc-item]') ?? []
+		return navEl?.querySelectorAll<HTMLElement>('[data-toc-item]') ?? []
 	}
 
 	function handlePrevious() {
@@ -109,7 +111,7 @@
 		observe()
 		return () => {
 			observer?.disconnect()
-			clearTimeout(scrollLockTimer)
+			clearTimeout(scrollLockTimer ?? undefined)
 		}
 	})
 </script>

package/src/types/skin-switcher.ts

@@ -1,4 +1,7 @@
-export interface SkinSwitcherOption {
+// A `type` alias (not an `interface`) so it satisfies the
+// `Record<string, unknown>` index signature that Toggle's `ToggleItem`
+// expects — TS interfaces don't implicitly carry an index signature.
+export type SkinSwitcherOption = {
 	value: string
 	label: string
 	icon?: string