@svadmin/ui 0.49.2 → 0.50.0

package/dist/components/AutoForm.svelte

@@ -13,6 +13,7 @@
   import * as Alert from './ui/alert/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import ConfirmDialog from './ConfirmDialog.svelte';
+  import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
 
   const i18n = useTranslation();
@@ -21,15 +22,32 @@
     resourceName: string;
     id?: string | number;
     mode?: 'create' | 'edit' | 'clone' | 'show';
+    density?: 'compact' | 'comfortable';
+    columns?: 1 | 2 | 3 | 4;
+    showHeader?: boolean;
     fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
     formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     headerContent?: Snippet;
     onSuccess?: () => void;
+    onNavigationGuardReady?: (guard: (fn: () => void) => void) => void;
   }
 
-  let { resourceName, id, mode = 'create', fieldRenderer, formActions, headerContent, onSuccess }: Props = $props();
+  let {
+    resourceName,
+    id,
+    mode = 'create',
+    density = 'comfortable',
+    columns = 1,
+    showHeader = true,
+    fieldRenderer,
+    formActions,
+    headerContent,
+    onSuccess,
+    onNavigationGuardReady,
+  }: Props = $props();
   const adminContext = captureAdminContext();
   const isReadonly = $derived(mode === 'show');
+  const isCompact = $derived(density === 'compact');
 
   // ─── Resource metadata ────────────────────────────────────────────
   const resource = $derived(getResource(resourceName));
@@ -57,6 +75,26 @@
     return order.map(g => ({ name: g, fields: map.get(g) ?? [] }));
   })());
 
+  const gridClass = $derived(
+    columns === 4
+      ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4'
+      : columns === 3
+        ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
+        : columns === 2
+          ? 'grid grid-cols-1 md:grid-cols-2 gap-4'
+          : 'space-y-5'
+  );
+
+  function isFullWidthField(field: FieldDefinition): boolean {
+    return (
+      field.type === 'textarea' ||
+      field.type === 'richtext' ||
+      field.type === 'json' ||
+      field.type === 'array' ||
+      field.type === 'images'
+    );
+  }
+
   // ─── Default values from field metadata ───────────────────────────
   function getDefaultForType(field: FieldDefinition): unknown {
     switch (field.type) {
@@ -137,6 +175,10 @@
     }
   }
 
+  $effect(() => {
+    onNavigationGuardReady?.(guardNavigate);
+  });
+
   function confirmNavigate() {
     confirmOpen = false;
     pendingNavigation?.();
@@ -149,25 +191,27 @@
   }
 </script>
 
-<div class="space-y-6">
-  <div class="flex items-center gap-4">
-    <TooltipButton
-      tooltip={i18n.t('common.back')}
-      onclick={() => guardNavigate(() => adminContext.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">{i18n.t('common.unsaved')}</Badge>
-    {/if}
-  </div>
+<div class={isCompact ? 'space-y-4' : 'space-y-6'}>
+  {#if showHeader}
+    <div class="flex items-center gap-4">
+      <TooltipButton
+        tooltip={i18n.t('common.back')}
+        onclick={() => guardNavigate(() => adminContext.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">{i18n.t('common.unsaved')}</Badge>
+      {/if}
+    </div>
+  {/if}
 
   {#if form.loading}
-    <div class="max-w-3xl space-y-6">
+    <div class="max-w-4xl 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">
@@ -178,7 +222,7 @@
       </div>
     </div>
   {:else}
-    <form bind:this={formElement} onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6" novalidate>
+    <form bind:this={formElement} onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-4xl space-y-6" novalidate>
       {#if submitError}
         <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
           <Alert.Root variant="destructive">
@@ -192,21 +236,51 @@
         {#each groups as group, _i (_i)}
           <Card.Root class="border-border/40 shadow-sm">
             {#if group.name}
-              <Card.Header>
+              <Card.Header class={isCompact ? 'px-4 py-3' : ''}>
                 <Card.Title class="text-lg">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <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 class:border-destructive={!!form.errors[field.key]}>
+            <Card.Content class={isCompact ? 'px-4 pb-4 pt-0' : 'px-4 sm:px-6 pb-4 sm:pb-6 pt-0'}>
+              <div class={gridClass}>
+                {#each group.fields as field (field.key)}
+                  <div class={cn(columns > 1 && isFullWidthField(field) && 'col-span-full', !!form.errors[field.key] && 'border-destructive')}>
+                    {#if fieldRenderer}
+                      {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
+                    {:else}
+                      <FieldRenderer
+                        {field}
+                        value={form.values[field.key]}
+                        onchange={(val: unknown) => form.setFieldValue(field.key, val)}
+                        {density}
+                        invalid={!!form.errors[field.key]}
+                        errorId={form.errors[field.key] ? fieldErrorId(field.key) : undefined}
+                        disabled={isReadonly}
+                      />
+                    {/if}
+                    {#if form.errors[field.key]}
+                      <p id={fieldErrorId(field.key)} class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            </Card.Content>
+          </Card.Root>
+        {/each}
+      {:else}
+        <Card.Root class="border-border/40 shadow-sm">
+          <Card.Content class={isCompact ? 'p-4' : 'px-4 pt-5 pb-4 sm:px-6 sm:pt-6 sm:pb-6'}>
+              <div class={gridClass} data-svadmin-form-grid data-columns={columns} data-density={density}>
+              {#each formFields as field (field.key)}
+                <div class={cn(columns > 1 && isFullWidthField(field) && 'col-span-full', !!form.errors[field.key] && 'border-destructive')}>
                   {#if fieldRenderer}
                     {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                   {:else}
-                    <FieldRenderer
-                      {field}
-                      value={form.values[field.key]}
-                      onchange={(val: unknown) => form.setFieldValue(field.key, val)}
-                      invalid={!!form.errors[field.key]}
+                  <FieldRenderer
+                    {field}
+                    value={form.values[field.key]}
+                    onchange={(val: unknown) => form.setFieldValue(field.key, val)}
+                    {density}
+                    invalid={!!form.errors[field.key]}
                       errorId={form.errors[field.key] ? fieldErrorId(field.key) : undefined}
                       disabled={isReadonly}
                     />
@@ -216,31 +290,7 @@
                   {/if}
                 </div>
               {/each}
-            </Card.Content>
-          </Card.Root>
-        {/each}
-      {:else}
-        <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 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}
-                  <FieldRenderer
-                    {field}
-                    value={form.values[field.key]}
-                    onchange={(val: unknown) => form.setFieldValue(field.key, val)}
-                    invalid={!!form.errors[field.key]}
-                    errorId={form.errors[field.key] ? fieldErrorId(field.key) : undefined}
-                    disabled={isReadonly}
-                  />
-                {/if}
-                {#if form.errors[field.key]}
-                  <p id={fieldErrorId(field.key)} class="text-destructive text-[0.8125rem] mt-1" role="alert" aria-live="polite">{form.errors[field.key]}</p>
-                {/if}
-              </div>
-            {/each}
+            </div>
           </Card.Content>
         </Card.Root>
       {/if}
@@ -249,7 +299,7 @@
         {#if formActions}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else if !isReadonly}
-          <Button type="submit" disabled={form.submitting}>
+          <Button type="submit" size={isCompact ? 'sm' : 'default'} disabled={form.submitting}>
             {#if form.submitting}
               <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
             {:else}
@@ -260,6 +310,7 @@
           <Button
             type="button"
             variant="outline"
+            size={isCompact ? 'sm' : 'default'}
             onclick={() => guardNavigate(() => adminContext.navigate(`/${resourceName}`))}
           >
             {i18n.t('common.cancel')}

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

@@ -4,6 +4,9 @@ interface Props {
     resourceName: string;
     id?: string | number;
     mode?: 'create' | 'edit' | 'clone' | 'show';
+    density?: 'compact' | 'comfortable';
+    columns?: 1 | 2 | 3 | 4;
+    showHeader?: boolean;
     fieldRenderer?: Snippet<[{
         field: FieldDefinition;
         value: unknown;
@@ -15,6 +18,7 @@ interface Props {
     }]>;
     headerContent?: Snippet;
     onSuccess?: () => void;
+    onNavigationGuardReady?: (guard: (fn: () => void) => void) => void;
 }
 declare const AutoForm: import("svelte").Component<Props, {}, "">;
 type AutoForm = ReturnType<typeof AutoForm>;

package/dist/components/Breadcrumbs.svelte

@@ -2,6 +2,7 @@
   import { captureAdminContext, getResources, type MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { useTranslation } from '@svadmin/core/i18n';
+  import { cn } from '../utils.js';
 
   import * as Breadcrumb from './ui/breadcrumb/index.js';
 
@@ -10,7 +11,7 @@
   const adminContext = captureAdminContext();
   const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
 
-  let { menu }: { menu?: MenuItem[] } = $props();
+  let { menu, class: className = 'mb-4' }: { menu?: MenuItem[]; class?: string } = $props();
 
   interface Crumb { label: string; href?: string; }
 
@@ -83,7 +84,7 @@
 </script>
 
 {#if crumbs.length > 1}
-  <Breadcrumb.Root class="mb-4">
+  <Breadcrumb.Root class={cn(className)}>
     <Breadcrumb.List>
       {#each crumbs as crumb, i (`${crumb.label}-${i}`)}
         {#if i > 0}

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

@@ -1,6 +1,7 @@
 import { type MenuItem } from '@svadmin/core';
 type $$ComponentProps = {
     menu?: MenuItem[];
+    class?: string;
 };
 declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;

package/dist/components/CreatePage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getResource } from '@svadmin/core';
+  import { getResource, captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
   import PageHeader from './PageHeader.svelte';
@@ -11,30 +11,50 @@
   interface Props {
     resourceName: string;
     title?: string;
+    density?: 'compact' | 'comfortable';
+    columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
+    onSuccess?: () => void;
     class?: string;
   }
 
   let {
     resourceName,
     title,
+    density = 'comfortable',
+    columns = 1,
     headerActions,
+    onSuccess,
     class: className = '',
   }: Props = $props();
+  const adminContext = captureAdminContext();
+  let navigateGuard = $state<(fn: () => void) => void>((fn) => fn());
 
   const resource = $derived(getResource(resourceName));
   const pageTitle = $derived(title ?? `${i18n.t('common.create')}${resource.label}`);
 </script>
 
-<div class="space-y-6 {className}">
-  <PageHeader title={pageTitle}>
+<div class="{density === 'compact' ? 'space-y-4' : 'space-y-6'} {className}">
+  <PageHeader
+    title={pageTitle}
+    {density}
+    onBack={() => navigateGuard(() => adminContext.navigate(`/${resourceName}`))}
+  >
     {#snippet actions()}
-      <ListButton resource={resourceName} hideText />
+      <ListButton resource={resourceName} hideText onBeforeNavigate={navigateGuard} />
       {#if headerActions}
         {@render headerActions()}
       {/if}
     {/snippet}
   </PageHeader>
 
-  <AutoForm {resourceName} mode="create" />
+  <AutoForm
+    {resourceName}
+    mode="create"
+    {density}
+    {columns}
+    showHeader={false}
+    onNavigationGuardReady={(guard) => navigateGuard = guard}
+    {onSuccess}
+  />
 </div>

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

@@ -2,7 +2,10 @@ import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
     title?: string;
+    density?: 'compact' | 'comfortable';
+    columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
+    onSuccess?: () => void;
     class?: string;
 }
 declare const CreatePage: import("svelte").Component<Props, {}, "">;

package/dist/components/DrawerForm.svelte

@@ -32,7 +32,7 @@
       </Sheet.Title>
     </Sheet.Header>
     <div class="flex-1 overflow-y-auto">
-      <AutoForm {resourceName} {mode} {id} onSuccess={handleSuccess} />
+      <AutoForm {resourceName} {mode} {id} showHeader={false} onSuccess={handleSuccess} />
     </div>
   </Sheet.Content>
 </Sheet.Root>

package/dist/components/EditPage.svelte

@@ -16,8 +16,11 @@
     resourceName: string;
     id: string | number;
     title?: string;
+    density?: 'compact' | 'comfortable';
+    columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
+    onSuccess?: () => void;
     class?: string;
   }
 
@@ -25,22 +28,30 @@
     resourceName,
     id,
     title,
+    density = 'comfortable',
+    columns = 1,
     canDelete,
     headerActions,
+    onSuccess,
     class: className = '',
   }: Props = $props();
   const adminContext = captureAdminContext();
+  let navigateGuard = $state<(fn: () => void) => void>((fn) => fn());
 
   const resource = $derived(getResource(resourceName));
   const pageTitle = $derived(title ?? `${i18n.t('common.edit')} ${resource.label} #${id}`);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
 </script>
 
-<div class="space-y-6 {className}">
-  <PageHeader title={pageTitle}>
+<div class="{density === 'compact' ? 'space-y-4' : 'space-y-6'} {className}">
+  <PageHeader
+    title={pageTitle}
+    {density}
+    onBack={() => navigateGuard(() => adminContext.navigate(`/${resourceName}`))}
+  >
     {#snippet actions()}
-      <ListButton resource={resourceName} hideText />
-      <ShowButton resource={resourceName} recordItemId={id} hideText />
+      <ListButton resource={resourceName} hideText onBeforeNavigate={navigateGuard} />
+      <ShowButton resource={resourceName} recordItemId={id} hideText onBeforeNavigate={navigateGuard} />
       <RefreshButton resource={resourceName} hideText />
       {#if showDelete !== false}
         <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => adminContext.navigate(`/${resourceName}`)} />
@@ -51,5 +62,14 @@
     {/snippet}
   </PageHeader>
 
-  <AutoForm {resourceName} mode="edit" {id} />
+  <AutoForm
+    {resourceName}
+    mode="edit"
+    {id}
+    {density}
+    {columns}
+    showHeader={false}
+    onNavigationGuardReady={(guard) => navigateGuard = guard}
+    {onSuccess}
+  />
 </div>

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

@@ -3,8 +3,11 @@ interface Props {
     resourceName: string;
     id: string | number;
     title?: string;
+    density?: 'compact' | 'comfortable';
+    columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
+    onSuccess?: () => void;
     class?: string;
 }
 declare const EditPage: import("svelte").Component<Props, {}, "">;

package/dist/components/FieldRenderer.svelte

@@ -20,19 +20,23 @@
   import { Plus, X } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
+  import { cn } from '../utils.js';
 
   const i18n = useTranslation();
 
-  let { field, value, onchange, disabled, invalid = false, errorId, children } = $props<{
+  let { field, value, onchange, disabled, invalid = false, errorId, density = 'comfortable', children } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
     disabled?: boolean;
     invalid?: boolean;
     errorId?: string;
+    density?: 'compact' | 'comfortable';
     children?: Snippet;
   }>();
 
+  const isCompact = $derived(density === 'compact');
+
   // Typed accessors
   const strVal = $derived((value as string) ?? '');
   const numVal = $derived(value as number | null | undefined);
@@ -89,7 +93,15 @@
   }
 </script>
 
-<div class="space-y-1.5" data-svadmin-field data-svadmin-field-key={field.key}>
+<div
+  class={cn(
+    'space-y-1.5',
+    isCompact && 'space-y-1 [&_[data-slot=input]]:h-8 [&_[data-slot=input]]:px-2.5 [&_[data-slot=input]]:py-1 [&_[data-slot=input]]:text-xs [&_[data-slot=select]]:h-8 [&_[data-slot=select]]:px-2.5 [&_[data-slot=select]]:py-1 [&_[data-slot=select]]:text-xs [&_[data-slot=textarea]]:min-h-16 [&_[data-slot=textarea]]:px-2.5 [&_[data-slot=textarea]]:py-1.5 [&_[data-slot=textarea]]:text-xs [&_[data-slot=button]]:h-8 [&_[data-slot=button]]:text-xs'
+  )}
+  data-svadmin-field
+  data-svadmin-field-key={field.key}
+  data-density={density}
+>
   <Label for={field.key} id="label-{field.key}" data-svadmin-field-label>
     {field.label}
     {#if field.required}
@@ -270,6 +282,7 @@
       <select
         id={field.key}
         name={field.key}
+        data-slot="select"
         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)}

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     errorId?: string;
+    density?: 'compact' | 'comfortable';
     children?: Snippet;
 };
 declare const FieldRenderer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/ListPage.svelte

@@ -15,10 +15,13 @@
     resourceName: string;
     title?: string;
     canCreate?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
     /** Passthrough: custom header actions */
     headerActions?: Snippet;
+    /** Optional status tabs or filter slot above table */
+    statusTabs?: Snippet;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
     /** Passthrough: custom row actions */
@@ -34,8 +37,10 @@
     resourceName,
     title,
     canCreate,
+    density = 'comfortable',
     selectable,
     headerActions,
+    statusTabs,
     cellRenderer,
     rowActions,
     emptyState,
@@ -49,11 +54,11 @@
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
 </script>
 
-<div class="space-y-6 {className}">
-  <PageHeader title={pageTitle}>
+<div class="{density === 'compact' ? 'space-y-4' : 'space-y-6'} {className}">
+  <PageHeader title={pageTitle} {density}>
     {#snippet actions()}
       {#if showCreate}
-        <Button onclick={() => adminContext.navigate(`/${resourceName}/create`)}>
+        <Button size={density === 'compact' ? 'sm' : 'default'} onclick={() => adminContext.navigate(`/${resourceName}/create`)}>
           <Plus class="h-4 w-4" data-icon="inline-start" /> {i18n.t('common.create')}
         </Button>
       {/if}
@@ -63,8 +68,15 @@
     {/snippet}
   </PageHeader>
 
+  {#if statusTabs}
+    <div>
+      {@render statusTabs()}
+    </div>
+  {/if}
+
   <AutoTable
     {resourceName}
+    {density}
     {selectable}
     defaultCellRenderer={cellRenderer}
     {rowActions}

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

@@ -4,10 +4,13 @@ interface Props {
     resourceName: string;
     title?: string;
     canCreate?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
     /** Passthrough: custom header actions */
     headerActions?: Snippet;
+    /** Optional status tabs or filter slot above table */
+    statusTabs?: Snippet;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{
         field: FieldDefinition;

package/dist/components/ModalForm.svelte

@@ -32,7 +32,7 @@
           {mode === 'create' ? `${i18n.t('common.create')}${resource.label}` : `${i18n.t('common.edit')}${resource.label}`}
         </Dialog.DialogTitle>
       </Dialog.DialogHeader>
-      <AutoForm {resourceName} {mode} {id} onSuccess={handleSuccess} />
+      <AutoForm {resourceName} {mode} {id} showHeader={false} onSuccess={handleSuccess} />
     </Dialog.DialogContent>
   </Dialog.Dialog>
 {/if}

package/dist/components/PageHeader.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { ArrowLeft } from '@lucide/svelte';
   import Breadcrumbs from './Breadcrumbs.svelte';
+  import { Button } from './ui/button/index.js';
+  import { cn } from '../utils.js';
 
   interface Props {
     title: string;
     description?: string;
     actions?: Snippet;
+    extra?: Snippet;
+    tags?: Snippet;
+    back?: Snippet;
+    onBack?: () => void;
+    backLabel?: string;
     showBreadcrumbs?: boolean;
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -14,25 +23,63 @@
     title,
     description,
     actions,
+    extra,
+    tags,
+    back,
+    onBack,
+    backLabel = 'Back',
     showBreadcrumbs = true,
+    density = 'comfortable',
     class: className = '',
   }: Props = $props();
+
+  const isCompact = $derived(density === 'compact');
 </script>
 
-<div class="space-y-4 {className}">
+<div class={cn(isCompact ? 'space-y-1.5' : 'space-y-4', className)}>
   {#if showBreadcrumbs}
-    <Breadcrumbs />
+    <Breadcrumbs class={isCompact ? 'mb-1 text-xs' : 'mb-4'} />
   {/if}
-  <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="text-sm text-muted-foreground">{description}</p>
+  <div class={cn('flex flex-col sm:flex-row sm:items-center sm:justify-between', isCompact ? 'gap-1.5' : 'gap-2')}>
+    <div class="flex items-center gap-2.5 min-w-0">
+      {#if back}
+        {@render back()}
+      {:else if onBack}
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          class="shrink-0 text-muted-foreground hover:text-foreground"
+          onclick={onBack}
+          aria-label={backLabel}
+          title={backLabel}
+        >
+          <ArrowLeft class="size-4" />
+        </Button>
       {/if}
+      <div class="min-w-0">
+        <div class="flex flex-wrap items-center gap-2">
+          <h1 class={cn('font-semibold text-foreground truncate', isCompact ? 'text-lg' : 'text-xl')}>
+            {title}
+          </h1>
+          {#if tags}
+            <div class="inline-flex items-center gap-1.5">
+              {@render tags()}
+            </div>
+          {/if}
+        </div>
+        {#if description}
+          <p class={cn('text-muted-foreground', isCompact ? 'text-xs' : 'text-sm')}>{description}</p>
+        {/if}
+      </div>
     </div>
-    {#if actions}
-      <div class="flex items-center gap-2">
-        {@render actions()}
+    {#if actions || extra}
+      <div class={cn('flex items-center shrink-0', isCompact ? 'gap-1.5' : 'gap-2')}>
+        {#if extra}
+          {@render extra()}
+        {/if}
+        {#if actions}
+          {@render actions()}
+        {/if}
       </div>
     {/if}
   </div>

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

@@ -3,7 +3,13 @@ interface Props {
     title: string;
     description?: string;
     actions?: Snippet;
+    extra?: Snippet;
+    tags?: Snippet;
+    back?: Snippet;
+    onBack?: () => void;
+    backLabel?: string;
     showBreadcrumbs?: boolean;
+    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const PageHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/ShowPage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { captureAdminContext, useShow, getResource } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
   import * as Card from './ui/card/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import PageHeader from './PageHeader.svelte';
@@ -13,8 +14,26 @@
 
   const i18n = useTranslation();
 
-  let { resourceName, id, class: className = '' } = $props<{ resourceName: string; id: string | number; class?: string }>();
+  interface Props {
+    resourceName: string;
+    id: string | number;
+    density?: 'compact' | 'comfortable';
+    headerActions?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    id,
+    density = 'comfortable',
+    headerActions,
+    children,
+    class: className = '',
+  }: Props = $props();
+
   const adminContext = captureAdminContext();
+  const isCompact = $derived(density === 'compact');
 
   const resource = $derived(getResource(resourceName));
   const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
@@ -22,8 +41,12 @@
   const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
 </script>
 
-<div class="space-y-6 {className}">
-  <PageHeader title="{resource.label} {i18n.t('common.detail')}">
+<div class="{isCompact ? 'space-y-4' : 'space-y-6'} {className}">
+  <PageHeader
+    title="{resource.label} {i18n.t('common.detail')} #{id}"
+    {density}
+    onBack={() => adminContext.navigate(`/${resourceName}`)}
+  >
     {#snippet actions()}
       <ListButton resource={resourceName} hideText />
       {#if resource.canEdit !== false}
@@ -36,6 +59,9 @@
         <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => adminContext.navigate(`/${resourceName}`)} />
       {/if}
       <RefreshButton resource={resourceName} hideText />
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
     {/snippet}
   </PageHeader>
 
@@ -43,7 +69,7 @@
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-0">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
+          <div class="flex flex-col sm:flex-row {isCompact ? 'px-4 py-2' : 'px-4 sm:px-6 py-3 sm:py-4'} {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <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>
@@ -52,13 +78,13 @@
     </Card.Root>
   {:else if query.data?.data}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
+      <Card.Content class="p-0 divide-y divide-border/20">
         {#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 sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
-            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
-            <div class="sm:w-2/3 text-sm text-foreground">
+          <div class="flex flex-col sm:flex-row {isCompact ? 'px-4 py-2.5 sm:px-5 sm:py-2.5' : 'px-4 sm:px-6 py-3 sm:py-4'} {i % 2 === 1 ? 'bg-muted/10' : ''}">
+            <div class="sm:w-1/3 {isCompact ? 'text-xs' : 'text-xs sm:text-sm'} font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
+            <div class="sm:w-2/3 {isCompact ? 'text-xs sm:text-sm' : 'text-sm'} text-foreground">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}
@@ -73,6 +99,9 @@
         {/each}
       </Card.Content>
     </Card.Root>
+    {#if children}
+      {@render children()}
+    {/if}
   {:else}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-8 text-center">

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

@@ -1,8 +1,12 @@
-type $$ComponentProps = {
+import type { Snippet } from 'svelte';
+interface Props {
     resourceName: string;
     id: string | number;
+    density?: 'compact' | 'comfortable';
+    headerActions?: Snippet;
+    children?: Snippet;
     class?: string;
-};
-declare const ShowPage: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const ShowPage: import("svelte").Component<Props, {}, "">;
 type ShowPage = ReturnType<typeof ShowPage>;
 export default ShowPage;

package/dist/components/buttons/ListButton.svelte

@@ -1,23 +1,37 @@
 <script lang="ts">
-  import { useNavigation } from '@svadmin/core';
+  import { useNavigation, getResource, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { List } from '@lucide/svelte';
 
-  let { resource, hideText = false, class: className = '' } = $props<{
+  const i18n = useTranslation();
+
+  let { resource: resourceName, hideText = false, label, onBeforeNavigate, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
+    label?: string;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
   }>();
 
   const nav = useNavigation();
+  const res = $derived((() => {
+    try { return getResource(resourceName); } catch { return null; }
+  })());
+  const displayLabel = $derived(label ?? res?.label ?? i18n.t('common.list') ?? resourceName);
+
+  function navigateToList() {
+    const navigate = () => nav.list(resourceName);
+    if (onBeforeNavigate) onBeforeNavigate(navigate);
+    else navigate();
+  }
 </script>
 
 <Button
   variant="outline"
   size={hideText ? 'icon' : 'sm'}
   class={className}
-  onclick={() => nav.list(resource)}
+  onclick={navigateToList}
 >
   <List class="h-4 w-4" />
-  {#if !hideText}<span class="ml-1">{resource}</span>{/if}
+  {#if !hideText}<span class="ml-1">{displayLabel}</span>{/if}
 </Button>

package/dist/components/buttons/ListButton.svelte.d.ts

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     resource: string;
     hideText?: boolean;
+    label?: string;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
 };
 declare const ListButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/ShowButton.svelte

@@ -7,11 +7,12 @@
 
   const i18n = useTranslation();
 
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, onBeforeNavigate, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
   }>();
 
@@ -24,6 +25,12 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+
+  function navigateToRecord() {
+    const navigate = () => nav.show(resource, recordItemId);
+    if (onBeforeNavigate) onBeforeNavigate(navigate);
+    else navigate();
+  }
 </script>
 
 {#if !hidden}
@@ -33,7 +40,7 @@
     size={hideText ? 'icon' : 'sm'}
     class={className}
     disabled={!can.allowed}
-    onclick={() => nav.show(resource, recordItemId)}
+    onclick={navigateToRecord}
   >
     <Eye class="h-4 w-4" />
     {#if !hideText}<span class="ml-1">{i18n.t('common.detail')}</span>{/if}

package/dist/components/buttons/ShowButton.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     recordItemId: string | number;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
 };
 declare const ShowButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/content/FilterToolbar.svelte

@@ -1,32 +1,105 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { Search, X } from '@lucide/svelte';
+  import { Search, X, SlidersHorizontal, ChevronDown, ChevronUp } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
   interface Props {
     query?: string;
     placeholder?: string;
     clearLabel?: string;
+    advancedLabel?: string;
+    showSearch?: boolean;
+    density?: 'compact' | 'comfortable';
+    activeFilterCount?: number;
+    advancedOpen?: boolean;
     filters?: Snippet;
     actions?: Snippet;
+    advanced?: Snippet;
     class?: string;
   }
+
   let {
     query = $bindable(''),
     placeholder = 'Search',
     clearLabel = 'Clear search',
+    advancedLabel = 'Filters',
+    showSearch = true,
+    density = 'compact',
+    activeFilterCount = 0,
+    advancedOpen = $bindable(false),
     filters,
     actions,
+    advanced,
     class: className = '',
   }: Props = $props();
+
+  const isCompact = $derived(density === 'compact');
 </script>
 
-<div class={'flex flex-col gap-2 sm:flex-row sm:items-center ' + className}>
-  <div class="relative min-w-0 flex-1">
-    <Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-    <Input bind:value={query} {placeholder} class="pl-9 pr-9" aria-label={placeholder} />
-    {#if query}<Button variant="ghost" size="icon-xs" class="absolute right-1 top-1/2 -translate-y-1/2" aria-label={clearLabel} title={clearLabel} onclick={() => query = ''}><X class="size-3.5" /></Button>{/if}
+<div class={cn('space-y-2', className)}>
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+    {#if showSearch}
+      <div class="relative min-w-0 flex-1">
+        <Search class={cn('pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground', isCompact ? 'size-3.5' : 'size-4')} />
+        <Input
+          bind:value={query}
+          {placeholder}
+          class={cn('pl-9 pr-9', isCompact ? 'h-8 text-xs' : 'h-9 text-sm')}
+          aria-label={placeholder}
+        />
+        {#if query}
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            class="absolute right-1 top-1/2 -translate-y-1/2"
+            aria-label={clearLabel}
+            title={clearLabel}
+            onclick={() => query = ''}
+          >
+            <X class="size-3.5" />
+          </Button>
+        {/if}
+      </div>
+    {/if}
+    {#if filters}
+      <div class="flex flex-wrap items-center gap-2">
+        {@render filters()}
+      </div>
+    {/if}
+    {#if advanced}
+      <Button
+        variant={advancedOpen ? 'secondary' : 'outline'}
+        size={isCompact ? 'sm' : 'default'}
+        class={cn('gap-1.5 shrink-0', isCompact ? 'h-8 text-xs px-2.5' : '')}
+        onclick={() => advancedOpen = !advancedOpen}
+        aria-expanded={advancedOpen}
+      >
+        <SlidersHorizontal class="size-3.5" />
+        <span>{advancedLabel}</span>
+        {#if activeFilterCount > 0}
+          <Badge variant="secondary" class="ml-0.5 h-4 min-w-4 px-1 text-[10px] leading-none font-semibold">
+            {activeFilterCount}
+          </Badge>
+        {/if}
+        {#if advancedOpen}
+          <ChevronUp class="size-3 text-muted-foreground ml-0.5" />
+        {:else}
+          <ChevronDown class="size-3 text-muted-foreground ml-0.5" />
+        {/if}
+      </Button>
+    {/if}
+    {#if actions}
+      <div class="flex shrink-0 flex-wrap items-center gap-2">
+        {@render actions()}
+      </div>
+    {/if}
   </div>
-  {#if filters}<div class="flex flex-wrap items-center gap-2">{@render filters()}</div>{/if}
-  {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+  {#if advanced && advancedOpen}
+    <div class="rounded-lg border border-border/60 bg-muted/20 p-3">
+      {@render advanced()}
+    </div>
+  {/if}
 </div>

package/dist/components/content/FilterToolbar.svelte.d.ts

@@ -3,10 +3,16 @@ interface Props {
     query?: string;
     placeholder?: string;
     clearLabel?: string;
+    advancedLabel?: string;
+    showSearch?: boolean;
+    density?: 'compact' | 'comfortable';
+    activeFilterCount?: number;
+    advancedOpen?: boolean;
     filters?: Snippet;
     actions?: Snippet;
+    advanced?: Snippet;
     class?: string;
 }
-declare const FilterToolbar: import("svelte").Component<Props, {}, "query">;
+declare const FilterToolbar: import("svelte").Component<Props, {}, "query" | "advancedOpen">;
 type FilterToolbar = ReturnType<typeof FilterToolbar>;
 export default FilterToolbar;

package/dist/components/content/StatusTabs.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  export interface StatusTabItem {
+    key: string;
+    label: string;
+    count?: number | string;
+    tone?: 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'muted';
+    disabled?: boolean;
+  }
+
+  interface Props {
+    items: StatusTabItem[];
+    value?: string;
+    density?: 'compact' | 'comfortable';
+    variant?: 'pills' | 'underline' | 'segmented';
+    onchange?: (key: string) => void;
+    class?: string;
+  }
+
+  let {
+    items = [],
+    value = $bindable(items[0]?.key ?? ''),
+    density = 'compact',
+    variant = 'pills',
+    onchange,
+    class: className = '',
+  }: Props = $props();
+
+  function selectTab(key: string, disabled?: boolean) {
+    if (disabled || key === value) return;
+    value = key;
+    onchange?.(key);
+  }
+
+  type TabKeyboardEvent = KeyboardEvent & { currentTarget: EventTarget & HTMLButtonElement };
+
+  function handleKeydown(event: TabKeyboardEvent) {
+    const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+    if (!keys.includes(event.key)) return;
+
+    const tabList = event.currentTarget.closest('[role="tablist"]');
+    if (!tabList) return;
+
+    const tabs = Array.from(
+      tabList.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)')
+    );
+    const currentIndex = tabs.indexOf(event.currentTarget);
+    if (currentIndex === -1 || tabs.length === 0) return;
+
+    const nextIndex = event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? tabs.length - 1
+        : event.key === 'ArrowRight' || event.key === 'ArrowDown'
+          ? (currentIndex + 1) % tabs.length
+          : (currentIndex - 1 + tabs.length) % tabs.length;
+
+    event.preventDefault();
+    tabs[nextIndex]?.focus();
+    tabs[nextIndex]?.click();
+  }
+
+  const isCompact = $derived(density === 'compact');
+
+  const toneClasses: Record<string, { activeBadge: string; inactiveBadge: string }> = {
+    default: {
+      activeBadge: 'bg-primary/20 text-primary',
+      inactiveBadge: 'bg-muted text-muted-foreground',
+    },
+    success: {
+      activeBadge: 'bg-success/25 text-success',
+      inactiveBadge: 'bg-success/10 text-success',
+    },
+    warning: {
+      activeBadge: 'bg-warning/25 text-warning-foreground',
+      inactiveBadge: 'bg-warning/10 text-warning-foreground',
+    },
+    destructive: {
+      activeBadge: 'bg-destructive/25 text-destructive',
+      inactiveBadge: 'bg-destructive/10 text-destructive',
+    },
+    info: {
+      activeBadge: 'bg-info/25 text-info',
+      inactiveBadge: 'bg-info/10 text-info',
+    },
+    muted: {
+      activeBadge: 'bg-muted text-foreground',
+      inactiveBadge: 'bg-muted/50 text-muted-foreground',
+    },
+  };
+</script>
+
+<div
+  role="tablist"
+  aria-orientation="horizontal"
+  data-svadmin-status-tabs
+  data-density={density}
+  data-variant={variant}
+  class={cn(
+    'flex items-center gap-1 overflow-x-auto',
+    variant === 'segmented' && 'rounded-lg bg-muted p-1',
+    variant === 'underline' && 'border-b border-border gap-2',
+    className
+  )}
+>
+  {#each items as item (item.key)}
+    {@const active = value === item.key}
+    {@const tone = item.tone ?? 'default'}
+    {@const badgeTone = toneClasses[tone] ?? toneClasses.default}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      tabindex={active ? 0 : -1}
+      disabled={item.disabled}
+      onclick={() => selectTab(item.key, item.disabled)}
+      onkeydown={handleKeydown}
+      class={cn(
+        'inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
+        isCompact ? 'text-xs px-2.5 py-1' : 'text-sm px-3 py-1.5',
+        variant === 'pills' && [
+          'rounded-md border',
+          active
+            ? 'border-border bg-background text-foreground shadow-xs font-semibold'
+            : 'border-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+        ],
+        variant === 'segmented' && [
+          'rounded-md',
+          active
+            ? 'bg-background text-foreground shadow-xs font-semibold'
+            : 'text-muted-foreground hover:text-foreground',
+        ],
+        variant === 'underline' && [
+          '-mb-px border-b-2 rounded-none px-3 pb-2 pt-1',
+          active
+            ? 'border-primary text-primary font-semibold'
+            : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30',
+        ]
+      )}
+    >
+      <span>{item.label}</span>
+      {#if item.count !== undefined}
+        <span
+          class={cn(
+            'inline-flex items-center justify-center rounded-full font-semibold tabular-nums leading-none',
+            isCompact ? 'min-w-4 px-1 py-0.5 text-[10px]' : 'min-w-5 px-1.5 py-0.5 text-xs',
+            active ? badgeTone.activeBadge : badgeTone.inactiveBadge
+          )}
+        >
+          {item.count}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</div>

package/dist/components/content/StatusTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface StatusTabItem {
+    key: string;
+    label: string;
+    count?: number | string;
+    tone?: 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'muted';
+    disabled?: boolean;
+}
+interface Props {
+    items: StatusTabItem[];
+    value?: string;
+    density?: 'compact' | 'comfortable';
+    variant?: 'pills' | 'underline' | 'segmented';
+    onchange?: (key: string) => void;
+    class?: string;
+}
+declare const StatusTabs: import("svelte").Component<Props, {}, "value">;
+type StatusTabs = ReturnType<typeof StatusTabs>;
+export default StatusTabs;

package/dist/components/content/index.d.ts

@@ -12,6 +12,8 @@ export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as StatusTabs } from './StatusTabs.svelte';
+export type { StatusTabItem } from './StatusTabs.svelte';
 export { default as FilterToolbar } from './FilterToolbar.svelte';
 export { default as DataState } from './DataState.svelte';
 export type { DataStateKind } from './DataState.svelte';

package/dist/components/content/index.js

@@ -12,6 +12,7 @@ export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';
 export { default as DescriptionList } from './DescriptionList.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as StatusTabs } from './StatusTabs.svelte';
 export { default as FilterToolbar } from './FilterToolbar.svelte';
 export { default as DataState } from './DataState.svelte';
 export { default as ProjectCard } from './ProjectCard.svelte';

package/dist/index.d.ts

@@ -172,6 +172,8 @@ export { default as DescriptionList } from './components/content/DescriptionList
 export type { DescriptionItem } from './components/content/DescriptionList.svelte';
 export { default as StatusBadge } from './components/content/StatusBadge.svelte';
 export type { Status } from './components/content/StatusBadge.svelte';
+export { default as StatusTabs } from './components/content/StatusTabs.svelte';
+export type { StatusTabItem } from './components/content/StatusTabs.svelte';
 export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
 export { default as DataState } from './components/content/DataState.svelte';
 export type { DataStateKind } from './components/content/DataState.svelte';

package/dist/index.js

@@ -183,6 +183,7 @@ export { default as SettingsFieldRow } from './components/content/SettingsFieldR
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';
 export { default as DescriptionList } from './components/content/DescriptionList.svelte';
 export { default as StatusBadge } from './components/content/StatusBadge.svelte';
+export { default as StatusTabs } from './components/content/StatusTabs.svelte';
 export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
 export { default as DataState } from './components/content/DataState.svelte';
 export { default as ProjectCard } from './components/content/ProjectCard.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.49.2",
+  "version": "0.50.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [