@svadmin/ui 0.46.0 → 0.47.1

package/dist/components/FieldRenderer.svelte

@@ -23,11 +23,13 @@
 
   const i18n = useTranslation();
 
-  let { field, value, onchange, disabled, children } = $props<{
+  let { field, value, onchange, disabled, invalid = false, errorId, children } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
     disabled?: boolean;
+    invalid?: boolean;
+    errorId?: string;
     children?: Snippet;
   }>();
 
@@ -87,7 +89,7 @@
   }
 </script>
 
-<div class="space-y-1.5" data-svadmin-field>
+<div class="space-y-1.5" data-svadmin-field data-svadmin-field-key={field.key}>
   <Label for={field.key} id="label-{field.key}" data-svadmin-field-label>
     {field.label}
     {#if field.required}
@@ -99,15 +101,19 @@
     {@render children()}
 
   {:else if field.type === 'array'}
+    <input type="hidden" name={field.key} value={JSON.stringify(Array.isArray(value) ? value : [])} />
     <ArrayField {field} {value} {onchange} />
 
   {:else if field.type === 'text' || field.type === 'image'}
     <Input
       id={field.key}
+      name={field.key}
       type="text"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
       placeholder={i18n.t('field.enterValue', { label: field.label })}
     />
@@ -115,10 +121,13 @@
   {:else if field.type === 'email'}
     <Input
       id={field.key}
+      name={field.key}
       type="email"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
       placeholder="name@example.com"
     />
@@ -126,10 +135,13 @@
   {:else if field.type === 'url'}
     <Input
       id={field.key}
+      name={field.key}
       type="url"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
       placeholder="https://"
     />
@@ -137,10 +149,13 @@
   {:else if field.type === 'phone'}
     <Input
       id={field.key}
+      name={field.key}
       type="tel"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
       placeholder="+1 (555) 000-0000"
     />
@@ -149,11 +164,14 @@
     <div class="flex items-center gap-3">
       <input
         id={field.key}
+        name={field.key}
         type="color"
         value={strVal || '#000000'}
         oninput={(e) => onchange((e.target as HTMLInputElement).value)}
         class="h-10 w-14 cursor-pointer rounded-md border border-input bg-background p-1"
         disabled={disabled}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
       />
       <Input
         type="text"
@@ -174,6 +192,7 @@
   {:else if field.type === 'number'}
     <Input
       id={field.key}
+      name={field.key}
       type="number"
       value={numVal == null ? '' : String(numVal)}
       oninput={(e) => {
@@ -181,26 +200,34 @@
         onchange(v === '' ? null : Number(v));
       }}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
     />
 
   {:else if field.type === 'richtext'}
     {@const EditorComp = getRichTextEditor()}
     {#if EditorComp}
+      <input type="hidden" name={field.key} value={strVal} />
       <EditorComp
         id={field.key}
         value={strVal}
         placeholder={i18n.t('field.enterValue', { label: field.label })}
         preset="full"
         onchange={(html: string) => onchange(html)}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
         {disabled}
       />
     {:else}
       <Textarea
         id={field.key}
+        name={field.key}
         value={strVal}
         oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
         required={field.required}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
         {disabled}
         rows={10}
         placeholder={i18n.t('field.enterValue', { label: field.label })}
@@ -211,9 +238,12 @@
   {:else if field.type === 'textarea'}
     <Textarea
       id={field.key}
+      name={field.key}
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
       rows={4}
       placeholder={i18n.t('field.enterValue', { label: field.label })}
@@ -221,6 +251,7 @@
     />
 
   {:else if field.type === 'relation' && field.resource}
+    <input type="hidden" name={field.key} value={value == null ? '' : String(value)} />
     <ComboboxField
       id={field.key}
       resource={field.resource}
@@ -229,6 +260,8 @@
       optionLabel={field.optionLabel ?? 'title'}
       optionValue={field.optionValue ?? 'id'}
       placeholder={i18n.t('field.selectPlaceholder')}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
     />
 
@@ -236,10 +269,13 @@
     {#if (field.options?.length ?? 0) > 8}
       <select
         id={field.key}
+        name={field.key}
         class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         value={strVal}
         onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
         required={field.required}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
         disabled={disabled}
       >
         <option value="">{i18n.t('field.selectPlaceholder')}</option>
@@ -250,9 +286,12 @@
     {:else}
       <Select
         id={field.key}
+        name={field.key}
         value={strVal}
         onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
         required={field.required}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
         {disabled}
         placeholder={i18n.t('field.selectPlaceholder')}
       >
@@ -263,10 +302,15 @@
     {/if}
 
   {:else if field.type === 'multiselect'}
+    {#each multiVal as selectedValue, selectedIndex (`${selectedValue}-${selectedIndex}`)}
+      <input type="hidden" name={`${field.key}[]`} value={String(selectedValue)} />
+    {/each}
     <div 
       class="space-y-2 rounded-lg border border-input p-3 max-h-48 overflow-y-auto"
       role="group" 
       aria-labelledby="label-{field.key}"
+      aria-describedby={errorId}
+      data-invalid={invalid || undefined}
     >
       {#each field.options ?? [] as opt, _i (_i)}
         <label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5 transition-colors">
@@ -274,6 +318,8 @@
             id={`${field.key}-${opt.value}`}
             checked={multiVal.includes(opt.value)}
             onCheckedChange={() => toggleMulti(opt.value)}
+            aria-invalid={invalid || undefined}
+            aria-describedby={errorId}
             disabled={disabled}
           />
           {opt.label}
@@ -296,17 +342,23 @@
     {/if}
 
   {:else if field.type === 'boolean'}
+    <input type="hidden" name={field.key} value={String(boolVal)} />
     <div class="flex items-center gap-2 pt-1">
       <Switch
         id={field.key}
         checked={boolVal}
         onCheckedChange={(v) => onchange(v)}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
         disabled={disabled}
       />
       <span class="text-sm text-muted-foreground">{boolVal ? i18n.t('common.yes') : i18n.t('common.no')}</span>
     </div>
 
   {:else if field.type === 'tags'}
+    {#each tagsVal as tag, tagIndex (`${tag}-${tagIndex}`)}
+      <input type="hidden" name={`${field.key}[]`} value={tag} />
+    {/each}
     <div class="space-y-2">
       <div class="flex flex-wrap gap-1.5">
         {#each tagsVal as tag, i (i)}
@@ -326,6 +378,8 @@
         type="text"
         placeholder={i18n.t('field.tagsPlaceholder')}
         onkeydown={handleTagKeydown}
+        aria-invalid={invalid || undefined}
+        aria-describedby={errorId}
         {disabled}
       />
     </div>
@@ -333,14 +387,20 @@
   {:else if field.type === 'date'}
     <Input
       id={field.key}
+      name={field.key}
       type="date"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
     />
 
   {:else if field.type === 'images'}
+    {#each imagesVal as url, imageIndex (imageIndex)}
+      <input type="hidden" name={`${field.key}[]`} value={url} />
+    {/each}
     <div class="space-y-2">
       {#each imagesVal as url, i (i)}
         <div class="flex items-center gap-2">
@@ -351,6 +411,8 @@
             oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}
             placeholder="https://example.com/image.jpg"
             class="flex-1"
+            aria-invalid={invalid || undefined}
+            aria-describedby={errorId}
             {disabled}
           />
           {#if url}
@@ -369,6 +431,7 @@
   {:else if field.type === 'json'}
     <Textarea
       id={field.key}
+      name={field.key}
       value={jsonEditText}
       onfocus={() => { jsonEditing = true; }}
       onblur={() => {
@@ -385,6 +448,8 @@
         }
       }}
       {disabled}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       rows={6}
       class="resize-y font-mono text-xs"
     />
@@ -392,9 +457,12 @@
   {:else}
     <Input
       id={field.key}
+      name={field.key}
       type="text"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      aria-invalid={invalid || undefined}
+      aria-describedby={errorId}
       {disabled}
     />
   {/if}

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     value: unknown;
     onchange: (val: unknown) => void;
     disabled?: boolean;
+    invalid?: boolean;
+    errorId?: string;
     children?: Snippet;
 };
 declare const FieldRenderer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/IntegrationsSettings.svelte

@@ -1,73 +1,34 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-
-  import { AlertCircle, Cloud, FolderGit, MessageCircle, Plug } from '@lucide/svelte';
+  import { Cloud, FolderGit, MessageCircle, Plug } from '@lucide/svelte';
   import type { Component } from 'svelte';
-  import * as Card from './ui/card/index.js';
   import { Switch } from './ui/switch/index.js';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import SettingsFieldRow from './content/SettingsFieldRow.svelte';
+  import StatusBadge from './content/StatusBadge.svelte';
 
   const i18n = useTranslation();
-
-  interface Integration {
-    id: string;
-    name: string;
-    description: string;
-    connected: boolean;
-    Icon: Component;
-    tone: string;
-  }
-
+  interface Integration { id: string; name: string; description: string; connected: boolean; Icon: Component; }
   let integrations = $state<Integration[]>([
-    { id: 'source-control', name: 'Source Control', description: 'Sync repository metadata, deployments, and commit activity.', connected: true, Icon: FolderGit, tone: 'bg-zinc-900 text-white' },
-    { id: 'chatops', name: 'ChatOps', description: 'Send operational alerts and audit summaries to workspace channels.', connected: false, Icon: MessageCircle, tone: 'bg-violet-700 text-white' },
-    { id: 'identity-cloud', name: 'Identity Cloud', description: 'Configure SSO and workspace identity handoff.', connected: true, Icon: Cloud, tone: 'bg-blue-600 text-white' },
-    { id: 'webhooks', name: 'Webhooks', description: 'Register outbound webhooks for internal tools and monitors.', connected: false, Icon: Plug, tone: 'bg-emerald-700 text-white' },
+    { id: 'source-control', name: 'Source Control', description: 'Sync repository metadata, deployments, and commit activity.', connected: true, Icon: FolderGit },
+    { id: 'chatops', name: 'ChatOps', description: 'Send operational alerts and audit summaries to workspace channels.', connected: false, Icon: MessageCircle },
+    { id: 'identity-cloud', name: 'Identity Cloud', description: 'Configure SSO and workspace identity handoff.', connected: true, Icon: Cloud },
+    { id: 'webhooks', name: 'Webhooks', description: 'Register outbound webhooks for internal tools and monitors.', connected: false, Icon: Plug },
   ]);
-
-  function toggleConnection(id: string, connected: boolean) {
-    integrations = integrations.map((item) => (item.id === id ? { ...item, connected } : item));
-  }
+  function toggleConnection(id: string, connected: boolean) { integrations = integrations.map((item) => item.id === id ? { ...item, connected } : item); }
 </script>
 
 <div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.integrations')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.integrationsDescription')}</p>
-  </div>
-
-  <div class="grid gap-4">
-    {#each integrations as integration (integration.id)}
-      <Card.Card>
-        <Card.CardContent class="p-5">
-          <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
-            <div class="flex items-start gap-4">
-              <div class="shrink-0 rounded-lg p-3 {integration.tone}">
-                <integration.Icon class="h-5 w-5" />
-              </div>
-              <div class="space-y-1">
-                <div class="flex flex-wrap items-center gap-2">
-                  <span class="font-semibold text-foreground">{integration.name}</span>
-                  <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {integration.connected ? 'bg-green-500/10 text-green-600' : 'bg-muted text-muted-foreground'}">
-                    {integration.connected ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')}
-                  </span>
-                </div>
-                <p class="text-sm text-muted-foreground">{integration.description}</p>
-              </div>
-            </div>
-            <div class="flex items-center gap-3">
-              <span class="text-xs text-muted-foreground">{integration.connected ? i18n.t('integrations.enabled') : i18n.t('integrations.disabled')}</span>
-              <Switch checked={integration.connected} onCheckedChange={(checked) => toggleConnection(integration.id, checked)} />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    {/each}
-  </div>
-
-  <Card.Card class="border-dashed bg-muted/20">
-    <Card.CardContent class="flex items-center gap-3 p-5 text-sm text-muted-foreground">
-      <AlertCircle class="h-4 w-4 shrink-0" />
-      <span>{i18n.t('integrations.addMoreHint')}</span>
-    </Card.CardContent>
-  </Card.Card>
+  <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.integrations')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.integrationsDescription')}</p></div>
+  <SettingsGroup title={i18n.t('settings.integrations')} description={i18n.t('integrations.addMoreHint')}>
+    <div class="divide-y divide-border">
+      {#each integrations as integration (integration.id)}
+        <SettingsFieldRow label={integration.name} description={integration.description}>
+          {#snippet control()}
+            <div class="flex items-center gap-3"><StatusBadge status={integration.connected ? 'success' : 'neutral'} label={integration.connected ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')} /><Switch checked={integration.connected} onCheckedChange={(checked) => toggleConnection(integration.id, checked)} aria-label={integration.name} /></div>
+          {/snippet}
+        </SettingsFieldRow>
+      {/each}
+    </div>
+  </SettingsGroup>
 </div>

package/dist/components/NotificationsSettings.svelte

@@ -1,117 +1,36 @@
 <script lang="ts">
+  import { useNotification } from '@svadmin/core';
   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';
+  import SettingsGroup from './content/SettingsGroup.svelte';
+  import SettingsFieldRow from './content/SettingsFieldRow.svelte';
 
   const i18n = useTranslation();
-
+  const notification = useNotification();
   let emailAlerts = $state({ security: true, activity: false, reports: true });
   let pushAlerts = $state({ security: true, activity: true, reports: false });
   let smsAlerts = $state({ security: true });
-  let isSaved = $state(false);
-
-  function saveSettings() {
-    isSaved = true;
-    setTimeout(() => {
-      isSaved = false;
-    }, 3000);
-  }
+  function saveSettings() { notification.success(i18n.t('common.autoSaved'), 3000); }
 </script>
 
 <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">{i18n.t('settings.notifications')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.notificationsDescription')}</p>
+  <div class="flex flex-col justify-between gap-3 sm:flex-row sm:items-start"><div><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}>{i18n.t('common.save')}</Button></div>
+  <SettingsGroup title={i18n.t('notifications.emailTitle')} description={i18n.t('notifications.emailDescription')}>
+    <div class="divide-y divide-border">
+      <SettingsFieldRow label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityAlertsDesc')}>{#snippet control()}<Switch id="email-security" bind:checked={emailAlerts.security} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityLogsDesc')}>{#snippet control()}<Switch id="email-activity" bind:checked={emailAlerts.activity} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemAlertsDesc')}>{#snippet control()}<Switch id="email-reports" bind:checked={emailAlerts.reports} />{/snippet}</SettingsFieldRow>
     </div>
-    <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" />
-        {i18n.t('notifications.emailTitle')}
-      </Card.CardTitle>
-      <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">{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">{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">{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>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <Bell class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('notifications.pushTitle')}
-      </Card.CardTitle>
-      <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">{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">{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">{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>
-    </Card.CardContent>
-  </Card.Card>
-
-  <Card.Card>
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <Smartphone class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('notifications.smsTitle')}
-      </Card.CardTitle>
-      <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">{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>
-    </Card.CardContent>
-  </Card.Card>
+  </SettingsGroup>
+  <SettingsGroup title={i18n.t('notifications.pushTitle')} description={i18n.t('notifications.pushDescription')}>
+    <div class="divide-y divide-border">
+      <SettingsFieldRow label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityPushDesc')}>{#snippet control()}<Switch id="push-security" bind:checked={pushAlerts.security} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityPushDesc')}>{#snippet control()}<Switch id="push-activity" bind:checked={pushAlerts.activity} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemPushDesc')}>{#snippet control()}<Switch id="push-reports" bind:checked={pushAlerts.reports} />{/snippet}</SettingsFieldRow>
+    </div>
+  </SettingsGroup>
+  <SettingsGroup title={i18n.t('notifications.smsTitle')} description={i18n.t('notifications.smsDescription')}>
+    <SettingsFieldRow label={i18n.t('notifications.criticalSecurity')} description={i18n.t('notifications.criticalSecurityDesc')}>{#snippet control()}<Switch id="sms-security" bind:checked={smsAlerts.security} />{/snippet}</SettingsFieldRow>
+  </SettingsGroup>
 </div>

package/dist/components/PermissionMatrix.svelte

@@ -56,7 +56,7 @@
 
 <div class="h-full flex flex-col pt-2">
   <!-- Header Title -->
-  <div class="mb-6 flex items-center justify-between">
+  <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
     <div>
       <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
         <Shield class="w-6 h-6 text-primary" />
@@ -78,10 +78,19 @@
     {/if}
   </div>
 
-  <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
+  <div class="flex flex-col lg:flex-row gap-6 flex-1 min-h-[500px]">
+    <div class="w-full rounded-lg border border-border bg-card p-4 shadow-sm lg:hidden">
+      <label for="permission-role-select" class="mb-2 block text-sm font-medium text-foreground">{i18n.t('permissions.roles') || 'Roles'}</label>
+      <select id="permission-role-select" bind:value={selectedRole} class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" disabled={roles.length === 0}>
+        {#each roles as role (role.code)}<option value={role.code}>{role.name}</option>{/each}
+      </select>
+      {#if roles.length === 0}<p class="mt-2 text-sm text-muted-foreground">{i18n.t('permissions.noRoles') || 'No roles available'}</p>{/if}
+      {#if sidebarExtra}<div class="mt-4 border-t border-border pt-4">{@render sidebarExtra()}</div>{/if}
+    </div>
+
     <!-- Left: Role Selector Sidebar -->
-    <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-lg shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foregroundr mb-4 px-2">{i18n.t('permissions.roles') || 'Roles'}</h2>
+    <div class="hidden w-full flex-shrink-0 flex-col rounded-lg border border-border bg-card p-4 shadow-sm lg:flex lg:w-64">
+      <h2 class="mb-4 px-2 text-sm font-semibold text-muted-foreground">{i18n.t('permissions.roles') || 'Roles'}</h2>
       <div class="space-y-1 flex-1 overflow-y-auto">
         {#each roles as role, _i (_i)}
           <button 
@@ -89,7 +98,7 @@
             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-monoer">{role.code}</div>
+            <div class="mt-0.5 font-mono text-[10px] opacity-60">{role.code}</div>
           </button>
         {/each}
         {#if roles.length === 0}
@@ -108,8 +117,8 @@
     <!-- Right: Matrix Grid -->
     <div class="flex-1 bg-card rounded-lg 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 class="p-5 border-b border-border bg-muted/30 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
           <div>
             <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>
@@ -156,7 +165,7 @@
               <!-- 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-primaryr">{resource.section}</td>
+                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primary">{resource.section}</td>
                 </tr>
               {/if}