@selvajs/ui 6.5.1-beta.0 → 6.6.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.5.1-beta.0",
+  "version": "6.6.0-beta.2",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -54,15 +54,15 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@sveltejs/kit": "^2",
+    "@sveltejs/kit": "^2 || ^3",
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
     "@selvajs/compute": "^4.2.1",
     "@selvajs/schemas": "^5.2.0",
-    "@selvajs/solve": "^1.2.3-beta.0",
-    "@selvajs/visualization": "^1.5.0"
+    "@selvajs/visualization": "^1.5.0",
+    "@selvajs/solve": "^1.2.3-beta.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -90,11 +90,11 @@
     "svelte": "5.57.1",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.2",
-    "@selvajs/compute": "4.2.1",
-    "@selvajs/config": "0.0.4",
-    "@selvajs/schemas": "5.2.0",
     "@selvajs/visualization": "1.5.0",
-    "@selvajs/solve": "1.2.3-beta.0"
+    "@selvajs/schemas": "5.2.0",
+    "@selvajs/compute": "4.2.1",
+    "@selvajs/solve": "1.2.3-beta.0",
+    "@selvajs/config": "0.0.4"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/ConfirmDialog.svelte

@@ -38,20 +38,12 @@
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
 			{#if description}
-				<AlertDialog.Description class={variant === 'destructive' ? 'text-destructive' : undefined}>
-					{description}
-				</AlertDialog.Description>
+				<AlertDialog.Description>{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}
-			>
+			<AlertDialog.Action onclick={handleConfirm} disabled={pending} {variant}>
 				{pending ? (pendingLabel ?? confirmLabel) : confirmLabel}
 			</AlertDialog.Action>
 		</AlertDialog.Footer>

package/src/lib/components/ErrorScreen.svelte

@@ -2,6 +2,7 @@
 	import { AlertCircle } from '@lucide/svelte';
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
+	import Callout from './primitives/Callout.svelte';
 
 	interface Props {
 		status?: number;
@@ -15,39 +16,28 @@
 
 <div class="p-4 flex min-h-screen items-center justify-center bg-background">
 	<Card.Root class="max-w-md w-full">
-		<Card.Header class="text-center">
-			<div class="mb-4 flex justify-center">
+		<Card.Header>
+			<div class="gap-4 flex flex-col items-center text-center">
 				<div class="p-3 rounded-full bg-destructive/10">
-					<AlertCircle class="h-8 w-8 text-destructive" />
+					<AlertCircle class="size-8 text-destructive" />
 				</div>
+				<h1 class="text-3xl font-semibold">{status}</h1>
 			</div>
-			<Card.Title class="text-3xl">{status}</Card.Title>
 		</Card.Header>
-		<Card.Content class="space-y-4">
-			<div class="p-4 rounded-lg border border-destructive/50 bg-destructive/10">
-				<div class="gap-3 flex">
-					<AlertCircle class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-					<div class="flex-1">
-						<p class="text-sm font-semibold text-destructive">Error</p>
-						{#if message}
-							<p class="text-sm text-destructive/80">{message}</p>
-						{/if}
-					</div>
-				</div>
-			</div>
-
-			{#if details}
-				<div class="p-4 rounded-lg bg-muted">
-					<p class="font-mono text-sm break-all text-muted-foreground">
+		<Card.Content>
+			<div class="gap-4 flex flex-col">
+				<Callout tone="danger" title="Error">
+					{#if message}{message}{/if}
+				</Callout>
+				{#if details}
+					<p class="p-4 font-mono text-sm rounded-lg bg-muted break-all text-muted-foreground">
 						{details}
 					</p>
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</Card.Content>
-		<Card.Footer class="gap-2 flex">
-			<Button variant="outline" class="flex-1">
-				<a href={homeLink} class="w-full" rel="external">Go Home</a>
-			</Button>
+		<Card.Footer>
+			<Button variant="outline" href={homeLink} rel="external" class="w-full">Go Home</Button>
 		</Card.Footer>
 	</Card.Root>
 </div>

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

@@ -162,8 +162,8 @@
 			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} />
 		{/if}
 		{#if showParameterStateManager || (!isMobile && showCalculateButton && schema.instanceSolve === false)}
-			<div class="panel-footer px-3">
-				<div class="gap-2 flex flex-wrap items-center justify-center">
+			<div class="panel-footer px-1">
+				<div class="gap-2 flex flex-wrap items-center [&>button]:flex-1">
 					{#if showParameterStateManager}
 						<ParameterPresetManager
 							{schema}
@@ -226,10 +226,9 @@
 			</div>
 
 			<div
-				class="drawer-container"
+				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet"
 				class:drawer-open={drawerOpen}
 				class:drawer-closed={!drawerOpen}
-				style="z-index: 40;"
 			>
 				<button
 					class="drawer-handle-bar"
@@ -363,7 +362,7 @@
 					</Resizable.Pane>
 					<Resizable.Handle
 						withHandle
-						class="bg-transparent"
+						line={false}
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -390,7 +389,7 @@
 				{#if hasRightPanel}
 					<Resizable.Handle
 						withHandle
-						class="bg-transparent"
+						line={false}
 						data-collapsed={rightCollapsed}
 						onclick={() => {
 							if (rightCollapsed) rightPaneRef?.expand();
@@ -460,8 +459,8 @@
 
 	.panel-footer {
 		flex-shrink: 0;
-		padding-top: 1.5rem;
-		padding-bottom: 1rem;
+		padding-top: 0.75rem;
+		padding-bottom: 0.5rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
@@ -472,13 +471,8 @@
 		bottom: 0;
 		left: 0;
 		right: 0;
-		z-index: 100;
 		display: flex;
 		flex-direction: column;
-		border-radius: 1rem 1rem 0 0;
-		background: var(--background);
-		border-top: 1px solid var(--border);
-		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
 		transition: height 0.35s cubic-bezier(0.32, 0.72, 0, 1);
 		overflow: hidden;
 	}

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

@@ -217,14 +217,14 @@
 
 	let resolvedIsEmbedded = $derived(isEmbedded ?? page.url.searchParams.get('embed') === 'true');
 	let resolvedPrimaryColor = $derived(primaryColor ?? page.url.searchParams.get('primary'));
-	let customStyle = $derived(
-		resolvedPrimaryColor ? `--primary: ${hexToOklch(resolvedPrimaryColor)}` : ''
+	let primaryOverride = $derived(
+		resolvedPrimaryColor ? hexToOklch(resolvedPrimaryColor) : undefined
 	);
 
 	let pageTitle = $derived(title ?? (schema?.description || schema.name));
 </script>
 
-<div style={customStyle} style:display="contents">
+<div class="contents" style:--primary={primaryOverride}>
 	<AppShell
 		mode="fixed"
 		showHeader={!resolvedIsEmbedded}

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

@@ -3,14 +3,13 @@
 	//
 	// The counterpart to `SolveMessages`, which interrupts only for what the definition's author
 	// wrote. Everything else — Grasshopper complaining about its own components — lands here,
-	// where it is available without being in the way. One section per level, most severe first, with the
-	// component that raised each message shown as a label rather than spliced into its text.
+	// where it is available without being in the way. Most severe first, with the component that
+	// raised each message on its own line rather than spliced into its text.
 
 	import type { Snippet } from 'svelte';
-	import { CircleAlert, TriangleAlert, Info } from '@lucide/svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
 	import * as Dialog from '$lib/components/primitives/dialog';
-	import { Badge } from '$lib/components/primitives/badge';
+	import IssueList, { type Issue } from '$lib/components/primitives/IssueList.svelte';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */
@@ -42,32 +41,24 @@
 		count: number;
 	}
 
-	// Tone classes are written out, never interpolated: Tailwind scans source text, so a
-	// constructed class name is not emitted and the icon would render colourless.
 	const LEVELS = [
 		{
 			level: 'error',
-			heading: 'Errors',
+			severity: 'error',
 			one: 'error',
-			many: 'errors',
-			icon: CircleAlert,
-			tone: 'text-destructive'
+			many: 'errors'
 		},
 		{
 			level: 'warning',
-			heading: 'Warnings',
+			severity: 'warning',
 			one: 'warning',
-			many: 'warnings',
-			icon: TriangleAlert,
-			tone: 'text-amber-500'
+			many: 'warnings'
 		},
 		{
 			level: 'remark',
-			heading: 'Notes',
+			severity: 'note',
 			one: 'note',
-			many: 'notes',
-			icon: Info,
-			tone: 'text-muted-foreground'
+			many: 'notes'
 		}
 	] as const;
 
@@ -95,14 +86,25 @@
 			return { ...meta, items };
 		}).filter((section) => section.items.length > 0)
 	);
+
+	const issues = $derived<Issue[]>(
+		sections.flatMap((section) =>
+			section.items.map((item) => ({
+				severity: section.severity,
+				message: item.message,
+				source: item.source,
+				count: item.count
+			}))
+		)
+	);
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Trigger class="focus:outline-none">
+	<Dialog.Trigger>
 		{@render trigger()}
 	</Dialog.Trigger>
 
-	<Dialog.Content class="max-w-lg gap-4">
+	<Dialog.Content class="max-w-lg">
 		<Dialog.Header>
 			<Dialog.Title>Messages</Dialog.Title>
 			<Dialog.Description>
@@ -115,34 +117,6 @@
 			</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="space-y-4 max-h-[60vh] overflow-y-auto">
-			{#each sections as section (section.level)}
-				<section>
-					<h3 class="mb-1.5 gap-1.5 text-xs font-medium flex items-center text-muted-foreground">
-						<section.icon class="h-3.5 w-3.5 {section.tone}" />
-						{section.heading}
-					</h3>
-					<ul class="divide-y rounded-lg border">
-						{#each section.items as item (item.message + (item.source ?? ''))}
-							<li class="gap-3 px-3 py-2 text-sm flex items-start justify-between">
-								<p class="min-w-0 wrap-anywhere">
-									{item.message}
-									{#if item.count > 1}
-										<span class="ml-1 text-xs text-muted-foreground tabular-nums"
-											>×{item.count}</span
-										>
-									{/if}
-								</p>
-								{#if item.source}
-									<Badge variant="secondary" class="font-normal max-w-[40%] shrink-0 truncate">
-										{item.source}
-									</Badge>
-								{/if}
-							</li>
-						{/each}
-					</ul>
-				</section>
-			{/each}
-		</div>
+		<IssueList {issues} />
 	</Dialog.Content>
 </Dialog.Root>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Download, Upload, AlertTriangle, CheckCircle } from '@lucide/svelte';
+	import { Download, Upload } from '@lucide/svelte';
 	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
 	import {
 		createSavedState,
@@ -8,7 +8,7 @@
 		exportStateAsJson,
 		importStateFromJson
 	} from '../../schema/param-exporter';
-	import { Button, Input, Label, Textarea, Dialog, Card, toast } from '../primitives';
+	import { Button, Input, Label, Textarea, Dialog, Callout, IssueList, toast } from '../primitives';
 
 	import type { ActionButton } from '../../types/actionButton';
 	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
@@ -156,7 +156,7 @@
 </script>
 
 {#if showSaveButton}
-	<Button variant="default" size="sm" onclick={openExportDialog}>
+	<Button variant="outline" size="sm" onclick={openExportDialog}>
 		<Download class="mr-2 h-4 w-4" />
 		{t.saveButton}
 	</Button>
@@ -239,7 +239,7 @@
 		</Dialog.Header>
 
 		{#if onListStates}
-			<div class="py-4 max-h-[60vh] overflow-y-auto">
+			<div class="py-4">
 				{#if isLoadingList}
 					<p class="text-sm py-8 text-center text-muted-foreground">…</p>
 				{:else if listError}
@@ -283,7 +283,7 @@
 
 <!-- Validation Dialog -->
 <Dialog.Root bind:open={showValidationDialog}>
-	<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-y-auto">
+	<Dialog.Content class="max-w-2xl">
 		<Dialog.Header>
 			<Dialog.Title>{t.validationTitle}</Dialog.Title>
 			<Dialog.Description>
@@ -296,75 +296,31 @@
 		{#if loadResult}
 			<div class="gap-4 py-4 grid">
 				{#if loadResult.isValid}
-					<Card.Root class="p-4 border-success/30 bg-success/5">
-						<div class="gap-3 flex items-start">
-							<CheckCircle class="h-5 w-5 text-success" />
-							<div>
-								<h4 class="text-sm font-semibold text-success-foreground">
-									{t.validationNoIssuesTitle}
-								</h4>
-								<p class="text-sm mt-1 text-success-foreground/80">
-									{t.validationNoIssuesBody}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="success" title={t.validationNoIssuesTitle}>
+						{t.validationNoIssuesBody}
+					</Callout>
 				{:else if loadResult.canLoad}
-					<Card.Root class="p-4 border-warning/30 bg-warning/5">
-						<div class="gap-3 flex items-start">
-							<AlertTriangle class="h-5 w-5 text-warning" />
-							<div>
-								<h4 class="text-sm font-semibold text-warning-foreground">
-									{t.validationWarningsTitle}
-								</h4>
-								<p class="text-sm mt-1 text-warning-foreground/80">
-									{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="warning" title={t.validationWarningsTitle}>
+						{t.validationWarningsBody.replace('{count}', String(loadResult.issues.length))}
+					</Callout>
 				{:else}
-					<Card.Root class="p-4 border-destructive/30 bg-destructive/5">
-						<div class="gap-3 flex items-start">
-							<AlertTriangle class="h-5 w-5 text-destructive" />
-							<div>
-								<h4 class="text-sm font-semibold text-destructive">{t.validationErrorsTitle}</h4>
-								<p class="text-sm mt-1 text-destructive/80">
-									{t.validationErrorsBody}
-								</p>
-							</div>
-						</div>
-					</Card.Root>
+					<Callout tone="danger" title={t.validationErrorsTitle}>
+						{t.validationErrorsBody}
+					</Callout>
 				{/if}
 
 				{#if !loadResult.isValid}
-					<div class="space-y-2">
+					<div class="gap-2 flex flex-col">
 						<h4 class="text-sm font-medium">{t.validationIssuesHeading}</h4>
-						{#each loadResult.issues as issue (issue.message)}
-							<div
-								class="p-3 rounded-lg border {issue.severity === 'error'
-									? 'border-destructive/30 bg-destructive/5'
-									: 'border-warning/30 bg-warning/5'}"
-							>
-								<div class="gap-2 flex items-start">
-									<AlertTriangle
-										class="h-4 w-4 mt-0.5 {issue.severity === 'error'
-											? 'text-destructive'
-											: 'text-warning'}"
-									/>
-									<div class="flex-1">
-										<p class="text-sm font-medium">{issue.message}</p>
-										{#if issue.details}
-											<p class="text-xs mt-1 text-muted-foreground">
-												{t.validationExpected}
-												{issue.details.expected} → {t.validationActual}
-												{issue.details.actual}
-											</p>
-										{/if}
-									</div>
-								</div>
-							</div>
-						{/each}
+						<IssueList
+							issues={loadResult.issues.map((issue) => ({
+								severity: issue.severity === 'error' ? 'error' : 'warning',
+								message: issue.message,
+								detail: issue.details
+									? `${t.validationExpected} ${issue.details.expected} → ${t.validationActual} ${issue.details.actual}`
+									: undefined
+							}))}
+						/>
 					</div>
 				{/if}
 			</div>

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

@@ -13,10 +13,12 @@
 	// anything, so it appears on its own after the solve and fades.
 
 	import { untrack } from 'svelte';
-	import { CircleAlert, TriangleAlert, Info, LoaderCircle } from '@lucide/svelte';
+	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';
 
 	interface Props {
 		/** What the running (or most recent) solve has said over the live channel. */
@@ -194,6 +196,15 @@
 		view === 'live' ? [...live.diagnostics] : view === 'idle' ? authoredRemarks : authoredGating
 	);
 
+	// A remark states something without asking anything, so it reads as a quiet note.
+	const issues = $derived<Issue[]>(
+		rows.map((d) => ({
+			severity: d.level === 'remark' ? 'note' : d.level,
+			message: d.message,
+			source: d.source
+		}))
+	);
+
 	// Steps a few milliseconds long would swap the headline faster than it can be read. Each one
 	// stays up for at least this long; steps that end sooner are skipped in the label but still
 	// count in the bar. The label and its step count move together so they never disagree.
@@ -245,7 +256,7 @@
 
 {#if visible}
 	<div
-		class="bottom-4 p-3 shadow-lg fixed left-1/2 z-50 w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 rounded-lg border bg-background {view ===
+		class="bottom-4 p-3 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg border bg-background {view ===
 		'blocked'
 			? 'border-destructive/50'
 			: ''}"
@@ -267,8 +278,8 @@
 						{/if}
 						<Button
 							variant="secondary"
-							size="sm"
-							class="-my-1 h-7 px-3 text-xs shrink-0"
+							size="xs"
+							class="-my-1 shrink-0"
 							disabled={finishing}
 							onclick={onabort}
 						>
@@ -299,8 +310,9 @@
 										? { width: 1, ms: FINISH_MS }
 										: (bars[p.source ?? ''] ?? { width: p.fraction, ms: 150 })}
 									<div
-										class="h-full rounded-full bg-primary transition-[width] ease-linear"
-										style="width: {bar.width * 100}%; transition-duration: {bar.ms}ms"
+										class="h-full w-(--bar-width) rounded-full bg-primary transition-all duration-(--bar-ms) ease-linear"
+										style:--bar-width="{bar.width * 100}%"
+										style:--bar-ms="{bar.ms}ms"
 									></div>
 								{:else}
 									<div class="animate-pulse h-full w-1/3 rounded-full bg-primary/60"></div>
@@ -314,10 +326,10 @@
 			<div class="mb-2">
 				<div class="gap-2 text-sm font-medium flex items-center">
 					{#if view === 'blocked'}
-						<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
+						<SeverityIcon severity="error" />
 						{labels.blockedTitle}
 					{:else}
-						<TriangleAlert class="h-4 w-4 text-amber-500 shrink-0" />
+						<SeverityIcon severity="warning" />
 						{labels.messagesTitle}
 					{/if}
 				</div>
@@ -328,29 +340,9 @@
 		{/if}
 
 		{#if rows.length > 0}
-			<ul
-				class="max-h-40 space-y-2 text-sm overflow-y-auto {view === 'live'
-					? 'mt-3 pt-3 border-t'
-					: ''}"
-			>
-				{#each rows as row, i (i)}
-					<li class="gap-2 flex">
-						{#if row.level === 'error'}
-							<CircleAlert class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-						{:else if row.level === 'warning'}
-							<TriangleAlert class="mt-0.5 h-4 w-4 text-amber-500 shrink-0" />
-						{:else}
-							<Info class="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-						{/if}
-						<div class="min-w-0 flex-1">
-							<p class="wrap-anywhere">{row.message}</p>
-							{#if row.source}
-								<p class="text-xs text-muted-foreground">{row.source}</p>
-							{/if}
-						</div>
-					</li>
-				{/each}
-			</ul>
+			<div class="max-h-40 overflow-y-auto {view === 'live' ? 'mt-3 pt-3 border-t' : ''}">
+				<IssueList {issues} variant="plain" />
+			</div>
 		{/if}
 
 		{#if view === 'review' || view === 'blocked'}

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

@@ -40,23 +40,21 @@
 		</p>
 		<div class="gap-1 flex items-center">
 			<Button
-				size="sm"
+				size="icon-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"
+				size="icon-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>

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

@@ -82,7 +82,7 @@
 				{/if}
 				<span class="text-sm font-medium flex-1 truncate">{item.label}</span>
 				{#if item.badge !== undefined}
-					<span class="font-mono shrink-0 text-[11px] tabular-nums opacity-60">{item.badge}</span>
+					<span class="font-mono shrink-0 text-2xs tabular-nums opacity-60">{item.badge}</span>
 				{/if}
 			</a>
 		{/each}

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

@@ -188,11 +188,7 @@
 	{:else if !figData}
 		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Waiting for chart data...</div>
 	{:else}
-		<div
-			bind:this={containerEl}
-			class="w-full"
-			style="height: {isFullscreen ? '100vh' : '380px'};"
-		></div>
+		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-screen' : '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