@svadmin/ui 0.38.1 → 0.38.5

package/dist/components/LoginPage.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { useLogin, getAuthProvider } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useLogin, getAuthProvider } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
@@ -10,6 +9,8 @@
   import { Separator } from './ui/separator/index.js';
   import { User, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
+  const i18n = useTranslation();
+
   interface SocialProvider {
     name: string;
     icon?: string;
@@ -32,6 +33,7 @@
     loginHint?: string;
   }>();
 
+  const adminContext = captureAdminContext();
   const login = useLogin({ errorMessage: false });
   const authProvider = getAuthProvider();
 
@@ -51,14 +53,14 @@
     e.preventDefault();
     error = '';
 
-    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
-    if (!password) { error = t('auth.passwordRequired'); return; }
+    if (!identifier) { error = i18n.t('auth.usernameOrEmailRequired'); return; }
+    if (!password) { error = i18n.t('auth.passwordRequired'); return; }
 
     const result = await login.mutate({ email: identifier, username: identifier, password });
     if (result.success) {
       onSuccess?.();
     } else {
-      error = result.error?.message ?? t('common.loginFailed');
+      error = result.error?.message ?? i18n.t('common.loginFailed');
     }
   }
 </script>
@@ -83,10 +85,10 @@
 
       <div class="max-w-[360px] space-y-4">
         <h2 class="text-4xl font-bold text-white leading-tight">
-          {t('auth.welcomeBack')}
+          {i18n.t('auth.welcomeBack')}
         </h2>
         <p class="text-lg text-white/75 leading-relaxed">
-          {t('auth.welcomeMessage')}
+          {i18n.t('auth.welcomeMessage')}
         </p>
       </div>
 
@@ -109,10 +111,10 @@
 
       <div class="space-y-2.5">
         <h1 class="text-3xl font-semibold tracking-tight text-foreground">
-          {t('auth.welcomeBack')}
+          {i18n.t('auth.welcomeBack')}
         </h1>
         <p class="text-base text-muted-foreground leading-relaxed">
-          {t('auth.welcomeMessage')}
+          {i18n.t('auth.welcomeMessage')}
         </p>
       </div>
 
@@ -125,7 +127,7 @@
             {#if defaultIdentifier}
               <div class="rounded-xl border border-border/70 bg-background/80 px-3 py-2">
                 <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t('auth.usernameOrEmail')}
+                  {i18n.t('auth.usernameOrEmail')}
                 </p>
                 <p class="mt-1 font-mono text-sm font-semibold text-foreground">{defaultIdentifier}</p>
               </div>
@@ -133,7 +135,7 @@
             {#if defaultPassword}
               <div class="rounded-xl border border-border/70 bg-background/80 px-3 py-2">
                 <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t('auth.password')}
+                  {i18n.t('auth.password')}
                 </p>
                 <p class="mt-1 font-mono text-sm font-semibold text-foreground">{defaultPassword}</p>
               </div>
@@ -152,14 +154,14 @@
 
         <div class="space-y-2.5">
           <Label for="login-identifier" class="text-sm font-semibold text-foreground/80 pl-0.5">
-            {t('auth.usernameOrEmail')}
+            {i18n.t('auth.usernameOrEmail')}
           </Label>
           <div class="relative">
             <User class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none z-[1]" />
             <Input
               id="login-identifier"
               type="text"
-              placeholder={t('auth.identifierPlaceholder')}
+              placeholder={i18n.t('auth.identifierPlaceholder')}
               bind:value={identifier}
               class="pl-12"
               autocomplete="username"
@@ -170,11 +172,11 @@
         <div class="space-y-2.5">
           <div class="flex items-center justify-between pl-0.5">
             <Label for="login-password" class="text-sm font-semibold text-foreground/80">
-              {t('auth.password')}
+              {i18n.t('auth.password')}
             </Label>
             {#if authProvider.forgotPassword}
-              <Button variant="link" class="text-xs h-auto p-0 font-medium hover:text-primary transition-colors" onclick={() => navigate('/forgot-password')}>
-                {t('auth.forgotPasswordLink')}
+              <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>
             {/if}
           </div>
@@ -190,7 +192,7 @@
           {#if login.isLoading}
             <Loader2 class="h-5 w-5 animate-spin mr-2" />
           {/if}
-          {t('auth.loginButton')}
+          {i18n.t('auth.loginButton')}
         </Button>
       </form>
 
@@ -198,7 +200,7 @@
         <div class="relative my-8">
           <Separator />
           <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-4 text-xs font-semibold text-muted-foreground tracking-wider uppercase">
-            {t('auth.orContinueWith')}
+            {i18n.t('auth.orContinueWith')}
           </span>
         </div>
 
@@ -220,9 +222,9 @@
 
       {#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">{t('auth.noAccount')}</span>
-          <Button variant="link" class="text-sm h-auto p-0 font-semibold text-primary hover:underline" onclick={() => navigate('/register')}>
-            {t('auth.register')}
+          <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')}>
+            {i18n.t('auth.register')}
           </Button>
         </div>
       {/if}

package/dist/components/MarkdownRenderer.svelte

@@ -26,7 +26,7 @@
 
   let { content, streaming = false, class: className = "" }: Props = $props();
 
-  const hasMarkdownDeps = !!(Marked && Object.keys(DOMPurify || {}).length > 0);
+  const hasMarkdownDeps = typeof Marked === "function" && typeof DOMPurify?.sanitize === "function";
 
   // Configure marked with syntax highlighting if available
   const markedObj = hasMarkdownDeps ? new Marked(
@@ -69,47 +69,101 @@
     }, 2000);
   }
 
+  function createCopyIcon(): SVGSVGElement {
+    const svgNamespace = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNamespace, "svg");
+    svg.setAttribute("width", "14");
+    svg.setAttribute("height", "14");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("aria-hidden", "true");
+    svg.classList.add("lucide", "lucide-copy");
+
+    const rect = document.createElementNS(svgNamespace, "rect");
+    rect.setAttribute("width", "14");
+    rect.setAttribute("height", "14");
+    rect.setAttribute("x", "8");
+    rect.setAttribute("y", "8");
+    rect.setAttribute("rx", "2");
+    rect.setAttribute("ry", "2");
+    svg.appendChild(rect);
+
+    const path = document.createElementNS(svgNamespace, "path");
+    path.setAttribute("d", "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2");
+    svg.appendChild(path);
+
+    return svg;
+  }
+
   // Inject copy buttons into the HTML after rendering
   // We do this via action instead of raw string manipulation for safety
   function enhanceCodeBlocks(node: HTMLElement, _: string) {
+    let destroyed = false;
+    let enhancementScheduled = false;
+
+    function enhance() {
+      if (destroyed) return;
+
+      // Find all pre > code blocks that don't have wrappers yet
+      const pres = node.querySelectorAll("pre:not(.enhanced)");
+      pres.forEach((pre) => {
+        pre.classList.add("enhanced");
+        const wrapper = document.createElement("div");
+        wrapper.className =
+          "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
+
+        const header = document.createElement("div");
+        header.className =
+          "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
+
+        const lang =
+          Array.from(pre.querySelector("code")?.classList || [])
+            .find((className) => className.startsWith("language-"))
+            ?.replace("language-", "") || "Code";
+        const languageLabel = document.createElement("span");
+        languageLabel.textContent = lang;
+
+        const copyButton = document.createElement("button");
+        copyButton.type = "button";
+        copyButton.className =
+          "copy-btn hover:text-white transition-colors flex items-center gap-1";
+        copyButton.setAttribute("aria-label", "Copy code");
+        copyButton.appendChild(createCopyIcon());
+
+        header.append(languageLabel, copyButton);
+        pre.replaceWith(wrapper);
+        wrapper.appendChild(header);
+
+        const scrollContainer = document.createElement("div");
+        scrollContainer.className = "overflow-x-auto p-4";
+        scrollContainer.appendChild(pre);
+        wrapper.appendChild(scrollContainer);
+      });
+    }
+
+    function scheduleEnhancement() {
+      if (enhancementScheduled || destroyed) return;
+      enhancementScheduled = true;
+      queueMicrotask(() => {
+        enhancementScheduled = false;
+        enhance();
+      });
+    }
+
+    node.addEventListener("click", handleCopy);
+    enhance();
+    scheduleEnhancement();
+
     return {
       update(_newHtml: string) {
-        // Find all pre > code blocks that don't have wrappers yet
-        const pres = node.querySelectorAll("pre:not(.enhanced)");
-        pres.forEach((pre) => {
-          pre.classList.add("enhanced");
-          const wrapper = document.createElement("div");
-          wrapper.className =
-            "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
-
-          const header = document.createElement("div");
-          header.className =
-            "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
-
-          const lang =
-            Array.from(pre.querySelector("code")?.classList || [])
-              .find((c) => c.startsWith("language-"))
-              ?.replace("language-", "") || "Code";
-          header.innerHTML = `
-            <span>${lang}</span>
-            <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-            </button>
-          `;
-
-          pre.replaceWith(wrapper);
-          wrapper.appendChild(header);
-
-          const scrollContainer = document.createElement("div");
-          scrollContainer.className = "overflow-x-auto p-4";
-          scrollContainer.appendChild(pre);
-          wrapper.appendChild(scrollContainer);
-        });
-
-        // Add event listener for copy buttons
-        node.addEventListener("click", handleCopy);
+        scheduleEnhancement();
       },
       destroy() {
+        destroyed = true;
         node.removeEventListener("click", handleCopy);
       },
     };

package/dist/components/ModalForm.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import { getResource } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import * as Dialog from './ui/dialog/index.js';
   import AutoForm from './AutoForm.svelte';
 
+  const i18n = useTranslation();
+
   let { resourceName, mode = 'create', id, open = $bindable(false), onSuccess } = $props<{
     resourceName: string;
     mode?: 'create' | 'edit';
@@ -27,7 +29,7 @@
     <Dialog.DialogContent class="{dialogWidth} max-h-[85vh] overflow-y-auto">
       <Dialog.DialogHeader>
         <Dialog.DialogTitle>
-          {mode === 'create' ? `${t('common.create')}${resource.label}` : `${t('common.edit')}${resource.label}`}
+          {mode === 'create' ? `${i18n.t('common.create')}${resource.label}` : `${i18n.t('common.edit')}${resource.label}`}
         </Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <AutoForm {resourceName} {mode} {id} onSuccess={handleSuccess} />

package/dist/components/NavigateToResource.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { useMenu } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
+  import { captureAdminContext, useMenu } from '@svadmin/core';
   
+  const adminContext = captureAdminContext();
   const { menuItems } = useMenu();
 
   let navigated = false;
@@ -9,7 +9,7 @@
     // Navigate to first resource ONCE — avoid infinite re-triggers
     if (!navigated && menuItems.length > 0) {
       navigated = true;
-      navigate(menuItems[0].route);
+      adminContext.navigate(menuItems[0].route);
     }
   });
 </script>

package/dist/components/NotificationsSettings.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Bell, Mail, Smartphone } from '@lucide/svelte';
   import * as Card from './ui/card/index.js';
   import { Button } from './ui/button/index.js';
   import { Label } from './ui/label/index.js';
   import { Switch } from './ui/switch/index.js';
 
+  const i18n = useTranslation();
+
   let emailAlerts = $state({ security: true, activity: false, reports: true });
   let pushAlerts = $state({ security: true, activity: true, reports: false });
   let smsAlerts = $state({ security: true });
@@ -22,39 +24,39 @@
 <div class="space-y-6">
   <div class="flex flex-col justify-between gap-3 sm:flex-row sm:items-start">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('settings.notifications')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('settings.notificationsDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.notifications')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.notificationsDescription')}</p>
     </div>
-    <Button onclick={saveSettings}>{isSaved ? t('common.autoSaved') : t('common.save')}</Button>
+    <Button onclick={saveSettings}>{isSaved ? i18n.t('common.autoSaved') : i18n.t('common.save')}</Button>
   </div>
 
   <Card.Card>
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Mail class="h-4 w-4 text-muted-foreground" />
-        {t('notifications.emailTitle')}
+        {i18n.t('notifications.emailTitle')}
       </Card.CardTitle>
-      <Card.CardDescription>{t('notifications.emailDescription')}</Card.CardDescription>
+      <Card.CardDescription>{i18n.t('notifications.emailDescription')}</Card.CardDescription>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
       <div class="flex items-center justify-between gap-4 border-b py-2">
         <div class="space-y-1">
-          <Label for="email-security">{t('notifications.securityAlerts')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.securityAlertsDesc')}</p>
+          <Label for="email-security">{i18n.t('notifications.securityAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.securityAlertsDesc')}</p>
         </div>
         <Switch id="email-security" bind:checked={emailAlerts.security} />
       </div>
       <div class="flex items-center justify-between gap-4 border-b py-2">
         <div class="space-y-1">
-          <Label for="email-activity">{t('notifications.activityLogs')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.activityLogsDesc')}</p>
+          <Label for="email-activity">{i18n.t('notifications.activityLogs')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.activityLogsDesc')}</p>
         </div>
         <Switch id="email-activity" bind:checked={emailAlerts.activity} />
       </div>
       <div class="flex items-center justify-between gap-4 py-2">
         <div class="space-y-1">
-          <Label for="email-reports">{t('notifications.systemAlerts')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.systemAlertsDesc')}</p>
+          <Label for="email-reports">{i18n.t('notifications.systemAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.systemAlertsDesc')}</p>
         </div>
         <Switch id="email-reports" bind:checked={emailAlerts.reports} />
       </div>
@@ -65,29 +67,29 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Bell class="h-4 w-4 text-muted-foreground" />
-        {t('notifications.pushTitle')}
+        {i18n.t('notifications.pushTitle')}
       </Card.CardTitle>
-      <Card.CardDescription>{t('notifications.pushDescription')}</Card.CardDescription>
+      <Card.CardDescription>{i18n.t('notifications.pushDescription')}</Card.CardDescription>
     </Card.CardHeader>
     <Card.CardContent class="space-y-4">
       <div class="flex items-center justify-between gap-4 border-b py-2">
         <div class="space-y-1">
-          <Label for="push-security">{t('notifications.securityAlerts')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.securityPushDesc')}</p>
+          <Label for="push-security">{i18n.t('notifications.securityAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.securityPushDesc')}</p>
         </div>
         <Switch id="push-security" bind:checked={pushAlerts.security} />
       </div>
       <div class="flex items-center justify-between gap-4 border-b py-2">
         <div class="space-y-1">
-          <Label for="push-activity">{t('notifications.activityLogs')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.activityPushDesc')}</p>
+          <Label for="push-activity">{i18n.t('notifications.activityLogs')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.activityPushDesc')}</p>
         </div>
         <Switch id="push-activity" bind:checked={pushAlerts.activity} />
       </div>
       <div class="flex items-center justify-between gap-4 py-2">
         <div class="space-y-1">
-          <Label for="push-reports">{t('notifications.systemAlerts')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.systemPushDesc')}</p>
+          <Label for="push-reports">{i18n.t('notifications.systemAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.systemPushDesc')}</p>
         </div>
         <Switch id="push-reports" bind:checked={pushAlerts.reports} />
       </div>
@@ -98,15 +100,15 @@
     <Card.CardHeader>
       <Card.CardTitle class="flex items-center gap-2 text-base">
         <Smartphone class="h-4 w-4 text-muted-foreground" />
-        {t('notifications.smsTitle')}
+        {i18n.t('notifications.smsTitle')}
       </Card.CardTitle>
-      <Card.CardDescription>{t('notifications.smsDescription')}</Card.CardDescription>
+      <Card.CardDescription>{i18n.t('notifications.smsDescription')}</Card.CardDescription>
     </Card.CardHeader>
     <Card.CardContent>
       <div class="flex items-center justify-between gap-4 py-2">
         <div class="space-y-1">
-          <Label for="sms-security">{t('notifications.criticalSecurity')}</Label>
-          <p class="text-xs text-muted-foreground">{t('notifications.criticalSecurityDesc')}</p>
+          <Label for="sms-security">{i18n.t('notifications.criticalSecurity')}</Label>
+          <p class="text-xs text-muted-foreground">{i18n.t('notifications.criticalSecurityDesc')}</p>
         </div>
         <Switch id="sms-security" bind:checked={smsAlerts.security} />
       </div>

package/dist/components/PasswordInput.svelte

@@ -4,7 +4,9 @@
   import TooltipButton from './TooltipButton.svelte';
   import { Label } from './ui/label/index.js';
   import { Lock, Eye, EyeOff } from '@lucide/svelte';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
 
   interface Props {
     id: string;
@@ -66,7 +68,7 @@
       autocomplete={autocomplete as any}
     />
     <TooltipButton
-      tooltip={showPassword ? t('common.hidePassword') : t('common.showPassword')}
+      tooltip={showPassword ? i18n.t('common.hidePassword') : i18n.t('common.showPassword')}
       variant="ghost"
       size="icon"
       type="button"

package/dist/components/PermissionMatrix.svelte

@@ -2,7 +2,10 @@
   import { Shield, AlertCircle, Check } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
-  import { t } from '@svadmin/core/i18n';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
+
   
   let {
     // Basic metadata lists
@@ -57,9 +60,9 @@
     <div>
       <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
         <Shield class="w-6 h-6 text-primary" />
-        {t('permissions.title') || 'Permission Matrix'}
+        {i18n.t('permissions.title') || 'Permission Matrix'}
       </h1>
-      <p class="text-muted-foreground mt-1 text-sm">{t('permissions.description') || 'Configure authorization rules for system modules and roles.'}</p>
+      <p class="text-muted-foreground mt-1 text-sm">{i18n.t('permissions.description') || 'Configure authorization rules for system modules and roles.'}</p>
     </div>
     
     <!-- Toast Feedback -->
@@ -78,7 +81,7 @@
   <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
     <!-- Left: Role Selector Sidebar -->
     <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-xl shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">{t('permissions.roles') || 'Roles'}</h2>
+      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">{i18n.t('permissions.roles') || 'Roles'}</h2>
       <div class="space-y-1 flex-1 overflow-y-auto">
         {#each roles as role, _i (_i)}
           <button 
@@ -90,7 +93,7 @@
           </button>
         {/each}
         {#if roles.length === 0}
-          <p class="text-center text-muted-foreground text-sm p-4">{t('permissions.noRoles') || 'No roles available'}</p>
+          <p class="text-center text-muted-foreground text-sm p-4">{i18n.t('permissions.noRoles') || 'No roles available'}</p>
         {/if}
       </div>
       
@@ -108,12 +111,12 @@
       <div class="p-5 border-b border-border bg-muted/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
           <div>
-            <h2 class="text-lg font-bold text-foreground">{t('permissions.currentRole') || 'Current role'}: 
-              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || (t('permissions.noneSelected') || 'None selected')}</span>
+            <h2 class="text-lg font-bold text-foreground">{i18n.t('permissions.currentRole') || 'Current role'}:
+              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || (i18n.t('permissions.noneSelected') || 'None selected')}</span>
             </h2>
-            <p class="text-xs text-muted-foreground mt-1">{t('permissions.toggleHint') || 'Toggle checkboxes to grant or revoke permissions'}</p>
+            <p class="text-xs text-muted-foreground mt-1">{i18n.t('permissions.toggleHint') || 'Toggle checkboxes to grant or revoke permissions'}</p>
           </div>
-          
+
           <!-- Slot for header extra logic -->
           {#if headerExtra}
             {@render headerExtra()}
@@ -122,7 +125,7 @@
         
         {#if conflictCount > 0}
           <div class="px-3 py-1.5 bg-destructive/10 text-destructive rounded-lg text-xs font-medium ring-1 ring-destructive/20 flex items-center gap-1.5">
-            <AlertCircle class="w-4 h-4" /> {conflictCount} {t('permissions.conflicts') || 'conflicting rules'}
+            <AlertCircle class="w-4 h-4" /> {conflictCount} {i18n.t('permissions.conflicts') || 'conflicting rules'}
           </div>
         {/if}
       </div>
@@ -132,7 +135,7 @@
         <table class="min-w-full rounded-lg overflow-hidden shadow-sm ring-1 ring-border/10">
           <thead class="bg-muted/50">
             <tr>
-              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">{t('permissions.resources') || 'Resources'}</th>
+              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">{i18n.t('permissions.resources') || 'Resources'}</th>
               {#each actions as action, _i (_i)}
                 <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground">
                   <div class="flex flex-col items-center">
@@ -146,7 +149,7 @@
           <tbody class="bg-card">
             {#if resources.length === 0}
               <tr>
-                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">{t('permissions.noResources') || 'No resources available'}</td>
+                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">{i18n.t('permissions.noResources') || 'No resources available'}</td>
               </tr>
             {/if}
             {#each resources as resource, i (i)}