@svadmin/ui 0.38.2 → 0.38.7

package/dist/components/AutoTable.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Sort, FieldDefinition } from '@svadmin/core';
+import type { FieldDefinition, Sort } from '@svadmin/core';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;

package/dist/components/Breadcrumbs.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-  import { getResources } from '@svadmin/core';
+  import { captureAdminContext, getResources } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
-  import { formatLink } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import * as Breadcrumb from './ui/breadcrumb/index.js';
 
+  const i18n = useTranslation();
+
+  const adminContext = captureAdminContext();
   const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
 
   interface Crumb { label: string; href: string; }
 
   const crumbs = $derived.by(() => {
-    const result: Crumb[] = [{ label: t('common.home') ?? 'Home', href: formatLink('/') }];
+    const result: Crumb[] = [{ label: i18n.t('common.home') ?? 'Home', href: adminContext.formatLink('/') }];
     const path = getPath().replace(/^\//, ''); 
     if (path === '') return result;
 
@@ -25,21 +27,23 @@
        currentPath += `/${seg}`;
 
        if (resourceNames.includes(seg)) {
-          const res = resources.find(r => r.name === seg)!;
-          result.push({ label: res.label, href: formatLink(currentPath) });
+          const res = resources.find(r => r.name === seg);
+          if (res) {
+            result.push({ label: res.label, href: adminContext.formatLink(currentPath) });
+          }
        } else if (seg === 'create') {
-          result.push({ label: t('common.create') ?? 'Create', href: formatLink(currentPath) });
+          result.push({ label: i18n.t('common.create') ?? 'Create', href: adminContext.formatLink(currentPath) });
        } else if (['edit', 'show', 'clone'].includes(seg) && segments[i+1]) {
-          const actionLabel = seg === 'edit' ? (t('common.edit') ?? 'Edit') : 
-                              seg === 'show' ? (t('common.detail') ?? 'Details') : 
-                              (t('common.clone') ?? 'Clone');
+          const actionLabel = seg === 'edit' ? (i18n.t('common.edit') ?? 'Edit') :
+                              seg === 'show' ? (i18n.t('common.detail') ?? 'Details') :
+                              (i18n.t('common.clone') ?? 'Clone');
           const id = segments[i+1];
           currentPath += `/${id}`; // advance path by id
-          result.push({ label: `${actionLabel} #${id}`, href: formatLink(currentPath) });
+          result.push({ label: `${actionLabel} #${id}`, href: adminContext.formatLink(currentPath) });
           i++; // skip next segment since we consumed the id
        } else if (i > 0 && resourceNames.includes(segments[i-1])) {
           // This is a parent ID (e.g. /teams/123/users) and we are not an action
-          result.push({ label: `#${seg}`, href: formatLink(currentPath) });
+          result.push({ label: `#${seg}`, href: adminContext.formatLink(currentPath) });
        }
     }
 

package/dist/components/CancelTaskButton.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, Ban } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let {
     taskId,
     taskProvider = getTaskProvider({ optional: true }),
@@ -55,6 +58,6 @@
   {#if children}
     {@render children()}
   {:else}
-    {t('common.cancel')}
+    {i18n.t('common.cancel')}
   {/if}
 </Button>

package/dist/components/CatchAllNavigate.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { useIsAuthenticated } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useIsAuthenticated } from '@svadmin/core';
   import NavigateToResource from './NavigateToResource.svelte';
   
+  const adminContext = captureAdminContext();
   const auth = useIsAuthenticated();
 
   $effect(() => {
     if (!auth.isLoading && !auth.isAuthenticated) {
-      navigate('/login');
+      adminContext.navigate('/login');
     }
   });
 </script>

package/dist/components/ChatDialog.svelte

@@ -2,13 +2,16 @@
 /* eslint-disable no-undef, svelte/no-at-html-tags */
   import { getChatProvider, getChatContext, setChatContext, getAgentProvider, registerApproval, resolveApproval } from '@svadmin/core';
   import type { ChatMessage, ChatAction } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { useParsed } from '@svadmin/core';
   import { fly, fade, scale } from 'svelte/transition';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import { MessageCircle, X, Minus, Send, Loader2, Bot, Trash2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface Props {
     /** localStorage key for chat history persistence. Set to '' to disable. */
     persistKey?: string;
@@ -254,18 +257,18 @@
 
               collectedActions.push(
                 {
-                  label: `✅ ${t('common.confirm') || 'Approve'}: ${event.description}`,
+                  label: `✅ ${i18n.t('common.confirm') || 'Approve'}: ${event.description}`,
                   variant: 'default',
                   payload: { approvalId: reqId, approved: true },
                 },
                 {
-                  label: `❌ ${t('common.cancel') || 'Reject'}`,
+                  label: `❌ ${i18n.t('common.cancel') || 'Reject'}`,
                   variant: 'destructive',
                   payload: { approvalId: reqId, approved: false },
                 },
               );
 
-              assistantMsg.content += `\n⚠️ **${t('chat.approvalRequired') || 'Approval required'}**: ${event.description}`;
+              assistantMsg.content += `\n⚠️ **${i18n.t('chat.approvalRequired') || 'Approval required'}**: ${event.description}`;
               assistantMsg.actions = [...collectedActions];
               messages = [...messages.slice(0, -1), { ...assistantMsg }];
               scrollToBottom();
@@ -305,7 +308,7 @@
       }
     } catch (err: unknown) {
       if (err instanceof Error && err.name === 'AbortError') return;
-      assistantMsg.content = t('chat.error') || 'Sorry, something went wrong. Please try again.';
+      assistantMsg.content = i18n.t('chat.error') || 'Sorry, something went wrong. Please try again.';
       messages = [...messages.slice(0, -1), { ...assistantMsg }];
     } finally {
       isStreaming = false;
@@ -401,9 +404,9 @@
   }
 
   const suggestions = $derived([
-    t('chat.suggestion1') || 'How do I create a new resource?',
-    t('chat.suggestion2') || 'Explain the data model',
-    t('chat.suggestion3') || 'Help me write a filter query',
+    i18n.t('chat.suggestion1') || 'How do I create a new resource?',
+    i18n.t('chat.suggestion2') || 'Explain the data model',
+    i18n.t('chat.suggestion3') || 'Help me write a filter query',
   ]);
 </script>
 
@@ -414,7 +417,7 @@
   {#if !open}
     <div transition:scale={{ duration: 200 }}>
       <TooltipButton
-        tooltip={t('chat.title') || 'AI Assistant'}
+        tooltip={i18n.t('chat.title') || 'AI Assistant'}
         variant="default"
         size="icon"
         class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[9998] h-12 w-12 rounded-full shadow-xl hover:shadow-2xl hover:scale-110 transition-all bg-primary text-primary-foreground"
@@ -450,17 +453,17 @@
           </div>
           <div>
             <h3 class="text-sm font-semibold leading-none">
-              {t('chat.title') || 'AI Assistant'}
+              {i18n.t('chat.title') || 'AI Assistant'}
             </h3>
             {#if isStreaming}
-              <p class="text-[10px] opacity-80 mt-0.5">{t('chat.typing') || 'Typing...'}</p>
+              <p class="text-[10px] opacity-80 mt-0.5">{i18n.t('chat.typing') || 'Typing...'}</p>
             {/if}
           </div>
         </div>
         <div class="flex items-center gap-0.5">
           {#if messages.length > 0}
             <TooltipButton
-              tooltip={t('chat.clear') || 'Clear'}
+              tooltip={i18n.t('chat.clear') || 'Clear'}
               variant="ghost"
               size="icon"
               class="h-7 w-7 text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10"
@@ -470,7 +473,7 @@
             </TooltipButton>
           {/if}
           <TooltipButton
-            tooltip={minimized ? (t('common.expand') || 'Expand') : (t('common.collapse') || 'Minimize')}
+            tooltip={minimized ? (i18n.t('common.expand') || 'Expand') : (i18n.t('common.collapse') || 'Minimize')}
             variant="ghost"
             size="icon"
             class="h-7 w-7 text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10"
@@ -479,7 +482,7 @@
             <Minus class="h-3.5 w-3.5" />
           </TooltipButton>
           <TooltipButton
-            tooltip={t('common.close') || 'Close'}
+            tooltip={i18n.t('common.close') || 'Close'}
             variant="ghost"
             size="icon"
             class="h-7 w-7 text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10"
@@ -503,10 +506,10 @@
                 <Bot class="h-6 w-6 text-primary" />
               </div>
               <h4 class="text-sm font-semibold text-foreground mb-1">
-                {t('chat.welcome') || 'How can I help?'}
+                {i18n.t('chat.welcome') || 'How can I help?'}
               </h4>
               <p class="text-xs text-muted-foreground mb-4">
-                {t('chat.welcomeDesc') || 'Ask me anything about your admin panel.'}
+                {i18n.t('chat.welcomeDesc') || 'Ask me anything about your admin panel.'}
               </p>
               <div class="flex flex-col gap-2 w-full max-w-[240px]">
                 {#each suggestions as suggestion, _i (_i)}
@@ -551,7 +554,7 @@
                     {:else}
                       <div class="flex items-center gap-1.5 text-muted-foreground">
                         <Loader2 class="h-3.5 w-3.5 animate-spin" />
-                        <span class="text-xs">{t('chat.thinking') || 'Thinking...'}</span>
+                        <span class="text-xs">{i18n.t('chat.thinking') || 'Thinking...'}</span>
                       </div>
                     {/if}
                   {:else}
@@ -569,7 +572,7 @@
             <textarea
               bind:value={inputValue}
               onkeydown={handleKeydown}
-              placeholder={t('chat.placeholder') || 'Type a message...'}
+              placeholder={i18n.t('chat.placeholder') || 'Type a message...'}
               rows={1}
               disabled={isStreaming}
               class="flex-1 resize-none rounded-xl border border-input bg-background px-3 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:opacity-50 max-h-[100px] min-h-[40px]"
@@ -597,7 +600,7 @@
           </div>
           <p class="text-[10px] text-muted-foreground mt-1.5 text-center">
             <kbd class="px-1 py-0.5 rounded border border-border bg-muted text-[9px] font-mono">Ctrl+Shift+L</kbd>
-            {t('chat.shortcutHint') || 'to toggle'}
+            {i18n.t('chat.shortcutHint') || 'to toggle'}
           </p>
         </div>
       {/if}

package/dist/components/ComboboxField.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { useSelect } from '@svadmin/core';
   import type { Filter } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
-  import { Command } from 'cmdk-sv';
+  import { Command } from './ui/command/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import { ChevronsUpDown, Check, X, Search } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   function clickOutside(node: HTMLElement) {
     const handler = (e: MouseEvent) => {
       if (!node.contains(e.target as Node)) open = false;
@@ -89,7 +91,7 @@
   >
     {#if selectedLabel}
       <span class="truncate">{selectedLabel}</span>
-      <TooltipButton tooltip={t('common.clear')} size="icon-sm" class="h-5 w-5 ml-1" onclick={handleClear}>
+      <TooltipButton tooltip={i18n.t('common.clear')} size="icon-sm" class="h-5 w-5 ml-1" onclick={handleClear}>
         <X class="h-3 w-3" />
       </TooltipButton>
     {:else}
@@ -125,7 +127,7 @@
               <Command.Item
                 value={opt.label}
                 onSelect={() => handleSelect(opt.value)}
-                class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
+                class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected]:bg-accent data-[selected]:text-accent-foreground"
               >
                 <Check class="mr-2 h-3.5 w-3.5 {value === opt.value ? 'opacity-100' : 'opacity-0'}" />
                 {opt.label}

package/dist/components/CommandPalette.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { getResources, getAgentProvider, getChatProvider } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
-  import { toggleTheme } from '@svadmin/core';
-  import { Command } from 'cmdk-sv';
+  import { captureAdminContext, getResources, getAgentProvider, getChatProvider, toggleTheme } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Command } from './ui/command/index.js';
   import * as Dialog from './ui/dialog/index.js';
   import { Search, LayoutDashboard, Plus, Sun, FileText, Sparkles } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface Props {
     open?: boolean;
     /** Callback fired when user selects "Ask AI" with a query string */
@@ -14,6 +14,7 @@
   }
 
   let { open = $bindable(false), onAskAI }: Props = $props();
+  const adminContext = captureAdminContext();
   let searchValue = $state('');
 
   const resources = $derived(getResources());
@@ -37,17 +38,17 @@
     close();
   }
 
-  const itemClass = 'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50';
+  const itemClass = 'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50';
 </script>
 
 <Dialog.Dialog bind:open>
   <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[560px]">
-    <Command.Root class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-semibold [&_[data-cmdk-group-heading]]:uppercase [&_[data-cmdk-group-heading]]:tracking-wider">
+    <Command.Root class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:text-muted-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:py-1.5 [&_[data-command-group-heading]]:text-xs [&_[data-command-group-heading]]:font-semibold [&_[data-command-group-heading]]:uppercase [&_[data-command-group-heading]]:tracking-wider">
       <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
         <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
         <Command.Input
           bind:value={searchValue}
-          placeholder={hasAI ? (t('commandPalette.searchOrAsk') || 'Search or ask AI...') : t('common.search')}
+          placeholder={hasAI ? (i18n.t('commandPalette.searchOrAsk') || 'Search or ask AI...') : i18n.t('common.search')}
           class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
         />
         <kbd class="ml-2 text-[10px] font-mono font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border">ESC</kbd>
@@ -60,10 +61,10 @@
               onclick={askAI}
             >
               <Sparkles class="h-3.5 w-3.5" />
-              {t('commandPalette.askAI') || 'Ask AI'}: "{searchValue.trim()}"
+              {i18n.t('commandPalette.askAI') || 'Ask AI'}: "{searchValue.trim()}"
             </button>
           {:else}
-            {t('common.noData')}
+            {i18n.t('common.noData')}
           {/if}
         </Command.Empty>
 
@@ -76,7 +77,7 @@
               class={itemClass}
             >
               <Sparkles class="h-4 w-4 text-primary" />
-              <span class="text-primary font-medium">{t('commandPalette.askAI') || 'Ask AI'}</span>
+              <span class="text-primary font-medium">{i18n.t('commandPalette.askAI') || 'Ask AI'}</span>
               <span class="text-muted-foreground truncate ml-1">"{searchValue.trim()}"</span>
             </Command.Item>
           </Command.Group>
@@ -84,19 +85,19 @@
         {/if}
 
         <!-- Navigation -->
-        <Command.Group heading={t('common.home')}>
+        <Command.Group heading={i18n.t('common.home')}>
           <Command.Item
             value="home"
-            onSelect={() => act(() => navigate('/'))}
+            onSelect={() => act(() => adminContext.navigate('/'))}
             class={itemClass}
           >
             <LayoutDashboard class="h-4 w-4 text-muted-foreground" />
-            {t('common.home')}
+            {i18n.t('common.home')}
           </Command.Item>
           {#each resources as r, _i (_i)}
             <Command.Item
               value={r.name}
-              onSelect={() => act(() => navigate(`/${r.name}`))}
+              onSelect={() => act(() => adminContext.navigate(`/${r.name}`))}
               class={itemClass}
             >
               <FileText class="h-4 w-4 text-muted-foreground" />
@@ -108,15 +109,15 @@
         <Command.Separator class="mx-1 my-1 h-px bg-border" />
 
         <!-- Actions -->
-        <Command.Group heading={t('common.actions')}>
+        <Command.Group heading={i18n.t('common.actions')}>
           {#each resources as r, _i (_i)}
             <Command.Item
               value={"create-" + r.name}
-              onSelect={() => act(() => navigate(`/${r.name}/create`))}
+              onSelect={() => act(() => adminContext.navigate(`/${r.name}/create`))}
               class={itemClass}
             >
               <Plus class="h-4 w-4 text-muted-foreground" />
-              {t('common.create')} {r.label}
+              {i18n.t('common.create')} {r.label}
             </Command.Item>
           {/each}
           <Command.Item
@@ -125,11 +126,10 @@
             class={itemClass}
           >
             <Sun class="h-4 w-4 text-muted-foreground" />
-            {t('common.toggleTheme')}
+            {i18n.t('common.toggleTheme')}
           </Command.Item>
         </Command.Group>
       </Command.List>
     </Command.Root>
   </Dialog.DialogContent>
 </Dialog.Dialog>
-

package/dist/components/ConfigErrorScreen.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { AlertTriangle, Copy, CheckCircle } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Card from './ui/card/index.js';
 
+  const i18n = useTranslation();
+
   let { title, missingVars = [], envTemplate = '' } = $props<{
     title?: string;
     missingVars?: { key: string; description?: string }[];
     envTemplate?: string;
   }>();
 
-  const displayTitle = $derived(title ?? t('config.missingEnvTitle'));
+  const displayTitle = $derived(title ?? i18n.t('config.missingEnvTitle'));
 
   let copied = $state<Record<string, boolean>>({});
   let copyTimers = $state<Record<string, ReturnType<typeof setTimeout>>>({});
@@ -57,7 +59,7 @@
         </div>
         <Card.CardTitle class="text-xl">{displayTitle}</Card.CardTitle>
         <p class="text-sm text-muted-foreground">
-          {t('config.missingEnvDescription')}
+          {i18n.t('config.missingEnvDescription')}
         </p>
       </Card.CardHeader>
       <Card.CardContent class="space-y-4">
@@ -72,7 +74,7 @@
                   {/if}
                 </div>
                 <TooltipButton
-                  tooltip={t('common.copy')}
+                  tooltip={i18n.t('common.copy')}
                   variant="ghost"
                   size="icon"
                   class="h-7 w-7 shrink-0"
@@ -92,9 +94,9 @@
         {#if envTemplate}
           <div class="rounded-lg border overflow-hidden">
             <div class="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border/50">
-              <span class="text-xs font-medium text-muted-foreground">{t('config.envFilePath')}</span>
+              <span class="text-xs font-medium text-muted-foreground">{i18n.t('config.envFilePath')}</span>
               <TooltipButton
-                tooltip={t('common.copyAll')}
+                tooltip={i18n.t('common.copyAll')}
                 variant="ghost"
                 size="sm"
                 class="h-7 gap-1"
@@ -102,10 +104,10 @@
               >
                 {#if copied['__all__']}
                   <CheckCircle class="h-3.5 w-3.5 text-green-500" />
-                  <span class="text-xs">{t('common.copied')}</span>
+                  <span class="text-xs">{i18n.t('common.copied')}</span>
                 {:else}
                   <Copy class="h-3.5 w-3.5" />
-                  <span class="text-xs">{t('common.copyAll')}</span>
+                  <span class="text-xs">{i18n.t('common.copyAll')}</span>
                 {/if}
               </TooltipButton>
             </div>
@@ -114,11 +116,11 @@
         {/if}
 
         <p class="text-xs text-muted-foreground text-center mt-4">
-          {t('config.reload')}
+          {i18n.t('config.reload')}
         </p>
 
         <Button variant="outline" class="w-full" onclick={() => window.location.reload()}>
-          {t('config.reloadButton')}
+          {i18n.t('config.reloadButton')}
         </Button>
       </Card.CardContent>
     </Card.Card>

package/dist/components/ConfirmDialog.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import * as AlertDialog from './ui/alert-dialog/index.js';
   import { Button } from './ui/button/index.js';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
 
   let { open = $bindable(false), title, message = '',
     confirmText, cancelText, variant = 'danger',
@@ -22,9 +24,9 @@
     info: 'default' as const,
   };
 
-  const resolvedTitle = $derived(title ?? t('common.confirmAction'));
-  const resolvedConfirmText = $derived(confirmText ?? t('common.confirm'));
-  const resolvedCancelText = $derived(cancelText ?? t('common.cancel'));
+  const resolvedTitle = $derived(title ?? i18n.t('common.confirmAction'));
+  const resolvedConfirmText = $derived(confirmText ?? i18n.t('common.confirm'));
+  const resolvedCancelText = $derived(cancelText ?? i18n.t('common.cancel'));
 
   let confirmed = $state(false);
 

package/dist/components/CreatePage.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { getResource } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
   import PageHeader from './PageHeader.svelte';
   import AutoForm from './AutoForm.svelte';
   import ListButton from './buttons/ListButton.svelte';
 
+  const i18n = useTranslation();
+
   interface Props {
     resourceName: string;
     title?: string;
@@ -21,7 +23,7 @@
   }: Props = $props();
 
   const resource = $derived(getResource(resourceName));
-  const pageTitle = $derived(title ?? `${t('common.create')}${resource.label}`);
+  const pageTitle = $derived(title ?? `${i18n.t('common.create')}${resource.label}`);
 </script>
 
 <div class="space-y-6 {className}">

package/dist/components/DevTools.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
   import { fly } from 'svelte/transition';
-  import { getResources } from '@svadmin/core';
-  import { getTheme, getColorTheme } from '@svadmin/core';
-  import { getLocale, t } from '@svadmin/core/i18n';
-  import { currentPath } from '@svadmin/core/router';
+  import { captureAdminContext, getResources, getTheme, getColorTheme } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import TooltipButton from './TooltipButton.svelte';
   import * as Tabs from './ui/tabs/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -13,6 +12,9 @@
   import { X, Bug, ChevronDown, ChevronUp, Wand2 } from '@lucide/svelte';
   import InferencerPanel from './InferencerPanel.svelte';
 
+  const i18n = useTranslation();
+
+  const adminContext = captureAdminContext();
   let visible = $state(false);
   let collapsed = $state(false);
 
@@ -28,16 +30,11 @@
   }
 
   const resources = $derived.by(() => { try { return getResources(); } catch { return []; } });
-  const path = $derived(currentPath());
+  const path = $derived(adminContext.currentPath());
   const theme = $derived(getTheme());
   const colorTheme = $derived(getColorTheme());
-  const locale = $derived(getLocale());
+  const locale = $derived(i18n.locale);
 
-  // Auto-trace state changes in dev mode via Svelte 5 $inspect
-  if ((import.meta as any).env?.DEV) {
-    // eslint-disable-next-line svelte/no-inspect
-    $inspect({ path, theme, colorTheme, locale, resourceCount: resources.length });
-  }
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -56,14 +53,14 @@
           <span>svadmin DevTools</span>
         </div>
         <div class="flex gap-1">
-          <TooltipButton tooltip={collapsed ? t('common.expand') : t('common.collapse')} variant="ghost" size="icon" class="h-6 w-6" onclick={() => collapsed = !collapsed}>
+          <TooltipButton tooltip={collapsed ? i18n.t('common.expand') : i18n.t('common.collapse')} variant="ghost" size="icon" class="h-6 w-6" onclick={() => collapsed = !collapsed}>
             {#if collapsed}
               <ChevronUp class="h-3.5 w-3.5" />
             {:else}
               <ChevronDown class="h-3.5 w-3.5" />
             {/if}
           </TooltipButton>
-          <TooltipButton tooltip={t('common.close')} variant="ghost" size="icon" class="h-6 w-6" onclick={toggle}>
+          <TooltipButton tooltip={i18n.t('common.close')} variant="ghost" size="icon" class="h-6 w-6" onclick={toggle}>
             <X class="h-3.5 w-3.5" />
           </TooltipButton>
         </div>
@@ -138,7 +135,7 @@
     </div>
   {:else}
     <TooltipButton
-      tooltip={t('devtools.title')}
+      tooltip={i18n.t('devtools.title')}
       variant="default"
       size="icon"
       class="fixed bottom-4 right-4 z-[9999] h-9 w-9 rounded-full shadow-lg opacity-60 hover:opacity-100 hover:scale-110 transition-all"

package/dist/components/DrawerForm.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import { getResource } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import * as Sheet from './ui/sheet/index.js';
   import AutoForm from './AutoForm.svelte';
 
+  const i18n = useTranslation();
+
   let { resourceName, mode = 'create', id, open = $bindable(false), side = 'right', onSuccess } = $props<{
     resourceName: string;
     mode?: 'create' | 'edit';
@@ -25,7 +28,7 @@
   <Sheet.Content>
     <Sheet.Header>
       <Sheet.Title>
-        {mode === 'create' ? `${t('common.create')}${resource.label}` : `${t('common.edit')}${resource.label}`}
+        {mode === 'create' ? `${i18n.t('common.create')}${resource.label}` : `${i18n.t('common.edit')}${resource.label}`}
       </Sheet.Title>
     </Sheet.Header>
     <div class="flex-1 overflow-y-auto">