@svadmin/ui 0.40.5 → 0.41.0

package/dist/components/InsightCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getChatProvider } from '@svadmin/core';
+  import { captureAdminContext, type ChatProvider } from '@svadmin/core';
   import { Sparkles, RefreshCcw, Loader2 } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
   import MarkdownRenderer from './MarkdownRenderer.svelte';
@@ -13,54 +13,84 @@
 
   let { title = 'AI Insights', context, autoFetch = true, class: className = '' }: Props = $props();
 
-  const provider = $derived(getChatProvider());
+  const adminContext = captureAdminContext();
+  const provider = $derived(adminContext.chatProvider);
 
   let isPredicting = $state(false);
   let insightText = $state('');
   let abortController: AbortController | null = null;
-  let hasFetchedForContext = $state('');
+  let requestEpoch = 0;
 
   $effect(() => {
-    if (autoFetch && context && provider && hasFetchedForContext !== context) {
-      hasFetchedForContext = context;
-      getInsights();
+    const scopedProvider = provider;
+    const scopedContext = context;
+    const shouldFetch = autoFetch;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+
+    clearInsightScope();
+    if (shouldFetch && scopedContext && scopedProvider) {
+      void requestInsights(scopedProvider, scopedContext);
     }
+
+    return cancelInsightRequest;
   });
 
   export async function getInsights() {
-    if (!provider || !context) return;
-    
+    const scopedProvider = provider;
+    if (!scopedProvider || !context) return;
+    await requestInsights(scopedProvider, context);
+  }
+
+  function cancelInsightRequest() {
+    requestEpoch += 1;
+    abortController?.abort();
+    abortController = null;
+  }
+
+  function clearInsightScope() {
+    cancelInsightRequest();
+    isPredicting = false;
+    insightText = '';
+  }
+
+  async function requestInsights(scopedProvider: ChatProvider, scopedContext: string) {
+    cancelInsightRequest();
+    const epoch = requestEpoch;
+    const controller = new AbortController();
+    abortController = controller;
     isPredicting = true;
     insightText = '';
-    
-    if (abortController) abortController.abort();
-    abortController = new AbortController();
 
     const prompt = `Based on the following data/context, generate 3 concise, highly professional insights. 
 Use bullet points. Do not include introductory text like "Here are the insights".
 
 Data Context:
-${context}`;
+${scopedContext}`;
 
     try {
-      const result = provider.sendMessage(
+      const result = scopedProvider.sendMessage(
         [{ id: 'insights', role: 'user', content: prompt, timestamp: Date.now() }],
-        { signal: abortController.signal }
+        { signal: controller.signal }
       );
 
       if (Symbol.asyncIterator in result) {
         for await (const chunk of result as AsyncIterable<string>) {
+          if (epoch !== requestEpoch) return;
           insightText += chunk;
         }
       } else {
-        insightText = await result;
+        const response = await result;
+        if (epoch === requestEpoch) insightText = response;
       }
     } catch (err: unknown) {
-      if (err instanceof Error && err.name !== 'AbortError') {
+      if (epoch === requestEpoch && err instanceof Error && err.name !== 'AbortError') {
         insightText = 'Failed to generate insights.';
       }
     } finally {
-      isPredicting = false;
+      if (epoch === requestEpoch) {
+        isPredicting = false;
+        if (abortController === controller) abortController = null;
+      }
     }
   }
 </script>

package/dist/components/Layout.svelte

@@ -10,7 +10,7 @@
   import DevTools from './DevTools.svelte';
   import { useTranslation } from '@svadmin/core/i18n';
 
-  import { captureAdminContext, getAuthProvider, getTaskProvider } from '@svadmin/core';
+  import { captureAdminContext } from '@svadmin/core';
   import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
@@ -26,24 +26,26 @@
   let mobileMenuOpen = $state(false);
 
   let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
+  const layoutId = $props.id();
+  const layoutScope = `svadmin-layout-${layoutId}`;
+  const chatScope = `${layoutScope}-chat`;
   const adminContext = captureAdminContext();
 
-  let auth: ReturnType<typeof getAuthProvider> | null = null;
-  try {
-    auth = getAuthProvider();
-  } catch { /* Auth is optional for public layouts. */ }
+  const auth = $derived(adminContext.authProvider);
   let loading = $state(true);
   let identity = $state<Identity | null>(null);
-  const taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined;
+  const taskProvider = $derived(adminContext.taskProvider as TaskProvider<TaskRecord> | undefined);
   const TaskQueueComponent = getComponentRegistry()?.TaskQueueDrawer;
 
   $effect(() => {
+    const scopedAuth = auth;
     let cancelled = false;
-    if (!auth) {
-      if (!cancelled) loading = false;
-      return;
-    }
-    auth.getIdentity().then(id => {
+
+    identity = null;
+    loading = Boolean(scopedAuth);
+    if (!scopedAuth) return;
+
+    scopedAuth.getIdentity().then(id => {
       if (!cancelled) {
         identity = id;
         loading = false;
@@ -72,7 +74,29 @@
   let touchStartX = $state(0);
   let touchEndX = $state(0);
 
+  function ownsLayoutEvent(event: Event): boolean {
+    const target = event.target instanceof HTMLElement ? event.target : document.activeElement as HTMLElement | null;
+    const owner = target
+      ?.closest<HTMLElement>('[data-svadmin-layout-scope]')
+      ?.dataset.svadminLayoutScope;
+    if (owner) return owner === layoutScope;
+    return document.querySelectorAll('[data-svadmin-layout-scope]').length === 1;
+  }
+
+  function handleGlobalKeydown(e: KeyboardEvent) {
+    if (!ownsLayoutEvent(e)) return;
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      commandOpen = true;
+    }
+    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) {
+      e.preventDefault();
+      shortcutsOpen = true;
+    }
+  }
+
   function handleTouchStart(e: TouchEvent) {
+    if (!ownsLayoutEvent(e)) return;
     if (e.touches.length === 1) {
       touchStartX = e.touches[0].clientX;
       touchEndX = e.touches[0].clientX;
@@ -80,12 +104,14 @@
   }
 
   function handleTouchMove(e: TouchEvent) {
+    if (!ownsLayoutEvent(e)) return;
     if (e.touches.length === 1) {
       touchEndX = e.touches[0].clientX;
     }
   }
 
-  function handleTouchEnd() {
+  function handleTouchEnd(e: TouchEvent) {
+    if (!ownsLayoutEvent(e)) return;
     // Only trigger swipe-to-open if starting near the left edge (e.g., within 30px)
     // and swiping right by at least 50px
     if (touchStartX < 30 && touchEndX - touchStartX > 50) {
@@ -95,16 +121,13 @@
 </script>
 
 <svelte:window 
-  onkeydown={(e) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
-    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
-  }}
+  onkeydown={handleGlobalKeydown}
   ontouchstart={handleTouchStart}
   ontouchmove={handleTouchMove}
   ontouchend={handleTouchEnd}
 />
 {#if loading}
-  <div class="flex h-screen" in:fade={{ duration: 150 }}>
+  <div data-svadmin-layout-scope={layoutScope} class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-[252px] bg-sidebar/80 p-4 space-y-4">
       <Skeleton class="h-8 w-32" />
       <div class="space-y-2 mt-6">
@@ -126,7 +149,7 @@
     <DevTools docked />
   </div>
 {:else}
-  <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
+  <div data-svadmin-layout-scope={layoutScope} class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
       <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
@@ -190,7 +213,7 @@
 
       <footer class="flex min-h-14 shrink-0 items-center justify-end gap-2 border-t border-border/60 bg-background px-4 empty:hidden">
         <DevTools docked />
-        <ChatDialog docked />
+        <ChatDialog docked scope={chatScope} ownerScope={layoutScope} />
       </footer>
     </div>
   </div>
@@ -198,7 +221,9 @@
     bind:open={commandOpen} 
     onAskAI={(q) => {
       if (typeof window !== 'undefined') {
-        window.dispatchEvent(new CustomEvent('svadmin:ask-ai', { detail: q }));
+        window.dispatchEvent(new CustomEvent('svadmin:ask-ai', {
+          detail: { query: q, scope: chatScope },
+        }));
       }
     }}
   />

package/dist/components/LoginPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext, useLogin, getAuthProvider } from '@svadmin/core';
+  import { captureAdminContext, useLogin } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
@@ -36,7 +36,7 @@
 
   const adminContext = captureAdminContext();
   const login = useLogin({ errorMessage: false });
-  const authProvider = getAuthProvider();
+  const authProvider = $derived(adminContext.authProvider);
 
   function getInitialIdentifier() {
     return defaultIdentifier;
@@ -171,7 +171,7 @@
             <Label for="login-password" class="text-sm font-semibold text-foreground/80">
               {i18n.t('auth.password')}
             </Label>
-            {#if authProvider.forgotPassword}
+            {#if authProvider?.forgotPassword}
               <Button variant="link" class="text-xs h-auto p-0 font-medium hover:text-primary transition-colors" onclick={() => adminContext.navigate('/forgot-password')}>
                 {i18n.t('auth.forgotPasswordLink')}
               </Button>
@@ -217,7 +217,7 @@
         </div>
       {/if}
 
-      {#if authProvider.register}
+      {#if authProvider?.register}
         <div class="flex items-center justify-center gap-1.5 mt-8 pt-6 border-t border-border/60">
           <span class="text-sm text-muted-foreground">{i18n.t('auth.noAccount')}</span>
           <Button variant="link" class="text-sm h-auto p-0 font-semibold text-primary hover:underline" onclick={() => adminContext.navigate('/register')}>

package/dist/components/ProfilePage.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
+  import {
+    captureAdminContext,
+    useGetIdentity,
+    useUpdatePassword,
+    type AuthProvider,
+  } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Label } from './ui/label/index.js';
@@ -10,21 +15,62 @@
   import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from '@lucide/svelte';
 
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
 
   const identity = useGetIdentity();
   const updatePw = useUpdatePassword();
 
-  // Check if auth provider supports updateProfile
-  let authProvider: ReturnType<typeof getAuthProvider> | null = null;
-  try { authProvider = getAuthProvider(); } catch { /* no auth */ }
-  const canUpdateProfile = !!authProvider?.updateProfile;
+  const authProvider = $derived(adminContext.authProvider);
+  const tenantIdentity = $derived(adminContext.tenantCacheKey?.__svadminTenant);
+  const canUpdateProfile = $derived(Boolean(authProvider?.updateProfile));
 
-  // Profile edit state
   let editingProfile = $state(false);
   let editName = $state('');
   let profileSaving = $state(false);
   let profileSuccess = $state(false);
   let profileError = $state('');
+  let avatarUploading = $state(false);
+  let fileInput = $state<HTMLInputElement>();
+  let currentPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
+  let pwError = $state('');
+  let pwSuccess = $state(false);
+  let scopeEpoch = 0;
+
+  function resetProfileScope(): void {
+    editingProfile = false;
+    editName = '';
+    profileSaving = false;
+    profileSuccess = false;
+    profileError = '';
+    avatarUploading = false;
+    currentPassword = '';
+    newPassword = '';
+    confirmPassword = '';
+    pwError = '';
+    pwSuccess = false;
+  }
+
+  function isActiveScope(
+    epoch: number,
+    provider: AuthProvider | null,
+    scopedTenantIdentity: string | number | undefined,
+  ): boolean {
+    return epoch === scopeEpoch
+      && provider === authProvider
+      && scopedTenantIdentity === tenantIdentity;
+  }
+
+  $effect(() => {
+    void authProvider;
+    void tenantIdentity;
+    scopeEpoch++;
+    resetProfileScope();
+    return () => {
+      scopeEpoch++;
+    };
+  });
 
   function startEditProfile() {
     editName = identity.data?.name ?? '';
@@ -34,11 +80,15 @@
   }
 
   async function saveProfile() {
-    if (!authProvider?.updateProfile) return;
+    const provider = authProvider;
+    if (!provider?.updateProfile) return;
+    const epoch = scopeEpoch;
+    const scopedTenantIdentity = tenantIdentity;
     profileSaving = true;
     profileError = '';
     try {
-      const result = await authProvider.updateProfile({ name: editName });
+      const result = await provider.updateProfile({ name: editName });
+      if (!isActiveScope(epoch, provider, scopedTenantIdentity)) return;
       if (result.success) {
         profileSuccess = true;
         editingProfile = false;
@@ -47,35 +97,29 @@
         profileError = result.error?.message ?? i18n.t('common.operationFailed');
       }
     } catch (e) {
-      profileError = (e as Error).message;
+      if (isActiveScope(epoch, provider, scopedTenantIdentity)) {
+        profileError = e instanceof Error ? e.message : String(e);
+      }
     } finally {
-      profileSaving = false;
+      if (isActiveScope(epoch, provider, scopedTenantIdentity)) profileSaving = false;
     }
   }
 
-  // Avatar upload
-  let avatarUploading = $state(false);
-  let fileInput = $state<HTMLInputElement>(null!); // eslint-disable-line @typescript-eslint/no-non-null-assertion
-
   async function handleAvatarChange(e: Event) {
     const file = (e.target as HTMLInputElement).files?.[0];
-    if (!file || !authProvider?.updateProfile) return;
+    const provider = authProvider;
+    if (!file || !provider?.updateProfile) return;
+    const epoch = scopeEpoch;
+    const scopedTenantIdentity = tenantIdentity;
     avatarUploading = true;
     try {
-      const result = await authProvider.updateProfile({ avatar: file });
-      if (result.success) identity.refetch();
+      const result = await provider.updateProfile({ avatar: file });
+      if (isActiveScope(epoch, provider, scopedTenantIdentity) && result.success) identity.refetch();
     } finally {
-      avatarUploading = false;
+      if (isActiveScope(epoch, provider, scopedTenantIdentity)) avatarUploading = false;
     }
   }
 
-  // Password change form
-  let currentPassword = $state('');
-  let newPassword = $state('');
-  let confirmPassword = $state('');
-  let pwError = $state('');
-  let pwSuccess = $state(false);
-
   async function handlePasswordChange(e: SubmitEvent) {
     e.preventDefault();
     pwError = '';
@@ -84,11 +128,15 @@
     if (!newPassword) { pwError = i18n.t('auth.passwordRequired'); return; }
     if (newPassword !== confirmPassword) { pwError = i18n.t('auth.passwordMismatch'); return; }
 
+    const provider = authProvider;
+    const epoch = scopeEpoch;
+    const scopedTenantIdentity = tenantIdentity;
     const result = await updatePw.mutate({
       password: newPassword,
       currentPassword,
       confirmPassword,
     });
+    if (!isActiveScope(epoch, provider, scopedTenantIdentity)) return;
     if (result.success) {
       pwSuccess = true;
       currentPassword = '';
@@ -99,7 +147,6 @@
     }
   }
 
-  // Avatar initials
   const initials = $derived(
     identity.data?.name
       ? identity.data.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
@@ -151,7 +198,7 @@
             {#if canUpdateProfile}
               <button
                 class="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
-                onclick={() => fileInput.click()}
+                onclick={() => fileInput?.click()}
                 disabled={avatarUploading}
               >
                 {#if avatarUploading}

package/dist/components/RetryTaskButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getTaskProvider } from '@svadmin/core';
+  import { captureAdminContext } from '@svadmin/core';
   import { useQueryClient } from '@tanstack/svelte-query';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -7,10 +7,11 @@
   import { Loader2, RotateCcw } from '@lucide/svelte';
 
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
 
   let {
     taskId,
-    taskProvider = getTaskProvider({ optional: true }),
+    taskProvider = adminContext.taskProvider ?? undefined,
     onSuccess,
     onError,
     disabled = false,
@@ -37,8 +38,15 @@
     try {
       await taskProvider.retry(taskId);
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ['taskList'] }),
-        queryClient.invalidateQueries({ queryKey: ['task', taskId] }),
+        queryClient.invalidateQueries({
+          predicate: (query) => query.queryKey[0] === 'taskList'
+            && adminContext.matchesTenantQuery(query.queryKey),
+        }),
+        queryClient.invalidateQueries({
+          predicate: (query) => query.queryKey[0] === 'task'
+            && query.queryKey[1] === taskId
+            && adminContext.matchesTenantQuery(query.queryKey),
+        }),
       ]);
       onSuccess?.();
     } catch (error) {

package/dist/components/RolesSettings.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import { getAuthProvider, getResources } from '@svadmin/core';
+  import { captureAdminContext } from '@svadmin/core';
+  import type { AuthProvider } from '@svadmin/core';
   import PermissionMatrix from './PermissionMatrix.svelte';
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
   import { toast } from '@svadmin/core/toast';
   import { AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
 
-  const authProvider = getAuthProvider({ optional: true });
-  const rawResources = getResources();
+  const authProvider = $derived(adminContext.authProvider);
+  const rawResources = $derived(adminContext.resources);
 
   let roles = $state<RoleInfo[]>([]);
   let selectedRoleCode = $state<string>('');
@@ -21,6 +23,9 @@
   let loadingPermissions = $state(false);
   let saving = $state(false);
   let error = $state<string | null>(null);
+  let roleRequestEpoch = 0;
+  let permissionRequestEpoch = 0;
+  let mutationRequestEpoch = 0;
 
   // Convert system resources to MatrixResource format
   let matrixResources = $derived<ResourceInfo[]>(
@@ -37,36 +42,38 @@
     { code: 'delete', name: i18n.t('common.delete') ?? 'Delete' },
   ]);
 
-  async function loadRoles() {
-    if (!authProvider?.getRoles) {
+  async function loadRoles(scopedProvider: AuthProvider | null, epoch: number) {
+    if (!scopedProvider?.getRoles) {
+      if (epoch !== roleRequestEpoch) return;
       error = i18n.t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
       loadingRoles = false;
       return;
     }
     try {
-      const fetchedRoles = await authProvider.getRoles();
+      const fetchedRoles = await scopedProvider.getRoles();
+      if (epoch !== roleRequestEpoch) return;
       roles = fetchedRoles.map(r => ({ code: r.id, ...r }));
-      if (roles.length > 0 && !selectedRoleCode) {
-        selectedRoleCode = roles[0].code;
-      }
+      selectedRoleCode = roles[0]?.code ?? '';
     } catch (e) {
-      error = (e as Error).message;
+      if (epoch === roleRequestEpoch) error = (e as Error).message;
     } finally {
-      loadingRoles = false;
+      if (epoch === roleRequestEpoch) loadingRoles = false;
     }
   }
 
   async function loadPermissionsForRole(roleId: string) {
-    if (!authProvider?.getRolePermissions || permissionsCache[roleId]) return;
+    const scopedProvider = authProvider;
+    const epoch = permissionRequestEpoch;
+    if (!scopedProvider?.getRolePermissions || permissionsCache[roleId]) return;
     
     loadingPermissions = true;
     try {
-      const perms = await authProvider.getRolePermissions(roleId);
-      permissionsCache[roleId] = perms;
+      const perms = await scopedProvider.getRolePermissions(roleId);
+      if (epoch === permissionRequestEpoch) permissionsCache[roleId] = perms;
     } catch (e) {
-      toast.error((e as Error).message);
+      if (epoch === permissionRequestEpoch) toast.error((e as Error).message);
     } finally {
-      loadingPermissions = false;
+      if (epoch === permissionRequestEpoch) loadingPermissions = false;
     }
   }
 
@@ -78,7 +85,25 @@
   });
 
   $effect(() => {
-    loadRoles();
+    const scopedProvider = authProvider;
+    const epoch = ++roleRequestEpoch;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    permissionRequestEpoch += 1;
+    mutationRequestEpoch += 1;
+    roles = [];
+    selectedRoleCode = '';
+    permissionsCache = {};
+    error = null;
+    loadingRoles = true;
+    loadingPermissions = false;
+    saving = false;
+    void loadRoles(scopedProvider, epoch);
+
+    return () => {
+      roleRequestEpoch += 1;
+      permissionRequestEpoch += 1;
+      mutationRequestEpoch += 1;
+    };
   });
 
   // isGranted logic
@@ -89,7 +114,9 @@
   }
 
   async function handleToggle(roleCode: string, resourceCode: string, actionCode: string, grant: boolean) {
-    if (!authProvider?.updateRolePermissions) return;
+    const scopedProvider = authProvider;
+    if (!scopedProvider?.updateRolePermissions) return;
+    const mutationEpoch = ++mutationRequestEpoch;
     
     // Copy state
     const currentRolePerms = { ...(permissionsCache[roleCode] || {}) };
@@ -109,19 +136,21 @@
     saving = true;
     try {
       // Send the entire role's permissions back (as defined by our AuthProvider interface)
-      const result = await authProvider.updateRolePermissions(roleCode, currentRolePerms);
+      const result = await scopedProvider.updateRolePermissions(roleCode, currentRolePerms);
+      if (mutationEpoch !== mutationRequestEpoch) return;
       if (result.success) {
         // Success silently
       } else {
          throw new Error(result.error?.message ?? i18n.t('common.operationFailed'));
       }
     } catch (e) {
+      if (mutationEpoch !== mutationRequestEpoch) return;
       toast.error((e as Error).message);
       // Rollback on fail
       delete permissionsCache[roleCode]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
-      loadPermissionsForRole(roleCode);
+      void loadPermissionsForRole(roleCode);
     } finally {
-      saving = false;
+      if (mutationEpoch === mutationRequestEpoch) saving = false;
     }
   }
 </script>

package/dist/components/SettingsPage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
-  import { captureAdminContext, getAuthProvider } from "@svadmin/core";
+  import { captureAdminContext } from "@svadmin/core";
   import { useTranslation } from "@svadmin/core/i18n";
 
   import { User, Palette, Info, Shield, FileSearch, Lock, Puzzle, Bell, Key } from "@lucide/svelte";
@@ -15,7 +15,7 @@
   import ApiSettings from "./ApiSettings.svelte";
 
   const adminContext = captureAdminContext();
-  const authProvider = getAuthProvider({ optional: true });
+  const authProvider = $derived(adminContext.authProvider);
 
   interface SettingsItem {
     key: string;
@@ -57,7 +57,7 @@
     content,
   }: Props = $props();
 
-  const defaultSections = [
+  const defaultSections = $derived.by((): SettingsSection[] => [
     {
       group: "settings.general",
       items: [
@@ -86,7 +86,7 @@
         { key: "about", path: "/settings/about", icon: Info, label: "settings.about" },
       ],
     },
-  ];
+  ]);
 
   const resolvedSections = $derived.by(() => {
     if (customSections) return customSections;