@svadmin/ui 0.49.3 → 0.51.0

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

@@ -4,6 +4,11 @@ interface Props {
     resourceName: string;
     selectable?: boolean;
     density?: 'compact' | 'comfortable';
+    showHeader?: boolean;
+    title?: string;
+    showFilterTags?: boolean;
+    showDensitySwitcher?: boolean;
+    showRefresh?: boolean;
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */

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,17 @@
     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 slot above filter/table */
+    statusTabs?: Snippet;
+    /** Optional filter toolbar slot between status tabs and table */
+    filterToolbar?: Snippet;
+    /** Passthrough: custom batch actions to render when rows are selected */
+    batchActions?: Snippet<[{ selectedIds: string[] }]>;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
     /** Passthrough: custom row actions */
@@ -34,8 +41,12 @@
     resourceName,
     title,
     canCreate,
+    density = 'comfortable',
     selectable,
     headerActions,
+    statusTabs,
+    filterToolbar,
+    batchActions,
     cellRenderer,
     rowActions,
     emptyState,
@@ -49,11 +60,11 @@
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
 </script>
 
-<div class="space-y-6 {className}">
-  <PageHeader title={pageTitle}>
+<div class="{density === 'compact' ? 'space-y-3' : 'space-y-4'} {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,9 +74,24 @@
     {/snippet}
   </PageHeader>
 
+  {#if statusTabs}
+    <div>
+      {@render statusTabs()}
+    </div>
+  {/if}
+
+  {#if filterToolbar}
+    <div>
+      {@render filterToolbar()}
+    </div>
+  {/if}
+
   <AutoTable
     {resourceName}
+    showHeader={false}
+    {density}
     {selectable}
+    {batchActions}
     defaultCellRenderer={cellRenderer}
     {rowActions}
     {emptyState}

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

@@ -4,10 +4,19 @@ 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 slot above filter/table */
+    statusTabs?: Snippet;
+    /** Optional filter toolbar slot between status tabs and table */
+    filterToolbar?: Snippet;
+    /** Passthrough: custom batch actions to render when rows are selected */
+    batchActions?: Snippet<[{
+        selectedIds: string[];
+    }]>;
     /** 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,10 +1,11 @@
 <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';
-  import { getDisplayComponent } from './fieldComponentMap';
+  import { getDisplayComponent } from './fieldComponentMap.js';
   import ListButton from './buttons/ListButton.svelte';
   import EditButton from './buttons/EditButton.svelte';
   import DeleteButton from './buttons/DeleteButton.svelte';
@@ -13,17 +14,54 @@
 
   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';
+    layout?: 'list' | 'grid';
+    columns?: 1 | 2 | 3 | 4;
+    bordered?: boolean;
+    headerActions?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    id,
+    density = 'comfortable',
+    layout = 'list',
+    columns = 2,
+    bordered = false,
+    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));
 
   const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
+
+  const gridColumnClass = $derived.by(() => {
+    switch (columns) {
+      case 4: return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
+      case 3: return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+      case 2: return 'grid-cols-1 sm:grid-cols-2';
+      default: return 'grid-cols-1';
+    }
+  });
 </script>
 
-<div class="space-y-6 {className}">
-  <PageHeader title="{resource.label} {i18n.t('common.detail')}">
+<div class="{isCompact ? 'space-y-3' : 'space-y-4'} {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 +74,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 +84,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>
@@ -51,28 +92,58 @@
       </Card.Content>
     </Card.Root>
   {:else if query.data?.data}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
-        {#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">
-              {#if DisplayComponent && value != null}
-                <DisplayComponent
-                  {value}
-                  options={field.options}
-                  resourceName={field.resource}
-                />
-              {:else}
-                {value != null ? String(value) : '—'}
-              {/if}
+    {#if layout === 'grid'}
+      <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+        <Card.Content class="p-0">
+          <dl class="grid divide-y divide-border/20 sm:divide-y-0 {gridColumnClass}">
+            {#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 {bordered ? 'border-b border-r border-border/30 last:border-b-0 p-3 sm:p-4' : 'p-3 sm:p-4 border-b border-border/10'}">
+                <dt class="text-xs font-medium text-muted-foreground mb-1">{field.label}</dt>
+                <dd class="text-xs sm:text-sm text-foreground font-medium break-words">
+                  {#if DisplayComponent && value != null}
+                    <DisplayComponent
+                      {value}
+                      options={field.options}
+                      resourceName={field.resource}
+                    />
+                  {:else}
+                    {value != null ? String(value) : '—'}
+                  {/if}
+                </dd>
+              </div>
+            {/each}
+          </dl>
+        </Card.Content>
+      </Card.Root>
+    {:else}
+      <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+        <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 {isCompact ? 'px-4 py-2 sm:px-5 sm:py-2' : 'px-4 sm:px-6 py-3 sm:py-3.5'} {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}
+                    options={field.options}
+                    resourceName={field.resource}
+                  />
+                {:else}
+                  {value != null ? String(value) : '—'}
+                {/if}
+              </div>
             </div>
-          </div>
-        {/each}
-      </Card.Content>
-    </Card.Root>
+          {/each}
+        </Card.Content>
+      </Card.Root>
+    {/if}
+    {#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,15 @@
-type $$ComponentProps = {
+import type { Snippet } from 'svelte';
+interface Props {
     resourceName: string;
     id: string | number;
+    density?: 'compact' | 'comfortable';
+    layout?: 'list' | 'grid';
+    columns?: 1 | 2 | 3 | 4;
+    bordered?: boolean;
+    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;