rune-lab 0.3.1 → 0.4.1

package/src/runes/layout/src/theme.svelte.ts

@@ -0,0 +1,73 @@
+// @ts-nocheck: legacy daisyui imports and complex ConfigStore typing
+// client/packages/ui/src/state/theme-config.svelte.ts
+
+import { createConfigStore, getThemeStore } from "@rune-lab/kernel";
+import type { Theme } from "@rune-lab/kernel";
+import { BROWSER } from "esm-env";
+
+export type { Theme };
+
+// Icon map for known themes - unknown ones fall back to 🎨
+const THEME_ICONS: Record<string, string> = {
+  light: "🌞",
+  dark: "🌙",
+  cupcake: "🧁",
+  bumblebee: "🐝",
+  emerald: "💚",
+  corporate: "🏢",
+  synthwave: "🌆",
+  retro: "📺",
+  cyberpunk: "🤖",
+  valentine: "💝",
+  halloween: "🎃",
+  garden: "🌷",
+  forest: "🌲",
+  aqua: "💧",
+  lofi: "🎵",
+  pastel: "🎨",
+  fantasy: "🔮",
+  wireframe: "📝",
+  black: "⚫",
+  luxury: "👑",
+  dracula: "🧛",
+  cmyk: "🖨️",
+  autumn: "🍂",
+  business: "💼",
+  acid: "🧪",
+  lemonade: "🍋",
+  night: "🌃",
+  coffee: "☕",
+  winter: "❄️",
+  dim: "🔅",
+  nord: "🧊",
+  sunset: "🌅",
+  caramellatte: "🍮",
+  abyss: "🌌",
+  silk: "🎀",
+};
+
+const THEMES: Theme[] = Object.keys(THEME_ICONS).map((name: string) => ({
+  name,
+  icon: THEME_ICONS[name] ?? "🎨",
+}));
+
+export const themeStore: ConfigStore<Theme> = createConfigStore<Theme>({
+  items: THEMES,
+  storageKey: "theme",
+  displayName: "Theme",
+  idKey: "name",
+  icon: "🎨",
+});
+
+// System preference detection — only if no persisted value was loaded
+if (!themeStore.current && BROWSER) {
+  const prefersDark =
+    globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
+  const systemDefault = prefersDark ? "dark" : "light";
+  if (themeStore.get(systemDefault as never)) {
+    themeStore.set(systemDefault as never);
+  }
+}
+
+export type ThemeStore = ReturnType<typeof createConfigStore<Theme>>;
+export { getThemeStore };

package/src/runes/layout/src/types.ts

@@ -0,0 +1,11 @@
+// sdk/core/src/layout/types.ts
+// Framework-agnostic layout configuration types.
+// No Svelte dependency — `component` is typed as `unknown` (resolved by sdk/ui).
+
+export type { LayoutConfig, LayoutZone } from "@rune-lab/kernel";
+
+/**
+ * Standard layout shortcuts
+ * Re-exported from kernel
+ */
+export { LAYOUT_SHORTCUTS } from "@rune-lab/kernel";

package/src/runes/palettes/deno.json

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

package/{dist/ui/features/command-palette → src/runes/palettes/src/commands}/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 { tick } from "svelte";
+    import { getCommandStore, type Command } from "@rune-lab/kernel";
+    import { getShortcutStore } from "@rune-lab/kernel";
+    import { Icon } from "../../../layout/src/mod.ts";
 
     let { shortcutKey = "shift+k" } = $props<{ shortcutKey?: string }>();
 

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

@@ -0,0 +1,2 @@
+export * from "./store.svelte.ts";
+export { default as CommandPalette } from "./CommandPalette.svelte";

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 "rune-lab/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 "rune-lab/state";
+    import type { ShortcutEntry } from "@rune-lab/kernel";
     import {
         getAppStore,
         getShortcutStore,
         LAYOUT_SHORTCUTS,
-    } from "rune-lab/state";
-    import { Icon } from "rune-lab/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/src/runes/plugins/money/src/CurrencySelector.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { ResourceSelector } from "@rune-lab/layout";
+    import { getCurrencyStore } from "@rune-lab/kernel";
+
+    const currencyStore = getCurrencyStore();
+
+    let {
+        codes = [],
+        current = $bindable(String(currencyStore.current)),
+        onchange,
+    }: {
+        codes?: string[];
+        current?: string;
+        onchange?: (value: string) => void;
+    } = $props();
+</script>
+
+<ResourceSelector
+    store={currencyStore}
+    idKey="code"
+    filterKeys={codes}
+    {onchange}
+>
+    {#snippet triggerLabel(active)}
+        <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>{c.code}</span>
+        </button>
+    {/snippet}
+</ResourceSelector>