rune-lab 0.0.19 → 0.0.20

package/README.md

@@ -60,16 +60,18 @@ bun install rune-lab
 
 ## Project Configuration
 
-### Deno / SSR projects
+After installing, two configuration steps are required to ensure components are
+compiled and styled correctly in your consuming project.
 
-Because Deno's Vite SSR module runner externalizes `node_modules` by default,
-`.svelte` files from this package would be loaded as raw ES modules, bypassing
-the Svelte compiler. To prevent this, you need to tell Vite to process
-`rune-lab` through its plugin pipeline.
+### Step 1 — Vite: process `rune-lab` through the Svelte compiler
 
-Add the following to your consuming project's `vite.config.ts`:
+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:
 
 ```ts
+// vite.config.ts
 export default defineConfig({
   plugins: [sveltekit()],
   ssr: {
@@ -81,6 +83,26 @@ export default defineConfig({
 This ensures the Svelte plugin transforms the components correctly during SSR,
 just as it would for your own source files.
 
+### Step 2 — Tailwind CSS: scan `rune-lab` for utility classes
+
+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.
+
+Add a `@source` directive to your project's main CSS file to tell Tailwind to
+also scan the `rune-lab` dist output:
+
+```css
+/* app.css / layout.css / global.css — wherever you import Tailwind */
+@import "tailwindcss";
+@source "../node_modules/rune-lab/dist"; /* 👈 add this */
+```
+
+> **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.
+
 ## License
 
 MIT License - See [LICENSE](LICENSE) for details.

package/dist/actions/portal.js

@@ -3,22 +3,27 @@
  */
 export function portal(node, target = "body") {
     let targetNode;
+    let isTeleported = false;
     function update(newTarget) {
         if (typeof newTarget === "string") {
             targetNode = document.querySelector(newTarget);
+            if (!targetNode && import.meta.env?.DEV) {
+                console.warn(`portal target selector "${newTarget}" not found in document.`);
+            }
         }
         else {
             targetNode = newTarget;
         }
         if (targetNode) {
             targetNode.appendChild(node);
+            isTeleported = true;
         }
     }
     update(target);
     return {
         update,
         destroy() {
-            if (node.parentNode) {
+            if (isTeleported && node.parentNode) {
                 node.parentNode.removeChild(node);
             }
         },

package/dist/components/Icon.svelte

@@ -15,8 +15,19 @@
     info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
     shortcut: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
     close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
-    external: '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>'
+    external: '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>',
+    unknown: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>'
   };
+
+  const path = $derived.by(() => {
+    if (!paths[name]) {
+      if (import.meta.env?.DEV) {
+        console.warn(`[Icon] Unknown icon name: "${name}"`);
+      }
+      return paths.unknown;
+    }
+    return paths[name];
+  });
 </script>
 
 <svg
@@ -30,5 +41,5 @@
   class="{size} {className}"
 >
   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-  {@html paths[name]}
+  {@html path}
 </svg>

package/dist/components/RuneProvider.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { setContext, type Snippet } from "svelte";
+    import {
+        createAppStore,
+        createLayoutStore,
+        createCommandStore,
+        createApiStore,
+        createToastStore,
+        createThemeStore,
+        createLanguageStore,
+        createCurrencyStore,
+        createShortcutStore,
+    } from "../state/index";
+    import { Toaster, CommandPalette, ShortcutPalette } from "../index";
+
+    import type { PersistenceDriver } from "../persistence/types";
+    import { RUNE_LAB_CONTEXT } from "../context";
+
+    let { children, persistence } = $props<{
+        children: Snippet;
+        persistence?: PersistenceDriver;
+    }>();
+
+    // 1. Initialize Base Configuration Stores
+    const appStore = createAppStore();
+    const apiStore = createApiStore();
+    const toastStore = createToastStore();
+    // We use a closure approach (`() => persistence`) as supported by the updated config definitions,
+    // to strictly respect Svelte 5 state capturing validations without disabling them globally.
+    const themeStore = createThemeStore(() => persistence);
+    const languageStore = createLanguageStore(() => persistence);
+    const currencyStore = createCurrencyStore(() => persistence);
+    const shortcutStore = createShortcutStore();
+
+    // 2. Initialize Complex Stores (Dependency Injection)
+    const layoutStore = createLayoutStore(() => persistence);
+    const commandStore = createCommandStore({
+        appStore,
+        apiStore,
+        toastStore,
+        themeStore,
+        languageStore,
+        currencyStore,
+    });
+
+    // 3. Provide Contexts
+    setContext(RUNE_LAB_CONTEXT.app, appStore);
+    setContext(RUNE_LAB_CONTEXT.api, apiStore);
+    setContext(RUNE_LAB_CONTEXT.toast, toastStore);
+    setContext(RUNE_LAB_CONTEXT.theme, themeStore);
+    setContext(RUNE_LAB_CONTEXT.language, languageStore);
+    setContext(RUNE_LAB_CONTEXT.currency, currencyStore);
+    setContext(RUNE_LAB_CONTEXT.shortcut, shortcutStore);
+    setContext(RUNE_LAB_CONTEXT.layout, layoutStore);
+    setContext(RUNE_LAB_CONTEXT.commands, commandStore);
+
+    // Meta tags derived from app store state
+    const metaTags = $derived([
+        { name: "description", content: appStore.description },
+        { name: "author", content: appStore.author },
+    ]);
+</script>
+
+<svelte:head>
+    <title>{appStore.name}</title>
+    <link rel="icon" href={"/img/rune.png"} />
+    {#each metaTags as meta}
+        <meta name={meta.name} content={meta.content} />
+    {/each}
+</svelte:head>
+
+<!-- Global Overlays -->
+<Toaster />
+<CommandPalette />
+<ShortcutPalette />
+
+<!-- Render Children -->
+{@render children()}

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

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+import type { PersistenceDriver } from "../persistence/types";
+type $$ComponentProps = {
+    children: Snippet;
+    persistence?: PersistenceDriver;
+};
+declare const RuneProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuneProvider = ReturnType<typeof RuneProvider>;
+export default RuneProvider;

package/dist/composables/useRuneLab.d.ts

@@ -0,0 +1,17 @@
+import { getApiStore, getAppStore, getCommandStore, getCurrencyStore, getLanguageStore, getLayoutStore, getShortcutStore, getThemeStore, getToastStore } from "../state/index";
+export interface RuneLabContext {
+    app: ReturnType<typeof getAppStore>;
+    api: ReturnType<typeof getApiStore>;
+    toast: ReturnType<typeof getToastStore>;
+    theme: ReturnType<typeof getThemeStore>;
+    language: ReturnType<typeof getLanguageStore>;
+    currency: ReturnType<typeof getCurrencyStore>;
+    shortcut: ReturnType<typeof getShortcutStore>;
+    layout: ReturnType<typeof getLayoutStore>;
+    commands: ReturnType<typeof getCommandStore>;
+}
+/**
+ * Retrieves all Rune Lab stores from the Svelte context tree.
+ * Must be called during component initialization (in the `<script>` block).
+ */
+export declare function useRuneLab(): RuneLabContext;

package/dist/composables/useRuneLab.js

@@ -0,0 +1,19 @@
+// src/lib/composables/useRuneLab.ts
+import { getApiStore, getAppStore, getCommandStore, getCurrencyStore, getLanguageStore, getLayoutStore, getShortcutStore, getThemeStore, getToastStore, } from "../state/index";
+/**
+ * Retrieves all Rune Lab stores from the Svelte context tree.
+ * Must be called during component initialization (in the `<script>` block).
+ */
+export function useRuneLab() {
+    return {
+        app: getAppStore(),
+        api: getApiStore(),
+        toast: getToastStore(),
+        theme: getThemeStore(),
+        language: getLanguageStore(),
+        currency: getCurrencyStore(),
+        shortcut: getShortcutStore(),
+        layout: getLayoutStore(),
+        commands: getCommandStore(),
+    };
+}

package/dist/config.d.ts

@@ -1,85 +1,4 @@
-import { apiStore, appStore, commandStore, currencyStore, languageStore, themeStore, toastStore } from "./state/index";
-/**
- * `appConfig` — single entry-point to configure and control the entire app.
- *
- * @example
- * ```ts
- * import { appConfig } from 'rune-lab/config';
- *
- * appConfig.app.init({ name: 'My App', version: '1.0.0' });
- * appConfig.api.init('https://api.example.com', 'v1');
- * appConfig.toast.success('Ready!');
- * ```
- */
-export declare const appConfig: {
-    /** Application metadata (name, version, description…) */
-    readonly app: {
-        name: string;
-        version: string;
-        description: string;
-        author: string;
-        repository: string;
-        license: string;
-        homepage: string;
-        "__#private@#initialized": boolean;
-        init(data: Partial<import(".").AppData>): void;
-        get info(): import(".").AppData;
-    };
-    /** API connection state and base URL */
-    readonly api: {
-        url: string;
-        version: string;
-        connectionState: import("./state/api.svelte").ConnectionState;
-        isConnected: boolean;
-        isLoading: boolean;
-        get URL(): string;
-        get VERSION(): string;
-        get IS_CONNECTED(): boolean;
-        get IS_LOADING(): boolean;
-        reconnect(): Promise<void>;
-        init(url: string, version?: string): void;
-    };
-    /** Active theme + available themes */
-    readonly theme: {
-        current: string;
-        available: import(".").Theme[];
-        set(id: string): void;
-        get(id: string): import(".").Theme | undefined;
-        getProp<K extends keyof import(".").Theme>(prop: K, id?: string | undefined): import(".").Theme[K] | undefined;
-    };
-    /** Active language / locale */
-    readonly language: {
-        current: string | undefined;
-        available: import(".").Language[];
-        set(id: string | undefined): void;
-        get(id: string | undefined): import(".").Language | undefined;
-        getProp<K extends keyof import(".").Language>(prop: K, id?: string | undefined): import(".").Language[K] | undefined;
-    };
-    /** Active currency */
-    readonly currency: {
-        current: string | number;
-        available: import(".").Currency[];
-        set(id: string | number): void;
-        get(id: string | number): import(".").Currency | undefined;
-        getProp<K extends keyof import(".").Currency>(prop: K, id?: string | number | undefined): import(".").Currency[K] | undefined;
-    };
-    /** Toast notification queue */
-    readonly toast: {
-        toasts: import("./state/toast.svelte").Toast[];
-        send(message: string, type?: import("./state/toast.svelte").ToastType, duration?: number): void;
-        dismiss(id: string): void;
-        success(msg: string): void;
-        error(msg: string): void;
-        warn(msg: string): void;
-        info(msg: string): void;
-    };
-    /** Command palette registry */
-    readonly commands: {
-        commands: import(".").Command[];
-        register(command: import(".").Command): void;
-        unregister(id: string): void;
-        search(query: string, parentId?: string): import(".").Command[];
-        "__#private@#findById"(id: string, list: import(".").Command[]): import(".").Command | undefined;
-    };
-};
-export { apiStore, appStore, commandStore, currencyStore, languageStore, themeStore, toastStore, };
+export { AppStore, createAppStore, getAppStore } from "./state/app.svelte";
+export { createLayoutStore, getLayoutStore, LayoutStore, } from "./state/layout.svelte";
+export { type Command, CommandStore, createCommandStore, getCommandStore, } from "./state/commands.svelte";
+export { createApiStore, createCurrencyStore, createLanguageStore, createShortcutStore, createThemeStore, createToastStore, getApiStore, getCurrencyStore, getLanguageStore, getShortcutStore, getThemeStore, getToastStore, } from "./state/index";

package/dist/config.js

@@ -1,34 +1,8 @@
 // src/lib/config.ts
 // Unified facade over all app-level stores.
-// Import this instead of wiring each store individually.
-import { apiStore, appStore, commandStore, currencyStore, languageStore, themeStore, toastStore, } from "./state/index";
-/**
- * `appConfig` — single entry-point to configure and control the entire app.
- *
- * @example
- * ```ts
- * import { appConfig } from 'rune-lab/config';
- *
- * appConfig.app.init({ name: 'My App', version: '1.0.0' });
- * appConfig.api.init('https://api.example.com', 'v1');
- * appConfig.toast.success('Ready!');
- * ```
- */
-export const appConfig = {
-    /** Application metadata (name, version, description…) */
-    app: appStore,
-    /** API connection state and base URL */
-    api: apiStore,
-    /** Active theme + available themes */
-    theme: themeStore,
-    /** Active language / locale */
-    language: languageStore,
-    /** Active currency */
-    currency: currencyStore,
-    /** Toast notification queue */
-    toast: toastStore,
-    /** Command palette registry */
-    commands: commandStore,
-};
-// Re-export individual stores for consumers who want fine-grained imports
-export { apiStore, appStore, commandStore, currencyStore, languageStore, themeStore, toastStore, };
+// Updated for SSR safety: Re-exports factories for context-aware stores.
+export { AppStore, createAppStore, getAppStore } from "./state/app.svelte";
+export { createLayoutStore, getLayoutStore, LayoutStore, } from "./state/layout.svelte";
+export { CommandStore, createCommandStore, getCommandStore, } from "./state/commands.svelte";
+// These stores are factories now
+export { createApiStore, createCurrencyStore, createLanguageStore, createShortcutStore, createThemeStore, createToastStore, getApiStore, getCurrencyStore, getLanguageStore, getShortcutStore, getThemeStore, getToastStore, } from "./state/index";

package/dist/context.d.ts

@@ -0,0 +1,11 @@
+export declare const RUNE_LAB_CONTEXT: {
+    readonly app: symbol;
+    readonly api: symbol;
+    readonly toast: symbol;
+    readonly theme: symbol;
+    readonly language: symbol;
+    readonly currency: symbol;
+    readonly shortcut: symbol;
+    readonly layout: symbol;
+    readonly commands: symbol;
+};

package/dist/context.js

@@ -0,0 +1,12 @@
+// src/lib/context.ts
+export const RUNE_LAB_CONTEXT = {
+    app: Symbol("rl:app"),
+    api: Symbol("rl:api"),
+    toast: Symbol("rl:toast"),
+    theme: Symbol("rl:theme"),
+    language: Symbol("rl:language"),
+    currency: Symbol("rl:currency"),
+    shortcut: Symbol("rl:shortcut"),
+    layout: Symbol("rl:layout"),
+    commands: Symbol("rl:commands"),
+};

package/dist/devtools/API_Monitor.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
-    import { apiStore } from "../state/api.svelte";
-    import { toastStore } from "../state/toast.svelte";
+    import { getApiStore } from "../state/api.svelte";
+    import { getToastStore } from "../state/toast.svelte";
+
+    const apiStore = getApiStore();
+    const toastStore = getToastStore();
 
     let copied = $state(false);
     let isVisible = $state(true);

package/dist/devtools/Toaster.svelte

@@ -1,16 +1,21 @@
 <script lang="ts">
-  import { toastStore } from "../state/toast.svelte";
+  import { getToastStore } from "../state/toast.svelte";
   import { portal } from "../actions/portal";
   import { flip } from "svelte/animate";
   import { fade, fly } from "svelte/transition";
 
-  const typeDetails = {
+  const toastStore = getToastStore();
+
+  const typeDetails: Record<
+    string,
+    { colors: string; iconColor: string; iconPath: string }
+  > = {
     info: {
       colors:
         "bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400",
       iconColor: "text-blue-500",
       iconPath:
-        "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
+        "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z",
     },
     success: {
       colors:
@@ -24,7 +29,7 @@
         "bg-amber-500/10 border-amber-500/20 text-amber-600 dark:text-amber-400",
       iconColor: "text-amber-500",
       iconPath:
-        "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
+        "M12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z", // This path looks wrong in original, replacing with simpler
     },
     error: {
       colors: "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400",
@@ -35,13 +40,13 @@
   };
 </script>
 
-<svelte:element
-  this={"div"}
+<div
   use:portal
   class="toast toast-end toast-bottom z-[9999] p-4 gap-3 pointer-events-none"
 >
   {#each toastStore.toasts as toast (toast.id)}
-    {@const styles = typeDetails[toast.type]}
+    {@const styles = typeDetails[toast.type] || typeDetails.info}
+
     <div
       animate:flip={{ duration: 300 }}
       in:fly={{ y: 20, duration: 300 }}
@@ -96,4 +101,4 @@
       ></div>
     </div>
   {/each}
-</svelte:element>
+</div>

package/dist/devtools/createConfigStore.svelte.d.ts

@@ -1,3 +1,11 @@
+import { type PersistenceDriver } from "../persistence/types";
+export type ConfigStore<T extends ConfigItem> = {
+    current: T[keyof T];
+    available: T[];
+    set: (id: T[keyof T]) => void;
+    get: (id: T[keyof T]) => T | undefined;
+    getProp: <K extends keyof T>(prop: K, id?: T[keyof T]) => T[K] | undefined;
+};
 /**
  * Generic configuration store factory
  * Creates type-safe stores for theme, language, currency, etc.
@@ -9,7 +17,7 @@ interface ConfigItem {
 interface ConfigStoreOptions<T extends ConfigItem> {
     /** Array of available items */
     items: readonly T[];
-    /** LocalStorage key */
+    /** Storage key used by the persistence driver */
     storageKey: string;
     /** Display name for logging (e.g., "Theme", "Language") */
     displayName: string;
@@ -17,6 +25,8 @@ interface ConfigStoreOptions<T extends ConfigItem> {
     idKey: keyof T;
     /** Icon for logs */
     icon?: string;
+    /** Persistence driver */
+    driver?: PersistenceDriver;
 }
 /**
  * Creates a reactive configuration store with persistence

package/dist/devtools/createConfigStore.svelte.js

@@ -1,23 +1,25 @@
 // client/sdk/devtools/src/patterns/createConfigStore.svelte.ts
+import {} from "../persistence/types";
+import { createInMemoryDriver } from "../persistence/drivers";
 /**
  * Creates a reactive configuration store with persistence
  */
 export function createConfigStore(options) {
-    const { items, storageKey, displayName, idKey, icon = "⚙️" } = options;
+    const { items, storageKey, displayName, idKey, icon = "⚙️", driver = createInMemoryDriver(), } = options;
     class ConfigStore {
         current = $state(items[0]?.[idKey] ?? "");
         available = $state([...items]);
         constructor() {
-            if (typeof window !== "undefined") {
-                const saved = localStorage.getItem(storageKey);
-                // Only load saved if it actually exists in our available items
-                if (saved && this.get(saved)) {
-                    this.current = saved;
-                }
+            const saved = driver.get(storageKey);
+            // Only load saved if it actually exists in our available items
+            if (saved && this.get(saved)) {
+                this.current = saved;
+            }
+            if (import.meta.env?.DEV) {
+                console.log(`${icon} ${displayName} configured:`, {
+                    current: this.current,
+                });
             }
-            console.log(`${icon} ${displayName} configured:`, {
-                current: this.current,
-            });
         }
         /**
          * Set current item with validation
@@ -29,7 +31,7 @@ export function createConfigStore(options) {
                 return;
             }
             this.current = id;
-            localStorage.setItem(storageKey, String(id));
+            driver.set(storageKey, String(id));
         }
         /**
          * Get item by id

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

@@ -1,12 +1,15 @@
 <!-- src/client/sdk/ui/src/features/config/CommandPalette.svelte -->
 <script lang="ts">
     import { onMount, tick } from "svelte";
-    import { commandStore, type Command } from "../../state/commands.svelte";
-    import { shortcutStore } from "../../state/shortcuts.svelte";
+    import { getCommandStore, type Command } from "../../state/commands.svelte";
+    import { getShortcutStore } from "../../state/shortcuts.svelte";
     import { Icon } from "../../index";
 
     let { shortcutKey = "shift+k" } = $props<{ shortcutKey?: string }>();
 
+    const commandStore = getCommandStore();
+    const shortcutStore = getShortcutStore();
+
     let dialog: HTMLDialogElement;
     let input: HTMLInputElement;
     let query = $state("");
@@ -176,7 +179,7 @@
                                     {/if}
                                     <div class="flex flex-col items-start">
                                         <span class="font-medium"
-                                            >{cmd.title}</span
+                                            >{cmd.label}</span
                                         >
                                         {#if cmd.category}
                                             <span class="text-xs opacity-70"
@@ -214,6 +217,11 @@
         </div>
     </div>
     <form method="dialog" class="modal-backdrop">
-        <button onclick={(e) => { e.preventDefault(); isOpen = false; }}>close</button>
+        <button
+            onclick={(e) => {
+                e.preventDefault();
+                isOpen = false;
+            }}>close</button
+        >
     </form>
 </dialog>