@selvajs/ui 0.9.0

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

@@ -0,0 +1,297 @@
+<script lang="ts">
+	import type { OutputLayoutItem } from '@selvajs/schemas';
+	import type { FileData } from '@selvajs/compute';
+	import ChartOutput from './ChartOutput.svelte';
+	import ImageOutput from './ImageOutput.svelte';
+	import { downloadFiles, formatFileSize, getBase64FileSize } from '$lib/utils/file-download';
+	import { Button } from '../primitives';
+	import * as Dialog from '$lib/components/primitives/dialog';
+	import { Info, Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { Label } from '$lib/components/primitives/label';
+
+	interface Props {
+		item: OutputLayoutItem;
+		value: any;
+		displayName?: string;
+	}
+
+	let { item, value, displayName }: Props = $props();
+
+	// --- text/number state ---
+	let copied = $state(false);
+	let copyTimeout: ReturnType<typeof setTimeout>;
+
+	const label = $derived(displayName || item.displayName || item.paramId);
+	const isObjectValue = $derived(typeof value === 'object' && value !== null);
+	const formattedValue = $derived(
+		value == null ? '' : isObjectValue ? JSON.stringify(value, null, 2) : String(value)
+	);
+	const hasValue = $derived(value != null);
+
+	const boxClass = 'min-h-12.5 rounded px-3 py-3 font-mono text-sm border border-border';
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(formattedValue);
+			copied = true;
+			clearTimeout(copyTimeout);
+			copyTimeout = setTimeout(() => (copied = false), 2000);
+		} catch (err) {
+			console.error('Failed to copy:', err);
+		}
+	}
+
+	// --- file state ---
+	let downloading = $state(false);
+	let downloadError = $state<string | null>(null);
+
+	function isFileData(data: any): data is FileData {
+		return data && typeof data === 'object' && 'fileName' in data && 'data' in data;
+	}
+
+	const filesArray = $derived(
+		!value ? [] : Array.isArray(value) ? value.filter(isFileData) : isFileData(value) ? [value] : []
+	);
+	const fileCount = $derived(filesArray.length);
+	const totalSize = $derived(filesArray.reduce((sum, f) => sum + getBase64FileSize(f.data), 0));
+
+	// --- folder tree ---
+	type TreeNode =
+		| { type: 'file'; file: FileData }
+		| { type: 'folder'; name: string; children: SvelteMap<string, TreeNode> };
+
+	function buildTree(files: FileData[]): SvelteMap<string, TreeNode> {
+		const root = new SvelteMap<string, TreeNode>();
+		for (const file of files) {
+			const parts = (file.subFolder || '').split('/').filter(Boolean);
+			let current = root;
+			for (const part of parts) {
+				if (!current.has(part)) {
+					current.set(part, { type: 'folder', name: part, children: new SvelteMap() });
+				}
+				const node = current.get(part)!;
+				if (node.type === 'folder') current = node.children;
+			}
+			current.set(file.fileName + file.fileType, { type: 'file', file });
+		}
+		return root;
+	}
+
+	function collectFolderPaths(nodes: Map<string, TreeNode>, prefix = ''): string[] {
+		const paths: string[] = [];
+		for (const [key, node] of nodes) {
+			if (node.type === 'folder') {
+				const path = prefix ? `${prefix}/${key}` : key;
+				paths.push(path);
+				paths.push(...collectFolderPaths(node.children, path));
+			}
+		}
+		return paths;
+	}
+
+	const hasSubFolders = $derived(filesArray.some((f) => f.subFolder && f.subFolder.length > 0));
+	const fileTree = $derived(hasSubFolders ? buildTree(filesArray) : null);
+
+	// All folders expanded by default
+	let expandedFolders = new SvelteSet<string>();
+
+	$effect(() => {
+		if (fileTree) {
+			expandedFolders.clear();
+			for (const path of collectFolderPaths(fileTree)) {
+				expandedFolders.add(path);
+			}
+		}
+	});
+
+	function toggleFolder(path: string) {
+		if (expandedFolders.has(path)) expandedFolders.delete(path);
+		else expandedFolders.add(path);
+	}
+
+	async function handleDownload() {
+		if (fileCount === 0) return;
+		downloading = true;
+		downloadError = null;
+		try {
+			if (fileCount === 1) {
+				await downloadFiles(filesArray[0], filesArray[0].fileName);
+			} else {
+				const fileName = displayName
+					? displayName.replace(/[^a-z0-9]/gi, '_').toLowerCase()
+					: 'download';
+				await downloadFiles(filesArray, fileName);
+			}
+		} catch (err) {
+			downloadError = err instanceof Error ? err.message : 'Failed to download files';
+			console.error('[OutputDisplayWidget] Download error:', err);
+		} finally {
+			downloading = false;
+		}
+	}
+</script>
+
+{#snippet fieldHeader()}
+	<div class="gap-2 flex items-center">
+		<Label>{label}</Label>
+		{#if item.description}
+			<Dialog.Root>
+				<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
+					<Info 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}
+	</div>
+{/snippet}
+
+{#snippet placeholder()}
+	<span class="text-muted-foreground not-italic">Waiting for data...</span>
+{/snippet}
+
+{#snippet treeNodes(nodes: Map<string, TreeNode>, path: string)}
+	{#each nodes as [key, node] (key)}
+		{#if node.type === 'folder'}
+			{@const folderPath = path ? `${path}/${node.name}` : node.name}
+			{@const isOpen = expandedFolders.has(folderPath)}
+			<div>
+				<button
+					onclick={() => toggleFolder(folderPath)}
+					class="gap-1.5 py-0.5 text-xs flex w-full items-center text-muted-foreground transition-colors hover:text-foreground"
+				>
+					<ChevronRight
+						size={12}
+						class="shrink-0 transition-transform duration-150 {isOpen ? 'rotate-90' : ''}"
+					/>
+					{#if isOpen}
+						<FolderOpen size={13} class="shrink-0 text-primary/70" />
+					{:else}
+						<Folder size={13} class="shrink-0 text-primary/70" />
+					{/if}
+					<span class="font-medium">{node.name}</span>
+				</button>
+				{#if isOpen}
+					<div class="ml-4 pl-2 border-l border-border/50">
+						{@render treeNodes(node.children, folderPath)}
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="gap-1.5 py-0.5 flex items-center justify-between">
+				<div class="gap-1.5 min-w-0 flex items-center">
+					<FileIcon size={12} class="shrink-0 text-muted-foreground" />
+					<span class="text-xs truncate text-foreground"
+						>{node.file.fileName}{node.file.fileType}</span
+					>
+				</div>
+				<span class="text-xs shrink-0 text-muted-foreground"
+					>{formatFileSize(getBase64FileSize(node.file.data))}</span
+				>
+			</div>
+		{/if}
+	{/each}
+{/snippet}
+
+{#snippet fileDisplay()}
+	{#if fileCount === 0}
+		<div class="rounded px-3 py-3 text-sm border border-border bg-muted text-muted-foreground">
+			Waiting for file data...
+		</div>
+	{:else}
+		<div class="gap-2 flex flex-col">
+			<div class="rounded px-3 py-2 border border-border bg-muted">
+				<div class="gap-2 flex items-center justify-between">
+					<span class="min-w-0 text-sm font-medium truncate text-foreground">
+						{fileCount === 1
+							? `${filesArray[0].fileName}${filesArray[0].fileType}`
+							: `${fileCount} files`}
+					</span>
+					<span class="text-xs shrink-0 text-muted-foreground">{formatFileSize(totalSize)}</span>
+				</div>
+				{#if fileCount > 1}
+					<div class="mt-2">
+						{#if fileTree}
+							{@render treeNodes(fileTree, '')}
+						{:else}
+							<div class="gap-1 flex flex-col">
+								{#each filesArray as file (file.fileName)}
+									<div
+										class="gap-2 text-xs flex items-center justify-between text-muted-foreground"
+									>
+										<span class="min-w-0 truncate">{file.fileName}{file.fileType}</span>
+										<span class="shrink-0">{formatFileSize(getBase64FileSize(file.data))}</span>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+			{#if downloadError}
+				<div
+					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+				>
+					{downloadError}
+				</div>
+			{/if}
+			<Button onclick={handleDownload} disabled={downloading} class="w-full">
+				{downloading
+					? 'Downloading...'
+					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}
+			</Button>
+		</div>
+	{/if}
+{/snippet}
+
+<div class="gap-2 flex flex-col">
+	{@render fieldHeader()}
+
+	{#if item.widgetType === 'chart'}
+		<ChartOutput
+			{item}
+			value={typeof value === 'string' ? value : value != null ? JSON.stringify(value) : ''}
+		/>
+	{:else if item.widgetType === 'image'}
+		<ImageOutput {item} {value} />
+	{:else if item.widgetType === 'file'}
+		{@render fileDisplay()}
+	{:else if item.widgetType === 'number'}
+		<div class="{boxClass} flex items-center bg-muted/50 wrap-break-word">
+			{#if hasValue}
+				<span class="font-bold text-primary">{formattedValue}</span>
+			{:else}
+				{@render placeholder()}
+			{/if}
+		</div>
+	{:else if item.widgetType === 'text'}
+		<div class="group relative">
+			{#if isObjectValue}
+				<pre
+					class="{boxClass} overflow-wrap-anywhere max-h-96 overflow-auto bg-muted/10 text-foreground">{formattedValue}</pre>
+			{:else}
+				<div
+					class="{boxClass} overflow-wrap-anywhere bg-muted/10 wrap-break-word whitespace-pre-wrap text-foreground"
+				>
+					{#if hasValue}{value}{:else}{@render placeholder()}{/if}
+				</div>
+			{/if}
+			{#if hasValue}
+				<Button
+					onclick={copyToClipboard}
+					class="right-2 top-2 absolute transition-opacity {copied
+						? 'opacity-100'
+						: 'opacity-0 group-hover:opacity-100'}"
+					size="sm"
+				>
+					{copied ? 'Copied!' : 'Copy'}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { TabConfig } from '@selvajs/schemas';
+	import * as Tabs from '$lib/components/primitives/tabs';
+	import { ScrollArea } from '$lib/components/primitives/scroll-area';
+	import Icon from '@iconify/svelte';
+
+	interface Props {
+		tabs: TabConfig[];
+		onTabChange: (tabId: string) => void;
+	}
+
+	let { tabs, onTabChange }: Props = $props();
+</script>
+
+<ScrollArea class="w-full shrink-0 border-b border-border" orientation="horizontal">
+	<Tabs.List
+		class="px-2 py-2 gap-0 inline-flex h-auto w-max justify-start rounded-none bg-transparent"
+	>
+		{#each tabs as tab (tab.id)}
+			<Tabs.Trigger
+				value={tab.id}
+				onclick={() => onTabChange(tab.id)}
+				class="group/tab gap-1.5 px-3 py-1 text-sm font-medium relative h-auto flex-none shrink-0 rounded-none border-0 transition-colors not-last:border-r not-last:border-border hover:bg-accent data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=inactive]:text-muted-foreground dark:data-[state=active]:border-transparent dark:data-[state=active]:bg-transparent"
+			>
+				{#if tab.icon}
+					{#if tab.icon.includes(':')}
+						<Icon icon={tab.icon} class="h-4 w-4" />
+					{:else}
+						<span>{tab.icon}</span>
+					{/if}
+				{/if}
+				{tab.label}
+			</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+</ScrollArea>

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

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type {
+		TabConfig,
+		SchemaInput,
+		DiscoveredOutput,
+		SupportedTypes,
+		InputLayoutItem,
+		OutputLayoutItem
+	} from '@selvajs/schemas';
+	import * as Tabs from '$lib/components/primitives/tabs';
+	import { ScrollArea } from '$lib/components/primitives/scroll-area';
+	import StateDisplay from '../primitives/StateDisplay.svelte';
+	import Group from './Group.svelte';
+	import InputControl from './InputControl.svelte';
+	import OutputDisplay from './OutputDisplay.svelte';
+	import { evaluateGroupVisibility } from '$lib/schema/visibility-rules';
+
+	interface Props {
+		tab: TabConfig;
+		values: Record<string, unknown>;
+		collapsedGroups: Record<string, boolean>;
+		onToggleGroup: (groupId: string) => void;
+		onValueChange: (paramId: string, value: SupportedTypes) => void;
+		inputs: SchemaInput[];
+		outputs: DiscoveredOutput[];
+	}
+
+	let { tab, values, collapsedGroups, onToggleGroup, onValueChange, inputs, outputs }: Props =
+		$props();
+
+	function getInputById(paramId: string): SchemaInput | undefined {
+		return inputs.find((i) => i.id === paramId);
+	}
+
+	function getOutputById(paramId: string): DiscoveredOutput | undefined {
+		return outputs.find((o) => o.id === paramId);
+	}
+</script>
+
+{#snippet renderInput(
+	layoutItem: InputLayoutItem,
+	visibility: { visible: boolean; disabled: boolean; defaultValue?: unknown }
+)}
+	{@const input = getInputById(layoutItem.paramId)}
+	{#if input}
+		<InputControl
+			item={layoutItem}
+			value={values[input.id] as SupportedTypes | undefined}
+			displayName={layoutItem.displayName}
+			onChange={onValueChange}
+			disabled={visibility.disabled}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet renderOutput(layoutItem: OutputLayoutItem)}
+	{@const output = getOutputById(layoutItem.paramId)}
+	{#if output}
+		<OutputDisplay
+			item={layoutItem}
+			value={values[layoutItem.paramId]}
+			displayName={layoutItem.displayName}
+		/>
+	{/if}
+{/snippet}
+
+<Tabs.Content value={tab.id} class="min-h-0 p-0 flex-1">
+	<ScrollArea class="h-full" orientation="vertical">
+		<div class="p-4 tab-content-container">
+			{#if tab.groups.length === 0}
+				<StateDisplay type="empty" size="medium" message="This tab has no groups configured." />
+			{:else}
+				<div class="gap-8 flex flex-col">
+					{#each tab.groups as group (group.id)}
+						{#if evaluateGroupVisibility(group, values)}
+							<Group
+								label={group.label}
+								description={group.description}
+								items={group.items}
+								columns={group.columns ?? 1}
+								collapsed={collapsedGroups[group.id] ?? false}
+								{values}
+								onToggle={() => onToggleGroup(group.id)}
+								inputSnippet={renderInput}
+								outputSnippet={renderOutput}
+								flat={tab.groups.length === 1}
+							/>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</ScrollArea>
+</Tabs.Content>
+
+<style>
+	.tab-content-container {
+		container-type: inline-size;
+	}
+
+	@container (max-width: 320px) {
+		:global(.schema-grid) {
+			grid-template-columns: 1fr;
+		}
+	}
+	@container (min-width: 321px) and (max-width: 560px) {
+		:global(.schema-grid) {
+			grid-template-columns: repeat(min(2, var(--schema-cols)), minmax(0, 1fr));
+		}
+	}
+
+	/* Fallback for browsers without container query support */
+	@supports not (container-type: inline-size) {
+		@media (max-width: 639px) {
+			:global(.schema-grid) {
+				grid-template-columns: 1fr;
+			}
+		}
+		@media (min-width: 640px) and (max-width: 1023px) {
+			:global(.schema-grid) {
+				grid-template-columns: repeat(min(2, var(--schema-cols)), minmax(0, 1fr));
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { UISchema, SupportedTypes } from '@selvajs/schemas';
+	import * as Card from '$lib/components/primitives/card';
+	import * as Tabs from '$lib/components/primitives/tabs';
+	import TabBar from './TabBar.svelte';
+	import TabContent from './TabContent.svelte';
+	import { evaluateVisibility } from '$lib/schema/visibility-rules';
+
+	interface Props {
+		schema: UISchema;
+		values: Record<string, unknown>;
+		onValueChange: (paramId: string, value: SupportedTypes) => void;
+		/** Filter tabs by panel position. 'left' shows unpositioned + left tabs, 'right' shows right tabs only. */
+		panelFilter?: 'left' | 'right';
+		/** Externally request a specific tab to be active (e.g. from collapsed strip click) */
+		requestedTabId?: string | null;
+	}
+
+	let {
+		schema,
+		values = $bindable(),
+		onValueChange,
+		panelFilter,
+		requestedTabId = null
+	}: Props = $props();
+
+	let activeTabId = $state('');
+	let collapsedGroups = $state<Record<string, boolean>>({});
+
+	const visibleTabs = $derived(
+		schema.layout.type === 'tabbed'
+			? schema.layout.tabs.filter((tab) => {
+					if (!panelFilter) return true;
+					return panelFilter === 'right' ? tab.position === 'right' : tab.position !== 'right';
+				})
+			: []
+	);
+
+	const showTabBar = $derived(visibleTabs.length > 1);
+
+	// Tab selection
+	$effect(() => {
+		if (requestedTabId && visibleTabs.some((t) => t.id === requestedTabId)) {
+			activeTabId = requestedTabId;
+		} else if (visibleTabs.length > 0 && !activeTabId) {
+			activeTabId = visibleTabs[0].id;
+		}
+	});
+
+	// Collapsed group initialisation — only sets groups that haven't been seen yet
+	$effect(() => {
+		if (schema.layout.type !== 'tabbed') return;
+		const initial: Record<string, boolean> = {};
+		schema.layout.tabs.forEach((tab) =>
+			tab.groups.forEach((group) => {
+				if (!(group.id in collapsedGroups)) initial[group.id] = group.collapsed ?? false;
+			})
+		);
+		if (Object.keys(initial).length > 0) Object.assign(collapsedGroups, initial);
+	});
+
+	// Apply default values when visibility conditions hide or disable an item
+	$effect(() => {
+		if (schema.layout.type !== 'tabbed') return;
+		const updates: Record<string, unknown> = {};
+		visibleTabs.forEach((tab) =>
+			tab.groups.forEach((group) =>
+				group.items.forEach((layoutItem) => {
+					if (layoutItem.type === 'linebreak') return;
+					const { visible, disabled, defaultValue } = evaluateVisibility(layoutItem, values);
+					const input = schema.inputs.find((i) => i.id === layoutItem.paramId);
+					if (!input || defaultValue === undefined) return;
+					if ((!visible || disabled) && values[input.id] !== defaultValue) {
+						updates[input.id] = defaultValue;
+					}
+				})
+			)
+		);
+		if (Object.keys(updates).length > 0) Object.assign(values, updates);
+	});
+
+	function toggleGroup(groupId: string) {
+		collapsedGroups[groupId] = !collapsedGroups[groupId];
+	}
+
+	function handleTabChange(tabId: string) {
+		activeTabId = tabId;
+	}
+</script>
+
+<Card.Root class="pt-1 min-h-0 mx-1 flex flex-1 flex-col overflow-hidden">
+	<Tabs.Root value={activeTabId} class="gap-0 min-h-0 flex flex-1 flex-col">
+		{#if showTabBar}
+			<TabBar tabs={visibleTabs} onTabChange={handleTabChange} />
+		{/if}
+
+		{#each visibleTabs as tab (tab.id)}
+			<TabContent
+				{tab}
+				{values}
+				{collapsedGroups}
+				onToggleGroup={toggleGroup}
+				{onValueChange}
+				inputs={schema.inputs}
+				outputs={schema.outputs}
+			/>
+		{/each}
+	</Tabs.Root>
+</Card.Root>

package/src/lib/components/preview/index.ts

@@ -0,0 +1,4 @@
+// Preview/Runtime Components - Interactive UI rendering
+export { default as InputControl } from './InputControl.svelte';
+export { default as OutputDisplay } from './OutputDisplay.svelte';
+export { default as TabLayout } from './TabLayout.svelte';

package/src/lib/components/preview/inputs/CheckboxInput.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { SupportedTypes } from '@selvajs/schemas';
+	import { Checkbox } from '$lib/components/primitives/checkbox';
+	import * as Field from '$lib/components/primitives/field';
+
+	interface Props {
+		inputId: string;
+		value?: boolean;
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value = $bindable(), onChange, disabled = false }: Props = $props();
+</script>
+
+<Field.Field orientation="horizontal">
+	<Checkbox
+		id={inputId}
+		checked={typeof value === 'boolean' ? value : false}
+		onCheckedChange={(state) => {
+			value = state === true;
+			onChange(state === true);
+		}}
+		{disabled}
+	/>
+	<Field.Label for={inputId} class="font-normal cursor-pointer text-muted-foreground">
+		Enabled
+	</Field.Label>
+</Field.Field>

package/src/lib/components/preview/inputs/ChecklistInput.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import { Checkbox } from '$lib/components/primitives/checkbox';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	interface Props {
+		inputId: string;
+		value?: string[];
+		config?: DropdownWidgetConfig;
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value, config, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(config?.options ?? {});
+	const selected = $derived(new Set(value ?? []));
+
+	function toggle(expr: string, checked: boolean) {
+		const next = new SvelteSet(selected);
+		if (checked) {
+			next.add(expr);
+		} else {
+			next.delete(expr);
+		}
+		onChange([...next]);
+	}
+</script>
+
+<div class="divide-y divide-border/60 overflow-hidden rounded-md border border-input">
+	{#each Object.entries(options) as [name, expr] (expr ?? name)}
+		{@const optionValue = expr ?? name}
+		{@const optionId = `${inputId}-${optionValue}`}
+		{@const isSelected = selected.has(optionValue)}
+		<label
+			for={optionId}
+			class="gap-3 px-3 py-2 text-sm flex items-center transition-colors select-none hover:bg-accent/50 {isSelected
+				? 'bg-accent/30'
+				: ''} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
+		>
+			<Checkbox
+				id={optionId}
+				checked={isSelected}
+				onCheckedChange={(state) => toggle(optionValue, state === true)}
+				{disabled}
+			/>
+			<span class="flex-1" class:font-medium={isSelected}>{name}</span>
+		</label>
+	{/each}
+</div>

package/src/lib/components/preview/inputs/ColorInput.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		value?: string;
+		onChange: (value: string) => void;
+	}
+
+	let { value = '#000000', onChange }: Props = $props();
+</script>
+
+<div class="gap-2 flex items-center">
+	<input
+		type="color"
+		value={value || '#000000'}
+		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background"
+		onchange={(e) => {
+			const newValue = (e.currentTarget as HTMLInputElement).value;
+			onChange(newValue);
+		}}
+	/>
+	<span class="font-mono text-sm text-muted-foreground">{value || '#000000'}</span>
+</div>