rune-lab 0.4.2-beta.1 → 0.4.2-beta.2

package/.gitignore

@@ -0,0 +1,12 @@
+# all that start with a dot except .gitignore
+.*
+!.gitignore
+
+# lock files (from various package managers)
+*.lock
+
+# web-generated files
+node_modules
+dist
+lab
+build

package/deno.json

@@ -1,13 +1,50 @@
 {
   "name": "@yrrrrrf/rune-lab",
-  "version": "0.4.2-beta.1",
+  "version": "0.4.2-beta.2",
   "description": "Modern toolkit for Svelte 5 Runes applications.",
+  "type": "module",
   "license": "MIT",
-  "exports": {
-    ".": "./src/mod.ts"
-  },
+  "readme": "./README.md",
+  "author": "Fernando Bryan Reza Campos",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Yrrrrrf/rune-lab.git"
-  }
+  },
+  "exports": {
+    ".": "./src/lib/mod.ts"
+  },
+  "nodeModulesDir": "manual",
+  "workspace": [
+    "./src/lib/kernel",
+    "./src/lib/runes/layout",
+    "./src/lib/runes/palettes",
+    "./src/lib/runes/plugins/money"
+  ],
+  "tasks": {
+    "i18n": "paraglide-js compile --project ./src/lib/i18n/project.inlang --outdir ./src/lib/i18n/paraglide"
+  },
+  "imports": {
+    "@rune-lab/core": "./src/lib/mod.ts",
+    "@rune-lab/i18n/": "./src/lib/i18n/",
+    "typescript": "npm:typescript@5.9.3",
+    "@tailwindcss/vite": "npm:@tailwindcss/vite",
+    "esm-env": "npm:esm-env",
+    "vite": "npm:vite",
+    "vite-plus": "npm:vite-plus",
+    "daisyui/": "npm:daisyui/",
+    "hotkeys-js": "npm:hotkeys-js",
+    "@inlang/paraglide-js": "npm:@inlang/paraglide-js",
+    "svelte": "npm:svelte",
+    "@sveltejs/kit": "npm:@sveltejs/kit",
+    "@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte",
+    "@sveltejs/adapter-static": "npm:@sveltejs/adapter-static",
+    "jsdom": "npm:jsdom",
+    "@testing-library/jest-dom": "npm:@testing-library/jest-dom"
+  },
+  "exclude": [
+    ".*",
+    "scripts/**",
+    "dist/**",
+    "**/*.test.ts"
+  ]
 }

package/justfile

@@ -0,0 +1,5 @@
+set shell := ["bash", "-cu"]
+
+import 'scripts/dev.just'
+import 'scripts/ci.just'
+import 'scripts/deploy.just'

package/package.json

@@ -1,25 +1,5 @@
 {
   "name": "rune-lab",
-  "version": "0.4.2-beta.1",
-  "description": "Modern toolkit for Svelte 5 Runes applications.",
-  "type": "module",
-  "exports": {
-    ".": "./src/mod.ts"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Yrrrrrf/rune-lab.git"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0",
-    "@inlang/paraglide-js": "^2.0.0"
-  },
-  "keywords": [
-    "svelte",
-    "svelte-5",
-    "runes",
-    "ui",
-    "components"
-  ]
+  "version": "0.4.2-beta.2",
+  "packageManager": "pnpm@10.33.0"
 }

package/scripts/build_pkg.ts

@@ -0,0 +1,57 @@
+// scripts/build_pkg.ts
+import denoConfig from "../deno.json" with { type: "json" };
+
+// ── 1. Restructure: move dist/* → dist/src/ ──────────────────────────────────
+await Deno.mkdir("./dist/src", { recursive: true });
+for await (const entry of Deno.readDir("./dist")) {
+  if (entry.name === "src") continue;
+  await Deno.rename(`./dist/${entry.name}`, `./dist/src/${entry.name}`);
+}
+
+// ── Shared metadata ───────────────────────────────────────────────────────────
+const exports = { ".": "./src/mod.ts" };
+const imports = {
+  "esm-env": "npm:esm-env@^1.2.2",
+  "hotkeys-js": "npm:hotkeys-js@^4.0.2",
+  "dinero.js": "npm:dinero.js@^2.0.2",
+  "svelte": "npm:svelte@^5.55.0",
+  "svelte/": "npm:svelte@^5.55.0/",
+  "@sveltejs/kit": "npm:@sveltejs/kit@^2.55.0",
+  "@inlang/paraglide-js": "npm:@inlang/paraglide-js@^2.15.1",
+  "@inlang/": "npm:@inlang/paraglide-js@^2.15.1/",
+};
+const peerDependencies = {
+  "svelte": "^5.0.0",
+  "@inlang/paraglide-js": "^2.0.0",
+};
+const meta = {
+  version: denoConfig.version,
+  description: denoConfig.description,
+  license: denoConfig.license,
+  repository: denoConfig.repository,
+};
+
+// ── 2. Generate dist/deno.json ────────────────────────────────────────────────
+await Deno.writeTextFile("./dist/deno.json", JSON.stringify({
+  name: "@yrrrrrf/rune-lab",  // JSR scoped name
+  ...meta,
+  exports,
+  imports,
+}, null, 2));
+
+// ── 3. Generate dist/package.json ─────────────────────────────────────────────
+await Deno.writeTextFile("./dist/package.json", JSON.stringify({
+  name: "rune-lab",           // npm unscoped name
+  ...meta,
+  type: "module",
+  exports,
+  imports,
+  peerDependencies,
+  keywords: ["svelte", "svelte-5", "runes", "ui", "components"],
+}, null, 2));
+
+// ── 4. Copy metadata ──────────────────────────────────────────────────────────
+await Deno.copyFile("README.md", "./dist/README.md");
+await Deno.copyFile("LICENSE", "./dist/LICENSE");
+
+console.log(`dist/ (v${denoConfig.version})`);

package/scripts/ci.just

@@ -0,0 +1,26 @@
+[doc('Format Client code')]
+[group('CI')]
+fmt:
+    deno fmt .
+    @echo "✓ Client code formatted"
+
+[doc('Lint Client code')]
+[group('CI')]
+lint:
+    deno lint .
+    @echo "✓ Client code linted"
+
+[doc('Type-check Client workspace')]
+[group('CI')]
+typecheck:
+    # check ts types with strict deno.ns
+    deno check .
+    # check svelte types
+    deno run -A npm:svelte-check
+    # todo: Maybe change this to a vp command
+    @echo "✓ Client type-checked"
+
+[doc('Full client quality gate')]
+[group('CI')]
+quality: fmt lint typecheck
+    @echo "✓ Client quality checks passed"

package/scripts/deploy.just

@@ -0,0 +1,26 @@
+[doc('Build Client')]
+[group('Build')]
+build:
+    # * Clean up previous build
+    rm -rf dist/
+    # * Build library using vite-plus
+    deno run -A npm:@sveltejs/package -- -i src -o dist
+    # vp build
+    # * Build ESM package
+    # deno run -A scripts/build_pkg.ts
+    @echo "✓ build done"
+
+[doc('Publish to jsr')]
+[group('Deploy')]
+deploy: build
+    # * Format build output
+    # deno fmt --no-config dist
+    deno fmt dist
+    # * Publish to npm
+    # (cd dist && bun publish)
+    # * Publish to jsr
+    # rm -rf /tmp/rune-lab
+    # cp -r dist/ /tmp/rune-lab
+    # (cd /tmp/rune-lab && deno publish --no-check)
+    # (cd /tmp/rune-lab && deno install && deno publish --no-check --allow-slow-types)
+    @echo "✓ deploy done"

package/scripts/dev.just

@@ -0,0 +1,4 @@
+[doc('Test the client (runs once)')]
+[group('Dev')]
+test *args:
+    vp test

package/scripts/inject.just

@@ -0,0 +1,72 @@
+# inject.just — surgical local rune-lab injection
+#
+# ⚠  IMPORTANT: `just -f` changes cwd to the justfile's directory.
+#    Never pass `.` as dest — pass $PWD or an absolute path instead.
+#
+# Usage:
+#   just -f ~/rune-lab/scripts/inject.just inject $PWD
+#   just -f ~/rune-lab/scripts/inject.just inject /absolute/path/to/project
+#   just -f ~/rune-lab/scripts/inject.just inject-clean $PWD
+#
+# Recipes:
+#   inject        — build rune-lab, then hot-swap node_modules/rune-lab
+#   inject-clean  — full dep reset (yog reborn --deep), then inject
+# ─────────────────────────────────────────────────────────────────────────────
+
+# Hot-swap: rebuild rune-lab and inject into <dest>/node_modules/rune-lab
+inject dest: _build-for-inject
+    #!/usr/bin/env bash
+    set -euo pipefail
+
+    dest_abs="{{ dest }}"
+
+    # Reject relative paths — they resolve to rune-lab's own dir, not the caller's
+    if [[ "$dest_abs" != /* ]]; then
+        echo "❌  dest must be an absolute path."
+        echo "    Call with:  just -f ... inject \$PWD"
+        echo "    Got:        $dest_abs"
+        exit 1
+    fi
+
+    if [ ! -d "$dest_abs/node_modules" ]; then
+        echo "❌  No node_modules/ found in $dest_abs"
+        echo "    Run your package manager's install first, then retry."
+        exit 1
+    fi
+
+    echo "🗑  Removing stale $dest_abs/node_modules/rune-lab..."
+    rm -rf "$dest_abs/node_modules/rune-lab"
+
+    echo "📦 Copying local dist into $dest_abs/node_modules/rune-lab..."
+    mkdir -p "$dest_abs/node_modules/rune-lab"
+    cp -r "{{ justfile_directory() }}/../dist"         "$dest_abs/node_modules/rune-lab/dist"
+    cp    "{{ justfile_directory() }}/../package.json" "$dest_abs/node_modules/rune-lab/package.json"
+
+    echo "✅  Done! node_modules/rune-lab → $(du -sh $dest_abs/node_modules/rune-lab | cut -f1)"
+    echo "    Source:  {{ justfile_directory() }}/../dist"
+    echo "    Target:  $dest_abs/node_modules/rune-lab"
+
+# Full reset: nuke deps in <dest>, reinstall, then hot-swap rune-lab
+inject-clean dest: _build-for-inject
+    #!/usr/bin/env bash
+    set -euo pipefail
+
+    dest_abs="{{ dest }}"
+
+    if [[ "$dest_abs" != /* ]]; then
+        echo "❌  dest must be an absolute path. Call with: just -f ... inject-clean \$PWD"
+        exit 1
+    fi
+
+    echo "💀 Running yog reborn --deep in $dest_abs..."
+    (cd "$dest_abs" && yog reborn --deep)
+
+    just -f "{{ justfile_directory() }}/inject.just" inject "$dest_abs"
+
+# ── Internal ──────────────────────────────────────────────────────────────────
+
+[private]
+_build-for-inject:
+    @echo "🔨 Building rune-lab from {{ justfile_directory() }}/.."
+    just --justfile "{{ justfile_directory() }}/../justfile" --working-directory "{{ justfile_directory() }}/.." build
+    @echo "✅  rune-lab built."

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/src/lib/RuneProvider.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { setContext, untrack, type Snippet, onMount, type Component } from "svelte";
+  import {
+    RUNE_LAB_CONTEXT,
+    localStorageDriver,
+    initializeStores,
+    defineRune,
+  } from "@rune-lab/kernel";
+  import type { PersistenceDriver, RunePlugin } from "@rune-lab/kernel";
+
+  /**
+   * Namespaced configuration for Rune Lab plugins.
+   * Keyed by plugin.id.
+   */
+  export interface RuneLabConfig {
+    persistence?: PersistenceDriver;
+    /** Optional head management properties */
+    favicon?: string;
+    manageHead?: boolean;
+    icons?: "material" | "none";
+    /** Namespaced config for plugins */
+    [pluginId: string]: unknown;
+  }
+
+  let { children, config = {}, plugins = [] } = $props<{
+    children: Snippet;
+    config?: RuneLabConfig;
+    plugins?: RunePlugin[];
+  }>();
+
+  const initialPlugins = untrack(() => plugins);
+  const initialPersistence = untrack(() => config.persistence ?? localStorageDriver);
+
+  // 1. Register all plugins
+  // Note: defineRune maps each slot into the STORE_REGISTRY
+  untrack(() => {
+    for (const plugin of initialPlugins) {
+      defineRune(plugin);
+    }
+  });
+
+  // 2. Initialize all stores via the registry's topological sort
+  const stores = initializeStores(
+    initialPlugins,
+    untrack(() => config as Record<string, unknown>),
+    initialPersistence
+  );
+
+  // 3. Provide all stores as context
+  // We iterate ALL registered plugins to find the context keys for their slots
+  for (const plugin of initialPlugins) {
+    for (const slot of plugin.stores) {
+      const store = stores.get(slot.id);
+      if (store) {
+        setContext(slot.contextKey, store);
+      }
+    }
+  }
+
+  // Also provide the persistence driver itself
+  setContext(RUNE_LAB_CONTEXT.persistence, initialPersistence);
+
+  // 4. Collect all overlays
+  const allOverlays = $derived(plugins.flatMap(p => p.overlays ?? []) as Component<Record<never, never>>[]);
+
+  // ── Initialization for layout ──────────────────────────
+  const appStore = stores.get("app") as any;
+  const layoutStore = stores.get("layout") as any;
+
+  onMount(() => {
+    if (layoutStore) layoutStore.init();
+  });
+
+  // Meta tags derived from app store state
+  const metaTags = $derived(appStore ? [
+    { name: "description", content: appStore.description },
+    { name: "author", content: appStore.author },
+  ] : []);
+</script>
+
+<svelte:head>
+  {#if config.manageHead !== false && appStore}
+    <title>{appStore.name}</title>
+    {#if config.favicon}
+      <link rel="icon" href={config.favicon} />
+    {/if}
+    {#each metaTags as meta}
+      <meta name={meta.name} content={meta.content} />
+    {/each}
+    {#if config.icons === "material"}
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+      />
+    {/if}
+  {/if}
+</svelte:head>
+
+<!-- Plugin Overlays -->
+{#each allOverlays as Overlay}
+  <Overlay />
+{/each}
+
+<!-- Render Children -->
+{@render children()}

package/src/lib/i18n/message-resolver.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it, vi } from "vite-plus/test";
+
+// Mock esm-env before importing the module
+vi.mock("esm-env", () => ({ DEV: true }));
+
+import {
+  batchResolveMessages,
+  createMessageResolver,
+  hasMessage,
+} from "./message-resolver.ts";
+
+describe("MessageResolver", () => {
+  const mockMessages = {
+    usd: () => "US Dollar",
+    eur: () => "Euro",
+    mxn: () => "Mexican Peso",
+    jpy: () => "Japanese Yen",
+  };
+
+  describe("createMessageResolver", () => {
+    it("should resolve a key via keyExtractor", () => {
+      const resolver = createMessageResolver<{ code: string }>(mockMessages, {
+        keyExtractor: (opt) => opt.code,
+        keyTransformer: (key) => key.toLowerCase(),
+      });
+
+      expect(resolver({ code: "USD" })).toBe("US Dollar");
+      expect(resolver({ code: "EUR" })).toBe("Euro");
+    });
+
+    it("should use untransformed key when no transformer provided", () => {
+      const resolver = createMessageResolver<{ code: string }>(mockMessages, {
+        keyExtractor: (opt) => opt.code,
+      });
+
+      // Without transformer, keys must match exactly
+      expect(resolver({ code: "usd" })).toBe("US Dollar");
+    });
+
+    it("should fall back to the raw key for missing translations", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      const resolver = createMessageResolver<{ code: string }>(mockMessages, {
+        keyExtractor: (opt) => opt.code,
+        keyTransformer: (key) => key.toLowerCase(),
+      });
+
+      const result = resolver({ code: "UNKNOWN" });
+      expect(result).toBe("UNKNOWN"); // falls back to original key
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining("Missing translation"),
+      );
+
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe("hasMessage", () => {
+    it("should return true for existing keys", () => {
+      expect(hasMessage(mockMessages, "usd")).toBe(true);
+      expect(hasMessage(mockMessages, "eur")).toBe(true);
+    });
+
+    it("should return false for missing keys", () => {
+      expect(hasMessage(mockMessages, "UNKNOWN")).toBe(false);
+      expect(hasMessage(mockMessages, "")).toBe(false);
+    });
+  });
+
+  describe("batchResolveMessages", () => {
+    it("should resolve all options at once", () => {
+      const options = [{ code: "USD" }, { code: "EUR" }, { code: "MXN" }];
+
+      const result = batchResolveMessages(mockMessages, options, {
+        keyExtractor: (opt) => opt.code,
+        keyTransformer: (key) => key.toLowerCase(),
+      });
+
+      expect(result).toEqual({
+        USD: "US Dollar",
+        EUR: "Euro",
+        MXN: "Mexican Peso",
+      });
+    });
+
+    it("should include fallback values for missing keys", () => {
+      vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      const options = [{ code: "USD" }, { code: "XYZ" }];
+      const result = batchResolveMessages(mockMessages, options, {
+        keyExtractor: (opt) => opt.code,
+        keyTransformer: (key) => key.toLowerCase(),
+      });
+
+      expect(result).toEqual({
+        USD: "US Dollar",
+        XYZ: "XYZ", // fallback
+      });
+
+      vi.restoreAllMocks();
+    });
+  });
+});

package/src/lib/i18n/message-resolver.ts

@@ -0,0 +1,89 @@
+// sdk/devtools/src/patterns/message-resolver.ts
+import { DEV } from "esm-env";
+
+/**
+ * Dynamic i18n Message Resolver Pattern
+ *
+ * Enables dynamic message function calls for config selectors.
+ * Creates a resolver that dynamically looks up and calls message functions.
+ */
+
+type MessageBundle = Record<string, (...args: unknown[]) => string>;
+
+interface MessageResolverConfig<T> {
+  /**
+   * Function to extract the message key from an option
+   * @example (currency) => currency.code // "USD"
+   */
+  keyExtractor: (option: T) => string;
+
+  /**
+   * Optional transformer for the key before message lookup
+   * @example (key) => key.toLowerCase() // "USD" -> "usd"
+   */
+  keyTransformer?: (key: string) => string;
+}
+
+/**
+ * Creates a message resolver function for dynamic i18n lookups
+ *
+ * @example
+ * ```typescript
+ * const getCurrencyLabel = createMessageResolver<Currency>(m, {
+ *   keyExtractor: (currency) => currency.code
+ * });
+ *
+ * getCurrencyLabel({ code: "EUR", symbol: "€" }); // "Euro"
+ * ```
+ */
+export function createMessageResolver<T>(
+  messages: MessageBundle,
+  config: MessageResolverConfig<T>,
+) {
+  return (option: T): string => {
+    const key = config.keyExtractor(option);
+    const transformedKey = config.keyTransformer
+      ? config.keyTransformer(key)
+      : key;
+
+    const messageFn = messages[transformedKey];
+
+    if (!messageFn || typeof messageFn !== "function") {
+      if (DEV) {
+        console.warn(
+          `[MessageResolver] Missing translation for key: "${transformedKey}"`,
+        );
+      }
+      return key; // Fallback to key
+    }
+
+    return messageFn();
+  };
+}
+
+/**
+ * Type guard to check if a message key exists
+ */
+export function hasMessage(messages: MessageBundle, key: string): boolean {
+  return key in messages && typeof messages[key] === "function";
+}
+
+/**
+ * Batch resolver for multiple options at once
+ */
+export function batchResolveMessages<T>(
+  messages: MessageBundle,
+  options: T[],
+  config: MessageResolverConfig<T>,
+): Record<string, string> {
+  const resolver = createMessageResolver(messages, config);
+
+  return options.reduce(
+    (acc, option) => {
+      const key = config.keyExtractor(option);
+      acc[key] = resolver(option);
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+}

package/src/lib/i18n/project.inlang/settings.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "en",
+  "locales": [
+    "es",
+    "fr",
+    "it",
+    "pt",
+    "en",
+    "de",
+    "ru",
+    "hi",
+    "ar",
+    "zh",
+    "ja",
+    "ko",
+    "vi"
+  ],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./translations/{locale}.json"
+  }
+}