@svadmin/ui 0.38.1 → 0.38.5

package/dist/components/AICommandBar.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { getResources, 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, 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, Loader2 } from '@lucide/svelte';
   import MarkdownRenderer from './MarkdownRenderer.svelte';
 
+  const i18n = useTranslation();
+
   let { open = $bindable(false) } = $props<{ open?: boolean }>();
+  const adminContext = captureAdminContext();
   let searchValue = $state('');
   
   const resources = getResources();
@@ -80,14 +81,14 @@
     }
   }
 
-  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 onOpenChange={(v: boolean) => !v && close()}>
   <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[600px] border-none shadow-2xl">
     <Command.Root
       shouldFilter={!aiMode}
-      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"
+      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 h-12 relative" data-cmdk-input-wrapper="">
         {#if aiMode}
@@ -119,13 +120,13 @@
           </Command.Empty>
 
           <!-- Navigation -->
-          <Command.Group heading={t('common.home')}>
-            <Command.Item value="home" onSelect={() => act(() => navigate('/'))} class={itemClass}>
+          <Command.Group heading={i18n.t('common.home')}>
+            <Command.Item value="home" 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}`))} class={itemClass}>
+              <Command.Item value={r.name} onSelect={() => act(() => adminContext.navigate(`/${r.name}`))} class={itemClass}>
                 <FileText class="h-4 w-4 text-muted-foreground" />
                 {r.label}
               </Command.Item>
@@ -135,16 +136,16 @@
           <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`))} class={itemClass}>
+              <Command.Item value={`create-${r.name}`} 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 value="toggle-theme" onSelect={() => act(() => toggleTheme())} class={itemClass}>
               <Sun class="h-4 w-4 text-muted-foreground" />
-              {t('common.toggleTheme')}
+              {i18n.t('common.toggleTheme')}
             </Command.Item>
           </Command.Group>
         </Command.List>

package/dist/components/AboutSettings.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { getResources, getDataProviderNames } from '@svadmin/core';
-  import { getLocale } from '@svadmin/core/i18n';
   import { getResolvedTheme, getColorTheme } from '@svadmin/core';
   import * as Card from './ui/card/index.js';
   import { Badge } from './ui/badge/index.js';
   import { Info, Database, Globe, Palette, Layers } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   const resources = getResources();
   const providerNames = getDataProviderNames();
 
@@ -15,7 +16,7 @@
 
 <div class="space-y-6">
   <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.about')}</h2>
+    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.about')}</h2>
   </div>
 
   <!-- Version -->
@@ -29,7 +30,7 @@
     <Card.CardContent>
       <div class="grid gap-4 text-sm">
         <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">{t('settings.version')}</span>
+          <span class="text-muted-foreground">{i18n.t('settings.version')}</span>
           <Badge variant="secondary" class="font-mono text-xs">{version}</Badge>
         </div>
       </div>
@@ -41,7 +42,7 @@
     <Card.CardHeader class="pb-3">
       <Card.CardTitle class="text-base flex items-center gap-2">
         <Layers class="h-4 w-4 text-muted-foreground" />
-        {t('settings.registeredResources')}
+        {i18n.t('settings.registeredResources')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
@@ -61,7 +62,7 @@
     <Card.CardHeader class="pb-3">
       <Card.CardTitle class="text-base flex items-center gap-2">
         <Database class="h-4 w-4 text-muted-foreground" />
-        {t('settings.dataProvider')}
+        {i18n.t('settings.dataProvider')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
@@ -78,25 +79,25 @@
     <Card.CardHeader class="pb-3">
       <Card.CardTitle class="text-base flex items-center gap-2">
         <Globe class="h-4 w-4 text-muted-foreground" />
-        {t('settings.currentEnvironment')}
+        {i18n.t('settings.currentEnvironment')}
       </Card.CardTitle>
     </Card.CardHeader>
     <Card.CardContent>
       <div class="grid gap-3 text-sm">
         <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">{t('settings.language')}</span>
-          <span class="font-mono text-xs">{getLocale()}</span>
+          <span class="text-muted-foreground">{i18n.t('settings.language')}</span>
+          <span class="font-mono text-xs">{i18n.locale}</span>
         </div>
         <div class="h-px bg-border"></div>
         <div class="flex items-center justify-between">
-          <span class="text-muted-foreground">{t('settings.themeMode')}</span>
+          <span class="text-muted-foreground">{i18n.t('settings.themeMode')}</span>
           <span class="font-mono text-xs">{getResolvedTheme()}</span>
         </div>
         <div class="h-px bg-border"></div>
         <div class="flex items-center justify-between">
           <span class="text-muted-foreground flex items-center gap-1.5">
             <Palette class="h-3.5 w-3.5" />
-            {t('settings.colorAccent')}
+            {i18n.t('settings.colorAccent')}
           </span>
           <span class="font-mono text-xs">{getColorTheme()}</span>
         </div>

package/dist/components/AdminApp.svelte

@@ -1,11 +1,35 @@
+<script module lang="ts">
+  const loadPublicProfilePage = () => import('./profile/PublicProfilePage.svelte');
+  const loadGetStartedPage = () => import('./account/GetStartedPage.svelte');
+  const loadCompanyProfilePage = () => import('./account/CompanyProfilePage.svelte');
+  const loadSettingsPlainPage = () => import('./account/SettingsPlainPage.svelte');
+  const loadSettingsSidebarPage = () => import('./account/SettingsSidebarPage.svelte');
+  const loadSettingsEnterprisePage = () => import('./account/SettingsEnterprisePage.svelte');
+  const loadImportMembersPage = () => import('./account/ImportMembersPage.svelte');
+  const loadMembersStarterPage = () => import('./account/MembersStarterPage.svelte');
+  const loadTeamMembersPage = () => import('./account/TeamMembersPage.svelte');
+  const loadSecurityLogPage = () => import('./account/SecurityLogPage.svelte');
+  const loadUserCardsNFTPage = () => import('./network/UserCardsNFTPage.svelte');
+  const loadTeamCrewTablePage = () => import('./network/TeamCrewTablePage.svelte');
+  const loadTwoFactorAuthPage = () => import('./TwoFactorAuthPage.svelte');
+</script>
+
 <script lang="ts">
   // Auto-inject design tokens so consumers don't need to manually import
   import '../app.css';
-  import type { Component, Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, setTaskProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { onDestroy, onMount, untrack, type Component, type Snippet } from 'svelte';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider, I18nProvider } from '@svadmin/core';
+  import {
+    captureAdminContext,
+    createHashRouterProvider,
+    createI18nScope,
+    provideAdminContext,
+    provideI18nScope,
+    registerThemeOwner,
+    unregisterThemeOwner,
+    updateThemeOwner,
+  } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { QueryClient, QueryClientProvider, type DefaultOptions } from '@tanstack/svelte-query';
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
@@ -24,24 +48,12 @@
   import TaskQueueDrawer from './TaskQueueDrawer.svelte';
   import SettingsPage from './SettingsPage.svelte';
   import ErrorPage from './ErrorPage.svelte';
-  import PublicProfilePage from './profile/PublicProfilePage.svelte';
-  import GetStartedPage from './account/GetStartedPage.svelte';
-  import CompanyProfilePage from './account/CompanyProfilePage.svelte';
-  import SettingsPlainPage from './account/SettingsPlainPage.svelte';
-  import SettingsSidebarPage from './account/SettingsSidebarPage.svelte';
-  import SettingsEnterprisePage from './account/SettingsEnterprisePage.svelte';
-  import ImportMembersPage from './account/ImportMembersPage.svelte';
-  import MembersStarterPage from './account/MembersStarterPage.svelte';
-  import TeamMembersPage from './account/TeamMembersPage.svelte';
-  import SecurityLogPage from './account/SecurityLogPage.svelte';
-  import UserCardsNFTPage from './network/UserCardsNFTPage.svelte';
-  import TeamCrewTablePage from './network/TeamCrewTablePage.svelte';
-  import TwoFactorAuthPage from './TwoFactorAuthPage.svelte';
+  import LazyPage from './LazyPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Badge } from './ui/badge/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
-  import { initRouter, getRoute, getParams } from '../router-state.svelte.js';
+  import { provideRouterState } from '../router-state.svelte.js';
 
   interface Props {
     dataProvider: DataProvider;
@@ -49,7 +61,10 @@
     taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
+    /** Bindable tree-local locale; defaults to the provider locale or per-tree browser detection (English during SSR). */
     locale?: string;
+    /** Optional tree-local translation provider. */
+    i18nProvider?: I18nProvider;
     title?: string;
     defaultTheme?: ThemeMode;
     /** Theme configuration for dark-first mode, CSS overrides, etc. */
@@ -90,7 +105,8 @@
     taskProvider,
     routerProvider,
     resources,
-    locale,
+    locale = $bindable(),
+    i18nProvider,
     title = 'Admin',
     defaultTheme,
     themeConfig: userThemeConfig,
@@ -122,28 +138,89 @@
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
   const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
+  const routerState = provideRouterState(untrack(() => resolvedRouter));
+  const scopedRouterProvider: RouterProvider = {
+    go(options) {
+      resolvedRouter.go(options);
+      routerState.sync();
+    },
+    back() {
+      resolvedRouter.back();
+      routerState.sync();
+    },
+    parse() {
+      return resolvedRouter.parse();
+    },
+    formatLink(path) {
+      return resolvedRouter.formatLink?.(path) ?? `#${path.replace(/^#/, '')}`;
+    },
+  };
+
+  $effect.pre(() => routerState.init(resolvedRouter));
+  onDestroy(() => routerState.destroy());
+
+  function updateBoundLocale(nextLocale: string) {
+    locale = nextLocale;
+  }
+
+  const i18nScope = createI18nScope({
+    locale: untrack(() => locale),
+    provider: untrack(() => i18nProvider),
+    onLocaleChange: updateBoundLocale,
+  });
+  provideI18nScope(i18nScope);
+  const translation = useTranslation();
+
+  $effect.pre(() => {
+    const ownerProvider = i18nProvider;
+    const ownerLocale = locale;
+    untrack(() => i18nScope.updateOwner({
+      locale: ownerLocale,
+      provider: ownerProvider,
+      onLocaleChange: updateBoundLocale,
+    }));
+  });
+
+  let themeOwner = $state.raw<ReturnType<typeof registerThemeOwner>>(undefined);
+
+  onMount(() => {
+    themeOwner = registerThemeOwner({
+      defaultTheme,
+      themeConfig: userThemeConfig,
+    });
+
+    return () => {
+      unregisterThemeOwner(themeOwner);
+      themeOwner = undefined;
+    };
+  });
+
+  $effect(() => {
+    const owner = themeOwner;
+    const ownerOptions = {
+      defaultTheme,
+      themeConfig: userThemeConfig,
+    };
+    untrack(() => updateThemeOwner(owner, ownerOptions));
+  });
+
   function syncComponentRegistry() {
     setComponentRegistry(mergedComponents);
   }
 
-  function syncAppContext() {
-    setDataProvider(dataProvider);
-    if (authProvider) setAuthProvider(authProvider);
-    if (taskProvider) setTaskProvider(taskProvider);
-    setResources(resources);
-    setRouterProvider(resolvedRouter);
-    if (locale) setLocale(locale);
-    if (userThemeConfig) configureTheme(userThemeConfig);
-    if (defaultTheme) setTheme(defaultTheme);
-  }
+  provideAdminContext({
+    get dataProvider() { return dataProvider; },
+    get authProvider() { return authProvider ?? null; },
+    get taskProvider() { return taskProvider; },
+    get resources() { return resources; },
+    get routerProvider() { return scopedRouterProvider; },
+  });
+  const adminContext = captureAdminContext();
 
-  // Set up initial context synchronously so children can access resources immediately during first render.
+  // Context must be available synchronously to descendants during their first render.
   syncComponentRegistry();
-  syncAppContext();
 
-  // Set up context — use $effect so prop changes are tracked
   $effect.pre(syncComponentRegistry);
-  $effect.pre(syncAppContext);
 
   const queryClient = $derived(providedQueryClient ?? new QueryClient({
     defaultOptions: {
@@ -152,24 +229,20 @@
     },
   }));
 
-  function syncRouter() {
-    initRouter(resolvedRouter);
-  }
-
-  // Initialize router with provider synchronously
-  syncRouter();
-  $effect.pre(syncRouter);
-
   // Reactive getters for route state
-  const route = $derived(getRoute());
-  const params = $derived(getParams());
+  const route = $derived(routerState.route);
+  const params = $derived(routerState.params);
   const resourceNames = $derived(new Set(resources.map((resource) => resource.name)));
   const hasRouteResource = $derived(!params.resource || resourceNames.has(params.resource));
   const currentResourcePages = $derived(params.resource ? resourcePages?.[params.resource] : undefined);
 
   // Auth check
-  let isAuthenticated = $state(false);
-  let authChecked = $state(false);
+  let isAuthenticated = $state(untrack(() => !authProvider));
+  let authChecked = $state(untrack(() => !authProvider));
+
+  async function navigateWithinApp(path: string) {
+    await adminContext.navigate(path);
+  }
 
   $effect(() => {
     let cancelled = false;
@@ -183,12 +256,13 @@
       }
       return;
     }
+    authChecked = false;
     authProvider.check().then(result => {
       if (cancelled) return;
       isAuthenticated = result.authenticated;
       authChecked = true;
       if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
-        navigate(result.redirectTo ?? '/login');
+        void navigateWithinApp(result.redirectTo ?? '/login');
       }
     }).catch(err => {
       if (cancelled) return;
@@ -196,7 +270,7 @@
       isAuthenticated = false;
       authChecked = true;
       if (_route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
-        navigate('/login');
+        void navigateWithinApp('/login');
       }
     });
 
@@ -220,7 +294,7 @@
       defaultIdentifier={loginDefaults?.identifier}
       defaultPassword={loginDefaults?.password}
       loginHint={loginDefaults?.hint}
-      onSuccess={() => { isAuthenticated = true; navigate('/'); }}
+      onSuccess={() => { isAuthenticated = true; void navigateWithinApp('/'); }}
     />
   {:else if route === '/register' && authProvider?.register}
     <RegisterPage {title} />
@@ -229,49 +303,49 @@
   {:else if route === '/update-password' && authProvider?.updatePassword}
     <UpdatePasswordPage {title} />
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
-    <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
+    <ConfigErrorScreen title="{title} — {translation.t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
       {#key route + (params.resource ?? '') + (params.id ?? '') + (params.variant ?? '') + (params.columns ?? '')}
       <div class="svadmin-page-enter">
       {#if route === '/2fa' || route === '/authentication/branded/2fa'}
-        <TwoFactorAuthPage />
+        <LazyPage loader={loadTwoFactorAuthPage} props={{}} />
       {:else if route === '/public-profile'}
-        <PublicProfilePage variant="default" initialTab="projects" />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' }} />
       {:else if route === '/public-profile/projects/:columns'}
-        <PublicProfilePage variant="default" initialTab="projects" columns={params.columns?.includes('3') ? 3 : 2} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: params.columns?.includes('3') ? 3 : 2 }} />
       {:else if route === '/public-profile/activity'}
-        <PublicProfilePage variant="default" initialTab="activity" />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'activity' }} />
       {:else if route === '/public-profile/teams'}
-        <PublicProfilePage variant="default" initialTab="teams" />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' }} />
       {:else if route === '/public-profile/profiles/:variant'}
-        <PublicProfilePage variant={(params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default'} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: (params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default' }} />
       {:else if route === '/account/get-started' || route === '/account/home/get-started'}
-        <GetStartedPage />
+        <LazyPage loader={loadGetStartedPage} props={{}} />
       {:else if route === '/account/home/user-profile'}
         <SettingsPage />
       {:else if route === '/account/company-profile' || route === '/account/home/company-profile'}
-        <CompanyProfilePage />
+        <LazyPage loader={loadCompanyProfilePage} props={{}} />
       {:else if route === '/account/settings-plain' || route === '/account/home/settings-plain'}
-        <SettingsPlainPage />
+        <LazyPage loader={loadSettingsPlainPage} props={{}} />
       {:else if route === '/account/settings-sidebar' || route === '/account/home/settings-sidebar'}
-        <SettingsSidebarPage />
+        <LazyPage loader={loadSettingsSidebarPage} props={{}} />
       {:else if route === '/account/settings-enterprise' || route === '/account/home/settings-enterprise'}
-        <SettingsEnterprisePage />
+        <LazyPage loader={loadSettingsEnterprisePage} props={{}} />
       {:else if route === '/account/:tab'}
         <SettingsPage />
       {:else if route === '/account/import-members' || route === '/account/members/import-members'}
-        <ImportMembersPage />
+        <LazyPage loader={loadImportMembersPage} props={{}} />
       {:else if route === '/account/members-starter' || route === '/account/members/members-starter'}
-        <MembersStarterPage />
+        <LazyPage loader={loadMembersStarterPage} props={{}} />
       {:else if route === '/account/team-members' || route === '/account/members/team-members'}
-        <TeamMembersPage />
+        <LazyPage loader={loadTeamMembersPage} props={{}} />
       {:else if route === '/account/security-log' || route === '/account/security/security-log'}
-        <SecurityLogPage />
+        <LazyPage loader={loadSecurityLogPage} props={{}} />
       {:else if route === '/network/user-cards' || route === '/network/user-cards/nft'}
-        <UserCardsNFTPage />
+        <LazyPage loader={loadUserCardsNFTPage} props={{}} />
       {:else if route === '/network/team-crew' || route === '/network/user-table/team-crew'}
-        <TeamCrewTablePage />
+        <LazyPage loader={loadTeamCrewTablePage} props={{}} />
       {:else if route.startsWith('/settings')}
         <SettingsPage />
       {:else if route === '/500' || (route === '/:resource' && params.resource === '500')}
@@ -282,8 +356,8 @@
           {@render dashboard()}
         {:else}
           <div class="space-y-4">
-            <h1 class="text-xl font-semibold text-foreground">{t('common.welcome', { title })}</h1>
-            <p class="text-muted-foreground">{t('common.dashboardHint')}</p>
+            <h1 class="text-xl font-semibold text-foreground">{translation.t('common.welcome', { title })}</h1>
+            <p class="text-muted-foreground">{translation.t('common.dashboardHint')}</p>
           </div>
         {/if}
       {:else if (route === '/:resource' || route === '/:parent/:parentId/:resource') && hasRouteResource}
@@ -320,7 +394,7 @@
     </Layout>
   {:else}
     <div class="flex h-screen items-center justify-center">
-      <p class="text-muted-foreground">{t('common.redirecting')}</p>
+      <p class="text-muted-foreground">{translation.t('common.redirecting')}</p>
     </div>
   {/if}
   <Toast />

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

@@ -1,6 +1,6 @@
 import '../app.css';
-import type { Component, Snippet } from 'svelte';
-import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
+import { type Component, type Snippet } from 'svelte';
+import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider, I18nProvider } from '@svadmin/core';
 import { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
 interface Props {
@@ -9,7 +9,10 @@ interface Props {
     taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
+    /** Bindable tree-local locale; defaults to the provider locale or per-tree browser detection (English during SSR). */
     locale?: string;
+    /** Optional tree-local translation provider. */
+    i18nProvider?: I18nProvider;
     title?: string;
     defaultTheme?: ThemeMode;
     /** Theme configuration for dark-first mode, CSS overrides, etc. */
@@ -59,6 +62,6 @@ interface Props {
     /** Optional TanStack Query default options override when QueryClient is not supplied. */
     queryClientDefaultOptions?: DefaultOptions;
 }
-declare const AdminApp: Component<Props, {}, "">;
+declare const AdminApp: Component<Props, {}, "locale">;
 type AdminApp = ReturnType<typeof AdminApp>;
 export default AdminApp;

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>