rune-lab 0.4.0 → 0.4.1

package/dist/ui/features/config/APP_CONFIGURATIONS.d.ts

@@ -1,29 +0,0 @@
-/**
- * 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 declare const APP_CONFIGURATIONS: readonly ConfigDimension[];

package/dist/ui/features/config/APP_CONFIGURATIONS.js

@@ -1,38 +0,0 @@
-// 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.
-/**
- * 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 = 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/AppSettingSelector.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type Snippet } from "svelte";
-type $$ComponentProps = {
-    options: any[];
-    value: any;
-    item: Snippet<[any]>;
-    triggerLabel: Snippet<[any]>;
-    tooltip?: string;
-    direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
-    responsive?: boolean;
-};
-declare const AppSettingSelector: import("svelte").Component<$$ComponentProps, {}, "">;
-type AppSettingSelector = ReturnType<typeof AppSettingSelector>;
-export default AppSettingSelector;

package/dist/ui/features/config/CurrencySelector.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    codes?: string[];
-    current?: string;
-    onchange?: (value: string) => void;
-};
-declare const CurrencySelector: import("svelte").Component<$$ComponentProps, {}, "current">;
-type CurrencySelector = ReturnType<typeof CurrencySelector>;
-export default CurrencySelector;

package/dist/ui/features/config/LanguageSelector.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    languages?: ReadonlyArray<string>;
-    current?: string;
-    onchange?: (value: string) => void;
-};
-declare const LanguageSelector: import("svelte").Component<$$ComponentProps, {}, "current">;
-type LanguageSelector = ReturnType<typeof LanguageSelector>;
-export default LanguageSelector;

package/dist/ui/features/config/ResourceSelector.svelte.d.ts

@@ -1,25 +0,0 @@
-import type { ConfigStore } from "@internal/state";
-import { type Snippet } from "svelte";
-type $$ComponentProps = {
-    /** 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;
-};
-declare const ResourceSelector: import("svelte").Component<$$ComponentProps, {
-    resolveLabel: (item: any) => string;
-}, "">;
-type ResourceSelector = ReturnType<typeof ResourceSelector>;
-export default ResourceSelector;

package/dist/ui/features/config/ThemeSelector.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    themes?: string[];
-    current?: string;
-    onchange?: (value: string) => void;
-};
-declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "current">;
-type ThemeSelector = ReturnType<typeof ThemeSelector>;
-export default ThemeSelector;

package/dist/ui/features/notifications/NotificationBell.svelte.d.ts

@@ -1,11 +0,0 @@
-export interface NotificationBellProps {
-    /** Number of unread notifications (badge hides when 0) */
-    unreadCount?: number;
-    /** Click handler */
-    onclick?: () => void;
-    /** Enable shake animation to draw attention */
-    animate?: boolean;
-}
-declare const NotificationBell: import("svelte").Component<NotificationBellProps, {}, "">;
-type NotificationBell = ReturnType<typeof NotificationBell>;
-export default NotificationBell;

package/dist/ui/features/notifications/index.d.ts

@@ -1 +0,0 @@
-export { default as NotificationBell } from "./NotificationBell.svelte";

package/dist/ui/features/notifications/index.js

@@ -1,2 +0,0 @@
-// sdk/ui/src/lib/features/notifications/index.ts
-export { default as NotificationBell } from "./NotificationBell.svelte";

package/dist/ui/features/shortcuts/ShortcutBinder.svelte

@@ -1,17 +0,0 @@
-<!--
-  ShortcutBinder — Declarative shortcut registration component.
-  No visual output — purely a lifecycle binder.
-  
-  Usage:
-    <ShortcutBinder shortcuts={[
-      { id: "save:doc", keys: "ctrl+s", handler: save, label: "Save" },
-    ]} />
--->
-<script lang="ts">
-    import type { ShortcutConfig } from "@internal/core";
-    import { useShortcuts } from "@internal/state";
-
-    let { shortcuts }: { shortcuts: ShortcutConfig[] } = $props();
-
-    useShortcuts(shortcuts);
-</script>

package/dist/ui/features/shortcuts/ShortcutBinder.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { ShortcutConfig } from "@internal/core";
-type $$ComponentProps = {
-    shortcuts: ShortcutConfig[];
-};
-declare const ShortcutBinder: import("svelte").Component<$$ComponentProps, {}, "">;
-type ShortcutBinder = ReturnType<typeof ShortcutBinder>;
-export default ShortcutBinder;

package/dist/ui/features/shortcuts/ShortcutPalette.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const ShortcutPalette: import("svelte").Component<Record<string, never>, {
-    open: () => void;
-    close: () => void;
-}, "">;
-type ShortcutPalette = ReturnType<typeof ShortcutPalette>;
-export default ShortcutPalette;

package/dist/ui/index.d.ts

@@ -1,30 +0,0 @@
-export { portal } from "./actions/portal.ts";
-export { default as RuneProvider } from "./components/RuneProvider.svelte";
-export { default as Icon } from "./components/Icon.svelte";
-export { default as Toaster } from "./components/Toaster.svelte";
-export { default as ApiMonitor } from "./components/ApiMonitor.svelte";
-export { default as Kyntharil } from "./components/Kyntharil.svelte";
-export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
-export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
-export { default as ShortcutBinder } from "./features/shortcuts/ShortcutBinder.svelte";
-export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
-export { default as ResourceSelector } from "./features/config/ResourceSelector.svelte";
-export { APP_CONFIGURATIONS, type ConfigDimension, } from "./features/config/APP_CONFIGURATIONS.ts";
-export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
-export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
-export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
-export { default as WorkspaceLayout } from "./layout/WorkspaceLayout.svelte";
-export { default as WorkspaceStrip } from "./layout/WorkspaceStrip.svelte";
-export { default as NavigationPanel } from "./layout/NavigationPanel.svelte";
-export { default as ContentArea } from "./layout/ContentArea.svelte";
-export { default as DetailPanel } from "./layout/DetailPanel.svelte";
-export { default as ConnectedNavigationPanel } from "./layout/ConnectedNavigationPanel.svelte";
-export { default as ConnectedWorkspaceStrip } from "./layout/ConnectedWorkspaceStrip.svelte";
-export { createNavigationConnection, createWorkspaceConnection, type NavigationConnection, type WorkspaceConnection, } from "./layout/connection-factory.ts";
-export { default as DatePicker } from "./primitives/DatePicker.svelte";
-export { default as UserAvatar } from "./components/user/UserAvatar.svelte";
-export { default as UserProfile } from "./components/user/UserProfile.svelte";
-export { default as NotificationBell } from "./features/notifications/NotificationBell.svelte";
-export { default as MoneyDisplay } from "./components/money/MoneyDisplay.svelte";
-export { default as MoneyInput } from "./components/money/MoneyInput.svelte";
-export * as sdkMessages from "./paraglide/messages.js";

package/dist/ui/index.js

@@ -1,46 +0,0 @@
-// All components, actions, and layout primitives
-// ── Actions ───────────────────────────────────────────────────────────────────
-export { portal } from "./actions/portal.ts";
-// ── Core Components ───────────────────────────────────────────────────────────
-export { default as RuneProvider } from "./components/RuneProvider.svelte";
-export { default as Icon } from "./components/Icon.svelte";
-export { default as Toaster } from "./components/Toaster.svelte";
-export { default as ApiMonitor } from "./components/ApiMonitor.svelte";
-export { default as Kyntharil } from "./components/Kyntharil.svelte";
-// ── Features ──────────────────────────────────────────────────────────────────
-export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
-export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
-export { default as ShortcutBinder } from "./features/shortcuts/ShortcutBinder.svelte";
-// Setting Selectors
-export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
-export { default as ResourceSelector } from "./features/config/ResourceSelector.svelte";
-export { APP_CONFIGURATIONS, } from "./features/config/APP_CONFIGURATIONS.ts";
-export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
-export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
-export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
-// ── Layout Primitives ─────────────────────────────────────────────────────────
-export { default as WorkspaceLayout } from "./layout/WorkspaceLayout.svelte";
-export { default as WorkspaceStrip } from "./layout/WorkspaceStrip.svelte";
-export { default as NavigationPanel } from "./layout/NavigationPanel.svelte";
-export { default as ContentArea } from "./layout/ContentArea.svelte";
-export { default as DetailPanel } from "./layout/DetailPanel.svelte";
-// ── Connected (Smart) Components ──────────────────────────────────────────────
-export { default as ConnectedNavigationPanel } from "./layout/ConnectedNavigationPanel.svelte";
-export { default as ConnectedWorkspaceStrip } from "./layout/ConnectedWorkspaceStrip.svelte";
-// ── Connection Factory (Phase 3) ──────────────────────────────────────────────
-export { createNavigationConnection, createWorkspaceConnection, } from "./layout/connection-factory.ts";
-// ── Primitives ────────────────────────────────────────────────────────────────
-export { default as DatePicker } from "./primitives/DatePicker.svelte";
-// ── User Components ───────────────────────────────────────────────────────────
-export { default as UserAvatar } from "./components/user/UserAvatar.svelte";
-export { default as UserProfile } from "./components/user/UserProfile.svelte";
-// ── Notification Components ───────────────────────────────────────────────────
-export { default as NotificationBell } from "./features/notifications/NotificationBell.svelte";
-// ── Money Components ──────────────────────────────────────────────────────────
-export { default as MoneyDisplay } from "./components/money/MoneyDisplay.svelte";
-export { default as MoneyInput } from "./components/money/MoneyInput.svelte";
-// ── Paraglide messages ────────────────────────────────────────────────────────
-export * as sdkMessages from "./paraglide/messages.js";
-// // Consumers shouldn't need rune-lab/state just to get cookieDriver, stores, etc.
-// export * from "@internal/state";
-// export * from "@internal/core";

package/dist/ui/layout/ConnectedNavigationPanel.svelte.d.ts

@@ -1,10 +0,0 @@
-import { type NavigationSection } from "@internal/state";
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    sections: NavigationSection[];
-    header?: Snippet;
-    footer?: Snippet;
-};
-declare const ConnectedNavigationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
-type ConnectedNavigationPanel = ReturnType<typeof ConnectedNavigationPanel>;
-export default ConnectedNavigationPanel;

package/dist/ui/layout/ConnectedWorkspaceStrip.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type WorkspaceItem } from "@internal/state";
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    items: WorkspaceItem[];
-    globalActions?: Snippet;
-};
-declare const ConnectedWorkspaceStrip: import("svelte").Component<$$ComponentProps, {}, "">;
-type ConnectedWorkspaceStrip = ReturnType<typeof ConnectedWorkspaceStrip>;
-export default ConnectedWorkspaceStrip;

package/dist/ui/layout/ContentArea.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    header?: Snippet;
-    children: Snippet;
-};
-declare const ContentArea: import("svelte").Component<$$ComponentProps, {}, "">;
-type ContentArea = ReturnType<typeof ContentArea>;
-export default ContentArea;

package/dist/ui/layout/DetailPanel.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    children: Snippet;
-};
-declare const DetailPanel: import("svelte").Component<$$ComponentProps, {}, "">;
-type DetailPanel = ReturnType<typeof DetailPanel>;
-export default DetailPanel;

package/dist/ui/layout/NavigationPanel.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { Snippet } from "svelte";
-import type { NavigationItem, NavigationSection } from "@internal/state";
-type $$ComponentProps = {
-    header?: Snippet;
-    sections: NavigationSection[];
-    footer?: Snippet;
-    activeId?: string | null;
-    collapsedIds?: Set<string>;
-    onSelect?: (item: NavigationItem) => void;
-    onToggle?: (id: string, isOpen: boolean) => void;
-};
-declare const NavigationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavigationPanel = ReturnType<typeof NavigationPanel>;
-export default NavigationPanel;

package/dist/ui/layout/WorkspaceLayout.svelte.d.ts

@@ -1,32 +0,0 @@
-import type { Snippet } from "svelte";
-import type { LayoutConfig } from "@internal/core";
-export interface WorkspaceLayoutProps {
-    /** Content for the far-left vertical strip */
-    workspaceStrip?: Snippet;
-    /** Main navigation tree panel */
-    navigationPanel?: Snippet;
-    /** The primary application view */
-    content?: Snippet;
-    /** Right-side contextual detail panel */
-    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 */
-    navWidth?: string;
-    /** Width of the contextual detail panel */
-    detailWidth?: string;
-    /** Controlled override for navigation panel visibility */
-    navOpen?: boolean;
-    /** Controlled override for detail panel visibility */
-    detailOpen?: boolean;
-}
-declare const WorkspaceLayout: import("svelte").Component<WorkspaceLayoutProps, {}, "navOpen" | "detailOpen">;
-type WorkspaceLayout = ReturnType<typeof WorkspaceLayout>;
-export default WorkspaceLayout;

package/dist/ui/layout/WorkspaceStrip.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from "svelte";
-import type { WorkspaceItem } from "@internal/state";
-type $$ComponentProps = {
-    items: WorkspaceItem[];
-    globalActions?: Snippet;
-    activeId?: string | null;
-    onSelect?: (id: string, item: WorkspaceItem) => void;
-};
-declare const WorkspaceStrip: import("svelte").Component<$$ComponentProps, {}, "">;
-type WorkspaceStrip = ReturnType<typeof WorkspaceStrip>;
-export default WorkspaceStrip;

package/dist/ui/layout/connection-factory.d.ts

@@ -1,50 +0,0 @@
-import type { LayoutStore } from "@internal/state";
-/**
- * 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 declare function createNavigationConnection(layoutStore: LayoutStore): NavigationConnection;
-/**
- * Creates reactive prop bindings for connecting WorkspaceStrip to LayoutStore.
- *
- * @param layoutStore - The LayoutStore instance from context
- * @returns Prop bindings compatible with WorkspaceStrip
- */
-export declare function createWorkspaceConnection(layoutStore: LayoutStore): WorkspaceConnection;

package/dist/ui/layout/connection-factory.js

@@ -1,58 +0,0 @@
-// 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.
-/**
- * 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) {
-    return {
-        get activeId() {
-            return layoutStore.activeNavItemId;
-        },
-        get collapsedIds() {
-            return layoutStore.collapsedSections;
-        },
-        onSelect(item) {
-            if (item.id)
-                layoutStore.navigate(item.id);
-        },
-        onToggle(id, isOpen) {
-            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) {
-    return {
-        get activeId() {
-            return layoutStore.activeWorkspaceId;
-        },
-        onSelect(id) {
-            layoutStore.activateWorkspace(id);
-        },
-    };
-}

package/dist/ui/layout/index.d.ts

@@ -1,7 +0,0 @@
-export { default as WorkspaceLayout } from "./WorkspaceLayout.svelte";
-export { default as WorkspaceStrip } from "./WorkspaceStrip.svelte";
-export { default as NavigationPanel } from "./NavigationPanel.svelte";
-export { default as ContentArea } from "./ContentArea.svelte";
-export { default as DetailPanel } from "./DetailPanel.svelte";
-export { createLayoutStore, getLayoutStore } from "@internal/state";
-export type { NavigationItem, NavigationSection, WorkspaceItem, } from "@internal/state";

package/dist/ui/layout/index.js

@@ -1,7 +0,0 @@
-// src/lib/layout/index.ts
-export { default as WorkspaceLayout } from "./WorkspaceLayout.svelte";
-export { default as WorkspaceStrip } from "./WorkspaceStrip.svelte";
-export { default as NavigationPanel } from "./NavigationPanel.svelte";
-export { default as ContentArea } from "./ContentArea.svelte";
-export { default as DetailPanel } from "./DetailPanel.svelte";
-export { createLayoutStore, getLayoutStore } from "@internal/state";

package/dist/ui/paraglide/README.md

@@ -1,147 +0,0 @@
-# Paraglide JS Compiled Output
-
-> Auto-generated i18n message functions. Import `messages.js` to use translated strings.
-
-Compiled from: `/home/yrrrrrf/docs/lab/code/typescript/rune-lab/src/sdk/ui/src/i18n/project.inlang`
-
-
-## What is this folder?
-
-This folder contains compiled [Paraglide JS](https://github.com/opral/paraglide-js) output. Paraglide JS compiles your translation messages into tree-shakeable JavaScript functions.
-
-## At a glance
-
-Purpose:
-- This folder stores compiled i18n message functions.
-- Source translations live outside this folder in your inlang project.
-
-Safe to import:
-- `messages.js` — all message functions
-- `runtime.js` — locale utilities
-- `server.js` — server-side middleware
-
-Do not edit:
-- All files in this folder are auto-generated.
-- Changes will be overwritten on next compilation.
-
-```
-paraglide/
-├── messages.js      # Message exports (import this)
-├── messages/        # Individual message functions
-├── runtime.js       # Locale detection & configuration
-├── registry.js      # Formatting utilities (plural, number, datetime)
-├── server.js        # Server-side middleware
-└── .gitignore       # Marks folder as generated
-```
-
-## Usage
-
-```js
-import * as m from "./paraglide/messages.js";
-
-// Messages are functions that return localized strings
-m.hello_world();             // "Hello, World!" (in current locale)
-m.greeting({ name: "Sam" }); // "Hello, Sam!"
-
-// Override locale per-call
-m.hello_world({}, { locale: "de" });           // "Hallo, Welt!"
-m.greeting({ name: "Sam" }, { locale: "de" }); // "Hallo, Sam!"
-```
-
-## Runtime API
-
-```js
-import { getLocale, getTextDirection, setLocale, locales, baseLocale } from "./paraglide/runtime.js";
-
-getLocale();    // Current locale, e.g., "en"
-getTextDirection(); // "ltr" | "rtl" for current locale
-setLocale("de"); // Set locale
-locales;        // Available locales, e.g., ["en", "de", "fr"]
-baseLocale;     // Default locale, e.g., "en"
-```
-
-## Strategy
-
-The strategy determines how the current locale is detected and persisted:
-
-- **Cookie**: Stores locale preference in a cookie.
-- **URL**: Derives locale from URL patterns (e.g., `/en/about`, `en.example.com`).
-- **GlobalVariable**: Uses a global variable (client-side only).
-- **BaseLocale**: Always returns the base locale.
-
-Strategies can be combined. The order defines precedence:
-
-```js
-await compile({
-  project: "./project.inlang",
-  outdir: "./src/paraglide",
-  strategy: ["url", "cookie", "baseLocale"],
-});
-```
-
-See the [strategy documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/strategy) for details.
-
-## Markup (Rich Text)
-
-Messages can contain markup tags for bold, links, and other inline elements. Translators control where tags appear; developers control how they render.
-
-### Message syntax
-
-```json
-{
-  "cta": "{#link to=|/docs|}Read the docs{/link}",
-  "bold_text": "This is {#bold}important{/bold}"
-}
-```
-
-- `{#tagName}` opens a tag, `{/tagName}` closes it.
-- Options: `to=|/docs|` (accessed via `options.to`).
-- Attributes: `@track` (boolean, accessed via `attributes.track`).
-
-This is the default inlang message syntax. Paraglide's message format is plugin-based — you can use [ICU MessageFormat 1](https://inlang.com/m/p7c8m1d2/plugin-inlang-icu-messageformat-1), [i18next](https://inlang.com/m/3i8bor92/plugin-inlang-i18next), or other [plugins](https://inlang.com/c/plugins) instead.
-
-### Rendering markup
-
-Calling `m.cta()` returns **plain text** (markup stripped). To render markup, use the framework adapter or the low-level `parts()` API:
-
-```js
-const parts = m.cta.parts({});
-// [
-//   { type: "markup-start", name: "link", options: { to: "/docs" }, attributes: {} },
-//   { type: "text", value: "Read the docs" },
-//   { type: "markup-end", name: "link" }
-// ]
-```
-
-Framework adapters provide a `<ParaglideMessage>` component that accepts markup renderers:
-
-- `@inlang/paraglide-js-react`
-- `@inlang/paraglide-js-vue`
-- `@inlang/paraglide-js-svelte`
-- `@inlang/paraglide-js-solid`
-
-```jsx
-import { ParaglideMessage } from "@inlang/paraglide-js-react"; // or -vue, -svelte, -solid
-
-<ParaglideMessage
-  message={m.cta}
-  inputs={{}}
-  markup={{
-    link: ({ children, options }) => <a href={options.to}>{children}</a>,
-  }}
-/>
-```
-
-See the [markup documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/markup) for details.
-
-## Key concepts
-
-- **Tree-shakeable**: Each message is a function, enabling [up to 70% smaller i18n bundle sizes](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/benchmark) than traditional i18n libraries.
-- **Typesafe**: Full TypeScript/JSDoc support with autocomplete.
-- **Variants**: Messages can have variants for pluralization, gender, etc.
-- **Fallbacks**: Missing translations fall back to the base locale.
-
-## Links
-
-- [Paraglide JS Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs)
-- [Source Repository](https://github.com/opral/paraglide-js)