svelte-kit-vice/web/routes/temas/untitled-ui/OverlaysIsland.svelte

<script lang="ts">
	/**
	 * Isla cliente: secciones con componentes que portalean su contenido a
	 * `<body>` (popover, dialog, dropdown, menubar, context-menu, tooltip).
	 *
	 * El SSR de esos portales rompe la hidratación de toda la página (mueven
	 * nodos a `<body>` y desincronizan el cursor de hidratación de Svelte).
	 * Por eso se importan SOLO desde aquí y este componente se carga con
	 * `import()` dinámico tras `onMount` (ver `+page.svelte`): nunca entra en
	 * el SSR ni en la hidratación inicial, y monta limpio en cliente — con el
	 * contexto del layout (ActiveUix / Soma / Eidos / events) disponible.
	 */
	import Button from '$uix/eidos/components/button'
	import Popover from '$uix/eidos/components/popover'
	import Dialog from '$uix/eidos/components/dialog'
	import DropdownMenu from '$uix/eidos/components/dropdown-menu'
	import ContextMenu from '$uix/eidos/components/context-menu'
	import Menubar from '$uix/eidos/components/menubar'
	import Tooltip from '$uix/eidos/components/tooltip'

	let menuNotifications = $state(true)
	let menuTheme = $state('system')
	let menubarValue = $state<string | undefined>(undefined)
</script>

<!-- ═══ Overlays ═══════════════════════════════════════════════════ -->
<section data-temas-section>
	<div data-temas-section-head>
		<h2>Overlays</h2>
		<p>Popover y dialog — paneles portaleados con la superficie, borde y sombra del tema.</p>
	</div>
	<div data-temas-panel data-temas-cluster>
		<Popover>
			<Popover.Trigger>Abrir popover</Popover.Trigger>
			<Popover.Portal>
				<Popover.Content side="bottom" align="start" sideOffset={8}>
					<Popover.Arrow />
					<Popover.Title>Dimensiones</Popover.Title>
					<Popover.Description>Ajusta el ancho del panel lateral.</Popover.Description>
					<div data-temas-cluster style="margin-block-start: var(--space-3)">
						<Button size="sm">Aplicar</Button>
						<Popover.Close>Cerrar</Popover.Close>
					</div>
				</Popover.Content>
			</Popover.Portal>
		</Popover>

		<Dialog>
			<Dialog.Trigger>Abrir dialog</Dialog.Trigger>
			<Dialog.Portal>
				<Dialog.Overlay />
				<Dialog.Content>
					<Dialog.Header>
						<Dialog.Title>¿Eliminar proyecto?</Dialog.Title>
						<Dialog.Description>
							Esta acción es permanente y no se puede deshacer.
						</Dialog.Description>
					</Dialog.Header>
					<Dialog.Footer>
						<Dialog.Close>Cancelar</Dialog.Close>
						<Button intent="threat">Eliminar</Button>
					</Dialog.Footer>
				</Dialog.Content>
			</Dialog.Portal>
		</Dialog>
	</div>
</section>

<!-- ═══ Menús ══════════════════════════════════════════════════════ -->
<section data-temas-section>
	<div data-temas-section-head>
		<h2>Menús</h2>
		<p>Dropdown, menubar, context menu y tooltip — todos portaleados, con la sombra del tema.</p>
	</div>
	<div data-temas-panel data-temas-stack>
		<p data-temas-subhead>Menubar</p>
		<Menubar bind:value={menubarValue}>
			<Menubar.Menu value="file">
				<Menubar.Trigger>Archivo</Menubar.Trigger>
				<Menubar.Portal>
					<Menubar.Content>
						<Menubar.Item>Nuevo documento</Menubar.Item>
						<Menubar.Item>Abrir…</Menubar.Item>
						<Menubar.Separator />
						<Menubar.Item>Guardar</Menubar.Item>
					</Menubar.Content>
				</Menubar.Portal>
			</Menubar.Menu>
			<Menubar.Menu value="edit">
				<Menubar.Trigger>Editar</Menubar.Trigger>
				<Menubar.Portal>
					<Menubar.Content>
						<Menubar.Item>Deshacer</Menubar.Item>
						<Menubar.Item>Rehacer</Menubar.Item>
					</Menubar.Content>
				</Menubar.Portal>
			</Menubar.Menu>
			<Menubar.Menu value="view">
				<Menubar.Trigger>Ver</Menubar.Trigger>
				<Menubar.Portal>
					<Menubar.Content>
						<Menubar.CheckboxItem bind:checked={menuNotifications}>
							Mostrar barra lateral
						</Menubar.CheckboxItem>
					</Menubar.Content>
				</Menubar.Portal>
			</Menubar.Menu>
		</Menubar>

		<div data-temas-cluster>
			<DropdownMenu>
				<DropdownMenu.Trigger variant="outline">Opciones</DropdownMenu.Trigger>
				<DropdownMenu.Content side="bottom" align="start" sideOffset={6}>
					<DropdownMenu.Group>
						<DropdownMenu.GroupHeading>Cuenta</DropdownMenu.GroupHeading>
						<DropdownMenu.Item>Perfil</DropdownMenu.Item>
						<DropdownMenu.Item>Facturación</DropdownMenu.Item>
					</DropdownMenu.Group>
					<DropdownMenu.Separator />
					<DropdownMenu.CheckboxItem bind:checked={menuNotifications}>
						Notificaciones
					</DropdownMenu.CheckboxItem>
					<DropdownMenu.Separator />
					<DropdownMenu.RadioGroup bind:value={menuTheme}>
						<DropdownMenu.RadioItem value="light">Claro</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem value="dark">Oscuro</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem value="system">Sistema</DropdownMenu.RadioItem>
					</DropdownMenu.RadioGroup>
				</DropdownMenu.Content>
			</DropdownMenu>

			<Tooltip.Group delayDuration={250}>
				<Tooltip>
					<Tooltip.Trigger>Pasa el ratón</Tooltip.Trigger>
					<Tooltip.Portal>
						<Tooltip.Content>
							<Tooltip.Arrow />
							Tooltip con la superficie y la sombra del tema
						</Tooltip.Content>
					</Tooltip.Portal>
				</Tooltip>
			</Tooltip.Group>
		</div>

		<ContextMenu>
			<ContextMenu.Trigger>
				<div data-temas-ctx-target>Click derecho aquí</div>
			</ContextMenu.Trigger>
			<ContextMenu.Content>
				<ContextMenu.Item>Copiar</ContextMenu.Item>
				<ContextMenu.Item>Pegar</ContextMenu.Item>
				<ContextMenu.Separator />
				<ContextMenu.Item>Duplicar</ContextMenu.Item>
			</ContextMenu.Content>
		</ContextMenu>
	</div>
</section>