rune-lab 0.0.21 → 0.1.1

package/README.md

@@ -58,6 +58,43 @@ npm install rune-lab
 bun install rune-lab
 ```
 
+## Quick Start
+
+Get your application shell running in less than 20 lines. Inside your
+`+layout.svelte`:
+
+```svelte
+<script lang="ts">
+  import { RuneProvider, WorkspaceLayout, ConnectedNavigationPanel } from "rune-lab";
+  import { cookieDriver } from "rune-lab";
+
+  let { children } = $props();
+  
+  // Example navigation
+  const sections = [{ id: "main", title: "Main", items: [{ id: "home", label: "Home" }] }];
+</script>
+
+<RuneProvider 
+  app={{ name: "My App", version: "1.0.0" }}
+  persistence={cookieDriver}
+>
+  <WorkspaceLayout>
+    {#snippet navigationPanel()}
+      <ConnectedNavigationPanel {sections} />
+    {/snippet}
+
+    {#snippet content()}
+      <div class="p-8">
+        {@render children()}
+      </div>
+    {/snippet}
+  </WorkspaceLayout>
+</RuneProvider>
+```
+
+You now have a fully functional reactive layout, keyboard command palette, toast
+notification system, and theme switcher ready to go.
+
 ## Project Configuration
 
 After installing, two configuration steps are required to ensure components are
@@ -103,6 +140,76 @@ also scan the `rune-lab` dist output:
 > 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.
 
+## Persistence Drivers
+
+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.
+
+```svelte
+<script lang="ts">
+  import { cookieDriver } from "rune-lab";
+  // Then pass directly: <RuneProvider persistence={cookieDriver}>
+</script>
+```
+
+## Advanced Patterns
+
+### SvelteKit Route Syncing
+
+To keep your layout's active navigation state synchronized with the SvelteKit
+router, use an `$effect` inside your `+layout.svelte` right after the provider:
+
+```svelte
+<script lang="ts">
+    import { page } from "$app/state";
+    import { getLayoutStore } from "rune-lab";
+
+    const layoutStore = getLayoutStore();
+
+    $effect(() => {
+        // Example: Use the first path segment as the active nav item
+        const segment = page.url.pathname.split("/")[1] || "home";
+        layoutStore.navigate(segment);
+    });
+</script>
+```
+
+_(Note: Use `$app/state`, not the older Svelte 4 `$app/stores`)_
+
+### Keyboard Shortcuts
+
+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>
+```
+
 ## License
 
 MIT License - See [LICENSE](LICENSE) for details.

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

@@ -0,0 +1,3 @@
+declare const ApiMonitor: import("svelte").Component<Record<string, never>, {}, "">;
+type ApiMonitor = ReturnType<typeof ApiMonitor>;
+export default ApiMonitor;

package/dist/components/Icon.svelte

@@ -1,32 +1,72 @@
 <script lang="ts">
+  import { getAppStore } from "../state/app.svelte";
+
   /**
    * Simple Icon component for Rune Lab
    * Centralizes SVG paths to reduce boilerplate
    */
-  let { name, size = "w-5 h-5", class: className = "" } = $props<{
-    name: "search" | "chevron-down" | "info" | "shortcut" | "close" | "external";
+  let {
+    name,
+    size = "w-5 h-5",
+    class: className = "",
+    icons = {},
+  } = $props<{
+    name: string;
     size?: string;
     class?: string;
+    icons?: Record<string, string>;
   }>();
 
+  let appStore: ReturnType<typeof getAppStore> | undefined;
+  try {
+    appStore = getAppStore();
+  } catch {
+    // Graceful fallback if Icon is used outside RuneProvider
+  }
+
   const paths: Record<string, string> = {
-    search: '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path>',
+    search:
+      '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path>',
     "chevron-down": '<path d="m6 9 6 6 6-6" />',
+    "chevron-right": '<path d="m9 18 6-6-6-6" />',
     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"/>',
+    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"/>',
-    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"/>'
+    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"/>',
+    plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+    minus: '<path d="M5 12h14"/>',
+    check: '<path d="M20 6 9 17l-5-5"/>',
+    trash:
+      '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
+    edit: '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>',
+    grid: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
+    list: '<line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/>',
+    table:
+      '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><line x1="3" x2="21" y1="9" y2="9"/><line x1="3" x2="21" y1="15" y2="15"/><line x1="9" x2="9" y1="3" y2="21"/><line x1="15" x2="15" y1="3" y2="21"/>',
+    "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+    "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+    menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+    user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+    settings:
+      '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+    logout:
+      '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
+    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;
+    if (icons[name]) return icons[name];
+    if (appStore?.customIcons?.[name]) return appStore.customIcons[name];
+    if (paths[name]) return paths[name];
+
+    if (import.meta.env?.DEV) {
+      console.warn(`[Icon] Unknown icon name: "${name}"`);
     }
-    return paths[name];
+    return paths.unknown;
   });
 </script>
 

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

@@ -1,7 +1,8 @@
 type $$ComponentProps = {
-    name: "search" | "chevron-down" | "info" | "shortcut" | "close" | "external";
+    name: string;
     size?: string;
     class?: string;
+    icons?: Record<string, string>;
 };
 declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/components/RuneProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { setContext, untrack, type Snippet } from "svelte";
+    import { setContext, untrack, type Snippet, onMount } from "svelte";
     import {
         createAppStore,
         createLayoutStore,
@@ -11,14 +11,26 @@
         createCurrencyStore,
         createShortcutStore,
     } from "../state/index";
+    import { wire } from "../state/toast-bridge";
     import { Toaster, CommandPalette, ShortcutPalette } from "../index";
 
     import type { PersistenceDriver } from "../persistence/types";
     import { RUNE_LAB_CONTEXT } from "../context";
+    import type { AppData } from "../state/app.svelte";
 
-    let { children, persistence } = $props<{
-        children: Snippet;
+    export interface RuneLabConfig {
         persistence?: PersistenceDriver;
+        app?: Partial<AppData>;
+        apiUrl?: string;
+        apiHealthCheck?: () => Promise<boolean>;
+        favicon?: string;
+        manageHead?: boolean;
+        dictionary?: Record<string, any>;
+    }
+
+    let { children, config = {} } = $props<{
+        children: Snippet;
+        config?: RuneLabConfig;
     }>();
 
     // 1. Initialize Base Configuration Stores
@@ -26,11 +38,16 @@
     const apiStore = createApiStore();
     const toastStore = createToastStore();
 
+    // Wire global toast bridge
+    wire(toastStore);
+
     // Capture the initial persistence prop to avoid Svelte 5 reactive capture warnings
-    const initialPersistence = untrack(() => persistence);
+    const initialPersistence = untrack(() => config.persistence);
 
     const themeStore = createThemeStore(initialPersistence);
-    const languageStore = createLanguageStore(initialPersistence);
+    const languageStore = createLanguageStore({
+        driver: initialPersistence,
+    });
     const currencyStore = createCurrencyStore(initialPersistence);
     const shortcutStore = createShortcutStore();
 
@@ -57,6 +74,24 @@
     setContext(RUNE_LAB_CONTEXT.commands, commandStore);
     setContext(RUNE_LAB_CONTEXT.persistence, initialPersistence);
 
+    const initialDictionary = untrack(() => config.dictionary);
+    if (initialDictionary) {
+        setContext("rl:dictionary", initialDictionary);
+    }
+
+    // Track config changes dynamically
+    $effect(() => {
+        if (config.app) appStore.init(config.app);
+    });
+
+    $effect(() => {
+        if (config.apiUrl) apiStore.init(config.apiUrl, "v1", config.apiHealthCheck);
+    });
+
+    onMount(() => {
+        layoutStore.init();
+    });
+
     // Meta tags derived from app store state
     const metaTags = $derived([
         { name: "description", content: appStore.description },
@@ -65,11 +100,15 @@
 </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}
+    {#if config.manageHead !== false}
+        <title>{appStore.name}</title>
+        {#if config.favicon}
+            <link rel="icon" href={config.favicon} />
+        {/if}
+        {#each metaTags as meta}
+            <meta name={meta.name} content={meta.content} />
+        {/each}
+    {/if}
 </svelte:head>
 
 <!-- Global Overlays -->

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

@@ -1,8 +1,18 @@
 import { type Snippet } from "svelte";
 import type { PersistenceDriver } from "../persistence/types";
+import type { AppData } from "../state/app.svelte";
+export interface RuneLabConfig {
+    persistence?: PersistenceDriver;
+    app?: Partial<AppData>;
+    apiUrl?: string;
+    apiHealthCheck?: () => Promise<boolean>;
+    favicon?: string;
+    manageHead?: boolean;
+    dictionary?: Record<string, any>;
+}
 type $$ComponentProps = {
     children: Snippet;
-    persistence?: PersistenceDriver;
+    config?: RuneLabConfig;
 };
 declare const RuneProvider: import("svelte").Component<$$ComponentProps, {}, "">;
 type RuneProvider = ReturnType<typeof RuneProvider>;

package/dist/{devtools → components}/Toaster.svelte

@@ -15,7 +15,7 @@
         "bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400",
       iconColor: "text-blue-500",
       iconPath:
-        "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",
+        "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 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
     },
     success: {
       colors:
@@ -29,7 +29,7 @@
         "bg-amber-500/10 border-amber-500/20 text-amber-600 dark:text-amber-400",
       iconColor: "text-amber-500",
       iconPath:
-        "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
+        "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z", // Proper warning icon
     },
     error: {
       colors: "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400",

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

@@ -46,6 +46,7 @@
         <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">
@@ -66,9 +67,12 @@
                     </form>
                 </div>
                 <div class="max-h-[60vh] overflow-y-auto p-2">
-                    <ul class="menu bg-base-100 w-full p-0">
+                    <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">
+                            <li
+                                class="border-b border-base-100 last:border-0"
+                                role="menuitem"
+                            >
                                 <button
                                     class="w-full text-left py-3"
                                     onclick={() => modal?.close()}
@@ -96,6 +100,7 @@
     <div
         tabindex="0"
         role="button"
+        aria-haspopup="menu"
         class="btn btn-ghost btn-sm m-1 {tooltip
             ? 'tooltip tooltip-bottom'
             : ''}"
@@ -107,10 +112,11 @@
     </div>
 
     <ul
+        role="menu"
         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>
+            <li role="menuitem">
                 {@render item(option)}
             </li>
         {/each}

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

@@ -3,12 +3,12 @@
     import {
         getCurrencyStore,
         type Currency,
-    } from "../../../state/currency.svelte";
+    } from "../../state/currency.svelte";
 
     const currencyStore = getCurrencyStore();
 
-    import * as m from "../../../paraglide/messages.js";
-    import { createMessageResolver } from "../../../devtools/message-resolver";
+    import { getContext } from "svelte";
+    import { createMessageResolver } from "../../internal/message-resolver";
 
     let {
         codes = [],
@@ -20,7 +20,9 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const getLabel = createMessageResolver<Currency>(m as any, {
+    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+
+    const getLabel = createMessageResolver<Currency>(dictionary as any, {
         keyExtractor: (c) => String(c.code),
     });
 

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

@@ -3,16 +3,15 @@
     import {
         getLanguageStore,
         type Language,
-    } from "../../../state/language.svelte";
+    } 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";
+    import { getContext } from "svelte";
+    import { createMessageResolver } from "../../internal/message-resolver";
 
     let {
-        languages: allowedLocales = locales,
+        languages: allowedLocales = languageStore.available.map((l) => l.code),
         current = $bindable(languageStore.current),
         onchange,
     }: {
@@ -21,7 +20,9 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const getLabel = createMessageResolver<Language>(m as any, {
+    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+
+    const getLabel = createMessageResolver<Language>(dictionary as any, {
         keyExtractor: (l) => l.code,
     });
 
@@ -50,7 +51,6 @@
             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/{components/ThemeSelector.svelte → ThemeSelector.svelte}

@@ -1,11 +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";
 
     const themeStore = getThemeStore();
 
-    import * as m from "../../../paraglide/messages.js";
-    import { createMessageResolver } from "../../../devtools/message-resolver";
+    import { getContext } from "svelte";
+    import { createMessageResolver } from "../../internal/message-resolver";
 
     let {
         themes = [],
@@ -17,7 +17,9 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const getThemeLabel = createMessageResolver<Theme>(m as any, {
+    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+
+    const getThemeLabel = createMessageResolver<Theme>(dictionary as any, {
         keyExtractor: (t) => t.name,
     });
 

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { getLayoutStore } from "../../state/layout.svelte";
-
-    const layoutStore = getLayoutStore();
+    import { showcaseState } from "../../showcase/state.svelte";
 
     import { getToastStore } from "../../state/toast.svelte";
 
@@ -21,7 +19,7 @@
         "visual",
     ];
 
-    const currentTabId = $derived(tabs[layoutStore.activeShowcaseTab]);
+    const currentTabId = $derived(tabs[showcaseState.activeTab]);
     const components = $derived(SHOWCASE_COMPONENTS[currentTabId] || []);
     const snippet = $derived(SHOWCASE_SNIPPETS[currentTabId] || "");
 
@@ -52,8 +50,8 @@
             {#each tabs as tab, i}
                 <li>
                     <button
-                        class:active={layoutStore.activeShowcaseTab === i}
-                        onclick={() => layoutStore.setShowcaseTab(i)}
+                        class:active={showcaseState.activeTab === i}
+                        onclick={() => (showcaseState.activeTab = i)}
                         class="capitalize"
                     >
                         {tab.replace("-", " ")}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { createConfigStore } from "./devtools/createConfigStore.svelte";
-export { createMessageResolver } from "./devtools/message-resolver";
+export { createConfigStore } from "./state/createConfigStore.svelte";
+export { createMessageResolver } from "./internal/message-resolver";
 export { RUNE_LAB_CONTEXT } from "./context";
 export type { PersistenceDriver } from "./persistence/types";
 export { cookieDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
@@ -8,24 +8,23 @@ export { usePersistence } from "./composables/usePersistence.js";
 export { portal } from "./actions/portal";
 export { default as RuneProvider } from "./components/RuneProvider.svelte";
 export { default as Icon } from "./components/Icon.svelte";
-export { default as Toaster } from "./devtools/Toaster.svelte";
-export { default as ApiMonitor } from "./devtools/API_Monitor.svelte";
+export { default as Toaster } from "./components/Toaster.svelte";
+export { default as ApiMonitor } from "./components/ApiMonitor.svelte";
 export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
 export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
-export { default as WorkspaceLayout } from "./layout/WorkspaceLayout.svelte";
+export { default as WorkspaceLayout, type WorkspaceLayoutProps, } from "./layout/WorkspaceLayout.svelte";
 export { default as WorkspaceStrip } from "./layout/WorkspaceStrip.svelte";
 export { default as NavigationPanel } from "./layout/NavigationPanel.svelte";
 export { default as ContentArea } from "./layout/ContentArea.svelte";
 export { default as DetailPanel } from "./layout/DetailPanel.svelte";
 export { default as ConnectedNavigationPanel } from "./features/layout/smart/ConnectedNavigationPanel.svelte";
 export { default as ConnectedWorkspaceStrip } from "./features/layout/smart/ConnectedWorkspaceStrip.svelte";
-export { default as AppSettingSelector } from "./features/config/components/AppSettingSelector.svelte";
-export { default as ThemeSelector } from "./features/config/components/ThemeSelector.svelte";
-export { default as LanguageSelector } from "./features/config/components/LanguageSelector.svelte";
-export { default as CurrencySelector } from "./features/config/components/CurrencySelector.svelte";
-export { createApiStore, createAppStore, createCommandStore, createCurrencyStore, createLanguageStore, createLayoutStore, createShortcutStore, createThemeStore, createToastStore, getApiStore, getAppStore, getCommandStore, getCurrencyStore, getLanguageStore, getLayoutStore, getShortcutStore, getThemeStore, getToastStore, } from "./state/index";
+export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
+export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
+export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
+export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
+export { createApiStore, createAppStore, createCommandStore, createCurrencyStore, createLanguageStore, createLayoutStore, createShortcutStore, createThemeStore, createToastBridge, createToastStore, getApiStore, getAppStore, getCommandStore, getCurrencyStore, getLanguageStore, getLayoutStore, getShortcutStore, getThemeStore, getToastStore, notify, } from "./state/index";
 export { default as AppStateInspector } from "./showcase/AppStateInspector.svelte";
-export { default as ShowcaseMain } from "./showcase/Showcase.svelte";
-export { default as ShowcaseCard } from "./showcase/ShowcaseCard.svelte";
-export type { AppData, Command, Currency, Language, NavigationItem, NavigationSection, ShortcutEntry, Theme, WorkspaceItem, } from "./state/index";
+export type { AppData, Command, ConfigStore, Currency, Language, NavigationItem, NavigationSection, ShortcutEntry, Theme, WorkspaceItem, } from "./state/index";
+export type { ConnectionState } from "./state/api.svelte";
 export * as sdkMessages from "./paraglide/messages.js";

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/lib/index.ts
 // Public surface of rune-lab.
 // ── Devtools utilities ────────────────────────────────────────────────────────
-export { createConfigStore } from "./devtools/createConfigStore.svelte";
-export { createMessageResolver } from "./devtools/message-resolver";
+export { createConfigStore } from "./state/createConfigStore.svelte";
+export { createMessageResolver } from "./internal/message-resolver";
 export { RUNE_LAB_CONTEXT } from "./context";
 export { cookieDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
 // ── Composables ───────────────────────────────────────────────────────────────
@@ -15,12 +15,12 @@ export { portal } from "./actions/portal";
 export { default as RuneProvider } from "./components/RuneProvider.svelte";
 export { default as Icon } from "./components/Icon.svelte";
 // Core overlays
-export { default as Toaster } from "./devtools/Toaster.svelte";
-export { default as ApiMonitor } from "./devtools/API_Monitor.svelte";
+export { default as Toaster } from "./components/Toaster.svelte";
+export { default as ApiMonitor } from "./components/ApiMonitor.svelte";
 export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
 export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
 // Layout - Dumb Primitives
-export { default as WorkspaceLayout } from "./layout/WorkspaceLayout.svelte";
+export { default as WorkspaceLayout, } from "./layout/WorkspaceLayout.svelte";
 export { default as WorkspaceStrip } from "./layout/WorkspaceStrip.svelte";
 export { default as NavigationPanel } from "./layout/NavigationPanel.svelte";
 export { default as ContentArea } from "./layout/ContentArea.svelte";
@@ -29,15 +29,12 @@ export { default as DetailPanel } from "./layout/DetailPanel.svelte";
 export { default as ConnectedNavigationPanel } from "./features/layout/smart/ConnectedNavigationPanel.svelte";
 export { default as ConnectedWorkspaceStrip } from "./features/layout/smart/ConnectedWorkspaceStrip.svelte";
 // Setting selectors
-export { default as AppSettingSelector } from "./features/config/components/AppSettingSelector.svelte";
-export { default as ThemeSelector } from "./features/config/components/ThemeSelector.svelte";
-export { default as LanguageSelector } from "./features/config/components/LanguageSelector.svelte";
-export { default as CurrencySelector } from "./features/config/components/CurrencySelector.svelte";
+export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
+export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
+export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
+export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
 // ── Stores ────────────────────────────────────────────────────────────────────
-export { createApiStore, createAppStore, createCommandStore, createCurrencyStore, createLanguageStore, createLayoutStore, createShortcutStore, createThemeStore, createToastStore, getApiStore, getAppStore, getCommandStore, getCurrencyStore, getLanguageStore, getLayoutStore, getShortcutStore, getThemeStore, getToastStore, } from "./state/index";
-// ── Showcase ──────────────────────────────────────────────────────────────────
+export { createApiStore, createAppStore, createCommandStore, createCurrencyStore, createLanguageStore, createLayoutStore, createShortcutStore, createThemeStore, createToastBridge, createToastStore, getApiStore, getAppStore, getCommandStore, getCurrencyStore, getLanguageStore, getLayoutStore, getShortcutStore, getThemeStore, getToastStore, notify, } from "./state/index";
 export { default as AppStateInspector } from "./showcase/AppStateInspector.svelte";
-export { default as ShowcaseMain } from "./showcase/Showcase.svelte";
-export { default as ShowcaseCard } from "./showcase/ShowcaseCard.svelte";
 // ── Paraglide compiled messages ───────────────────────────────────────────────
 export * as sdkMessages from "./paraglide/messages.js";