@svadmin/ui 0.38.2 → 0.38.7

package/dist/components/EditPage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getResource } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
+  import { captureAdminContext, getResource } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import type { Snippet } from 'svelte';
   import PageHeader from './PageHeader.svelte';
   import AutoForm from './AutoForm.svelte';
@@ -10,6 +10,8 @@
   import RefreshButton from './buttons/RefreshButton.svelte';
   import DeleteButton from './buttons/DeleteButton.svelte';
 
+  const i18n = useTranslation();
+
   interface Props {
     resourceName: string;
     id: string | number;
@@ -27,9 +29,10 @@
     headerActions,
     class: className = '',
   }: Props = $props();
+  const adminContext = captureAdminContext();
 
   const resource = $derived(getResource(resourceName));
-  const pageTitle = $derived(title ?? `${t('common.edit')} ${resource.label} #${id}`);
+  const pageTitle = $derived(title ?? `${i18n.t('common.edit')} ${resource.label} #${id}`);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
 </script>
 
@@ -40,7 +43,7 @@
       <ShowButton resource={resourceName} recordItemId={id} hideText />
       <RefreshButton resource={resourceName} hideText />
       {#if showDelete !== false}
-        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => adminContext.navigate(`/${resourceName}`)} />
       {/if}
       {#if headerActions}
         {@render headerActions()}

package/dist/components/EmptyState.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { scale } from 'svelte/transition';
   import { PackageOpen } from '@lucide/svelte';
-  import { t } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core';
+
+  const i18n = useTranslation();
 
   let {
-    title = t('empty.title'),
-    description = t('empty.description'),
+    title = i18n.t('empty.title'),
+    description = i18n.t('empty.description'),
     children,
   } = $props<{
     title?: string;

package/dist/components/ErrorBoundary.svelte

@@ -3,7 +3,9 @@
   import { AlertTriangle } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
   import * as Alert from './ui/alert/index.js';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
 
   let {
     children,
@@ -32,14 +34,14 @@
             <div class="flex items-start gap-3">
               <AlertTriangle class="h-5 w-5 mt-0.5 shrink-0" />
               <div class="space-y-2">
-                <Alert.Title>{t('common.error')}</Alert.Title>
+                <Alert.Title>{i18n.t('common.error')}</Alert.Title>
                 <Alert.Description class="text-sm">
                   {error instanceof Error ? error.message : String(error)}
                 </Alert.Description>
               </div>
             </div>
             <Button variant="outline" size="sm" onclick={reset} class="w-full">
-              {t('common.retry')}
+              {i18n.t('common.retry')}
             </Button>
           </Alert.Root>
         </div>

package/dist/components/ErrorComponent.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { AlertTriangle, RefreshCw } from '@lucide/svelte';
-  import { t } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core';
   import { Button } from './ui/button';
   import * as Alert from './ui/alert/index.js';
 
+  const i18n = useTranslation();
+
   let {
     error,
-    title = t('error.title'),
-    description = t('error.description'),
+    title = i18n.t('error.title'),
+    description = i18n.t('error.description'),
     retry,
   } = $props<{
     error?: Error | null;
@@ -28,7 +30,7 @@
       <div class="mt-4">
         <Button variant="outline" size="sm" onclick={retry}>
           <RefreshCw class="h-3 w-3" data-icon="inline-start" />
-          {t('buttons.retry')}
+          {i18n.t('buttons.retry')}
         </Button>
       </div>
     {/if}

package/dist/components/ErrorPage.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { AlertTriangle, ArrowLeft, FileQuestion, Home } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
   import * as Card from './ui/card/index.js';
 
+  const i18n = useTranslation();
+
   interface Props {
     status?: '404' | '500';
     title?: string;
@@ -12,17 +15,16 @@
   }
 
   let { status = '404', title, description }: Props = $props();
+  const adminContext = captureAdminContext();
 
   function goBack() {
-    if (typeof window !== 'undefined') {
-      window.history.back();
-    }
+    adminContext.back();
   }
 
   const isNotFound = $derived(status === '404');
-  const resolvedTitle = $derived(title ?? (isNotFound ? t('common.pageNotFound') : t('common.error')));
+  const resolvedTitle = $derived(title ?? (isNotFound ? i18n.t('common.pageNotFound') : i18n.t('common.error')));
   const resolvedDescription = $derived(
-    description ?? (isNotFound ? t('error.pageNotFoundDescription') : t('error.internalServerErrorDescription')),
+    description ?? (isNotFound ? i18n.t('error.pageNotFoundDescription') : i18n.t('error.internalServerErrorDescription')),
   );
 </script>
 
@@ -46,11 +48,11 @@
       <div class="flex flex-col justify-center gap-2 sm:flex-row">
         <Button variant="outline" onclick={goBack}>
           <ArrowLeft class="h-4 w-4" />
-          {t('common.back')}
+          {i18n.t('common.back')}
         </Button>
-        <Button onclick={() => navigate('/')}>
+        <Button onclick={() => adminContext.navigate('/')}>
           <Home class="h-4 w-4" />
-          {t('common.returnHome')}
+          {i18n.t('common.returnHome')}
         </Button>
       </div>
     </Card.CardContent>

package/dist/components/FieldRenderer.svelte

@@ -5,7 +5,7 @@
 
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Input } from './ui/input/index.js';
   import { Textarea } from './ui/textarea/index.js';
   import { Switch } from './ui/switch/index.js';
@@ -21,6 +21,8 @@
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
 
+  const i18n = useTranslation();
+
   let { field, value, onchange, disabled, children } = $props<{
     field: FieldDefinition;
     value: unknown;
@@ -107,7 +109,7 @@
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
       {disabled}
-      placeholder={t('field.enterValue', { label: field.label })}
+      placeholder={i18n.t('field.enterValue', { label: field.label })}
     />
 
   {:else if field.type === 'email'}
@@ -188,7 +190,7 @@
       <EditorComp
         id={field.key}
         value={strVal}
-        placeholder={t('field.enterValue', { label: field.label })}
+        placeholder={i18n.t('field.enterValue', { label: field.label })}
         preset="full"
         onchange={(html: string) => onchange(html)}
         {disabled}
@@ -201,7 +203,7 @@
         required={field.required}
         {disabled}
         rows={10}
-        placeholder={t('field.enterValue', { label: field.label })}
+        placeholder={i18n.t('field.enterValue', { label: field.label })}
         class="resize-y"
       />
     {/if}
@@ -214,7 +216,7 @@
       required={field.required}
       {disabled}
       rows={4}
-      placeholder={t('field.enterValue', { label: field.label })}
+      placeholder={i18n.t('field.enterValue', { label: field.label })}
       class="resize-y"
     />
 
@@ -226,7 +228,7 @@
       onchange={(v) => onchange(v)}
       optionLabel={field.optionLabel ?? 'title'}
       optionValue={field.optionValue ?? 'id'}
-      placeholder={t('field.selectPlaceholder')}
+      placeholder={i18n.t('field.selectPlaceholder')}
       {disabled}
     />
 
@@ -240,7 +242,7 @@
         required={field.required}
         disabled={disabled}
       >
-        <option value="">{t('field.selectPlaceholder')}</option>
+        <option value="">{i18n.t('field.selectPlaceholder')}</option>
         {#each field.options ?? [] as opt, _i (_i)}
           <option value={opt.value}>{opt.label}</option>
         {/each}
@@ -252,7 +254,7 @@
         onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
         required={field.required}
         {disabled}
-        placeholder={t('field.selectPlaceholder')}
+        placeholder={i18n.t('field.selectPlaceholder')}
       >
         {#each field.options ?? [] as opt, _i (_i)}
           <option value={opt.value}>{opt.label}</option>
@@ -278,7 +280,7 @@
         </label>
       {/each}
       {#if !(field.options?.length)}
-        <p class="text-xs text-muted-foreground">{t('field.noOptions')}</p>
+        <p class="text-xs text-muted-foreground">{i18n.t('field.noOptions')}</p>
       {/if}
     </div>
     {#if multiVal.length > 0}
@@ -287,7 +289,7 @@
           {@const label = field.options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
           <Badge variant="secondary" class="gap-1">
             {label}
-            <button type="button" onclick={() => toggleMulti(v)} class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors" aria-label={t('common.clear')}>×</button>
+            <button type="button" onclick={() => toggleMulti(v)} class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors" aria-label={i18n.t('common.clear')}>×</button>
           </Badge>
         {/each}
       </div>
@@ -301,7 +303,7 @@
         onCheckedChange={(v) => onchange(v)}
         disabled={disabled}
       />
-      <span class="text-sm text-muted-foreground">{boolVal ? t('common.yes') : t('common.no')}</span>
+      <span class="text-sm text-muted-foreground">{boolVal ? i18n.t('common.yes') : i18n.t('common.no')}</span>
     </div>
 
   {:else if field.type === 'tags'}
@@ -314,7 +316,7 @@
               type="button"
               onclick={() => removeTag(i)}
               class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors"
-              aria-label={t('common.clear')}
+              aria-label={i18n.t('common.clear')}
             >×</button>
           </Badge>
         {/each}
@@ -322,7 +324,7 @@
       <Input
         id={field.key}
         type="text"
-        placeholder={t('field.tagsPlaceholder')}
+        placeholder={i18n.t('field.tagsPlaceholder')}
         onkeydown={handleTagKeydown}
         {disabled}
       />
@@ -354,13 +356,13 @@
           {#if url}
             <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
           {/if}
-          <TooltipButton tooltip={t('common.removeImage')} variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
+          <TooltipButton tooltip={i18n.t('common.removeImage')} variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
             <X class="h-3.5 w-3.5" />
           </TooltipButton>
         </div>
       {/each}
       <Button variant="outline" size="sm" type="button" onclick={addImage}>
-        <Plus class="h-3.5 w-3.5 mr-1" /> {t('field.addImage')}
+        <Plus class="h-3.5 w-3.5 mr-1" /> {i18n.t('field.addImage')}
       </Button>
     </div>
 

package/dist/components/ForgotPasswordPage.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-  import { useForgotPassword } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useForgotPassword } 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';
   import * as Alert from './ui/alert/index.js';
   import { User, ArrowLeft, CheckCircle, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { title = 'Admin' } = $props<{
     title?: string;
   }>();
 
+  const adminContext = captureAdminContext();
   const forgot = useForgotPassword();
 
   let identifier = $state('');
@@ -22,13 +25,13 @@
     e.preventDefault();
     error = '';
 
-    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
+    if (!identifier) { error = i18n.t('auth.usernameOrEmailRequired'); return; }
 
     const result = await forgot.mutate({ email: identifier, username: identifier });
     if (result.success) {
       sent = true;
     } else {
-      error = result.error?.message ?? t('common.operationFailed');
+      error = result.error?.message ?? i18n.t('common.operationFailed');
     }
   }
 </script>
@@ -54,10 +57,10 @@
 
       <div class="space-y-4">
         <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
-          {t('auth.forgotPassword')}
+          {i18n.t('auth.forgotPassword')}
         </h2>
         <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
-          {t('auth.forgotPasswordDescription')}
+          {i18n.t('auth.forgotPasswordDescription')}
         </p>
       </div>
 
@@ -82,16 +85,16 @@
       <div class="space-y-1 mb-8">
         <h1 class="text-2xl font-semibold tracking-tight">
           {#if sent}
-            {t('auth.resetLinkSent')}
+            {i18n.t('auth.resetLinkSent')}
           {:else}
-            {t('auth.forgotPassword')}
+            {i18n.t('auth.forgotPassword')}
           {/if}
         </h1>
         <p class="text-sm text-muted-foreground">
           {#if sent}
-            {t('auth.resetLinkSent')}
+            {i18n.t('auth.resetLinkSent')}
           {:else}
-            {t('auth.forgotPasswordDescription')}
+            {i18n.t('auth.forgotPasswordDescription')}
           {/if}
         </p>
       </div>
@@ -100,11 +103,11 @@
         <div class="space-y-4">
           <div class="flex items-center gap-3 rounded-lg border bg-muted/50 p-4">
             <CheckCircle class="h-5 w-5 text-primary shrink-0" />
-            <p class="text-sm text-muted-foreground">{t('auth.resetLinkSent')}</p>
+            <p class="text-sm text-muted-foreground">{i18n.t('auth.resetLinkSent')}</p>
           </div>
-          <Button variant="outline" class="w-full" onclick={() => navigate('/login')}>
+          <Button variant="outline" class="w-full" onclick={() => adminContext.navigate('/login')}>
             <ArrowLeft class="h-4 w-4 mr-2" />
-            {t('auth.backToLogin')}
+            {i18n.t('auth.backToLogin')}
           </Button>
         </div>
       {:else}
@@ -117,13 +120,13 @@
           {/if}
 
           <div class="space-y-2">
-            <Label for="forgot-identifier">{t('auth.usernameOrEmail')}</Label>
+            <Label for="forgot-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="forgot-identifier"
                 type="text"
-                placeholder={t('auth.identifierPlaceholder')}
+                placeholder={i18n.t('auth.identifierPlaceholder')}
                 bind:value={identifier}
                 class="pl-9"
                 autocomplete="username"
@@ -135,14 +138,14 @@
             {#if forgot.isLoading}
               <Loader2 class="h-4 w-4 animate-spin mr-2" />
             {/if}
-            {t('auth.sendResetLink')}
+            {i18n.t('auth.sendResetLink')}
           </Button>
         </form>
 
         <div class="flex items-center justify-center mt-8 pt-6 border-t">
-          <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => navigate('/login')}>
+          <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => adminContext.navigate('/login')}>
             <ArrowLeft class="h-3 w-3" />
-            {t('auth.backToLogin')}
+            {i18n.t('auth.backToLogin')}
           </Button>
         </div>
       {/if}

package/dist/components/Header.svelte

@@ -5,9 +5,12 @@
   import TooltipButton from './TooltipButton.svelte';
   import { getResolvedTheme, toggleTheme } from '@svadmin/core';
   import Breadcrumbs from './Breadcrumbs.svelte';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { getComponentRegistry } from '../component-registry.svelte.js';
 
+  const i18n = useTranslation();
+
   let {
     showThemeToggle = false,
     showBreadcrumbs = true,
@@ -54,7 +57,7 @@
     {/if}
 
     {#if siteUrl}
-      <TooltipButton tooltip={t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
+      <TooltipButton tooltip={i18n.t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
         <MonitorUp class="h-4 w-4 text-muted-foreground transition-colors hover:text-foreground" />
       </TooltipButton>
     {/if}
@@ -66,7 +69,7 @@
     {#if showSearch && onSearchClick}
       <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-9 px-3 rounded-lg border-border/60">
         <Search class="h-3.5 w-3.5" />
-        <span class="hidden sm:inline text-xs">{t('common.search')}...</span>
+        <span class="hidden sm:inline text-xs">{i18n.t('common.search')}...</span>
         <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
           <span class="text-xs">⌘</span>K
         </kbd>
@@ -77,7 +80,7 @@
       {#if CustomThemeToggle}
         <CustomThemeToggle />
       {:else}
-        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
+        <TooltipButton tooltip={i18n.t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
           {#if getResolvedTheme() === 'dark'}
             <Moon class="h-4 w-4 transition-all" />
           {:else}

package/dist/components/InfiniteList.svelte

@@ -3,11 +3,14 @@
   import { useInfiniteList } from '@svadmin/core';
   import type { BaseRecord, Sort, Filter } from '@svadmin/core';
   import type { Snippet } from 'svelte';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Skeleton } from './ui/skeleton/index.js';
   import { Loader2 } from '@lucide/svelte';
   import { intersect } from '../actions.js';
 
+  const i18n = useTranslation();
+
   interface Props<T extends BaseRecord = BaseRecord> {
     resource: string;
     pageSize?: number;
@@ -67,7 +70,7 @@
     {#if empty}
       {@render empty()}
     {:else}
-      <p class="text-center text-sm text-muted-foreground py-8">{t('empty.title')}</p>
+      <p class="text-center text-sm text-muted-foreground py-8">{i18n.t('empty.title')}</p>
     {/if}
   {:else}
     {#each allItems as item, index (index)}
@@ -86,7 +89,7 @@
       <!-- Sentinel for infinite scroll -->
       <div use:intersect={loadMore} class="h-1"></div>
     {:else}
-      <p class="text-center text-xs text-muted-foreground py-2">{t('empty.noMore')}</p>
+      <p class="text-center text-xs text-muted-foreground py-2">{i18n.t('empty.noMore')}</p>
     {/if}
   {/if}
 </div>

package/dist/components/IntegrationsSettings.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { AlertCircle, Cloud, FolderGit, MessageCircle, Plug } from '@lucide/svelte';
   import type { Component } from 'svelte';
   import * as Card from './ui/card/index.js';
   import { Switch } from './ui/switch/index.js';
 
+  const i18n = useTranslation();
+
   interface Integration {
     id: string;
     name: string;
@@ -28,8 +31,8 @@
 
 <div class="space-y-6">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.integrations')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('settings.integrationsDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.integrations')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.integrationsDescription')}</p>
   </div>
 
   <div class="grid gap-4">
@@ -45,14 +48,14 @@
                 <div class="flex flex-wrap items-center gap-2">
                   <span class="font-semibold text-foreground">{integration.name}</span>
                   <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {integration.connected ? 'bg-green-500/10 text-green-600' : 'bg-muted text-muted-foreground'}">
-                    {integration.connected ? t('integrations.statusConnected') : t('integrations.statusDisconnected')}
+                    {integration.connected ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')}
                   </span>
                 </div>
                 <p class="text-sm text-muted-foreground">{integration.description}</p>
               </div>
             </div>
             <div class="flex items-center gap-3">
-              <span class="text-xs text-muted-foreground">{integration.connected ? t('integrations.enabled') : t('integrations.disabled')}</span>
+              <span class="text-xs text-muted-foreground">{integration.connected ? i18n.t('integrations.enabled') : i18n.t('integrations.disabled')}</span>
               <Switch checked={integration.connected} onCheckedChange={(checked) => toggleConnection(integration.id, checked)} />
             </div>
           </div>
@@ -64,7 +67,7 @@
   <Card.Card class="border-dashed bg-muted/20">
     <Card.CardContent class="flex items-center gap-3 p-5 text-sm text-muted-foreground">
       <AlertCircle class="h-4 w-4 shrink-0" />
-      <span>{t('integrations.addMoreHint')}</span>
+      <span>{i18n.t('integrations.addMoreHint')}</span>
     </Card.CardContent>
   </Card.Card>
 </div>

package/dist/components/KeyboardShortcuts.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Dialog from './ui/dialog/index.js';
 
+  const i18n = useTranslation();
+
   let { open = $bindable(false) }: { open?: boolean } = $props();
 
   interface Shortcut {
@@ -36,7 +38,7 @@
 <Dialog.Root bind:open>
   <Dialog.Content class="max-w-md">
     <Dialog.Header>
-      <Dialog.Title>{t('common.keyboardShortcuts') || 'Keyboard Shortcuts'}</Dialog.Title>
+      <Dialog.Title>{i18n.t('common.keyboardShortcuts') || 'Keyboard Shortcuts'}</Dialog.Title>
     </Dialog.Header>
     <div class="space-y-4 py-2">
       {#each shortcuts as group, _i (_i)}

package/dist/components/Layout.svelte

@@ -7,10 +7,10 @@
   import CommandPalette from './CommandPalette.svelte';
   import KeyboardShortcuts from './KeyboardShortcuts.svelte';
   import ChatDialog from './ChatDialog.svelte';
-  import { t } from '@svadmin/core/i18n';
-  import { getAuthProvider, getTaskProvider } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  import { captureAdminContext, getAuthProvider, getTaskProvider } from '@svadmin/core';
   import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
   import { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import * as Sheet from './ui/sheet/index.js';
@@ -18,24 +18,23 @@
   import { getComponentRegistry } from '../component-registry.svelte.js';
   import { Button } from './ui/button/index.js';
 
+  const i18n = useTranslation();
+
   let commandOpen = $state(false);
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
   let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
+  const adminContext = captureAdminContext();
 
-  let _hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
   try {
     auth = getAuthProvider();
-  } catch {
-    _hasAuth = false;
-  }
+  } catch { /* Auth is optional for public layouts. */ }
   let loading = $state(true);
   let identity = $state<Identity | null>(null);
   const taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined;
-  const registry = getComponentRegistry() || {} as any;
-  const TaskQueueComponent = registry.TaskQueueDrawer;
+  const TaskQueueComponent = getComponentRegistry()?.TaskQueueDrawer;
 
   $effect(() => {
     let cancelled = false;
@@ -59,10 +58,10 @@
     try {
       const result = await auth.logout();
       if (result.success) {
-        navigate(result.redirectTo ?? '/login');
+        await adminContext.navigate(result.redirectTo ?? '/login');
       }
     } catch {
-      navigate('/login');
+      await adminContext.navigate('/login');
     }
   }
 
@@ -156,11 +155,11 @@
             variant="outline"
             size="sm"
             class="md:hidden gap-1.5 px-2.5"
-            aria-label={t('common.menu')}
+            aria-label={i18n.t('common.menu')}
             onclick={() => { mobileMenuOpen = true; }}
           >
             <Menu class="h-5 w-5" />
-            <span class="text-xs">{t('common.menu')}</span>
+            <span class="text-xs">{i18n.t('common.menu')}</span>
           </Button>
         {/snippet}
         {#snippet rightActions()}