@svadmin/ui 0.85.0 → 0.86.0

package/dist/component-registry.js

@@ -12,6 +12,36 @@ function variant(recipe, name) {
     };
 }
 const registryEntries = [
+    {
+        id: "page-pattern",
+        component: "@svadmin/ui/components/PagePattern.svelte",
+        recipe: "contentPageRecipe",
+        props: {
+            kind: { kind: "enum", values: ["list", "form", "detail", "workspace", "dashboard"], required: true },
+            title: { kind: "string", required: true },
+            description: { kind: "string" },
+            eyebrow: { kind: "string" },
+            pageId: { kind: "string" },
+            width: variant("contentPageRecipe", "width"),
+            density: { kind: "enum", values: ["comfortable", "compact"], default: "comfortable", description: "Deprecated compatibility prop; use the shared baseline." },
+            state: { kind: "enum", values: ["ready", "loading", "empty", "error", "forbidden"], default: "ready" },
+            stateTitle: { kind: "string" },
+            stateDescription: { kind: "string" },
+            retry: { kind: "callback", description: "Use an error-state retry callback." },
+            class: { kind: "string" },
+        },
+        slots: {
+            children: { kind: "snippet", required: true },
+            actions: { kind: "snippet" },
+            toolbar: { kind: "snippet" },
+            metrics: { kind: "snippet" },
+            secondary: { kind: "snippet" },
+            footer: { kind: "snippet" },
+            stateAction: { kind: "snippet" },
+        },
+        tokens: semanticTokens,
+        states: ["ready", "loading", "empty", "error", "forbidden"],
+    },
     {
         id: "content-page-shell",
         component: "@svadmin/ui/components/content/ContentPageShell.svelte",
@@ -22,7 +52,7 @@ const registryEntries = [
             description: { kind: "string" },
             pageId: { kind: "string" },
             width: variant("contentPageRecipe", "width"),
-            density: variant("contentPageRecipe", "density"),
+            density: { kind: "enum", values: ["comfortable", "compact"], default: "comfortable", description: "Deprecated compatibility prop; use the shared baseline." },
             class: { kind: "string" },
         },
         slots: { children: { kind: "snippet", required: true }, actions: { kind: "snippet" } },
@@ -38,7 +68,6 @@ const registryEntries = [
             eyebrow: { kind: "string" },
             description: { kind: "string" },
             breadcrumbs: { kind: "string[]" },
-            density: variant("contentHeaderRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { actions: { kind: "snippet" } },
@@ -208,7 +237,7 @@ export function createComponentRegistryManifest() {
     return {
         version: "svadmin/component-registry-v1",
         purpose: "authoring-only",
-        coverage: "twelve-ui-components-and-fourteen-recipes",
+        coverage: "page-pattern-and-semantic-ui-components",
         runtimeCatalog: "@svadmin/surface: createSurfaceCatalogManifest",
         designContract: surfaceDesignContract,
         recipes: Object.fromEntries(Object.keys(allRecipes)

package/dist/components/AppShellPage.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Menu, X } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { cn } from '../utils.js';
+
+  type Width = 'narrow' | 'default' | 'wide' | 'full';
+
+  interface Props {
+    /** Page content; typically a `PagePattern` or `ContentPageShell`. */
+    children: Snippet;
+    /** Navigation region. The host owns links and routing; the shell owns layout. */
+    sidebar?: Snippet;
+    /** Leading topbar region, rendered before the mobile navigation trigger. */
+    topbarStart?: Snippet;
+    /** Topbar region between the leading and trailing slots (search, breadcrumbs…). */
+    topbar?: Snippet;
+    /** Trailing topbar actions (account menu, notifications…). */
+    topbarEnd?: Snippet;
+    /** Optional secondary column for detail/workspace pages. */
+    aside?: Snippet;
+    footer?: Snippet;
+    width?: Width;
+    /** Collapses the navigation rail to icons. Host-controlled, presentation only. */
+    collapsed?: boolean;
+    /** Open state of the below-breakpoint navigation drawer. */
+    mobileOpen?: boolean;
+    /** Accessible name for the primary landmark. */
+    label?: string;
+    skipLabel?: string;
+    contentId?: string;
+    class?: string;
+  }
+
+  let {
+    children,
+    sidebar,
+    topbarStart,
+    topbar,
+    topbarEnd,
+    aside,
+    footer,
+    width = 'default',
+    collapsed = false,
+    mobileOpen = $bindable(false),
+    label,
+    skipLabel,
+    contentId,
+    class: className = '',
+  }: Props = $props();
+
+  const generatedId = $props.id();
+  const i18n = useTranslation();
+  const mainId = $derived(contentId ?? generatedId);
+  const sidebarId = $derived(`${generatedId}-sidebar`);
+  // 未提供可读名称时退回通用文案，避免出现没有可访问名的 <main>。
+  const resolvedLabel = $derived(label ?? i18n.t('common.mainNavigation'));
+  const resolvedSkipLabel = $derived(skipLabel ?? i18n.t('common.skipToMainContent'));
+
+  function closeMobileNav() {
+    mobileOpen = false;
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && mobileOpen) closeMobileNav();
+  }
+
+  // 宿主常用 hash 路由，不能让跳转链接把 #main 当成一次路由跳转。
+  function focusMain(event: MouseEvent) {
+    const target = document.getElementById(mainId);
+    if (!target) return;
+    event.preventDefault();
+    target.focus();
+    target.scrollIntoView?.({ block: 'start' });
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<a class="svadmin-app-shell__skip" href="#{mainId}" onclick={focusMain}>{resolvedSkipLabel}</a>
+
+<div
+  class={cn('svadmin-app-shell', className)}
+  data-sidebar={sidebar ? 'true' : undefined}
+  data-aside={aside ? 'true' : undefined}
+  data-collapsed={collapsed ? 'true' : undefined}
+  data-mobile-open={mobileOpen ? 'true' : undefined}
+  data-width={width}
+>
+  <header class="svadmin-app-shell__topbar" data-slot="app-shell-topbar">
+    {#if sidebar}
+      <button
+        type="button"
+        class="svadmin-app-shell__mobile-toggle"
+        data-slot="app-shell-mobile-toggle"
+        aria-controls={sidebarId}
+        aria-expanded={mobileOpen ? 'true' : 'false'}
+        aria-label={mobileOpen ? i18n.t('common.close') : i18n.t('common.menu')}
+        onclick={() => (mobileOpen = !mobileOpen)}
+      >
+        {#if mobileOpen}
+          <X aria-hidden="true" size={18} />
+        {:else}
+          <Menu aria-hidden="true" size={18} />
+        {/if}
+      </button>
+    {/if}
+    {#if topbarStart}
+      <div class="svadmin-app-shell__topbar-start">{@render topbarStart()}</div>
+    {/if}
+    <div class="svadmin-app-shell__topbar-main">{@render topbar?.()}</div>
+    {#if topbarEnd}
+      <div class="svadmin-app-shell__topbar-end">{@render topbarEnd()}</div>
+    {/if}
+  </header>
+
+  {#if sidebar}
+    <nav id={sidebarId} class="svadmin-app-shell__sidebar" aria-label={resolvedLabel} data-slot="app-shell-sidebar">
+      <div class="svadmin-app-shell__sidebar-inner">{@render sidebar()}</div>
+    </nav>
+    <button
+      type="button"
+      class="svadmin-app-shell__scrim"
+      tabindex="-1"
+      aria-hidden="true"
+      data-slot="app-shell-scrim"
+      onclick={closeMobileNav}
+    ></button>
+  {/if}
+
+  <main id={mainId} class="svadmin-app-shell__main" tabindex="-1">
+    <div class="svadmin-app-shell__body" data-slot="app-shell-body">
+      <div class="svadmin-app-shell__content" data-slot="app-shell-content">
+        {@render children()}
+      </div>
+      {#if aside}
+        <aside class="svadmin-app-shell__aside" data-slot="app-shell-aside">{@render aside()}</aside>
+      {/if}
+    </div>
+  </main>
+
+  {#if footer}
+    <footer class="svadmin-app-shell__footer" data-slot="app-shell-footer">{@render footer()}</footer>
+  {/if}
+</div>
+
+<style>
+  /* Layout-only overrides. Sizes, colors and radii stay in app-shell.css so a
+   * host override of the token layer reaches this component too. */
+  .svadmin-app-shell__mobile-toggle {
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    height: var(--svadmin-control-h);
+    width: var(--svadmin-control-h);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--background);
+    color: var(--foreground);
+    cursor: pointer;
+  }
+  .svadmin-app-shell__mobile-toggle:hover {
+    background: var(--muted);
+  }
+  .svadmin-app-shell__mobile-toggle:focus-visible {
+    outline: var(--svadmin-focus-width) solid var(--ring);
+    outline-offset: var(--svadmin-focus-offset);
+  }
+  .svadmin-app-shell__main:focus-visible {
+    outline: none;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+type Width = 'narrow' | 'default' | 'wide' | 'full';
+interface Props {
+    /** Page content; typically a `PagePattern` or `ContentPageShell`. */
+    children: Snippet;
+    /** Navigation region. The host owns links and routing; the shell owns layout. */
+    sidebar?: Snippet;
+    /** Leading topbar region, rendered before the mobile navigation trigger. */
+    topbarStart?: Snippet;
+    /** Topbar region between the leading and trailing slots (search, breadcrumbs…). */
+    topbar?: Snippet;
+    /** Trailing topbar actions (account menu, notifications…). */
+    topbarEnd?: Snippet;
+    /** Optional secondary column for detail/workspace pages. */
+    aside?: Snippet;
+    footer?: Snippet;
+    width?: Width;
+    /** Collapses the navigation rail to icons. Host-controlled, presentation only. */
+    collapsed?: boolean;
+    /** Open state of the below-breakpoint navigation drawer. */
+    mobileOpen?: boolean;
+    /** Accessible name for the primary landmark. */
+    label?: string;
+    skipLabel?: string;
+    contentId?: string;
+    class?: string;
+}
+declare const AppShellPage: import("svelte").Component<Props, {}, "mobileOpen">;
+type AppShellPage = ReturnType<typeof AppShellPage>;
+export default AppShellPage;

package/dist/components/AutoForm.svelte

@@ -29,7 +29,6 @@
     rendering?: ResourceRendering | undefined;
     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 }]>;
@@ -47,7 +46,6 @@
     rendering,
     id,
     mode = 'create',
-    density = 'comfortable',
     columns = 1,
     showHeader = true,
     fieldRenderer,
@@ -64,7 +62,6 @@
   const binding = useResourceContract(() => resourceName);
   const activeRendering = $derived(bindResourceRendering(rendering, binding.resource));
   const isReadonly = $derived(mode === 'show');
-  const isCompact = $derived(density === 'compact');
   const instanceId = $props.id();
 
   // ─── Resource metadata ────────────────────────────────────────────
@@ -315,7 +312,7 @@
   });
 </script>
 
-<div class={isCompact ? 'svadmin-u-3e7ce58d64fa' : 'svadmin-u-b3542e058833'} data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'form' : undefined}>
+<div class="svadmin-u-b3542e058833" data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'form' : undefined}>
   {#if showHeader}
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-0c3bc98565dd">
       <TooltipButton
@@ -378,11 +375,11 @@
         {#each groups as group, _i (_i)}
           <Card.Root class="svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
             {#if group.name}
-              <Card.Header class={isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12' : ''}>
+              <Card.Header>
                 <Card.Title class="svadmin-u-42536e69e639">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class={isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-9fcd8a13827e svadmin-u-9335c39f6eff' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-9fcd8a13827e svadmin-u-050494726fba svadmin-u-9335c39f6eff'}>
+            <Card.Content class="svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-9fcd8a13827e svadmin-u-050494726fba svadmin-u-9335c39f6eff">
               <div class={gridClass}>
                 {#each group.fields as field (field.key)}
                   <div data-svadmin-field-key={field.key} class={cn(columns > 1 && isFullWidthField(field) && 'svadmin-u-2c955d1b45df', !!form.errors[field.key] && 'svadmin-u-ee1a5af3aa10')}>
@@ -393,7 +390,6 @@
                         {field}
                         value={renderedDraft.values[field.key]}
                         onchange={fieldChange(field.key)}
-                        {density}
                         invalid={!!form.errors[field.key]}
                         {...definedOptions({ "errorId": form.errors[field.key] ? fieldErrorId(field.key) : undefined })}
                         disabled={isReadonly}
@@ -410,8 +406,8 @@
         {/each}
       {:else}
         <Card.Root class="svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
-          <Card.Content class={isCompact ? 'svadmin-u-8e63407b5ceb' : 'svadmin-u-f0faeb26d656 svadmin-u-52be28846b5f svadmin-u-9fcd8a13827e svadmin-u-7a9aabfcd059 svadmin-u-0a58453f3755 svadmin-u-050494726fba'}>
-              <div class={gridClass} data-svadmin-form-grid data-columns={columns} data-density={density}>
+          <Card.Content class="svadmin-u-f0faeb26d656 svadmin-u-52be28846b5f svadmin-u-9fcd8a13827e svadmin-u-7a9aabfcd059 svadmin-u-0a58453f3755 svadmin-u-050494726fba">
+              <div class={gridClass} data-svadmin-form-grid data-columns={columns}>
               {#each formFields as field (field.key)}
                 <div data-svadmin-field-key={field.key} class={cn(columns > 1 && isFullWidthField(field) && 'svadmin-u-2c955d1b45df', !!form.errors[field.key] && 'svadmin-u-ee1a5af3aa10')}>
                   {#if fieldRenderer}
@@ -421,7 +417,6 @@
                     {field}
                     value={renderedDraft.values[field.key]}
                     onchange={fieldChange(field.key)}
-                    {density}
                     invalid={!!form.errors[field.key]}
                       {...definedOptions({ "errorId": form.errors[field.key] ? fieldErrorId(field.key) : undefined })}
                       disabled={isReadonly}
@@ -441,7 +436,7 @@
         {#if formActions && !isReadonly}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else if !isReadonly}
-          <Button type="submit" size={isCompact ? 'sm' : 'default'} disabled={form.submitting}>
+          <Button type="submit" size="default" disabled={form.submitting}>
             {#if form.submitting}
               <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" data-icon="inline-start" aria-hidden="true" />
             {:else}
@@ -452,7 +447,7 @@
           <Button
             type="button"
             variant="outline"
-            size={isCompact ? 'sm' : 'default'}
+            size="default"
             onclick={back}
           >
             {i18n.t('common.cancel')}

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

@@ -6,7 +6,6 @@ interface Props {
     rendering?: ResourceRendering | undefined;
     id?: string | number;
     mode?: 'create' | 'edit' | 'clone' | 'show';
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     showHeader?: boolean;
     fieldRenderer?: Snippet<[{

package/dist/components/AutoTable.svelte

@@ -112,10 +112,12 @@
     selectable?: boolean;
     /** 仅在业务回调支持按查询执行服务端命令时启用。 */
     allowSelectAllMatching?: boolean;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
     title?: string;
     showFilterTags?: boolean;
+    /** @deprecated Retained for compatibility; use the shared appearance baseline. */
     showDensitySwitcher?: boolean;
     showRefresh?: boolean;
     /** Custom header actions (right side) */

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

@@ -15,10 +15,12 @@ interface Props {
     selectable?: boolean;
     /** 仅在业务回调支持按查询执行服务端命令时启用。 */
     allowSelectAllMatching?: boolean;
+    /** @deprecated Retained for compatibility; comfortable is the shared default. */
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
     title?: string;
     showFilterTags?: boolean;
+    /** @deprecated Retained for compatibility; use the shared appearance baseline. */
     showDensitySwitcher?: boolean;
     showRefresh?: boolean;
     /** Custom header actions (right side) */

package/dist/components/ConfigurationPage.svelte

@@ -11,7 +11,6 @@
     footer?: Snippet;
     children: Snippet;
     width?: 'narrow' | 'default' | 'wide';
-    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,7 +22,6 @@
     footer,
     children,
     width = 'default',
-    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 </script>
@@ -32,7 +30,6 @@
   {title}
   {...definedOptions({ description, eyebrow, actions })}
   {width}
-  {density}
   class={className}
 >
   <div class="configuration-page__content">

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

@@ -7,7 +7,6 @@ interface Props {
     footer?: Snippet;
     children: Snippet;
     width?: 'narrow' | 'default' | 'wide';
-    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const ConfigurationPage: import("svelte").Component<Props, {}, "">;

package/dist/components/CreatePage.svelte

@@ -15,7 +15,6 @@
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
     onSuccess?: () => void;
@@ -26,7 +25,6 @@
     resourceName,
     rendering,
     title,
-    density = 'comfortable',
     columns = 1,
     headerActions,
     onSuccess,
@@ -39,10 +37,9 @@
   const pageTitle = $derived(title ?? `${i18n.t('common.create')}${resource.label}`);
 </script>
 
-<div class="{density === 'compact' ? 'svadmin-u-3e7ce58d64fa' : 'svadmin-u-b3542e058833'} {className}">
+<div class="svadmin-u-b3542e058833 {className}">
   <PageHeader
     title={pageTitle}
-    {density}
     onBack={() => navigateGuard(() => adminContext.navigate(`/${resourceName}`))}
   >
     {#snippet actions()}
@@ -57,7 +54,6 @@
     {rendering}
     {resourceName}
     mode="create"
-    {density}
     {columns}
     showHeader={false}
     onNavigationGuardReady={(guard) => navigateGuard = guard}

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

@@ -4,7 +4,6 @@ interface Props {
     resourceName: string;
     rendering?: ResourceRendering | undefined;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     headerActions?: Snippet;
     onSuccess?: () => void;

package/dist/components/EditPage.svelte

@@ -20,7 +20,6 @@
     rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;
@@ -33,7 +32,6 @@
     rendering,
     id,
     title,
-    density = 'comfortable',
     columns = 1,
     canDelete,
     headerActions,
@@ -48,10 +46,9 @@
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
 </script>
 
-<div class="{density === 'compact' ? 'svadmin-u-3e7ce58d64fa' : 'svadmin-u-b3542e058833'} {className}">
+<div class="svadmin-u-b3542e058833 {className}">
   <PageHeader
     title={pageTitle}
-    {density}
     onBack={() => navigateGuard(() => navigation.list(resourceName))}
   >
     {#snippet actions()}
@@ -72,7 +69,6 @@
     {resourceName}
     mode="edit"
     {id}
-    {density}
     {columns}
     showHeader={false}
     onNavigationGuardReady={(guard) => navigateGuard = guard}

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

@@ -5,7 +5,6 @@ interface Props {
     rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
-    density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
     canDelete?: boolean;
     headerActions?: Snippet;

package/dist/components/FieldRenderer.svelte

@@ -35,25 +35,21 @@
   import { Plus, X } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
-  import { cn } from '../utils.js';
   import { numericInputValue } from '../numeric-input.js';
 
   type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const i18n = useTranslation();
 
-  let { field, value, onchange, disabled, invalid = false, errorId, density = 'comfortable', children } = $props<{
+  let { field, value, onchange, disabled, invalid = false, errorId, 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(numericInputValue(value));
@@ -111,13 +107,9 @@
 </script>
 
 <div
-  class={cn(
-    'svadmin-u-5a2508227c6a',
-    isCompact && 'svadmin-u-da7c36cd8867 svadmin-u-01e043b9ca05 svadmin-u-5e375759a547 svadmin-u-0144d38a6921 svadmin-u-910198b850a8 svadmin-u-220cd47c030c svadmin-u-84a68a4bfa38 svadmin-u-2b201b2c12c7 svadmin-u-334c9da7fe2b svadmin-u-f7194f86de09 svadmin-u-a281d7e98ab9 svadmin-u-6cddb40447d9 svadmin-u-150c3670da1d svadmin-u-f01a063e8052 svadmin-u-3e2aa4ec6454'
-  )}
+  class="svadmin-u-5a2508227c6a"
   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}

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

@@ -8,7 +8,6 @@ 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

@@ -16,7 +16,6 @@
     rendering?: ResourceRendering | undefined;
     title?: string;
     canCreate?: boolean;
-    density?: 'compact' | 'comfortable';
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
     allowSelectAllMatching?: boolean;
@@ -44,7 +43,6 @@
     rendering,
     title,
     canCreate,
-    density = 'comfortable',
     selectable,
     allowSelectAllMatching,
     headerActions,
@@ -62,8 +60,8 @@
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
 </script>
 
-<div class="{density === 'compact' ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
-  <PageHeader title={pageTitle} {density}>
+<div class="svadmin-u-3e7ce58d64fa {className}">
+  <PageHeader title={pageTitle}>
     {#snippet actions()}
       {#if showCreate}
         <CreateButton resource={resourceName} />
@@ -90,7 +88,6 @@
     {rendering}
     {resourceName}
     showHeader={false}
-    {density}
     {...definedOptions({ "selectable": selectable })}
     {...definedOptions({ allowSelectAllMatching })}
     {...definedOptions({ batchActions })}

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

@@ -7,7 +7,6 @@ interface Props {
     rendering?: ResourceRendering | undefined;
     title?: string;
     canCreate?: boolean;
-    density?: 'compact' | 'comfortable';
     /** Passthrough: enable row selection checkboxes */
     selectable?: boolean;
     allowSelectAllMatching?: boolean;

package/dist/components/PageHeader.svelte

@@ -15,7 +15,6 @@
     onBack?: () => void;
     backLabel?: string;
     showBreadcrumbs?: boolean;
-    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -29,13 +28,12 @@
     onBack,
     backLabel = 'Back',
     showBreadcrumbs = true,
-    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 
 </script>
 
-<div class={cn('svadmin-page-header', className)} data-density={density}>
+<div class={cn('svadmin-page-header', className)}>
   {#if showBreadcrumbs}
     <Breadcrumbs class="svadmin-page-header__breadcrumbs" />
   {/if}

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

@@ -9,7 +9,6 @@ interface Props {
     onBack?: () => void;
     backLabel?: string;
     showBreadcrumbs?: boolean;
-    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const PageHeader: import("svelte").Component<Props, {}, "">;