@svadmin/ui 0.38.2 → 0.38.5

package/dist/components/TaskQueueDrawer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { ListTodo, Loader2, Plus, Search, RefreshCw } from '@lucide/svelte';
   import { getTaskProvider, useSubmitTask, useTaskList } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import type { TaskProvider, TaskRecord } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -21,6 +21,8 @@
     resolveTaskTitle,
   } from './task-utils.js';
 
+  const i18n = useTranslation();
+
   type AutoRefreshValue = '0' | '5000' | '15000' | '30000';
   type TaskTab = 'tasks' | 'dlq';
 
@@ -44,14 +46,14 @@
   let autoRefresh = $state<AutoRefreshValue>('15000');
   let submitTaskName = $state('');
   let submitIdempotencyKey = $state('');
-  let submitBodyText = $state(t('task.bodyPlaceholder'));
+  let submitBodyText = $state(i18n.t('task.bodyPlaceholder'));
   let submitError = $state<string | null>(null);
   let submitOpen = $state(false);
 
   const refreshInterval = $derived.by<number | false>(() =>
     autoRefresh === '0' ? false : Number(autoRefresh),
   );
-  const resolvedTitle = $derived(title ?? t('task.drawerTitle'));
+  const resolvedTitle = $derived(title ?? i18n.t('task.drawerTitle'));
 
   const taskQuery = useTaskList({
     get taskProvider() {
@@ -158,14 +160,14 @@
   function resetSubmitForm() {
     submitTaskName = '';
     submitIdempotencyKey = '';
-    submitBodyText = t('task.bodyPlaceholder');
+    submitBodyText = i18n.t('task.bodyPlaceholder');
     submitError = null;
   }
 
   async function handleSubmitTask() {
     submitError = null;
     if (!submitTaskName.trim()) {
-      submitError = t('validation.required');
+      submitError = i18n.t('validation.required');
       return;
     }
 
@@ -174,7 +176,7 @@
       try {
         body = JSON.parse(submitBodyText) as Record<string, unknown>;
       } catch {
-        submitError = t('task.invalidJson');
+        submitError = i18n.t('task.invalidJson');
         return;
       }
     }
@@ -197,7 +199,7 @@
         dlqQuery.refetch?.(),
       ]);
     } catch (error) {
-      submitError = error instanceof Error ? error.message : t('task.submitFailed');
+      submitError = error instanceof Error ? error.message : i18n.t('task.submitFailed');
     }
   }
 
@@ -232,16 +234,16 @@
         <div class="flex flex-wrap items-center gap-2">
           <ListTodo class="h-5 w-5 text-muted-foreground" />
           <h2 class="text-sm font-semibold">{resolvedTitle}</h2>
-          <Badge variant="secondary" class="text-xs">{t('task.activeCount', { count: runningCount })}</Badge>
+          <Badge variant="secondary" class="text-xs">{i18n.t('task.activeCount', { count: runningCount })}</Badge>
           {#if allTasks[0] && resolveTaskCreatedAt(allTasks[0])}
-            <span class="text-xs text-muted-foreground">{t('task.lastQueuedAt', { time: formatTime(resolveTaskCreatedAt(allTasks[0])) })}</span>
+            <span class="text-xs text-muted-foreground">{i18n.t('task.lastQueuedAt', { time: formatTime(resolveTaskCreatedAt(allTasks[0])) })}</span>
           {/if}
         </div>
       </div>
 
       {#if !taskProvider}
         <div class="flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground">
-          {t('common.configRequired')}
+          {i18n.t('common.configRequired')}
         </div>
       {:else}
         <div class="grid min-h-0 flex-1 gap-0 lg:grid-cols-[minmax(0,1.2fr)_minmax(340px,0.8fr)]">
@@ -252,11 +254,11 @@
                   <Tabs.Root value={activeTab} class="w-full">
                     <Tabs.List class="inline-flex rounded-lg border border-border bg-muted/40 p-1">
                       <Tabs.Trigger value="tasks" active={activeTab === 'tasks'} onclick={() => activeTab = 'tasks'}>
-                        {t('task.tabTasks')}
+                        {i18n.t('task.tabTasks')}
                         <Badge variant="outline" class="ml-1 text-[10px]">{taskQuery.data?.total ?? allTasks.length}</Badge>
                       </Tabs.Trigger>
                       <Tabs.Trigger value="dlq" active={activeTab === 'dlq'} onclick={() => activeTab = 'dlq'}>
-                        {t('task.tabDlq')}
+                        {i18n.t('task.tabDlq')}
                         <Badge variant="outline" class="ml-1 text-[10px]">{dlqQuery.data?.total ?? dlqTasks.length}</Badge>
                       </Tabs.Trigger>
                     </Tabs.List>
@@ -264,11 +266,11 @@
                   <div class="ml-auto flex items-center gap-2">
                     <Button variant="outline" size="sm" onclick={() => void refreshCurrentTab()}>
                       <RefreshCw class="mr-1.5 h-3.5 w-3.5" />
-                      {t('common.refresh')}
+                      {i18n.t('common.refresh')}
                     </Button>
                     <Button size="sm" onclick={() => submitOpen = !submitOpen}>
                       <Plus class="mr-1.5 h-3.5 w-3.5" />
-                      {t('task.submitAction')}
+                      {i18n.t('task.submitAction')}
                     </Button>
                   </div>
                 </div>
@@ -278,21 +280,21 @@
                     <Search class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       class="pl-9"
-                      placeholder={t('task.searchPlaceholder')}
+                      placeholder={i18n.t('task.searchPlaceholder')}
                       bind:value={searchQuery}
                     />
                   </div>
-                  <Select bind:value={statusFilter} aria-label={t('task.statusFilterLabel')}>
-                    <option value="all">{t('task.statusAll')}</option>
+                  <Select bind:value={statusFilter} aria-label={i18n.t('task.statusFilterLabel')}>
+                    <option value="all">{i18n.t('task.statusAll')}</option>
                     {#each availableStatuses as status, _i (_i)}
                       <option value={status}>{status}</option>
                     {/each}
                   </Select>
-                  <Select bind:value={autoRefresh} aria-label={t('task.autoRefreshLabel')}>
-                    <option value="0">{t('task.refreshOff')}</option>
-                    <option value="5000">{t('task.refresh5s')}</option>
-                    <option value="15000">{t('task.refresh15s')}</option>
-                    <option value="30000">{t('task.refresh30s')}</option>
+                  <Select bind:value={autoRefresh} aria-label={i18n.t('task.autoRefreshLabel')}>
+                    <option value="0">{i18n.t('task.refreshOff')}</option>
+                    <option value="5000">{i18n.t('task.refresh5s')}</option>
+                    <option value="15000">{i18n.t('task.refresh15s')}</option>
+                    <option value="30000">{i18n.t('task.refresh30s')}</option>
                   </Select>
                 </div>
               </div>
@@ -300,20 +302,20 @@
               {#if submitOpen}
                 <Card.Root class="border-border/60 shadow-none">
                   <Card.Header class="pb-3">
-                    <Card.Title class="text-base">{t('task.submitTitle')}</Card.Title>
-                    <Card.Description>{t('task.submitDescription')}</Card.Description>
+                    <Card.Title class="text-base">{i18n.t('task.submitTitle')}</Card.Title>
+                    <Card.Description>{i18n.t('task.submitDescription')}</Card.Description>
                   </Card.Header>
                   <Card.Content class="space-y-4 pt-0">
                     <div class="space-y-2">
-                      <Label for="task-name">{t('task.taskNameLabel')}</Label>
+                      <Label for="task-name">{i18n.t('task.taskNameLabel')}</Label>
                       <Input id="task-name" bind:value={submitTaskName} placeholder="image.generate" />
                     </div>
                     <div class="space-y-2">
-                      <Label for="task-idempotency-key">{t('task.idempotencyKeyLabel')}</Label>
+                      <Label for="task-idempotency-key">{i18n.t('task.idempotencyKeyLabel')}</Label>
                       <Input id="task-idempotency-key" bind:value={submitIdempotencyKey} placeholder="poster-2026-04-19" />
                     </div>
                     <div class="space-y-2">
-                      <Label for="task-body">{t('task.bodyLabel')}</Label>
+                      <Label for="task-body">{i18n.t('task.bodyLabel')}</Label>
                       <Textarea id="task-body" bind:value={submitBodyText} class="min-h-[140px] font-mono text-xs" />
                     </div>
                     {#if submitError}
@@ -321,13 +323,13 @@
                     {/if}
                     <div class="flex flex-wrap justify-end gap-2">
                       <Button variant="ghost" onclick={() => { submitOpen = false; submitError = null; }}>
-                        {t('common.cancel')}
+                        {i18n.t('common.cancel')}
                       </Button>
                       <Button onclick={() => void handleSubmitTask()} disabled={submitTask.mutation.isPending}>
                         {#if submitTask.mutation.isPending}
                           <Loader2 class="mr-1.5 h-3.5 w-3.5 animate-spin" />
                         {/if}
-                        {t('task.submitAction')}
+                        {i18n.t('task.submitAction')}
                       </Button>
                     </div>
                   </Card.Content>
@@ -338,8 +340,8 @@
                 tasks={filteredTasks}
                 {taskProvider}
                 dlq={activeTab === 'dlq'}
-                title={activeTab === 'dlq' ? t('task.dlqTitle') : t('task.listTitle')}
-                emptyText={activeTab === 'dlq' ? t('task.noDlq') : t('task.noTasks')}
+                title={activeTab === 'dlq' ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')}
+                emptyText={activeTab === 'dlq' ? i18n.t('task.noDlq') : i18n.t('task.noTasks')}
                 onSelect={(task) => {
                   selectedTaskId = task.id;
                 }}
@@ -361,7 +363,7 @@
                 />
               {:else}
                 <div class="flex h-full min-h-[280px] items-center justify-center rounded-lg border border-dashed border-border/60 bg-background/70 text-center text-sm text-muted-foreground">
-                  {t('task.selectHint')}
+                  {i18n.t('task.selectHint')}
                 </div>
               {/if}
             </div>

package/dist/components/TaskStatusBadge.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Ban, Clock3, Loader2, CheckCircle2, AlertTriangle, CircleDashed } from '@lucide/svelte';
   import { Badge } from './ui/badge/index.js';
   import { normalizeTaskStatus } from './task-utils.js';
 
+  const i18n = useTranslation();
+
   let {
     status = 'pending',
     showIcon = true,
@@ -19,7 +22,7 @@
 
   function translateStatus(value: string) {
     const key = `task.status.${value}`;
-    const translated = t(key);
+    const translated = i18n.t(key);
     if (translated !== key) return translated;
     return value.charAt(0).toUpperCase() + value.slice(1);
   }

package/dist/components/Toast.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-  import { Toaster, toast as sonner } from 'sonner-svelte';
+  import { onMount } from 'svelte';
+  import { Toaster, toast as sonner, type ToasterProps } from 'svelte-sonner';
   import { getResolvedTheme, getToastQueue, consumeToastQueue, getPromiseQueue, consumePromiseQueue } from '@svadmin/core';
+  import { registerToastHost, type ToastHostRegistration } from './toast-host.svelte.js';
 
+  let host = $state<ToastHostRegistration | null>(null);
+  const isActiveHost = $derived(host?.isActive() ?? false);
   const theme = $derived(getResolvedTheme() === 'dark' ? 'dark' : 'light');
 
+  onMount(() => {
+    const registration = registerToastHost();
+    host = registration;
+
+    return () => registration.unregister();
+  });
+
   $effect(() => {
+    if (!isActiveHost) return;
     const queue = getToastQueue();
     if (queue.length > 0) {
       for (const t of queue) {
@@ -21,6 +32,7 @@
   });
 
   $effect(() => {
+    if (!isActiveHost) return;
     const pQueue = getPromiseQueue();
     if (pQueue.length > 0) {
       for (const p of pQueue) {
@@ -41,7 +53,9 @@
         toast: 'font-sans',
       },
     }
-  } as any);
+  } satisfies ToasterProps);
 </script>
 
-<Toaster {...toasterProps} />
+{#if isActiveHost}
+  <Toaster {...toasterProps} />
+{/if}

package/dist/components/TooltipButton.svelte

@@ -34,12 +34,34 @@
     children,
     ...restProps
   }: Props = $props();
+
+  let open = $state(false);
+
+  function handleClick(event: MouseEvent, primitiveOnclick?: (event: MouseEvent) => void) {
+    primitiveOnclick?.(event);
+    open = false;
+    onclick?.(event);
+  }
+
+  function mergeButtonProps(primitiveProps: Record<string, any>) {
+    const merged: Record<string, any> = { ...primitiveProps, ...restProps };
+    for (const [key, userHandler] of Object.entries(restProps)) {
+      const primitiveHandler = primitiveProps[key];
+      if (!key.startsWith('on') || typeof userHandler !== 'function' || typeof primitiveHandler !== 'function') continue;
+      merged[key] = (event: Event) => {
+        primitiveHandler(event);
+        userHandler(event);
+      };
+    }
+    return merged;
+  }
 </script>
 
-<Tooltip.Root>
-  <Tooltip.Trigger>
+<Tooltip.Root bind:open>
+  <Tooltip.Trigger aria-describedby={restProps['aria-describedby']}>
     {#snippet child({ props })}
-      {@const buttonProps = { ...props, ...restProps, href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, onclick, disabled, tabindex } as any}
+      {@const primitiveOnclick = props.onclick as ((event: MouseEvent) => void) | undefined}
+      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, 'aria-describedby': props['aria-describedby'], onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex } as any}
       <Button {...buttonProps}>
         {@render children()}
       </Button>

package/dist/components/TwoFactorAuthPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from './ui/card/index.js';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
@@ -8,6 +8,8 @@
   import { Separator } from './ui/separator/index.js';
   import { Shield, Copy, CheckCircle2, AlertTriangle, ArrowRight, ArrowLeft } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   type Step = 'intro' | 'scan' | 'verify' | 'recovery';
 
   let currentStep = $state<Step>('intro');
@@ -45,7 +47,7 @@
   function handleVerify() {
     verifyError = '';
     if (verificationCode.length !== 6) {
-      verifyError = t('auth.twoFactorEnterCode');
+      verifyError = i18n.t('auth.twoFactorEnterCode');
       return;
     }
     currentStep = 'recovery';
@@ -89,34 +91,34 @@
             <Shield class="h-8 w-8" />
           </div>
           <div class="space-y-2">
-            <h2 class="text-2xl font-semibold text-foreground">{t('auth.twoFactorSetup')}</h2>
-            <p class="text-sm text-muted-foreground">{t('security.twoFactorDescription')}</p>
+            <h2 class="text-2xl font-semibold text-foreground">{i18n.t('auth.twoFactorSetup')}</h2>
+            <p class="text-sm text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
           </div>
           <div class="space-y-3 text-left">
             <div class="flex items-start gap-3 rounded-xl border p-3">
               <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">1</div>
               <div>
-                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorScanQR')}</p>
+                <p class="text-sm font-medium text-foreground">{i18n.t('auth.twoFactorScanQR')}</p>
                 <p class="text-xs text-muted-foreground">Google Authenticator, Authy, etc.</p>
               </div>
             </div>
             <div class="flex items-start gap-3 rounded-xl border p-3">
               <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">2</div>
               <div>
-                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorEnterCode')}</p>
+                <p class="text-sm font-medium text-foreground">{i18n.t('auth.twoFactorEnterCode')}</p>
                 <p class="text-xs text-muted-foreground">6-digit code from your authenticator</p>
               </div>
             </div>
             <div class="flex items-start gap-3 rounded-xl border p-3">
               <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">3</div>
               <div>
-                <p class="text-sm font-medium text-foreground">{t('auth.twoFactorSaveRecovery')}</p>
-                <p class="text-xs text-muted-foreground">{t('auth.twoFactorRecoveryHint')}</p>
+                <p class="text-sm font-medium text-foreground">{i18n.t('auth.twoFactorSaveRecovery')}</p>
+                <p class="text-xs text-muted-foreground">{i18n.t('auth.twoFactorRecoveryHint')}</p>
               </div>
             </div>
           </div>
           <Button class="w-full" onclick={startSetup}>
-            {t('auth.twoFactorSetup')} <ArrowRight class="h-4 w-4 ml-2" />
+            {i18n.t('auth.twoFactorSetup')} <ArrowRight class="h-4 w-4 ml-2" />
           </Button>
         </Card.CardContent>
       </Card.Card>
@@ -126,7 +128,7 @@
       <Card.Card class="border-border/60">
         <Card.CardContent class="space-y-6 p-8">
           <div class="text-center space-y-2">
-            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorScanQR')}</h2>
+            <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorScanQR')}</h2>
             <p class="text-sm text-muted-foreground">Use your authenticator app to scan the code below.</p>
           </div>
           <div class="mx-auto flex h-48 w-48 items-center justify-center rounded-xl border-2 border-dashed border-border/60 bg-muted/20">
@@ -138,10 +140,10 @@
           </div>
           <div class="flex gap-3">
             <Button variant="outline" class="flex-1" onclick={() => currentStep = 'intro'}>
-              <ArrowLeft class="h-4 w-4 mr-2" />{t('common.back')}
+              <ArrowLeft class="h-4 w-4 mr-2" />{i18n.t('common.back')}
             </Button>
             <Button class="flex-1" onclick={proceedToVerify}>
-              {t('common.next')} <ArrowRight class="h-4 w-4 ml-2" />
+              {i18n.t('common.next')} <ArrowRight class="h-4 w-4 ml-2" />
             </Button>
           </div>
         </Card.CardContent>
@@ -152,8 +154,8 @@
       <Card.Card class="border-border/60">
         <Card.CardContent class="space-y-6 p-8">
           <div class="text-center space-y-2">
-            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorVerify')}</h2>
-            <p class="text-sm text-muted-foreground">{t('auth.twoFactorEnterCode')}</p>
+            <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorVerify')}</h2>
+            <p class="text-sm text-muted-foreground">{i18n.t('auth.twoFactorEnterCode')}</p>
           </div>
 
           {#if verifyError}
@@ -178,10 +180,10 @@
 
           <div class="flex gap-3">
             <Button variant="outline" class="flex-1" onclick={() => currentStep = 'scan'}>
-              <ArrowLeft class="h-4 w-4 mr-2" />{t('common.back')}
+              <ArrowLeft class="h-4 w-4 mr-2" />{i18n.t('common.back')}
             </Button>
             <Button class="flex-1" onclick={handleVerify}>
-              {t('common.confirm')} <ArrowRight class="h-4 w-4 ml-2" />
+              {i18n.t('common.confirm')} <ArrowRight class="h-4 w-4 ml-2" />
             </Button>
           </div>
         </Card.CardContent>
@@ -195,8 +197,8 @@
             <div class="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-xl bg-green-500/10 text-green-500">
               <CheckCircle2 class="h-6 w-6" />
             </div>
-            <h2 class="text-xl font-semibold text-foreground">{t('auth.twoFactorRecovery')}</h2>
-            <p class="text-sm text-muted-foreground">{t('auth.twoFactorRecoveryHint')}</p>
+            <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorRecovery')}</h2>
+            <p class="text-sm text-muted-foreground">{i18n.t('auth.twoFactorRecoveryHint')}</p>
           </div>
 
           <div class="rounded-xl border bg-muted/20 p-4">
@@ -210,13 +212,13 @@
           <div class="flex gap-3">
             <Button variant="outline" class="flex-1" onclick={copyRecoveryCodes}>
               {#if copiedRecovery}
-                <CheckCircle2 class="h-4 w-4 mr-2" />{t('common.copied')}
+                <CheckCircle2 class="h-4 w-4 mr-2" />{i18n.t('common.copied')}
               {:else}
-                <Copy class="h-4 w-4 mr-2" />{t('common.copyAll')}
+                <Copy class="h-4 w-4 mr-2" />{i18n.t('common.copyAll')}
               {/if}
             </Button>
             <Button class="flex-1" onclick={completeSetup}>
-              {t('account.completeSetup')} <ArrowRight class="h-4 w-4 ml-2" />
+              {i18n.t('account.completeSetup')} <ArrowRight class="h-4 w-4 ml-2" />
             </Button>
           </div>
         </Card.CardContent>
@@ -230,15 +232,15 @@
             <Shield class="h-8 w-8" />
           </div>
           <div class="space-y-2">
-            <h2 class="text-2xl font-semibold text-foreground">{t('auth.twoFactorVerifySuccess')}</h2>
-            <p class="text-sm text-muted-foreground">{t('security.twoFactorActive')}</p>
+            <h2 class="text-2xl font-semibold text-foreground">{i18n.t('auth.twoFactorVerifySuccess')}</h2>
+            <p class="text-sm text-muted-foreground">{i18n.t('security.twoFactorActive')}</p>
           </div>
           <Badge variant="secondary" class="bg-green-500/10 text-green-600">
             <CheckCircle2 class="h-3 w-3 mr-1" />2FA Active
           </Badge>
           <Separator />
           <Button variant="destructive" onclick={disable2fa}>
-            {t('auth.twoFactorDisable')}
+            {i18n.t('auth.twoFactorDisable')}
           </Button>
         </Card.CardContent>
       </Card.Card>

package/dist/components/UndoableNotification.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { Button } from './ui/button/index.js';
   import { Progress } from './ui/progress/index.js';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { slide } from 'svelte/transition';
   import { X, Undo2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { message, duration = 5000, onUndo, onTimeout } = $props<{
     message: string;
     duration?: number;
@@ -56,7 +59,7 @@
       <div class="flex items-center gap-1 flex-shrink-0">
         <Button variant="ghost" size="sm" onclick={handleUndo} class="font-semibold text-primary">
           <Undo2 class="h-3.5 w-3.5 mr-1" />
-          {t('common.undo')}
+          {i18n.t('common.undo')}
         </Button>
         <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss}>
           <X class="h-3.5 w-3.5" />

package/dist/components/UpdatePasswordPage.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-  import { useUpdatePassword } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useUpdatePassword } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Button } from './ui/button/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
   import { ShieldCheck, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { title = 'Admin' } = $props<{
     title?: string;
   }>();
 
+  const adminContext = captureAdminContext();
   const updatePw = useUpdatePassword();
 
   let password = $state('');
@@ -21,12 +24,12 @@
     e.preventDefault();
     error = '';
 
-    if (!password) { error = t('auth.passwordRequired'); return; }
-    if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
+    if (!password) { error = i18n.t('auth.passwordRequired'); return; }
+    if (password !== confirmPassword) { error = i18n.t('auth.passwordMismatch'); return; }
 
     const result = await updatePw.mutate({ password, confirmPassword });
     if (!result.success) {
-      error = result.error?.message ?? t('common.operationFailed');
+      error = result.error?.message ?? i18n.t('common.operationFailed');
     }
   }
 </script>
@@ -52,10 +55,10 @@
 
       <div class="space-y-4">
         <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {t('auth.resetPassword')}
+          {i18n.t('auth.resetPassword')}
         </h2>
         <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {t('auth.resetPasswordDescription')}
+          {i18n.t('auth.resetPasswordDescription')}
         </p>
       </div>
 
@@ -78,8 +81,8 @@
       </div>
 
       <div class="space-y-1 mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight">{t('auth.resetPassword')}</h1>
-        <p class="text-sm text-muted-foreground">{t('auth.resetPasswordDescription')}</p>
+        <h1 class="text-2xl font-semibold tracking-tight">{i18n.t('auth.resetPassword')}</h1>
+        <p class="text-sm text-muted-foreground">{i18n.t('auth.resetPasswordDescription')}</p>
       </div>
 
       <form onsubmit={handleSubmit} class="space-y-5">
@@ -92,7 +95,7 @@
 
         <PasswordInput
           id="new-password"
-          label={t('auth.password')}
+          label={i18n.t('auth.password')}
           bind:value={password}
           autocomplete="new-password"
           showStrength
@@ -100,7 +103,7 @@
 
         <PasswordInput
           id="confirm-password"
-          label={t('auth.confirmPassword')}
+          label={i18n.t('auth.confirmPassword')}
           bind:value={confirmPassword}
           autocomplete="new-password"
         />
@@ -109,12 +112,12 @@
           {#if updatePw.isLoading}
             <Loader2 class="h-4 w-4 animate-spin mr-2" />
           {/if}
-          {t('auth.resetPassword')}
+          {i18n.t('auth.resetPassword')}
         </Button>
 
         <div class="flex items-center justify-center mt-2">
-          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
-            {t('auth.backToLogin')}
+          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => adminContext.navigate('/login')}>
+            {i18n.t('auth.backToLogin')}
           </Button>
         </div>
       </form>

package/dist/components/VirtualTable.svelte

@@ -35,9 +35,6 @@
   }: Props<unknown> = $props();
 
   let scrollTop = $state(0);
-  let containerRef = $state<HTMLDivElement | null>(null);
-
-  const _totalHeight = $derived(items.length * rowHeight);
 
   const visibleRange = $derived.by(() => {
     const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
@@ -61,7 +58,6 @@
 </script>
 
 <div
-  bind:this={containerRef}
   class="overflow-auto {className}"
   style="height: {containerHeight}px;"
   onscroll={handleScroll}