@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/AutoTable.svelte

@@ -484,13 +484,17 @@
   }
 </script>
 
-<div class="space-y-4">
+<div class="space-y-5" data-svadmin-list>
   <!-- Header -->
-  <div class="flex flex-wrap items-center justify-between gap-2">
-    <h1 class="text-lg sm:text-xl font-semibold text-foreground">{resource.label}</h1>
-    <div class="flex flex-wrap items-center gap-2">
+  <div class="rounded-3xl border border-border/70 bg-card/90 p-5 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-list-header>
+    <div class="flex flex-wrap items-center justify-between gap-4">
+      <div class="min-w-0">
+        <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{resource.label}</h1>
+        <p class="mt-1 text-sm text-muted-foreground">{t('common.list')}</p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2" data-svadmin-list-actions>
       {#if canExport}
-        <Button variant="outline" size="sm" onclick={exportCSV}>
+        <Button variant="outline" size="sm" class="h-10 rounded-xl" onclick={exportCSV}>
           <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
         </Button>
       {/if}
@@ -513,8 +517,8 @@
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           {#snippet child({ props })}
-            <Button variant="outline" size="sm" {...props}>
-              <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns') || 'Columns'}
+            <Button variant="outline" size="sm" class="h-10 rounded-xl" {...props}>
+              <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns')}
             </Button>
           {/snippet}
         </DropdownMenu.Trigger>
@@ -533,15 +537,16 @@
         {@render headerActions()}
       {/if}
       {#if canCreate}
-        <Button onclick={() => navigate(`/${resourceName}/create`)}>
+        <Button class="h-10 rounded-xl px-4 shadow-sm shadow-primary/15" onclick={() => navigate(`/${resourceName}/create`)}>
           <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
         </Button>
       {/if}
+      </div>
     </div>
   </div>
 
   <!-- Search and Advanced Filters -->
-  <div class="flex flex-wrap items-center gap-2">
+  <div class="flex flex-wrap items-center gap-3 rounded-3xl border border-border/70 bg-card/80 p-3 shadow-sm shadow-slate-900/[0.02] backdrop-blur" data-svadmin-table-toolbar>
     {#if searchableFields.length > 0}
       <div class="relative max-w-sm flex-1 sm:min-w-[250px]">
         <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -550,7 +555,7 @@
           bind:value={searchText}
           oninput={() => { pagination = { ...pagination, current: 1 }; }}
           placeholder={t('common.search')}
-          class="pl-10 h-9"
+          class="h-10 rounded-xl border-border/70 bg-background/85 pl-10"
         />
       </div>
     {/if}
@@ -559,7 +564,7 @@
       <Popover.Root>
         <Popover.Trigger>
           {#snippet child({ props })}
-            <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
+            <Button variant="outline" size="sm" class="h-10 rounded-xl px-3" {...props}>
               <FilterIcon class="h-4 w-4" data-icon="inline-start" />
               {t('common.filter')}
               {#if activeFilterCount > 0}
@@ -577,7 +582,7 @@
                 {#if field.type === 'select' && field.options}
                   <select
                     id="filter-{field.key}"
-                    class="h-9 text-sm w-full font-normal flex 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"
+                    class="flex h-10 w-full items-center justify-between rounded-xl border border-input bg-background px-3 py-2 text-sm font-normal 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={filterValues[field.key] ?? ''}
                     onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
                   >
@@ -593,7 +598,7 @@
                     value={filterValues[field.key] ?? ''}
                     oninput={(e) => filterValues[field.key] = (e.currentTarget as HTMLInputElement).value}
                     placeholder={field.label}
-                    class="h-9 text-sm"
+                    class="h-10 rounded-xl text-sm"
                   />
                 {/if}
               </div>
@@ -616,7 +621,7 @@
   </div>
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-[24px] bg-card/80 backdrop-blur-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden ring-1 ring-border/30" role="region" aria-label="{resource.label} {t('common.list')}">
+  <div class="overflow-hidden rounded-3xl border border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-table-card role="region" aria-label="{resource.label} {t('common.list')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -640,8 +645,8 @@
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
         <div class="hidden md:block">
-        <Table.Root>
-          <Table.Header>
+        <Table.Root class="svadmin-data-table" data-svadmin-datatable>
+          <Table.Header data-svadmin-table-head>
             {#each table_getHeaderGroups(tbl) as headerGroup, _i (_i)}
               <DraggableHeader
                 columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
@@ -652,7 +657,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    class={cn("bg-transparent hover:bg-muted/10 border-b border-border/20 uppercase tracking-[0.12em] text-[10px] text-muted-foreground/70 font-semibold py-4", dragProps.class)}
+                    class={cn("border-b border-border/50 bg-muted/35 px-4 py-4 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/75 hover:bg-muted/45", dragProps.class)}
                     style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -694,9 +699,9 @@
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
-                    <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
+                    <Table.Row {...props} data-svadmin-table-row class="border-b border-border/30 transition-colors duration-200 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/25'}">
                       {#each row_getVisibleCells(row) as cell, _i (_i)}
-                        <Table.Cell>
+                        <Table.Cell class="px-4 py-3.5">
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}
@@ -803,7 +808,7 @@
                         <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                       </svg>
                       <p class="text-sm font-medium text-muted-foreground mb-1">{t('common.noData')}</p>
-                      <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint') || 'Get started by creating your first record.'}</p>
+                      <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint')}</p>
                       {#if canCreate}
                         <Button variant="outline" size="sm" class="gap-2" onclick={() => navigate(`/${resourceName}/create`)}>
                           <Plus class="h-3.5 w-3.5" />
@@ -825,7 +830,7 @@
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
-              class="rounded-[20px] shadow-[0_4px_20px_rgb(0,0,0,0.03)] ring-1 ring-border/20 bg-card p-5 transition-all {row_getIsSelected(row) ? 'ring-2 ring-primary/50 bg-primary/5' : ''}"
+              class="rounded-3xl border border-border/60 bg-card p-5 shadow-sm shadow-slate-900/[0.03] transition-all {row_getIsSelected(row) ? 'border-primary/35 bg-primary/5 ring-2 ring-primary/20' : ''}"
             >
               <!-- Card header: ID + select + actions -->
               <div class="flex items-center justify-between mb-3">
@@ -906,11 +911,11 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
+  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground" data-svadmin-pagination>
     <div class="flex items-center gap-2">
       <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
       <select
-        class="h-8 w-[70px] px-1 py-1 flex items-center justify-between rounded-md border border-input bg-background 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"
+        class="h-8 w-[70px] px-2 rounded-md border border-input bg-background 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={String(pagination.pageSize ?? 10)}
         onchange={(e) => {
           const size = Number((e.target as HTMLSelectElement).value);
@@ -925,7 +930,7 @@
         <option value="100">100</option>
       </select>
     </div>
-    <PaginationUI.Root>
+    <PaginationUI.Root class="sm:w-auto sm:justify-end sm:mx-0">
       <PaginationUI.Content>
         <PaginationUI.Item>
           <PaginationUI.Previous

package/dist/components/ErrorPage.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { AlertTriangle, ArrowLeft, FileQuestion, Home } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+
+  interface Props {
+    status?: '404' | '500';
+    title?: string;
+    description?: string;
+  }
+
+  let { status = '404', title, description }: Props = $props();
+
+  function goBack() {
+    if (typeof window !== 'undefined') {
+      window.history.back();
+    }
+  }
+
+  const isNotFound = $derived(status === '404');
+  const resolvedTitle = $derived(title ?? (isNotFound ? t('common.pageNotFound') : t('common.error')));
+  const resolvedDescription = $derived(
+    description ?? (isNotFound ? t('error.pageNotFoundDescription') : t('error.internalServerErrorDescription')),
+  );
+</script>
+
+<div class="flex min-h-[70vh] items-center justify-center p-4" data-svadmin-content-page="error">
+  <Card.Card class="w-full max-w-md border-border/60">
+    <Card.CardContent class="space-y-6 px-6 py-10 text-center">
+      <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-lg bg-muted/50 text-muted-foreground">
+        {#if isNotFound}
+          <FileQuestion class="h-8 w-8" />
+        {:else}
+          <AlertTriangle class="h-8 w-8 text-destructive" />
+        {/if}
+      </div>
+
+      <div class="space-y-2">
+        <p class="text-xs font-semibold uppercase text-muted-foreground">{status}</p>
+        <h1 class="text-2xl font-semibold text-foreground">{resolvedTitle}</h1>
+        <p class="mx-auto max-w-sm text-sm leading-relaxed text-muted-foreground">{resolvedDescription}</p>
+      </div>
+
+      <div class="flex flex-col justify-center gap-2 sm:flex-row">
+        <Button variant="outline" onclick={goBack}>
+          <ArrowLeft class="h-4 w-4" />
+          {t('common.back')}
+        </Button>
+        <Button onclick={() => navigate('/')}>
+          <Home class="h-4 w-4" />
+          {t('common.returnHome')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

@@ -0,0 +1,8 @@
+interface Props {
+    status?: '404' | '500';
+    title?: string;
+    description?: string;
+}
+declare const ErrorPage: import("svelte").Component<Props, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;

package/dist/components/FieldRenderer.svelte

@@ -85,8 +85,8 @@
   }
 </script>
 
-<div class="space-y-1.5">
-  <Label for={field.key} id="label-{field.key}">
+<div class="space-y-1.5" data-svadmin-field>
+  <Label for={field.key} id="label-{field.key}" data-svadmin-field-label>
     {field.label}
     {#if field.required}
       <span class="text-destructive">*</span>

package/dist/components/ForgotPasswordPage.svelte

@@ -5,9 +5,8 @@
   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 { KeyRound, User, ArrowLeft, CheckCircle, Loader2, AlertCircle } from '@lucide/svelte';
+  import { User, ArrowLeft, CheckCircle, Loader2, AlertCircle, Shield } from '@lucide/svelte';
 
   let { title = 'Admin' } = $props<{
     title?: string;
@@ -34,79 +33,123 @@
   }
 </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">
+<div class="min-h-screen flex flex-col lg:flex-row">
+  <!-- Left brand panel -->
+  <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.forgotPassword')}
+        </h2>
+        <p class="text-base text-white/70 leading-relaxed max-w-[320px]">
+          {t('auth.forgotPasswordDescription')}
+        </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>
+        <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">
           {#if sent}
-            <CheckCircle class="h-5 w-5" />
+            {t('auth.resetLinkSent')}
           {:else}
-            <KeyRound class="h-5 w-5" />
+            {t('auth.forgotPassword')}
           {/if}
-        </div>
-        <Card.CardTitle class="text-xl">
-          {sent ? t('auth.resetLinkSent') : t('auth.forgotPassword')}
-        </Card.CardTitle>
-        {#if !sent}
-          <p class="text-sm text-muted-foreground">{t('auth.forgotPasswordDescription')}</p>
-        {/if}
-      </Card.CardHeader>
-      <Card.CardContent>
-        {#if sent}
-          <div class="py-2">
-            <p class="text-sm text-muted-foreground text-center mb-4">
-              {t('auth.resetLinkSent')}
-            </p>
-            <Button variant="outline" class="w-full" onclick={() => navigate('/login')}>
-              <ArrowLeft class="h-4 w-4 mr-2" />
-              {t('auth.backToLogin')}
-            </Button>
+        </h1>
+        <p class="text-sm text-muted-foreground">
+          {#if sent}
+            {t('auth.resetLinkSent')}
+          {:else}
+            {t('auth.forgotPasswordDescription')}
+          {/if}
+        </p>
+      </div>
+
+      {#if sent}
+        <div class="space-y-4">
+          <div class="flex items-center gap-3 rounded-lg border bg-muted/50 p-4">
+            <CheckCircle class="h-5 w-5 text-primary shrink-0" />
+            <p class="text-sm text-muted-foreground">{t('auth.resetLinkSent')}</p>
           </div>
-        {:else}
-          <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}
+          <Button variant="outline" class="w-full" onclick={() => navigate('/login')}>
+            <ArrowLeft class="h-4 w-4 mr-2" />
+            {t('auth.backToLogin')}
+          </Button>
+        </div>
+      {:else}
+        <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}
 
-            <div class="space-y-2">
-              <Label for="forgot-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="forgot-identifier"
-                  type="text"
-                  placeholder={t('auth.identifierPlaceholder')}
-                  bind:value={identifier}
-                  class="pl-9"
-                  autocomplete="username"
-                />
-              </div>
+          <div class="space-y-2">
+            <Label for="forgot-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="forgot-identifier"
+                type="text"
+                placeholder={t('auth.identifierPlaceholder')}
+                bind:value={identifier}
+                class="pl-9"
+                autocomplete="username"
+              />
             </div>
-
-            <Button type="submit" class="w-full" disabled={forgot.isLoading}>
-              {#if forgot.isLoading}
-                <Loader2 class="h-4 w-4 animate-spin mr-2" />
-              {/if}
-              {t('auth.sendResetLink')}
-            </Button>
-          </form>
-
-          <div class="flex items-center justify-center mt-5 pt-5 border-t">
-            <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => navigate('/login')}>
-              <ArrowLeft class="h-3 w-3" />
-              {t('auth.backToLogin')}
-            </Button>
           </div>
-        {/if}
-      </Card.CardContent>
-    </Card.Card>
 
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
+          <Button type="submit" class="w-full h-10" disabled={forgot.isLoading}>
+            {#if forgot.isLoading}
+              <Loader2 class="h-4 w-4 animate-spin mr-2" />
+            {/if}
+            {t('auth.sendResetLink')}
+          </Button>
+        </form>
+
+        <div class="flex items-center justify-center mt-8 pt-6 border-t">
+          <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => navigate('/login')}>
+            <ArrowLeft class="h-3 w-3" />
+            {t('auth.backToLogin')}
+          </Button>
+        </div>
+      {/if}
+
+      <p class="text-xs text-muted-foreground/60 mt-8 text-center">
+        Powered by {title}
+      </p>
+    </div>
   </div>
 </div>

package/dist/components/Header.svelte

@@ -35,7 +35,7 @@
   const CustomNotificationPanel = registry.NotificationPanel;
 </script>
 
-<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-card/60 backdrop-blur-md px-4 md:px-6">
+<header class="sticky top-0 z-30 flex h-16 w-full shrink-0 items-center justify-between border-b border-border/70 bg-card/85 px-4 shadow-sm shadow-slate-900/[0.02] backdrop-blur-xl md:px-6">
   <div class="flex items-center gap-4">
     {#if children}
       {@render children()}
@@ -54,7 +54,7 @@
     {/if}
 
     {#if siteUrl}
-      <TooltipButton tooltip={t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
+      <TooltipButton tooltip={t('common.goToSite')} href={siteUrl} target="_blank" rel="noopener noreferrer" class="flex items-center justify-center rounded-xl border border-border/60 bg-background/80">
         <MonitorUp class="h-4 w-4 text-muted-foreground transition-colors hover:text-foreground" />
       </TooltipButton>
     {/if}
@@ -64,10 +64,10 @@
     {/if}
 
     {#if showSearch && onSearchClick}
-      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
+      <Button variant="outline" size="sm" onclick={onSearchClick} class="h-10 gap-2 rounded-xl border-border/70 bg-background/85 px-3 text-muted-foreground shadow-sm shadow-slate-900/[0.02] hover:bg-muted/45 sm:min-w-56 sm:justify-start">
         <Search class="h-3.5 w-3.5" />
-        <span class="hidden sm:inline text-xs">Search...</span>
-        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
+        <span class="hidden text-xs sm:inline">{t('common.search')}</span>
+        <kbd class="ml-auto hidden items-center gap-0.5 rounded-md border bg-muted/60 px-1.5 py-0.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">
           <span class="text-xs">⌘</span>K
         </kbd>
       </Button>
@@ -77,7 +77,7 @@
       {#if CustomThemeToggle}
         <CustomThemeToggle />
       {:else}
-        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
+        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-xl border border-border/60 bg-background/80">
           {#if getResolvedTheme() === 'dark'}
             <Moon class="h-4 w-4 transition-all" />
           {:else}
@@ -92,4 +92,3 @@
     {/if}
   </div>
 </header>
-

package/dist/components/IntegrationsSettings.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { AlertCircle, 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';
+
+  interface Integration {
+    id: string;
+    name: string;
+    description: string;
+    connected: boolean;
+    Icon: Component;
+    tone: string;
+  }
+
+  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' },
+  ]);
+
+  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">{t('settings.integrations')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{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 ? t('integrations.statusConnected') : 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 ? t('integrations.enabled') : 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>{t('integrations.addMoreHint')}</span>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

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

package/dist/components/Layout.svelte

@@ -104,8 +104,8 @@
   ontouchend={handleTouchEnd}
 />
 {#if loading}
-  <div class="flex h-screen" in:fade={{ duration: 150 }}>
-    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
+  <div class="flex h-screen bg-muted/30" in:fade={{ duration: 150 }}>
+    <div class="hidden w-64 space-y-4 border-r border-border/70 bg-card p-4 md:block">
       <Skeleton class="h-8 w-32" />
       <div class="space-y-2 mt-6">
         {#each Array(5) as _, _i (_i)}
@@ -113,7 +113,7 @@
         {/each}
       </div>
     </div>
-    <div class="flex-1 p-8 space-y-6">
+    <div class="flex-1 space-y-6 p-8">
       <Skeleton class="h-8 w-48" />
       <div class="space-y-3">
         {#each Array(4) as _, _i (_i)}
@@ -123,7 +123,7 @@
     </div>
   </div>
 {:else}
-  <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
+  <div class="flex h-screen bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.08),transparent_32rem),linear-gradient(180deg,hsl(var(--muted)/0.48),hsl(var(--background))_42rem)]" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
       <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
@@ -138,7 +138,7 @@
 
     <div
       class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-      class:md:ml-64={!collapsed}
+      class:md:ml-72={!collapsed}
       class:md:ml-16={collapsed}
     >
       <!-- Header with mobile hamburger -->
@@ -163,9 +163,9 @@
       </Header>
 
       <!-- Content area -->
-      <main class="flex-1 overflow-y-auto p-6 md:p-8">
+      <main class="flex-1 overflow-y-auto px-4 py-5 sm:px-6 md:px-8 md:py-7">
         {#key getPath()}
-          <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+          <div class="mx-auto w-full max-w-[1680px]" in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
             {@render children()}
           </div>
         {/key}