@svadmin/ui 0.76.0 → 0.77.0

package/dist/component-registry.js

@@ -22,6 +22,7 @@ const registryEntries = [
             description: { kind: "string" },
             pageId: { kind: "string" },
             width: variant("contentPageRecipe", "width"),
+            density: variant("contentPageRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { children: { kind: "snippet", required: true }, actions: { kind: "snippet" } },
@@ -37,6 +38,7 @@ const registryEntries = [
             eyebrow: { kind: "string" },
             description: { kind: "string" },
             breadcrumbs: { kind: "string[]" },
+            density: variant("contentHeaderRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { actions: { kind: "snippet" } },

package/dist/components/Layout.svelte

@@ -27,6 +27,7 @@
   import { Menu } from '@lucide/svelte';
   import { getComponentRegistry } from '../component-registry.svelte.js';
   import { Button } from './ui/button/index.js';
+  import { cn } from '../utils.js';
 
   const i18n = useTranslation();
 
@@ -34,7 +35,25 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto', aiAssistant }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto'; aiAssistant?: Snippet<[LayoutAIAssistantProps]> } = $props();
+  interface Props {
+    children: Snippet;
+    title?: string;
+    menu?: MenuItem[];
+    siteUrl?: string;
+    routeMode?: 'hash' | 'path' | 'auto';
+    aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
+    class?: string;
+  }
+
+  let {
+    children,
+    title = 'Admin',
+    menu,
+    siteUrl,
+    routeMode = 'auto',
+    aiAssistant,
+    class: className = '',
+  }: Props = $props();
   const layoutId = $props.id();
   const layoutScope = `svadmin-layout-${layoutId}`;
   const mainContentId = `${layoutScope}-main`;
@@ -150,7 +169,14 @@
   ontouchend={handleTouchEnd}
 />
 {#if loading}
-  <div data-svadmin-layout-scope={layoutScope} class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1" in:fade={{ duration: 150 }}>
+  <div
+    data-svadmin-layout-scope={layoutScope}
+    data-svadmin-layout
+    data-svadmin-layout-state="loading"
+    aria-busy="true"
+    class={cn('svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1', className)}
+    in:fade={{ duration: 150 }}
+  >
     <div class="svadmin-u-99d72c7fc3e2 svadmin-u-9d60be3a6d80 svadmin-u-e2fe2012a697 svadmin-u-ac402894e356 svadmin-u-8e63407b5ceb svadmin-u-3e7ce58d64fa">
       <Skeleton class="svadmin-u-ed8a5df7b2fb svadmin-u-516b03df0b7c" />
       <div class="svadmin-u-6f7e013d6499 svadmin-u-31f2553311b6">
@@ -172,7 +198,14 @@
     <DevTools docked />
   </div>
 {:else}
-  <div data-svadmin-layout-scope={layoutScope} class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-e6f9e383a762" in:fade={{ duration: 200, delay: 50 }}>
+  <div
+    data-svadmin-layout-scope={layoutScope}
+    data-svadmin-layout
+    data-svadmin-layout-state="ready"
+    aria-busy="false"
+    class={cn('svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-e6f9e383a762', className)}
+    in:fade={{ duration: 200, delay: 50 }}
+  >
     <button
       type="button"
       data-svadmin-skip-link={mainContentId}
@@ -241,7 +274,7 @@
 
       <!-- Content area: responsive padding + centered max-width container
            so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
-      <main id={mainContentId} tabindex="-1" data-svadmin-main class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-2859c861d7de svadmin-u-f0faeb26d656 svadmin-u-c9b99cd93450 svadmin-u-cc06a6575385 svadmin-u-daf5dc5fac2b svadmin-u-e86fadb84483">
+      <main id={mainContentId} tabindex="-1" data-svadmin-main data-svadmin-layout-content class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-2859c861d7de svadmin-u-f0faeb26d656 svadmin-u-c9b99cd93450 svadmin-u-cc06a6575385 svadmin-u-daf5dc5fac2b svadmin-u-e86fadb84483">
         <div class="svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 svadmin-u-9e3dc30c26a3">
           {#key getPath()}
             <!-- 路由切换立即释放旧页面，避免退出期间继续读取已失效的路由派生状态。 -->
@@ -252,7 +285,7 @@
         </div>
       </main>
 
-      <footer class="svadmin-u-60fbb7713999 svadmin-u-0cfe3fb5e434 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-e6f9e383a762 svadmin-u-f0faeb26d656 svadmin-u-472f43d3a27b">
+      <footer data-svadmin-layout-footer class="svadmin-u-60fbb7713999 svadmin-u-0cfe3fb5e434 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-e6f9e383a762 svadmin-u-f0faeb26d656 svadmin-u-472f43d3a27b">
         <DevTools docked />
         {@render aiAssistant?.({ docked: true, scope: chatScope, ownerScope: layoutScope })}
       </footer>

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

@@ -5,14 +5,15 @@ export interface LayoutAIAssistantProps {
 }
 import type { Snippet } from 'svelte';
 import type { MenuItem } from '@svadmin/core';
-type $$ComponentProps = {
+interface Props {
     children: Snippet;
     title?: string;
     menu?: MenuItem[];
     siteUrl?: string;
     routeMode?: 'hash' | 'path' | 'auto';
     aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
-};
-declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
+    class?: string;
+}
+declare const Layout: import("svelte").Component<Props, {}, "">;
 type Layout = ReturnType<typeof Layout>;
 export default Layout;

package/dist/components/Sidebar.svelte

@@ -427,7 +427,7 @@
             <span class="svadmin-u-36e579c0b41c svadmin-u-2eba0d65d059">{i18n.t('common.toggleTheme')}</span>
             <span
               class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29 svadmin-u-ac204c108886 svadmin-u-3daca9af0861 svadmin-u-823f000e740a svadmin-u-6f8ab8abb126"
-              style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
+              style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#635bff'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#635bff'}"
             ></span>
             <!-- The dot previews the user-selected runtime theme swatch; the hex
                  fallback only covers the case where no registered theme matches. -->

package/dist/components/content/ContentPageHeader.svelte

@@ -8,13 +8,27 @@
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
-  let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
-  const styles = contentHeader();
+  let {
+    title,
+    eyebrow,
+    description,
+    breadcrumbs = [],
+    actions,
+    density = 'comfortable',
+    class: className = '',
+  }: Props = $props();
+  const styles = $derived(contentHeader({ density }));
 </script>
 
-<header class={styles.root + ' ' + className} data-svadmin-page-header>
+<header
+  class={styles.root + ' ' + className}
+  data-svadmin-page-header
+  data-svadmin-content-header
+  data-density={density}
+>
   {#if breadcrumbs.length > 0}
     <nav aria-label="Breadcrumb" class={styles.breadcrumbs}>
       {#each breadcrumbs as crumb, index (crumb)}

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

@@ -5,6 +5,7 @@ interface Props {
     description?: string;
     breadcrumbs?: string[];
     actions?: Snippet;
+    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const ContentPageHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/content/ContentPageShell.svelte

@@ -12,6 +12,7 @@
     children: Snippet;
     pageId?: string;
     width?: 'narrow' | 'default' | 'wide';
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
 
@@ -23,16 +24,24 @@
     children,
     pageId = 'content',
     width = 'default',
+    density = 'comfortable',
     class: className = '',
   }: Props = $props();
 
   // 保留旧组件对非窄屏/宽屏输入的默认宽度回退。
+  const resolvedWidth = $derived(width === 'narrow' || width === 'wide' ? width : 'default');
   const styles = $derived(contentPage({
-    width: width === 'narrow' || width === 'wide' ? width : 'default',
+    width: resolvedWidth,
+    density,
   }));
 </script>
 
-<div data-svadmin-content-page={pageId} class={styles.root + ' ' + className}>
-  {#if title}<ContentPageHeader {title} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
+<div
+  data-svadmin-content-page={pageId}
+  data-svadmin-content-page-width={resolvedWidth}
+  data-density={density}
+  class={styles.root + ' ' + className}
+>
+  {#if title}<ContentPageHeader {title} {density} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
   {@render children()}
 </div>

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

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

package/dist/components/content/MetricBlock.svelte

@@ -35,7 +35,7 @@
   {#if loading}
     <Skeleton class={styles.skeleton} />
   {:else}
-    <p class={styles.value}>{value}</p>
+    <p data-svadmin-metric-value class={styles.value}>{value}</p>
     {#if detail || trend}<div class={styles.meta}>{#if trend}<span class={styles.trend}>{trend}</span>{/if}{#if detail}<span class={styles.detail}>{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

package/dist/recipes.d.ts

@@ -120,6 +120,14 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {
+            root: string;
+        };
+    };
 }, {
     root: string;
 }, undefined, {
@@ -134,6 +142,14 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {
+            root: string;
+        };
+    };
 }, {
     root: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -148,38 +164,37 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {
+            root: string;
+        };
+    };
 }, {
     root: string;
 }>>;
 declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+        comfortable: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -190,20 +205,25 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     description: string;
     actions: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+        comfortable: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -213,7 +233,26 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     title: string;
     description: string;
     actions: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+        comfortable: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+    };
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;

package/dist/recipes.js

@@ -55,28 +55,53 @@ const buttonRecipeDefaults = { variant: "default", size: "default" };
 const badgeRecipeDefaults = { variant: "default" };
 const textareaRecipeStyles = tv({ base: "svadmin-textarea" });
 const contentPageRecipeStyles = tv({
-    slots: { root: `${semantic.page} svadmin-content-page space-y-6` },
+    slots: { root: `${semantic.page} svadmin-content-page` },
     variants: {
         width: {
             narrow: { root: "max-w-3xl" },
             default: { root: "max-w-[74rem]" },
             wide: { root: "max-w-[92rem]" },
         },
+        density: {
+            compact: { root: "space-y-4" },
+            comfortable: { root: "space-y-6" },
+        },
     },
-    defaultVariants: { width: "default" },
+    defaultVariants: { width: "default", density: "comfortable" },
 });
 const contentHeaderRecipeStyles = tv({
     slots: {
-        root: "svadmin-content-header space-y-3",
+        root: "svadmin-content-header",
         breadcrumbs: `${semantic.group} text-xs text-muted-foreground`,
         currentCrumb: "text-foreground",
-        row: "flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between",
-        heading: "min-w-0 space-y-1",
+        row: "flex flex-col sm:flex-row sm:items-start sm:justify-between",
+        heading: "min-w-0",
         eyebrow: "text-xs font-medium text-muted-foreground",
-        title: "text-xl font-semibold leading-tight text-foreground",
-        description: "max-w-2xl text-sm leading-6 text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center gap-2",
+        title: "font-semibold leading-tight text-foreground",
+        description: "max-w-2xl text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center",
     },
+    variants: {
+        density: {
+            compact: {
+                root: "space-y-2",
+                row: "gap-3",
+                heading: "space-y-0.5",
+                title: "text-lg leading-tight",
+                description: "text-[0.8125rem] leading-5",
+                actions: "gap-1.5",
+            },
+            comfortable: {
+                root: "space-y-3",
+                row: "gap-6",
+                heading: "space-y-1",
+                title: "text-xl leading-tight",
+                description: "text-sm leading-6",
+                actions: "gap-2",
+            },
+        },
+    },
+    defaultVariants: { density: "comfortable" },
 });
 const metricBlockRecipeStyles = tv({
     slots: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -88,7 +88,7 @@
     "@codemirror/lang-json": "^6.0.0",
     "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lang-sql": "^6.0.0",
-    "@svadmin/core": "^0.56.0",
+    "@svadmin/core": "^0.57.0",
     "@tanstack/svelte-query": "^6.1.48",
     "codemirror": "^6.0.0",
     "isomorphic-dompurify": "^3.23.0",
@@ -175,7 +175,7 @@
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/lang-sql": "^6.10.0",
     "@happy-dom/global-registrator": "^20.11.12",
-    "@svadmin/ai-elements": "^0.10.1",
+    "@svadmin/ai-elements": "^0.10.2",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@tailwindcss/cli": "4.3.3",
     "@testing-library/dom": "^10.4.1",