rune-lab 0.4.2 → 0.4.4

package/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/Yrrrrrf/rune-lab/main/src/sdk/ui/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" descripti``on="Icon representing the Svelte Runes system">
   <div align="center">Rune Lab</div>
 </h1>
 

package/dist/RuneProvider.svelte

@@ -37,9 +37,11 @@
 
   // 0. Create and provide the built-in AppStore
   const appStore = createAppStore();
-  if (config.app) {
-    appStore.init(config.app);
-  }
+  untrack(() => {
+    if (config.app) {
+      appStore.init(config.app);
+    }
+  });
   setContext(RUNE_LAB_CONTEXT.app, appStore);
 
   // 1. Register all plugins

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

@@ -5,8 +5,15 @@ export type ConfigStore<T = unknown> = {
   set: (id: unknown) => void;
   get: (id: unknown) => T | undefined;
   getProp: <K extends keyof T>(prop: K, id?: unknown) => T[K] | undefined;
-  /** Append additional items (e.g. custom themes/currencies from the consuming app) */
   addItems: (newItems: T[]) => void;
+  /**
+   * Inject (or replace) the persistence driver at runtime.
+   * Call this inside your plugin factory so the real driver
+   * (e.g. localStorageDriver from RuneProvider) is used instead
+   * of the default in-memory fallback that was set at module-load time.
+   * Also re-reads any value already persisted under storageKey.
+   */
+  setDriver: (driver: PersistenceDriver) => void;
 };
 export interface ConfigStoreOptions<T = unknown> {
   /** Array of available items */

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

@@ -30,6 +30,22 @@ class ConfigStoreImpl {
       );
     }
   }
+  /**
+   * Replace the persistence driver and immediately re-read any saved value.
+   *
+   * Singletons are constructed at module-load time (before RuneProvider
+   * mounts), so they default to createInMemoryDriver(). Call this inside
+   * your plugin factory to swap in the real driver (e.g. localStorageDriver)
+   * so that all subsequent .set() calls are persisted correctly.
+   */
+  setDriver(driver) {
+    this.#driver = driver;
+    // Re-read persisted value now that we have a real driver
+    const saved = driver.get(this.#options.storageKey);
+    if (saved && this.get(saved)) {
+      this.current = saved;
+    }
+  }
   /**
    * Set current item with validation
    */

package/dist/mod.d.ts

@@ -3,3 +3,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 declare const version: () => string;

package/dist/mod.js

@@ -4,5 +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";
-// import pkgConfig from "../../package.json" with { type: "json" };
-// export const version = (): string => pkgConfig.version;
+export const version = () => "0.4.4";

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

@@ -24,6 +24,9 @@
 
     let isOpen = $state(false);
     let triggerEl = $state<HTMLElement>();
+    // FIX: track the portaled panel so clicks inside it are not treated as
+    // "outside" clicks. The panel lives outside triggerEl in the DOM (portal).
+    let panelEl = $state<HTMLElement | null>(null);
     let panelStyle = $state("position:fixed;visibility:hidden");
 
     function computePosition() {
@@ -53,24 +56,44 @@
         isOpen = false;
     }
 
+    // FIX: removed `capture: true`.
+    //
+    // With capture:true, handleOutsideClick fired BEFORE the item button's
+    // onclick. Because Svelte 5 flushes {#if} DOM removals synchronously in
+    // the same reactive batch, the panel was torn down before the bubble phase
+    // could deliver the click to the button. Result: LanguageSelector and
+    // CurrencySelector needed two clicks (ThemeSelector was immune only
+    // because its radio `change` event is a separate, later event).
+    //
+    // Without capture:true the order is:
+    //   button onclick → wrapper div onclick (close) → document bubble
+    // The item action runs first; then we close; then outside-click check.
+    //
+    // panelEl is checked too: even after the panel is removed from the live
+    // DOM, the detached node still answers .contains() correctly, so we never
+    // double-close on a panel click.
     function handleOutsideClick(e: MouseEvent) {
-        if (!triggerEl?.contains(e.target as Node)) close();
+        const target = e.target as Node;
+        if (!triggerEl?.contains(target) && !panelEl?.contains(target)) {
+            close();
+        }
+    }
+
+    // FIX: named function so we can actually remove it in cleanup.
+    // Before, an inline arrow was passed to addEventListener and could never
+    // be removed — a new Escape handler stacked up on every open.
+    function handleKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape") close();
     }
 
     $effect(() => {
         if (isOpen) {
-            document.addEventListener("click", handleOutsideClick, {
-                capture: true,
-            });
-            document.addEventListener(
-                "keydown",
-                (e) => e.key === "Escape" && close(),
-            );
+            document.addEventListener("click", handleOutsideClick);
+            document.addEventListener("keydown", handleKeyDown);
         }
         return () => {
-            document.removeEventListener("click", handleOutsideClick, {
-                capture: true,
-            });
+            document.removeEventListener("click", handleOutsideClick);
+            document.removeEventListener("keydown", handleKeyDown); // was missing
         };
     });
 </script>
@@ -148,7 +171,9 @@
 </div>
 
 {#if isOpen}
+    <!-- FIX: bind:this={panelEl} so handleOutsideClick can exclude it -->
     <div
+        bind:this={panelEl}
         use:portal
         style={panelStyle}
         class={responsive ? "hidden md:block" : "block"}
@@ -159,8 +184,6 @@
         >
             {#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}

package/dist/runes/layout/src/mod.js

@@ -34,15 +34,17 @@ export const LayoutPlugin = defineRune({
     {
       id: "theme",
       contextKey: RUNE_LAB_CONTEXT.theme,
-      factory: (config, _driver) => {
+      factory: (config, driver) => {
+        // FIX: inject the real driver (e.g. localStorageDriver from RuneProvider).
+        // The singleton was built at module-load time with createInMemoryDriver(),
+        // so without this call every theme change is lost on page reload.
+        themeStore.setDriver(driver);
         const c = config;
         if (c.customThemes) {
           themeStore.addItems(c.customThemes);
         }
-        if (
-          c.defaultTheme &&
-          !themeStore.current
-        ) {
+        // Only apply defaultTheme when there's no persisted value already loaded
+        if (c.defaultTheme && !themeStore.current) {
           if (themeStore.get(c.defaultTheme)) {
             themeStore.set(c.defaultTheme);
           }
@@ -53,7 +55,10 @@ export const LayoutPlugin = defineRune({
     {
       id: "language",
       contextKey: RUNE_LAB_CONTEXT.language,
-      factory: (config, _driver) => {
+      factory: (config, driver) => {
+        // FIX: same as theme — swap in the real driver so language choices
+        // are persisted to localStorage and survive page reloads.
+        languageStore.setDriver(driver);
         const c = config;
         if (c.locales) {
           const localesToKeep = c.locales;

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

@@ -31,7 +31,11 @@ export const MoneyPlugin = defineRune({
     {
       id: "currency",
       contextKey: RUNE_LAB_CONTEXT.currency,
-      factory: (config, _driver, stores) => {
+      factory: (config, driver, stores) => {
+        // FIX: inject the real driver so currency selection is persisted.
+        // Previously `_driver` was ignored, leaving the singleton on its
+        // default createInMemoryDriver() — wiped on every page reload.
+        currencyStore.setDriver(driver);
         const c = config;
         setExchangeRateStore(stores.get("exchangeRate"));
         if (c?.currencies) {
@@ -39,10 +43,7 @@ export const MoneyPlugin = defineRune({
             currencyStore.addCurrency(cur);
           }
         }
-        if (
-          c?.defaultCurrency &&
-          !currencyStore.current
-        ) {
+        if (c?.defaultCurrency && !currencyStore.current) {
           if (currencyStore.get(c.defaultCurrency)) {
             currencyStore.set(c.defaultCurrency);
           }

package/package.json

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