@selvajs/ui 0.9.0

package/src/lib/components/preview/Group.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '@selvajs/schemas';
+	import type { Snippet } from 'svelte';
+	import * as Card from '$lib/components/primitives/card';
+	import { ChevronDown } from '@lucide/svelte';
+	import { evaluateVisibility } from '$lib/schema/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]>;
+		/** When true, renders items flat without the Card wrapper, header, or collapse toggle. */
+		flat?: boolean;
+	}
+
+	let {
+		label,
+		description,
+		items,
+		columns,
+		collapsed,
+		values,
+		onToggle,
+		inputSnippet,
+		outputSnippet,
+		flat = false
+	}: Props = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onToggle();
+		}
+	}
+</script>
+
+{#if flat}
+	<div 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>
+	</div>
+{:else}
+	<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>
+{/if}
+
+{#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/src/lib/components/preview/ImageOutput.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { OutputImageLayoutItem } from '@selvajs/schemas';
+	import type { FileData } from '@selvajs/compute';
+	import { Download, Maximize, Minimize } from '@lucide/svelte';
+	import { downloadFiles } from '$lib/utils/file-download';
+
+	interface Props {
+		item: OutputImageLayoutItem;
+		value: unknown;
+	}
+
+	let { item, value }: Props = $props();
+
+	const SUPPORTED_EXTS = new Set(['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg']);
+	const MIME_BY_EXT: Record<string, string> = {
+		'.png': 'image/png',
+		'.jpg': 'image/jpeg',
+		'.jpeg': 'image/jpeg',
+		'.webp': 'image/webp',
+		'.gif': 'image/gif',
+		'.svg': 'image/svg+xml'
+	};
+
+	function isFileData(x: unknown): x is FileData {
+		return !!x && typeof x === 'object' && 'fileName' in x && 'data' in x && 'fileType' in x;
+	}
+
+	const file = $derived.by<FileData | null>(() => {
+		if (Array.isArray(value)) return value.find(isFileData) ?? null;
+		return isFileData(value) ? value : null;
+	});
+
+	const ext = $derived(file ? (file.fileType ?? '').toLowerCase() : '');
+	const isSupported = $derived(SUPPORTED_EXTS.has(ext));
+
+	// Build a data URL. Binary formats (PNG/JPG/WEBP/GIF) come through as base64;
+	// SVG arrives as plain UTF-8 XML and must be percent-encoded into the data URL.
+	// Using <img src="..."> isolates SVG scripts (browsers disable scripting in
+	// image-context SVGs), so untrusted SVG content cannot execute against the host.
+	const dataUrl = $derived.by(() => {
+		if (!file || !isSupported) return null;
+		const mime = MIME_BY_EXT[ext] ?? 'application/octet-stream';
+		if (file.isBase64Encoded) {
+			return `data:${mime};base64,${file.data}`;
+		}
+		return `data:${mime};utf8,${encodeURIComponent(file.data)}`;
+	});
+
+	const cfg = $derived(item.config ?? {});
+	const allowDownload = $derived(cfg.allowDownload ?? true);
+	const allowFullscreen = $derived(cfg.allowFullscreen ?? true);
+	const backgroundColor = $derived(cfg.backgroundColor);
+
+	let wrapperEl = $state<HTMLDivElement | null>(null);
+	let isFullscreen = $state(false);
+	let downloading = $state(false);
+	let error = $state<string | null>(null);
+
+	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;
+		}
+		document.addEventListener('fullscreenchange', onFullscreenChange);
+		return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+	});
+
+	async function handleDownload() {
+		if (!file) return;
+		downloading = true;
+		error = null;
+		try {
+			await downloadFiles(file, file.fileName);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Download failed';
+		} finally {
+			downloading = false;
+		}
+	}
+</script>
+
+<div
+	bind:this={wrapperEl}
+	class="group relative overflow-hidden rounded border border-border {isFullscreen
+		? 'bg-background'
+		: ''}"
+>
+	{#if error}
+		<div class="px-4 py-3 text-sm text-destructive">{error}</div>
+	{:else if !file}
+		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Waiting for image...</div>
+	{:else if !isSupported}
+		<div class="px-4 py-3 text-sm text-destructive">
+			Unsupported image format: <span class="font-mono">{ext || '(unknown)'}</span>. Supported:
+			.png, .jpg, .jpeg, .webp, .gif, .svg
+		</div>
+	{:else}
+		<div
+			class="w-full"
+			style="height: {isFullscreen ? '100vh' : '380px'}; {backgroundColor
+				? `background-color: ${backgroundColor};`
+				: ''}"
+		>
+			<img
+				src={dataUrl}
+				alt={item.displayName ?? file.fileName}
+				class="h-full w-full object-contain"
+			/>
+		</div>
+
+		{#if allowDownload || allowFullscreen}
+			<div
+				class="gap-1 right-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 {isFullscreen
+					? 'opacity-100'
+					: ''}"
+			>
+				{#if allowDownload && file}
+					<button
+						onclick={handleDownload}
+						disabled={downloading}
+						title="Download image"
+						class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						<Download size={14} />
+					</button>
+				{/if}
+
+				{#if allowFullscreen}
+					<button
+						onclick={toggleFullscreen}
+						title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+						class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background"
+					>
+						{#if isFullscreen}
+							<Minimize size={14} />
+						{:else}
+							<Maximize size={14} />
+						{/if}
+					</button>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</div>

package/src/lib/components/preview/InputControl.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { InputLayoutItem, FileInputWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import {
+		isNumberWidget,
+		isTextWidget,
+		isDropdownWidget,
+		isCheckboxWidget,
+		isFileWidget,
+		isColorWidget
+	} from '@selvajs/schemas';
+	import * as Field from '$lib/components/primitives/field';
+	import * as Dialog from '$lib/components/primitives/dialog';
+	import { HelpCircle } from '@lucide/svelte';
+	import {
+		CheckboxInput,
+		ChecklistInput,
+		ColorInput,
+		DropdownInput,
+		FileInput,
+		NumberInput,
+		TextInput
+	} from '$lib/components/preview/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}
+		{#if config.displayAs === 'checklist'}
+			<ChecklistInput
+				{inputId}
+				value={Array.isArray(value)
+					? (value as string[])
+					: typeof value === 'string' && value
+						? [value]
+						: []}
+				{config}
+				onChange={commit}
+				{disabled}
+			/>
+		{:else}
+			<DropdownInput
+				value={typeof value === 'string' ? value : ''}
+				{config}
+				onChange={commit}
+				{disabled}
+			/>
+		{/if}
+	{: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>