@svadmin/ui 0.17.0 → 0.19.0

package/src/components/DraggableGrid.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface GridModule {
+    id: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    modules = $bindable<GridModule[]>([]),
+    onOrderSave,
+    renderItem,
+    class: className = '',
+    columns = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    gap = 'gap-4',
+  }: {
+    modules?: GridModule[];
+    onOrderSave?: (orderedIds: string[]) => void;
+    renderItem: Snippet<[{ module: GridModule; index: number; dragging: boolean }]>;
+    class?: string;
+    columns?: string;
+    gap?: string;
+  } = $props();
+
+  let draggingId = $state<string | null>(null);
+  let dragOverId = $state<string | null>(null);
+
+  function handleDragStart(e: DragEvent, id: string) {
+    draggingId = id;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', id);
+    }
+  }
+
+  function handleDragOver(e: DragEvent, id: string) {
+    e.preventDefault();
+    if (draggingId && draggingId !== id) {
+      dragOverId = id;
+    }
+  }
+
+  function handleDrop(e: DragEvent, targetId: string) {
+    e.preventDefault();
+    if (!draggingId || draggingId === targetId) {
+      dragOverId = null;
+      return;
+    }
+
+    const sourceIdx = modules.findIndex(m => m.id === draggingId);
+    const targetIdx = modules.findIndex(m => m.id === targetId);
+
+    if (sourceIdx === -1 || targetIdx === -1) {
+      dragOverId = null;
+      return;
+    }
+
+    const newModules = [...modules];
+    const [dragged] = newModules.splice(sourceIdx, 1);
+    newModules.splice(targetIdx, 0, dragged);
+
+    modules = newModules;
+    dragOverId = null;
+    onOrderSave?.(modules.map(m => m.id));
+  }
+
+  function handleDragEnd() {
+    draggingId = null;
+    dragOverId = null;
+  }
+</script>
+
+<div class="grid {columns} {gap} {className}">
+  {#each modules as mod, i (mod.id)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      draggable="true"
+      ondragstart={(e) => handleDragStart(e, mod.id)}
+      ondragover={(e) => handleDragOver(e, mod.id)}
+      ondrop={(e) => handleDrop(e, mod.id)}
+      ondragend={handleDragEnd}
+      ondragleave={() => { if (dragOverId === mod.id) dragOverId = null; }}
+      class="transition-all duration-200
+        {draggingId === mod.id ? 'opacity-40 scale-[0.97] cursor-grabbing' : 'cursor-grab'}
+        {dragOverId === mod.id ? 'ring-2 ring-primary/40 ring-offset-2 ring-offset-background rounded-lg scale-[1.02]' : ''}"
+    >
+      {@render renderItem({ module: mod, index: i, dragging: draggingId === mod.id })}
+    </div>
+  {/each}
+</div>

package/src/components/FieldRenderer.svelte

@@ -15,6 +15,7 @@
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import ComboboxField from './ComboboxField.svelte';
+  import ArrayField from './fields/ArrayField.svelte';
   import { Plus, X } from 'lucide-svelte';
   import type { Snippet } from 'svelte';
 
@@ -86,6 +87,9 @@
   {#if children}
     {@render children()}
 
+  {:else if field.type === 'array'}
+    <ArrayField {field} {value} {onchange} />
+
   {:else if field.type === 'text' || field.type === 'image'}
     <Input
       id={field.key}

package/src/components/MarkdownRenderer.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
-  // @ts-expect-error - missing types
   import { Marked } from "marked";
-  // @ts-expect-error - missing types
   import { markedHighlight } from "marked-highlight";
-  // @ts-expect-error - missing types
   import * as hljsModule from "highlight.js";
   const hljs = "default" in hljsModule ? hljsModule.default : hljsModule;
   import "highlight.js/styles/github-dark.css"; // or your preferred theme
-  // @ts-expect-error - missing types
   import DOMPurify from "isomorphic-dompurify";
   import { Check, Copy } from "lucide-svelte";
   import { Button } from "./ui/button/index.js";

package/src/components/PermissionMatrix.svelte

@@ -0,0 +1,190 @@
+<script module context="module">
+  export type RoleInfo = { code: string; name: string; [key: string]: any };
+  export type ResourceInfo = { code: string; name: string; section?: string; [key: string]: any };
+  export type ActionInfo = { code: string; name: string; [key: string]: any };
+</script>
+
+<script lang="ts">
+  import { Shield, AlertCircle, Check } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+  
+  let {
+    // Basic metadata lists
+    roles = [],
+    resources = [],
+    actions = [],
+    
+    // Authorization state resolver
+    // isGranted(roleCode, resourceCode, actionCode) => boolean
+    isGranted,
+    
+    // Interactive states
+    selectedRole = $bindable(roles[0]?.code || ''),
+    loading = false,
+    
+    // Feedback and alerts (passed down from upper business logic)
+    message = '',
+    messageType = 'success', // 'success' | 'error' | 'warning'
+    conflictCount = 0,
+    
+    // Custom slots for injecting multi-tenant switchers or security filters
+    sidebarExtra,
+    headerExtra,
+
+    // Callback event
+    onToggle
+  }: {
+    roles: RoleInfo[];
+    resources: ResourceInfo[];
+    actions: ActionInfo[];
+    isGranted: (role: string, resource: string, action: string) => boolean;
+    selectedRole?: string;
+    loading?: boolean;
+    message?: string;
+    messageType?: 'success' | 'error' | 'warning';
+    conflictCount?: number;
+    sidebarExtra?: Snippet;
+    headerExtra?: Snippet;
+    onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
+  } = $props();
+
+</script>
+
+<div class="h-full flex flex-col pt-2">
+  <!-- Header Title -->
+  <div class="mb-6 flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
+        <Shield class="w-6 h-6 text-primary" />
+        统一操作权限矩阵
+      </h1>
+      <p class="text-muted-foreground mt-1 text-sm">直观配置系统模块与角色的鉴权规则网络。</p>
+    </div>
+    
+    <!-- Toast Feedback -->
+    {#if message}
+      <div class={`px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all flex items-center gap-2 ${messageType === 'success' ? 'bg-green-500/10 text-green-600 dark:text-green-400 ring-1 ring-green-500/20' : 'bg-destructive/10 text-destructive ring-1 ring-destructive/20'}`}>
+        {#if messageType === 'success'}
+           <Check class="w-4 h-4" />
+        {:else}
+           <AlertCircle class="w-4 h-4" />
+        {/if}
+        {message}
+      </div>
+    {/if}
+  </div>
+
+  <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">业务受众角色</h2>
+      <div class="space-y-1 flex-1 overflow-y-auto">
+        {#each roles as role}
+          <button 
+            onclick={() => selectedRole = role.code}
+            class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 {selectedRole === role.code ? 'bg-primary/10 text-primary font-medium shadow-sm ring-1 ring-primary/20' : 'text-foreground hover:bg-muted'}"
+          >
+            {role.name}
+            <div class="text-[10px] mt-0.5 opacity-60 font-mono tracking-tighter">{role.code}</div>
+          </button>
+        {/each}
+        {#if roles.length === 0}
+          <p class="text-center text-muted-foreground text-sm p-4">暂无角色</p>
+        {/if}
+      </div>
+      
+      <!-- Slot for Upper Logic inject (e.g. Org Switcher, Security Level Filter) -->
+      {#if sidebarExtra}
+         <div class="mt-4 pt-4 border-t border-border">
+           {@render sidebarExtra()}
+         </div>
+      {/if}
+    </div>
+
+    <!-- Right: Matrix Grid -->
+    <div class="flex-1 bg-card rounded-xl shadow-sm border border-border overflow-hidden flex flex-col">
+      <!-- Matrix Header -->
+      <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">当前视角: 
+              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || '未选择'}</span>
+            </h2>
+            <p class="text-xs text-muted-foreground mt-1">勾选以即时挂载/收回操作权限</p>
+          </div>
+          
+          <!-- Slot for header extra logic -->
+          {#if headerExtra}
+            {@render headerExtra()}
+          {/if}
+        </div>
+        
+        {#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} 重叠/冲突规则
+          </div>
+        {/if}
+      </div>
+      
+      <!-- Table Area -->
+      <div class="flex-1 overflow-auto p-4">
+        <table class="min-w-full divide-y divide-border border border-border rounded-lg overflow-hidden">
+          <thead class="bg-muted/50">
+            <tr>
+              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground border-r border-border w-48">模块域与资源点</th>
+              {#each actions as action}
+                <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground border-r border-border">
+                  <div class="flex flex-col items-center">
+                    <span>{action.name}</span>
+                    <span class="text-[10px] text-muted-foreground font-mono">{action.code}</span>
+                  </div>
+                </th>
+              {/each}
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-border bg-card">
+            {#if resources.length === 0}
+              <tr>
+                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">暂无可用资源</td>
+              </tr>
+            {/if}
+            {#each resources as resource, i}
+              <!-- Section Grouping Header -->
+              {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+                <tr class="bg-primary/5">
+                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primary uppercase tracking-wider">{resource.section}</td>
+                </tr>
+              {/if}
+              
+              <tr class="hover:bg-muted/50 transition-colors">
+                <td class="whitespace-nowrap py-3 pl-4 pr-3 text-sm border-r border-border">
+                  <div class="font-medium text-foreground">{resource.name}</div>
+                  <div class="text-xs text-muted-foreground font-mono">{resource.code}</div>
+                </td>
+                
+                <!-- Action Checkboxes -->
+                {#each actions as action}
+                  {@const granted = selectedRole ? isGranted(selectedRole, resource.code, action.code) : false}
+                  <td class="whitespace-nowrap px-3 py-3 text-center border-r border-border">
+                    <div class="flex items-center justify-center">
+                      <button 
+                        disabled={loading || !selectedRole}
+                        aria-label="Toggle {action.name}"
+                        onclick={() => onToggle(selectedRole!, resource.code, action.code, !granted)}
+                        class="w-6 h-6 rounded border flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-primary/50 {granted ? 'bg-primary border-primary text-primary-foreground' : 'border-input bg-background hover:bg-accent'} {loading || !selectedRole ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+                      >
+                        <svg class="w-3.5 h-3.5 {granted ? 'block' : 'hidden'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </button>
+                    </div>
+                  </td>
+                {/each}
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/ProfilePage.svelte

@@ -1,16 +1,72 @@
 <script lang="ts">
-  import { useGetIdentity, useUpdatePassword } from '@svadmin/core';
+  import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Label } from './ui/label/index.js';
+  import { Input } from './ui/input/index.js';
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle } from 'lucide-svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from 'lucide-svelte';
 
   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;
+
+  // Profile edit state
+  let editingProfile = $state(false);
+  let editName = $state('');
+  let profileSaving = $state(false);
+  let profileSuccess = $state(false);
+  let profileError = $state('');
+
+  function startEditProfile() {
+    editName = identity.data?.name ?? '';
+    editingProfile = true;
+    profileSuccess = false;
+    profileError = '';
+  }
+
+  async function saveProfile() {
+    if (!authProvider?.updateProfile) return;
+    profileSaving = true;
+    profileError = '';
+    try {
+      const result = await authProvider.updateProfile({ name: editName });
+      if (result.success) {
+        profileSuccess = true;
+        editingProfile = false;
+        identity.refetch();
+      } else {
+        profileError = result.error?.message ?? t('common.operationFailed');
+      }
+    } catch (e) {
+      profileError = (e as Error).message;
+    } finally {
+      profileSaving = false;
+    }
+  }
+
+  // Avatar upload
+  let avatarUploading = $state(false);
+  let fileInput = $state<HTMLInputElement>(null!);
+
+  async function handleAvatarChange(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file || !authProvider?.updateProfile) return;
+    avatarUploading = true;
+    try {
+      const result = await authProvider.updateProfile({ avatar: file });
+      if (result.success) identity.refetch();
+    } finally {
+      avatarUploading = false;
+    }
+  }
+
   // Password change form
   let currentPassword = $state('');
   let newPassword = $state('');
@@ -49,12 +105,16 @@
   );
 </script>
 
-<div class="max-w-2xl mx-auto space-y-6 p-4 sm:p-6">
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('profile.title')}</h2>
+  </div>
+
   <!-- Profile Info -->
   <Card.Card>
     <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2">
-        <User class="h-5 w-5" />
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <User class="h-4 w-4 text-muted-foreground" />
         {t('profile.title')}
       </Card.CardTitle>
     </Card.CardHeader>
@@ -65,9 +125,16 @@
           {t('common.loading')}
         </div>
       {:else if identity.data}
+        {#if profileSuccess}
+          <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('common.updateSuccess')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
         <div class="flex items-start gap-6">
           <!-- Avatar -->
-          <div class="shrink-0">
+          <div class="shrink-0 relative group">
             {#if identity.data.avatar}
               <img
                 src={identity.data.avatar}
@@ -79,30 +146,77 @@
                 {initials}
               </div>
             {/if}
+            {#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()}
+                disabled={avatarUploading}
+              >
+                {#if avatarUploading}
+                  <Loader2 class="h-5 w-5 text-white animate-spin" />
+                {:else}
+                  <Camera class="h-5 w-5 text-white" />
+                {/if}
+              </button>
+              <input
+                bind:this={fileInput}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onchange={handleAvatarChange}
+              />
+            {/if}
           </div>
 
           <!-- Info -->
           <div class="space-y-3 flex-1 min-w-0">
-            <div>
-              <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
-              <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
-            </div>
-
-            {#if identity.data.email || identity.data.username}
-              <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                {#if identity.data.email}
-                  <Mail class="h-4 w-4 shrink-0" />
-                {:else}
-                  <User class="h-4 w-4 shrink-0" />
+            {#if editingProfile}
+              <div class="space-y-3 max-w-sm">
+                <div>
+                  <Label for="edit-name" class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                  <Input id="edit-name" bind:value={editName} class="mt-1" />
+                </div>
+                {#if profileError}
+                  <p class="text-xs text-destructive">{profileError}</p>
                 {/if}
-                <span class="truncate">{identity.data.email || identity.data.username}</span>
+                <div class="flex gap-2">
+                  <Button size="sm" onclick={saveProfile} disabled={profileSaving}>
+                    {#if profileSaving}<Loader2 class="h-3 w-3 animate-spin mr-1" />{/if}
+                    {t('common.save')}
+                  </Button>
+                  <Button size="sm" variant="outline" onclick={() => { editingProfile = false; }}>
+                    {t('common.cancel')}
+                  </Button>
+                </div>
               </div>
-            {/if}
-
-            {#if identity.data.id}
-              <div class="text-xs text-muted-foreground/60 font-mono">
-                ID: {identity.data.id}
+            {:else}
+              <div>
+                <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
               </div>
+
+              {#if identity.data.email || identity.data.username}
+                <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                  {#if identity.data.email}
+                    <Mail class="h-4 w-4 shrink-0" />
+                  {:else}
+                    <User class="h-4 w-4 shrink-0" />
+                  {/if}
+                  <span class="truncate">{identity.data.email || identity.data.username}</span>
+                </div>
+              {/if}
+
+              {#if identity.data.id}
+                <div class="text-xs text-muted-foreground/60 font-mono">
+                  ID: {identity.data.id}
+                </div>
+              {/if}
+
+              {#if canUpdateProfile}
+                <Button size="sm" variant="outline" onclick={startEditProfile}>
+                  {t('common.edit')}
+                </Button>
+              {/if}
             {/if}
           </div>
         </div>
@@ -115,8 +229,8 @@
   <!-- Change Password -->
   <Card.Card>
     <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2">
-        <Lock class="h-5 w-5" />
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Lock class="h-4 w-4 text-muted-foreground" />
         {t('profile.changePassword')}
       </Card.CardTitle>
     </Card.CardHeader>

package/src/components/RolesSettings.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getAuthProvider, getResources } from '@svadmin/core';
+  import type { Role } from '@svadmin/core';
+  import PermissionMatrix, { type RoleInfo, type ResourceInfo, type ActionInfo } from './PermissionMatrix.svelte';
+  import { toast } from '@svadmin/core/toast';
+
+  const authProvider = getAuthProvider();
+  const rawResources = getResources();
+
+  let roles = $state<RoleInfo[]>([]);
+  let selectedRoleCode = $state<string>('');
+  
+  // Matrix format: { "roleId": { "resourceName": ["action1", "action2"] } }
+  let permissionsCache = $state<Record<string, Record<string, string[]>>>({});
+  
+  let loadingRoles = $state(true);
+  let loadingPermissions = $state(false);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+
+  // Convert system resources to MatrixResource format
+  let matrixResources = $derived<ResourceInfo[]>(
+    rawResources.map(r => ({
+      code: r.name,
+      name: r.label || r.name,
+    }))
+  );
+
+  let matrixActions = $state<ActionInfo[]>([
+    { code: 'create', name: t('common.create') ?? 'Create' },
+    { code: 'read', name: t('common.detail') ?? 'Read' },
+    { code: 'update', name: t('common.edit') ?? 'Update' },
+    { code: 'delete', name: t('common.delete') ?? 'Delete' },
+  ]);
+
+  async function loadRoles() {
+    if (!authProvider?.getRoles) {
+      error = t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
+      loadingRoles = false;
+      return;
+    }
+    try {
+      const fetchedRoles = await authProvider.getRoles();
+      roles = fetchedRoles.map(r => ({ code: r.id, name: r.name, ...r }));
+      if (roles.length > 0 && !selectedRoleCode) {
+        selectedRoleCode = roles[0].code;
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loadingRoles = false;
+    }
+  }
+
+  async function loadPermissionsForRole(roleId: string) {
+    if (!authProvider?.getRolePermissions || permissionsCache[roleId]) return;
+    
+    loadingPermissions = true;
+    try {
+      const perms = await authProvider.getRolePermissions(roleId);
+      permissionsCache[roleId] = perms;
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      loadingPermissions = false;
+    }
+  }
+
+  // Load permissions whenever the selected role changes
+  $effect(() => {
+    if (selectedRoleCode && !permissionsCache[selectedRoleCode] && !loadingPermissions) {
+      loadPermissionsForRole(selectedRoleCode);
+    }
+  });
+
+  $effect(() => {
+    loadRoles();
+  });
+
+  // isGranted logic
+  function checkGrant(roleCode: string, resourceCode: string, actionCode: string) {
+    const rolePerms = permissionsCache[roleCode];
+    if (!rolePerms) return false;
+    return rolePerms[resourceCode]?.includes(actionCode) ?? false;
+  }
+
+  async function handleToggle(roleCode: string, resourceCode: string, actionCode: string, grant: boolean) {
+    if (!authProvider?.updateRolePermissions) return;
+    
+    // Copy state
+    const currentRolePerms = { ...(permissionsCache[roleCode] || {}) };
+    const currentResPerms = [...(currentRolePerms[resourceCode] || [])];
+
+    // Optimistic update
+    if (grant) {
+      if (!currentResPerms.includes(actionCode)) currentResPerms.push(actionCode);
+    } else {
+      const idx = currentResPerms.indexOf(actionCode);
+      if (idx > -1) currentResPerms.splice(idx, 1);
+    }
+    
+    currentRolePerms[resourceCode] = currentResPerms;
+    permissionsCache[roleCode] = currentRolePerms;
+
+    saving = true;
+    try {
+      // Send the entire role's permissions back (as defined by our AuthProvider interface)
+      const result = await authProvider.updateRolePermissions(roleCode, currentRolePerms);
+      if (result.success) {
+        // Success silently
+      } else {
+         throw new Error(result.error?.message ?? t('common.operationFailed'));
+      }
+    } catch (e) {
+      toast.error((e as Error).message);
+      // Rollback on fail
+      delete permissionsCache[roleCode];
+      loadPermissionsForRole(roleCode);
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+{#if error}
+  <div class="h-full flex items-center justify-center">
+    <div class="max-w-md p-6 border border-destructive/20 bg-destructive/10 text-destructive rounded-lg flex flex-col items-center gap-3 text-center">
+      <AlertCircle class="h-8 w-8" />
+      <h3 class="font-bold text-lg">{t('common.error') ?? 'Error'}</h3>
+      <p>{error}</p>
+    </div>
+  </div>
+{:else}
+  <PermissionMatrix 
+    {roles}
+    resources={matrixResources}
+    actions={matrixActions}
+    isGranted={checkGrant}
+    bind:selectedRole={selectedRoleCode}
+    loading={loadingRoles || loadingPermissions || saving}
+    onToggle={handleToggle}
+  />
+{/if}