svelte-kit-vice/src/uix/eidos/components/image-adjustments

ImageAdjustments (eidos)

The styled, configured image-filter panel. Renders one labelled <Slider> row per adjustment from the adjustments prop — the consumer doesn't compose rows.

<script>
  import ImageAdjustments from '$uix/eidos/components/image-adjustments';
  let value = $state({});
  let filter = $state('none');
</script>

<ImageAdjustments bind:value onFilterChange={(f) => (filter = f)} />
<img src={src} style="filter: {filter}" />

Baseline

No Air baseline. ImageAdjustments is a new component (2026-06-10); there is no air/ predecessor. Designed fresh against the references below.

Comparativa

Capability	Untitled UI	Chakra	Radix	MUI	→ UIX
Filter-slider panel primitive	✅ (image-picker)	❌	❌	❌	✅
Live CSS filter output	⚠️ canvas	—	—	—	✅ string
Composes the lib's own Slider	✅	n/a	n/a	n/a	✅
Configurable adjustment set	fixed	—	—	—	✅ subset
Reusable outside an image picker	❌	—	—	—	✅ subcomponent
Sound / haptic on reset	❌	❌	❌	❌	✅ sema

Most libraries treat image filtering as app code, not a primitive. Untitled ships an adjustment-sliders block (the visual reference); UIX makes it a reusable subcomponent that emits a portable filter string and composes the framework's own Slider.

Props

ProviderProps (soma) + layout knobs:

Prop	Type	Default	Notes
value	ImageAdjustmentValues	{}	bindable per-adjustment values
onValueChange	(v) => void	—	full values record
onFilterChange	(filter) => void	—	recomputed CSS filter — the real output
adjustments	ImageAdjustmentKey[]	core 6	which adjustments + order
size	'sm' | 'md' | 'lg'	'md'	slider + row typography
showReset	boolean	true	render the reset control
disabled	boolean	false	disable sliders + reset

Decisiones

• Composition over reimplementation. Imports the framework <Slider> and renders one per row — never reinvents a slider.
• The filter string is the product. Soma owns the value→CSS-filter math; the consumer applies the streamed string to any surface.
• ItemValue is a plain <span>, not a live region. The Slider thumb already announces aria-valuenow; a live region would double-announce.
• The hue rainbow track is a recipe token (--image-adjustments-hue-track), not raw CSS — keeps the literal rainbow out of the component CSS (raw-color contract) and makes it themeable.
• temperature is a CSS approximation (warm→sepia, cool→hue-rotate+saturate); there is no native white-balance primitive.

Recipe tokens

Public, themeable — --image-adjustments-*:

Token	Default
gap / row-gap	space-3 / space-1.5
label-*	content-secondary · sm · medium
value-*	content-tertiary · xs · mono (tabular)
reset-*	space-2 · content-secondary · xs
hue-track	the rainbow gradient

eidos-lint image-adjustments → invalid 0. CSS imported from the wrapper (code-split) — intentionally NOT in eidos/index.css.

Gaps

Gap	Disposition	Notes
highlights / shadows tone curves	diferir	Need canvas / SVG feComponentTransfer; CSS filter can't express tone curves.
Per-adjustment reset	descartar	One global reset matches the reference; per-row reset adds clutter.
temperature exact white-balance	diferir	CSS approximation today; a true Kelvin curve needs canvas.
WAI-ARIA APG pattern	diferir	A labelled group of APG sliders; no single composite pattern.