rune-lab 0.0.21 → 0.1.1

package/dist/layout/WorkspaceLayout.svelte

@@ -1,6 +1,33 @@
 <!-- src/lib/layout/WorkspaceLayout.svelte -->
-<script lang="ts">
+<script module lang="ts">
     import type { Snippet } from "svelte";
+
+    export interface WorkspaceLayoutProps {
+        /** Content for the far-left vertical strip */
+        workspaceStrip?: Snippet;
+        /** Main navigation tree panel */
+        navigationPanel?: Snippet;
+        /** The primary application view */
+        content?: Snippet;
+        /** Right-side contextual detail panel */
+        detailPanel?: Snippet;
+        namespace?: string;
+
+        /** Width of the left workspace strip */
+        stripWidth?: string;
+        /** Width of the navigation tree panel */
+        navWidth?: string;
+        /** Width of the contextual detail panel */
+        detailWidth?: string;
+
+        /** Controlled override for navigation panel visibility */
+        navOpen?: boolean;
+        /** Controlled override for detail panel visibility */
+        detailOpen?: boolean;
+    }
+</script>
+
+<script lang="ts">
     import { getLayoutStore } from "../state/layout.svelte";
     import {
         getShortcutStore,
@@ -9,22 +36,36 @@
     } from "../state/shortcuts.svelte";
     import { onMount } from "svelte";
 
+    /**
+     * @component WorkspaceLayout
+     * The main application shell managing navigational zones.
+     */
+    const layoutStore = getLayoutStore();
+
     let {
+        /** Content for the far-left vertical strip */
         workspaceStrip,
+        /** Main navigation tree panel */
         navigationPanel,
+        /** The primary application view */
         content,
+        /** Right-side contextual detail panel */
         detailPanel,
         namespace = "default",
-    } = $props<{
-        workspaceStrip?: Snippet;
-        navigationPanel?: Snippet;
-        content: Snippet;
-        detailPanel?: Snippet;
-        namespace?: string;
-    }>();
 
-    // Consume layout store from context (provided by RuneProvider)
-    const layoutStore = getLayoutStore();
+        /** Width of the left workspace strip */
+        stripWidth = "72px",
+        /** Width of the navigation tree panel */
+        navWidth = "240px",
+        /** Width of the contextual detail panel */
+        detailWidth = "320px",
+
+        /** Controlled override for navigation panel visibility */
+        navOpen = $bindable(layoutStore.navOpen),
+        /** Controlled override for detail panel visibility */
+        detailOpen = $bindable(layoutStore.detailOpen),
+    }: WorkspaceLayoutProps = $props();
+
     const shortcutStore = getShortcutStore();
 
     // Initial configuration based on props
@@ -35,17 +76,18 @@
         const shortcuts = [
             {
                 ...LAYOUT_SHORTCUTS.TOGGLE_NAV,
-                handler: () => layoutStore.toggleNav(),
+                handler: (e: KeyboardEvent) => {
+                    e.preventDefault();
+                    navOpen = !navOpen;
+                },
             },
             {
                 ...LAYOUT_SHORTCUTS.TOGGLE_DETAIL,
-                handler: () => layoutStore.toggleDetail(),
+                handler: (e: KeyboardEvent) => {
+                    e.preventDefault();
+                    detailOpen = !detailOpen;
+                },
             },
-            // Workspace shortcuts (ctrl+1 to ctrl+9)
-            ...Array.from({ length: 9 }, (_, i) => ({
-                ...(LAYOUT_SHORTCUTS as any)[`WORKSPACE_${i + 1}`],
-                handler: () => layoutStore.activateWorkspaceByIndex(i),
-            })),
         ];
 
         for (const s of shortcuts) {
@@ -55,11 +97,6 @@
         return () => {
             shortcutStore.unregister(LAYOUT_SHORTCUTS.TOGGLE_NAV.id);
             shortcutStore.unregister(LAYOUT_SHORTCUTS.TOGGLE_DETAIL.id);
-            for (let i = 1; i <= 9; i++) {
-                shortcutStore.unregister(
-                    (LAYOUT_SHORTCUTS as any)[`WORKSPACE_${i}`].id,
-                );
-            }
         };
     });
 </script>
@@ -79,10 +116,11 @@
     {/if}
 
     <!-- Mobile Nav Backdrop -->
-    {#if navigationPanel && layoutStore.navOpen}
+    {#if navigationPanel && navOpen}
         <button
-            class="fixed inset-0 bg-black/50 z-[40] md:hidden cursor-default border-none"
-            onclick={() => (layoutStore.navOpen = false)}
+            class="fixed inset-0 bg-black/50 md:hidden cursor-default border-none"
+            style="z-index: var(--rl-z-backdrop, 40);"
+            onclick={() => (navOpen = false)}
             aria-label="Close navigation"
         ></button>
     {/if}
@@ -90,19 +128,18 @@
     <!-- Zone 2: Navigation Panel -->
     {#if navigationPanel}
         <aside
-            class="rl-nav h-full shrink-0 bg-base-200 overflow-hidden flex flex-col transition-all duration-300 ease-in-out z-[50]"
-            class:border-r={layoutStore.navOpen}
+            class="rl-nav h-full shrink-0 bg-base-200 overflow-hidden flex flex-col transition-all duration-300 ease-in-out"
+            class:border-r={navOpen}
             class:border-base-content={true}
             style="
                 border-opacity: 0.05;
-                width: {layoutStore.navOpen
-                ? 'var(--rl-nav-width, 240px)'
-                : '0px'};
+                z-index: var(--rl-z-nav, 50);
+                width: {navOpen ? 'var(--rl-nav-width, 240px)' : '0px'};
                 left: {workspaceStrip ? 'var(--rl-strip-width, 72px)' : '0px'};
             "
             class:max-md:!w-[var(--rl-nav-width,240px)]={true}
             class:max-md:fixed={true}
-            class:max-md:-translate-x-[200%]={!layoutStore.navOpen}
+            class:max-md:-translate-x-[200%]={!navOpen}
             data-rl-panel="navigation"
         >
             <div class="w-[var(--rl-nav-width,240px)] h-full flex flex-col">
@@ -115,14 +152,19 @@
     <main
         class="rl-content h-full flex-1 min-w-0 bg-base-100 flex flex-col overflow-hidden relative"
     >
-        {@render content()}
+        {#if content}
+            {@render content()}
+        {:else}
+            <div></div>
+        {/if}
     </main>
 
     <!-- Mobile Detail Backdrop -->
-    {#if detailPanel && layoutStore.detailOpen}
+    {#if detailPanel && detailOpen}
         <button
-            class="fixed inset-0 bg-black/50 z-[40] md:hidden cursor-default border-none"
-            onclick={() => (layoutStore.detailOpen = false)}
+            class="fixed inset-0 bg-black/50 md:hidden cursor-default border-none"
+            style="z-index: var(--rl-z-backdrop, 40);"
+            onclick={() => (detailOpen = false)}
             aria-label="Close detail panel"
         ></button>
     {/if}
@@ -130,14 +172,13 @@
     <!-- Zone 4: Detail Panel -->
     {#if detailPanel}
         <aside
-            class="rl-detail h-full shrink-0 bg-base-100 overflow-y-auto overflow-x-hidden transition-all duration-300 ease-in-out z-[50]"
-            class:border-l={layoutStore.detailOpen}
+            class="rl-detail h-full shrink-0 bg-base-100 overflow-y-auto overflow-x-hidden transition-all duration-300 ease-in-out"
+            class:border-l={detailOpen}
             class:border-base-content={true}
             style="
                 border-opacity: 0.05;
-                width: {layoutStore.detailOpen
-                ? 'var(--rl-detail-width, 320px)'
-                : '0px'};
+                z-index: var(--rl-z-detail, 50);
+                width: {detailOpen ? 'var(--rl-detail-width, 320px)' : '0px'};
             "
             class:max-md:!w-[var(--rl-detail-width,320px)]={true}
             class:max-md:fixed={true}

package/dist/layout/WorkspaceLayout.svelte.d.ts

@@ -1,11 +1,25 @@
 import type { Snippet } from "svelte";
-type $$ComponentProps = {
+export interface WorkspaceLayoutProps {
+    /** Content for the far-left vertical strip */
     workspaceStrip?: Snippet;
+    /** Main navigation tree panel */
     navigationPanel?: Snippet;
-    content: Snippet;
+    /** The primary application view */
+    content?: Snippet;
+    /** Right-side contextual detail panel */
     detailPanel?: Snippet;
     namespace?: string;
-};
-declare const WorkspaceLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+    /** Width of the left workspace strip */
+    stripWidth?: string;
+    /** Width of the navigation tree panel */
+    navWidth?: string;
+    /** Width of the contextual detail panel */
+    detailWidth?: string;
+    /** Controlled override for navigation panel visibility */
+    navOpen?: boolean;
+    /** Controlled override for detail panel visibility */
+    detailOpen?: boolean;
+}
+declare const WorkspaceLayout: import("svelte").Component<WorkspaceLayoutProps, {}, "navOpen" | "detailOpen">;
 type WorkspaceLayout = ReturnType<typeof WorkspaceLayout>;
 export default WorkspaceLayout;

package/dist/persistence/drivers.js

@@ -1,3 +1,4 @@
+import { browser } from "$app/environment";
 export function createInMemoryDriver() {
     const store = new Map();
     return {
@@ -9,50 +10,48 @@ export function createInMemoryDriver() {
 export const inMemoryDriver = createInMemoryDriver();
 export const localStorageDriver = {
     get: (key) => {
-        if (typeof window === "undefined")
+        if (!browser)
             return null;
         return window.localStorage.getItem(key);
     },
     set: (key, value) => {
-        if (typeof window === "undefined")
+        if (!browser)
             return;
         window.localStorage.setItem(key, value);
     },
     remove: (key) => {
-        if (typeof window === "undefined")
+        if (!browser)
             return;
         window.localStorage.removeItem(key);
     },
 };
 export const sessionStorageDriver = {
     get: (key) => {
-        if (typeof window === "undefined")
+        if (!browser)
             return null;
         return window.sessionStorage.getItem(key);
     },
     set: (key, value) => {
-        if (typeof window === "undefined")
+        if (!browser)
             return;
         window.sessionStorage.setItem(key, value);
     },
     remove: (key) => {
-        if (typeof window === "undefined")
+        if (!browser)
             return;
         window.sessionStorage.removeItem(key);
     },
 };
 export const cookieDriver = (options = {}) => ({
     get: (key) => {
-        if (typeof window === "undefined" || typeof document === "undefined") {
+        if (!browser)
             return null;
-        }
         const match = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
         return match ? decodeURIComponent(match[2]) : null;
     },
     set: (key, value) => {
-        if (typeof window === "undefined" || typeof document === "undefined") {
+        if (!browser)
             return;
-        }
         let cookie = `${key}=${encodeURIComponent(value)}`;
         if (options.path)
             cookie += `; path=${options.path}`;
@@ -63,9 +62,8 @@ export const cookieDriver = (options = {}) => ({
         document.cookie = cookie;
     },
     remove: (key) => {
-        if (typeof window === "undefined" || typeof document === "undefined") {
+        if (!browser)
             return;
-        }
         document.cookie = `${key}=; max-age=0; path=${options.path || "/"}`;
     },
 });

package/dist/server/index.d.ts

@@ -0,0 +1,15 @@
+import type { Handle } from "@sveltejs/kit";
+/**
+ * A SvelteKit Handle hook that prevents Flash of Unstyled Content (FOUC)
+ * by injecting the saved theme straight into the HTML before it leaves the server.
+ *
+ * @example
+ * ```ts
+ * // src/hooks.server.ts
+ * import { sequence } from "@sveltejs/kit/hooks";
+ * import { runeLabThemeHandler } from "rune-lab/server";
+ *
+ * export const handle = sequence(runeLabThemeHandler);
+ * ```
+ */
+export declare const runeLabThemeHandler: Handle;

package/dist/server/index.js

@@ -0,0 +1,20 @@
+/**
+ * A SvelteKit Handle hook that prevents Flash of Unstyled Content (FOUC)
+ * by injecting the saved theme straight into the HTML before it leaves the server.
+ *
+ * @example
+ * ```ts
+ * // src/hooks.server.ts
+ * import { sequence } from "@sveltejs/kit/hooks";
+ * import { runeLabThemeHandler } from "rune-lab/server";
+ *
+ * export const handle = sequence(runeLabThemeHandler);
+ * ```
+ */
+export const runeLabThemeHandler = async ({ event, resolve }) => {
+    // Assuming 'theme' is the default storageKey mapped from cookieDriver
+    const theme = event.cookies.get("theme") || "system";
+    return resolve(event, {
+        transformPageChunk: ({ html }) => html.replace("<html", `<html data-theme="${theme}"`),
+    });
+};

package/dist/showcase/AppStateInspector.svelte

@@ -1,4 +1,15 @@
 <script lang="ts">
+    import { getContext } from "svelte";
+
+    /**
+     * @devOnly Renders a live debug view of all Rune Lab store state.
+     * Should only be rendered in development:
+     * ```svelte
+     * {#if import.meta.env.DEV}
+     *     <AppStateInspector />
+     * {/if}
+     * ```
+     */
     import * as m from "../paraglide/messages.js";
     import StoreDetailCard from "./StoreDetailCard.svelte";
     import { getAppStore } from "../state/app.svelte";
@@ -83,8 +94,15 @@
         }
     }
 
-    function t(fn: any, fallback: string) {
-        return typeof fn === "function" ? fn() : fallback;
+    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+
+    function t(key: string, fallback: string) {
+        if (dictionary[key]) {
+            return typeof dictionary[key] === "function"
+                ? dictionary[key]()
+                : dictionary[key];
+        }
+        return fallback;
     }
 </script>
 
@@ -94,11 +112,11 @@
     <div class="flex flex-col gap-2 px-4">
         <h2 class="text-3xl font-black tracking-tight flex items-center gap-3">
             <span class="p-2 bg-primary/10 rounded-xl">🔍</span>
-            {t(m.live_store_dashboard, "Live Store Dashboard")}
+            {t("live_store_dashboard", "Live Store Dashboard")}
         </h2>
         <p class="text-base-content/50 font-medium">
             {t(
-                m.real_time_monitor_desc,
+                "real_time_monitor_desc",
                 "Real-time reactive state monitor for Rune Lab stores",
             )}
         </p>
@@ -112,7 +130,7 @@
             <div
                 class="stat-title uppercase text-[10px] font-bold tracking-widest opacity-60"
             >
-                {t(m.api_status, "API Status")}
+                {t("api_status", "API Status")}
             </div>
             <div
                 class="stat-value capitalize {getStatusClass(
@@ -132,13 +150,13 @@
             <div
                 class="stat-title uppercase text-[10px] font-bold tracking-widest opacity-60"
             >
-                {t(m.active_toasts, "Active Toasts")}
+                {t("active_toasts", "Active Toasts")}
             </div>
             <div class="stat-value text-2xl">
                 {toastStore.toasts.length}
             </div>
             <div class="stat-desc font-mono text-[10px] opacity-50">
-                {t(m.currently_in_queue, "Currently in queue")}
+                {t("currently_in_queue", "Currently in queue")}
             </div>
         </div>
 
@@ -146,13 +164,13 @@
             <div
                 class="stat-title uppercase text-[10px] font-bold tracking-widest opacity-60"
             >
-                {t(m.commands_label, "Commands")}
+                {t("commands_label", "Commands")}
             </div>
             <div class="stat-value text-2xl">
                 {commandStore.commands.length}
             </div>
             <div class="stat-desc font-mono text-[10px] opacity-50">
-                {t(m.registered_in_registry, "Registered in registry")}
+                {t("registered_in_registry", "Registered in registry")}
             </div>
         </div>
     </div>

package/dist/showcase/Showcase.svelte

@@ -14,10 +14,11 @@
     { label: "Actions", icon: "⚡", component: Actions },
     { label: "Data Input", icon: "📥", component: DataInput },
     { label: "Display", icon: "📊", component: Display },
-    { label: "Navigation", icon: "🧭", component: Navigation },
     { label: "Feedback", icon: "💬", component: Feedback },
     { label: "Visual", icon: "🎨", component: Visual },
   ];
+
+  import { showcaseState } from "./state.svelte";
 </script>
 
 <section
@@ -27,11 +28,11 @@
     {#each tabs as tab, i (tab.label)}
       <button
         role="tab"
-        class="tab gap-2 transition-all duration-300 {layoutStore.activeShowcaseTab ===
+        class="tab gap-2 transition-all duration-300 {showcaseState.activeTab ===
         i
           ? 'tab-active shadow-lg'
           : ''}"
-        onclick={() => layoutStore.setShowcaseTab(i)}
+        onclick={() => (showcaseState.activeTab = i)}
       >
         <span class="text-xl">{tab.icon}</span>
         <span class="hidden md:inline font-bold">{tab.label}</span>
@@ -43,7 +44,7 @@
     class="min-h-[600px] bg-base-200/50 rounded-3xl border border-base-content/5 overflow-hidden"
   >
     {#each tabs as tab, i (tab.label)}
-      {#if layoutStore.activeShowcaseTab === i}
+      {#if showcaseState.activeTab === i}
         <div class="animate-in fade-in zoom-in-95 duration-500">
           <tab.component />
         </div>

package/dist/showcase/state.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const showcaseState: {
+    activeTab: number;
+};

package/dist/showcase/state.svelte.js

@@ -0,0 +1,3 @@
+export const showcaseState = $state({
+    activeTab: 0,
+});

package/dist/state/api.svelte.d.ts

@@ -3,6 +3,7 @@
  */
 export type ConnectionState = "connected" | "connecting" | "disconnected";
 export declare class ApiStore {
+    #private;
     url: string;
     version: string;
     connectionState: ConnectionState;
@@ -19,7 +20,7 @@ export declare class ApiStore {
     /**
      * Initialize API settings
      */
-    init(url: string, version?: string): void;
+    init(url: string, version?: string, healthCheck?: () => Promise<boolean>): void;
 }
 export declare function createApiStore(): ApiStore;
 export declare function getApiStore(): ApiStore;

package/dist/state/api.svelte.js

@@ -5,6 +5,7 @@ export class ApiStore {
     url = $state("http://localhost:8000");
     version = $state("v1");
     connectionState = $state("disconnected");
+    #healthCheck;
     // Derived
     isConnected = $derived(this.connectionState === "connected");
     isLoading = $derived(this.connectionState === "connecting");
@@ -26,10 +27,19 @@ export class ApiStore {
      */
     async reconnect() {
         this.connectionState = "connecting";
-        // Simulate connection
         try {
-            await new Promise((resolve) => setTimeout(resolve, 1500));
-            this.connectionState = "connected";
+            if (this.#healthCheck) {
+                const isHealthy = await this.#healthCheck();
+                this.connectionState = isHealthy ? "connected" : "disconnected";
+            }
+            else {
+                // Simulate connection if no health check provided
+                if (import.meta.env.DEV) {
+                    console.warn("[rune-lab] ApiStore: No healthCheck provided to init(). Using simulated connection delay.");
+                }
+                await new Promise((resolve) => setTimeout(resolve, 1500));
+                this.connectionState = "connected";
+            }
         }
         catch (e) {
             this.connectionState = "disconnected";
@@ -38,9 +48,11 @@ export class ApiStore {
     /**
      * Initialize API settings
      */
-    init(url, version = "v1") {
+    init(url, version = "v1", healthCheck) {
         this.url = url;
         this.version = version;
+        if (healthCheck)
+            this.#healthCheck = healthCheck;
         this.reconnect();
     }
 }

package/dist/state/app.svelte.d.ts

@@ -23,6 +23,7 @@ export declare class AppStore {
     repository: string;
     license: string;
     homepage: string;
+    customIcons: Record<string, string>;
     /**
      * Initialize app store with metadata
      */
@@ -31,6 +32,10 @@ export declare class AppStore {
      * Get full app information object
      */
     get info(): AppData;
+    /**
+     * Registers custom SVG icons to be available globally in the Icon component
+     */
+    registerIcons(icons: Record<string, string>): void;
 }
 export declare function createAppStore(): AppStore;
 export declare function getAppStore(): AppStore;

package/dist/state/app.svelte.js

@@ -14,6 +14,7 @@ export class AppStore {
     repository = $state("https://github.com/Yrrrrrf/rune-lab");
     license = $state("MIT");
     homepage = $state("https://jsr.io/@yrrrrrf/rune-lab");
+    customIcons = $state({});
     #initialized = false;
     /**
      * Initialize app store with metadata
@@ -55,6 +56,12 @@ export class AppStore {
             homepage: this.homepage,
         };
     }
+    /**
+     * Registers custom SVG icons to be available globally in the Icon component
+     */
+    registerIcons(icons) {
+        this.customIcons = { ...this.customIcons, ...icons };
+    }
 }
 // Export singleton instance
 export function createAppStore() {

package/dist/state/commands.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { AppStore } from "./app.svelte";
 import type { ApiStore } from "./api.svelte";
-import type { ConfigStore } from "../devtools/createConfigStore.svelte";
+import type { ConfigStore } from "./createConfigStore.svelte";
 import type { ToastStore } from "./toast.svelte";
 import type { Theme } from "./theme.svelte";
 import type { Language } from "./language.svelte";

package/dist/state/currency.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ConfigStore } from "../devtools/createConfigStore.svelte";
+import { type ConfigStore } from "./createConfigStore.svelte";
 /**
  * Currency configuration
  * Based on ISO 4217 currency codes

package/dist/state/currency.svelte.js

@@ -1,4 +1,4 @@
-import { createConfigStore, } from "../devtools/createConfigStore.svelte";
+import { createConfigStore, } from "./createConfigStore.svelte";
 import { getContext } from "svelte";
 import { RUNE_LAB_CONTEXT } from "../context";
 const CURRENCIES = [

package/dist/state/index.d.ts

@@ -1,9 +1,11 @@
 export { type AppData, AppStore, createAppStore, getAppStore, } from "./app.svelte";
 export { createLayoutStore, getLayoutStore, LayoutStore, type NavigationItem, type NavigationSection, type WorkspaceItem, } from "./layout.svelte";
-export { ApiStore, createApiStore, getApiStore } from "./api.svelte";
+export { ApiStore, type ConnectionState, createApiStore, getApiStore, } from "./api.svelte";
 export { createLanguageStore, getLanguageStore, type Language, } from "./language.svelte";
 export { createCurrencyStore, type Currency, getCurrencyStore, } from "./currency.svelte";
 export { createToastStore, getToastStore, ToastStore } from "./toast.svelte";
 export { type Command, CommandStore, createCommandStore, getCommandStore, } from "./commands.svelte";
 export { createShortcutStore, getShortcutStore, LAYOUT_SHORTCUTS, type ShortcutEntry, shortcutListener, type ShortcutMeta, ShortcutStore, } from "./shortcuts.svelte";
 export { createThemeStore, getThemeStore, type Theme } from "./theme.svelte";
+export { type ConfigStore, createConfigStore, } from "./createConfigStore.svelte";
+export { createToastBridge, notify } from "./toast-bridge";

package/dist/state/index.js

@@ -3,10 +3,12 @@
 // Stores
 export { AppStore, createAppStore, getAppStore, } from "./app.svelte";
 export { createLayoutStore, getLayoutStore, LayoutStore, } from "./layout.svelte";
-export { ApiStore, createApiStore, getApiStore } from "./api.svelte";
+export { ApiStore, createApiStore, getApiStore, } from "./api.svelte";
 export { createLanguageStore, getLanguageStore, } from "./language.svelte";
 export { createCurrencyStore, getCurrencyStore, } from "./currency.svelte";
 export { createToastStore, getToastStore, ToastStore } from "./toast.svelte";
 export { CommandStore, createCommandStore, getCommandStore, } from "./commands.svelte";
 export { createShortcutStore, getShortcutStore, LAYOUT_SHORTCUTS, shortcutListener, ShortcutStore, } from "./shortcuts.svelte";
 export { createThemeStore, getThemeStore } from "./theme.svelte";
+export { createConfigStore, } from "./createConfigStore.svelte";
+export { createToastBridge, notify } from "./toast-bridge";

package/dist/state/language.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ConfigStore } from "../devtools/createConfigStore.svelte";
+import { type ConfigStore } from "./createConfigStore.svelte";
 /**
  * Language configuration
  * Represents a supported language in the application
@@ -48,7 +48,11 @@ export declare const LANGUAGES: readonly [{
     readonly flag: "🇻🇳";
 }];
 import type { PersistenceDriver } from "../persistence/types";
-export declare function createLanguageStore(driver?: PersistenceDriver | (() => PersistenceDriver | undefined)): {
+export interface LanguageStoreOptions {
+    driver?: PersistenceDriver | (() => PersistenceDriver | undefined);
+    onLocaleChange?: (code: string) => void;
+}
+export declare function createLanguageStore(options?: LanguageStoreOptions): {
     current: string | undefined;
     available: Language[];
     set(id: string | undefined): void;