@shepai/cli 1.155.0-pr484.1619afe → 1.155.0-pr485.4c45fca

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.js

@@ -82,14 +82,14 @@ export function ToolDetailDrawer({ tool, open, onClose, onRefresh, autoStart, })
             void onRefresh();
         }
     }, [status, onRefresh]);
-    const header = (_jsxs("div", { className: "flex flex-col gap-1.5 pr-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [tool.iconUrl ? (
+    const header = (_jsxs("div", { className: "flex flex-col gap-1.5 pe-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [tool.iconUrl ? (
                     /* eslint-disable-next-line @next/next/no-img-element */
                     _jsx("img", { src: tool.iconUrl, alt: "", width: 24, height: 24, className: "shrink-0 dark:invert" })) : (_jsx(Package, { className: "text-muted-foreground h-6 w-6 shrink-0" })), _jsx("h2", { className: "text-base font-bold", children: tool.name }), _jsx(StatusBadge, { status: tool.status.status })] }), _jsx("div", { className: "flex items-center gap-2", children: tool.tags.map((tag) => {
                     const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
                     const TagIcon = config.icon;
                     return (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5 text-[10px]", children: [_jsx(TagIcon, { className: "h-3 w-3" }), config.label] }, tag));
                 }) })] }));
-    return (_jsx(BaseDrawer, { open: open, onClose: onClose, size: "md", modal: true, title: tool.name, header: header, "data-testid": "tool-detail-drawer", children: _jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: tool.description }), tool.author || tool.platforms ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs", children: [tool.author ? (_jsxs("span", { className: "text-muted-foreground", children: ["by", ' ', tool.website ? (_jsx("a", { href: tool.website, target: "_blank", rel: "noopener noreferrer", className: "text-foreground hover:underline", children: tool.author })) : (_jsx("span", { className: "text-foreground", children: tool.author }))] })) : null, tool.platforms && tool.platforms.length > 0 ? (_jsx("span", { className: "text-muted-foreground", children: tool.platforms.map((p) => PLATFORM_LABELS[p] ?? p).join(' · ') })) : null] })) : null, tool.installCommand ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase", children: "Install command" }), _jsxs("div", { className: "relative rounded-md bg-zinc-900 text-zinc-100", children: [_jsx("pre", { className: "overflow-x-auto px-3 py-2.5 pr-16 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: _jsx("code", { children: tool.installCommand }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "absolute top-1.5 right-1.5 h-7 cursor-pointer px-2 text-zinc-400 hover:text-zinc-100", onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy install command', children: [copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-500" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })), _jsx("span", { className: "ml-1 text-[10px]", children: copied ? 'Copied!' : 'Copy' })] })] })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [canInstall ? (_jsxs(Button, { size: "sm", onClick: startInstall, disabled: status === 'streaming', "aria-label": `Install ${tool.name}`, className: "cursor-pointer", children: [status === 'streaming' ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" })), status === 'streaming' ? 'Installing...' : 'Install'] })) : null, canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleLaunch(), disabled: isLaunching, "aria-label": `Launch ${tool.name}`, className: "cursor-pointer", children: [isLaunching ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Rocket, { className: "mr-1.5 h-3.5 w-3.5" })), "Launch"] })) : null, tool.documentationUrl ? (_jsx(Button, { variant: "outline", size: "sm", className: "cursor-pointer", asChild: true, children: _jsxs("a", { href: tool.documentationUrl, target: "_blank", rel: "noopener noreferrer", children: ["Docs", _jsx(ExternalLink, { className: "ml-1 h-3 w-3" })] }) })) : null] }), (status === 'streaming' || status === 'done' || status === 'error') && logs.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase", children: "Install log" }), _jsxs("div", { ref: logRef, onScroll: handleScroll, className: "max-h-60 overflow-auto rounded-md bg-zinc-900 p-3 font-mono text-xs leading-relaxed text-zinc-100", "data-testid": "tool-install-log", children: [logs.map((line, idx) => (
+    return (_jsx(BaseDrawer, { open: open, onClose: onClose, size: "md", modal: true, title: tool.name, header: header, "data-testid": "tool-detail-drawer", children: _jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: tool.description }), tool.author || tool.platforms ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs", children: [tool.author ? (_jsxs("span", { className: "text-muted-foreground", children: ["by", ' ', tool.website ? (_jsx("a", { href: tool.website, target: "_blank", rel: "noopener noreferrer", className: "text-foreground hover:underline", children: tool.author })) : (_jsx("span", { className: "text-foreground", children: tool.author }))] })) : null, tool.platforms && tool.platforms.length > 0 ? (_jsx("span", { className: "text-muted-foreground", children: tool.platforms.map((p) => PLATFORM_LABELS[p] ?? p).join(' · ') })) : null] })) : null, tool.installCommand ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase", children: "Install command" }), _jsxs("div", { className: "relative rounded-md bg-zinc-900 text-zinc-100", children: [_jsx("pre", { className: "overflow-x-auto px-3 py-2.5 pe-16 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: _jsx("code", { children: tool.installCommand }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "absolute top-1.5 right-1.5 h-7 cursor-pointer px-2 text-zinc-400 hover:text-zinc-100", onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy install command', children: [copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-500" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })), _jsx("span", { className: "ms-1 text-[10px]", children: copied ? 'Copied!' : 'Copy' })] })] })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [canInstall ? (_jsxs(Button, { size: "sm", onClick: startInstall, disabled: status === 'streaming', "aria-label": `Install ${tool.name}`, className: "cursor-pointer", children: [status === 'streaming' ? (_jsx(Loader2, { className: "me-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Download, { className: "me-1.5 h-3.5 w-3.5" })), status === 'streaming' ? 'Installing...' : 'Install'] })) : null, canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleLaunch(), disabled: isLaunching, "aria-label": `Launch ${tool.name}`, className: "cursor-pointer", children: [isLaunching ? (_jsx(Loader2, { className: "me-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Rocket, { className: "me-1.5 h-3.5 w-3.5" })), "Launch"] })) : null, tool.documentationUrl ? (_jsx(Button, { variant: "outline", size: "sm", className: "cursor-pointer", asChild: true, children: _jsxs("a", { href: tool.documentationUrl, target: "_blank", rel: "noopener noreferrer", children: ["Docs", _jsx(ExternalLink, { className: "ms-1 h-3 w-3" })] }) })) : null] }), (status === 'streaming' || status === 'done' || status === 'error') && logs.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase", children: "Install log" }), _jsxs("div", { ref: logRef, onScroll: handleScroll, className: "max-h-60 overflow-auto rounded-md bg-zinc-900 p-3 font-mono text-xs leading-relaxed text-zinc-100", "data-testid": "tool-install-log", children: [logs.map((line, idx) => (
                                 // eslint-disable-next-line react/no-array-index-key -- logs are append-only, never reorder
                                 _jsx("div", { className: "break-all whitespace-pre-wrap", children: line }, idx))), status === 'done' ? (_jsx("div", { className: "mt-2 border-t border-zinc-700 pt-2 text-emerald-400", children: "Installation complete" })) : null, status === 'error' ? (_jsx("div", { className: "mt-2 border-t border-zinc-700 pt-2 text-red-400", children: "Installation failed" })) : null] })] })) : null] }) }));
 }

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CAoMjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CAkNjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from 'next/navigation';
 import { Home, Moon, Sun, Volume2, VolumeOff, Wrench, Puzzle, Settings } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
 import { SidebarNavItem } from '../../common/sidebar-nav-item/index.js';
@@ -19,6 +20,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../
 import { useDeferredMount } from '../../../hooks/use-deferred-mount.js';
 import { useVersion } from '../../../hooks/use-version.js';
 export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
+    const { t } = useTranslation('web');
     const pathname = usePathname();
     const { state } = useSidebar();
     const collapsed = state === 'collapsed';
@@ -38,11 +40,11 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: "Skills", href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: "Settings", href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
+                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                         'flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',
-                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: "Features" }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, key)) : null) })] })) : null }), _jsx(SidebarFooter, { className: "border-t p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx("div", { className: "flex items-center gap-1", children: _jsxs(TooltipProvider, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { className: "w-auto flex-none", onClick: (e) => {
+                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: t('sidebar.features') }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, key)) : null) })] })) : null }), _jsx(SidebarFooter, { className: "border-t p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx("div", { className: "flex items-center gap-1", children: _jsxs(TooltipProvider, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { className: "w-auto flex-none", onClick: (e) => {
                                                         const currentResolved = theme === 'system' ? resolvedTheme : theme;
                                                         const goingToDark = currentResolved !== 'dark';
                                                         const newTheme = theme === 'system'
@@ -69,8 +71,12 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
                                                         document.startViewTransition(() => {
                                                             setTheme(newTheme);
                                                         });
-                                                    }, "aria-label": `Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`, children: [_jsx(Sun, { className: "h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }) }), _jsx(TooltipContent, { side: "top", children: resolvedTheme === 'dark' ? 'Light mode' : 'Dark mode' })] }), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
+                                                    }, "aria-label": resolvedTheme === 'dark'
+                                                        ? t('sidebar.switchToLight')
+                                                        : t('sidebar.switchToDark'), children: [_jsx(Sun, { className: "h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }) }), _jsx(TooltipContent, { side: "top", children: resolvedTheme === 'dark'
+                                                    ? t('sidebar.switchToLight')
+                                                    : t('sidebar.switchToDark') })] }), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
                                                         clickSound.play();
                                                         toggleSound();
-                                                    }, "aria-label": soundEnabled ? 'Mute sounds' : 'Unmute sounds', children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? 'Mute sounds' : 'Unmute sounds' })] }))] }) }) }) }) }), _jsx(SidebarRail, {})] }));
+                                                    }, "aria-label": soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds'), children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds') })] }))] }) }) }) }) }), _jsx(SidebarRail, {})] }));
 }

package/dist/src/presentation/web/components/providers/i18n-provider.d.ts

@@ -0,0 +1,17 @@
+interface I18nProviderProps {
+    initialLanguage: string;
+    children: React.ReactNode;
+}
+/**
+ * Client-side i18n provider that wraps the application with react-i18next.
+ *
+ * Receives the initial language from the server-side layout and sets it
+ * on the i18next instance. Language changes at runtime (e.g. from settings)
+ * call i18n.changeLanguage() which re-renders all translated components.
+ *
+ * Also handles lazy-loading RTL fonts (Noto Sans Arabic/Hebrew) when the
+ * active language requires them.
+ */
+export declare function I18nProvider({ initialLanguage, children }: I18nProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=i18n-provider.d.ts.map

package/dist/src/presentation/web/components/providers/i18n-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/providers/i18n-provider.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAqB5E"}

package/dist/src/presentation/web/components/providers/i18n-provider.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import webI18n from '../../lib/i18n.js';
+import { applyRtlFont } from '../../lib/rtl-fonts.js';
+/**
+ * Client-side i18n provider that wraps the application with react-i18next.
+ *
+ * Receives the initial language from the server-side layout and sets it
+ * on the i18next instance. Language changes at runtime (e.g. from settings)
+ * call i18n.changeLanguage() which re-renders all translated components.
+ *
+ * Also handles lazy-loading RTL fonts (Noto Sans Arabic/Hebrew) when the
+ * active language requires them.
+ */
+export function I18nProvider({ initialLanguage, children }) {
+    useEffect(() => {
+        if (webI18n.language !== initialLanguage) {
+            webI18n.changeLanguage(initialLanguage);
+        }
+        // Apply RTL font for the initial language (lazy-loads if needed)
+        applyRtlFont(initialLanguage);
+    }, [initialLanguage]);
+    // Listen for runtime language changes and apply/remove RTL fonts
+    useEffect(() => {
+        function onLanguageChanged(lng) {
+            applyRtlFont(lng);
+        }
+        webI18n.on('languageChanged', onLanguageChanged);
+        return () => {
+            webI18n.off('languageChanged', onLanguageChanged);
+        };
+    }, []);
+    return _jsx(I18nextProvider, { i18n: webI18n, children: children });
+}

package/dist/src/presentation/web/components/ui/alert-dialog.js

@@ -24,7 +24,7 @@ function AlertDialogContent({ className, size = 'default', ...props }) {
     return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn('bg-background group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg', className), ...props })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]', className), ...props }));
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]', className), ...props }));
 }
 function AlertDialogFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end', className), ...props }));

package/dist/src/presentation/web/components/ui/alert.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils.js';
-const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7', {
+const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:top-4 [&>svg]:start-4 [&>svg]:text-foreground [&>svg+div]:translate-y-[-3px] [&>svg~*]:ps-7', {
     variants: {
         variant: {
             default: 'bg-background text-foreground',

package/dist/src/presentation/web/components/ui/checkbox-group.js

@@ -19,6 +19,6 @@ function CheckboxGroup({ label, description, parentAriaLabel, options, value, on
         onValueChange({ ...value, [id]: checked });
     };
     const parentId = `${label.toLowerCase().replace(/\s+/g, '-')}-group`;
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex cursor-pointer items-start gap-2", children: [_jsx(Checkbox, { id: parentId, className: "mt-0.75", checked: parentIndeterminate ? 'indeterminate' : parentChecked, onCheckedChange: handleParentToggle, disabled: disabled, "aria-label": parentAriaLabel ?? `${label} select all` }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: parentId, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: parentId, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }), _jsx("div", { className: "flex flex-col gap-3 pl-6", children: options.map((option) => (_jsx(CheckboxGroupItem, { id: option.id, label: option.label, description: option.description, checked: value[option.id] ?? false, onCheckedChange: (checked) => handleItemChange(option.id, checked), disabled: disabled }, option.id))) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex cursor-pointer items-start gap-2", children: [_jsx(Checkbox, { id: parentId, className: "mt-0.75", checked: parentIndeterminate ? 'indeterminate' : parentChecked, onCheckedChange: handleParentToggle, disabled: disabled, "aria-label": parentAriaLabel ?? `${label} select all` }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: parentId, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: parentId, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }), _jsx("div", { className: "flex flex-col gap-3 ps-6", children: options.map((option) => (_jsx(CheckboxGroupItem, { id: option.id, label: option.label, description: option.description, checked: value[option.id] ?? false, onCheckedChange: (checked) => handleItemChange(option.id, checked), disabled: disabled }, option.id))) })] }));
 }
 export { CheckboxGroup };

package/dist/src/presentation/web/components/ui/command.js

@@ -11,7 +11,7 @@ import { cn } from '../../lib/utils.js';
  */
 const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className), ...props })));
 Command.displayName = 'Command';
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b px-3", children: [_jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), _jsx("input", { ref: ref, className: cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] })));
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b px-3", children: [_jsx(Search, { className: "me-2 h-4 w-4 shrink-0 opacity-50" }), _jsx("input", { ref: ref, className: cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] })));
 CommandInput.displayName = 'CommandInput';
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className), ...props })));
 CommandList.displayName = 'CommandList';

package/dist/src/presentation/web/components/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAkBjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAElF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAkBjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA6B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKlF,CAAC;AAGF,QAAA,MAAM,WAAW,oKASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/src/presentation/web/components/ui/dialog.js

@@ -15,9 +15,9 @@ const DialogOverlay = React.forwardRef(({ className, onClick, ...props }, ref) =
         onClick?.(e);
     }, ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-150 sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-150 sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute end-4 top-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-start', className), ...props }));
 DialogHeader.displayName = 'DialogHeader';
 const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
 DialogFooter.displayName = 'DialogFooter';

package/dist/src/presentation/web/components/ui/dialog.stories.js

@@ -13,7 +13,7 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Edit profile" }), _jsx(DialogDescription, { children: "Make changes to your profile here. Click save when you're done." })] }), _jsxs("div", { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "name", className: "text-right", children: "Name" }), _jsx(Input, { id: "name", defaultValue: "Pedro Duarte", className: "col-span-3" })] }), _jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "username", className: "text-right", children: "Username" }), _jsx(Input, { id: "username", defaultValue: "@peduarte", className: "col-span-3" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "submit", children: "Save changes" }) })] })] })),
+    render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Edit profile" }), _jsx(DialogDescription, { children: "Make changes to your profile here. Click save when you're done." })] }), _jsxs("div", { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "name", className: "text-end", children: "Name" }), _jsx(Input, { id: "name", defaultValue: "Pedro Duarte", className: "col-span-3" })] }), _jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "username", className: "text-end", children: "Username" }), _jsx(Input, { id: "username", defaultValue: "@peduarte", className: "col-span-3" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "submit", children: "Save changes" }) })] })] })),
 };
 export const WithForm = {
     render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Create Account" }) }), _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Create account" }), _jsx(DialogDescription, { children: "Enter your email below to create your account." })] }), _jsxs("div", { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "m@example.com" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "submit", className: "w-full", children: "Create account" }) })] })] })),

package/dist/src/presentation/web/components/ui/drawer.js

@@ -30,7 +30,7 @@ function DrawerContent({ className, children, direction = 'bottom', showCloseBut
                 // Override vaul's user-select:none on [data-vaul-drawer] so text is selectable
                 userSelect: 'text',
                 ...(props.style ?? {}),
-            }, ...props, children: [children, showCloseButton ? (_jsxs(DrawerPrimitive.Close, { className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] }) }));
+            }, ...props, children: [children, showCloseButton ? (_jsxs(DrawerPrimitive.Close, { className: "ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] }) }));
 }
 function DrawerHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex flex-col gap-1.5 p-4', className), ...props }));

package/dist/src/presentation/web/components/ui/dropdown-menu.js

@@ -10,24 +10,24 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', inset && 'pl-8', className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', inset && 'ps-8', className), ...props, children: [children, _jsx(ChevronRight, { className: "ms-auto" })] })));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg', className), ...props })));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md', className), ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0', inset && 'pl-8', className), ...props })));
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0', inset && 'ps-8', className), ...props })));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), checked: checked, ...props, children: [_jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className), ...props })));
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', className), ...props })));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn('bg-muted -mx-1 my-1 h-px', className), ...props })));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => {
-    return (_jsx("span", { className: cn('ml-auto text-xs tracking-widest opacity-60', className), ...props }));
+    return (_jsx("span", { className: cn('ms-auto text-xs tracking-widest opacity-60', className), ...props }));
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/src/presentation/web/components/ui/scroll-area.js

@@ -6,6 +6,6 @@ function ScrollArea({ className, children, ...props }) {
     return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:block!", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
 }
 function ScrollBar({ className, orientation = 'vertical', ...props }) {
-    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-s border-s-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
 }
 export { ScrollArea, ScrollBar };

package/dist/src/presentation/web/components/ui/select.js

@@ -19,7 +19,7 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute end-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('bg-muted -mx-1 my-1 h-px', className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/src/presentation/web/components/ui/sheet.js

@@ -23,7 +23,7 @@ function SheetContent({ className, children, side = 'right', showCloseButton = t
                     'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm', side === 'left' &&
                     'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm', side === 'top' &&
                     'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b', side === 'bottom' &&
-                    'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t', className), ...props, children: [children, showCloseButton ? (_jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+                    'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t', className), ...props, children: [children, showCloseButton ? (_jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-1.5 p-4', className), ...props }));

package/dist/src/presentation/web/components/ui/sidebar.js

@@ -134,7 +134,7 @@ function SidebarRail({ className, ...props }) {
     return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
 }
 function SidebarInset({ className, ...props }) {
-    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2', className), ...props }));
 }
 function SidebarInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('bg-background h-8 w-full shadow-none', className), ...props }));
@@ -160,7 +160,7 @@ function SidebarGroupLabel({ className, asChild = false, ...props }) {
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot.Root : 'button';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
@@ -173,7 +173,7 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
@@ -206,13 +206,13 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = 'defau
 }
 function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
     const Comp = asChild ? Slot.Root : 'button';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
             'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className), ...props }));
 }
 function SidebarMenuBadge({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     // Random width between 50 to 90%.
@@ -224,7 +224,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
                 } })] }));
 }
 function SidebarMenuSub({ className, ...props }) {
-    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 function SidebarMenuSubItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn('group/menu-sub-item relative', className), ...props }));

package/dist/src/presentation/web/hooks/use-sound-action.stories.js

@@ -39,7 +39,7 @@ function ActionSoundButton({ action }) {
         setPlaying(true);
         setTimeout(() => setPlaying(false), 600);
     };
-    return (_jsxs(Button, { size: "sm", variant: playing ? 'default' : 'outline', onClick: handleClick, className: "min-w-[160px] font-mono text-xs", children: [action, _jsxs("span", { className: "text-muted-foreground ml-1 text-[10px]", children: ["(", entry.sound, " @ ", entry.volume, ")"] })] }));
+    return (_jsxs(Button, { size: "sm", variant: playing ? 'default' : 'outline', onClick: handleClick, className: "min-w-[160px] font-mono text-xs", children: [action, _jsxs("span", { className: "text-muted-foreground ms-1 text-[10px]", children: ["(", entry.sound, " @ ", entry.volume, ")"] })] }));
 }
 /* ------------------------------------------------------------------ */
 /*  Full catalog                                                      */

package/dist/src/presentation/web/lib/i18n.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Web UI i18n configuration.
+ *
+ * Initializes i18next with react-i18next for the web presentation layer.
+ * Uses the common and web namespaces. English translations are bundled
+ * inline; other languages will be loaded on demand in a future phase.
+ */
+import { type i18n } from 'i18next';
+declare const FALLBACK_LANGUAGE = "en";
+declare const NAMESPACES: readonly ["common", "web"];
+/** Singleton web i18next instance. */
+declare const webI18n: i18n;
+export default webI18n;
+export { FALLBACK_LANGUAGE, NAMESPACES };
+//# sourceMappingURL=i18n.d.ts.map

package/dist/src/presentation/web/lib/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAO7C,QAAA,MAAM,iBAAiB,OAAO,CAAC;AAC/B,QAAA,MAAM,UAAU,4BAA6B,CAAC;AAiC9C,sCAAsC;AACtC,QAAA,MAAM,OAAO,EAAE,IAA2B,CAAC;AAE3C,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC"}

package/dist/src/presentation/web/lib/i18n.js

@@ -0,0 +1,46 @@
+/**
+ * Web UI i18n configuration.
+ *
+ * Initializes i18next with react-i18next for the web presentation layer.
+ * Uses the common and web namespaces. English translations are bundled
+ * inline; other languages will be loaded on demand in a future phase.
+ */
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+// Import English translations inline — they are always needed as fallback
+import commonEn from '../../../../translations/en/common.json';
+import webEn from '../../../../translations/en/web.json';
+const FALLBACK_LANGUAGE = 'en';
+const NAMESPACES = ['common', 'web'];
+/**
+ * Create and configure the web i18next instance.
+ *
+ * Returns a singleton instance — multiple calls return the same object.
+ * Use `changeLanguage()` on the returned instance to switch locales at runtime.
+ */
+function createI18nInstance() {
+    const instance = i18next.createInstance();
+    instance.use(initReactI18next).init({
+        lng: FALLBACK_LANGUAGE,
+        fallbackLng: FALLBACK_LANGUAGE,
+        defaultNS: 'common',
+        ns: [...NAMESPACES],
+        resources: {
+            en: {
+                common: commonEn,
+                web: webEn,
+            },
+        },
+        interpolation: {
+            escapeValue: false, // React already escapes output
+        },
+        react: {
+            useSuspense: false, // Avoid suspense boundaries for i18n
+        },
+    });
+    return instance;
+}
+/** Singleton web i18next instance. */
+const webI18n = createI18nInstance();
+export default webI18n;
+export { FALLBACK_LANGUAGE, NAMESPACES };

package/dist/src/presentation/web/lib/language.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Server-side language preference utilities for the Web UI.
+ *
+ * Reads the language preference from the Settings singleton
+ * and determines the text direction (LTR/RTL).
+ */
+/**
+ * Check whether a language code requires right-to-left text direction.
+ */
+export declare function isRtlLanguage(language: string): boolean;
+interface LanguagePreference {
+    language: string;
+    dir: 'ltr' | 'rtl';
+}
+/**
+ * Get the user's language preference and computed text direction.
+ *
+ * Reads from the Settings singleton (better-sqlite3, synchronous).
+ * Falls back to English if settings are not available (e.g. during build).
+ */
+export declare function getLanguagePreference(): LanguagePreference;
+export {};
+//# sourceMappingURL=language.d.ts.map

package/dist/src/presentation/web/lib/language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/language.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEvD;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,KAAK,GAAG,KAAK,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,IAAI,kBAAkB,CAe1D"}

package/dist/src/presentation/web/lib/language.js

@@ -0,0 +1,37 @@
+/**
+ * Server-side language preference utilities for the Web UI.
+ *
+ * Reads the language preference from the Settings singleton
+ * and determines the text direction (LTR/RTL).
+ */
+import { hasSettings, getSettings } from '../../../../packages/core/src/infrastructure/services/settings.service.js';
+import { Language } from '../../../../packages/core/src/domain/generated/output.js';
+const RTL_LANGUAGES = new Set([Language.Arabic, Language.Hebrew]);
+const DEFAULT_LANGUAGE = Language.English;
+/**
+ * Check whether a language code requires right-to-left text direction.
+ */
+export function isRtlLanguage(language) {
+    return RTL_LANGUAGES.has(language);
+}
+/**
+ * Get the user's language preference and computed text direction.
+ *
+ * Reads from the Settings singleton (better-sqlite3, synchronous).
+ * Falls back to English if settings are not available (e.g. during build).
+ */
+export function getLanguagePreference() {
+    let language = DEFAULT_LANGUAGE;
+    try {
+        if (hasSettings()) {
+            language = getSettings().user.preferredLanguage ?? DEFAULT_LANGUAGE;
+        }
+    }
+    catch {
+        // Settings not initialized (build, SSG, or first run)
+    }
+    return {
+        language,
+        dir: isRtlLanguage(language) ? 'rtl' : 'ltr',
+    };
+}

package/dist/src/presentation/web/lib/rtl-fonts.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Lazy font loader for RTL languages (Arabic and Hebrew).
+ *
+ * Dynamically loads Noto Sans Arabic or Noto Sans Hebrew from Google Fonts
+ * when the user switches to an RTL language. Fonts are cached after first
+ * load — subsequent calls for the same language are no-ops.
+ *
+ * This module must only be imported in client components (uses DOM APIs).
+ */
+/**
+ * Load the appropriate font for an RTL language and apply it to the document.
+ *
+ * For non-RTL languages this removes any previously applied RTL font class.
+ * The Google Fonts stylesheet is injected as a `<link>` element in `<head>`,
+ * which the browser caches normally (no re-download on subsequent visits).
+ * Duplicate link elements are avoided by checking DOM existence.
+ */
+export declare function applyRtlFont(language: string): void;
+//# sourceMappingURL=rtl-fonts.d.ts.map

package/dist/src/presentation/web/lib/rtl-fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtl-fonts.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/rtl-fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAeH;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CA4BnD"}