rune-lab 0.4.0 → 0.4.1

package/src/runes/palettes/src/commands/store.svelte.ts

@@ -0,0 +1,80 @@
+import { getCommandStore } from "@rune-lab/kernel";
+import type { Command, ConfigStore, IToastStore } from "@rune-lab/kernel";
+
+export type { Command };
+
+export interface CommandServices {
+  appStore: unknown;
+  apiStore: unknown;
+  toastStore: IToastStore;
+  themeStore: ConfigStore<unknown>;
+  languageStore: ConfigStore<unknown>;
+  currencyStore: ConfigStore<unknown>;
+}
+
+export class CommandStore {
+  // Dependency Injection
+  #services: CommandServices;
+
+  constructor(services: CommandServices) {
+    this.#services = services;
+    this.refreshDefaultCommands();
+  }
+
+  commands: Command[] = $state<Command[]>([]);
+
+  refreshDefaultCommands(): void {
+    // Intentionally empty.
+    this.commands = [];
+  }
+
+  /**
+   * Register a new command
+   */
+  register(command: Command): void {
+    if (this.commands.find((c) => c.id === command.id)) return;
+    this.commands.push(command);
+  }
+
+  /**
+   * Remove a command by id
+   */
+  unregister(id: string): void {
+    this.commands = this.commands.filter((c) => c.id !== id);
+  }
+
+  /**
+   * Search commands, optionally scoped to a parent's children
+   */
+  search(query: string, parentId?: string): Command[] {
+    const targetList = parentId
+      ? (this.#findById(parentId, this.commands)?.children ?? [])
+      : this.commands;
+
+    if (!query) return targetList;
+
+    const q = query.toLowerCase();
+    return targetList.filter(
+      (c) =>
+        c.label.toLowerCase().includes(q) ||
+        c.category?.toLowerCase().includes(q),
+    );
+  }
+
+  #findById(id: string, list: Command[]): Command | undefined {
+    for (const cmd of list) {
+      if (cmd.id === id) return cmd;
+      if (cmd.children) {
+        const found = this.#findById(id, cmd.children);
+        if (found) return found;
+      }
+    }
+    return undefined;
+  }
+}
+
+export function createCommandStore(services: CommandServices): CommandStore {
+  return new CommandStore(services);
+}
+
+export { getCommandStore };

package/src/runes/palettes/src/mod.ts

@@ -0,0 +1,51 @@
+import { defineRune, RUNE_LAB_CONTEXT } from "@rune-lab/kernel";
+import type { ConfigStore, RunePlugin } from "@rune-lab/kernel";
+import { createCommandStore } from "./commands/store.svelte.ts";
+import { createShortcutStore } from "./shortcuts/store.svelte.ts";
+import { createToastStore } from "./notifications/store.svelte.ts";
+import type { ToastStore } from "./notifications/store.svelte.ts";
+import CommandPalette from "./commands/CommandPalette.svelte";
+import ShortcutPalette from "./shortcuts/ShortcutPalette.svelte";
+import Toaster from "./notifications/Toaster.svelte";
+
+export * from "./commands/mod.ts";
+export * from "./shortcuts/mod.ts";
+export * from "./notifications/mod.ts";
+
+/**
+ * Palettes Plugin — provides the command palette, shortcut manager, and toast system.
+ * Always included by default in RuneProvider.
+ */
+export const PalettesPlugin: RunePlugin = defineRune({
+  id: "rune-lab.palettes",
+  stores: [
+    {
+      id: "commands",
+      contextKey: RUNE_LAB_CONTEXT.commands,
+      factory: (_config, _driver, stores) =>
+        createCommandStore({
+          appStore: stores.get("app"),
+          apiStore: stores.get("api"),
+          toastStore: stores.get("toast") as ToastStore,
+          themeStore: stores.get("theme") as ConfigStore<unknown>,
+          languageStore: stores.get("language") as ConfigStore<unknown>,
+          currencyStore: stores.get("currency") as ConfigStore<unknown>,
+        }),
+      dependsOn: ["app", "api", "toast", "theme", "language", "currency"],
+      noPersistence: true,
+    },
+    {
+      id: "shortcut",
+      contextKey: RUNE_LAB_CONTEXT.shortcut,
+      factory: () => createShortcutStore(),
+      noPersistence: true,
+    },
+    {
+      id: "toast",
+      contextKey: RUNE_LAB_CONTEXT.toast,
+      factory: () => createToastStore(),
+      noPersistence: true,
+    },
+  ],
+  overlays: [CommandPalette, ShortcutPalette, Toaster],
+});

package/{dist/ui/components → src/runes/palettes/src/notifications}/Toaster.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getToastStore } from "@internal/state";
-  import { portal } from "../actions/portal";
+  import { getToastStore, portal } from "@rune-lab/kernel";
   import { flip } from "svelte/animate";
   import { fade, fly } from "svelte/transition";
 

package/src/runes/palettes/src/notifications/bridge.ts

@@ -0,0 +1,56 @@
+import type { ToastStore, ToastType } from "./store.svelte.ts";
+
+interface QueuedToast {
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+const queue: QueuedToast[] = [];
+let activeStore: ToastStore | null = null;
+
+/**
+ * Notifies the global toast system.
+ * If called before the ToastStore is initialized (e.g., in a module-level store),
+ * it queues the toast and flushes it once wired.
+ *
+ * @clientOnly — Not safe for use in SSR contexts. Module-level state persists across requests.
+ */
+export function notify(
+  message: string,
+  type: ToastType = "info",
+  duration?: number,
+) {
+  if (typeof window === "undefined") return; // No-op on server
+
+  if (activeStore) {
+    activeStore.send(message, type, duration ?? 3000);
+  } else {
+    queue.push({ message, type, duration });
+  }
+}
+
+/**
+ * Wires the global `notify` function to an active ToastStore instance.
+ * Automatically flushes any queued toasts.
+ */
+export function wire(store: ToastStore) {
+  activeStore = store;
+  while (queue.length > 0) {
+    const next = queue.shift();
+    if (next) store.send(next.message, next.type, next.duration ?? 3000);
+  }
+}
+
+/**
+ * Escape hatch for module-level stores to send toasts without Svelte context.
+ *
+ * @example
+ * ```ts
+ * import { createToastBridge } from "rune-lab";
+ * const { notify } = createToastBridge();
+ *
+ * notify("Logged in successfully", "success");
+ * ```
+ */
+export const createToastBridge = () => ({ notify, wire });

package/src/runes/palettes/src/notifications/mod.ts

@@ -0,0 +1,4 @@
+export * from "./store.svelte.ts";
+export * from "./bridge.ts";
+export { default as Toaster } from "./Toaster.svelte";
+export { default as NotificationBell } from "./NotificationBell.svelte";

package/src/runes/palettes/src/notifications/store.svelte.ts

@@ -0,0 +1,58 @@
+/**
+ * Toast notification store
+ */
+import { getToastStore } from "@rune-lab/kernel";
+import type { Toast, ToastType } from "@rune-lab/kernel";
+
+export type { Toast, ToastType };
+
+export class ToastStore {
+  toasts: Toast[] = $state<Toast[]>([]);
+
+  /**
+   * Add a new toast
+   */
+  send(
+    message: string,
+    type: ToastType = "info",
+    duration: number = 3000,
+  ): void {
+    const id = crypto.randomUUID();
+    const toast: Toast = { id, message, type, duration };
+
+    this.toasts.push(toast);
+
+    if (duration > 0) {
+      setTimeout(() => {
+        this.dismiss(id);
+      }, duration);
+    }
+  }
+
+  /**
+   * Remove a toast by id
+   */
+  dismiss(id: string): void {
+    this.toasts = this.toasts.filter((t) => t.id !== id);
+  }
+
+  // Helper methods
+  success(msg: string): void {
+    this.send(msg, "success");
+  }
+  error(msg: string): void {
+    this.send(msg, "error");
+  }
+  warn(msg: string): void {
+    this.send(msg, "warning");
+  }
+  info(msg: string): void {
+    this.send(msg, "info");
+  }
+}
+
+export function createToastStore(): ToastStore {
+  return new ToastStore();
+}
+
+export { getToastStore };

package/{dist/ui/features → src/runes/palettes/src}/shortcuts/ShortcutPalette.svelte

@@ -1,13 +1,12 @@
 <!-- src/lib/features/shortcuts/ShortcutPalette.svelte -->
 <script lang="ts">
     import { tick } from "svelte";
-    import type { ShortcutEntry } from "@internal/state";
+    import type { ShortcutEntry } from "@rune-lab/kernel";
     import {
         getAppStore,
         getShortcutStore,
         LAYOUT_SHORTCUTS,
-    } from "@internal/state";
-    import { Icon } from "@internal/ui";
+    } from "@rune-lab/kernel";
 
     const appStore = getAppStore();
     const shortcutStore = getShortcutStore();
@@ -119,7 +118,8 @@
             class="border-b border-base-200 p-6 flex items-center gap-4 bg-base-200/30"
         >
             <div class="p-2 bg-primary/10 rounded-lg text-primary">
-                <Icon name="shortcut" class="w-6 h-6" />
+                <!-- <Icon name="shortcut" class="w-6 h-6" /> -->
+                <!-- todo: Add Shortcut Icon -->
             </div>
             <div class="flex-1">
                 <h2 class="text-xl font-bold tracking-tight">

package/src/runes/palettes/src/shortcuts/mod.ts

@@ -0,0 +1,4 @@
+export * from "./types.ts";
+export * from "./store.svelte.ts";
+export * from "./useShortcuts.ts";
+export { default as ShortcutPalette } from "./ShortcutPalette.svelte";

package/src/runes/palettes/src/shortcuts/store.svelte.ts

@@ -0,0 +1,85 @@
+import { untrack } from "svelte";
+import { getShortcutStore, shortcutListener } from "@rune-lab/kernel";
+import type { ShortcutConfig, ShortcutEntry } from "@rune-lab/kernel";
+
+export type { ShortcutConfig, ShortcutEntry };
+
+export class ShortcutStore {
+  entries: ShortcutEntry[] = $state<ShortcutEntry[]>([]);
+  showPalette: boolean = $state(false);
+
+  /**
+   * Filtered list of entries active in the current scope
+   */
+  active: ShortcutEntry[] = $derived(
+    this.entries.filter((e) => e.enabled !== false),
+  );
+
+  /**
+   * Grouped view for documentation/palette
+   */
+  byScopeAndCategory: Record<string, Record<string, ShortcutEntry[]>> = $derived
+    .by(() => {
+      const groups: Record<string, Record<string, ShortcutEntry[]>> = {};
+      for (const entry of this.entries) {
+        const scope = entry.scope ?? "global";
+        const category = entry.category ?? "General";
+        if (!groups[scope]) groups[scope] = {};
+        if (!groups[scope][category]) groups[scope][category] = [];
+        groups[scope][category].push(entry);
+      }
+      return groups;
+    });
+
+  /**
+   * Scopes sorted for palette display
+   */
+  sortedScopes: string[] = $derived.by(() => {
+    const scopes = Object.keys(this.byScopeAndCategory).sort((a, b) => {
+      if (a === "global") return -1;
+      if (b === "global") return 1;
+      if (a === "layout") return -1;
+      if (b === "layout") return 1;
+      return a.localeCompare(b);
+    });
+    return scopes;
+  });
+
+  /**
+   * Register a single shortcut or an array
+   */
+  register(entry: ShortcutEntry): void {
+    if (this.entries.find((e) => e.id === entry.id)) return;
+    this.entries.push({ ...entry, enabled: true });
+  }
+
+  /**
+   * Remove shortcut by ID
+   */
+  unregister(id: string): void {
+    this.entries = this.entries.filter((e) => e.id !== id);
+  }
+
+  /**
+   * Enable/Disable a shortcut
+   */
+  setEnabled(id: string, enabled: boolean): void {
+    const entry = this.entries.find((e) => e.id === id);
+    if (entry) entry.enabled = enabled;
+  }
+
+  /**
+   * Find conflicts for a given key combo and scope
+   */
+  findConflicts(keys: string, scope: string): ShortcutEntry[] {
+    return untrack(() =>
+      this.entries.filter((e) => e.keys === keys && e.scope === scope)
+    );
+  }
+}
+
+export function createShortcutStore(): ShortcutStore {
+  return new ShortcutStore();
+}
+
+export { getShortcutStore, shortcutListener };

package/src/runes/palettes/src/shortcuts/types.ts

@@ -0,0 +1,4 @@
+// sdk/core/src/shortcuts/types.ts
+// Framework-agnostic shortcut configuration types.
+
+export type { ShortcutConfig } from "@rune-lab/kernel";

package/src/runes/palettes/src/shortcuts/useShortcuts.ts

@@ -0,0 +1,85 @@
+// sdk/state/src/composables/useShortcuts.ts
+// Declarative shortcut registration with automatic lifecycle cleanup.
+// Bridges ShortcutConfig (sdk/core) → ShortcutStore (sdk/state).
+
+import { getShortcutStore } from "./store.svelte.ts";
+import type { ShortcutEntry } from "./store.svelte.ts";
+import type { ShortcutConfig } from "./types.ts";
+
+/**
+ * Declarative shortcut registration composable.
+ * Registers all shortcuts via ShortcutStore in a single `$effect` and
+ * automatically unregisters them when the component is destroyed.
+ *
+ * Must be called at component initialization time (top-level in `<script>`),
+ * not inside event handlers.
+ *
+ * @param configs - Array of ShortcutConfig
+ * @returns Object with `registered` getter for the list of registered IDs
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useShortcuts } from '@rune-lab/palettes';
+ *
+ *   useShortcuts([
+ *     {
+ *       id: "save:document",
+ *       keys: "ctrl+s",
+ *       handler: (e) => { e.preventDefault(); save(); },
+ *       label: "Save document",
+ *       category: "Editing",
+ *     },
+ *   ]);
+ * </script>
+ * ```
+ */
+export function useShortcuts(
+  configs: ShortcutConfig[],
+): { readonly registered: string[] } {
+  const shortcutStore = getShortcutStore();
+
+  // Convert ShortcutConfig[] to ShortcutEntry[] respecting the `when` predicate
+  function toEntries(configs: ShortcutConfig[]): ShortcutEntry[] {
+    return configs.map((config) => ({
+      id: config.id,
+      keys: config.keys,
+      handler: (event: KeyboardEvent) => {
+        // Check `when` predicate before firing
+        if (config.when && !config.when()) return;
+        config.handler(event);
+      },
+      label: config.label ?? config.id,
+      category: config.category ?? "General",
+      scope: config.scope ?? "global",
+      enabled: true,
+      hidden: !config.label, // Hide from palette if no label
+    }));
+  }
+
+  // Register all shortcuts
+  const entries = toEntries(configs);
+  const ids = entries.map((e) => e.id);
+
+  for (const entry of entries) {
+    shortcutStore.register(entry);
+  }
+
+  // Auto-cleanup using $effect.root for lifecycle management
+  $effect(() => {
+    // This effect runs on mount — shortcuts are already registered above.
+    // Return cleanup that unregisters all shortcuts on destroy.
+    return () => {
+      for (const id of ids) {
+        shortcutStore.unregister(id);
+      }
+    };
+  });
+
+  return {
+    /** IDs of all shortcuts registered by this composable */
+    get registered(): string[] {
+      return ids;
+    },
+  };
+}

package/src/runes/plugins/money/deno.json

@@ -0,0 +1,8 @@
+{
+  "name": "@rune-lab/money",
+  "version": "0.1.0",
+  "exports": "./src/mod.ts",
+  "imports": {
+    "dinero.js": "npm:dinero.js"
+  }
+}

package/{dist/ui/features/config → src/runes/plugins/money/src}/CurrencySelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import ResourceSelector from "./ResourceSelector.svelte";
-    import { getCurrencyStore } from "@internal/state";
+    import { ResourceSelector } from "@rune-lab/layout";
+    import { getCurrencyStore } from "@rune-lab/kernel";
 
     const currencyStore = getCurrencyStore();
 

package/{dist/ui/components/money → src/runes/plugins/money/src}/MoneyDisplay.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { getLanguageStore, getCurrencyStore } from "@internal/state";
+    import { getLanguageStore, getCurrencyStore } from "@rune-lab/kernel";
     import {
         formatAmount,
         toMinorUnit,
         type ISO4217Code,
         MoneyPrimitive,
-    } from "@internal/core";
+    } from "@rune-lab/money";
     import { DEV } from "esm-env";
 
     let {

package/{dist/ui/components/money → src/runes/plugins/money/src}/MoneyInput.svelte

@@ -1,10 +1,6 @@
-<!--
-  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 "@internal/core";
-    import { MoneyPrimitive } from "@internal/core";
+    import type { ISO4217Code } from "@rune-lab/money";
+    import { MoneyPrimitive } from "@rune-lab/money";
 
     export interface MoneyInputProps {
         /** Current value in minor or major units (see unit prop) */
@@ -38,8 +34,8 @@
 </script>
 
 <script lang="ts">
-    import { getCurrencyStore } from "@internal/state";
-    import { toMinorUnit } from "@internal/core";
+    import { getCurrencyStore } from "@rune-lab/kernel";
+    import { toMinorUnit } from "@rune-lab/money";
     import { DEV } from "esm-env";
 
     let {

package/src/runes/plugins/money/src/currency.svelte.ts

@@ -0,0 +1,95 @@
+import {
+  type ConfigStore,
+  createConfigStore,
+  getCurrencyStore,
+} from "@rune-lab/kernel";
+import type { Currency } from "@rune-lab/kernel";
+import { type DineroCurrency, registerCurrency } from "@rune-lab/money";
+import type { ExchangeRateStore } from "./exchange-rate.svelte.ts";
+
+export type { Currency };
+
+/**
+ * Helper to build a minimal Dinero definition from Currency metadata.
+ * Assumes base 10 (standard decimal) for auto-registration.
+ */
+function buildDineroDef(meta: Currency) {
+  return {
+    code: meta.code,
+    base: 10,
+    exponent: meta.decimals,
+  };
+}
+
+const CURRENCIES: Currency[] = [
+  { 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 },
+] as const;
+
+const baseStore: ConfigStore<Currency> = createConfigStore<Currency>({
+  items: CURRENCIES,
+  storageKey: "currency",
+  displayName: "Currency",
+  idKey: "code",
+  icon: "💰",
+});
+
+// We hold a reference to exchangeRateStore if configured later
+let _exchangeRateStore: ExchangeRateStore | undefined;
+export function setExchangeRateStore(store: ExchangeRateStore) {
+  _exchangeRateStore = store;
+}
+
+/**
+ * Extension: Atomic currency registration.
+ * Updates both the Dinero registry (core) and the reactive store (UI).
+ *
+ * @remarks Custom currencies with non-decimal base systems must use
+ * registerCurrency() from @rune-lab/kernel explicitly before addItems().
+ */
+function addCurrency(meta: Currency, dineroDef?: unknown) {
+  const def = dineroDef || buildDineroDef(meta);
+  registerCurrency(meta.code, def as DineroCurrency<number>);
+  baseStore.addItems([meta]);
+}
+
+/**
+ * Converts an amount from one currency to another.
+ * Defaults to converting to the current store currency.
+ */
+function convertAmount(
+  amount: number,
+  fromCode: string,
+  toCode?: string,
+): number {
+  const target = toCode ?? String((baseStore as ConfigStore<Currency>).current);
+  if (fromCode === target) return amount;
+  if (!_exchangeRateStore || !_exchangeRateStore.hasRates) return amount;
+
+  return _exchangeRateStore.convertAmount(amount, fromCode, target);
+}
+
+export const currencyStore: ConfigStore<Currency> & {
+  addCurrency: typeof addCurrency;
+  convertAmount: typeof convertAmount;
+  readonly canConvert: boolean;
+} = Object.assign(baseStore, {
+  addCurrency,
+  convertAmount,
+  get canConvert() {
+    return !!_exchangeRateStore?.hasRates;
+  },
+});
+
+export type CurrencyStore = typeof currencyStore;
+
+export { getCurrencyStore };

package/src/runes/plugins/money/src/currency.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vite-plus/test";
+import { currencyStore } from "./currency.svelte.ts";
+
+describe("Currency Store", () => {
+  it("should have prototype methods from ConfigStore", () => {
+    // These come from the ConfigStore class prototype
+    expect(typeof currencyStore.get).toBe("function");
+    expect(typeof currencyStore.set).toBe("function");
+    expect(typeof currencyStore.getProp).toBe("function");
+    expect(typeof currencyStore.addItems).toBe("function");
+
+    // These are instance properties
+    expect(currencyStore.current).toBeDefined();
+    expect(Array.isArray(currencyStore.available)).toBe(true);
+
+    // This is the extension method
+    expect(typeof currencyStore.addCurrency).toBe("function");
+  });
+
+  it("should correctly use prototype methods", () => {
+    const usd = currencyStore.get("USD" as never);
+
+    expect(usd).toBeDefined();
+    expect(usd?.code).toBe("USD");
+    expect(usd?.symbol).toBe("$");
+  });
+
+  it("should add a new currency and keep methods", () => {
+    currencyStore.addCurrency({ code: "BTC", symbol: "₿", decimals: 8 });
+
+    const btc = currencyStore.get("BTC" as never);
+    expect(btc).toBeDefined();
+    expect(btc?.code).toBe("BTC");
+    expect(btc?.decimals).toBe(8);
+
+    // Methods still exist after interaction
+    expect(typeof currencyStore.get).toBe("function");
+    expect(typeof currencyStore.set).toBe("function");
+  });
+});