@svadmin/ui 0.38.2 → 0.38.5

package/dist/components/ApiSettings.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { AlertCircle, Calendar, Check, Copy, Key, Plus, ShieldCheck, Trash2 } from '@lucide/svelte';
   import * as Card from './ui/card/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -8,6 +9,8 @@
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
 
+  const i18n = useTranslation();
+
   interface ApiKey {
     id: string;
     name: string;
@@ -76,8 +79,8 @@
 
 <div class="space-y-6">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.api')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('settings.apiDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.api')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.apiDescription')}</p>
   </div>
 
   <div class="grid gap-6 lg:grid-cols-3">
@@ -85,19 +88,19 @@
       <Card.CardHeader>
         <Card.CardTitle class="flex items-center gap-2 text-base">
           <Plus class="h-4 w-4" />
-          {t('api.generateTitle')}
+          {i18n.t('api.generateTitle')}
         </Card.CardTitle>
-        <Card.CardDescription>{t('api.generateDesc')}</Card.CardDescription>
+        <Card.CardDescription>{i18n.t('api.generateDesc')}</Card.CardDescription>
       </Card.CardHeader>
       <Card.CardContent>
         <form onsubmit={handleGenerateKey} class="space-y-4">
           <div class="space-y-2">
-            <Label for="api-key-name">{t('api.keyName')}</Label>
+            <Label for="api-key-name">{i18n.t('api.keyName')}</Label>
             <Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required />
           </div>
 
           <div class="space-y-3">
-            <Label>{t('api.permissions')}</Label>
+            <Label>{i18n.t('api.permissions')}</Label>
             {#each Object.keys(newKeyPermissions) as permission (permission)}
               <div class="flex items-center gap-2">
                 <Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} />
@@ -106,7 +109,7 @@
             {/each}
           </div>
 
-          <Button type="submit" class="w-full">{t('api.generateButton')}</Button>
+          <Button type="submit" class="w-full">{i18n.t('api.generateButton')}</Button>
         </form>
       </Card.CardContent>
     </Card.Card>
@@ -115,9 +118,9 @@
       <Card.CardHeader>
         <Card.CardTitle class="flex items-center gap-2 text-base">
           <Key class="h-4 w-4 text-muted-foreground" />
-          {t('api.activeKeysTitle')}
+          {i18n.t('api.activeKeysTitle')}
         </Card.CardTitle>
-        <Card.CardDescription>{t('api.activeKeysDesc')}</Card.CardDescription>
+        <Card.CardDescription>{i18n.t('api.activeKeysDesc')}</Card.CardDescription>
       </Card.CardHeader>
       <Card.CardContent>
         {#if showCreatedToken}
@@ -125,8 +128,8 @@
             <div class="flex items-start gap-2 text-sm text-green-700 dark:text-green-300">
               <ShieldCheck class="mt-0.5 h-5 w-5 shrink-0" />
               <div>
-                <h4 class="font-semibold">{t('api.successTitle')}</h4>
-                <p class="mt-0.5 text-xs">{t('api.successHint')}</p>
+                <h4 class="font-semibold">{i18n.t('api.successTitle')}</h4>
+                <p class="mt-0.5 text-xs">{i18n.t('api.successHint')}</p>
               </div>
             </div>
             <div class="flex items-center gap-2">
@@ -140,7 +143,7 @@
               </Button>
             </div>
             <div class="flex justify-end">
-              <Button variant="ghost" size="sm" onclick={() => { showCreatedToken = false; generatedToken = ''; }}>{t('common.close')}</Button>
+              <Button variant="ghost" size="sm" onclick={() => { showCreatedToken = false; generatedToken = ''; }}>{i18n.t('common.close')}</Button>
             </div>
           </div>
         {/if}
@@ -160,14 +163,14 @@
                   </div>
                 </div>
                 <div class="flex shrink-0 items-center gap-1">
-                  <Button variant="ghost" size="icon-sm" onclick={() => copyToken(key.maskedToken, key.id)} title={t('common.copy')}>
+                  <Button variant="ghost" size="icon-sm" onclick={() => copyToken(key.maskedToken, key.id)} title={i18n.t('common.copy')}>
                     {#if copiedKeyId === key.id}
                       <Check class="h-4 w-4 text-green-500" />
                     {:else}
                       <Copy class="h-4 w-4" />
                     {/if}
                   </Button>
-                  <Button variant="ghost" size="icon-sm" onclick={() => deleteKey(key.id)} title={t('common.delete')}>
+                  <Button variant="ghost" size="icon-sm" onclick={() => deleteKey(key.id)} title={i18n.t('common.delete')}>
                     <Trash2 class="h-4 w-4" />
                   </Button>
                 </div>
@@ -181,7 +184,7 @@
           {:else}
             <div class="flex flex-col items-center gap-2 py-8 text-center text-sm text-muted-foreground">
               <AlertCircle class="h-8 w-8 opacity-60" />
-              <span>{t('api.noKeys')}</span>
+              <span>{i18n.t('api.noKeys')}</span>
             </div>
           {/each}
         </div>

package/dist/components/AppearanceSettings.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { getTheme, setTheme, getColorTheme, setColorTheme, getColorPresets } from '@svadmin/core';
-  import { getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
   import * as Card from './ui/card/index.js';
   import { Sun, Moon, Monitor, Check } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   // Theme mode
   const themeOptions = [
     { value: 'light' as const, icon: Sun, label: 'settings.light' },
@@ -14,8 +16,8 @@
 
   let currentTheme = $derived(getTheme());
   let currentColor = $derived(getColorTheme());
-  let currentLocale = $derived(getLocale());
-  const availableLocales = getAvailableLocales();
+  let currentLocale = $derived(i18n.locale);
+  const availableLocales = i18n.getAvailableLocales();
   const presets = getColorPresets();
 
   // Sidebar density
@@ -55,14 +57,14 @@
 
 <div class="space-y-6">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.appearance')}</h2>
-    <p class="text-sm text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.appearance')}</h2>
+    <p class="text-sm text-muted-foreground mt-1">{i18n.t('settings.settingsDescription')}</p>
   </div>
 
   <!-- Theme Mode -->
   <Card.Card>
     <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{t('settings.themeMode')}</Card.CardTitle>
+      <Card.CardTitle class="text-base">{i18n.t('settings.themeMode')}</Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
       <div class="grid grid-cols-3 gap-3">
@@ -85,7 +87,7 @@
               <opt.icon class="h-5 w-5" />
             </div>
             <span class="text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">
-              {t(opt.label)}
+              {i18n.t(opt.label)}
             </span>
           </button>
         {/each}
@@ -96,7 +98,7 @@
   <!-- Color Accent -->
   <Card.Card>
     <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{t('settings.colorAccent')}</Card.CardTitle>
+      <Card.CardTitle class="text-base">{i18n.t('settings.colorAccent')}</Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
       <div class="flex flex-wrap gap-3">
@@ -121,20 +123,20 @@
   <!-- Interface -->
   <Card.Card>
     <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{t('settings.interface')}</Card.CardTitle>
+      <Card.CardTitle class="text-base">{i18n.t('settings.interface')}</Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent class="space-y-5">
       <!-- Language -->
       <div class="flex items-center justify-between">
         <div>
-          <p class="text-sm font-medium text-foreground">{t('settings.language')}</p>
+          <p class="text-sm font-medium text-foreground">{i18n.t('settings.language')}</p>
           <p class="text-xs text-muted-foreground">{localeNames[currentLocale] ?? currentLocale}</p>
         </div>
         <select
           class="h-9 rounded-md border border-input bg-background px-3 text-sm ring-offset-background
             focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
           value={currentLocale}
-          onchange={(e) => setLocale((e.target as HTMLSelectElement).value)}
+          onchange={(e) => i18n.setLocale((e.target as HTMLSelectElement).value)}
         >
           {#each availableLocales as loc, _i (_i)}
             <option value={loc}>{localeNames[loc] ?? loc}</option>
@@ -147,19 +149,19 @@
       <!-- Sidebar Density -->
       <div class="flex items-center justify-between">
         <div>
-          <p class="text-sm font-medium text-foreground">{t('settings.sidebarDensity')}</p>
+          <p class="text-sm font-medium text-foreground">{i18n.t('settings.sidebarDensity')}</p>
         </div>
         <div class="flex rounded-lg border border-input overflow-hidden">
           <button
             class="px-3 py-1.5 text-xs font-medium transition-colors
               {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
             onclick={() => setDensity('compact')}
-          >{t('settings.compact')}</button>
+          >{i18n.t('settings.compact')}</button>
           <button
             class="px-3 py-1.5 text-xs font-medium transition-colors
               {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
             onclick={() => setDensity('standard')}
-          >{t('settings.standard')}</button>
+          >{i18n.t('settings.standard')}</button>
         </div>
       </div>
 
@@ -168,7 +170,7 @@
       <!-- Default Page Size -->
       <div class="flex items-center justify-between">
         <div>
-          <p class="text-sm font-medium text-foreground">{t('settings.defaultPageSize')}</p>
+          <p class="text-sm font-medium text-foreground">{i18n.t('settings.defaultPageSize')}</p>
         </div>
         <div class="flex rounded-lg border border-input overflow-hidden">
           {#each pageSizeOptions as size, _i (_i)}

package/dist/components/AuditLogDrawer.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { getAuditLogProvider, t } from '@svadmin/core';
+  import { getAuditLogProvider, useTranslation } from '@svadmin/core';
+
   import type { AuditEntry } from '@svadmin/core';
   import * as Sheet from './ui/sheet/index.js';
   import { History, Loader2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { open = $bindable(false), resource, recordId } = $props<{
     open: boolean;
     resource: string;
@@ -47,7 +50,7 @@
     <Sheet.Header>
       <Sheet.Title class="flex items-center gap-2">
         <History class="h-5 w-5" />
-        {t('common.history') || 'History'}
+        {i18n.t('common.history') || 'History'}
       </Sheet.Title>
       <Sheet.Description>
         Audit log and revision history for this record.
@@ -63,7 +66,7 @@
         <div class="text-center py-10">
           <History class="h-8 w-8 mx-auto text-muted-foreground/30 mb-3" />
           <p class="text-sm text-muted-foreground">
-            {t('common.noData') || 'No audit logs found'}
+            {i18n.t('common.noData') || 'No audit logs found'}
           </p>
         </div>
       {:else}

package/dist/components/AuditLogViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { getAuthProvider } from '@svadmin/core';
   import type { AuditLog } from '@svadmin/core';
   import { toast } from '@svadmin/core/toast';
@@ -9,6 +10,8 @@
   import { Input } from './ui/input/index.js';
   import { Loader2, ChevronLeft, ChevronRight, Search, FileSearch, Eye, X } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   const authProvider = getAuthProvider({ optional: true });
 
   let logs = $state<AuditLog[]>([]);
@@ -27,7 +30,7 @@
 
   async function loadLogs() {
     if (!authProvider?.getAuditLogs) {
-      error = t('settings.auditNotSupported') ?? 'Audit logs are not supported by the current AuthProvider';
+      error = i18n.t('settings.auditNotSupported') ?? 'Audit logs are not supported by the current AuthProvider';
       loading = false;
       return;
     }
@@ -87,10 +90,10 @@
   <div class="mb-6">
     <h2 class="text-xl font-semibold text-foreground flex items-center gap-2">
       <FileSearch class="h-5 w-5 text-muted-foreground" />
-      {t('settings.auditLogs') ?? 'Audit Logs'}
+      {i18n.t('settings.auditLogs') ?? 'Audit Logs'}
     </h2>
     <p class="text-sm text-muted-foreground mt-1">
-      {t('settings.auditDescription') ?? 'Track and review all system operations for compliance and debugging.'}
+      {i18n.t('settings.auditDescription') ?? 'Track and review all system operations for compliance and debugging.'}
     </p>
   </div>
 
@@ -104,7 +107,7 @@
       <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
       <Input
         bind:value={searchQuery}
-        placeholder={t('settings.searchLogs') ?? 'Search by user, action, or resource...'}
+        placeholder={i18n.t('settings.searchLogs') ?? 'Search by user, action, or resource...'}
         class="pl-9"
       />
     </div>
@@ -114,19 +117,19 @@
       {#if loading}
         <div class="flex items-center justify-center h-48 text-muted-foreground">
           <Loader2 class="h-5 w-5 animate-spin mr-2" />
-          {t('common.loading')}
+          {i18n.t('common.loading')}
         </div>
       {:else}
         <div class="overflow-auto">
           <Table.Root>
             <Table.Header>
               <Table.Row>
-                <Table.Head class="w-[160px]">{t('settings.auditTime') ?? 'Time'}</Table.Head>
-                <Table.Head>{t('settings.auditUser') ?? 'User'}</Table.Head>
-                <Table.Head>{t('settings.auditAction') ?? 'Action'}</Table.Head>
-                <Table.Head>{t('settings.auditResource') ?? 'Resource'}</Table.Head>
-                <Table.Head class="w-[120px]">{t('settings.auditIp') ?? 'IP Address'}</Table.Head>
-                <Table.Head class="w-[60px] text-center">{t('common.detail') ?? 'Detail'}</Table.Head>
+                <Table.Head class="w-[160px]">{i18n.t('settings.auditTime') ?? 'Time'}</Table.Head>
+                <Table.Head>{i18n.t('settings.auditUser') ?? 'User'}</Table.Head>
+                <Table.Head>{i18n.t('settings.auditAction') ?? 'Action'}</Table.Head>
+                <Table.Head>{i18n.t('settings.auditResource') ?? 'Resource'}</Table.Head>
+                <Table.Head class="w-[120px]">{i18n.t('settings.auditIp') ?? 'IP Address'}</Table.Head>
+                <Table.Head class="w-[60px] text-center">{i18n.t('common.detail') ?? 'Detail'}</Table.Head>
               </Table.Row>
             </Table.Header>
             <Table.Body>
@@ -152,7 +155,7 @@
               {:else}
                 <Table.Row>
                   <Table.Cell colspan={6} class="h-24 text-center text-muted-foreground">
-                    {t('common.noData')}
+                    {i18n.t('common.noData')}
                   </Table.Cell>
                 </Table.Row>
               {/each}
@@ -164,7 +167,7 @@
 
     <!-- Pagination -->
     <div class="mt-4 flex items-center justify-between text-sm text-muted-foreground">
-      <span>{total} {t('settings.auditTotal') ?? 'total records'}</span>
+      <span>{total} {i18n.t('settings.auditTotal') ?? 'total records'}</span>
       <div class="flex items-center gap-2">
         <Button
           variant="outline" size="sm"
@@ -199,7 +202,7 @@
         <div>
           <h2 class="text-lg font-bold text-foreground flex items-center gap-2">
             <FileSearch class="h-5 w-5 text-primary" />
-            {t('settings.auditSnapshot') ?? 'Change Snapshot'}
+            {i18n.t('settings.auditSnapshot') ?? 'Change Snapshot'}
           </h2>
           <p class="text-xs text-muted-foreground mt-1">{formatDate(drawerLog.createdAt)} · {drawerLog.userName ?? drawerLog.userId}</p>
         </div>

package/dist/components/Authenticated.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { useIsAuthenticated, getRouterProvider } from '@svadmin/core';
+  import { captureAdminContext, useIsAuthenticated } from '@svadmin/core';
   import type { Snippet } from 'svelte';
-  import { navigate } from '@svadmin/core';
 
   let {
     children,
@@ -17,13 +16,14 @@
     appendCurrentPathToQuery?: boolean;
   }>();
 
+  const adminContext = captureAdminContext();
   const isAuth = useIsAuthenticated();
 
   function triggerRedirect() {
     if (fallback) return;
     let url = redirectTo;
     if (appendCurrentPathToQuery && typeof window !== 'undefined') {
-      const rp = getRouterProvider();
+      const rp = adminContext.routerProvider;
       let currentString = window.location.pathname + window.location.search;
       if (rp) {
         const parsed = rp.parse();
@@ -33,7 +33,7 @@
       const current = encodeURIComponent(currentString);
       url += url.includes('?') ? `&to=${current}` : `?to=${current}`;
     }
-    navigate(url);
+    adminContext.navigate(url);
   }
 
   $effect(() => {

package/dist/components/AutoForm.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { useForm, getResource, deriveValidator } from '@svadmin/core';
+  import { captureAdminContext, useForm, getResource, deriveValidator } from '@svadmin/core';
   import { slide } from 'svelte/transition';
   import type { FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Card from './ui/card/index.js';
@@ -15,6 +15,8 @@
   import ConfirmDialog from './ConfirmDialog.svelte';
   import type { Snippet } from 'svelte';
 
+  const i18n = useTranslation();
+
   interface Props {
     resourceName: string;
     id?: string | number;
@@ -26,6 +28,7 @@
   }
 
   let { resourceName, id, mode = 'create', fieldRenderer, formActions, headerContent, onSuccess }: Props = $props();
+  const adminContext = captureAdminContext();
   const isReadonly = $derived(mode === 'show');
 
   // ─── Resource metadata ────────────────────────────────────────────
@@ -73,7 +76,7 @@
     return d;
   })());
 
-  const validator = $derived(deriveValidator(formFields));
+  const validator = $derived(deriveValidator(formFields, { translate: i18n.t }));
 
   // ─── useForm: single source of truth for values, errors, tainted ──
   const form = useForm({
@@ -95,16 +98,16 @@
       await form.submit();
       onSuccess?.();
     } catch (e) {
-      submitError = e instanceof Error ? e.message : t('common.operationFailed');
+      submitError = e instanceof Error ? e.message : i18n.t('common.operationFailed');
     }
   }
 
   const pageTitle = $derived(
     mode === 'create'
-      ? `${t('common.create')}${resource.label}`
+      ? `${i18n.t('common.create')}${resource.label}`
       : mode === 'show'
-      ? `${t('common.detail')}${resource.label}`
-      : `${t('common.edit')}${resource.label}`
+      ? `${i18n.t('common.detail')}${resource.label}`
+      : `${i18n.t('common.edit')}${resource.label}`
   );
 
   // ─── Unsaved changes guard ────────────────────────────────────────
@@ -135,8 +138,8 @@
 <div class="space-y-6">
   <div class="flex items-center gap-4">
     <TooltipButton
-      tooltip={t('common.back')}
-      onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
+      tooltip={i18n.t('common.back')}
+      onclick={() => guardNavigate(() => adminContext.navigate(`/${resourceName}`))}
     >
       <ArrowLeft class="h-5 w-5" />
     </TooltipButton>
@@ -145,7 +148,7 @@
       {@render headerContent()}
     {/if}
     {#if form.isTainted()}
-      <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
+      <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{i18n.t('common.unsaved')}</Badge>
     {/if}
   </div>
 
@@ -234,14 +237,14 @@
             {:else}
               <Save class="h-4 w-4" data-icon="inline-start" />
             {/if}
-            {t('common.save')}
+            {i18n.t('common.save')}
           </Button>
           <Button
             type="button"
             variant="outline"
-            onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
+            onclick={() => guardNavigate(() => adminContext.navigate(`/${resourceName}`))}
           >
-            {t('common.cancel')}
+            {i18n.t('common.cancel')}
           </Button>
         {/if}
       </div>
@@ -251,8 +254,8 @@
 
 <ConfirmDialog
   open={confirmOpen}
-  message={t('common.unsavedChanges')}
-  confirmText={t('common.confirm')}
+  message={i18n.t('common.unsavedChanges')}
+  confirmText={i18n.t('common.confirm')}
   onconfirm={confirmNavigate}
   oncancel={cancelNavigate}
 />

package/dist/components/AutoSaveIndicator.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { fade, fly } from 'svelte/transition';
   import { Loader2, Check, X, Cloud } from '@lucide/svelte';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
 
   let {
     status = 'idle',
@@ -19,16 +21,16 @@
     <div class="flex items-center gap-2" in:fly={{ y: -8, duration: 200 }} out:fade={{ duration: 150 }}>
       {#if status === 'idle'}
         <Cloud class="h-4 w-4" />
-        <span>{t('autoSave.idle')}</span>
+        <span>{i18n.t('autoSave.idle')}</span>
       {:else if status === 'loading'}
         <Loader2 class="h-4 w-4 animate-spin text-primary" />
-        <span>{t('autoSave.saving')}</span>
+        <span>{i18n.t('autoSave.saving')}</span>
       {:else if status === 'success'}
         <Check class="h-4 w-4 text-green-500" />
-        <span class="text-green-500">{t('autoSave.saved')}</span>
+        <span class="text-green-500">{i18n.t('autoSave.saved')}</span>
       {:else if status === 'error'}
         <X class="h-4 w-4 text-destructive" />
-        <span class="text-destructive" title={error}>{t('autoSave.error')}</span>
+        <span class="text-destructive" title={error}>{i18n.t('autoSave.error')}</span>
       {/if}
     </div>
   {/key}