@aspect-ops/exon-ui 0.2.1 → 0.3.0

package/dist/components/LogoCloud/LogoCloud.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+	export interface LogoItem {
+		src: string;
+		alt: string;
+		href?: string;
+	}
+
+	export interface LogoCloudProps {
+		logos: LogoItem[];
+		columns?: 2 | 3 | 4 | 5 | 6;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'grid' | 'scroll' | 'marquee';
+		grayscale?: boolean;
+		hoverEffect?: 'scale' | 'lift' | 'glow' | 'color' | 'none';
+		gap?: 'sm' | 'md' | 'lg' | 'xl';
+		title?: string;
+		subtitle?: string;
+		class?: string;
+	}
+
+	let {
+		logos,
+		columns = 4,
+		size = 'md',
+		variant = 'grid',
+		grayscale = false,
+		hoverEffect = 'scale',
+		gap = 'md',
+		title,
+		subtitle,
+		class: className = ''
+	}: LogoCloudProps = $props();
+
+	const sizeMap = {
+		sm: '2rem',
+		md: '3rem',
+		lg: '4rem'
+	};
+
+	const gapMap = {
+		sm: '1rem',
+		md: '2rem',
+		lg: '3rem',
+		xl: '4rem'
+	};
+
+	// For marquee variant, duplicate logos for seamless infinite scroll
+	const displayLogos = $derived(variant === 'marquee' ? [...logos, ...logos] : logos);
+</script>
+
+<div class="logo-cloud-wrapper {className}">
+	{#if title || subtitle}
+		<div class="logo-cloud-header">
+			{#if title}
+				<h2 class="logo-cloud-title">{title}</h2>
+			{/if}
+			{#if subtitle}
+				<p class="logo-cloud-subtitle">{subtitle}</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class="logo-cloud logo-cloud--{variant} logo-cloud--{size} logo-cloud--gap-{gap} logo-cloud--hover-{hoverEffect}"
+		class:logo-cloud--grayscale={grayscale}
+		style="--logo-cloud-height: {sizeMap[size]}; --logo-cloud-gap: {gapMap[
+			gap
+		]}; --logo-cloud-columns: {columns};"
+		aria-label={title || 'Partner logos'}
+		role="region"
+	>
+		<div class="logo-cloud-container">
+			{#each displayLogos as logo, index}
+				<div class="logo-cloud-item" aria-hidden={variant === 'marquee' && index >= logos.length}>
+					{#if logo.href}
+						<a href={logo.href} class="logo-cloud-link" target="_blank" rel="noopener noreferrer">
+							<img
+								src={logo.src}
+								alt={logo.alt}
+								class="logo-cloud-image"
+								loading="lazy"
+								decoding="async"
+							/>
+						</a>
+					{:else}
+						<img
+							src={logo.src}
+							alt={logo.alt}
+							class="logo-cloud-image"
+							loading="lazy"
+							decoding="async"
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.logo-cloud-wrapper {
+		width: 100%;
+	}
+
+	.logo-cloud-header {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.logo-cloud-title {
+		font-size: 2rem;
+		font-weight: 700;
+		margin: 0 0 0.5rem 0;
+		color: var(--logo-cloud-title-color, var(--text-primary, #1a1a1a));
+	}
+
+	.logo-cloud-subtitle {
+		font-size: 1rem;
+		margin: 0;
+		color: var(--logo-cloud-subtitle-color, var(--text-secondary, #666));
+	}
+
+	.logo-cloud {
+		width: 100%;
+		--logo-cloud-gap: 2rem;
+		--logo-cloud-height: 3rem;
+		--logo-cloud-columns: 4;
+		--logo-cloud-grayscale-opacity: 0.6;
+		--logo-cloud-transition: all 0.3s ease;
+	}
+
+	/* Grid variant */
+	.logo-cloud--grid .logo-cloud-container {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: var(--logo-cloud-gap);
+		align-items: center;
+		justify-items: center;
+	}
+
+	@media (min-width: 768px) {
+		.logo-cloud--grid .logo-cloud-container {
+			grid-template-columns: repeat(var(--logo-cloud-columns), 1fr);
+		}
+	}
+
+	/* Scroll variant */
+	.logo-cloud--scroll {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb, #ccc) var(--scrollbar-track, #f0f0f0);
+	}
+
+	.logo-cloud--scroll .logo-cloud-container {
+		display: flex;
+		gap: var(--logo-cloud-gap);
+		padding-bottom: 1rem;
+		min-width: min-content;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar {
+		height: 0.5rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-track {
+		background: var(--scrollbar-track, #f0f0f0);
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-thumb {
+		background: var(--scrollbar-thumb, #ccc);
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-thumb:hover {
+		background: var(--scrollbar-thumb-hover, #999);
+	}
+
+	/* Marquee variant */
+	.logo-cloud--marquee {
+		overflow: hidden;
+		position: relative;
+	}
+
+	.logo-cloud--marquee .logo-cloud-container {
+		display: flex;
+		gap: var(--logo-cloud-gap);
+		animation: marquee 30s linear infinite;
+		width: fit-content;
+	}
+
+	@keyframes marquee {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(-50%);
+		}
+	}
+
+	.logo-cloud--marquee:hover .logo-cloud-container,
+	.logo-cloud--marquee:focus-within .logo-cloud-container {
+		animation-play-state: paused;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.logo-cloud--marquee .logo-cloud-container {
+			animation: none;
+		}
+	}
+
+	/* Logo items */
+	.logo-cloud-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: var(--logo-cloud-transition);
+		flex-shrink: 0;
+	}
+
+	.logo-cloud--scroll .logo-cloud-item,
+	.logo-cloud--marquee .logo-cloud-item {
+		min-width: calc(var(--logo-cloud-height) * 2);
+	}
+
+	.logo-cloud-link {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		width: 100%;
+		height: 100%;
+		transition: var(--logo-cloud-transition);
+	}
+
+	.logo-cloud-link:focus {
+		outline: 2px solid var(--focus-ring-color, #0066ff);
+		outline-offset: 0.25rem;
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud-image {
+		height: var(--logo-cloud-height);
+		width: auto;
+		max-width: 100%;
+		object-fit: contain;
+		transition: var(--logo-cloud-transition);
+	}
+
+	/* Grayscale mode */
+	.logo-cloud--grayscale .logo-cloud-image {
+		filter: grayscale(100%);
+		opacity: var(--logo-cloud-grayscale-opacity);
+	}
+
+	.logo-cloud--grayscale .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--grayscale .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--grayscale .logo-cloud-link:focus .logo-cloud-image {
+		filter: grayscale(0%);
+		opacity: 1;
+	}
+
+	/* Hover effects */
+	/* Scale effect */
+	.logo-cloud--hover-scale .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-scale .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-scale .logo-cloud-link:focus .logo-cloud-image {
+		transform: scale(1.1);
+	}
+
+	/* Lift effect */
+	.logo-cloud--hover-lift .logo-cloud-item:hover,
+	.logo-cloud--hover-lift .logo-cloud-link:hover,
+	.logo-cloud--hover-lift .logo-cloud-link:focus {
+		transform: translateY(-0.5rem);
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+	}
+
+	/* Glow effect */
+	.logo-cloud--hover-glow .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-glow .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-glow .logo-cloud-link:focus .logo-cloud-image {
+		filter: drop-shadow(0 0 1rem rgba(0, 102, 255, 0.3));
+	}
+
+	/* Color effect (similar to grayscale but forces it) */
+	.logo-cloud--hover-color .logo-cloud-image {
+		filter: grayscale(100%);
+		opacity: var(--logo-cloud-grayscale-opacity);
+	}
+
+	.logo-cloud--hover-color .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-color .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-color .logo-cloud-link:focus .logo-cloud-image {
+		filter: grayscale(0%);
+		opacity: 1;
+	}
+
+	/* None effect - no additional styles needed */
+	.logo-cloud--hover-none .logo-cloud-item:hover,
+	.logo-cloud--hover-none .logo-cloud-link:hover {
+		transform: none;
+		box-shadow: none;
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.logo-cloud-title {
+			color: var(--logo-cloud-title-color, var(--text-primary, #ffffff));
+		}
+
+		.logo-cloud-subtitle {
+			color: var(--logo-cloud-subtitle-color, var(--text-secondary, #a0a0a0));
+		}
+
+		.logo-cloud--scroll {
+			scrollbar-color: var(--scrollbar-thumb, #555) var(--scrollbar-track, #2a2a2a);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-track {
+			background: var(--scrollbar-track, #2a2a2a);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-thumb {
+			background: var(--scrollbar-thumb, #555);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-thumb:hover {
+			background: var(--scrollbar-thumb-hover, #777);
+		}
+	}
+</style>

package/dist/components/LogoCloud/LogoCloud.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface LogoItem {
+    src: string;
+    alt: string;
+    href?: string;
+}
+export interface LogoCloudProps {
+    logos: LogoItem[];
+    columns?: 2 | 3 | 4 | 5 | 6;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'grid' | 'scroll' | 'marquee';
+    grayscale?: boolean;
+    hoverEffect?: 'scale' | 'lift' | 'glow' | 'color' | 'none';
+    gap?: 'sm' | 'md' | 'lg' | 'xl';
+    title?: string;
+    subtitle?: string;
+    class?: string;
+}
+declare const LogoCloud: import("svelte").Component<LogoCloudProps, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

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

@@ -0,0 +1,2 @@
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { LogoItem, LogoCloudProps } from './LogoCloud.svelte';

package/dist/components/LogoCloud/index.js

@@ -0,0 +1 @@
+export { default as LogoCloud } from './LogoCloud.svelte';

package/dist/components/Menu/MenuContent.svelte

@@ -36,6 +36,7 @@
 		z-index: 50;
 		min-width: 8rem;
 		max-width: 20rem;
+		overflow: hidden;
 	}
 
 	/* Animation states */

package/dist/components/Menu/MenuSubContent.svelte

@@ -25,6 +25,7 @@
 		z-index: 51;
 		min-width: 8rem;
 		max-width: 20rem;
+		overflow: hidden;
 	}
 
 	/* Animation states */

package/dist/components/Mermaid/Mermaid.svelte

@@ -15,6 +15,17 @@
 		clusterBkg?: string;
 		titleColor?: string;
 		edgeLabelBackground?: string;
+		textColor?: string;
+		// Sequence diagram specific
+		actorLineColor?: string;
+		signalColor?: string;
+		signalTextColor?: string;
+		labelTextColor?: string;
+		actorTextColor?: string;
+		messageTextColor?: string;
+		loopTextColor?: string;
+		activationBorderColor?: string;
+		sequenceNumberColor?: string;
 	}
 
 	interface Props {
@@ -28,17 +39,61 @@
 		children?: Snippet;
 	}
 
-	// Default ExonPro theme
-	const defaultTheme: ThemeVariables = {
+	// Light theme colors
+	const lightTheme: ThemeVariables = {
 		primaryColor: '#4654A3',
-		primaryTextColor: '#270949',
+		primaryTextColor: '#ffffff',
 		primaryBorderColor: '#4654A3',
-		lineColor: '#270949',
+		lineColor: '#4b5563',
 		secondaryColor: '#FF3131',
-		tertiaryColor: '#f3f4f6'
+		tertiaryColor: '#f3f4f6',
+		textColor: '#000000',
+		// Sequence diagram - dark colors for light backgrounds
+		actorLineColor: '#4b5563',
+		signalColor: '#374151',
+		signalTextColor: '#000000',
+		labelTextColor: '#000000',
+		actorTextColor: '#ffffff',
+		messageTextColor: '#000000',
+		loopTextColor: '#000000',
+		activationBorderColor: '#4b5563',
+		sequenceNumberColor: '#ffffff'
 	};
 
-	let { code, theme = defaultTheme, class: className = '', children }: Props = $props();
+	// Dark theme colors
+	const darkTheme: ThemeVariables = {
+		primaryColor: '#4654A3',
+		primaryTextColor: '#ffffff',
+		primaryBorderColor: '#4654A3',
+		lineColor: '#9ca3af',
+		secondaryColor: '#FF3131',
+		tertiaryColor: '#1f2937',
+		textColor: '#7dd3fc',
+		// Sequence diagram - sky blue colors for dark backgrounds
+		actorLineColor: '#38bdf8',
+		signalColor: '#38bdf8',
+		signalTextColor: '#7dd3fc',
+		labelTextColor: '#7dd3fc',
+		actorTextColor: '#ffffff',
+		messageTextColor: '#7dd3fc',
+		loopTextColor: '#7dd3fc',
+		activationBorderColor: '#38bdf8',
+		sequenceNumberColor: '#ffffff'
+	};
+
+	// Detect theme
+	function getThemeColors(): ThemeVariables {
+		if (typeof window === 'undefined') return lightTheme;
+
+		const isDark =
+			document.documentElement.classList.contains('dark') ||
+			document.body.classList.contains('dark') ||
+			window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+		return isDark ? darkTheme : lightTheme;
+	}
+
+	let { code, theme, class: className = '', children }: Props = $props();
 
 	let containerRef: HTMLDivElement | undefined = $state();
 	let slotRef: HTMLDivElement | undefined = $state();
@@ -62,11 +117,15 @@
 			const mermaidModule = await import('mermaid');
 			const mermaid = mermaidModule.default;
 
+			// Detect theme and merge with custom theme
+			const detectedTheme = getThemeColors();
+			const mergedTheme = { ...detectedTheme, ...theme };
+
 			// Initialize mermaid with theme
 			mermaid.initialize({
 				startOnLoad: false,
 				theme: 'base',
-				themeVariables: { ...defaultTheme, ...theme },
+				themeVariables: mergedTheme,
 				securityLevel: 'loose',
 				fontFamily: 'inherit'
 			});
@@ -203,4 +262,59 @@
 		max-width: 100%;
 		height: auto;
 	}
+
+	/* Force text colors in dark mode for all diagrams (flowchart + sequence) */
+	:global(.dark) .mermaid-diagram :global(svg text),
+	:global(.dark) .mermaid-diagram :global(svg .messageText),
+	:global(body.dark) .mermaid-diagram :global(svg text),
+	:global(body.dark) .mermaid-diagram :global(svg .messageText),
+	:global(html.dark) .mermaid-diagram :global(svg text),
+	:global(html.dark) .mermaid-diagram :global(svg .messageText) {
+		fill: #7dd3fc !important;
+	}
+
+	/* Force line colors in dark mode for all diagrams */
+	:global(.dark) .mermaid-diagram :global(svg .messageLine0),
+	:global(.dark) .mermaid-diagram :global(svg .messageLine1),
+	:global(.dark) .mermaid-diagram :global(svg line),
+	:global(.dark) .mermaid-diagram :global(svg path),
+	:global(.dark) .mermaid-diagram :global(svg .edgePath path),
+	:global(.dark) .mermaid-diagram :global(svg .flowchart-link),
+	:global(body.dark) .mermaid-diagram :global(svg .messageLine0),
+	:global(body.dark) .mermaid-diagram :global(svg .messageLine1),
+	:global(body.dark) .mermaid-diagram :global(svg line),
+	:global(body.dark) .mermaid-diagram :global(svg path),
+	:global(body.dark) .mermaid-diagram :global(svg .edgePath path),
+	:global(body.dark) .mermaid-diagram :global(svg .flowchart-link),
+	:global(html.dark) .mermaid-diagram :global(svg .messageLine0),
+	:global(html.dark) .mermaid-diagram :global(svg .messageLine1),
+	:global(html.dark) .mermaid-diagram :global(svg line),
+	:global(html.dark) .mermaid-diagram :global(svg path),
+	:global(html.dark) .mermaid-diagram :global(svg .edgePath path),
+	:global(html.dark) .mermaid-diagram :global(svg .flowchart-link) {
+		stroke: #38bdf8 !important;
+	}
+
+	/* Flowchart edge labels */
+	:global(.dark) .mermaid-diagram :global(svg .edgeLabel),
+	:global(body.dark) .mermaid-diagram :global(svg .edgeLabel),
+	:global(html.dark) .mermaid-diagram :global(svg .edgeLabel) {
+		color: #7dd3fc !important;
+	}
+
+	:global(.dark) .mermaid-diagram :global(svg .edgeLabel text),
+	:global(body.dark) .mermaid-diagram :global(svg .edgeLabel text),
+	:global(html.dark) .mermaid-diagram :global(svg .edgeLabel text) {
+		fill: #7dd3fc !important;
+	}
+
+	/* Keep actor text and node text white for readability */
+	:global(.dark) .mermaid-diagram :global(svg .actor text),
+	:global(.dark) .mermaid-diagram :global(svg .node text),
+	:global(body.dark) .mermaid-diagram :global(svg .actor text),
+	:global(body.dark) .mermaid-diagram :global(svg .node text),
+	:global(html.dark) .mermaid-diagram :global(svg .actor text),
+	:global(html.dark) .mermaid-diagram :global(svg .node text) {
+		fill: #ffffff !important;
+	}
 </style>

package/dist/components/Mermaid/Mermaid.svelte.d.ts

@@ -12,6 +12,16 @@ interface ThemeVariables {
     clusterBkg?: string;
     titleColor?: string;
     edgeLabelBackground?: string;
+    textColor?: string;
+    actorLineColor?: string;
+    signalColor?: string;
+    signalTextColor?: string;
+    labelTextColor?: string;
+    actorTextColor?: string;
+    messageTextColor?: string;
+    loopTextColor?: string;
+    activationBorderColor?: string;
+    sequenceNumberColor?: string;
 }
 interface Props {
     /** Mermaid diagram code. If not provided, uses slot content */

package/dist/components/PageHeader/PageHeader.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import Avatar from '../Avatar/Avatar.svelte';
+
+	interface Props {
+		/**
+		 * Greeting text to display (e.g., "Welcome back,")
+		 * @default "Welcome back,"
+		 */
+		greeting?: string;
+		/**
+		 * User name to display prominently
+		 */
+		userName: string;
+		/**
+		 * Avatar image source URL
+		 */
+		avatarSrc?: string;
+		/**
+		 * Custom initials for avatar (overrides auto-generated from userName)
+		 */
+		avatarInitials?: string;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Action icons snippet (e.g., notification bell, sync icon)
+		 */
+		actions?: import('svelte').Snippet;
+	}
+
+	let {
+		greeting = 'Welcome back,',
+		userName,
+		avatarSrc,
+		avatarInitials,
+		class: className = '',
+		actions
+	}: Props = $props();
+
+	// Use custom initials if provided, otherwise derive from userName
+	const displayName = $derived(avatarInitials || userName);
+</script>
+
+<header class="page-header {className}">
+	<div class="page-header__content">
+		<div class="page-header__greeting">
+			<span class="page-header__greeting-text">{greeting}</span>
+			<h1 class="page-header__name">{userName}</h1>
+		</div>
+
+		<div class="page-header__actions-wrapper">
+			{#if actions}
+				<div class="page-header__actions">
+					{@render actions()}
+				</div>
+			{/if}
+
+			<Avatar src={avatarSrc} name={displayName} size="md" class="page-header__avatar" />
+		</div>
+	</div>
+</header>
+
+<style>
+	.page-header {
+		font-family: inherit;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+	}
+
+	.page-header__content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-md, 1rem);
+		flex-wrap: wrap;
+	}
+
+	.page-header__greeting {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+		min-width: 0;
+		flex: 1;
+	}
+
+	.page-header__greeting-text {
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	.page-header__name {
+		font-size: 1.5rem;
+		line-height: 2rem;
+		font-weight: 700;
+		color: var(--color-text, #1f2937);
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.page-header__actions-wrapper {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		flex-shrink: 0;
+	}
+
+	.page-header__actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.page-header__avatar {
+		flex-shrink: 0;
+	}
+
+	/* Dark mode support (F11) */
+	:global([data-theme='dark']) .page-header__greeting-text {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	:global([data-theme='dark']) .page-header__name {
+		color: var(--color-text, #f9fafb);
+	}
+
+	/* Responsive - stack on very narrow screens */
+	@media (max-width: 360px) {
+		.page-header__content {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: var(--space-sm, 0.5rem);
+		}
+
+		.page-header__actions-wrapper {
+			align-self: flex-end;
+		}
+	}
+</style>