@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.11

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

@@ -3,21 +3,35 @@
 	import { debounce } from '$lib/utils/debounce';
 	import { Input } from '$lib/components/primitives/input';
 	import { Slider } from '$lib/components/primitives/slider';
+	import * as InputGroup from '$lib/components/primitives/input-group';
+	import { Separator } from '$lib/components/primitives/separator';
 	import * as Field from '$lib/components/primitives/field';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatMessage } from '$lib/i18n/messages';
 
 	interface Props {
 		inputId: string;
+		/** Id of the field's label, which also names the slider thumb. */
+		labelId?: string;
 		value?: number;
 		config?: NumberWidgetConfig;
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
+	let {
+		inputId,
+		labelId,
+		value = $bindable(),
+		config,
+		onChange,
+		disabled = false
+	}: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	let validationError = $state<string | null>(null);
-	let sliderEditing = $state(false);
-	let sliderInputValue = $state('');
 
 	const min = $derived(config?.minimum ?? 0);
 	const max = $derived(config?.maximum ?? 100);
@@ -29,9 +43,9 @@
 
 	function validateNumber(val: number): string | null {
 		if (config?.minimum !== undefined && val < config.minimum)
-			return `Minimum value is ${config.minimum}`;
+			return formatMessage(t.minValue, { min: config.minimum });
 		if (config?.maximum !== undefined && val > config.maximum)
-			return `Maximum value is ${config.maximum}`;
+			return formatMessage(t.maxValue, { max: config.maximum });
 		return null;
 	}
 
@@ -44,77 +58,126 @@
 		}
 	}
 
-	function handleSliderChange(newValue: number) {
+	// bits-ui builds an array of every step and rebuilds a tick object per step on each value
+	// change, so a fine-grained range freezes the drag. Past this many steps the track drives a
+	// coarse proxy scale instead; the number box next to it still sets any exact value.
+	const MAX_TRACK_STEPS = 1000;
+	const FINE_DRAG_FACTOR = 10;
+	const stepCount = $derived((max - min) / step);
+	const useProxyTrack = $derived(
+		step > 0 && Number.isFinite(stepCount) && stepCount > MAX_TRACK_STEPS
+	);
+	const trackMin = $derived(useProxyTrack ? 0 : min);
+	const trackMax = $derived(useProxyTrack ? MAX_TRACK_STEPS : max);
+	const stepPrecision = $derived((String(step).split('.')[1] ?? '').length);
+
+	let dragging = false;
+	let shiftHeld = false;
+	let lastTrack: number | null = null;
+	let fineAnchor: { track: number; value: number } | null = null;
+
+	function snapToStep(v: number): number {
+		const clamped = Math.min(max, Math.max(min, v));
+		if (!(step > 0)) return clamped;
+		const snapped = min + Math.round((clamped - min) / step) * step;
+		return Math.min(max, Number(snapped.toFixed(stepPrecision)));
+	}
+
+	function toTrack(v: number): number {
+		return useProxyTrack ? Math.round(((v - min) / (max - min)) * MAX_TRACK_STEPS) : v;
+	}
+
+	function trackSpanToValue(trackDelta: number): number {
+		return (trackDelta / (trackMax - trackMin)) * (max - min);
+	}
+
+	// bits-ui maps the pointer to an absolute track position, so fine drag works in deltas: the
+	// value moves FINE_DRAG_FACTOR times slower than the pointer from where Shift took effect.
+	function setFromTrack(track: number) {
+		if (max <= min) return;
+		let newValue: number;
+		if (dragging && shiftHeld) {
+			fineAnchor ??= { track: lastTrack ?? track, value: numValue };
+			newValue = snapToStep(
+				fineAnchor.value + trackSpanToValue(track - fineAnchor.track) / FINE_DRAG_FACTOR
+			);
+		} else {
+			fineAnchor = null;
+			newValue = snapToStep(min + trackSpanToValue(track - trackMin));
+		}
+		lastTrack = track;
 		value = newValue;
 		commitSliderDebounced(newValue);
 	}
 
-	function focusSliderInput(node: HTMLInputElement) {
-		node.focus();
-		node.select();
+	function startDrag(e: PointerEvent) {
+		dragging = true;
+		shiftHeld = e.shiftKey;
+		lastTrack = null;
+		fineAnchor = null;
 	}
 
-	function decimalPlaces(stepSize: number): number {
-		return Math.max(0, -Math.floor(Math.log10(stepSize)));
+	function setShift(e: KeyboardEvent) {
+		if (e.key === 'Shift') shiftHeld = e.type === 'keydown';
+	}
+
+	const decimals = $derived(Math.max(0, -Math.floor(Math.log10(step))));
+
+	function commitTypedValue(input: HTMLInputElement) {
+		const parsed = parseFloat(input.value);
+		if (isNaN(parsed)) {
+			input.value = numValue.toFixed(decimals);
+			return;
+		}
+		const clamped = Math.min(max, Math.max(min, parsed));
+		input.value = clamped.toFixed(decimals);
+		if (clamped === value) return;
+		value = clamped;
+		onChange(clamped);
 	}
 </script>
 
+<svelte:window
+	onkeydown={setShift}
+	onkeyup={setShift}
+	onpointerup={() => (dragging = false)}
+	onblur={() => (shiftHeld = dragging = false)}
+/>
+
 {#if config?.renderAsSlider}
-	{@const dp = decimalPlaces(step)}
-	<div class="gap-4 flex items-center">
-		<Slider
-			type="single"
-			value={numValue}
+	<!-- Value and track share one box, the height of a number input, so mixed rows line up and
+	     a value can't be read as belonging to the neighbouring slider. -->
+	<InputGroup.Root>
+		<InputGroup.Input
+			id={inputId}
+			type="number"
+			class="w-18 flex-none"
+			value={numValue.toFixed(decimals)}
 			{min}
 			{max}
 			{step}
-			class="flex-1"
-			onValueChange={handleSliderChange}
 			{disabled}
+			onchange={(e) => commitTypedValue(e.currentTarget)}
+			onkeydown={(e) => {
+				if (e.key === 'Enter') e.currentTarget.blur();
+			}}
 		/>
-		{#if sliderEditing}
-			<input
-				use:focusSliderInput
-				type="number"
-				{step}
-				class="min-w-12 w-16 text-sm border-b border-border bg-transparent text-right outline-none focus:border-foreground"
-				bind:value={sliderInputValue}
-				onblur={() => {
-					const parsed = parseFloat(sliderInputValue);
-					if (!isNaN(parsed)) handleSliderChange(Math.min(max, Math.max(min, parsed)));
-					sliderEditing = false;
-				}}
-				onkeydown={(e) => {
-					if (e.key === 'Enter') {
-						const parsed = parseFloat(sliderInputValue);
-						if (!isNaN(parsed)) handleSliderChange(Math.min(max, Math.max(min, parsed)));
-						sliderEditing = false;
-					} else if (e.key === 'Escape') {
-						sliderEditing = false;
-					}
-				}}
+		<Separator orientation="vertical" />
+		<div class="px-3.5 min-w-0 flex flex-1 items-center" onpointerdowncapture={startDrag}>
+			<!-- A function binding, not value + onValueChange: when a fine drag leaves the value
+			     unchanged, the thumb must stay put instead of following the pointer. -->
+			<Slider
+				type="single"
+				bind:value={() => toTrack(numValue), setFromTrack}
+				min={trackMin}
+				max={trackMax}
+				step={useProxyTrack ? 1 : step}
+				title={t.fineDragHint}
+				thumbLabelledby={labelId}
+				{disabled}
 			/>
-		{:else}
-			<span
-				role="button"
-				tabindex={0}
-				class="min-w-12 text-sm cursor-text text-right text-muted-foreground select-none"
-				title="Double-click to edit"
-				ondblclick={() => {
-					sliderInputValue = numValue.toFixed(dp);
-					sliderEditing = true;
-				}}
-				onkeydown={(e) => {
-					if (e.key === 'Enter' || e.key === ' ') {
-						sliderInputValue = numValue.toFixed(dp);
-						sliderEditing = true;
-					}
-				}}
-			>
-				{numValue.toFixed(dp)}
-			</span>
-		{/if}
-	</div>
+		</div>
+	</InputGroup.Root>
 {:else}
 	<Input
 		id={inputId}
@@ -126,7 +189,6 @@
 		placeholder={config?.placeholder}
 		data-invalid={validationError ? true : undefined}
 		aria-invalid={validationError ? true : undefined}
-		class={validationError ? 'border-destructive' : ''}
 		{disabled}
 		oninput={() => (validationError = null)}
 		onchange={(e) => {

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { GlyphSource } from '$lib/schema/option-display';
+	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,44 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as ToggleGroup from '$lib/components/primitives/toggle-group';
+	import { optionGlyph } from '$lib/schema/option-display';
+	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"
+	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

@@ -3,6 +3,8 @@
 	import { debounce } from '$lib/utils/debounce';
 	import { Input } from '$lib/components/primitives/input';
 	import * as Field from '$lib/components/primitives/field';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatMessage } from '$lib/i18n/messages';
 
 	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;
@@ -51,7 +56,6 @@
 	maxlength={config?.maxLength}
 	data-invalid={validationError ? true : undefined}
 	aria-invalid={validationError ? true : undefined}
-	class={validationError ? 'border-destructive' : ''}
 	{disabled}
 	oninput={() => {
 		validationError = null;

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { optionGlyph } from '$lib/schema/option-display';
+	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"
+			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/5 ring-1 ring-primary'
+				: 'border-input hover:bg-accent/40'}"
+		>
+			<span
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted 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 truncate" 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
-			{hasPendingChanges && !isSolving ? 'selva-pending-pulse shadow-md' : ''}
+	<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 font-sans rounded border border-current/30 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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { type VariantProps, tv } from 'tailwind-variants';
-	import { Info, TriangleAlert, CircleCheck, CircleX, Lightbulb } from '@lucide/svelte';
 	import type { Component } from 'svelte';
+	import { SEVERITY_ICON, SEVERITY_TEXT, type Severity } from './severity';
 
 	export const calloutVariants = tv({
 		base: 'flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm',
@@ -19,20 +19,12 @@
 
 	export type CalloutTone = NonNullable<VariantProps<typeof calloutVariants>['tone']>;
 
-	const TONE_ICON: Record<CalloutTone, Component> = {
-		info: Info,
-		tip: Lightbulb,
-		success: CircleCheck,
-		warning: TriangleAlert,
-		danger: CircleX
-	};
-
-	const TONE_ACCENT: Record<CalloutTone, string> = {
-		info: 'text-info',
-		tip: 'text-muted-foreground',
-		success: 'text-success',
-		warning: 'text-warning',
-		danger: 'text-destructive'
+	const TONE_SEVERITY: Record<CalloutTone, Severity> = {
+		info: 'info',
+		tip: 'note',
+		success: 'success',
+		warning: 'warning',
+		danger: 'error'
 	};
 </script>
 
@@ -51,7 +43,8 @@
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
 
-	const Icon = $derived(icon === undefined ? TONE_ICON[tone] : icon);
+	const Icon = $derived(icon === undefined ? SEVERITY_ICON[TONE_SEVERITY[tone]] : icon);
+	const accent = $derived(SEVERITY_TEXT[TONE_SEVERITY[tone]]);
 </script>
 
 <div
@@ -60,11 +53,11 @@
 	{...restProps}
 >
 	{#if Icon}
-		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', TONE_ACCENT[tone])} />
+		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
 	<div class="min-w-0 space-y-1">
 		{#if title}
-			<p class={cn('leading-tight font-medium', TONE_ACCENT[tone])}>{title}</p>
+			<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()}

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,21 +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}`}>
+<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 bg-muted/40 text-muted-foreground uppercase"
-		style:grid-template-columns={gridTemplate}
+		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/40 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 items-center" style:grid-template-columns={gridTemplate}>
+		<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>