rune-lab 0.0.20 → 0.0.21

package/dist/components/RuneProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { setContext, type Snippet } from "svelte";
+    import { setContext, untrack, type Snippet } from "svelte";
     import {
         createAppStore,
         createLayoutStore,
@@ -25,15 +25,17 @@
     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);
+
+    // Capture the initial persistence prop to avoid Svelte 5 reactive capture warnings
+    const initialPersistence = untrack(() => persistence);
+
+    const themeStore = createThemeStore(initialPersistence);
+    const languageStore = createLanguageStore(initialPersistence);
+    const currencyStore = createCurrencyStore(initialPersistence);
     const shortcutStore = createShortcutStore();
 
     // 2. Initialize Complex Stores (Dependency Injection)
-    const layoutStore = createLayoutStore(() => persistence);
+    const layoutStore = createLayoutStore(initialPersistence);
     const commandStore = createCommandStore({
         appStore,
         apiStore,
@@ -53,6 +55,7 @@
     setContext(RUNE_LAB_CONTEXT.shortcut, shortcutStore);
     setContext(RUNE_LAB_CONTEXT.layout, layoutStore);
     setContext(RUNE_LAB_CONTEXT.commands, commandStore);
+    setContext(RUNE_LAB_CONTEXT.persistence, initialPersistence);
 
     // Meta tags derived from app store state
     const metaTags = $derived([

package/dist/composables/usePersistence.d.ts

@@ -0,0 +1,2 @@
+import type { PersistenceDriver } from "../persistence/types";
+export declare function usePersistence(): PersistenceDriver | undefined;

package/dist/composables/usePersistence.js

@@ -0,0 +1,5 @@
+import { getContext } from "svelte";
+import { RUNE_LAB_CONTEXT } from "../context";
+export function usePersistence() {
+    return getContext(RUNE_LAB_CONTEXT.persistence);
+}

package/dist/context.d.ts

@@ -8,4 +8,5 @@ export declare const RUNE_LAB_CONTEXT: {
     readonly shortcut: symbol;
     readonly layout: symbol;
     readonly commands: symbol;
+    readonly persistence: symbol;
 };

package/dist/context.js

@@ -9,4 +9,5 @@ export const RUNE_LAB_CONTEXT = {
     shortcut: Symbol("rl:shortcut"),
     layout: Symbol("rl:layout"),
     commands: Symbol("rl:commands"),
+    persistence: Symbol("rl:persistence"),
 };

package/dist/devtools/Toaster.svelte

@@ -48,10 +48,7 @@
     {@const styles = typeDetails[toast.type] || typeDetails.info}
 
     <div
-      animate:flip={{ duration: 300 }}
-      in:fly={{ y: 20, duration: 300 }}
-      out:fade={{ duration: 200 }}
-      class="pointer-events-auto relative flex w-full max-w-sm items-start gap-4 overflow-hidden rounded-xl border p-4 shadow-lg backdrop-blur-xl transition-all sm:min-w-[320px] {styles.colors}"
+      class="pointer-events-auto relative flex w-full max-w-sm items-start gap-4 overflow-hidden rounded-xl border p-4 shadow-lg backdrop-blur-xl transition-all duration-300 sm:min-w-[320px] {styles.colors} animate-in fade-in slide-in-from-bottom-4 zoom-in-95 ease-out data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-right-full"
       role="alert"
     >
       <!-- Icon -->

package/dist/features/layout/smart/ConnectedNavigationPanel.svelte

@@ -0,0 +1,30 @@
+<!-- src/lib/features/layout/smart/ConnectedNavigationPanel.svelte -->
+<script lang="ts">
+    import {
+        getLayoutStore,
+        type NavigationSection,
+    } from "../../../state/layout.svelte";
+    import NavigationPanel from "../../../layout/NavigationPanel.svelte";
+    import type { Snippet } from "svelte";
+
+    let { sections, header, footer } = $props<{
+        sections: NavigationSection[];
+        header?: Snippet;
+        footer?: Snippet;
+    }>();
+
+    const layoutStore = getLayoutStore();
+</script>
+
+<NavigationPanel
+    {sections}
+    {header}
+    {footer}
+    activeId={layoutStore.activeNavItemId}
+    collapsedIds={layoutStore.collapsedSections}
+    onSelect={(item) => layoutStore.navigate(item.id!)}
+    onToggle={(id, isOpen) =>
+        isOpen
+            ? layoutStore.expandSection(id)
+            : layoutStore.collapseSection(id)}
+/>

package/dist/features/layout/smart/ConnectedNavigationPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type NavigationSection } from "../../../state/layout.svelte";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    sections: NavigationSection[];
+    header?: Snippet;
+    footer?: Snippet;
+};
+declare const ConnectedNavigationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConnectedNavigationPanel = ReturnType<typeof ConnectedNavigationPanel>;
+export default ConnectedNavigationPanel;

package/dist/features/layout/smart/ConnectedWorkspaceStrip.svelte

@@ -0,0 +1,23 @@
+<!-- src/lib/features/layout/smart/ConnectedWorkspaceStrip.svelte -->
+<script lang="ts">
+    import {
+        getLayoutStore,
+        type WorkspaceItem,
+    } from "../../../state/layout.svelte";
+    import WorkspaceStrip from "../../../layout/WorkspaceStrip.svelte";
+    import type { Snippet } from "svelte";
+
+    let { items, globalActions } = $props<{
+        items: WorkspaceItem[];
+        globalActions?: Snippet;
+    }>();
+
+    const layoutStore = getLayoutStore();
+</script>
+
+<WorkspaceStrip
+    {items}
+    {globalActions}
+    activeId={layoutStore.activeWorkspaceId}
+    onSelect={(id) => layoutStore.activateWorkspace(id)}
+/>

package/dist/features/layout/smart/ConnectedWorkspaceStrip.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type WorkspaceItem } from "../../../state/layout.svelte";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    items: WorkspaceItem[];
+    globalActions?: Snippet;
+};
+declare const ConnectedWorkspaceStrip: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConnectedWorkspaceStrip = ReturnType<typeof ConnectedWorkspaceStrip>;
+export default ConnectedWorkspaceStrip;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { createMessageResolver } from "./devtools/message-resolver";
 export { RUNE_LAB_CONTEXT } from "./context";
 export type { PersistenceDriver } from "./persistence/types";
 export { cookieDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
-export { useRuneLab } from "./composables/useRuneLab";
-export type { RuneLabContext } from "./composables/useRuneLab";
+export { type RuneLabContext, useRuneLab } from "./composables/useRuneLab.js";
+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";
@@ -12,7 +12,13 @@ export { default as Toaster } from "./devtools/Toaster.svelte";
 export { default as ApiMonitor } from "./devtools/API_Monitor.svelte";
 export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
 export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
-export * from "./layout/index";
+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";
+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";

package/dist/index.js

@@ -6,7 +6,8 @@ export { createMessageResolver } from "./devtools/message-resolver";
 export { RUNE_LAB_CONTEXT } from "./context";
 export { cookieDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
 // ── Composables ───────────────────────────────────────────────────────────────
-export { useRuneLab } from "./composables/useRuneLab";
+export { useRuneLab } from "./composables/useRuneLab.js";
+export { usePersistence } from "./composables/usePersistence.js";
 // ── Actions ───────────────────────────────────────────────────────────────────
 export { portal } from "./actions/portal";
 // ── UI Components ─────────────────────────────────────────────────────────────
@@ -18,8 +19,15 @@ export { default as Toaster } from "./devtools/Toaster.svelte";
 export { default as ApiMonitor } from "./devtools/API_Monitor.svelte";
 export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
 export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
-// Layout
-export * from "./layout/index";
+// Layout - Dumb Primitives
+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";
+export { default as DetailPanel } from "./layout/DetailPanel.svelte";
+// Layout - Smart Connected Components
+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";

package/dist/layout/NavigationPanel.svelte

@@ -1,31 +1,82 @@
 <!-- src/lib/layout/NavigationPanel.svelte -->
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import {
-        getLayoutStore,
-        type NavigationItem,
-        type NavigationSection,
+    import type {
+        NavigationItem,
+        NavigationSection,
     } from "../state/layout.svelte";
-    import { page } from "$app/stores"; // Check if this is needed, or use layoutStore for active item
 
     let {
         header,
         sections = [],
         footer,
+        activeId,
+        collapsedIds = new Set(),
+        onSelect,
+        onToggle,
     } = $props<{
         header?: Snippet;
         sections: NavigationSection[];
         footer?: Snippet;
+        activeId?: string | null;
+        collapsedIds?: Set<string>;
+        onSelect?: (item: NavigationItem) => void;
+        onToggle?: (id: string, isOpen: boolean) => void;
     }>();
 
-    const layoutStore = getLayoutStore();
-
     function handleItemClick(item: NavigationItem) {
-        if (item.id) layoutStore.navigate(item.id);
+        onSelect?.(item);
+        // Only trigger click handler, don't auto-navigate here (let parent handle it)
         item.onClick?.();
     }
 </script>
 
+{#snippet navItem(item: NavigationItem)}
+    <li>
+        {#if item.children && item.children.length > 0}
+            <!-- Folder Item (Recursive) -->
+            <details
+                open={/* You might want a way to track open state for sub-folders too */ false}
+            >
+                <summary>
+                    {#if item.icon}<span class="text-lg">{item.icon}</span>{/if}
+                    <span class="flex-1">{item.label}</span>
+                </summary>
+                <ul>
+                    {#each item.children as child (child.id)}
+                        {@render navItem(child)}
+                        <!-- ♻️ RECURSION HAPPENS HERE -->
+                    {/each}
+                </ul>
+            </details>
+        {:else}
+            <!-- Leaf Item -->
+            <button
+                class:active={item.isActive !== undefined
+                    ? item.isActive
+                    : activeId === item.id}
+                onclick={() => handleItemClick(item)}
+            >
+                {#if item.icon}
+                    {#if typeof item.icon === "string" && (item.icon.startsWith("http") || item.icon.length > 2)}
+                        <!-- Image or SVG string -->
+                        <span class="text-lg">{item.icon}</span>
+                    {:else}
+                        <!-- Emoji or simple char -->
+                        <span class="text-lg">{item.icon}</span>
+                    {/if}
+                {/if}
+
+                <span class="flex-1">{item.label}</span>
+
+                {#if item.badge}
+                    <span class="badge badge-sm badge-ghost">{item.badge}</span>
+                {/if}
+            </button>
+        {/if}
+    </li>
+{/snippet}
+
 <div class="flex flex-col h-full bg-base-200 text-base-content">
     {#if header}
         <div class="p-4 border-b border-base-content/10">
@@ -38,12 +89,11 @@
             {#each sections as section (section.id)}
                 <li>
                     <details
-                        open={!layoutStore.collapsedSections.has(section.id)}
+                        open={!collapsedIds.has(section.id)}
                         ontoggle={(e) => {
                             const open = (e.currentTarget as HTMLDetailsElement)
                                 .open;
-                            if (open) layoutStore.expandSection(section.id);
-                            else layoutStore.collapseSection(section.id);
+                            onToggle?.(section.id, open);
                         }}
                     >
                         <summary
@@ -53,27 +103,7 @@
                         </summary>
                         <ul>
                             {#each section.items as item (item.id)}
-                                <!-- Recursive Render? Or simple list? Current structure suggests mostly 1 level deep inside section -->
-                                <li>
-                                    <button
-                                        class:active={layoutStore.activeNavItemId ===
-                                            item.id}
-                                        onclick={() => handleItemClick(item)}
-                                    >
-                                        {#if item.icon}
-                                            <span class="text-lg"
-                                                >{item.icon}</span
-                                            >
-                                        {/if}
-                                        <span class="flex-1">{item.label}</span>
-                                        {#if item.badge}
-                                            <span
-                                                class="badge badge-sm badge-ghost"
-                                                >{item.badge}</span
-                                            >
-                                        {/if}
-                                    </button>
-                                </li>
+                                {@render navItem(item)}
                             {/each}
                         </ul>
                     </details>

package/dist/layout/NavigationPanel.svelte.d.ts

@@ -1,9 +1,13 @@
 import type { Snippet } from "svelte";
-import { type NavigationSection } from "../state/layout.svelte";
+import type { NavigationItem, NavigationSection } from "../state/layout.svelte";
 type $$ComponentProps = {
     header?: Snippet;
     sections: NavigationSection[];
     footer?: Snippet;
+    activeId?: string | null;
+    collapsedIds?: Set<string>;
+    onSelect?: (item: NavigationItem) => void;
+    onToggle?: (id: string, isOpen: boolean) => void;
 };
 declare const NavigationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavigationPanel = ReturnType<typeof NavigationPanel>;

package/dist/layout/WorkspaceLayout.svelte

@@ -1,16 +1,13 @@
 <!-- src/lib/layout/WorkspaceLayout.svelte -->
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import {
-        createLayoutStore,
-        getLayoutStore,
-    } from "../state/layout.svelte";
+    import { getLayoutStore } from "../state/layout.svelte";
     import {
         getShortcutStore,
         shortcutListener,
         LAYOUT_SHORTCUTS,
     } from "../state/shortcuts.svelte";
-    import { onMount, setContext } from "svelte";
+    import { onMount } from "svelte";
 
     let {
         workspaceStrip,
@@ -68,66 +65,104 @@
 </script>
 
 <div
-    class="rl-layout h-screen w-screen grid overflow-hidden bg-base-100 text-base-content font-sans"
-    style="
-        grid-template-columns: 
-            {workspaceStrip ? 'var(--rl-strip-width, 72px)' : '0px'} 
-            {navigationPanel && layoutStore.navOpen
-        ? 'var(--rl-nav-width, 240px)'
-        : '0px'} 
-            1fr 
-            {detailPanel && layoutStore.detailOpen
-        ? 'var(--rl-detail-width, 320px)'
-        : '0px'};
-        grid-template-rows: 100%;
-        transition: grid-template-columns 300ms ease-in-out;
-    "
+    class="rl-layout flex h-[100dvh] w-screen overflow-hidden bg-base-100 text-base-content font-sans relative"
     use:shortcutListener={shortcutStore}
     data-rl-layout
 >
     <!-- Zone 1: Workspace Strip -->
-    <aside
-        class="rl-strip h-full overflow-y-auto overflow-x-hidden bg-base-300 flex flex-col items-center py-3 gap-2"
-        class:hidden={!workspaceStrip}
-    >
-        {#if workspaceStrip}
+    {#if workspaceStrip}
+        <aside
+            class="rl-strip h-full w-[var(--rl-strip-width,72px)] shrink-0 overflow-y-auto overflow-x-hidden bg-base-300 flex flex-col items-center py-3 gap-2 z-[60]"
+        >
             {@render workspaceStrip()}
-        {/if}
-    </aside>
+        </aside>
+    {/if}
+
+    <!-- Mobile Nav Backdrop -->
+    {#if navigationPanel && layoutStore.navOpen}
+        <button
+            class="fixed inset-0 bg-black/50 z-[40] md:hidden cursor-default border-none"
+            onclick={() => (layoutStore.navOpen = false)}
+            aria-label="Close navigation"
+        ></button>
+    {/if}
 
     <!-- Zone 2: Navigation Panel -->
-    <aside
-        class="rl-nav h-full bg-base-200 border-base-content/5 overflow-hidden flex flex-col"
-        class:hidden={!navigationPanel}
-        class:border-r={layoutStore.navOpen}
-        data-rl-panel="navigation"
-    >
-        {#if navigationPanel}
-            {@render navigationPanel()}
-        {/if}
-    </aside>
+    {#if navigationPanel}
+        <aside
+            class="rl-nav h-full shrink-0 bg-base-200 overflow-hidden flex flex-col transition-all duration-300 ease-in-out z-[50]"
+            class:border-r={layoutStore.navOpen}
+            class:border-base-content={true}
+            style="
+                border-opacity: 0.05;
+                width: {layoutStore.navOpen
+                ? 'var(--rl-nav-width, 240px)'
+                : '0px'};
+                left: {workspaceStrip ? 'var(--rl-strip-width, 72px)' : '0px'};
+            "
+            class:max-md:!w-[var(--rl-nav-width,240px)]={true}
+            class:max-md:fixed={true}
+            class:max-md:-translate-x-[200%]={!layoutStore.navOpen}
+            data-rl-panel="navigation"
+        >
+            <div class="w-[var(--rl-nav-width,240px)] h-full flex flex-col">
+                {@render navigationPanel()}
+            </div>
+        </aside>
+    {/if}
 
     <!-- Zone 3: Main Content Area -->
     <main
-        class="rl-content h-full min-w-0 bg-base-100 flex flex-col overflow-hidden relative"
+        class="rl-content h-full flex-1 min-w-0 bg-base-100 flex flex-col overflow-hidden relative"
     >
         {@render content()}
     </main>
 
+    <!-- Mobile Detail Backdrop -->
+    {#if detailPanel && layoutStore.detailOpen}
+        <button
+            class="fixed inset-0 bg-black/50 z-[40] md:hidden cursor-default border-none"
+            onclick={() => (layoutStore.detailOpen = false)}
+            aria-label="Close detail panel"
+        ></button>
+    {/if}
+
     <!-- Zone 4: Detail Panel -->
-    <aside
-        class="rl-detail h-full bg-base-100 border-base-content/5 overflow-y-auto"
-        class:hidden={!detailPanel}
-        class:border-l={layoutStore.detailOpen}
-        data-rl-panel="detail"
-    >
-        {#if detailPanel}
-            {@render detailPanel()}
-        {/if}
-    </aside>
+    {#if detailPanel}
+        <aside
+            class="rl-detail h-full shrink-0 bg-base-100 overflow-y-auto overflow-x-hidden transition-all duration-300 ease-in-out z-[50]"
+            class:border-l={layoutStore.detailOpen}
+            class:border-base-content={true}
+            style="
+                border-opacity: 0.05;
+                width: {layoutStore.detailOpen
+                ? 'var(--rl-detail-width, 320px)'
+                : '0px'};
+            "
+            class:max-md:!w-[var(--rl-detail-width,320px)]={true}
+            class:max-md:fixed={true}
+            class:max-md:right-0={true}
+            class:max-md:translate-x-[200%]={!layoutStore.detailOpen}
+            data-rl-panel="detail"
+        >
+            <div class="w-[var(--rl-detail-width,320px)] h-full flex flex-col">
+                {@render detailPanel()}
+            </div>
+        </aside>
+    {/if}
 </div>
 
 <style>
+    /* Global lock for entire screen, relying on WorkspaceLayout scroll areas */
+    :global(html),
+    :global(body) {
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
     :global(.rl-layout) {
         --rl-strip-width: 72px;
         --rl-nav-width: 240px;

package/dist/layout/WorkspaceStrip.svelte

@@ -1,24 +1,22 @@
 <!-- src/lib/layout/WorkspaceStrip.svelte -->
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import {
-        getLayoutStore,
-        type WorkspaceItem,
-    } from "../state/layout.svelte";
+    import type { WorkspaceItem } from "../state/layout.svelte";
 
-    const layoutStore = getLayoutStore();
-
-    let { items = [], globalActions } = $props<{
+    let {
+        items = [],
+        globalActions,
+        activeId,
+        onSelect,
+    } = $props<{
         items: WorkspaceItem[];
         globalActions?: Snippet;
+        activeId?: string | null;
+        onSelect?: (id: string, item: WorkspaceItem) => void;
     }>();
 
-    $effect(() => {
-        layoutStore.setWorkspaces(items);
-    });
-
     function handleWorkspaceClick(item: WorkspaceItem) {
-        layoutStore.activateWorkspace(item.id);
+        onSelect?.(item.id, item);
         item.onClick?.();
     }
 </script>
@@ -29,19 +27,18 @@
             <!-- Discord-style active indicator -->
             <div
                 class="absolute left-0 w-1 bg-base-content rounded-r-full transition-all duration-200"
-                class:h-10={layoutStore.activeWorkspaceId === item.id}
-                class:h-2={layoutStore.activeWorkspaceId !== item.id}
-                class:opacity-100={layoutStore.activeWorkspaceId === item.id}
-                class:opacity-0={layoutStore.activeWorkspaceId !== item.id}
+                class:h-10={activeId === item.id}
+                class:h-2={activeId !== item.id}
+                class:opacity-100={activeId === item.id}
+                class:opacity-0={activeId !== item.id}
             ></div>
 
             <button
                 onclick={() => handleWorkspaceClick(item)}
                 class="w-12 h-12 flex items-center justify-center rounded-[24px] hover:rounded-[16px] transition-all duration-200 bg-base-100 group-hover:bg-primary group-hover:text-primary-content shadow-sm overflow-hidden"
-                class:rounded-[16px]={layoutStore.activeWorkspaceId === item.id}
-                class:bg-primary={layoutStore.activeWorkspaceId === item.id}
-                class:text-primary-content={layoutStore.activeWorkspaceId ===
-                    item.id}
+                class:rounded-[16px]={activeId === item.id}
+                class:bg-primary={activeId === item.id}
+                class:text-primary-content={activeId === item.id}
                 title={item.label}
             >
                 {#if item.icon.startsWith("http") || item.icon.startsWith("/")}

package/dist/layout/WorkspaceStrip.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from "svelte";
-import { type WorkspaceItem } from "../state/layout.svelte";
+import type { WorkspaceItem } from "../state/layout.svelte";
 type $$ComponentProps = {
     items: WorkspaceItem[];
     globalActions?: Snippet;
+    activeId?: string | null;
+    onSelect?: (id: string, item: WorkspaceItem) => void;
 };
 declare const WorkspaceStrip: import("svelte").Component<$$ComponentProps, {}, "">;
 type WorkspaceStrip = ReturnType<typeof WorkspaceStrip>;

package/dist/state/commands.svelte.js

@@ -9,83 +9,9 @@ export class CommandStore {
     }
     commands = $state([]);
     refreshDefaultCommands() {
-        const { appStore, apiStore, toastStore, themeStore, languageStore, currencyStore, } = this.#services;
-        this.commands = [
-            {
-                id: "send-toast",
-                label: "Send Toast Notification",
-                category: "System",
-                icon: "🔔",
-                children: [
-                    {
-                        id: "toast-success",
-                        label: "Success Toast",
-                        icon: "✨",
-                        action: () => toastStore.success("Operation completed successfully!"),
-                    },
-                    {
-                        id: "toast-info",
-                        label: "Info Toast",
-                        icon: "ℹ️",
-                        action: () => toastStore.info("Here is some information."),
-                    },
-                    {
-                        id: "toast-warning",
-                        label: "Warning Toast",
-                        icon: "⚠️",
-                        action: () => toastStore.warn("Please be careful."),
-                    },
-                    {
-                        id: "toast-error",
-                        label: "Error Toast",
-                        icon: "🚫",
-                        action: () => toastStore.error("Something went wrong!"),
-                    },
-                ],
-            },
-            {
-                id: "log-app",
-                label: "Log Current App State",
-                category: "Debug",
-                icon: "📋",
-                action: () => {
-                    console.group("🚀 Rune Lab — Current State");
-                    console.table(appStore.info);
-                    console.log("🎨 Theme:", themeStore.current, themeStore.getProp("icon"));
-                    console.log("🌐 Language:", languageStore.current, languageStore.getProp("flag"));
-                    console.log("💰 Currency:", currencyStore.current, currencyStore.getProp("symbol"));
-                    console.log("🔌 API:", apiStore.connectionState, apiStore.URL);
-                    console.groupEnd();
-                },
-            },
-            {
-                id: "log-all-stores",
-                label: "Log All Stores (Full Dump)",
-                category: "Debug",
-                icon: "🗃️",
-                action: () => {
-                    console.group("📚 Rune Lab — Full Store Dump");
-                    Object.entries(this.#services).forEach(([name, store]) => {
-                        console.group(`Store: ${name}`);
-                        console.log("Reactive Instance:", store);
-                        if (store && "available" in store) {
-                            console.log("Available:", store.available);
-                        }
-                        if (store && "current" in store) {
-                            console.log("Current:", store.current);
-                        }
-                        if (store && "toasts" in store) {
-                            console.log("Queue:", store.toasts);
-                        }
-                        if (store && "commands" in store) {
-                            console.log("Registry:", store.commands);
-                        }
-                        console.groupEnd();
-                    });
-                    console.groupEnd();
-                },
-            },
-        ];
+        // Intentionally empty.
+        // Consumers (like the demo app) should inject their own default commands via `commandStore.register`.
+        this.commands = [];
     }
     /**
      * Register a new command

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rune-lab",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Rune Lab: Modern toolkit for Svelte 5 Runes applications.",
   "type": "module",
   "license": "MIT",