@aspect-ops/exon-ui 0.2.1 → 0.2.2

package/dist/components/DoughnutChart/DoughnutChart.svelte

@@ -212,6 +212,17 @@
 						</text>
 					{/if}
 				{/each}
+
+				<!-- Background circle for center content -->
+				{#if showTotal}
+					<circle
+						cx={size / 2}
+						cy={size / 2}
+						r={innerRadius * 0.95}
+						fill="var(--color-bg, #ffffff)"
+						class="doughnut-chart__center-bg"
+					/>
+				{/if}
 			</svg>
 
 			<!-- Center total -->
@@ -290,6 +301,11 @@
 		pointer-events: none;
 	}
 
+	/* Center Background */
+	.doughnut-chart__center-bg {
+		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+	}
+
 	/* Center */
 	.doughnut-chart__center {
 		position: absolute;
@@ -298,12 +314,13 @@
 		transform: translate(-50%, -50%);
 		text-align: center;
 		pointer-events: none;
+		z-index: 10;
 	}
 
 	.doughnut-chart__total {
 		display: block;
-		font-size: var(--text-2xl, 1.5rem);
-		font-weight: var(--font-bold, 700);
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: var(--font-semibold, 600);
 		color: var(--color-text, #1f2937);
 		line-height: 1.2;
 	}
@@ -314,6 +331,7 @@
 		color: var(--color-text-muted, #6b7280);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
+		margin-top: 2px;
 	}
 
 	/* Legend */

package/dist/components/Icon/Icon.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { IconSize } from '../../types/index.js';
+	import type { ComponentType } from 'svelte';
 
 	interface Props {
-		name: string;
+		icon: ComponentType;
 		size?: IconSize;
 		class?: string;
 		'aria-label'?: string;
@@ -10,38 +11,34 @@
 	}
 
 	let {
-		name,
+		icon: IconComponent,
 		size = 'md',
 		class: className = '',
 		'aria-label': ariaLabel,
 		'aria-hidden': ariaHidden = !ariaLabel
 	}: Props = $props();
 
-	// Size map aligned with typography scale
-	const sizeMap: Record<IconSize, string> = {
-		xs: '0.75rem',
-		sm: '1rem',
-		md: '1.25rem',
-		lg: '1.5rem',
-		xl: '2rem'
+	// Size map aligned with typography scale (in pixels for Lucide)
+	const sizeMap: Record<IconSize, number> = {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
 	};
 </script>
 
-<svg
+<IconComponent
+	size={sizeMap[size]}
 	class="icon icon--{size} {className}"
-	style="--icon-size: {sizeMap[size]}"
 	aria-label={ariaLabel}
 	aria-hidden={ariaHidden}
 	role={ariaLabel ? 'img' : undefined}
->
-	<use href="#{name}" />
-</svg>
+/>
 
 <style>
-	.icon {
-		width: var(--icon-size);
-		height: var(--icon-size);
-		fill: currentColor;
+	:global(.icon) {
 		flex-shrink: 0;
+		color: currentColor;
 	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { IconSize } from '../../types/index.js';
+import type { ComponentType } from 'svelte';
 interface Props {
-    name: string;
+    icon: ComponentType;
     size?: IconSize;
     class?: string;
     'aria-label'?: string;

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>

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

@@ -0,0 +1,30 @@
+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;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

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

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

package/dist/components/PageHeader/index.js

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

package/dist/components/StatCircle/StatCircle.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	interface Props {
+		/** The numeric value or string to display inside the circle */
+		value: number | string;
+		/** Label text displayed below the circle */
+		label: string;
+		/** Color variant for the value text */
+		color?: 'default' | 'primary' | 'warning' | 'error' | 'success';
+		/** Size of the circle */
+		size?: 'sm' | 'md' | 'lg';
+		/** Makes the circle clickable with hover effects */
+		clickable?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Click handler */
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		value,
+		label,
+		color = 'default',
+		size = 'md',
+		clickable = false,
+		class: className = '',
+		onclick
+	}: Props = $props();
+</script>
+
+{#if clickable}
+	<button
+		class="stat-circle stat-circle--{color} stat-circle--{size} stat-circle--clickable {className}"
+		{onclick}
+		type="button"
+	>
+		<div class="stat-circle__circle">
+			<div class="stat-circle__value">{value}</div>
+		</div>
+		<div class="stat-circle__label">{label}</div>
+	</button>
+{:else}
+	<div class="stat-circle stat-circle--{color} stat-circle--{size} {className}">
+		<div class="stat-circle__circle">
+			<div class="stat-circle__value">{value}</div>
+		</div>
+		<div class="stat-circle__label">{label}</div>
+	</div>
+{/if}
+
+<style>
+	.stat-circle {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		font-family: inherit;
+	}
+
+	.stat-circle--clickable {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stat-circle--clickable:hover .stat-circle__circle {
+		transform: scale(1.05);
+	}
+
+	.stat-circle--clickable:active .stat-circle__circle {
+		transform: scale(0.98);
+	}
+
+	.stat-circle__circle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-bg-subtle, #f9fafb);
+		border: 1px solid var(--color-border-subtle, #e5e7eb);
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+
+	.stat-circle--clickable:focus-visible .stat-circle__circle {
+		outline: 2px solid var(--color-focus, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.stat-circle__value {
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.stat-circle__label {
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		color: var(--color-text-muted, #6b7280);
+		text-align: center;
+	}
+
+	/* Size variants */
+	.stat-circle--sm .stat-circle__circle {
+		width: 3rem;
+		height: 3rem;
+		min-width: 3rem;
+		min-height: 3rem;
+	}
+
+	.stat-circle--sm .stat-circle__value {
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	.stat-circle--md .stat-circle__circle {
+		width: 4rem;
+		height: 4rem;
+		min-width: 4rem;
+		min-height: 4rem;
+	}
+
+	.stat-circle--md .stat-circle__value {
+		font-size: var(--text-2xl, 1.5rem);
+	}
+
+	.stat-circle--lg .stat-circle__circle {
+		width: 5rem;
+		height: 5rem;
+		min-width: 5rem;
+		min-height: 5rem;
+	}
+
+	.stat-circle--lg .stat-circle__value {
+		font-size: var(--text-3xl, 1.875rem);
+	}
+
+	/* Color variants */
+	.stat-circle--default .stat-circle__value {
+		color: var(--color-text, #1f2937);
+	}
+
+	.stat-circle--primary .stat-circle__value {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.stat-circle--warning .stat-circle__value {
+		color: var(--color-warning, #f59e0b);
+	}
+
+	.stat-circle--error .stat-circle__value {
+		color: var(--color-error, #ef4444);
+	}
+
+	.stat-circle--success .stat-circle__value {
+		color: var(--color-success, #10b981);
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .stat-circle__circle {
+		background: var(--color-bg-subtle-dark, #1f2937);
+		border-color: var(--color-border-subtle-dark, #374151);
+	}
+
+	:global([data-theme='dark']) .stat-circle__label {
+		color: var(--color-text-muted-dark, #9ca3af);
+	}
+
+	:global([data-theme='dark']) .stat-circle--default .stat-circle__value {
+		color: var(--color-text-dark, #f9fafb);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Props {
+    /** The numeric value or string to display inside the circle */
+    value: number | string;
+    /** Label text displayed below the circle */
+    label: string;
+    /** Color variant for the value text */
+    color?: 'default' | 'primary' | 'warning' | 'error' | 'success';
+    /** Size of the circle */
+    size?: 'sm' | 'md' | 'lg';
+    /** Makes the circle clickable with hover effects */
+    clickable?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+}
+declare const StatCircle: import("svelte").Component<Props, {}, "">;
+type StatCircle = ReturnType<typeof StatCircle>;
+export default StatCircle;

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

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

package/dist/components/StatCircle/index.js

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