rune-lab 0.4.0 → 0.4.1

package/src/runes/layout/src/APP_CONFIGURATIONS.ts

@@ -0,0 +1,56 @@
+// 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.
+
+/**
+ * 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 const APP_CONFIGURATIONS: readonly ConfigDimension[] = 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",
+  },
+]);

package/{dist/ui/features/config → src/runes/layout/src}/AppSettingSelector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { portal } from "../../actions/portal";
+    import { portal } from "@rune-lab/kernel";
     import { type Snippet } from "svelte";
 
     let {

package/{dist/ui/layout → src/runes/layout/src}/ConnectedNavigationPanel.svelte

@@ -1,6 +1,6 @@
 <!-- src/lib/features/layout/smart/ConnectedNavigationPanel.svelte -->
 <script lang="ts">
-    import { getLayoutStore, type NavigationSection } from "@internal/state";
+    import { getLayoutStore, type NavigationSection } from "@rune-lab/kernel";
     import NavigationPanel from "./NavigationPanel.svelte";
     import { createNavigationConnection } from "./connection-factory.ts";
     import type { Snippet } from "svelte";

package/{dist/ui/layout → src/runes/layout/src}/ConnectedWorkspaceStrip.svelte

@@ -1,6 +1,6 @@
 <!-- src/lib/features/layout/smart/ConnectedWorkspaceStrip.svelte -->
 <script lang="ts">
-    import { getLayoutStore, type WorkspaceItem } from "@internal/state";
+    import { getLayoutStore, type WorkspaceItem } from "@rune-lab/kernel";
     import WorkspaceStrip from "./WorkspaceStrip.svelte";
     import { createWorkspaceConnection } from "./connection-factory.ts";
     import type { Snippet } from "svelte";

package/src/runes/layout/src/Icon.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { name, class: className = "" } = $props<{ name: string; class?: string }>();
+</script>
+
+<span class="material-symbols-outlined {className}">
+  {name}
+</span>

package/{dist/ui/features/config → src/runes/layout/src}/LanguageSelector.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
     import ResourceSelector from "./ResourceSelector.svelte";
-    import { getLanguageStore } from "@internal/state";
-    import { setLocale } from "../../paraglide/runtime";
+    import { getLanguageStore } from "@rune-lab/kernel";
+    import { setLocale } from "@rune-lab/i18n/paraglide/runtime.js";
 
     const languageStore = getLanguageStore();
 
     let {
-        languages: allowedLocales = languageStore.available.map((l) => l.code),
-        current = $bindable(languageStore.current),
+        languages: allowedLocales = languageStore.available.map((l) =>
+            String(l.code),
+        ),
+        current = $bindable(String(languageStore.current)),
         onchange,
     }: {
-        languages?: ReadonlyArray<string>;
+        languages?: string[];
         current?: string;
         onchange?: (value: string) => void;
     } = $props();

package/{dist/ui/layout → src/runes/layout/src}/NavigationPanel.svelte

@@ -1,10 +1,7 @@
 <!-- src/lib/layout/NavigationPanel.svelte -->
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type {
-        NavigationItem,
-        NavigationSection,
-    } from "@internal/state";
+    import type { NavigationItem, NavigationSection } from "@rune-lab/kernel";
 
     let {
         header,

package/{dist/ui/features/config → src/runes/layout/src}/ResourceSelector.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import type { ConfigStore } from "@internal/state";
-    import * as rlMessages from "../../paraglide/messages.js";
+    import type { ConfigStore } from "@rune-lab/kernel";
+    import * as rlMessages from "@rune-lab/i18n/paraglide/messages.js";
     import { getContext, type Snippet } from "svelte";
 
     /**
@@ -62,9 +62,7 @@
         return key;
     }
 
-    let active = $derived(
-        store.get(store.current) ?? store.available[0],
-    );
+    let active = $derived(store.get(store.current) ?? store.available[0]);
 
     let available = $derived(
         filterKeys.length > 0

package/{dist/ui/features/config → src/runes/layout/src}/ThemeSelector.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import ResourceSelector from "./ResourceSelector.svelte";
-    import { getThemeStore, type Theme } from "@internal/state";
+    import { getThemeStore, type Theme } from "@rune-lab/kernel";
 
     const themeStore = getThemeStore();
 
     let {
         themes = [],
-        current = $bindable(themeStore.current),
+        current = $bindable(String(themeStore.current)),
         onchange,
     }: {
         themes?: string[];

package/{dist/ui/layout → src/runes/layout/src}/WorkspaceLayout.svelte

@@ -1,7 +1,7 @@
 <!-- src/lib/layout/WorkspaceLayout.svelte -->
 <script module lang="ts">
     import type { Snippet } from "svelte";
-    import type { LayoutConfig } from "@internal/core";
+    import type { LayoutConfig } from "./types.ts";
 
     export interface WorkspaceLayoutProps {
         /** Content for the far-left vertical strip */
@@ -38,11 +38,13 @@
 <script lang="ts">
     import {
         getLayoutStore,
-        getShortcutStore,
         getLanguageStore,
+    } from "./mod.ts";
+    import { LAYOUT_SHORTCUTS } from "./types.ts";
+    import {
+        getShortcutStore,
         shortcutListener,
-        LAYOUT_SHORTCUTS,
-    } from "@internal/state";
+    } from "@rune-lab/palettes";
     import { onMount } from "svelte";
 
     /**

package/{dist/ui/layout → src/runes/layout/src}/WorkspaceStrip.svelte

@@ -1,7 +1,7 @@
 <!-- src/lib/layout/WorkspaceStrip.svelte -->
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { WorkspaceItem } from "@internal/state";
+    import type { WorkspaceItem } from "@rune-lab/kernel";
 
     let {
         items = [],

package/src/runes/layout/src/connection-factory.ts

@@ -0,0 +1,95 @@
+// sdk/ui/src/lib/layout/connection-factory.ts
+// Connection functions that generate reactive prop bindings from LayoutStore.
+// Svelte 5 doesn't support React-style HOCs — this is the idiomatic alternative.
+
+import type { LayoutStore } from "./store.svelte.ts";
+
+/**
+ * Reactive prop binding for the NavigationPanel component.
+ */
+export interface NavigationConnection {
+  /** Currently active navigation item ID */
+  readonly activeId: string | null;
+  /** Set of collapsed section IDs */
+  readonly collapsedIds: Set<string>;
+  /** Handler for when a navigation item is selected */
+  onSelect: (item: { id?: string }) => void;
+  /** Handler for when a section is toggled */
+  onToggle: (id: string, isOpen: boolean) => void;
+}
+
+/**
+ * Reactive prop binding for the WorkspaceStrip component.
+ */
+export interface WorkspaceConnection {
+  /** Currently active workspace ID */
+  readonly activeId: string | null;
+  /** Handler for when a workspace is selected */
+  onSelect: (id: string) => void;
+}
+
+/**
+ * Creates reactive prop bindings for connecting NavigationPanel to LayoutStore.
+ * Returns an object with getter properties that track LayoutStore state.
+ *
+ * @param layoutStore - The LayoutStore instance from context
+ * @returns Prop bindings compatible with NavigationPanel
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const layoutStore = getLayoutStore();
+ *   const nav = createNavigationConnection(layoutStore);
+ * </script>
+ * <NavigationPanel {sections} activeId={nav.activeId} collapsedIds={nav.collapsedIds}
+ *   onSelect={nav.onSelect} onToggle={nav.onToggle} />
+ * ```
+ */
+export function createNavigationConnection(
+  layoutStore: Pick<
+    LayoutStore,
+    | "activeNavItemId"
+    | "collapsedSections"
+    | "navigate"
+    | "expandSection"
+    | "collapseSection"
+  >,
+): NavigationConnection {
+  return {
+    get activeId() {
+      return layoutStore.activeNavItemId;
+    },
+    get collapsedIds() {
+      return layoutStore.collapsedSections;
+    },
+    onSelect(item: { id?: string }) {
+      if (item.id) layoutStore.navigate(item.id);
+    },
+    onToggle(id: string, isOpen: boolean) {
+      if (isOpen) {
+        layoutStore.expandSection(id);
+      } else {
+        layoutStore.collapseSection(id);
+      }
+    },
+  };
+}
+
+/**
+ * Creates reactive prop bindings for connecting WorkspaceStrip to LayoutStore.
+ *
+ * @param layoutStore - The LayoutStore instance from context
+ * @returns Prop bindings compatible with WorkspaceStrip
+ */
+export function createWorkspaceConnection(
+  layoutStore: Pick<LayoutStore, "activeWorkspaceId" | "activateWorkspace">,
+): WorkspaceConnection {
+  return {
+    get activeId() {
+      return layoutStore.activeWorkspaceId;
+    },
+    onSelect(id: string) {
+      layoutStore.activateWorkspace(id);
+    },
+  };
+}

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

@@ -0,0 +1,44 @@
+// sdk/state/src/language.svelte.ts
+
+import {
+  type ConfigStore,
+  createConfigStore,
+  getLanguageStore,
+} from "@rune-lab/kernel";
+import type { Language } from "@rune-lab/kernel";
+
+export type { Language };
+
+export const LANGUAGES = [
+  // --- INDOEUROPEAS (Rama Romance / Latín) ---
+  { code: "es", flag: "🇲🇽" },
+  { code: "fr", flag: "🇫🇷" },
+  { code: "it", flag: "🇮🇹" },
+  { code: "pt", flag: "🇧🇷" },
+  // --- INDOEUROPEAS (Rama Germánica) ---
+  { code: "en", flag: "🇺🇸" },
+  { code: "de", flag: "🇩🇪" },
+  // --- INDOEUROPEAS (Otras Ramas) ---
+  { code: "ru", flag: "🇷🇺" },
+  { code: "hi", flag: "🇮🇳" },
+  // --- AFROASIÁTICAS ---
+  { code: "ar", flag: "🇸🇦" },
+  // --- FAMILIAS ASIÁTICAS INDEPENDIENTES ---
+  { code: "zh", flag: "🇨🇳" },
+  { code: "ja", flag: "🇯🇵" },
+  { code: "ko", flag: "🇰🇷" },
+  { code: "vi", flag: "🇻🇳" },
+] as const;
+
+export const languageStore: ConfigStore<Language> = createConfigStore<Language>(
+  {
+    items: LANGUAGES,
+    storageKey: "language",
+    displayName: "Language",
+    idKey: "code",
+    icon: "🌍",
+  },
+);
+
+export type LanguageStore = ReturnType<typeof createConfigStore<Language>>;
+export { getLanguageStore };

package/src/runes/layout/src/mod.ts

@@ -0,0 +1,71 @@
+import { defineRune, RUNE_LAB_CONTEXT } from "@rune-lab/kernel";
+import type { PersistenceDriver, RunePlugin } from "@rune-lab/kernel";
+import { createLayoutStore } from "./store.svelte.ts";
+import { type Theme, themeStore } from "./theme.svelte.ts";
+import { languageStore } from "./language.svelte.ts";
+
+export * from "./store.svelte.ts";
+export * from "./types.ts";
+export { default as WorkspaceLayout } from "./WorkspaceLayout.svelte";
+export * from "./language.svelte.ts";
+export * from "./theme.svelte.ts";
+export * from "./APP_CONFIGURATIONS.ts";
+export * from "./connection-factory.ts";
+export { default as LanguageSelector } from "./LanguageSelector.svelte";
+export { default as ThemeSelector } from "./ThemeSelector.svelte";
+export { default as ResourceSelector } from "./ResourceSelector.svelte";
+export { default as AppSettingSelector } from "./AppSettingSelector.svelte";
+export { default as NavigationPanel } from "./NavigationPanel.svelte";
+export { default as WorkspaceStrip } from "./WorkspaceStrip.svelte";
+export { default as ContentArea } from "./ContentArea.svelte";
+export { default as DetailPanel } from "./DetailPanel.svelte";
+export { default as Icon } from "./Icon.svelte";
+
+/**
+ * Layout Plugin — manages the primary workspace layout, theme, and language.
+ * Always included by default in RuneProvider.
+ */
+export const LayoutPlugin: RunePlugin = defineRune({
+  id: "rune-lab.layout",
+  stores: [
+    {
+      id: "layout",
+      contextKey: RUNE_LAB_CONTEXT.layout,
+      factory: (_config: unknown, driver: PersistenceDriver) =>
+        createLayoutStore(driver),
+    },
+    {
+      id: "theme",
+      contextKey: RUNE_LAB_CONTEXT.theme,
+      factory: (config: unknown, _driver: PersistenceDriver) => {
+        const c = config as Record<string, unknown>;
+        if (c.customThemes) {
+          themeStore.addItems(c.customThemes as Theme[]);
+        }
+        if (
+          c.defaultTheme &&
+          !(themeStore as unknown as { current: unknown }).current
+        ) {
+          if (themeStore.get(c.defaultTheme as never)) {
+            themeStore.set(c.defaultTheme as never);
+          }
+        }
+        return themeStore;
+      },
+    },
+    {
+      id: "language",
+      contextKey: RUNE_LAB_CONTEXT.language,
+      factory: (config: unknown, _driver: PersistenceDriver) => {
+        const c = config as Record<string, unknown>;
+        if (c.locales) {
+          const localesToKeep = c.locales as string[];
+          languageStore.available = languageStore.available.filter(
+            (l) => localesToKeep.includes(l.code),
+          );
+        }
+        return languageStore;
+      },
+    },
+  ],
+});

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

@@ -0,0 +1,142 @@
+// src/lib/state/layout.svelte.ts
+import { getLayoutStore } from "@rune-lab/kernel";
+import type {
+  NavigationItem,
+  NavigationSection,
+  PersistenceDriver,
+  WorkspaceItem,
+} from "@rune-lab/kernel";
+import { resolveDriver } from "@rune-lab/kernel";
+
+export type { NavigationItem, NavigationSection, WorkspaceItem };
+
+export class LayoutStore {
+  workspaces: WorkspaceItem[] = $state<WorkspaceItem[]>([]);
+  activeWorkspaceId: string | null = $state<string | null>(null);
+  activeNavItemId: string | null = $state<string | null>(null);
+  navOpen: boolean = $state(true);
+  detailOpen: boolean = $state(false);
+  collapsedSections: Set<string> = $state<Set<string>>(new Set());
+
+  #storageNamespace = "default";
+  #initialized = false;
+  #driver: PersistenceDriver | undefined;
+
+  constructor(
+    driver?: PersistenceDriver | (() => PersistenceDriver | undefined),
+  ) {
+    // Use resolveDriver but allow undefined result for SSR/no-driver scenarios
+    this.#driver = driver ? resolveDriver(driver) : undefined;
+  }
+
+  init(options?: { namespace?: string; driver?: PersistenceDriver }) {
+    if (this.#initialized) return;
+    if (options?.namespace) this.#storageNamespace = options.namespace;
+    if (options?.driver) this.#driver = options.driver;
+
+    // If no driver was injected and no window (SSR), we just do nothing
+    if (!this.#driver && typeof window !== "undefined") {
+      this.#driver = {
+        get: (key: string) => localStorage.getItem(key),
+        set: (key: string, val: string) => localStorage.setItem(key, val),
+        remove: (key: string) => localStorage.removeItem(key),
+      };
+    }
+
+    if (this.#driver) {
+      const savedWorkspace = this.#driver.get(
+        `rl:layout:${this.#storageNamespace}:workspace`,
+      );
+      if (savedWorkspace) this.activeWorkspaceId = savedWorkspace;
+
+      const savedSections = this.#driver.get(
+        `rl:layout:${this.#storageNamespace}:sections`,
+      );
+      if (savedSections) {
+        try {
+          this.collapsedSections = new Set(JSON.parse(savedSections));
+        } catch (e) {
+          console.error("Failed to parse collapsed sections", e);
+        }
+      }
+    }
+
+    this.#initialized = true;
+
+    // Set up persistence effects
+    if (this.#driver) {
+      $effect.root(() => {
+        $effect(() => {
+          if (this.activeWorkspaceId) {
+            this.#driver?.set(
+              `rl:layout:${this.#storageNamespace}:workspace`,
+              this.activeWorkspaceId,
+            );
+          }
+        });
+
+        $effect(() => {
+          this.#driver?.set(
+            `rl:layout:${this.#storageNamespace}:sections`,
+            JSON.stringify([...this.collapsedSections]),
+          );
+        });
+      });
+    }
+  }
+
+  setWorkspaces(items: WorkspaceItem[]) {
+    this.workspaces = items;
+    if (items.length > 0 && !this.activeWorkspaceId) {
+      this.activeWorkspaceId = items[0].id;
+    }
+  }
+
+  activateWorkspace(id: string) {
+    this.activeWorkspaceId = id;
+  }
+
+  activateWorkspaceByIndex(index: number) {
+    const ws = this.workspaces[index];
+    if (ws) {
+      this.activateWorkspace(ws.id);
+      ws.onClick?.();
+    }
+  }
+
+  navigate(id: string) {
+    this.activeNavItemId = id;
+  }
+
+  toggleNav() {
+    this.navOpen = !this.navOpen;
+  }
+
+  toggleDetail() {
+    this.detailOpen = !this.detailOpen;
+  }
+
+  toggleSection(id: string) {
+    if (this.collapsedSections.has(id)) {
+      this.collapsedSections.delete(id);
+    } else {
+      this.collapsedSections.add(id);
+    }
+  }
+
+  collapseSection(id: string) {
+    this.collapsedSections.add(id);
+  }
+
+  expandSection(id: string) {
+    this.collapsedSections.delete(id);
+  }
+}
+
+export function createLayoutStore(
+  driver?: PersistenceDriver | (() => PersistenceDriver | undefined),
+): LayoutStore {
+  return new LayoutStore(driver);
+}
+
+export { getLayoutStore };

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 "@internal/state";
-    import { getShortcutStore } from "@internal/state";
-    import { Icon } from "../../../mod";
+    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";