rune-lab 0.4.4 → 0.4.6

package/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/Yrrrrrf/rune-lab/main/static/img/rune.png" alt="Rune Lab Icon" width="128" height="128" descripti``on="Icon representing the Svelte Runes system">
+  <img src="https://raw.githubusercontent.com/Yrrrrrf/rune-lab/main/static/img/rune.png" alt="Rune Lab Icon" width="128" height="128" description="Icon representing the Svelte Runes system">
   <div align="center">Rune Lab</div>
 </h1>
 
@@ -14,72 +14,125 @@
 
 ## Overview
 
-**Rune Lab** is your modern toolkit for crafting stunning, reactive web
-applications with **Svelte 5**. Harnessing the power of Svelte's new **Runes**
-system, Rune Lab offers a suite of elegant UI components designed for seamless
-data handling and beautiful theming.
+**Rune Lab** is a modern, extensible **plugin-based UI shell** for **Svelte 5**
+applications. Harnessing the power of Svelte's new **Runes** system, it provides
+a complete application skeleton with built-in layout management, dynamic
+theming, i18n, keyboard shortcuts, a command palette, toast notifications, and a
+highly precise money/currency subsystem.
+
+Everything is wired through a centralized **Provider + Registry + Context**
+architecture, ensuring clean dependency injection and state isolation across
+your app.
 
 ## Key Features
 
-- **✨ Svelte 5 Runes Core:** Experience fine-grained reactivity and cleaner
-  component logic.
-- **🎨 Dynamic Theming:** Powered by DaisyUI & Tailwind CSS for extensive
-  customization and out-of-the-box themes.
-- **🔒 TypeScript First:** Robust type-safety for a confident and productive
-  development workflow.
-- **📊 Data-Aware Components:** Tools and components built to handle and
-  visualize complex data.
+- **✨ Svelte 5 Runes-First:** Built from the ground up using `$state`,
+  `$derived`, and `$effect`. No legacy Svelte 4 stores.
+- **🧩 Extensible Plugin Architecture:** Features are isolated into plugins
+  (`LayoutPlugin`, `PalettesPlugin`, `MoneyPlugin`). Only load what you need.
+- **🎨 Dynamic Theming & i18n:** 32 DaisyUI themes and 13 pre-configured locales
+  powered by Paraglide JS, with zero-flash SSR persistence.
+- **🔗 Declarative Callbacks:** Bridge store changes (theme, language, currency)
+  to your own system hooks via `RuneProvider` props.
+- **💾 Abstract Persistence Layer:** Swap between cookies, localStorage,
+  sessionStorage, or in-memory state seamlessly via generic drivers.
+- **💸 Robust Money Subsystem:** Backed by Dinero.js for floating-point-safe
+  precision arithmetic, complete with exchange rate strategies and masked
+  currency inputs.
+- **⌨️ Developer & Power-User Friendly:** Out-of-the-box Command Palette
+  (`Ctrl+K`) and interactive Shortcuts Palette (`Ctrl+/`).
 
-<!-- - **🛰️ Interactive Schema Explorer:** A standout feature! Visually explore and
-  interact with database schemas exposed by `prism-py` APIs directly within your
-  Svelte application. Test CRUD operations, execute functions, and understand
-  your data structure like never before.
-- **🌐 Smart API Integration:** Includes `apiStore` (using `prism-ts`) for easy
-  and type-safe connection to backend APIs. -->
+## Installation
 
-- **📦 Lightweight Core:** Designed to be lean, with optional integrations.
+### Using NPM / Bun
 
-<!-- - **🦕 Universal Access:** Available on JSR (for Deno) and NPM (for
-  Node.js/Bun/Yarn). -->
+```bash
+npm install rune-lab
+# or
+bun install rune-lab
+```
 
-## Installation
+## Project Configuration (Required)
 
-<!-- ### Using Deno / [JSR](https://jsr.io/@yrrrrrf/rune-lab)
+After installing, two configuration steps are required to ensure the framework's
+components are compiled and styled correctly in your consuming project.
 
-```bash
-# Add to your Deno project
-deno add @yrrrrrf/rune-lab
-``` -->
+### Step 1 — Vite: Process `rune-lab` through the Svelte compiler
 
-### Using [NPM](https://www.npmjs.com/package/rune-lab) / Bun
+By default, Vite externalizes `node_modules` during SSR, bypassing the Svelte
+compiler. Add the following to your `vite.config.ts` to process `rune-lab`
+properly:
 
-```bash
-npm install rune-lab
-bun install rune-lab
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { sveltekit } from "@sveltejs/kit/vite";
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  ssr: {
+    noExternal: ["rune-lab"], // 👈 CRITICAL for Svelte 5 components in node_modules
+  },
+});
+```
+
+### Step 2 — Tailwind CSS v4: Scan `rune-lab` for utility classes
+
+Tailwind only generates CSS for classes it finds by scanning your source files.
+Add a `@source` directive to your project's main CSS file so Tailwind compiles
+the DaisyUI classes used internally by `rune-lab`:
+
+```css
+/* app.css / layout.css / global.css */
+@import "tailwindcss";
+@source "../node_modules/rune-lab/dist"; /* 👈 add this */
 ```
 
 ## Quick Start
 
-Get your application shell running in less than 20 lines. Inside your
+Get your application shell running in less than 40 lines. Inside your
 `+layout.svelte`:
 
 ```svelte
 <script lang="ts">
-  import { RuneProvider, WorkspaceLayout, ConnectedNavigationPanel } from "rune-lab";
-  import { cookieDriver } from "rune-lab";
+  import { 
+    RuneProvider, 
+    WorkspaceLayout, 
+    ConnectedNavigationPanel,
+    LayoutPlugin,
+    PalettesPlugin,
+    cookieDriver
+  } from "rune-lab";
+  import type { NavigationSection } from "rune-lab";
+  import { setLocale } from "$lib/i18n/paraglide/runtime.js";
 
   let { children } = $props();
 
-  // Example navigation
-  const sections = [{ id: "main", title: "Main", items: [{ id: "home", label: "Home" }] }];
+  const sections: NavigationSection[] = [
+    {
+      id: "main",
+      title: "Main Menu",
+      items: [
+        { id: "home", label: "Dashboard", icon: "🏠" },
+        { id: "settings", label: "Settings", icon: "⚙️" }
+      ]
+    }
+  ];
 </script>
 
+<!-- Initialize the system with your required plugins and callbacks -->
 <RuneProvider
-  app={{ name: "My App", version: "1.0.0" }}
-  persistence={cookieDriver}
+  config={{
+    app: { name: "My Startup", version: "1.0.0" },
+    persistence: cookieDriver,
+  }}
+  plugins={[LayoutPlugin, PalettesPlugin]}
+  onLanguageChange={(l) => setLocale(l.code)}
+  onThemeChange={(t) => console.log(`Theme changed to ${t.name}`)}
 >
   <WorkspaceLayout>
     {#snippet navigationPanel()}
+      <!-- Auto-wires to LayoutStore state -->
       <ConnectedNavigationPanel {sections} />
     {/snippet}
 
@@ -92,115 +145,130 @@ Get your application shell running in less than 20 lines. Inside your
 </RuneProvider>
 ```
 
-You now have a fully functional reactive layout, keyboard command palette, toast
-notification system, and theme switcher ready to go.
-
-## Project Configuration
+You now have a fully reactive layout, a keyboard command palette, a toast
+notification system, and theme/language switchers.
 
-After installing, two configuration steps are required to ensure components are
-compiled and styled correctly in your consuming project.
+## Money & Currency Plugin
 
-### Step 1 — Vite: process `rune-lab` through the Svelte compiler
+Rune Lab provides a robust money layer that handles precision arithmetic,
+formatting, and live exchange-rate triangulation. To use it, simply register the
+`MoneyPlugin`:
 
-Vite's SSR module runner externalizes `node_modules` by default, which means
-`.svelte` files from this package would be loaded as raw ES modules, bypassing
-the Svelte compiler entirely. Add the following to your `vite.config.ts` to
-force Vite to process `rune-lab` through its plugin pipeline:
+```svelte
+<script lang="ts">
+  import { MoneyPlugin } from "rune-lab";
+</script>
 
-```ts
-// vite.config.ts
-export default defineConfig({
-  plugins: [sveltekit()],
-  ssr: {
-    noExternal: ["rune-lab"],
-  },
-});
+<RuneProvider
+  config={{
+    "rune-lab.money": {
+      defaultCurrency: "USD",
+      exchangeRates: { 
+        base: "USD", 
+        rates: { MXN: 17.23, EUR: 0.91 } 
+      },
+    }
+  }}
+  plugins={[LayoutPlugin, PalettesPlugin, MoneyPlugin]}
+>
+  <!-- App Content -->
+</RuneProvider>
 ```
 
-This ensures the Svelte plugin transforms the components correctly during SSR,
-just as it would for your own source files.
+### Displaying & Inputting Money
+
+```svelte
+<script lang="ts">
+  import { 
+    MoneyDisplay, 
+    MoneyInput, 
+    CurrencySelector, 
+    useMoney 
+  } from "rune-lab";
+  
+  let price = $state(15000); // Minor units (e.g., cents) -> $150.00
+  const { convert, format } = useMoney();
+</script>
 
-### Step 2 — Tailwind CSS: scan `rune-lab` for utility classes
+<!-- Select from available currencies -->
+<CurrencySelector />
 
-Tailwind only generates CSS for the classes it can find by scanning your source
-files. Because `rune-lab` lives in `node_modules`, its DaisyUI classes are not
-scanned by default and the components will appear unstyled.
+<!-- Formats safely and localizes based on the active LanguageStore -->
+<MoneyDisplay amount={price} currency="USD" />
 
-Add a `@source` directive to your project's main CSS file to tell Tailwind to
-also scan the `rune-lab` dist output:
+<!-- Compact notation ($1.5M) -->
+<MoneyDisplay amount={150000000} currency="USD" compact />
 
-```css
-/* app.css / layout.css / global.css — wherever you import Tailwind */
-@import "tailwindcss";
-@source "../node_modules/rune-lab/dist"; /* 👈 add this */
+<!-- Integer-backed masked input (prevents floating point errors) -->
+<MoneyInput bind:amount={price} currency="USD" />
 ```
 
-> **Note:** Adjust the relative path to `node_modules` if your CSS file lives at
-> a different depth in your project tree. With both steps in place, all DaisyUI
-> component classes used by `rune-lab` will be included in your build and theme
-> switching will work across library components and your own code alike.
-
-## Money & Currency
+## Persistence Drivers
 
-Rune Lab provides a robust, Dinero.js-backed money layer that handles precision
-arithmetic and locale-aware formatting.
+Rune Lab provides generic drivers to remember user preferences across reloads.
+Pass one to `config.persistence` on `<RuneProvider>`:
 
-### MoneyDisplay
+- `cookieDriver`: Best for SSR applications (like SvelteKit) to prevent "theme
+  flash" on initial load.
+- `localStorageDriver`: Best for client-only applications (SPAs).
+- `sessionStorageDriver`: For preferences that should clear when the browser tab
+  closes.
 
 ```svelte
-<script>
-  import { MoneyDisplay } from "rune-lab";
+<script lang="ts">
+  import { cookieDriver } from "rune-lab";
 </script>
 
-<!-- Minor units (default): $150.00 -->
-<MoneyDisplay amount={15000} currency="USD" />
+<RuneProvider config={{ persistence: cookieDriver }} plugins={[...]}>
+```
 
-<!-- Major units: $150.00 -->
-<MoneyDisplay amount={150} unit="major" currency="USD" />
+## Advanced Patterns
 
-<!-- Compact notation: $1.2M -->
-<MoneyDisplay amount={1200000} unit="major" compact />
+### Store Observers (`onChange`)
 
-<!-- Null handling with fallback: "—" -->
-<MoneyDisplay amount={null} fallback="N/A" />
-```
+Beyond the `RuneProvider` props, you can imperatively subscribe to any
+`ConfigStore` (theme, language, currency) from your own services or components.
+Callbacks include `try/catch` protection so they never crash the store.
 
-### MoneyInput
+```ts
+import { getThemeStore } from "rune-lab";
 
-A masked input that prevents floating-point precision errors by working
-exclusively with integers.
+const themeStore = getThemeStore();
 
-```svelte
-<script>
-  import { MoneyInput } from "rune-lab";
-  let price = $state(150.00);
-</script>
-
-<MoneyInput bind:amount={price} unit="major" currency="USD" />
+// Returns an unsubscribe function
+const unsub = themeStore.onChange((newId, oldId) => {
+  console.log(`Theme swapped from ${oldId} to ${newId}`);
+});
 ```
 
-## Persistence Drivers
+### Keyboard Shortcuts (Auto-Cleanup)
 
-Rune Lab provides built-in drivers to remember user preferences (like theme,
-layout state, or language) across reloads. Pass one of these to the
-`persistence` prop on `<RuneProvider>`:
-
-- `cookieDriver`: Best for SSR applications (like SvelteKit) because the server
-  can read the cookie and prevent a "theme flash" on initial load.
-- `localStorageDriver`: Best for client-only applications (SPA) looking for
-  long-term persistence.
-- `sessionStorageDriver`: For preferences that should clear when the browser tab
-  closes.
+Any component deep in your tree can register its own keyboard shortcuts using
+the `useShortcuts` composable. It handles Svelte's `$effect` lifecycle
+internally, ensuring shortcuts unregister when the component unmounts:
 
 ```svelte
 <script lang="ts">
-  import { cookieDriver } from "rune-lab";
-  // Then pass directly: <RuneProvider persistence={cookieDriver}>
+  import { useShortcuts, getToastStore } from "rune-lab";
+
+  const toasts = getToastStore();
+
+  useShortcuts([
+    {
+      id: "feature.save",
+      keys: "ctrl+s, cmd+s", // Comma-separated alternative keys
+      label: "Save Document",
+      category: "Editor",
+      scope: "global",
+      handler: (e) => {
+        e.preventDefault();
+        toasts.success("Document Saved!");
+      }
+    }
+  ]);
 </script>
 ```
 
-## Advanced Patterns
-
 ### SvelteKit Route Syncing
 
 To keep your layout's active navigation state synchronized with the SvelteKit
@@ -214,39 +282,31 @@ router, use an `$effect` inside your `+layout.svelte` right after the provider:
     const layoutStore = getLayoutStore();
 
     $effect(() => {
-        // Example: Use the first path segment as the active nav item
+        // Automatically open the correct nav tree branch
         const segment = page.url.pathname.split("/")[1] || "home";
         layoutStore.navigate(segment);
     });
 </script>
 ```
 
-_(Note: Use `$app/state`, not the older Svelte 4 `$app/stores`)_
+### Calling Toasts from Outside Svelte Components
 
-### Keyboard Shortcuts
+If you need to trigger a toast from a pure `.ts` file (like a fetching utility
+or global error handler), you can use the Toast Bridge:
 
-Any component deep in your tree can register its own keyboard shortcuts
-dynamically. To ensure they clean up when the component unmounts, **always
-register them inside an `$effect` returning a cleanup function**:
-
-```svelte
-<script lang="ts">
-  import { getShortcutStore, getToastStore } from "rune-lab";
-
-  const shortcuts = getShortcutStore();
-  const toasts = getToastStore();
-
-  $effect(() => {
-    shortcuts.register({
-      id: "feature.save",
-      keys: "ctrl s",
-      label: "Save Document",
-      handler: () => toasts.success("Document Saved!")
-    });
-
-    return () => shortcuts.unregister("feature.save"); // Important!
-  });
-</script>
+```ts
+import { createToastBridge } from "rune-lab";
+
+const { notify } = createToastBridge();
+
+export async function fetchUser() {
+  try {
+    // ...
+  } catch (err) {
+    // Safely queues the toast if the UI hasn't mounted yet
+    notify("Failed to fetch user data", "error");
+  }
+}
 ```
 
 ## License

package/dist/RuneProvider.svelte

@@ -26,10 +26,20 @@
     [pluginId: string]: unknown;
   }
 
-  let { children, config = {}, plugins = [] } = $props<{
+  let {
+    children,
+    config = {},
+    plugins = [],
+    onThemeChange,
+    onLanguageChange,
+    onCurrencyChange,
+  } = $props<{
     children: Snippet;
     config?: RuneLabConfig;
     plugins?: RunePlugin[];
+    onThemeChange?: (newTheme: any, oldTheme: any) => void;
+    onLanguageChange?: (newLang: any, oldLang: any) => void;
+    onCurrencyChange?: (newCurrency: any, oldCurrency: any) => void;
   }>();
 
   const initialPlugins = untrack(() => plugins);
@@ -78,9 +88,28 @@
 
   // ── Initialization for layout ──────────────────────────
   const layoutStore = stores.get("layout") as any;
+  const themeStore = stores.get("theme") as any;
+  const languageStore = stores.get("language") as any;
+  const currencyStore = stores.get("currency") as any;
 
   onMount(() => {
     if (layoutStore) layoutStore.init();
+
+    const unsubs: (() => void)[] = [];
+
+    if (onThemeChange && themeStore) {
+      unsubs.push(themeStore.onChange(onThemeChange));
+    }
+    if (onLanguageChange && languageStore) {
+      unsubs.push(languageStore.onChange(onLanguageChange));
+    }
+    if (onCurrencyChange && currencyStore) {
+      unsubs.push(currencyStore.onChange(onCurrencyChange));
+    }
+
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
   });
 
   // Meta tags derived from app store state

package/dist/kernel/src/persistence/createConfigStore.svelte.d.ts

@@ -6,6 +6,11 @@ export type ConfigStore<T = unknown> = {
   get: (id: unknown) => T | undefined;
   getProp: <K extends keyof T>(prop: K, id?: unknown) => T[K] | undefined;
   addItems: (newItems: T[]) => void;
+  /**
+   * Register a callback to fire when the current item changes.
+   * Returns an unsubscribe function.
+   */
+  onChange: (cb: (newId: unknown, oldId: unknown) => void) => () => void;
   /**
    * Inject (or replace) the persistence driver at runtime.
    * Call this inside your plugin factory so the real driver

package/dist/kernel/src/persistence/createConfigStore.svelte.js

@@ -9,6 +9,7 @@ class ConfigStoreImpl {
   available = $state([]);
   #options;
   #driver;
+  #callbacks = new Set();
   constructor(options) {
     this.#options = options;
     const { items, idKey, storageKey, driver = createInMemoryDriver() } =
@@ -21,15 +22,19 @@ class ConfigStoreImpl {
     if (saved && this.get(saved)) {
       this.current = saved;
     }
-    if (DEV) {
-      console.log(
-        `${options.icon ?? "⚙️"} ${options.displayName} configured:`,
-        {
-          current: this.current,
-        },
-      );
+    // Only log here if we were initialized with a real driver (not the default in-memory)
+    if (DEV && options.driver) {
+      this.#logConfig();
     }
   }
+  #logConfig() {
+    console.log(
+      `${this.#options.icon ?? "⚙️"} ${this.#options.displayName} configured:`,
+      {
+        current: this.current,
+      },
+    );
+  }
   /**
    * Replace the persistence driver and immediately re-read any saved value.
    *
@@ -45,6 +50,9 @@ class ConfigStoreImpl {
     if (saved && this.get(saved)) {
       this.current = saved;
     }
+    if (DEV) {
+      this.#logConfig();
+    }
   }
   /**
    * Set current item with validation
@@ -55,8 +63,29 @@ class ConfigStoreImpl {
       console.warn(`${this.#options.displayName} "${id}" not found`);
       return;
     }
+    const old = this.current;
     this.current = id;
     this.#driver.set(this.#options.storageKey, String(id));
+    // Call callbacks after state update and persistence
+    this.#callbacks.forEach((cb) => {
+      try {
+        cb(id, old);
+      } catch (err) {
+        if (DEV) {
+          console.error(
+            `[rune-lab] Error in ${this.#options.displayName} onChange callback:`,
+            err,
+          );
+        }
+      }
+    });
+  }
+  /**
+   * Register a change callback
+   */
+  onChange(cb) {
+    this.#callbacks.add(cb);
+    return () => this.#callbacks.delete(cb);
   }
   /**
    * Get item by id

package/dist/mod.js

@@ -4,4 +4,4 @@ export * from "./kernel/src/mod.js";
 export * from "./runes/layout/src/mod.js";
 export * from "./runes/palettes/src/mod.js";
 export * from "./runes/plugins/money/src/mod.js";
-export const version = () => "0.4.4";
+export const version = () => "0.4.6";

package/dist/runes/layout/src/AppSettingSelector.svelte

@@ -1,7 +1,20 @@
-<script lang="ts">
-    import { portal } from "../../../kernel/src/mod.js";
+<script lang="ts" module>
     import { type Snippet } from "svelte";
 
+    export interface AppSettingSelectorProps<T> {
+        options: T[];
+        value: T;
+        item: Snippet<[T]>;
+        triggerLabel: Snippet<[T]>;
+        tooltip?: string;
+        direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+        responsive?: boolean;
+    }
+</script>
+
+<script lang="ts" generics="T">
+    import { portal } from "../../../kernel/src/mod.js";
+
     let {
         options,
         value,
@@ -11,10 +24,10 @@
         direction = "bottom",
         responsive = true,
     } = $props<{
-        options: any[];
-        value: any;
-        item: Snippet<[any]>;
-        triggerLabel: Snippet<[any]>;
+        options: T[];
+        value: T;
+        item: Snippet<[T]>;
+        triggerLabel: Snippet<[T]>;
         tooltip?: string;
         direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
         responsive?: boolean;
@@ -131,12 +144,20 @@
                                 class="border-b border-base-100 last:border-0"
                                 role="menuitem"
                             >
-                                <button
-                                    class="w-full text-left py-3"
+                                <div
+                                    role="button"
+                                    tabindex="0"
+                                    class="w-full text-left py-3 cursor-pointer hover:bg-base-200 px-4 transition-colors"
                                     onclick={() => modal?.close()}
+                                    onkeydown={(e) => {
+                                        if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault();
+                                            modal?.close();
+                                        }
+                                    }}
                                 >
                                     {@render item(option)}
-                                </button>
+                                </div>
                             </li>
                         {/each}
                     </ul>

package/dist/runes/layout/src/AppSettingSelector.svelte.d.ts

@@ -1,20 +1,34 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-  props: Record<string, never>;
-  events: {
+import { type Snippet } from "svelte";
+export interface AppSettingSelectorProps<T> {
+  options: T[];
+  value: T;
+  item: Snippet<[T]>;
+  triggerLabel: Snippet<[T]>;
+  tooltip?: string;
+  direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+  responsive?: boolean;
+}
+declare class __sveltets_Render<T> {
+  props(): Record<string, never>;
+  events(): {} & {
     [evt: string]: CustomEvent<any>;
   };
-  slots: {};
-  exports?: {};
-  bindings?: string;
-};
-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
+  slots(): {};
+}
+export type AppSettingSelectorProps_<T> = ReturnType<
+  __sveltets_Render<T>["props"]
+>;
+export type AppSettingSelectorEvents<T> = ReturnType<
+  __sveltets_Render<T>["events"]
+>;
+export type AppSettingSelectorSlots<T> = ReturnType<
+  __sveltets_Render<T>["slots"]
+>;
+export default class AppSettingSelector<T> extends SvelteComponentTyped<
+  AppSettingSelectorProps_<T>,
+  AppSettingSelectorEvents<T>,
+  AppSettingSelectorSlots<T>
 > {
 }
 export {};

package/dist/runes/layout/src/LanguageSelector.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import ResourceSelector from "./ResourceSelector.svelte";
     import { getLanguageStore } from "../../../kernel/src/mod.js";
-    import { setLocale } from "../../../i18n/paraglide/runtime.js";
+    import { getLanguageName } from "./language.svelte.js";
 
     const languageStore = getLanguageStore();
 
@@ -25,7 +25,9 @@
     {onchange}
 >
     {#snippet triggerLabel(active)}
-        <span class="text-lg">{active.flag}</span>
+        <div class="flex items-center gap-2">
+            <span class="text-lg">{active.flag}</span>
+        </div>
     {/snippet}
 
     {#snippet item(l)}
@@ -33,13 +35,13 @@
             class="flex items-center gap-3 w-full"
             onclick={() => {
                 languageStore.set(l.code);
-                setLocale(l.code as any);
                 current = l.code;
                 onchange?.(l.code);
             }}
         >
             <span class="text-lg">{l.flag}</span>
-            <span>{l.code.toUpperCase()}</span>
+            <span class="text-xs opacity-50 uppercase">{l.code}</span>
+            <span class="flex-grow text-left">{getLanguageName(l)}</span>
         </button>
     {/snippet}
 </ResourceSelector>

package/dist/runes/layout/src/ResourceSelector.svelte

@@ -61,18 +61,20 @@
     );
 </script>
 
+{#snippet _triggerLabel(v: any)}
+    {@render triggerLabel(v)}
+{/snippet}
+
+{#snippet _item(option: any)}
+    {@render item(option)}
+{/snippet}
+
 <AppSettingSelector
     value={active}
     options={available}
     tooltip={resolveLabel(active)}
     {direction}
     {responsive}
->
-    {#snippet triggerLabel(value)}
-        {@render triggerLabel(value)}
-    {/snippet}
-
-    {#snippet item(option)}
-        {@render item(option)}
-    {/snippet}
-</AppSettingSelector>
+    triggerLabel={_triggerLabel}
+    item={_item}
+/>

package/dist/runes/layout/src/ThemeSelector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import ResourceSelector from "./ResourceSelector.svelte";
-    import { getThemeStore, type Theme } from "../../../kernel/src/mod.js";
+    import { getThemeStore } from "../../../kernel/src/mod.js";
+    import { getThemeName } from "./theme.svelte.js";
 
     const themeStore = getThemeStore();
 
@@ -22,7 +23,9 @@
     {onchange}
 >
     {#snippet triggerLabel(active)}
-        <span class="text-lg">{active.icon}</span>
+        <div class="flex items-center gap-2">
+            <span class="text-lg">{active.icon}</span>
+        </div>
     {/snippet}
 
     {#snippet item(t)}
@@ -42,8 +45,8 @@
                 bind:group={themeStore.current}
             />
             <span class="text-lg">{t.icon}</span>
-            <span class="capitalize">
-                {t.name}
+            <span class="flex-grow text-left capitalize">
+                {getThemeName(t)}
             </span>
         </button>
     {/snippet}

package/dist/runes/layout/src/language.svelte.d.ts

@@ -5,6 +5,10 @@ import {
 } from "../../../kernel/src/mod.js";
 import type { Language } from "../../../kernel/src/mod.js";
 export type { Language };
+/**
+ * Resolver to get the display name of a language in the current locale
+ */
+export declare const getLanguageName: (option: Language) => string;
 export declare const LANGUAGES: readonly [{
   readonly code: "es";
   readonly flag: "🇲🇽";

package/dist/runes/layout/src/language.svelte.js

@@ -3,6 +3,14 @@ import {
   createConfigStore,
   getLanguageStore,
 } from "../../../kernel/src/mod.js";
+import { createMessageResolver } from "../../../i18n/message-resolver.js";
+import * as m from "../../../i18n/paraglide/messages.js";
+/**
+ * Resolver to get the display name of a language in the current locale
+ */
+export const getLanguageName = createMessageResolver(m, {
+  keyExtractor: (l) => l.code,
+});
 export const LANGUAGES = [
   // --- INDOEUROPEAS (Rama Romance / Latín) ---
   { code: "es", flag: "🇲🇽" },

package/dist/runes/layout/src/theme.svelte.d.ts

@@ -1,6 +1,10 @@
 import { createConfigStore, getThemeStore } from "../../../kernel/src/mod.js";
 import type { Theme } from "../../../kernel/src/mod.js";
 export type { Theme };
+/**
+ * Resolver to get the display name of a theme in the current locale
+ */
+export declare const getThemeName: (option: Theme) => string;
 export declare const themeStore: ConfigStore<Theme>;
 export type ThemeStore = ReturnType<typeof createConfigStore<Theme>>;
 export { getThemeStore };

package/dist/runes/layout/src/theme.svelte.js

@@ -2,6 +2,14 @@
 // client/packages/ui/src/state/theme-config.svelte.ts
 import { createConfigStore, getThemeStore } from "../../../kernel/src/mod.js";
 import { BROWSER } from "esm-env";
+import { createMessageResolver } from "../../../i18n/message-resolver.js";
+import * as m from "../../../i18n/paraglide/messages.js";
+/**
+ * Resolver to get the display name of a theme in the current locale
+ */
+export const getThemeName = createMessageResolver(m, {
+  keyExtractor: (t) => t.name,
+});
 // Icon map for known themes - unknown ones fall back to 🎨
 const THEME_ICONS = {
   light: "🌞",

package/dist/runes/plugins/money/src/CurrencySelector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { ResourceSelector } from "../../../layout/src/mod.js";
     import { getCurrencyStore } from "../../../../kernel/src/mod.js";
+    import { getCurrencyName } from "./currency.svelte.js";
 
     const currencyStore = getCurrencyStore();
 
@@ -22,7 +23,9 @@
     {onchange}
 >
     {#snippet triggerLabel(active)}
-        <span class="font-bold">{active.symbol}</span>
+        <div class="flex items-center gap-2">
+            <span class="font-bold">{active.symbol}</span>
+        </div>
     {/snippet}
 
     {#snippet item(c)}
@@ -35,7 +38,8 @@
             }}
         >
             <span class="badge badge-sm badge-ghost w-8">{c.symbol}</span>
-            <span>{c.code}</span>
+            <span class="text-xs opacity-50 uppercase">{c.code}</span>
+            <span class="flex-grow text-left">{getCurrencyName(c)}</span>
         </button>
     {/snippet}
 </ResourceSelector>

package/dist/runes/plugins/money/src/currency.svelte.d.ts

@@ -5,6 +5,10 @@ import {
 import type { Currency } from "../../../../kernel/src/mod.js";
 import type { ExchangeRateStore } from "./exchange-rate.svelte.js";
 export type { Currency };
+/**
+ * Resolver to get the display name of a currency in the current locale
+ */
+export declare const getCurrencyName: (option: Currency) => string;
 export declare function setExchangeRateStore(store: ExchangeRateStore): void;
 /**
  * Extension: Atomic currency registration.

package/dist/runes/plugins/money/src/currency.svelte.js

@@ -3,6 +3,14 @@ import {
   getCurrencyStore,
 } from "../../../../kernel/src/mod.js";
 import { registerCurrency } from "./mod.js";
+import { createMessageResolver } from "../../../../i18n/message-resolver.js";
+import * as m from "../../../../i18n/paraglide/messages.js";
+/**
+ * Resolver to get the display name of a currency in the current locale
+ */
+export const getCurrencyName = createMessageResolver(m, {
+  keyExtractor: (c) => c.code,
+});
 /**
  * Helper to build a minimal Dinero definition from Currency metadata.
  * Assumes base 10 (standard decimal) for auto-registration.

package/dist/runes/plugins/money/src/mod.d.ts

@@ -7,6 +7,9 @@ export * from "./strategies.js";
 export * from "./money-primitive.js";
 export * from "./useMoney.js";
 export * from "./useMoneyFilter.svelte.js";
+export { default as CurrencySelector } from "./CurrencySelector.svelte";
+export { default as MoneyDisplay } from "./MoneyDisplay.svelte";
+export { default as MoneyInput } from "./MoneyInput.svelte";
 /**
  * Money Plugin — provides currency management and exchange rate conversion.
  */

package/dist/runes/plugins/money/src/mod.js

@@ -9,6 +9,9 @@ export * from "./strategies.js";
 export * from "./money-primitive.js";
 export * from "./useMoney.js";
 export * from "./useMoneyFilter.svelte.js";
+export { default as CurrencySelector } from "./CurrencySelector.svelte";
+export { default as MoneyDisplay } from "./MoneyDisplay.svelte";
+export { default as MoneyInput } from "./MoneyInput.svelte";
 /**
  * Money Plugin — provides currency management and exchange rate conversion.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rune-lab",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Modern toolkit for Svelte 5 Runes applications.",
   "type": "module",
   "readme": "./README.md",
@@ -10,10 +10,6 @@
     "type": "git",
     "url": "git+https://github.com/Yrrrrrf/rune-lab.git"
   },
-  "scripts": {
-    "dev": "vite dev",
-    "gen:version": "node scripts/gen-version.js"
-  },
   "exports": {
     ".": {
       "svelte": "./dist/mod.js",
@@ -59,4 +55,4 @@
     "dist/**",
     "**/*.test.ts"
   ]
-}
+}