rune-lab 0.0.12 → 0.0.13

package/dist/features/CommandPalette.svelte

@@ -1,29 +1,16 @@
 <!-- src/client/sdk/ui/src/features/config/CommandPalette.svelte -->
 <script lang="ts">
     import { onMount } from "svelte";
+    import { commandStore } from "./config/commands.svelte";
 
-    interface Command {
-        id: string;
-        title: string;
-        category?: string;
-        icon?: string;
-        action: () => void;
-    }
-
-    let { commands = [] }: { commands: Command[] } = $props();
+    let { shortcutKey = "k" } = $props<{ shortcutKey?: string }>();
 
     let dialog: HTMLDialogElement;
     let query = $state("");
     let isOpen = $state(false);
 
     // Filter commands based on query
-    let filtered = $derived(
-        query === ""
-            ? commands
-            : commands.filter((c) =>
-                  c.title.toLowerCase().includes(query.toLowerCase()),
-              ),
-    );
+    let filtered = $derived(commandStore.search(query));
 
     function toggle() {
         isOpen = !isOpen;
@@ -38,7 +25,7 @@
     // Global keyboard listener
     onMount(() => {
         function handleKeydown(e: KeyboardEvent) {
-            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey.toLowerCase()) {
                 e.preventDefault();
                 toggle();
             }

package/dist/features/CommandPalette.svelte.d.ts

@@ -1,12 +1,5 @@
-interface Command {
-    id: string;
-    title: string;
-    category?: string;
-    icon?: string;
-    action: () => void;
-}
 type $$ComponentProps = {
-    commands: Command[];
+    shortcutKey?: string;
 };
 declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "">;
 type CommandPalette = ReturnType<typeof CommandPalette>;

package/dist/features/config/API_Monitor.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { Book, Copy, CheckCircle, RefreshCw } from "lucide-svelte";
+    import { apiStore } from "./api.svelte";
+    import { toastStore } from "./toast.svelte";
+
+    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"
+            >
+                <Book size={14} />
+            </button>
+        {:else}
+            <button
+                class="btn btn-circle btn-xs btn-error"
+                onclick={() => apiStore.reconnect()}
+                aria-label="Reconnect to API"
+                disabled={apiStore.connectionState === "connecting"}
+            >
+                <RefreshCw
+                    size={14}
+                    class={apiStore.connectionState === "connecting"
+                        ? "animate-spin"
+                        : ""}
+                />
+            </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}
+                <CheckCircle size={14} class="text-success" />
+            {:else}
+                <Copy
+                    size={14}
+                    class="opacity-50 group-hover:opacity-100 transition-all duration-200"
+                />
+            {/if}
+        </button>
+    </div>
+</div>

package/dist/features/config/API_Monitor.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/features/config/CurrencySelector.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
     import { currencyStore, type Currency } from "./currency.svelte";
-    import { setLocale, locales } from "../../paraglide/runtime";
     import * as m from "../../paraglide/messages.js";
     import { createMessageResolver } from "../../devtools/message-resolver";
 
+    let { codes = [] }: { codes?: string[] } = $props();
+
     const getLabel = createMessageResolver<Currency>(m as any, {
         keyExtractor: (c) => c.code,
     });
@@ -12,9 +13,15 @@
     let active = $derived(
         currencyStore.get(currencyStore.current) ?? currencyStore.available[0],
     );
+
+    let available = $derived(
+        codes.length > 0 
+            ? currencyStore.available.filter(c => codes.includes(c.code))
+            : currencyStore.available
+    );
 </script>
 
-<AppSettingSelector value={active} options={currencyStore.available}>
+<AppSettingSelector value={active} options={available}>
     {#snippet triggerLabel(c)}
         <span class="font-bold">{c.symbol}</span>
         <span class="uppercase font-medium text-xs tracking-wide">{c.code}</span

package/dist/features/config/CurrencySelector.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const CurrencySelector: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    codes?: string[];
+};
+declare const CurrencySelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type CurrencySelector = ReturnType<typeof CurrencySelector>;
 export default CurrencySelector;

package/dist/features/config/LanguageSelector.svelte

@@ -5,6 +5,13 @@
     import * as m from "../../paraglide/messages.js";
     import { createMessageResolver } from "../../devtools/message-resolver";
 
+    let { languages: allowedLocales = locales }: { languages?: string[] } =
+        $props();
+    // what the line above does:
+    // it allows the component to be used in two ways:
+    // 1. <LanguageSelector /> - this will use all available locales
+    // 2. <LanguageSelector languages={["en", "es"]} /> - this will only use the specified locales
+
     const getLabel = createMessageResolver<Language>(m as any, {
         keyExtractor: (l) => l.code,
     });
@@ -12,9 +19,15 @@
     let active = $derived(
         languageStore.get(languageStore.current) ?? languageStore.available[0],
     );
+
+    let available = $derived(
+        languageStore.available.filter((l) =>
+            allowedLocales.includes(l.code as any),
+        ),
+    );
 </script>
 
-<AppSettingSelector value={active} options={languageStore.available}>
+<AppSettingSelector value={active} options={available}>
     {#snippet triggerLabel(l)}
         <span class="text-lg">{l?.flag ?? active.flag}</span>
         <span class="uppercase font-medium text-xs tracking-wide"

package/dist/features/config/LanguageSelector.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const LanguageSelector: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    languages?: string[];
+};
+declare const LanguageSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type LanguageSelector = ReturnType<typeof LanguageSelector>;
 export default LanguageSelector;

package/dist/features/config/ThemeSelector.svelte

@@ -4,6 +4,8 @@
     import * as m from "../../paraglide/messages.js";
     import { createMessageResolver } from "../../devtools/message-resolver";
 
+    let { themes = [] }: { themes?: string[] } = $props();
+
     const getThemeLabel = createMessageResolver<Theme>(m as any, {
         keyExtractor: (t) => t.name,
     });
@@ -11,9 +13,15 @@
     let activeTheme = $derived(
         themeStore.get(themeStore.current) ?? themeStore.available[0],
     );
+
+    let available = $derived(
+        themes.length > 0
+            ? themeStore.available.filter(t => themes.includes(t.name))
+            : themeStore.available
+    );
 </script>
 
-<AppSettingSelector value={activeTheme} options={themeStore.available}>
+<AppSettingSelector value={activeTheme} options={available}>
     {#snippet triggerLabel(t)}
         <span class="text-lg">{t?.icon ?? activeTheme.icon}</span>
         <!-- Translate the name in the button -->

package/dist/features/config/ThemeSelector.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const ThemeSelector: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    themes?: string[];
+};
+declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;
 export default ThemeSelector;

package/dist/features/config/Toaster.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { toastStore } from "./toast.svelte";
+    import { flip } from "svelte/animate";
+    import { fade, fly } from "svelte/transition";
+
+    const typeClasses = {
+        info: "alert-info",
+        success: "alert-success",
+        warning: "alert-warning",
+        error: "alert-error"
+    };
+</script>
+
+<div class="toast toast-end toast-bottom z-[100] p-4">
+    {#each toastStore.toasts as toast (toast.id)}
+        <div
+            animate:flip={{ duration: 300 }}
+            in:fly={{ y: 20, duration: 300 }}
+            out:fade={{ duration: 200 }}
+            class="alert {typeClasses[toast.type]} shadow-lg min-w-[250px] border-none"
+        >
+            <div class="flex items-center gap-2 w-full">
+                <span>{toast.message}</span>
+                <button 
+                    class="btn btn-ghost btn-xs btn-circle ml-auto"
+                    onclick={() => toastStore.dismiss(toast.id)}
+                >
+                    ✕
+                </button>
+            </div>
+        </div>
+    {/each}
+</div>

package/dist/features/config/Toaster.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toaster = InstanceType<typeof Toaster>;
+export default Toaster;

package/dist/features/config/api.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * API connection state and configuration
+ */
+export type ConnectionState = "connected" | "connecting" | "disconnected";
+declare class ApiStore {
+    url: string;
+    version: string;
+    connectionState: ConnectionState;
+    isConnected: boolean;
+    isLoading: boolean;
+    get URL(): string;
+    get VERSION(): string;
+    get IS_CONNECTED(): boolean;
+    get IS_LOADING(): boolean;
+    /**
+     * Reconnect to the API
+     */
+    reconnect(): Promise<void>;
+    /**
+     * Initialize API settings
+     */
+    init(url: string, version?: string): void;
+}
+export declare const apiStore: ApiStore;
+export {};

package/dist/features/config/api.svelte.js

@@ -0,0 +1,45 @@
+class ApiStore {
+    // State
+    url = $state("http://localhost:8000");
+    version = $state("v1");
+    connectionState = $state("disconnected");
+    // Derived
+    isConnected = $derived(this.connectionState === "connected");
+    isLoading = $derived(this.connectionState === "connecting");
+    // Short aliases for compatibility with the user's snippet
+    get URL() {
+        return this.url;
+    }
+    get VERSION() {
+        return this.version;
+    }
+    get IS_CONNECTED() {
+        return this.isConnected;
+    }
+    get IS_LOADING() {
+        return this.isLoading;
+    }
+    /**
+     * Reconnect to the API
+     */
+    async reconnect() {
+        this.connectionState = "connecting";
+        // Simulate connection
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 1500));
+            this.connectionState = "connected";
+        }
+        catch (e) {
+            this.connectionState = "disconnected";
+        }
+    }
+    /**
+     * Initialize API settings
+     */
+    init(url, version = "v1") {
+        this.url = url;
+        this.version = version;
+        this.reconnect();
+    }
+}
+export const apiStore = new ApiStore();

package/dist/features/config/app.svelte.d.ts

@@ -13,65 +13,24 @@ export interface AppData {
 /**
  * App Store
  * Manages application metadata and identity
- *
- * Features:
- * - App name, version, description
- * - Author and repository information
- * - Initialization with partial updates
- * - Console branding on init
  */
 declare class AppStore {
     name: string;
     version: string;
     description: string;
     author: string;
-    repository?: string;
-    license?: string;
-    homepage?: string;
+    repository: string;
+    license: string;
+    homepage: string;
     private initialized;
     /**
      * Initialize app store with metadata
-     *
-     * @param data - Application metadata (partial update)
-     * @param data.name - Application name
-     * @param data.version - Application version (semver recommended)
-     * @param data.description - Application description
-     * @param data.author - Application author
-     * @param data.repository - Repository URL (optional)
-     * @param data.license - License identifier (optional)
-     * @param data.homepage - Homepage URL (optional)
      */
     init(data: Partial<AppData>): void;
     /**
      * Get full app information object
      */
     get info(): AppData;
-    /**
-     * Get formatted version string
-     * Useful for display purposes
-     */
-    get versionString(): string;
-    /**
-     * Get app title with version
-     */
-    get titleWithVersion(): string;
-    /**
-     * Check if repository is available
-     */
-    get hasRepository(): boolean;
-    /**
-     * Check if homepage is available
-     */
-    get hasHomepage(): boolean;
-    /**
-     * Update app version
-     * Useful for version management during development
-     */
-    updateVersion(version: string): void;
-    /**
-     * Log app initialization to console with styling
-     */
-    private _logAppInit;
 }
 export declare const appStore: AppStore;
 export {};

package/dist/features/config/app.svelte.js

@@ -3,41 +3,23 @@
 /**
  * App Store
  * Manages application metadata and identity
- *
- * Features:
- * - App name, version, description
- * - Author and repository information
- * - Initialization with partial updates
- * - Console branding on init
  */
 class AppStore {
     // State
-    name = $state("My Application");
-    version = $state("0.1.0");
-    description = $state("A modern application");
-    author = $state("Unknown");
-    repository = $state(undefined);
-    license = $state(undefined);
-    homepage = $state(undefined);
+    name = $state("Rune Lab");
+    version = $state("0.0.1");
+    description = $state("Modern toolkit for Svelte 5 Runes");
+    author = $state("Yrrrrrf");
+    repository = $state("https://github.com/Yrrrrrf/rune-lab");
+    license = $state("MIT");
+    homepage = $state("https://jsr.io/@yrrrrrf/rune-lab");
     initialized = false;
     /**
      * Initialize app store with metadata
-     *
-     * @param data - Application metadata (partial update)
-     * @param data.name - Application name
-     * @param data.version - Application version (semver recommended)
-     * @param data.description - Application description
-     * @param data.author - Application author
-     * @param data.repository - Repository URL (optional)
-     * @param data.license - License identifier (optional)
-     * @param data.homepage - Homepage URL (optional)
      */
     init(data) {
-        if (this.initialized) {
-            console.warn("⚠️ AppStore already initialized");
+        if (this.initialized)
             return;
-        }
-        // Update only provided values
         if (data.name)
             this.name = data.name;
         if (data.version)
@@ -53,8 +35,6 @@ class AppStore {
         if (data.homepage)
             this.homepage = data.homepage;
         this.initialized = true;
-        // Pretty console output
-        this._logAppInit();
     }
     /**
      * Get full app information object
@@ -70,66 +50,6 @@ class AppStore {
             homepage: this.homepage,
         };
     }
-    /**
-     * Get formatted version string
-     * Useful for display purposes
-     */
-    get versionString() {
-        return `v${this.version}`;
-    }
-    /**
-     * Get app title with version
-     */
-    get titleWithVersion() {
-        return `${this.name} v${this.version}`;
-    }
-    /**
-     * Check if repository is available
-     */
-    get hasRepository() {
-        return !!this.repository;
-    }
-    /**
-     * Check if homepage is available
-     */
-    get hasHomepage() {
-        return !!this.homepage;
-    }
-    /**
-     * Update app version
-     * Useful for version management during development
-     */
-    updateVersion(version) {
-        this.version = version;
-        console.log(`📦 Version updated to: v${version}`);
-    }
-    // Private methods
-    /**
-     * Log app initialization to console with styling
-     */
-    _logAppInit() {
-        console.clear();
-        // Banner style
-        console.log("%c╔══════════════════════════════════════════════╗", "color: #00d9ff; font-weight: bold;");
-        console.log(`%c║  ${this.name.padEnd(42)}  ║`, "color: #00d9ff; font-weight: bold;");
-        console.log("%c╚══════════════════════════════════════════════╝", "color: #00d9ff; font-weight: bold;");
-        // App details
-        console.log("\n📦 Application Details:");
-        console.log(`   Name:        ${this.name}`);
-        console.log(`   Version:     v${this.version}`);
-        console.log(`   Author:      ${this.author}`);
-        console.log(`   Description: ${this.description}`);
-        if (this.repository) {
-            console.log(`   Repository:  ${this.repository}`);
-        }
-        if (this.license) {
-            console.log(`   License:     ${this.license}`);
-        }
-        if (this.homepage) {
-            console.log(`   Homepage:    ${this.homepage}`);
-        }
-        console.log("\n✨ Application initialized successfully!\n");
-    }
 }
 // Export singleton instance
 export const appStore = new AppStore();

package/dist/features/config/commands.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Command Palette Store
+ */
+export interface Command {
+    id: string;
+    title: string;
+    category?: string;
+    icon?: string;
+    action: () => void;
+}
+declare class CommandStore {
+    commands: Command[];
+    /**
+     * Register a new command
+     */
+    register(command: Command): void;
+    /**
+     * Remove a command
+     */
+    unregister(id: string): void;
+    /**
+     * Search commands
+     */
+    search(query: string): Command[];
+}
+export declare const commandStore: CommandStore;
+export {};

package/dist/features/config/commands.svelte.js

@@ -0,0 +1,28 @@
+class CommandStore {
+    commands = $state([]);
+    /**
+     * Register a new command
+     */
+    register(command) {
+        if (this.commands.find((c) => c.id === command.id))
+            return;
+        this.commands.push(command);
+    }
+    /**
+     * Remove a command
+     */
+    unregister(id) {
+        this.commands = this.commands.filter((c) => c.id !== id);
+    }
+    /**
+     * Search commands
+     */
+    search(query) {
+        if (!query)
+            return this.commands;
+        const q = query.toLowerCase();
+        return this.commands.filter((c) => c.title.toLowerCase().includes(q) ||
+            c.category?.toLowerCase().includes(q));
+    }
+}
+export const commandStore = new CommandStore();