rune-lab 0.1.0 → 0.1.2

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

@@ -1,3 +1,14 @@
-declare const ApiMonitor: import("svelte").Component<Record<string, never>, {}, "">;
-type ApiMonitor = ReturnType<typeof ApiMonitor>;
-export default ApiMonitor;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ApiMonitorProps = typeof __propDef.props;
+export type ApiMonitorEvents = typeof __propDef.events;
+export type ApiMonitorSlots = typeof __propDef.slots;
+export default class ApiMonitor extends SvelteComponentTyped<ApiMonitorProps, ApiMonitorEvents, ApiMonitorSlots> {
+}
+export {};

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

@@ -1,9 +1,14 @@
-type $$ComponentProps = {
-    name: string;
-    size?: string;
-    class?: string;
-    icons?: Record<string, string>;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
 };
-declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
-type Icon = ReturnType<typeof Icon>;
-export default Icon;
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/dist/components/RuneProvider.svelte

@@ -15,6 +15,7 @@
     import { Toaster, CommandPalette, ShortcutPalette } from "../index";
 
     import type { PersistenceDriver } from "../persistence/types";
+    import { localStorageDriver } from "../persistence/drivers";
     import { RUNE_LAB_CONTEXT } from "../context";
     import type { AppData } from "../state/app.svelte";
 
@@ -26,6 +27,9 @@
         favicon?: string;
         manageHead?: boolean;
         dictionary?: Record<string, any>;
+        locales?: readonly string[];
+        onLanguageChange?: (code: string) => void;
+        onThemeChange?: (name: string) => void;
     }
 
     let { children, config = {} } = $props<{
@@ -42,11 +46,16 @@
     wire(toastStore);
 
     // Capture the initial persistence prop to avoid Svelte 5 reactive capture warnings
-    const initialPersistence = untrack(() => config.persistence);
+    // Default to localStorageDriver to ensure UI selectors persist across browser page reloads
+    const initialPersistence = untrack(
+        () => config.persistence ?? localStorageDriver,
+    );
+    const initialLocales = untrack(() => config.locales);
 
     const themeStore = createThemeStore(initialPersistence);
     const languageStore = createLanguageStore({
         driver: initialPersistence,
+        locales: initialLocales,
     });
     const currencyStore = createCurrencyStore(initialPersistence);
     const shortcutStore = createShortcutStore();
@@ -85,7 +94,22 @@
     });
 
     $effect(() => {
-        if (config.apiUrl) apiStore.init(config.apiUrl, "v1", config.apiHealthCheck);
+        if (config.apiUrl)
+            apiStore.init(config.apiUrl, "v1", config.apiHealthCheck);
+    });
+
+    $effect(() => {
+        const code = languageStore.current as string;
+        if (config.onLanguageChange) {
+            config.onLanguageChange(code);
+        }
+    });
+
+    $effect(() => {
+        const name = themeStore.current as string;
+        if (config.onThemeChange) {
+            config.onThemeChange(name);
+        }
     });
 
     onMount(() => {

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

@@ -1,4 +1,4 @@
-import { type Snippet } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 import type { PersistenceDriver } from "../persistence/types";
 import type { AppData } from "../state/app.svelte";
 export interface RuneLabConfig {
@@ -9,11 +9,20 @@ export interface RuneLabConfig {
     favicon?: string;
     manageHead?: boolean;
     dictionary?: Record<string, any>;
+    locales?: readonly string[];
+    onLanguageChange?: (code: string) => void;
+    onThemeChange?: (name: string) => void;
 }
-type $$ComponentProps = {
-    children: Snippet;
-    config?: RuneLabConfig;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
 };
-declare const RuneProvider: import("svelte").Component<$$ComponentProps, {}, "">;
-type RuneProvider = ReturnType<typeof RuneProvider>;
-export default RuneProvider;
+export type RuneProviderProps = typeof __propDef.props;
+export type RuneProviderEvents = typeof __propDef.events;
+export type RuneProviderSlots = typeof __propDef.slots;
+export default class RuneProvider extends SvelteComponentTyped<RuneProviderProps, RuneProviderEvents, RuneProviderSlots> {
+}
+export {};

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

@@ -1,18 +1,14 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
-    z_$$bindings?: Bindings;
+    slots: {};
+};
+export type ToasterProps = typeof __propDef.props;
+export type ToasterEvents = typeof __propDef.events;
+export type ToasterSlots = typeof __propDef.slots;
+export default class Toaster extends SvelteComponentTyped<ToasterProps, ToasterEvents, ToasterSlots> {
 }
-declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toaster = InstanceType<typeof Toaster>;
-export default Toaster;
+export {};

package/dist/features/command-palette/CommandPalette.svelte.d.ts

@@ -1,6 +1,14 @@
-type $$ComponentProps = {
-    shortcutKey?: string;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
 };
-declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "">;
-type CommandPalette = ReturnType<typeof CommandPalette>;
-export default CommandPalette;
+export type CommandPaletteProps = typeof __propDef.props;
+export type CommandPaletteEvents = typeof __propDef.events;
+export type CommandPaletteSlots = typeof __propDef.slots;
+export default class CommandPalette extends SvelteComponentTyped<CommandPaletteProps, CommandPaletteEvents, CommandPaletteSlots> {
+}
+export {};

package/dist/features/config/AppSettingSelector.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+    import { portal } from "../../actions/portal";
+    import { type Snippet } from "svelte";
+
+    let {
+        options,
+        value,
+        item,
+        triggerLabel,
+        tooltip,
+        direction = "bottom",
+        responsive = true,
+    } = $props<{
+        options: any[];
+        value: any;
+        item: Snippet<[any]>;
+        triggerLabel: Snippet<[any]>;
+        tooltip?: string;
+        direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+        responsive?: boolean;
+    }>();
+
+    let modal = $state<HTMLDialogElement>();
+
+    let isOpen = $state(false);
+    let triggerEl = $state<HTMLElement>();
+    let panelStyle = $state("position:fixed;visibility:hidden");
+
+    function computePosition() {
+        if (!triggerEl) return;
+        const rect = triggerEl.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const openUpward =
+            direction === "top" ||
+            (direction === "auto" &&
+                spaceBelow < 200 &&
+                spaceAbove > spaceBelow);
+
+        if (openUpward) {
+            panelStyle = `position:fixed; bottom:${window.innerHeight - rect.top + 4}px; left:${rect.left}px; min-width:${rect.width}px; z-index:9999`;
+        } else {
+            panelStyle = `position:fixed; top:${rect.bottom + 4}px; left:${rect.left}px; min-width:${rect.width}px; z-index:9999`;
+        }
+    }
+
+    function open() {
+        computePosition();
+        isOpen = true;
+    }
+
+    function close() {
+        isOpen = false;
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+        if (!triggerEl?.contains(e.target as Node)) close();
+    }
+
+    $effect(() => {
+        if (isOpen) {
+            document.addEventListener("click", handleOutsideClick, {
+                capture: true,
+            });
+            document.addEventListener(
+                "keydown",
+                (e) => e.key === "Escape" && close(),
+            );
+        }
+        return () => {
+            document.removeEventListener("click", handleOutsideClick, {
+                capture: true,
+            });
+        };
+    });
+</script>
+
+<!-- Mobile Modal Implementation -->
+{#if responsive}
+    <div class="md:hidden inline-block">
+        <button
+            type="button"
+            class="btn btn-ghost btn-sm m-1 h-auto min-h-[2rem] px-2"
+            aria-haspopup="dialog"
+            onclick={() => modal?.showModal()}
+        >
+            <span class="flex items-center gap-2">
+                {@render triggerLabel(value)}
+            </span>
+        </button>
+
+        <dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
+            <div class="modal-box p-0 overflow-hidden">
+                <div
+                    class="p-4 bg-base-200 border-b border-base-300 flex justify-between items-center"
+                >
+                    <h3 class="font-bold text-lg">Select Option</h3>
+                    <form method="dialog">
+                        <button class="btn btn-sm btn-circle btn-ghost"
+                            >✕</button
+                        >
+                    </form>
+                </div>
+                <div class="max-h-[60vh] overflow-y-auto p-2">
+                    <ul class="menu bg-base-100 w-full p-0" role="menu">
+                        {#each options as option}
+                            <li
+                                class="border-b border-base-100 last:border-0"
+                                role="menuitem"
+                            >
+                                <button
+                                    class="w-full text-left py-3"
+                                    onclick={() => modal?.close()}
+                                >
+                                    {@render item(option)}
+                                </button>
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            </div>
+            <form method="dialog" class="modal-backdrop">
+                <button>close</button>
+            </form>
+        </dialog>
+    </div>
+{/if}
+
+<!-- Desktop Dropdown Implementation -->
+<div
+    bind:this={triggerEl}
+    class="relative {responsive ? 'hidden md:inline-block' : 'inline-block'}"
+>
+    <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        onclick={open}
+        class="btn btn-ghost btn-sm m-1 {tooltip
+            ? 'tooltip tooltip-bottom'
+            : ''}"
+        data-tip={tooltip}
+    >
+        <span class="flex items-center gap-2">
+            {@render triggerLabel(value)}
+        </span>
+    </button>
+</div>
+
+{#if isOpen}
+    <div
+        use:portal
+        style={panelStyle}
+        class={responsive ? "hidden md:block" : "block"}
+    >
+        <ul
+            role="listbox"
+            class="menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow-xl border border-base-200 max-h-96 overflow-y-auto"
+        >
+            {#each options as option}
+                <li role="option" aria-selected={value === option}>
+                    <!-- Event delegation: we close on click unless they clicked the scrollbar -->
+                    <!-- In a real world component you'd wrap the button down here or add a capture handler -->
+                    <div
+                        role="presentation"
+                        onclick={close}
+                        onkeydown={(e) => e.key === "Enter" && close()}
+                        tabindex="-1"
+                        class="w-full"
+                    >
+                        {@render item(option)}
+                    </div>
+                </li>
+            {/each}
+        </ul>
+    </div>
+{/if}

package/dist/features/config/AppSettingSelector.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppSettingSelectorProps = typeof __propDef.props;
+export type AppSettingSelectorEvents = typeof __propDef.events;
+export type AppSettingSelectorSlots = typeof __propDef.slots;
+export default class AppSettingSelector extends SvelteComponentTyped<AppSettingSelectorProps, AppSettingSelectorEvents, AppSettingSelectorSlots> {
+}
+export {};

package/dist/features/config/{components/CurrencySelector.svelte → CurrencySelector.svelte}

@@ -3,13 +3,12 @@
     import {
         getCurrencyStore,
         type Currency,
-    } from "../../../state/currency.svelte";
+    } from "../../state/currency.svelte";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext } from "svelte";
 
     const currencyStore = getCurrencyStore();
 
-    import { getContext } from "svelte";
-    import { createMessageResolver } from "../../../internal/message-resolver";
-
     let {
         codes = [],
         current = $bindable(String(currencyStore.current)),
@@ -20,11 +19,17 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
 
-    const getLabel = createMessageResolver<Currency>(dictionary as any, {
-        keyExtractor: (c) => String(c.code),
-    });
+    function getLabel(currency: Currency): string {
+        const key = String(currency.code);
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return String(currency.code);
+    }
 
     let active = $derived(
         currencyStore.get(currencyStore.current) ?? currencyStore.available[0],
@@ -42,8 +47,8 @@
     options={available}
     tooltip={getLabel(active)}
 >
-    {#snippet triggerLabel(c)}
-        <span class="font-bold">{c.symbol}</span>
+    {#snippet triggerLabel()}
+        <span class="font-bold">{active.symbol}</span>
     {/snippet}
 
     {#snippet item(c)}

package/dist/features/config/CurrencySelector.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CurrencySelectorProps = typeof __propDef.props;
+export type CurrencySelectorEvents = typeof __propDef.events;
+export type CurrencySelectorSlots = typeof __propDef.slots;
+export default class CurrencySelector extends SvelteComponentTyped<CurrencySelectorProps, CurrencySelectorEvents, CurrencySelectorSlots> {
+}
+export {};

package/dist/features/config/{components/LanguageSelector.svelte → LanguageSelector.svelte}

@@ -3,13 +3,13 @@
     import {
         getLanguageStore,
         type Language,
-    } from "../../../state/language.svelte";
+    } from "../../state/language.svelte";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext } from "svelte";
+    import { setLocale } from "../../paraglide/runtime";
 
     const languageStore = getLanguageStore();
 
-    import { getContext } from "svelte";
-    import { createMessageResolver } from "../../../internal/message-resolver";
-
     let {
         languages: allowedLocales = languageStore.available.map((l) => l.code),
         current = $bindable(languageStore.current),
@@ -20,11 +20,17 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
 
-    const getLabel = createMessageResolver<Language>(dictionary as any, {
-        keyExtractor: (l) => l.code,
-    });
+    function getLabel(lang: Language): string {
+        const key = lang.code;
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return lang.code.toUpperCase();
+    }
 
     let active = $derived(
         languageStore.get(languageStore.current) ?? languageStore.available[0],
@@ -42,8 +48,8 @@
     options={available}
     tooltip={getLabel(active)}
 >
-    {#snippet triggerLabel(l)}
-        <span class="text-lg">{l?.flag ?? active.flag}</span>
+    {#snippet triggerLabel()}
+        <span class="text-lg">{active.flag}</span>
     {/snippet}
 
     {#snippet item(l)}
@@ -51,6 +57,7 @@
             class="flex items-center gap-3 w-full"
             onclick={() => {
                 languageStore.set(l.code);
+                setLocale(l.code as any);
                 current = l.code;
                 onchange?.(l.code);
             }}

package/dist/features/config/LanguageSelector.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LanguageSelectorProps = typeof __propDef.props;
+export type LanguageSelectorEvents = typeof __propDef.events;
+export type LanguageSelectorSlots = typeof __propDef.slots;
+export default class LanguageSelector extends SvelteComponentTyped<LanguageSelectorProps, LanguageSelectorEvents, LanguageSelectorSlots> {
+}
+export {};

package/dist/features/config/{components/ThemeSelector.svelte → ThemeSelector.svelte}

@@ -1,12 +1,11 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { getThemeStore, type Theme } from "../../../state/theme.svelte";
+    import { getThemeStore, type Theme } from "../../state/theme.svelte";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext } from "svelte";
 
     const themeStore = getThemeStore();
 
-    import { getContext } from "svelte";
-    import { createMessageResolver } from "../../../internal/message-resolver";
-
     let {
         themes = [],
         current = $bindable(themeStore.current),
@@ -17,11 +16,17 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
 
-    const getThemeLabel = createMessageResolver<Theme>(dictionary as any, {
-        keyExtractor: (t) => t.name,
-    });
+    function getThemeLabel(theme: Theme): string {
+        const key = theme.name;
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return theme.name;
+    }
 
     let activeTheme = $derived(
         themeStore.get(themeStore.current) ?? themeStore.available[0],
@@ -39,8 +44,8 @@
     options={available}
     tooltip={getThemeLabel(activeTheme)}
 >
-    {#snippet triggerLabel(t)}
-        <span class="text-lg">{t?.icon ?? activeTheme.icon}</span>
+    {#snippet triggerLabel()}
+        <span class="text-lg">{activeTheme.icon}</span>
     {/snippet}
 
     {#snippet item(t)}
@@ -54,7 +59,7 @@
         >
             <input
                 type="radio"
-                name="theme-dropdown"
+                name="theme-{t.name}"
                 class="theme-controller radio radio-xs"
                 value={t.name}
                 bind:group={themeStore.current}

package/dist/features/config/ThemeSelector.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeSelectorProps = typeof __propDef.props;
+export type ThemeSelectorEvents = typeof __propDef.events;
+export type ThemeSelectorSlots = typeof __propDef.slots;
+export default class ThemeSelector extends SvelteComponentTyped<ThemeSelectorProps, ThemeSelectorEvents, ThemeSelectorSlots> {
+}
+export {};

package/dist/features/detail-panels/DashboardPanel.svelte.d.ts

@@ -1,3 +1,14 @@
-declare const DashboardPanel: import("svelte").Component<Record<string, never>, {}, "">;
-type DashboardPanel = ReturnType<typeof DashboardPanel>;
-export default DashboardPanel;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DashboardPanelProps = typeof __propDef.props;
+export type DashboardPanelEvents = typeof __propDef.events;
+export type DashboardPanelSlots = typeof __propDef.slots;
+export default class DashboardPanel extends SvelteComponentTyped<DashboardPanelProps, DashboardPanelEvents, DashboardPanelSlots> {
+}
+export {};

package/dist/features/detail-panels/ShortcutsPanel.svelte.d.ts

@@ -1,3 +1,14 @@
-declare const ShortcutsPanel: import("svelte").Component<Record<string, never>, {}, "">;
-type ShortcutsPanel = ReturnType<typeof ShortcutsPanel>;
-export default ShortcutsPanel;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ShortcutsPanelProps = typeof __propDef.props;
+export type ShortcutsPanelEvents = typeof __propDef.events;
+export type ShortcutsPanelSlots = typeof __propDef.slots;
+export default class ShortcutsPanel extends SvelteComponentTyped<ShortcutsPanelProps, ShortcutsPanelEvents, ShortcutsPanelSlots> {
+}
+export {};

package/dist/features/detail-panels/ShowcasePanel.svelte.d.ts

@@ -1,3 +1,14 @@
-declare const ShowcasePanel: import("svelte").Component<Record<string, never>, {}, "">;
-type ShowcasePanel = ReturnType<typeof ShowcasePanel>;
-export default ShowcasePanel;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ShowcasePanelProps = typeof __propDef.props;
+export type ShowcasePanelEvents = typeof __propDef.events;
+export type ShowcasePanelSlots = typeof __propDef.slots;
+export default class ShowcasePanel extends SvelteComponentTyped<ShowcasePanelProps, ShowcasePanelEvents, ShowcasePanelSlots> {
+}
+export {};