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

Eidos GradientBuilder

The visual layer over the headless GradientBuilder (soma). A framed editor card that composes the framework's existing components — never re-implementing a primitive: the embedded ColorPicker (the selected stop's color, inline), Slider (the angle), ToggleGroup (the kind), Button (add stop). Soma owns the state machine + the keyboard-accessible stops; eidos positions, paints and frames.

Surface

<GradientBuilder bind:value size="md" variant="surface" />

With no children, the Provider renders the full default editor: Preview → Track → (KindSwitch + AddStop) → AngleDial → StopColor. Compose the parts explicitly to customise the layout:

<GradientBuilder bind:value>
	<GradientBuilder.Preview />
	<GradientBuilder.Track />
	<GradientBuilder.KindSwitch />
	<GradientBuilder.AngleDial />
	<GradientBuilder.StopColor />
	<GradientBuilder.AddStop />
</GradientBuilder>

Parts

Part	Composes	Notes
Provider	soma Provider	The framed card. Sets a size/variant visual context.
Preview	—	Decorative live gradient bar (checker behind for alpha).
Track	soma Track	Paints a left→right ramp of the live stops; hosts the Stops.
Stop	soma Stop	One handle, positioned left:% and filled with the stop color.
StopColor	ColorPicker	Inline Area + hue/alpha sliders + hex, bound to the selected stop.
AngleDial	Slider	0–360° with a label + degree readout (linear / conic only).
KindSwitch	ToggleGroup	linear / radial / conic.
AddStop	Button + Plus	Adds a stop at 0.5.

Props

Prop	Type	Default	Description
value	Gradient	2-stop	The gradient being edited. Bindable.
size	'sm' | 'md' | 'lg'	'md'	Editor + child control size.
variant	'surface' | 'outline' | 'ghost'	'surface'	The card framing.
disabled	boolean	false	Disables all editing.

Stop ↔ ColorPicker bridge

stop-color.ts maps StopColor ↔ ColorValue: a css / oklch stop seeds the picker; the picked color writes back a css hex stop. Role stops still RENDER (via stopColorToCss); editing one through the picker re-bakes it to a literal. The picker is inline (Area + sliders, no nested popover) so editing the selected stop reads as one surface. The seed effect tracks only selectedIndex (untracking the color) so editing the current stop doesn't fight the picker.

Recipe

Self-contained --_gradient-builder-* tokens (gradient-builder is on the active dev track, not yet registered in recipes/base.ts). The stop handle centers with the translate property (not transform) so a sema press-squeeze can't fight the centering. Selectors target only morfo-promised attrs + the eidos-only composition wrappers stamped by the wrappers.

Notes

• No color prop — GradientBuilder paints the user's gradient, not a palette role. The demo's palette picker is therefore absent by design.
• Demo: web/routes/uix/components/gradient-builder/+page.svelte.