Add src/ui/calendar.md with full documentation for both calendar
namespaces (picker props, event grid, ticker, agenda, event data
format, date utilities, CSS classes).
Add a minimal markdown-to-hiccup renderer (ui.markdown) that handles
headings, fenced code blocks, tables, lists, inline code, and bold.
Styled with ui/markdown.css using theme tokens.
Each dev target renders the docs inline on the Calendar page:
- Hiccup: slurps the .md file at render time
- Replicant: embeds via compile-time macro (ui.macros/inline-file)
- Squint: fetches from /calendar.md served by Vite
Also fixes calendar event grid day cells to be square (aspect-ratio: 1
with overflow: hidden instead of min-height).
Add date picker and event calendar components inspired by shadcn/radix
Calendar and org-mode-agenda-cli.
Components:
- ui.calendar: Month grid date picker with navigation, today/selected
highlighting, outside-month dimming. Pure date math utilities
(days-in-month, day-of-week, calendar-days, etc.)
- ui.calendar-events: Event-aware grid with colored pills, horizontal
day ticker strip with dot indicators, and agenda list view with
grouped events by day
CSS: Token-based styling with dark mode support for event color
variants (accent/danger/success/warning). Responsive breakpoints.
All three targets supported (squint/cljs/clj). Dev pages show calendar
on its own page with interactive demos (date selection, month nav,
event grid, ticker, agenda list).
Tests: 27 new assertions covering date math, class generation,
component structure, event filtering/sorting.
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`.
Horizontal and vertical separator (divider) with CSS classes, ARIA
role="none", and data-orientation attribute. Includes dark mode support,
unit tests, and demos in all three dev targets.
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.
Replace hardcoded hex color tokens with algorithmic color scales generated
from HSL parameters. Each scale is defined by hue, saturation, and
lightness steps in tokens.edn, then converted to hex via jon/color-tools.
Color scales (gray, accent, danger, success, warning) generate 11 stops
each (50–950) into :root. Semantic tokens (bg-0, fg-0, accent, etc.)
reference scale variables with var(--gray-50), var(--accent-500), etc.
Dark theme switches which stop each semantic token points to.
Gray scale uses hue 240 with tapered saturation for a purplish tint
matching the activity-tracker aesthetic. Accent is vivid purple (hue 252).
Border radii bumped to 6/10/16px for a rounder feel.
To shift the entire palette (e.g. warm gray), change hue/saturation in
tokens.edn and run `bb build-theme`.
Replace the pattern of reading shadow-cljs.edn, mutating it with
pr-str (which destroyed formatting), and writing it back. Instead,
use shadow-cljs's built-in `#shadow/env` reader tag to read the port
from the SHADOW_HTTP_PORT environment variable at startup, with a
default of 3001.
Both `dev-replicant` and `dev-all` tasks now pass the port via env var
instead of file mutation. This eliminates the dirty-file problem where
the rewritten single-line config would show up as an unrelated change.
Adds a general-purpose icon system (ui.icon) with inline SVG rendering:
- 50+ icons from the Lucide icon set (navigation, actions, objects, UI,
status, dev/technical categories)
- Size variants: sm (--size-4), md (--size-5), lg (--size-6), xl (--size-8)
- Pure data approach: icon paths stored as hiccup vectors, rendered into
SVG with stroke="currentColor" so icons inherit text color
- API: (icon/icon {:icon-name :home :size :lg :class "custom"})
Integrates icons into the sidebar component:
- sidebar-menu-item now accepts :icon-name prop
- Renders icon in a .sidebar-menu-item-icon wrapper at :sm size
All three dev targets updated with icon gallery demo and sidebar icons.
The `bash -c 'cd dir && cmd1 & cmd2'` pattern splits into two
command lists — cmd2 runs in the original cwd, not after the cd.
Fix by repeating the cd after the `&` in the tmux pane command,
and using `exec` in the standalone dev-squint task.
`bb dev-all 4000` starts all servers offset from base port:
- Replicant: base+1 (4001)
- Squint: base+2 (4002)
- Hiccup: base+3 (4003)
Default base port remains 3000.
Individual tasks also accept PORT env var:
PORT=4003 bb dev-hiccup
For replicant, shadow-cljs.edn is rewritten with the target port
before launching since shadow-cljs has no CLI port override.
Add `ensure-npm` task that runs `npm install` in dev/replicant and
dev/squint when their node_modules directories are missing. Wire it
as a dependency for dev-replicant, dev-squint, and dev-all.
When :href is provided, the button renders as <a> instead of <button>,
enabling navigation links with full button styling.
New :link variant renders as a minimal text link (underlined, accent
color, no background/padding) — works as both <button> and <a>.
CSS includes reset styles for a.btn (removes default link decoration)
and preserves underline for a.btn-link.
Components (.cljc + .css + tests):
- Alert (success/warning/danger/info variants)
- Badge (primary/secondary/outline/success/warning/danger)
- Card (card/card-header/card-body/card-footer)
- Accordion (collapsible with open/closed state)
- Table (headers/rows, striped/bordered variants)
- Dialog (modal with header/body/footer sections)
- Breadcrumb (nav with active item)
- Pagination (current/total with prev/next)
- Progress (value bar with color variants)
- Spinner (sm/md/lg sizes)
- Skeleton (line/box/circle/heading placeholders)
- Switch (toggle with checked/disabled states)
- Tooltip (hover text via data-tooltip attr)
CSS-only additions:
- Form elements (inputs, selects, checkboxes, radios, range, groups)
- Grid (12-column system with offsets, responsive)
- Utilities (flex, spacing, alignment, sr-only)
Also adds warning/fg-on-warning tokens to light and dark themes.
All 3 dev targets updated with full component showcase.
40 tests, 213 assertions, all passing.
