houseaccount 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3679e7fcb39801bbbade5f8a0324ea46e5c4c71bc50b498ac139a4b7964abecf
-  data.tar.gz: ebaa5bbd77e6396ffd4e8cb7e7fbcee89538f6a69a474d0ca80f3bdda38c63d7
+  metadata.gz: 939b9379b9f9074c36dfafeaa68f37c91154a36976cd64025170653a71b1918a
+  data.tar.gz: 552f0b7b147cb46cb7edab29c293a6d570cd936f6198028694364f8de9f895c0
 SHA512:
-  metadata.gz: dccd03d4fe716cc5e28a0d3fa2fe93695e1cc912267179ca0b1c9468950c1d470e0bbcae69244a27aebc380dbd0a9e85f56c83f6dd6f422b4da96d3a1573a319
-  data.tar.gz: 8f84db9c4f3b25f78bf8c0ff788f46f420f76f4748e817ae839f7e3195d886c1b4e225e1f390c49cbddd4b180d998a30e5d40c8049c9a6a94aff0c66b98a1885
+  metadata.gz: 0da5799f9fcfbb25157745e1641dbbace60b62d40eb344774ea123e2e909f08d912384810b1d9500a5c17d16ad7b17323f5a8fdd7e04ed5907d861a4e9adfb82
+  data.tar.gz: 06e33a1b81ca80e1ccc595be50bdfcc64b4756cda9e1de9741251e91183e5d742a62ed552c22d4017e1149f40de5196947d63afef0d1ee3026e761315f34396e

data/CHANGELOG.md

@@ -7,6 +7,168 @@ For more information about changelogs, check [Keep a Changelog](http://keepachan
 
 ## [Unreleased]
 
+## 0.3.0 - 2026-09-14
+
+* [Fix] A chat scrolls inside its card, and the page stands still
+
+  The flow holding a thread is a flex item of `main`, and `flex: 1` sized it to its content
+  over the height it was given, so a long thread grew the page and the way out scrolled off.
+  The column is `flex: none` at the window's height now, and only the thread scrolls.
+
+* [Fix] Sending a question keeps the reader where they were
+
+  The ask form under a chat asks Turbo to `replace`, so the redirect back to the page it is
+  on is a refresh — morphed in place, scroll kept — rather than a visit landing at the top.
+
+* [Fix] A Turbo refresh morphs the page and keeps the scroll
+
+  The head tags now say `turbo-refresh-method: morph` and `turbo-refresh-scroll: preserve`,
+  so an answer landing in a thread leaves the reader at the bottom where they typed, rather
+  than at the top of a page drawn again. The layout also names `HouseAccount.app` by its
+  current spelling where a page has no title of its own.
+
+* [Feature] `flow` draws the page of a signup flow around a card
+
+  The mark over the wall, a title, a line, one card and the way out, from a host layout's
+  one call. The view says its words in `content_for` — `:title`, `:subtitle` and `:width`,
+  the card's, which is how a chat's page gets a wider card than a form's — and the layout
+  passes `footer:`, pieces joined by a middot, and `logo:`. The column and the card are the
+  gem's rules again, `.flow` and `.flow-card`.
+
+* [Fix] No gutter is kept for a scrollbar a page has not got
+
+  Bootstrap 6 reserves the column on every page; a browser with classic scrollbars painted
+  its empty track beside a page that fit. The gutter now appears with the scrollbar alone.
+
+* [Fix] The versioned copy follows the build until the version is tagged
+
+  The head helper links `/v<version>/`, and that folder was written once and left, so a
+  host reading the gem from a path kept the stylesheet of the day the folder was made.
+  Every build now rewrites it until `v<version>` is tagged, and never after.
+
+* [Feature] `HouseAccount.one_time_code` is the text that carries a code
+
+  Every app texting a 6-digit code sends the same two lines, the sentence and the
+  `@host #code` Safari reads a code from, and reads them off the gem's locale file rather
+  than keeping a copy of its own.
+
+* [Breaking change] The constant is `HouseAccount`
+
+  `HouseAccount::Message`, `HouseAccount::Engine`, `HouseAccount.app`: the house's name
+  as the house writes it. The gem and the npm package stay `houseaccount`, since a gem's
+  name fixes only the file Bundler requires.
+
+* [Feature] A host's layout nests on the gem's
+
+  A layout hands its page over as `content_for :content` and renders the gem's as a
+  template; the bare layout's body now fills the window. The wall stays the gem's, from
+  `data-controller='wall'`; what a host draws in front of it, a column and a card say, is
+  the host's to style.
+
+* [Fix] Body text is Bootstrap's own, and a chat bubble has its sheen back
+
+  The stylesheet set every page to Helvetica at 14px, a choice made for tables that came
+  over with their rules; a page a customer reads on a phone wants Bootstrap's system face at
+  16px, and a host wanting another sets the two properties itself. A bubble wears
+  `--bs-gradient` again, as a message thread's do.
+
+* [Feature] `dialog` draws a link and the dialog it opens
+
+  Bootstrap's `<dialog>` with a heading, an X, the block and an `Okay`, and the link that
+  opens it through the plugin's own `data-bs-toggle`, sharing an id made from the link's
+  words — so no page writes the markup or invents a name, and the `dialog` controller
+  carried here from fountain goes.
+
+* [Fix] A phone field refuses an eleventh digit rather than taking it and cutting it back
+
+  A submit shut until the field is valid saw the eleven digits before the format cut them
+  to ten, and stayed shut. The key is refused on a full field; a whole number pasted or
+  autofilled is reshaped and the field says `input` again; and the country code a number
+  arrives with is dropped, since no NANP area code starts with a 1 — which is what
+  fountain's `national` controller did on its own.
+
+* [Feature] `notices` draws the flash as toasts
+
+  Every message in the flash as a toast at the bottom right — green for a notice, red for
+  an alert, neutral for a key of the host's own — visible at first paint, held while read
+  and gone after a moment, the way recourse shows them. The gem's layout calls it, so a
+  page it draws shows what a redirect had to say.
+
+* [Feature] `HouseAccount::FormBuilder` is the house's form, `pin_field` included
+
+  Given as `builder:` or a controller's `default_form_builder`: `fieldset` is the one-column
+  grid a form's controls sit in, with a legend where given, a label is a `form-label`, a
+  text or phone field a large control, the phone one shaped by the `phone` controller as it
+  is typed, a submit or a button the solid pill, a `type: :button` one the outlined pill, and a
+  disabled one given a `title` says why on hover — `Available soon` — from a wrapper that
+  hears the mouse for it. `pin_field` is one real field rendered by Bootstrap
+  as six slots, with the `otp` controller from fountain: the slots drawn on a Turbo visit, a pasted or autofilled code sent on its own,
+  a refused one kept with the caret at its end.
+
+* [Feature] A `<select data-controller='combobox'>` is Bootstrap's combobox, and any `data-turbo-confirm` asks through a dialog
+
+  The bundle dresses a select — a toggle, a menu with a search box, a check per pick where
+  it is `multiple`, an `All` row, a figure beside an option — and keeps the select as what
+  the form submits, announcing a pick as its own `change`. Recourse and any app write a
+  select and nothing more. The confirm dialog is built by the bundle on the first ask, so
+  no page has to carry the markup, and its answer wears the words of the button that asked.
+
+* [Feature] Faster first paint: the icon font cut to the glyphs the house draws, Quicksand served from here, and a page's own version linked and kept for a year
+
+  Bootstrap Icons shipped two thousand glyphs in 134 KB; `art/icons.txt` names the ones a
+  HouseAccount page may draw and `rake icons` cuts the font and its stylesheet to those.
+  Quicksand comes from `/font` rather than Google, so no page reaches another origin. The
+  engine serves this version's copy under `/v<version>/`, cached immutable, and
+  `houseaccount_head_tags` links it, so a returning reader fetches nothing.
+
+## 0.2.0 - 2026-09-13
+
+* [Feature] The front end of every HouseAccount app, extracted from recourse and the apps
+
+  One stylesheet and one script — Bootstrap 6 alpha, Bootstrap Icons, Turbo, Stimulus and the
+  twenty controllers behind the house's pages — served by the engine at `/css/houseaccount.css`
+  and `/js/houseaccount.js`, and published at https://design.houseaccount.com under the same
+  paths for a page not on the gem. The nine palettes under `/theme`, every app's mark under
+  `/logo` and `/favicon`, and the five error pages under `/page`, which the engine answers a
+  failing request with.
+
+* [Feature] `houseaccount_head_tags`, `houseaccount_logo`, `chat_with` and `houseaccount_url`
+
+  A head, a lockup and a thread of bubbles drawn the same way in every app. Which app a host
+  is, the gem reads off the Rails application's name, and the head and the down page follow
+  it; `houseaccount_logo app: :fountain` draws any of the family's marks seated by its own numbers beside its
+  name. `chat_with url:, hints:, messages:` takes messages answering `side`, `text`, `sender`,
+  `at`, `delivery` and `cost`, or `HouseAccount::Message`s, and the URL the next one posts to.
+
+* [Feature] A layout for a page recourse does not draw
+
+  `layout 'houseaccount'` on a controller gives a page the shared head — charset, title,
+  CSRF and CSP metas, the stylesheet, the script and the icons — then `yield :head`, then
+  the page inside `<body>`. `content_for :title` names it; the app's own name stands in.
+
+* [Feature] The page an app shows while it is down
+
+  Its own mark in the middle and the house's at the foot, rendered per app into `/down/<app>.html`
+  and answered at `/down.html` by the engine for the app the host named. The design site
+  has a mark of its own, a pencil, and wears it.
+
+* [Feature] Every release is kept at its own versioned URL
+
+  `/v0.2.0/css/houseaccount.css` and its script, fonts and palettes stand beside the
+  unversioned copies, whole on their own and cached for a year, so a page may pin a
+  version and move when it chooses. `rake version` writes a folder once per release.
+
+* [Feature] The signup flow's wall of drifting tools, from one attribute
+
+  `data-controller='wall'` on a page's shell draws the cyanotype of trades and the family's
+  marks behind it, from geometry the bundle carries; `.flow-shell`, `.flow-main` and
+  `.welcome-card` are the classes the page in front of it wears.
+
+* [Feature] A phone is formatted in the browser
+
+  The server hands over ten digits and `data-controller='phone'`; the controller decides
+  `555-555-5555` on a cell and on a field, and gives the field its pattern and placeholder.
+
 ## 0.1.0 - 2026-08-27
 
-* [Feature] First release: a library that loads and does not do anything yet
+* A library that loads and does not do anything yet.

data/MIT-LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2026 Claudio Baccigalupo
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,36 +1,246 @@
-# House Account
+# HouseAccount design
 
-The Ruby House Account shares between the apps it runs.
+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.
 
-Nothing lives here yet: `require 'houseaccount'` defines the `HouseAccount` namespace and
-returns. It is released so that an app can depend on it before there is anything to depend on,
-and so the first thing extracted into it arrives as `0.2.0` rather than as a new gem.
+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 |
+| 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 |
 
 ## How to install
 
-To install on your system, run
+```bash
+gem install houseaccount
+```
+
+```ruby
+# Gemfile
+gem 'houseaccount', '~> 0.3.0'
+```
+
+`~> 0.3.0` stops short of `0.4`, 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:
+
+```ruby
+class Unauthenticated::AgentsController < ApplicationController
+  layout 'houseaccount'
+end
+```
+
+```erb
+<% content_for :title, 'Authenticating as admin' %>
+<% content_for :head, tag.meta(name: 'robots', content: 'noindex') %>
+<h1>Authenticating as admin</h1>
+```
+
+<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>
+
+The layout is the charset, the title, the CSRF and CSP metas, `houseaccount_head_tags`,
+`yield :head`, then `yield` inside a `main.container-fluid` in the `<body>`, 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.
+
+Which of the family an app is, the gem reads 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 same page stands at `https://design.houseaccount.com/down/fountain` for Heroku's
+`MAINTENANCE_PAGE_URL`, which has to be somewhere the app is not — without the `.html`,
+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
+with the house's own page, and has these helpers in every view:
+
+```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. %>
+<%= houseaccount_head_tags %>
+
+<%# 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. %>
+<%= 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:
 
-    gem install houseaccount
+```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' } %>
+```
 
-To use inside a bundled Ruby project, add this line to the `Gemfile`:
+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`.
 
-    gem 'houseaccount', '~> 0.1.0'
+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'>`.
 
-Below 1.0 the pin names the patch as well as the minor, so `bundle update` stops short of
-`0.2.0`. Semantic Versioning lets a `0.x` release break whatever it likes, and only promises
-otherwise once the major is real -- at which point the pin loosens to `~> 1.0`.
+`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:
+
+```erb
+<% content_for :content do %>
+  <%= flow logo: root_path, footer: [button_to('Sign out', session_path, method: :delete, class: 'btn btn-link')] do %>
+    <%= yield %>
+  <% end %>
+<% end %>
+
+<%= render template: 'layouts/houseaccount' %>
+```
+
+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:
+`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 |
+
+```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)
+```
+
+A code texted to a phone is the same words from every app, `HouseAccount.one_time_code`:
+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. The host is the application's default one unless
+`host:` says otherwise, and the copy is the gem's `config/locales` entry.
+
+```ruby
+HouseAccount.one_time_code contact.pin
+# => "Enter this 6-digit code to proceed: 482913\n\n@houseaccount.com #482913"
+```
+
+A page not on the gem links the two files from the site, and nothing else:
+
+```html
+<link rel='stylesheet' href='https://design.houseaccount.com/css/houseaccount.css'>
+<script type='module' src='https://design.houseaccount.com/js/houseaccount.js'></script>
+```
+
+Those follow the latest release. Every release is also kept whole under its own version,
+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>
+```
+
+A host with a Content Security Policy allows that origin for `style-src`, `script-src` and
+`font-src`.
+
+## 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
+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`.
 
 ## Development
 
-`bin/setup` gets a clone working, `bin/console` opens a prompt with the library loaded, and
-`bundle exec rake` runs the suite and the linter -- which is what CI runs too.
+```bash
+bin/setup                 # bundle and npm install
+bundle exec rake          # build, test at 100% coverage, RuboCop, the file-length ceiling
+./build-icons.sh          # after editing a drawing under art/
+rake icons                # after editing art/icons.txt, the glyphs the icon font keeps
+cd test/dummy && bin/rails server
+```
+
+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.
+
+While the gem is read from a path, an app in development serves every file `no-cache`, so a
+rebuild shows on the next reload; only a production app keeps the versioned copy for a year.
 
-## Reference
+Every build also writes `public/v<version>/`, whole, with every URL inside pointing under
+that prefix, until the tag `v<version>` exists; from then on the folder is never written
+again, and a page that pinned it is owed the same bytes for good.
 
-The API reference is built from what RubyGems holds, at
-[rubydoc.info/gems/houseaccount](https://rubydoc.info/gems/houseaccount). The source is at
-[github.com/HouseAccountEng/houseaccount](https://github.com/HouseAccountEng/houseaccount).
+A release, in order: `CHANGELOG.md`, the version in `lib/houseaccount/version.rb` and
+`package.json`, `bundle exec rake` so the versioned copy is the release's, then commit, tag
+`v<version>`, `gem build` and `gem push`, and fast-forward `production` to `main` so the
+site carries both the latest and the versioned copy.
 
-## License
+## Cloudflare
 
-MIT, see [LICENSE.txt](LICENSE.txt).
+The site is a Cloudflare Pages project named `design` on this repo: production branch
+`production`, no build command, output directory `public`, custom domain
+`design.houseaccount.com`. `main` deploys as the branch alias `main.design.pages.dev`, which
+`design.houseparty.dev` is a CNAME to. `public/_headers` adds the CORS header a cross-origin
+module script and font need, and marks the hashed fonts immutable; everything else keeps
+Pages' default of revalidating on every load, so a URL never has to change between versions.

data/art/autopilot.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#3b8ae8" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="256" cy="256" r="190"/>
+    <path d="M66 256 L206 256"/>
+    <path d="M306 256 L446 256"/>
+    <path d="M256 306 L256 446"/>
+    <circle cx="256" cy="256" r="50"/>
+  </g>
+</svg>

data/art/design.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" 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>

data/art/down.html.erb

@@ -0,0 +1,95 @@
+<%# The page an app shows while it is down: its own mark and name in the middle, the house's
+    at the foot — or the house's alone, for an app not in the family — and nothing that
+    needs the app to be up — Quicksand from Google, the icons
+    from the design site, the two blues written in. Rendered per app by `rake pages` into
+    public/down/<app>.html, and answered at /down.html by the engine once the host has named
+    itself in `Houseaccount.app`. -%>
+<!doctype html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <title><%= app %></title>
+    <meta name='color-scheme' content='light dark'>
+    <link rel='icon' href='https://design.houseaccount.com/favicon/<%= app %>.svg' type='image/svg+xml'>
+    <link rel='icon' href='https://design.houseaccount.com/favicon/<%= app %>-96.png' type='image/png' sizes='96x96'>
+    <link rel='apple-touch-icon' href='https://design.houseaccount.com/favicon/<%= app %>-180.png'>
+    <style>
+      @font-face {
+        font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
+        src: url('https://design.houseaccount.com/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('https://design.houseaccount.com/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('https://design.houseaccount.com/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;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #0f1622;
+          --ink: #9cc0ec;
+        }
+      }
+      * { 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: grid;
+        place-items: center;
+      }
+      .lockup {
+        white-space: nowrap;
+        color: var(--ink);
+        line-height: 1;
+      }
+      /* The mark on the text baseline, sized and nudged by its own numbers, in ems so the
+         same pair reads right at both sizes on this page. */
+      .lockup svg {
+        position: relative;
+        vertical-align: baseline;
+        margin-right: 0.29em;
+      }
+      main .lockup { font-size: 48px; }
+      footer {
+        position: sticky;
+        bottom: 0;
+        background: var(--bg);
+        display: flex;
+        justify-content: center;
+        padding: 20px 0 26px;
+      }
+      footer .lockup { font-size: 20px; }
+      footer .house { color: var(--mark); }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class='lockup'><%= mark[app] %><%= app == :houseaccount ? "<span class='house'>house</span>account" : app %></p>
+    </main>
+<%- unless app == :houseaccount -%>
+    <footer>
+      <p class='lockup'><%= mark[:houseaccount] %><span class='house'>house</span>account</p>
+    </footer>
+<%- end -%>
+  </body>
+</html>

data/art/fountain.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#3b8ae8" stroke-width="28" stroke-linecap="round">
+    <path d="M256 472V40"/>
+    <path d="M256 472C234 310 180 202 121 143"/>
+    <path d="M256 472C278 310 332 202 391 143"/>
+    <path d="M256 472C216 348 124 283 51 251"/>
+    <path d="M256 472C296 348 388 283 461 251"/>
+  </g>
+</svg>

data/art/goldrush.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#3b8ae8" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M152 248 L190 128 L322 128 L360 248 Z"/>
+    <path d="M40 384 L78 264 L210 264 L248 384 Z"/>
+    <path d="M264 384 L302 264 L434 264 L472 384 Z"/>
+  </g>
+</svg>

data/art/houseaccount.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" 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>

data/art/houston.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="none" stroke="#3b8ae8" stroke-width="28" stroke-linecap="round">
+    <circle cx="256" cy="256" r="224"/>
+    <path d="M32 256h448"/>
+    <path d="M256 32c142 63 142 385 0 448"/>
+    <path d="M256 32c-142 63-142 385 0 448"/>
+  </g>
+</svg>