@svadmin/ui 0.84.1 → 0.86.0

package/dist/recipes.d.ts

@@ -120,14 +120,6 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
-    density: {
-        compact: {
-            root: string;
-        };
-        comfortable: {
-            root: string;
-        };
-    };
 }, {
     root: string;
 }, undefined, {
@@ -142,14 +134,6 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
-    density: {
-        compact: {
-            root: string;
-        };
-        comfortable: {
-            root: string;
-        };
-    };
 }, {
     root: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -164,37 +148,38 @@ 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<{
-    density: {
-        compact: {
-            root: string;
-            row: string;
-            heading: string;
-            title: string;
-            description: string;
-            actions: string;
+    [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;
+            actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            breadcrumbs?: import("tailwind-variants").ClassValue;
+            currentCrumb?: import("tailwind-variants").ClassValue;
+            eyebrow?: import("tailwind-variants").ClassValue;
         };
-        comfortable: {
-            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;
+            actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            breadcrumbs?: import("tailwind-variants").ClassValue;
+            currentCrumb?: import("tailwind-variants").ClassValue;
+            eyebrow?: import("tailwind-variants").ClassValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -205,25 +190,20 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     description: string;
     actions: string;
 }, undefined, {
-    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;
+    [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;
+            actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            breadcrumbs?: import("tailwind-variants").ClassValue;
+            currentCrumb?: import("tailwind-variants").ClassValue;
+            eyebrow?: import("tailwind-variants").ClassValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -233,26 +213,7 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     title: string;
     description: string;
     actions: string;
-}, 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;
-        };
-    };
-}, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -650,16 +611,6 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             state: string;
         };
     };
-    density: {
-        compact: {
-            card: string;
-            state: string;
-        };
-        comfortable: {
-            card: string;
-            state: string;
-        };
-    };
 }, {
     root: string;
     card: string;
@@ -688,16 +639,6 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             state: string;
         };
     };
-    density: {
-        compact: {
-            card: string;
-            state: string;
-        };
-        comfortable: {
-            card: string;
-            state: string;
-        };
-    };
 }, {
     root: string;
     card: string;
@@ -726,16 +667,6 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             state: string;
         };
     };
-    density: {
-        compact: {
-            card: string;
-            state: string;
-        };
-        comfortable: {
-            card: string;
-            state: string;
-        };
-    };
 }, {
     root: string;
     card: string;
@@ -743,23 +674,28 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
     state: string;
 }>>;
 declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType<{
-    density: {
-        compact: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            state?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            head?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
         };
-        comfortable: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            state?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            head?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     header: string;
     content: string;
@@ -767,47 +703,24 @@ declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType
     cell: string;
     state: string;
 }, undefined, {
-    density: {
-        compact: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
-        };
-        comfortable: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            state?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            head?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     header: string;
     content: string;
     head: string;
     cell: string;
     state: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    density: {
-        compact: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
-        };
-        comfortable: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
-        };
-    };
-}, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     root: string;
     header: string;
     content: string;

package/dist/recipes.js

@@ -55,53 +55,28 @@ 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` },
+    slots: { root: `${semantic.page} svadmin-content-page space-y-[var(--svadmin-space-5)]` },
     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", density: "comfortable" },
+    defaultVariants: { width: "default" },
 });
 const contentHeaderRecipeStyles = tv({
     slots: {
-        root: "svadmin-content-header",
-        breadcrumbs: `${semantic.group} text-xs text-muted-foreground`,
+        root: "svadmin-content-header space-y-[var(--svadmin-space-3)]",
+        breadcrumbs: `${semantic.group} text-[length:var(--svadmin-text-caption)] text-muted-foreground`,
         currentCrumb: "text-foreground",
-        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: "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",
-            },
-        },
+        row: "flex flex-col gap-[var(--svadmin-space-5)] sm:flex-row sm:items-start sm:justify-between",
+        heading: "min-w-0 space-y-[var(--svadmin-space-1)]",
+        eyebrow: "text-[length:var(--svadmin-text-caption)] font-medium text-muted-foreground",
+        title: "text-[length:var(--svadmin-text-title)] font-semibold leading-[var(--svadmin-leading-tight)] text-foreground",
+        description: "max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-body)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
-    defaultVariants: { density: "comfortable" },
 });
 const metricBlockRecipeStyles = tv({
     slots: {
@@ -127,18 +102,18 @@ const metricBlockRecipeStyles = tv({
 });
 const productSectionRecipeStyles = tv({
     slots: {
-        root: "flex flex-wrap items-start justify-between gap-3",
-        heading: "min-w-0 flex-[1_1_16rem]",
-        title: "m-0 text-base font-semibold text-foreground [overflow-wrap:anywhere]",
-        description: "mt-1 max-w-[65ch] text-[0.8125rem] leading-6 text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center gap-2",
+        root: "flex flex-wrap items-start justify-between gap-[var(--svadmin-space-3)]",
+        heading: "min-w-0 flex-[1_1_var(--svadmin-chrome-basis)]",
+        title: "m-0 text-[length:var(--svadmin-text-section)] font-semibold text-foreground [overflow-wrap:anywhere]",
+        description: "mt-[var(--svadmin-space-1)] max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-label)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
 });
 const productToolbarRecipeStyles = tv({
     slots: {
-        root: "flex flex-wrap items-center justify-between gap-3 border-b border-border py-3",
-        leading: "flex min-w-0 flex-[1_1_16rem] flex-wrap items-center gap-2",
-        trailing: "ms-auto flex min-w-0 flex-wrap items-center gap-2",
+        root: "flex flex-wrap items-center justify-between gap-[var(--svadmin-space-3)] border-b border-border py-[var(--svadmin-space-3)]",
+        leading: "flex min-w-0 flex-[1_1_var(--svadmin-chrome-basis)] flex-wrap items-center gap-[var(--svadmin-space-2)]",
+        trailing: "ms-auto flex min-w-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
 });
 const productWorkspaceRecipeStyles = tv({
@@ -155,12 +130,12 @@ const productWorkspaceRecipeStyles = tv({
 const productSettingsRecipeStyles = tv({
     slots: {
         root: `${semantic.body} min-w-0`,
-        header: "flex flex-wrap items-start justify-between gap-3 border-b border-border py-4",
-        heading: "min-w-0 flex-[1_1_16rem]",
-        title: "m-0 text-base font-semibold text-foreground [overflow-wrap:anywhere]",
-        description: "mt-1 max-w-[65ch] text-[0.8125rem] leading-6 text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center gap-2",
-        body: "min-w-0 py-1",
+        header: "flex flex-wrap items-start justify-between gap-[var(--svadmin-space-3)] border-b border-border py-[var(--svadmin-space-4)]",
+        heading: "min-w-0 flex-[1_1_var(--svadmin-chrome-basis)]",
+        title: "m-0 text-[length:var(--svadmin-text-section)] font-semibold text-foreground [overflow-wrap:anywhere]",
+        description: "mt-[var(--svadmin-space-1)] max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-label)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
+        body: "min-w-0 py-[var(--svadmin-space-1)]",
     },
 });
 const productSettingsRowRecipeStyles = tv({
@@ -190,9 +165,9 @@ const productStatusRecipeStyles = tv({
 const surfaceMetricRecipeStyles = tv({
     slots: {
         root: "surface-metric__root min-w-0",
-        card: "surface-metric__card border-s-[3px] border-solid",
+        card: "surface-metric__card border-s-[3px] border-solid p-5",
         description: "surface-metric__description text-muted-foreground",
-        state: "surface-metric__state [--svadmin-metric-state-border-width:3px]",
+        state: "surface-metric__state [--svadmin-metric-state-border-width:3px] [--svadmin-metric-state-padding:1.25rem] [--svadmin-metric-state-height:6rem]",
     },
     variants: {
         tone: {
@@ -202,29 +177,18 @@ const surfaceMetricRecipeStyles = tv({
             danger: { card: "border-s-destructive", state: "[--svadmin-metric-state-accent:var(--destructive)]" },
             info: { card: "border-s-info", state: "[--svadmin-metric-state-accent:var(--info)]" },
         },
-        density: {
-            compact: { card: "p-3", state: "[--svadmin-metric-state-padding:0.75rem] [--svadmin-metric-state-height:4.5rem]" },
-            comfortable: { card: "p-5", state: "[--svadmin-metric-state-padding:1.25rem] [--svadmin-metric-state-height:6rem]" },
-        },
     },
-    defaultVariants: { tone: "neutral", density: "comfortable" },
+    defaultVariants: { tone: "neutral" },
 });
 const surfaceTableRecipeStyles = tv({
     slots: {
         root: "surface-table__root min-w-0",
-        header: "surface-table__header",
-        content: "surface-table__content",
-        head: "surface-table__head",
-        cell: "surface-table__cell",
-        state: "surface-table__state text-muted-foreground",
-    },
-    variants: {
-        density: {
-            compact: { header: "px-3", content: "px-3", head: "[&[data-slot=table-head]]:py-1 [&[data-slot=table-head]]:text-xs", cell: "[&[data-slot=table-cell]]:py-1 [&[data-slot=table-cell]]:text-xs", state: "[--svadmin-table-state-height:6rem]" },
-            comfortable: { header: "px-4", content: "px-4", head: "[&[data-slot=table-head]]:py-2 [&[data-slot=table-head]]:text-sm", cell: "[&[data-slot=table-cell]]:py-2 [&[data-slot=table-cell]]:text-sm", state: "[--svadmin-table-state-height:8rem]" },
-        },
+        header: "surface-table__header px-[var(--svadmin-space-4)]",
+        content: "surface-table__content px-[var(--svadmin-space-4)]",
+        head: "surface-table__head [&[data-slot=table-head]]:py-[var(--svadmin-space-2)] [&[data-slot=table-head]]:text-[length:var(--svadmin-text-body)]",
+        cell: "surface-table__cell [&[data-slot=table-cell]]:py-[var(--svadmin-space-2)] [&[data-slot=table-cell]]:text-[length:var(--svadmin-text-body)]",
+        state: "surface-table__state text-muted-foreground [--svadmin-table-state-height:var(--svadmin-table-state-min-h)]",
     },
-    defaultVariants: { density: "comfortable" },
 });
 // undefined 使用公开默认值；null 显式禁用该变体，不能交给 tv 再补默认值。
 export const buttonRecipe = ({ variant = buttonRecipeDefaults.variant, size = buttonRecipeDefaults.size, ...props } = {}) => ({

package/dist/styles/recipes.css

@@ -424,6 +424,7 @@
 .svadmin-surface-metric__card {
       border-inline-start-style: solid;
       border-inline-start-width: 3px;
+      padding: var(--svadmin-spacing-lg);
 }
 
 .svadmin-surface-metric__description {
@@ -432,14 +433,28 @@
 
 .svadmin-surface-metric__state {
       --svadmin-metric-state-border-width: 3px;
+      --svadmin-metric-state-padding: 1.25rem;
+      --svadmin-metric-state-height: 6rem;
 }
 
 .svadmin-surface-table__root {
       min-width: 0;
 }
 
+.svadmin-surface-table__header,
+.svadmin-surface-table__content {
+      padding-inline: var(--svadmin-spacing-md);
+}
+
+.svadmin-surface-table__head[data-slot="table-head"],
+.svadmin-surface-table__cell[data-slot="table-cell"] {
+      padding-block: 0.5rem;
+      font-size: var(--svadmin-font-sizes-body);
+}
+
 .svadmin-surface-table__state {
       color: var(--svadmin-colors-muted);
+      --svadmin-table-state-height: 8rem;
 }
 
 :where(.svadmin-content-header__root > :not(:last-child)) {
@@ -1007,10 +1022,6 @@
       border-color: var(--svadmin-colors-border);
 }
 
-.svadmin-product-list__table [data-table-density=comfortable] [data-slot=table-cell] {
-      padding-block: calc(var(--spacing, 0.25rem) * 4);
-}
-
 .svadmin-product-list__table [data-slot=table] {
       border-collapse: collapse;
       font-size: var(--svadmin-font-sizes-body);
@@ -1120,15 +1131,6 @@
     --svadmin-metric-state-accent: var(--svadmin-colors-border);
 }
 
-.svadmin-surface-metric__card--density_comfortable {
-    padding: var(--svadmin-spacing-lg);
-}
-
-.svadmin-surface-metric__state--density_comfortable {
-    --svadmin-metric-state-padding: 1.25rem;
-    --svadmin-metric-state-height: 6rem;
-}
-
 .svadmin-surface-metric__card--tone_success {
     border-inline-start-color: var(--svadmin-colors-success);
 }
@@ -1161,41 +1163,6 @@
     --svadmin-metric-state-accent: var(--svadmin-colors-info);
 }
 
-.svadmin-surface-metric__card--density_compact {
-    padding: var(--svadmin-spacing-sm);
-}
-
-.svadmin-surface-metric__state--density_compact {
-    --svadmin-metric-state-padding: 0.75rem;
-    --svadmin-metric-state-height: 4.5rem;
-}
-
-.svadmin-surface-table__header--density_comfortable,.svadmin-surface-table__content--density_comfortable {
-    padding-inline: var(--svadmin-spacing-md);
-}
-
-.svadmin-surface-table__head--density_comfortable[data-slot="table-head"],.svadmin-surface-table__cell--density_comfortable[data-slot="table-cell"] {
-    padding-block: 0.5rem;
-    font-size: var(--svadmin-font-sizes-body);
-}
-
-.svadmin-surface-table__state--density_comfortable {
-    --svadmin-table-state-height: 8rem;
-}
-
-.svadmin-surface-table__header--density_compact,.svadmin-surface-table__content--density_compact {
-    padding-inline: var(--svadmin-spacing-sm);
-}
-
-.svadmin-surface-table__head--density_compact[data-slot="table-head"],.svadmin-surface-table__cell--density_compact[data-slot="table-cell"] {
-    padding-block: var(--svadmin-spacing-xs);
-    font-size: var(--svadmin-font-sizes-compact);
-}
-
-.svadmin-surface-table__state--density_compact {
-    --svadmin-table-state-height: 6rem;
-}
-
 .svadmin-content-page__root--width_default {
     max-width: var(--svadmin-sizes-content-default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.84.1",
+  "version": "0.86.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.61.1",
+    "@svadmin/core": "^0.62.0",
     "@tanstack/svelte-query": "^6.1.48",
     "codemirror": "^6.0.0",
     "isomorphic-dompurify": "^3.23.0",
@@ -139,7 +139,7 @@
     }
   },
   "dependencies": {
-    "@svadmin/devtools": "^0.3.2",
+    "@svadmin/devtools": "^0.3.3",
     "@svadmin/devtools-contract": "^0.3.0",
     "@vibeunion/devtools-devframe": "^0.1.0",
     "typebox": "^1.3.34",
@@ -177,7 +177,7 @@
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/lang-sql": "^6.10.0",
     "@happy-dom/global-registrator": "^20.11.12",
-    "@svadmin/ai-elements": "^0.11.3",
+    "@svadmin/ai-elements": "^0.12.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@tailwindcss/cli": "4.3.3",
     "@testing-library/dom": "^10.4.1",