rune-lab 0.3.1 → 0.4.1

package/dist/ui/components/money/MoneyInput.svelte

@@ -1,131 +0,0 @@
-<!--
-  MoneyInput — Monetary value input that works in minor units (cents).
-  No floats cross the boundary — values are always integer minor units.
--->
-<script module lang="ts">
-    import type { ISO4217Code } from "rune-lab/core";
-
-    export interface MoneyInputProps {
-        /** Current value in minor or major units (see unit prop) */
-        amount?: number | null | undefined;
-        /** 
-         * Whether the amount is in 'major' (e.g., pesos) or 'minor' (e.g., centavos) units.
-         * Defaults to 'minor' for backward compatibility.
-         */
-        unit?: 'major' | 'minor';
-        /** Override currency code (defaults to CurrencyStore.current) */
-        currency?: ISO4217Code | string;
-        /** Minimum value in same units as amount */
-        min?: number;
-        /** Maximum value in same units as amount */
-        max?: number;
-        /** Placeholder text */
-        placeholder?: string;
-        /** Fired when the value changes (unit matches the unit prop) */
-        oninput?: (val: number) => void;
-        /** Input disabled state */
-        disabled?: boolean;
-    }
-</script>
-
-<script lang="ts">
-    import { getCurrencyStore } from "rune-lab/state";
-    import { toMinorUnit } from "rune-lab/core";
-
-    let {
-        amount = $bindable(0),
-        unit = 'minor',
-        currency,
-        min,
-        max,
-        placeholder = "0.00",
-        oninput,
-        disabled = false,
-    }: MoneyInputProps = $props();
-
-    const currencyStore = getCurrencyStore();
-
-    const resolvedCurrency = $derived(
-        currency ?? String(currencyStore.current),
-    );
-
-    const currencyMeta = $derived(currencyStore.get(resolvedCurrency));
-    const symbol = $derived(currencyMeta?.symbol ?? "$");
-    const decimals = $derived(currencyMeta?.decimals ?? 2);
-
-    // Convert to minor units internally for consistent arithmetic if needed, 
-    // but here we just need to display it.
-    const displayValue = $derived.by(() => {
-        const val = amount ?? 0;
-        if (unit === 'major') {
-            return Number(val).toFixed(decimals);
-        }
-        if (decimals === 0) return String(val);
-        const divisor = Math.pow(10, decimals);
-        return (Number(val) / divisor).toFixed(decimals);
-    });
-
-    function handleInput(e: Event) {
-        const target = e.target as HTMLInputElement;
-        const raw = target.value.replace(/[^0-9.,-]/g, "");
-
-        if (!raw) return;
-
-        // String-based parsing: split on decimal point
-        const parts = raw.split(".");
-        const integerPart = parts[0] || "0";
-
-        // Pad or truncate the fractional part to exactly `decimals` digits
-        let fractionalPart = (parts[1] || "").slice(0, decimals);
-        fractionalPart = fractionalPart.padEnd(decimals, "0");
-
-        // Combine as integer minor units — no floats involved
-        const combined =
-            decimals === 0 ? integerPart : integerPart + fractionalPart;
-
-        let cents = parseInt(combined, 10);
-        if (isNaN(cents)) return;
-
-        // Apply constraints in minor units
-        let finalCents = cents;
-        
-        if (unit === 'major') {
-            // If we are working in major units, we need to convert min/max to cents for comparison
-            const minCents = min !== undefined ? toMinorUnit(min, resolvedCurrency) : undefined;
-            const maxCents = max !== undefined ? toMinorUnit(max, resolvedCurrency) : undefined;
-            
-            if (minCents !== undefined) finalCents = Math.max(finalCents, minCents);
-            if (maxCents !== undefined) finalCents = Math.min(finalCents, maxCents);
-            
-            const majorValue = finalCents / Math.pow(10, decimals);
-            amount = majorValue;
-            oninput?.(majorValue);
-        } else {
-            if (min !== undefined) finalCents = Math.max(finalCents, min);
-            if (max !== undefined) finalCents = Math.min(finalCents, max);
-            
-            amount = finalCents;
-            oninput?.(finalCents);
-        }
-    }
-</script>
-
-<label
-    class="input input-bordered flex items-center gap-1"
-    class:input-disabled={disabled}
->
-    <span class="text-base-content/50 font-medium select-none">{symbol}</span>
-    <input
-        type="text"
-        inputmode="decimal"
-        class="grow bg-transparent outline-none tabular-nums"
-        value={displayValue}
-        {placeholder}
-        {disabled}
-        oninput={handleInput}
-        aria-label={`Amount in ${resolvedCurrency}`}
-    />
-    <span class="text-base-content/30 text-xs font-mono select-none"
-        >{resolvedCurrency}</span
-    >
-</label>

package/dist/ui/components/money/MoneyInput.svelte.d.ts

@@ -1,25 +0,0 @@
-import type { ISO4217Code } from "rune-lab/core";
-export interface MoneyInputProps {
-    /** Current value in minor or major units (see unit prop) */
-    amount?: number | null | undefined;
-    /**
-     * Whether the amount is in 'major' (e.g., pesos) or 'minor' (e.g., centavos) units.
-     * Defaults to 'minor' for backward compatibility.
-     */
-    unit?: 'major' | 'minor';
-    /** Override currency code (defaults to CurrencyStore.current) */
-    currency?: ISO4217Code | string;
-    /** Minimum value in same units as amount */
-    min?: number;
-    /** Maximum value in same units as amount */
-    max?: number;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Fired when the value changes (unit matches the unit prop) */
-    oninput?: (val: number) => void;
-    /** Input disabled state */
-    disabled?: boolean;
-}
-declare const MoneyInput: import("svelte").Component<MoneyInputProps, {}, "amount">;
-type MoneyInput = ReturnType<typeof MoneyInput>;
-export default MoneyInput;

package/dist/ui/components/money/index.d.ts

@@ -1,2 +0,0 @@
-export { default as MoneyDisplay } from "./MoneyDisplay.svelte";
-export { default as MoneyInput } from "./MoneyInput.svelte";

package/dist/ui/components/money/index.js

@@ -1,3 +0,0 @@
-// sdk/ui/src/lib/components/money/index.ts
-export { default as MoneyDisplay } from "./MoneyDisplay.svelte";
-export { default as MoneyInput } from "./MoneyInput.svelte";

package/dist/ui/components/user/UserAvatar.svelte

@@ -1,66 +0,0 @@
-<!--
-  UserAvatar — Universal user identity primitive.
-  Renders avatar image or falls back to generated initials.
-  Zero domain knowledge.
--->
-<script module lang="ts">
-    export interface UserAvatarProps {
-        /** User's display name (used for initials fallback) */
-        name: string;
-        /** URL to avatar image */
-        avatar_url?: string;
-        /** Size variant */
-        size?: "xs" | "sm" | "md" | "lg";
-        /** Show online indicator */
-        online?: boolean;
-    }
-</script>
-
-<script lang="ts">
-    let { name, avatar_url, size = "md", online }: UserAvatarProps = $props();
-
-    const sizeClasses: Record<string, string> = {
-        xs: "w-6 h-6 text-[10px]",
-        sm: "w-8 h-8 text-xs",
-        md: "w-10 h-10 text-sm",
-        lg: "w-14 h-14 text-lg",
-    };
-
-    const initials = $derived(
-        name
-            .split(/\s+/)
-            .filter(Boolean)
-            .slice(0, 2)
-            .map((word) => word[0].toUpperCase())
-            .join(""),
-    );
-
-    /**
-     * Deterministic color from name — generates a consistent hue
-     * so the same user always gets the same color
-     */
-    const bgHue = $derived(
-        name.split("").reduce((hash, char) => {
-            return char.charCodeAt(0) + ((hash << 5) - hash);
-        }, 0) % 360,
-    );
-
-    const bgColor = $derived(`hsl(${Math.abs(bgHue)}, 60%, 45%)`);
-</script>
-
-<div class="avatar placeholder" class:online>
-    <div
-        class="rounded-full {sizeClasses[size]}"
-        style={avatar_url ? undefined : `background-color: ${bgColor}`}
-    >
-        {#if avatar_url}
-            <img
-                src={avatar_url}
-                alt={`${name}'s avatar`}
-                class="rounded-full object-cover"
-            />
-        {:else}
-            <span class="text-white font-semibold select-none">{initials}</span>
-        {/if}
-    </div>
-</div>

package/dist/ui/components/user/UserAvatar.svelte.d.ts

@@ -1,13 +0,0 @@
-export interface UserAvatarProps {
-    /** User's display name (used for initials fallback) */
-    name: string;
-    /** URL to avatar image */
-    avatar_url?: string;
-    /** Size variant */
-    size?: "xs" | "sm" | "md" | "lg";
-    /** Show online indicator */
-    online?: boolean;
-}
-declare const UserAvatar: import("svelte").Component<UserAvatarProps, {}, "">;
-type UserAvatar = ReturnType<typeof UserAvatar>;
-export default UserAvatar;

package/dist/ui/components/user/UserProfile.svelte

@@ -1,79 +0,0 @@
-<!--
-  UserProfile — Richer user identity card.
-  Composes UserAvatar + name/role/email.
-  Zero domain knowledge.
--->
-<script module lang="ts">
-    export interface UserProfileProps {
-        /** User's display name */
-        name: string;
-        /** User's email address */
-        email?: string;
-        /** User's role or title */
-        role?: string;
-        /** URL to avatar image */
-        avatar_url?: string;
-        /** Size variant */
-        size?: "sm" | "md" | "lg";
-        /** Display variant */
-        variant?: "card" | "trigger";
-    }
-</script>
-
-<script lang="ts">
-    import UserAvatar from "./UserAvatar.svelte";
-
-    let {
-        name,
-        email,
-        role,
-        avatar_url,
-        size = "md",
-        variant = "card",
-    }: UserProfileProps = $props();
-
-    const avatarSize = $derived(
-        size === "sm" ? "sm" : size === "lg" ? "lg" : "md",
-    );
-
-    const textSizes = $derived({
-        name:
-            size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base",
-        meta: size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-xs",
-    });
-</script>
-
-{#if variant === "trigger"}
-    <!-- Compact trigger variant — for navbar dropdowns -->
-    <div
-        class="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
-    >
-        <UserAvatar {name} {avatar_url} size={avatarSize} />
-        <div class="flex flex-col leading-tight min-w-0">
-            <span class="{textSizes.name} font-medium truncate">{name}</span>
-            {#if role}
-                <span class="{textSizes.meta} text-base-content/60 truncate"
-                    >{role}</span
-                >
-            {/if}
-        </div>
-    </div>
-{:else}
-    <!-- Card variant — for profile pages / settings -->
-    <div class="flex items-center gap-3 p-3 rounded-box bg-base-200/50">
-        <UserAvatar {name} {avatar_url} size={avatarSize} />
-        <div class="flex flex-col leading-tight min-w-0">
-            <span class="{textSizes.name} font-semibold truncate">{name}</span>
-            {#if role}
-                <span class="{textSizes.meta} text-base-content/60 truncate"
-                    >{role}</span
-                >
-            {/if}
-            {#if email}
-                <span class="{textSizes.meta} text-base-content/40 truncate"
-                    >{email}</span
-                >
-            {/if}
-        </div>
-    </div>
-{/if}

package/dist/ui/components/user/UserProfile.svelte.d.ts

@@ -1,17 +0,0 @@
-export interface UserProfileProps {
-    /** User's display name */
-    name: string;
-    /** User's email address */
-    email?: string;
-    /** User's role or title */
-    role?: string;
-    /** URL to avatar image */
-    avatar_url?: string;
-    /** Size variant */
-    size?: "sm" | "md" | "lg";
-    /** Display variant */
-    variant?: "card" | "trigger";
-}
-declare const UserProfile: import("svelte").Component<UserProfileProps, {}, "">;
-type UserProfile = ReturnType<typeof UserProfile>;
-export default UserProfile;

package/dist/ui/components/user/index.d.ts

@@ -1,2 +0,0 @@
-export { default as UserAvatar } from "./UserAvatar.svelte";
-export { default as UserProfile } from "./UserProfile.svelte";

package/dist/ui/components/user/index.js

@@ -1,3 +0,0 @@
-// sdk/ui/src/lib/components/user/index.ts
-export { default as UserAvatar } from "./UserAvatar.svelte";
-export { default as UserProfile } from "./UserProfile.svelte";

package/dist/ui/features/command-palette/CommandPalette.svelte.d.ts

@@ -1,6 +0,0 @@
-type $$ComponentProps = {
-    shortcutKey?: string;
-};
-declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "">;
-type CommandPalette = ReturnType<typeof CommandPalette>;
-export default CommandPalette;

package/dist/ui/features/config/AppSettingSelector.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type Snippet } from "svelte";
-type $$ComponentProps = {
-    options: any[];
-    value: any;
-    item: Snippet<[any]>;
-    triggerLabel: Snippet<[any]>;
-    tooltip?: string;
-    direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
-    responsive?: boolean;
-};
-declare const AppSettingSelector: import("svelte").Component<$$ComponentProps, {}, "">;
-type AppSettingSelector = ReturnType<typeof AppSettingSelector>;
-export default AppSettingSelector;

package/dist/ui/features/config/CurrencySelector.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-    import AppSettingSelector from "./AppSettingSelector.svelte";
-    import {
-        getCurrencyStore,
-        type Currency,
-    } from "rune-lab/state";
-    import * as rlMessages from "../../paraglide/messages.js";
-    import { getContext } from "svelte";
-
-    const currencyStore = getCurrencyStore();
-
-    let {
-        codes = [],
-        current = $bindable(String(currencyStore.current)),
-        onchange,
-    }: {
-        codes?: string[];
-        current?: string;
-        onchange?: (value: string) => void;
-    } = $props();
-
-    const userDictionary =
-        getContext<Record<string, any>>("rl:dictionary") ?? {};
-
-    function getLabel(currency: Currency): string {
-        const key = String(currency.code);
-        if (typeof userDictionary[key] === "function")
-            return userDictionary[key]();
-        if (typeof (rlMessages as any)[key] === "function")
-            return (rlMessages as any)[key]();
-        return String(currency.code);
-    }
-
-    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={available}
-    tooltip={getLabel(active)}
->
-    {#snippet triggerLabel()}
-        <span class="font-bold">{active.symbol}</span>
-    {/snippet}
-
-    {#snippet item(c)}
-        <button
-            class="flex items-center gap-3 w-full"
-            onclick={() => {
-                currencyStore.set(c.code);
-                current = c.code;
-                onchange?.(c.code);
-            }}
-        >
-            <span class="badge badge-sm badge-ghost w-8">{c.symbol}</span>
-            <span>{getLabel(c)}</span>
-        </button>
-    {/snippet}
-</AppSettingSelector>

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

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    codes?: string[];
-    current?: string;
-    onchange?: (value: string) => void;
-};
-declare const CurrencySelector: import("svelte").Component<$$ComponentProps, {}, "current">;
-type CurrencySelector = ReturnType<typeof CurrencySelector>;
-export default CurrencySelector;

package/dist/ui/features/config/LanguageSelector.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-    import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { getLanguageStore, type Language } from "rune-lab/state";
-    import * as rlMessages from "../../paraglide/messages.js";
-    import { getContext } from "svelte";
-    import { setLocale } from "../../paraglide/runtime";
-
-    const languageStore = getLanguageStore();
-
-    let {
-        languages: allowedLocales = languageStore.available.map((l) => l.code),
-        current = $bindable(languageStore.current),
-        onchange,
-    }: {
-        languages?: ReadonlyArray<string>;
-        current?: string;
-        onchange?: (value: string) => void;
-    } = $props();
-
-    const userDictionary =
-        getContext<Record<string, any>>("rl:dictionary") ?? {};
-
-    function getLabel(lang: Language): string {
-        const key = lang.code;
-        if (typeof userDictionary[key] === "function")
-            return userDictionary[key]();
-        if (typeof (rlMessages as any)[key] === "function")
-            return (rlMessages as any)[key]();
-        return lang.code.toUpperCase();
-    }
-
-    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={available}
-    tooltip={getLabel(active)}
->
-    {#snippet triggerLabel()}
-        <span class="text-lg">{active.flag}</span>
-    {/snippet}
-
-    {#snippet item(l)}
-        <button
-            class="flex items-center gap-3 w-full"
-            onclick={() => {
-                languageStore.set(l.code);
-                setLocale(l.code as any);
-                current = l.code;
-                onchange?.(l.code);
-            }}
-        >
-            <span class="text-lg">{l.flag}</span>
-            <span>{getLabel(l)}</span>
-        </button>
-    {/snippet}
-</AppSettingSelector>

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

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    languages?: ReadonlyArray<string>;
-    current?: string;
-    onchange?: (value: string) => void;
-};
-declare const LanguageSelector: import("svelte").Component<$$ComponentProps, {}, "current">;
-type LanguageSelector = ReturnType<typeof LanguageSelector>;
-export default LanguageSelector;

package/dist/ui/features/config/ThemeSelector.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-    import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { getThemeStore, type Theme } from "rune-lab/state";
-    import * as rlMessages from "../../paraglide/messages.js";
-    import { getContext } from "svelte";
-
-    const themeStore = getThemeStore();
-
-    let {
-        themes = [],
-        current = $bindable(themeStore.current),
-        onchange,
-    }: {
-        themes?: string[];
-        current?: string;
-        onchange?: (value: string) => void;
-    } = $props();
-
-    const userDictionary =
-        getContext<Record<string, any>>("rl:dictionary") ?? {};
-
-    function getThemeLabel(theme: Theme): string {
-        const key = theme.name;
-        if (typeof userDictionary[key] === "function")
-            return userDictionary[key]();
-        if (typeof (rlMessages as any)[key] === "function")
-            return (rlMessages as any)[key]();
-        return theme.name;
-    }
-
-    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={available}
-    tooltip={getThemeLabel(activeTheme)}
->
-    {#snippet triggerLabel()}
-        <span class="text-lg">{activeTheme.icon}</span>
-    {/snippet}
-
-    {#snippet item(t)}
-        <button
-            class="flex items-center gap-3 w-full"
-            onclick={() => {
-                themeStore.set(t.name);
-                current = t.name;
-                onchange?.(t.name);
-            }}
-        >
-            <input
-                type="radio"
-                name="theme-{t.name}"
-                class="theme-controller radio radio-xs"
-                value={t.name}
-                bind:group={themeStore.current}
-            />
-            <span class="text-lg">{t.icon}</span>
-            <span class="capitalize">
-                {getThemeLabel(t)}
-            </span>
-        </button>
-    {/snippet}
-</AppSettingSelector>

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

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    themes?: string[];
-    current?: string;
-    onchange?: (value: string) => void;
-};
-declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "current">;
-type ThemeSelector = ReturnType<typeof ThemeSelector>;
-export default ThemeSelector;

package/dist/ui/features/notifications/NotificationBell.svelte.d.ts

@@ -1,11 +0,0 @@
-export interface NotificationBellProps {
-    /** Number of unread notifications (badge hides when 0) */
-    unreadCount?: number;
-    /** Click handler */
-    onclick?: () => void;
-    /** Enable shake animation to draw attention */
-    animate?: boolean;
-}
-declare const NotificationBell: import("svelte").Component<NotificationBellProps, {}, "">;
-type NotificationBell = ReturnType<typeof NotificationBell>;
-export default NotificationBell;

package/dist/ui/features/notifications/index.d.ts

@@ -1 +0,0 @@
-export { default as NotificationBell } from "./NotificationBell.svelte";

package/dist/ui/features/notifications/index.js

@@ -1,2 +0,0 @@
-// sdk/ui/src/lib/features/notifications/index.ts
-export { default as NotificationBell } from "./NotificationBell.svelte";

package/dist/ui/features/shortcuts/ShortcutPalette.svelte.d.ts

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

package/dist/ui/index.d.ts

@@ -1,26 +0,0 @@
-export { portal } from "./actions/portal.js";
-export { default as RuneProvider } from "./components/RuneProvider.svelte";
-export { default as Icon } from "./components/Icon.svelte";
-export { default as Toaster } from "./components/Toaster.svelte";
-export { default as ApiMonitor } from "./components/ApiMonitor.svelte";
-export { default as Kyntharil } from "./components/Kyntharil.svelte";
-export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
-export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
-export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
-export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
-export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
-export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
-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 "./layout/ConnectedNavigationPanel.svelte";
-export { default as ConnectedWorkspaceStrip } from "./layout/ConnectedWorkspaceStrip.svelte";
-export { default as DatePicker } from "./primitives/DatePicker.svelte";
-export { default as UserAvatar } from "./components/user/UserAvatar.svelte";
-export { default as UserProfile } from "./components/user/UserProfile.svelte";
-export { default as NotificationBell } from "./features/notifications/NotificationBell.svelte";
-export { default as MoneyDisplay } from "./components/money/MoneyDisplay.svelte";
-export { default as MoneyInput } from "./components/money/MoneyInput.svelte";
-export * as sdkMessages from "./paraglide/messages.js";