fix(uix): menu demos follow the floating-gap canon (drop default sideOffset)

dropdown/context/select demos passed an explicit sideOffset that BYPASSED the
--floating-gap canon (showed 0/4/6 instead of the canonical --space-1). Default
to undefined so the canon (which now reaches portaled menus via the
FloatingContent $derived fix) applies; the sideOffset slider still overrides.

Verified live: menubar + dropdown show the 4px canonical gap on real interaction
(the canon-read $derived returns 4 → Floating UI offset 4).

web/routes/uix/components/context-menu/+page.svelte

@@ -15,7 +15,7 @@
 	let dir = $state<'ltr' | 'rtl'>('ltr');
 	// Soma · Content (floating layer)
 	let side = $state<'top' | 'right' | 'bottom' | 'left'>('bottom');
-	let sideOffset = $state(0);
+	let sideOffset = $state<number | undefined>(undefined);
 	let align = $state<'start' | 'center' | 'end'>('start');
 	let alignOffset = $state(0);
 	let avoidCollisions = $state(true);
@@ -99,7 +99,7 @@
 			`  <ContextMenu.Trigger>${triggerText}</ContextMenu.Trigger>`,
 			'  <ContextMenu.Content',
 			side !== 'bottom' && `    side="${side}"`,
-			sideOffset !== 0 && `    sideOffset={${sideOffset}}`,
+			sideOffset !== undefined && `    sideOffset={${sideOffset}}`,
 			align !== 'start' && `    align="${align}"`,
 			alignOffset !== 0 && `    alignOffset={${alignOffset}}`,
 			!avoidCollisions && '    avoidCollisions={false}',
@@ -378,8 +378,8 @@
 					</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="-16" max="24" step="1" bind:value={sideOffset} />
+					<span data-uix-control-label>sideOffset <span data-uix-control-hint>{sideOffset === undefined ? 'auto' : sideOffset + 'px'}</span></span>
+					<input type="range" min="-16" max="24" step="1" value={sideOffset ?? 0} oninput={(e) => (sideOffset = e.currentTarget.valueAsNumber)} />
 				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>align</span>

web/routes/uix/components/dropdown-menu/+page.svelte

@@ -16,7 +16,7 @@
 	let accessibleWhenDisabled = $state(true);
 	// Soma · Content
 	let side = $state<'top' | 'right' | 'bottom' | 'left'>('bottom');
-	let sideOffset = $state(4);
+	let sideOffset = $state<number | undefined>(undefined);
 	let align = $state<'start' | 'center' | 'end'>('start');
 	let alignOffset = $state(0);
 	let avoidCollisions = $state(true);
@@ -113,7 +113,7 @@
 			`  <DropdownMenu.Trigger>${triggerLabel}</DropdownMenu.Trigger>`,
 			'  <DropdownMenu.Content',
 			side !== 'bottom' && `    side="${side}"`,
-			sideOffset !== 0 && `    sideOffset={${sideOffset}}`,
+			sideOffset !== undefined && `    sideOffset={${sideOffset}}`,
 			align !== 'start' && `    align="${align}"`,
 			alignOffset !== 0 && `    alignOffset={${alignOffset}}`,
 			!avoidCollisions && '    avoidCollisions={false}',
@@ -432,8 +432,8 @@
 					</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="24" step="1" bind:value={sideOffset} />
+					<span data-uix-control-label>sideOffset <span data-uix-control-hint>{sideOffset === undefined ? 'auto' : sideOffset + 'px'}</span></span>
+					<input type="range" min="0" max="24" step="1" value={sideOffset ?? 0} oninput={(e) => (sideOffset = e.currentTarget.valueAsNumber)} />
 				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>align</span>

web/routes/uix/components/select/+page.svelte

@@ -130,7 +130,7 @@
 			'  <Select.Trigger>',
 			'    <Select.Value placeholder="Choose a fruit" />',
 			'  </Select.Trigger>',
-			'  <Select.Content sideOffset={6}>',
+			'  <Select.Content>',
 			'    <Select.Viewport>',
 			'      <Select.Item value="apple" label="Apple">Apple</Select.Item>',
 			'    </Select.Viewport>',
@@ -161,7 +161,7 @@
 			'    <Select.Indicator />',
 			'  </Select.Trigger>',
 			'  <Select.Portal>',
-			'    <Select.Content sideOffset={6}>',
+			'    <Select.Content>',
 			'      <Select.Viewport>',
 			'        <Select.Item value="apple" label="Apple">',
 			'          <span>Apple</span>',
@@ -226,7 +226,7 @@
 					<Select.Indicator />
 				</Select.Trigger>
 				<Select.Portal>
-					<Select.Content sideOffset={6} preventScroll={false}>
+					<Select.Content preventScroll={false}>
 						<Select.Viewport>
 							{#each groups as group}
 								<Select.Group>