rune-lab 0.1.2 → 0.2.0

package/dist/showcase/AppStateInspector.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">
-    import { getContext } from "svelte";
-
-    /**
-     * @devOnly Renders a live debug view of all Rune Lab store state.
-     * Should only be rendered in development:
-     * ```svelte
-     * {#if import.meta.env.DEV}
-     *     <AppStateInspector />
-     * {/if}
-     * ```
-     */
-    import * as m from "../paraglide/messages.js";
-    import StoreDetailCard from "./StoreDetailCard.svelte";
-    import { getAppStore } from "../state/app.svelte";
-    import { getApiStore } from "../state/api.svelte";
-    import { getThemeStore } from "../state/theme.svelte";
-    import { getLanguageStore } from "../state/language.svelte";
-    import { getCurrencyStore } from "../state/currency.svelte";
-    import { getToastStore } from "../state/toast.svelte";
-    import { getCommandStore } from "../state/commands.svelte";
-
-    // Inject context stores
-    const appStore = getAppStore();
-    const apiStore = getApiStore();
-    const themeStore = getThemeStore();
-    const languageStore = getLanguageStore();
-    const currencyStore = getCurrencyStore();
-    const toastStore = getToastStore();
-    const commandStore = getCommandStore();
-
-    const storeState = $derived([
-        {
-            label: "App Info",
-            labelKey: "app_info",
-            icon: "📱",
-            color: "primary",
-            values: [
-                {
-                    key: "Name",
-                    labelKey: "name_label",
-                    value: appStore.name,
-                },
-                {
-                    key: "Version",
-                    labelKey: "version_label",
-                    value: appStore.version,
-                },
-            ],
-        },
-        {
-            label: "Appearance",
-            labelKey: "appearance",
-            icon: "🎨",
-            color: "secondary",
-            values: [
-                {
-                    key: "Theme",
-                    labelKey: "current_theme",
-                    value: `${themeStore.getProp("icon") || ""} ${themeStore.current}`,
-                },
-            ],
-        },
-        {
-            label: "Localization",
-            labelKey: "localization",
-            icon: "🌐",
-            color: "accent",
-            values: [
-                {
-                    key: "Language",
-                    labelKey: "current_language",
-                    value: `${languageStore.getProp("flag") || ""} ${languageStore.current}`,
-                },
-                {
-                    key: "Currency",
-                    labelKey: "current_currency",
-                    value: `${currencyStore.getProp("symbol") || ""} ${currencyStore.current}`,
-                },
-            ],
-        },
-    ] as any[]);
-
-    function getStatusClass(state: string) {
-        switch (state) {
-            case "connected":
-                return "text-success";
-            case "connecting":
-                return "text-warning";
-            case "disconnected":
-                return "text-error";
-            default:
-                return "";
-        }
-    }
-
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
-
-    function t(key: string, fallback: string) {
-        if (dictionary[key]) {
-            return typeof dictionary[key] === "function"
-                ? dictionary[key]()
-                : dictionary[key];
-        }
-        return fallback;
-    }
-</script>
-
-<div
-    class="w-full max-w-6xl mx-auto mt-12 space-y-8 animate-in fade-in slide-in-from-bottom duration-1000"
->
-    <div class="flex flex-col gap-2 px-4">
-        <h2 class="text-3xl font-black tracking-tight flex items-center gap-3">
-            <span class="p-2 bg-primary/10 rounded-xl">🔍</span>
-            {t("live_store_dashboard", "Live Store Dashboard")}
-        </h2>
-        <p class="text-base-content/50 font-medium">
-            {t(
-                "real_time_monitor_desc",
-                "Real-time reactive state monitor for Rune Lab stores",
-            )}
-        </p>
-    </div>
-
-    <!-- Top Row: Stats -->
-    <div
-        class="stats stats-vertical lg:stats-horizontal shadow-sm bg-base-200/50 border border-base-300 w-full backdrop-blur-md"
-    >
-        <div class="stat">
-            <div
-                class="stat-title uppercase text-[10px] font-bold tracking-widest opacity-60"
-            >
-                {t("api_status", "API Status")}
-            </div>
-            <div
-                class="stat-value capitalize {getStatusClass(
-                    apiStore.connectionState,
-                )} text-2xl"
-            >
-                {apiStore.connectionState}
-            </div>
-            <div
-                class="stat-desc font-mono text-[10px] opacity-50 truncate max-w-[200px]"
-            >
-                {apiStore.URL}
-            </div>
-        </div>
-
-        <div class="stat">
-            <div
-                class="stat-title uppercase text-[10px] font-bold tracking-widest opacity-60"
-            >
-                {t("active_toasts", "Active Toasts")}
-            </div>
-            <div class="stat-value text-2xl">
-                {toastStore.toasts.length}
-            </div>
-            <div class="stat-desc font-mono text-[10px] opacity-50">
-                {t("currently_in_queue", "Currently in queue")}
-            </div>
-        </div>
-
-        <div class="stat">
-            <div
-                class="stat-title uppercase text-[10px] font-bold tracking-widest opacity-60"
-            >
-                {t("commands_label", "Commands")}
-            </div>
-            <div class="stat-value text-2xl">
-                {commandStore.commands.length}
-            </div>
-            <div class="stat-desc font-mono text-[10px] opacity-50">
-                {t("registered_in_registry", "Registered in registry")}
-            </div>
-        </div>
-    </div>
-
-    <!-- Bottom Row: Detail Cards -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {#each storeState as store}
-            <StoreDetailCard {store} />
-        {/each}
-    </div>
-</div>

package/dist/showcase/AppStateInspector.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppStateInspectorProps = typeof __propDef.props;
-export type AppStateInspectorEvents = typeof __propDef.events;
-export type AppStateInspectorSlots = typeof __propDef.slots;
-export default class AppStateInspector extends SvelteComponentTyped<AppStateInspectorProps, AppStateInspectorEvents, AppStateInspectorSlots> {
-}
-export {};

package/dist/showcase/Showcase.svelte

@@ -1,115 +0,0 @@
-<script lang="ts">
-  import { getLayoutStore } from "../state/layout.svelte";
-
-  const layoutStore = getLayoutStore();
-
-  import Actions from "./tabs/Actions.svelte";
-  import DataInput from "./tabs/DataInput.svelte";
-  import Display from "./tabs/Display.svelte";
-  import Navigation from "./tabs/Navigation.svelte";
-  import Feedback from "./tabs/Feedback.svelte";
-  import Visual from "./tabs/Visual.svelte";
-
-  const tabs = [
-    { label: "Actions", icon: "⚡", component: Actions },
-    { label: "Data Input", icon: "📥", component: DataInput },
-    { label: "Display", icon: "📊", component: Display },
-    { label: "Feedback", icon: "💬", component: Feedback },
-    { label: "Visual", icon: "🎨", component: Visual },
-  ];
-
-  import { showcaseState } from "./state.svelte";
-</script>
-
-<section
-  class="w-full max-w-6xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom duration-1000"
->
-  <div role="tablist" class="tabs tabs-box tabs-lg bg-base-200 p-2 rounded-2xl">
-    {#each tabs as tab, i (tab.label)}
-      <button
-        role="tab"
-        class="tab gap-2 transition-all duration-300 {showcaseState.activeTab ===
-        i
-          ? 'tab-active shadow-lg'
-          : ''}"
-        onclick={() => (showcaseState.activeTab = i)}
-      >
-        <span class="text-xl">{tab.icon}</span>
-        <span class="hidden md:inline font-bold">{tab.label}</span>
-      </button>
-    {/each}
-  </div>
-
-  <div
-    class="min-h-[600px] bg-base-200/50 rounded-3xl border border-base-content/5 overflow-hidden"
-  >
-    {#each tabs as tab, i (tab.label)}
-      {#if showcaseState.activeTab === i}
-        <div class="animate-in fade-in zoom-in-95 duration-500">
-          <tab.component />
-        </div>
-      {/if}
-    {/each}
-  </div>
-</section>
-
-<style>
-  /* @import "daisyui/components/alert.css"; */
-  /* @import "daisyui/components/avatar.css"; */
-  /* @import "daisyui/components/badge.css"; */
-  /* @import "daisyui/components/breadcrumbs.css"; */
-  /* @import "daisyui/components/button.css"; */
-  /* @import "daisyui/components/calendar.css"; */
-  /* @import "daisyui/components/card.css"; */
-  /* @import "daisyui/components/carousel.css"; */
-  /* @import "daisyui/components/chat.css"; */
-  /* @import "daisyui/components/checkbox.css"; */
-  /* @import "daisyui/components/collapse.css"; */
-  /* @import "daisyui/components/countdown.css"; */
-  /* @import "daisyui/components/diff.css"; */
-  /* @import "daisyui/components/divider.css"; */
-  /* @import "daisyui/components/dock.css"; */
-  /* @import "daisyui/components/drawer.css"; */
-  /* @import "daisyui/components/dropdown.css"; */
-  /* @import "daisyui/components/fab.css"; */
-  /* @import "daisyui/components/fieldset.css"; */
-  /* @import "daisyui/components/fileinput.css"; */
-  /* @import "daisyui/components/filter.css"; */
-  /* @import "daisyui/components/footer.css"; */
-  /* @import "daisyui/components/hero.css"; */
-  /* @import "daisyui/components/hover3d.css"; */
-  /* @import "daisyui/components/hovergallery.css"; */
-  /* @import "daisyui/components/indicator.css"; */
-  /* @import "daisyui/components/input.css"; */
-  /* @import "daisyui/components/kbd.css"; */
-  /* @import "daisyui/components/label.css"; */
-  /* @import "daisyui/components/link.css"; */
-  /* @import "daisyui/components/list.css"; */
-  /* @import "daisyui/components/loading.css"; */
-  /* @import "daisyui/components/mask.css"; */
-  /* @import "daisyui/components/menu.css"; */
-  /* @import "daisyui/components/mockup.css"; */
-  /* @import "daisyui/components/modal.css"; */
-  /* @import "daisyui/components/navbar.css"; */
-  /* @import "daisyui/components/progress.css"; */
-  /* @import "daisyui/components/radialprogress.css"; */
-  /* @import "daisyui/components/radio.css"; */
-  /* @import "daisyui/components/range.css"; */
-  /* @import "daisyui/components/rating.css"; */
-  /* @import "daisyui/components/select.css"; */
-  /* @import "daisyui/components/skeleton.css"; */
-  /* @import "daisyui/components/stack.css"; */
-  /* @import "daisyui/components/stat.css"; */
-  /* @import "daisyui/components/status.css"; */
-  /* @import "daisyui/components/steps.css"; */
-  /* @import "daisyui/components/swap.css"; */
-  /* @import "daisyui/components/tab.css"; */
-  /* @import "daisyui/components/table.css"; */
-  /* @import "daisyui/components/textarea.css"; */
-  /* @import "daisyui/components/textrotate.css"; */
-  /* @import "daisyui/components/timeline.css"; */
-  /* @import "daisyui/components/toast.css"; */
-  /* @import "daisyui/components/toggle.css"; */
-  /* @import "daisyui/components/tooltip.css"; */
-  /* @import "daisyui/components/validator.css"; */
-</style>

package/dist/showcase/Showcase.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ShowcaseProps = typeof __propDef.props;
-export type ShowcaseEvents = typeof __propDef.events;
-export type ShowcaseSlots = typeof __propDef.slots;
-export default class Showcase extends SvelteComponentTyped<ShowcaseProps, ShowcaseEvents, ShowcaseSlots> {
-}
-export {};

package/dist/showcase/ShowcaseCard.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  let { title, icon = '', children } = $props<{ 
-    title: string; 
-    icon?: string; 
-    children: Snippet 
-  }>();
-</script>
-
-<div class="card bg-base-100 shadow-xl border border-base-content/5">
-  <div class="card-body gap-0">
-    <h2 class="card-title mb-4 flex items-center gap-2">
-      {#if icon}<span class="text-2xl">{icon}</span>{/if}
-      {title}
-    </h2>
-    {@render children()}
-  </div>
-</div>

package/dist/showcase/ShowcaseCard.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ShowcaseCardProps = typeof __propDef.props;
-export type ShowcaseCardEvents = typeof __propDef.events;
-export type ShowcaseCardSlots = typeof __propDef.slots;
-export default class ShowcaseCard extends SvelteComponentTyped<ShowcaseCardProps, ShowcaseCardEvents, ShowcaseCardSlots> {
-}
-export {};

package/dist/showcase/StoreDetailCard.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-    import * as m from "../paraglide/messages.js";
-
-    interface StoreValue {
-        key: string;
-        value: string | number;
-        labelKey?: keyof typeof m;
-    }
-
-    interface StoreDetail {
-        label: string;
-        labelKey?: keyof typeof m;
-        icon: string;
-        color: string;
-        values: StoreValue[];
-    }
-
-    let { store } = $props<{ store: StoreDetail }>();
-
-    function getLabel(item: { label?: string; labelKey?: keyof typeof m }) {
-        if (item.labelKey && typeof m[item.labelKey] === "function") {
-            return (m[item.labelKey] as any)();
-        }
-        return item.label;
-    }
-
-    function getKeyLabel(item: StoreValue) {
-        if (item.labelKey && typeof m[item.labelKey] === "function") {
-            return (m[item.labelKey] as any)();
-        }
-        return item.key;
-    }
-</script>
-
-<div
-    class="card bg-base-100 border border-base-300 shadow-sm hover:shadow-md transition-all duration-300"
->
-    <div class="card-body p-6">
-        <div class="flex items-center gap-3 mb-4">
-            <div
-                class="w-10 h-10 rounded-xl bg-{store.color}/10 flex items-center justify-center text-xl"
-            >
-                {store.icon}
-            </div>
-            <h3
-                class="card-title text-sm uppercase tracking-widest opacity-60 font-black"
-            >
-                {getLabel(store)}
-            </h3>
-        </div>
-
-        <div class="space-y-4">
-            {#each store.values as item}
-                <div class="flex flex-col gap-1">
-                    <span
-                        class="text-[10px] font-bold uppercase opacity-40 tracking-wider"
-                        >{getKeyLabel(item)}</span
-                    >
-                    <div
-                        class="bg-base-200/50 px-3 py-2 rounded-lg font-mono text-sm border border-base-content/5 truncate"
-                    >
-                        {item.value}
-                    </div>
-                </div>
-            {/each}
-        </div>
-    </div>
-</div>

package/dist/showcase/StoreDetailCard.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type StoreDetailCardProps = typeof __propDef.props;
-export type StoreDetailCardEvents = typeof __propDef.events;
-export type StoreDetailCardSlots = typeof __propDef.slots;
-export default class StoreDetailCard extends SvelteComponentTyped<StoreDetailCardProps, StoreDetailCardEvents, StoreDetailCardSlots> {
-}
-export {};

package/dist/showcase/shared.d.ts

@@ -1,7 +0,0 @@
-export declare const COLORS: readonly ["neutral", "primary", "secondary", "accent", "info", "success", "warning", "error"];
-export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
-export declare const STYLES: readonly ["default", "soft", "outline", "dash", "ghost"];
-export declare const BTN_STYLES: readonly ["", "btn-soft", "btn-outline", "btn-dash", "btn-ghost"];
-export declare const BADGE_STYLES: readonly ["", "badge-soft", "badge-outline", "badge-dash", "badge-ghost"];
-export declare const ALERT_STYLES: readonly ["", "alert-soft", "alert-outline", "alert-dash"];
-export declare const CARD_STYLES: readonly ["", "card-border", "card-dash"];

package/dist/showcase/shared.js

@@ -1,34 +0,0 @@
-export const COLORS = [
-    "neutral",
-    "primary",
-    "secondary",
-    "accent",
-    "info",
-    "success",
-    "warning",
-    "error",
-];
-export const SIZES = ["xs", "sm", "md", "lg", "xl"];
-export const STYLES = ["default", "soft", "outline", "dash", "ghost"];
-// Per-component style arrays (not every component has all 5 styles)
-export const BTN_STYLES = [
-    "",
-    "btn-soft",
-    "btn-outline",
-    "btn-dash",
-    "btn-ghost",
-];
-export const BADGE_STYLES = [
-    "",
-    "badge-soft",
-    "badge-outline",
-    "badge-dash",
-    "badge-ghost",
-];
-export const ALERT_STYLES = [
-    "",
-    "alert-soft",
-    "alert-outline",
-    "alert-dash",
-];
-export const CARD_STYLES = ["", "card-border", "card-dash"];

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

@@ -1,3 +0,0 @@
-export declare const showcaseState: {
-    activeTab: number;
-};

package/dist/showcase/state.svelte.js

@@ -1,3 +0,0 @@
-export const showcaseState = $state({
-    activeTab: 0,
-});

package/dist/showcase/tabs/Actions.svelte

@@ -1,150 +0,0 @@
-<script lang="ts">
-  import { COLORS, SIZES, BTN_STYLES, BADGE_STYLES } from "../shared";
-  import ShowcaseCard from "../ShowcaseCard.svelte";
-</script>
-
-{#snippet section(label: string)}
-  <div class="divider text-xs font-bold opacity-40 mt-6 mb-2">
-    {label.toUpperCase()}
-  </div>
-{/snippet}
-
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
-  <!-- BUTTONS -->
-  <ShowcaseCard title="Buttons" icon="🖱️">
-    {@render section("Colors")}
-    <div class="flex flex-wrap gap-2">
-      {#each COLORS as c (c)}
-        <button class="btn btn-{c}">{c}</button>
-      {/each}
-    </div>
-
-    {@render section("Styles")}
-    <div class="space-y-4">
-      {#each BTN_STYLES as style (style)}
-        {#if style}
-          <div class="flex flex-wrap gap-2">
-            {#each COLORS as c (c)}
-              <button class="btn {style} btn-{c}">{c}</button>
-            {/each}
-          </div>
-        {/if}
-      {/each}
-    </div>
-
-    {@render section("Sizes")}
-    <div class="flex flex-wrap gap-2 items-end">
-      {#each SIZES as s (s)}
-        <button class="btn btn-primary btn-{s}">{s}</button>
-      {/each}
-    </div>
-  </ShowcaseCard>
-
-  <!-- BADGES -->
-  <ShowcaseCard title="Badges" icon="🏷️">
-    {@render section("Colors")}
-    <div class="flex flex-wrap gap-2">
-      {#each COLORS as c (c)}
-        <div class="badge badge-{c}">{c}</div>
-      {/each}
-    </div>
-
-    {@render section("Styles")}
-    <div class="space-y-4">
-      {#each BADGE_STYLES as style (style)}
-        {#if style}
-          <div class="flex flex-wrap gap-2">
-            {#each COLORS as c (c)}
-              <div class="badge {style} badge-{c}">{c}</div>
-            {/each}
-          </div>
-        {/if}
-      {/each}
-    </div>
-
-    {@render section("In Elements")}
-    <div class="flex flex-wrap gap-4">
-      <button class="btn">
-        Inbox
-        <div class="badge badge-secondary">+99</div>
-      </button>
-      <div class="flex items-center gap-2 text-xl font-bold">
-        Notifications
-        <div class="badge badge-primary badge-outline">NEW</div>
-      </div>
-    </div>
-  </ShowcaseCard>
-
-  <!-- AVATAR & STATUS -->
-  <ShowcaseCard title="Avatar & Status" icon="👤">
-    {@render section("Shapes & Status")}
-    <div class="flex flex-wrap gap-6 items-center">
-      <div class="avatar online">
-        <div class="w-16 rounded-full">
-          <img src="https://picsum.photos/160" alt="Avatar" />
-        </div>
-      </div>
-      <div class="avatar offline">
-        <div class="w-16 rounded-xl">
-          <img src="https://picsum.photos/161" alt="Avatar" />
-        </div>
-      </div>
-      <div class="avatar online">
-        <div class="w-16 mask mask-squircle">
-          <img src="https://picsum.photos/162" alt="Avatar" />
-        </div>
-      </div>
-    </div>
-
-    {@render section("Status Indicators")}
-    <div class="flex flex-wrap gap-4 items-center">
-      {#each COLORS as c (c)}
-        <span class="status status-{c}"></span>
-      {/each}
-      <span class="status status-success animate-ping"></span>
-    </div>
-  </ShowcaseCard>
-
-  <!-- INDICATORS & FAB -->
-  <ShowcaseCard title="Indicators & FAB" icon="📍">
-    {@render section("Indicators")}
-    <div class="flex flex-wrap gap-8">
-      <div class="indicator">
-        <span class="indicator-item badge badge-secondary">99+</span>
-        <div class="grid w-20 h-20 bg-base-300 place-items-center rounded-lg">
-          Inbox
-        </div>
-      </div>
-
-      <div class="indicator">
-        <span
-          class="indicator-item indicator-bottom indicator-center badge badge-primary"
-          >new</span
-        >
-        <div class="grid w-20 h-20 bg-base-300 place-items-center rounded-lg">
-          Items
-        </div>
-      </div>
-    </div>
-
-    {@render section("FAB / Speed Dial")}
-    <div
-      class="relative h-40 w-full bg-base-200 rounded-lg overflow-hidden p-4"
-    >
-      <div class="absolute bottom-4 right-4">
-        <div class="fab">
-          <div
-            tabindex="0"
-            role="button"
-            class="btn btn-primary btn-circle btn-lg"
-          >
-            ＋
-          </div>
-          <button class="btn btn-circle btn-secondary">A</button>
-          <button class="btn btn-circle btn-secondary">B</button>
-          <button class="btn btn-circle btn-secondary">C</button>
-        </div>
-      </div>
-    </div>
-  </ShowcaseCard>
-</div>

package/dist/showcase/tabs/Actions.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ActionsProps = typeof __propDef.props;
-export type ActionsEvents = typeof __propDef.events;
-export type ActionsSlots = typeof __propDef.slots;
-export default class Actions extends SvelteComponentTyped<ActionsProps, ActionsEvents, ActionsSlots> {
-}
-export {};