@selvajs/ui 6.6.0-beta.5 → 6.6.0-beta.7

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

@@ -18,7 +18,9 @@
 	}: SectionHeaderProps = $props();
 </script>
 
-<div class={`mb-6 gap-5 flex items-start justify-between ${className}`}>
+<div
+	class={`mb-6 gap-3 sm:gap-5 sm:flex-row sm:items-start sm:justify-between flex flex-col ${className}`}
+>
 	<div class="min-w-0">
 		{#if eyebrow}
 			<div class="mb-1.5 text-xs font-medium tracking-wider text-muted-foreground uppercase">
@@ -31,7 +33,7 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="gap-2 flex shrink-0 items-center">
+		<div class="gap-2 flex shrink-0 flex-wrap items-center">
 			{@render actions()}
 		</div>
 	{/if}

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

@@ -43,13 +43,15 @@
 	}
 </script>
 
+<!-- On a phone a 240px column would leave the page ~150px, so the nav becomes a scrolling strip
+     above the content and the eyebrow, header and footer drop out. -->
 <aside
-	class={`w-60 flex h-full shrink-0 flex-col overflow-y-auto bg-background ${
-		border ? 'border-r border-border' : ''
+	class={`sm:h-full sm:w-60 sm:overflow-y-auto sm:border-b-0 flex w-full shrink-0 flex-col border-b border-border bg-background ${
+		border ? 'sm:border-r' : ''
 	} ${className}`}
 >
 	{#if eyebrow}
-		<div class="px-4 pt-5 pb-3">
+		<div class="px-4 pt-5 pb-3 sm:block hidden">
 			<span class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
 				{eyebrow}
 			</span>
@@ -57,30 +59,36 @@
 	{/if}
 
 	{#if header}
-		<div class="px-3 pb-3">
+		<div class="px-3 pb-3 sm:block hidden">
 			{@render header()}
 		</div>
 	{/if}
 
-	<nav class="pb-4 pr-2 flex-1 space-y-px">
+	<nav
+		class="gap-1 py-2 sm:gap-0 sm:pt-0 sm:pb-4 sm:pr-2 sm:flex-1 sm:space-y-px sm:block sm:px-0 flex overflow-x-auto px-(--page-px)"
+	>
 		{#each items as item (item.href)}
 			{@const active = isActive(item)}
 			{@const Icon = item.icon}
 			<a
 				href={item.href}
-				class={`group gap-2 py-1.5 pr-2.5 relative flex w-full items-center text-left transition-colors ${
+				class={`group gap-2 py-2 pr-2.5 sm:py-1.5 sm:w-full relative flex shrink-0 items-center text-left transition-colors ${
 					active
-						? 'pl-4 rounded-r-md bg-accent text-accent-foreground'
-						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+						? 'pl-2.5 sm:pl-4 sm:rounded-l-none sm:rounded-r-md rounded-md bg-accent text-accent-foreground'
+						: 'sm:mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
 				}`}
 			>
 				{#if active}
-					<span class="left-0 top-0 bottom-0 w-0.75 absolute bg-primary" aria-hidden="true"></span>
+					<span
+						class="left-0 top-0 bottom-0 w-0.75 sm:block absolute hidden bg-primary"
+						aria-hidden="true"
+					></span>
 				{/if}
 				{#if Icon}
 					<Icon class="h-3.5 w-3.5 shrink-0 opacity-70" />
 				{/if}
-				<span class="text-sm font-medium flex-1 truncate">{item.label}</span>
+				<span class="text-sm font-medium sm:flex-1 sm:truncate whitespace-nowrap">{item.label}</span
+				>
 				{#if item.badge !== undefined}
 					<span class="font-mono shrink-0 text-2xs tabular-nums opacity-60">{item.badge}</span>
 				{/if}
@@ -89,7 +97,7 @@
 	</nav>
 
 	{#if footer}
-		<div class="px-3 py-3 border-t border-border/60">
+		<div class="px-3 py-3 sm:block hidden border-t border-border/60">
 			{@render footer()}
 		</div>
 	{/if}

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

@@ -45,7 +45,11 @@
 		// @ts-expect-error — Plotly is loaded dynamically onto window
 		if (window.Plotly) return window.Plotly;
 
-		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', { crossOrigin: 'anonymous' });
+		// Pinned by hash: the plugin's web UI runs this on the origin that holds its bridge secret.
+		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', {
+			crossOrigin: 'anonymous',
+			integrity: 'sha384-pFOQ7loGBChmUyS4Tszy+he8OWeYkwTFjc2xii4aJUWWiGwf2u2OEc04T5iDRpMp'
+		});
 		// @ts-expect-error — Plotly is loaded dynamically onto window
 		return window.Plotly;
 	}
@@ -192,10 +196,10 @@
 		<!-- The layout hides this output while it has no data, so this is data that doesn't parse yet. -->
 		<div class="px-4 py-8 text-sm text-center text-muted-foreground">{t.chartReceiving}</div>
 	{:else}
-		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-screen' : 'h-95'}"></div>
+		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-dvh' : 'h-95'}"></div>
 
 		<div
-			class="gap-1 left-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 {isFullscreen
+			class="gap-1 left-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100 {isFullscreen
 				? 'opacity-100'
 				: ''}"
 		>

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

@@ -302,7 +302,7 @@
 	<div
 		bind:this={wrapperEl}
 		class="rounded flex flex-col overflow-hidden border border-border bg-background {isFullscreen
-			? 'h-screen'
+			? 'h-dvh'
 			: ''}"
 	>
 		{#if error}

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

@@ -318,7 +318,7 @@
 					<div
 						class="right-2 top-2 absolute transition-opacity {copied
 							? 'opacity-100'
-							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'}"
+							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100'}"
 					>
 						<Button onclick={copyToClipboard} size="sm">
 							{copied ? t.copied : t.copy}

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

@@ -3,6 +3,8 @@
 		label: string;
 		width?: string;
 		align?: 'left' | 'right';
+		/** Drop the column below 640px, where fixed widths would crush the flexible one. */
+		hideOnMobile?: boolean;
 	}
 </script>
 
@@ -19,20 +21,52 @@
 
 	let { rows, columns, getKey, row, class: className = '' }: Props = $props();
 
-	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
+	// `minmax(0, …)` so a long name truncates rather than widening its row past the others.
+	const toTemplate = (cols: DataTableColumn[]) =>
+		cols.map((c) => c.width ?? 'minmax(0, 1fr)').join(' ');
+	const gridTemplate = $derived(toTemplate(columns));
+	const mobileTemplate = $derived(toTemplate(columns.filter((c) => !c.hideOnMobile)));
+	// Cells come from the caller's snippet, so they're hidden by position.
+	const hiddenCols = $derived(
+		columns
+			.map((c, i) => (c.hideOnMobile ? `hide-col-${i + 1}` : ''))
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class={`divide-y rounded-lg border ${className}`} style:--table-cols={gridTemplate}>
+<div
+	class={`divide-y rounded-lg border ${className}`}
+	style:--table-cols={gridTemplate}
+	style:--table-cols-sm={mobileTemplate}
+>
 	<div
-		class="gap-4 px-4 py-2 text-xs font-medium tracking-wide grid grid-cols-(--table-cols) bg-muted/40 text-muted-foreground uppercase"
+		class="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted/40 text-muted-foreground uppercase {hiddenCols}"
 	>
 		{#each columns as col (col.label)}
 			<span class={col.align === 'right' ? 'text-right' : ''}>{col.label}</span>
 		{/each}
 	</div>
 	{#each rows as item (getKey(item))}
-		<div class="gap-4 px-4 py-3 grid grid-cols-(--table-cols) items-center">
+		<div
+			class="data-table-row gap-4 px-4 py-3 sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) items-center {hiddenCols}"
+		>
 			{@render row(item)}
 		</div>
 	{/each}
 </div>
+
+<style>
+	@media (max-width: 639px) {
+		:global(.data-table-row.hide-col-1 > :nth-child(1)),
+		:global(.data-table-row.hide-col-2 > :nth-child(2)),
+		:global(.data-table-row.hide-col-3 > :nth-child(3)),
+		:global(.data-table-row.hide-col-4 > :nth-child(4)),
+		:global(.data-table-row.hide-col-5 > :nth-child(5)),
+		:global(.data-table-row.hide-col-6 > :nth-child(6)),
+		:global(.data-table-row.hide-col-7 > :nth-child(7)),
+		:global(.data-table-row.hide-col-8 > :nth-child(8)) {
+			display: none;
+		}
+	}
+</style>

package/src/lib/components/primitives/alert-dialog/alert-dialog-content.svelte

@@ -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 shadow-lg 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-lg border bg-background duration-200',
 			className
 		)}
 		{...restProps}

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

@@ -32,7 +32,7 @@
 		data-slot="dialog-content"
 		class={cn(
 			variant === 'flush' ? 'gap-0' : 'gap-4 p-6',
-			'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-full max-w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
+			'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
 			className
 		)}
 		{...restProps}

package/src/lib/components/primitives/drawer/Drawer.svelte

@@ -26,7 +26,7 @@
 	onkeydown={handleKey}
 ></div>
 <div
-	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
+	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
 >
 	{@render children()}
 </div>

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

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '../primitives/button/index.js';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	interface Props {
+		metadata: Record<string, any>;
+		meshName: string | null;
+		onClose: () => void;
+		class?: string;
+	}
+
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
+
+	let { metadata, meshName, onClose, class: className = '' }: Props = $props();
+
+	const filteredMetadata = $derived.by(() => {
+		const result: Record<string, unknown> = {};
+		for (const [key, value] of Object.entries(metadata)) {
+			if (EXCLUDED_KEYS.has(key)) continue;
+			if (
+				key === 'metadata' &&
+				typeof value === 'object' &&
+				value !== null &&
+				!Array.isArray(value)
+			) {
+				Object.assign(result, value);
+			} else {
+				result[key] = value;
+			}
+		}
+		return result;
+	});
+</script>
+
+<!-- Not a modal: a modal locks the page, and on touch the tap that should dismiss it can race the
+     dialog's own dismiss handler, leaving the viewer frozen. A card lets the canvas keep orbiting. -->
+<section
+	aria-label={meshName ?? t.objectFallbackName}
+	class="min-h-0 shadow-lg backdrop-blur-sm flex flex-col overflow-hidden rounded-lg border bg-background/95 {className}"
+>
+	<header class="gap-2 py-1 pr-1 pl-4 flex items-center border-b">
+		<h2 class="text-sm font-semibold min-w-0 flex-1 truncate">
+			{meshName ?? t.objectFallbackName}
+		</h2>
+		<Button
+			variant="ghost"
+			size="icon-sm"
+			class="pointer-coarse:size-10 shrink-0"
+			aria-label={t.close}
+			title={t.close}
+			onclick={onClose}
+		>
+			<X />
+		</Button>
+	</header>
+
+	<div class="min-h-0 overflow-y-auto overscroll-contain">
+		{#if Object.keys(filteredMetadata).length === 0}
+			<p class="px-4 py-3 text-xs text-muted-foreground">{t.noMetadata}</p>
+		{:else}
+			<table class="text-xs w-full border-collapse">
+				<tbody>
+					{#each Object.entries(filteredMetadata) as [key, value] (key)}
+						<tr class="border-b border-border/60 last:border-b-0">
+							<th
+								scope="row"
+								class="px-4 py-2 font-normal text-left align-top whitespace-nowrap text-muted-foreground"
+								>{key}</th
+							>
+							<td class="px-4 py-2 text-right align-top text-foreground">
+								{#if typeof value === 'object' && value !== null}
+									{#if Array.isArray(value)}
+										<div class="space-y-1 text-left">
+											{#each value as item, index (index)}
+												{#if typeof item === 'object'}
+													<div class="space-y-0.5">
+														{#each Object.entries(item) as [k, v] (k)}
+															<div class="gap-2 flex">
+																<span class="shrink-0 text-muted-foreground">{k}:</span>
+																<span>{v}</span>
+															</div>
+														{/each}
+													</div>
+												{:else}
+													<div>{item}</div>
+												{/if}
+											{/each}
+										</div>
+									{:else}
+										<div class="space-y-0.5 text-left">
+											{#each Object.entries(value) as [k, v] (k)}
+												<div class="gap-2 flex">
+													<span class="shrink-0 text-muted-foreground">{k}:</span>
+													<span>{v}</span>
+												</div>
+											{/each}
+										</div>
+									{/if}
+								{:else if typeof value === 'number'}
+									<span class="font-mono">{value}</span>
+								{:else if typeof value === 'boolean'}
+									<span class={value ? 'text-success' : 'text-muted-foreground'}
+										>{value ? 'true' : 'false'}</span
+									>
+								{:else}
+									<span class="break-all">{value}</span>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</section>

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

@@ -34,7 +34,7 @@
 	import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 	import { createSceneOutliner, type SceneOutliner } from '@selvajs/visualization/scene';
 	import SceneManager from './SceneManager.svelte';
-	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
+	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
 	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/components/primitives/button/index.js';
@@ -122,6 +122,7 @@
 	let updateGridScale: (() => void) | null = null;
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
+	let clearSelection: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
@@ -194,6 +195,10 @@
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
 			events: {
+				// Fires before onMeshMetadataClicked, so picking an object without metadata closes the
+				// previous object's panel instead of leaving it describing the wrong thing.
+				onObjectSelected: closeMetadata,
+				onBackgroundClicked: closeMetadata,
 				onMeshMetadataClicked: config.enableMeshClick
 					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
@@ -224,6 +229,7 @@
 		updateGridScale = init.updateGridScale;
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
+		clearSelection = init.clearSelection;
 		projection = init.cameraController.getProjection();
 
 		const renderer = init.renderer;
@@ -375,6 +381,29 @@
 		}
 	});
 
+	function closeMetadata() {
+		selectedMeshMetadata = null;
+		selectedMeshName = null;
+	}
+
+	function dismissMetadata() {
+		closeMetadata();
+		clearSelection?.();
+		invalidate?.();
+	}
+
+	// The panel describes an object from the previous solve once new meshes arrive.
+	$effect(() => {
+		void meshes;
+		untrack(closeMetadata);
+	});
+
+	// Dialogs portal to <body>, so one opened over the fullscreen viewer needs lifting above it.
+	$effect(() => {
+		document.body.toggleAttribute('data-viewer-fullscreen', isFullscreen);
+		return () => document.body.removeAttribute('data-viewer-fullscreen');
+	});
+
 	function toggleFullscreen() {
 		isFullscreen = !isFullscreen;
 	}
@@ -450,12 +479,9 @@
 				{/if}
 
 				{#if logoUrl}
-					<!-- Bottom offset matches the tools menu so it clears the mobile drawer handle.
-					     Always pointer-events:none so it never intercepts canvas drags. -->
+					<!-- pointer-events:none so it never intercepts canvas drags. -->
 					<div
-						class="right-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} pointer-events-none absolute z-20 {hideButton
+						class="right-4 bottom-4 pointer-events-none absolute z-20 {hideButton
 							? 'opacity-0'
 							: ''}"
 					>
@@ -467,11 +493,18 @@
 					</div>
 				{/if}
 
+				{#if selectedMeshMetadata}
+					<MeshMetadataPanel
+						metadata={selectedMeshMetadata}
+						meshName={selectedMeshName}
+						onClose={dismissMetadata}
+						class="top-3 right-3 left-3 sm:right-auto sm:max-h-2/3 sm:w-72 absolute z-30 max-h-1/2"
+					/>
+				{/if}
+
 				{#if config.showToolsMenu}
 					<div
-						class="left-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} shadow-lg absolute z-50 flex items-center rounded-lg {hideButton
+						class="left-4 bottom-4 gap-2 *:shadow-lg absolute z-50 flex items-center *:rounded-md {hideButton
 							? 'pointer-events-none opacity-0'
 							: ''}"
 					>
@@ -594,6 +627,18 @@
 								{/if}
 							</DropdownMenu.Content>
 						</DropdownMenu.Root>
+						<!-- Touch has no F key, and fit-to-view is the way back from a framed part. -->
+						<div class="hidden pointer-coarse:block">
+							<Button
+								variant="outline"
+								size="icon-lg"
+								title={t.fitToView}
+								aria-label={t.fitToView}
+								onclick={() => fitToView?.()}
+							>
+								<Frame />
+							</Button>
+						</div>
 					</div>
 				{/if}
 			</div>
@@ -608,22 +653,12 @@
 	</Resizable.PaneGroup>
 </div>
 
-<MeshMetadataDialog
-	open={selectedMeshMetadata !== null}
-	metadata={selectedMeshMetadata}
-	meshName={selectedMeshName}
-	{isFullscreen}
-	onOpenChange={(open: boolean) => {
-		if (!open) {
-			setTimeout(() => {
-				selectedMeshMetadata = null;
-				selectedMeshName = null;
-			}, 200);
-		}
-	}}
-/>
-
 <style>
+	:global([data-viewer-fullscreen] [data-slot='dialog-content']),
+	:global([data-viewer-fullscreen] [data-slot='dialog-overlay']) {
+		z-index: 10001;
+	}
+
 	.fullscreen-viewer {
 		position: fixed;
 		inset: 0;

package/src/lib/styles/base.css

@@ -3,7 +3,7 @@
 :root {
 	--radius: 0.625rem;
 	--header-h: 3.5rem;
-	--page-px: 1.5rem;
+	--page-px: 1rem;
 	--page-py: 1.75rem;
 	--background: oklch(0.99 0 0);
 	--foreground: oklch(0.22 0 0);
@@ -180,6 +180,26 @@
 	border-radius: inherit;
 }
 
+/* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
+@media (min-width: 40rem) {
+	:root {
+		--page-px: 1.5rem;
+	}
+}
+
+/* A native select draws its arrow inside the right padding, so with the `px-2`/`px-3` every
+   caller uses it sits on the border. A drawn chevron with its own gutter fixes them all. Unlayered
+   on purpose: the gutter has to beat the callers' `px-*` utilities. Mid-grey reads on both themes,
+   since a data URI can't take `currentColor`. */
+select:not([multiple]):not([size]) {
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.625rem center;
+	background-size: 1.1em;
+	padding-inline-end: calc(1.1em + 1rem);
+}
+
 @layer base {
 	* {
 		@apply border-border outline-ring;

package/src/lib/utils/loadScript.ts

@@ -8,6 +8,8 @@ export function loadScript(
 	src: string,
 	options?: {
 		crossOrigin?: string;
+		/** Subresource Integrity hash. A cross-origin script also needs `crossOrigin`. */
+		integrity?: string;
 		async?: boolean;
 		defer?: boolean;
 	}
@@ -26,6 +28,7 @@ export function loadScript(
 		const script = document.createElement('script');
 		script.src = src;
 		if (options?.crossOrigin) script.crossOrigin = options.crossOrigin;
+		if (options?.integrity) script.integrity = options.integrity;
 		if (options?.async !== undefined) script.async = options.async;
 		if (options?.defer !== undefined) script.defer = options.defer;