bh 6.1.4 → 6.2.0

data/app/stylesheets/bh/search.css

@@ -0,0 +1,60 @@
+/* The search and its filters take the width the breadcrumb and the buttons
+   leave, and give it back as the viewport narrows: the box shrinks to a floor
+   that still shows a word, and below 768px the row is allowed to wrap. */
+.recourse-search { flex: 1 1 auto; max-width: 48rem; }
+/* The box grows and the filters do not, so the field someone types into is the
+   widest thing in the row on a large viewport. A toggle is `width: 100%`, which
+   as a flex item would otherwise mean the whole form. */
+.recourse-search-box { flex: 2 1 16rem; min-width: 8rem; }
+
+.recourse-search .combobox-toggle { flex: 0 1 10rem; }
+/* The per-page switch is a word in the sentence beside it rather than a control
+   next to one, so it takes the line's height and not `.btn`'s own minimum —
+   which would leave the row under every table taller than the words in it. */
+.recourse-limit { min-height: 0; }
+/* The bookmark square is an icon in a row of text, not a control in a form, so it
+   takes the line's height too: `.btn`'s minimum made every row with one taller
+   than the rows without. */
+.recourse-bookmark { min-height: 0; }
+/* Stacked, each control is a row of its own rather than a fragment of one:
+   there is no second control beside it to share the line with. */
+@media (width < 768px) {
+  /* The room the breadcrumb leaves, and never more: a form sized by its content
+     widened with the words a picked option put on a toggle, and wrapped under
+     the crumbs. A basis of nothing and leave to shrink hold it in its row. */
+  .recourse-search { flex: 1 1 0; min-width: 0; max-width: none; }
+  .recourse-search-box,
+  .recourse-search .combobox-toggle { flex: 1 1 100%; min-width: 0; }
+  /* Safari zooms in on a field whose text is under 16px, an absolute figure: the
+     small controls are 14px, and so is the body on a phone, so the controls say
+     16px themselves and focusing one moves nothing. */
+  .recourse-search .form-control { font-size: 16px; }
+  /* A page under a record has a trail two or three crumbs long, and what sat beside
+     the trail — the search, its filters, a button — was squeezed into what those
+     left: `Filter by na`. Under such a trail each takes a row of its own, the form
+     the whole width and every control in it a row in turn, and the margin that set
+     a button apart from the trail goes, there being no trail beside it. An index at
+     the top keeps its form beside its one crumb, where it fits. */
+  .recourse-trailed > :not(nav) { flex: 0 0 100%; margin-inline-start: 0; }
+}
+
+/* The button that empties a combobox search sits inside the field it clears. */
+.combobox-search { position: relative; }
+.combobox-search-input { padding-inline-end: 2rem; }
+/* `:not(.d-none)`, because v6's display utilities carry no `!important` and
+   this rule is later in the cascade: a plain `display` here would beat the
+   `.d-none` the button is hidden with, and show an X over an empty field. */
+.combobox-search-clear:not(.d-none) { display: flex; }
+.combobox-search-clear {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: calc(var(--bs-menu-padding-x) + .35rem);
+  transform: translateY(-50%);
+  padding: .15rem;
+  border: 0;
+  border-radius: var(--bs-radius-5);
+  background: transparent;
+  color: var(--bs-fg-2);
+  line-height: 1;
+}
+.combobox-search-clear:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }

data/app/stylesheets/bh/shell.css

@@ -0,0 +1,202 @@
+/* A crumb that is not a link keeps its resting colors under the cursor.
+   Bootstrap lights every .breadcrumb-link on hover, which on a <span>
+   promises a click that goes nowhere — and the element is the whole
+   discriminator, since a crumb that links is an <a>. Redefining the hover
+   tokens, rather than out-cascading the hover rule, leaves Bootstrap's own
+   selector in charge and the active crumb its own resting color. */
+span.breadcrumb-link {
+  --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-color);
+  --bs-breadcrumb-link-hover-bg: transparent;
+}
+span.breadcrumb-link.active {
+  --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-active-color);
+}
+
+/* Nothing here is meant to be wider than the window: the one thing that is, a
+   table, scrolls inside its own wrapper. Safari lays a stacked table's hidden
+   header row out at its full width all the same, and a page that can be
+   scrolled to it is a page Safari zooms out of and draws the navbar short on.
+   `clip` on the shell rather than `hidden`: a `hidden` axis turns the other into
+   `auto`, and the body then cut off whatever hung below it — a filter's menu, on a
+   page whose table had no rows to be taller than the menu. `clip` leaves the
+   other axis alone. */
+html { overflow-x: hidden; }
+.recourse-shell { overflow-x: clip; }
+
+/* A finger does not hover. The tint a pointer leaves on the row under it, or on
+   the link under it, would stay on whatever was last touched — or land on whatever
+   the redrawn page put under the finger — so a touch screen gets none. */
+@media (hover: none) {
+  .table-hover > tbody > tr:hover > * {
+    --bs-table-color-state: initial;
+    --bs-table-bg-state: initial;
+  }
+  .nav-link:hover:not(.active) { background-color: transparent; }
+}
+
+/* The navbar stacks over the content: a menu opened from a filter drops over the
+   first rows of the table rather than under them. */
+.recourse-shell > nav { position: relative; z-index: 1; }
+
+/* A focus ring is drawn outside the link it rings, so the link after it paints its own
+   background over the half that overlaps — which is how a ring ends up behind the tint
+   of the row below it. Lifting the focused link above its siblings keeps the ring whole. */
+.nav-link:focus-visible { position: relative; z-index: 1; }
+
+/* The shell is three things — the sidebar, the navbar, the content — written in
+   the order a phone reads them: a row of icons at the very top, the trail and the
+   search under it, the page under that, scrolling as one. From the width the
+   sidebar becomes a column at, a grid seats them the other way round. The navbar
+   runs across the top, the sidebar takes the column under it and the content the
+   rest, the shell is exactly the viewport, and `main` is the only thing in it that
+   scrolls — so the navbar and the sidebar stay where they are however far down the
+   table a reader is. `minmax(0, 1fr)` is what lets the second row be shorter than
+   what is in it; a `1fr` alone is as tall as its content, and the page would scroll
+   after all.
+   The sidebar deliberately does not scroll. A window dragged shorter than the
+   sidebar itself is the one case the viewport cannot hold, and there the sidebar
+   is allowed to spill past the shell and let the browser scroll the page — which is
+   what a reader expects of something taller than the screen. Were it to scroll on
+   its own instead, the same overflow would be hidden inside it and the page would
+   look whole while its foot was unreachable. */
+@media (width >= 768px) {
+  .recourse-shell {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-areas: 'nav nav' 'aside main';
+    height: 100dvh;
+  }
+  .recourse-shell > nav { grid-area: nav; }
+  .recourse-sidebar { grid-area: aside; }
+  .recourse-shell > main { grid-area: main; overflow-y: auto; }
+}
+
+/* The sidebar rules off the navbar below it while it is the band at the top of a
+   phone, and off the content beside it once it is a column. v6 generates no
+   responsive border utilities, so the switch is written out. */
+.recourse-sidebar {
+  border-block-end: var(--bs-border-width) solid var(--bs-border-color);
+}
+@media (width >= 768px) {
+  .recourse-sidebar {
+    border-block-end: 0;
+    border-inline-end: var(--bs-border-width) solid var(--bs-border-color);
+  }
+}
+
+/* Held Option marks the letter each sidebar link answers to. Marked rather than
+   bracketed: '[C]ontacts' would shift the whole sidebar two characters wide the
+   moment the key went down. Swap the two rules below for the bracketed form. */
+.recourse-keys .recourse-key {
+  font-weight: var(--bs-font-weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+/* .recourse-keys .recourse-key::before { content: '['; }
+   .recourse-keys .recourse-key::after  { content: ']'; } */
+
+/* The foot of the sidebar holds the scheme toggle and the way out side by side,
+   each centered in its own half of the row: the toggle alone is in the middle, and
+   the two together are at a quarter and at three quarters. Each control sits in
+   a wrapper — the toggle's own, the form `button_to` draws — and the wrapper is
+   the half, so a button is only as wide as its icon and so is its hover. */
+.recourse-foot { display: flex; }
+.recourse-foot > * { flex: 1 1 0; display: flex; justify-content: center; }
+.recourse-foot .nav-link { border-radius: var(--bs-radius-5); }
+/* A hand cursor alone says little on an icon: a tint under it says it is a control.
+   Only where something can hover: a finger's tap leaves `:hover` set until the next
+   tap elsewhere, and a tint that stays reads as a button stuck down. */
+@media (hover: hover) {
+  .recourse-foot .nav-link:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }
+}
+
+/* `.nav-item` ships `flex: auto`: in a row every entry would take an equal share
+   of the width and in a full-height column an equal share of the height, and the
+   foot's auto margin would never have anything left to push against. Every item is
+   its own size instead, in both directions. */
+.recourse-sidebar .nav-item { flex: 0 0 auto; }
+
+/* On a phone the sidebar is one row of icons across the top, centered, each entry
+   with less room around it than a column gives — a dozen have to fit — and wrapping
+   to a second line only where a host has more than a screen's width of them. */
+@media (width < 768px) {
+  .recourse-sidebar .nav { justify-content: center; --bs-nav-link-padding-x: .5rem; }
+}
+
+/* The foot sits at the bottom of the sidebar and stretches across it while the
+   sidebar is a column, and is simply the last item of the row while it is not
+   — the query matches the `md:` the sidebar's own classes use. */
+@media (width >= 768px) {
+  /* A floor rather than a height, and never wrapped. `.nav` ships `flex-wrap:
+     wrap`, and a column that may wrap, whose items are pinned to their own height
+     above, and which is told exactly how tall to be has one way to place a link
+     that does not fit: a second column. Which is what a short window used to draw.
+     The floor lets it be taller than the space it was given. */
+  .recourse-sidebar .nav { min-height: 100%; flex-wrap: nowrap; }
+  /* And it rides at the foot of the screen, which the auto margin alone is
+     enough to do: the nav's floor is the sidebar's full height, so while the
+     links leave room the margin takes all of it and the foot sits on the fold,
+     rising with it as the window is shortened. Once the links fill the nav there
+     is no room left to take, and the foot comes to rest immediately below the
+     last of them and goes under the fold with it, to be scrolled to.
+     Deliberately not sticky. Sticking it to the bottom of the viewport would lift
+     it off that resting place and hold it over the links it had passed — which is
+     what the background color was for, masking whichever one it covered. Both go
+     together: nothing is painted over, so nothing needs painting out. */
+  .recourse-sidebar .recourse-foot {
+    margin-block-start: auto;
+    align-self: stretch;
+  }
+}
+
+/* A phone reads the chrome as pictures. A sidebar entry is its icon, a crumb its
+   icon, a tab its icon and its figure — `17` rather than `17 franchises` — and the
+   foot's controls their icons, so the sidebar is one row of squares and the trail
+   leaves the search its room. The words are there all the same, read but not seen
+   the way Bootstrap's `.visually-hidden` does it, and the arrows at the foot put
+   them back: the cookie they write has the server draw the shell `.recourse-expanded`,
+   and then none of this applies. A tab or a crumb with no icon keeps its word at
+   every width, there being nothing else to stand for it.
+   The same hiding, at every width, for the foot's words once the sidebar is a
+   column: there is room for an icon and not for a word beside it. */
+.recourse-foot-word { margin-inline-start: .4em; }
+@media (width < 768px) {
+  .recourse-shell:not(.recourse-expanded) :is(.recourse-nav-word, .recourse-crumb-word,
+                                              .recourse-tab-word, .recourse-foot-word) {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+}
+@media (width >= 768px) {
+  .recourse-foot-word {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+  /* Nothing to expand: a column has its words already. */
+  .recourse-density { display: none; }
+}
+
+/* The arrows say where a tap goes, like the moon: parting, with `Expand`, while
+   the chrome is icons; meeting, with `Compact`, once the words are out. Both faces
+   are drawn and the shell's class picks, so the button needs no script to redraw. */
+.recourse-density-expanded { display: none; }
+.recourse-expanded .recourse-density-compact { display: none; }
+.recourse-expanded .recourse-density-expanded { display: inline; }
+
+/* The toggle draws both icons and shows the one that names where a click
+   would go: a moon on a light page, a sun on a dark one. Three states rather than
+   two, because a page nobody has chosen for carries no attribute at all, and the
+   media query is then the only thing that knows which mode it is in. Both are
+   declared at every step rather than one left to its default, so that no state
+   can end up hiding the pair and leaving a button with nothing in it. */
+.recourse-scheme-light { display: inline; }
+.recourse-scheme-dark { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-bs-theme='light']) .recourse-scheme-light { display: none; }
+  :root:not([data-bs-theme='light']) .recourse-scheme-dark { display: inline; }
+}
+:root[data-bs-theme='light'] .recourse-scheme-light { display: inline; }
+:root[data-bs-theme='light'] .recourse-scheme-dark { display: none; }
+:root[data-bs-theme='dark'] .recourse-scheme-light { display: none; }
+:root[data-bs-theme='dark'] .recourse-scheme-dark { display: inline; }

data/app/stylesheets/bh/table.css

@@ -0,0 +1,130 @@
+/* An action column is as wide as a row is tall — an icon in a square — and a
+   counter column starts at the same square, widening only when a figure like
+   38,405 needs the room: a table laying out to 100% reads the width as a
+   preference, never crushes content into it, and hands what these cells do
+   not use to the columns carrying text. Not while the table is stacked, where
+   every cell is a block and a square one is a squashed one — the query
+   matches `.sm:table-stacked`'s. */
+@container (width >= 576px) {
+  .recourse-actions, .recourse-counter {
+    width: calc(1em * var(--bs-body-line-height) + 2 * var(--bs-table-cell-padding-y));
+    white-space: nowrap;
+    text-align: center;
+  }
+}
+
+/* Stacked, a cell reads as one line — `Estimate hi: 600`, the heading semibold
+   and the value after it — where Bootstrap puts the heading on a line of its own
+   and leaves the row's first cell with no heading at all, bold in its place: a
+   status opening a row would be a bare badge. Every cell is headed here. And a
+   value with no space in it — an address, a token — breaks rather than widening
+   the row past the phone. */
+@container (width < 576px) {
+  .sm\:table-stacked > tbody > tr > td[data-cell]::before {
+    content: attr(data-cell) ': ';
+    display: inline;
+    font-weight: var(--bs-font-weight-semibold);
+  }
+  .sm\:table-stacked > tbody > tr > td:first-child { font-weight: inherit; }
+  /* A counter's heading goes inside its link, so the whole `Franchises: 21` is
+     one thing to tap; the cell's own heading steps aside for it. */
+  .sm\:table-stacked > tbody > tr > td.recourse-counter::before { content: none; }
+  .sm\:table-stacked > tbody > tr > td.recourse-counter > [data-cell]::before {
+    content: attr(data-cell) ': ';
+    font-weight: var(--bs-font-weight-semibold);
+  }
+  .sm\:table-stacked > tbody > tr > td:not(:first-child) + td::before { margin-block-start: 0; }
+  .sm\:table-stacked > tbody > tr > td { overflow-wrap: anywhere; }
+}
+
+/* A counter says what it counts in one of two ways, and the table's own width is
+   what picks: the icon and a bare figure where the column is a square, the
+   counted model's words where there is room to read them. Bootstrap's `xl`, so
+   words arrive on a wide monitor and nowhere narrower — the width above is a
+   preference a table never crushes content into, so the column simply widens to
+   take them. Against `.table-responsive` like every query here, which is the
+   table's width rather than the window's: a sidebar takes a few hundred pixels
+   the window knows nothing about. */
+.recourse-counter-word { display: none; }
+@container (width >= 1280px) {
+  .recourse-counter-icon, .recourse-counter-figure { display: none; }
+  .recourse-counter-word { display: inline; }
+}
+
+/* A row the viewer has kept, and the only report a click ever gets, so it has to
+   be seen. A twelfth of the primary mixed into the page rather than
+   `--bs-primary-bg-subtle`: that token is a fixed step of the ramp, far enough
+   from the page on a low-contrast palette to cost the text a point of contrast
+   it has not got — mixing into the page keeps the tint the same distance from it
+   whatever the palette. A background rather than `.table-active`, which sets the
+   very variable `.table-hover` sets and would read as the row under the cursor,
+   and lose its tint the moment it became one; a background lets the hover shadow
+   lay over it. */
+.table > tbody > .recourse-kept > * {
+  background-color: color-mix(in srgb, var(--bs-primary-fg) 12%, var(--bs-bg-body));
+}
+
+/* The row a write just landed on, tinted for as long as the message saying so
+   stands. On the cells rather than on the row, like the kept tint beside it: the
+   table collapses its borders, so the cells are what paint, and one tint across
+   all of them is what reads as a single row — where anything drawn per cell reads
+   as a box around each of them instead.
+   A background rather than a border. A border on a collapsing table is a width
+   the table then measures around, and taking it away again leaves the line it
+   drew sitting between two rows that no longer want one.
+   Mixed into the page exactly as the kept tint below is, and never
+   `--bs-success-bg-subtle`: that token is `light-dark(--bs-green-100,
+   --bs-green-900)`, and a palette builds those steps by mixing toward white or
+   black rather than toward the page — so how far it lands from the page is the
+   palette's business and not ours. Mixing here keeps it the same distance on all
+   nine. The success family rather than the primary one is what tells it apart
+   from the kept tint it may land on top of: a different hue reads as a different
+   thing, where a second shade of the primary would read as more of the same. */
+.table > tbody > .recourse-written > *,
+.table > tbody > .recourse-written-out > * {
+  --recourse-written: color-mix(in srgb, var(--bs-success-fg) 12%, var(--bs-bg-body));
+}
+.table > tbody > .recourse-written > * {
+  background-color: var(--recourse-written);
+}
+/* Let go of over the second the toast beside it takes to fade, and started by the
+   same event. The class above comes off as this one goes on, so the animation is
+   the only thing painting the row while it runs and nothing paints it afterwards
+   — which hands a kept row back its own tint rather than leaving it wearing this
+   one. */
+.table > tbody > .recourse-written-out > * {
+  animation: recourse-written-out 1s linear;
+}
+@keyframes recourse-written-out {
+  from { background-color: var(--recourse-written); }
+  to { background-color: var(--bs-bg-body); }
+}
+/* The tint itself is not motion; only its going is. */
+@media (prefers-reduced-motion: reduce) {
+  .table > tbody > .recourse-written-out > * { animation: none; }
+}
+
+/* The grip a row of an arranged table is taken hold of by. The cursor is the whole of
+   the affordance — the icon says what it is and the pointer says it can be picked up —
+   and `grabbing` while it is held, which is what tells a drag from a click that has not
+   moved yet. `touch-action: none` on this square alone: a phone scrolls the page by
+   dragging anywhere on a table, and only the grip is taken away from that. */
+.recourse-handle {
+  cursor: grab;
+  touch-action: none;
+}
+.recourse-handle:active { cursor: grabbing; }
+
+/* The space the row will land in, which Sortable leaves standing where it would go.
+   The same tint a kept row wears, mixed into the page the same way and for the same
+   reason: a fixed step of the ramp lands a different distance from the page on every
+   palette. On the cells rather than the row, since the table collapses its borders and
+   the cells are what paint. */
+.table > tbody > tr.sortable-ghost > * {
+  background-color: color-mix(in srgb, var(--bs-primary-fg) 12%, var(--bs-bg-body));
+}
+
+/* And the row itself while it is off the ground. Sortable fades it to 0.8; a row under
+   the cursor reads as lifted from the tint standing where it left, so nothing here has
+   to make it translucent as well. */
+.table > tbody > tr.sortable-drag { opacity: 1; }

data/app/stylesheets/bh/values.css

@@ -0,0 +1,41 @@
+/* One rule per row of the show page, so a value and its heading read as one thing
+   and the next pair as another. On the cells rather than between them: a column's
+   gutter is padding inside it, so two side by side draw one unbroken line.
+   Every row reserves the width a rule takes, in `transparent`, and the show page
+   only colors it in — which is what leaves a field at exactly the height of the
+   value it edits, row after row down two pages. */
+.recourse-row {
+  border-block-end: var(--bs-border-width) solid transparent;
+}
+.recourse-values > .recourse-row {
+  border-block-end-color: var(--bs-border-color);
+}
+/* And a value stands as tall as the control that edits it, so a row on one page
+   is a row of the same height on the other. Bootstrap gives
+   `.form-control-plaintext` a control's padding and line height but no minimum,
+   and an icon or a badge is shorter than a box. */
+.recourse-values .form-control-plaintext {
+  min-height: var(--bs-control-min-height);
+}
+/* The reveal is a word beside a value rather than a control beside it, so it takes
+   the line's height and not `.btn-sm`'s minimum — which would leave a masked row
+   taller than the field that edits the same attribute. */
+.form-control-plaintext .btn {
+  min-height: 0;
+}
+
+/* A payload in a block of its own, bounded so it scrolls rather than grows. `pre`
+   for the indentation that makes JSON readable, but wrapping rather than running
+   off to the side: a flex item's automatic minimum size is the min-content width
+   of whatever is inside it, and `overflow` on this box does not lower it — so one
+   unbroken 4,000-character token became the width of the value's column, then of
+   `main`, which then wrapped below the sidebar it belongs beside. `pre-wrap` keeps
+   the indentation and takes the wrapping, and `anywhere` is what lowers
+   min-content, which `break-word` in its place would not. */
+.recourse-payload {
+  max-height: 12rem;
+  margin-block-end: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

data/app/stylesheets/bh.css

@@ -0,0 +1,13 @@
+/* Everything a page built on Bootstrap 6 is styled by, in one file: Bootstrap as upstream
+   ships it, and then this gem's own rules, each in a file named for what it draws.
+   Built by esbuild into /css/bh.css; the imports are the reading order. */
+@import '../../vendor/bootstrap.min.css';
+@import 'bh/base.css';
+@import 'bh/shell.css';
+@import 'bh/table.css';
+@import 'bh/map.css';
+@import 'bh/search.css';
+@import 'bh/values.css';
+@import 'bh/chat.css';
+@import 'bh/pin.css';
+@import 'bh/flow.css';

data/build.mjs

@@ -0,0 +1,15 @@
+// Builds the stylesheet and the script into public/bh/, under the prefix the engine serves them
+// at, which is also what the gem ships. Every URL inside is relative to the file holding it,
+// so one build answers from the gem and from a CDN carrying the package alike.
+import { build } from 'esbuild'
+
+await build({
+  entryPoints: ['app/javascript/bh.js', 'app/stylesheets/bh.css'],
+  bundle: true,
+  minify: true,
+  format: 'esm',
+  outdir: 'public/bh',
+  entryNames: '[ext]/[name]',
+  alias: { bootstrap: './vendor/bootstrap.bundle.min.js' },
+  logLevel: 'info',
+})

data/config/locales/bh.en.yml

@@ -0,0 +1,13 @@
+en:
+  bh:
+    ago: '%{time} ago'
+    all: All
+    ask: Ask a question
+    clear: Clear
+    close: Close
+    more: '%{first} + %{count} more'
+    no_results: Nothing matches that
+    okay: Okay
+    search: Search
+    send: Send
+    typing: Typing

data/lib/bh/engine.rb

@@ -1,13 +1,28 @@
-require_relative 'bootstrap_helpers'
+# rails/engine alone raises NoMethodError: railtie.rb calls delegate_missing_to too early.
+require 'rails'
 
 module Bh
-  class Engine < Rails::Engine
-    initializer 'bh.view_helpers' do
-      ActiveSupport.on_load(:action_view) { include Bh::BootstrapHelpers }
-    end
+  # Hooks the gem into a host app: serves the built stylesheet and script, and the helpers.
+  class Engine < ::Rails::Engine
+    # Where the built files answer from: one prefix of the gem's own, so a host already
+    # serving `/css` from somewhere else keeps it. The slash is kept, since `Rack::Static`
+    # matches on `start_with?` and `/bh` would swallow a host's own `/bhutan`.
+    PREFIX = '/bh/'.freeze
+
+    # Neither URL carries a version, so both are asked for again on every full load and
+    # answered `304 Not Modified` while the file they name still stands.
+    HEADERS = [[:all, { 'cache-control' => 'no-cache' }]].freeze
 
+    # Before `Rails::Rack::Logger`, so fetching the stylesheet writes no `Started GET` line,
+    # and cascading, so a host route under the prefix still answers.
     initializer 'bh.assets' do |app|
-      app.config.assets.paths << root.join('app/javascript')
+      app.middleware.insert_before Rails::Rack::Logger, Rack::Static,
+                                   urls: [PREFIX], root: Engine.root.join('public').to_s,
+                                   header_rules: HEADERS, cascade: true
+    end
+
+    initializer 'bh.helpers' do
+      ActiveSupport.on_load(:action_view) { include Bh::Helpers }
     end
   end
 end

data/lib/bh/form_builder/comboboxes.rb

@@ -0,0 +1,38 @@
+require 'action_view'
+
+module Bh
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # The menu the bundle draws as a combobox: Bootstrap's toggle and a searchable menu built
+    # from a select it then hides, which stays the one thing the form submits.
+    module Comboboxes
+      # The words the menu is read by, which belong to the gem rather than to a page.
+      WORDS = %i[all clear more no_results search].freeze
+
+      # `method` as a combobox over `choices` -- the select `form.select` would draw, carrying
+      # what the bundle needs to draw it as one instead. Every argument is that select's, and
+      # its own `:prompt` is what the toggle says before anything is picked. The words it is
+      # searched, cleared and emptied by are the gem's, in the reader's own language, and
+      # `data` given in `html_options` is kept over any of them.
+      def combobox(method, choices = nil, options = {}, html_options = {}, &)
+        data = { controller: 'combobox', combobox_placeholder_value: options[:prompt],
+                 **bh_combobox_words, **html_options.fetch(:data, {}), }
+
+        select method, choices, options, html_options.merge(data: data), &
+      end
+
+    private
+
+      # `all` and `more` are Stimulus values the menu reads; the rest are plain attributes.
+      # `more` is a template the bundle fills, so it is asked for with its own placeholders as
+      # their values -- I18n would otherwise raise on the two it cannot fill.
+      def bh_combobox_words
+        WORDS.to_h do |word|
+          # rubocop:disable-next Style/FormatStringToken -- the bundle fills these, not Ruby
+          said = @template.t "bh.#{word}", first: '%{first}', count: '%{count}'
+
+          [%i[all more].include?(word) ? :"combobox_#{word}_value" : word, said]
+        end
+      end
+    end
+  end
+end

data/lib/bh/form_builder/controls.rb

@@ -0,0 +1,67 @@
+require 'action_view'
+
+module Bh
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # Every other kind of field, at the one size this builder draws them: a page says which kind
+    # it wants and nothing about how it looks. Rails hands an undressed control to whatever it
+    # has no method for here, which is how a Bootstrap class ends up written in a view.
+    module Controls
+      # What a menu wears: the control's size, so a menu and a box beside it line up.
+      MENU = 'form-select form-select-lg'
+
+      # What a box or a circle that is ticked wears.
+      CHECK = 'form-check-input'
+
+      # An email address.
+      def email_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A number, which brings the keyboard for one.
+      def number_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A password, which no name of a column earns on its own.
+      def password_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A term to search by.
+      def search_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A web address.
+      def url_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A day.
+      def date_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A time of day.
+      def time_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A day and a time together.
+      def datetime_field(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # More than a line of words.
+      def text_area(method, options = {}) = super(method, with_classes(options, CONTROL))
+
+      # A menu of what a column may be.
+      def select(method, choices = nil, options = {}, html_options = {}, &)
+        super(method, choices, options, with_classes(html_options, MENU), &)
+      end
+
+      # One of several, ticked.
+      def check_box(method, options = {}, checked = '1', unchecked = '0')
+        super(method, with_classes(options, CHECK), checked, unchecked)
+      end
+
+      # One of several, and only one.
+      def radio_button(method, value, options = {})
+        super(method, value, with_classes(options, CHECK))
+      end
+
+      # A box and the words beside it, which is the one place words sit after a control rather
+      # than over it -- so they are not the label a field wears, and are written here instead.
+      def check(method, text, options = {})
+        words = @template.label_tag field_id(method), text, class: 'form-check-label'
+        inside = @template.safe_join [check_box(method, options), words]
+
+        @template.tag.div inside, class: 'form-check'
+      end
+    end
+  end
+end

data/lib/bh/form_builder/pins.rb

@@ -0,0 +1,30 @@
+require 'action_view'
+
+module Bh
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # The field Rails has none of: the six slots a code is typed into.
+    module Pins
+      # What the one real PIN field carries: digits only, six of them, offered by the phone from
+      # the text that brought them, and drawn as slots by Bootstrap and the `otp` controller.
+      PIN = {
+        class: 'otp-input', inputmode: :numeric, pattern: '[0-9]{6}', minlength: 6, maxlength: 6,
+        autocomplete: 'one-time-code',
+      }.freeze
+
+      # `method` as Bootstrap's OTP input: one real field rendered as six slots, the slots
+      # reddened where the record refused the code. Every option is the field's. The field is
+      # drawn by the view rather than this builder on purpose, so it is never dressed as a
+      # `form-control`: a refused one would wear a red box of its own around slots that say so.
+      def pin_field(method, **options)
+        invalid = @object.respond_to?(:errors) && @object.errors.include?(method)
+        classes = @template.class_names 'otp otp-lg', 'is-invalid': invalid
+
+        field = with_classes PIN.merge(options), PIN[:class]
+
+        @template.tag.div class: classes, data: { controller: 'otp', bs_otp: true } do
+          @template.text_field @object_name, method, **field, object: @object
+        end
+      end
+    end
+  end
+end