houseaccount 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de7a17a9106491567876581098b93d4320dd463a29e3cc917f87ee2c54e4d532
-  data.tar.gz: 9a46cdc89dd6f090736d7f82bd8dfb74385d42479c25b46fe0d721b7f065ec4c
+  metadata.gz: 247974e6010176c5287b60457bafb5a026ad1ee501c944ce780e3cadb1211225
+  data.tar.gz: a0c0a478884552c608ff2e9374fbd97fdabc292089cdc752168210da18460b77
 SHA512:
-  metadata.gz: 5b5c2d9bc1997a8aa938788f0f46b7da04c43642672142654ba0486151333c17449608860f6027d4068382c1ad6ea041da6bdd74ab5bd4efbd92d5e128b47cb4
-  data.tar.gz: 8f468506e8349470d44f2a5661c92517a46ddc0542144cc72a079419c605f059260ef1a6b155c9ee4059363c6c36f321167bc1965bea8d68db615c82dc1b5bf4
+  metadata.gz: b4aa364acf156ea2fc1430232ed75f98d9e3416d7b7099016f7e981d8d9592dfe49f8c43237e2204552f05fcce2e2800c50f41e0857e75d52874804e2f24265b
+  data.tar.gz: 5e0a5e27071c4e0416bf8085b995aa733db8f10784bf9ca2f6690e0e07aa25c7be90365647253fb73504a19cd88a36b3ac832086559e5b801fceb962473639aa

data/CHANGELOG.md

@@ -7,6 +7,22 @@ For more information about changelogs, check [Keep a Changelog](http://keepachan
 
 ## [Unreleased]
 
+## 0.12.0 - 2026-09-17
+
+* [Change] The showcase shows rather than describes
+
+  The page at design.houseaccount.com carried a paragraph over every component saying what
+  the component below it was about to do. Each is gone: the thing itself is on the page, a
+  few pixels under where the description stood, and it is the one that cannot go stale. What
+  is left is the name of each component and, where a path is named, a link to the file.
+
+  The page reads down the middle now, and its sections stand in the order somebody comes for
+  them: Components — with Chat, Wall and Tables as subsections of it, which is what they
+  always were — then Error pages, Palettes and Icons, which is Favicons with the drawing
+  under `/logo` as its first column. The header says what the page is in one sentence: the
+  components, error pages, palettes and icons shared by Fountain, Goldrush, Houston and
+  Autopilot, each mark linking to its own host.
+
 ## 0.11.0 - 2026-09-16
 
 * [Feature] The built stylesheet and script are in the package, for a page that links them
@@ -15,7 +31,7 @@ For more information about changelogs, check [Keep a Changelog](http://keepachan
   script opens on three bare specifiers nothing resolves without an import map, and the
   stylesheet is fourteen `@import` lines a browser would fetch one after another. So the
   built `css/`, `js/`, `theme/` and `font/` ship beside them, and a page on any host links
-  one file from a CDN holding the package — `cdn.jsdelivr.net/npm/houseaccount@0.11.0/` —
+  one file from a CDN holding the package — `cdn.jsdelivr.net/npm/houseaccount@0.11.0/public/` —
   at a version that is owed those bytes for good, npm never letting one be written twice.
 
 * [Change] Every URL inside the stylesheet is relative

data/README.md

@@ -22,10 +22,10 @@ gem install houseaccount
 
 ```ruby
 # Gemfile
-gem 'houseaccount', '~> 0.11.0'
+gem 'houseaccount', '~> 0.12.0'
 ```
 
-`~> 0.11.0` stops short of `0.12`, since below 1.0 a minor release may break whatever it likes.
+`~> 0.12.0` stops short of `0.13`, since below 1.0 a minor release may break whatever it likes.
 Rails 8.1 and Ruby 3.2 are the minimum.
 
 ### From npm
@@ -59,7 +59,7 @@ Stimulus application rather than taking the house's:
 import WallController from 'houseaccount/controllers/wall_controller.js'
 ```
 
-Pin as a Gemfile does, and for the same reason: `"houseaccount": "~0.11.0"` stops short of `0.12`.
+Pin as a Gemfile does, and for the same reason: `"houseaccount": "~0.12.0"` stops short of `0.13`.
 
 A page takes the gem's layout, and wears the same head:
 
@@ -95,7 +95,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.11.0/`, which is what the head helper links, cached for a year — answers a 400, 404, 406, 422 or 500
+`/v0.12.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
@@ -191,7 +191,7 @@ 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 `30rem` unless said — a chat's page says `75rem`. What the layout knows goes in the call:
+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.
 
@@ -240,19 +240,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.11.0/css/houseaccount.css'>
-<script type='module' src='https://design.houseaccount.com/v0.11.0/js/houseaccount.js'></script>
+<link rel='stylesheet' href='https://design.houseaccount.com/v0.12.0/css/houseaccount.css'>
+<script type='module' src='https://design.houseaccount.com/v0.12.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.11.0/css/houseaccount.css'>
-<script type='module' src='https://cdn.jsdelivr.net/npm/houseaccount@0.11.0/js/houseaccount.js'></script>
+<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/houseaccount@0.12.0/public/css/houseaccount.css'>
+<script type='module' src='https://cdn.jsdelivr.net/npm/houseaccount@0.12.0/public/js/houseaccount.js'></script>
 ```
 
-The palettes are beside them, at `/theme/nord.css` and the rest. A published version is never
+The palettes are beside them, at `public/theme/nord.css` and the rest. 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`,

data/art/index.html.erb

@@ -19,113 +19,57 @@
       /* 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-section > p { max-width: 48rem; margin-inline: auto; }
+      .design-subsection { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: var(--bs-border-width) dashed var(--bs-border-color); }
+      .design-mark { width: 1.5rem; height: 1.5rem; }
+      .design-logo { width: 2.5rem; height: 2.5rem; }
       .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; }
+      .chat-thread { max-width: 36rem; margin-inline: auto; }
       /* 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'>
+  <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>
-      <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>
+      <nav class='fg-2'>the <a href='#component'>components</a>, <a href='#page'>error pages</a>, <a href='#theme'>palettes</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'>
       <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'>
+        <h1 class='quicksand'>Multiple apps, same front-end</h1>
+        <div class='row g-3 mx-auto' 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>
+              <a class='design-url' href='css/houseaccount.css'>https://design.houseaccount.com/css/houseaccount.css</a>
+              <span class='small fg-2 mt-1'>Bootstrap 6 alpha, Bootstrap Icons and the components below.</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>
+              <a class='design-url' href='js/houseaccount.js'>https://design.houseaccount.com/js/houseaccount.js</a>
+              <span class='small fg-2 mt-1'>Turbo, Bootstrap, and a Stimulus application</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>
+              <span class='design-url'><a href='v<%= version %>/css/houseaccount.css'>v<%= version %>/css/houseaccount.css</a> · <a href='v<%= version %>/js/houseaccount.js'>v<%= version %>/js/houseaccount.js</a> · <a href='v<%= version %>/theme/nord.css'>v<%= version %>/theme/nord.css</a></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'>
+        <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>
@@ -134,23 +78,39 @@
           <span class='badge theme-danger'>failed</span>
         </div>
 
-        <h3 class='h5 mt-4'>Breadcrumb</h3>
-        <nav aria-label='Breadcrumb'><ol class='breadcrumb m-0'>
+        <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 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'>
+        <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 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'>
+        <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'>
@@ -171,46 +131,39 @@
           </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>
+        <h3 class='h5 design-subsection'>Confirm</h3>
         <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>
+        <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 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'>
+        <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 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'>
+        <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 mt-4'>Toast</h3>
-        <div class='toast show' role='status' aria-live='polite' style='position: static'>
+        <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>
         </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>
+        <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-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>
+            <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>
@@ -222,11 +175,9 @@
             <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>
+        <h3 class='h5 design-subsection' id='wall'>Wall</h3>
+        <p class='fg-2'>A page of the signup flow, as <code>flow</code> draws it around a card.</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>
@@ -246,49 +197,47 @@
         </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'>
+        <h2>Error pages</h2>
+        <ul class='list-unstyled d-flex flex-wrap justify-content-center 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>
+
+      <section class='design-section' id='theme'>
+        <h2>Palettes</h2>
+        <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>
+      </section>
+
+      <section class='design-section' id='favicon'>
+        <h2>Icons</h2>
+        <p class='fg-2'>Every mark an app is known by: the drawing under <code>/logo</code>, and what a tab, a phone and a manifest each ask for under <code>/favicon</code>. The pink one is a local machine's.</p>
+        <div class='table-responsive'>
+          <table class='table table-hover mx-auto' style='max-width: 60rem'>
+            <thead><tr><th scope='col'>Logo</th><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><td><img class='design-logo' src='logo/houseaccount.svg' alt=''></td><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><td><img class='design-logo' src='logo/fountain.svg' alt=''></td><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><td><img class='design-logo' src='logo/goldrush.svg' alt=''></td><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><td><img class='design-logo' src='logo/houston.svg' alt=''></td><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><td><img class='design-logo' src='logo/design.svg' alt=''></td><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><td><img class='design-logo' src='logo/autopilot.svg' alt=''></td><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>
     </main>
 
-    <footer class='container-fluid px-3 py-4 small fg-2 d-flex flex-wrap gap-3'>
+    <footer class='container-fluid px-3 py-4 small fg-2 d-flex flex-wrap justify-content-center 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>

data/lib/houseaccount/helpers/flows.rb

@@ -2,8 +2,9 @@ module HouseAccount
   module Helpers
     # The page of a signup flow: the mark over the wall, a title, a line, one card, the way out.
     module Flows
-      # How wide the card is unless a page says otherwise: one column of a form, on a desktop.
-      WIDTH = '30rem'
+      # How wide the card is unless a page says otherwise: as wide as a thread, a table or a
+      # contract wants. A page asking one question says a narrower one.
+      WIDTH = '75rem'
 
       # Draws the page around the card's content, standing on the wall: the mark linking to
       # `logo` over what the view said in `content_for` — its `:title`, its `:subtitle`, how

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.11.0'
+  VERSION = '0.12.0'
 end