@mhmo91/schmancy 0.10.26 → 0.10.27

package/src/notification/notification-service.ts

@@ -1,3 +1,4 @@
+import { fromEvent } from 'rxjs'
 import { $sounds, type Feeling } from '../audio'
 import SchmancyNotification, { NotificationType } from './notification'
 
@@ -19,230 +20,62 @@ const typeToFeeling: Record<NotificationType, Feeling> = {
 	error: 'disappointed',
 }
 
-// Track last mouse position
-let lastClickPosition = { x: window.innerWidth - 100, y: 50 }
+const typeDurations: Record<NotificationType, number> = {
+	success: 1500,
+	info: 2000,
+	warning: 2500,
+	error: 2500,
+}
+
+$sounds.setVolume(0.1)
 
-// Global mousedown listener to track click position
+// Track last mouse position via RxJS
+let lastClickPosition = { x: window.innerWidth - 100, y: 50 }
 if (typeof window !== 'undefined') {
-	window.addEventListener(
-		'mousedown',
-		(e: MouseEvent) => {
+	fromEvent<MouseEvent>(window, 'mousedown', { capture: true, passive: true } as AddEventListenerOptions).subscribe(
+		e => {
 			lastClickPosition = { x: e.clientX, y: e.clientY }
 		},
-		{ capture: true, passive: true },
 	)
 }
 
-// Track current notification element
 let currentNotification: SchmancyNotification | null = null
+const notificationStack: string[] = []
 
-/**
- * Notification service for centralized notification management.
- * Provides a simple API for showing notifications.
- */
-export class NotificationService {
-	private static instance: NotificationService
-	private notificationStack: string[] = []
-	private audioVolume = 0.1
-
-	// Default notification options
-	private static DEFAULT_OPTIONS: Partial<NotificationOptions> = {
-		duration: 1000, // 1 seconds - long enough to be readable
-		closable: true,
-		playSound: true,
-	}
-
-	// Type-specific default durations (in milliseconds)
-	private static TYPE_DURATIONS: Record<NotificationType, number> = {
-		success: 1500, // 1.5 seconds - quick confirmation
-		info: 2000, // 2 seconds - informational
-		warning: 2500, // 2.5 seconds - needs attention
-		error: 2500, // 2.5 seconds - important
-	}
-
-	// Private constructor for singleton pattern
-	private constructor() {
-		$sounds.setVolume(this.audioVolume)
-	}
-
-	/**
-	 * Get the singleton instance
-	 */
-	public static getInstance(): NotificationService {
-		if (!NotificationService.instance) {
-			NotificationService.instance = new NotificationService()
-		}
-		return NotificationService.instance
-	}
-
-	/**
-	 * Show a notification
-	 * @returns The ID of the created notification
-	 */
-	public notify(options: NotificationOptions): string {
-		// Apply default options
-		const completeOptions = {
-			...NotificationService.DEFAULT_OPTIONS,
-			...options,
-			// Override with duraton from options if provided, otherwise use default
-			duration: options.duration ?? NotificationService.DEFAULT_OPTIONS.duration,
-		}
-
-		const id = completeOptions.id || `notification-${Date.now()}-${Math.floor(Math.random() * 10000)}`
-
-		// Add to stack for tracking
-		this.notificationStack.push(id)
-
-		// Remove existing notification if any (only 1 at a time)
-		if (currentNotification) {
-			currentNotification.remove()
-			currentNotification = null
-		}
-
-		// Create the notification element directly
-		const notification = document.createElement('sch-notification') as SchmancyNotification
-		notification.id = id
-		notification.title = completeOptions.title || ''
-		notification.message = completeOptions.message
-		notification.type = completeOptions.type || 'info'
-		notification.duration = completeOptions.duration ?? 1000
-		notification.closable = completeOptions.closable !== false
-		notification.playSound = false // We handle sound here
-		notification.showProgress = completeOptions.showProgress || false
-		notification.startPosition = { ...lastClickPosition }
-
-		// Play sound if enabled
-		if (completeOptions.playSound !== false) {
-			$sounds.play(typeToFeeling[notification.type])
-		}
-
-		// Listen for close event
-		notification.addEventListener('close', () => {
-			const index = this.notificationStack.indexOf(id)
-			if (index > -1) {
-				this.notificationStack.splice(index, 1)
-			}
-			notification.remove()
-			if (currentNotification === notification) {
-				currentNotification = null
-			}
-		})
-
-		// Append to body
-		document.body.appendChild(notification)
-		currentNotification = notification
-
-		return id
-	}
-
-	/**
-	 * Dismiss a notification
-	 * @param id Optional notification ID. If not provided, dismisses the most recent notification
-	 */
-	public dismiss(id?: string): void {
-		let targetId: string | undefined
-
-		if (id) {
-			// Remove specific notification from stack
-			const index = this.notificationStack.indexOf(id)
-			if (index > -1) {
-				this.notificationStack.splice(index, 1)
-				targetId = id
-			}
-		} else {
-			// Remove most recent notification (last in stack)
-			targetId = this.notificationStack.pop()
-		}
-
-		if (targetId && currentNotification && currentNotification.id === targetId) {
-			currentNotification.close()
-		}
-	}
-
-	/**
-	 * Update a notification's content
-	 */
-	public update(id: string, options: Partial<NotificationOptions>): void {
-		if (currentNotification && currentNotification.id === id) {
-			if (options.title !== undefined) currentNotification.title = options.title
-			if (options.message !== undefined) currentNotification.message = options.message
-			if (options.type !== undefined) currentNotification.type = options.type
-		}
-	}
-
-	/**
-	 * Show an info notification
-	 */
-	public info(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
-		return this.notify({
-			message: message ?? '',
-			type: 'info',
-			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.info) : 1,
-			...options,
-		})
-	}
-
-	/**
-	 * Show a success notification
-	 */
-	public success(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
-		return this.notify({
-			message: message ?? '',
-			type: 'success',
-			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.success) : 1,
-			...options,
-		})
-	}
+function show(options: NotificationOptions): string {
+	const id = options.id ?? `notification-${Date.now()}-${Math.floor(Math.random() * 10000)}`
+	notificationStack.push(id)
 
-	/**
-	 * Show a warning notification
-	 */
-	public warning(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
-		return this.notify({
-			message: message ?? '',
-			type: 'warning',
-			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.warning) : 1,
-			...options,
-		})
+	if (currentNotification) {
+		currentNotification.remove()
+		currentNotification = null
 	}
 
-	/**
-	 * Show an error notification
-	 */
-	public error(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
-		return this.notify({
-			message: message ?? '',
-			type: 'error',
-			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.error) : 1,
-			...options,
-		})
+	const notification = document.createElement('sch-notification') as SchmancyNotification
+	notification.id = id
+	notification.title = options.title ?? ''
+	notification.message = options.message
+	notification.type = options.type ?? 'info'
+	notification.duration = options.duration ?? 1000
+	notification.closable = options.closable !== false
+	notification.playSound = false
+	notification.showProgress = options.showProgress ?? false
+	notification.startPosition = { ...lastClickPosition }
+
+	if (options.playSound !== false) {
+		$sounds.play(typeToFeeling[notification.type])
 	}
 
-	/**
-	 * Show a notification with a custom duration
-	 */
-	public customDuration(
-		message: string,
-		duration: number,
-		options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {},
-	): string {
-		return this.notify({
-			message,
-			duration,
-			...options,
-		})
-	}
+	fromEvent(notification, 'close').subscribe(() => {
+		const index = notificationStack.indexOf(id)
+		if (index > -1) notificationStack.splice(index, 1)
+		notification.remove()
+		if (currentNotification === notification) currentNotification = null
+	})
 
-	/**
-	 * Show a persistent notification (won't auto-dismiss)
-	 */
-	public persistent(message: string, options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {}): string {
-		return this.notify({
-			message,
-			duration: 0, // Zero duration means no auto-close
-			...options,
-		})
-	}
+	document.body.appendChild(notification)
+	currentNotification = notification
+	return id
 }
 
 /**
@@ -259,74 +92,59 @@ export class NotificationService {
  * @method warning(message, options?) - Amber warning toast.
  */
 export const $notify = {
-	/**
-	 * Show a notification
-	 */
-	show: (options: NotificationOptions): string => {
-		return NotificationService.getInstance().notify(options)
-	},
+	show,
 
-	/**
-	 * Show an info notification
-	 */
-	info: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
-		return NotificationService.getInstance().info(message, options)
-	},
+	info: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string =>
+		show({
+			message: message ?? '',
+			type: 'info',
+			duration: message ? (options.duration ?? typeDurations.info) : 1,
+			...options,
+		}),
 
-	/**
-	 * Show a success notification
-	 */
-	success: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
-		return NotificationService.getInstance().success(message, options)
-	},
+	success: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string =>
+		show({
+			message: message ?? '',
+			type: 'success',
+			duration: message ? (options.duration ?? typeDurations.success) : 1,
+			...options,
+		}),
 
-	/**
-	 * Show a warning notification
-	 */
-	warning: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
-		return NotificationService.getInstance().warning(message, options)
-	},
+	warning: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string =>
+		show({
+			message: message ?? '',
+			type: 'warning',
+			duration: message ? (options.duration ?? typeDurations.warning) : 1,
+			...options,
+		}),
 
-	/**
-	 * Show an error notification
-	 */
-	error: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
-		return NotificationService.getInstance().error(message, options)
-	},
+	error: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string =>
+		show({
+			message: message ?? '',
+			type: 'error',
+			duration: message ? (options.duration ?? typeDurations.error) : 1,
+			...options,
+		}),
 
-	/**
-	 * Show a notification with a custom duration
-	 * @param message The notification message
-	 * @param duration Duration in milliseconds before auto-dismissing (0 for no auto-dismiss)
-	 * @param options Additional notification options
-	 */
 	customDuration: (
 		message: string,
 		duration: number,
 		options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {},
-	): string => {
-		return NotificationService.getInstance().customDuration(message, duration, options)
-	},
+	): string => show({ message, duration, ...options }),
 
-	/**
-	 * Show a persistent notification that won't auto-dismiss
-	 */
-	persistent: (message: string, options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {}): string => {
-		return NotificationService.getInstance().persistent(message, options)
-	},
+	persistent: (message: string, options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {}): string =>
+		show({ message, duration: 0, ...options }),
 
-	/**
-	 * Dismiss a notification
-	 * @param id Optional notification ID. If not provided, dismisses the most recent notification (queue-like behavior)
-	 */
 	dismiss: (id?: string): void => {
-		return NotificationService.getInstance().dismiss(id)
+		const targetId = id ? (notificationStack.splice(notificationStack.indexOf(id), 1)[0]) : notificationStack.pop()
+		if (targetId && currentNotification?.id === targetId) currentNotification.close()
 	},
 
-	/**
-	 * Update a notification's content
-	 */
 	update: (id: string, options: Partial<NotificationOptions>): void => {
-		return NotificationService.getInstance().update(id, options)
+		if (currentNotification?.id !== id) return
+		if (options.title !== undefined) currentNotification.title = options.title
+		if (options.message !== undefined) currentNotification.message = options.message
+		if (options.type !== undefined) currentNotification.type = options.type
 	},
 }
+

package/src/notification/notification.scss

@@ -5,112 +5,155 @@
 .notification {
 	position: relative;
 	display: flex;
-	align-items: flex-start;
-	gap: 10px;
-	padding: 12px;
-	padding-right: 32px;
-	background: var(--schmancy-sys-color-surface-container);
-	border-radius: var(--schmancy-sys-shape-corner-extraLarge, 16px);
-	color: var(--schmancy-sys-color-surface-on);
-	max-width: 320px;
+	align-items: stretch;
+	max-width: 360px;
 	overflow: hidden;
 
-	/* Type-colored luminous glow */
+	/* Asymmetric radius: 4px left, 14px right */
+	border-radius: 4px 14px 14px 4px;
+	outline: 1px solid color-mix(in srgb, var(--schmancy-sys-color-outline-variant) 50%, transparent);
+
+	background: linear-gradient(
+		180deg,
+		color-mix(in srgb, var(--schmancy-sys-color-surface-container) 100%, transparent),
+		color-mix(in srgb, var(--schmancy-sys-color-surface-containerHigh) 100%, transparent)
+	);
+
+	color: var(--schmancy-sys-color-surface-on);
+
+	/* Type-colored luminous glow — tightened */
 	--notification-glow-color: var(--schmancy-sys-color-primary-default);
-	box-shadow: 0 4px 24px -6px color-mix(in srgb, var(--notification-glow-color) 18%, transparent);
+	box-shadow:
+		0 6px 28px -10px color-mix(in srgb, var(--notification-glow-color) 22%, transparent),
+		0 1px 0 0 color-mix(in srgb, var(--schmancy-sys-color-outline-variant) 30%, transparent);
 
 	transition:
 		box-shadow 300ms ease,
 		transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
 
-	&.info { --notification-glow-color: var(--schmancy-sys-color-primary-default); }
-	&.success { --notification-glow-color: var(--schmancy-sys-color-success-default); }
-	&.warning { --notification-glow-color: var(--schmancy-sys-color-warning-default); }
-	&.error { --notification-glow-color: var(--schmancy-sys-color-error-default); }
+	&.info {
+		--notification-glow-color: var(--schmancy-sys-color-primary-default);
+		--notification-accent: var(--schmancy-sys-color-primary-default);
+	}
+	&.success {
+		--notification-glow-color: var(--schmancy-sys-color-success-default);
+		--notification-accent: var(--schmancy-sys-color-success-default);
+	}
+	&.warning {
+		--notification-glow-color: var(--schmancy-sys-color-tertiary-default);
+		--notification-accent: var(--schmancy-sys-color-tertiary-default);
+	}
+	&.error {
+		--notification-glow-color: var(--schmancy-sys-color-error-default);
+		--notification-accent: var(--schmancy-sys-color-error-default);
+	}
 
 	&.hovered {
-		box-shadow: 0 8px 32px -4px color-mix(in srgb, var(--notification-glow-color) 28%, transparent);
+		box-shadow:
+			0 10px 36px -8px color-mix(in srgb, var(--notification-glow-color) 34%, transparent),
+			0 1px 0 0 color-mix(in srgb, var(--schmancy-sys-color-outline-variant) 30%, transparent);
 		transform: translateY(-2px);
+
+		.accent-rail {
+			width: 4px;
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {
 		transition: box-shadow 200ms ease;
-		&.hovered { transform: none; }
+
+		&.hovered {
+			transform: none;
+		}
 	}
 }
 
-.emoji {
-	font-size: 20px;
-	line-height: 1;
+/* Vertical accent rail — left edge */
+.accent-rail {
 	flex-shrink: 0;
-	margin-top: 1px;
+	width: 3px;
+	background: var(--notification-accent, var(--schmancy-sys-color-primary-default));
+	border-radius: 4px 0 0 4px;
+	transition: width 200ms ease;
+	align-self: stretch;
 }
 
+/* Card body */
 .content {
 	flex: 1;
 	min-width: 0;
+	padding: 14px 36px 14px 18px;
 }
 
+/* Monospace uppercase type tag */
+.type-tag {
+	display: block;
+	font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+	font-size: 10px;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+	opacity: 0.7;
+	color: var(--notification-accent, var(--schmancy-sys-color-primary-default));
+	margin-bottom: 4px;
+	line-height: 1;
+}
+
+/* Serif display title */
 .title {
+	font-family: ui-serif, Georgia, Cambria, 'Times New Roman', serif;
 	font-weight: 500;
-	font-size: 13px;
-	line-height: 1.4;
-	margin-bottom: 2px;
-	letter-spacing: 0.01em;
-
-	.info & {
-		color: var(--schmancy-sys-color-primary-default);
-	}
-	.success & {
-		color: var(--schmancy-sys-color-success-default);
-	}
-	.warning & {
-		color: var(--schmancy-sys-color-tertiary-default);
-	}
-	.error & {
-		color: var(--schmancy-sys-color-error-default);
-	}
+	font-size: 15px;
+	line-height: 1.3;
+	margin-bottom: 3px;
+	color: var(--schmancy-sys-color-surface-on);
 }
 
+/* Body message */
 .message {
+	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
 	font-size: 13px;
-	line-height: 1.4;
-	opacity: 0.75;
-	letter-spacing: 0.01em;
+	line-height: 1.45;
+	opacity: 0.72;
 }
 
+/* Close button — 28×28 hit target, × glyph */
 .close {
 	position: absolute;
-	top: 8px;
+	top: 6px;
 	right: 6px;
+	width: 28px;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	background: none;
 	border: none;
-	font-size: 16px;
-	font-weight: 300;
+	font-size: 18px;
+	font-weight: 400;
 	color: var(--schmancy-sys-color-surface-onVariant);
 	cursor: pointer;
-	padding: 4px 6px;
+	padding: 0;
 	line-height: 1;
 	opacity: 0.4;
-	border-radius: var(--schmancy-sys-shape-corner-full, 50%);
+	border-radius: 50%;
 	transition: opacity 200ms ease;
 
 	&:hover {
-		opacity: 0.8;
+		opacity: 0.85;
 	}
 
 	&:focus-visible {
 		outline: none;
 		opacity: 1;
-		box-shadow:
-			0 0 0 2px var(--schmancy-sys-color-primary-default),
-			0 0 8px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 25%, transparent);
+		box-shadow: 0 0 0 2px var(--notification-accent, var(--schmancy-sys-color-primary-default));
 	}
 }
 
+/* Progress hairline — top edge */
 .progress {
 	position: absolute;
-	bottom: 0;
+	top: 0;
+	bottom: auto;
 	left: 0;
 	right: 0;
 }