@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

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

@@ -1,10 +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 { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	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;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import { optionGlyph } from '$lib/schema/option-display';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {
@@ -45,17 +45,20 @@
 			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/5 ring-1 ring-primary'
-				: 'border-input hover:bg-accent/40'}"
+				? '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 text-muted-foreground"
+				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" />
@@ -65,7 +68,7 @@
 					<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}>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
 				{option.name}
 			</span>
 		</button>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { untrack, type Snippet } from 'svelte';
 	import { Button } from './button';
-	import { Zap, Check, Loader, Play } from '@lucide/svelte';
+	import { Zap, LoaderCircle, Play } from '@lucide/svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	const locale = getLocaleContext();
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+<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
@@ -52,8 +52,14 @@
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
 		>
 			{#if isSolving}
-				<Loader class="h-4 w-4 animate-spin" />
+				<LoaderCircle 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}
@@ -61,7 +67,7 @@
 				<Zap class="h-4 w-4" />
 				{t.calculate}
 			{:else}
-				<Check class="h-4 w-4" />
+				<span class="size-1.5 shrink-0 rounded-full bg-success" aria-hidden="true"></span>
 				{t.upToDate}
 			{/if}
 		</Button>

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

@@ -41,7 +41,7 @@
 	style:--table-cols-sm={mobileTemplate}
 >
 	<div
-		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}"
+		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>

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 {

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

@@ -1,60 +1,261 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { Check, LoaderCircle } from '@lucide/svelte';
+	import { EMPTY_LIVE_SOLVE, type LiveSolveState } from '@selvajs/solve/client';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import { createLiveProgress } from '#lib/compute/liveProgress.svelte.js';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
+	// The solve status in a panel's action row. It grows only as far as the solve needs: a quiet
+	// "up to date" row, a pill once a solve is visible, a card with progress and Abort once it is
+	// slow. It grows upward over the fields, so the footer never changes height.
 	interface Props {
+		/** The raw flag: times the solve, and acknowledges one too short to show. */
+		isSolving: boolean;
+		/** `createSolvingIndicator(...).show`. */
 		show: boolean;
+		/** `createSolvingIndicator(...).slow`. */
+		slow?: boolean;
+		/** Live progress for the card. Without it the card's bar is indeterminate. */
+		live?: LiveSolveState;
+		/** Without it the card has no Abort button; Esc still works where the host handles it. */
+		onabort?: () => void;
 		/**
-		 * `floating` overlays the bottom-left corner. `inline` is a compact chip the size of an
-		 * icon button, for a narrow host whose corner holds its content and whose action row
-		 * already reserves the chip's place. That host freezes while it solves, so the chip says
-		 * Esc aborts: a frozen page can't offer a button.
+		 * The page can't repaint mid-solve (see `createSolvingIndicator`): the pill says Esc aborts
+		 * instead of counting seconds, and never grows into the card.
 		 */
-		placement?: 'floating' | 'inline';
+		freezesDuringSolve?: boolean;
 	}
 
-	let { show, placement = 'floating' }: Props = $props();
+	let {
+		isSolving,
+		show,
+		slow = false,
+		live,
+		onabort,
+		freezesDuringSolve = false
+	}: Props = $props();
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
+
+	const DONE_VISIBLE_MS = 1400;
+	// A drag fires a solve per step; one acknowledgement per this many ms is enough.
+	const PING_EVERY_MS = 500;
+
+	const progress = createLiveProgress(() => live ?? EMPTY_LIVE_SOLVE);
+	const head = $derived(progress.headline ?? progress.progress[0]);
+	const bar = $derived(
+		head?.fraction === undefined
+			? undefined
+			: (progress.bars[head.source ?? ''] ?? { width: head.fraction, ms: 150 })
+	);
+
+	let startedAt = 0;
+	let elapsed = $state(0);
+	let finished = $state<{ ms: number; aborted: boolean } | null>(null);
+	let ping = $state(0);
+	let lastPingAt = 0;
+	// Not `show` itself at the solve's end: the host's indicator may already have dropped it.
+	let shownThisSolve = false;
+
+	$effect(() => {
+		if (show) shownThisSolve = true;
+	});
+
+	$effect(() => {
+		const solving = isSolving;
+		untrack(() => {
+			if (solving) {
+				startedAt = performance.now();
+				shownThisSolve = show;
+				elapsed = 0;
+				finished = null;
+				return;
+			}
+			if (!startedAt) return;
+			const ms = performance.now() - startedAt;
+			startedAt = 0;
+			if (shownThisSolve) {
+				finished = { ms, aborted: live?.ended?.kind === 'aborted' };
+			} else if (performance.now() - lastPingAt > PING_EVERY_MS) {
+				lastPingAt = performance.now();
+				ping++;
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!finished) return;
+		const timer = setTimeout(() => (finished = null), DONE_VISIBLE_MS);
+		return () => clearTimeout(timer);
+	});
+
+	$effect(() => {
+		if (!isSolving || !show || freezesDuringSolve) return;
+		const tick = () => (elapsed = performance.now() - startedAt);
+		tick();
+		const id = setInterval(tick, 100);
+		return () => clearInterval(id);
+	});
+
+	// Done wins over a held `show`: the indicator outlives the solve by up to its minimum time,
+	// and saying "Solving" over a result that has already landed would be wrong.
+	const mode = $derived<'idle' | 'work' | 'card' | 'done'>(
+		finished ? 'done' : show ? (slow && !freezesDuringSolve ? 'card' : 'work') : 'idle'
+	);
+
+	const seconds = $derived(
+		new Intl.NumberFormat(locale.locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+	);
+	const fmt = (ms: number) => `${seconds.format(ms / 1000)} s`;
+
+	const announcement = $derived(
+		mode === 'work' || mode === 'card'
+			? t.solvingEllipsis
+			: mode === 'done'
+				? finished?.aborted
+					? t.solveStopped
+					: t.solveDone
+				: ''
+	);
 </script>
 
-<!-- The live region stays mounted: a screen reader only announces text that changes inside a
-     region it already knows about, so one created together with its text says nothing. -->
-<div
-	role="status"
-	aria-live="polite"
-	aria-atomic="true"
-	class={placement === 'inline' ? 'h-10 gap-3 min-w-0 flex items-center' : undefined}
->
-	{#if show && placement === 'inline'}
-		<div
-			class="gap-2 px-3 h-10 text-sm font-semibold flex shrink-0 items-center rounded-md bg-primary text-primary-foreground"
-		>
+<div class="h-10 min-w-0 relative flex-1">
+	<!-- The live region stays mounted: a screen reader only announces text that changes inside a
+	     region it already knows about, so one created together with its text says nothing. -->
+	<div role="status" aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>
+
+	<div
+		class="inset-x-0 bottom-0 backdrop-blur-md ease-out absolute z-10 overflow-hidden border border-border-strong transition-all duration-300 motion-reduce:transition-none {mode ===
+		'card'
+			? 'h-24 shadow-md rounded-lg bg-card/75'
+			: mode === 'idle'
+				? 'h-10 shadow-sm rounded-md bg-card/90'
+				: 'h-10 shadow-md rounded-md bg-card/75'}"
+		data-testid="solve-status"
+		data-state={mode}
+	>
+		{#if mode === 'card'}
 			<div
-				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-				aria-hidden="true"
-			></div>
-			{t.solvingEllipsis}
-		</div>
-		<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
-			{t.solveMessagesEscHint}
-		</span>
-	{:else if show}
-		<div
-			class="bottom-6 left-6 gap-3 px-5 py-3 shadow-xl animate-in fade-in slide-in-from-left fixed z-50 flex items-center rounded-lg border border-primary/20 bg-primary text-primary-foreground duration-200"
-		>
-			<div class="h-5 w-5 relative flex shrink-0 items-center justify-center" aria-hidden="true">
-				<div
-					class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
-				></div>
+				class="px-3 gap-2 flex h-full flex-col justify-center"
+				in:fade={{ duration: 150, delay: 80 }}
+			>
+				<div class="gap-2 min-w-0 flex items-center">
+					<LoaderCircle
+						class="size-4 animate-spin shrink-0 text-muted-foreground"
+						aria-hidden="true"
+					/>
+					<span class="text-sm font-medium min-w-0 flex-1 truncate">{head?.label ?? t.solving}</span
+					>
+					{#if head?.done !== undefined && head?.total !== undefined}
+						<span class="text-xs shrink-0 text-muted-foreground tabular-nums">
+							{head.done} / {head.total}
+						</span>
+					{/if}
+				</div>
 				<div
-					class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-				></div>
+					class="h-1 overflow-hidden rounded-full bg-muted"
+					role="progressbar"
+					aria-label={head?.label ?? t.solving}
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={bar ? Math.round(bar.width * 100) : undefined}
+				>
+					{#if bar}
+						<div
+							class="h-full w-(--bar-width) rounded-full bg-primary transition-all duration-(--bar-ms) ease-linear"
+							style:--bar-width="{bar.width * 100}%"
+							style:--bar-ms="{bar.ms}ms"
+						></div>
+					{:else}
+						<div class="animate-pulse h-full w-1/3 rounded-full bg-primary/60"></div>
+					{/if}
+				</div>
+				<div class="gap-2 flex items-center">
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(elapsed)}</span>
+					{#if onabort}
+						<Button
+							variant="outline"
+							size="xs"
+							class="ml-auto shrink-0"
+							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
+						>
+							{t.solveMessagesAbort}
+							<kbd
+								class="px-1 rounded-sm border border-border font-sans text-2xs text-muted-foreground"
+							>
+								Esc
+							</kbd>
+						</Button>
+					{/if}
+				</div>
+			</div>
+		{:else if mode === 'work'}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150, delay: 80 }}>
+				<LoaderCircle
+					class="size-4 animate-spin shrink-0 text-muted-foreground"
+					aria-hidden="true"
+				/>
+				{#if freezesDuringSolve}
+					<span class="text-sm font-medium shrink-0">{t.solvingEllipsis}</span>
+					<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
+						{t.solveMessagesEscHint}
+					</span>
+				{:else}
+					<span class="text-sm font-medium shrink-0">{t.solving}</span>
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(elapsed)}</span>
+				{/if}
 			</div>
-			<div class="leading-tight flex flex-col">
-				<span class="text-sm font-semibold">{t.solving}</span>
-				<span class="text-xs opacity-70">{t.solvingSubtitle}</span>
+		{:else if mode === 'done' && finished}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150, delay: 80 }}>
+				{#if finished.aborted}
+					<span class="text-sm font-medium min-w-0 truncate">{t.solveStopped}</span>
+				{:else}
+					<Check class="size-4 shrink-0 text-success" aria-hidden="true" />
+					<span class="text-sm font-medium shrink-0">{t.solveDone}</span>
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(finished.ms)}</span>
+				{/if}
 			</div>
-		</div>
-	{/if}
+		{:else}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150 }}>
+				<span class="size-1.5 relative shrink-0 rounded-full bg-success">
+					{#key ping}
+						{#if ping > 0}
+							<span class="solve-ping inset-0 absolute rounded-full border-2 border-success"></span>
+						{/if}
+					{/key}
+				</span>
+				<span class="text-sm min-w-0 truncate text-muted-foreground">{t.upToDate}</span>
+			</div>
+		{/if}
+	</div>
 </div>
+
+<style>
+	/* One ring that grows and fades: the result landed faster than an indicator could show. */
+	.solve-ping {
+		animation: solve-ping 0.6s ease-out forwards;
+	}
+
+	@keyframes solve-ping {
+		from {
+			transform: scale(1);
+			opacity: 0.9;
+		}
+		to {
+			transform: scale(3.2);
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.solve-ping {
+			animation: none;
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Inbox } from '@lucide/svelte';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import * as Empty from './empty';
 	import { Spinner } from './spinner';
 	import SeverityIcon from './SeverityIcon.svelte';

package/src/lib/components/primitives/alert-dialog/alert-dialog-action.svelte

@@ -4,8 +4,8 @@
 		buttonVariants,
 		type ButtonSize,
 		type ButtonVariant
-	} from '$lib/components/primitives/button/index.js';
-	import { cn } from '$lib/utils.js';
+	} from '#lib/components/primitives/button/index.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/alert-dialog/alert-dialog-cancel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from '$lib/components/primitives/button/index.js';
-	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '#lib/components/primitives/button/index.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/alert-dialog/alert-dialog-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 shadow-lg sm:max-w-lg fixed start-1/2 top-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 sm:max-w-lg fixed start-1/2 top-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border bg-raised shadow-popover duration-200',
 			className
 		)}
 		{...restProps}

package/src/lib/components/primitives/alert-dialog/alert-dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/alert-dialog/alert-dialog-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/alert-dialog/alert-dialog-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/alert-dialog/alert-dialog-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/alert-dialog/alert-dialog-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),