@svadmin/ui 0.83.1 → 0.84.0

package/dist/app.css

@@ -9349,12 +9349,14 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   min-width: 0;
 }
 
+/* PageToolbar 的 recipe 是底部分割线，不另做一张浮动卡片。 */
 .layout-clean-flat [data-svadmin-table-toolbar] {
-  border-color: var(--svadmin-border);
-  border-radius: var(--radius-lg);
-  background: var(--svadmin-surface);
-  padding: 0.875rem;
-  box-shadow: var(--svadmin-surface-shadow);
+  border: 0;
+  border-bottom: 1px solid var(--svadmin-border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0.75rem 0;
+  box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-table-toolbar] [data-slot="input"] {
@@ -10072,9 +10074,11 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat [data-svadmin-auth-page] > main > div > section > header h1 {
-  font-size: 2.25rem;
-  line-height: 1.2;
-  font-weight: 700;
+  color: var(--foreground);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0;
 }
 
 .layout-clean-flat [data-svadmin-auth-page] > main > div > section > header p {
@@ -10083,35 +10087,41 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   line-height: 1.5;
 }
 
+/* 演示凭据是登录表面上的说明，不是套在卡片里的第二层卡片。 */
 .layout-clean-flat [data-svadmin-demo-credentials] {
   display: grid;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border));
-  border-radius: 1rem;
-  background: color-mix(in oklch, var(--primary) 8%, var(--card));
-  padding: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0 0 1rem;
+  box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dl {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
+  gap: 0.75rem 1rem;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dl > div {
   min-width: 0;
-  border-radius: 0.875rem;
-  background: color-mix(in oklch, var(--card) 88%, transparent);
-  padding: 0.75rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dt {
   color: var(--muted-foreground);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  line-height: 1.2;
-  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dd {
@@ -10147,26 +10157,26 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 
 .layout-clean-flat [data-svadmin-auth-page] form input {
   width: 100%;
-  min-height: 3.5rem;
+  min-height: 2.75rem;
   border: 1px solid var(--border);
-  border-radius: 0.625rem;
-  background: transparent;
-  padding-block: 0.75rem;
-  padding-right: 0.75rem;
-  font-size: 1rem;
+  border-radius: 0.5rem;
+  background: var(--card);
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
 }
 
 .layout-clean-flat [data-svadmin-auth-page] form input:focus-visible {
   border-color: var(--ring);
-  outline: 3px solid color-mix(in oklch, var(--ring) 20%, transparent);
-  outline-offset: 0;
+  outline: 2px solid var(--ring);
+  outline-offset: var(--svadmin-focus-offset, 2px);
 }
 
 .layout-clean-flat [data-svadmin-auth-page] form > button[type="submit"] {
   width: 100%;
-  min-height: 3.5rem;
-  border-radius: 0.75rem;
-  font-size: 1rem;
+  min-height: 2.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   font-weight: 600;
 }
 
@@ -10464,10 +10474,11 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat[data-theme="stripe"] [data-svadmin-table-toolbar] {
-  border: 1px solid var(--border);
-  border-radius: 0.5rem;
-  background: var(--card);
-  box-shadow: var(--svadmin-surface-shadow);
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .layout-clean-flat[data-theme="stripe"] [data-svadmin-form-actions] {

package/dist/app.theme.css

@@ -9349,12 +9349,14 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   min-width: 0;
 }
 
+/* PageToolbar 的 recipe 是底部分割线，不另做一张浮动卡片。 */
 .layout-clean-flat [data-svadmin-table-toolbar] {
-  border-color: var(--svadmin-border);
-  border-radius: var(--radius-lg);
-  background: var(--svadmin-surface);
-  padding: 0.875rem;
-  box-shadow: var(--svadmin-surface-shadow);
+  border: 0;
+  border-bottom: 1px solid var(--svadmin-border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0.75rem 0;
+  box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-table-toolbar] [data-slot="input"] {
@@ -10072,9 +10074,11 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat [data-svadmin-auth-page] > main > div > section > header h1 {
-  font-size: 2.25rem;
-  line-height: 1.2;
-  font-weight: 700;
+  color: var(--foreground);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0;
 }
 
 .layout-clean-flat [data-svadmin-auth-page] > main > div > section > header p {
@@ -10083,35 +10087,41 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   line-height: 1.5;
 }
 
+/* 演示凭据是登录表面上的说明，不是套在卡片里的第二层卡片。 */
 .layout-clean-flat [data-svadmin-demo-credentials] {
   display: grid;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border));
-  border-radius: 1rem;
-  background: color-mix(in oklch, var(--primary) 8%, var(--card));
-  padding: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0 0 1rem;
+  box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dl {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
+  gap: 0.75rem 1rem;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dl > div {
   min-width: 0;
-  border-radius: 0.875rem;
-  background: color-mix(in oklch, var(--card) 88%, transparent);
-  padding: 0.75rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dt {
   color: var(--muted-foreground);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  line-height: 1.2;
-  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .layout-clean-flat [data-svadmin-demo-credentials] dd {
@@ -10147,26 +10157,26 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 
 .layout-clean-flat [data-svadmin-auth-page] form input {
   width: 100%;
-  min-height: 3.5rem;
+  min-height: 2.75rem;
   border: 1px solid var(--border);
-  border-radius: 0.625rem;
-  background: transparent;
-  padding-block: 0.75rem;
-  padding-right: 0.75rem;
-  font-size: 1rem;
+  border-radius: 0.5rem;
+  background: var(--card);
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
 }
 
 .layout-clean-flat [data-svadmin-auth-page] form input:focus-visible {
   border-color: var(--ring);
-  outline: 3px solid color-mix(in oklch, var(--ring) 20%, transparent);
-  outline-offset: 0;
+  outline: 2px solid var(--ring);
+  outline-offset: var(--svadmin-focus-offset, 2px);
 }
 
 .layout-clean-flat [data-svadmin-auth-page] form > button[type="submit"] {
   width: 100%;
-  min-height: 3.5rem;
-  border-radius: 0.75rem;
-  font-size: 1rem;
+  min-height: 2.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   font-weight: 600;
 }
 
@@ -10464,10 +10474,11 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat[data-theme="stripe"] [data-svadmin-table-toolbar] {
-  border: 1px solid var(--border);
-  border-radius: 0.5rem;
-  background: var(--card);
-  box-shadow: var(--svadmin-surface-shadow);
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .layout-clean-flat[data-theme="stripe"] [data-svadmin-form-actions] {

package/dist/components/AdminApp.svelte

@@ -1,4 +1,12 @@
 <script module lang="ts">
+  import type { Component as SvelteComponent } from 'svelte';
+
+  export interface AdminPageRoute {
+    readonly path: string;
+    readonly component: SvelteComponent<{ route: string; params: Record<string, string | undefined> }>;
+    readonly title?: string;
+  }
+
   const loadPublicProfilePage = () => import('./profile/PublicProfilePage.svelte');
   const loadGetStartedPage = () => import('./account/GetStartedPage.svelte');
   const loadUserProfilePage = () => import('./account/UserProfilePage.svelte');
@@ -65,6 +73,7 @@
   import ResourceOverview from './ResourceOverview.svelte';
   import DataState from './content/DataState.svelte';
   import { parseContractRouteId } from '@svadmin/core/schema';
+  import { matchRoute } from '@svadmin/core/router';
   import { resolveAdminThemeConfig } from '../default-theme.js';
   import AutoForm from './LazyAutoForm.svelte';
   import ShowPage from './LazyShowPage.svelte';
@@ -149,6 +158,8 @@
     }>;
     /** Custom multi-level menu configuration */
     menu?: MenuItem[];
+    /** Product or application surface routes rendered before resource fallbacks. */
+    pageRoutes?: readonly AdminPageRoute[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
     siteUrl?: string;
     /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
@@ -194,6 +205,7 @@
     components: userComponents,
     resourcePages,
     menu,
+    pageRoutes,
     siteUrl,
     routeMode,
     queryClient: providedQueryClient,
@@ -344,6 +356,14 @@
   const route = $derived(routerState.route);
   const params = $derived(routerState.params);
   const path = $derived(routerState.path);
+  const customRouteMatch = $derived.by(() => {
+    if (!pageRoutes?.length) return undefined;
+    for (const candidate of pageRoutes) {
+      const match = matchRoute(path, [candidate.path]);
+      if (match) return { candidate, params: match.params };
+    }
+    return undefined;
+  });
   const resourceNames = $derived(new Set(resources.map((resource) => resource.name)));
   const isStandaloneTwoFactor = $derived(route === '/2fa' || route === '/authentication/branded/2fa');
   const standaloneErrorStatus = $derived.by((): '404' | '500' | undefined => {
@@ -628,6 +648,9 @@
         <LazyPage loader={loadTeamCrewTablePage} props={{}} />
       {:else if renderedRoute.startsWith('/settings')}
         <SettingsPage {...notificationPreferencesProvider ? { preferencesProvider: notificationPreferencesProvider } : {}} />
+      {:else if customRouteMatch}
+        {@const CustomPage = customRouteMatch.candidate.component}
+        <CustomPage route={customRouteMatch.candidate.path} params={customRouteMatch.params} />
       {:else if renderedRoute === '/' || renderedRoute === '' || renderedRoute === '/inventory-dashboard'}
         {#if dashboard}
           {@render dashboard()}

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

@@ -1,3 +1,12 @@
+import { SvelteComponent } from "svelte";
+export interface AdminPageRoute {
+    readonly path: string;
+    readonly component: SvelteComponent<{
+        route: string;
+        params: Record<string, string | undefined>;
+    }>;
+    readonly title?: string;
+}
 import '../app.css';
 import { type Component, type Snippet } from 'svelte';
 import type { AccessControlProvider, AgentProvider, AuditLogProvider, AuthProvider, ChatProvider, CredentialProvider, DataProviderInput, IdentityGovernanceProvider, I18nProvider, LiveProvider, MenuItem, NotificationProvider, OrganizationProvider, ResourceDefinition, RouterProvider, SessionProvider, TaskProvider, TenantAdapter, TenantContext, ThemeConfig, ThemeMode } from '@svadmin/core';
@@ -81,6 +90,8 @@ interface Props {
     }>;
     /** Custom multi-level menu configuration */
     menu?: MenuItem[];
+    /** Product or application surface routes rendered before resource fallbacks. */
+    pageRoutes?: readonly AdminPageRoute[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
     siteUrl?: string;
     /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export type { SurfaceTone, SurfaceDensity } from "./design-contract.js";
 export { designSystemComponents, type DesignComponentContract, type DesignComponentId, type DesignComponentState, } from "./design-system-components.js";
 export { metricSurfaceClasses, tableSurfaceClasses } from "./design-system.js";
 export { default as AdminApp } from './components/AdminApp.svelte';
+export type { AdminPageRoute } from './components/AdminApp.svelte';
 export { default as AutoTable } from './components/AutoTable.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 export type { SegmentedControlOption } from './components/SegmentedControl.svelte';

package/dist/recipes.d.ts

@@ -345,8 +345,8 @@ declare const productSectionRecipeStyles: import("tailwind-variants").TVReturnTy
             title?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
             actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -355,8 +355,8 @@ declare const productSectionRecipeStyles: import("tailwind-variants").TVReturnTy
             title?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
             actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -371,8 +371,8 @@ declare const productSectionRecipeStyles: import("tailwind-variants").TVReturnTy
             title?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
             actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -473,8 +473,8 @@ declare const productSettingsRecipeStyles: import("tailwind-variants").TVReturnT
             title?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
             actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -485,8 +485,8 @@ declare const productSettingsRecipeStyles: import("tailwind-variants").TVReturnT
             title?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
             actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -505,8 +505,8 @@ declare const productSettingsRecipeStyles: import("tailwind-variants").TVReturnT
             title?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
             actions?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -832,11 +832,11 @@ export declare const contentHeaderRecipe: (props?: Parameters<typeof contentHead
     description: string;
     root: string;
     row: string;
+    actions: string;
     heading: string;
     breadcrumbs: string;
     currentCrumb: string;
     eyebrow: string;
-    actions: string;
 };
 export declare const metricBlockRecipe: (props?: Parameters<typeof metricBlockRecipeStyles>[0]) => {
     detail: string;
@@ -853,8 +853,8 @@ export declare const productSectionRecipe: (props?: Parameters<typeof productSec
     title: string;
     description: string;
     root: string;
-    heading: string;
     actions: string;
+    heading: string;
 };
 export declare const productToolbarRecipe: (props?: Parameters<typeof productToolbarRecipeStyles>[0]) => {
     root: string;
@@ -874,8 +874,8 @@ export declare const productSettingsRecipe: (props?: Parameters<typeof productSe
     title: string;
     description: string;
     root: string;
-    heading: string;
     actions: string;
+    heading: string;
 };
 export declare const productSettingsRowRecipe: (props?: Parameters<typeof productSettingsRowRecipeStyles>[0]) => {
     label: string;
@@ -919,11 +919,11 @@ export declare const allRecipes: {
         description: string;
         root: string;
         row: string;
+        actions: string;
         heading: string;
         breadcrumbs: string;
         currentCrumb: string;
         eyebrow: string;
-        actions: string;
     };
     metricBlockRecipe: (props?: Parameters<typeof metricBlockRecipeStyles>[0]) => {
         detail: string;
@@ -940,8 +940,8 @@ export declare const allRecipes: {
         title: string;
         description: string;
         root: string;
-        heading: string;
         actions: string;
+        heading: string;
     };
     productToolbarRecipe: (props?: Parameters<typeof productToolbarRecipeStyles>[0]) => {
         root: string;
@@ -961,8 +961,8 @@ export declare const allRecipes: {
         title: string;
         description: string;
         root: string;
-        heading: string;
         actions: string;
+        heading: string;
     };
     productSettingsRowRecipe: (props?: Parameters<typeof productSettingsRowRecipeStyles>[0]) => {
         label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.83.1",
+  "version": "0.84.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.60.0",
+    "@svadmin/core": "^0.61.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.0",
+    "@svadmin/devtools": "^0.3.1",
     "@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.1",
+    "@svadmin/ai-elements": "^0.11.2",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@tailwindcss/cli": "4.3.3",
     "@testing-library/dom": "^10.4.1",