From b2b1f4ffcf6751d137fc4a52ec25c6ac2078b783 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sun, 21 Jun 2026 08:56:57 +0200
Subject: [PATCH] demo(popover): showcase the `spring-pop` JS spring tier via a
 `motion` control
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a `motion` chip-picker (slide-fade · scale-fade · fade · spring-pop,
default spring-pop) on the live `Popover.Content`, plus the prop in the
generated code snippet. Demonstrates the spring engine tier woken in
4878ccfb running live on an overlay: selecting `spring-pop` stamps
`data-animation-style="spring-pop"`, which Presence resolves to the
registered JS `spring` driver and runs via `motion.run`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/routes/uix/components/popover/+page.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/routes/uix/components/popover/+page.svelte b/web/routes/uix/components/popover/+page.svelte
index b5e394a2b..0b7cbcf85 100644
--- a/web/routes/uix/components/popover/+page.svelte
+++ b/web/routes/uix/components/popover/+page.svelte
@@ -3,6 +3,7 @@
 		Popover,
 		type PopoverSize
 	} from '$uix/eidos/components/popover';
+	import type { MotionPresetName } from '$uix/eidos/lib/motion/registry';
 	import { compileMorfo } from '$uix/morfo';
 	import { popoverMorfo } from '@/uix/morfo/components/popover';
 	import { getActiveUix } from '$active-uix';
@@ -19,6 +20,7 @@
 	let open = $state(false);
 	let modal = $state(false);
 	let size = $state<PopoverSize>('md');
+	let motion = $state<MotionPresetName>('spring-pop');
 	let side = $state<Side>('bottom');
 	let sideOffset = $state(8);
 	let align = $state<Align>('center');
@@ -120,6 +122,7 @@
 			showOverlay && '    <Popover.Overlay />',
 			'    <Popover.Content',
 			size !== 'md' && `      size="${size}"`,
+			motion !== 'slide-fade' && `      motion="${motion}"`,
 			side !== 'bottom' && `      side="${side}"`,
 			align !== 'center' && `      align="${align}"`,
 			'    >',
@@ -176,7 +179,7 @@
 				>{triggerLabel}</Popover.Trigger>
 				<Popover.Portal>
 					{#if showOverlay}<Popover.Overlay />{/if}
-					<Popover.Content {size} {side} {sideOffset} {align} {alignOffset} {avoidCollisions}>
+					<Popover.Content {size} {motion} {side} {sideOffset} {align} {alignOffset} {avoidCollisions}>
 						{#if showArrow}<Popover.Arrow />{/if}
 						<p style="margin: 0 0 var(--uix-space-3) 0;">{bodyText}</p>
 						{#if showClose}
@@ -264,6 +267,14 @@
 						{/each}
 					</span>
 				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>motion <span data-uix-control-hint>Content prop · spring-pop = JS spring engine</span></span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['slide-fade', 'scale-fade', 'fade', 'spring-pop'] as m}
+							<button data-uix-chip data-active={motion === m} onclick={() => (motion = m as MotionPresetName)}>{m}</button>
+						{/each}
+					</span>
+				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>sideOffset <span data-uix-control-hint>{sideOffset}px</span></span>
 					<input type="range" min="0" max="32" step="1" bind:value={sideOffset} />