@svadmin/ui 0.38.1 → 0.38.5

package/dist/components/buttons/CloneButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Copy } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
   import { withRecordId } from './access-control';
 
+  const i18n = useTranslation();
+
   let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
@@ -33,6 +35,6 @@
     onclick={() => nav.clone(resource, recordItemId)}
   >
     <Copy class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.clone')}</span>{/if}
+    {#if !hideText}<span class="ml-1">{i18n.t('common.clone')}</span>{/if}
   </Button>
 {/if}

package/dist/components/buttons/CreateButton.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Plus } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
 
+  const i18n = useTranslation();
+
   let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
@@ -31,6 +33,6 @@
     onclick={() => nav.create(resource)}
   >
     <Plus class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.create')}</span>{/if}
+    {#if !hideText}<span class="ml-1">{i18n.t('common.create')}</span>{/if}
   </Button>
 {/if}

package/dist/components/buttons/DeleteButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { useDelete, useCan, t } from '@svadmin/core';
+  import { useDelete, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Trash2 } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
   import { withRecordId } from './access-control';
 
+  const i18n = useTranslation();
+
   let {
     resource, recordItemId, hideText = false,
     accessControl = { enabled: true, hideIfUnauthorized: true }, onSuccess, undoable = false, class: className = '',
@@ -46,10 +48,10 @@
   {#if confirming}
     <div class="inline-flex items-center gap-1">
       <Button variant="destructive" size="sm" onclick={handleDelete}>
-        {t('common.confirm')}
+        {i18n.t('common.confirm')}
       </Button>
       <Button variant="ghost" size="sm" onclick={cancel}>
-        {t('common.cancel')}
+        {i18n.t('common.cancel')}
       </Button>
     </div>
   {:else}
@@ -61,7 +63,7 @@
       onclick={handleDelete}
     >
       <Trash2 class="h-4 w-4" />
-      {#if !hideText}<span class="ml-1">{t('common.delete')}</span>{/if}
+      {#if !hideText}<span class="ml-1">{i18n.t('common.delete')}</span>{/if}
     </Button>
   {/if}
 {/if}

package/dist/components/buttons/EditButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Pencil } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
   import { withRecordId } from './access-control';
 
+  const i18n = useTranslation();
+
   let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
@@ -33,6 +35,6 @@
     onclick={() => nav.edit(resource, recordItemId)}
   >
     <Pencil class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.edit')}</span>{/if}
+    {#if !hideText}<span class="ml-1">{i18n.t('common.edit')}</span>{/if}
   </Button>
 {/if}

package/dist/components/buttons/ExportButton.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { useExport, useCan, t } from '@svadmin/core';
+  import { useExport, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Download } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
 
+  const i18n = useTranslation();
+
   let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
@@ -32,6 +34,6 @@
     onclick={triggerExport}
   >
     <Download class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.export')}</span>{/if}
+    {#if !hideText}<span class="ml-1">{i18n.t('common.export')}</span>{/if}
   </Button>
 {/if}

package/dist/components/buttons/ImportButton.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { useImport, useCan, t } from '@svadmin/core';
+  import { useImport, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Upload } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
 
+  const i18n = useTranslation();
+
   let { resource, hideText = false, onFinish, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
@@ -58,6 +60,6 @@
     onclick={triggerImport}
   >
     <Upload class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.import')}</span>{/if}
+    {#if !hideText}<span class="ml-1">{i18n.t('common.import')}</span>{/if}
   </Button>
 {/if}

package/dist/components/buttons/RefreshButton.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { useInvalidate, t } from '@svadmin/core';
+  import { useInvalidate, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { RefreshCw } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { resource, hideText = false, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
@@ -32,5 +34,5 @@
   onclick={refresh}
 >
   <RefreshCw class="h-4 w-4 {spinning ? 'animate-spin' : ''}" />
-  {#if !hideText}<span class="ml-1">{t('common.retry')}</span>{/if}
+  {#if !hideText}<span class="ml-1">{i18n.t('common.retry')}</span>{/if}
 </Button>

package/dist/components/buttons/SaveButton.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { t } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Save, Loader2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { loading = false, hideText = false, type = 'submit', class: className = '' } = $props<{
     loading?: boolean;
     hideText?: boolean;
@@ -23,5 +25,5 @@
   {:else}
     <Save class="h-4 w-4" />
   {/if}
-  {#if !hideText}<span class="ml-1">{t('common.save')}</span>{/if}
+  {#if !hideText}<span class="ml-1">{i18n.t('common.save')}</span>{/if}
 </Button>

package/dist/components/buttons/ShowButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Eye } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
   import { withRecordId } from './access-control';
 
+  const i18n = useTranslation();
+
   let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
@@ -34,6 +36,6 @@
     onclick={() => nav.show(resource, recordItemId)}
   >
     <Eye class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.detail')}</span>{/if}
+    {#if !hideText}<span class="ml-1">{i18n.t('common.detail')}</span>{/if}
   </Button>
 {/if}

package/dist/components/fieldComponentMap.js

@@ -2,9 +2,6 @@
 // Shared field type → display component mapping
 // Used by both ShowPage and FieldRenderer to avoid duplicate if/else chains.
 // Components are lazily resolved by field type at runtime.
-// Default display component map (read-only field display)
-// Dynamically imports components only when first used
-const _displayCache = new Map();
 // Pre-import all field display components (tree-shaken by bundler)
 import BooleanField from './fields/BooleanField.svelte';
 import ImageField from './fields/ImageField.svelte';

package/dist/components/fields/ArrayField.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Plus, Trash2 } from '@lucide/svelte';
   import TooltipButton from '../TooltipButton.svelte';
   import FieldRenderer from '../FieldRenderer.svelte';
 
+  const i18n = useTranslation();
+
   let { field, value, onchange } = $props<{
     field: FieldDefinition;
     value: unknown;
@@ -54,7 +56,7 @@
       {/if}
     </div>
     <Button variant="outline" size="sm" type="button" onclick={handleAdd}>
-      <Plus class="h-3.5 w-3.5 mr-1" /> {t('common.add') || 'Add'}
+      <Plus class="h-3.5 w-3.5 mr-1" /> {i18n.t('common.add') || 'Add'}
     </Button>
   </div>
   
@@ -62,7 +64,7 @@
     {#each arrayVal as item, i (i)}
       <div class="relative rounded-md border bg-card p-4 pt-6 shadow-sm">
         <div class="absolute right-2 top-2">
-          <TooltipButton tooltip={t('common.remove') || 'Remove'} variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive transition-colors" onclick={() => handleRemove(i)}>
+          <TooltipButton tooltip={i18n.t('common.remove') || 'Remove'} variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive transition-colors" onclick={() => handleRemove(i)}>
             <Trash2 class="h-4 w-4" />
           </TooltipButton>
         </div>
@@ -79,7 +81,7 @@
     {/each}
     {#if arrayVal.length === 0}
       <div class="flex flex-col items-center justify-center py-6 text-sm text-muted-foreground bg-muted/10 rounded-md">
-        <span>{t('common.noData') || 'No items added yet.'}</span>
+        <span>{i18n.t('common.noData') || 'No items added yet.'}</span>
       </div>
     {/if}
   </div>

package/dist/components/fields/JsonField.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Copy, Check, ChevronDown, ChevronRight } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   let { value } = $props<{
     value: unknown;
   }>();
@@ -47,14 +49,14 @@
         {:else}
           <ChevronRight class="h-3 w-3" />
         {/if}
-        {expanded ? t('common.collapse') : t('common.expand')}
+        {expanded ? i18n.t('common.collapse') : i18n.t('common.expand')}
       </Button>
       <Button
         variant="ghost"
         size="sm"
         class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
         onclick={copyJson}
-        aria-label={t('common.copy')}
+        aria-label={i18n.t('common.copy')}
       >
         {#if copied}
           <Check class="h-3 w-3 text-emerald-500" />

package/dist/components/fields/RelationField.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import { ExternalLink } from '@lucide/svelte';
-  import { getRouterProvider } from '@svadmin/core';
+  import { captureAdminContext } from '@svadmin/core';
 
   let { value, resourceName, displayValue } = $props<{
     value: string | number | null | undefined;
     resourceName?: string;
     displayValue?: string;
   }>();
+  const adminContext = captureAdminContext();
 
   const display = $derived(displayValue ?? (value != null ? `#${value}` : '—'));
   const href = $derived.by(() => {
     if (!resourceName || value == null) return undefined;
-    const router = getRouterProvider();
     const path = `/${resourceName}/show/${value}`;
-    return router?.formatLink?.(path) ?? path;
+    return adminContext.formatLink(path);
   });
 </script>
 

package/dist/components/fields/RichTextField.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
 
+  const i18n = useTranslation();
+
   let { value, maxLength = 200 } = $props<{
     value: string | null | undefined;
     maxLength?: number;
@@ -28,7 +30,7 @@
         class="text-xs text-primary h-auto p-0"
         onclick={() => { showFull = !showFull; }}
       >
-        {showFull ? t('common.showLess') : t('common.showMore')}
+        {showFull ? i18n.t('common.showLess') : i18n.t('common.showMore')}
       </Button>
     {/if}
   </div>

package/dist/components/network/TeamCrewTablePage.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Search, Download, UserPlus, MoreHorizontal, CheckCircle2, Clock, XCircle } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface CrewMember {
     id: string;
     name: string;
@@ -37,9 +39,9 @@
   );
 
   const statusConfig = {
-    'active': { icon: CheckCircle2, color: 'text-green-500', dot: 'bg-green-500', label: t('account.active') },
-    'away': { icon: Clock, color: 'text-amber-500', dot: 'bg-amber-500', label: t('account.invited') },
-    'offline': { icon: XCircle, color: 'text-muted-foreground', dot: 'bg-muted-foreground', label: t('account.inactive') },
+    'active': { icon: CheckCircle2, color: 'text-green-500', dot: 'bg-green-500', label: i18n.t('account.active') },
+    'away': { icon: Clock, color: 'text-amber-500', dot: 'bg-amber-500', label: i18n.t('account.invited') },
+    'offline': { icon: XCircle, color: 'text-muted-foreground', dot: 'bg-muted-foreground', label: i18n.t('account.inactive') },
   };
 
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
@@ -48,22 +50,22 @@
 <div class="space-y-6" data-svadmin-content-page="network">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('network.teamCrew')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('network.teamCrewDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('network.teamCrew')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.teamCrewDescription')}</p>
     </div>
     <div class="flex gap-2">
       <Button variant="outline" size="sm">
-        <Download class="h-3.5 w-3.5 mr-1" />{t('common.export')}
+        <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('common.export')}
       </Button>
       <Button size="sm">
-        <UserPlus class="h-3.5 w-3.5 mr-1" />{t('account.inviteMember')}
+        <UserPlus class="h-3.5 w-3.5 mr-1" />{i18n.t('account.inviteMember')}
       </Button>
     </div>
   </div>
 
   <div class="relative">
     <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={t('common.search')} bind:value={searchQuery} class="pl-9" />
+    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
   </div>
 
   <!-- Table -->
@@ -73,12 +75,12 @@
         <table class="w-full">
           <thead>
             <tr class="border-b bg-muted/30">
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.member')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.role')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.member')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.role')}</th>
               <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">Department</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.status')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('publicProfile.projects')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('account.joined')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.status')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('publicProfile.projects')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.joined')}</th>
               <th class="px-4 py-3 w-12"></th>
             </tr>
           </thead>
@@ -144,8 +146,8 @@
               <div class="flex items-center gap-1 {sc.color}">
                 <sc.icon class="h-3 w-3" />{sc.label}
               </div>
-              <div>{t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
-              <div>{t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
+              <div>{i18n.t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
+              <div>{i18n.t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
             </div>
           </div>
         {/each}

package/dist/components/network/UserCardsNFTPage.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
   import { Input } from '../ui/input/index.js';
   import { Search, ExternalLink, Check, Plus } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface NFTUser {
     id: string;
     name: string;
@@ -53,13 +55,13 @@
 
 <div class="space-y-6" data-svadmin-content-page="network">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('network.userCards')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{t('network.userCardsDescription')}</p>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('network.userCards')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.userCardsDescription')}</p>
   </div>
 
   <div class="relative">
     <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={t('common.search')} bind:value={searchQuery} class="pl-9" />
+    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
   </div>
 
   <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
@@ -98,15 +100,15 @@
           <div class="grid grid-cols-3 gap-2 border-t pt-3">
             <div class="text-center">
               <div class="text-sm font-semibold text-foreground">{user.collectionCount}</div>
-              <div class="text-[10px] text-muted-foreground">{t('network.nftCollection')}</div>
+              <div class="text-[10px] text-muted-foreground">{i18n.t('network.nftCollection')}</div>
             </div>
             <div class="text-center">
               <div class="text-sm font-semibold text-foreground">{user.floorPrice}</div>
-              <div class="text-[10px] text-muted-foreground">{t('network.floorPrice')}</div>
+              <div class="text-[10px] text-muted-foreground">{i18n.t('network.floorPrice')}</div>
             </div>
             <div class="text-center">
               <div class="text-xs font-semibold text-foreground">{user.volume}</div>
-              <div class="text-[10px] text-muted-foreground">{t('network.volume')}</div>
+              <div class="text-[10px] text-muted-foreground">{i18n.t('network.volume')}</div>
             </div>
           </div>
 
@@ -118,9 +120,9 @@
               onclick={() => toggleConnect(user.id)}
             >
               {#if isConnected(user.id)}
-                <Check class="h-3.5 w-3.5 mr-1" />{t('network.connected')}
+                <Check class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connected')}
               {:else}
-                <Plus class="h-3.5 w-3.5 mr-1" />{t('network.connect')}
+                <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connect')}
               {/if}
             </Button>
             <Button size="sm" variant="ghost">

package/dist/components/profile/ActivityTimeline.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Avatar } from '../ui/avatar/index.js';
   import { MessageSquare, Plus, UserPlus, Star } from '@lucide/svelte';
   import type { Component } from 'svelte';
 
+  const i18n = useTranslation();
+
   interface ActivityItem {
     id: string;
     type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
@@ -22,20 +24,20 @@
   let { activities = [] }: Props = $props();
 
   const typeConfig: Record<string, { icon: Component; color: string; action: string }> = {
-    'posted': { icon: MessageSquare, color: 'bg-blue-500/10 text-blue-500', action: t('publicProfile.activityPosted') },
-    'commented': { icon: MessageSquare, color: 'bg-green-500/10 text-green-500', action: t('publicProfile.activityCommented') },
-    'joined': { icon: UserPlus, color: 'bg-purple-500/10 text-purple-500', action: t('publicProfile.activityJoined') },
-    'created': { icon: Plus, color: 'bg-amber-500/10 text-amber-500', action: t('publicProfile.activityCreated') },
-    'starred': { icon: Star, color: 'bg-yellow-500/10 text-yellow-500', action: t('publicProfile.activityCreated') },
+    'posted': { icon: MessageSquare, color: 'bg-blue-500/10 text-blue-500', action: i18n.t('publicProfile.activityPosted') },
+    'commented': { icon: MessageSquare, color: 'bg-green-500/10 text-green-500', action: i18n.t('publicProfile.activityCommented') },
+    'joined': { icon: UserPlus, color: 'bg-purple-500/10 text-purple-500', action: i18n.t('publicProfile.activityJoined') },
+    'created': { icon: Plus, color: 'bg-amber-500/10 text-amber-500', action: i18n.t('publicProfile.activityCreated') },
+    'starred': { icon: Star, color: 'bg-yellow-500/10 text-yellow-500', action: i18n.t('publicProfile.activityCreated') },
   };
 </script>
 
 <div class="space-y-4">
-  <h3 class="text-lg font-semibold text-foreground">{t('publicProfile.activity')}</h3>
+  <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.activity')}</h3>
 
   {#if activities.length === 0}
     <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
-      <p class="text-sm text-muted-foreground">{t('publicProfile.noActivity')}</p>
+      <p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noActivity')}</p>
     </div>
   {:else}
     <Card.Card class="border-border/60">

package/dist/components/profile/ProfileCard.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
   import * as Card from '../ui/card/index.js';
   import { Avatar } from '../ui/avatar/index.js';
   import { MapPin, Link, Calendar, Users, Star, Trophy, Building2, Gamepad2 } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface ProfileStats {
     label: string;
     value: string | number;
@@ -93,9 +95,9 @@
         <div class="flex items-center gap-2">
           <h3 class="text-lg font-semibold text-foreground truncate">{name}</h3>
           {#if variant === 'company'}
-            <Badge variant="secondary" class="shrink-0"><Building2 class="h-3 w-3 mr-1" />{t('profile.company')}</Badge>
+            <Badge variant="secondary" class="shrink-0"><Building2 class="h-3 w-3 mr-1" />{i18n.t('profile.company')}</Badge>
           {:else if variant === 'gamer'}
-            <Badge variant="secondary" class="shrink-0"><Gamepad2 class="h-3 w-3 mr-1" />{t('profile.gamer')}</Badge>
+            <Badge variant="secondary" class="shrink-0"><Gamepad2 class="h-3 w-3 mr-1" />{i18n.t('profile.gamer')}</Badge>
           {/if}
         </div>
         {#if tagline}
@@ -116,13 +118,13 @@
         {#if employees}
           <div class="flex items-center gap-2 text-muted-foreground">
             <Users class="h-3.5 w-3.5" />
-            <span>{employees} {t('profile.employees')}</span>
+            <span>{employees} {i18n.t('profile.employees')}</span>
           </div>
         {/if}
         {#if founded}
           <div class="flex items-center gap-2 text-muted-foreground">
             <Calendar class="h-3.5 w-3.5" />
-            <span>{t('profile.founded')} {founded}</span>
+            <span>{i18n.t('profile.founded')} {founded}</span>
           </div>
         {/if}
         {#if website}
@@ -143,7 +145,7 @@
         {#if level}
           <div class="flex items-center gap-2 text-muted-foreground">
             <Star class="h-3.5 w-3.5" />
-            <span>{t('profile.level')} {level}</span>
+            <span>{i18n.t('profile.level')} {level}</span>
           </div>
         {/if}
         {#if rank}
@@ -163,7 +165,7 @@
           <div class="flex items-center gap-1.5"><Link class="h-3.5 w-3.5" /><span class="truncate">{website}</span></div>
         {/if}
         {#if joinedDate}
-          <div class="flex items-center gap-1.5"><Calendar class="h-3.5 w-3.5" /><span>{t('publicProfile.joinedDate', { date: joinedDate })}</span></div>
+          <div class="flex items-center gap-1.5"><Calendar class="h-3.5 w-3.5" /><span>{i18n.t('publicProfile.joinedDate', { date: joinedDate })}</span></div>
         {/if}
       </div>
     {/if}
@@ -193,10 +195,10 @@
     {#if followers > 0 || following > 0}
       <div class="flex gap-4 text-sm border-t pt-3">
         {#if followers > 0}
-          <span><strong class="text-foreground">{followers}</strong> <span class="text-muted-foreground">{t('publicProfile.followers')}</span></span>
+          <span><strong class="text-foreground">{followers}</strong> <span class="text-muted-foreground">{i18n.t('publicProfile.followers')}</span></span>
         {/if}
         {#if following > 0}
-          <span><strong class="text-foreground">{following}</strong> <span class="text-muted-foreground">{t('publicProfile.following')}</span></span>
+          <span><strong class="text-foreground">{following}</strong> <span class="text-muted-foreground">{i18n.t('publicProfile.following')}</span></span>
         {/if}
       </div>
     {/if}
@@ -208,9 +210,9 @@
         variant={isConnected ? 'outline' : 'default'}
         onclick={toggleConnect}
       >
-        {isConnected ? t('network.connected') : t('network.connect')}
+        {isConnected ? i18n.t('network.connected') : i18n.t('network.connect')}
       </Button>
-      <Button size="sm" variant="outline">{t('publicProfile.sendMessage')}</Button>
+      <Button size="sm" variant="outline">{i18n.t('publicProfile.sendMessage')}</Button>
     </div>
   </Card.CardContent>
 </Card.Card>