@svadmin/ui 0.34.9 → 0.35.0

package/dist/components/PermissionMatrix.svelte

@@ -80,7 +80,7 @@
     <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>
       <div class="space-y-1 flex-1 overflow-y-auto">
-        {#each roles as role}
+        {#each roles as role, _i (_i)}
           <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'}"
@@ -133,7 +133,7 @@
           <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>
-              {#each actions as action}
+              {#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">
                     <span>{action.name}</span>
@@ -149,7 +149,7 @@
                  <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">{t('permissions.noResources') || 'No resources available'}</td>
               </tr>
             {/if}
-            {#each resources as resource, i}
+            {#each resources as resource, i (i)}
               <!-- Section Grouping Header -->
               {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
                 <tr class="bg-primary/5">
@@ -164,14 +164,14 @@
                 </td>
                 
                 <!-- Action Checkboxes -->
-                {#each actions as action}
+                {#each actions as action, _i (_i)}
                   {@const granted = selectedRole ? isGranted(selectedRole, resource.code, action.code) : false}
                   <td class="whitespace-nowrap px-3 py-3 text-center">
                     <div class="flex items-center justify-center">
                       <button 
                         disabled={loading || !selectedRole}
                         aria-label="Toggle {action.name}"
-                        onclick={() => onToggle(selectedRole!, resource.code, action.code, !granted)}
+                        onclick={() => onToggle(selectedRole as string, 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">

package/dist/components/ProfilePage.svelte

@@ -53,7 +53,7 @@
 
   // Avatar upload
   let avatarUploading = $state(false);
-  let fileInput = $state<HTMLInputElement>(null!);
+  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];

package/dist/components/RegisterPage.svelte

@@ -5,10 +5,9 @@
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
-  import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { UserPlus, User, Loader2, AlertCircle } from '@lucide/svelte';
+  import { User, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
   let { title = 'Admin', onSuccess } = $props<{
     title?: string;
@@ -39,74 +38,113 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
-          <UserPlus class="h-5 w-5" />
+<div class="min-h-screen flex flex-col lg:flex-row">
+  <!-- Left brand panel (mirrors LoginPage) -->
+  <div class="hidden lg:flex lg:w-[480px] xl:w-[520px] relative overflow-hidden bg-gradient-to-br from-primary/90 via-primary to-primary/80 shrink-0">
+    <div class="absolute inset-0">
+      <div class="absolute top-[12%] left-[8%] w-28 h-28 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
+      <div class="absolute top-[55%] left-[55%] w-40 h-40 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
+      <div class="absolute bottom-[15%] left-[15%] w-24 h-24 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
+      <div class="absolute top-[30%] right-[10%] w-16 h-16 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
+      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
+    </div>
+
+    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
+      <div class="flex items-center gap-3">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
+          <Shield class="h-5 w-5 text-white" />
+        </div>
+        <span class="text-lg font-semibold text-white tracking-tight">{title}</span>
+      </div>
+
+      <div class="space-y-4">
+        <h2 class="text-3xl xl:text-4xl font-bold text-white leading-tight">
+          {t('auth.createAccount')}
+        </h2>
+        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
+          {t('auth.createAccountMessage')}
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div class="h-1 w-8 rounded-full bg-white/30"></div>
+        <div class="h-1 w-4 rounded-full bg-white/15"></div>
+        <div class="h-1 w-2 rounded-full bg-white/10"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right form panel -->
+  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-8 lg:p-12">
+    <div class="w-full max-w-[400px]">
+      <div class="flex items-center gap-3 mb-8 lg:hidden">
+        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <Shield class="h-5 w-5" />
         </div>
-        <Card.CardTitle class="text-xl">{t('auth.createAccount')}</Card.CardTitle>
+        <span class="text-lg font-semibold tracking-tight">{title}</span>
+      </div>
+
+      <div class="space-y-1 mb-8">
+        <h1 class="text-2xl font-semibold tracking-tight">{t('auth.createAccount')}</h1>
         <p class="text-sm text-muted-foreground">{t('auth.createAccountMessage')}</p>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleSubmit} class="space-y-4">
-          {#if error}
-            <Alert.Root variant="destructive">
-              <AlertCircle class="h-4 w-4" />
-              <Alert.Description>{error}</Alert.Description>
-            </Alert.Root>
-          {/if}
+      </div>
 
-          <div class="space-y-2">
-            <Label for="register-identifier">{t('auth.usernameOrEmail')}</Label>
-            <div class="relative">
-              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
-              <Input
-                id="register-identifier"
-                type="text"
-                placeholder={t('auth.identifierPlaceholder')}
-                bind:value={identifier}
-                class="pl-9"
-                autocomplete="username"
-              />
-            </div>
-          </div>
+      <form onsubmit={handleSubmit} class="space-y-5">
+        {#if error}
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{error}</Alert.Description>
+          </Alert.Root>
+        {/if}
 
-          <PasswordInput
-            id="register-password"
-            label={t('auth.password')}
-            bind:value={password}
-            autocomplete="new-password"
-            showStrength
-          />
-
-          <PasswordInput
-            id="register-confirm"
-            label={t('auth.confirmPassword')}
-            bind:value={confirmPassword}
-            autocomplete="new-password"
-          />
-
-          <Button type="submit" class="w-full" disabled={register.isLoading}>
-            {#if register.isLoading}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
-            {/if}
-            {t('auth.registerButton')}
-          </Button>
-        </form>
-
-        <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
-          <span class="text-sm text-muted-foreground">{t('auth.hasAccount')}</span>
-          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
-            {t('auth.login')}
-          </Button>
+        <div class="space-y-2">
+          <Label for="register-identifier">{t('auth.usernameOrEmail')}</Label>
+          <div class="relative">
+            <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+            <Input
+              id="register-identifier"
+              type="text"
+              placeholder={t('auth.identifierPlaceholder')}
+              bind:value={identifier}
+              class="pl-9"
+              autocomplete="username"
+            />
+          </div>
         </div>
-      </Card.CardContent>
-    </Card.Card>
 
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
+        <PasswordInput
+          id="register-password"
+          label={t('auth.password')}
+          bind:value={password}
+          autocomplete="new-password"
+          showStrength
+        />
+
+        <PasswordInput
+          id="register-confirm"
+          label={t('auth.confirmPassword')}
+          bind:value={confirmPassword}
+          autocomplete="new-password"
+        />
+
+        <Button type="submit" class="w-full h-10" disabled={register.isLoading}>
+          {#if register.isLoading}
+            <Loader2 class="h-4 w-4 animate-spin mr-2" />
+          {/if}
+          {t('auth.registerButton')}
+        </Button>
+      </form>
+
+      <div class="flex items-center justify-center gap-1 mt-8 pt-6 border-t">
+        <span class="text-sm text-muted-foreground">{t('auth.hasAccount')}</span>
+        <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
+          {t('auth.login')}
+        </Button>
+      </div>
+
+      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
+        Powered by {title}
+      </p>
+    </div>
   </div>
 </div>

package/dist/components/ResourceOperationsPage.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import { navigate } from '@svadmin/core/router';
+  import type { Component } from 'svelte';
+  import AutoTable from './AutoTable.svelte';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+
+  interface SummaryMetric {
+    label: string;
+    value: string | number;
+    hint?: string;
+  }
+
+  interface StatusLane {
+    label: string;
+    value: string | number;
+    hint?: string;
+  }
+
+  interface HighlightItem {
+    title: string;
+    description?: string;
+    meta?: string;
+    badge?: string;
+  }
+
+  interface Props {
+    resourceName: string;
+    eyebrow: string;
+    title: string;
+    description: string;
+    actionLabel: string;
+    icon?: Component<{ class?: string }>;
+    metrics?: SummaryMetric[];
+    lanes?: StatusLane[];
+    highlights?: HighlightItem[];
+    tableLabel?: string;
+    tableDescription?: string;
+    emptyLanesText?: string;
+    highlightsLabel?: string;
+  }
+
+  let {
+    resourceName,
+    eyebrow,
+    title,
+    description,
+    actionLabel,
+    icon: Icon,
+    metrics = [],
+    lanes = [],
+    highlights = [],
+    tableLabel = 'Records',
+    tableDescription,
+    emptyLanesText = 'No grouped records yet.',
+    highlightsLabel = 'Focus queue',
+  }: Props = $props();
+</script>
+
+<div class="space-y-6" data-svadmin-resource-operations={resourceName}>
+  <section class="grid gap-4 xl:grid-cols-[0.82fr_1.18fr]">
+    <Card.Root class="rounded-[2rem] border-border/70 bg-card">
+      <Card.Content class="p-6 sm:p-8">
+        <Badge class="mb-4 rounded-full bg-primary/10 text-primary hover:bg-primary/10">{eyebrow}</Badge>
+        <div class="flex items-start gap-4">
+          {#if Icon}
+            <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-sm shadow-primary/25">
+              <Icon class="h-6 w-6" />
+            </span>
+          {/if}
+          <div class="min-w-0">
+            <h1 class="text-3xl font-semibold tracking-tight">{title}</h1>
+            <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+        <Button class="mt-6 rounded-xl" onclick={() => navigate(`/${resourceName}/create`)}>
+          {actionLabel}
+        </Button>
+      </Card.Content>
+    </Card.Root>
+
+    <div class="grid gap-4 md:grid-cols-3">
+      {#each metrics as metric (metric.label)}
+        <Card.Root class="rounded-[2rem] border-border/70 bg-card">
+          <Card.Content class="p-5">
+            <p class="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">{metric.label}</p>
+            <p class="mt-2 text-3xl font-semibold">{metric.value}</p>
+            {#if metric.hint}
+              <p class="mt-1 text-xs text-muted-foreground">{metric.hint}</p>
+            {/if}
+          </Card.Content>
+        </Card.Root>
+      {/each}
+    </div>
+  </section>
+
+  <div class="grid gap-4 xl:grid-cols-[0.76fr_1.24fr]">
+    <div class="space-y-4">
+      <Card.Root class="rounded-[2rem] border-border/70 bg-card">
+        <Card.Header>
+          <Card.Title>{tableLabel}</Card.Title>
+          {#if tableDescription}
+            <Card.Description>{tableDescription}</Card.Description>
+          {/if}
+        </Card.Header>
+        <Card.Content class="space-y-3">
+          {#each lanes as lane (lane.label)}
+            <div class="rounded-2xl border border-border/60 bg-muted/20 p-4">
+              <div class="flex items-center justify-between gap-3">
+                <p class="font-medium capitalize">{lane.label}</p>
+                <Badge variant="outline">{lane.value}</Badge>
+              </div>
+              {#if lane.hint}
+                <p class="mt-1 text-xs text-muted-foreground">{lane.hint}</p>
+              {/if}
+            </div>
+          {:else}
+            <p class="rounded-2xl border border-border/60 bg-muted/20 p-4 text-sm text-muted-foreground">{emptyLanesText}</p>
+          {/each}
+        </Card.Content>
+      </Card.Root>
+
+      {#if highlights.length > 0}
+        <Card.Root class="rounded-[2rem] border-primary/20 bg-primary/5">
+          <Card.Header>
+            <Card.Title>{highlightsLabel}</Card.Title>
+          </Card.Header>
+          <Card.Content class="space-y-3">
+            {#each highlights as item (item.title)}
+              <div class="rounded-2xl border border-primary/15 bg-background/80 p-4">
+                <div class="flex items-center justify-between gap-3">
+                  <p class="font-medium">{item.title}</p>
+                  {#if item.badge}
+                    <Badge>{item.badge}</Badge>
+                  {/if}
+                </div>
+                {#if item.description}
+                  <p class="mt-1 text-xs text-muted-foreground">{item.description}</p>
+                {/if}
+                {#if item.meta}
+                  <p class="mt-2 text-xs font-medium text-primary">{item.meta}</p>
+                {/if}
+              </div>
+            {/each}
+          </Card.Content>
+        </Card.Root>
+      {/if}
+    </div>
+
+    <AutoTable {resourceName} />
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+import type { Component } from 'svelte';
+interface SummaryMetric {
+    label: string;
+    value: string | number;
+    hint?: string;
+}
+interface StatusLane {
+    label: string;
+    value: string | number;
+    hint?: string;
+}
+interface HighlightItem {
+    title: string;
+    description?: string;
+    meta?: string;
+    badge?: string;
+}
+interface Props {
+    resourceName: string;
+    eyebrow: string;
+    title: string;
+    description: string;
+    actionLabel: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    metrics?: SummaryMetric[];
+    lanes?: StatusLane[];
+    highlights?: HighlightItem[];
+    tableLabel?: string;
+    tableDescription?: string;
+    emptyLanesText?: string;
+    highlightsLabel?: string;
+}
+declare const ResourceOperationsPage: Component<Props, {}, "">;
+type ResourceOperationsPage = ReturnType<typeof ResourceOperationsPage>;
+export default ResourceOperationsPage;

package/dist/components/RolesSettings.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { t } from '@svadmin/core/i18n';
   import { getAuthProvider, getResources } from '@svadmin/core';
-  import type { Role } from '@svadmin/core';
   import PermissionMatrix from './PermissionMatrix.svelte';
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
   import { toast } from '@svadmin/core/toast';
@@ -117,7 +116,7 @@
     } catch (e) {
       toast.error((e as Error).message);
       // Rollback on fail
-      delete permissionsCache[roleCode];
+      delete permissionsCache[roleCode]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
       loadPermissionsForRole(roleCode);
     } finally {
       saving = false;

package/dist/components/SecuritySettings.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { AlertTriangle, CheckCircle2, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
+  import type { Component } from 'svelte';
+  import * as Alert from './ui/alert/index.js';
+  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';
+  import PasswordInput from './PasswordInput.svelte';
+
+  interface SessionInfo {
+    id: string;
+    os: string;
+    browser: string;
+    ip: string;
+    lastActive: string;
+    isCurrent: boolean;
+    Icon: Component;
+  }
+
+  let is2faEnabled = $state(false);
+  let sessions = $state<SessionInfo[]>([
+    { id: 'current', os: 'macOS', browser: 'Chrome', ip: '192.168.1.102', lastActive: 'Active now', isCurrent: true, Icon: Monitor },
+    { id: 'mobile', os: 'iOS', browser: 'Safari', ip: '192.168.1.105', lastActive: '2 hours ago', isCurrent: false, Icon: Smartphone },
+    { id: 'desktop', os: 'Windows', browser: 'Edge', ip: '10.0.0.4', lastActive: '2 days ago', isCurrent: false, Icon: Monitor },
+  ]);
+
+  let currentPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
+  let passwordSuccessMessage = $state('');
+  let passwordErrorMessage = $state('');
+  let lastChanged = $state('3 months ago');
+
+  function handlePasswordChange(event: SubmitEvent) {
+    event.preventDefault();
+    passwordSuccessMessage = '';
+    passwordErrorMessage = '';
+
+    if (!currentPassword) {
+      passwordErrorMessage = t('profile.currentPassword');
+      return;
+    }
+    if (newPassword.length < 8) {
+      passwordErrorMessage = t('validation.minLength', { min: 8 });
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      passwordErrorMessage = t('auth.passwordMismatch');
+      return;
+    }
+
+    passwordSuccessMessage = t('profile.passwordChanged');
+    lastChanged = 'Just now';
+    currentPassword = '';
+    newPassword = '';
+    confirmPassword = '';
+  }
+
+  function revokeSession(id: string) {
+    sessions = sessions.filter((session) => session.id !== id);
+  }
+
+  function revokeAllOthers() {
+    sessions = sessions.filter((session) => session.isCurrent);
+  }
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.security')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('settings.securityDescription')}</p>
+  </div>
+
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        {#if is2faEnabled}
+          <ShieldCheck class="h-5 w-5 text-green-500" />
+        {:else}
+          <ShieldAlert class="h-5 w-5 text-amber-500" />
+        {/if}
+        {t('security.twoFactorAuth')}
+      </Card.CardTitle>
+      <Card.CardDescription>{t('security.twoFactorDescription')}</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex items-center justify-between gap-4 border-t pt-4">
+        <div class="space-y-1">
+          <Label for="two-factor" class="text-sm font-medium">{t('security.enable2fa')}</Label>
+          <p class="text-xs text-muted-foreground">
+            {is2faEnabled ? t('security.twoFactorActive') : t('security.twoFactorInactive')}
+          </p>
+        </div>
+        <Switch id="two-factor" bind:checked={is2faEnabled} />
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <KeyRound class="h-4 w-4 text-muted-foreground" />
+        {t('profile.changePassword')}
+      </Card.CardTitle>
+      <Card.CardDescription>{t('security.passwordLastChanged', { time: lastChanged })}</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
+        {#if passwordSuccessMessage}
+          <Alert.Root class="border-success/30 bg-success/5 text-success">
+            <CheckCircle2 class="h-4 w-4" />
+            <Alert.Description>{passwordSuccessMessage}</Alert.Description>
+          </Alert.Root>
+        {/if}
+        {#if passwordErrorMessage}
+          <Alert.Root variant="destructive">
+            <AlertTriangle class="h-4 w-4" />
+            <Alert.Description>{passwordErrorMessage}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <PasswordInput id="security-current-password" label={t('profile.currentPassword')} bind:value={currentPassword} autocomplete="current-password" />
+        <PasswordInput id="security-new-password" label={t('profile.newPassword')} bind:value={newPassword} autocomplete="new-password" showStrength />
+        <PasswordInput id="security-confirm-password" label={t('auth.confirmPassword')} bind:value={confirmPassword} autocomplete="new-password" />
+
+        <Button type="submit">{t('profile.updatePassword')}</Button>
+      </form>
+    </Card.CardContent>
+  </Card.Card>
+
+  <Card.Card>
+    <Card.CardHeader class="flex flex-row items-start justify-between gap-4">
+      <div class="space-y-1">
+        <Card.CardTitle class="flex items-center gap-2 text-base">
+          <Shield class="h-4 w-4 text-muted-foreground" />
+          {t('security.activeSessions')}
+        </Card.CardTitle>
+        <Card.CardDescription>{t('security.sessionsDescription')}</Card.CardDescription>
+      </div>
+      {#if sessions.length > 1}
+        <Button variant="outline" size="sm" onclick={revokeAllOthers}>{t('security.revokeOthers')}</Button>
+      {/if}
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="divide-y">
+        {#each sessions as session (session.id)}
+          <div class="flex items-center justify-between gap-4 py-3">
+            <div class="flex min-w-0 items-center gap-3">
+              <div class="rounded-lg bg-muted p-2 text-muted-foreground">
+                <session.Icon class="h-5 w-5" />
+              </div>
+              <div class="min-w-0 space-y-1">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span class="text-sm font-medium">{session.os} - {session.browser}</span>
+                  {#if session.isCurrent}
+                    <span class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">{t('security.currentSession')}</span>
+                  {/if}
+                </div>
+                <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                  <span>{session.ip}</span>
+                  <span>{session.lastActive}</span>
+                </div>
+              </div>
+            </div>
+            {#if !session.isCurrent}
+              <Button variant="ghost" size="icon-sm" onclick={() => revokeSession(session.id)} title={t('security.revokeSession')}>
+                <Trash2 class="h-4 w-4" />
+              </Button>
+            {/if}
+          </div>
+        {:else}
+          <div class="py-6 text-center text-sm text-muted-foreground">{t('security.noSessions')}</div>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+declare const SecuritySettings: Component<Record<string, never>, {}, "">;
+type SecuritySettings = ReturnType<typeof SecuritySettings>;
+export default SecuritySettings;