rune-lab 0.3.1 → 0.4.1

package/dist/state/shortcuts.svelte.js

@@ -1,222 +0,0 @@
-import hotkeys from "hotkeys-js";
-import { getContext, untrack } from "svelte";
-import { RUNE_LAB_CONTEXT } from "./context";
-import { DEV } from "esm-env";
-/**
- * Built-in layout shortcuts
- */
-export const LAYOUT_SHORTCUTS = {
-    TOGGLE_NAV: {
-        id: "rl:layout:toggle-nav",
-        keys: "ctrl+\\",
-        label: "Toggle Navigation Panel",
-        category: "Layout",
-        scope: "global",
-    },
-    TOGGLE_DETAIL: {
-        id: "rl:layout:toggle-detail",
-        keys: "ctrl+shift+\\",
-        label: "Toggle Detail Panel",
-        category: "Layout",
-        scope: "global",
-    },
-    OPEN_SHORTCUTS: {
-        id: "rl:shortcuts:open",
-        keys: "ctrl+/",
-        label: "Show Shortcut Palette",
-        category: "Help",
-        scope: "global",
-    },
-    NAV_NEXT: {
-        id: "rl:nav:next-item",
-        keys: "alt+down",
-        label: "Next navigation item",
-        category: "Navigation",
-        scope: "panel:navigation",
-    },
-    NAV_PREV: {
-        id: "rl:nav:prev-item",
-        keys: "alt+up",
-        label: "Previous navigation item",
-        category: "Navigation",
-        scope: "panel:navigation",
-    },
-    NAV_EXPAND: {
-        id: "rl:nav:expand-section",
-        keys: "alt+right",
-        label: "Expand section",
-        category: "Navigation",
-        scope: "panel:navigation",
-    },
-    NAV_COLLAPSE: {
-        id: "rl:nav:collapse-section",
-        keys: "alt+left",
-        label: "Collapse section",
-        category: "Navigation",
-        scope: "panel:navigation",
-    },
-};
-export class ShortcutStore {
-    /** All registered shortcuts */
-    entries = $state([]);
-    /** Whether the shortcut palette is currently visible */
-    showPalette = $state(false);
-    /** Subset of shortcuts that should be displayed in the palette */
-    active = $derived(this.entries.filter((e) => e.enabled !== false && !e.hidden));
-    /** Grouped entries for display (scope -> category -> entries) */
-    byScopeAndCategory = $derived.by(() => {
-        const groups = {};
-        for (const entry of this.active) {
-            const scope = entry.scope;
-            const category = entry.category;
-            if (!groups[scope])
-                groups[scope] = {};
-            if (!groups[scope][category])
-                groups[scope][category] = [];
-            groups[scope][category].push(entry);
-        }
-        return groups;
-    });
-    /** Scopes sorted by importance (global first, then layout, then alphabetical) */
-    sortedScopes = $derived.by(() => {
-        return Object.keys(this.byScopeAndCategory).sort((a, b) => {
-            if (a === "global")
-                return -1;
-            if (b === "global")
-                return 1;
-            if (a === "layout")
-                return -1;
-            if (b === "layout")
-                return 1;
-            return a.localeCompare(b);
-        });
-    });
-    /**
-     * Register a new shortcut
-     */
-    register(entry) {
-        untrack(() => {
-            const existingIndex = this.entries.findIndex((e) => e.id === entry.id);
-            if (existingIndex !== -1) {
-                if (DEV) {
-                    console.warn(`[ShortcutStore] Overwriting shortcut ID "${entry.id}"`, {
-                        old: this.entries[existingIndex],
-                        new: entry,
-                    });
-                }
-                this.entries[existingIndex] = { enabled: true, ...entry };
-                return;
-            }
-            // Check for collisions (keys + scope)
-            const collision = this.entries.find((e) => e.keys === entry.keys && e.scope === entry.scope);
-            if (collision && DEV) {
-                console.warn(`[ShortcutStore] Collision detected for keys "${entry.keys}" in scope "${entry.scope}". ` +
-                    `ID "${entry.id}" will displace "${collision.id}".`);
-            }
-            this.entries.push({ enabled: true, ...entry });
-        });
-    }
-    /**
-     * Unregister a shortcut by ID
-     */
-    unregister(id) {
-        untrack(() => {
-            this.entries = this.entries.filter((e) => e.id !== id);
-        });
-    }
-    /**
-     * Enable a shortcut
-     */
-    enable(id) {
-        untrack(() => {
-            const entry = this.entries.find((e) => e.id === id);
-            if (entry)
-                entry.enabled = true;
-        });
-    }
-    /**
-     * Disable a shortcut
-     */
-    disable(id) {
-        untrack(() => {
-            const entry = this.entries.find((e) => e.id === id);
-            if (entry)
-                entry.enabled = false;
-        });
-    }
-    /**
-     * Find conflicts for a given key combo and scope
-     */
-    findConflicts(keys, scope) {
-        return untrack(() => this.entries.filter((e) => e.keys === keys && e.scope === scope));
-    }
-}
-/**
- * Svelte Action to listen for shortcuts registered in shortcutStore.
- * Applied to the root element of the layout.
- */
-export function shortcutListener(node, shortcutStore) {
-    // Use $effect to reactively sync shortcuts
-    const cleanup = $effect.root(() => {
-        $effect(() => {
-            // Unbind everything first to ensure clean state
-            hotkeys.unbind();
-            // We read entries here, so this effect re-runs when entries change.
-            // That's exactly what we want.
-            for (const entry of shortcutStore.entries) {
-                if (entry.enabled === false)
-                    continue;
-                hotkeys(entry.keys, "all", (event, handler) => {
-                    // Scoping logic: check if the event target is within the required scope
-                    if (entry.scope === "global") {
-                        // Hotkeys.js already filters inputs by default
-                        entry.handler(event);
-                    }
-                    else if (entry.scope === "layout") {
-                        if (node.contains(event.target)) {
-                            entry.handler(event);
-                        }
-                    }
-                    else if (entry.scope.startsWith("panel:")) {
-                        const panelId = entry.scope.replace("panel:", "");
-                        const panel = node.querySelector(`[data-rl-panel="${panelId}"]`);
-                        if (panel && panel.contains(event.target)) {
-                            entry.handler(event);
-                        }
-                    }
-                });
-            }
-        });
-        // Helper to sync hotkeys-js scope with focus
-        const handleFocusIn = (e) => {
-            const target = e.target;
-            const panel = target.closest("[data-rl-panel]");
-            if (panel) {
-                const scope = `panel:${panel.getAttribute("data-rl-panel")}`;
-                hotkeys.setScope(scope);
-            }
-            else if (node.contains(target)) {
-                hotkeys.setScope("layout");
-            }
-            else {
-                hotkeys.setScope("global");
-            }
-        };
-        window.addEventListener("focusin", handleFocusIn);
-        return () => {
-            window.removeEventListener("focusin", handleFocusIn);
-        };
-    });
-    return {
-        destroy() {
-            cleanup();
-            hotkeys.unbind();
-        },
-    };
-}
-export function createShortcutStore() {
-    return new ShortcutStore();
-}
-export function getShortcutStore() {
-    return getContext(RUNE_LAB_CONTEXT.shortcut);
-}

package/dist/state/theme.svelte.d.ts

@@ -1,22 +0,0 @@
-import { type ConfigStore } from "./createConfigStore.svelte";
-export interface Theme {
-    name: string;
-    icon: string;
-}
-import type { PersistenceDriver } from "rune-lab/core";
-export interface ThemeStoreOptions {
-    driver?: PersistenceDriver | (() => PersistenceDriver | undefined);
-    /** Additional custom themes to append to the built-in DaisyUI set */
-    customThemes?: Theme[];
-    /** Fallback theme if no persisted value exists (after system preference check) */
-    defaultTheme?: string;
-}
-export declare function createThemeStore(driverOrOptions?: PersistenceDriver | (() => PersistenceDriver | undefined) | ThemeStoreOptions): {
-    current: string;
-    available: Theme[];
-    set(id: string): void;
-    get(id: string): Theme | undefined;
-    getProp<K extends keyof Theme>(prop: K, id?: string | undefined): Theme[K] | undefined;
-    addItems(newItems: Theme[]): void;
-};
-export declare function getThemeStore(): ConfigStore<Theme>;

package/dist/state/theme.svelte.js

@@ -1,92 +0,0 @@
-// client/packages/ui/src/state/theme-config.svelte.ts
-import { createConfigStore, } from "./createConfigStore.svelte";
-import { getContext } from "svelte";
-import { RUNE_LAB_CONTEXT } from "./context";
-// Icon map for known themes - unknown ones fall back to 🎨
-const THEME_ICONS = {
-    light: "🌞",
-    dark: "🌙",
-    cupcake: "🧁",
-    bumblebee: "🐝",
-    emerald: "💚",
-    corporate: "🏢",
-    synthwave: "🌆",
-    retro: "📺",
-    cyberpunk: "🤖",
-    valentine: "💝",
-    halloween: "🎃",
-    garden: "🌷",
-    forest: "🌲",
-    aqua: "💧",
-    lofi: "🎵",
-    pastel: "🎨",
-    fantasy: "🔮",
-    wireframe: "📝",
-    black: "⚫",
-    luxury: "👑",
-    dracula: "🧛",
-    cmyk: "🖨️",
-    autumn: "🍂",
-    business: "💼",
-    acid: "🧪",
-    lemonade: "🍋",
-    night: "🌃",
-    coffee: "☕",
-    winter: "❄️",
-    dim: "🔅",
-    nord: "🧊",
-    sunset: "🌅",
-    caramellatte: "🍮",
-    abyss: "🌌",
-    silk: "🎀",
-};
-// Derived from daisyUI directly — stays in sync automatically
-const THEMES = themeOrder.map((name) => ({
-    name,
-    icon: THEME_ICONS[name] ?? "🎨",
-}));
-import themeOrder from "daisyui/functions/themeOrder.js";
-import { BROWSER } from "esm-env";
-export function createThemeStore(driverOrOptions) {
-    // Normalize overloaded argument
-    const opts = driverOrOptions && typeof driverOrOptions === "object" &&
-        "driver" in driverOrOptions
-        ? driverOrOptions
-        : {
-            driver: driverOrOptions,
-        };
-    const resolvedDriver = typeof opts.driver === "function"
-        ? opts.driver()
-        : opts.driver;
-    const store = createConfigStore({
-        items: THEMES,
-        storageKey: "theme",
-        displayName: "Theme",
-        idKey: "name",
-        icon: "🎨",
-        driver: resolvedDriver,
-    });
-    // Append custom themes if provided
-    if (opts.customThemes?.length) {
-        store.addItems(opts.customThemes);
-    }
-    // System preference detection — only if no persisted value was loaded
-    if (!resolvedDriver?.get("theme") && BROWSER) {
-        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        const systemDefault = prefersDark ? "dark" : "light";
-        const chosen = opts.defaultTheme ?? systemDefault;
-        if (store.get(chosen)) {
-            store.set(chosen);
-        }
-    }
-    else if (!resolvedDriver?.get("theme") && opts.defaultTheme) {
-        // SSR / non-browser: use defaultTheme if provided
-        if (store.get(opts.defaultTheme)) {
-            store.set(opts.defaultTheme);
-        }
-    }
-    return store;
-}
-export function getThemeStore() {
-    return getContext(RUNE_LAB_CONTEXT.theme);
-}

package/dist/state/toast-bridge.d.ts

@@ -1,29 +0,0 @@
-import type { ToastStore, ToastType } from "./toast.svelte";
-/**
- * Notifies the global toast system.
- * If called before the ToastStore is initialized (e.g., in a module-level store),
- * it queues the toast and flushes it once wired.
- *
- * @clientOnly — Not safe for use in SSR contexts. Module-level state persists across requests.
- */
-export declare function notify(message: string, type?: ToastType, duration?: number): void;
-/**
- * Wires the global `notify` function to an active ToastStore instance.
- * Automatically flushes any queued toasts.
- */
-export declare function wire(store: ToastStore): void;
-/**
- * Escape hatch for module-level stores to send toasts without Svelte context.
- *
- * @example
- * ```ts
- * import { createToastBridge } from "rune-lab";
- * const { notify } = createToastBridge();
- *
- * notify("Logged in successfully", "success");
- * ```
- */
-export declare const createToastBridge: () => {
-    notify: typeof notify;
-    wire: typeof wire;
-};

package/dist/state/toast-bridge.js

@@ -1,43 +0,0 @@
-const queue = [];
-let activeStore = null;
-/**
- * Notifies the global toast system.
- * If called before the ToastStore is initialized (e.g., in a module-level store),
- * it queues the toast and flushes it once wired.
- *
- * @clientOnly — Not safe for use in SSR contexts. Module-level state persists across requests.
- */
-export function notify(message, type = "info", duration) {
-    if (typeof window === "undefined")
-        return; // No-op on server
-    if (activeStore) {
-        activeStore.send(message, type, duration ?? 3000);
-    }
-    else {
-        queue.push({ message, type, duration });
-    }
-}
-/**
- * Wires the global `notify` function to an active ToastStore instance.
- * Automatically flushes any queued toasts.
- */
-export function wire(store) {
-    activeStore = store;
-    while (queue.length > 0) {
-        const next = queue.shift();
-        if (next)
-            store.send(next.message, next.type, next.duration ?? 3000);
-    }
-}
-/**
- * Escape hatch for module-level stores to send toasts without Svelte context.
- *
- * @example
- * ```ts
- * import { createToastBridge } from "rune-lab";
- * const { notify } = createToastBridge();
- *
- * notify("Logged in successfully", "success");
- * ```
- */
-export const createToastBridge = () => ({ notify, wire });

package/dist/state/toast.svelte.d.ts

@@ -1,27 +0,0 @@
-/**
- * Toast notification store
- */
-export type ToastType = "info" | "success" | "warning" | "error";
-export interface Toast {
-    id: string;
-    message: string;
-    type: ToastType;
-    duration?: number;
-}
-export declare class ToastStore {
-    toasts: Toast[];
-    /**
-     * Add a new toast
-     */
-    send(message: string, type?: ToastType, duration?: number): void;
-    /**
-     * Remove a toast by id
-     */
-    dismiss(id: string): void;
-    success(msg: string): void;
-    error(msg: string): void;
-    warn(msg: string): void;
-    info(msg: string): void;
-}
-export declare function createToastStore(): ToastStore;
-export declare function getToastStore(): ToastStore;

package/dist/state/toast.svelte.js

@@ -1,43 +0,0 @@
-import { getContext } from "svelte";
-import { RUNE_LAB_CONTEXT } from "./context";
-export class ToastStore {
-    toasts = $state([]);
-    /**
-     * Add a new toast
-     */
-    send(message, type = "info", duration = 3000) {
-        const id = crypto.randomUUID();
-        const toast = { id, message, type, duration };
-        this.toasts.push(toast);
-        if (duration > 0) {
-            setTimeout(() => {
-                this.dismiss(id);
-            }, duration);
-        }
-    }
-    /**
-     * Remove a toast by id
-     */
-    dismiss(id) {
-        this.toasts = this.toasts.filter((t) => t.id !== id);
-    }
-    // Helper methods
-    success(msg) {
-        this.send(msg, "success");
-    }
-    error(msg) {
-        this.send(msg, "error");
-    }
-    warn(msg) {
-        this.send(msg, "warning");
-    }
-    info(msg) {
-        this.send(msg, "info");
-    }
-}
-export function createToastStore() {
-    return new ToastStore();
-}
-export function getToastStore() {
-    return getContext(RUNE_LAB_CONTEXT.toast);
-}

package/dist/ui/actions/portal.d.ts

@@ -1,7 +0,0 @@
-/**
- * Svelte action to teleport a DOM element to a different target (e.g. body)
- */
-export declare function portal(node: HTMLElement, target?: string | HTMLElement): {
-    update: (newTarget: string | HTMLElement) => void;
-    destroy(): void;
-};

package/dist/ui/actions/portal.js

@@ -1,32 +0,0 @@
-import { DEV } from "esm-env";
-/**
- * Svelte action to teleport a DOM element to a different target (e.g. body)
- */
-export function portal(node, target = "body") {
-    let targetNode;
-    let isTeleported = false;
-    function update(newTarget) {
-        if (typeof newTarget === "string") {
-            targetNode = document.querySelector(newTarget);
-            if (!targetNode && 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 (isTeleported && node.parentNode) {
-                node.parentNode.removeChild(node);
-            }
-        },
-    };
-}

package/dist/ui/components/ApiMonitor.svelte

@@ -1,162 +0,0 @@
-<script lang="ts">
-    import { getApiStore } from "rune-lab/state";
-    import { getToastStore } from "rune-lab/state";
-
-    const apiStore = getApiStore();
-    const toastStore = getToastStore();
-
-    let copied = $state(false);
-    let isVisible = $state(true);
-
-    function copyToClipboard() {
-        navigator.clipboard.writeText(apiStore.URL);
-        copied = true;
-        toastStore.success("API URL copied to clipboard!");
-        setTimeout(() => (copied = false), 2000);
-    }
-
-    function handleKeyDown(event: KeyboardEvent) {
-        if (event.key === "Enter" || event.key === " ") {
-            copyToClipboard();
-        }
-    }
-
-    const containerClass = $derived(`
-        fixed bottom-4 left-4 z-50 
-        flex items-center space-x-2 
-        transition-all duration-300 transform
-        ${isVisible ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0"}
-    `);
-</script>
-
-<div class={containerClass}>
-    <div
-        class="flex items-center space-x-2 backdrop-blur-sm bg-base-300/80 rounded-xl p-1 shadow-lg border border-base-content/10"
-    >
-        <!-- API Status Indicator -->
-        {#if apiStore.IS_CONNECTED}
-            <div class="tooltip tooltip-right" data-tip="Connected">
-                <div
-                    aria-label="success"
-                    class="status status-success status-md"
-                ></div>
-            </div>
-        {:else if apiStore.IS_LOADING}
-            <div class="tooltip tooltip-right" data-tip="Connecting...">
-                <div class="inline-grid *:[grid-area:1/1]">
-                    <div class="status status-warning animate-ping"></div>
-                    <div class="status status-warning"></div>
-                </div>
-            </div>
-        {:else}
-            <div class="tooltip tooltip-right" data-tip="Disconnected">
-                <div class="status status-error animate-bounce"></div>
-            </div>
-        {/if}
-
-        <!-- API Docs / Reload -->
-        {#if apiStore.connectionState === "connected"}
-            <button
-                class="btn btn-circle btn-xs btn-primary"
-                onclick={() => window.open(`${apiStore.URL}/docs`, "_blank")}
-                aria-label="Go to API Documentation"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    ><path
-                        d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-0-5H20"
-                    /></svg
-                >
-            </button>
-        {:else}
-            <button
-                class="btn btn-circle btn-xs btn-error"
-                onclick={() => apiStore.reconnect()}
-                aria-label="Reconnect to API"
-                disabled={apiStore.connectionState === "connecting"}
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class={apiStore.connectionState === "connecting"
-                        ? "animate-spin"
-                        : ""}
-                    ><path
-                        d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
-                    /><path d="M21 3v5h-5" /><path
-                        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
-                    /><path d="M3 21v-5h5" /></svg
-                >
-            </button>
-        {/if}
-
-        <button
-            class="group flex items-center space-x-2 px-3 py-1 rounded-lg hover:bg-base-200 transition-colors duration-200"
-            onclick={copyToClipboard}
-            onkeydown={handleKeyDown}
-            aria-label="Copy API URL"
-        >
-            <span class="text-xs font-mono"
-                >{apiStore.URL.replace(
-                    /^https?:\/\//,
-                    "",
-                )}/{apiStore.VERSION}</span
-            >
-            {#if copied}
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="text-success"
-                    ><circle cx="12" cy="12" r="10" /><path
-                        d="m9 12 2 2 4-4"
-                    /></svg
-                >
-            {:else}
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="opacity-50 group-hover:opacity-100 transition-all duration-200"
-                    ><rect
-                        width="14"
-                        height="14"
-                        x="8"
-                        y="8"
-                        rx="2"
-                        ry="2"
-                    /><path
-                        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-                    /></svg
-                >
-            {/if}
-        </button>
-    </div>
-</div>

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

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