@selvajs/ui 6.0.0 → 6.1.1

package/dist/components/compute/AppLayout.svelte

@@ -355,6 +355,7 @@
 							{logoUrl}
 							{onViewerReady}
 							viewerConfig={{
+								...viewerConfig,
 								backgroundColor: schema?.viewerOptions?.backgroundColor
 							}}
 						/>

package/dist/components/compute/ComputeApp.svelte

@@ -15,6 +15,7 @@
 	import { hexToOklch } from '../../utils/color';
 	import AppShell from '../layout/AppShell.svelte';
 	import AppLayout from './AppLayout.svelte';
+	import { type ViewerConfig } from '../viewer/Viewer.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
 	import { setClientSlot, type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 	import type { Locale } from '../../i18n/messages';
@@ -68,6 +69,8 @@
 		}) => void;
 		/** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
 		onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
+		/** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
+		viewerConfig?: ViewerConfig;
 		headerRight?: Snippet;
 		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
@@ -106,6 +109,7 @@
 		header,
 		onReady,
 		onViewerReady,
+		viewerConfig = {},
 		externalScopeKey,
 		clientSlot,
 		lang
@@ -239,6 +243,7 @@
 					values={session.values}
 					logoUrl={logo}
 					{onViewerReady}
+					{viewerConfig}
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}

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

@@ -4,6 +4,7 @@ import type { SolveFn } from '@selvajs/solve/shared';
 import type { PresetLabels } from '../../types/presetLabels';
 import type { RetainedSolveResult, SolveSession } from '@selvajs/solve/client';
 import type { ThreeViewer } from '@selvajs/visualization/render';
+import { type ViewerConfig } from '../viewer/Viewer.svelte';
 import { type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 import type { Locale } from '../../i18n/messages';
 import type { Snippet } from 'svelte';
@@ -52,6 +53,8 @@ interface Props {
     }) => void;
     /** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
     onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
+    /** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
+    viewerConfig?: ViewerConfig;
     headerRight?: Snippet;
     header?: Snippet;
     externalScopeKey?: string;

package/dist/components/layout/Pagination.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button } from '../primitives';
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+
+	interface Props {
+		/** Current 1-based page. Bindable. */
+		page: number;
+		total: number;
+		perPage?: number;
+		/** Plural noun for the range readout: "1–25 of 122 members". */
+		label?: string;
+		class?: string;
+	}
+
+	let {
+		page = $bindable(1),
+		total,
+		perPage = 25,
+		label = 'items',
+		class: className = ''
+	}: Props = $props();
+
+	const pageCount = $derived(Math.max(1, Math.ceil(total / perPage)));
+
+	// A filter can shrink `total` under the current page — clamp on read so the
+	// list never renders an empty slice while the control still says "page 4".
+	$effect(() => {
+		if (page > pageCount) page = pageCount;
+	});
+
+	const first = $derived(total === 0 ? 0 : (page - 1) * perPage + 1);
+	const last = $derived(Math.min(page * perPage, total));
+</script>
+
+{#if pageCount > 1}
+	<div class={`gap-4 flex items-center justify-between ${className}`}>
+		<p class="text-xs text-muted-foreground">
+			{first}–{last} of {total}
+			{label}
+		</p>
+		<div class="gap-1 flex items-center">
+			<Button
+				size="sm"
+				variant="outline"
+				disabled={page <= 1}
+				onclick={() => (page -= 1)}
+				aria-label="Previous page"
+				class="h-8 w-8 p-0"
+			>
+				<ChevronLeft class="h-4 w-4" />
+			</Button>
+			<span class="px-2 font-mono text-xs text-muted-foreground">{page} / {pageCount}</span>
+			<Button
+				size="sm"
+				variant="outline"
+				disabled={page >= pageCount}
+				onclick={() => (page += 1)}
+				aria-label="Next page"
+				class="h-8 w-8 p-0"
+			>
+				<ChevronRight class="h-4 w-4" />
+			</Button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,12 @@
+interface Props {
+    /** Current 1-based page. Bindable. */
+    page: number;
+    total: number;
+    perPage?: number;
+    /** Plural noun for the range readout: "1–25 of 122 members". */
+    label?: string;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

@@ -8,3 +8,4 @@ export { default as SideNav } from './SideNav.svelte';
 export type { SideNavItem } from './SideNav.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
+export { default as Pagination } from './Pagination.svelte';

package/dist/components/layout/index.js

@@ -6,3 +6,4 @@ export { default as SubNav } from './SubNav.svelte';
 export { default as SideNav } from './SideNav.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
+export { default as Pagination } from './Pagination.svelte';

package/dist/components/viewer/Viewer.svelte

@@ -50,6 +50,8 @@
 		showDisplayMenu?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
+		/** Initial state of the edge overlay and its display-menu checkmark. Default false. */
+		showEdges?: boolean;
 	}
 
 	interface Props {
@@ -83,7 +85,8 @@
 		showGridToggle: true,
 		showDisplayMenu: true,
 		enableMeshClick: true,
-		backgroundColor: '#E6E6E6'
+		backgroundColor: '#E6E6E6',
+		showEdges: false
 	};
 
 	let {
@@ -136,7 +139,8 @@
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
 	let renderStyle: Look = $state('technical');
-	let edgesVisible = $state(false);
+	// Seeded once, then owned by the menu toggle.
+	let edgesVisible = $state(untrack(() => viewerConfig.showEdges) ?? defaultViewerConfig.showEdges);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
@@ -385,7 +389,7 @@
 						<img
 							src={logoUrl}
 							alt=""
-							class="h-8 max-w-32 drop-shadow-sm sm:h-10 w-auto object-contain opacity-80"
+							class="h-10 max-w-40 drop-shadow-sm sm:h-14 sm:max-w-56 w-auto object-contain opacity-80"
 						/>
 					</div>
 				{/if}

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

@@ -9,6 +9,8 @@ export interface ViewerConfig {
     showDisplayMenu?: boolean;
     enableMeshClick?: boolean;
     backgroundColor?: string;
+    /** Initial state of the edge overlay and its display-menu checkmark. Default false. */
+    showEdges?: boolean;
 }
 interface Props {
     meshes: any[];

package/dist/constants.js

@@ -2,8 +2,8 @@ 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 210 MB, and base64 inflates a raw file by ~4/3, so
-    // anything over ~157 MB is rejected with a 413 after the client accepts it.
+    // still defaults to 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: {
         MAX_SIZE_MB: 300,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
-  "homepage": "https://github.com/VektorNode/selva#readme",
+  "homepage": "https://selva.dev",
   "bugs": "https://github.com/VektorNode/selva/issues",
   "keywords": [
     "svelte",
@@ -59,10 +59,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.185.1",
+    "@selvajs/compute": "^4.0.2",
     "@selvajs/schemas": "^5.0.0",
-    "@selvajs/compute": "^4.0.0",
-    "@selvajs/solve": "^1.0.0",
-    "@selvajs/visualization": "^1.0.0"
+    "@selvajs/solve": "^1.0.3",
+    "@selvajs/visualization": "^1.0.1"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -76,25 +76,25 @@
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "svelte-sonner": "^1.1.1",
+    "svelte-sonner": "^1.2.1",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.3",
     "@sveltejs/kit": "2.70.2",
-    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/three": "^0.185.4",
     "bits-ui": "^2.18.0",
-    "rimraf": "^6.0.1",
-    "svelte": "5.56.8",
+    "rimraf": "^6.1.3",
+    "svelte": "5.56.9",
     "tailwind-variants": "^3.3.1",
     "vitest": "^4.1.10",
-    "@selvajs/compute": "4.0.0",
     "@selvajs/config": "0.0.4",
     "@selvajs/schemas": "5.0.0",
-    "@selvajs/visualization": "1.0.0",
-    "@selvajs/solve": "1.0.0"
+    "@selvajs/compute": "4.0.2",
+    "@selvajs/solve": "1.0.3",
+    "@selvajs/visualization": "1.0.1"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/compute/AppLayout.svelte

@@ -355,6 +355,7 @@
 							{logoUrl}
 							{onViewerReady}
 							viewerConfig={{
+								...viewerConfig,
 								backgroundColor: schema?.viewerOptions?.backgroundColor
 							}}
 						/>

package/src/lib/components/compute/ComputeApp.svelte

@@ -15,6 +15,7 @@
 	import { hexToOklch } from '../../utils/color';
 	import AppShell from '../layout/AppShell.svelte';
 	import AppLayout from './AppLayout.svelte';
+	import { type ViewerConfig } from '../viewer/Viewer.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
 	import { setClientSlot, type ClientSlot } from '../../contexts/clientSlotContext.svelte';
 	import type { Locale } from '../../i18n/messages';
@@ -68,6 +69,8 @@
 		}) => void;
 		/** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
 		onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
+		/** Viewer chrome and defaults. `backgroundColor` and `showSceneManager` are set by the layout. */
+		viewerConfig?: ViewerConfig;
 		headerRight?: Snippet;
 		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
@@ -106,6 +109,7 @@
 		header,
 		onReady,
 		onViewerReady,
+		viewerConfig = {},
 		externalScopeKey,
 		clientSlot,
 		lang
@@ -239,6 +243,7 @@
 					values={session.values}
 					logoUrl={logo}
 					{onViewerReady}
+					{viewerConfig}
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button } from '../primitives';
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+
+	interface Props {
+		/** Current 1-based page. Bindable. */
+		page: number;
+		total: number;
+		perPage?: number;
+		/** Plural noun for the range readout: "1–25 of 122 members". */
+		label?: string;
+		class?: string;
+	}
+
+	let {
+		page = $bindable(1),
+		total,
+		perPage = 25,
+		label = 'items',
+		class: className = ''
+	}: Props = $props();
+
+	const pageCount = $derived(Math.max(1, Math.ceil(total / perPage)));
+
+	// A filter can shrink `total` under the current page — clamp on read so the
+	// list never renders an empty slice while the control still says "page 4".
+	$effect(() => {
+		if (page > pageCount) page = pageCount;
+	});
+
+	const first = $derived(total === 0 ? 0 : (page - 1) * perPage + 1);
+	const last = $derived(Math.min(page * perPage, total));
+</script>
+
+{#if pageCount > 1}
+	<div class={`gap-4 flex items-center justify-between ${className}`}>
+		<p class="text-xs text-muted-foreground">
+			{first}–{last} of {total}
+			{label}
+		</p>
+		<div class="gap-1 flex items-center">
+			<Button
+				size="sm"
+				variant="outline"
+				disabled={page <= 1}
+				onclick={() => (page -= 1)}
+				aria-label="Previous page"
+				class="h-8 w-8 p-0"
+			>
+				<ChevronLeft class="h-4 w-4" />
+			</Button>
+			<span class="px-2 font-mono text-xs text-muted-foreground">{page} / {pageCount}</span>
+			<Button
+				size="sm"
+				variant="outline"
+				disabled={page >= pageCount}
+				onclick={() => (page += 1)}
+				aria-label="Next page"
+				class="h-8 w-8 p-0"
+			>
+				<ChevronRight class="h-4 w-4" />
+			</Button>
+		</div>
+	</div>
+{/if}

package/src/lib/components/layout/index.ts

@@ -8,3 +8,4 @@ export { default as SideNav } from './SideNav.svelte';
 export type { SideNavItem } from './SideNav.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
+export { default as Pagination } from './Pagination.svelte';

package/src/lib/components/viewer/Viewer.svelte

@@ -50,6 +50,8 @@
 		showDisplayMenu?: boolean;
 		enableMeshClick?: boolean;
 		backgroundColor?: string;
+		/** Initial state of the edge overlay and its display-menu checkmark. Default false. */
+		showEdges?: boolean;
 	}
 
 	interface Props {
@@ -83,7 +85,8 @@
 		showGridToggle: true,
 		showDisplayMenu: true,
 		enableMeshClick: true,
-		backgroundColor: '#E6E6E6'
+		backgroundColor: '#E6E6E6',
+		showEdges: false
 	};
 
 	let {
@@ -136,7 +139,8 @@
 	let measureActive = $state(false);
 	let gridVisible = $state(false);
 	let renderStyle: Look = $state('technical');
-	let edgesVisible = $state(false);
+	// Seeded once, then owned by the menu toggle.
+	let edgesVisible = $state(untrack(() => viewerConfig.showEdges) ?? defaultViewerConfig.showEdges);
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
@@ -385,7 +389,7 @@
 						<img
 							src={logoUrl}
 							alt=""
-							class="h-8 max-w-32 drop-shadow-sm sm:h-10 w-auto object-contain opacity-80"
+							class="h-10 max-w-40 drop-shadow-sm sm:h-14 sm:max-w-56 w-auto object-contain opacity-80"
 						/>
 					</div>
 				{/if}

package/src/lib/constants.ts

@@ -2,8 +2,8 @@ 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 210 MB, and base64 inflates a raw file by ~4/3, so
-	// anything over ~157 MB is rejected with a 413 after the client accepts it.
+	// still defaults to 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: {
 		MAX_SIZE_MB: 300,