@svadmin/ui 0.44.0 → 0.45.0

package/dist/components/ForgotPasswordPage.svelte

@@ -7,7 +7,7 @@
   import { Label } from './ui/label/index.js';
   import * as Alert from './ui/alert/index.js';
   import SvadminLogo from './SvadminLogo.svelte';
-  import { User, ArrowLeft, CheckCircle, Loader2, AlertCircle } from '@lucide/svelte';
+  import { User, ArrowLeft, Loader2, AlertCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -16,7 +16,7 @@
   }>();
 
   const adminContext = captureAdminContext();
-  const forgot = useForgotPassword();
+  const forgot = useForgotPassword({ successNotification: false });
 
   let identifier = $state('');
   let error = $state('');
@@ -82,14 +82,14 @@
       <div class="space-y-1 mb-8">
         <h1 class="text-2xl font-semibold tracking-tight">
           {#if sent}
-            {i18n.t('auth.resetLinkSent')}
+            {i18n.t('auth.resetLinkSentTitle')}
           {:else}
             {i18n.t('auth.forgotPassword')}
           {/if}
         </h1>
         <p class="text-sm text-muted-foreground">
           {#if sent}
-            {i18n.t('auth.resetLinkSent')}
+            {i18n.t('auth.resetLinkSentDescription')}
           {:else}
             {i18n.t('auth.forgotPasswordDescription')}
           {/if}
@@ -98,10 +98,6 @@
 
       {#if sent}
         <div class="space-y-4">
-          <div class="flex items-center gap-3 rounded-lg border bg-muted/50 p-4">
-            <CheckCircle class="h-5 w-5 text-primary shrink-0" />
-            <p class="text-sm text-muted-foreground">{i18n.t('auth.resetLinkSent')}</p>
-          </div>
           <Button variant="outline" class="w-full" onclick={() => adminContext.navigate('/login')}>
             <ArrowLeft class="h-4 w-4 mr-2" />
             {i18n.t('auth.backToLogin')}

package/dist/components/LoginPage.svelte

@@ -35,7 +35,7 @@
   }>();
 
   const adminContext = captureAdminContext();
-  const login = useLogin({ errorMessage: false });
+  const login = useLogin({ successNotification: false, errorMessage: false });
   const authProvider = $derived(adminContext.authProvider);
 
   function getInitialIdentifier() {

package/dist/components/ProfilePage.svelte

@@ -2,6 +2,7 @@
   import {
     captureAdminContext,
     useGetIdentity,
+    useNotification,
     useUpdatePassword,
     type AuthProvider,
   } from '@svadmin/core';
@@ -12,12 +13,13 @@
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from '@lucide/svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, Camera } from '@lucide/svelte';
 
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
 
   const identity = useGetIdentity();
+  const notification = useNotification();
   const updatePw = useUpdatePassword();
 
   const authProvider = $derived(adminContext.authProvider);
@@ -27,7 +29,6 @@
   let editingProfile = $state(false);
   let editName = $state('');
   let profileSaving = $state(false);
-  let profileSuccess = $state(false);
   let profileError = $state('');
   let avatarUploading = $state(false);
   let fileInput = $state<HTMLInputElement>();
@@ -35,21 +36,18 @@
   let newPassword = $state('');
   let confirmPassword = $state('');
   let pwError = $state('');
-  let pwSuccess = $state(false);
   let scopeEpoch = 0;
 
   function resetProfileScope(): void {
     editingProfile = false;
     editName = '';
     profileSaving = false;
-    profileSuccess = false;
     profileError = '';
     avatarUploading = false;
     currentPassword = '';
     newPassword = '';
     confirmPassword = '';
     pwError = '';
-    pwSuccess = false;
   }
 
   function isActiveScope(
@@ -75,7 +73,6 @@
   function startEditProfile() {
     editName = identity.data?.name ?? '';
     editingProfile = true;
-    profileSuccess = false;
     profileError = '';
   }
 
@@ -90,9 +87,9 @@
       const result = await provider.updateProfile({ name: editName });
       if (!isActiveScope(epoch, provider, scopedTenantIdentity)) return;
       if (result.success) {
-        profileSuccess = true;
         editingProfile = false;
         identity.refetch();
+        notification.success(i18n.t('common.updateSuccess'), 3000);
       } else {
         profileError = result.error?.message ?? i18n.t('common.operationFailed');
       }
@@ -123,7 +120,6 @@
   async function handlePasswordChange(e: SubmitEvent) {
     e.preventDefault();
     pwError = '';
-    pwSuccess = false;
 
     if (!newPassword) { pwError = i18n.t('auth.passwordRequired'); return; }
     if (newPassword !== confirmPassword) { pwError = i18n.t('auth.passwordMismatch'); return; }
@@ -138,7 +134,6 @@
     });
     if (!isActiveScope(epoch, provider, scopedTenantIdentity)) return;
     if (result.success) {
-      pwSuccess = true;
       currentPassword = '';
       newPassword = '';
       confirmPassword = '';
@@ -174,13 +169,6 @@
           {i18n.t('common.loading')}
         </div>
       {:else if identity.data}
-        {#if profileSuccess}
-          <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
-            <CheckCircle class="h-4 w-4" />
-            <Alert.Description>{i18n.t('common.updateSuccess')}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
         <div class="flex items-start gap-6">
           <!-- Avatar -->
           <div class="shrink-0 relative group">
@@ -292,13 +280,6 @@
           </Alert.Root>
         {/if}
 
-        {#if pwSuccess}
-          <Alert.Root class="border-success/30 bg-success/5 text-success">
-            <CheckCircle class="h-4 w-4" />
-            <Alert.Description>{i18n.t('profile.passwordChanged')}</Alert.Description>
-          </Alert.Root>
-        {/if}
-
         <PasswordInput
           id="current-password"
           label={i18n.t('profile.currentPassword')}

package/dist/components/SecuritySettings.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { useNotification } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
-  import { AlertTriangle, CheckCircle2, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
+  import { AlertTriangle, KeyRound, Monitor, Shield, ShieldAlert, ShieldCheck, Smartphone, Trash2 } from '@lucide/svelte';
   import type { Component } from 'svelte';
   import * as Alert from './ui/alert/index.js';
   import * as Card from './ui/card/index.js';
@@ -11,6 +12,7 @@
   import PasswordInput from './PasswordInput.svelte';
 
   const i18n = useTranslation();
+  const notification = useNotification();
 
   interface SessionInfo {
     id: string;
@@ -32,13 +34,11 @@
   let currentPassword = $state('');
   let newPassword = $state('');
   let confirmPassword = $state('');
-  let passwordSuccessMessage = $state('');
   let passwordErrorMessage = $state('');
   let lastChanged = $state('3 months ago');
 
   function handlePasswordChange(event: SubmitEvent) {
     event.preventDefault();
-    passwordSuccessMessage = '';
     passwordErrorMessage = '';
 
     if (!currentPassword) {
@@ -54,7 +54,7 @@
       return;
     }
 
-    passwordSuccessMessage = i18n.t('profile.passwordChanged');
+    notification.success(i18n.t('profile.passwordChanged'), 3000);
     lastChanged = 'Just now';
     currentPassword = '';
     newPassword = '';
@@ -111,12 +111,6 @@
     </Card.CardHeader>
     <Card.CardContent>
       <form onsubmit={handlePasswordChange} class="max-w-sm space-y-4">
-        {#if passwordSuccessMessage}
-          <Alert.Root class="border-success/30 bg-success/5 text-success">
-            <CheckCircle2 class="h-4 w-4" />
-            <Alert.Description>{passwordSuccessMessage}</Alert.Description>
-          </Alert.Root>
-        {/if}
         {#if passwordErrorMessage}
           <Alert.Root variant="destructive">
             <AlertTriangle class="h-4 w-4" />

package/dist/components/Toast.svelte

@@ -20,11 +20,12 @@
     const queue = getToastQueue();
     if (queue.length > 0) {
       for (const t of queue) {
+        const options = { duration: t.duration, id: t.key ?? t.id };
         switch (t.type) {
-          case 'success': sonner.success(t.message, { duration: t.duration }); break;
-          case 'error': sonner.error(t.message, { duration: t.duration }); break;
-          case 'warning': sonner.warning(t.message, { duration: t.duration }); break;
-          case 'info': sonner.info(t.message, { duration: t.duration }); break;
+          case 'success': sonner.success(t.message, options); break;
+          case 'error': sonner.error(t.message, options); break;
+          case 'warning': sonner.warning(t.message, options); break;
+          case 'info': sonner.info(t.message, options); break;
         }
       }
       consumeToastQueue();
@@ -46,7 +47,8 @@
     position: "top-right",
     richColors: true,
     closeButton: true,
-    expand: true,
+    expand: false,
+    visibleToasts: 3,
     theme,
     toastOptions: {
       classes: {

package/dist/components/content/FeedbackNotice.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { CircleAlert, Info, TriangleAlert } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  export type FeedbackNoticeTone = 'info' | 'warning' | 'danger';
+  export type FeedbackNoticePriority = 'contextual' | 'blocking';
+
+  interface Props {
+    message: string;
+    tone?: FeedbackNoticeTone;
+    priority?: FeedbackNoticePriority;
+    action?: Snippet;
+    class?: string;
+  }
+
+  let {
+    message,
+    tone = 'info',
+    priority = 'contextual',
+    action,
+    class: className = '',
+  }: Props = $props();
+
+  const isBlocking = $derived(priority === 'blocking' || tone === 'danger');
+  const toneClass = $derived(
+    tone === 'danger'
+      ? 'border-destructive/40 bg-destructive/5 text-destructive'
+      : tone === 'warning'
+        ? 'border-warning/50 bg-warning/10 text-warning-foreground'
+        : 'border-border bg-muted/40 text-foreground',
+  );
+</script>
+
+<div
+  data-svadmin-feedback-notice
+  data-tone={tone}
+  data-priority={priority}
+  role={isBlocking ? 'alert' : 'status'}
+  aria-live={isBlocking ? 'assertive' : 'polite'}
+  class={cn(
+    'flex w-full flex-col gap-3 rounded-md border px-3 py-2.5 text-sm sm:flex-row sm:items-center',
+    isBlocking && 'border-l-2',
+    toneClass,
+    className,
+  )}
+>
+  <div class="flex min-w-0 flex-1 items-start gap-2.5">
+    {#if tone === 'danger'}
+      <CircleAlert class="mt-0.5 size-4 shrink-0" />
+    {:else if tone === 'warning'}
+      <TriangleAlert class="mt-0.5 size-4 shrink-0" />
+    {:else}
+      <Info class="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+    {/if}
+    <p class="min-w-0 leading-5">{message}</p>
+  </div>
+  {#if action}
+    <div class="shrink-0">{@render action()}</div>
+  {/if}
+</div>

package/dist/components/content/FeedbackNotice.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export type FeedbackNoticeTone = 'info' | 'warning' | 'danger';
+export type FeedbackNoticePriority = 'contextual' | 'blocking';
+interface Props {
+    message: string;
+    tone?: FeedbackNoticeTone;
+    priority?: FeedbackNoticePriority;
+    action?: Snippet;
+    class?: string;
+}
+declare const FeedbackNotice: import("svelte").Component<Props, {}, "">;
+type FeedbackNotice = ReturnType<typeof FeedbackNotice>;
+export default FeedbackNotice;

package/dist/components/content/index.d.ts

@@ -30,3 +30,5 @@ export type { NetworkColumn } from './NetworkTable.types.js';
 export { default as OtpInput } from './OtpInput.svelte';
 export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
+export { default as FeedbackNotice } from './FeedbackNotice.svelte';
+export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';

package/dist/components/content/index.js

@@ -20,3 +20,4 @@ export { default as NetworkTable } from './NetworkTable.svelte';
 export { default as OtpInput } from './OtpInput.svelte';
 export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
+export { default as FeedbackNotice } from './FeedbackNotice.svelte';

package/dist/index.d.ts

@@ -63,6 +63,8 @@ export { default as InlineEdit } from "./components/InlineEdit.svelte";
 export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
+export { default as FeedbackNotice } from './components/content/FeedbackNotice.svelte';
+export type { FeedbackNoticeTone, FeedbackNoticePriority, } from './components/content/FeedbackNotice.svelte';
 export { setRichTextEditor, getRichTextEditor } from "./editor-config.svelte.js";
 export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
 export { default as AboutSettings } from "./components/AboutSettings.svelte";

package/dist/index.js

@@ -66,6 +66,7 @@ export { default as InlineEdit } from "./components/InlineEdit.svelte";
 export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
+export { default as FeedbackNotice } from './components/content/FeedbackNotice.svelte';
 // Editor Registry
 export { setRichTextEditor, getRichTextEditor } from "./editor-config.svelte.js";
 // Settings & Preferences

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.37.0",
+    "@svadmin/core": "^0.38.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",