Phase 1 + Phase 2: Drop external Bootstrap dependency, add opt-in Modern theme

.gitignore

@@ -15,4 +15,14 @@ misc/
 /.shadow-cljs/
 /.clj-kondo/
 /.lsp/
-.*
+.*
+
+# Gas City
+.beads/*
+!.beads/config.yaml
+!.beads/metadata.json
+
+# Beads / Dolt files (added by bd init)
+.dolt/
+*.db
+.beads-credential-key

AGENTS.md

@@ -0,0 +1,84 @@
+# Agent Instructions
+
+This project uses **bd** (beads) for issue tracking. Run `bd prime` for full workflow context.
+
+## Quick Reference
+
+```bash
+bd ready              # Find available work
+bd show <id>          # View issue details
+bd update <id> --claim  # Claim work atomically
+bd close <id>         # Complete work
+bd dolt push          # Push beads data to remote
+```
+
+## Non-Interactive Shell Commands
+
+**ALWAYS use non-interactive flags** with file operations to avoid hanging on confirmation prompts.
+
+Shell commands like `cp`, `mv`, and `rm` may be aliased to include `-i` (interactive) mode on some systems, causing the agent to hang indefinitely waiting for y/n input.
+
+**Use these forms instead:**
+```bash
+# Force overwrite without prompting
+cp -f source dest           # NOT: cp source dest
+mv -f source dest           # NOT: mv source dest
+rm -f file                  # NOT: rm file
+
+# For recursive operations
+rm -rf directory            # NOT: rm -r directory
+cp -rf source dest          # NOT: cp -r source dest
+```
+
+**Other commands that may prompt:**
+- `scp` - use `-o BatchMode=yes` for non-interactive
+- `ssh` - use `-o BatchMode=yes` to fail instead of prompting
+- `apt-get` - use `-y` flag
+- `brew` - use `HOMEBREW_NO_AUTO_UPDATE=1` env var
+
+<!-- BEGIN BEADS INTEGRATION v:1 profile:minimal hash:ca08a54f -->
+## Beads Issue Tracker
+
+This project uses **bd (beads)** for issue tracking. Run `bd prime` to see full workflow context and commands.
+
+### Quick Reference
+
+```bash
+bd ready              # Find available work
+bd show <id>          # View issue details
+bd update <id> --claim  # Claim work
+bd close <id>         # Complete work
+```
+
+### Rules
+
+- Use `bd` for ALL task tracking — do NOT use TodoWrite, TaskCreate, or markdown TODO lists
+- Run `bd prime` for detailed command reference and session close protocol
+- Use `bd remember` for persistent knowledge — do NOT use MEMORY.md files
+
+## Session Completion
+
+**When ending a work session**, you MUST complete ALL steps below. Work is NOT complete until `git push` succeeds.
+
+**MANDATORY WORKFLOW:**
+
+1. **File issues for remaining work** - Create issues for anything that needs follow-up
+2. **Run quality gates** (if code changed) - Tests, linters, builds
+3. **Update issue status** - Close finished work, update in-progress items
+4. **PUSH TO REMOTE** - This is MANDATORY:
+   ```bash
+   git pull --rebase
+   bd dolt push
+   git push
+   git status  # MUST show "up to date with origin"
+   ```
+5. **Clean up** - Clear stashes, prune remote branches
+6. **Verify** - All changes committed AND pushed
+7. **Hand off** - Provide context for next session
+
+**CRITICAL RULES:**
+- Work is NOT complete until `git push` succeeds
+- NEVER stop before pushing - that leaves work stranded locally
+- NEVER say "ready to push when you are" - YOU must push
+- If push fails, resolve and retry until it succeeds
+<!-- END BEADS INTEGRATION -->

CHANGELOG.md

@@ -1,3 +1,22 @@
+## 2.30.0 (Unreleased)
+
+#### Changed
+- **Bootstrap is no longer required as an external dependency.** `re-com.css` now vendors the Bootstrap 3.3.5 rules that re-com depends on, so consumers can drop the `<link rel="stylesheet" href=".../bootstrap.css">` from their `index.html`. The classic re-com look is preserved verbatim — no visual changes for consumers. Apps that load Bootstrap separately (for their own use) continue to work; load it before `re-com.css` so re-com's overrides take precedence.
+
+#### Added
+- `re-com.theme.modern` — opt-in modern visual theme. Bootstrap-5-flavoured palette, 4px linear spacing scale, larger border radii, refined shadows and focus rings. Typography (font-family, sizes, weights, line-heights) is intentionally inherited from the classic look so apps adopting modern incrementally don't see text re-flow. Activate from app code with:
+  ```clojure
+  (re-com.core/reg-theme re-com.theme.modern/theme)
+  ```
+  Component coverage: button, alert-box, progress-bar, input-text, checkbox, radio-button, horizontal-tabs, pill-tabs, bar-tabs, dropdown, selection-list, modal-panel, hyperlink, close-button, popover, datepicker, daterange, slider, input-time, h-split, v-split. Layout components (`h-box`, `v-box`, `box`, `gap`, `line`, `scroller`, `border`) and typography components (`title`, `p`, `label`) are unaffected by Modern — they inherit the classic look (typography is preserved deliberately so apps adopting Modern incrementally don't see text re-flow). Two intentional carve-outs: `popover-tooltip` retains its classic dark-on-light look (tooltips are a distinct visual element), and Bootstrap-variant button classes (`btn-primary`, `btn-success`, `btn-info`, `btn-warning`, `btn-danger`, `btn-link`) are not restyled so users still get the colour they asked for.
+- Demo app: theme picker in the title bar to switch between Classic and Modern at runtime, using a wrapping theme function that derefs an atom inside the render path so switching is reactive without remounting (per the documented `theme/comp` reactivity pattern).
+
+#### Migration
+- Consumers who only loaded Bootstrap because re-com required it can remove the Bootstrap stylesheet `<link>`.
+- Consumers who passed raw Bootstrap class names like `:class "btn-primary"` to re-com components: those classes still resolve because the relevant rules are now in `re-com.css`.
+- Consumers with custom theme functions emitting Bootstrap class names (e.g. `(tu/class props "btn")`): unchanged, the classes are still styled.
+- **CSS load-order edge case**: if your app has its own stylesheet that overrides Bootstrap selectors (e.g. you customise `.btn` or `.popover` rules), make sure your stylesheet loads *after* `re-com.css` — previously you could rely on the load order `bootstrap.css` → `your-overrides.css` → `re-com.css`, but now the Bootstrap rules live inside `re-com.css`, so any user overrides need to come after it to win the cascade. Same applies if you keep loading `bootstrap.css` separately for non-re-com use.
+
 ## 2.29.4 (Unreleased)
 
 #### Added

CLAUDE.md

@@ -51,4 +51,51 @@ bb clean         # Clean compiled artifacts
 - **Reagent 1.1.0** - React wrapper for ClojureScript
 - **Bootstrap 3.3.5** - Base CSS framework
 - **Shadow-cljs** - Build tool with hot reloading
-- Desktop-focused, Chrome-optimized development
+- Desktop-focused, Chrome-optimized development
+
+<!-- BEGIN BEADS INTEGRATION v:1 profile:minimal hash:ca08a54f -->
+## Beads Issue Tracker
+
+This project uses **bd (beads)** for issue tracking. Run `bd prime` to see full workflow context and commands.
+
+### Quick Reference
+
+```bash
+bd ready              # Find available work
+bd show <id>          # View issue details
+bd update <id> --claim  # Claim work
+bd close <id>         # Complete work
+```
+
+### Rules
+
+- Use `bd` for ALL task tracking — do NOT use TodoWrite, TaskCreate, or markdown TODO lists
+- Run `bd prime` for detailed command reference and session close protocol
+- Use `bd remember` for persistent knowledge — do NOT use MEMORY.md files
+
+## Session Completion
+
+**When ending a work session**, you MUST complete ALL steps below. Work is NOT complete until `git push` succeeds.
+
+**MANDATORY WORKFLOW:**
+
+1. **File issues for remaining work** - Create issues for anything that needs follow-up
+2. **Run quality gates** (if code changed) - Tests, linters, builds
+3. **Update issue status** - Close finished work, update in-progress items
+4. **PUSH TO REMOTE** - This is MANDATORY:
+   ```bash
+   git pull --rebase
+   bd dolt push
+   git push
+   git status  # MUST show "up to date with origin"
+   ```
+5. **Clean up** - Clear stashes, prune remote branches
+6. **Verify** - All changes committed AND pushed
+7. **Hand off** - Provide context for next session
+
+**CRITICAL RULES:**
+- Work is NOT complete until `git push` succeeds
+- NEVER stop before pushing - that leaves work stranded locally
+- NEVER say "ready to push when you are" - YOU must push
+- If push fails, resolve and retry until it succeeds
+<!-- END BEADS INTEGRATION -->

README.md

@@ -133,18 +133,15 @@ https://github.com/day8/re-com/tree/master/run/resources/public/assets
 As far as your `index.html` is concerned, take inspiration from here:
 https://github.com/day8/re-com/tree/master/run/resources/public
 
-In particular, you'll need bootstrap (assumedly via a CDN):
-```html
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
-```
-
-And a reference to these two CSS files (make sure `re-com.css` appears after `bootstrap.css`):
+You'll need a reference to these two CSS files:
 
 ```html
 <link rel="stylesheet" href="assets/css/material-design-iconic-font.min.css">
 <link rel="stylesheet" href="assets/css/re-com.css">
 ```
 
+`re-com.css` now vendors the Bootstrap 3.3.5 rules that re-com depends on, so an external Bootstrap stylesheet is no longer required. If your app loads Bootstrap separately for its own reasons, that still works — load it before `re-com.css` so re-com's overrides take precedence.
+
 And a reference to the Roboto fonts (but this can be overridden relatively easily):
 
 ```html

demo/re_demo/customization.cljs

@@ -63,13 +63,17 @@
            [:li "Register a function that wraps the arguments of all hiccups everywhere "
             "(a global " [:code ":theme"] ")."]]]
          [rc/p {:style {:background-color "#eee" :padding 7}}
-          [:strong "Note"] ": Re-com has used "
+          [:strong "Note"] ": Re-com's classic look is built on "
           [:a {:href "https://bootstrapdocs.com/v3.3.5/docs/getting-started/"} "bootstrap 3.3.5"]
-          " as a design system. A complete implementation of our theme system will make bootstrap optional. "
-          "It should then be possible to plug in a different system, such as "
+          ", whose rules are now vendored into " [:code "re-com.css"]
+          " — your app no longer needs an external Bootstrap stylesheet. "
+          "An opt-in " [:a {:href "#/theme"} "modern theme"] " "
+          "(BS5-flavoured colours, spacing, shadows, focus rings) is also available. "
+          "Themes are pluggable, so other systems such as "
           [:a {:href "https://tailwindcss.com/"} "tailwind"]
           " or "
-          [:a {:href "https://github.com/thheller/shadow-css"} "shadow-css."]]]]
+          [:a {:href "https://github.com/thheller/shadow-css"} "shadow-css"]
+          " could be wrapped behind a " [:code ":theme"] " function in the same way."]]]
        [rc/box
         :align :center
         :child [:img {:src   "demo/architecture-LOD.jpg"

demo/re_demo/popovers.cljs

@@ -96,12 +96,12 @@
                    [:td border-style-nw (indent-text 1 "[:div]")]
                    [:td border-style-nw "rc-point-wrapper"]
                    [:td border-style (code-text ":point-wrapper")]
-                   [:td border-style "Wraps the anchor component and the popover-point (which the actual popover points to)."]]
+                   [:td border-style "Wraps the anchor component and the point (which the actual popover points to)."]]
                   [:tr
                    [:td border-style-nw (indent-text 2 (highlight-text ":anchor"))]
                    [:td border-style-nw "n/a"]
                    [:td border-style "n/a"]
-                   [:td border-style "The " (code-text ":anchor") " argument of " (code-text "[popover-anchor-wrapper]") " is placed here. Could be before or after popover-point based on " (code-text ":position") " arg."]]
+                   [:td border-style "The " (code-text ":anchor") " argument of " (code-text "[popover-anchor-wrapper]") " is placed here. Could be before or after the point based on " (code-text ":position") " arg."]]
                   [:tr
                    [:td border-style-nw (indent-text 2 "[:div]")]
                    [:td border-style-nw "rc-popover-point"]

demo/re_demo/theme.cljs

@@ -24,11 +24,7 @@
          [rc/p
           "You can also register a "
           [:i "theme"] "-function globally, and re-com will apply it to every "
-          "instance of a re-com component in your app."]
-         [rc/p {:style {:background-color "#eee" :padding 7}}
-          [:strong "Note"] ": Only some components support themes. "
-          "Our effort to bring full support to all components is "
-          [:a {:href "https://github.com/day8/re-com/issues/352"} "ongoing"] "."]]]
+          "instance of a re-com component in your app."]]]
        [rc/box
         :align :center
         :child [:img {:style {:height "250px"} :src "demo/light-bulb-shapes.jpg"}]]]]
@@ -247,4 +243,26 @@
           '[rc/dropdown
             {:theme (fn [props] (if (deref night-mode?)
                                   (dark-theme props)
-                                  (light-theme props)))}]]]]]]]}])
+                                  (light-theme props)))}]]]]]]
+     [rc/gap :size "19px"]
+     [rc/p {:style {:background-color "#eee" :padding 7}}
+      [:strong "Built-in modern theme"] ": re-com ships with an opt-in "
+      [:code "re-com.theme.modern"] " — a Bootstrap-5-flavoured palette with refined "
+      "borders, radii, shadows and focus rings. Typography is intentionally inherited "
+      "from the classic look. Activate it from your app code with "
+      [:code "(re-com.core/reg-theme re-com.theme.modern/theme)"] ". "
+      "Try it live: the dropdown in this demo's title bar (top-right) switches between "
+      "Classic and Modern at runtime."]
+     [rc/p {:style {:background-color "#eee" :padding 7}}
+      [:strong "Note"] ": Layout components (" [:code "h-box"] ", " [:code "v-box"]
+      ", " [:code "box"] ", " [:code "gap"] ", " [:code "line"] ", " [:code "scroller"]
+      ", " [:code "border"] ") and typography (" [:code "title"] ", " [:code "p"]
+      ", " [:code "label"] ") are unaffected by Modern — typography is preserved "
+      "deliberately so apps switching themes don't see text re-flow. Two intentional "
+      "carve-outs: " [:code "popover-tooltip"] " keeps its classic dark-on-light look, "
+      "and Bootstrap-variant button classes (" [:code "btn-primary"] ", "
+      [:code "btn-success"] ", etc.) are not restyled so colour-coded buttons still "
+      "get their colour. The remaining themable components (button, alert-box, "
+      "progress-bar, input-text, checkbox, radio-button, tabs, dropdown, "
+      "selection-list, modal-panel, popover, datepicker, daterange, slider, "
+      "input-time, splits, hyperlink, close-button) all have Modern styling."]]}])

demo/re_demo/theme_picker.cljs

@@ -0,0 +1,33 @@
+(ns re-demo.theme-picker
+  (:require
+   [reagent.core        :as reagent]
+   [re-com.core         :as rc :refer [single-dropdown at]]
+   [re-com.theme.modern :as modern-theme]))
+
+(defonce active-theme-id (reagent/atom :classic))
+
+(defn switching-theme
+  "Top-level :user theme registered with reg-theme. Derefs active-theme-id
+   inside the render path, so changing the atom causes Reagent to re-render
+   any component whose theme is composed and reapplied per render. The
+   theme/comp pipeline captures this function at mount time, but the deref
+   inside it remains reactive."
+  [props]
+  (case @active-theme-id
+    :modern (modern-theme/theme props)
+    props))
+
+(defonce _register-switching-theme
+  (rc/reg-theme switching-theme))
+
+(def theme-options
+  [{:id :classic :label "Classic"}
+   {:id :modern  :label "Modern"}])
+
+(defn theme-picker []
+  [single-dropdown
+   :src       (at)
+   :width     "110px"
+   :choices   theme-options
+   :model     active-theme-id
+   :on-change #(reset! active-theme-id %)])

demo/re_demo/utils.cljs

@@ -7,6 +7,7 @@
    [re-com.box            :as box :refer [box gap h-box v-box]]
    [re-com.text           :refer [p]]
    [re-com.util           :refer [px]]
+   [re-demo.theme-picker  :refer [theme-picker]]
    [day8.re-frame-10x.tools.highlight-hiccup :refer [str->hiccup]]
    [zprint.core :as zprint]))
 
@@ -68,7 +69,9 @@
                                 [:span "new in version: "
                                  [:code {:style {:font-size        10
                                                  :border           :none}}
-                                  new-in-version]])]}]]}]
+                                  new-in-version]])]}]
+                 [gap :size "1"]
+                 [theme-picker]]}]
     [line :src (at)]]])
 
 (defn title2