recourse 4.8.0 → 5.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2de6346d2ca14ff89cc09ff75c23b72b6cc7b7502d9dcfebcb29253a53209c8c
-  data.tar.gz: aadab8161994fb71579e46a1ab1343f929f11fdf7bec5b113768f06c16887bc8
+  metadata.gz: d160dff229773bd862eb24c774a64aaac87c073b5fde920261502c624f17d372
+  data.tar.gz: d500cd966e2faf93f6955ef09b8c6713ba54c1be081408d040d7367307dcb31e
 SHA512:
-  metadata.gz: 655ce30df22d4cccd72dd6a48e559eba1e8d14720d14f2a032de9f811a510f81f5a99dbf1be8082599371eff60c24906932b682e910099cd6bc72a6dbb12bd29
-  data.tar.gz: cb32000306a3b2f20e27f6898aed2c6d3ffb78bbf32411779f85a6e28bb4c61e80d327fddf2fbca0cf82163d9e0f198997eb0b22cea5f211fc23d2d4f7b30822
+  metadata.gz: 8408d91069b9fdbff6fc8136e73ff02507e1be63cd9a1e4b3dc38654bb42f9c85ab21280a540eaba613b85fa3ac16dc32e08ca2f5a0687081923323870b8542b
+  data.tar.gz: dacc5528b67ec9ca0118c03ed8005392babaedbf69aa70d1cefb91cc697e188ebae147da37d0854e372cf56c3a5e47a04235f6c56c751c00f675881f15b19128

data/CHANGELOG.md

@@ -5,6 +5,47 @@ All notable changes to this project will be documented in this file.
 For more information about changelogs, check [Keep a Changelog](http://keepachangelog.com) and
 [Vandamme](http://tech-angels.github.io/vandamme).
 
+## [Unreleased]
+
+## 5.0.0 - 2026-09-14
+
+* [Breaking change] Every page is styled and scripted by `https://design.houseaccount.com`, and nothing is served by the gem
+
+  The vendored Bootstrap, its icons and fonts, Stimulus, the sixteen controllers, the nine
+  palettes and the layout's own stylesheet have moved to the `design` repo, which publishes
+  them at `/v<version>/css/houseaccount.css`, `/v<version>/js/houseaccount.js` and
+  `/v<version>/theme/<name>.css` on that origin, kept forever per version. The layout links
+  the first two at a pinned version, and `Recourse::THEMES_PATH` names the third at the
+  same one; a fix there reaches these pages when the pin moves, and not before. The
+  `Rack::Static` layers under `/recourse/` are gone with the files they served.
+
+  A host needs that origin reachable from its readers' browsers. A host with a Content
+  Security Policy allows it for `style-src`, `script-src` and `font-src`. A host on the
+  `houseaccount` gem serves the same paths itself, but this gem still links the site: it
+  never names that gem.
+
+* [Breaking change] A combobox is a `<select>`, and a filter submits one value per pick
+
+  `_combobox.html.erb` renders a plain select carrying its words as data attributes, and
+  the design bundle dresses it as Bootstrap's combobox; the toggle, the menu and the
+  plugin's hidden input are no longer in the page. A filter's select is `multiple` and
+  named `q[status_in][]`, so a request carries `q[status_in][]=draft&q[status_in][]=sent`
+  rather than one comma-joined value — a host linking to a filtered index, or reading
+  `params[:q]`, updates the shape. A host overriding the partial rewrites it as a select.
+
+* [Feature] The delete dialog is the bundle's
+
+  `_confirm.html.erb` is gone: `confirm.js` in the design bundle builds the dialog on
+  the first ask, and its answer wears the words of the button that asked. A host that
+  overrode the partial deletes its copy.
+
+* [Fix] A phone is formatted in the browser
+
+  A cell reads `<span data-controller='phone'>4155550000</span>` and a field arrives with
+  ten digits, the controller and nothing about its shape: no `pattern`, `placeholder` or
+  `title`. The design bundle's controller decides `555-555-5555` in both places. A host
+  asserting the formatted number in its own tests updates the assertion.
+
 ## 4.8.0 - 2026-09-13
 
 * [Feature] A table is redrawn when a record its rows draw changes, so a `touch: true` kept for that alone can go

data/README.md

@@ -10,13 +10,16 @@ gem install recourse
 
 ```ruby
 # Gemfile
-gem 'recourse', '~> 4.0'
+gem 'recourse', '~> 5.0'
 ```
 
-`~> 4.0` follows Semantic Versioning: `bundle update` takes every 4.x and never a
+`~> 5.0` follows Semantic Versioning: `bundle update` takes every 5.x and never a
 breaking change. Rails 8.1 and Ruby 3.2 are the minimum; the pages need Turbo, which
-`turbo-rails` brings, and nothing else — Bootstrap and its icons are vendored and served
-by the engine, so a host without an asset pipeline gets the same screens.
+`turbo-rails` brings, and nothing else in the host. Everything a page is styled and
+scripted by — Bootstrap 6, its icons, Turbo, Stimulus and the controllers behind these
+screens — is linked from https://design.houseaccount.com, so a host without an asset
+pipeline gets the same screens, and a host with a Content Security Policy allows that
+origin for `style-src`, `script-src` and `font-src`.
 
 ## Step 1. Edit your routes
 

data/app/views/layouts/recourses.html.erb

@@ -5,16 +5,36 @@
     <title><%= content_for(:title) || 'Recourse' %></title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <meta name='color-scheme' content='light dark'>
+    <%# A refresh Turbo is sent morphs the page in place and keeps the scroll; without these it
+        replaces the whole body, which drops the caret, the scroll and any menu that was open.
+        On every page rather than on the ones that broadcast today, so a model that starts to
+        never has to be remembered here. -%>
+    <meta name='turbo-refresh-method' content='morph'>
+    <meta name='turbo-refresh-scroll' content='preserve'>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
     <%= yield :head %>
 
-    <link rel='stylesheet' href='/recourse/bootstrap.min.css'>
-    <link rel='stylesheet' href='/recourse/bootstrap-icons.min.css'>
-    <%# Preloaded from the head instead of discovered at the end of the body, so the
-        module the toast controller and the dismiss X import is already in flight. -%>
-    <link rel='modulepreload' href='/recourse/bootstrap.bundle.min.js'>
+    <%# Everything the page is styled by, from the one place every HouseAccount app draws
+        on: Bootstrap 6, its icons and the house's own rules for this gem's markup. Pinned
+        to a version, so a change there reaches these pages when somebody moves the pin
+        here and not before; the same version stands in the script below and in
+        `Recourse::THEMES_PATH`. Two connections opened before the parser finds either tag:
+        the stylesheet's plain one and the CORS one a module script and a font are fetched
+        over. -%>
+    <link rel='preconnect' href='https://design.houseaccount.com'>
+    <link rel='preconnect' href='https://design.houseaccount.com' crossorigin>
+    <link rel='stylesheet' href='https://design.houseaccount.com/v0.3.1/css/houseaccount.css'>
+    <%# The one thing these screens set that the house's stylesheet does not: system faces
+        at a compact size, for pages dense with figures. 14px as rem, so a browser's own
+        text-size setting still scales it. After the stylesheet, since both are `:root`. -%>
+    <style>
+      :root {
+        --bs-body-font-family: helvetica, verdana, arial, sans-serif;
+        --bs-body-font-size: 0.875rem;
+      }
+    </style>
     <%# After the Bootstrap link, which is what makes either win: every selector involved
         is `:root`. The palette the host named, then the one the reader chose last time. -%>
     <%= theme_stylesheet_link %>
@@ -31,487 +51,10 @@
     <link rel='icon' href='/favicon.png' type='image/png'>
     <link rel='apple-touch-icon' href='/icon.png'>
 
-    <script type='module'>
-      import { Application } from '/recourse/stimulus.js'
-      import BookmarkController from '/recourse/bookmark_controller.js'
-      import ClearController from '/recourse/clear_controller.js'
-      import ComboboxController from '/recourse/combobox_controller.js'
-      import DensityController from '/recourse/density_controller.js'
-      import DeselectController from '/recourse/deselect_controller.js'
-      import LimitController from '/recourse/limit_controller.js'
-      import PhoneController from '/recourse/phone_controller.js'
-      import RelativeTimeController from '/recourse/relative_time_controller.js'
-      import RevealController from '/recourse/reveal_controller.js'
-      import SchemeController from '/recourse/scheme_controller.js'
-      import SearchController from '/recourse/search_controller.js'
-      import ShortcutsController from '/recourse/shortcuts_controller.js'
-      import TimezoneController from '/recourse/timezone_controller.js'
-      import ToastController from '/recourse/toast_controller.js'
-      import WrittenController from '/recourse/written_controller.js'
-      import TooltipController from '/recourse/tooltip_controller.js'
-
-      // In the head, and guarded: Turbo re-runs body scripts on every visit, and a
-      // second application would connect every controller twice.
-      if (!window.Stimulus) {
-        window.Stimulus = Application.start()
-        window.Stimulus.register('bookmark', BookmarkController)
-        window.Stimulus.register('clear', ClearController)
-        window.Stimulus.register('combobox', ComboboxController)
-        window.Stimulus.register('density', DensityController)
-        window.Stimulus.register('deselect', DeselectController)
-        window.Stimulus.register('limit', LimitController)
-        window.Stimulus.register('phone', PhoneController)
-        window.Stimulus.register('relative-time', RelativeTimeController)
-        window.Stimulus.register('reveal', RevealController)
-        window.Stimulus.register('scheme', SchemeController)
-        window.Stimulus.register('search', SearchController)
-        window.Stimulus.register('shortcuts', ShortcutsController)
-        window.Stimulus.register('timezone', TimezoneController)
-        window.Stimulus.register('toast', ToastController)
-        window.Stimulus.register('tooltip', TooltipController)
-        window.Stimulus.register('written', WrittenController)
-      }
-    </script>
-
-    <style>
-      /* System faces at a compact size, and no webfont: nothing to download, no
-         swap flash, and the last external host the layout reached for is gone.
-         14px as rem, so a browser's own text-size setting still scales it. */
-      :root {
-        --bs-body-font-family: helvetica, verdana, arial, sans-serif;
-        --bs-body-font-size: 0.875rem;
-      }
-
-      /* Bootstrap's .15s fade reads as vanishing. Only the hide ever transitions here
-         — the toast is born visible — and reduced-motion still wins, because its rule
-         sets `transition: none` outright rather than through this variable. */
-      .toast { --bs-transition-fade: opacity 1s linear; }
-
-      /* A marked match is part of the word it sits in, so it carries no padding of
-         its own: 'Nash' in 'Nashville' must not read as a word standing apart. */
-      mark { padding: 0; }
-
-      /* 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; }
-
-      /* 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; }
-      }
-
-      /* 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;
-      }
-
-      /* 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);
-        }
-      }
-
-      /* 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; }
-      }
-
-      /* 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 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); }
-
-      /* 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;
-      }
-
-      /* And the columns holding it may be narrower than it is. A flex item's automatic
-         minimum size is the min-content width of what is inside it, and `overflow` on
-         the box inside does not lower it — so without these the 32,000px one unbroken
-         token wants becomes the width of the value's column, then of `main`, then of
-         the page, and `main` wraps below the sidebar it should be sitting beside. These
-         two are every flex item in this layout that holds a page's own content, which
-         is what makes `overflow` on the box inside mean what it says. */
-
-      /* 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 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; }
-
-      /* The icon font drops every glyph an eighth of an em to sit on a text
-         baseline, which inside an icon link reads as the arrow resting on the
-         line. A sixteenth up clears the baseline without floating — on the
-         ::before, so the hover transform on the .bi box itself is untouched. */
-      .icon-link > .bi::before { vertical-align: .0625em; }
-    </style>
+    <%# Turbo, Bootstrap and a Stimulus application with every controller this markup
+        names, started once under `window.Stimulus`. In the head, so a controller exists
+        before the body's first `data-controller`. -%>
+    <script type='module' src='https://design.houseaccount.com/v0.3.1/js/houseaccount.js'></script>
   </head>
 
   <%# The reader's zone is told to the server here rather than from a page of its
@@ -544,20 +87,5 @@
     </main>
 
     <%= render 'recourses/flash' %>
-    <%= render 'recourses/confirm' %>
-
-    <%# turbo-rails' own bundle, in the version that gem signs its streams for: the
-        Turbo behind every frame and morph here, plus the cable element and Action
-        Cable client that turn an index's subscription tag into a connection. -%>
-    <script type='module' src='/recourse/turbo.min.js'></script>
-    <script type='module' src='/recourse/bootstrap.bundle.min.js'></script>
-    <script type='module'>
-      import confirm from '/recourse/confirm.js'
-
-      // The browser's confirm() becomes the Bootstrap dialog. Re-assigned on every
-      // visit, since body scripts re-run — harmless, the module hands back the same
-      // function each time.
-      window.Turbo.config.forms.confirm = confirm
-    </script>
   </body>
 </html>