@svadmin/ui 0.83.2 → 0.84.0

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.2",
+  "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",