rune-lab 0.1.1 → 0.2.0

package/dist/ui/features/config/AppSettingSelector.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+    import { portal } from "../../actions/portal";
+    import { type Snippet } from "svelte";
+
+    let {
+        options,
+        value,
+        item,
+        triggerLabel,
+        tooltip,
+        direction = "bottom",
+        responsive = true,
+    } = $props<{
+        options: any[];
+        value: any;
+        item: Snippet<[any]>;
+        triggerLabel: Snippet<[any]>;
+        tooltip?: string;
+        direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+        responsive?: boolean;
+    }>();
+
+    let modal = $state<HTMLDialogElement>();
+
+    let isOpen = $state(false);
+    let triggerEl = $state<HTMLElement>();
+    let panelStyle = $state("position:fixed;visibility:hidden");
+
+    function computePosition() {
+        if (!triggerEl) return;
+        const rect = triggerEl.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const openUpward =
+            direction === "top" ||
+            (direction === "auto" &&
+                spaceBelow < 200 &&
+                spaceAbove > spaceBelow);
+
+        if (openUpward) {
+            panelStyle = `position:fixed; bottom:${window.innerHeight - rect.top + 4}px; left:${rect.left}px; min-width:${rect.width}px; z-index:9999`;
+        } else {
+            panelStyle = `position:fixed; top:${rect.bottom + 4}px; left:${rect.left}px; min-width:${rect.width}px; z-index:9999`;
+        }
+    }
+
+    function open() {
+        computePosition();
+        isOpen = true;
+    }
+
+    function close() {
+        isOpen = false;
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+        if (!triggerEl?.contains(e.target as Node)) close();
+    }
+
+    $effect(() => {
+        if (isOpen) {
+            document.addEventListener("click", handleOutsideClick, {
+                capture: true,
+            });
+            document.addEventListener(
+                "keydown",
+                (e) => e.key === "Escape" && close(),
+            );
+        }
+        return () => {
+            document.removeEventListener("click", handleOutsideClick, {
+                capture: true,
+            });
+        };
+    });
+</script>
+
+<!-- Mobile Modal Implementation -->
+{#if responsive}
+    <div class="md:hidden inline-block">
+        <button
+            type="button"
+            class="btn btn-ghost btn-sm m-1 h-auto min-h-[2rem] px-2"
+            aria-haspopup="dialog"
+            onclick={() => modal?.showModal()}
+        >
+            <span class="flex items-center gap-2">
+                {@render triggerLabel(value)}
+            </span>
+        </button>
+
+        <dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
+            <div class="modal-box p-0 overflow-hidden">
+                <div
+                    class="p-4 bg-base-200 border-b border-base-300 flex justify-between items-center"
+                >
+                    <h3 class="font-bold text-lg">Select Option</h3>
+                    <form method="dialog">
+                        <button class="btn btn-sm btn-circle btn-ghost"
+                            >✕</button
+                        >
+                    </form>
+                </div>
+                <div class="max-h-[60vh] overflow-y-auto p-2">
+                    <ul class="menu bg-base-100 w-full p-0" role="menu">
+                        {#each options as option}
+                            <li
+                                class="border-b border-base-100 last:border-0"
+                                role="menuitem"
+                            >
+                                <button
+                                    class="w-full text-left py-3"
+                                    onclick={() => modal?.close()}
+                                >
+                                    {@render item(option)}
+                                </button>
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            </div>
+            <form method="dialog" class="modal-backdrop">
+                <button>close</button>
+            </form>
+        </dialog>
+    </div>
+{/if}
+
+<!-- Desktop Dropdown Implementation -->
+<div
+    bind:this={triggerEl}
+    class="relative {responsive ? 'hidden md:inline-block' : 'inline-block'}"
+>
+    <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        onclick={open}
+        class="btn btn-ghost btn-sm m-1 {tooltip
+            ? 'tooltip tooltip-bottom'
+            : ''}"
+        data-tip={tooltip}
+    >
+        <span class="flex items-center gap-2">
+            {@render triggerLabel(value)}
+        </span>
+    </button>
+</div>
+
+{#if isOpen}
+    <div
+        use:portal
+        style={panelStyle}
+        class={responsive ? "hidden md:block" : "block"}
+    >
+        <ul
+            role="listbox"
+            class="menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow-xl border border-base-200 max-h-96 overflow-y-auto"
+        >
+            {#each options as option}
+                <li role="option" aria-selected={value === option}>
+                    <!-- Event delegation: we close on click unless they clicked the scrollbar -->
+                    <!-- In a real world component you'd wrap the button down here or add a capture handler -->
+                    <div
+                        role="presentation"
+                        onclick={close}
+                        onkeydown={(e) => e.key === "Enter" && close()}
+                        tabindex="-1"
+                        class="w-full"
+                    >
+                        {@render item(option)}
+                    </div>
+                </li>
+            {/each}
+        </ul>
+    </div>
+{/if}

package/dist/{features → ui/features}/config/AppSettingSelector.svelte.d.ts

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     item: Snippet<[any]>;
     triggerLabel: Snippet<[any]>;
     tooltip?: string;
-    direction?: "top" | "bottom" | "left" | "right" | "end";
+    direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
     responsive?: boolean;
 };
 declare const AppSettingSelector: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/{features → ui/features}/config/CurrencySelector.svelte

@@ -3,13 +3,12 @@
     import {
         getCurrencyStore,
         type Currency,
-    } from "../../state/currency.svelte";
+    } from "@internal/state";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext } from "svelte";
 
     const currencyStore = getCurrencyStore();
 
-    import { getContext } from "svelte";
-    import { createMessageResolver } from "../../internal/message-resolver";
-
     let {
         codes = [],
         current = $bindable(String(currencyStore.current)),
@@ -20,11 +19,17 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
 
-    const getLabel = createMessageResolver<Currency>(dictionary as any, {
-        keyExtractor: (c) => String(c.code),
-    });
+    function getLabel(currency: Currency): string {
+        const key = String(currency.code);
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return String(currency.code);
+    }
 
     let active = $derived(
         currencyStore.get(currencyStore.current) ?? currencyStore.available[0],
@@ -42,8 +47,8 @@
     options={available}
     tooltip={getLabel(active)}
 >
-    {#snippet triggerLabel(c)}
-        <span class="font-bold">{c.symbol}</span>
+    {#snippet triggerLabel()}
+        <span class="font-bold">{active.symbol}</span>
     {/snippet}
 
     {#snippet item(c)}

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

@@ -1,15 +1,12 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import {
-        getLanguageStore,
-        type Language,
-    } from "../../state/language.svelte";
+    import { getLanguageStore, type Language } from "@internal/state";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext } from "svelte";
+    import { setLocale } from "../../paraglide/runtime";
 
     const languageStore = getLanguageStore();
 
-    import { getContext } from "svelte";
-    import { createMessageResolver } from "../../internal/message-resolver";
-
     let {
         languages: allowedLocales = languageStore.available.map((l) => l.code),
         current = $bindable(languageStore.current),
@@ -20,11 +17,17 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
 
-    const getLabel = createMessageResolver<Language>(dictionary as any, {
-        keyExtractor: (l) => l.code,
-    });
+    function getLabel(lang: Language): string {
+        const key = lang.code;
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return lang.code.toUpperCase();
+    }
 
     let active = $derived(
         languageStore.get(languageStore.current) ?? languageStore.available[0],
@@ -42,8 +45,8 @@
     options={available}
     tooltip={getLabel(active)}
 >
-    {#snippet triggerLabel(l)}
-        <span class="text-lg">{l?.flag ?? active.flag}</span>
+    {#snippet triggerLabel()}
+        <span class="text-lg">{active.flag}</span>
     {/snippet}
 
     {#snippet item(l)}
@@ -51,6 +54,7 @@
             class="flex items-center gap-3 w-full"
             onclick={() => {
                 languageStore.set(l.code);
+                setLocale(l.code as any);
                 current = l.code;
                 onchange?.(l.code);
             }}

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

@@ -1,12 +1,11 @@
 <script lang="ts">
     import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { getThemeStore, type Theme } from "../../state/theme.svelte";
+    import { getThemeStore, type Theme } from "@internal/state";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext } from "svelte";
 
     const themeStore = getThemeStore();
 
-    import { getContext } from "svelte";
-    import { createMessageResolver } from "../../internal/message-resolver";
-
     let {
         themes = [],
         current = $bindable(themeStore.current),
@@ -17,11 +16,17 @@
         onchange?: (value: string) => void;
     } = $props();
 
-    const dictionary = getContext<Record<string, any>>("rl:dictionary") || {};
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
 
-    const getThemeLabel = createMessageResolver<Theme>(dictionary as any, {
-        keyExtractor: (t) => t.name,
-    });
+    function getThemeLabel(theme: Theme): string {
+        const key = theme.name;
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return theme.name;
+    }
 
     let activeTheme = $derived(
         themeStore.get(themeStore.current) ?? themeStore.available[0],
@@ -39,8 +44,8 @@
     options={available}
     tooltip={getThemeLabel(activeTheme)}
 >
-    {#snippet triggerLabel(t)}
-        <span class="text-lg">{t?.icon ?? activeTheme.icon}</span>
+    {#snippet triggerLabel()}
+        <span class="text-lg">{activeTheme.icon}</span>
     {/snippet}
 
     {#snippet item(t)}
@@ -54,7 +59,7 @@
         >
             <input
                 type="radio"
-                name="theme-dropdown"
+                name="theme-{t.name}"
                 class="theme-controller radio radio-xs"
                 value={t.name}
                 bind:group={themeStore.current}

package/dist/{features → ui/features}/shortcuts/ShortcutPalette.svelte

@@ -5,9 +5,9 @@
         getShortcutStore,
         LAYOUT_SHORTCUTS,
         type ShortcutEntry,
-    } from "../../state/shortcuts.svelte";
-    import { getAppStore } from "../../state/app.svelte";
-    import { Icon } from "../../index";
+    } from "@internal/state";
+    import { getAppStore } from "@internal/state";
+    import { Icon } from "@internal/ui";
 
     const appStore = getAppStore();
     const shortcutStore = getShortcutStore();

package/dist/ui/index.d.ts

@@ -0,0 +1,21 @@
+export { portal } from "./actions/portal.js";
+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 CommandPalette } from "./features/command-palette/CommandPalette.svelte";
+export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
+export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
+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 * as sdkMessages from "./paraglide/messages.js";
+export * from '@internal/state';
+export * from '@internal/core';

package/dist/ui/index.js

@@ -0,0 +1,31 @@
+// @internal/ui - Public barrel export
+// All components, actions, and layout primitives
+// ── Actions ───────────────────────────────────────────────────────────────────
+export { portal } from "./actions/portal.js";
+// ── 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";
+// ── Features ──────────────────────────────────────────────────────────────────
+export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
+export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
+// Setting Selectors
+export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
+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";
+// ── 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/{features/layout/smart → ui/layout}/ConnectedNavigationPanel.svelte

@@ -1,10 +1,7 @@
 <!-- src/lib/features/layout/smart/ConnectedNavigationPanel.svelte -->
 <script lang="ts">
-    import {
-        getLayoutStore,
-        type NavigationSection,
-    } from "../../../state/layout.svelte";
-    import NavigationPanel from "../../../layout/NavigationPanel.svelte";
+    import { getLayoutStore, type NavigationSection } from "@internal/state";
+    import NavigationPanel from "./NavigationPanel.svelte";
     import type { Snippet } from "svelte";
 
     let { sections, header, footer } = $props<{

package/dist/{features/layout/smart → ui/layout}/ConnectedNavigationPanel.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type NavigationSection } from "../../../state/layout.svelte";
+import { type NavigationSection } from "@internal/state";
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     sections: NavigationSection[];

package/dist/{features/layout/smart → ui/layout}/ConnectedWorkspaceStrip.svelte

@@ -1,10 +1,7 @@
 <!-- src/lib/features/layout/smart/ConnectedWorkspaceStrip.svelte -->
 <script lang="ts">
-    import {
-        getLayoutStore,
-        type WorkspaceItem,
-    } from "../../../state/layout.svelte";
-    import WorkspaceStrip from "../../../layout/WorkspaceStrip.svelte";
+    import { getLayoutStore, type WorkspaceItem } from "@internal/state";
+    import WorkspaceStrip from "./WorkspaceStrip.svelte";
     import type { Snippet } from "svelte";
 
     let { items, globalActions } = $props<{

package/dist/{features/layout/smart → ui/layout}/ConnectedWorkspaceStrip.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type WorkspaceItem } from "../../../state/layout.svelte";
+import { type WorkspaceItem } from "@internal/state";
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     items: WorkspaceItem[];

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

@@ -4,7 +4,7 @@
     import type {
         NavigationItem,
         NavigationSection,
-    } from "../state/layout.svelte";
+    } from "@internal/state";
 
     let {
         header,

package/dist/{layout → ui/layout}/NavigationPanel.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { NavigationItem, NavigationSection } from "../state/layout.svelte";
+import type { NavigationItem, NavigationSection } from "@internal/state";
 type $$ComponentProps = {
     header?: Snippet;
     sections: NavigationSection[];

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

@@ -28,12 +28,12 @@
 </script>
 
 <script lang="ts">
-    import { getLayoutStore } from "../state/layout.svelte";
     import {
+        getLayoutStore,
         getShortcutStore,
         shortcutListener,
         LAYOUT_SHORTCUTS,
-    } from "../state/shortcuts.svelte";
+    } from "@internal/state";
     import { onMount } from "svelte";
 
     /**

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

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

package/dist/{layout → ui/layout}/WorkspaceStrip.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { WorkspaceItem } from "../state/layout.svelte";
+import type { WorkspaceItem } from "@internal/state";
 type $$ComponentProps = {
     items: WorkspaceItem[];
     globalActions?: Snippet;

package/dist/{layout → ui/layout}/index.d.ts

@@ -3,5 +3,5 @@ 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 "../state/layout.svelte";
-export type { NavigationItem, NavigationSection, WorkspaceItem, } from "../state/layout.svelte";
+export { createLayoutStore, getLayoutStore } from "@internal/state";
+export type { NavigationItem, NavigationSection, WorkspaceItem, } from "@internal/state";

package/dist/{layout → ui/layout}/index.js

@@ -4,4 +4,4 @@ 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 "../state/layout.svelte";
+export { createLayoutStore, getLayoutStore } from "@internal/state";

package/dist/{paraglide → ui/paraglide}/README.md

@@ -2,7 +2,7 @@
 
 > Auto-generated i18n message functions. Import `messages.js` to use translated strings.
 
-Compiled from: `/home/yrrrrrf/docs/lab/code/typescript/rune-lab/src/i18n/project.inlang`
+Compiled from: `/home/yrrrrrf/docs/lab/code/typescript/rune-lab/src/sdk/ui/src/i18n/project.inlang`
 
 
 ## What is this folder?
@@ -51,9 +51,10 @@ m.greeting({ name: "Sam" }, { locale: "de" }); // "Hallo, Sam!"
 ## Runtime API
 
 ```js
-import { getLocale, setLocale, locales, baseLocale } from "./paraglide/runtime.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"

package/dist/{paraglide → ui/paraglide}/runtime.d.ts

@@ -33,6 +33,21 @@ export function overwriteServerAsyncLocalStorage(value: ParaglideAsyncLocalStora
  * @returns {Locale}
  */
 export function getLocaleForUrl(url: string | URL): Locale;
+/**
+ * Get writing direction for a locale.
+ *
+ * Uses `Intl.Locale` text info when available and falls back to a
+ * language-based RTL check for runtimes without `getTextInfo()`.
+ *
+ * @example
+ *   getTextDirection(); // "ltr" or "rtl" for current locale
+ *   getTextDirection("ar"); // "rtl"
+ *   getTextDirection("en"); // "ltr"
+ *
+ * @param {string} [locale] - Target locale. If not provided, uses `getLocale()`
+ * @returns {"ltr" | "rtl"}
+ */
+export function getTextDirection(locale?: string): "ltr" | "rtl";
 /**
  * Check if something is an available locale.
  *
@@ -614,12 +629,12 @@ export const customClientStrategies: Map<string, CustomClientStrategyHandler>;
 export type ShouldRedirectServerInput = {
     request: Request;
     url?: string | URL | undefined;
-    locale?: "en" | "es" | "fr" | "it" | "pt" | "de" | "ru" | "hi" | "ar" | "zh" | "ja" | "ko" | "vi" | undefined;
+    locale?: "es" | "fr" | "it" | "pt" | "en" | "de" | "ru" | "hi" | "ar" | "zh" | "ja" | "ko" | "vi" | undefined;
 };
 export type ShouldRedirectClientInput = {
     request?: undefined;
     url?: string | URL | undefined;
-    locale?: "en" | "es" | "fr" | "it" | "pt" | "de" | "ru" | "hi" | "ar" | "zh" | "ja" | "ko" | "vi" | undefined;
+    locale?: "es" | "fr" | "it" | "pt" | "en" | "de" | "ru" | "hi" | "ar" | "zh" | "ja" | "ko" | "vi" | undefined;
 };
 export type ShouldRedirectInput = ShouldRedirectServerInput | ShouldRedirectClientInput;
 export type ShouldRedirectResult = {

package/dist/{paraglide → ui/paraglide}/runtime.js

@@ -365,6 +365,51 @@ export const overwriteGetLocale = (fn) => {
     getLocale = fn;
 };
 
+const rtlLanguages = new Set([
+    "ar",
+    "dv",
+    "fa",
+    "he",
+    "ks",
+    "ku",
+    "ps",
+    "sd",
+    "ug",
+    "ur",
+    "yi",
+]);
+/**
+ * Get writing direction for a locale.
+ *
+ * Uses `Intl.Locale` text info when available and falls back to a
+ * language-based RTL check for runtimes without `getTextInfo()`.
+ *
+ * @example
+ *   getTextDirection(); // "ltr" or "rtl" for current locale
+ *   getTextDirection("ar"); // "rtl"
+ *   getTextDirection("en"); // "ltr"
+ *
+ * @param {string} [locale] - Target locale. If not provided, uses `getLocale()`
+ * @returns {"ltr" | "rtl"}
+ */
+export function getTextDirection(locale = getLocale()) {
+    try {
+        const intlLocale = /** @type {Intl.Locale & {
+            getTextInfo?: () => { direction?: string };
+            textInfo?: { direction?: string };
+        }} */ (new Intl.Locale(locale));
+        const direction = intlLocale.getTextInfo?.().direction ?? intlLocale.textInfo?.direction;
+        if (direction === "ltr" || direction === "rtl") {
+            return direction;
+        }
+    }
+    catch {
+        // Ignore Intl.Locale parsing/runtime errors and use fallback below.
+    }
+    const language = locale.split("-")[0]?.toLowerCase();
+    return rtlLanguages.has(language ?? "") ? "rtl" : "ltr";
+}
+
 /**
  * Navigates to the localized URL, or reloads the current page
  *