@selvajs/ui 6.1.2 → 6.3.0

package/dist/components/ConfirmDialog.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import * as AlertDialog from './primitives/alert-dialog/index.js';
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel = 'Continue',
+		pendingLabel,
+		cancelLabel = 'Cancel',
+		variant = 'default',
+		onConfirm
+	}: {
+		open?: boolean;
+		title: string;
+		description?: string;
+		confirmLabel?: string;
+		pendingLabel?: string;
+		cancelLabel?: string;
+		variant?: 'default' | 'destructive';
+		onConfirm: () => void | Promise<void>;
+	} = $props();
+
+	let pending = $state(false);
+
+	async function handleConfirm() {
+		pending = true;
+		try {
+			await onConfirm();
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={(next) => !pending && (open = next)}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>{title}</AlertDialog.Title>
+			{#if description}
+				<AlertDialog.Description class={variant === 'destructive' ? 'text-destructive' : undefined}>
+					{description}
+				</AlertDialog.Description>
+			{/if}
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={pending}>{cancelLabel}</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleConfirm}
+				disabled={pending}
+				class={variant === 'destructive'
+					? 'text-destructive-foreground bg-destructive hover:bg-destructive/90'
+					: undefined}
+			>
+				{pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/components/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    pendingLabel?: string;
+    cancelLabel?: string;
+    variant?: 'default' | 'destructive';
+    onConfirm: () => void | Promise<void>;
+};
+declare const ConfirmDialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/compute/ComputeApp.svelte

@@ -72,6 +72,10 @@
 		/** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
 		viewerConfig?: ViewerConfig;
 		headerRight?: Snippet;
+		// Primary nav rendered next to the brand, so the viewer keeps the app-wide nav.
+		navItems?: Snippet;
+		homeUrl?: string;
+		brandName?: string;
 		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
 		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
@@ -106,6 +110,9 @@
 		footerItemId = 'footer-item',
 		footerItemPriority = 0,
 		headerRight,
+		navItems,
+		homeUrl,
+		brandName,
 		header,
 		onReady,
 		onViewerReady,
@@ -215,6 +222,9 @@
 		showFooter
 		title={pageTitle}
 		{showModeToggle}
+		{navItems}
+		{homeUrl}
+		{brandName}
 		{copyrightName}
 		{footerText}
 		{header}

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

@@ -56,6 +56,9 @@ interface Props {
     /** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
     viewerConfig?: ViewerConfig;
     headerRight?: Snippet;
+    navItems?: Snippet;
+    homeUrl?: string;
+    brandName?: string;
     header?: Snippet;
     externalScopeKey?: string;
     clientSlot?: ClientSlot;

package/dist/components/compute/ParameterPresetManager.svelte

@@ -8,7 +8,7 @@
 		exportStateAsJson,
 		importStateFromJson
 	} from '../../schema/param-exporter';
-	import { Button, Input, Label, Textarea, Dialog, Card } from '../primitives';
+	import { Button, Input, Label, Textarea, Dialog, Card, toast } from '../primitives';
 
 	import type { ActionButton } from '../../types/actionButton';
 	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
@@ -68,7 +68,7 @@
 
 	async function handleExport() {
 		if (!exportName.trim()) {
-			alert(t.saveNameRequired);
+			toast.error(t.saveNameRequired);
 			return;
 		}
 
@@ -108,7 +108,7 @@
 			const imported = await importStateFromJson(input.files[0]);
 			tryLoad(imported);
 		} catch (error) {
-			alert(t.loadImportError + (error as Error).message);
+			toast.error(t.loadImportError + (error as Error).message);
 		}
 
 		// Reset so re-picking the same file fires `change` again.

package/dist/components/layout/AppShell.svelte

@@ -81,6 +81,21 @@
 	);
 
 	const bodyShellStyle = '';
+
+	// In scroll mode the page itself scrolls, so the sidenav has to be pinned below the
+	// header or it scrolls away with the content. Fixed mode already gives the row its own
+	// height and the aside its own scroll — sticky there would only shrink it to content.
+	const sidenavWrapClass = $derived(
+		_mode === 'fixed'
+			? 'flex shrink-0'
+			: 'flex shrink-0 self-start sticky top-(--header-h) max-h-[calc(100svh-var(--header-h))]'
+	);
+
+	// The sticky wrapper is only as tall as its content, so in scroll mode the divider comes
+	// from the main column's left edge — that one spans the full body height.
+	const mainClass = $derived(
+		_mode === 'fixed' ? 'flex-1 overflow-y-auto' : 'flex-1 overflow-y-auto border-l border-border'
+	);
 </script>
 
 <div class={rootClass}>
@@ -110,8 +125,10 @@
 
 	<div class={bodyShellClass} style={bodyShellStyle}>
 		{#if sidenav}
-			{@render sidenav()}
-			<main class="flex-1 overflow-y-auto">
+			<div class={sidenavWrapClass}>
+				{@render sidenav()}
+			</div>
+			<main class={mainClass}>
 				{@render children()}
 			</main>
 		{:else}

package/dist/components/layout/SideNav.svelte

@@ -19,10 +19,22 @@
 		eyebrow?: string;
 		header?: Snippet;
 		footer?: Snippet;
+		/**
+		 * Off when the divider is drawn by the surrounding layout instead — a sticky sidenav
+		 * only reaches as far as its own content, so its border would stop mid-page.
+		 */
+		border?: boolean;
 		class?: string;
 	}
 
-	let { items, eyebrow, header, footer, class: className = '' }: SideNavProps = $props();
+	let {
+		items,
+		eyebrow,
+		header,
+		footer,
+		border = true,
+		class: className = ''
+	}: SideNavProps = $props();
 
 	function isActive(item: SideNavItem): boolean {
 		const path = page.url.pathname;
@@ -32,7 +44,9 @@
 </script>
 
 <aside
-	class={`w-60 flex shrink-0 flex-col overflow-y-auto border-r border-border bg-background ${className}`}
+	class={`w-60 flex h-full shrink-0 flex-col overflow-y-auto bg-background ${
+		border ? 'border-r border-border' : ''
+	} ${className}`}
 >
 	{#if eyebrow}
 		<div class="px-4 pt-5 pb-3">

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

@@ -12,6 +12,11 @@ interface SideNavProps {
     eyebrow?: string;
     header?: Snippet;
     footer?: Snippet;
+    /**
+     * Off when the divider is drawn by the surrounding layout instead — a sticky sidenav
+     * only reaches as far as its own content, so its border would stop mid-page.
+     */
+    border?: boolean;
     class?: string;
 }
 declare const SideNav: Component<SideNavProps, {}, "">;

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

@@ -2,6 +2,7 @@
 	import { Input } from '../../primitives/input';
 	import { Button } from '../../primitives/button';
 	import { Label } from '../../primitives/label';
+	import { toast } from '../../primitives/sonner';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
 	import { APP_DEFAULTS } from '../../../constants';
 
@@ -193,7 +194,7 @@
 		const fileEnding = getFileExtension(file.name);
 
 		if (!isValidFileExtension(fileEnding)) {
-			alert(`File format not accepted: ${fileEnding}`);
+			toast.error(`File format not accepted: ${fileEnding}`);
 			return;
 		}
 
@@ -203,7 +204,7 @@
 		// note in constants.ts) — some files pass here and still 413. The URL import
 		// path applies the same cap.
 		if (file.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
-			alert(
+			toast.error(
 				`File too large: ${(file.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB).`
 			);
 			return;

package/dist/components/primitives/Callout.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { Info, TriangleAlert, CircleCheck, CircleX, Lightbulb } from '@lucide/svelte';
+	import type { Component } from 'svelte';
+
+	export const calloutVariants = tv({
+		base: 'flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm',
+		variants: {
+			tone: {
+				info: 'border-info/40 bg-info/10',
+				tip: 'border-border bg-muted/40',
+				success: 'border-success/40 bg-success/10',
+				warning: 'border-warning/40 bg-warning/10',
+				danger: 'border-destructive/40 bg-destructive/10'
+			}
+		},
+		defaultVariants: { tone: 'info' }
+	});
+
+	export type CalloutTone = NonNullable<VariantProps<typeof calloutVariants>['tone']>;
+
+	const TONE_ICON: Record<CalloutTone, Component> = {
+		info: Info,
+		tip: Lightbulb,
+		success: CircleCheck,
+		warning: TriangleAlert,
+		danger: CircleX
+	};
+
+	const TONE_ACCENT: Record<CalloutTone, string> = {
+		info: 'text-info',
+		tip: 'text-muted-foreground',
+		success: 'text-success',
+		warning: 'text-warning',
+		danger: 'text-destructive'
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../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;
+	}
+
+	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
+
+	const Icon = $derived(icon === undefined ? TONE_ICON[tone] : icon);
+</script>
+
+<div
+	class={cn(calloutVariants({ tone }), className)}
+	role={tone === 'warning' || tone === 'danger' ? 'alert' : undefined}
+	{...restProps}
+>
+	{#if Icon}
+		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', TONE_ACCENT[tone])} />
+	{/if}
+	<div class="min-w-0 space-y-1">
+		{#if title}
+			<p class={cn('leading-tight font-medium', TONE_ACCENT[tone])}>{title}</p>
+		{/if}
+		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+			{@render children()}
+		</div>
+	</div>
+</div>

package/dist/components/primitives/Callout.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { Component } from 'svelte';
+export declare const calloutVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        info: "border-info/40 bg-info/10";
+        tip: "border-border bg-muted/40";
+        success: "border-success/40 bg-success/10";
+        warning: "border-warning/40 bg-warning/10";
+        danger: "border-destructive/40 bg-destructive/10";
+    };
+}, undefined, "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm", {
+    tone: {
+        info: "border-info/40 bg-info/10";
+        tip: "border-border bg-muted/40";
+        success: "border-success/40 bg-success/10";
+        warning: "border-warning/40 bg-warning/10";
+        danger: "border-destructive/40 bg-destructive/10";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        info: "border-info/40 bg-info/10";
+        tip: "border-border bg-muted/40";
+        success: "border-success/40 bg-success/10";
+        warning: "border-warning/40 bg-warning/10";
+        danger: "border-destructive/40 bg-destructive/10";
+    };
+}, undefined>>;
+export type CalloutTone = NonNullable<VariantProps<typeof calloutVariants>['tone']>;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+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;
+}
+declare const Callout: Component<Props, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/primitives/index.d.ts

@@ -22,9 +22,11 @@ export { Switch } from './switch';
 export { Toaster, toast } from './sonner';
 export { ThemeSwitcher } from './theme-switcher';
 export { default as StateDisplay } from './StateDisplay.svelte';
+export { default as Callout, calloutVariants, type CalloutTone } from './Callout.svelte';
 export { default as CalculateButton } from './CalculateButton.svelte';
 export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable, type DataTableColumn } from './DataTable.svelte';
 export { default as FilterableDropdown, type FilterableDropdownItem } from './FilterableDropdown.svelte';
+export { default as ConfirmDialog } from '../ConfirmDialog.svelte';

package/dist/components/primitives/index.js

@@ -24,9 +24,11 @@ export { Toaster, toast } from './sonner';
 export { ThemeSwitcher } from './theme-switcher';
 // Custom components (not replaced by shadcn)
 export { default as StateDisplay } from './StateDisplay.svelte';
+export { default as Callout, calloutVariants } from './Callout.svelte';
 export { default as CalculateButton } from './CalculateButton.svelte';
 export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';
 export { default as ImageUploadField } from './ImageUploadField.svelte';
 export { default as DataTable } from './DataTable.svelte';
 export { default as FilterableDropdown } from './FilterableDropdown.svelte';
+export { default as ConfirmDialog } from '../ConfirmDialog.svelte';

package/dist/components/viewer/MeshMetadataDialog.svelte

@@ -13,7 +13,7 @@
 		isFullscreen?: boolean;
 	}
 
-	const EXCLUDED_KEYS = new Set(['name', 'layer', 'originalIndex', 'sourceComponentId']);
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
 
 	let {
 		open = $bindable(),