bh 6.1.4 → 6.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a4c459020371af21cd272fa41567285f83bbe72a5dcbd2682490216bf85efa4
-  data.tar.gz: 7077b7c2a8c13f3e87e96e3cb2bdf33b3ea33d8c1ddf42987b7866911a168505
+  metadata.gz: 8e8820e04b1b71fbfacf44696b6fec712f77987c217dbedf5c2314867600bf42
+  data.tar.gz: 761251633d36f3e62dd92d9784c71d44a2306bc6c3358d24b3420f3347cebff6
 SHA512:
-  metadata.gz: 4179e6bec45030ef83c35ca311c5cb873f51436377f92611394489ba05cf29a027447101da3f2bcb52a130116d3b99253de4451c53d998844bcaaad0f1549404
-  data.tar.gz: 1acbded0532918d0a81673d2e32716529c348c7ee18880ea5ffa2e389a0071ffd50b837ec005934d4a7d21a9e7b25ed99ccb0e52022ab8bb1d622b92602544ec
+  metadata.gz: 84be37f63354fe89c52d6532cb55a5c2db53127a568c228d58acc53d7d3a0ff3cbb98cad224b7bdd76138a3a02ffcf2b3a338cacda2ec0f12427e26fd10db361
+  data.tar.gz: bd2d39d1d0377f5e5730f90ad6400edf736b1cc281b63e2a491c8c6cf7bf922e3822a6f1525e5f7ae775f3ff48de3f089f2c526d9a09b992f6c53a875b9d9eb7

data/CHANGELOG.md

@@ -6,6 +6,56 @@ For more information about changelogs, check
 [Keep a Changelog](http://keepachangelog.com) and
 [Vandamme](http://tech-angels.github.io/vandamme).
 
+## [Unreleased]
+
+## 6.3.0 - 2026-09-18
+
+* [FEATURE] The nine palettes, served at `/bh/theme/<name>.css`
+
+  `bootstrap`, `dawn`, `dracula`, `gruvbox`, `monokai`, `nord`, `one_dark`, `solarized` and
+  `tokyo_night`, each restating all thirteen steps of every Bootstrap family it repaints. They
+  arrived with the `scheme` controller in 6.2.0 and the controller had nothing to swap: it
+  reads `${path}/${theme}.css`, and no such file shipped. Now it does.
+
+  They are copied beside the stylesheet rather than bundled into it, because a page links one
+  at a time and swaps it for another, which is the whole point of them.
+
+## 6.2.0 - 2026-09-18
+
+A breaking change that keeps its major on purpose. 6.0 through 6.1.4 were an alpha in
+everything but the number — Bootstrap 3 wrappers with a Bootstrap 6 stopgap bolted on,
+cut while Bootstrap 6 was itself pre-release — so there is no settled API here to have
+broken, and nothing is owed the major a real break would earn. Those numbers are taken
+and cannot be withdrawn, RubyGems keeping anything published over thirty days ago, so
+6.2.0 steps over them and lands above 6.1.4, where `bundle update` reaches it.
+
+Until this line settles it breaks on a minor: pin `~> 6.2.0`, never `~> 6`.
+
+* [BREAKING CHANGE] Everything. Bh is now Bootstrap 6 components rather than Bootstrap 3
+  wrappers, and no helper of 1.x or 6.1.x survives: `head_tags`, `script_tags`, `navbar`,
+  `navbar_brand`, `navbar_nav`, `navbar_toggler`, `navbar_collapse`, `navbar_collapsable`,
+  `card`, `nav`, `nav_link_to`, `nav_link_options_for`, `table`, `column`, `grid`, `grid_row`,
+  `grid_column`, `turbo_link_to` and `edit_link_to` are all gone, along with the `bh/_table`
+  and `bh/_grid` partials and the loose `phone`, `require`, `submit` and `bh--theme`
+  controllers.
+* [FEATURE] `Bh::FormBuilder`, which dresses every field Rails draws and adds the two it has
+  none of: `phone_field`, shaped as it is typed, and `pin_field`, the six slots a 6-digit code
+  is typed into.
+* [FEATURE] `combobox`, a `<select>` drawn as a searchable menu that stays the one thing the
+  form submits.
+* [FEATURE] `dialog`, `notices`, `chat_with` and `flow`.
+* [FEATURE] `bh_head_tags`, and an engine that serves `/bh/css/bh.css` and `/bh/js/bh.js` — one
+  stylesheet and one script, Bootstrap 6 included, built by esbuild and shipped in the gem.
+* [FEATURE] Twenty-two Stimulus controllers, registered by the bundle, and a Bootstrap dialog
+  standing in for the browser's `confirm()`.
+* [FEATURE] A dummy app under `test/dummy` drawing every helper on one page, which `rails s`
+  from the root of a clone runs.
+
+
+## 6.1.5 - 2026-06-29
+
+* [FEATURE] Point to main boostrap v6 CSS
+
 ## 6.1.4 - 2026-06-24
 
 * [FEATURE] Include Boostrap Icons CSS

data/README.md

@@ -1,25 +1,113 @@
-Bh · Bootstrap Helpers
-======================
+# Bh · Bootstrap Helpers
 
-A set of Ruby helpers that streamlines the use of
-[Bootstrap 6 components](https://deploy-preview-42067--twbs-bootstrap.netlify.app/) in HTML views.
+**Bootstrap 6 in a Rails app, with the markup already written.**
 
-Bootstrap 6 is a great framework, but requires many lines of HTML code
-even for simple components.
+[![Every component Bh draws, on one page](screenshot/page.jpg)](https://claudiob.github.io/bh/)
 
-With Bh, you can achieve the same result with fewer lines of code
+<p align='center'>
+  <a href='https://claudiob.github.io/bh/'><strong>Every component, drawn and explained&nbsp;→</strong></a>
+</p>
 
-How to install
-==============
+Bootstrap is a fine framework that asks for a lot of HTML. Bh answers with a form builder that
+dresses every field a page can ask for, helpers for the components Bootstrap ships behavior for
+and no markup — a combobox, a 6-digit code, a dialog, a toast, a thread of messages — and the
+one stylesheet and one script that carry them, served by the engine.
 
-1. Add `gem 'bh'` to the `Gemfile` file of your Rails app.
-2. Add this line to the `config/importmap.rb` file:
+## How to install
+
+```bash
+gem install bh
+```
+
+```ruby
+# Gemfile
+gem 'bh', '~> 6.3.0'
+```
+
+`~> 6.3.0` stops short of `6.4`, and that is the pin to hold: **until this line settles it
+breaks on a minor, not on a major.** Rails 8.1 and Ruby 3.2 are the minimum.
+
+6.2.0 breaks everything before it and keeps its major anyway. 6.0 through 6.1.4 were an alpha
+in everything but the number — Bootstrap 3 wrappers with a Bootstrap 6 stopgap bolted on, cut
+while Bootstrap 6 was itself pre-release — so there was no settled API to break. Those numbers
+are taken and cannot be withdrawn, RubyGems keeping anything published over thirty days ago, so
+this release steps over them.
+
+With the gem in the bundle an app serves `/bh/css/bh.css` and `/bh/js/bh.js` itself. One helper
+puts both in the head, along with everything Bootstrap and Turbo read:
+
+```erb
+<%= bh_head_tags %>
+```
+
+## The palettes
+
+Nine of them, served at `/bh/theme/<name>.css` and linked one at a time, after the stylesheet:
+`bootstrap`, `dawn`, `dracula`, `gruvbox`, `monokai`, `nord`, `one_dark`, `solarized`,
+`tokyo_night`. Each restates all thirteen steps of every Bootstrap family it repaints, plus
+`--bs-white`, `--bs-black` and the three text tones. Every accent clears 3:1 against its label
+and every text tone 4:1, in both modes.
+
+`bootstrap` declares nothing: upstream's palette comes back by dropping the others' block
+rather than by writing one, and it is named so a toggle can reach it — a reader who rotates
+through nine and never finds the one the pages started in has been shown a door with no handle
+on the inside.
+
+The `scheme` controller does the swapping, and the choice belongs to the reader:
+
+```erb
+<button type='button' data-controller='scheme' data-action='scheme#rotate'
+        data-scheme-themes-value='["bootstrap","dawn","dracula","gruvbox","monokai","nord","one_dark","solarized","tokyo_night"]'
+        data-scheme-path-value='/bh/theme' data-scheme-storage-value='scheme'>
+  Another palette
+</button>
+```
+
+A click moves to another palette and into the mode it is not in. Put the stored choice back
+before the first paint, from the layout's own script: a controller connects far too late for
+that, and the page would otherwise flash the palette the server chose.
+
+## What you get
 
 ```ruby
-pin_all_from Bh::Engine.root.join('app/javascript/controllers'), under: 'controllers'
+class ApplicationController < ActionController::Base
+  default_form_builder Bh::FormBuilder
+end
 ```
 
-Available methods
-=================
+| | |
+| --- | --- |
+| `fieldset` `label` `submit` `button` | the form's furniture, with the pill Bootstrap draws |
+| every `*_field`, `text_area`, `select`, `check` | dressed at one size, so a view says which kind and nothing about how it looks |
+| `phone_field` | a North American number, shaped `555-555-5555` as it is typed |
+| `pin_field` | one real field drawn as six slots, offered by the phone from the text that brought it |
+| `combobox` | a `<select>` drawn as a searchable menu, still the one thing the form submits |
+| `dialog` | a link and the `<dialog>` it opens, sharing an id made from the link's own words |
+| `notices` | the flash as toasts, held while they are read |
+| `chat_with` | a thread of bubbles, and the field that posts the next one |
+| `flow` | the page of a signup flow: a header, a title, one card, a footer |
+| 22 Stimulus controllers | registered by the bundle, called by `data-controller` |
+| 9 palettes | served at `/bh/theme/`, swapped by the `scheme` controller |
+
+The page above draws every one of them beside the line of Ruby that produces it.
+
+## Trying it out
+
+The gem carries a dummy app drawing every helper on one page, and a `bin/rails` at the root, so
+there is no `cd` first. From the root of a clone:
+
+```bash
+bin/setup
+rails s
+```
+
+`localhost:3000` is every component at once, `?flash=1` adds the toasts, and `/flow` is the
+signup page.
+
+## Elsewhere
+
+- [The page](https://claudiob.github.io/bh/) — every component, and how to reach it
+- [API reference](https://rubydoc.info/gems/bh) — built from what RubyGems holds
+- [CHANGELOG](CHANGELOG.md) — what each release is, and which of the three it is
 
-See https://github.com/claudiob/bh/blob/master/lib/bh/bootstrap_helpers.rb
+MIT licensed. Drawn for [houseaccount](https://houseaccount.com/) by the Earl of Bubblehum.

data/app/javascript/bh/bookmark_controller.js

@@ -0,0 +1,97 @@
+import { Controller } from '@hotwired/stimulus'
+import { flash } from './flash.js'
+
+// The square that keeps a row, answered before the server does. The icon flips under
+// the cursor and the request goes in the background, so the table is never redrawn and
+// the row stays where the eye left it — until the next load, where kept-first belongs.
+//
+// The form is still a real one. Without this controller it submits, redirects and
+// reloads, which is the same floor every other button here degrades to.
+export default class extends Controller {
+  static values = { kept: Boolean, error: String }
+
+  connect() {
+    this.form = this.element.closest('form')
+    this.row = this.element.closest('tr')
+    this.icon = this.element.querySelector('i')
+    this.form.addEventListener('submit', this.submit)
+  }
+
+  disconnect() {
+    this.form.removeEventListener('submit', this.submit)
+  }
+
+  // An arrow so `this` survives being handed to the listener, and so the same
+  // function object is the one removed again.
+  submit = (event) => {
+    event.preventDefault()
+    const kept = !this.keptValue
+    // Read the form before flipping it. The verb it is still wearing is the one this
+    // click means — `post` to keep the row, `delete` to drop it — while `render`
+    // dresses it for the click after this one, which is the opposite.
+    const body = new FormData(this.form)
+    this.render(kept)
+    this.send(body, kept)
+  }
+
+  // What the eye reads, what a screen reader reads, and what the next click will do:
+  // the path never changes, only the verb Rails wrote into the form.
+  render(kept) {
+    this.keptValue = kept
+    this.icon.className = kept ? 'bi bi-bookmark-fill' : 'bi bi-bookmark'
+    this.element.setAttribute('aria-pressed', kept)
+    this.method.value = kept ? 'delete' : 'post'
+  }
+
+  // The token in the head, not the one in the form. Rails scopes a form's own token
+  // to the method it was drawn with and this square flips that method; the form's is
+  // inside a cached fragment besides, so it belongs to whichever session drew the
+  // table. The head's is global to the session and fresh per request, and Rails takes
+  // whichever of the two is valid.
+  get token() {
+    return document.querySelector('meta[name="csrf-token"]')?.content
+  }
+
+  // Rails' own override field, which `button_to` writes only for a delete — so a
+  // square that started hollow has none until the first click makes one.
+  get method() {
+    let field = this.form.querySelector('input[name="_method"]')
+    if (!field) {
+      field = document.createElement('input')
+      field.type = 'hidden'
+      field.name = '_method'
+      this.form.prepend(field)
+    }
+    return field
+  }
+
+  // The response is never rendered, but it is read: a 500, a dropped connection or
+  // an expired session would otherwise leave a filled square that was never saved.
+  // `Accept` is what tells the server this one wants no flash and no redirect.
+  async send(body, kept) {
+    try {
+      const response = await fetch(this.form.action, {
+        method: 'post',
+        body,
+        headers: { Accept: 'application/json', 'X-CSRF-Token': this.token },
+      })
+      if (!response.ok) return this.revert(kept)
+
+      // The report, and the reason there is no toast: the row takes or loses its tint,
+      // which says which rows are kept. The icon flipped on the click and would have
+      // flipped under a request that never landed, so this is the half only the server
+      // can give.
+      this.row?.classList.toggle('recourse-kept', kept)
+    } catch {
+      this.revert(kept)
+    }
+  }
+
+  // Put the square back, and say why — the one time this column speaks, since a click
+  // that worked is reported by the row taking color. Nothing to put back but the
+  // square: the tint is never laid on until the row is written.
+  revert(kept) {
+    this.render(!kept)
+    flash(this.errorValue)
+  }
+}

data/app/javascript/bh/clear_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'button']
+
+  connect() {
+    this.toggle()
+  }
+
+  toggle() {
+    this.buttonTarget.classList.toggle('d-none', !this.inputTarget.value)
+  }
+
+  clear() {
+    this.inputTarget.value = ''
+    // The combobox filters its menu on `input`, so it has to hear one to put every
+    // row back. Bootstrap listens on the field itself, and the event bubbles anyway.
+    this.inputTarget.dispatchEvent(new Event('input', { bubbles: true }))
+    this.inputTarget.focus()
+    this.toggle()
+  }
+}

data/app/javascript/bh/combobox/menu.js

@@ -0,0 +1,93 @@
+// The markup Bootstrap's combobox wants, built from a `<select>`: the toggle and the menu,
+// as the two nodes to put after it. Every word on them comes from the select or its
+// controller's values, so nothing here is in any one language.
+
+// The toggle takes the select's size and its error, and is labelled the way the select was.
+export function menuFor(select, controller) {
+  const toggle = element('button', 'form-control combobox-toggle', { type: 'button' })
+  if (select.classList.contains('form-select-sm')) { toggle.classList.add('form-control-sm') }
+  if (select.classList.contains('is-invalid')) { toggle.classList.add('is-invalid') }
+  toggle.dataset.bsToggle = 'combobox'
+  toggle.dataset.bsSearch = 'true'
+  toggle.dataset.bsPlaceholder = controller.placeholderValue
+  if (select.multiple) { toggle.dataset.bsMultiple = 'true' }
+  if (select.required) { toggle.setAttribute('aria-required', 'true') }
+  labelled(toggle, select)
+  toggle.append(element('span', 'combobox-value', {}, controller.placeholderValue),
+                element('i', 'bi bi-chevron-down combobox-caret'))
+
+  return [toggle, menu(select, controller)]
+}
+
+// The label that pointed at the select points at what a reader now clicks instead.
+function labelled(toggle, select) {
+  const label = select.id && document.querySelector(`label[for='${select.id}']`)
+  if (label) { toggle.setAttribute('aria-labelledby', label.id ||= `${select.id}-label`) }
+  for (const name of ['aria-label', 'aria-describedby']) {
+    if (select.hasAttribute(name)) { toggle.setAttribute(name, select.getAttribute(name)) }
+  }
+}
+
+function menu(select, controller) {
+  const menu = element('div', 'menu')
+  menu.append(search(select))
+  if (controller.hasAllValue && select.multiple) { menu.append(all(select, controller.allValue), element('div', 'menu-divider')) }
+  for (const option of select.options) { menu.append(item(option, select.multiple)) }
+  menu.append(element('div', 'combobox-no-results d-none', {}, select.dataset.noResults || ''))
+
+  return menu
+}
+
+// The box that narrows a long menu, with the X that empties it inside the field.
+function search(select) {
+  const box = element('div', 'combobox-search')
+  box.dataset.controller = 'clear'
+  const input = element('input', 'form-control combobox-search-input', {
+    type: 'text', autocomplete: 'off', placeholder: select.dataset.search || '', 'aria-label': select.dataset.search || '',
+  })
+  input.dataset.clearTarget = 'input'
+  input.dataset.action = 'input->clear#toggle'
+  const clear = element('button', 'combobox-search-clear d-none', { type: 'button', 'aria-label': select.dataset.clear || '' })
+  clear.dataset.clearTarget = 'button'
+  clear.dataset.action = 'clear#clear'
+  clear.append(element('i', 'bi bi-x-lg'))
+  box.append(input, clear)
+
+  return box
+}
+
+// `All`: no `data-bs-value`, so the plugin passes it by and the deselect controller has it.
+function all(select, words) {
+  const row = element('button', 'menu-item', { type: 'button' }, words)
+  row.dataset.controller = 'deselect'
+  row.dataset.action = 'deselect#all'
+  row.dataset.deselectMultipleValue = String(select.multiple)
+
+  return row
+}
+
+// One option as one row: its words, a figure beside them where it has one, a check where
+// the menu is multiple, and `d-none` where it waits for `All`. An empty option is the way
+// back to nothing, and takes the plugin's own empty value.
+function item(option, multiple) {
+  const row = element('button', 'menu-item', { type: 'button', 'aria-selected': String(option.selected) })
+  row.dataset.bsValue = option.value
+  if (option.selected) { row.classList.add('selected') }
+  if ('hidden' in option.dataset && !option.selected) { row.classList.add('d-none') }
+  const content = element('span', 'menu-item-content')
+  content.append(element('span', '', {}, option.textContent))
+  row.append(content)
+  if (option.dataset.count) { row.append(element('span', 'combobox-count fg-2', {}, option.dataset.count)) }
+  if (multiple) { row.append(element('i', 'bi bi-check menu-item-check')) }
+
+  return row
+}
+
+function element(tag, classes, attributes = {}, text = null) {
+  const node = document.createElement(tag)
+  if (classes) { node.className = classes }
+  for (const [name, value] of Object.entries(attributes)) { node.setAttribute(name, value) }
+  if (text !== null) { node.textContent = text }
+
+  return node
+}

data/app/javascript/bh/combobox_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from '@hotwired/stimulus'
+import { Combobox } from 'bootstrap'
+import { menuFor } from './combobox/menu.js'
+
+// A `<select data-controller='combobox'>` becomes Bootstrap's combobox: a toggle that reads
+// the picked option, a menu with a search box, and a check per pick where the select is
+// `multiple`. The select stays, hidden, as the one thing the form submits — the plugin is
+// told no `name`, so it writes no hidden input of its own — and every pick in the menu is
+// written back to it and announced as the select's own `change`. A page without this
+// script has a working select; a page with it has the same select dressed.
+//
+// A multiple menu reads as `California + 1 more` rather than the plugin's `2 selected`,
+// in the words `data-combobox-more-value` gives it. The select's own `data-` attributes
+// say the rest: a placeholder for the toggle, an `All` row that puts held-back options on
+// the menu, and on an option `data-count` for a figure beside it and `data-hidden` to hold
+// it back until `All` asks.
+export default class extends Controller {
+  static values = { more: String, placeholder: String, all: String }
+
+  connect() {
+    this.#dress()
+    this.morphed = () => this.#remake()
+    document.addEventListener('turbo:morph', this.morphed)
+  }
+
+  disconnect() {
+    document.removeEventListener('turbo:morph', this.morphed)
+    this.#undress()
+  }
+
+  #dress() {
+    this.widget = menuFor(this.element, this)
+    this.element.after(...this.widget)
+    this.element.hidden = true
+    this.combobox = Combobox.getOrCreateInstance(this.toggle)
+    this.#name()
+    this.picked = () => this.#pick()
+    this.toggle.addEventListener('change.bs.combobox', this.picked)
+  }
+
+  #undress() {
+    this.toggle.removeEventListener('change.bs.combobox', this.picked)
+    this.combobox.dispose()
+    this.widget.forEach((node) => node.remove())
+    this.element.hidden = false
+  }
+
+  get toggle() { return this.widget[0] }
+
+  get menu() { return this.widget[1] }
+
+  // Remade whole rather than repaired: a morph rewrote the select's options and what is
+  // selected among them, and a widget built from it again is the one way to be sure the
+  // toggle's text, the menu's ticks and the plugin's state all say the same thing.
+  #remake() {
+    if (!this.element.isConnected) { return }
+
+    this.#undress()
+    this.#dress()
+  }
+
+  // What the menu says, written onto the select, and said again as the select's own event
+  // so a form listening for a change hears one — the plugin's event never leaves the toggle.
+  #pick() {
+    const picked = new Set([...this.menu.querySelectorAll('.menu-item.selected')].map((item) => item.dataset.bsValue))
+    for (const option of this.element.options) { option.selected = picked.has(option.value) }
+    this.#name()
+    this.element.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+
+  // `California + 1 more` over the plugin's `2 selected`. Only a multiple menu with more
+  // than one pick: with one the plugin names it, and with none it shows the placeholder.
+  #name() {
+    const picked = this.menu.querySelectorAll('.menu-item.selected')
+    if (!this.element.multiple || picked.length < 2) { return }
+
+    const first = picked[0].querySelector('.menu-item-content > span:first-child')
+    this.toggle.querySelector('.combobox-value').textContent = this.moreValue
+      .replace('%{first}', first.textContent)
+      .replace('%{count}', picked.length - 1)
+  }
+}

data/app/javascript/bh/confirm.js

@@ -0,0 +1,100 @@
+import { Dialog } from 'bootstrap'
+
+// Turbo hands over the whole warning as one string, and the element and the button that
+// asked. The first line is the question and each remaining line a paragraph — real
+// paragraphs here, where a confirm() box had newlines. Always textContent, never
+// innerHTML: the title carries a record's own name, and a name is data. The dialog is
+// built the first time a page asks, so any page loading this bundle has one.
+export default function confirm(message, element, submitter) {
+  const dialog = dialogFor()
+  const [title, ...lines] = message.split('\n')
+  const body = dialog.querySelector('.dialog-body')
+  dialog.querySelector('.dialog-title').textContent = title
+  body.replaceChildren(...paragraphs(lines))
+  body.hidden = !body.children.length
+  const answer = dialog.querySelector('.bh-confirm-answer')
+  answer.textContent = wordsOn(submitter, element) || 'OK'
+
+  return new Promise(resolve => {
+    // `onclick` rather than addEventListener: reassigning replaces the previous
+    // answer's handler, so asking twice on one page never wires the button twice.
+    answer.onclick = () => {
+      resolve(true)
+      Dialog.getOrCreateInstance(dialog).hide()
+    }
+    // Cancel, Esc and a click on the backdrop all close through here. After an
+    // answer the promise is settled, and settling it again is a no-op.
+    dialog.addEventListener('hidden.bs.dialog', () => resolve(false), { once: true })
+    Dialog.getOrCreateInstance(dialog).show()
+  })
+}
+
+// The answer is the very words of the button that asked — `Delete place` — so the dialog
+// never has to know what the page is about, nor in which language. A link with a method
+// arrives as the hidden form Turbo built for it, with no submitter and nothing to read.
+function wordsOn(submitter, element) {
+  const form = element?.tagName === 'FORM'
+  const source = submitter || (form ? element.querySelector('[type=submit]') || asked : element)
+
+  return source?.textContent?.trim() || source?.value
+}
+
+// The element a warning was asked from, remembered on the way down so it is there a frame
+// later when Turbo submits. Focus cannot answer this: Safari does not focus a link it
+// follows, so `document.activeElement` is `<body>` on an iPhone — and `<body>` reads back
+// the text of the whole page, which the answer button then wore.
+let asked = null
+
+document.addEventListener('click', ({ target }) => {
+  asked = target.closest?.('[data-turbo-confirm]') || null
+}, true)
+
+function paragraphs(lines) {
+  return lines.filter(line => line).map(line => {
+    const paragraph = document.createElement('p')
+    paragraph.textContent = line
+    return paragraph
+  })
+}
+
+// The one dialog every warning on a page speaks through, made on the first ask. Cancel
+// keeps the focus on the safe answer: `showModal` gives it to `autofocus` first.
+// `dialog-slide-down` is the animation, shipped by Bootstrap 6.
+function dialogFor() {
+  let dialog = document.querySelector('#bh-confirm')
+  if (dialog) { return dialog }
+
+  dialog = document.createElement('dialog')
+  dialog.className = 'dialog dialog-slide-down'
+  dialog.id = 'bh-confirm'
+  dialog.setAttribute('aria-labelledby', 'bh-confirm-title')
+  dialog.innerHTML = `
+    <div class='dialog-header'><h1 class='dialog-title' id='bh-confirm-title'></h1></div>
+    <div class='dialog-body'></div>
+    <div class='dialog-footer'>
+      <button type='button' class='btn btn-solid theme-secondary' data-bs-dismiss='dialog' autofocus>${cancel()}</button>
+      <button type='button' class='btn btn-solid theme-danger bh-confirm-answer'></button>
+    </div>`
+  document.body.append(dialog)
+
+  return dialog
+}
+
+// The one word the page cannot supply, in the page's own language where a host has said
+// it in a `<meta name='bh-cancel'>`, and English otherwise.
+function cancel() {
+  return document.querySelector('meta[name="bh-cancel"]')?.content || 'Cancel'
+}
+
+// Three things outlive a Turbo visit that starts mid-close: the snapshot, which would
+// restore an open dialog; `dialog-open` on <html>, which is the scroll lock; and
+// `hiding` on the dialog, the class its closing animation runs under. dispose() closes
+// instantly and lifts the lock, but cuts the animation short of the end that would
+// have taken `hiding` off — and a dialog still wearing it opens invisible the next
+// time it is asked, which on a table of Remove buttons is the very next click. In the
+// module, so it registers once.
+document.addEventListener('turbo:before-cache', () => {
+  const dialog = document.querySelector('#bh-confirm')
+  if (dialog?.open) Dialog.getOrCreateInstance(dialog).dispose()
+  dialog?.classList.remove('hiding')
+})

data/app/javascript/bh/density_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus'
+
+// The arrows at the foot of the sidebar, drawn on a phone alone: a tap puts the words
+// back beside every icon the chrome shows — the sidebar's entries, the crumbs, the tabs,
+// the foot's own controls — and the next tap takes them away again. The choice goes to
+// the server in a cookie, the way the zone does, and the page is loaded again outright
+// rather than reshaped in place: Safari left the row of entries where it was when the
+// words came out of hiding, one link over the next, until a reload laid it out afresh.
+// A Turbo visit to the same address is no better — an index carries the metas that make
+// a refresh morph, so the visit reshaped the body it had rather than drawing a new one.
+export default class extends Controller {
+  static values = { storage: String }
+
+  toggle() {
+    const expanded = document.body.classList.contains('recourse-expanded')
+    const density = expanded ? 'compact' : 'expanded'
+
+    document.cookie = `${this.storageValue}=${density}; path=/; max-age=31536000; samesite=lax`
+    window.location.reload()
+  }
+}

data/app/javascript/bh/deselect_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = { multiple: Boolean }
+
+  // `All` asks for the options the menu is holding back — they are in it already, and
+  // this is what puts them on it.
+  all(event) {
+    // A menu that sets a value is configured to close on any click inside it, this
+    // button included — which would shut it over the options it was clicked to see. The
+    // listener doing that is on the document, so stopping the click here is what keeps
+    // them in view. A menu that narrows a table closes on outside clicks only, and is
+    // unaffected either way.
+    event.stopPropagation()
+
+    const menu = this.element.closest('.menu')
+
+    for (const waiting of menu.querySelectorAll('.menu-item.d-none')) {
+      waiting.classList.remove('d-none')
+    }
+
+    // And, on a menu that narrows a table, it means every row as well as every option,
+    // which is what nothing being ticked says. Clicking each chosen item is what the
+    // plugin is already listening for, so the hidden input, the toggle's text and the
+    // events stay its business rather than ours — it has no method for this, and
+    // reaching into its state would be guessing.
+    //
+    // Only there. A menu that sets a value cannot mean none of them, and a click on the
+    // one already chosen is the plugin being told to choose it again — which closes the
+    // menu over the options this button was clicked to see.
+    if (!this.multipleValue) return
+
+    for (const item of menu.querySelectorAll('.menu-item.selected')) {
+      item.click()
+    }
+  }
+}