rune-lab 0.0.19 → 0.0.21

package/dist/features/config/components/AppSettingSelector.svelte

@@ -1,16 +1,98 @@
 <script lang="ts">
     import { type Snippet } from "svelte";
 
-    let { options, value, item, triggerLabel, tooltip } = $props<{
+    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";
+        responsive?: boolean;
     }>();
+
+    let modal = $state<HTMLDialogElement>();
+
+    // Use derived to compute the class, though simple reactive assignment works too
+    const directionClass = $derived(
+        (() => {
+            switch (direction) {
+                case "top":
+                    return "dropdown-top";
+                case "left":
+                    return "dropdown-left";
+                case "right":
+                    return "dropdown-right";
+                case "end":
+                    return "dropdown-end"; // same as right in LTR, but specifically for alignment
+                default:
+                    return "dropdown-bottom";
+            }
+        })(),
+    );
 </script>
 
-<div class="dropdown dropdown-end">
+<!-- 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"
+            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">
+                        {#each options as option}
+                            <li class="border-b border-base-100 last:border-0">
+                                <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
+    class="dropdown {directionClass} {responsive
+        ? 'hidden md:inline-block'
+        : 'inline-block'}"
+>
     <div
         tabindex="0"
         role="button"
@@ -25,7 +107,7 @@
     </div>
 
     <ul
-        class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm max-h-96 overflow-y-auto border border-base-200"
+        class="dropdown-content 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>

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

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     item: Snippet<[any]>;
     triggerLabel: Snippet<[any]>;
     tooltip?: string;
+    direction?: "top" | "bottom" | "left" | "right" | "end";
+    responsive?: boolean;
 };
 declare const AppSettingSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppSettingSelector = ReturnType<typeof AppSettingSelector>;

package/dist/features/config/components/CurrencySelector.svelte

@@ -1,13 +1,27 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { currencyStore, type Currency } from "../../../state/currency.svelte";
+    import {
+        getCurrencyStore,
+        type Currency,
+    } from "../../../state/currency.svelte";
+
+    const currencyStore = getCurrencyStore();
+
     import * as m from "../../../paraglide/messages.js";
     import { createMessageResolver } from "../../../devtools/message-resolver";
 
-    let { codes = [] }: { codes?: string[] } = $props();
+    let {
+        codes = [],
+        current = $bindable(String(currencyStore.current)),
+        onchange,
+    }: {
+        codes?: string[];
+        current?: string;
+        onchange?: (value: string) => void;
+    } = $props();
 
     const getLabel = createMessageResolver<Currency>(m as any, {
-        keyExtractor: (c) => c.code,
+        keyExtractor: (c) => String(c.code),
     });
 
     let active = $derived(
@@ -15,14 +29,14 @@
     );
 
     let available = $derived(
-        codes.length > 0 
-            ? currencyStore.available.filter(c => codes.includes(c.code))
-            : currencyStore.available
+        codes.length > 0
+            ? currencyStore.available.filter((c) => codes.includes(c.code))
+            : currencyStore.available,
     );
 </script>
 
-<AppSettingSelector 
-    value={active} 
+<AppSettingSelector
+    value={active}
     options={available}
     tooltip={getLabel(active)}
 >
@@ -33,7 +47,11 @@
     {#snippet item(c)}
         <button
             class="flex items-center gap-3 w-full"
-            onclick={() => currencyStore.set(c.code)}
+            onclick={() => {
+                currencyStore.set(c.code);
+                current = c.code;
+                onchange?.(c.code);
+            }}
         >
             <span class="badge badge-sm badge-ghost w-8">{c.symbol}</span>
             <span>{getLabel(c)}</span>

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     codes?: string[];
+    current?: string;
+    onchange?: (value: string) => void;
 };
-declare const CurrencySelector: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const CurrencySelector: import("svelte").Component<$$ComponentProps, {}, "current">;
 type CurrencySelector = ReturnType<typeof CurrencySelector>;
 export default CurrencySelector;

package/dist/features/config/components/LanguageSelector.svelte

@@ -1,12 +1,25 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { languageStore, type Language } from "../../../state/language.svelte";
+    import {
+        getLanguageStore,
+        type Language,
+    } from "../../../state/language.svelte";
+
+    const languageStore = getLanguageStore();
+
     import { setLocale, locales } from "../../../paraglide/runtime";
     import * as m from "../../../paraglide/messages.js";
     import { createMessageResolver } from "../../../devtools/message-resolver";
 
-
-    let { languages: allowedLocales = locales }: { languages?: ReadonlyArray<string> } = $props();
+    let {
+        languages: allowedLocales = locales,
+        current = $bindable(languageStore.current),
+        onchange,
+    }: {
+        languages?: ReadonlyArray<string>;
+        current?: string;
+        onchange?: (value: string) => void;
+    } = $props();
 
     const getLabel = createMessageResolver<Language>(m as any, {
         keyExtractor: (l) => l.code,
@@ -23,8 +36,8 @@
     );
 </script>
 
-<AppSettingSelector 
-    value={active} 
+<AppSettingSelector
+    value={active}
     options={available}
     tooltip={getLabel(active)}
 >
@@ -37,7 +50,9 @@
             class="flex items-center gap-3 w-full"
             onclick={() => {
                 languageStore.set(l.code);
-                setLocale(l.code);
+                setLocale(l.code as any);
+                current = l.code;
+                onchange?.(l.code);
             }}
         >
             <span class="text-lg">{l.flag}</span>

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     languages?: ReadonlyArray<string>;
+    current?: string;
+    onchange?: (value: string) => void;
 };
-declare const LanguageSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const LanguageSelector: import("svelte").Component<$$ComponentProps, {}, "current">;
 type LanguageSelector = ReturnType<typeof LanguageSelector>;
 export default LanguageSelector;

package/dist/features/config/components/ThemeSelector.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { themeStore, type Theme } from "../../../state/theme.svelte";
+    import { getThemeStore, type Theme } from "../../../state/theme.svelte";
+
+    const themeStore = getThemeStore();
+
     import * as m from "../../../paraglide/messages.js";
     import { createMessageResolver } from "../../../devtools/message-resolver";
 
-    let { themes = [] }: { themes?: string[] } = $props();
+    let {
+        themes = [],
+        current = $bindable(themeStore.current),
+        onchange,
+    }: {
+        themes?: string[];
+        current?: string;
+        onchange?: (value: string) => void;
+    } = $props();
 
     const getThemeLabel = createMessageResolver<Theme>(m as any, {
         keyExtractor: (t) => t.name,
@@ -16,14 +27,14 @@
 
     let available = $derived(
         themes.length > 0
-            ? themeStore.available.filter(t => themes.includes(t.name))
-            : themeStore.available
+            ? themeStore.available.filter((t) => themes.includes(t.name))
+            : themeStore.available,
     );
 </script>
 
-<AppSettingSelector 
-    value={activeTheme} 
-    options={available} 
+<AppSettingSelector
+    value={activeTheme}
+    options={available}
     tooltip={getThemeLabel(activeTheme)}
 >
     {#snippet triggerLabel(t)}
@@ -33,7 +44,11 @@
     {#snippet item(t)}
         <button
             class="flex items-center gap-3 w-full"
-            onclick={() => themeStore.set(t.name)}
+            onclick={() => {
+                themeStore.set(t.name);
+                current = t.name;
+                onchange?.(t.name);
+            }}
         >
             <input
                 type="radio"

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     themes?: string[];
+    current?: string;
+    onchange?: (value: string) => void;
 };
-declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "current">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;
 export default ThemeSelector;

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

@@ -1,13 +1,21 @@
 <script lang="ts">
-    import { appConfig } from "../../config";
-    import { toastStore } from "../../state/toast.svelte";
-    import { apiStore } from "../../state/api.svelte";
-    import { themeStore } from "../../state/theme.svelte";
-    import { shortcutStore } from "../../state/shortcuts.svelte";
-    import { commandStore } from "../../state/commands.svelte";
-    import { appStore } from "../../state/app.svelte";
-    import { languageStore } from "../../state/language.svelte";
-    import { currencyStore } from "../../state/currency.svelte";
+    import { getToastStore } from "../../state/toast.svelte";
+
+    import { getApiStore } from "../../state/api.svelte";
+    import { getThemeStore } from "../../state/theme.svelte";
+    import { getShortcutStore } from "../../state/shortcuts.svelte";
+    // import { getCommandStore } from "../../state/commands.svelte";
+    import { getAppStore } from "../../state/app.svelte";
+    import { getLanguageStore } from "../../state/language.svelte";
+    import { getCurrencyStore } from "../../state/currency.svelte";
+
+    const appStore = getAppStore();
+    const apiStore = getApiStore();
+    const themeStore = getThemeStore();
+    const shortcutStore = getShortcutStore();
+    const toastStore = getToastStore();
+    const languageStore = getLanguageStore();
+    // const currencyStore = getCurrencyStore();
 
     let beat = $state(false);
     let logs = $state<{ time: string; what: string }[]>([]);
@@ -24,7 +32,7 @@
     );
 
     $effect(() => {
-        stateHash;
+        stateHash; // Subscribe
         beat = true;
         const timer = setTimeout(() => (beat = false), 300);
 
@@ -44,7 +52,9 @@
     // Section 3: Quick-fire actions
     function cycleTheme() {
         const themes = themeStore.available;
-        const currentIndex = themes.findIndex((t) => t.name === themeStore.current);
+        const currentIndex = themes.findIndex(
+            (t) => t.name === themeStore.current,
+        );
         const nextIndex = (currentIndex + 1) % themes.length;
         themeStore.set(themes[nextIndex].name);
     }
@@ -92,8 +102,7 @@
                     </tr>
                     <tr>
                         <td class="opacity-50">Shortcuts</td>
-                        <td class="font-mono"
-                            >{shortcutStore.entries.length}</td
+                        <td class="font-mono">{shortcutStore.entries.length}</td
                         >
                     </tr>
                 </tbody>
@@ -137,16 +146,24 @@
             {#each logs as log, i}
                 <li>
                     {#if i !== 0}<hr class="bg-base-content/10" />{/if}
-                    <div class="timeline-start font-mono text-[10px] opacity-40">
+                    <div
+                        class="timeline-start font-mono text-[10px] opacity-40"
+                    >
                         {log.time}
                     </div>
                     <div class="timeline-middle">
-                        <div class="w-1.5 h-1.5 rounded-full bg-primary/50"></div>
+                        <div
+                            class="w-1.5 h-1.5 rounded-full bg-primary/50"
+                        ></div>
                     </div>
-                    <div class="timeline-end text-[10px] truncate max-w-[160px]">
+                    <div
+                        class="timeline-end text-[10px] truncate max-w-[160px]"
+                    >
                         {log.what}
                     </div>
-                    {#if i !== logs.length - 1}<hr class="bg-base-content/10" />{/if}
+                    {#if i !== logs.length - 1}<hr
+                            class="bg-base-content/10"
+                        />{/if}
                 </li>
             {/each}
         </ul>