@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { GlyphSource } from '#lib/schema/option-display.js';
+	import { cn } from '#lib/utils.js';
+
+	interface Props {
+		glyph: GlyphSource;
+		class?: string;
+	}
+
+	let { glyph, class: className }: Props = $props();
+</script>
+
+{#if glyph.kind === 'icon'}
+	<!-- Lucide's stroke defaults; the path is bound as an attribute, never parsed as markup. -->
+	<svg
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+		class={cn('size-4 shrink-0', className)}
+	>
+		<path d={glyph.d} />
+	</svg>
+{:else}
+	<img src={glyph.src} alt="" class={cn('size-4 shrink-0 rounded-sm object-cover', className)} />
+{/if}

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as ToggleGroup from '#lib/components/primitives/toggle-group/index.js';
+	import { optionGlyph } from '#lib/schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+
+	interface Props {
+		labelId: string;
+		value?: string;
+		config: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { labelId, value, config, assets, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(Object.entries(config.options ?? {}));
+	const hasIcons = $derived(
+		options.some(([name]) => optionGlyph(config.optionMedia?.[name], assets))
+	);
+</script>
+
+<ToggleGroup.Root
+	type="single"
+	variant="outline"
+	spacing={0}
+	size={hasIcons ? 'stacked' : 'default'}
+	class="w-full"
+	aria-labelledby={labelId}
+	value={value ?? ''}
+	onValueChange={(next) => {
+		// A single-select group emits '' when the active item is clicked again; keep the selection.
+		if (next) onChange(next);
+	}}
+	{disabled}
+>
+	{#each options as [name, expr] (name)}
+		{@const glyph = optionGlyph(config.optionMedia?.[name], assets)}
+		<ToggleGroup.Item value={expr ?? name} class="min-w-0 flex-1" title={name}>
+			{#if glyph}<OptionGlyph {glyph} />{/if}
+			<span class="max-w-full truncate">{name}</span>
+		</ToggleGroup.Item>
+	{/each}
+</ToggleGroup.Root>

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

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { TextWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '$lib/utils/debounce';
-	import { Input } from '$lib/components/primitives/input';
-	import * as Field from '$lib/components/primitives/field';
+	import { debounce } from '#lib/utils/debounce.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import * as Field from '#lib/components/primitives/field/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;
@@ -14,6 +16,9 @@
 
 	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let validationError = $state<string | null>(null);
 	let currentValue = $state(value || '');
 
@@ -21,13 +26,13 @@
 
 	function validateText(val: string): string | null {
 		if (config?.maxLength && val.length > config.maxLength)
-			return `Maximum ${config.maxLength} characters allowed`;
+			return formatMessage(t.maxLength, { max: config.maxLength });
 		if (config?.pattern) {
 			try {
 				if (!new RegExp(config.pattern).test(val))
-					return config.customErrorMessage || 'Invalid format';
+					return config.customErrorMessage || t.invalidFormat;
 			} catch {
-				return 'Invalid validation pattern configured';
+				return t.invalidPattern;
 			}
 		}
 		return null;

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { optionGlyph } from '#lib/schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+
+	interface Props {
+		labelId: string;
+		value?: string;
+		config: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { labelId, value, config, assets, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(
+		Object.entries(config.options ?? {}).map(([name, expr]) => ({ name, value: expr ?? name }))
+	);
+	// With nothing selected the first tile takes focus, so the group is still reachable by Tab.
+	const focusIndex = $derived(
+		Math.max(
+			0,
+			options.findIndex((o) => o.value === value)
+		)
+	);
+
+	let tiles: HTMLButtonElement[] = $state([]);
+
+	function onKeydown(event: KeyboardEvent, index: number) {
+		const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+		if (!step) return;
+		event.preventDefault();
+		const next = (index + step + options.length) % options.length;
+		onChange(options[next].value);
+		tiles[next]?.focus();
+	}
+</script>
+
+<div role="radiogroup" aria-labelledby={labelId} class="gap-2 tile-grid grid">
+	{#each options as option, index (option.name)}
+		{@const glyph = optionGlyph(config.optionMedia?.[option.name], assets)}
+		{@const selected = option.value === value}
+		<button
+			bind:this={tiles[index]}
+			type="button"
+			role="radio"
+			title={option.name}
+			aria-checked={selected}
+			tabindex={index === focusIndex ? 0 : -1}
+			{disabled}
+			onclick={() => onChange(option.value)}
+			onkeydown={(e) => onKeydown(e, index)}
+			class="gap-1.5 p-1.5 min-w-0 flex flex-col rounded-lg border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 {selected
+				? 'border-primary bg-primary/10 ring-1 ring-primary'
+				: 'border-input hover:bg-hover'}"
+		>
+			<span
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted {selected
+					? 'text-foreground'
+					: 'text-muted-foreground'}"
+			>
+				{#if glyph?.kind === 'image'}
+					<OptionGlyph {glyph} class="size-full" />
+				{:else if glyph}
+					<OptionGlyph {glyph} class="size-7" />
+				{:else}
+					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
+				{/if}
+			</span>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
+				{option.name}
+			</span>
+		</button>
+	{/each}
+</div>
+
+<style>
+	/* Two or three tiles a row as the panel narrows; a fixed count shrinks them to unreadable. */
+	.tile-grid {
+		grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
+	}
+</style>

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

@@ -3,5 +3,8 @@ export { default as ChecklistInput } from './ChecklistInput.svelte';
 export { default as ColorInput } from './ColorInput.svelte';
 export { default as DropdownInput } from './DropdownInput.svelte';
 export { default as FileInput } from './FileInput.svelte';
+export { default as GeometryInput } from './GeometryInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
+export { default as SegmentedInput } from './SegmentedInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { default as TileInput } from './TileInput.svelte';

package/src/lib/components/primitives/CalculateButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
 	import { Button } from './button';
 	import { Zap, Check, Loader, Play } from '@lucide/svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -11,34 +12,65 @@
 		hasNeverSolved?: boolean;
 		isSolving: boolean;
 		oncalculate: () => void;
+		/** Beside the button, sharing its row: the panel footer's actions menu. */
+		trailing?: Snippet;
 	}
 
-	let { hasPendingChanges, hasNeverSolved = false, isSolving, oncalculate }: Props = $props();
+	let {
+		hasPendingChanges,
+		hasNeverSolved = false,
+		isSolving,
+		oncalculate,
+		trailing
+	}: Props = $props();
+
+	// The label below changes too, but a screen reader doesn't read a label change on a button
+	// that has lost focus, so start and end of a solve go through a live region as well.
+	let announcement = $state('');
+	let wasSolving = false;
+	$effect(() => {
+		const solving = isSolving;
+		untrack(() => {
+			if (solving) announcement = t.solvingEllipsis;
+			else if (wasSolving) announcement = hasPendingChanges ? '' : t.upToDate;
+			wasSolving = solving;
+		});
+	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
-	<Button
-		variant={hasPendingChanges ? 'default' : 'ghost'}
-		size="lg"
-		onclick={() => !isSolving && oncalculate()}
-		disabled={!hasPendingChanges && !isSolving}
-		aria-busy={isSolving}
-		class="gap-2 font-medium w-full transition-all duration-200
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border">
+	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
+	<div class="gap-2 flex">
+		<Button
+			variant={hasPendingChanges ? 'default' : 'ghost'}
+			size="lg"
+			onclick={() => !isSolving && oncalculate()}
+			disabled={!hasPendingChanges && !isSolving}
+			aria-busy={isSolving}
+			class="gap-2 font-medium min-w-0 flex-1 transition-all duration-200
 			{hasPendingChanges && !isSolving ? 'shadow-md' : ''}
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
-	>
-		{#if isSolving}
-			<Loader class="h-4 w-4 animate-spin" />
-			{t.solvingEllipsis}
-		{:else if hasNeverSolved}
-			<Play class="h-4 w-4" />
-			{t.pressToCalculate}
-		{:else if hasPendingChanges}
-			<Zap class="h-4 w-4" />
-			{t.calculate}
-		{:else}
-			<Check class="h-4 w-4" />
-			{t.upToDate}
-		{/if}
-	</Button>
+		>
+			{#if isSolving}
+				<Loader class="h-4 w-4 animate-spin" />
+				{t.solvingEllipsis}
+				<kbd
+					class="px-1 rounded-sm border border-current/30 font-sans text-2xs opacity-70"
+					title={t.solveMessagesEscHint}
+				>
+					Esc
+				</kbd>
+			{:else if hasNeverSolved}
+				<Play class="h-4 w-4" />
+				{t.pressToCalculate}
+			{:else if hasPendingChanges}
+				<Zap class="h-4 w-4" />
+				{t.calculate}
+			{:else}
+				<Check class="h-4 w-4" />
+				{t.upToDate}
+			{/if}
+		</Button>
+		{@render trailing?.()}
+	</div>
 </div>

package/src/lib/components/primitives/Callout.svelte

@@ -8,7 +8,7 @@
 		variants: {
 			tone: {
 				info: 'border-info/40 bg-info/10',
-				tip: 'border-border bg-muted/40',
+				tip: 'border-border bg-muted',
 				success: 'border-success/40 bg-success/10',
 				warning: 'border-warning/40 bg-warning/10',
 				danger: 'border-destructive/40 bg-destructive/10'
@@ -31,14 +31,14 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		tone?: CalloutTone;
 		title?: string;
 		/** Replaces the tone's default icon. `null` drops the icon entirely. */
 		icon?: Component | null;
-		children: Snippet;
+		children?: Snippet;
 	}
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
@@ -55,12 +55,14 @@
 	{#if Icon}
 		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
-	<div class="min-w-0 space-y-1">
+	<div class="min-w-0 space-y-1 wrap-anywhere">
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}
-		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
-			{@render children()}
-		</div>
+		{#if children}
+			<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 </div>

package/src/lib/components/primitives/DataTable.svelte

@@ -3,6 +3,8 @@
 		label: string;
 		width?: string;
 		align?: 'left' | 'right';
+		/** Drop the column below 640px, where fixed widths would crush the flexible one. */
+		hideOnMobile?: boolean;
 	}
 </script>
 
@@ -19,20 +21,52 @@
 
 	let { rows, columns, getKey, row, class: className = '' }: Props = $props();
 
-	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
+	// `minmax(0, …)` so a long name truncates rather than widening its row past the others.
+	const toTemplate = (cols: DataTableColumn[]) =>
+		cols.map((c) => c.width ?? 'minmax(0, 1fr)').join(' ');
+	const gridTemplate = $derived(toTemplate(columns));
+	const mobileTemplate = $derived(toTemplate(columns.filter((c) => !c.hideOnMobile)));
+	// Cells come from the caller's snippet, so they're hidden by position.
+	const hiddenCols = $derived(
+		columns
+			.map((c, i) => (c.hideOnMobile ? `hide-col-${i + 1}` : ''))
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class={`divide-y rounded-lg border ${className}`} style:--table-cols={gridTemplate}>
+<div
+	class={`divide-y rounded-lg border ${className}`}
+	style:--table-cols={gridTemplate}
+	style:--table-cols-sm={mobileTemplate}
+>
 	<div
-		class="gap-4 px-4 py-2 text-xs font-medium tracking-wide grid grid-cols-(--table-cols) bg-muted/40 text-muted-foreground uppercase"
+		class="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted text-muted-foreground uppercase {hiddenCols}"
 	>
 		{#each columns as col (col.label)}
 			<span class={col.align === 'right' ? 'text-right' : ''}>{col.label}</span>
 		{/each}
 	</div>
 	{#each rows as item (getKey(item))}
-		<div class="gap-4 px-4 py-3 grid grid-cols-(--table-cols) items-center">
+		<div
+			class="data-table-row gap-4 px-4 py-3 sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) items-center {hiddenCols}"
+		>
 			{@render row(item)}
 		</div>
 	{/each}
 </div>
+
+<style>
+	@media (max-width: 639px) {
+		:global(.data-table-row.hide-col-1 > :nth-child(1)),
+		:global(.data-table-row.hide-col-2 > :nth-child(2)),
+		:global(.data-table-row.hide-col-3 > :nth-child(3)),
+		:global(.data-table-row.hide-col-4 > :nth-child(4)),
+		:global(.data-table-row.hide-col-5 > :nth-child(5)),
+		:global(.data-table-row.hide-col-6 > :nth-child(6)),
+		:global(.data-table-row.hide-col-7 > :nth-child(7)),
+		:global(.data-table-row.hide-col-8 > :nth-child(8)) {
+			display: none;
+		}
+	}
+</style>

package/src/lib/components/primitives/FilterableDropdown.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
 	import { ChevronDown } from '@lucide/svelte';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import { buttonVariants } from './button';
 	import * as Popover from './popover';
 	import * as Command from './command';
@@ -11,6 +11,7 @@
 		label: string;
 		icon?: Component;
 		iconClass?: string;
+		disabled?: boolean;
 	}
 
 	interface Props {
@@ -24,6 +25,10 @@
 		/** Above this many items the list gets a filter box. */
 		searchThreshold?: number;
 		disabled?: boolean;
+		/** Submits the picked id with a plain <form>, like a native select's name. */
+		name?: string;
+		size?: 'default' | 'sm';
+		'aria-label'?: string;
 		class?: string;
 	}
 
@@ -37,6 +42,9 @@
 		searchPlaceholder = 'Filter...',
 		searchThreshold = 4,
 		disabled = false,
+		name,
+		size = 'default',
+		'aria-label': ariaLabel,
 		class: className
 	}: Props = $props();
 
@@ -51,14 +59,17 @@
 	}
 </script>
 
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
 <Popover.Root bind:open>
 	<Popover.Trigger
 		{id}
 		{disabled}
 		role="combobox"
 		aria-expanded={open}
+		aria-label={ariaLabel}
 		class={cn(
-			buttonVariants({ variant: 'outline' }),
+			buttonVariants({ variant: 'outline', size }),
 			'font-normal w-full justify-start',
 			className
 		)}
@@ -85,6 +96,7 @@
 						value={item.id}
 						keywords={[item.label]}
 						data-checked={item.id === value}
+						disabled={item.disabled}
 						onSelect={() => pick(item)}
 					>
 						{#if ItemIcon}

package/src/lib/components/primitives/ImageUploadField.svelte

@@ -60,7 +60,7 @@
 				accept="image/*"
 				{disabled}
 				onchange={onFileSelected}
-				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-background file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
+				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-field file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
 			/>
 			<Button
 				size="sm"

package/src/lib/components/primitives/IssueList.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import SeverityIcon from './SeverityIcon.svelte';
 
 	interface Props {

package/src/lib/components/primitives/SeverityIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import { SEVERITY_ICON, SEVERITY_TEXT, type Severity } from './severity';
 
 	interface Props {