rune-lab 0.3.0 → 0.4.0

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

@@ -1,69 +1,142 @@
 <script lang="ts">
-    import { getLanguageStore, getCurrencyStore } from "rune-lab/state";
-    import { formatAmount, toMinorUnit, type ISO4217Code } from "rune-lab/core";
+    import { getLanguageStore, getCurrencyStore } from "@internal/state";
+    import {
+        formatAmount,
+        toMinorUnit,
+        type ISO4217Code,
+        MoneyPrimitive,
+    } from "@internal/core";
+    import { DEV } from "esm-env";
 
     let {
-        amount,
-        unit = 'minor',
+        amount: amountProp,
+        money,
+        unit = "minor",
         fallback = "—",
         currency,
+        sourceCurrency,
+        showSourceCurrency = false,
+        noRatesFallback,
         locale,
         compact = false,
     } = $props<{
         /** Amount in minor or major units (see unit prop) */
-        amount: number | null | undefined;
-        /** 
+        amount?: number | null | undefined;
+        /**
+         * MoneyPrimitive instance. When provided, amount, currency, and unit
+         * are derived from the primitive. Takes precedence over raw amount.
+         */
+        money?: MoneyPrimitive;
+        /**
          * Whether the amount is in 'major' (e.g., pesos) or 'minor' (e.g., centavos) units.
+         * @deprecated Use `money` prop with MoneyPrimitive instead.
          * Defaults to 'minor' for backward compatibility.
          */
-        unit?: 'major' | 'minor';
+        unit?: "major" | "minor";
         /** String to display if amount is null, undefined, or NaN. Defaults to "—" */
         fallback?: string;
         /** Override currency code (defaults to CurrencyStore.current) */
         currency?: ISO4217Code | string;
+        /** The currency the amount is stored in (e.g. MXN) */
+        sourceCurrency?: ISO4217Code | string;
+        /** Show the original currency as a label */
+        showSourceCurrency?: boolean;
+        /** Fallback text if conversion is needed but rates are missing */
+        noRatesFallback?: string;
         /** Override locale (defaults to LanguageStore.current) */
         locale?: string;
         /** Use compact notation (e.g., $1.2M) */
         compact?: boolean;
     }>();
 
+    // Dev warning for deprecated usage
+    $effect(() => {
+        if (DEV && money && unit !== "minor") {
+            console.warn(
+                "[MoneyDisplay] The `unit` prop is deprecated when using `money: MoneyPrimitive`. " +
+                    "The unit is derived from the MoneyPrimitive instance.",
+            );
+        }
+    });
+
+    // Derive effective values from MoneyPrimitive or legacy props
+    const amount = $derived(money ? money.minor : amountProp);
+    const effectiveSourceCurrency = $derived(
+        money ? money.currencyCode : sourceCurrency,
+    );
+
     const currencyStore = getCurrencyStore();
     const languageStore = getLanguageStore();
 
-    const resolvedCurrency = $derived(
+    const resolvedDisplayCurrency = $derived(
         currency ?? String(currencyStore.current),
     );
 
+    const resolvedSourceCurrency = $derived(
+        effectiveSourceCurrency ?? resolvedDisplayCurrency,
+    );
+
     const resolvedLocale = $derived(
         locale ?? (String(languageStore.current) || "en"),
     );
 
-    const currencyMeta = $derived(currencyStore.get(resolvedCurrency));
+    const currencyMeta = $derived(currencyStore.get(resolvedDisplayCurrency));
     const decimals = $derived(currencyMeta?.decimals ?? 2);
 
     const formatted = $derived.by(() => {
         // If amount is null/undefined/NaN, use fallback
-        if (amount === null || amount === undefined || (typeof amount === 'number' && isNaN(amount))) {
+        if (
+            amount === null ||
+            amount === undefined ||
+            (typeof amount === "number" && isNaN(amount))
+        ) {
             return fallback;
         }
 
-        // Convert to minor units if necessary
-        const minorAmount = unit === 'major' 
-            ? toMinorUnit(Number(amount), resolvedCurrency) 
-            : amount;
+        // Convert to minor units if necessary (in source currency)
+        const minorAmount =
+            unit === "major"
+                ? toMinorUnit(Number(amount), resolvedSourceCurrency)
+                : amount;
+
+        // Conversion logic
+        let displayAmount = Number(minorAmount);
+        let displayCurrency = resolvedDisplayCurrency;
+
+        if (resolvedSourceCurrency !== resolvedDisplayCurrency) {
+            if (currencyStore.canConvert) {
+                displayAmount = currencyStore.convertAmount(
+                    Number(minorAmount),
+                    resolvedSourceCurrency,
+                    resolvedDisplayCurrency,
+                );
+            } else if (noRatesFallback) {
+                return noRatesFallback;
+            } else {
+                // Fallback to source currency display if rates missing
+                displayCurrency = resolvedSourceCurrency;
+            }
+        }
 
         if (compact) {
-            const majorUnits = Number(minorAmount) / Math.pow(10, decimals);
+            const displayDecimals =
+                currencyStore.get(displayCurrency)?.decimals ?? 2;
+            const majorUnits = displayAmount / Math.pow(10, displayDecimals);
             return new Intl.NumberFormat(resolvedLocale, {
                 style: "currency",
-                currency: resolvedCurrency,
+                currency: displayCurrency,
                 notation: "compact",
                 maximumFractionDigits: 1,
             }).format(majorUnits);
         }
 
-        return formatAmount(minorAmount, resolvedCurrency, resolvedLocale);
+        return formatAmount(displayAmount, displayCurrency, resolvedLocale);
     });
 </script>
 
-<data value={amount} class="rl-money-display tabular-nums">{formatted}</data>
+<data value={amount} class="rl-money-display tabular-nums">
+    {formatted}
+    {#if showSourceCurrency && sourceCurrency && sourceCurrency !== resolvedDisplayCurrency}
+        <small class="opacity-50 ml-1">({sourceCurrency})</small>
+    {/if}
+</data>

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

@@ -1,16 +1,28 @@
-import { type ISO4217Code } from "rune-lab/core";
+import { type ISO4217Code, MoneyPrimitive } from "@internal/core";
 type $$ComponentProps = {
     /** Amount in minor or major units (see unit prop) */
-    amount: number | null | undefined;
+    amount?: number | null | undefined;
+    /**
+     * MoneyPrimitive instance. When provided, amount, currency, and unit
+     * are derived from the primitive. Takes precedence over raw amount.
+     */
+    money?: MoneyPrimitive;
     /**
      * Whether the amount is in 'major' (e.g., pesos) or 'minor' (e.g., centavos) units.
+     * @deprecated Use `money` prop with MoneyPrimitive instead.
      * Defaults to 'minor' for backward compatibility.
      */
-    unit?: 'major' | 'minor';
+    unit?: "major" | "minor";
     /** String to display if amount is null, undefined, or NaN. Defaults to "—" */
     fallback?: string;
     /** Override currency code (defaults to CurrencyStore.current) */
     currency?: ISO4217Code | string;
+    /** The currency the amount is stored in (e.g. MXN) */
+    sourceCurrency?: ISO4217Code | string;
+    /** Show the original currency as a label */
+    showSourceCurrency?: boolean;
+    /** Fallback text if conversion is needed but rates are missing */
+    noRatesFallback?: string;
     /** Override locale (defaults to LanguageStore.current) */
     locale?: string;
     /** Use compact notation (e.g., $1.2M) */

package/dist/ui/components/money/MoneyDisplay.svelte.test.d.ts

@@ -1 +1 @@
-export {};
+import "@testing-library/jest-dom/vitest";

package/dist/ui/components/money/MoneyDisplay.svelte.test.js

@@ -1,11 +1,26 @@
 import { render, screen } from "@testing-library/svelte";
+import "@testing-library/jest-dom/vitest";
 import { describe, expect, it } from "vitest";
 import MoneyDisplay from "./MoneyDisplay.svelte";
-import { RUNE_LAB_CONTEXT } from "rune-lab/state";
+import { RUNE_LAB_CONTEXT } from "@internal/state";
 // Mock stores for context
 const mockCurrencyStore = {
     current: "USD",
-    get: (code) => ({ symbol: "$", decimals: 2 }),
+    get: (code) => {
+        if (code === "JPY")
+            return { symbol: "¥", decimals: 0 };
+        if (code === "MXN")
+            return { symbol: "$", decimals: 2 };
+        return { symbol: "$", decimals: 2 };
+    },
+    canConvert: true,
+    convertAmount: (amount, from, to) => {
+        if (from === "USD" && to === "MXN")
+            return amount * 20;
+        if (from === "MXN" && to === "USD")
+            return amount / 20;
+        return amount;
+    }
 };
 const mockLanguageStore = {
     current: "en-US",
@@ -71,4 +86,32 @@ describe("MoneyDisplay.svelte", () => {
         });
         expect(screen.getByText(/\$1\.2M/)).toBeInTheDocument();
     });
+    it("converts from sourceCurrency to current display currency", () => {
+        // 2000 MXN -> 100 USD
+        render(MoneyDisplay, {
+            props: { amount: 2000, unit: "major", sourceCurrency: "MXN" },
+            context,
+        });
+        expect(screen.getByText(/\$100\.00/)).toBeInTheDocument();
+    });
+    it("shows source currency label when showSourceCurrency is true", () => {
+        render(MoneyDisplay, {
+            props: { amount: 2000, unit: "major", sourceCurrency: "MXN", showSourceCurrency: true },
+            context,
+        });
+        expect(screen.getByText("(MXN)")).toBeInTheDocument();
+    });
+    it("falls back to source currency when conversion is impossible", () => {
+        const contextNoConvert = new Map(context);
+        contextNoConvert.set(RUNE_LAB_CONTEXT.currency, {
+            ...mockCurrencyStore,
+            canConvert: false
+        });
+        render(MoneyDisplay, {
+            props: { amount: 2000, unit: "major", sourceCurrency: "MXN" },
+            context: contextNoConvert,
+        });
+        // Should show $2,000.00 (MXN)
+        expect(screen.getByText(/\$2,000\.00/)).toBeInTheDocument();
+    });
 });

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

@@ -3,25 +3,34 @@
   No floats cross the boundary — values are always integer minor units.
 -->
 <script module lang="ts">
-    import type { ISO4217Code } from "rune-lab/core";
+    import type { ISO4217Code } from "@internal/core";
+    import { MoneyPrimitive } from "@internal/core";
 
     export interface MoneyInputProps {
         /** Current value in minor or major units (see unit prop) */
         amount?: number | null | undefined;
-        /** 
+        /**
+         * MoneyPrimitive instance. When provided, initial amount and currency
+         * are derived from the primitive. Read-only input — output still fires oninput().
+         */
+        money?: MoneyPrimitive;
+        /**
          * Whether the amount is in 'major' (e.g., pesos) or 'minor' (e.g., centavos) units.
+         * @deprecated Use `money` prop with MoneyPrimitive instead.
          * Defaults to 'minor' for backward compatibility.
          */
-        unit?: 'major' | 'minor';
+        unit?: "major" | "minor";
         /** Override currency code (defaults to CurrencyStore.current) */
         currency?: ISO4217Code | string;
-        /** Minimum value in same units as amount */
+        /** The currency the amount is stored in (e.g. MXN) */
+        storageCurrency?: ISO4217Code | string;
+        /** Minimum value in same units as amount (in storageCurrency) */
         min?: number;
-        /** Maximum value in same units as amount */
+        /** Maximum value in same units as amount (in storageCurrency) */
         max?: number;
         /** Placeholder text */
         placeholder?: string;
-        /** Fired when the value changes (unit matches the unit prop) */
+        /** Fired when the value changes (unit matches the unit prop, in storageCurrency) */
         oninput?: (val: number) => void;
         /** Input disabled state */
         disabled?: boolean;
@@ -29,13 +38,16 @@
 </script>
 
 <script lang="ts">
-    import { getCurrencyStore } from "rune-lab/state";
-    import { toMinorUnit } from "rune-lab/core";
+    import { getCurrencyStore } from "@internal/state";
+    import { toMinorUnit } from "@internal/core";
+    import { DEV } from "esm-env";
 
     let {
         amount = $bindable(0),
-        unit = 'minor',
+        money,
+        unit = "minor",
         currency,
+        storageCurrency,
         min,
         max,
         placeholder = "0.00",
@@ -45,19 +57,60 @@
 
     const currencyStore = getCurrencyStore();
 
-    const resolvedCurrency = $derived(
-        currency ?? String(currencyStore.current),
+    // Dev warning for deprecated usage
+    $effect(() => {
+        if (DEV && money && unit !== "minor") {
+            console.warn(
+                "[MoneyInput] The `unit` prop is deprecated when using `money: MoneyPrimitive`. " +
+                    "The unit is derived from the MoneyPrimitive instance.",
+            );
+        }
+    });
+
+    // Seed initial values from MoneyPrimitive if provided
+    $effect(() => {
+        if (money && amount === 0) {
+            amount = money.minor;
+        }
+    });
+
+    const resolvedDisplayCurrency = $derived(
+        money?.currencyCode ?? currency ?? String(currencyStore.current),
     );
 
-    const currencyMeta = $derived(currencyStore.get(resolvedCurrency));
-    const symbol = $derived(currencyMeta?.symbol ?? "$");
-    const decimals = $derived(currencyMeta?.decimals ?? 2);
+    const resolvedStorageCurrency = $derived(
+        storageCurrency ?? money?.currencyCode ?? resolvedDisplayCurrency,
+    );
 
-    // Convert to minor units internally for consistent arithmetic if needed, 
-    // but here we just need to display it.
+    const displayMeta = $derived(currencyStore.get(resolvedDisplayCurrency));
+    const symbol = $derived(displayMeta?.symbol ?? "$");
+    const decimals = $derived(displayMeta?.decimals ?? 2);
+
+    // The display value is reactive to amount (which is in storage currency)
     const displayValue = $derived.by(() => {
-        const val = amount ?? 0;
-        if (unit === 'major') {
+        let val = amount ?? 0;
+
+        // If storage !== display, convert for display
+        if (
+            resolvedStorageCurrency !== resolvedDisplayCurrency &&
+            currencyStore.canConvert
+        ) {
+            const minorAmount =
+                unit === "major"
+                    ? toMinorUnit(val, resolvedStorageCurrency)
+                    : val;
+            const convertedMinor = currencyStore.convertAmount(
+                Number(minorAmount),
+                resolvedStorageCurrency,
+                resolvedDisplayCurrency,
+            );
+
+            if (decimals === 0) return String(Math.round(convertedMinor));
+            return (convertedMinor / Math.pow(10, decimals)).toFixed(decimals);
+        }
+
+        // Standard display (no conversion or no rates)
+        if (unit === "major") {
             return Number(val).toFixed(decimals);
         }
         if (decimals === 0) return String(val);
@@ -69,7 +122,11 @@
         const target = e.target as HTMLInputElement;
         const raw = target.value.replace(/[^0-9.,-]/g, "");
 
-        if (!raw) return;
+        if (!raw) {
+            amount = 0;
+            oninput?.(0);
+            return;
+        }
 
         // String-based parsing: split on decimal point
         const parts = raw.split(".");
@@ -79,33 +136,57 @@
         let fractionalPart = (parts[1] || "").slice(0, decimals);
         fractionalPart = fractionalPart.padEnd(decimals, "0");
 
-        // Combine as integer minor units — no floats involved
+        // Combine as integer minor units (in display currency)
         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);
+        let displayCents = parseInt(combined, 10);
+        if (isNaN(displayCents)) return;
+
+        // Convert back to storage currency
+        let storageCents = displayCents;
+        if (
+            resolvedStorageCurrency !== resolvedDisplayCurrency &&
+            currencyStore.canConvert
+        ) {
+            storageCents = currencyStore.convertAmount(
+                displayCents,
+                resolvedDisplayCurrency,
+                resolvedStorageCurrency,
+            );
+        }
+
+        // Apply constraints in storage currency minor units
+        let finalStorageCents = storageCents;
+
+        const storageDecimals =
+            currencyStore.get(resolvedStorageCurrency)?.decimals ?? 2;
+        const minCents =
+            min !== undefined
+                ? unit === "major"
+                    ? toMinorUnit(min, resolvedStorageCurrency)
+                    : min
+                : undefined;
+        const maxCents =
+            max !== undefined
+                ? unit === "major"
+                    ? toMinorUnit(max, resolvedStorageCurrency)
+                    : max
+                : undefined;
+
+        if (minCents !== undefined)
+            finalStorageCents = Math.max(finalStorageCents, minCents);
+        if (maxCents !== undefined)
+            finalStorageCents = Math.min(finalStorageCents, maxCents);
+
+        if (unit === "major") {
+            const majorValue =
+                finalStorageCents / Math.pow(10, storageDecimals);
             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);
+            amount = finalStorageCents;
+            oninput?.(finalStorageCents);
         }
     }
 </script>
@@ -123,9 +204,9 @@
         {placeholder}
         {disabled}
         oninput={handleInput}
-        aria-label={`Amount in ${resolvedCurrency}`}
+        aria-label={`Amount in ${resolvedDisplayCurrency}`}
     />
     <span class="text-base-content/30 text-xs font-mono select-none"
-        >{resolvedCurrency}</span
+        >{resolvedDisplayCurrency}</span
     >
 </label>

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

@@ -1,21 +1,30 @@
-import type { ISO4217Code } from "rune-lab/core";
+import type { ISO4217Code } from "@internal/core";
+import { MoneyPrimitive } from "@internal/core";
 export interface MoneyInputProps {
     /** Current value in minor or major units (see unit prop) */
     amount?: number | null | undefined;
+    /**
+     * MoneyPrimitive instance. When provided, initial amount and currency
+     * are derived from the primitive. Read-only input — output still fires oninput().
+     */
+    money?: MoneyPrimitive;
     /**
      * Whether the amount is in 'major' (e.g., pesos) or 'minor' (e.g., centavos) units.
+     * @deprecated Use `money` prop with MoneyPrimitive instead.
      * Defaults to 'minor' for backward compatibility.
      */
-    unit?: 'major' | 'minor';
+    unit?: "major" | "minor";
     /** Override currency code (defaults to CurrencyStore.current) */
     currency?: ISO4217Code | string;
-    /** Minimum value in same units as amount */
+    /** The currency the amount is stored in (e.g. MXN) */
+    storageCurrency?: ISO4217Code | string;
+    /** Minimum value in same units as amount (in storageCurrency) */
     min?: number;
-    /** Maximum value in same units as amount */
+    /** Maximum value in same units as amount (in storageCurrency) */
     max?: number;
     /** Placeholder text */
     placeholder?: string;
-    /** Fired when the value changes (unit matches the unit prop) */
+    /** Fired when the value changes (unit matches the unit prop, in storageCurrency) */
     oninput?: (val: number) => void;
     /** Input disabled state */
     disabled?: boolean;

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

@@ -1,9 +1,9 @@
 <!-- src/client/sdk/ui/src/features/config/CommandPalette.svelte -->
 <script lang="ts">
     import { onMount, tick } from "svelte";
-    import { getCommandStore, type Command } from "rune-lab/state";
-    import { getShortcutStore } from "rune-lab/state";
-    import { Icon } from "rune-lab/ui";
+    import { getCommandStore, type Command } from "@internal/state";
+    import { getShortcutStore } from "@internal/state";
+    import { Icon } from "../../../mod";
 
     let { shortcutKey = "shift+k" } = $props<{ shortcutKey?: string }>();
 

package/dist/ui/features/config/APP_CONFIGURATIONS.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Describes a single configuration dimension
+ * (e.g., theme, language, currency) for the generic selector system.
+ */
+export interface ConfigDimension {
+    /** Unique key matching the RUNE_LAB_CONTEXT key */
+    readonly key: string;
+    /** Key used to look up the ConfigStore from context */
+    readonly storeKey: string;
+    /** Property name used as the item identifier */
+    readonly idKey: string;
+    /** Emoji used for display / logging */
+    readonly icon: string;
+    /** Human-readable label for settings panels */
+    readonly label: string;
+}
+/**
+ * All built-in configuration dimensions.
+ * Used by `AppSettingSelector` and settings panels to enumerate available
+ * config pickers without hard-coding them.
+ *
+ * @example
+ * ```svelte
+ * {#each APP_CONFIGURATIONS as dim}
+ *   <ResourceSelector store={stores[dim.storeKey]} idKey={dim.idKey} ... />
+ * {/each}
+ * ```
+ */
+export declare const APP_CONFIGURATIONS: readonly ConfigDimension[];

package/dist/ui/features/config/APP_CONFIGURATIONS.js

@@ -0,0 +1,38 @@
+// sdk/ui/src/lib/features/config/APP_CONFIGURATIONS.ts
+// Single source of truth for all configuration dimensions.
+// Frozen at import time — must not be mutated at runtime.
+/**
+ * All built-in configuration dimensions.
+ * Used by `AppSettingSelector` and settings panels to enumerate available
+ * config pickers without hard-coding them.
+ *
+ * @example
+ * ```svelte
+ * {#each APP_CONFIGURATIONS as dim}
+ *   <ResourceSelector store={stores[dim.storeKey]} idKey={dim.idKey} ... />
+ * {/each}
+ * ```
+ */
+export const APP_CONFIGURATIONS = Object.freeze([
+    {
+        key: "theme",
+        storeKey: "theme",
+        idKey: "name",
+        icon: "🎨",
+        label: "Theme",
+    },
+    {
+        key: "language",
+        storeKey: "language",
+        idKey: "code",
+        icon: "🌍",
+        label: "Language",
+    },
+    {
+        key: "currency",
+        storeKey: "currency",
+        idKey: "code",
+        icon: "💰",
+        label: "Currency",
+    },
+]);