#+TITLE: Panel & Waybar Design Prototypes
#+AUTHOR: Craig Jennings

Self-contained HTML/CSS design prototypes for the instrument-console panel
family and the waybar redesign. Each opens standalone in a browser (no external
assets). These are the normative visual references the specs in [[file:../specs/][docs/specs/]]
point at.

* Prototypes

- [[file:2026-07-03-instrument-console-panels-prototype.html][2026-07-03-instrument-console-panels-prototype.html]] — the net + bluetooth
  pair; the approved faceplate design that shipped. Normative reference for
  [[file:../specs/2026-07-03-instrument-console-panels-spec.org][the instrument-console spec]].
- [[file:2026-07-03-net-panel-rescan-prototype.html][2026-07-03-net-panel-rescan-prototype.html]] — the manual rescan/scan ⟳
  affordance for the NETWORKS/NEARBY headers (busy-style throbber + list fade).
- [[file:2026-07-03-sound-panel-prototype.html][2026-07-03-sound-panel-prototype.html]] — the audio/pulsemixer console; layout
  reference for [[file:../specs/2026-07-03-audio-panel-spec.org][the audio-panel spec]].
- [[file:panel-widget-gallery.html][panel-widget-gallery.html]] — the shared instrument-console
  widget kit (lamps, engraved sections, console keys, needle gauges). The
  living catalogue: every widget here is the visual + behavioral spec for
  its reusable-component ports.

* Design tokens (single source, three targets)

[[file:tokens.json][tokens.json]] is the source of truth for the design tokens (palette, amber
family, glows, pulse rate). [[file:gen_tokens.py][gen_tokens.py]] regenerates all three targets
(=python3 gen_tokens.py=):

- the =:root= block inside the gallery HTML (web CSS custom properties)
- [[file:tokens-waybar.css][tokens-waybar.css]] — GTK =@define-color= declarations for the waybar panels
- [[file:tokens.el][tokens.el]] — an elisp alist for svg.el renderers

[[file:gallery-widget.el][gallery-widget.el]] is the Emacs renderer (proof widget: the needle gauge,
gallery card 10) — it reads tokens.el and emits the widget as SVG via
svg.el, so the same look renders inside Emacs. Tests:
=tests/gallery-tokens/= (generator, unittest) and =tests/gallery-widgets/=
(renderer, ERT), both in =make test-unit=.
- [[file:2026-07-03-waybar-redesign-prototype.html][2026-07-03-waybar-redesign-prototype.html]] — three directions for sprucing up
  waybar in the dupre instrument-console aesthetic (future work).