@svadmin/ui 0.38.2 → 0.38.7

package/dist/components/PermissionMatrix.svelte

@@ -2,7 +2,10 @@
   import { Shield, AlertCircle, Check } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
+
   
   let {
     // Basic metadata lists
@@ -57,9 +60,9 @@
     <div>
       <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
         <Shield class="w-6 h-6 text-primary" />
-        {t('permissions.title') || 'Permission Matrix'}
+        {i18n.t('permissions.title') || 'Permission Matrix'}
       </h1>
-      <p class="text-muted-foreground mt-1 text-sm">{t('permissions.description') || 'Configure authorization rules for system modules and roles.'}</p>
+      <p class="text-muted-foreground mt-1 text-sm">{i18n.t('permissions.description') || 'Configure authorization rules for system modules and roles.'}</p>
     </div>
     
     <!-- Toast Feedback -->
@@ -78,7 +81,7 @@
   <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
     <!-- Left: Role Selector Sidebar -->
     <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-xl shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">{t('permissions.roles') || 'Roles'}</h2>
+      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">{i18n.t('permissions.roles') || 'Roles'}</h2>
       <div class="space-y-1 flex-1 overflow-y-auto">
         {#each roles as role, _i (_i)}
           <button 
@@ -90,7 +93,7 @@
           </button>
         {/each}
         {#if roles.length === 0}
-          <p class="text-center text-muted-foreground text-sm p-4">{t('permissions.noRoles') || 'No roles available'}</p>
+          <p class="text-center text-muted-foreground text-sm p-4">{i18n.t('permissions.noRoles') || 'No roles available'}</p>
         {/if}
       </div>
       
@@ -108,12 +111,12 @@
       <div class="p-5 border-b border-border bg-muted/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
           <div>
-            <h2 class="text-lg font-bold text-foreground">{t('permissions.currentRole') || 'Current role'}: 
-              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || (t('permissions.noneSelected') || 'None selected')}</span>
+            <h2 class="text-lg font-bold text-foreground">{i18n.t('permissions.currentRole') || 'Current role'}:
+              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || (i18n.t('permissions.noneSelected') || 'None selected')}</span>
             </h2>
-            <p class="text-xs text-muted-foreground mt-1">{t('permissions.toggleHint') || 'Toggle checkboxes to grant or revoke permissions'}</p>
+            <p class="text-xs text-muted-foreground mt-1">{i18n.t('permissions.toggleHint') || 'Toggle checkboxes to grant or revoke permissions'}</p>
           </div>
-          
+
           <!-- Slot for header extra logic -->
           {#if headerExtra}
             {@render headerExtra()}
@@ -122,7 +125,7 @@
         
         {#if conflictCount > 0}
           <div class="px-3 py-1.5 bg-destructive/10 text-destructive rounded-lg text-xs font-medium ring-1 ring-destructive/20 flex items-center gap-1.5">
-            <AlertCircle class="w-4 h-4" /> {conflictCount} {t('permissions.conflicts') || 'conflicting rules'}
+            <AlertCircle class="w-4 h-4" /> {conflictCount} {i18n.t('permissions.conflicts') || 'conflicting rules'}
           </div>
         {/if}
       </div>
@@ -132,7 +135,7 @@
         <table class="min-w-full rounded-lg overflow-hidden shadow-sm ring-1 ring-border/10">
           <thead class="bg-muted/50">
             <tr>
-              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">{t('permissions.resources') || 'Resources'}</th>
+              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">{i18n.t('permissions.resources') || 'Resources'}</th>
               {#each actions as action, _i (_i)}
                 <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground">
                   <div class="flex flex-col items-center">
@@ -146,7 +149,7 @@
           <tbody class="bg-card">
             {#if resources.length === 0}
               <tr>
-                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">{t('permissions.noResources') || 'No resources available'}</td>
+                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">{i18n.t('permissions.noResources') || 'No resources available'}</td>
               </tr>
             {/if}
             {#each resources as resource, i (i)}

package/dist/components/ProfilePage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Label } from './ui/label/index.js';
   import { Input } from './ui/input/index.js';
@@ -9,6 +9,8 @@
   import PasswordInput from './PasswordInput.svelte';
   import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   const identity = useGetIdentity();
   const updatePw = useUpdatePassword();
 
@@ -42,7 +44,7 @@
         editingProfile = false;
         identity.refetch();
       } else {
-        profileError = result.error?.message ?? t('common.operationFailed');
+        profileError = result.error?.message ?? i18n.t('common.operationFailed');
       }
     } catch (e) {
       profileError = (e as Error).message;
@@ -79,8 +81,8 @@
     pwError = '';
     pwSuccess = false;
 
-    if (!newPassword) { pwError = t('auth.passwordRequired'); return; }
-    if (newPassword !== confirmPassword) { pwError = t('auth.passwordMismatch'); return; }
+    if (!newPassword) { pwError = i18n.t('auth.passwordRequired'); return; }
+    if (newPassword !== confirmPassword) { pwError = i18n.t('auth.passwordMismatch'); return; }
 
     const result = await updatePw.mutate({
       password: newPassword,
@@ -93,7 +95,7 @@
       newPassword = '';
       confirmPassword = '';
     } else {
-      pwError = result.error?.message ?? t('common.operationFailed');
+      pwError = result.error?.message ?? i18n.t('common.operationFailed');
     }
   }
 
@@ -107,7 +109,7 @@
 
 <div class="space-y-6">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('profile.title')}</h2>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('profile.title')}</h2>
   </div>
 
   <!-- Profile Info -->
@@ -115,20 +117,20 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <User class="h-4 w-4 text-muted-foreground" />
-        {t('profile.title')}
+        {i18n.t('profile.title')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
       {#if identity.isLoading}
         <div class="flex items-center gap-2 text-muted-foreground">
           <Loader2 class="h-4 w-4 animate-spin" />
-          {t('common.loading')}
+          {i18n.t('common.loading')}
         </div>
       {:else if identity.data}
         {#if profileSuccess}
           <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
             <CheckCircle class="h-4 w-4" />
-            <Alert.Description>{t('common.updateSuccess')}</Alert.Description>
+            <Alert.Description>{i18n.t('common.updateSuccess')}</Alert.Description>
           </Alert.Root>
         {/if}
 
@@ -173,7 +175,7 @@
             {#if editingProfile}
               <div class="space-y-3 max-w-sm">
                 <div>
-                  <Label for="edit-name" class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                  <Label for="edit-name" class="text-xs text-muted-foreground">{i18n.t('profile.name')}</Label>
                   <Input id="edit-name" bind:value={editName} class="mt-1" />
                 </div>
                 {#if profileError}
@@ -182,16 +184,16 @@
                 <div class="flex gap-2">
                   <Button size="sm" onclick={saveProfile} disabled={profileSaving}>
                     {#if profileSaving}<Loader2 class="h-3 w-3 animate-spin mr-1" />{/if}
-                    {t('common.save')}
+                    {i18n.t('common.save')}
                   </Button>
                   <Button size="sm" variant="outline" onclick={() => { editingProfile = false; }}>
-                    {t('common.cancel')}
+                    {i18n.t('common.cancel')}
                   </Button>
                 </div>
               </div>
             {:else}
               <div>
-                <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                <Label class="text-xs text-muted-foreground">{i18n.t('profile.name')}</Label>
                 <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
               </div>
 
@@ -214,14 +216,14 @@
 
               {#if canUpdateProfile}
                 <Button size="sm" variant="outline" onclick={startEditProfile}>
-                  {t('common.edit')}
+                  {i18n.t('common.edit')}
                 </Button>
               {/if}
             {/if}
           </div>
         </div>
       {:else}
-        <p class="text-sm text-muted-foreground">{t('profile.notAvailable')}</p>
+        <p class="text-sm text-muted-foreground">{i18n.t('profile.notAvailable')}</p>
       {/if}
     </Card.CardContent>
   </Card.Card>
@@ -231,7 +233,7 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Lock class="h-4 w-4 text-muted-foreground" />
-        {t('profile.changePassword')}
+        {i18n.t('profile.changePassword')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
@@ -246,20 +248,20 @@
         {#if pwSuccess}
           <Alert.Root class="border-success/30 bg-success/5 text-success">
             <CheckCircle class="h-4 w-4" />
-            <Alert.Description>{t('profile.passwordChanged')}</Alert.Description>
+            <Alert.Description>{i18n.t('profile.passwordChanged')}</Alert.Description>
           </Alert.Root>
         {/if}
 
         <PasswordInput
           id="current-password"
-          label={t('profile.currentPassword')}
+          label={i18n.t('profile.currentPassword')}
           bind:value={currentPassword}
           autocomplete="current-password"
         />
 
         <PasswordInput
           id="new-password"
-          label={t('auth.password')}
+          label={i18n.t('auth.password')}
           bind:value={newPassword}
           autocomplete="new-password"
           showStrength
@@ -267,7 +269,7 @@
 
         <PasswordInput
           id="confirm-new-password"
-          label={t('auth.confirmPassword')}
+          label={i18n.t('auth.confirmPassword')}
           bind:value={confirmPassword}
           autocomplete="new-password"
         />
@@ -276,7 +278,7 @@
           {#if updatePw.isLoading}
             <Loader2 class="h-4 w-4 animate-spin mr-2" />
           {/if}
-          {t('profile.updatePassword')}
+          {i18n.t('profile.updatePassword')}
         </Button>
       </form>
     </Card.CardContent>

package/dist/components/RegisterPage.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { useRegister } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useRegister } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
@@ -9,11 +8,14 @@
   import PasswordInput from './PasswordInput.svelte';
   import { User, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { title = 'Admin', onSuccess } = $props<{
     title?: string;
     onSuccess?: () => void;
   }>();
 
+  const adminContext = captureAdminContext();
   const register = useRegister();
 
   let identifier = $state('');
@@ -25,15 +27,15 @@
     e.preventDefault();
     error = '';
 
-    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
-    if (!password) { error = t('auth.passwordRequired'); return; }
-    if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
+    if (!identifier) { error = i18n.t('auth.usernameOrEmailRequired'); return; }
+    if (!password) { error = i18n.t('auth.passwordRequired'); return; }
+    if (password !== confirmPassword) { error = i18n.t('auth.passwordMismatch'); return; }
 
     const result = await register.mutate({ email: identifier, username: identifier, password });
     if (result.success) {
       onSuccess?.();
     } else {
-      error = result.error?.message ?? t('common.operationFailed');
+      error = result.error?.message ?? i18n.t('common.operationFailed');
     }
   }
 </script>
@@ -59,10 +61,10 @@
 
       <div class="space-y-4">
         <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {t('auth.createAccount')}
+          {i18n.t('auth.createAccount')}
         </h2>
         <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {t('auth.createAccountMessage')}
+          {i18n.t('auth.createAccountMessage')}
         </p>
       </div>
 
@@ -85,8 +87,8 @@
       </div>
 
       <div class="space-y-1 mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight">{t('auth.createAccount')}</h1>
-        <p class="text-sm text-muted-foreground">{t('auth.createAccountMessage')}</p>
+        <h1 class="text-2xl font-semibold tracking-tight">{i18n.t('auth.createAccount')}</h1>
+        <p class="text-sm text-muted-foreground">{i18n.t('auth.createAccountMessage')}</p>
       </div>
 
       <form onsubmit={handleSubmit} class="space-y-5">
@@ -98,13 +100,13 @@
         {/if}
 
         <div class="space-y-2">
-          <Label for="register-identifier">{t('auth.usernameOrEmail')}</Label>
+          <Label for="register-identifier">{i18n.t('auth.usernameOrEmail')}</Label>
           <div class="relative">
             <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
             <Input
               id="register-identifier"
               type="text"
-              placeholder={t('auth.identifierPlaceholder')}
+              placeholder={i18n.t('auth.identifierPlaceholder')}
               bind:value={identifier}
               class="pl-9"
               autocomplete="username"
@@ -114,7 +116,7 @@
 
         <PasswordInput
           id="register-password"
-          label={t('auth.password')}
+          label={i18n.t('auth.password')}
           bind:value={password}
           autocomplete="new-password"
           showStrength
@@ -122,7 +124,7 @@
 
         <PasswordInput
           id="register-confirm"
-          label={t('auth.confirmPassword')}
+          label={i18n.t('auth.confirmPassword')}
           bind:value={confirmPassword}
           autocomplete="new-password"
         />
@@ -131,14 +133,14 @@
           {#if register.isLoading}
             <Loader2 class="h-4 w-4 animate-spin mr-2" />
           {/if}
-          {t('auth.registerButton')}
+          {i18n.t('auth.registerButton')}
         </Button>
       </form>
 
       <div class="flex items-center justify-center gap-1 mt-8 pt-6 border-t">
-        <span class="text-sm text-muted-foreground">{t('auth.hasAccount')}</span>
-        <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
-          {t('auth.login')}
+        <span class="text-sm text-muted-foreground">{i18n.t('auth.hasAccount')}</span>
+        <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => adminContext.navigate('/login')}>
+          {i18n.t('auth.login')}
         </Button>
       </div>
 

package/dist/components/ResourceOperationsPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext } from '@svadmin/core';
   import type { Component } from 'svelte';
   import AutoTable from './AutoTable.svelte';
   import { Badge } from './ui/badge/index.js';
@@ -69,6 +69,7 @@
     highlightsLabel = 'Focus queue',
     workspaceStyle = 'operations',
   }: Props = $props();
+  const adminContext = captureAdminContext();
 </script>
 
 <div class="space-y-6" data-svadmin-resource-operations={resourceName} data-svadmin-workspace-style={workspaceStyle}>
@@ -86,7 +87,7 @@
             <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{description}</p>
           </div>
         </div>
-        <Button class="mt-6" onclick={() => navigate(`/${resourceName}/create`)}>
+        <Button class="mt-6" onclick={() => adminContext.navigate(`/${resourceName}/create`)}>
           {actionLabel}
         </Button>
     </div>

package/dist/components/RetryTaskButton.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { getTaskProvider } from '@svadmin/core';
   import { useQueryClient } from '@tanstack/svelte-query';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Button } from './ui/button/index.js';
   import { Loader2, RotateCcw } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let {
     taskId,
     taskProvider = getTaskProvider({ optional: true }),
@@ -55,6 +58,6 @@
   {#if children}
     {@render children()}
   {:else}
-    {t('common.retry')}
+    {i18n.t('common.retry')}
   {/if}
 </Button>

package/dist/components/RolesSettings.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { getAuthProvider, getResources } from '@svadmin/core';
   import PermissionMatrix from './PermissionMatrix.svelte';
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
   import { toast } from '@svadmin/core/toast';
   import { AlertCircle } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   const authProvider = getAuthProvider({ optional: true });
   const rawResources = getResources();
 
@@ -29,15 +31,15 @@
   );
 
   let matrixActions = $state<ActionInfo[]>([
-    { code: 'create', name: t('common.create') ?? 'Create' },
-    { code: 'read', name: t('common.detail') ?? 'Read' },
-    { code: 'update', name: t('common.edit') ?? 'Update' },
-    { code: 'delete', name: t('common.delete') ?? 'Delete' },
+    { code: 'create', name: i18n.t('common.create') ?? 'Create' },
+    { code: 'read', name: i18n.t('common.detail') ?? 'Read' },
+    { code: 'update', name: i18n.t('common.edit') ?? 'Update' },
+    { code: 'delete', name: i18n.t('common.delete') ?? 'Delete' },
   ]);
 
   async function loadRoles() {
     if (!authProvider?.getRoles) {
-      error = t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
+      error = i18n.t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
       loadingRoles = false;
       return;
     }
@@ -111,7 +113,7 @@
       if (result.success) {
         // Success silently
       } else {
-         throw new Error(result.error?.message ?? t('common.operationFailed'));
+         throw new Error(result.error?.message ?? i18n.t('common.operationFailed'));
       }
     } catch (e) {
       toast.error((e as Error).message);
@@ -128,7 +130,7 @@
   <div class="h-full flex items-center justify-center">
     <div class="max-w-md p-6 border border-destructive/20 bg-destructive/10 text-destructive rounded-lg flex flex-col items-center gap-3 text-center">
       <AlertCircle class="h-8 w-8" />
-      <h3 class="font-bold text-lg">{t('common.error') ?? 'Error'}</h3>
+      <h3 class="font-bold text-lg">{i18n.t('common.error') ?? 'Error'}</h3>
       <p>{error}</p>
     </div>
   </div>

package/dist/components/SecuritySettings.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { AlertTriangle, CheckCircle2, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
   import type { Component } from 'svelte';
   import * as Alert from './ui/alert/index.js';
@@ -9,6 +10,8 @@
   import { Switch } from './ui/switch/index.js';
   import PasswordInput from './PasswordInput.svelte';
 
+  const i18n = useTranslation();
+
   interface SessionInfo {
     id: string;
     os: string;
@@ -39,19 +42,19 @@
     passwordErrorMessage = '';
 
     if (!currentPassword) {
-      passwordErrorMessage = t('profile.currentPassword');
+      passwordErrorMessage = i18n.t('profile.currentPassword');
       return;
     }
     if (newPassword.length < 8) {
-      passwordErrorMessage = t('validation.minLength', { min: 8 });
+      passwordErrorMessage = i18n.t('validation.minLength', { min: 8 });
       return;
     }
     if (newPassword !== confirmPassword) {
-      passwordErrorMessage = t('auth.passwordMismatch');
+      passwordErrorMessage = i18n.t('auth.passwordMismatch');
       return;
     }
 
-    passwordSuccessMessage = t('profile.passwordChanged');
+    passwordSuccessMessage = i18n.t('profile.passwordChanged');
     lastChanged = 'Just now';
     currentPassword = '';
     newPassword = '';
@@ -69,8 +72,8 @@
 
 <div class="space-y-6">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.security')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('settings.securityDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.security')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.securityDescription')}</p>
   </div>
 
   <Card.Card>
@@ -81,16 +84,16 @@
         {:else}
           <ShieldAlert class="h-5 w-5 text-amber-500" />
         {/if}
-        {t('security.twoFactorAuth')}
+        {i18n.t('security.twoFactorAuth')}
       </Card.CardTitle>
-      <Card.CardDescription>{t('security.twoFactorDescription')}</Card.CardDescription>
+      <Card.CardDescription>{i18n.t('security.twoFactorDescription')}</Card.CardDescription>
     </Card.CardHeader>
     <Card.CardContent>
       <div class="flex items-center justify-between gap-4 border-t pt-4">
         <div class="space-y-1">
-          <Label for="two-factor" class="text-sm font-medium">{t('security.enable2fa')}</Label>
+          <Label for="two-factor" class="text-sm font-medium">{i18n.t('security.enable2fa')}</Label>
           <p class="text-xs text-muted-foreground">
-            {is2faEnabled ? t('security.twoFactorActive') : t('security.twoFactorInactive')}
+            {is2faEnabled ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}
           </p>
         </div>
         <Switch id="two-factor" bind:checked={is2faEnabled} />
@@ -102,9 +105,9 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <KeyRound class="h-4 w-4 text-muted-foreground" />
-        {t('profile.changePassword')}
+        {i18n.t('profile.changePassword')}
       </Card.CardTitle>
-      <Card.CardDescription>{t('security.passwordLastChanged', { time: lastChanged })}</Card.CardDescription>
+      <Card.CardDescription>{i18n.t('security.passwordLastChanged', { time: lastChanged })}</Card.CardDescription>
     </Card.CardHeader>
     <Card.CardContent>
       <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
@@ -121,11 +124,11 @@
           </Alert.Root>
         {/if}
 
-        <PasswordInput id="security-current-password" label={t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" />
-        <PasswordInput id="security-new-password" label={t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength />
-        <PasswordInput id="security-confirm-password" label={t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" />
+        <PasswordInput id="security-current-password" label={i18n.t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" />
+        <PasswordInput id="security-new-password" label={i18n.t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength />
+        <PasswordInput id="security-confirm-password" label={i18n.t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" />
 
-        <Button type="submit">{t('profile.updatePassword')}</Button>
+        <Button type="submit">{i18n.t('profile.updatePassword')}</Button>
       </form>
     </Card.CardContent>
   </Card.Card>
@@ -135,12 +138,12 @@
       <div class="space-y-1">
         <Card.CardTitle class="flex items-center gap-2 text-base">
           <Shield class="h-4 w-4 text-muted-foreground" />
-          {t('security.activeSessions')}
+          {i18n.t('security.activeSessions')}
         </Card.CardTitle>
-        <Card.CardDescription>{t('security.sessionsDescription')}</Card.CardDescription>
+        <Card.CardDescription>{i18n.t('security.sessionsDescription')}</Card.CardDescription>
       </div>
       {#if sessions.length > 1}
-        <Button variant="outline" size="sm" onclick={revokeAllOthers}>{t('security.revokeOthers')}</Button>
+        <Button variant="outline" size="sm" onclick={revokeAllOthers}>{i18n.t('security.revokeOthers')}</Button>
       {/if}
     </Card.CardHeader>
     <Card.CardContent>
@@ -155,7 +158,7 @@
                 <div class="flex flex-wrap items-center gap-2">
                   <span class="text-sm font-medium">{session.os} - {session.browser}</span>
                   {#if session.isCurrent}
-                    <span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{t('security.currentSession')}</span>
+                    <span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{i18n.t('security.currentSession')}</span>
                   {/if}
                 </div>
                 <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
@@ -165,13 +168,13 @@
               </div>
             </div>
             {#if !session.isCurrent}
-              <Button variant="ghost" size="icon-sm" onclick={() => revokeSession(session.id)} title={t('security.revokeSession')}>
+              <Button variant="ghost" size="icon-sm" onclick={() => revokeSession(session.id)} title={i18n.t('security.revokeSession')}>
                 <Trash2 class="h-4 w-4" />
               </Button>
             {/if}
           </div>
         {:else}
-          <div class="py-6 text-center text-sm text-muted-foreground">{t('security.noSessions')}</div>
+          <div class="py-6 text-center text-sm text-muted-foreground">{i18n.t('security.noSessions')}</div>
         {/each}
       </div>
     </Card.CardContent>