@svadmin/ui 0.38.2 → 0.38.5

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>

package/dist/components/SettingsPage.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
-  import { t } from "@svadmin/core/i18n";
-  import { navigate } from "@svadmin/core/router";
+  import { captureAdminContext, getAuthProvider } from "@svadmin/core";
+  import { useTranslation } from "@svadmin/core/i18n";
+
   import { User, Palette, Info, Shield, FileSearch, Lock, Puzzle, Bell, Key } from "@lucide/svelte";
   import ProfilePage from "./ProfilePage.svelte";
   import AppearanceSettings from "./AppearanceSettings.svelte";
@@ -12,8 +13,8 @@
   import IntegrationsSettings from "./IntegrationsSettings.svelte";
   import NotificationsSettings from "./NotificationsSettings.svelte";
   import ApiSettings from "./ApiSettings.svelte";
-  import { getAuthProvider } from "@svadmin/core";
 
+  const adminContext = captureAdminContext();
   const authProvider = getAuthProvider({ optional: true });
 
   interface SettingsItem {
@@ -92,6 +93,8 @@
 
   import { getParams, getRoute } from "../router-state.svelte.js";
 
+  const i18n = useTranslation();
+
   let activeKey = $derived.by(() => {
     const tab = getParams().tab;
     if (!tab) return "profile";
@@ -103,7 +106,7 @@
   // Default redirect to profile
   $effect(() => {
     if (getRoute() === "/settings") {
-      navigate("/settings/profile");
+      adminContext.navigate("/settings/profile");
     }
   });
 </script>
@@ -119,10 +122,10 @@
           <button
             class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
               {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
-            onclick={() => navigate(item.path)}
+            onclick={() => adminContext.navigate(item.path)}
           >
             <item.icon class="h-4 w-4" />
-            {t(item.label)}
+            {i18n.t(item.label)}
           </button>
         {/each}
       {/each}
@@ -131,13 +134,13 @@
     <!-- Desktop: vertical nav with groups -->
     <div class="hidden lg:block py-6 px-3 space-y-6">
       <div class="px-3">
-        <h2 class="text-lg font-semibold text-foreground">{t("settings.title")}</h2>
-        <p class="text-xs text-muted-foreground mt-1">{t("settings.settingsDescription")}</p>
+        <h2 class="text-lg font-semibold text-foreground">{i18n.t("settings.title")}</h2>
+        <p class="text-xs text-muted-foreground mt-1">{i18n.t("settings.settingsDescription")}</p>
       </div>
       {#each resolvedSections as section, _i (_i)}
         <div>
           <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-            {t(section.group)}
+            {i18n.t(section.group)}
           </h3>
           <div class="space-y-0.5">
             {#each section.items as item, _j (_j)}
@@ -147,10 +150,10 @@
                   {active
                     ? 'bg-primary/10 text-primary font-medium'
                     : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
-                onclick={() => navigate(item.path)}
+                onclick={() => adminContext.navigate(item.path)}
               >
                 <item.icon class="h-4 w-4 shrink-0" />
-                {t(item.label)}
+                {i18n.t(item.label)}
               </button>
             {/each}
           </div>

package/dist/components/ShowPage.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { useShow, getResource } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
+  import { captureAdminContext, useShow, getResource } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from './ui/card/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import PageHeader from './PageHeader.svelte';
@@ -12,7 +11,10 @@
   import CloneButton from './buttons/CloneButton.svelte';
   import RefreshButton from './buttons/RefreshButton.svelte';
 
+  const i18n = useTranslation();
+
   let { resourceName, id, class: className = '' } = $props<{ resourceName: string; id: string | number; class?: string }>();
+  const adminContext = captureAdminContext();
 
   const resource = $derived(getResource(resourceName));
   const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
@@ -21,7 +23,7 @@
 </script>
 
 <div class="space-y-6 {className}">
-  <PageHeader title="{resource.label} {t('common.detail')}">
+  <PageHeader title="{resource.label} {i18n.t('common.detail')}">
     {#snippet actions()}
       <ListButton resource={resourceName} hideText />
       {#if resource.canEdit !== false}
@@ -31,7 +33,7 @@
         <CloneButton resource={resourceName} recordItemId={id} hideText />
       {/if}
       {#if resource.canDelete !== false}
-        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => adminContext.navigate(`/${resourceName}`)} />
       {/if}
       <RefreshButton resource={resourceName} hideText />
     {/snippet}
@@ -74,9 +76,9 @@
   {:else}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-8 text-center">
-        <p class="text-muted-foreground">{t('common.noData')}</p>
+        <p class="text-muted-foreground">{i18n.t('common.noData')}</p>
         {#if query.isError}
-          <p class="text-sm text-destructive mt-2">{(query.error as Error)?.message ?? t('common.operationFailed')}</p>
+          <p class="text-sm text-destructive mt-2">{(query.error as Error)?.message ?? i18n.t('common.operationFailed')}</p>
         {/if}
       </Card.Content>
     </Card.Root>