svelte-kit-vice/src/uix/eidos/components/gradient-picker

Eidos GradientPicker

Fecha de revisión: 2026-07-10 (dossier S9 — graduado de ACTIVE_DEV_TRACK).

The visual layer over the headless GradientPicker — a field-shaped trigger carrying a live gradient chip that opens the GradientBuilder in a Popover, with a Clear / Cancel / Save footer. Identity wrapper over the composed Popover.

Baseline

Sin baseline air y sin análogo publicado: los editores de gradiente del campo viven DENTRO de herramientas de diseño (el fill-popover de Figma), no como form control con valor comprometido. La forma sigue dos patrones internos ya canónicos: la identidad-sobre-Popover §2 (el Popover ES el diálogo — mismo criterio que date-picker/ntp; apg: dialog-modal) y el host transaccional del Picker genérico (footer Clear/Cancel/Save compartido vía PickerShell — gradient-picker fue reconstruido sobre él en f5eb8acb y es, con ntp, uno de sus dos consumidores reales).

Surface

<GradientPicker bind:value size="md" variant="surface">
	<GradientPicker.Trigger />
	<GradientPicker.Portal>
		<GradientPicker.Content />
	</GradientPicker.Portal>
</GradientPicker>

<GradientPicker.Content /> renders a default body — the GradientBuilder editor

• the Clear / Cancel / Save footer — so it works out of the box. Pass children to the Content to customise it.

Parts

Part	Composes	Notes
Provider	soma Provider	Sets a size/variant visual context.
Trigger	soma Trigger + Popover	Field-shaped pill with the gradient chip.
ValueSwatch	soma ValueSwatch	Standalone gradient chip (paints --gp-current-gradient).
Content	Popover + PickerShell	The floating editor: GradientBuilder + footer.
Footer / Clear / Cancel / Close	PickerShell	The shared footer actions (read pickerShellContext).
Portal / Anchor / Overlay / Arrow	Popover	Re-exports.

Props

Prop	Type	Default	Description
value	Gradient	2-stop	The committed gradient. Bindable.
open	boolean	false	Popover open state. Bindable.
mode	'inline' | 'modal'	'inline'	Footer layout (Clear/Cancel vs Cancel/Save).
size	'sm' | 'md' | 'lg'	'md'	Trigger / popover / editor size.
variant	'surface' | 'outline' | 'ghost'	'surface'	Trigger framing.
disabled	boolean	false	Disables the trigger.

The value bridge (the one subtle bit)

Content renders <GradientBuilder bind:value={draft} onValueCommit=…>: the embedded builder edits a local draft ($state); its onValueCommit pushes settled values to provider.setValue; an $effect (if (v !== draft) draft = v) flows external resets (Cancel / Clear) back. Commit-only push + the ref guard = no loop.

Recipe

Self-contained (graduated from the dev track 2026-07-10; private tokens by choice — the chrome is mostly the composed Popover + PickerShell + GradientBuilder recipes). The trigger is a field-shaped pill; the chip + standalone swatch paint --gp-current-gradient (stamped inline by soma).

Comparativa

Capacidad	UIX	Figma (fill popover)	Libs web de color con tab gradiente
Form control con valor comprometido (bind:value)	✓	No (edición in-place)	Parcial (sin transacción)
Footer transaccional (Clear/Cancel/Save + revert)	✓ (PickerShell)	No	No
Editor accesible por teclado dentro	✓ (builder apg slider)	No	No
Chip de valor vivo en el trigger	✓ (--gp-current-gradient)	✓	Parcial
Overlay delegado al sistema	✓ (Popover §2)	Propio	Propio

Referencias: ../gradient-builder/README.md (el editor y su research) · patrón §2 en ../date-picker/.

Decisiones

• Identity wrapper over the composed Popover (§2): este morfo no declara semántica de diálogo (role/trap/open-close) — pertenece al Popover; el footer es chrome compartido de picker-shell.
• Eventos propios = el desenlace transaccional: commit-reset (Clear) / commit-save (Save) / commit-remove, con pack propio; los eventos de EDICIÓN suenan por el contrato del GradientBuilder embebido. Dos voces, dos dueños.
• El value bridge es commit-only + ref guard (sección arriba): el builder edita un draft local; solo los valores asentados suben al provider; los resets externos bajan por $effect con guard — sin bucle.
• Sin prop color (como el builder).

Gaps

Gap	Disposición	Detalle
Persistencia de presets guardados	descartar (nivel componente)	Como ColorPicker: los presets/save son del CONSUMIDOR; el panel de presets ya compone.
Migración a PickerProvider<TValue> (deferValue genérico)	diferir	Task #31 de la memoria — pasada conjunta de los pickers POST audit-fix.
Demo v2 (D-1.5/D-3.1 de la máquina)	implementar	Pase de demos de esta iniciativa (ver sesión S9).

Notes

• Demo: web/routes/uix/components/gradient-picker/+page.svelte.