@svadmin/ui 0.35.0 → 0.37.0

package/dist/components/AutoForm.svelte

@@ -44,17 +44,14 @@
   const hasGroups = $derived(formFields.some(f => f.group));
   const groups = $derived((() => {
     if (!hasGroups) return [];
-    const result: Array<{ name: string; fields: FieldDefinition[] }> = [];
+    const order: string[] = [];
+    const map = new Map<string, FieldDefinition[]>();
     for (const f of formFields) {
       const g = f.group ?? '';
-      let group = result.find(item => item.name === g);
-      if (!group) {
-        group = { name: g, fields: [] };
-        result.push(group);
-      }
-      group.fields.push(f);
+      if (!map.has(g)) { order.push(g); map.set(g, []); }
+      (map.get(g) ?? []).push(f);
     }
-    return result;
+    return order.map(g => ({ name: g, fields: map.get(g) ?? [] }));
   })());
 
   // ─── Default values from field metadata ───────────────────────────
@@ -135,37 +132,26 @@
   }
 </script>
 
-<div class="space-y-6" data-svadmin-form-shell>
-  <div class="rounded-3xl border border-border/70 bg-card/90 p-5 shadow-sm shadow-slate-900/[0.03] backdrop-blur" data-svadmin-form-header>
-    <div class="flex flex-wrap items-center gap-4">
-      <TooltipButton
-        tooltip={t('common.back')}
-        onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
-        class="h-10 w-10 rounded-xl border border-border/70 bg-background/80"
-      >
-        <ArrowLeft class="h-5 w-5" />
-      </TooltipButton>
-      <div class="min-w-0 flex-1">
-        <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{pageTitle}</h1>
-        <div class="mt-2 flex flex-wrap items-center gap-2">
-          <Badge variant="secondary" class="rounded-full px-2.5 py-0.5 text-[0.6875rem] font-semibold">
-            {mode === 'create' ? t('common.create') : mode === 'show' ? t('common.detail') : t('common.edit')}
-          </Badge>
-          <p class="text-sm text-muted-foreground">{resource.label}</p>
-        </div>
-      </div>
-      {#if headerContent}
-        {@render headerContent()}
-      {/if}
-      {#if form.isTainted()}
-        <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
-      {/if}
-    </div>
+<div class="space-y-6">
+  <div class="flex items-center gap-4">
+    <TooltipButton
+      tooltip={t('common.back')}
+      onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
+    >
+      <ArrowLeft class="h-5 w-5" />
+    </TooltipButton>
+    <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
+    {#if headerContent}
+      {@render headerContent()}
+    {/if}
+    {#if form.isTainted()}
+      <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
+    {/if}
   </div>
 
   {#if form.loading}
-    <div class="max-w-4xl space-y-6">
-      <div class="space-y-5 rounded-3xl border border-border/70 bg-card/90 p-6 shadow-sm shadow-slate-900/[0.03]">
+    <div class="max-w-3xl space-y-6">
+      <div class="rounded-lg shadow-sm ring-1 ring-border/10 p-6 space-y-5">
         {#each Array(4) as _, _i (_i)}
           <div class="space-y-2">
             <Skeleton class="h-4 w-24" />
@@ -175,7 +161,7 @@
       </div>
     </div>
   {:else}
-    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-5xl space-y-6" data-svadmin-form-settings>
+    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
       {#if submitError}
         <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
           <Alert.Root variant="destructive">
@@ -187,15 +173,15 @@
 
       {#if hasGroups}
         {#each groups as group, _i (_i)}
-          <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]" data-svadmin-form-card>
+          <Card.Root class="border-border/40 shadow-sm">
             {#if group.name}
-              <Card.Header class="border-b border-border/60 bg-muted/25 px-5 py-4 sm:px-6">
-                <Card.Title class="text-base font-semibold">{group.name}</Card.Title>
+              <Card.Header>
+                <Card.Title class="text-lg">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class="px-4 py-0 sm:px-6" data-svadmin-form-content>
+            <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
               {#each group.fields as field (field.key)}
-                <div data-svadmin-form-row class:border-destructive={!!form.errors[field.key]}>
+                <div class:border-destructive={!!form.errors[field.key]}>
                   {#if fieldRenderer}
                     {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                   {:else}
@@ -215,10 +201,10 @@
           </Card.Root>
         {/each}
       {:else}
-        <Card.Root class="rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]" data-svadmin-form-card>
-          <Card.Content class="px-4 py-0 sm:px-6" data-svadmin-form-content>
+        <Card.Root class="border-border/40 shadow-sm">
+          <Card.Content class="space-y-5 px-4 pt-5 pb-4 sm:px-6 sm:pt-6 sm:pb-6">
             {#each formFields as field (field.key)}
-              <div data-svadmin-form-row class:border-destructive={!!form.errors[field.key]}>
+              <div class:border-destructive={!!form.errors[field.key]}>
                 {#if fieldRenderer}
                   {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                 {:else}
@@ -238,11 +224,11 @@
         </Card.Root>
       {/if}
 
-      <div class="sticky bottom-4 z-10 flex items-center gap-3 rounded-3xl border border-border/70 bg-card/90 p-3 shadow-lg shadow-slate-900/[0.05] backdrop-blur" data-svadmin-form-actions>
+      <div class="flex items-center gap-3">
         {#if formActions}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else if !isReadonly}
-          <Button type="submit" disabled={form.submitting} class="h-10 rounded-xl px-5 shadow-sm shadow-primary/15">
+          <Button type="submit" disabled={form.submitting}>
             {#if form.submitting}
               <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
             {:else}
@@ -253,7 +239,6 @@
           <Button
             type="button"
             variant="outline"
-            class="h-10 rounded-xl"
             onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
           >
             {t('common.cancel')}

package/dist/components/AutoTable.svelte

@@ -484,17 +484,13 @@
   }
 </script>
 
-<div class="space-y-5" data-svadmin-list>
+<div class="space-y-4">
   <!-- Header -->
-  <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>
+  <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">
       {#if canExport}
-        <Button variant="outline" size="sm" class="h-10 rounded-xl" onclick={exportCSV}>
+        <Button variant="outline" size="sm" onclick={exportCSV}>
           <Download class="h-4 w-4" data-icon="inline-start" /> {t('common.export')}
         </Button>
       {/if}
@@ -517,8 +513,8 @@
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           {#snippet child({ props })}
-            <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 variant="outline" size="sm" {...props}>
+              <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns') || 'Columns'}
             </Button>
           {/snippet}
         </DropdownMenu.Trigger>
@@ -537,16 +533,15 @@
         {@render headerActions()}
       {/if}
       {#if canCreate}
-        <Button class="h-10 rounded-xl px-4 shadow-sm shadow-primary/15" onclick={() => navigate(`/${resourceName}/create`)}>
+        <Button 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-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>
+  <div class="flex flex-wrap items-center gap-2">
     {#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" />
@@ -555,7 +550,7 @@
           bind:value={searchText}
           oninput={() => { pagination = { ...pagination, current: 1 }; }}
           placeholder={t('common.search')}
-          class="h-10 rounded-xl border-border/70 bg-background/85 pl-10"
+          class="pl-10 h-9"
         />
       </div>
     {/if}
@@ -564,7 +559,7 @@
       <Popover.Root>
         <Popover.Trigger>
           {#snippet child({ props })}
-            <Button variant="outline" size="sm" class="h-10 rounded-xl px-3" {...props}>
+            <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
               <FilterIcon class="h-4 w-4" data-icon="inline-start" />
               {t('common.filter')}
               {#if activeFilterCount > 0}
@@ -582,7 +577,7 @@
                 {#if field.type === 'select' && field.options}
                   <select
                     id="filter-{field.key}"
-                    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"
+                    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"
                     value={filterValues[field.key] ?? ''}
                     onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
                   >
@@ -598,7 +593,7 @@
                     value={filterValues[field.key] ?? ''}
                     oninput={(e) => filterValues[field.key] = (e.currentTarget as HTMLInputElement).value}
                     placeholder={field.label}
-                    class="h-10 rounded-xl text-sm"
+                    class="h-9 text-sm"
                   />
                 {/if}
               </div>
@@ -621,7 +616,7 @@
   </div>
 
   <!-- Table (TanStack-powered) -->
-  <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')}">
+  <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')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -645,8 +640,8 @@
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
         <div class="hidden md:block">
-        <Table.Root class="svadmin-data-table" data-svadmin-datatable>
-          <Table.Header data-svadmin-table-head>
+        <Table.Root>
+          <Table.Header>
             {#each table_getHeaderGroups(tbl) as headerGroup, _i (_i)}
               <DraggableHeader
                 columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
@@ -657,7 +652,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    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)}
+                    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)}
                     style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -699,9 +694,9 @@
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
-                    <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'}">
+                    <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
                       {#each row_getVisibleCells(row) as cell, _i (_i)}
-                        <Table.Cell class="px-4 py-3.5">
+                        <Table.Cell>
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}
@@ -760,9 +755,9 @@
                                 onSave={() => listResult.refetch()}
                               />
                             {:else if field?.key === primaryKey}
-                              <span class="font-mono text-xs">{cell_getValue(cell) ?? '—'}</span>
+                              <span class="block truncate font-mono text-xs" title={String(cell_getValue(cell) ?? '—')}>{cell_getValue(cell) ?? '—'}</span>
                             {:else}
-                              {cell_getValue(cell) ?? '—'}
+                              <span class="block truncate" title={String(cell_getValue(cell) ?? '—')}>{cell_getValue(cell) ?? '—'}</span>
                             {/if}
                           {/if}
                         </Table.Cell>
@@ -808,7 +803,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')}</p>
+                      <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint') || 'Get started by creating your first record.'}</p>
                       {#if canCreate}
                         <Button variant="outline" size="sm" class="gap-2" onclick={() => navigate(`/${resourceName}/create`)}>
                           <Plus class="h-3.5 w-3.5" />
@@ -830,7 +825,7 @@
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
-              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' : ''}"
+              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' : ''}"
             >
               <!-- Card header: ID + select + actions -->
               <div class="flex items-center justify-between mb-3">
@@ -911,7 +906,7 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <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 flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
     <div class="flex items-center gap-2">
       <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
       <select

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/Header.svelte

@@ -35,7 +35,7 @@
   const CustomNotificationPanel = registry.NotificationPanel;
 </script>
 
-<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">
+<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">
   <div class="flex items-center gap-4">
     {#if children}
       {@render children()}
@@ -54,7 +54,7 @@
     {/if}
 
     {#if siteUrl}
-      <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">
+      <TooltipButton tooltip={t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
         <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="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">
+      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
         <Search class="h-3.5 w-3.5" />
-        <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="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="text-xs">⌘</span>K
         </kbd>
       </Button>
@@ -77,7 +77,7 @@
       {#if CustomThemeToggle}
         <CustomThemeToggle />
       {:else}
-        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-xl border border-border/60 bg-background/80">
+        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
           {#if getResolvedTheme() === 'dark'}
             <Moon class="h-4 w-4 transition-all" />
           {:else}

package/dist/components/Layout.svelte

@@ -104,8 +104,8 @@
   ontouchend={handleTouchEnd}
 />
 {#if loading}
-  <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">
+  <div class="flex h-screen" in:fade={{ duration: 150 }}>
+    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
       <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 space-y-6 p-8">
+    <div class="flex-1 p-8 space-y-6">
       <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-[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 }}>
+  <div class="flex h-screen bg-background" 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,8 +138,8 @@
 
     <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-64={!collapsed}
+      class:md:ml-16={collapsed}
     >
       <!-- Header with mobile hamburger -->
       <Header
@@ -163,9 +163,9 @@
       </Header>
 
       <!-- Content area -->
-      <main class="flex-1 overflow-y-auto px-4 py-5 sm:px-6 md:px-8 md:py-7">
+      <main class="flex-1 overflow-y-auto p-6 md:p-8">
         {#key getPath()}
-          <div class="mx-auto w-full max-w-[1680px]" in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+          <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
             {@render children()}
           </div>
         {/key}

package/dist/components/PageHeader.svelte

@@ -19,21 +19,19 @@
   }: 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="space-y-4 {className}">
   {#if showBreadcrumbs}
-    <div class="mb-4">
-      <Breadcrumbs />
-    </div>
+    <Breadcrumbs />
   {/if}
-  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-    <div class="min-w-0">
-      <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
       {#if description}
-        <p class="mt-1 max-w-3xl text-sm text-muted-foreground">{description}</p>
+        <p class="text-sm text-muted-foreground">{description}</p>
       {/if}
     </div>
     {#if actions}
-      <div class="flex flex-wrap items-center gap-2">
+      <div class="flex items-center gap-2">
         {@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

@@ -107,17 +107,17 @@
   });
 </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">
+<div class="flex flex-col lg:flex-row gap-0 min-h-full">
   <!-- 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">
+  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
     <!-- Mobile: horizontal scroll tabs -->
-    <div class="flex gap-2 overflow-x-auto px-4 py-3 lg:hidden">
+    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
       {#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'}"
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
+              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
             onclick={() => navigate(item.path)}
           >
             <item.icon class="h-4 w-4" />
@@ -128,24 +128,24 @@
     </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>
+    <div class="hidden lg:block py-6 px-3 space-y-6">
+      <div class="px-3">
+        <h2 class="text-lg font-semibold 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">
+          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
             {t(section.group)}
           </h3>
-          <div class="space-y-1">
+          <div class="space-y-0.5">
             {#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
+                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 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'}"
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
                 onclick={() => navigate(item.path)}
               >
                 <item.icon class="h-4 w-4 shrink-0" />
@@ -159,7 +159,7 @@
   </nav>
 
   <!-- 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'}">
+  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
     {#if activeKey === "profile"}
       {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
     {:else if activeKey === "appearance"}