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

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

@@ -1,31 +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;
+		/**
+		 * The page can't repaint mid-solve (see `createSolvingIndicator`): the pill says Esc aborts
+		 * instead of counting seconds, and never grows into the card.
+		 */
+		freezesDuringSolve?: boolean;
 	}
 
-	let { show }: 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>
 
-{#if show}
+<div class="h-9 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="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"
+		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-9 shadow-sm rounded-md bg-card/90'
+				: 'h-9 shadow-md rounded-md bg-card/75'}"
+		data-testid="solve-status"
+		data-state={mode}
 	>
-		<div class="h-5 w-5 relative flex shrink-0 items-center justify-center">
-			<div
-				class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
-			></div>
+		{#if mode === 'card'}
 			<div
-				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-			></div>
-		</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>
-		</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-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>
+		{: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>
+		{: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>
-{/if}
+</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 w-full max-w-screen-inset -translate-x-1/2 -translate-y-1/2 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),

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

@@ -2,15 +2,15 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3',
+		base: 'focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3',
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
 				secondary:
-					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-selected border-transparent',
 				destructive:
-					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-destructive-foreground',
-				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+					'bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground',
+				outline: 'text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground'
 			}
 		},
 		defaultVariants: {
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 	import type { HTMLAnchorAttributes } 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/button/button.svelte

@@ -1,21 +1,23 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-destructive-foreground',
+				destructive: 'bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground',
 				outline:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
-				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+					'border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground',
+				// Outline with an opaque dark fill: the translucent one washes out over the light 3D canvas.
+				overlay:
+					'border border-border-strong bg-raised shadow-raised hover:bg-muted hover:text-foreground',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-selected',
+				ghost: 'hover:bg-hover hover:text-foreground',
 				dashed:
-					'border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
+					'border border-dashed border-border-strong bg-transparent text-muted-foreground hover:border-input hover:bg-hover hover:text-foreground',
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {

package/src/lib/components/primitives/button-group/button-group-separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import type { ComponentProps } from 'svelte';
-	import { Separator } from '$lib/components/primitives/separator/index.js';
+	import { Separator } from '#lib/components/primitives/separator/index.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/button-group/button-group-text.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';
 	import type { Snippet } from 'svelte';
 

package/src/lib/components/primitives/button-group/button-group.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <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/card/card-content.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/card/card-description.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/card/card-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/card/card-header.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/card/card-title.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/card/card.svelte

@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const cardVariants = tv({
-		base: 'shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground',
+		base: 'shadow-raised flex flex-col rounded-xl border bg-card text-card-foreground',
 		variants: {
 			variant: {
 				default: 'gap-6 py-6',
@@ -18,7 +18,7 @@
 
 <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/checkbox/checkbox.svelte

@@ -2,7 +2,7 @@
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input bg-field transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked

package/src/lib/components/primitives/command/command-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as Dialog from '$lib/components/primitives/dialog/index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import * as Dialog from '#lib/components/primitives/dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
 	import Command from './command.svelte';
 	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
 	import type { Snippet } from 'svelte';

package/src/lib/components/primitives/command/command-empty.svelte

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

package/src/lib/components/primitives/command/command-group.svelte

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

package/src/lib/components/primitives/command/command-input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import * as InputGroup from '$lib/components/primitives/input-group/index.js';
+	import * as InputGroup from '#lib/components/primitives/input-group/index.js';
 	import SearchIcon from '@lucide/svelte/icons/search';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 
 <div data-slot="command-input-wrapper" class="p-1 pb-0">
 	<InputGroup.Root
-		class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-lg! border-input/30 bg-input/30 shadow-none!"
+		class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-inner! border-border-strong bg-field shadow-none!"
 	>
 		<CommandPrimitive.Input
 			{value}

package/src/lib/components/primitives/command/command-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
+		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-inner outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-selected data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
 		'data-disabled:pointer-events-none data-disabled:opacity-50',
 		className
 	)}

package/src/lib/components/primitives/command/command-link-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
+		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-inner outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-selected data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
 		'data-disabled:pointer-events-none data-disabled:opacity-50',
 		className
 	)}

package/src/lib/components/primitives/command/command-list.svelte

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