@aspect-ops/exon-ui 0.2.2 → 0.4.0

package/dist/components/Mermaid/Mermaid.svelte

@@ -1,320 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { Snippet } from 'svelte';
-
-	interface ThemeVariables {
-		primaryColor?: string;
-		primaryTextColor?: string;
-		primaryBorderColor?: string;
-		lineColor?: string;
-		secondaryColor?: string;
-		tertiaryColor?: string;
-		background?: string;
-		mainBkg?: string;
-		nodeBorder?: string;
-		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 {
-		/** Mermaid diagram code. If not provided, uses slot content */
-		code?: string;
-		/** Custom theme variables */
-		theme?: ThemeVariables;
-		/** Custom class */
-		class?: string;
-		/** Slot content for diagram code */
-		children?: Snippet;
-	}
-
-	// Light theme colors
-	const lightTheme: ThemeVariables = {
-		primaryColor: '#4654A3',
-		primaryTextColor: '#ffffff',
-		primaryBorderColor: '#4654A3',
-		lineColor: '#4b5563',
-		secondaryColor: '#FF3131',
-		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'
-	};
-
-	// 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();
-	let isLoading = $state(true);
-	let hasError = $state(false);
-	let errorMessage = $state('');
-	let renderedSvg = $state('');
-
-	// Get diagram code from prop or slot
-	function getDiagramCode(): string {
-		if (code) return code;
-		if (slotRef) {
-			return slotRef.textContent?.trim() || '';
-		}
-		return '';
-	}
-
-	onMount(async () => {
-		try {
-			// Dynamically import mermaid (type assertion for dynamic import)
-			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: mergedTheme,
-				securityLevel: 'loose',
-				fontFamily: 'inherit'
-			});
-
-			const diagramCode = getDiagramCode();
-			if (!diagramCode) {
-				hasError = true;
-				errorMessage = 'No diagram code provided';
-				isLoading = false;
-				return;
-			}
-
-			// Generate unique ID
-			const id = `mermaid-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-
-			// Render the diagram
-			const { svg } = await mermaid.render(id, diagramCode);
-			renderedSvg = svg;
-		} catch (error) {
-			hasError = true;
-			errorMessage = error instanceof Error ? error.message : 'Failed to render diagram';
-		} finally {
-			isLoading = false;
-		}
-	});
-</script>
-
-<div class="mermaid-container {className}" bind:this={containerRef}>
-	<!-- Hidden slot for extracting diagram code -->
-	<div bind:this={slotRef} style="display: none;">
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-
-	{#if isLoading}
-		<div class="mermaid-loading">
-			<div class="mermaid-spinner"></div>
-			<span>Rendering diagram...</span>
-		</div>
-	{:else if hasError}
-		<div class="mermaid-error" role="alert">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<circle cx="12" cy="12" r="10" />
-				<line x1="12" y1="8" x2="12" y2="12" />
-				<line x1="12" y1="16" x2="12.01" y2="16" />
-			</svg>
-			<div>
-				<strong>Failed to render diagram</strong>
-				<p>{errorMessage}</p>
-			</div>
-		</div>
-	{:else}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		<div class="mermaid-diagram">{@html renderedSvg}</div>
-	{/if}
-</div>
-
-<style>
-	.mermaid-container {
-		width: 100%;
-		font-family: inherit;
-	}
-
-	/* Loading */
-	.mermaid-loading {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: var(--space-md, 1rem);
-		padding: var(--space-xl, 2rem);
-		color: var(--color-text-muted, #6b7280);
-		font-size: var(--text-sm, 0.875rem);
-	}
-
-	.mermaid-spinner {
-		width: 2rem;
-		height: 2rem;
-		border: 3px solid var(--color-border, #e5e7eb);
-		border-top-color: var(--color-primary, #3b82f6);
-		border-radius: var(--radius-full, 9999px);
-		animation: spin 0.75s linear infinite;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* Error */
-	.mermaid-error {
-		display: flex;
-		align-items: flex-start;
-		gap: var(--space-md, 1rem);
-		padding: var(--space-md, 1rem);
-		background: var(--color-error-bg, #fee2e2);
-		color: var(--color-error, #dc2626);
-		border-radius: var(--radius-md, 0.375rem);
-		font-size: var(--text-sm, 0.875rem);
-	}
-
-	.mermaid-error svg {
-		flex-shrink: 0;
-		margin-top: 2px;
-	}
-
-	.mermaid-error strong {
-		display: block;
-		font-weight: var(--font-semibold, 600);
-	}
-
-	.mermaid-error p {
-		margin: var(--space-xs, 0.25rem) 0 0;
-		opacity: 0.9;
-	}
-
-	/* Diagram */
-	.mermaid-diagram {
-		width: 100%;
-		overflow-x: auto;
-	}
-
-	.mermaid-diagram :global(svg) {
-		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

@@ -1,38 +0,0 @@
-import type { Snippet } from 'svelte';
-interface ThemeVariables {
-    primaryColor?: string;
-    primaryTextColor?: string;
-    primaryBorderColor?: string;
-    lineColor?: string;
-    secondaryColor?: string;
-    tertiaryColor?: string;
-    background?: string;
-    mainBkg?: string;
-    nodeBorder?: string;
-    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 */
-    code?: string;
-    /** Custom theme variables */
-    theme?: ThemeVariables;
-    /** Custom class */
-    class?: string;
-    /** Slot content for diagram code */
-    children?: Snippet;
-}
-declare const Mermaid: import("svelte").Component<Props, {}, "">;
-type Mermaid = ReturnType<typeof Mermaid>;
-export default Mermaid;

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

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

package/dist/components/Mermaid/index.js

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

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

@@ -1,21 +0,0 @@
-// Type declarations for mermaid
-declare module 'mermaid' {
-	interface MermaidConfig {
-		startOnLoad?: boolean;
-		theme?: string;
-		themeVariables?: Record<string, string | undefined>;
-		securityLevel?: string;
-		fontFamily?: string;
-	}
-
-	interface RenderResult {
-		svg: string;
-	}
-
-	const mermaid: {
-		initialize: (config: MermaidConfig) => void;
-		render: (id: string, code: string) => Promise<RenderResult>;
-	};
-
-	export default mermaid;
-}