@rokkit/app 1.3.4 → 1.3.6

package/{src/components/index.ts → dist/components/index.js}

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

package/dist/index.js

@@ -0,0 +1,6 @@
+// Components
+export { ThemeSwitcherToggle, SkinSwitcherToggle, TableOfContents } from './components/index.js';
+// Types
+export * from './types/index.js';
+// Utilities
+export { ColorModeManager, resolveMode } from './utils/color-mode.svelte.js';

package/dist/types/index.js

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

package/dist/types/skin-switcher.js

@@ -0,0 +1,8 @@
+export function buildSkinSwitcherOptions(skins, labels = {}) {
+    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/dist/types/theme-switcher.js

@@ -0,0 +1,24 @@
+/**
+ * ThemeSwitcherToggle Types
+ *
+ * Types and defaults for the theme mode switcher component.
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';
+import { messages } from '@rokkit/states';
+export const defaultThemeSwitcherIcons = {
+    system: DEFAULT_STATE_ICONS.mode.system,
+    light: DEFAULT_STATE_ICONS.mode.light,
+    dark: DEFAULT_STATE_ICONS.mode.dark
+};
+/**
+ * Build toggle options from icons, modes, and labels
+ */
+export function buildThemeSwitcherOptions(icons, modes, labels = {}) {
+    const mergedLabels = { ...messages.mode, ...labels };
+    const all = [
+        { 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));
+}

package/dist/utils/color-mode.svelte.js

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ */
+/**
+ * Resolve a ColorMode to an actual light/dark value.
+ * When 'system', queries the OS preference via matchMedia.
+ */
+export function resolveMode(mode) {
+    if (mode === 'system') {
+        if (typeof window !== 'undefined') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return 'dark'; // SSR: no window
+    }
+    return mode;
+}
+/**
+ * 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('system');
+    #resolved = $state('dark');
+    #target;
+    constructor(target, initialMode = 'system') {
+        this.#target = target;
+        this.#mode = initialMode;
+        // 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() {
+        return this.#mode;
+    }
+    set mode(value) {
+        if (value === this.#mode)
+            return;
+        this.#mode = value;
+        this.#resolved = resolveMode(value);
+        this.#target.mode = this.#resolved;
+    }
+    get resolved() {
+        return this.#resolved;
+    }
+    /**
+     * Start listening for OS preference changes.
+     * Returns a cleanup function to stop listening.
+     * Call in onMount or $effect.root.
+     */
+    listen() {
+        /* v8 ignore next -- SSR path: window is undefined in Node/server environments */
+        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);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/app",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "App-level controls for Rokkit applications - theme management and UI chrome",
   "repository": {
     "type": "git",
@@ -10,38 +10,37 @@
   "publishConfig": {
     "access": "public"
   },
-  "svelte": "./src/index.ts",
+  "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./src/index.ts",
-      "default": "./src/index.ts"
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./types": {
       "types": "./dist/types/index.d.ts",
-      "default": "./src/types/index.ts"
+      "default": "./dist/types/index.js"
     }
   },
   "files": [
-    "src",
-    "dist/**/*.d.ts",
+    "dist",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "prepublishOnly": "cp ../../LICENSE . && bun run build",
-    "postpublish": "rm -f LICENSE",
+    "prepublishOnly": "cp ../../LICENSE . && bun run build && node ../../config/pack-repoint.mjs",
+    "postpublish": "node ../../config/pack-repoint.mjs --restore && rm -f LICENSE",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "build": "svelte-package -i src -o dist"
   },
   "dependencies": {
-    "@rokkit/actions": "1.3.4",
-    "@rokkit/core": "1.3.4",
-    "@rokkit/states": "1.3.4",
-    "@rokkit/ui": "1.3.4"
+    "@rokkit/actions": "1.3.6",
+    "@rokkit/core": "1.3.6",
+    "@rokkit/states": "1.3.6",
+    "@rokkit/ui": "1.3.6"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/index.ts

@@ -1,13 +0,0 @@
-// Components
-export { ThemeSwitcherToggle, SkinSwitcherToggle, TableOfContents } 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

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

package/src/types/skin-switcher.ts

@@ -1,20 +0,0 @@
-// 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
-}
-
-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

@@ -1,116 +0,0 @@
-/**
- * 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
-	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 function buildThemeSwitcherOptions(
-	icons: Required<ThemeSwitcherIcons>,
-	modes: ColorMode[],
-	labels: ThemeSwitcherLabels = {}
-): ThemeSwitcherOption[] {
-	const mergedLabels = { ...messages.mode, ...labels }
-	const all: ThemeSwitcherOption[] = [
-		{ 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))
-}
-
-// =============================================================================
-// 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 {
-	/** 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/src/utils/color-mode.svelte.ts

@@ -1,96 +0,0 @@
-/**
- * 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' // SSR: no window
-	}
-	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
-		// 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 {
-		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 {
-		/* v8 ignore next -- SSR path: window is undefined in Node/server environments */
-		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)
-	}
-}