rune-lab 0.0.19 → 0.0.21

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

@@ -1,7 +1,9 @@
 <script lang="ts">
-    import { shortcutStore } from "../../state/shortcuts.svelte";
+    import { getShortcutStore } from "../../state/shortcuts.svelte";
     import { Icon } from "../../index";
 
+    const shortcutStore = getShortcutStore();
+
     // Section 2: Conflict detector
     const conflicts = $derived.by(() => {
         const keyMap = new Map<string, string[]>();
@@ -29,108 +31,203 @@
     }
 </script>
 
-<div class="space-y-8 animate-in fade-in duration-500">
+<div class="space-y-4 animate-in fade-in duration-500">
     <header>
         <h3 class="text-lg font-bold">Shortcut Registry</h3>
-        <p class="text-xs opacity-50">Live conflict detection</p>
+        <p class="text-xs opacity-50">Live conflict detection and management</p>
     </header>
 
     <!-- Section 1: Stats -->
-    <section class="stats stats-vertical shadow-sm border border-base-content/5 w-full bg-base-200/30">
-        <div class="stat p-3">
-            <div class="stat-title text-[10px] uppercase font-bold tracking-tighter">Total</div>
-            <div class="stat-value text-xl">{shortcutStore.entries.length}</div>
-        </div>
-        <div class="stat p-3">
-            <div class="stat-title text-[10px] uppercase font-bold tracking-tighter">Active</div>
-            <div class="stat-value text-xl text-primary">{shortcutStore.active.length}</div>
+    <details
+        class="collapse collapse-arrow border border-base-content/10 bg-base-100/50 rounded-lg"
+    >
+        <summary
+            class="collapse-title text-sm font-medium flex items-center gap-2"
+        >
+            <Icon name="info" class="w-4 h-4 opacity-70" />
+
+            Registry Stats
+            <span class="badge badge-sm badge-neutral ml-auto"
+                >{shortcutStore.entries.length} total</span
+            >
+        </summary>
+        <div class="collapse-content">
+            <div
+                class="stats stats-vertical lg:stats-horizontal shadow-sm w-full bg-transparent"
+            >
+                <div class="stat p-4 border-none">
+                    <div
+                        class="stat-title text-[10px] uppercase font-bold tracking-tighter"
+                    >
+                        Total Entries
+                    </div>
+                    <div class="stat-value text-xl">
+                        {shortcutStore.entries.length}
+                    </div>
+                </div>
+                <div class="stat p-4 border-none">
+                    <div
+                        class="stat-title text-[10px] uppercase font-bold tracking-tighter"
+                    >
+                        Active
+                    </div>
+                    <div class="stat-value text-xl text-primary">
+                        {shortcutStore.active.length}
+                    </div>
+                </div>
+            </div>
         </div>
-    </section>
+    </details>
 
     <!-- Section 2: Conflicts -->
-    <section class="space-y-3">
-        <h4 class="text-[10px] font-black uppercase tracking-widest opacity-40">
+    <details
+        class="collapse collapse-arrow border border-base-content/10 bg-base-100/50 rounded-lg"
+        open={conflicts.length > 0}
+    >
+        <summary
+            class="collapse-title text-sm font-medium flex items-center gap-2"
+        >
+            <Icon name="info" class="w-4 h-4 opacity-70" />
+
             Health Check
-        </h4>
-        {#if conflicts.length > 0}
-            <div class="alert alert-warning p-3 rounded-lg text-xs gap-2 flex-col items-start">
-                <div class="flex items-center gap-2 font-bold">
-                    ⚠️ Conflict Detected
+            {#if conflicts.length > 0}
+                <span class="badge badge-sm badge-warning ml-auto"
+                    >{conflicts.length} conflicts</span
+                >
+            {:else}
+                <span class="badge badge-sm badge-success ml-auto">Healthy</span
+                >
+            {/if}
+        </summary>
+        <div class="collapse-content space-y-3 pt-2">
+            {#if conflicts.length > 0}
+                <div
+                    class="alert alert-warning p-3 rounded-lg text-xs gap-2 flex-col items-start shadow-none"
+                >
+                    <div class="flex items-center gap-2 font-bold">
+                        ⚠️ Conflict Detected
+                    </div>
+                    <ul class="space-y-1 opacity-80 list-disc list-inside">
+                        {#each conflicts as conflict}
+                            <li>
+                                <code class="bg-white/20 px-1 rounded"
+                                    >{conflict.keys}</code
+                                >
+                                in
+                                <span class="badge badge-xs badge-outline"
+                                    >{conflict.scope}</span
+                                >
+                            </li>
+                        {/each}
+                    </ul>
                 </div>
-                <ul class="space-y-1 opacity-80">
-                    {#each conflicts as conflict}
-                        <li>
-                            <code class="bg-base-100 px-1 rounded">{conflict.keys}</code> in <span class="badge badge-xs badge-outline">{conflict.scope}</span>
-                        </li>
-                    {/each}
-                </ul>
-            </div>
-        {:else}
-            <div class="alert alert-success alert-soft p-3 rounded-lg text-xs gap-2">
-                ✅ No conflicts detected
-            </div>
-        {/if}
-    </section>
-
-    <!-- Section 3: Scope Breakdown -->
-    <section class="space-y-3">
-        <h4 class="text-[10px] font-black uppercase tracking-widest opacity-40">
-            Scopes
-        </h4>
-        <div class="flex flex-wrap gap-2">
-            {#each Object.entries(shortcutStore.byScopeAndCategory) as [scope, categories]}
-                {@const count = Object.values(categories).flat().length}
-                <div class="flex items-center gap-1.5 bg-base-200 px-2 py-1 rounded-full border border-base-content/5">
-                    <span class="text-[10px] font-mono opacity-60 capitalize">{scope === 'global' ? 'Global' : scope.replace('panel:', '')}</span>
-                    <span class="badge badge-xs badge-primary font-bold">{count}</span>
+            {:else}
+                <div
+                    class="alert alert-success p-3 rounded-lg text-xs gap-2 shadow-none bg-success/10 text-success-content border-none"
+                >
+                    ✅ No conflicts detected across all scopes.
                 </div>
-            {/each}
+            {/if}
         </div>
-    </section>
+    </details>
+
+    <!-- Section 3: Live Table -->
+    <details
+        class="collapse collapse-arrow border border-base-content/10 bg-base-100/50 rounded-lg"
+        open
+    >
+        <summary
+            class="collapse-title text-sm font-medium flex items-center gap-2"
+        >
+            <Icon name="shortcut" class="w-4 h-4 opacity-70" />
 
-    <!-- Section 4: Live Table -->
-    <section class="space-y-3">
-        <h4 class="text-[10px] font-black uppercase tracking-widest opacity-40">
             Live Entries
-        </h4>
-        <div class="overflow-x-auto border border-base-content/5 rounded-lg max-h-[300px] overflow-y-auto">
-            <table class="table table-xs table-pin-rows">
-                <thead>
-                    <tr>
-                        <th>Keys</th>
-                        <th>Label</th>
-                        <th>State</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {#each shortcutStore.entries as entry}
-                        <tr>
-                            <td>
-                                <div class="flex gap-0.5">
-                                    {#each formatKeys(entry.keys) as key}
-                                        <kbd class="kbd kbd-xs text-[8px] opacity-70">{key}</kbd>
-                                    {/each}
-                                </div>
-                            </td>
-                            <td class="text-[10px] truncate max-w-[80px]">{entry.label}</td>
-                            <td>
-                                <input 
-                                    type="checkbox" 
-                                    class="toggle toggle-xs toggle-primary" 
-                                    checked={entry.enabled !== false} 
-                                    onchange={(e) => {
-                                        if (e.currentTarget.checked) {
-                                            shortcutStore.enable(entry.id);
-                                        } else {
-                                            shortcutStore.disable(entry.id);
-                                        }
-                                    }}
-                                />
-                            </td>
+        </summary>
+        <div class="collapse-content pt-2">
+            <div
+                class="overflow-x-auto border border-base-content/5 rounded-lg max-h-[400px] overflow-y-auto bg-base-100"
+            >
+                <table class="table table-xs table-pin-rows">
+                    <thead>
+                        <tr class="bg-base-200/50">
+                            <th>Keys</th>
+                            <th>Scope</th>
+                            <th>Label</th>
+                            <th class="text-right">State</th>
                         </tr>
+                    </thead>
+                    <tbody>
+                        {#each shortcutStore.entries as entry}
+                            <tr class="hover:bg-base-200/50 transition-colors">
+                                <td class="font-mono">
+                                    <div class="flex flex-wrap gap-1">
+                                        {#each formatKeys(entry.keys) as key}
+                                            <kbd
+                                                class="kbd kbd-xs text-[9px] font-bold opacity-80"
+                                                >{key}</kbd
+                                            >
+                                        {/each}
+                                    </div>
+                                </td>
+                                <td>
+                                    <span
+                                        class="badge badge-ghost badge-xs font-mono opacity-70"
+                                    >
+                                        {entry.scope === "global"
+                                            ? "Global"
+                                            : entry.scope.replace("panel:", "")}
+                                    </span>
+                                </td>
+                                <td
+                                    class="text-[10px] max-w-[120px] truncate"
+                                    title={entry.label}>{entry.label}</td
+                                >
+                                <td class="text-right">
+                                    <input
+                                        type="checkbox"
+                                        class="toggle toggle-xs toggle-primary"
+                                        checked={entry.enabled !== false}
+                                        onchange={(e) => {
+                                            if (e.currentTarget.checked) {
+                                                shortcutStore.enable(entry.id);
+                                            } else {
+                                                shortcutStore.disable(entry.id);
+                                            }
+                                        }}
+                                    />
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="mt-4">
+                <h4
+                    class="text-[10px] font-black uppercase tracking-widest opacity-40 mb-2"
+                >
+                    Scope Breakdown
+                </h4>
+                <div class="flex flex-wrap gap-2">
+                    {#each Object.entries(shortcutStore.byScopeAndCategory) as [scope, categories]}
+                        {@const count = Object.values(categories).flat().length}
+                        <div
+                            class="flex items-center gap-1.5 bg-base-200 px-2 py-1 rounded badge badge-ghost border border-base-content/5 h-auto"
+                        >
+                            <span
+                                class="text-[10px] font-mono opacity-60 capitalize"
+                                >{scope === "global"
+                                    ? "Global"
+                                    : scope.replace("panel:", "")}</span
+                            >
+                            <span
+                                class="badge badge-xs badge-primary font-bold border-none ml-1"
+                                >{count}</span
+                            >
+                        </div>
                     {/each}
-                </tbody>
-            </table>
+                </div>
+            </div>
         </div>
-    </section>
+    </details>
 </div>

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

@@ -1,11 +1,17 @@
 <script lang="ts">
-    import { layoutStore } from "../../state/layout.svelte";
-    import { toastStore } from "../../state/toast.svelte";
+    import { getLayoutStore } from "../../state/layout.svelte";
+
+    const layoutStore = getLayoutStore();
+
+    import { getToastStore } from "../../state/toast.svelte";
+
     import {
         SHOWCASE_COMPONENTS,
         SHOWCASE_SNIPPETS,
     } from "./showcase-components";
 
+    const toastStore = getToastStore();
+
     const tabs = [
         "actions",
         "data-input",
@@ -31,7 +37,9 @@
 
 <div class="space-y-8 animate-in fade-in duration-500">
     <header>
-        <h3 class="text-lg font-bold capitalize">{currentTabId.replace("-", " ")}</h3>
+        <h3 class="text-lg font-bold capitalize">
+            {currentTabId.replace("-", " ")}
+        </h3>
         <p class="text-xs opacity-50">Component reference</p>
     </header>
 
@@ -71,8 +79,12 @@
                 <tbody>
                     {#each components as comp}
                         <tr>
-                            <td class="font-mono text-primary">.{comp.className}</td>
-                            <td class="text-[10px] opacity-70">{comp.description}</td>
+                            <td class="font-mono text-primary"
+                                >.{comp.className}</td
+                            >
+                            <td class="text-[10px] opacity-70"
+                                >{comp.description}</td
+                            >
                         </tr>
                     {/each}
                 </tbody>
@@ -83,7 +95,9 @@
     <!-- Section 3: Snippet Generator -->
     <section class="space-y-3">
         <div class="flex items-center justify-between">
-            <h4 class="text-[10px] font-black uppercase tracking-widest opacity-40">
+            <h4
+                class="text-[10px] font-black uppercase tracking-widest opacity-40"
+            >
                 Markup
             </h4>
             <button

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/features/shortcuts/ShortcutPalette.svelte

@@ -2,12 +2,16 @@
 <script lang="ts">
     import { onMount, tick } from "svelte";
     import {
-        shortcutStore,
+        getShortcutStore,
         LAYOUT_SHORTCUTS,
         type ShortcutEntry,
     } from "../../state/shortcuts.svelte";
+    import { getAppStore } from "../../state/app.svelte";
     import { Icon } from "../../index";
 
+    const appStore = getAppStore();
+    const shortcutStore = getShortcutStore();
+
     let dialog = $state<HTMLDialogElement>();
     let input = $state<HTMLInputElement>();
     let query = $state("");
@@ -221,15 +225,19 @@
             <div class="flex gap-4">
                 <span><kbd class="kbd kbd-xs">ESC</kbd> to close</span>
                 <span
-                    ><kbd class="kbd kbd-xs">ctrl</kbd> + <kbd
-                        class="kbd kbd-xs">/</kbd
-                    > to open help</span
+                    ><kbd class="kbd kbd-xs">ctrl</kbd> +
+                    <kbd class="kbd kbd-xs">/</kbd> to open help</span
                 >
             </div>
-            <div>rune-lab v0.0.19</div>
+            <div>rune-lab v{appStore.version}</div>
         </div>
     </div>
     <form method="dialog" class="modal-backdrop">
-        <button onclick={(e) => { e.preventDefault(); close(); }}>close</button>
+        <button
+            onclick={(e) => {
+                e.preventDefault();
+                close();
+            }}>close</button
+        >
     </form>
 </dialog>

package/dist/index.d.ts

@@ -1,17 +1,29 @@
 export { createConfigStore } from "./devtools/createConfigStore.svelte";
 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 { 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";
 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";
 export { default as CurrencySelector } from "./features/config/components/CurrencySelector.svelte";
-export { apiStore, appStore, commandStore, currencyStore, languageStore, layoutStore, shortcutStore, themeStore, toastStore, } from "./state/index";
+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 AppStateInspector } from "./showcase/AppStateInspector.svelte";
 export { default as ShowcaseMain } from "./showcase/Showcase.svelte";
 export { default as ShowcaseCard } from "./showcase/ShowcaseCard.svelte";

package/dist/index.js

@@ -1,32 +1,43 @@
 // src/lib/index.ts
 // Public surface of rune-lab.
-// Components, devtools utilities, and store types — but NOT appConfig.
-// For the unified config facade see: rune-lab/config  (src/lib/config.ts)
 // ── Devtools utilities ────────────────────────────────────────────────────────
 export { createConfigStore } from "./devtools/createConfigStore.svelte";
 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.js";
+export { usePersistence } from "./composables/usePersistence.js";
 // ── Actions ───────────────────────────────────────────────────────────────────
 export { portal } from "./actions/portal";
 // ── UI Components ─────────────────────────────────────────────────────────────
 // Core primitives
+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 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";
 export { default as LanguageSelector } from "./features/config/components/LanguageSelector.svelte";
 export { default as CurrencySelector } from "./features/config/components/CurrencySelector.svelte";
-// ── Stores (individual, for fine-grained imports) ─────────────────────────────
-export { apiStore, appStore, commandStore, currencyStore, languageStore, layoutStore, shortcutStore, themeStore, toastStore, } from "./state/index";
-// ^ Showcase
+// ── 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 { 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 (re-exported for convenience) ─────────────────
+// ── Paraglide compiled messages ───────────────────────────────────────────────
 export * as sdkMessages from "./paraglide/messages.js";