@svadmin/ui 0.11.1 → 0.12.0

package/package.json

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

package/src/app.css

@@ -8,6 +8,14 @@
  */
 
 @layer base {
+  /* Global border-color reset — ensures Tailwind border utilities
+   * (border-r, border-t, etc.) use the theme color instead of currentColor */
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+  }
+
   :root {
     --radius: 0.5rem;
     --background: oklch(0.98 0.002 264);
@@ -169,3 +177,59 @@ body {
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 }
+
+/* ─── svadmin UI Components CSS ─────────────────────────────── */
+/* These rules were moved from .svelte files to eliminate <style> tags */
+
+/* MarkdownRenderer Styles */
+.prose {
+  line-height: 1.6;
+}
+.prose p {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Streaming cursor effect */
+.streaming > *:last-child::after {
+  content: '▋';
+  display: inline-block;
+  animation: svadmin-blink 1s step-start infinite;
+  margin-left: 2px;
+  vertical-align: baseline;
+  color: currentColor;
+}
+
+@keyframes svadmin-blink {
+  50% { opacity: 0; }
+}
+
+/* Handle copied state for dynamically injected buttons */
+.copy-btn[data-copied-id] {
+  color: #10b981; /* Tailwind emerald-500 */
+}
+.copy-btn[data-copied-id] svg {
+  /* Swap to Check icon */
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+}
+
+/* ChatDialog Styles */
+.chat-markdown pre.chat-code-block {
+  background: var(--color-muted, hsl(var(--muted)));
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+.chat-markdown code.chat-inline-code {
+  background: var(--color-muted, hsl(var(--muted)));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.8125em;
+  font-family: ui-monospace, monospace;
+}
+.chat-markdown strong {
+  font-weight: 600;
+}

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/ChatDialog.svelte

@@ -446,24 +446,4 @@
   {/if}
 {/if}
 
-<style>
-  :global(.chat-markdown pre.chat-code-block) {
-    background: hsl(var(--muted));
-    border-radius: 0.5rem;
-    padding: 0.75rem;
-    margin: 0.5rem 0;
-    overflow-x: auto;
-    font-size: 0.75rem;
-    line-height: 1.5;
-  }
-  :global(.chat-markdown code.chat-inline-code) {
-    background: hsl(var(--muted));
-    padding: 0.125rem 0.375rem;
-    border-radius: 0.25rem;
-    font-size: 0.8125em;
-    font-family: ui-monospace, monospace;
-  }
-  :global(.chat-markdown strong) {
-    font-weight: 600;
-  }
-</style>
+

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>
+

package/src/components/MarkdownRenderer.svelte

@@ -109,36 +109,4 @@
   {@html html}
 </div>
 
-<style>
-  /* Base Markdown Styles */
-  :global(.prose) {
-    line-height: 1.6;
-  }
-  :global(.prose p) {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-  
-  /* Streaming cursor effect */
-  .streaming > :global(*:last-child)::after {
-    content: '▋';
-    display: inline-block;
-    animation: blink 1s step-start infinite;
-    margin-left: 2px;
-    vertical-align: baseline;
-    color: currentColor;
-  }
 
-  @keyframes blink {
-    50% { opacity: 0; }
-  }
-
-  /* Handle copied state for dynamically injected buttons */
-  :global(.copy-btn[data-copied-id]) {
-    color: #10b981; /* Tailwind emerald-500 */
-  }
-  :global(.copy-btn[data-copied-id] svg) {
-    /* Swap to Check icon */
-    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
-  }
-</style>