Problem
In the editor's properties panel, the widget Color field is a plain text input (PropertiesPanel.tsx:167) — the user has to know and type a CSS colour string (e.g. #1e3a8a) to set a button background. There's no visual way to pick a colour, so choosing one requires input the author has to source elsewhere. Compare the Icon field, which got a searchable visual picker in #102.
What to build
Add a visual colour picker to the Color field so a background can be chosen by sight, not typed.
- A colour swatch / picker alongside the field — at minimum a native
<input type="color"> swatch, ideally with a small palette of sensible presets for one-tap selection.
- Keep the text input as the authoritative value and escape hatch: the schema accepts any CSS colour string (
#1e3a8a, rebeccapurple, hsl(...) — see layouts.py::Widget.color), which a bare type="color" (hex-only) can't represent. The picker and the text field stay in sync; typing a non-hex value the swatch can't show should not be clobbered.
- Clearing the colour sets
color back to null (current behaviour — updateField(widget, "color", e.target.value || null)), so an unset widget stays unset in the YAML.
- The live canvas cell already reflects
widget.color (EditorCanvas.tsx:139); the picker should drive the same round-trip.
Acceptance criteria
Notes
Small, self-contained UI enhancement to the existing properties panel (#103). Colour lives at Widget.color in daemon/deckd/layouts.py; the field editor is in client/src/PropertiesPanel.tsx.
Problem
In the editor's properties panel, the widget Color field is a plain text input (
PropertiesPanel.tsx:167) — the user has to know and type a CSS colour string (e.g.#1e3a8a) to set a button background. There's no visual way to pick a colour, so choosing one requires input the author has to source elsewhere. Compare the Icon field, which got a searchable visual picker in #102.What to build
Add a visual colour picker to the Color field so a background can be chosen by sight, not typed.
<input type="color">swatch, ideally with a small palette of sensible presets for one-tap selection.#1e3a8a,rebeccapurple,hsl(...)— seelayouts.py::Widget.color), which a baretype="color"(hex-only) can't represent. The picker and the text field stay in sync; typing a non-hex value the swatch can't show should not be clobbered.colorback tonull(current behaviour —updateField(widget, "color", e.target.value || null)), so an unset widget stays unset in the YAML.widget.color(EditorCanvas.tsx:139); the picker should drive the same round-trip.Acceptance criteria
hsl(...)) are preserved, not overwritten by the swatch.colortonulland the widget renders with no background override.coloris valid (buttons; ignored on jogstrips), matching the current field's visibility.Notes
Small, self-contained UI enhancement to the existing properties panel (#103). Colour lives at
Widget.colorindaemon/deckd/layouts.py; the field editor is inclient/src/PropertiesPanel.tsx.