selva-shared 0.8.1

package/dist/components/preview/ChartOutput.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import type { OutputChartLayoutItem } from '../../types/generated';
+	import { onMount } from 'svelte';
+	import { Loader, Maximize, Minimize } from '@lucide/svelte';
+	import { Label } from '../ui/label';
+	import { loadScript } from '../../utils/loadScript';
+
+	interface Props {
+		item: OutputChartLayoutItem;
+		value: string;
+	}
+
+	let { item, value }: Props = $props();
+
+	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
+
+	// ── Figure parsing ──────────────────────────────────────────────────
+
+	type PlotlyTrace = Record<string, unknown>;
+	type PlotlyFigure = {
+		data: PlotlyTrace[];
+		layout: Record<string, unknown>;
+		config?: Record<string, unknown>;
+	};
+
+	const figData = $derived.by(() => {
+		if (!value) return null;
+		try {
+			return JSON.parse(value) as PlotlyFigure;
+		} catch {
+			return null;
+		}
+	});
+
+	const figTitle = $derived.by(() => {
+		if (!figData) return null;
+		const t = figData.layout?.title;
+		if (!t) return null;
+		if (typeof t === 'string') return t;
+		if (typeof t === 'object' && 'text' in t) return (t as Record<string, unknown>).text as string;
+		return null;
+	});
+
+	// ── DOM refs & state ────────────────────────────────────────────────
+
+	let containerEl = $state<HTMLDivElement | null>(null);
+	let wrapperEl = $state<HTMLDivElement | null>(null);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let isFullscreen = $state(false);
+	let mounted = false;
+
+	// ── Plotly loader ──────────────────────────────────────────────────
+
+	async function loadPlotly(): Promise<any> {
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		if (window.Plotly) return window.Plotly;
+
+		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', { crossOrigin: 'anonymous' });
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		return window.Plotly;
+	}
+
+	// ── Fullscreen ──────────────────────────────────────────────────────
+
+	function toggleFullscreen() {
+		if (!wrapperEl) return;
+		if (!document.fullscreenElement) {
+			wrapperEl.requestFullscreen().catch((err) => {
+				error = `Fullscreen unavailable: ${err.message}`;
+			});
+		} else {
+			document.exitFullscreen().catch((err) => {
+				error = `Exit fullscreen failed: ${err.message}`;
+			});
+		}
+	}
+
+	$effect(() => {
+		function onFullscreenChange() {
+			isFullscreen = !!document.fullscreenElement;
+			// Resize immediately after state updates, then once more to catch layout
+			Promise.resolve().then(() => {
+				// @ts-expect-error — Plotly is loaded dynamically onto window
+				if (containerEl && window.Plotly) {
+					// @ts-expect-error — Plotly is loaded dynamically onto window
+					window.Plotly.Plots.resize(containerEl);
+				}
+			});
+		}
+		document.addEventListener('fullscreenchange', onFullscreenChange);
+		return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+	});
+
+	// ── Theme-aware colors ──────────────────────────────────────────────
+
+	function getThemeColors(): { textColor: string; gridColor: string } {
+		if (!containerEl) return { textColor: '#333', gridColor: '#eee' };
+		const style = getComputedStyle(containerEl);
+		const textColor = style.getPropertyValue('color').trim() || '#333';
+		const gridColor =
+			style.getPropertyValue('--border')?.trim() ||
+			style.getPropertyValue('--color-border')?.trim() ||
+			'rgba(128,128,128,0.2)';
+		return { textColor, gridColor };
+	}
+
+	// ── Render ──────────────────────────────────────────────────────────
+
+	async function renderChart() {
+		if (!containerEl || !figData) return;
+		error = null;
+		loading = true;
+		try {
+			const Plotly = await loadPlotly();
+			const { textColor, gridColor } = getThemeColors();
+			const isMapFigure = figData.data?.some((t) => MAP_TYPE_SET.has(t.type as string));
+
+			// Strip title, template, and explicit sizing
+			const {
+				title: _title,
+				template: _template,
+				height: _height,
+				width: _width,
+				...layoutRest
+			} = figData.layout as Record<string, unknown> & {
+				title?: unknown;
+				template?: unknown;
+				height?: unknown;
+				width?: unknown;
+			};
+
+			const layout: Record<string, unknown> = {
+				...layoutRest,
+				autosize: true,
+				margin: { t: 24, r: 8, b: 40, l: 60, pad: 0 },
+				font: { color: textColor },
+				paper_bgcolor: layoutRest.paper_bgcolor ?? 'transparent',
+				plot_bgcolor: layoutRest.plot_bgcolor ?? 'transparent',
+				...(!isMapFigure && layoutRest.xaxis
+					? { xaxis: { ...(layoutRest.xaxis as object), gridcolor: gridColor, color: textColor } }
+					: {}),
+				...(!isMapFigure && layoutRest.yaxis
+					? { yaxis: { ...(layoutRest.yaxis as object), gridcolor: gridColor, color: textColor } }
+					: {})
+			};
+
+			Plotly.react(containerEl, figData.data, layout, {
+				responsive: true,
+				displayModeBar: 'hover',
+				displaylogo: false,
+				modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'],
+				...figData.config
+			});
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to render chart';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// ── Lifecycle ───────────────────────────────────────────────────────
+
+	onMount(() => {
+		mounted = true;
+
+		let resizeTimer: ReturnType<typeof setTimeout> | null = null;
+		const ro = new ResizeObserver(() => {
+			if (resizeTimer) clearTimeout(resizeTimer);
+			resizeTimer = setTimeout(() => {
+				// @ts-expect-error — Plotly is loaded dynamically onto window
+				if (containerEl && window.Plotly) {
+					// @ts-expect-error — Plotly is loaded dynamically onto window
+					window.Plotly.Plots.resize(containerEl);
+				}
+				resizeTimer = null;
+			}, 150);
+		});
+		// Observe the wrapper (parent) so we catch sidebar resizes affecting the container's available space
+		if (wrapperEl) ro.observe(wrapperEl);
+
+		return () => {
+			ro.disconnect();
+			if (resizeTimer) clearTimeout(resizeTimer);
+			// @ts-expect-error — Plotly is loaded dynamically onto window
+			if (containerEl && window.Plotly) window.Plotly.purge(containerEl);
+		};
+	});
+
+	// ── Debounced re-render on value change ─────────────────────────────
+
+	let renderTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	$effect(() => {
+		if (!value || !mounted || !containerEl) return;
+		if (renderTimeout) clearTimeout(renderTimeout);
+		renderTimeout = setTimeout(() => {
+			renderChart();
+			renderTimeout = null;
+		}, 150);
+		return () => {
+			if (renderTimeout) clearTimeout(renderTimeout);
+		};
+	});
+</script>
+
+<div
+	bind:this={wrapperEl}
+	class="gap-0 flex flex-col overflow-hidden rounded-lg border border-border {isFullscreen
+		? 'bg-background'
+		: ''}"
+>
+	<!-- Header: title + controls -->
+	<div class="gap-2 px-3 py-1.5 relative z-10 flex items-center border-b border-border bg-muted/40">
+		<Label
+			class="text-xs font-medium truncate text-foreground"
+			title={figTitle ?? item.displayName ?? item.paramId}
+		>
+			{figTitle ?? item.displayName ?? item.paramId}
+		</Label>
+
+		<div class="gap-1 ml-auto flex items-center">
+			{#if loading}
+				<div class="text-muted-foreground">
+					<Loader size={12} class="animate-spin" />
+				</div>
+			{/if}
+
+			<button
+				onclick={toggleFullscreen}
+				disabled={loading}
+				title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+				class="rounded p-1 flex items-center text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				{#if isFullscreen}
+					<Minimize size={14} />
+				{:else}
+					<Maximize size={14} />
+				{/if}
+			</button>
+		</div>
+	</div>
+
+	{#if error}
+		<div class="px-4 py-3 text-sm text-destructive">{error}</div>
+	{:else if !figData && value}
+		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Receiving chart data...</div>
+	{:else if !figData}
+		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Waiting for chart data...</div>
+	{:else}
+		<div
+			bind:this={containerEl}
+			class="w-full"
+			style="height: {isFullscreen ? 'calc(100vh - 36px)' : '380px'};"
+		></div>
+	{/if}
+</div>

package/dist/components/preview/ChartOutput.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { OutputChartLayoutItem } from '../../types/generated';
+interface Props {
+    item: OutputChartLayoutItem;
+    value: string;
+}
+declare const ChartOutput: import("svelte").Component<Props, {}, "">;
+type ChartOutput = ReturnType<typeof ChartOutput>;
+export default ChartOutput;

package/dist/components/preview/Group.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '../../types/generated';
+	import type { Snippet } from 'svelte';
+	import * as Card from '../ui/card';
+	import { ChevronDown } from '@lucide/svelte';
+	import { evaluateVisibility } from '../../utils/visibility-rules';
+
+	interface Props {
+		label: string;
+		description?: string;
+		items: LayoutItem[];
+		columns: number;
+		collapsed: boolean;
+		values: Record<string, unknown>;
+		onToggle: () => void;
+		inputSnippet: Snippet<
+			[
+				layoutItem: InputLayoutItem,
+				visibility: { visible: boolean; disabled: boolean; defaultValue?: unknown }
+			]
+		>;
+		outputSnippet: Snippet<[layoutItem: OutputLayoutItem]>;
+	}
+
+	let {
+		label,
+		description,
+		items,
+		columns,
+		collapsed,
+		values,
+		onToggle,
+		inputSnippet,
+		outputSnippet
+	}: Props = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onToggle();
+		}
+	}
+</script>
+
+<Card.Root class="gap-0 py-0 pt-0 overflow-hidden">
+	<Card.Header
+		class="pt-4 pb-4! cursor-pointer border-b border-border bg-muted transition-colors select-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
+		role="button"
+		tabindex={0}
+		aria-expanded={!collapsed}
+		onclick={onToggle}
+		onkeydown={handleKeydown}
+	>
+		<Card.Title>{label}</Card.Title>
+		{#if description}
+			<Card.Description>{description}</Card.Description>
+		{/if}
+		<Card.Action>
+			<ChevronDown
+				class="h-4 w-4 text-muted-foreground transition-transform duration-200 {collapsed
+					? ''
+					: 'rotate-180'}"
+			/>
+		</Card.Action>
+	</Card.Header>
+	<div class="content-wrapper" class:collapsed>
+		<div class="content-inner">
+			<Card.Content class="p-6">
+				<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
+					{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+						{@render gridItem(layoutItem, columns)}
+					{/each}
+				</div>
+			</Card.Content>
+		</div>
+	</div>
+</Card.Root>
+
+{#snippet gridItem(layoutItem: LayoutItem, cols: number)}
+	{#if layoutItem.type === 'linebreak'}
+		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
+	{:else}
+		{@const visibility = evaluateVisibility(layoutItem, values)}
+		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), cols)}
+		{#if visibility.visible}
+			{#if layoutItem.type === 'input'}
+				<div
+					class="min-w-0 flex items-center"
+					class:opacity-50={visibility.disabled}
+					style="grid-column: span {span} / span {span}"
+				>
+					{@render inputSnippet(layoutItem, visibility)}
+				</div>
+			{:else if layoutItem.type === 'output'}
+				<div style="grid-column: span {span} / span {span}">
+					{@render outputSnippet(layoutItem)}
+				</div>
+			{/if}
+		{/if}
+	{/if}
+{/snippet}
+
+<style>
+	.content-wrapper {
+		display: grid;
+		grid-template-rows: 1fr;
+		transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.content-wrapper.collapsed {
+		grid-template-rows: 0fr;
+	}
+
+	.content-inner {
+		min-height: 0;
+	}
+
+	.schema-grid {
+		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
+	}
+</style>

package/dist/components/preview/Group.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '../../types/generated';
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    items: LayoutItem[];
+    columns: number;
+    collapsed: boolean;
+    values: Record<string, unknown>;
+    onToggle: () => void;
+    inputSnippet: Snippet<[
+        layoutItem: InputLayoutItem,
+        visibility: {
+            visible: boolean;
+            disabled: boolean;
+            defaultValue?: unknown;
+        }
+    ]>;
+    outputSnippet: Snippet<[layoutItem: OutputLayoutItem]>;
+}
+declare const Group: import("svelte").Component<Props, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/components/preview/InputControl.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type {
+		InputLayoutItem,
+		FileInputWidgetConfig,
+		SupportedTypes
+	} from '../../types/generated';
+	import {
+		isNumberWidget,
+		isTextWidget,
+		isDropdownWidget,
+		isCheckboxWidget,
+		isFileWidget,
+		isColorWidget
+	} from '../../types/generated';
+	import * as Field from '../ui/field';
+	import * as Dialog from '../ui/dialog';
+	import { HelpCircle } from '@lucide/svelte';
+	import {
+		CheckboxInput,
+		ColorInput,
+		DropdownInput,
+		FileInput,
+		NumberInput,
+		TextInput
+	} from './inputs';
+
+	interface Props {
+		item: InputLayoutItem;
+		value?: SupportedTypes;
+		displayName?: string;
+		onChange: (paramId: string, value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let {
+		item,
+		value = $bindable(undefined),
+		displayName,
+		onChange,
+		disabled = false
+	}: Props = $props();
+
+	// Stable ID — not reactive, computed once at component creation
+	const inputId = $derived(`input-${item.paramId}`);
+	const label = $derived(displayName || item.displayName || item.paramId);
+
+	function commit(newValue: SupportedTypes) {
+		value = newValue;
+		onChange(item.paramId, newValue);
+	}
+</script>
+
+<Field.Field>
+	<Field.Label for={inputId} class="gap-2 flex items-center">
+		{label}
+		{#if item.description}
+			<Dialog.Root>
+				<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
+					<HelpCircle size={16} />
+				</Dialog.Trigger>
+				<Dialog.Content class="sm:max-w-md">
+					<Dialog.Header>
+						<Dialog.Title>{label}</Dialog.Title>
+						<Dialog.Description>{item.description}</Dialog.Description>
+					</Dialog.Header>
+				</Dialog.Content>
+			</Dialog.Root>
+		{/if}
+	</Field.Label>
+
+	{#if isNumberWidget(item)}
+		{@const config = item.config}
+		<NumberInput
+			{inputId}
+			value={typeof value === 'number' ? value : undefined}
+			{config}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if isCheckboxWidget(item)}
+		<CheckboxInput
+			{inputId}
+			value={typeof value === 'boolean' ? value : undefined}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if isTextWidget(item)}
+		{@const config = item.config}
+		<TextInput
+			{inputId}
+			value={typeof value === 'string' ? value : ''}
+			{config}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if isDropdownWidget(item)}
+		{@const config = item.config}
+		<DropdownInput
+			value={typeof value === 'string' ? value : ''}
+			{config}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if isFileWidget(item)}
+		{@const config = item.config as FileInputWidgetConfig}
+		<FileInput
+			value={typeof value === 'string' ? value : ''}
+			acceptedFormats={config?.acceptedFormats ?? []}
+			onChange={(newValue) => commit(newValue)}
+			defaultInputMode={config?.defaultInputMode}
+			allowedInputModes={config?.allowedInputModes}
+		/>
+	{:else if isColorWidget(item)}
+		<ColorInput
+			value={typeof value === 'string' ? value : '#000000'}
+			onChange={(newValue) => commit(newValue)}
+		/>
+	{/if}
+</Field.Field>

package/dist/components/preview/InputControl.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { InputLayoutItem, SupportedTypes } from '../../types/generated';
+interface Props {
+    item: InputLayoutItem;
+    value?: SupportedTypes;
+    displayName?: string;
+    onChange: (paramId: string, value: SupportedTypes) => void;
+    disabled?: boolean;
+}
+declare const InputControl: import("svelte").Component<Props, {}, "value">;
+type InputControl = ReturnType<typeof InputControl>;
+export default InputControl;