@svadmin/ui 0.34.9 → 0.35.0

package/dist/app.css

@@ -672,3 +672,375 @@ main {
 .chat-markdown strong {
   font-weight: 600;
 }
+
+/* ─── High-Contrast Flat Layout Preset (clean-flat) ─── */
+.layout-clean-flat {
+  --radius: 0.75rem;
+}
+
+/* Base card flat background overrides */
+.layout-clean-flat .bg-card,
+.layout-clean-flat [data-slot="card"] {
+  background: #ffffff !important;
+  border: 1px solid #f1f3f7 !important;
+  box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02) !important;
+  border-radius: 12px !important;
+}
+.dark.layout-clean-flat .bg-card,
+.dark .layout-clean-flat .bg-card,
+.dark.layout-clean-flat [data-slot="card"],
+.dark .layout-clean-flat [data-slot="card"] {
+  background: #1e1e2d !important;
+  border: 1px solid #2b2b40 !important;
+  box-shadow: none !important;
+}
+
+/* Crisp table header styles */
+.layout-clean-flat th {
+  background-color: #f9f9f9 !important;
+  border-bottom: 1px solid #f1f3f7 !important;
+  color: #181c32 !important;
+  font-weight: 600 !important;
+  font-size: 0.75rem !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+}
+.dark.layout-clean-flat th,
+.dark .layout-clean-flat th {
+  background-color: #1a1a27 !important;
+  border-bottom: 1px solid #2b2b40 !important;
+  color: #a1a5b7 !important;
+}
+
+/* Crisp table cell styles */
+.layout-clean-flat td {
+  border-bottom: 1px solid #f1f3f7 !important;
+  color: #5e6278 !important;
+  font-size: 0.8125rem !important;
+}
+.dark.layout-clean-flat td,
+.dark .layout-clean-flat td {
+  border-bottom: 1px solid rgba(43, 43, 64, 0.6) !important;
+  color: #a1a5b7 !important;
+}
+
+/* Table row hover state */
+.layout-clean-flat tr:hover td {
+  background-color: #f9f9f9 !important;
+}
+.dark.layout-clean-flat tr:hover td,
+.dark .layout-clean-flat tr:hover td {
+  background-color: rgba(43, 43, 64, 0.3) !important;
+}
+
+/* Sidebar layout adjustments */
+.layout-clean-flat [data-sidebar="sidebar"] {
+  background: #ffffff !important;
+  color: #181c32 !important;
+  border-right: 1px solid #f1f3f7 !important;
+  box-shadow: 0 0 40px rgba(76, 87, 125, 0.04) !important;
+}
+.dark.layout-clean-flat [data-sidebar="sidebar"],
+.dark .layout-clean-flat [data-sidebar="sidebar"] {
+  background: #1e1e2d !important;
+  color: #a1a5b7 !important;
+  border-right: 1px solid #2b2b40 !important;
+}
+
+.layout-clean-flat [data-sidebar="group-label"] {
+  font-size: 0.6875rem !important;
+  font-weight: 600 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #a1a5b7 !important;
+  padding: 0.5rem 0.5rem 0.375rem !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-button"] {
+  color: #5e6278 !important;
+  border-radius: 0.675rem !important;
+  transition: all 0.15s ease !important;
+  font-weight: 500 !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-button"]:hover {
+  background: #f5f8fa !important;
+  color: #181c32 !important;
+}
+.dark.layout-clean-flat [data-sidebar="menu-button"]:hover,
+.dark .layout-clean-flat [data-sidebar="menu-button"]:hover {
+  background: #2b2b40 !important;
+  color: #f1f6ff !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-button"]:hover > svg {
+  opacity: 0.85 !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-button"][data-active="true"] {
+  background: #eef6ff !important;
+  color: #3e97ff !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+.dark.layout-clean-flat [data-sidebar="menu-button"][data-active="true"],
+.dark .layout-clean-flat [data-sidebar="menu-button"][data-active="true"] {
+  background: rgba(62, 151, 255, 0.1) !important;
+  color: #3e97ff !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-button"][data-active="true"] svg {
+  color: #3e97ff !important;
+  opacity: 1 !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-button"][data-active="true"] [data-sidebar="menu-icon"],
+.layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"] [data-sidebar="menu-icon"] {
+  background: rgba(62, 151, 255, 0.12) !important;
+  color: #3e97ff !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-sub"] {
+  margin-left: 1.125rem !important;
+  padding-left: 0.75rem !important;
+  border-left: 1px solid #f1f3f7 !important;
+}
+.dark.layout-clean-flat [data-sidebar="menu-sub"],
+.dark .layout-clean-flat [data-sidebar="menu-sub"] {
+  border-left-color: #2b2b40 !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-sub-button"] {
+  color: #5e6278 !important;
+  border-radius: 0.675rem !important;
+  font-weight: 400 !important;
+  transition: all 0.15s !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-sub-button"]:hover {
+  background: #f5f8fa !important;
+  color: #181c32 !important;
+}
+.dark.layout-clean-flat [data-sidebar="menu-sub-button"]:hover,
+.dark .layout-clean-flat [data-sidebar="menu-sub-button"]:hover {
+  background: #2b2b40 !important;
+  color: #f1f6ff !important;
+}
+
+.layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"] {
+  background: #eef6ff !important;
+  color: #3e97ff !important;
+  font-weight: 500 !important;
+  box-shadow: none !important;
+}
+.dark.layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"],
+.dark .layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"] {
+  background: rgba(62, 151, 255, 0.1) !important;
+  color: #3e97ff !important;
+}
+
+/* Button & input styles override under clean-flat layout */
+.layout-clean-flat [data-slot="button"][data-variant="default"] {
+  background: #3e97ff !important;
+  color: #ffffff !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  transition: all 0.15s ease !important;
+}
+.layout-clean-flat [data-slot="button"][data-variant="default"]:hover {
+  background: #1880ff !important;
+}
+
+.layout-clean-flat [data-slot="button"][data-variant="outline"] {
+  background: #ffffff !important;
+  color: #5e6278 !important;
+  border: 1px solid #e1e3ea !important;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  transition: all 0.15s ease !important;
+}
+.layout-clean-flat [data-slot="button"][data-variant="outline"]:hover {
+  background: #f5f8fa !important;
+  border-color: #cbd5e1 !important;
+  color: #181c32 !important;
+}
+.dark.layout-clean-flat [data-slot="button"][data-variant="outline"],
+.dark .layout-clean-flat [data-slot="button"][data-variant="outline"] {
+  background: #1e1e2d !important;
+  color: #a1a5b7 !important;
+  border-color: #2b2b40 !important;
+}
+.dark.layout-clean-flat [data-slot="button"][data-variant="outline"]:hover,
+.dark .layout-clean-flat [data-slot="button"][data-variant="outline"]:hover {
+  background: #2b2b40 !important;
+  color: #ffffff !important;
+}
+
+.layout-clean-flat [data-slot="input"] {
+  border: 1px solid #e1e3ea !important;
+  border-radius: 8px !important;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.01) !important;
+  outline: none !important;
+  transition: all 0.15s ease !important;
+}
+.layout-clean-flat [data-slot="input"]:focus {
+  border-color: #3e97ff !important;
+  box-shadow: 0 0 0 4px rgba(62,151,255,0.1) !important;
+}
+.dark.layout-clean-flat [data-slot="input"],
+.dark .layout-clean-flat [data-slot="input"] {
+  border-color: #2b2b40 !important;
+  background: #151521 !important;
+  color: #f1f6ff !important;
+}
+.dark.layout-clean-flat [data-slot="input"]:focus,
+.dark .layout-clean-flat [data-slot="input"]:focus {
+  border-color: #3e97ff !important;
+}
+
+/* ─── svadmin Metronic-inspired list and edit surfaces ─── */
+[data-svadmin-list-header],
+[data-svadmin-table-toolbar],
+[data-svadmin-table-card],
+[data-svadmin-form-header],
+[data-svadmin-form-card],
+[data-svadmin-form-actions] {
+  box-shadow: 0 0 24px rgba(76, 87, 125, 0.045) !important;
+}
+
+.layout-clean-flat [data-svadmin-list-header],
+.layout-clean-flat [data-svadmin-table-toolbar],
+.layout-clean-flat [data-svadmin-table-card],
+.layout-clean-flat [data-svadmin-form-header],
+.layout-clean-flat [data-svadmin-form-card],
+.layout-clean-flat [data-svadmin-form-actions] {
+  border-color: #f1f3f7 !important;
+  background: #ffffff !important;
+  border-radius: 1.15rem !important;
+}
+
+.layout-clean-flat [data-svadmin-list-actions] [data-slot="button"],
+.layout-clean-flat [data-svadmin-table-toolbar] [data-slot="button"],
+.layout-clean-flat [data-svadmin-form-actions] [data-slot="button"] {
+  height: 2.625rem !important;
+  border-radius: 0.75rem !important;
+}
+
+.layout-clean-flat [data-svadmin-table-toolbar] {
+  padding: 0.875rem !important;
+}
+
+.layout-clean-flat [data-svadmin-table-toolbar] [data-slot="input"] {
+  height: 2.75rem !important;
+  border-radius: 0.85rem !important;
+  background: #f9f9f9 !important;
+}
+
+[data-svadmin-datatable] {
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+}
+
+[data-svadmin-table-head] [data-slot="table-head"] {
+  height: 3.25rem !important;
+  border-bottom: 1px solid rgba(225, 227, 234, 0.78) !important;
+  background: #f9f9f9 !important;
+  color: #a1a5b7 !important;
+  font-size: 0.6875rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.08em !important;
+  text-transform: uppercase !important;
+}
+
+[data-svadmin-table-row] {
+  border-bottom-color: rgba(241, 243, 247, 0.95) !important;
+}
+
+[data-svadmin-table-row] [data-slot="table-cell"] {
+  height: 3.625rem !important;
+  color: #5e6278 !important;
+  font-size: 0.8125rem !important;
+}
+
+[data-svadmin-table-row]:hover [data-slot="table-cell"] {
+  background: #fbfcfd !important;
+}
+
+[data-svadmin-pagination] {
+  border-radius: 1rem;
+  padding: 0.35rem 0.15rem;
+}
+
+[data-svadmin-form-content] {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+[data-svadmin-form-row] {
+  border-bottom: 1px solid rgba(241, 243, 247, 0.95);
+  padding: 1.35rem 0;
+}
+
+[data-svadmin-form-row]:last-child {
+  border-bottom: 0;
+}
+
+[data-svadmin-field-label] {
+  color: #3f4254 !important;
+  font-weight: 600 !important;
+}
+
+[data-svadmin-form-settings] [data-slot="input"],
+[data-svadmin-form-settings] textarea,
+[data-svadmin-form-settings] [data-slot="select-trigger"] {
+  min-height: 2.75rem !important;
+  border-radius: 0.85rem !important;
+  background: #f9f9f9 !important;
+}
+
+[data-svadmin-form-actions] {
+  width: fit-content;
+  max-width: 100%;
+}
+
+@media (min-width: 768px) {
+  [data-svadmin-form-settings] [data-svadmin-field] {
+    display: grid !important;
+    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) !important;
+    align-items: start !important;
+    column-gap: 2rem !important;
+    row-gap: 0.35rem !important;
+  }
+
+  [data-svadmin-form-settings] [data-svadmin-field] > [data-svadmin-field-label] {
+    padding-top: 0.8rem !important;
+  }
+
+  [data-svadmin-form-settings] [data-svadmin-field] > :not([data-svadmin-field-label]) {
+    grid-column: 2 !important;
+  }
+}
+
+.dark [data-svadmin-table-head] [data-slot="table-head"] {
+  background: #1a1a27 !important;
+  border-bottom-color: #2b2b40 !important;
+  color: #a1a5b7 !important;
+}
+
+.dark [data-svadmin-table-row] {
+  border-bottom-color: rgba(43, 43, 64, 0.82) !important;
+}
+
+.dark [data-svadmin-table-row] [data-slot="table-cell"] {
+  color: #a1a5b7 !important;
+}
+
+.dark [data-svadmin-table-row]:hover [data-slot="table-cell"] {
+  background: rgba(43, 43, 64, 0.32) !important;
+}
+
+.dark [data-svadmin-form-row] {
+  border-bottom-color: rgba(43, 43, 64, 0.82);
+}

package/dist/component-registry.svelte.d.ts

@@ -13,6 +13,7 @@ export interface ComponentRegistry {
     AutoTable: Component<any>;
     AutoForm: Component<any>;
     ShowPage: Component<any>;
+    ErrorPage?: Component<any>;
     Button: Component<any>;
     Input: Component<any>;
     Badge: Component<any>;

package/dist/component-registry.svelte.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Component Registry — Svelte Context-based DI for component injection.
  *

package/dist/components/AICommandBar.svelte

@@ -5,7 +5,7 @@
   import { toggleTheme } from '@svadmin/core';
   import { Command } from 'cmdk-sv';
   import * as Dialog from './ui/dialog/index.js';
-  import { Search, LayoutDashboard, Plus, Sun, FileText, Sparkles, Loader2, Send } from '@lucide/svelte';
+  import { Search, LayoutDashboard, Plus, Sun, FileText, Sparkles, Loader2 } from '@lucide/svelte';
   import MarkdownRenderer from './MarkdownRenderer.svelte';
 
   let { open = $bindable(false) } = $props<{ open?: boolean }>();
@@ -124,7 +124,7 @@
               <LayoutDashboard class="h-4 w-4 text-muted-foreground" />
               {t('common.home')}
             </Command.Item>
-            {#each resources as r}
+            {#each resources as r, _i (_i)}
               <Command.Item value={r.name} onSelect={() => act(() => navigate(`/${r.name}`))} class={itemClass}>
                 <FileText class="h-4 w-4 text-muted-foreground" />
                 {r.label}
@@ -136,7 +136,7 @@
 
           <!-- Actions -->
           <Command.Group heading={t('common.actions')}>
-            {#each resources as r}
+            {#each resources as r, _i (_i)}
               <Command.Item value={`create-${r.name}`} onSelect={() => act(() => navigate(`/${r.name}/create`))} class={itemClass}>
                 <Plus class="h-4 w-4 text-muted-foreground" />
                 {t('common.create')} {r.label}

package/dist/components/AboutSettings.svelte

@@ -46,7 +46,7 @@
     </Card.CardHeader>
     <Card.CardContent>
       <div class="flex flex-wrap gap-2">
-        {#each resources as resource}
+        {#each resources as resource, _i (_i)}
           <Badge variant="outline" class="font-mono text-xs">{resource.name}</Badge>
         {/each}
         {#if resources.length === 0}
@@ -66,7 +66,7 @@
     </Card.CardHeader>
     <Card.CardContent>
       <div class="flex flex-wrap gap-2">
-        {#each providerNames as name}
+        {#each providerNames as name, _i (_i)}
           <Badge variant="outline" class="font-mono text-xs">{name}</Badge>
         {/each}
       </div>

package/dist/components/AdminApp.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   // Auto-inject design tokens so consumers don't need to manually import
   import '../app.css';
-  import type { Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, setTaskProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
+  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, setTaskProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
-  import { currentPath } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider, type DefaultOptions } from '@tanstack/svelte-query';
-  import { setComponentRegistry, getComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
+  import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
   import AutoTable from './AutoTable.svelte';
   import AutoForm from './AutoForm.svelte';
@@ -24,6 +23,20 @@
   import Header from './Header.svelte';
   import TaskQueueDrawer from './TaskQueueDrawer.svelte';
   import SettingsPage from './SettingsPage.svelte';
+  import ErrorPage from './ErrorPage.svelte';
+  import PublicProfilePage from './profile/PublicProfilePage.svelte';
+  import GetStartedPage from './account/GetStartedPage.svelte';
+  import CompanyProfilePage from './account/CompanyProfilePage.svelte';
+  import SettingsPlainPage from './account/SettingsPlainPage.svelte';
+  import SettingsSidebarPage from './account/SettingsSidebarPage.svelte';
+  import SettingsEnterprisePage from './account/SettingsEnterprisePage.svelte';
+  import ImportMembersPage from './account/ImportMembersPage.svelte';
+  import MembersStarterPage from './account/MembersStarterPage.svelte';
+  import TeamMembersPage from './account/TeamMembersPage.svelte';
+  import SecurityLogPage from './account/SecurityLogPage.svelte';
+  import UserCardsNFTPage from './network/UserCardsNFTPage.svelte';
+  import TeamCrewTablePage from './network/TeamCrewTablePage.svelte';
+  import TwoFactorAuthPage from './TwoFactorAuthPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -43,8 +56,22 @@
     themeConfig?: ThemeConfig;
     dashboard?: Snippet;
     loginPage?: Snippet;
+    /** Prefill and display credentials on the default login page, useful for demos/examples. */
+    loginDefaults?: {
+      identifier?: string;
+      password?: string;
+      hint?: string;
+    };
     /** Override default components via DI */
     components?: Partial<ComponentRegistry>;
+    /** Resource-specific page overrides while keeping svadmin defaults as fallback. */
+    resourcePages?: Record<string, {
+      list?: Component<{ resourceName: string }>;
+      create?: Component<{ resourceName: string; mode?: 'create' }>;
+      edit?: Component<{ resourceName: string; mode?: 'edit'; id?: string | number }>;
+      show?: Component<{ resourceName: string; id?: string | number }>;
+      clone?: Component<{ resourceName: string; mode?: 'clone'; id?: string | number }>;
+    }>;
     /** Custom multi-level menu configuration */
     menu?: MenuItem[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
@@ -69,7 +96,9 @@
     themeConfig: userThemeConfig,
     dashboard,
     loginPage,
+    loginDefaults,
     components: userComponents,
+    resourcePages,
     menu,
     siteUrl,
     routeMode,
@@ -81,7 +110,7 @@
   const defaultComponents: ComponentRegistry = {
     Layout, Sidebar, Header,
     LoginPage, AutoTable, AutoForm, ShowPage,
-    TaskQueueDrawer,
+    TaskQueueDrawer, ErrorPage,
     Button: Button as unknown as ComponentRegistry['Button'],
     Input: Input as unknown as ComponentRegistry['Input'],
     Badge: Badge as unknown as ComponentRegistry['Badge'],
@@ -135,6 +164,9 @@
   // Reactive getters for route state
   const route = $derived(getRoute());
   const params = $derived(getParams());
+  const resourceNames = $derived(new Set(resources.map((resource) => resource.name)));
+  const hasRouteResource = $derived(!params.resource || resourceNames.has(params.resource));
+  const currentResourcePages = $derived(params.resource ? resourcePages?.[params.resource] : undefined);
 
   // Auth check
   let isAuthenticated = $state(false);
@@ -184,7 +216,13 @@
   {:else if route === '/login' && loginPage}
     {@render loginPage()}
   {:else if route === '/login' && authProvider}
-    <LoginPage {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
+    <LoginPage
+      {title}
+      defaultIdentifier={loginDefaults?.identifier}
+      defaultPassword={loginDefaults?.password}
+      loginHint={loginDefaults?.hint}
+      onSuccess={() => { isAuthenticated = true; navigate('/'); }}
+    />
   {:else if route === '/register' && authProvider?.register}
     <RegisterPage {title} />
   {:else if route === '/forgot-password' && authProvider?.forgotPassword}
@@ -195,10 +233,47 @@
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
-      {#key route + (params.resource ?? '') + (params.id ?? '')}
+      {#key route + (params.resource ?? '') + (params.id ?? '') + (params.variant ?? '') + (params.columns ?? '')}
       <div class="svadmin-page-enter">
-      {#if route.startsWith('/settings')}
+      {#if route === '/2fa'}
+        <TwoFactorAuthPage />
+      {:else if route === '/public-profile'}
+        <PublicProfilePage variant="default" initialTab="projects" />
+      {:else if route === '/public-profile/projects/:columns'}
+        <PublicProfilePage variant="default" initialTab="projects" columns={params.columns === '3' ? 3 : 2} />
+      {:else if route === '/public-profile/activity'}
+        <PublicProfilePage variant="default" initialTab="activity" />
+      {:else if route === '/public-profile/teams'}
+        <PublicProfilePage variant="default" initialTab="teams" />
+      {:else if route === '/public-profile/profiles/:variant'}
+        <PublicProfilePage variant={(params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default'} />
+      {:else if route === '/account/get-started'}
+        <GetStartedPage />
+      {:else if route === '/account/company-profile'}
+        <CompanyProfilePage />
+      {:else if route === '/account/settings-plain'}
+        <SettingsPlainPage />
+      {:else if route === '/account/settings-sidebar'}
+        <SettingsSidebarPage />
+      {:else if route === '/account/settings-enterprise'}
+        <SettingsEnterprisePage />
+      {:else if route === '/account/import-members'}
+        <ImportMembersPage />
+      {:else if route === '/account/members-starter'}
+        <MembersStarterPage />
+      {:else if route === '/account/team-members'}
+        <TeamMembersPage />
+      {:else if route === '/account/security-log'}
+        <SecurityLogPage />
+      {:else if route === '/network/user-cards'}
+        <UserCardsNFTPage />
+      {:else if route === '/network/team-crew'}
+        <TeamCrewTablePage />
+      {:else if route.startsWith('/settings')}
         <SettingsPage />
+      {:else if route === '/500' || (route === '/:resource' && params.resource === '500')}
+        {@const ErrorComp = mergedComponents.ErrorPage || ErrorPage}
+        <ErrorComp status="500" />
       {:else if route === '/' || route === ''}
         {#if dashboard}
           {@render dashboard()}
@@ -208,31 +283,34 @@
             <p class="text-muted-foreground">{t('common.dashboardHint')}</p>
           </div>
         {/if}
-      {:else if route === '/:resource' || route === '/:parent/:parentId/:resource'}
+      {:else if (route === '/:resource' || route === '/:parent/:parentId/:resource') && hasRouteResource}
         {#key params.resource}
-          {@const Comp = mergedComponents.AutoTable}
+          {@const Comp = currentResourcePages?.list ?? mergedComponents.AutoTable}
           <Comp resourceName={params.resource} />
         {/key}
-      {:else if route === '/:resource/create' || route === '/:parent/:parentId/:resource/create'}
+      {:else if (route === '/:resource/create' || route === '/:parent/:parentId/:resource/create') && hasRouteResource}
         {#key params.resource}
-          {@const Comp = mergedComponents.AutoForm}
+          {@const Comp = currentResourcePages?.create ?? mergedComponents.AutoForm}
           <Comp resourceName={params.resource} mode="create" />
         {/key}
-      {:else if route === '/:resource/edit/:id' || route === '/:parent/:parentId/:resource/edit/:id'}
+      {:else if (route === '/:resource/edit/:id' || route === '/:parent/:parentId/:resource/edit/:id') && hasRouteResource}
         {#key `${params.resource}-${params.id}`}
-          {@const Comp = mergedComponents.AutoForm}
+          {@const Comp = currentResourcePages?.edit ?? mergedComponents.AutoForm}
           <Comp resourceName={params.resource} mode="edit" id={params.id} />
         {/key}
-      {:else if route === '/:resource/show/:id' || route === '/:parent/:parentId/:resource/show/:id'}
+      {:else if (route === '/:resource/show/:id' || route === '/:parent/:parentId/:resource/show/:id') && hasRouteResource}
         {#key `${params.resource}-${params.id}`}
-          {@const Comp = mergedComponents.ShowPage}
+          {@const Comp = currentResourcePages?.show ?? mergedComponents.ShowPage}
           <Comp resourceName={params.resource} id={params.id} />
         {/key}
-      {:else if route === '/:resource/clone/:id' || route === '/:parent/:parentId/:resource/clone/:id'}
+      {:else if (route === '/:resource/clone/:id' || route === '/:parent/:parentId/:resource/clone/:id') && hasRouteResource}
         {#key `${params.resource}-clone-${params.id}`}
-          {@const Comp = mergedComponents.AutoForm}
+          {@const Comp = currentResourcePages?.clone ?? mergedComponents.AutoForm}
           <Comp resourceName={params.resource} mode="clone" id={params.id} />
         {/key}
+      {:else}
+        {@const ErrorComp = mergedComponents.ErrorPage || ErrorPage}
+        <ErrorComp status="404" />
       {/if}
       </div>
       {/key}

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

@@ -1,5 +1,5 @@
 import '../app.css';
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
 import { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
@@ -16,8 +16,38 @@ interface Props {
     themeConfig?: ThemeConfig;
     dashboard?: Snippet;
     loginPage?: Snippet;
+    /** Prefill and display credentials on the default login page, useful for demos/examples. */
+    loginDefaults?: {
+        identifier?: string;
+        password?: string;
+        hint?: string;
+    };
     /** Override default components via DI */
     components?: Partial<ComponentRegistry>;
+    /** Resource-specific page overrides while keeping svadmin defaults as fallback. */
+    resourcePages?: Record<string, {
+        list?: Component<{
+            resourceName: string;
+        }>;
+        create?: Component<{
+            resourceName: string;
+            mode?: 'create';
+        }>;
+        edit?: Component<{
+            resourceName: string;
+            mode?: 'edit';
+            id?: string | number;
+        }>;
+        show?: Component<{
+            resourceName: string;
+            id?: string | number;
+        }>;
+        clone?: Component<{
+            resourceName: string;
+            mode?: 'clone';
+            id?: string | number;
+        }>;
+    }>;
     /** Custom multi-level menu configuration */
     menu?: MenuItem[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
@@ -29,6 +59,6 @@ interface Props {
     /** Optional TanStack Query default options override when QueryClient is not supplied. */
     queryClientDefaultOptions?: DefaultOptions;
 }
-declare const AdminApp: import("svelte").Component<Props, {}, "">;
+declare const AdminApp: Component<Props, {}, "">;
 type AdminApp = ReturnType<typeof AdminApp>;
 export default AdminApp;