selva-shared 0.8.1

package/src/lib/components/AppLayout.svelte

@@ -0,0 +1,439 @@
+<script lang="ts">
+	import type { UISchema, SupportedTypes } from '../types/generated';
+	import { ChevronUp } from '@lucide/svelte';
+	import Viewer from './Viewer.svelte';
+	import CalculateButton from './ui/CalculateButton.svelte';
+	import SolvingIndicator from './ui/SolvingIndicator.svelte';
+	import StateManager from './StateManager.svelte';
+	import TabLayout from './preview/TabLayout.svelte';
+	import CollapsedPanelStrip from './CollapsedPanelStrip.svelte';
+	import * as Resizable from '$lib/components/ui/resizable';
+
+	// ── Constants ────────────────────────────────────────────────────────────────
+	const COLLAPSED_WIDTH = 48;
+
+	// ── Props ────────────────────────────────────────────────────────────────────
+	interface Props {
+		schema: UISchema;
+		meshes?: any[];
+		isSolving: boolean;
+		showSolvingIndicator?: boolean;
+		hasPendingChanges?: boolean;
+		hasNeverSolved?: boolean;
+		isViewerFullscreen?: boolean;
+		oncalculate?: () => void;
+		values: Record<string, unknown>;
+		onValueChange: (id: string, val: SupportedTypes) => void | Promise<void>;
+		onLoadValues?: () => void | Promise<void>;
+	}
+
+	let {
+		schema,
+		meshes = [],
+		isSolving,
+		showSolvingIndicator = false,
+		hasPendingChanges = false,
+		hasNeverSolved = false,
+		isViewerFullscreen = $bindable(false),
+		oncalculate = () => {},
+		values = $bindable({}),
+		onValueChange,
+		onLoadValues
+	}: Props = $props();
+
+	// ── Layout flags ─────────────────────────────────────────────────────────────
+	const hasViewer = $derived(
+		!!(schema?.viewerOptions?.enableLocal || schema?.viewerOptions?.enableRemote)
+	);
+	const leftTabs = $derived(
+		schema.layout.type === 'tabbed' ? schema.layout.tabs.filter((t) => t.position !== 'right') : []
+	);
+	const rightTabs = $derived(
+		schema.layout.type === 'tabbed' ? schema.layout.tabs.filter((t) => t.position === 'right') : []
+	);
+	const hasLeftPanel = $derived(leftTabs.length > 0);
+	const hasRightPanel = $derived(rightTabs.length > 0);
+	const hasSidebar = $derived(hasViewer || hasRightPanel);
+	// Two-panel mode: left + right, no viewer — both panels grow to fill full width
+	const isTwoPanelMode = $derived(!hasViewer && hasLeftPanel && hasRightPanel);
+
+	// ── Responsive state ─────────────────────────────────────────────────────────
+	let isMobile = $state(false);
+	let drawerOpen = $state(false);
+
+	const activeLeftTabLabel = $derived(leftTabs[0]?.label ?? 'Parameters');
+
+	$effect(() => {
+		const mqMobile = window.matchMedia('(max-width: 639px)');
+		function update() {
+			isMobile = mqMobile.matches;
+		}
+		update();
+		mqMobile.addEventListener('change', update);
+		return () => mqMobile.removeEventListener('change', update);
+	});
+
+	// ── Panel collapse state ──────────────────────────────────────────────────────
+	let leftCollapsed = $state(false);
+	let rightCollapsed = $state(false);
+	let leftPaneRef = $state<{ expand: () => void } | null>(null);
+	let rightPaneRef = $state<{ expand: () => void } | null>(null);
+	let requestedLeftTabId = $state<string | null>(null);
+	let requestedRightTabId = $state<string | null>(null);
+
+	const layoutKey = $derived(
+		`${hasLeftPanel ? 'L' : ''}${hasViewer ? 'V' : ''}${hasRightPanel ? 'R' : ''}`
+	);
+
+	async function handleLoadValues(loadedValues: Record<string, unknown>) {
+		Object.assign(values, loadedValues);
+		await onLoadValues?.();
+	}
+
+	// ── Swipe gesture (mobile drawer) ────────────────────────────────────────────
+	let _touchStartY = 0;
+
+	function onDrawerTouchStart(e: TouchEvent) {
+		_touchStartY = e.touches[0].clientY;
+	}
+
+	function onDrawerTouchEnd(e: TouchEvent) {
+		const deltaY = e.changedTouches[0].clientY - _touchStartY;
+		const SWIPE_THRESHOLD = 40;
+		if (Math.abs(deltaY) > SWIPE_THRESHOLD) {
+			drawerOpen = deltaY < 0; // swipe up → open, swipe down → close
+		}
+	}
+</script>
+
+<!-- ── Snippets ───────────────────────────────────────────────────────────────── -->
+
+{#snippet panelContent(
+	panelFilter: 'left' | 'right' | undefined,
+	requestedTabId: string | null,
+	showStateManager = true,
+	showCalculateButton = true
+)}
+	<div class="panel-content-wrapper">
+		{#if schema.layout.type === 'tabbed'}
+			<TabLayout {schema} bind:values {onValueChange} {panelFilter} {requestedTabId} />
+		{/if}
+		{#if showStateManager || (!isMobile && showCalculateButton && schema.instanceSolve === false)}
+			<div class="panel-footer px-3">
+				{#if showStateManager}
+					<StateManager {schema} currentValues={values} onLoadValues={handleLoadValues} />
+				{/if}
+				{#if !isMobile && showCalculateButton && schema.instanceSolve === false}
+					<CalculateButton {hasPendingChanges} {hasNeverSolved} {isSolving} {oncalculate} />
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<!-- ── Root container ─────────────────────────────────────────────────────────── -->
+<div
+	data-layout-root
+	class="min-h-0 sm:flex-row flex flex-1 flex-col overflow-hidden"
+	class:fullscreen-layout={isViewerFullscreen}
+	class:relative={isMobile}
+>
+	{#if isMobile}
+		<!-- ═══ MOBILE LAYOUT ══════════════════════════════════════════════════════ -->
+		{#if hasViewer}
+			<div class="min-h-0 flex flex-1 flex-col">
+				<Viewer
+					{schema}
+					{meshes}
+					bind:isFullscreen={isViewerFullscreen}
+					{isSolving}
+					isBlurred={drawerOpen}
+					{drawerOpen}
+				/>
+			</div>
+
+			<div
+				class="drawer-container"
+				class:drawer-open={drawerOpen}
+				class:drawer-closed={!drawerOpen}
+				style="z-index: 40;"
+			>
+				<button
+					class="drawer-handle-bar"
+					onclick={() => (drawerOpen = !drawerOpen)}
+					ontouchstart={onDrawerTouchStart}
+					ontouchend={onDrawerTouchEnd}
+					aria-label={drawerOpen ? 'Collapse panel' : 'Expand panel'}
+					aria-expanded={drawerOpen}
+				>
+					<div class="drawer-pill"></div>
+					<span class="text-sm font-medium ml-2 text-foreground">{activeLeftTabLabel}</span>
+					<ChevronUp
+						size={16}
+						class="ml-auto text-muted-foreground transition-transform duration-300 {drawerOpen
+							? ''
+							: 'rotate-180'}"
+					/>
+				</button>
+
+				<div class="drawer-content">
+					<div class="px-3 pb-6">
+						{#if hasLeftPanel}
+							{@render panelContent(
+								hasRightPanel ? 'left' : undefined,
+								requestedLeftTabId,
+								!hasRightPanel,
+								false
+							)}
+						{/if}
+						{#if hasRightPanel}
+							<div class="my-4 gap-2 flex items-center">
+								<div class="h-px flex-1 bg-border"></div>
+								<span class="text-xs font-medium px-1 text-muted-foreground">
+									{rightTabs[0]?.label ?? 'More'}
+								</span>
+								<div class="h-px flex-1 bg-border"></div>
+							</div>
+							{@render panelContent('right', requestedRightTabId, true, false)}
+						{/if}
+					</div>
+				</div>
+
+				{#if schema.instanceSolve === false}
+					<div class="drawer-footer">
+						<CalculateButton {hasPendingChanges} {hasNeverSolved} {isSolving} {oncalculate} />
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="flex flex-1 flex-col overflow-hidden">
+				<div class="px-3 pt-3 flex-1 overflow-y-auto">
+					{#if hasLeftPanel}
+						{@render panelContent(
+							hasRightPanel ? 'left' : undefined,
+							requestedLeftTabId,
+							!hasRightPanel,
+							false
+						)}
+					{/if}
+					{#if hasRightPanel}
+						<div class="my-4 gap-2 flex items-center">
+							<div class="h-px flex-1 bg-border"></div>
+							<span class="text-xs font-medium px-1 text-muted-foreground">
+								{rightTabs[0]?.label ?? 'More'}
+							</span>
+							<div class="h-px flex-1 bg-border"></div>
+						</div>
+						{@render panelContent('right', requestedRightTabId, true, false)}
+					{/if}
+				</div>
+				{#if schema.instanceSolve === false}
+					<div class="drawer-footer">
+						<CalculateButton {hasPendingChanges} {hasNeverSolved} {isSolving} {oncalculate} />
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{:else}
+		<!-- ═══ DESKTOP LAYOUT ═════════════════════════════════════════════════════ -->
+
+		{#if !hasViewer && !isTwoPanelMode && hasLeftPanel !== hasRightPanel}
+			<!-- Single centered panel (left-only or right-only), no viewer -->
+			<div class="min-h-0 flex h-full flex-1 justify-center">
+				<div class="min-h-0 flex h-full w-4/5 flex-col">
+					{@render panelContent(
+						hasRightPanel ? 'right' : undefined,
+						hasRightPanel ? requestedRightTabId : requestedLeftTabId,
+						!hasRightPanel,
+						!hasRightPanel
+					)}
+				</div>
+			</div>
+		{:else}
+			<div class="min-h-0 flex h-full flex-1">
+				<!-- Left collapsed strip (outside PaneGroup so it has fixed width) -->
+				{#if leftCollapsed && hasSidebar && hasLeftPanel}
+					<CollapsedPanelStrip
+						side="left"
+						tabs={leftTabs}
+						collapsedWidth={COLLAPSED_WIDTH}
+						onExpand={() => leftPaneRef?.expand()}
+						onTabClick={(id) => {
+							requestedLeftTabId = id;
+							leftPaneRef?.expand();
+						}}
+					/>
+				{/if}
+
+				<Resizable.PaneGroup
+					direction="horizontal"
+					autoSaveId="selva-layout-{layoutKey}"
+					class="min-h-0 flex-1"
+				>
+					<!-- Left pane -->
+					{#if hasLeftPanel}
+						<Resizable.Pane
+							bind:this={leftPaneRef}
+							order={1}
+							defaultSize={isTwoPanelMode ? 50 : hasViewer && hasRightPanel ? 22 : 30}
+							minSize={15}
+							maxSize={45}
+							collapsible
+							collapsedSize={0}
+							onCollapse={() => (leftCollapsed = true)}
+							onExpand={() => (leftCollapsed = false)}
+						>
+							<div
+								class="min-h-0 flex h-full flex-col {isViewerFullscreen || leftCollapsed
+									? 'hidden'
+									: ''}"
+							>
+								{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId)}
+							</div>
+						</Resizable.Pane>
+						<Resizable.Handle
+							class={leftCollapsed ? 'pointer-events-none hidden' : 'bg-transparent'}
+						/>
+					{/if}
+
+					<!-- Viewer pane -->
+					{#if hasViewer}
+						<Resizable.Pane order={2} minSize={20} class="min-h-0 mx-1 flex flex-col">
+							<Viewer {schema} {meshes} bind:isFullscreen={isViewerFullscreen} {isSolving} />
+						</Resizable.Pane>
+					{/if}
+
+					<!-- Right pane -->
+					{#if hasRightPanel}
+						<Resizable.Handle
+							class={rightCollapsed ? ' pointer-events-none hidden' : 'bg-transparent'}
+						/>
+						<Resizable.Pane
+							bind:this={rightPaneRef}
+							order={3}
+							defaultSize={isTwoPanelMode ? 50 : 25}
+							minSize={15}
+							maxSize={45}
+							collapsible
+							collapsedSize={0}
+							onCollapse={() => (rightCollapsed = true)}
+							onExpand={() => (rightCollapsed = false)}
+						>
+							<div
+								class="min-h-0 flex h-full flex-col {isViewerFullscreen || rightCollapsed
+									? 'hidden'
+									: ''}"
+							>
+								{@render panelContent('right', requestedRightTabId, !hasLeftPanel, !hasLeftPanel)}
+							</div>
+						</Resizable.Pane>
+					{/if}
+				</Resizable.PaneGroup>
+
+				<!-- Right collapsed strip -->
+				{#if rightCollapsed && hasRightPanel}
+					<CollapsedPanelStrip
+						side="right"
+						tabs={rightTabs}
+						collapsedWidth={COLLAPSED_WIDTH}
+						onExpand={() => rightPaneRef?.expand()}
+						onTabClick={(id) => {
+							requestedRightTabId = id;
+							rightPaneRef?.expand();
+						}}
+					/>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<SolvingIndicator show={showSolvingIndicator} />
+
+<style>
+	.fullscreen-layout {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		padding: 0 !important;
+	}
+
+	.panel-content-wrapper {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+	}
+
+	.panel-footer {
+		flex-shrink: 0;
+		padding-top: 1.5rem;
+		padding-bottom: 1rem;
+	}
+
+	.drawer-container {
+		position: absolute;
+		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;
+	}
+
+	.drawer-closed {
+		height: 60px;
+	}
+	.drawer-open {
+		height: 60svh;
+	}
+
+	.drawer-handle-bar {
+		position: relative;
+		height: 60px;
+		padding: 20px 1rem 0;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+		background: transparent;
+		border: none;
+		width: 100%;
+		flex-shrink: 0;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.drawer-handle-bar:active {
+		background: var(--muted);
+	}
+
+	.drawer-pill {
+		position: absolute;
+		top: 8px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 2.5rem;
+		height: 4px;
+		border-radius: 9999px;
+		background: var(--muted-foreground);
+		opacity: 0.4;
+	}
+
+	.drawer-content {
+		flex: 1;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.drawer-footer {
+		flex-shrink: 0;
+		padding: 0rem 1rem;
+		border-top: 1px solid var(--border);
+	}
+</style>

package/src/lib/components/CollapsedPanelStrip.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { TabConfig } from '../types/generated';
+	import { ChevronRight, ChevronLeft, ChevronDown } from '@lucide/svelte';
+	import Icon from '@iconify/svelte';
+
+	interface Props {
+		side: 'left' | 'right';
+		tabs: TabConfig[];
+		collapsedWidth: number;
+		onExpand: () => void;
+		onTabClick: (id: string) => void;
+	}
+
+	let { side, tabs, collapsedWidth, onExpand, onTabClick }: Props = $props();
+</script>
+
+<div
+	class="gap-2 py-3 lg:py-4 lg:flex-col lg:w-auto px-3 lg:px-0 lg:border-0 flex w-full shrink-0 cursor-pointer flex-row items-center border-2 bg-muted transition-colors hover:bg-muted/70 {side ===
+	'left'
+		? 'lg:border-r-2 lg:rounded-r-md'
+		: 'lg:border-l-2 lg:rounded-l-md'} border-border"
+	style="lg:width: {collapsedWidth}px"
+	role="button"
+	tabindex="0"
+	onclick={onExpand}
+	onkeydown={(e) => e.key === 'Enter' && onExpand()}
+	title="Expand {side} panel"
+>
+	<!-- Mobile chevron (top of row) -->
+	{#if side === 'left'}
+		<div class="lg:hidden text-muted-foreground">
+			<ChevronDown size={14} />
+		</div>
+	{/if}
+
+	{#each tabs as tab (tab.id)}
+		<button
+			type="button"
+			class="w-8 h-8 m-1 rounded text-xs font-semibold shadow-sm flex shrink-0 items-center justify-center bg-background text-foreground transition-colors select-none hover:bg-accent/80"
+			title={tab.label}
+			onclick={(e) => {
+				e.stopPropagation();
+				onTabClick(tab.id);
+			}}
+		>
+			{#if tab.icon}
+				{#if tab.icon.includes(':')}
+					<Icon icon={tab.icon} class="h-4 w-4" />
+				{:else}
+					<span>{tab.icon}</span>
+				{/if}
+			{:else}
+				<span>{tab.label[0]?.toUpperCase() ?? '?'}</span>
+			{/if}
+		</button>
+	{/each}
+
+	{#if side === 'left'}
+		<div class="lg:block mt-auto hidden text-muted-foreground">
+			<ChevronRight size={14} />
+		</div>
+	{:else if side === 'right'}
+		<div class="lg:block mt-auto hidden text-muted-foreground">
+			<ChevronLeft size={14} />
+		</div>
+	{/if}
+</div>

package/src/lib/components/ComputeMessages.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import * as Dialog from '$lib/components/ui/dialog';
+
+	interface Props {
+		errors?: string[];
+		warnings?: string[];
+	}
+
+	let { errors = [], warnings = [] }: Props = $props();
+
+	let open = $state(false);
+
+	let showErrors = $state(true);
+	let showWarnings = $state(false);
+
+	function groupMessages(messages: string[]): Array<{ message: string; count: number }> {
+		const grouped = new SvelteMap<string, number>();
+
+		for (const msg of messages) {
+			// Extract the base message without the component GUID
+			const baseMsg = msg.replace(/\([a-f0-9-]{36}\)$/i, '(...)').trim();
+			const currentCount = grouped.get(baseMsg) || 0;
+			grouped.set(baseMsg, currentCount + 1);
+		}
+
+		return Array.from(grouped.entries())
+			.map(([message, count]) => ({ message, count }))
+			.sort((a, b) => b.count - a.count);
+	}
+
+	const groupedErrors = $derived(groupMessages(errors));
+	const groupedWarnings = $derived(groupMessages(warnings));
+	const hasMessages = $derived(errors.length > 0 || warnings.length > 0);
+	const totalCount = $derived(errors.length + warnings.length);
+</script>
+
+{#if hasMessages}
+	<!-- Floating Indicator Badge (hidden on mobile) -->
+	<Dialog.Root bind:open>
+		<Dialog.Trigger
+			class="bottom-12 right-2 sm:bottom-4 sm:right-4 sm:block fixed z-100 hidden focus:outline-none"
+		>
+			<div
+				class="shadow-lg text-xs font-medium hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 flex cursor-pointer items-stretch overflow-hidden rounded-full border transition-all duration-150
+					{errors.length > 0
+					? 'text-destructive-foreground border-destructive/30 bg-destructive'
+					: 'border-warning/30 bg-warning/5 text-warning-foreground'}"
+			>
+				{#if errors.length > 0}
+					<span class="gap-1.5 px-3 py-1.5 flex items-center">
+						<CircleAlert class="h-3.5 w-3.5 shrink-0" />
+						{errors.length}
+					</span>
+				{/if}
+				{#if warnings.length > 0}
+					{#if errors.length > 0}
+						<span class="bg-destructive-foreground/20 w-px self-stretch"></span>
+						<span class="gap-1.5 px-3 py-1.5 flex items-center bg-destructive/80">
+							<TriangleAlert class="h-3.5 w-3.5 shrink-0" />
+							{warnings.length}
+						</span>
+					{:else}
+						<span class="gap-1.5 px-3 py-1.5 flex items-center">
+							<TriangleAlert class="h-3.5 w-3.5 shrink-0" />
+							{warnings.length}
+						</span>
+					{/if}
+				{/if}
+			</div>
+		</Dialog.Trigger>
+
+		<Dialog.Content class="max-w-2xl max-h-[80vh]">
+			<Dialog.Header>
+				<Dialog.Title class="gap-2 flex items-center">
+					<CircleAlert class="h-5 w-5" />
+					Compute Messages
+				</Dialog.Title>
+				<Dialog.Description>
+					{totalCount}
+					{totalCount === 1 ? 'issue' : 'issues'} detected during solve
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<div class="space-y-3 pr-2 overflow-y-auto" style="max-height: calc(80vh - 180px);">
+				<!-- Errors Section -->
+				{#if errors.length > 0}
+					<Collapsible.Root bind:open={showErrors}>
+						<div class="overflow-hidden rounded-lg border border-destructive bg-card">
+							<div class="px-4 py-3 flex items-center">
+								<Collapsible.Trigger
+									class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-destructive/5"
+								>
+									{#if showErrors}
+										<ChevronDown class="h-4 w-4 shrink-0 text-destructive" />
+									{:else}
+										<ChevronRight class="h-4 w-4 shrink-0 text-destructive" />
+									{/if}
+									<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
+									<span class="text-sm font-medium text-destructive">
+										{errors.length === 1 ? '1 Error' : `${errors.length} Errors`}
+									</span>
+								</Collapsible.Trigger>
+							</div>
+
+							<Collapsible.Content class="space-y-0">
+								<div class="max-h-60 px-4 py-3 overflow-y-auto border-t border-destructive bg-card">
+									<ul class="space-y-2">
+										{#each groupedErrors as { message, count } (message)}
+											<li class="gap-2 text-sm flex text-destructive/90">
+												<span class="shrink-0">•</span>
+												<span class="flex-1">
+													{message}
+													{#if count > 1}
+														<span class="ml-1 font-medium text-destructive/70">×{count} </span>
+													{/if}
+												</span>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							</Collapsible.Content>
+						</div>
+					</Collapsible.Root>
+				{/if}
+
+				<!-- Warnings Section -->
+				{#if warnings.length > 0}
+					<Collapsible.Root bind:open={showWarnings}>
+						<div class="overflow-hidden rounded-lg border border-warning/50 bg-card">
+							<div class="px-4 py-3 flex items-center">
+								<Collapsible.Trigger
+									class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-warning/5"
+								>
+									{#if showWarnings}
+										<ChevronDown class="h-4 w-4 shrink-0 text-warning" />
+									{:else}
+										<ChevronRight class="h-4 w-4 shrink-0 text-warning" />
+									{/if}
+									<TriangleAlert class="h-4 w-4 shrink-0 text-warning" />
+									<span class="text-sm font-medium text-warning">
+										{warnings.length === 1 ? '1 Warning' : `${warnings.length} Warnings`}
+									</span>
+								</Collapsible.Trigger>
+							</div>
+
+							<Collapsible.Content class="space-y-0">
+								<div class="max-h-60 px-4 py-3 overflow-y-auto border-t border-warning/50 bg-card">
+									<ul class="space-y-2">
+										{#each groupedWarnings as { message, count } (message)}
+											<li class="gap-2 text-sm flex text-muted-foreground">
+												<span class="shrink-0">•</span>
+												<span class="flex-1">
+													{message}
+													{#if count > 1}
+														<span class="ml-1 font-medium text-warning/70">×{count}</span>
+													{/if}
+												</span>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							</Collapsible.Content>
+						</div>
+					</Collapsible.Root>
+				{/if}
+			</div>
+		</Dialog.Content>
+	</Dialog.Root>
+{/if}