@svadmin/ui 0.28.0 → 0.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -20,7 +20,7 @@
     "./components/*": "./src/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.19.5",
+    "@svadmin/core": "^0.20.1",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",

package/src/app.css

@@ -99,6 +99,160 @@
     --sidebar-ring: oklch(0.55 0.18 264);
   }
 
+  /* ── Color Theme Overrides ──────────────────────────────
+   * Each [data-theme] selector overrides the primary-related
+   * CSS variables for both light and dark mode.
+   * Values match builtinPresets in @svadmin/core/theme.
+   * This CSS-level fallback prevents FOUC before JS inits.
+   */
+
+  /* Neutral */
+  [data-theme="neutral"] {
+    --primary: oklch(0.205 0.006 286);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.205 0.006 286);
+    --sidebar-primary: oklch(0.205 0.006 286);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.205 0.006 286);
+    --chart-1: oklch(0.488 0.243 264.376);
+  }
+  .dark[data-theme="neutral"],
+  .dark [data-theme="neutral"] {
+    --primary: oklch(0.922 0.004 286);
+    --primary-foreground: oklch(0.205 0.006 286);
+    --ring: oklch(0.556 0.004 286);
+    --sidebar-primary: oklch(0.922 0.004 286);
+    --sidebar-primary-foreground: oklch(0.205 0.006 286);
+    --sidebar-ring: oklch(0.556 0.004 286);
+    --chart-1: oklch(0.585 0.233 264);
+  }
+
+  /* Indigo (default) */
+  [data-theme="indigo"] {
+    --primary: oklch(0.488 0.243 264.376);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.488 0.243 264.376);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.488 0.243 264.376);
+    --chart-1: oklch(0.488 0.243 264.376);
+  }
+  .dark[data-theme="indigo"],
+  .dark [data-theme="indigo"] {
+    --primary: oklch(0.585 0.233 264);
+    --primary-foreground: oklch(0.15 0.04 265);
+    --ring: oklch(0.55 0.18 264);
+    --sidebar-primary: oklch(0.585 0.233 264);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.55 0.18 264);
+    --chart-1: oklch(0.585 0.233 264);
+  }
+
+  /* Blue */
+  [data-theme="blue"] {
+    --primary: oklch(0.546 0.245 262.881);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.546 0.245 262.881);
+    --sidebar-primary: oklch(0.546 0.245 262.881);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.546 0.245 262.881);
+    --chart-1: oklch(0.546 0.245 262.881);
+  }
+  .dark[data-theme="blue"],
+  .dark [data-theme="blue"] {
+    --primary: oklch(0.623 0.214 259.815);
+    --primary-foreground: oklch(0.15 0.04 265);
+    --ring: oklch(0.546 0.245 262.881);
+    --sidebar-primary: oklch(0.623 0.214 259.815);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.546 0.245 262.881);
+    --chart-1: oklch(0.623 0.214 259.815);
+  }
+
+  /* Green */
+  [data-theme="green"] {
+    --primary: oklch(0.527 0.185 150.069);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.527 0.185 150.069);
+    --sidebar-primary: oklch(0.527 0.185 150.069);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.527 0.185 150.069);
+    --chart-1: oklch(0.527 0.185 150.069);
+  }
+  .dark[data-theme="green"],
+  .dark [data-theme="green"] {
+    --primary: oklch(0.627 0.194 149.214);
+    --primary-foreground: oklch(0.15 0.05 150);
+    --ring: oklch(0.527 0.185 150.069);
+    --sidebar-primary: oklch(0.627 0.194 149.214);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.527 0.185 150.069);
+    --chart-1: oklch(0.627 0.194 149.214);
+  }
+
+  /* Rose */
+  [data-theme="rose"] {
+    --primary: oklch(0.577 0.245 27.325);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.577 0.245 27.325);
+    --sidebar-primary: oklch(0.577 0.245 27.325);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.577 0.245 27.325);
+    --chart-1: oklch(0.577 0.245 27.325);
+  }
+  .dark[data-theme="rose"],
+  .dark [data-theme="rose"] {
+    --primary: oklch(0.577 0.245 27.325);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.577 0.245 27.325);
+    --sidebar-primary: oklch(0.577 0.245 27.325);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.577 0.245 27.325);
+    --chart-1: oklch(0.577 0.245 27.325);
+  }
+
+  /* Orange */
+  [data-theme="orange"] {
+    --primary: oklch(0.646 0.222 41.116);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.646 0.222 41.116);
+    --sidebar-primary: oklch(0.646 0.222 41.116);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.646 0.222 41.116);
+    --chart-1: oklch(0.646 0.222 41.116);
+  }
+  .dark[data-theme="orange"],
+  .dark [data-theme="orange"] {
+    --primary: oklch(0.646 0.222 41.116);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.646 0.222 41.116);
+    --sidebar-primary: oklch(0.646 0.222 41.116);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.646 0.222 41.116);
+    --chart-1: oklch(0.646 0.222 41.116);
+  }
+
+  /* Violet */
+  [data-theme="violet"] {
+    --primary: oklch(0.541 0.281 293.009);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.541 0.281 293.009);
+    --sidebar-primary: oklch(0.541 0.281 293.009);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.541 0.281 293.009);
+    --chart-1: oklch(0.541 0.281 293.009);
+  }
+  .dark[data-theme="violet"],
+  .dark [data-theme="violet"] {
+    --primary: oklch(0.541 0.281 293.009);
+    --primary-foreground: oklch(0.985 0 0);
+    --ring: oklch(0.541 0.281 293.009);
+    --sidebar-primary: oklch(0.541 0.281 293.009);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-ring: oklch(0.541 0.281 293.009);
+    --chart-1: oklch(0.541 0.281 293.009);
+  }
+
   /* Stripe-inspired Soft Shadows — premium, multi-layered depth */
   [data-slot="button"],
   [data-slot="input"],

package/src/components/AdminApp.svelte

@@ -45,6 +45,8 @@
     components?: Partial<ComponentRegistry>;
     /** Custom multi-level menu configuration */
     menu?: MenuItem[];
+    /** External URL to the main application or workspace (renders a shortcut in the header) */
+    siteUrl?: string;
   }
 
   let {
@@ -60,6 +62,7 @@
     loginPage,
     components: userComponents,
     menu,
+    siteUrl,
   }: Props = $props();
 
   // Default component registry
@@ -148,7 +151,7 @@
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
-    <Layout {title} {menu}>
+    <Layout {title} {menu} {siteUrl}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
       {#if currentPath().startsWith('/settings')}

package/src/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Moon, Sun, Search } from '@lucide/svelte';
+  import { Moon, Sun, Search, MonitorUp } from '@lucide/svelte';
   import { Button } from './ui/button';
   import TooltipButton from './TooltipButton.svelte';
   import { getResolvedTheme, toggleTheme } from '@svadmin/core';
@@ -15,6 +15,7 @@
     children,
     /** Slot for additional actions on the right side of the header */
     rightActions,
+    siteUrl,
   } = $props<{
     showThemeToggle?: boolean;
     showBreadcrumbs?: boolean;
@@ -22,6 +23,7 @@
     onSearchClick?: () => void;
     children?: import('svelte').Snippet;
     rightActions?: import('svelte').Snippet;
+    siteUrl?: string;
   }>();
 
   // Retrieve optional component overrides from registry
@@ -50,6 +52,12 @@
       {@render rightActions()}
     {/if}
 
+    {#if siteUrl}
+      <TooltipButton tooltip={t('common.goToSite') || 'Site'} href={siteUrl} target="_blank" rel="noopener noreferrer" class="rounded-full flex items-center justify-center">
+        <MonitorUp class="h-4 w-4 text-muted-foreground transition-colors hover:text-foreground" />
+      </TooltipButton>
+    {/if}
+
     {#if CustomNotificationPanel}
       <CustomNotificationPanel />
     {/if}

package/src/components/Layout.svelte

@@ -22,7 +22,7 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin', menu }: { children: Snippet; title?: string; menu?: MenuItem[] } = $props();
+  let { children, title = 'Admin', menu, siteUrl }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string } = $props();
 
   let hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
@@ -138,6 +138,7 @@
     >
       <!-- Header with mobile hamburger -->
       <Header
+        {siteUrl}
         showSearch={true}
         onSearchClick={() => { commandOpen = true; }}
       >