@selvajs/ui 6.6.0-beta.17 → 6.6.0-beta.19

package/dist/components/ErrorScreen.svelte

@@ -3,7 +3,7 @@
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
 	import Callout from './primitives/Callout.svelte';
-	import { getLocaleContext } from '../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../i18n/localeContext.svelte.js';
 
 	interface Props {
 		status?: number;

package/dist/components/compute/AppLayout.svelte

@@ -11,9 +11,9 @@
 	import SolvingIndicator from '../primitives/SolvingIndicator.svelte';
 	import TabLayout from '../preview/TabLayout.svelte';
 	import CollapsedPanelStrip from './CollapsedPanelStrip.svelte';
-	import * as Resizable from '../primitives/resizable';
+	import * as Resizable from '../primitives/resizable/index.js';
 	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
-	import { Button } from '../..';
+	import { Button } from '../../index.js';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { runPanelAction } from '../../compute/run-panel-action';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';

package/dist/components/compute/ComputeApp.svelte

@@ -57,7 +57,7 @@
 		footerText?: string;
 		/**
 		 * How long one solve may take before the client aborts it (ms). Pass the same value the
-		 * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+		 * server enforces for this definition's compute server, or the client aborts solves that would
 		 * have finished.
 		 */
 		solveDeadlineMs: number;

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -36,7 +36,7 @@ interface Props {
     footerText?: string;
     /**
      * How long one solve may take before the client aborts it (ms). Pass the same value the
-     * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+     * server enforces for this definition's compute server, or the client aborts solves that would
      * have finished.
      */
     solveDeadlineMs: number;

package/dist/components/compute/ComputeMessagesDialog.svelte

@@ -8,10 +8,10 @@
 
 	import type { Snippet } from 'svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
-	import * as Dialog from '../primitives/dialog';
+	import * as Dialog from '../primitives/dialog/index.js';
 	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatCount } from '../../i18n/messages';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatCount } from '../../i18n/messages.js';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */

package/dist/components/compute/SolveMessages.svelte

@@ -16,10 +16,10 @@
 	import { LoaderCircle } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import type { LiveSolveState, SolvePhase } from '@selvajs/solve/client';
-	import { Button } from '../primitives/button';
+	import { Button } from '../primitives/button/index.js';
 	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
 	import SeverityIcon from '../primitives/SeverityIcon.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -319,7 +319,7 @@
 							title={t.solveMessagesEscHint}
 						>
 							{t.solveMessagesAbort}
-							<kbd class="px-1 font-sans rounded-sm border border-border text-2xs opacity-70">
+							<kbd class="px-1 rounded-sm border border-border font-sans text-2xs opacity-70">
 								Esc
 							</kbd>
 						</Button>

package/dist/components/layout/AppShell.svelte

@@ -101,7 +101,7 @@
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
 		_mode === 'fixed'
-			? 'min-h-0 flex-1 overflow-y-auto'
+			? 'min-h-0 min-w-0 flex-1 overflow-y-auto'
 			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>

package/dist/components/layout/FooterItemRenderer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FooterItem } from '../../contexts/footerContext.svelte';
+	import type { FooterItem } from '../../contexts/footerContext.svelte.js';
 
 	let { item }: { item: FooterItem } = $props();
 

package/dist/components/layout/FooterItemRenderer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FooterItem } from '../../contexts/footerContext.svelte';
+import type { FooterItem } from '../../contexts/footerContext.svelte.js';
 type $$ComponentProps = {
     item: FooterItem;
 };

package/dist/components/layout/PageContent.svelte

@@ -7,6 +7,7 @@
 	let { class: className = '', children }: PageContentProps = $props();
 </script>
 
-<main class={`px-(--page-px) py-(--page-py) ${className}`}>
+<!-- One content width for every page, so moving between pages doesn't change the frame. -->
+<div class={`max-w-6xl min-w-0 mx-auto w-full px-(--page-px) py-(--page-py) ${className}`}>
 	{@render children?.()}
-</main>
+</div>

package/dist/components/layout/PageFooter.svelte

@@ -2,11 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import { CircleAlert, TriangleAlert, Info } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
-	import { useFooter } from '../../contexts/footerContext.svelte';
+	import { useFooter } from '../../contexts/footerContext.svelte.js';
 	import ComputeMessagesDialog from '../compute/ComputeMessagesDialog.svelte';
 	import FooterItemRenderer from './FooterItemRenderer.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatCount, formatMessage } from '../../i18n/messages';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '../../i18n/messages.js';
 
 	interface Props {
 		errors?: string[];

package/dist/components/layout/PageHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { ModeToggle } from '../primitives/mode-toggle';
+	import { ModeToggle } from '../primitives/mode-toggle/index.js';
 
 	interface PageHeaderProps {
 		homeUrl?: string;
@@ -34,7 +34,7 @@
 	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
 		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
-			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
+			<img src={logo} alt="" aria-hidden="true" class="h-7 w-7" />
 			<!-- On a phone the page title needs the room more than the brand does. -->
 			<span
 				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"

package/dist/components/preview/ChartOutput.svelte

@@ -3,9 +3,9 @@
 	import { onMount, tick } from 'svelte';
 	import { mode } from 'mode-watcher';
 	import { Loader, Maximize, Minimize } from '@lucide/svelte';
-	import { loadScript } from '../../utils/loadScript';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../i18n/messages';
+	import { loadScript } from '../../utils/loadScript.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../i18n/messages.js';
 
 	interface Props {
 		item: OutputChartLayoutItem;

package/dist/components/preview/Group.svelte

@@ -2,7 +2,7 @@
 	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '@selvajs/schemas';
 	import type { Snippet } from 'svelte';
 	import { ChevronDown } from '@lucide/svelte';
-	import { buildVisibilityMap, itemKey } from '../../schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '../../schema/visibility-rules.js';
 
 	interface Props {
 		label: string;
@@ -107,7 +107,7 @@
 		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<div class="px-4 pt-1 pb-4">
+				<div class="px-4 pt-2 pb-5">
 					{@render grid()}
 				</div>
 			</div>
@@ -152,7 +152,7 @@
 	.schema-grid {
 		display: grid;
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
-		gap: 1rem var(--column-gap);
+		gap: 1.25rem var(--column-gap);
 		align-items: start;
 	}
 

package/dist/components/preview/HelpButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { HelpCircle } from '@lucide/svelte';
-	import * as Dialog from '../primitives/dialog';
+	import * as Dialog from '../primitives/dialog/index.js';
 
 	interface Props {
 		/** The field's label: the dialog title and the button's accessible name. */

package/dist/components/preview/ImageOutput.svelte

@@ -12,9 +12,9 @@
 		ZoomIn,
 		ZoomOut
 	} from '@lucide/svelte';
-	import { downloadFiles, isFileData, MIME_BY_EXT } from '../../utils/file-download';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../i18n/messages';
+	import { downloadFiles, isFileData, MIME_BY_EXT } from '../../utils/file-download.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../i18n/messages.js';
 
 	interface Props {
 		item: OutputImageLayoutItem;

package/dist/components/preview/InputControl.svelte

@@ -16,9 +16,9 @@
 		isFileWidget,
 		isColorWidget
 	} from '@selvajs/schemas';
-	import * as Field from '../primitives/field';
-	import { Button } from '../primitives/button';
-	import { toast } from '../primitives/sonner';
+	import * as Field from '../primitives/field/index.js';
+	import { Button } from '../primitives/button/index.js';
+	import { toast } from '../primitives/sonner/index.js';
 	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
@@ -31,16 +31,16 @@
 		SegmentedInput,
 		TextInput,
 		TileInput
-	} from './inputs';
-	import { getClientSlot } from '../../contexts/clientSlotContext.svelte';
+	} from './inputs/index.js';
+	import { getClientSlot } from '../../contexts/clientSlotContext.svelte.js';
 	import {
 		getHostContext,
 		type GeometryPickTarget,
 		type PickKind
-	} from '../../contexts/hostContext.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { isGeometryParamType, isTriggerItem } from '../../schema/host-support';
-	import { resolveOptionDisplay } from '../../schema/option-display';
+	} from '../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { isGeometryParamType, isTriggerItem } from '../../schema/host-support.js';
+	import { resolveOptionDisplay } from '../../schema/option-display.js';
 
 	interface Props {
 		item: InputLayoutItem;
@@ -283,7 +283,7 @@
 
 {#if isClientSlot}
 	{#if clientSlot}
-		<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 			{@render fieldHeader()}
 			{@render clientSlot({
 				inputId: item.paramId,
@@ -294,7 +294,7 @@
 		</div>
 	{/if}
 {:else if isGeometry}
-	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+	<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 		{@render fieldHeader(inputId)}
 		<GeometryInput
 			{inputId}
@@ -322,7 +322,7 @@
 		{@render helpButton()}
 	</div>
 {:else if !hideDynamicListWhenEmpty}
-	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+	<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 		{#if !isCheckboxWidget(item)}
 			{@render fieldHeader(inputId)}
 		{/if}

package/dist/components/preview/OutputDisplay.svelte

@@ -8,14 +8,14 @@
 		formatFileSize,
 		getBase64FileSize,
 		isFileData
-	} from '../../utils/file-download';
+	} from '../../utils/file-download.js';
 	import { Button } from '../primitives';
 	import { Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
 	import HelpButton from './HelpButton.svelte';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-	import { Label } from '../primitives/label';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatCount, formatMessage } from '../../i18n/messages';
+	import { Label } from '../primitives/label/index.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '../../i18n/messages.js';
 
 	interface Props {
 		item: OutputLayoutItem;

package/dist/components/preview/TabBar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
-	import * as Tabs from '../primitives/tabs';
+	import * as Tabs from '../primitives/tabs/index.js';
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);

package/dist/components/preview/TabContent.svelte

@@ -8,16 +8,16 @@
 		InputLayoutItem,
 		OutputLayoutItem
 	} from '@selvajs/schemas';
-	import * as Tabs from '../primitives/tabs';
-	import { ScrollArea } from '../primitives/scroll-area';
+	import * as Tabs from '../primitives/tabs/index.js';
+	import { ScrollArea } from '../primitives/scroll-area/index.js';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
 	import Group from './Group.svelte';
 	import InputControl from './InputControl.svelte';
 	import OutputDisplay from './OutputDisplay.svelte';
-	import { evaluateGroupVisibility } from '../../schema/visibility-rules';
-	import { isSupportedOn, layoutItemKind } from '../../schema/host-support';
-	import { getHostContext } from '../../contexts/hostContext.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { evaluateGroupVisibility } from '../../schema/visibility-rules.js';
+	import { isSupportedOn, layoutItemKind } from '../../schema/host-support.js';
+	import { getHostContext } from '../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -113,7 +113,7 @@
 		{#if visibleGroups.length === 0}
 			<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
 		{:else}
-			<div class="gap-3 py-3 flex flex-col">
+			<div class="gap-4 py-4 flex flex-col">
 				{#each visibleGroups as group (group.id)}
 					<Group
 						label={group.label}

package/dist/components/preview/TabLayout.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { UISchema, SupportedTypes } from '@selvajs/schemas';
-	import * as Tabs from '../primitives/tabs';
+	import * as Tabs from '../primitives/tabs/index.js';
 	import TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
-	import { isTabVisible } from '../../schema/visibility-rules';
-	import { buildDynamicValueListOptions } from '../../schema/dynamic-value-list';
+	import { isTabVisible } from '../../schema/visibility-rules.js';
+	import { buildDynamicValueListOptions } from '../../schema/dynamic-value-list.js';
 
 	interface Props {
 		schema: UISchema;

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,7 +1,7 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import { Checkbox } from '../../primitives/checkbox';
-	import { optionGlyph } from '../../../schema/option-display';
+	import { Checkbox } from '../../primitives/checkbox/index.js';
+	import { optionGlyph } from '../../../schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 

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

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import { Check, Pipette } from '@lucide/svelte';
-	import * as Popover from '../../primitives/popover';
-	import { Input } from '../../primitives/input';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
-	import { debounce } from '../../../utils/debounce';
+	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';
+	} from '../../../utils/color-space.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import * as Select from '../../primitives/select';
-	import { optionGlyph } from '../../../schema/option-display';
+	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';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
 
 	interface Props {
 		value?: string;

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

@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { Input } from '../../primitives/input';
-	import { Button } from '../../primitives/button';
-	import { Label } from '../../primitives/label';
-	import { toast } from '../../primitives/sonner';
+	import { Input } from '../../primitives/input/index.js';
+	import { Button } from '../../primitives/button/index.js';
+	import { Label } from '../../primitives/label/index.js';
+	import { toast } from '../../primitives/sonner/index.js';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
-	import { APP_DEFAULTS } from '../../../constants';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
-	import { pickFile } from '../../../utils/host-files';
-	import { acceptsFileEnding, isWebp, shouldConvertWebp, webpToPng } from '../../../utils/webp-to-png';
+	import { APP_DEFAULTS } from '../../../constants.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
+	import { pickFile } from '../../../utils/host-files.js';
+	import {
+		acceptsFileEnding,
+		isWebp,
+		shouldConvertWebp,
+		webpToPng
+	} from '../../../utils/webp-to-png.js';
 
 	interface Props {
 		value?: string;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Button } from '../../primitives/button';
-	import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import type { ViewerMessages } from '../../../i18n/messages';
+	import { Button } from '../../primitives/button/index.js';
+	import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import type { ViewerMessages } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,4 +1,4 @@
-import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte';
+import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte.js';
 interface Props {
     inputId: string;
     /** The kinds of object the input takes; one kind names the button after it. */

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '../../../utils/debounce';
-	import { Input } from '../../primitives/input';
-	import { Slider } from '../../primitives/slider';
-	import * as InputGroup from '../../primitives/input-group';
-	import { Separator } from '../../primitives/separator';
-	import * as Field from '../../primitives/field';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
+	import { debounce } from '../../../utils/debounce.js';
+	import { Input } from '../../primitives/input/index.js';
+	import { Slider } from '../../primitives/slider/index.js';
+	import * as InputGroup from '../../primitives/input-group/index.js';
+	import { Separator } from '../../primitives/separator/index.js';
+	import * as Field from '../../primitives/field/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { GlyphSource } from '../../../schema/option-display';
+	import type { GlyphSource } from '../../../schema/option-display.js';
 	import { cn } from '../../../utils.js';
 
 	interface Props {

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

@@ -1,4 +1,4 @@
-import type { GlyphSource } from '../../../schema/option-display';
+import type { GlyphSource } from '../../../schema/option-display.js';
 interface Props {
     glyph: GlyphSource;
     class?: string;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import * as ToggleGroup from '../../primitives/toggle-group';
-	import { optionGlyph } from '../../../schema/option-display';
+	import * as ToggleGroup from '../../primitives/toggle-group/index.js';
+	import { optionGlyph } from '../../../schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {
@@ -23,8 +23,8 @@
 
 <ToggleGroup.Root
 	type="single"
-	variant="segmented"
-	spacing={1}
+	variant="outline"
+	spacing={0}
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { TextWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '../../../utils/debounce';
-	import { Input } from '../../primitives/input';
-	import * as Field from '../../primitives/field';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
+	import { debounce } from '../../../utils/debounce.js';
+	import { Input } from '../../primitives/input/index.js';
+	import * as Field from '../../primitives/field/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import { optionGlyph } from '../../../schema/option-display';
+	import { optionGlyph } from '../../../schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {
@@ -52,11 +52,13 @@
 			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-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" />

package/dist/components/primitives/CalculateButton.svelte

@@ -55,7 +55,7 @@
 				<Loader class="h-4 w-4 animate-spin" />
 				{t.solvingEllipsis}
 				<kbd
-					class="px-1 font-sans rounded-sm border border-current/30 text-2xs opacity-70"
+					class="px-1 rounded-sm border border-current/30 font-sans text-2xs opacity-70"
 					title={t.solveMessagesEscHint}
 				>
 					Esc