@svadmin/ui 0.76.0 → 0.78.0

package/dist/components/ui/button/button.svelte

@@ -16,6 +16,7 @@
 			variant?: ButtonVariantValue;
 			size?: ButtonSizeValue;
 			disabledReason?: string;
+			disabledReasonDisplay?: "tooltip" | "inline";
 			restrictionClass?: string;
 			restrictionStyle?: string;
 		};
@@ -34,6 +35,7 @@
 		type = "button",
 		disabled,
 		disabledReason = "",
+		disabledReasonDisplay = "tooltip",
 		restrictionClass,
 		restrictionStyle,
 		children,
@@ -100,7 +102,21 @@
 	{/if}
 {/snippet}
 
-{#if restriction}
+{#if restriction && disabledReasonDisplay === "inline"}
+	<span
+		data-slot="button-restriction"
+		data-disabled-reason={restriction}
+		role="group"
+		aria-label={restProps["aria-label"]}
+		aria-labelledby={restProps["aria-labelledby"]}
+		aria-describedby={describedBy}
+		class={restrictionClass}
+		style={`display: inline-flex; flex-direction: column; align-items: flex-start; gap: .375rem; min-width: 0; max-width: 100%; ${restrictionStyle ?? ""}`}
+	>
+		{@render control()}
+		<span id={restrictionId} data-slot="button-restriction-description" style="font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere;">{restriction}</span>
+	</span>
+{:else if restriction}
 	<Tooltip.Root>
 		<Tooltip.Trigger>
 			{#snippet child({ props })}

package/dist/components/ui/button/button.svelte.d.ts

@@ -6,6 +6,7 @@ export type ButtonProps = WithElementRef<HTMLButtonAttributes & HTMLAnchorAttrib
     variant?: ButtonVariantValue;
     size?: ButtonSizeValue;
     disabledReason?: string;
+    disabledReasonDisplay?: "tooltip" | "inline";
     restrictionClass?: string;
     restrictionStyle?: string;
 };

package/dist/components/ui/sheet/sheet.svelte

@@ -33,6 +33,7 @@
 <script lang="ts">
 /* eslint-disable svelte/no-unused-svelte-ignore */
 	import { tick } from "svelte";
+	import { Portal } from "bits-ui";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
@@ -159,6 +160,7 @@
 <svelte:document onkeydown={handleKeydown} />
 
 {#if open}
+	<Portal>
 	<!-- Overlay -->
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
@@ -191,4 +193,5 @@
 			<span class="svadmin-sr-only">{closeLabel}</span>
 		</button>
 	</div>
+	</Portal>
 {/if}

package/dist/default-theme.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeConfig } from '@svadmin/core';
+/** UI 默认值不改变 headless core 的主题归属规则，也不覆盖已保存的配色。 */
+export declare function resolveAdminThemeConfig(config?: ThemeConfig): ThemeConfig;

package/dist/default-theme.js

@@ -0,0 +1,4 @@
+/** UI 默认值不改变 headless core 的主题归属规则，也不覆盖已保存的配色。 */
+export function resolveAdminThemeConfig(config) {
+    return { ...config, layoutPreset: config?.layoutPreset ?? 'clean-flat' };
+}

package/dist/index.d.ts

@@ -98,6 +98,7 @@ export { default as ApprovalActionCard } from './components/ApprovalActionCard.s
 export type { ApprovalStatus } from './components/ApprovalActionCard.svelte';
 export { default as ApprovalCenter } from './components/ApprovalCenter.svelte';
 export { default as DashboardView } from './components/DashboardView.svelte';
+export { default as ResourceOverview } from './components/ResourceOverview.svelte';
 export { default as StepForm } from './components/StepForm.svelte';
 export type { FormStep } from './components/StepForm.svelte';
 export { default as ModalForm } from './components/ModalForm.svelte';
@@ -271,6 +272,8 @@ export { default as UserCardsNFTPage } from './components/network/UserCardsNFTPa
 export { default as TeamCrewTablePage } from './components/network/TeamCrewTablePage.svelte';
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as DashboardPage } from './components/content/DashboardPage.svelte';
+export { default as PageSection } from './components/content/PageSection.svelte';
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';

package/dist/index.js

@@ -82,6 +82,7 @@ export { default as SensitiveDataMask } from './components/SensitiveDataMask.sve
 export { default as ApprovalActionCard } from './components/ApprovalActionCard.svelte';
 export { default as ApprovalCenter } from './components/ApprovalCenter.svelte';
 export { default as DashboardView } from './components/DashboardView.svelte';
+export { default as ResourceOverview } from './components/ResourceOverview.svelte';
 export { default as StepForm } from './components/StepForm.svelte';
 export { default as ModalForm } from './components/ModalForm.svelte';
 export { default as DrawerForm } from './components/DrawerForm.svelte';
@@ -241,6 +242,8 @@ export { default as TeamCrewTablePage } from './components/network/TeamCrewTable
 export { default as TwoFactorAuthPage } from './components/TwoFactorAuthPage.svelte';
 // Admin UI content page and domain primitives
 export { default as ContentPageShell } from './components/content/ContentPageShell.svelte';
+export { default as DashboardPage } from './components/content/DashboardPage.svelte';
+export { default as PageSection } from './components/content/PageSection.svelte';
 export { default as ContentPageHeader } from './components/content/ContentPageHeader.svelte';
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';

package/dist/page-chrome.css

@@ -106,7 +106,7 @@
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
-    left: 0.75rem;
+    inset-inline-start: 0.75rem;
     width: var(--svadmin-filter-search-icon-size);
     height: var(--svadmin-filter-search-icon-size);
     color: var(--muted-foreground);
@@ -122,7 +122,7 @@
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
     position: absolute;
     top: 50%;
-    right: 0.25rem;
+    inset-inline-end: 0.25rem;
     transform: translateY(-50%);
   }
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
@@ -144,14 +144,14 @@
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
     width: 0.75rem;
     height: 0.75rem;
-    margin-left: 0.125rem;
+    margin-inline-start: 0.125rem;
     color: var(--muted-foreground);
   }
   .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
     height: 1rem;
     min-height: 1rem;
     min-width: 1rem;
-    margin-left: 0.125rem;
+    margin-inline-start: 0.125rem;
     padding: 0 0.25rem;
     font-size: 0.625rem;
     font-weight: 600;

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.78.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",