Two-part solution for automatic CSS updates during development:
1. `bb watch-theme` — polls src/ui/*.css and tokens.edn every 500ms,
rebuilds dist/theme.css and copies to dev targets on change.
2. `dev/css-live-reload.js` — browser-side script that polls /theme.css
and hot-swaps the stylesheet without a full page reload (no FOUC).
The watcher runs automatically in the hiccup tmux pane when using
`bb dev-all`. It can also be run standalone with `bb watch-theme`.
The live-reload script is included in all three dev targets (hiccup,
replicant, squint) and copied by `bb build-theme`.
Floating panel in bottom-right of all dev targets lets you:
- Switch presets (Purple, Blue, Neutral, Warm, Rose, Emerald)
- Adjust gray hue/saturation and accent hue/saturation with sliders
- Preview color swatches in real-time
- Copy EDN config to paste into tokens.edn
State persists in localStorage. Panel collapses to a small toggle button.
Hiccup handler changed to use #'handler var for hot-reload.
Each target reads the theme from ?theme=dark|light on load and applies
it to data-theme before first paint. A MutationObserver syncs theme
changes back to the URL via replaceState, and a click handler appends
?theme= to cross-port navigation links automatically.
The outer iframe shell (dev/index.html) uses postMessage to track theme
changes from iframes and passes the param when switching tabs.
For hiccup, the server also reads ?theme= and sets data-theme on the
<html> element server-side to prevent any flash of wrong theme.
Restructures all three dev targets (hiccup, replicant, squint) to use
the sidebar component as the actual app shell. The sidebar navigates
between three pages:
- Components — all UI component demos
- Icons — categorized gallery with all 50+ icons and size variants
- Sidebar — embedded sidebar example with dashboard layout
The sidebar includes a Targets section that links between all three dev
servers, with ports derived dynamically from the current port so they
stay correct when using a custom base port (bb dev-all 5000).
Port scheme: replicant=base+1, squint=base+2, hiccup=base+3.
Move font-family, background, color, margin, and transition from
duplicated inline <style> blocks in each dev target into the CSS
generator (base-css). Dev pages now only set page-specific padding.
Also fixes hiccup target rendering the wrong font due to hiccup2
HTML-escaping quotes inside <style> tags, and adds missing <!DOCTYPE>.
