@aspect-ops/exon-ui 0.1.0 → 0.2.1

package/dist/components/Mermaid/Mermaid.svelte

@@ -0,0 +1,206 @@
+<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;
+	}
+
+	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;
+	}
+
+	// Default ExonPro theme
+	const defaultTheme: ThemeVariables = {
+		primaryColor: '#4654A3',
+		primaryTextColor: '#270949',
+		primaryBorderColor: '#4654A3',
+		lineColor: '#270949',
+		secondaryColor: '#FF3131',
+		tertiaryColor: '#f3f4f6'
+	};
+
+	let { code, theme = defaultTheme, 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;
+
+			// Initialize mermaid with theme
+			mermaid.initialize({
+				startOnLoad: false,
+				theme: 'base',
+				themeVariables: { ...defaultTheme, ...theme },
+				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;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+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;
+}
+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

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

package/dist/components/Mermaid/index.js

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

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

@@ -0,0 +1,21 @@
+// 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;
+}

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+	interface Props {
+		value?: number | null;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		id?: string;
+		error?: boolean;
+		class?: string;
+		onValueChange?: (value: number | null) => void;
+	}
+
+	let {
+		value = $bindable(null),
+		min,
+		max,
+		step = 1,
+		disabled = false,
+		placeholder,
+		name,
+		id,
+		error = false,
+		class: className = '',
+		onValueChange
+	}: Props = $props();
+
+	let inputValue = $state(value?.toString() ?? '');
+
+	// Sync internal state with external value prop
+	$effect(() => {
+		inputValue = value?.toString() ?? '';
+	});
+
+	const isDecrementDisabled = $derived(
+		disabled || (min !== undefined && value !== null && value <= min)
+	);
+	const isIncrementDisabled = $derived(
+		disabled || (max !== undefined && value !== null && value >= max)
+	);
+
+	function handleIncrement() {
+		if (isIncrementDisabled) return;
+
+		const currentVal = value ?? 0;
+		const newValue = currentVal + step;
+		const clampedValue = max !== undefined ? Math.min(newValue, max) : newValue;
+
+		value = clampedValue;
+		onValueChange?.(clampedValue);
+	}
+
+	function handleDecrement() {
+		if (isDecrementDisabled) return;
+
+		const currentVal = value ?? 0;
+		const newValue = currentVal - step;
+		const clampedValue = min !== undefined ? Math.max(newValue, min) : newValue;
+
+		value = clampedValue;
+		onValueChange?.(clampedValue);
+	}
+
+	function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+		inputValue = e.currentTarget.value;
+
+		if (inputValue === '') {
+			value = null;
+			onValueChange?.(null);
+			return;
+		}
+
+		const parsed = parseFloat(inputValue);
+		if (!isNaN(parsed)) {
+			value = parsed;
+			onValueChange?.(parsed);
+		}
+	}
+
+	function handleBlur() {
+		if (value === null) {
+			inputValue = '';
+			return;
+		}
+
+		// Clamp value to min/max on blur
+		let clampedValue = value;
+		if (min !== undefined && clampedValue < min) {
+			clampedValue = min;
+		}
+		if (max !== undefined && clampedValue > max) {
+			clampedValue = max;
+		}
+
+		if (clampedValue !== value) {
+			value = clampedValue;
+			onValueChange?.(clampedValue);
+		}
+
+		inputValue = clampedValue.toString();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			handleIncrement();
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			handleDecrement();
+		}
+	}
+</script>
+
+<div
+	class="number-input {error ? 'number-input--error' : ''} {disabled
+		? 'number-input--disabled'
+		: ''} {className}"
+>
+	<button
+		type="button"
+		class="number-input__button number-input__button--decrement"
+		disabled={isDecrementDisabled}
+		onclick={handleDecrement}
+		aria-label="Decrement value"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+		</svg>
+	</button>
+
+	<input
+		type="text"
+		inputmode="decimal"
+		class="number-input__field"
+		role="spinbutton"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value ?? undefined}
+		{name}
+		{id}
+		{placeholder}
+		{disabled}
+		aria-invalid={error}
+		value={inputValue}
+		oninput={handleInput}
+		onblur={handleBlur}
+		onkeydown={handleKeyDown}
+	/>
+
+	<button
+		type="button"
+		class="number-input__button number-input__button--increment"
+		disabled={isIncrementDisabled}
+		onclick={handleIncrement}
+		aria-label="Increment value"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<line x1="12" y1="5" x2="12" y2="19"></line>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.number-input {
+		display: flex;
+		align-items: stretch;
+		width: 100%;
+		gap: 0;
+	}
+
+	.number-input--disabled {
+		opacity: 0.5;
+	}
+
+	.number-input__button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: 0;
+		border: 1px solid var(--color-border, #e5e7eb);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.number-input__button:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		border-color: var(--color-border-hover, #d1d5db);
+	}
+
+	.number-input__button:active:not(:disabled) {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	.number-input__button:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		z-index: 1;
+	}
+
+	.number-input__button:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.number-input__button--decrement {
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+		border-right: none;
+	}
+
+	.number-input__button--increment {
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+		border-left: none;
+	}
+
+	.number-input__field {
+		flex: 1;
+		min-width: 0;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-left: none;
+		border-right: none;
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		text-align: center;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.number-input__field::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.number-input__field:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+		z-index: 1;
+	}
+
+	.number-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	/* Error state */
+	.number-input--error .number-input__field,
+	.number-input--error .number-input__button {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.number-input--error .number-input__field:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+</style>

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

@@ -0,0 +1,16 @@
+interface Props {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    error?: boolean;
+    class?: string;
+    onValueChange?: (value: number | null) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

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

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

package/dist/components/NumberInput/index.js

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