@selvajs/ui 6.6.0-beta.8 → 7.0.0

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

@@ -7,6 +7,11 @@ interface Props {
     panelFilter?: 'left' | 'right';
     /** Externally request a specific tab to be active (e.g. from collapsed strip click) */
     requestedTabId?: string | null;
+    /**
+     * Drops the card frame and the tab's own scroll area, for a container that already frames
+     * and scrolls it (the phone drawer). Nested, the inner scroll gets only a sliver of height.
+     */
+    bare?: boolean;
 }
 declare const TabLayout: import("svelte").Component<Props, {}, "">;
 type TabLayout = ReturnType<typeof TabLayout>;

package/dist/components/preview/inputs/CheckboxInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { SupportedTypes } from '@selvajs/schemas';
-	import { Checkbox } from '../../primitives/checkbox';
+	import { Checkbox } from '../../primitives/checkbox/index.js';
 
 	interface Props {
 		inputId: string;

package/dist/components/preview/inputs/ChecklistInput.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { Checkbox } from '../../primitives/checkbox';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { Checkbox } from '../../primitives/checkbox/index.js';
+	import { optionGlyph } from '../../../schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	interface Props {
 		inputId: string;
 		value?: string[];
 		config?: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value, config, onChange, disabled = false }: Props = $props();
+	let { inputId, value, config, assets, onChange, disabled = false }: Props = $props();
 
 	const options = $derived(config?.options ?? {});
 	const selected = $derived(new Set(value ?? []));
@@ -27,15 +30,16 @@
 	}
 </script>
 
-<div class="divide-y divide-border/60 overflow-hidden rounded-md border border-input">
+<div class="divide-y divide-border overflow-hidden rounded-md border border-input">
 	{#each Object.entries(options) as [name, expr] (name)}
 		{@const optionValue = expr ?? name}
 		{@const optionId = `${inputId}-${optionValue}`}
 		{@const isSelected = selected.has(optionValue)}
+		{@const glyph = optionGlyph(config?.optionMedia?.[name], assets)}
 		<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'
+			class="gap-3 px-3 py-2 text-sm flex items-center transition-colors select-none hover:bg-hover {isSelected
+				? 'bg-selected'
 				: ''} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
 		>
 			<Checkbox
@@ -44,6 +48,7 @@
 				onCheckedChange={(state) => toggle(optionValue, state === true)}
 				{disabled}
 			/>
+			{#if glyph}<OptionGlyph {glyph} class="text-muted-foreground" />{/if}
 			<span class="flex-1" class:font-medium={isSelected}>{name}</span>
 		</label>
 	{/each}

package/dist/components/preview/inputs/ChecklistInput.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 interface Props {
     inputId: string;
     value?: string[];
     config?: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
     onChange: (value: SupportedTypes) => void;
     disabled?: boolean;
 }

package/dist/components/preview/inputs/ColorInput.svelte

@@ -1,23 +1,365 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { Check, Pipette } from '@lucide/svelte';
+	import * as Popover from '../../primitives/popover/index.js';
+	import { Input } from '../../primitives/input/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
+	import { debounce } from '../../../utils/debounce.js';
+	import {
+		contrastRatio,
+		hexToHsv,
+		hsvToHex,
+		normalizeHex,
+		type Hsv
+	} from '../../../utils/color-space.js';
+
 	interface Props {
 		inputId: string;
 		value?: string;
 		onChange: (value: string) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value = '#000000', onChange, disabled = false }: Props = $props();
+
+	const PRESETS = [
+		'#000000',
+		'#ffffff',
+		'#9ca3af',
+		'#ef4444',
+		'#f97316',
+		'#eab308',
+		'#22c55e',
+		'#14b8a6',
+		'#3b82f6',
+		'#8b5cf6',
+		'#ec4899',
+		'#78350f'
+	];
+
+	interface EyeDropperApi {
+		open(): Promise<{ sRGBHex: string }>;
+	}
+	const eyeDropperCtor = (globalThis as { EyeDropper?: new () => EyeDropperApi }).EyeDropper;
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	const parse = (hex: string): Hsv => hexToHsv(normalizeHex(hex) ?? '#000000')!;
+
+	let hsv = $state<Hsv>(untrack(() => parse(value)));
+	let draft = $state('');
+	let hexError = $state(false);
+	let areaEl = $state<HTMLElement | null>(null);
+
+	const currentHex = $derived(hsvToHex(hsv));
+	const hueColor = $derived(hsvToHex({ h: hsv.h, s: 1, v: 1 }));
+
+	// An external value only replaces the picker's state when it names a different color.
+	// Rebuilding from the hex alone would reset the hue whenever s or v hits 0.
+	$effect(() => {
+		const next = normalizeHex(value) ?? '#000000';
+		if (next !== untrack(() => currentHex)) hsv = parse(next);
+	});
+
+	$effect(() => {
+		draft = currentHex;
+		hexError = false;
+	});
+
+	// Dragging only updates local state; the host sees one change per gesture, since each
+	// change can trigger a solve.
+	function commit() {
+		commitDebounced.cancel();
+		if (currentHex !== normalizeHex(value)) onChange(currentHex);
+	}
+	const commitDebounced = debounce(commit, 150);
+
+	const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+	function setFromPointer(e: PointerEvent) {
+		if (!areaEl) return;
+		const rect = areaEl.getBoundingClientRect();
+		hsv = {
+			h: hsv.h,
+			s: clamp01((e.clientX - rect.left) / rect.width),
+			v: clamp01(1 - (e.clientY - rect.top) / rect.height)
+		};
+	}
+
+	function onAreaPointerDown(e: PointerEvent) {
+		if (disabled || e.button !== 0) return;
+		e.preventDefault();
+		areaEl?.focus();
+		areaEl?.setPointerCapture(e.pointerId);
+		setFromPointer(e);
+	}
+
+	function onAreaPointerMove(e: PointerEvent) {
+		if (areaEl?.hasPointerCapture(e.pointerId)) setFromPointer(e);
+	}
+
+	function onAreaPointerUp(e: PointerEvent) {
+		if (!areaEl?.hasPointerCapture(e.pointerId)) return;
+		areaEl.releasePointerCapture(e.pointerId);
+		commit();
+	}
+
+	function onAreaKeydown(e: KeyboardEvent) {
+		const step = e.shiftKey ? 0.1 : 0.01;
+		let { s, v } = hsv;
+		switch (e.key) {
+			case 'ArrowLeft':
+				s -= step;
+				break;
+			case 'ArrowRight':
+				s += step;
+				break;
+			case 'ArrowUp':
+				v += step;
+				break;
+			case 'ArrowDown':
+				v -= step;
+				break;
+			case 'PageUp':
+				v += 0.1;
+				break;
+			case 'PageDown':
+				v -= 0.1;
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		hsv = { h: hsv.h, s: clamp01(s), v: clamp01(v) };
+		commitDebounced();
 	}
 
-	let { inputId, value = '#000000', onChange }: Props = $props();
+	function onHueInput(e: Event) {
+		hsv = { ...hsv, h: Number((e.currentTarget as HTMLInputElement).value) };
+	}
+
+	function applyHex(hex: string) {
+		hsv = parse(hex);
+		commit();
+	}
+
+	function commitDraft() {
+		const hex = normalizeHex(draft);
+		if (!hex) {
+			hexError = true;
+			return;
+		}
+		hexError = false;
+		applyHex(hex);
+		draft = hex;
+	}
+
+	function onHexKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commitDraft();
+		}
+	}
+
+	function onHexBlur() {
+		if (normalizeHex(draft)) commitDraft();
+		else {
+			draft = currentHex;
+			hexError = false;
+		}
+	}
+
+	async function pickFromScreen() {
+		if (!eyeDropperCtor) return;
+		try {
+			const { sRGBHex } = await new eyeDropperCtor().open();
+			applyHex(sRGBHex);
+		} catch {
+			// The user dismissed the eyedropper.
+		}
+	}
+
+	const checkOn = (hex: string) =>
+		(contrastRatio(hex, '#000000') ?? 0) > (contrastRatio(hex, '#ffffff') ?? 0)
+			? 'text-black'
+			: 'text-white';
 </script>
 
-<div class="gap-2 flex items-center">
-	<input
-		id={inputId}
-		type="color"
-		value={value || '#000000'}
-		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background dark:bg-input/30"
-		onchange={(e) => {
-			const newValue = (e.currentTarget as HTMLInputElement).value;
-			onChange(newValue);
-		}}
-	/>
-	<span class="font-mono text-sm text-muted-foreground">{value || '#000000'}</span>
-</div>
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				type="button"
+				id={inputId}
+				{disabled}
+				aria-label={formatMessage(t.colorPick, { color: currentHex })}
+				class="h-9 gap-2.5 px-2.5 shadow-xs max-w-48 flex w-full cursor-pointer items-center rounded-md border border-input bg-background text-left outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				<span
+					class="size-5 shrink-0 rounded-md bg-(--swatch) ring-1 ring-border ring-inset"
+					style:--swatch={currentHex}
+				></span>
+				<span class="font-mono text-sm text-muted-foreground">{currentHex}</span>
+			</button>
+		{/snippet}
+	</Popover.Trigger>
+
+	<Popover.Content align="start">
+		<div
+			bind:this={areaEl}
+			role="slider"
+			tabindex={disabled ? -1 : 0}
+			aria-label={t.colorArea}
+			aria-valuemin={0}
+			aria-valuemax={100}
+			aria-valuenow={Math.round(hsv.v * 100)}
+			aria-valuetext={formatMessage(t.colorAreaValue, {
+				s: Math.round(hsv.s * 100),
+				v: Math.round(hsv.v * 100)
+			})}
+			aria-disabled={disabled}
+			class="color-area h-36 relative w-full cursor-crosshair touch-none rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring"
+			style:--hue={hueColor}
+			onpointerdown={onAreaPointerDown}
+			onpointermove={onAreaPointerMove}
+			onpointerup={onAreaPointerUp}
+			onpointercancel={onAreaPointerUp}
+			onkeydown={onAreaKeydown}
+		>
+			<span
+				class="color-thumb size-4 border-white pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-(--swatch)"
+				style:--x="{hsv.s * 100}%"
+				style:--y="{(1 - hsv.v) * 100}%"
+				style:--swatch={currentHex}
+			></span>
+		</div>
+
+		<input
+			type="range"
+			class="color-hue"
+			min="0"
+			max="360"
+			step="1"
+			aria-label={t.colorHue}
+			value={Math.round(hsv.h)}
+			{disabled}
+			oninput={onHueInput}
+			onchange={commit}
+		/>
+
+		<div class="gap-2 flex items-start">
+			<div class="min-w-0 flex-1">
+				<Input
+					type="text"
+					aria-label={t.colorHex}
+					aria-invalid={hexError}
+					aria-describedby={hexError ? `${inputId}-hex-error` : undefined}
+					autocomplete="off"
+					spellcheck={false}
+					maxlength={7}
+					{disabled}
+					bind:value={draft}
+					onkeydown={onHexKeydown}
+					onblur={onHexBlur}
+				/>
+			</div>
+			{#if eyeDropperCtor}
+				<button
+					type="button"
+					{disabled}
+					aria-label={t.colorEyedropper}
+					title={t.colorEyedropper}
+					class="size-9 flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-input bg-background outline-none hover:bg-hover focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={pickFromScreen}
+				>
+					<Pipette class="size-4" aria-hidden="true" />
+				</button>
+			{/if}
+		</div>
+		{#if hexError}
+			<p id="{inputId}-hex-error" role="alert" class="text-xs text-destructive">
+				{t.colorHexInvalid}
+			</p>
+		{/if}
+
+		<div role="group" aria-label={t.colorPresets} class="gap-1.5 grid grid-cols-6">
+			{#each PRESETS as preset (preset)}
+				{@const selected = preset === currentHex}
+				<button
+					type="button"
+					{disabled}
+					aria-label={preset}
+					aria-pressed={selected}
+					class="h-6 flex cursor-pointer items-center justify-center rounded-md bg-(--swatch) ring-1 ring-border outline-none ring-inset focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed"
+					style:--swatch={preset}
+					onclick={() => applyHex(preset)}
+				>
+					{#if selected}
+						<Check class="size-3.5 {checkOn(preset)}" aria-hidden="true" />
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</Popover.Content>
+</Popover.Root>
+
+<style>
+	.color-area {
+		background-color: var(--hue);
+		background-image:
+			linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
+	}
+	.color-thumb {
+		left: var(--x);
+		top: var(--y);
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue {
+		appearance: none;
+		-webkit-appearance: none;
+		height: 0.75rem;
+		width: 100%;
+		margin: 0;
+		border-radius: 9999px;
+		cursor: pointer;
+		outline: none;
+		background: linear-gradient(
+			to right,
+			#f00 0%,
+			#ff0 16.67%,
+			#0f0 33.33%,
+			#0ff 50%,
+			#00f 66.67%,
+			#f0f 83.33%,
+			#f00 100%
+		);
+	}
+	.color-hue::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		height: 1rem;
+		width: 1rem;
+		border-radius: 9999px;
+		border: 2px solid #fff;
+		background: transparent;
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue::-moz-range-thumb {
+		height: 1rem;
+		width: 1rem;
+		box-sizing: border-box;
+		border-radius: 9999px;
+		border: 2px solid #fff;
+		background: transparent;
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue:focus-visible {
+		box-shadow: 0 0 0 3px var(--ring);
+	}
+	.color-hue:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

package/dist/components/preview/inputs/ColorInput.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     inputId: string;
     value?: string;
     onChange: (value: string) => void;
+    disabled?: boolean;
 }
 declare const ColorInput: import("svelte").Component<Props, {}, "">;
 type ColorInput = ReturnType<typeof ColorInput>;

package/dist/components/preview/inputs/DropdownInput.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import * as Select from '../../primitives/select';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as Select from '../../primitives/select/index.js';
+	import { optionGlyph } from '../../../schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
 
 	interface Props {
 		value?: string;
 		config?: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { value, config, onChange, disabled = false }: Props = $props();
+	let { value, config, assets, onChange, disabled = false }: Props = $props();
 
 	const locale = getLocaleContext();
 
@@ -19,6 +22,8 @@
 	const currentLabel = $derived(
 		Object.entries(options).find(([_, expr]) => expr === currentValue)?.[0] ?? currentValue
 	);
+	const glyphOf = (name: string) => optionGlyph(config?.optionMedia?.[name], assets);
+	const currentGlyph = $derived(glyphOf(currentLabel));
 </script>
 
 <Select.Root
@@ -33,11 +38,18 @@
 	{disabled}
 >
 	<Select.Trigger class="w-full" {disabled}>
-		{currentLabel || locale.messages.selectOption}
+		<span class="gap-2 min-w-0 flex items-center">
+			{#if currentGlyph}<OptionGlyph glyph={currentGlyph} />{/if}
+			<span class="truncate">{currentLabel || locale.messages.selectOption}</span>
+		</span>
 	</Select.Trigger>
 	<Select.Content>
 		{#each Object.entries(options) as [name, expr] (name)}
-			<Select.Item value={expr ?? name} label={name} />
+			{@const glyph = glyphOf(name)}
+			<Select.Item value={expr ?? name} label={name}>
+				{#if glyph}<OptionGlyph {glyph} />{/if}
+				{name}
+			</Select.Item>
 		{/each}
 	</Select.Content>
 </Select.Root>

package/dist/components/preview/inputs/DropdownInput.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 interface Props {
     value?: string;
     config?: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
     onChange: (value: SupportedTypes) => void;
     disabled?: boolean;
 }