fix(emoji-picker): panel unico — Command headless en vez del root eidos

El `<Command>` eidos estampa data-depth="overlay" + data-list-surface, que
renderizaba su propio panel de paleta ⌘K (bg + borde + sombra + radio,
identico al del Popover) ANIDADO dentro del panel del picker — un panel dentro
de otro, evidente en modo oscuro. Ahora el contexto de busqueda viene del
Command.Provider HEADLESS de soma (sin chrome); Input/Empty siguen siendo las
sub-partes eidos estiladas.

Verificado en claro Y oscuro con capturas: [data-command] transparente
(0 borde, sin sombra) en ambos temas, un solo panel; busqueda 'rocket'->🚀 OK;
teclado/pick/tonos OK; check baseline 76.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
alpha-0.1-sec-dom
dev 3 months ago
parent d59b8af9aa
commit 0409f52282

@ -29,6 +29,12 @@ No Air baseline — `emoji-picker` is a new component (chat block v2).
## Composition + specificity
- **No nested panel.** The search context comes from soma's **headless**
`Command.Provider` — NOT the eidos `<Command>` root, which stamps
`data-depth="overlay"` + `data-list-surface` and would render its own elevated
⌘K panel INSIDE the Popover (a visible box-in-a-box, obvious in dark mode).
The headless provider gives the context + behavior with no chrome; the eidos
`Command.Input` / `Command.Empty` are the styled sub-parts.
- The grid double-registers `Command.List`, and the cells double-register
`Command.Item`. The grid layout is written with **two-level own selectors**
(`[data-emoji-picker-content] [data-emoji-picker-grid]`) so it wins

@ -1,6 +1,10 @@
<script lang="ts">
import PopoverContent from '../popover/popover-content.svelte';
import { Portal } from '$soma/components/internal';
// The search CONTEXT comes from soma's headless Command.Provider (no panel
// chrome), so the palette does NOT nest an elevated box inside the Popover.
// The eidos Command.Input / Command.Empty are the styled sub-parts.
import * as CommandSoma from '$soma/components/command';
import { Command } from '$uix/eidos/components/command';
import { ToggleGroup } from '$uix/eidos/components/toggle-group';
import * as EmojiPickerSoma from '$soma/components/emoji-picker';
@ -45,7 +49,7 @@
<Portal>
<PopoverContent {align} {side} {sideOffset} {collisionPadding}>
<EmojiPickerSoma.Content>
<Command
<CommandSoma.Provider
search={provider.search}
onSearchChange={(v) => provider.setSearch(v)}
columns={provider.opts.columns.current}
@ -115,7 +119,7 @@
{/if}
</div>
{/snippet}
</Command>
</CommandSoma.Provider>
</EmojiPickerSoma.Content>
</PopoverContent>
</Portal>

Loading…
Cancel
Save

Powered by TurnKey Linux.