@svadmin/ui 0.35.0 → 0.36.0

package/dist/components/AutoTable.svelte

@@ -915,7 +915,7 @@
     <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);
@@ -930,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

@@ -26,7 +26,7 @@
   );
 </script>
 
-<div class="flex min-h-[70vh] items-center justify-center p-4">
+<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">

package/dist/components/Layout.svelte

@@ -139,7 +139,7 @@
     <div
       class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
       class:md:ml-72={!collapsed}
-      class:md:ml-20={collapsed}
+      class:md:ml-16={collapsed}
     >
       <!-- Header with mobile hamburger -->
       <Header

package/dist/components/PageHeader.svelte

@@ -19,13 +19,13 @@
   }: Props = $props();
 </script>
 
-<div class="rounded-3xl border border-border/70 bg-card/90 p-5 shadow-sm shadow-slate-900/[0.03] backdrop-blur {className}">
+<div class="border-b border-border/70 pb-5 {className}" data-svadmin-page-header>
   {#if showBreadcrumbs}
     <div class="mb-4">
       <Breadcrumbs />
     </div>
   {/if}
-  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+  <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
     <div class="min-w-0">
       <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
       {#if description}
@@ -33,7 +33,7 @@
       {/if}
     </div>
     {#if actions}
-      <div class="flex flex-wrap items-center gap-2">
+      <div class="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:justify-end">
         {@render actions()}
       </div>
     {/if}

package/dist/components/ResourceOperationsPage.svelte

@@ -59,13 +59,12 @@
 </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>
+  <section class="grid gap-4 border-b border-border/60 pb-5 xl:grid-cols-[0.82fr_1.18fr]" data-svadmin-ops-hero>
+    <div class="min-w-0 py-1">
+        <Badge>{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">
+            <span class="flex h-10 w-10 shrink-0 items-center justify-center text-primary">
               <Icon class="h-6 w-6" />
             </span>
           {/if}
@@ -74,15 +73,14 @@
             <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`)}>
+        <Button class="mt-6" onclick={() => navigate(`/${resourceName}/create`)}>
           {actionLabel}
         </Button>
-      </Card.Content>
-    </Card.Root>
+    </div>
 
     <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.Root data-svadmin-metric-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>
@@ -97,7 +95,7 @@
 
   <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.Root data-svadmin-panel-card>
         <Card.Header>
           <Card.Title>{tableLabel}</Card.Title>
           {#if tableDescription}
@@ -106,7 +104,7 @@
         </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="py-3">
               <div class="flex items-center justify-between gap-3">
                 <p class="font-medium capitalize">{lane.label}</p>
                 <Badge variant="outline">{lane.value}</Badge>
@@ -116,19 +114,19 @@
               {/if}
             </div>
           {:else}
-            <p class="rounded-2xl border border-border/60 bg-muted/20 p-4 text-sm text-muted-foreground">{emptyLanesText}</p>
+            <p class="py-3 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.Root data-svadmin-panel-card>
           <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="py-3">
                 <div class="flex items-center justify-between gap-3">
                   <p class="font-medium">{item.title}</p>
                   {#if item.badge}

package/dist/components/SettingsPage.svelte

@@ -2,7 +2,7 @@
   import type { Component, Snippet } from "svelte";
   import { t } from "@svadmin/core/i18n";
   import { navigate } from "@svadmin/core/router";
-  import { User, Palette, Info, Shield, FileSearch, Lock, Puzzle, Bell, Key } from "@lucide/svelte";
+  import { User, Info, FileSearch, Lock, Puzzle } from "@lucide/svelte";
   import ProfilePage from "./ProfilePage.svelte";
   import AppearanceSettings from "./AppearanceSettings.svelte";
   import AboutSettings from "./AboutSettings.svelte";
@@ -60,25 +60,19 @@
     {
       group: "settings.general",
       items: [
-        { key: "profile", path: "/settings/profile", icon: User, label: "settings.profile" },
-        { key: "appearance", path: "/settings/appearance", icon: Palette, label: "settings.appearance" },
-        { key: "notifications", path: "/settings/notifications", icon: Bell, label: "settings.notifications" },
+        { key: "account", path: "/settings/account", icon: User, label: "settings.accountPreferences" },
       ],
     },
     {
       group: "settings.workspace",
       items: [
-        { key: "security", path: "/settings/security", icon: Lock, label: "settings.security" },
-        ...(authProvider ? [
-          { key: "roles", path: "/settings/roles", icon: Shield, label: "settings.rolesAndPermissions" },
-        ] : []),
-        { key: "integrations", path: "/settings/integrations", icon: Puzzle, label: "settings.integrations" },
+        { key: "access", path: "/settings/access", icon: Lock, label: "settings.accessSecurity" },
+        { key: "developer", path: "/settings/developer", icon: Puzzle, label: "settings.integrationApi" },
       ],
     },
     {
       group: "settings.developer",
       items: [
-        { key: "api", path: "/settings/api", icon: Key, label: "settings.api" },
         ...(authProvider ? [
           { key: "audit", path: "/settings/audit", icon: FileSearch, label: "settings.auditLogs" },
         ] : []),
@@ -92,87 +86,59 @@
 
   import { getParams, getRoute } from "../router-state.svelte.js";
 
+  function normalizeKey(tab: string | undefined): string {
+    if (!tab) return "account";
+    if (["profile", "appearance", "notifications"].includes(tab)) return "account";
+    if (["security", "roles"].includes(tab)) return "access";
+    if (["integrations", "api"].includes(tab)) return "developer";
+    return tab;
+  }
+
+  function pathForKey(key: string): string {
+    return `/settings/${key}`;
+  }
+
   let activeKey = $derived.by(() => {
     const tab = getParams().tab;
-    if (!tab) return "profile";
-    if (sectionKeys.has(tab)) return tab;
-    return content ? tab : "profile";
+    const normalized = normalizeKey(tab);
+    if (sectionKeys.has(normalized)) return normalized;
+    return content ? normalized : "account";
   });
 
-  // Default redirect to profile
   $effect(() => {
     if (getRoute() === "/settings") {
-      navigate("/settings/profile");
+      navigate("/settings/account");
+      return;
+    }
+
+    const tab = getParams().tab;
+    const normalized = normalizeKey(tab);
+    if (tab && tab !== normalized && sectionKeys.has(normalized)) {
+      navigate(pathForKey(normalized));
     }
   });
 </script>
 
-<div class="flex min-h-full flex-col overflow-hidden rounded-3xl border border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03] backdrop-blur lg:flex-row">
-  <!-- Left sidebar navigation -->
-  <nav class="w-full shrink-0 border-b border-border/70 bg-muted/20 lg:w-64 lg:border-b-0 lg:border-r">
-    <!-- Mobile: horizontal scroll tabs -->
-    <div class="flex gap-2 overflow-x-auto px-4 py-3 lg:hidden">
-      {#each resolvedSections as section, _i (_i)}
-        {#each section.items as item, _j (_j)}
-          {@const active = activeKey === item.key}
-          <button
-            class="flex items-center gap-2 whitespace-nowrap rounded-xl px-3 py-2 text-sm font-medium transition-colors
-              {active ? 'bg-primary/10 text-primary ring-1 ring-primary/15' : 'text-muted-foreground hover:bg-background/70 hover:text-foreground'}"
-            onclick={() => navigate(item.path)}
-          >
-            <item.icon class="h-4 w-4" />
-            {t(item.label)}
-          </button>
-        {/each}
-      {/each}
-    </div>
-
-    <!-- Desktop: vertical nav with groups -->
-    <div class="hidden space-y-6 px-4 py-6 lg:block">
-      <div class="rounded-2xl border border-border/60 bg-background/70 p-4">
-        <h2 class="text-lg font-semibold tracking-tight text-foreground">{t("settings.title")}</h2>
-        <p class="text-xs text-muted-foreground mt-1">{t("settings.settingsDescription")}</p>
-      </div>
-      {#each resolvedSections as section, _i (_i)}
-        <div>
-          <h3 class="mb-2 px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/60">
-            {t(section.group)}
-          </h3>
-          <div class="space-y-1">
-            {#each section.items as item, _j (_j)}
-              {@const active = activeKey === item.key}
-              <button
-                class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all
-                  {active
-                    ? 'bg-primary/10 text-primary font-medium ring-1 ring-primary/15 shadow-sm shadow-primary/10'
-                    : 'text-muted-foreground hover:bg-background/75 hover:text-foreground'}"
-                onclick={() => navigate(item.path)}
-              >
-                <item.icon class="h-4 w-4 shrink-0" />
-                {t(item.label)}
-              </button>
-            {/each}
-          </div>
-        </div>
-      {/each}
+<div class="min-h-full max-w-6xl">
+  <div class="mb-6 border-b border-border/70 pb-4">
+    <div class="min-w-0">
+      <h2 class="text-2xl font-semibold tracking-tight text-foreground">{t("settings.title")}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t("settings.settingsDescription")}</p>
     </div>
-  </nav>
+  </div>
 
-  <!-- Right content area -->
-  <div class="flex-1 bg-background/60 p-5 sm:p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
-    {#if activeKey === "profile"}
+  <div class="{activeKey === 'access' || activeKey === 'audit' || activeKey === 'developer' ? 'max-w-6xl' : 'max-w-3xl'} space-y-6">
+    {#if activeKey === "account"}
       {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
-    {:else if activeKey === "appearance"}
       {#if appearance}{@render appearance()}{:else}<AppearanceSettings />{/if}
-    {:else if activeKey === "roles"}
-      {#if roles}{@render roles()}{:else}<RolesSettings />{/if}
-    {:else if activeKey === "security"}
+      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
+    {:else if activeKey === "access"}
       {#if security}{@render security()}{:else}<SecuritySettings />{/if}
-    {:else if activeKey === "integrations"}
+      {#if authProvider}
+        {#if roles}{@render roles()}{:else}<RolesSettings />{/if}
+      {/if}
+    {:else if activeKey === "developer"}
       {#if integrations}{@render integrations()}{:else}<IntegrationsSettings />{/if}
-    {:else if activeKey === "notifications"}
-      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
-    {:else if activeKey === "api"}
       {#if api}{@render api()}{:else}<ApiSettings />{/if}
     {:else if activeKey === "audit"}
       {#if audit}{@render audit()}{:else}<AuditLogViewer />{/if}

package/dist/components/ShowPage.svelte

@@ -38,10 +38,10 @@
   </PageHeader>
 
   {#if query.isLoading}
-    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
+    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
       <Card.Content class="space-y-3 p-4 sm:p-5">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="flex flex-col rounded-2xl border border-border/50 bg-muted/20 px-4 py-3 sm:flex-row sm:py-4">
+          <div class="flex flex-col border-b border-border/50 px-1 py-4 sm:flex-row sm:py-4">
             <Skeleton class="h-4 w-1/2 sm:w-1/4" />
             <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
@@ -49,12 +49,12 @@
       </Card.Content>
     </Card.Root>
   {:else if query.data?.data}
-    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
+    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
       <Card.Content class="space-y-3 p-4 sm:p-5">
         {#each showFields as field, i (i)}
           {@const value = ((query.data as { data: Record<string, unknown> }).data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex flex-col rounded-2xl border border-border/55 bg-background/70 px-4 py-3 transition-colors hover:bg-muted/20 sm:flex-row sm:items-start sm:py-4 {i % 2 === 1 ? 'bg-muted/15' : ''}">
+          <div class="flex flex-col border-b border-border/50 px-1 py-4 transition-colors hover:bg-muted/20 sm:flex-row sm:items-start sm:py-4 {i % 2 === 1 ? 'bg-muted/10' : ''}">
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground sm:mb-0 sm:w-1/3">{field.label}</div>
             <div class="text-sm text-foreground sm:w-2/3">
               {#if DisplayComponent && value != null}
@@ -72,7 +72,7 @@
       </Card.Content>
     </Card.Root>
   {:else}
-    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
+    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
       <Card.Content class="p-8 text-center">
         <p class="text-muted-foreground">{t('common.noData')}</p>
         {#if query.isError}