rune-lab 0.2.2 → 0.2.3

package/dist/state/createConfigStore.svelte.js

@@ -46,6 +46,16 @@ export function createConfigStore(options) {
             const targetId = id ?? this.current;
             return this.get(targetId)?.[prop];
         }
+        /**
+         * Append additional items (deduplicates by idKey)
+         */
+        addItems(newItems) {
+            for (const item of newItems) {
+                if (!this.get(item[idKey])) {
+                    this.available.push(item);
+                }
+            }
+        }
     }
     return new ConfigStore();
 }

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

@@ -9,11 +9,19 @@ export interface Currency {
     decimals: number;
 }
 import type { PersistenceDriver } from "rune-lab/core";
-export declare function createCurrencyStore(driver?: PersistenceDriver | (() => PersistenceDriver | undefined)): {
+export interface CurrencyStoreOptions {
+    driver?: PersistenceDriver | (() => PersistenceDriver | undefined);
+    /** Additional custom currencies to append to the built-in set */
+    customCurrencies?: Currency[];
+    /** Default currency code if no persisted value exists */
+    defaultCurrency?: string;
+}
+export declare function createCurrencyStore(driverOrOptions?: PersistenceDriver | (() => PersistenceDriver | undefined) | CurrencyStoreOptions): {
     current: string | number;
     available: Currency[];
     set(id: string | number): void;
     get(id: string | number): Currency | undefined;
     getProp<K extends keyof Currency>(prop: K, id?: string | number | undefined): Currency[K] | undefined;
+    addItems(newItems: Currency[]): void;
 };
 export declare function getCurrencyStore(): ConfigStore<Currency>;

package/dist/state/currency.svelte.js

@@ -4,26 +4,47 @@ import { RUNE_LAB_CONTEXT } from "./context";
 const CURRENCIES = [
     { code: "USD", symbol: "$", decimals: 2 },
     { code: "EUR", symbol: "€", decimals: 2 },
+    { code: "GBP", symbol: "£", decimals: 2 },
     { code: "MXN", symbol: "$", decimals: 2 },
+    { code: "CAD", symbol: "C$", decimals: 2 },
+    { code: "BRL", symbol: "R$", decimals: 2 },
+    { code: "INR", symbol: "₹", decimals: 2 },
     { code: "CNY", symbol: "¥", decimals: 2 },
     { code: "JPY", symbol: "¥", decimals: 0 },
     { code: "KRW", symbol: "₩", decimals: 0 },
     { code: "AED", symbol: "د.إ", decimals: 2 },
 ];
-export function createCurrencyStore(driver) {
-    return createConfigStore({
+export function createCurrencyStore(driverOrOptions) {
+    // Normalize overloaded argument
+    const opts = driverOrOptions && typeof driverOrOptions === "object" &&
+        "driver" in driverOrOptions
+        ? driverOrOptions
+        : {
+            driver: driverOrOptions,
+        };
+    const resolvedDriver = typeof opts.driver === "function"
+        ? opts.driver()
+        : opts.driver;
+    const store = createConfigStore({
         items: CURRENCIES,
         storageKey: "currency",
         displayName: "Currency",
         idKey: "code",
         icon: "💰",
-        driver: typeof driver === "function" ? driver() : driver,
+        driver: resolvedDriver,
     });
+    // Append custom currencies if provided
+    if (opts.customCurrencies?.length) {
+        store.addItems(opts.customCurrencies);
+    }
+    // Set default currency if provided and no persisted value found
+    if (!resolvedDriver?.get("currency") && opts.defaultCurrency) {
+        if (store.get(opts.defaultCurrency)) {
+            store.set(opts.defaultCurrency);
+        }
+    }
+    return store;
 }
 export function getCurrencyStore() {
     return getContext(RUNE_LAB_CONTEXT.currency);
 }
-// Usage:
-// currencyStore.set("USD")
-// currencyStore.getProp("symbol") // "$"
-// currencyStore.getProp("decimals") // 2

package/dist/state/index.d.ts

@@ -2,15 +2,18 @@ export { RUNE_LAB_CONTEXT } from "./context";
 export { useRuneLab } from "./composables/useRuneLab";
 export type { RuneLabContext } from "./composables/useRuneLab";
 export { usePersistence } from "./composables/usePersistence";
-export { cookieDriver, createInMemoryDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
+export { useMoney } from "./composables/useMoney";
+export { cookieDriver, createCookieDriver, createInMemoryDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
 export { type AppData, AppStore, createAppStore, getAppStore, } from "./app.svelte";
 export { createLayoutStore, getLayoutStore, LayoutStore, type NavigationItem, type NavigationSection, type WorkspaceItem, } from "./layout.svelte";
 export { ApiStore, type ConnectionState, createApiStore, getApiStore, } from "./api.svelte";
 export { createLanguageStore, getLanguageStore, type Language, } from "./language.svelte";
-export { createCurrencyStore, type Currency, getCurrencyStore, } from "./currency.svelte";
+export { createCurrencyStore, type Currency, type CurrencyStoreOptions, getCurrencyStore, } from "./currency.svelte";
 export { createToastStore, getToastStore, ToastStore } from "./toast.svelte";
 export { type Command, CommandStore, createCommandStore, getCommandStore, } from "./commands.svelte";
 export { createShortcutStore, getShortcutStore, LAYOUT_SHORTCUTS, type ShortcutEntry, shortcutListener, type ShortcutMeta, ShortcutStore, } from "./shortcuts.svelte";
-export { createThemeStore, getThemeStore, type Theme } from "./theme.svelte";
-export { type ConfigStore, createConfigStore, } from "./createConfigStore.svelte";
+export { createThemeStore, getThemeStore, type Theme, type ThemeStoreOptions, } from "./theme.svelte";
+export { type ConfigItem, type ConfigStore, type ConfigStoreOptions, createConfigStore, } from "./createConfigStore.svelte";
 export { createToastBridge, notify } from "./toast-bridge";
+export { type CartEntry, type CartStore, type CartStoreConfig, createCartStore, getCartStore, } from "./cart.svelte";
+export { type AuthConfig, createSessionStore, getSessionStore, type Session, SessionStore, type User, } from "./auth/index";

package/dist/state/index.js

@@ -5,8 +5,9 @@ export { RUNE_LAB_CONTEXT } from "./context";
 // ── Composables ───────────────────────────────────────────────────────────────
 export { useRuneLab } from "./composables/useRuneLab";
 export { usePersistence } from "./composables/usePersistence";
+export { useMoney } from "./composables/useMoney";
 // ── Persistence Drivers ───────────────────────────────────────────────────────
-export { cookieDriver, createInMemoryDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
+export { cookieDriver, createCookieDriver, createInMemoryDriver, inMemoryDriver, localStorageDriver, sessionStorageDriver, } from "./persistence/drivers";
 // Stores
 export { AppStore, createAppStore, getAppStore, } from "./app.svelte";
 export { createLayoutStore, getLayoutStore, LayoutStore, } from "./layout.svelte";
@@ -16,6 +17,9 @@ export { createCurrencyStore, getCurrencyStore, } from "./currency.svelte";
 export { createToastStore, getToastStore, ToastStore } from "./toast.svelte";
 export { CommandStore, createCommandStore, getCommandStore, } from "./commands.svelte";
 export { createShortcutStore, getShortcutStore, LAYOUT_SHORTCUTS, shortcutListener, ShortcutStore, } from "./shortcuts.svelte";
-export { createThemeStore, getThemeStore } from "./theme.svelte";
+export { createThemeStore, getThemeStore, } from "./theme.svelte";
 export { createConfigStore, } from "./createConfigStore.svelte";
 export { createToastBridge, notify } from "./toast-bridge";
+export { createCartStore, getCartStore, } from "./cart.svelte";
+// ── Auth ──────────────────────────────────────────────────────────────────────
+export { createSessionStore, getSessionStore, SessionStore, } from "./auth/index";

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

@@ -59,5 +59,6 @@ export declare function createLanguageStore(options?: LanguageStoreOptions): {
     set(id: string | undefined): void;
     get(id: string | undefined): Language | undefined;
     getProp<K extends keyof Language>(prop: K, id?: string | undefined): Language[K] | undefined;
+    addItems(newItems: Language[]): void;
 };
 export declare function getLanguageStore(): ConfigStore<Language>;

package/dist/state/persistence/drivers.d.ts

@@ -3,8 +3,10 @@ export declare function createInMemoryDriver(): PersistenceDriver;
 export declare const inMemoryDriver: PersistenceDriver;
 export declare const localStorageDriver: PersistenceDriver;
 export declare const sessionStorageDriver: PersistenceDriver;
-export declare const cookieDriver: (options?: {
+export declare const createCookieDriver: (options?: {
     path?: string;
     maxAge?: number;
     sameSite?: "Lax" | "Strict" | "None";
 }) => PersistenceDriver;
+/** Default cookie driver singleton (path='/') */
+export declare const cookieDriver: PersistenceDriver;

package/dist/state/persistence/drivers.js

@@ -42,7 +42,7 @@ export const sessionStorageDriver = {
         window.sessionStorage.removeItem(key);
     },
 };
-export const cookieDriver = (options = {}) => ({
+export const createCookieDriver = (options = {}) => ({
     get: (key) => {
         if (!browser)
             return null;
@@ -67,3 +67,7 @@ export const cookieDriver = (options = {}) => ({
         document.cookie = `${key}=; max-age=0; path=${options.path || "/"}`;
     },
 });
+/** Default cookie driver singleton (path='/') */
+export const cookieDriver = createCookieDriver({
+    path: "/",
+});

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

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

package/dist/state/theme.svelte.js

@@ -46,21 +46,47 @@ const THEMES = themeOrder.map((name) => ({
     icon: THEME_ICONS[name] ?? "🎨",
 }));
 import themeOrder from "daisyui/functions/themeOrder.js";
-export function createThemeStore(driver) {
-    return createConfigStore({
+import { BROWSER } from "esm-env";
+export function createThemeStore(driverOrOptions) {
+    // Normalize overloaded argument
+    const opts = driverOrOptions && typeof driverOrOptions === "object" &&
+        "driver" in driverOrOptions
+        ? driverOrOptions
+        : {
+            driver: driverOrOptions,
+        };
+    const resolvedDriver = typeof opts.driver === "function"
+        ? opts.driver()
+        : opts.driver;
+    const store = createConfigStore({
         items: THEMES,
         storageKey: "theme",
         displayName: "Theme",
         idKey: "name",
         icon: "🎨",
-        driver: typeof driver === "function" ? driver() : driver,
+        driver: resolvedDriver,
     });
+    // Append custom themes if provided
+    if (opts.customThemes?.length) {
+        store.addItems(opts.customThemes);
+    }
+    // System preference detection — only if no persisted value was loaded
+    if (!resolvedDriver?.get("theme") && BROWSER) {
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const systemDefault = prefersDark ? "dark" : "light";
+        const chosen = opts.defaultTheme ?? systemDefault;
+        if (store.get(chosen)) {
+            store.set(chosen);
+        }
+    }
+    else if (!resolvedDriver?.get("theme") && opts.defaultTheme) {
+        // SSR / non-browser: use defaultTheme if provided
+        if (store.get(opts.defaultTheme)) {
+            store.set(opts.defaultTheme);
+        }
+    }
+    return store;
 }
 export function getThemeStore() {
     return getContext(RUNE_LAB_CONTEXT.theme);
 }
-// Usage:
-// themeStore.set("dark")
-// themeStore.get("dark")
-// themeStore.getProp("icon") // gets icon of current theme
-// themeStore.getProp("icon", "dark") // gets icon of specific theme

package/dist/ui/components/Icon.svelte

@@ -3,8 +3,11 @@
   import { DEV } from "esm-env";
 
   /**
-   * Simple Icon component for Rune Lab
-   * Centralizes SVG paths to reduce boilerplate
+   * Simple Icon component for Rune Lab.
+   * Centralizes SVG paths to reduce boilerplate.
+   *
+   * ⚠️ SECURITY: `customIcons` values (from `appStore.customIcons` or the `icons` prop)
+   * are rendered as **unsanitized HTML** via `{@html}`. Only pass trusted SVG path strings.
    */
   let {
     name,

package/dist/ui/components/RuneProvider.svelte

@@ -10,11 +10,16 @@
         createLanguageStore,
         createCurrencyStore,
         createShortcutStore,
+        createCartStore,
+        createSessionStore,
+        type CartStoreConfig,
     } from "rune-lab/state";
     import type { PersistenceDriver } from "rune-lab/core";
     import { localStorageDriver } from "rune-lab/state";
     import { RUNE_LAB_CONTEXT } from "rune-lab/state";
     import type { AppData } from "rune-lab/state";
+    import type { Theme } from "rune-lab/state";
+    import type { Currency } from "rune-lab/state";
     import { CommandPalette, ShortcutPalette, Toaster } from "rune-lab/ui";
 
     export interface RuneLabConfig {
@@ -28,6 +33,30 @@
         locales?: readonly string[];
         onLanguageChange?: (code: string) => void;
         onThemeChange?: (name: string) => void;
+
+        // Theming (DaisyUI)
+        /** Additional custom themes to register alongside the built-in DaisyUI set */
+        customThemes?: Theme[];
+        /** Theme to use when no persisted value exists (after system preference detection) */
+        defaultTheme?: string;
+
+        // Currencies (Dinero.js)
+        /** Additional custom currencies to register */
+        currencies?: Currency[];
+        /** Default currency code when no persisted value exists */
+        defaultCurrency?: string;
+
+        // Cart (opt-in)
+        /** CartStore configuration — when provided, a CartStore is created and registered in context */
+        cart?: CartStoreConfig<any>;
+
+        // Auth (opt-in)
+        /** When true, creates and registers a SessionStore in context */
+        auth?: {
+            enabled?: boolean;
+            /** Callback when session changes (login, logout, expiry) */
+            onSessionChange?: (session: any) => void;
+        };
     }
 
     let { children, config = {} } = $props<{
@@ -46,13 +75,27 @@
         () => config.persistence ?? localStorageDriver,
     );
     const initialLocales = untrack(() => config.locales);
-
-    const themeStore = createThemeStore(initialPersistence);
+    const initialCustomThemes = untrack(() => config.customThemes);
+    const initialDefaultTheme = untrack(() => config.defaultTheme);
+    const initialCustomCurrencies = untrack(() => config.currencies);
+    const initialDefaultCurrency = untrack(() => config.defaultCurrency);
+    const initialCartConfig = untrack(() => config.cart);
+    const initialAuthConfig = untrack(() => config.auth);
+
+    const themeStore = createThemeStore({
+        driver: initialPersistence,
+        customThemes: initialCustomThemes,
+        defaultTheme: initialDefaultTheme,
+    });
     const languageStore = createLanguageStore({
         driver: initialPersistence,
         locales: initialLocales,
     });
-    const currencyStore = createCurrencyStore(initialPersistence);
+    const currencyStore = createCurrencyStore({
+        driver: initialPersistence,
+        customCurrencies: initialCustomCurrencies,
+        defaultCurrency: initialDefaultCurrency,
+    });
     const shortcutStore = createShortcutStore();
 
     // 2. Initialize Complex Stores (Dependency Injection)
@@ -66,7 +109,7 @@
         currencyStore,
     });
 
-    // 3. Provide Contexts
+    // 3. Provide Core Contexts
     setContext(RUNE_LAB_CONTEXT.app, appStore);
     setContext(RUNE_LAB_CONTEXT.api, apiStore);
     setContext(RUNE_LAB_CONTEXT.toast, toastStore);
@@ -78,6 +121,18 @@
     setContext(RUNE_LAB_CONTEXT.commands, commandStore);
     setContext(RUNE_LAB_CONTEXT.persistence, initialPersistence);
 
+    // 4. Opt-in: CartStore (C-01 FIX)
+    if (initialCartConfig) {
+        const cartStore = createCartStore(initialCartConfig);
+        setContext(RUNE_LAB_CONTEXT.cart, cartStore);
+    }
+
+    // 5. Opt-in: SessionStore (C-02 FIX)
+    if (initialAuthConfig && initialAuthConfig.enabled !== false) {
+        const sessionStore = createSessionStore();
+        setContext(RUNE_LAB_CONTEXT.session, sessionStore);
+    }
+
     const initialDictionary = untrack(() => config.dictionary);
     if (initialDictionary) {
         setContext("rl:dictionary", initialDictionary);

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

@@ -1,6 +1,9 @@
 import { type Snippet } from "svelte";
+import { type CartStoreConfig } from "rune-lab/state";
 import type { PersistenceDriver } from "rune-lab/core";
 import type { AppData } from "rune-lab/state";
+import type { Theme } from "rune-lab/state";
+import type { Currency } from "rune-lab/state";
 export interface RuneLabConfig {
     persistence?: PersistenceDriver;
     app?: Partial<AppData>;
@@ -12,6 +15,22 @@ export interface RuneLabConfig {
     locales?: readonly string[];
     onLanguageChange?: (code: string) => void;
     onThemeChange?: (name: string) => void;
+    /** Additional custom themes to register alongside the built-in DaisyUI set */
+    customThemes?: Theme[];
+    /** Theme to use when no persisted value exists (after system preference detection) */
+    defaultTheme?: string;
+    /** Additional custom currencies to register */
+    currencies?: Currency[];
+    /** Default currency code when no persisted value exists */
+    defaultCurrency?: string;
+    /** CartStore configuration — when provided, a CartStore is created and registered in context */
+    cart?: CartStoreConfig<any>;
+    /** When true, creates and registers a SessionStore in context */
+    auth?: {
+        enabled?: boolean;
+        /** Callback when session changes (login, logout, expiry) */
+        onSessionChange?: (session: any) => void;
+    };
 }
 type $$ComponentProps = {
     children: Snippet;

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

@@ -0,0 +1,59 @@
+<!--
+  MoneyDisplay — Renders a monetary amount with locale-aware formatting.
+  Uses CurrencyStore + LanguageStore from context for defaults.
+  Zero domain knowledge.
+-->
+<script module lang="ts">
+    export interface MoneyDisplayProps {
+        /** Amount in minor units (e.g., 15000 = $150.00 for USD) */
+        amount: number;
+        /** Override currency code (defaults to CurrencyStore.current) */
+        currency?: string;
+        /** Override locale (defaults to LanguageStore.current) */
+        locale?: string;
+        /** Use compact notation (e.g., $150K) */
+        compact?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    import { getLanguageStore, getCurrencyStore } from "rune-lab/state";
+    import { formatAmount } from "rune-lab/core";
+
+    let {
+        amount,
+        currency,
+        locale,
+        compact = false,
+    }: MoneyDisplayProps = $props();
+
+    const currencyStore = getCurrencyStore();
+    const languageStore = getLanguageStore();
+
+    const resolvedCurrency = $derived(
+        currency ?? String(currencyStore.current),
+    );
+
+    const resolvedLocale = $derived(
+        locale ?? (String(languageStore.current) || "en"),
+    );
+
+    // M-02 FIX: Derive decimals from the RESOLVED currency, not the store's current
+    const currencyMeta = $derived(currencyStore.get(resolvedCurrency));
+    const decimals = $derived(currencyMeta?.decimals ?? 2);
+
+    const formatted = $derived.by(() => {
+        if (compact) {
+            const majorUnits = amount / Math.pow(10, decimals);
+            return new Intl.NumberFormat(resolvedLocale, {
+                style: "currency",
+                currency: resolvedCurrency,
+                notation: "compact",
+                maximumFractionDigits: 1,
+            }).format(majorUnits);
+        }
+        return formatAmount(amount, resolvedCurrency, resolvedLocale);
+    });
+</script>
+
+<data value={amount} class="rl-money-display tabular-nums">{formatted}</data>

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

@@ -0,0 +1,13 @@
+export interface MoneyDisplayProps {
+    /** Amount in minor units (e.g., 15000 = $150.00 for USD) */
+    amount: number;
+    /** Override currency code (defaults to CurrencyStore.current) */
+    currency?: string;
+    /** Override locale (defaults to LanguageStore.current) */
+    locale?: string;
+    /** Use compact notation (e.g., $150K) */
+    compact?: boolean;
+}
+declare const MoneyDisplay: import("svelte").Component<MoneyDisplayProps, {}, "">;
+type MoneyDisplay = ReturnType<typeof MoneyDisplay>;
+export default MoneyDisplay;

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

@@ -0,0 +1,106 @@
+<!--
+  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">
+    export interface MoneyInputProps {
+        /** Current value in minor units (e.g., 15000 = $150.00) */
+        value?: number;
+        /** Override currency code (defaults to CurrencyStore.current) */
+        currency?: string;
+        /** Minimum value in minor units */
+        min?: number;
+        /** Maximum value in minor units */
+        max?: number;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Fired when the value changes (in minor units) */
+        oninput?: (cents: number) => void;
+        /** Input disabled state */
+        disabled?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    import { getCurrencyStore } from "rune-lab/state";
+
+    let {
+        value = 0,
+        currency,
+        min,
+        max,
+        placeholder = "0.00",
+        oninput,
+        disabled = false,
+    }: MoneyInputProps = $props();
+
+    const currencyStore = getCurrencyStore();
+
+    const resolvedCurrency = $derived(
+        currency ?? String(currencyStore.current),
+    );
+
+    // M-02 parallel: derive symbol/decimals from resolved currency, not store current
+    const currencyMeta = $derived(currencyStore.get(resolvedCurrency));
+    const symbol = $derived(currencyMeta?.symbol ?? "$");
+    const decimals = $derived(currencyMeta?.decimals ?? 2);
+
+    // Convert minor units → display string
+    const displayValue = $derived.by(() => {
+        if (decimals === 0) return String(value);
+        const divisor = Math.pow(10, decimals);
+        return (value / divisor).toFixed(decimals);
+    });
+
+    /**
+     * M-03 FIX: Parse user input to minor units using string-based integer parsing
+     * to avoid floating-point precision traps (e.g., 1.005 * 100 = 100.49999...)
+     */
+    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;
+
+        if (min !== undefined) cents = Math.max(cents, min);
+        if (max !== undefined) cents = Math.min(cents, max);
+
+        value = cents;
+        oninput?.(cents);
+    }
+</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

@@ -0,0 +1,19 @@
+export interface MoneyInputProps {
+    /** Current value in minor units (e.g., 15000 = $150.00) */
+    value?: number;
+    /** Override currency code (defaults to CurrencyStore.current) */
+    currency?: string;
+    /** Minimum value in minor units */
+    min?: number;
+    /** Maximum value in minor units */
+    max?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Fired when the value changes (in minor units) */
+    oninput?: (cents: number) => void;
+    /** Input disabled state */
+    disabled?: boolean;
+}
+declare const MoneyInput: import("svelte").Component<MoneyInputProps, {}, "">;
+type MoneyInput = ReturnType<typeof MoneyInput>;
+export default MoneyInput;

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

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

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

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