rune-lab 0.3.1 → 0.4.1

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,7 +1,8 @@
 <!-- src/lib/features/layout/smart/ConnectedNavigationPanel.svelte -->
 <script lang="ts">
-    import { getLayoutStore, type NavigationSection } from "rune-lab/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";
 
     let { sections, header, footer } = $props<{
@@ -11,17 +12,15 @@
     }>();
 
     const layoutStore = getLayoutStore();
+    const connection = createNavigationConnection(layoutStore);
 </script>
 
 <NavigationPanel
     {sections}
     {header}
     {footer}
-    activeId={layoutStore.activeNavItemId}
-    collapsedIds={layoutStore.collapsedSections}
-    onSelect={(item) => layoutStore.navigate(item.id!)}
-    onToggle={(id, isOpen) =>
-        isOpen
-            ? layoutStore.expandSection(id)
-            : layoutStore.collapseSection(id)}
+    activeId={connection.activeId}
+    collapsedIds={connection.collapsedIds}
+    onSelect={connection.onSelect}
+    onToggle={connection.onToggle}
 />

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

@@ -1,7 +1,8 @@
 <!-- src/lib/features/layout/smart/ConnectedWorkspaceStrip.svelte -->
 <script lang="ts">
-    import { getLayoutStore, type WorkspaceItem } from "rune-lab/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";
 
     let { items, globalActions } = $props<{
@@ -10,11 +11,12 @@
     }>();
 
     const layoutStore = getLayoutStore();
+    const connection = createWorkspaceConnection(layoutStore);
 </script>
 
 <WorkspaceStrip
     {items}
     {globalActions}
-    activeId={layoutStore.activeWorkspaceId}
-    onSelect={(id) => layoutStore.activateWorkspace(id)}
+    activeId={connection.activeId}
+    onSelect={connection.onSelect}
 />

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/src/runes/layout/src/LanguageSelector.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import ResourceSelector from "./ResourceSelector.svelte";
+    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) =>
+            String(l.code),
+        ),
+        current = $bindable(String(languageStore.current)),
+        onchange,
+    }: {
+        languages?: string[];
+        current?: string;
+        onchange?: (value: string) => void;
+    } = $props();
+</script>
+
+<ResourceSelector
+    store={languageStore}
+    idKey="code"
+    filterKeys={[...allowedLocales]}
+    {onchange}
+>
+    {#snippet triggerLabel(active)}
+        <span class="text-lg">{active.flag}</span>
+    {/snippet}
+
+    {#snippet item(l)}
+        <button
+            class="flex items-center gap-3 w-full"
+            onclick={() => {
+                languageStore.set(l.code);
+                setLocale(l.code as any);
+                current = l.code;
+                onchange?.(l.code);
+            }}
+        >
+            <span class="text-lg">{l.flag}</span>
+            <span>{l.code.toUpperCase()}</span>
+        </button>
+    {/snippet}
+</ResourceSelector>

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 "rune-lab/state";
+    import type { NavigationItem, NavigationSection } from "@rune-lab/kernel";
 
     let {
         header,

package/src/runes/layout/src/ResourceSelector.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import AppSettingSelector from "./AppSettingSelector.svelte";
+    import type { ConfigStore } from "@rune-lab/kernel";
+    import * as rlMessages from "@rune-lab/i18n/paraglide/messages.js";
+    import { getContext, type Snippet } from "svelte";
+
+    /**
+     * ResourceSelector — Generic configuration picker.
+     * Wraps AppSettingSelector with automatic label resolution and store binding.
+     *
+     * @example
+     * ```svelte
+     * <ResourceSelector store={themeStore} idKey="name">
+     *   {#snippet triggerLabel(item)}<span>{item.icon}</span>{/snippet}
+     *   {#snippet item(t)}<button onclick={() => store.set(t.name)}>{t.name}</button>{/snippet}
+     * </ResourceSelector>
+     * ```
+     */
+    let {
+        store,
+        idKey,
+        filterKeys = [],
+        triggerLabel,
+        item,
+        onchange,
+        direction = "bottom",
+        responsive = true,
+    }: {
+        /** ConfigStore instance to bind to */
+        store: ConfigStore<any>;
+        /** Key to use as identifier (e.g., "name", "code") */
+        idKey: string;
+        /** Optional subset of IDs to show */
+        filterKeys?: string[];
+        /** Snippet to render the trigger button content */
+        triggerLabel: Snippet<[any]>;
+        /** Snippet to render each option in the dropdown */
+        item: Snippet<[any]>;
+        /** Callback when selection changes */
+        onchange?: (value: string) => void;
+        /** Dropdown direction */
+        direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+        /** Whether to show responsive mobile modal */
+        responsive?: boolean;
+    } = $props();
+
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
+
+    /**
+     * Resolve a label for an item through the message chain:
+     * 1. User-provided dictionary
+     * 2. Paraglide messages
+     * 3. Raw key fallback
+     */
+    export function resolveLabel(item: any): string {
+        const key = String(item[idKey]);
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return key;
+    }
+
+    let active = $derived(store.get(store.current) ?? store.available[0]);
+
+    let available = $derived(
+        filterKeys.length > 0
+            ? store.available.filter((item: any) =>
+                  filterKeys.includes(String(item[idKey])),
+              )
+            : store.available,
+    );
+</script>
+
+<AppSettingSelector
+    value={active}
+    options={available}
+    tooltip={resolveLabel(active)}
+    {direction}
+    {responsive}
+>
+    {#snippet triggerLabel(value)}
+        {@render triggerLabel(value)}
+    {/snippet}
+
+    {#snippet item(option)}
+        {@render item(option)}
+    {/snippet}
+</AppSettingSelector>

package/src/runes/layout/src/ThemeSelector.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import ResourceSelector from "./ResourceSelector.svelte";
+    import { getThemeStore, type Theme } from "@rune-lab/kernel";
+
+    const themeStore = getThemeStore();
+
+    let {
+        themes = [],
+        current = $bindable(String(themeStore.current)),
+        onchange,
+    }: {
+        themes?: string[];
+        current?: string;
+        onchange?: (value: string) => void;
+    } = $props();
+</script>
+
+<ResourceSelector
+    store={themeStore}
+    idKey="name"
+    filterKeys={themes}
+    {onchange}
+>
+    {#snippet triggerLabel(active)}
+        <span class="text-lg">{active.icon}</span>
+    {/snippet}
+
+    {#snippet item(t)}
+        <button
+            class="flex items-center gap-3 w-full"
+            onclick={() => {
+                themeStore.set(t.name);
+                current = t.name;
+                onchange?.(t.name);
+            }}
+        >
+            <input
+                type="radio"
+                name="theme-{t.name}"
+                class="theme-controller radio radio-xs"
+                value={t.name}
+                bind:group={themeStore.current}
+            />
+            <span class="text-lg">{t.icon}</span>
+            <span class="capitalize">
+                {t.name}
+            </span>
+        </button>
+    {/snippet}
+</ResourceSelector>

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

@@ -1,6 +1,7 @@
 <!-- src/lib/layout/WorkspaceLayout.svelte -->
 <script module lang="ts">
     import type { Snippet } from "svelte";
+    import type { LayoutConfig } from "./types.ts";
 
     export interface WorkspaceLayoutProps {
         /** Content for the far-left vertical strip */
@@ -13,6 +14,13 @@
         detailPanel?: Snippet;
         namespace?: string;
 
+        /**
+         * Declarative layout configuration.
+         * When provided, zones can be rendered from config entries.
+         * Snippet props take priority when both are provided.
+         */
+        config?: LayoutConfig;
+
         /** Width of the left workspace strip */
         stripWidth?: string;
         /** Width of the navigation tree panel */
@@ -30,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 "rune-lab/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 "rune-lab/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 };