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

package/dist/components/viewer/Viewer.svelte

@@ -24,9 +24,9 @@
 	import ViewerDock from './ViewerDock.svelte';
 	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
 	import * as Resizable from '../primitives/resizable/index.js';
-	import type { Locale } from '../../i18n/messages';
-	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
-	import { saveBlob } from '../../utils/host-files';
+	import type { Locale } from '../../i18n/messages.js';
+	import { layerLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { saveBlob } from '../../utils/host-files.js';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -85,7 +85,6 @@
 	let {
 		meshes,
 		isFullscreen = $bindable(false),
-		isSolving = false,
 		isSlow = false,
 		isBlurred = false,
 		drawerOpen = false,
@@ -525,16 +524,6 @@
 						: 'blur-overlay-inactive'}"
 				></div>
 
-				<!-- The last result stays sharp while the next one solves: blurring it on every
-				     solve hides the model the user is adjusting. -->
-				{#if isSolving}
-					<div
-						class="inset-x-0 top-0 animate-in fade-in pointer-events-none absolute z-20 h-px overflow-hidden duration-300"
-						aria-hidden="true"
-					>
-						<div class="solve-bar h-full w-1/3 bg-faint-foreground"></div>
-					</div>
-				{/if}
 				{#if isSlow}
 					<div
 						class="inset-0 animate-in fade-in pointer-events-none absolute z-10 bg-background/25 duration-500"
@@ -633,27 +622,6 @@
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	.solve-bar {
-		animation: solve-bar 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
-	}
-
-	@keyframes solve-bar {
-		from {
-			transform: translateX(-100%);
-		}
-		to {
-			transform: translateX(300%);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.solve-bar {
-			animation: none;
-			width: 100%;
-			opacity: 0.6;
-		}
-	}
-
 	.blur-overlay {
 		pointer-events: none;
 	}

package/dist/components/viewer/Viewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Look, type ThreeViewer } from '@selvajs/visualization/render';
-import type { Locale } from '../../i18n/messages';
+import type { Locale } from '../../i18n/messages.js';
 export interface ViewerConfig {
     showScreenshotButton?: boolean;
     showFullscreenButton?: boolean;

package/dist/components/viewer/ViewerDock.svelte

@@ -17,7 +17,7 @@
 	} from '@lucide/svelte';
 	import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
 	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
-	import type { ViewerMessages } from '../../i18n/messages';
+	import type { ViewerMessages } from '../../i18n/messages.js';
 
 	interface Props {
 		t: ViewerMessages;

package/dist/components/viewer/ViewerDock.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
-import type { ViewerMessages } from '../../i18n/messages';
+import type { ViewerMessages } from '../../i18n/messages.js';
 interface Props {
     t: ViewerMessages;
     /** Fades the dock out while a host drawer covers the viewer. */

package/dist/composables/useFooterItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Component } from 'svelte';
-import { type FooterItem } from '../contexts/footerContext.svelte';
+import { type FooterItem } from '../contexts/footerContext.svelte.js';
 export type FooterItemConfig<P extends Record<string, unknown> = Record<string, unknown>> = Omit<FooterItem<P>, 'position' | 'priority'> & Partial<Pick<FooterItem<P>, 'position' | 'priority'>>;
 /**
  * Register a footer item for the lifetime of the calling component.

package/dist/composables/useFooterItem.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, onMount, onDestroy } from 'svelte';
-import { FOOTER_CONTEXT_KEY } from '../contexts/footerContext.svelte';
+import { FOOTER_CONTEXT_KEY } from '../contexts/footerContext.svelte.js';
 /**
  * Register a footer item for the lifetime of the calling component.
  *

package/dist/constants.js

@@ -1,8 +1,7 @@
 export const APP_DEFAULTS = {
     // File upload limits
     // TEMP (dev): raised 150 MB → 300 MB so large dev file-widget inputs aren't
-    // blocked client-side. The server request cap (COMPUTE_REQUEST_MAX_BYTES)
-    // still defaults to 256 MB, and base64 inflates a raw file by ~4/3, so
+    // blocked client-side. The server request cap is 256 MB, and base64 inflates a raw file by ~4/3, so
     // anything over ~192 MB is rejected with a 413 after the client accepts it.
     // Revert to 150 before release.
     FILE_UPLOAD: {

package/dist/contexts/hostContext.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { GeometryKind } from '@selvajs/schemas';
-import type { UIHost } from '../schema/host-support';
+import type { UIHost } from '../schema/host-support.js';
 export type GeometryPickResult = {
     outcome: 'picked';
     summary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.18",
+  "version": "6.6.0-beta.19",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -62,10 +62,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.187.0",
-    "@selvajs/compute": "^5.0.0-beta.9",
+    "@selvajs/compute": "^5.0.0-beta.10",
     "@selvajs/schemas": "^5.3.0-beta.3",
-    "@selvajs/visualization": "^1.6.0-beta.9",
-    "@selvajs/solve": "^2.0.0-beta.12"
+    "@selvajs/solve": "^2.0.0-beta.12",
+    "@selvajs/visualization": "^1.6.0-beta.10"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -75,31 +75,35 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@fontsource-variable/hanken-grotesk": "^5.3.0",
-    "@iconify/svelte": "^5.2.3",
-    "@lucide/svelte": "^1.61.0",
+    "@iconify/svelte": "^5.2.4",
+    "@lucide/svelte": "^1.66.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "svelte-sonner": "^1.2.1",
+    "svelte-sonner": "^1.2.2",
     "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@sveltejs/kit": "2.70.3",
+    "@sveltejs/kit": "3.1.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/three": "^0.187.0",
     "bits-ui": "^2.20.2",
     "rimraf": "^6.1.3",
-    "svelte": "5.57.2",
+    "svelte": "5.57.3",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.5",
-    "@selvajs/compute": "5.0.0-beta.9",
-    "@selvajs/config": "0.0.4",
+    "@selvajs/compute": "5.0.0-beta.10",
     "@selvajs/schemas": "5.3.0-beta.3",
-    "@selvajs/visualization": "1.6.0-beta.9",
+    "@selvajs/visualization": "1.6.0-beta.10",
+    "@selvajs/config": "0.0.4",
     "@selvajs/solve": "2.0.0-beta.12"
   },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
+  },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",
     "dev": "vite dev",

package/src/lib/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 '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	interface Props {
 		status?: number;

package/src/lib/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 '$lib/components/primitives/resizable';
-	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
-	import { Button } from '$lib';
+	import * as Resizable from '#lib/components/primitives/resizable/index.js';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
+	import { Button } from '#lib';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { runPanelAction } from '../../compute/run-panel-action';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';

package/src/lib/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/src/lib/components/compute/ComputeMessagesDialog.svelte

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

package/src/lib/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 '$lib/components/primitives/button';
-	import IssueList, { type Issue } from '$lib/components/primitives/IssueList.svelte';
-	import SeverityIcon from '$lib/components/primitives/SeverityIcon.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import IssueList, { type Issue } from '#lib/components/primitives/IssueList.svelte';
+	import SeverityIcon from '#lib/components/primitives/SeverityIcon.svelte';
+	import { getLocaleContext } from '#lib/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/src/lib/components/layout/FooterItemRenderer.svelte

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

package/src/lib/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 '$lib/contexts/footerContext.svelte';
+	import { useFooter } from '#lib/contexts/footerContext.svelte.js';
 	import ComputeMessagesDialog from '../compute/ComputeMessagesDialog.svelte';
 	import FooterItemRenderer from './FooterItemRenderer.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatCount, formatMessage } from '$lib/i18n/messages';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		errors?: string[];

package/src/lib/components/layout/PageHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { ModeToggle } from '$lib/components/primitives/mode-toggle';
+	import { ModeToggle } from '#lib/components/primitives/mode-toggle/index.js';
 
 	interface PageHeaderProps {
 		homeUrl?: string;

package/src/lib/components/layout/SideNav.svelte

@@ -15,7 +15,7 @@
 	import { page } from '$app/state';
 	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
 	import Check from '@lucide/svelte/icons/check';
-	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
 
 	interface SideNavProps {
 		items: SideNavItem[];

package/src/lib/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 '$lib/utils/loadScript';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	import { loadScript } from '#lib/utils/loadScript.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		item: OutputChartLayoutItem;

package/src/lib/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 '$lib/schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '#lib/schema/visibility-rules.js';
 
 	interface Props {
 		label: string;

package/src/lib/components/preview/HelpButton.svelte

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

package/src/lib/components/preview/ImageOutput.svelte

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

package/src/lib/components/preview/InputControl.svelte

@@ -16,9 +16,9 @@
 		isFileWidget,
 		isColorWidget
 	} from '@selvajs/schemas';
-	import * as Field from '$lib/components/primitives/field';
-	import { Button } from '$lib/components/primitives/button';
-	import { toast } from '$lib/components/primitives/sonner';
+	import * as Field from '#lib/components/primitives/field/index.js';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import { toast } from '#lib/components/primitives/sonner/index.js';
 	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
@@ -31,16 +31,16 @@
 		SegmentedInput,
 		TextInput,
 		TileInput
-	} from '$lib/components/preview/inputs';
-	import { getClientSlot } from '$lib/contexts/clientSlotContext.svelte';
+	} from '#lib/components/preview/inputs/index.js';
+	import { getClientSlot } from '#lib/contexts/clientSlotContext.svelte.js';
 	import {
 		getHostContext,
 		type GeometryPickTarget,
 		type PickKind
-	} from '$lib/contexts/hostContext.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { isGeometryParamType, isTriggerItem } from '$lib/schema/host-support';
-	import { resolveOptionDisplay } from '$lib/schema/option-display';
+	} from '#lib/contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { isGeometryParamType, isTriggerItem } from '#lib/schema/host-support.js';
+	import { resolveOptionDisplay } from '#lib/schema/option-display.js';
 
 	interface Props {
 		item: InputLayoutItem;

package/src/lib/components/preview/OutputDisplay.svelte

@@ -8,14 +8,14 @@
 		formatFileSize,
 		getBase64FileSize,
 		isFileData
-	} from '$lib/utils/file-download';
+	} from '#lib/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 '$lib/components/primitives/label';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatCount, formatMessage } from '$lib/i18n/messages';
+	import { Label } from '#lib/components/primitives/label/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		item: OutputLayoutItem;

package/src/lib/components/preview/TabBar.svelte

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

package/src/lib/components/preview/TabContent.svelte

@@ -8,16 +8,16 @@
 		InputLayoutItem,
 		OutputLayoutItem
 	} from '@selvajs/schemas';
-	import * as Tabs from '$lib/components/primitives/tabs';
-	import { ScrollArea } from '$lib/components/primitives/scroll-area';
+	import * as Tabs from '#lib/components/primitives/tabs/index.js';
+	import { ScrollArea } from '#lib/components/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 '$lib/schema/visibility-rules';
-	import { isSupportedOn, layoutItemKind } from '$lib/schema/host-support';
-	import { getHostContext } from '$lib/contexts/hostContext.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { evaluateGroupVisibility } from '#lib/schema/visibility-rules.js';
+	import { isSupportedOn, layoutItemKind } from '#lib/schema/host-support.js';
+	import { getHostContext } from '#lib/contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);

package/src/lib/components/preview/TabLayout.svelte

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

package/src/lib/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 '$lib/components/primitives/checkbox';
+	import { Checkbox } from '#lib/components/primitives/checkbox/index.js';
 
 	interface Props {
 		inputId: string;

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

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

package/src/lib/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 '$lib/components/primitives/popover';
-	import { Input } from '$lib/components/primitives/input';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
-	import { debounce } from '$lib/utils/debounce';
+	import * as Popover from '#lib/components/primitives/popover/index.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
+	import { debounce } from '#lib/utils/debounce.js';
 	import {
 		contrastRatio,
 		hexToHsv,
 		hsvToHex,
 		normalizeHex,
 		type Hsv
-	} from '$lib/utils/color-space';
+	} from '#lib/utils/color-space.js';
 
 	interface Props {
 		inputId: string;

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

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

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

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

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

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

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	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';
+	import { debounce } from '#lib/utils/debounce.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Slider } from '#lib/components/primitives/slider/index.js';
+	import * as InputGroup from '#lib/components/primitives/input-group/index.js';
+	import { Separator } from '#lib/components/primitives/separator/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/OptionGlyph.svelte

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

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

@@ -1,7 +1,7 @@
 <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 * as ToggleGroup from '#lib/components/primitives/toggle-group/index.js';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {