houseaccount 0.14.2 → 0.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 49b64054d4b9cdaa0ce91c59af3b181618aa4f550343e08569d8ae60960c1833
-  data.tar.gz: c01b758141861c04ab47f4fe1d63d028782c4e3193ecfdf2bde4668bb4c3661c
+  metadata.gz: 1b6c8ab985a0b86c7f687ccdaf099b99c8fe8f8149ceb81f29e30407d8d4bf32
+  data.tar.gz: f796c8ea89ee0cf82724941342af9341a57ad1fc8826562046d7d4617bf0ca02
 SHA512:
-  metadata.gz: acda012819638ddb27fa6c46d249b97d5bdc1e3547e42e2f06c07d284966fdf590fd70e7c3ca7e3d7bc74bf1c445aa04201b6af291207946744351f37f5b2b01
-  data.tar.gz: 82e90aa97570fa13c9f848fd27d581dbc3096be2da07aac3f3afe2a46476dbeda63b569dd9f1c65aafee5f34e96cc627bc2387ebc7f98bf9a19f36836458eacf
+  metadata.gz: 8cbb39eb69b849914d2c37e2da1688e91c9f7b551a267e76edab0956a8d1f52aad4abd200e48d4e215cd21fa033aff48b53e452cc1d25301cad483a5c3454ba2
+  data.tar.gz: fe457ead3c577b750f990bd5c3f7d32d36b5267f385aabb08080f6d2a7a54b4c0a245cd55e8e50361fc55cbafc1b4b1e7a2ef0366d54864978c135d898bca5f2

data/CHANGELOG.md

@@ -7,6 +7,57 @@ For more information about changelogs, check [Keep a Changelog](http://keepachan
 
 ## [Unreleased]
 
+## 0.16.0 - 2026-09-18
+
+* [FEATURE] bh 6.5, which carries a picture in a bubble and a note over a thread
+
+  `Bh::Message` takes `photos`, drawn under the words in the same bubble, and `chat_with`
+  takes a `note:` that holds the top while the thread scrolls under it.
+
+* [FIX] The shell fills the screen in whole pixels
+
+  `100dvh` computes to a fraction on a scaled display, and the tenths over are a scrollbar
+  the page cannot use beside the one its content already has.
+
+## 0.15.0 - 2026-09-18
+
+* [Breaking change] The nine palettes move to bh as well
+
+  `dracula`, `nord`, `solarized` and the rest are editor colour schemes restating Bootstrap's
+  own families — nothing in them is this house's, which is the test that moved everything
+  else. They are bh's now, and the build copies them out of the gem to `public/theme/`, so
+  every URL a host has ever linked answers exactly as before.
+
+* [Breaking change] Bootstrap 6 moves to the `bh` gem, which this one now depends on
+
+  Most of what had grown here was not the house's: a combobox, a 6-digit code, a dialog, a
+  toast, a thread of messages and twenty-two Stimulus controllers are Bootstrap 6 with the
+  markup written once, and are worth the same to any Rails app. They live in `bh` now, along
+  with the form builder, nine stylesheets and Bootstrap itself. This gem depends on it and
+  bundles it, so `css/houseaccount.css` and `js/houseaccount.js` still carry everything they
+  carried before and a host changes nothing.
+
+  What a host does have to change is where it reaches for a name. `HouseAccount::Message` is
+  `Bh::Message` and `HouseAccount::FormBuilder` is `Bh::FormBuilder` — both kept under the
+  house's names, so neither breaks — but the locale keys moved: `houseaccount.all`,
+  `.ask`, `.clear`, `.close`, `.more`, `.no_results`, `.okay`, `.search`, `.send`, `.typing`
+  and `.ago` are now `bh.*`, and a host that overrode one overrides it there. The meta that
+  words a confirmation's other button is `bh-cancel` rather than `houseaccount-cancel`.
+
+* [Breaking change] `flow` takes what the page stands on rather than assuming it
+
+  bh's `flow` knows nothing of a lockup or a wall. The house's still draws both — `flow logo:`
+  is unchanged — but every other option is now the column's, so a page standing on something
+  of its own names the controller that paints it.
+
+* [Breaking change] The npm package ships the built tree alone
+
+  It used to export `app/javascript` and `app/stylesheets` for a host that would rather
+  bundle the sources itself. Those sources now reach for bh, which is a gem and cannot be
+  resolved from `node_modules` — there is no npm package of bh and there will not be one —
+  so the exports go and the package is `public/css`, `public/js`, `public/font` and
+  `public/theme`: exactly what the CDN links in the README serve.
+
 ## 0.14.2 - 2026-09-18
 
 * [Fix] A conversation reads at the house's own size wherever it is drawn

data/README.md

@@ -1,16 +1,22 @@
 # HouseAccount design
 
-Everything a HouseAccount page is made of, in one place: the stylesheet and the script every
-page loads, the marks every app is known by, the pages shown when an app is not, and the
-Rails helpers that draw a head, a logo or a chat the same way in every app.
+What makes a page look like HouseAccount's: the marks every app is known by, the lockup they
+sit in, the wall a signup flow stands on, the palettes, the pages an app shows when it is down
+or lost, and the one stylesheet and one script that carry all of it.
+
+The Bootstrap 6 underneath is [`bh`](https://claudiob.github.io/bh/), which this gem depends on
+and bundles. **The components are documented there, not here** — the form builder, the combobox,
+the 6-digit code, the phone field, the dialog, the toasts, the thread of messages and the
+twenty-two Stimulus controllers are Bootstrap with the markup written once, and are worth the
+same to any Rails app. This gem is only what is the house's.
 
 Published three ways from this repo:
 
 | Surface | Where | What it is for |
 | --- | --- | --- |
-| Site | https://design.houseaccount.com (staging: https://design.houseparty.dev) | A stable URL for every asset, and a showcase of all of them |
+| Site | https://design.houseaccount.com (staging: https://design.houseparty.dev) | A stable URL for every asset, and a showcase of them |
 | Gem | `houseaccount` on RubyGems | A Rails engine: serves the same tree from the gem, and the helpers |
-| npm | `houseaccount` | The controllers and stylesheets as importable source |
+| npm | `houseaccount` | The same built stylesheet and script, for any CDN that carries it |
 
 ## How to install
 
@@ -22,44 +28,13 @@ gem install houseaccount
 
 ```ruby
 # Gemfile
-gem 'houseaccount', '~> 0.14.0'
-```
-
-`~> 0.14.0` stops short of `0.15`, since below 1.0 a minor release may break whatever it likes.
-Rails 8.1 and Ruby 3.2 are the minimum.
-
-### From npm
-
-For a host that bundles the sources itself rather than serving the gem's built tree.
-
-```bash
-npm install houseaccount
-```
-
-```js
-import 'houseaccount'
-import 'houseaccount/houseaccount.css'
+gem 'houseaccount', '~> 0.15.0'
 ```
 
-The module exports nothing and is imported for its effect: it starts Stimulus, registers every
-controller the house's markup names, and hands Turbo the dialog it draws for a confirmation.
-
-Bootstrap 6 is not on npm, so the bundle ships inside this package and a bundler has to send the
-bare `bootstrap` specifier there:
+bh comes with it; nothing else has to be named.
 
-```js
-// esbuild
-alias: { bootstrap: 'houseaccount/bootstrap' }
-```
-
-A single controller comes from `houseaccount/controllers`, for a host registering its own
-Stimulus application rather than taking the house's:
-
-```js
-import WallController from 'houseaccount/controllers/wall_controller.js'
-```
-
-Pin as a Gemfile does, and for the same reason: `"houseaccount": "~0.14.0"` stops short of `0.15`.
+`~> 0.15.0` stops short of `0.16`, since below 1.0 a minor release may break whatever it likes.
+Rails 8.1 and Ruby 3.2 are the minimum.
 
 A page takes the gem's layout, and wears the same head:
 
@@ -95,84 +70,68 @@ which Pages redirects away from.
 
 With the gem in the bundle an app serves `/css/houseaccount.css`, `/js/houseaccount.js`,
 `/theme/*`, `/font/*`, `/logo/*` and `/favicon/*` itself — and its own version's copy under
-`/v0.14.1/`, which is what the head helper links, cached for a year — answers a 400, 404, 406, 422 or 500
-with the house's own page, and has these helpers in every view:
+`/v0.15.0/`, which is what the head helper links, cached for a year — answers a 400, 404, 406,
+422 or 500 with the house's own page, and answers `/down.html` with this app's.
+
+## Which app this is
+
+Read off the Rails application's own name, the `Goldrush` of `Goldrush::Application`. That is
+what its tab wears, what `houseaccount_head_tags` links without an argument, and whose page the
+engine answers `/down.html` with — the app's mark in the middle and the house's at the foot. An
+app the family has no mark for wears the cube.
+
+## The helpers
 
 ```erb
-<%# In the <head>: the viewport, color-scheme and Turbo refresh metas, the stylesheet, the script,
-    and the icons a tab, a phone and a manifest ask for — this app's, by its name. %>
+<%# In the <head>: the viewport, color-scheme and Turbo refresh metas, the stylesheet, the
+    script, and the icons a tab, a phone and a manifest ask for — this app's, by its name. %>
 <%= houseaccount_head_tags %>
 
 <%# The icons alone, for a head of the host's own: this app's unless another of the family is
-    named, the way a page for providers wears the house's cube rather than the app's. A host of
-    recourse needs no call at all — the gem answers recourse's `recourses/head` with them, so an
-    admin's tab wears the app's cube the moment the gem is in the bundle. %>
+    named, the way a page for customers wears the house's cube rather than the app's. A host of
+    recourse needs no call at all — the gem answers recourse's `recourses/head` with them. %>
 <%= houseaccount_icons :houseaccount %>
 
-<%# A mark beside its name, as one word and one link. The house's cube and `houseaccount`
-    leading to houseaccount.com by default, the way a page signs itself in a footer; any
-    app's own with its name and wherever `href` says. Other options are attributes of the
-    link. Under the cursor the whole logo turns the mark's blue. %>
+<%# A mark beside its name, as one word and one link. Each drawing fills its 512 grid
+    differently, so equal sizes never align: every mark is rendered at a box of its own and
+    pushed down by its own nudge, and its ink then stands on the baseline. %>
 <%= houseaccount_logo %>
 <%= houseaccount_logo app: :fountain, href: root_path, class: 'fs-3' %>
 
-<%# A thread of messages, newest at the foot, and — where `url` is given — the field that
-    posts the next one there, suggesting `hints` one at a time in its placeholder. %>
-<%= chat_with url: chat_question_path, hints: Provider::Chat::HINTS, messages: messages %>
-
-<%# What the flash says, as toasts at the bottom right: green for a notice, red for an alert,
-    neutral for any other key; visible at first paint, gone after a moment or a click, held
-    while read. A value in the flash that is not words is left alone. %>
-<%= notices %>
-
-<%# A link and the dialog it opens: headed, with an X, holding the block, and closed by an
-    `Okay` too (`okay:` words it otherwise, `okay: false` leaves it out). The two share an id
-    made from the link's words; any other option is an attribute of the link. %>
-<%= dialog 'I’m not on Google Business', title: 'Not a problem' do %>
-  We will look your business up ourselves and match it by hand.
-<% end %>
-
-<%# The house's form, from `builder: HouseAccount::FormBuilder` or a controller's
-    `default_form_builder`: `fieldset` a one-column grid with a legend where given, a label a
-    form-label, a text or phone field a large control — the phone one shaped by the `phone`
-    controller — a submit or a button the solid pill, a `type: :button` one the outlined pill, a
-    disabled one given a `title` saying why on hover, and
-    `pin_field` the six slots a code is typed into, one real field offered by the phone from the
-    text that brought it. %>
-<%= form.fieldset do %>
-  <%= form.label :pin_confirmation, '6-digit code' %>
-  <%= form.pin_field :pin_confirmation, required: true %>
-  <%= form.submit 'Confirm' %>
-<% end %>
-
 <%# An asset on the design site, for a page this app does not serve — a mail, say. %>
 <%= image_tag houseaccount_url('logo/fountain.png') %>
 ```
 
-Two more behaviors need no helper either, only an attribute. A `<select>` becomes Bootstrap's
-combobox — a toggle reading the pick, a menu with a search box, a check per pick where it
-is `multiple` — and stays the one thing the form submits:
+## The layout
+
+A page takes the gem's layout and wears the same head:
+
+```ruby
+class Unauthenticated::AgentsController < ApplicationController
+  layout 'houseaccount'
+end
+```
 
 ```erb
-<%= f.select :team_id, Team.pluck(:name, :id), { include_blank: 'None' },
-      data: { controller: 'combobox', combobox_placeholder_value: 'Select…',
-              search: 'Search…', clear: 'Clear search', no_results: 'No results found' } %>
+<% content_for :title, 'Authenticating as admin' %>
+<% content_for :head, tag.meta(name: 'robots', content: 'noindex') %>
+<h1>Authenticating as admin</h1>
 ```
 
-On a `multiple` select, `data-combobox-all-value` names an `All` row that puts held-back
-options on the menu and `data-combobox-more-value` words the toggle when several are picked
-(`%{first} + %{count} more`); on an option, `data-count` puts a figure beside it and
-`data-hidden` holds it back until `All`. A pick is announced as the select's own `change`.
+<p>
+  <img src='screenshot/layout-light.png' width='49%' alt='The page in light mode'>
+  <img src='screenshot/layout-dark.png' width='49%' alt='The page in dark mode'>
+</p>
+
+It is the charset, the title, the CSRF and CSP metas, `houseaccount_head_tags`, `yield :head`,
+then `yield` inside a `main.container-fluid`, and `notices` after it — and nothing else. A host
+wanting more copies it into its own `app/views/layouts/`, which wins on being earlier in the
+view paths.
 
-And any link or form with `data-turbo-confirm` asks through a Bootstrap dialog the bundle
-draws on the first ask: the first line of the message is the question, the rest are
-paragraphs, and the answer wears the words of the button that asked. A host in another
-language names the other word in `<meta name='houseaccount-cancel'>`.
+## The flow, and the wall it stands on
 
-`flow` draws the page of a signup flow around a card: the mark over the wall, a title, a
-line under it, the card, and the way out at the foot. A layout of the app's own calls it and
-nests on the gem's layout, giving the page as `content_for :content` and rendering the gem's
-as a template:
+`flow` is bh's page-of-a-signup-flow with the house's two things added: the lockup in its header
+and the cyanotype behind the card. A layout of the app's own calls it and nests on the gem's:
 
 ```erb
 <% content_for :logo, 'houseaccount' %>
@@ -186,49 +145,23 @@ as a template:
 <%= render template: 'layouts/houseaccount' %>
 ```
 
-A form's controls sit in `form.fieldset`, a grid, with a `legend` over them where a page has
-one; `form.label` given both its words and a block wraps the control those words name, which is
-the cell a card wide enough for two columns lays out. Every kind of field is dressed by the
-builder rather than by the page — a number, a menu, a box that is ticked — so a view names the
-kind it wants and no class at all, and `form.combobox` is a menu the bundle searches, given the
-words it says before a pick. Everything else in the fieldset keeps the whole row, and
-the card is what is measured rather than the window, so a narrow one stays in one column.
-
-`content_for :logo` is which of the family's marks the tab wears, for a page a customer reads
-rather than the app's own people: unsaid, it is this app's, by its name.
-
-The words are the view's, said in `content_for`: `:title` is the `h1`, `:subtitle` the line
-under it, drawn only where there is one, and `:width` how wide the card is, a CSS length that
-is `75rem` unless said — a page asking one question, a sign-in say, says `30rem`. What the layout knows goes in the call:
-`footer:` is the pieces of the foot, joined by a middot, none drawing no foot, and `logo:`
-where the mark links, the house's front door unless said.
-
-The wall alone is one attribute, `data-controller='wall'`, on any element that should
-stand on it.
-
-A message is anything answering six methods, and `HouseAccount::Message` is one for a host
-that has the facts and no model to hang them on:
-
-| Method | What it says |
-| --- | --- |
-| `side` | `:left` for the other party's bubble, `:right` for the reader's |
-| `text` | what was said — a string, or markup the host rendered; nil draws the typing dots |
-| `sender` | who said it, shown small above the bubble; nil shows nobody |
-| `at` | when, as `3 minutes ago` with the moment itself in a tooltip; nil shows no time |
-| `delivery` | `:delivered`, `:sent`, `:failed` or `:undelivered`, a ✓ or ✕ in its tone; nil for none |
-| `cost` | dollars the message cost, shown as `· $0.0123`; nil for none |
+`logo:` is where the mark links, the house's front door unless said; `footer:` the pieces of the
+foot, joined by a middot, none drawing no foot. Everything else — `:title`, `:subtitle`,
+`:width`, how the card lays its fields out — is bh's, and is
+[documented there](https://claudiob.github.io/bh/). `content_for :logo` is which of the family's
+marks the tab wears, for a page a customer reads rather than the app's own people.
 
-```ruby
-HouseAccount::Message.new side: :left, text: answer.note, sender: 'Claude', at: answer.created_at,
-                          cost: Chat.spent_on(answer.input_usage, answer.output_usage)
-```
+The wall alone is one attribute, `data-controller='wall'`, on any element that should stand on
+it: fourteen trade tools and the family's five marks drifting up in seven columns, on blueprint
+blues of its own so it reads the same whatever the primary is. Under `prefers-reduced-motion`
+the columns stand still.
+
+## A code sent to a phone
 
-A code sent to a phone is the same words from every app, `HouseAccount.one_time_code`, in
-each voice they are said in. `written` is the sentence a person reads and, under it, the
-`@host #code` line that offers the code above the keyboard on the phone it arrived on;
-`spoken` is the sentence alone, its digits one at a time so a listener can write them down.
-The host is the application's default one unless `host:` says otherwise, and the words are
-the gem's `config/locales` entry.
+The same words from every app, in each voice they are said in. `written` is the sentence a
+person reads and, under it, the `@host #code` line that offers the code above the keyboard on
+the phone it arrived on; `spoken` is the sentence alone, its digits one at a time so a listener
+can write them down.
 
 ```ruby
 HouseAccount.one_time_code(contact.pin).written
@@ -237,6 +170,8 @@ HouseAccount.one_time_code(contact.pin).spoken
 # => "Enter this 6-digit code to proceed: 4, 8, 2, 9, 1, 3"
 ```
 
+## Off the gem
+
 A page not on the gem links the two files from the site, and nothing else:
 
 ```html
@@ -248,19 +183,19 @@ Those follow the latest release. Every release is also kept whole under its own
 forever and cached for a year, for a page that would rather move on its own terms:
 
 ```html
-<link rel='stylesheet' href='https://design.houseaccount.com/v0.14.1/css/houseaccount.css'>
-<script type='module' src='https://design.houseaccount.com/v0.14.1/js/houseaccount.js'></script>
+<link rel='stylesheet' href='https://design.houseaccount.com/v0.15.0/css/houseaccount.css'>
+<script type='module' src='https://design.houseaccount.com/v0.15.0/js/houseaccount.js'></script>
 ```
 
 The same two files come from any CDN that carries the npm package, for a page that would
 rather not depend on the site at all:
 
 ```html
-<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/houseaccount@0.14.1/public/css/houseaccount.css'>
-<script type='module' src='https://cdn.jsdelivr.net/npm/houseaccount@0.14.1/public/js/houseaccount.js'></script>
+<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/houseaccount@0.15.0/public/css/houseaccount.css'>
+<script type='module' src='https://cdn.jsdelivr.net/npm/houseaccount@0.15.0/public/js/houseaccount.js'></script>
 ```
 
-The palettes are beside them, at `public/theme/nord.css` and the rest. A published version is never
+The palettes are beside them, at `public/theme/nord.css` and the rest — bh's nine, copied out of the gem at build time to the path hosts have always linked. A published version is never
 written again, so that URL is owed its bytes for as long as npm stands.
 
 A host with a Content Security Policy allows whichever origin it names for `style-src`,
@@ -268,13 +203,14 @@ A host with a Content Security Policy allows whichever origin it names for `styl
 
 ## What is in the bundle
 
-`css/houseaccount.css` is Bootstrap 6 alpha as upstream ships it, Bootstrap Icons cut down to
-the glyphs `art/icons.txt` names — the ones `unicon` maps and the few written out by name —
-and then the house's rules by concern under `app/stylesheets/houseaccount/`. Quicksand, the
-lockup's face, is served from `/font` too; nothing on a page reaches another origin. `js/houseaccount.js` is
-Turbo (with the cable element `turbo-rails` signs its streams for), Bootstrap, and a Stimulus
-application with every controller the house's markup names, started once under
-`window.Stimulus`. Everything is drawn for light and dark alike: every color is a Bootstrap
+`css/houseaccount.css` is bh's stylesheet — Bootstrap 6 alpha as upstream ships it, then bh's
+own rules — followed by Bootstrap Icons cut down to the glyphs `art/icons.txt` names (the ones
+`unicon` maps and the few written out by name) and the house's three: the page, the lockup and
+the wall. Quicksand, the lockup's face, is served from `/font` too; nothing on a page reaches
+another origin. `js/houseaccount.js` is bh's script — Turbo (with the cable element
+`turbo-rails` signs its streams for), Bootstrap, and a Stimulus application holding every
+controller bh's markup names, started once under `window.Stimulus` — and then `wall`, the one
+controller that is the house's own. Everything is drawn for light and dark alike: every color is a Bootstrap
 token or a `light-dark()` pair, and `data-bs-theme` on `<html>` forces either. A phone is
 formatted in the browser: the server hands over ten digits and
 `data-controller='phone'`, and the controller decides `555-555-5555`.
@@ -289,6 +225,10 @@ rake icons                # after editing art/icons.txt, the glyphs the icon fon
 cd test/dummy && bin/rails server
 ```
 
+The build reads bh's sources out of the gem — `bundle info bh --path` — rather than out of
+`node_modules`, so the Gemfile is the one place bh's version is pinned. An edit to bh shows in
+this bundle on the next `rake assets`.
+
 The built `public/css`, `public/js`, `public/font` and `public/theme` are committed: the gem
 serves them, and `spec.files` is `git ls-files`. `rake assets` rebuilds and fails until the
 result is committed, so a source edit cannot ship without its build.

data/art/index.html.erb

@@ -34,7 +34,7 @@
   <body class='text-center'>
     <header class='container-fluid px-3 py-3 border-bottom d-flex flex-wrap justify-content-center align-items-baseline gap-3'>
       <a class='lockup quicksand' href='#'><svg aria-hidden='true' style='width: 1.0515em; height: 1.0515em; top: 0.18625em' viewBox='0 0 512 512'><g fill='none' stroke='#3b8ae8' stroke-width='28' stroke-linecap='round' stroke-linejoin='round' transform='rotate(45 256 256)'><path d='M196 60 L316 60 L316 372 L196 372 Z'/><path d='M196 120 L316 120'/><path d='M196 372 L256 470 L316 372'/><path d='M232 431 L256 470 L280 431 Z' fill='#1B5288'/></g></svg>design</a>
-      <nav class='fg-2'>the <a href='#theme'>themes</a>, <a href='#component'>components</a>, <a href='#page'>error pages</a>, <a href='#favicon'>icons</a> shared by <a href='https://pro.houseaccount.com/bookings' title='Fountain'><img class='design-mark' src='logo/fountain.svg' alt='Fountain'></a> <a href='https://gold.houseaccount.com/specialty_matches' title='Goldrush'><img class='design-mark' src='logo/goldrush.svg' alt='Goldrush'></a> <a href='https://providers.houseaccount.com/providers' title='Houston'><img class='design-mark' src='logo/houston.svg' alt='Houston'></a> <a href='https://checkout.houseaccount.com/providers' title='Autopilot'><img class='design-mark' src='logo/autopilot.svg' alt='Autopilot'></a></nav>
+      <nav class='fg-2'>the <a href='#lockup'>lockups</a>, <a href='#theme'>themes</a>, <a href='#page'>pages</a>, <a href='#favicon'>icons</a> shared by <a href='https://pro.houseaccount.com/bookings' title='Fountain'><img class='design-mark' src='logo/fountain.svg' alt='Fountain'></a> <a href='https://gold.houseaccount.com/specialty_matches' title='Goldrush'><img class='design-mark' src='logo/goldrush.svg' alt='Goldrush'></a> <a href='https://providers.houseaccount.com/providers' title='Houston'><img class='design-mark' src='logo/houston.svg' alt='Houston'></a> <a href='https://checkout.houseaccount.com/providers' title='Autopilot'><img class='design-mark' src='logo/autopilot.svg' alt='Autopilot'></a></nav>
     </header>
 
     <main class='container-fluid px-3'>
@@ -45,14 +45,14 @@
             <div class='card p-3'>
               <strong>Stylesheet</strong>
               <a class='design-url' href='css/houseaccount.css'><span class='d-none sm:d-inline'>https://design.houseaccount.com/</span>css/houseaccount.css</a>
-              <span class='small fg-2 mt-1'>Bootstrap 6 with extra icons and components</span>
+              <span class='small fg-2 mt-1'>bh's Bootstrap 6, then the icon subset and the brand</span>
             </div>
           </div>
           <div class='col-12 md:col-6'>
             <div class='card p-3'>
               <strong>Script</strong>
               <a class='design-url' href='js/houseaccount.js'><span class='d-none sm:d-inline'>https://design.houseaccount.com/</span>js/houseaccount.js</a>
-              <span class='small fg-2 mt-1'>Turbo, Bootstrap, and a Stimulus application</span>
+              <span class='small fg-2 mt-1'>bh's bundle, and the controller that paints the wall</span>
             </div>
           </div>
           <div class='col-12'>
@@ -74,117 +74,34 @@
         </button>
       </section>
 
-      <section class='design-section' id='component'>
-        <h2>Components</h2>
-        <h3 class='h5 design-subsection'>Buttons and badges</h3>
-        <div class='d-flex flex-wrap justify-content-center align-items-center gap-2'>
-          <button type='button' class='btn btn-solid theme-primary'>Solid</button>
-          <button type='button' class='btn btn-outline theme-primary'>Outline</button>
-          <button type='button' class='btn btn-link p-0 align-baseline'>Link</button>
-          <span class='badge'>enum</span>
-          <span class='badge theme-success'>delivered</span>
-          <span class='badge theme-danger'>failed</span>
-        </div>
-
-        <h3 class='h5 design-subsection'>Breadcrumb</h3>
-        <nav aria-label='Breadcrumb'><ol class='breadcrumb m-0 justify-content-center'>
-          <li class='breadcrumb-item'><a class='breadcrumb-link' href='#'><i class='bi bi-geo'></i> States</a></li>
-          <li class='breadcrumb-item'><span class='breadcrumb-link active'>California</span></li>
-        </ol></nav>
-
-        <h3 class='h5 design-subsection' id='table'>Tables</h3>
-        <div class='table-responsive' style='container-type: inline-size'>
-          <table class='table table-hover sm:table-stacked'>
-            <thead><tr>
-              <th scope='col'><i class='bi bi-bookmark' role='img' data-controller='tooltip' data-bs-placement='top' data-bs-title='Kept'></i></th>
-              <th scope='col'><a href='#'>Name <i class='bi bi-sort-down'></i></a></th>
-              <th scope='col'><a href='#'>Phone</a></th>
-              <th scope='col'><a href='#'>Status</a></th>
-              <th scope='col' class='recourse-counter'><i class='bi bi-briefcase' role='img' data-controller='tooltip' data-bs-placement='top' data-bs-title='Jobs'></i></th>
-            </tr></thead>
-            <tbody>
-              <tr class='recourse-kept'><td class='recourse-bookmark'><i class='bi bi-bookmark-fill'></i></td><td data-cell='Name'>Blue Crew</td><td data-cell='Phone'><span data-controller='phone'>4155550000</span></td><td data-cell='Status'><span class='badge'>active</span></td><td class='recourse-counter'><a href='#' data-cell='Jobs'><span class='recourse-counter-figure'>21</span><span class='recourse-counter-word'>21 jobs</span></a></td></tr>
-              <tr class='recourse-written'><td class='recourse-bookmark'><i class='bi bi-bookmark'></i></td><td data-cell='Name'>Nashville Plumbing</td><td data-cell='Phone'><span data-controller='phone'>6155550123</span></td><td data-cell='Status'><span class='badge'>draft</span></td><td class='recourse-counter'><a href='#' data-cell='Jobs'><span class='recourse-counter-figure'>3</span><span class='recourse-counter-word'>3 jobs</span></a></td></tr>
-              <tr><td class='recourse-bookmark'><i class='bi bi-bookmark'></i></td><td data-cell='Name'>Golden Gate Electric</td><td data-cell='Phone'><span data-controller='phone'>4155559876</span></td><td data-cell='Status'><span class='badge'>active</span></td><td class='recourse-counter'><a href='#' data-cell='Jobs'><span class='recourse-counter-figure'>38,405</span><span class='recourse-counter-word'>38,405 jobs</span></a></td></tr>
-            </tbody>
-          </table>
-        </div>
-
-        <h3 class='h5 design-subsection'>PIN</h3>
-        <form class='mx-auto' onsubmit='return false' style='max-width: 22rem'>
-          <div class='otp otp-lg' data-controller='otp' data-bs-otp='true'>
-            <input class='otp-input' inputmode='numeric' pattern='[0-9]{6}' minlength='6' maxlength='6' autocomplete='one-time-code' required type='text' name='pin' id='pin' aria-label='6-digit code'>
-          </div>
-        </form>
-
-        <h3 class='h5 design-subsection'>Combobox</h3>
-        <div class='d-flex flex-wrap justify-content-center gap-3 align-items-start'>
-          <div style='width: 16rem'>
-            <label class='form-label' for='team'>Team</label>
-            <select class='form-select' id='team' name='team' data-controller='combobox' data-combobox-placeholder-value='Select…' data-search='Search…' data-clear='Clear search' data-no-results='No results found'>
-              <option value=''>None</option>
-              <option value='1'>Blue Crew</option>
-              <option value='2' selected>Golden Gate Electric</option>
-              <option value='3'>Nashville Plumbing</option>
-            </select>
-          </div>
-          <div style='width: 16rem'>
-            <label class='form-label' for='markets'>Markets</label>
-            <select class='form-select form-select-sm' id='markets' name='markets[]' multiple data-controller='combobox' data-combobox-placeholder-value='Market' data-combobox-all-value='All markets' data-combobox-more-value='%{first} + %{count} more' data-search='Search…' data-clear='Clear search' data-no-results='No results found'>
-              <option value='1' data-count='38,405' selected>San Francisco</option>
-              <option value='2' data-count='21' selected>Nashville</option>
-              <option value='3' data-count='3'>Austin</option>
-              <option value='4' data-count='0' data-hidden>Boise</option>
-            </select>
-          </div>
+      <section class='design-section' id='lockup'>
+        <h2>Lockups</h2>
+        <p class='fg-2'>A mark beside its name, as one word and one link. Each drawing fills its 512 grid
+          differently, so equal sizes never align: every mark is rendered at a box of its own and pushed
+          down by its own nudge, and its ink then stands on the baseline and reaches Quicksand's ascender.
+          The two blues are the mark's rather than the theme's, so a lockup reads the same in every app.</p>
+        <div class='d-flex flex-wrap justify-content-center align-items-baseline gap-4 mt-3'>
+          <%- mark.each_key do |app| -%>
+          <a class='lockup quicksand' href='logo/<%= app %>.svg'><%= mark[app] %><%- if app == :houseaccount -%><span class='house'>house</span>account<%- else -%><%= app %><%- end -%></a>
+          <%- end -%>
         </div>
-
-        <h3 class='h5 design-subsection'>Confirm</h3>
-        <turbo-frame id='confirm-demo'>
-          <a class='btn btn-sm btn-solid theme-danger' href='#confirm-demo' data-turbo-method='get' data-turbo-frame='confirm-demo' data-turbo-confirm='Delete humanity?'>Delete state</a>
-        </turbo-frame>
-
-        <h3 class='h5 design-subsection'>Tooltip and relative time</h3>
-        <p>Hover the icon and the time: <i class='bi bi-telephone' role='img' data-controller='tooltip' data-bs-placement='top' data-bs-title='Phone'></i> ·
-          <time datetime='2026-09-13T12:00:00-04:00' data-controller='relative-time tooltip' data-bs-placement='left' data-bs-title='a moment ago'>Sep 13 at 12:00pm EDT</time></p>
-
-        <h3 class='h5 design-subsection'>Phone</h3>
-        <p>Phone: <span data-controller='phone'>4155550000</span></p>
-        <div class='mx-auto' style='max-width: 20rem'>
-          <label class='form-label' for='phone'>Phone</label>
-          <input class='form-control' type='tel' id='phone' data-controller='phone' data-action='keydown->phone#down input->phone#input' value='4155550000'>
-        </div>
-
-        <h3 class='h5 design-subsection'>Mask</h3>
-        <div class='form-control-plaintext d-flex justify-content-center gap-2 align-items-end' data-controller='reveal' data-reveal-plain-value='SEC-0000'>
-          <span data-reveal-target='mask'>********</span>
-          <button type='button' class='btn btn-link btn-sm p-0' data-action='reveal#show' data-reveal-target='button'>Show</button>
-        </div>
-
-        <h3 class='h5 design-subsection'>Toast</h3>
-        <div class='toast show mx-auto' role='status' aria-live='polite' style='position: static'>
-          <div class='toast-body d-flex align-items-center gap-2'><i class='bi bi-check-circle-fill fg-success'></i> Blue Crew was updated.</div>
+        <p class='fg-2 mt-4 mb-0'>At three sizes, to show the seating holds:</p>
+        <div class='d-flex flex-wrap justify-content-center align-items-baseline gap-4 mt-2'>
+          <a class='lockup quicksand' href='#lockup' style='font-size: 14px'><%= mark[:fountain] %>fountain</a>
+          <a class='lockup quicksand' href='#lockup'><%= mark[:fountain] %>fountain</a>
+          <a class='lockup quicksand' href='#lockup' style='font-size: 34px'><%= mark[:fountain] %>fountain</a>
         </div>
+      </section>
 
-        <h3 class='h5 design-subsection' id='chat'>Chat</h3>
-        <div class='chat-thread' data-controller='thread'>
-          <div class='chat' data-thread-target='messages'>
-            <small class='chat-aside chat-aside-out'>you <time datetime='2026-09-13T12:01:00-04:00' title='September 13, 2026 12:01'>a minute ago</time> <strong class='fg-success'>✓</strong></small>
-            <p class='chat-bubble chat-out'>How much did I bill last month?</p>
-            <small class='chat-aside chat-aside-in'><time datetime='2026-09-13T12:01:30-04:00' title='September 13, 2026 12:01'>a minute ago</time> · $0.0123</small>
-            <p class='chat-bubble chat-in'>Across 31 jobs, up from $9,800 the month before.</p>
-            <small class='chat-aside chat-aside-out'>you</small>
-            <p class='chat-bubble chat-out'>And the month before?</p>
-            <p class='chat-bubble chat-in chat-typing' aria-label='Typing'><span></span><span></span><span></span></p>
-          </div>
-          <form class='d-flex align-items-center' data-controller='require' action='#' onsubmit='return false'>
-            <label for='ask' class='visually-hidden'>Ask a question</label>
-            <input type='text' name='ask' id='ask' required autocomplete='off' class='form-control rounded-4 flex-grow-1 chat-ask'
-                   placeholder='How much did I bill last month?' data-thread-target='field' data-controller='placeholder'
-                   data-placeholder-questions-value='["How much did I bill last month?","Which ZIP codes book me most?","Which customers have booked me more than once?"]'>
-            <input type='submit' value='Send' class='btn btn-solid rounded-3 theme-primary ms-3'>
-          </form>
-        </div>
+      <section class='design-section' id='component'>
+        <h2>Components</h2>
+        <p class='fg-2'>They are not this gem's. The form that dresses every field, the combobox, the
+          6-digit code, the phone field, the dialog, the toasts, the thread of messages and the
+          twenty-two Stimulus controllers all live in <strong>bh</strong>, which is Bootstrap 6 for any
+          Rails app and has no opinion about this house. This gem depends on it and bundles it, so the
+          stylesheet and the script above already carry every one of them — and bh's own page draws each
+          beside the line of Ruby that produces it.</p>
+        <p class='mt-3'><a href='https://claudiob.github.io/bh/'>Bootstrap Helpers</a></p>
       </section>
 
       <section class='design-section' id='page'>
@@ -196,6 +113,15 @@
           <li><a href='page/422'>422 Unprocessable</a></li>
           <li><a href='page/500'>500 Server error</a></li>
         </ul>
+        <h3 class='h5 design-subsection'>Down</h3>
+        <p class='fg-2'>What an app shows while it is down — its own mark in the middle, the house's at
+          the foot. The engine answers <code>/down.html</code> with the right one, and Heroku's
+          <code>MAINTENANCE_PAGE_URL</code> points here, where the app is not.</p>
+        <ul class='list-unstyled d-flex flex-wrap justify-content-center gap-3'>
+          <%- mark.each_key do |app| -%>
+          <li><a href='down/<%= app %>'><%= app %></a></li>
+          <%- end -%>
+        </ul>
       </section>
 
       <section class='design-section' id='favicon'>