houseaccount 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 939b9379b9f9074c36dfafeaa68f37c91154a36976cd64025170653a71b1918a
-  data.tar.gz: 552f0b7b147cb46cb7edab29c293a6d570cd936f6198028694364f8de9f895c0
+  metadata.gz: 319d9ebb96bf0d727fc55eae76537b3dc1b7020f1998a3166fe8b9abf3a9d46b
+  data.tar.gz: 2ab4ff9df10a0bfebf212d00d3fb72926fe55e98fb151953e46172740a4c70f8
 SHA512:
-  metadata.gz: 0da5799f9fcfbb25157745e1641dbbace60b62d40eb344774ea123e2e909f08d912384810b1d9500a5c17d16ad7b17323f5a8fdd7e04ed5907d861a4e9adfb82
-  data.tar.gz: 06e33a1b81ca80e1ccc595be50bdfcc64b4756cda9e1de9741251e91183e5d742a62ed552c22d4017e1149f40de5196947d63afef0d1ee3026e761315f34396e
+  metadata.gz: 611605798bfb399f19931914a1487e128a193c3e006c33a5771e18775fa20a4a035f526f1e9616ed02bc5611ba61776b8b8eedef210a4cb438d5a57ae4e9e0e1
+  data.tar.gz: 0661a634ec3280f1a6d1d53fddb7c7df37035cb4f34d35fac7bc705a69edd99ca5e809675930b8374a1a8b509dc2500a04a0059a8e3f09d4b181578201f155da

data/CHANGELOG.md

@@ -7,6 +7,36 @@ For more information about changelogs, check [Keep a Changelog](http://keepachan
 
 ## [Unreleased]
 
+## 0.4.0 - 2026-09-14
+
+* [Feature] `houseaccount_icons` names an app's icons on its own, and answers recourse's head
+
+  The four icon links `houseaccount_head_tags` wrote are a helper of their own, for a head
+  the host draws itself, taking another app of the family by name where a page should wear
+  the house's cube rather than the app's. The gem also ships `recourses/_head.html.erb`
+  calling it, so a host of recourse 5.1 wears its own cube on every admin tab with nothing
+  written.
+
+* [Fix] The site answers a missing path with the not-found page, not the showcase
+
+  Cloudflare Pages serves `index.html` at 200 for any path without a file unless a root
+  `404.html` exists; a stylesheet asked for at a version the site did not carry came back
+  as HTML. The branded not-found page now sits at the root as well.
+
+* [Fix] A chat's field takes focus without scrolling the page to it
+
+  The showcase opened scrolled down to its chat, since the thread controller focused the
+  field on load and the browser followed. Focus no longer scrolls; a chat page is sized to
+  the window, so its field is in view regardless.
+
+## 0.3.1 - 2026-09-14
+
+* [Fix] The gem ships its layout
+
+  0.3.0 left `app/views` out of the gem along with the sources the build compiles, so a
+  host asking for `layout 'houseaccount'` found no template. The layout ships; the
+  JavaScript, stylesheet and font sources still stay behind.
+
 ## 0.3.0 - 2026-09-14
 
 * [Fix] A chat scrolls inside its card, and the page stands still

data/README.md

@@ -20,10 +20,10 @@ gem install houseaccount
 
 ```ruby
 # Gemfile
-gem 'houseaccount', '~> 0.3.0'
+gem 'houseaccount', '~> 0.4.0'
 ```
 
-`~> 0.3.0` stops short of `0.4`, since below 1.0 a minor release may break whatever it likes.
+`~> 0.4.0` stops short of `0.5`, 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:
@@ -60,7 +60,7 @@ 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.3.0/`, which is what the head helper links, cached for a year — answers a 400, 404, 406, 422 or 500
+`/v0.4.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 has these helpers in every view:
 
 ```erb
@@ -68,6 +68,12 @@ with the house's own page, and has these helpers in every view:
     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. %>
+<%= 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
@@ -190,8 +196,8 @@ 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.3.0/css/houseaccount.css'>
-<script type='module' src='https://design.houseaccount.com/v0.3.0/js/houseaccount.js'></script>
+<link rel='stylesheet' href='https://design.houseaccount.com/v0.4.0/css/houseaccount.css'>
+<script type='module' src='https://design.houseaccount.com/v0.4.0/js/houseaccount.js'></script>
 ```
 
 A host with a Content Security Policy allows that origin for `style-src`, `script-src` and

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

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <title><%= content_for(:title) || HouseAccount.app %></title>
+    <%- if protect_against_forgery? -%>
+    <meta name='csrf-param' content='<%= request_forgery_protection_token %>'>
+    <meta name='csrf-token' content='<%= form_authenticity_token %>'>
+    <%- end -%>
+    <%- if (csp = csp_meta_tag) -%>
+    <%= csp %>
+    <%- end -%>
+    <%= houseaccount_head_tags %>
+    <%- if content_for?(:head) -%>
+    <%= yield :head %>
+    <%- end -%>
+  </head>
+  <body class='min-vh-100 d-flex flex-column'>
+    <main class='container-fluid py-4 flex-grow-1 d-flex flex-column'>
+      <%= content_for?(:content) ? yield(:content) : yield %>
+    </main>
+    <%= notices %>
+  </body>
+</html>

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

@@ -0,0 +1 @@
+<%= houseaccount_icons %>

data/art/index.html.erb

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <title>HouseAccount design</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <meta name='color-scheme' content='light dark'>
+    <meta name='description' content='Every asset a HouseAccount app loads, and every component the houseaccount gem draws, in one place.'>
+    <link rel='icon' href='favicon/design.svg' type='image/svg+xml'>
+    <link rel='icon' href='favicon/design-96.png' type='image/png' sizes='96x96'>
+    <link rel='apple-touch-icon' href='favicon/design-180.png'>
+    <link rel='manifest' href='site.webmanifest'>
+    <!-- The same two files every HouseAccount page loads, by relative path so this page
+         reads the same on staging, on production and from a folder on disk. -->
+    <link rel='stylesheet' href='css/houseaccount.css'>
+    <link rel='stylesheet' href='theme/bootstrap.css' data-recourse-theme=''>
+    <script type='module' src='js/houseaccount.js'></script>
+    <style>
+      /* The page's own chrome and nothing else: everything shown below is styled by
+         css/houseaccount.css alone, which is the point of showing it. */
+      .design-section { padding-block: 2rem; border-block-end: var(--bs-border-width) solid var(--bs-border-color); }
+      .design-swatch { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 7rem; }
+      .design-swatch img { width: 4rem; height: 4rem; }
+      .design-url { font-family: var(--bs-font-monospace); font-size: var(--bs-font-size-sm); color: var(--bs-fg-2); overflow-wrap: anywhere; }
+      .design-shell { height: 18rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-radius-3); overflow: hidden; }
+      .design-shell .recourse-shell { height: 100%; }
+      .chat-thread { max-width: 36rem; }
+      /* The wall fills a viewport; here it fills a box, so the page can show it beside the rest. */
+      .design-wall { position: relative; height: 24rem; overflow: hidden; border-radius: var(--bs-radius-3); }
+      .design-wall .tools { position: absolute; }
+      .design-wall .flow { height: 100%; justify-content: center; }
+    </style>
+  </head>
+  <body>
+    <header class='container-fluid px-3 py-3 border-bottom d-flex align-items-center 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>
+      <span class='fg-2'>the front end every HouseAccount app shares</span>
+      <nav class='ms-auto d-flex gap-3 small'>
+        <a href='#logo'>Logos</a><a href='#favicon'>Favicons</a><a href='#theme'>Palettes</a>
+        <a href='#component'>Components</a><a href='#chat'>Chat</a><a href='#wall'>Wall</a><a href='#table'>Tables</a><a href='#page'>Pages</a>
+      </nav>
+    </header>
+
+    <main class='container-fluid px-3'>
+      <section class='design-section'>
+        <h1 class='quicksand'>Everything a HouseAccount page is made of</h1>
+        <p class='lead' style='max-width: 48rem'>
+          One stylesheet, one script, the marks every app is known by, and the pages shown when an
+          app is not. Each is at a stable path here; an app on the <code>houseaccount</code> gem
+          serves the same paths itself, and everything else links them from this origin.
+        </p>
+        <div class='row g-3' style='max-width: 60rem'>
+          <div class='col-12 md:col-6'>
+            <div class='card p-3'>
+              <strong>Stylesheet</strong>
+              <span class='design-url'>https://design.houseaccount.com/css/houseaccount.css</span>
+              <span class='small fg-2 mt-1'>Bootstrap 6 alpha, Bootstrap Icons and the house's own rules.</span>
+            </div>
+          </div>
+          <div class='col-12 md:col-6'>
+            <div class='card p-3'>
+              <strong>Script</strong>
+              <span class='design-url'>https://design.houseaccount.com/js/houseaccount.js</span>
+              <span class='small fg-2 mt-1'>Turbo, Bootstrap, and a Stimulus application with every controller the house names.</span>
+            </div>
+          </div>
+          <div class='col-12'>
+            <div class='card p-3'>
+              <strong>Pinned to a version — the latest is <%= version %></strong>
+              <span class='design-url'>https://design.houseaccount.com/v<%= version %>/css/houseaccount.css · /v<%= version %>/js/houseaccount.js · /v<%= version %>/theme/nord.css</span>
+              <span class='small fg-2 mt-1'>Every release stays at its own prefix forever, whole and cached for a year, for a page that moves on its own terms. The unversioned paths follow the latest.</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class='design-section' id='logo'>
+        <h2>Logos</h2>
+        <p class='fg-2'>One drawing per app under <code>/logo</code>, as SVG and as a 512-pixel PNG.</p>
+        <div class='d-flex flex-wrap gap-4'>
+          <figure class='design-swatch'><img src='logo/houseaccount.svg' alt='HouseAccount'><figcaption class='design-url'>logo/houseaccount.svg</figcaption></figure>
+          <figure class='design-swatch'><img src='logo/fountain.svg' alt='Fountain'><figcaption class='design-url'>logo/fountain.svg</figcaption></figure>
+          <figure class='design-swatch'><img src='logo/goldrush.svg' alt='Goldrush'><figcaption class='design-url'>logo/goldrush.svg</figcaption></figure>
+          <figure class='design-swatch'><img src='logo/houston.svg' alt='Houston'><figcaption class='design-url'>logo/houston.svg</figcaption></figure>
+          <figure class='design-swatch'><img src='logo/autopilot.svg' alt='Autopilot'><figcaption class='design-url'>logo/autopilot.svg</figcaption></figure>
+          <figure class='design-swatch'><img src='logo/design.svg' alt='Design'><figcaption class='design-url'>logo/design.svg</figcaption></figure>
+          <figure class='design-swatch'><img src='logo/houseaccount.png' alt='HouseAccount, bitmap'><figcaption class='design-url'>logo/houseaccount.png</figcaption></figure>
+        </div>
+      </section>
+
+      <section class='design-section' id='favicon'>
+        <h2>Favicons</h2>
+        <p class='fg-2'>What a tab, a phone and a manifest each ask for, per app under <code>/favicon</code>. The pink one is a local machine's.</p>
+        <div class='table-responsive'>
+          <table class='table table-hover' style='max-width: 60rem'>
+            <thead><tr><th scope='col'>App</th><th scope='col'>.svg</th><th scope='col'>-dev.svg</th><th scope='col'>-96.png</th><th scope='col'>-180.png</th><th scope='col'>-192.png</th><th scope='col'>-512.png</th><th scope='col'>.ico</th><th scope='col'>.webmanifest</th></tr></thead>
+            <tbody>
+              <tr><th scope='row'>houseaccount</th><td><img src='favicon/houseaccount.svg' width='24' alt=''></td><td><img src='favicon/houseaccount-dev.svg' width='24' alt=''></td><td><img src='favicon/houseaccount-96.png' width='24' alt=''></td><td><img src='favicon/houseaccount-180.png' width='24' alt=''></td><td><img src='favicon/houseaccount-192.png' width='24' alt=''></td><td><img src='favicon/houseaccount-512.png' width='24' alt=''></td><td><a href='favicon/houseaccount.ico'>ico</a></td><td><a href='favicon/houseaccount.webmanifest'>manifest</a></td></tr>
+              <tr><th scope='row'>fountain</th><td><img src='favicon/fountain.svg' width='24' alt=''></td><td><img src='favicon/fountain-dev.svg' width='24' alt=''></td><td><img src='favicon/fountain-96.png' width='24' alt=''></td><td><img src='favicon/fountain-180.png' width='24' alt=''></td><td><img src='favicon/fountain-192.png' width='24' alt=''></td><td><img src='favicon/fountain-512.png' width='24' alt=''></td><td><a href='favicon/fountain.ico'>ico</a></td><td><a href='favicon/fountain.webmanifest'>manifest</a></td></tr>
+              <tr><th scope='row'>goldrush</th><td><img src='favicon/goldrush.svg' width='24' alt=''></td><td><img src='favicon/goldrush-dev.svg' width='24' alt=''></td><td><img src='favicon/goldrush-96.png' width='24' alt=''></td><td><img src='favicon/goldrush-180.png' width='24' alt=''></td><td><img src='favicon/goldrush-192.png' width='24' alt=''></td><td><img src='favicon/goldrush-512.png' width='24' alt=''></td><td><a href='favicon/goldrush.ico'>ico</a></td><td><a href='favicon/goldrush.webmanifest'>manifest</a></td></tr>
+              <tr><th scope='row'>houston</th><td><img src='favicon/houston.svg' width='24' alt=''></td><td><img src='favicon/houston-dev.svg' width='24' alt=''></td><td><img src='favicon/houston-96.png' width='24' alt=''></td><td><img src='favicon/houston-180.png' width='24' alt=''></td><td><img src='favicon/houston-192.png' width='24' alt=''></td><td><img src='favicon/houston-512.png' width='24' alt=''></td><td><a href='favicon/houston.ico'>ico</a></td><td><a href='favicon/houston.webmanifest'>manifest</a></td></tr>
+              <tr><th scope='row'>design</th><td><img src='favicon/design.svg' width='24' alt=''></td><td><img src='favicon/design-dev.svg' width='24' alt=''></td><td><img src='favicon/design-96.png' width='24' alt=''></td><td><img src='favicon/design-180.png' width='24' alt=''></td><td><img src='favicon/design-192.png' width='24' alt=''></td><td><img src='favicon/design-512.png' width='24' alt=''></td><td><a href='favicon/design.ico'>ico</a></td><td><a href='favicon/design.webmanifest'>manifest</a></td></tr>
+              <tr><th scope='row'>autopilot</th><td><img src='favicon/autopilot.svg' width='24' alt=''></td><td><img src='favicon/autopilot-dev.svg' width='24' alt=''></td><td><img src='favicon/autopilot-96.png' width='24' alt=''></td><td><img src='favicon/autopilot-180.png' width='24' alt=''></td><td><img src='favicon/autopilot-192.png' width='24' alt=''></td><td><img src='favicon/autopilot-512.png' width='24' alt=''></td><td><a href='favicon/autopilot.ico'>ico</a></td><td><a href='favicon/autopilot.webmanifest'>manifest</a></td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class='design-section' id='theme'>
+        <h2>Palettes</h2>
+        <p class='fg-2'>Nine stylesheets under <code>/theme</code> that repaint Bootstrap's ramps; the toggle rotates through them and flips the mode, the way the sidebar's does.</p>
+        <div class='d-flex align-items-center gap-3'>
+          <button type='button' class='btn btn-outline theme-primary' data-controller='scheme' data-action='scheme#rotate'
+                  data-scheme-themes-value='["bootstrap","dawn","dracula","gruvbox","monokai","nord","one_dark","solarized","tokyo_night"]'
+                  data-scheme-path-value='theme' data-scheme-storage-value='recourse-scheme'>
+            <span class='recourse-scheme-light'><i class='bi bi-moon-fill'></i> Another palette, dark</span>
+            <span class='recourse-scheme-dark'><i class='bi bi-sun-fill'></i> Another palette, light</span>
+          </button>
+          <span class='design-url'>theme/&lt;name&gt;.css · bootstrap dawn dracula gruvbox monokai nord one_dark solarized tokyo_night</span>
+        </div>
+      </section>
+
+      <section class='design-section' id='component'>
+        <h2>Components</h2>
+        <p class='fg-2'>Bootstrap 6 as the house draws it. Every rule that differs from upstream is in <code>css/houseaccount.css</code>.</p>
+
+        <h3 class='h5 mt-4'>Buttons and badges</h3>
+        <div class='d-flex flex-wrap 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 mt-4'>Breadcrumb</h3>
+        <nav aria-label='Breadcrumb'><ol class='breadcrumb m-0'>
+          <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 mt-4'>PIN</h3>
+        <p class='fg-2 small'>What <code>pin_field form, :pin_confirmation</code> draws: one real field, six slots by Bootstrap, the code offered by the phone from the text that brought it, and a paste that sends itself.</p>
+        <form 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 mt-4'>Combobox</h3>
+        <p class='fg-2 small'>A <code>&lt;select data-controller='combobox'&gt;</code>, dressed by the bundle: a search box, a check per pick where it is <code>multiple</code>, an <code>All</code> row that puts held-back options on the menu, and a figure beside an option from <code>data-count</code>. The select stays what the form submits.</p>
+        <div class='d-flex flex-wrap 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>
+        </div>
+
+        <h3 class='h5 mt-4'>Confirm</h3>
+        <p class='fg-2 small'>Any link or form with <code>data-turbo-confirm</code> asks through a Bootstrap dialog the bundle draws on the first ask: the first line is the question, the rest are paragraphs, and the answer wears the words of the button that asked.</p>
+        <a class='btn btn-sm btn-solid theme-danger' href='#confirm-demo' data-turbo-method='delete' data-turbo-confirm='Delete California?&#10;&#10;58 counties and 3 markets will be deleted with it.&#10;12 messages will be kept, without a job.&#10;Anything under those goes too.&#10;&#10;This cannot be undone.'>Delete state</a>
+
+        <h3 class='h5 mt-4'>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 mt-4'>Phone</h3>
+        <p class='fg-2 small'>The server hands over ten digits and <code>data-controller='phone'</code>; the browser decides the shape, in a cell and in a field.</p>
+        <p>A cell: <span data-controller='phone'>4155550000</span></p>
+        <div 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 mt-4'>A masked value</h3>
+        <div class='form-control-plaintext d-flex 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 mt-4'>Toast</h3>
+        <div class='toast show' 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>
+        </div>
+      </section>
+
+      <section class='design-section' id='chat'>
+        <h2>Chat</h2>
+        <p class='fg-2'>What the <code>chat_with</code> helper draws: turns in on the left and out on the right, who said each and when, a delivery mark, what a turn cost, an answer being typed, and a field whose suggestion cycles.</p>
+        <div class='chat-thread' data-controller='thread'>
+          <div class='chat' data-thread-target='messages'>
+            <small class='chat-aside chat-aside-in'>Claude <time datetime='2026-09-13T12:00:00-04:00' title='September 13, 2026 12:00'>2 minutes ago</time></small>
+            <p class='chat-bubble chat-in'>Data loaded! What can I help with?</p>
+            <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'>Claude <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'><span class='fs-4 d-block'>$12,400</span>Across 31 jobs, up from $9,800 the month before.</p>
+            <small class='chat-aside chat-aside-out'>you <strong class='fg-danger'>✕</strong></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>
+
+      <section class='design-section' id='wall'>
+        <h2>Wall</h2>
+        <p class='fg-2'>A page of the signup flow, as <code>flow</code> draws it around a card: the mark over a cyanotype of the trades a homeowner books, drifting up in columns with the family's marks among them, a title, a line, the card as wide as <code>width:</code> says, and the way out. One attribute draws the wall, <code>data-controller='wall'</code>. Blueprint blues in light, inverted in dark.</p>
+        <div class='design-wall'>
+          <div class='flow' data-controller='wall'>
+            <header><a class='lockup quicksand' href='#wall'><svg aria-hidden='true' style='width: 0.8117em; height: 0.8117em; top: 0.0358em' viewBox='0 0 512 512'><g fill='none' stroke='#3b8ae8' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'><path d='M256 302Q256 256 295.8 233L406.2 169.3Q446 146.3 446 192.3V319.7Q446 365.7 406.2 388.7L295.8 452.4Q256 475.4 256 429.4Z' fill='#1B5288'/><path d='M216.2 59.6Q256 36.6 295.8 59.6L406.2 123.3Q446 146.3 446 192.3V319.7Q446 365.7 406.2 388.7L295.8 452.4Q256 475.4 216.2 452.4L105.8 388.7Q66 365.7 66 319.7V192.3Q66 146.3 105.8 123.3Z'/><path d='M256 256 95.4 163.3'/><path d='M256 256 416.6 163.3'/><path d='M256 256V441.4'/></g></svg><span class='house'>house</span>account</a></header>
+            <h1>Welcome to HouseAccount</h1>
+            <p>Enter the phone number of your business and we’ll text a verification code</p>
+            <div class='flow-card p-3 md:p-4 mx-auto'>
+              <form class='p-0' data-controller='require' onsubmit='return false'>
+                <fieldset class='d-grid'>
+                  <label class='form-label' for='wall-phone'>Your mobile number</label>
+                  <input class='form-control' type='tel' id='wall-phone' required data-controller='phone' data-action='keydown->phone#down input->phone#input'>
+                </fieldset>
+                <input type='submit' value='Join' class='btn btn-solid theme-primary mt-3'>
+              </form>
+            </div>
+            <footer><a href='#wall'>Sign out</a><span class='fg-2' aria-hidden='true'>·</span><a href='#wall'>Disconnect Jobber</a></footer>
+          </div>
+        </div>
+      </section>
+
+      <section class='design-section' id='table'>
+        <h2>Tables</h2>
+        <p class='fg-2'>A recourse table: sortable headings with an icon, a kept row, the row a write just landed on, and cells that stack under 576 pixels.</p>
+        <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>
+      </section>
+
+      <section class='design-section' id='page'>
+        <h2>Pages</h2>
+        <p class='fg-2'>What a HouseAccount app answers when it cannot answer, under <code>/page</code>. The <code>houseaccount</code> engine serves them for every status.</p>
+        <ul class='list-unstyled d-flex flex-wrap gap-3'>
+          <li><a href='page/400'>400 Bad request</a></li>
+          <li><a href='page/404'>404 Not found</a></li>
+          <li><a href='page/406-unsupported-browser'>406 Unsupported browser</a></li>
+          <li><a href='page/422'>422 Unprocessable</a></li>
+          <li><a href='page/500'>500 Server error</a></li>
+        </ul>
+        <p class='fg-2'>And what each app shows while it is down, under <code>/down</code>: its own mark in the middle, the house's at the foot. The engine answers <code>/down.html</code> with the host's own once <code>Houseaccount.app</code> names it, and Heroku's maintenance page points here.</p>
+        <ul class='list-unstyled d-flex flex-wrap gap-3'>
+          <li><a href='down/fountain'>fountain</a></li>
+          <li><a href='down/goldrush'>goldrush</a></li>
+          <li><a href='down/houston'>houston</a></li>
+          <li><a href='down/autopilot'>autopilot</a></li>
+          <li><a href='down/design'>design</a></li>
+        </ul>
+      </section>
+    </main>
+
+    <footer class='container-fluid px-3 py-4 small fg-2 d-flex flex-wrap gap-3'>
+      <span>The <code>houseaccount</code> gem draws all of this in a Rails app.</span>
+      <a href='https://github.com/HouseAccountEng/design'>Source</a>
+      <a href='https://rubydoc.info/gems/houseaccount'>Reference</a>
+      <a href='https://rubygems.org/gems/houseaccount'>RubyGems</a>
+    </footer>
+  </body>
+</html>

data/lib/houseaccount/helpers/heads.rb

@@ -18,25 +18,26 @@ module HouseAccount
           tag.meta(name: 'turbo-refresh-scroll', content: 'preserve'),
           tag.link(rel: 'stylesheet', href: "/v#{VERSION}/css/houseaccount.css"),
           tag.script('', type: 'module', src: "/v#{VERSION}/js/houseaccount.js"),
-          *houseaccount_icon_tags,
+          houseaccount_icons,
         ], INDENT
       end
 
-      # An asset on the design site by its path, for a page this engine does not serve.
-      def houseaccount_url(path) = "#{HouseAccount.url}/#{path}"
-
-    private
-
-      def houseaccount_icon_tags
-        app = HouseAccount.app
+      # The icons a tab, a home screen and a saved app know `app` by — this app unless said:
+      # the SVG, its dev variant while developing, the 96px PNG, the apple touch icon and the
+      # web manifest, one to a line. Also what `recourses/head` draws for a host of recourse.
+      def houseaccount_icons(app = HouseAccount.app)
         mark = Rails.env.development? ? "#{app}-dev" : app
-        [
+
+        safe_join [
           tag.link(rel: 'icon', href: "/favicon/#{mark}.svg", type: 'image/svg+xml'),
           tag.link(rel: 'icon', href: "/favicon/#{app}-96.png", type: 'image/png', sizes: '96x96'),
           tag.link(rel: 'apple-touch-icon', href: "/favicon/#{app}-180.png"),
           tag.link(rel: 'manifest', href: "/favicon/#{app}.webmanifest"),
-        ]
+        ], INDENT
       end
+
+      # An asset on the design site by its path, for a page this engine does not serve.
+      def houseaccount_url(path) = "#{HouseAccount.url}/#{path}"
     end
   end
 end

data/lib/houseaccount/version.rb

@@ -1,4 +1,4 @@
 module HouseAccount
   # Version of the gem, read by the gemspec and by hosts checking compatibility.
-  VERSION = '0.3.0'
+  VERSION = '0.4.0'
 end

data/public/404.html

@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>The page you were looking for doesn't exist (404 Not found)</title>
+    <meta name="color-scheme" content="light dark">
+    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <style>
+      @font-face {
+        font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('/font/quicksand-500-vietnamese.woff2') format('woff2');
+        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+      }
+      @font-face {
+        font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('/font/quicksand-500-latin-ext.woff2') format('woff2');
+        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      }
+      @font-face {
+        font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('/font/quicksand-500-latin.woff2') format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+      :root {
+        --bg: #fbfcfe;
+        --ink: #1B5288;
+        --mark: #3b8ae8;
+        --muted: #5c6c84;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #0f1622;
+          --ink: #9cc0ec;
+          --muted: #8698af;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        min-height: 100svh;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg);
+        font-family: "Quicksand", "Trebuchet MS", sans-serif;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+      }
+      main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 24px;
+        text-align: center;
+      }
+      .lockup {
+        white-space: nowrap;
+        max-width: 100%;
+        color: var(--ink);
+        line-height: 1;
+        margin: 0;
+      }
+      .lockup svg {
+        position: relative;
+        vertical-align: baseline;
+      }
+      main .lockup {
+        font-size: clamp(1.5rem, 5.5vw, 2.5rem);
+        font-weight: 500;
+        /* The longest heading is wider than a phone, so let it wrap rather than
+           overflow; the mark stays attached to the status code on the first line. */
+        white-space: normal;
+        text-wrap: balance;
+        line-height: 1.25;
+      }
+      main .lockup svg {
+        width: 1.0073em; height: 1.0073em;
+        top: 0.1337em;
+        margin-right: 0.1327em;
+      }
+      main p {
+        margin: 22px 0 0;
+        color: var(--muted);
+        font-size: 1rem;
+        line-height: 1.6;
+      }
+      footer {
+        position: sticky;
+        bottom: 0;
+        background: var(--bg);
+        display: flex;
+        justify-content: center;
+        padding: 20px 0 26px;
+      }
+      footer .lockup { font-size: 20px; }
+      footer .lockup svg {
+        width: 16.23px; height: 16.23px;
+        top: 0.72px;
+        margin-right: 4.2px;
+      }
+      footer .house { color: var(--mark); }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1 class="lockup"><svg viewBox="0 0 512 512" aria-hidden="true"><g fill="none" stroke="#3b8ae8" stroke-width="28" stroke-linecap="round"><path d="M251.4 235.6 C254.8 239.8 256.5 246.9 254 254.2 C251.6 261.5 245 268.8 235.4 272.3 C225.8 275.7 213.3 275.1 202.2 268.8 C191 262.6 181.5 250.6 178.1 235.6 C174.6 220.6 177.5 202.7 187.6 187.7 C197.6 172.8 215 161 235.4 157.6 C255.8 154.1 279.1 159.2 297.9 173.1 C316.6 187 330.6 209.8 334.1 235.6 C337.5 261.4 330.2 290.1 312.5 312.7 C294.7 335.3 266.6 351.5 235.4 354.9 C204.2 358.4 170.2 348.8 143.7 327.3 C117.3 305.7 98.8 272.2 95.4 235.6 C92 198.9 103.7 159.6 129.1 129.3 C154.5 99 193.3 78.4 235.4 74.9 C277.5 71.5 322.2 85.5 356.3 114.7 C390.4 143.9 413.3 188.1 416.7 235.6 C420.2 283.1 404 333.2 370.9 371.1 C337.9 409 288.3 434.1 235.4 437.6"/></g></svg>404 Not found</h1>
+      <p>You may have mistyped the address or the page may have moved.</p>
+    </main>
+    <footer>
+      <p class="lockup"><svg viewBox="0 0 512 512" aria-hidden="true"><g fill="none" stroke="#3b8ae8" stroke-width="28" stroke-linecap="round" stroke-linejoin="round"><path d="M256.0 302.0 Q256.0 256.0 295.8 233.0 L406.2 169.3 Q446.0 146.3 446.0 192.3 L446.0 319.7 Q446.0 365.7 406.2 388.7 L295.8 452.4 Q256.0 475.4 256.0 429.4 Z" fill="#1B5288"/><path d="M216.2 59.6 Q256.0 36.6 295.8 59.6 L406.2 123.3 Q446.0 146.3 446.0 192.3 L446.0 319.7 Q446.0 365.7 406.2 388.7 L295.8 452.4 Q256.0 475.4 216.2 452.4 L105.8 388.7 Q66.0 365.7 66.0 319.7 L66.0 192.3 Q66.0 146.3 105.8 123.3 Z"/><path d="M256.0 256.0 L95.4 163.3"/><path d="M256.0 256.0 L416.6 163.3"/><path d="M256.0 256.0 L256.0 441.4"/></g></svg><span class="house">house</span>account</p>
+    </footer>
+  </body>
+</html>

data/public/index.html

@@ -66,8 +66,8 @@
           </div>
           <div class='col-12'>
             <div class='card p-3'>
-              <strong>Pinned to a version</strong>
-              <span class='design-url'>https://design.houseaccount.com/v0.2.0/css/houseaccount.css · /v0.2.0/js/houseaccount.js · /v0.2.0/theme/nord.css</span>
+              <strong>Pinned to a version — the latest is 0.4.0</strong>
+              <span class='design-url'>https://design.houseaccount.com/v0.4.0/css/houseaccount.css · /v0.4.0/js/houseaccount.js · /v0.4.0/theme/nord.css</span>
               <span class='small fg-2 mt-1'>Every release stays at its own prefix forever, whole and cached for a year, for a page that moves on its own terms. The unversioned paths follow the latest.</span>
             </div>
           </div>