@svadmin/ui 0.11.2 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/component-registry.svelte.ts

@@ -24,6 +24,20 @@ export interface ComponentRegistry {
   Input: Component<any>;
   Badge: Component<any>;
   Skeleton: Component<any>;
+
+  // ─── Extended slots (optional) ──────────────────────────────
+  // These allow deeper customization without replacing entire Layout/Header.
+
+  /** Custom dashboard page component (replaces default welcome message) */
+  DashboardPage?: Component<any>;
+  /** Custom breadcrumbs component (replaces built-in Breadcrumbs) */
+  Breadcrumbs?: Component<any>;
+  /** Custom theme toggle button (replaces built-in Sun/Moon toggle) */
+  ThemeToggle?: Component<any>;
+  /** Custom user menu / avatar dropdown in the header */
+  UserMenu?: Component<any>;
+  /** Custom notification panel / bell icon in the header */
+  NotificationPanel?: Component<any>;
 }
 
 const REGISTRY_KEY = 'svadmin:components';

package/src/components/AdminApp.svelte

@@ -2,8 +2,8 @@
   // Auto-inject design tokens so consumers don't need to manually import
   import '../app.css';
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider } from '@svadmin/core';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig } from '@svadmin/core';
+  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
@@ -35,6 +35,8 @@
     locale?: string;
     title?: string;
     defaultTheme?: ThemeMode;
+    /** Theme configuration for dark-first mode, CSS overrides, etc. */
+    themeConfig?: ThemeConfig;
     dashboard?: Snippet;
     loginPage?: Snippet;
     /** Override default components via DI */
@@ -49,6 +51,7 @@
     locale,
     title = 'Admin',
     defaultTheme,
+    themeConfig: userThemeConfig,
     dashboard,
     loginPage,
     components: userComponents,
@@ -77,6 +80,7 @@
     setResources(resources);
     setRouterProvider(resolvedRouter);
     if (locale) setLocale(locale);
+    if (userThemeConfig) configureTheme(userThemeConfig);
     if (defaultTheme) setTheme(defaultTheme);
   });
 

package/src/components/Header.svelte

@@ -5,6 +5,7 @@
   import { getResolvedTheme, toggleTheme } from '@svadmin/core';
   import Breadcrumbs from './Breadcrumbs.svelte';
   import { t } from '@svadmin/core/i18n';
+  import { getComponentRegistry } from '../component-registry.svelte.js';
 
   let {
     showThemeToggle = false,
@@ -12,13 +13,23 @@
     showSearch = true,
     onSearchClick,
     children,
+    /** Slot for additional actions on the right side of the header */
+    rightActions,
   } = $props<{
     showThemeToggle?: boolean;
     showBreadcrumbs?: boolean;
     showSearch?: boolean;
     onSearchClick?: () => void;
     children?: import('svelte').Snippet;
+    rightActions?: import('svelte').Snippet;
   }>();
+
+  // Retrieve optional component overrides from registry
+  const registry = getComponentRegistry();
+  const CustomBreadcrumbs = registry.Breadcrumbs;
+  const CustomThemeToggle = registry.ThemeToggle;
+  const CustomUserMenu = registry.UserMenu;
+  const CustomNotificationPanel = registry.NotificationPanel;
 </script>
 
 <header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-card/60 backdrop-blur-md px-4 md:px-6">
@@ -27,10 +38,22 @@
       {@render children()}
     {/if}
     {#if showBreadcrumbs}
-      <Breadcrumbs />
+      {#if CustomBreadcrumbs}
+        <CustomBreadcrumbs />
+      {:else}
+        <Breadcrumbs />
+      {/if}
     {/if}
   </div>
   <div class="ml-auto flex items-center gap-2">
+    {#if rightActions}
+      {@render rightActions()}
+    {/if}
+
+    {#if CustomNotificationPanel}
+      <CustomNotificationPanel />
+    {/if}
+
     {#if showSearch && onSearchClick}
       <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
         <Search class="h-3.5 w-3.5" />
@@ -42,13 +65,22 @@
     {/if}
     
     {#if showThemeToggle}
-      <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
-        {#if getResolvedTheme() === 'dark'}
-          <Moon class="h-4 w-4 transition-all" />
-        {:else}
-          <Sun class="h-4 w-4 transition-all" />
-        {/if}
-      </TooltipButton>
+      {#if CustomThemeToggle}
+        <CustomThemeToggle />
+      {:else}
+        <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
+          {#if getResolvedTheme() === 'dark'}
+            <Moon class="h-4 w-4 transition-all" />
+          {:else}
+            <Sun class="h-4 w-4 transition-all" />
+          {/if}
+        </TooltipButton>
+      {/if}
+    {/if}
+
+    {#if CustomUserMenu}
+      <CustomUserMenu />
     {/if}
   </div>
 </header>
+