npm - houseaccount - Versions diffs - 0.10.1 - Mend

houseaccount 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/MIT-LICENSE +22 -0
package/README.md +296 -0
package/app/fonts/bootstrap-icons.woff2 +0 -0
package/app/javascript/houseaccount/bookmark_controller.js +97 -0
package/app/javascript/houseaccount/clear_controller.js +22 -0
package/app/javascript/houseaccount/combobox/menu.js +93 -0
package/app/javascript/houseaccount/combobox_controller.js +82 -0
package/app/javascript/houseaccount/confirm.js +89 -0
package/app/javascript/houseaccount/density_controller.js +21 -0
package/app/javascript/houseaccount/deselect_controller.js +37 -0
package/app/javascript/houseaccount/flash.js +35 -0
package/app/javascript/houseaccount/limit_controller.js +23 -0
package/app/javascript/houseaccount/map/loader.js +20 -0
package/app/javascript/houseaccount/map_controller.js +88 -0
package/app/javascript/houseaccount/otp/slots.js +27 -0
package/app/javascript/houseaccount/otp_controller.js +98 -0
package/app/javascript/houseaccount/phone_controller.js +89 -0
package/app/javascript/houseaccount/placeholder_controller.js +28 -0
package/app/javascript/houseaccount/relative_time_controller.js +45 -0
package/app/javascript/houseaccount/require_controller.js +18 -0
package/app/javascript/houseaccount/reveal_controller.js +16 -0
package/app/javascript/houseaccount/scheme_controller.js +99 -0
package/app/javascript/houseaccount/search_controller.js +78 -0
package/app/javascript/houseaccount/shortcuts_controller.js +42 -0
package/app/javascript/houseaccount/thread_controller.js +40 -0
package/app/javascript/houseaccount/timezone_controller.js +27 -0
package/app/javascript/houseaccount/toast_controller.js +35 -0
package/app/javascript/houseaccount/tooltip_controller.js +23 -0
package/app/javascript/houseaccount/wall/marks.js +8 -0
package/app/javascript/houseaccount/wall/tools.json +75 -0
package/app/javascript/houseaccount/wall_controller.js +93 -0
package/app/javascript/houseaccount/written.js +20 -0
package/app/javascript/houseaccount/written_controller.js +28 -0
package/app/javascript/houseaccount.js +60 -0
package/app/stylesheets/houseaccount/base.css +33 -0
package/app/stylesheets/houseaccount/chat.css +73 -0
package/app/stylesheets/houseaccount/flow.css +47 -0
package/app/stylesheets/houseaccount/icons.css +186 -0
package/app/stylesheets/houseaccount/lockup.css +58 -0
package/app/stylesheets/houseaccount/map.css +3 -0
package/app/stylesheets/houseaccount/pin.css +34 -0
package/app/stylesheets/houseaccount/search.css +60 -0
package/app/stylesheets/houseaccount/shell.css +197 -0
package/app/stylesheets/houseaccount/table.css +105 -0
package/app/stylesheets/houseaccount/values.css +41 -0
package/app/stylesheets/houseaccount/wall.css +123 -0
package/app/stylesheets/houseaccount.css +16 -0
package/app/stylesheets/theme/bootstrap.css +11 -0
package/app/stylesheets/theme/dawn.css +189 -0
package/app/stylesheets/theme/dracula.css +189 -0
package/app/stylesheets/theme/gruvbox.css +189 -0
package/app/stylesheets/theme/monokai.css +190 -0
package/app/stylesheets/theme/nord.css +189 -0
package/app/stylesheets/theme/one_dark.css +189 -0
package/app/stylesheets/theme/solarized.css +188 -0
package/app/stylesheets/theme/tokyo_night.css +189 -0
package/package.json +33 -0
package/vendor/bootstrap-icons.min.css +5 -0
package/vendor/bootstrap.bundle.min.js +9 -0
package/vendor/bootstrap.min.css +2 -0
package/vendor/fonts/OFL-quicksand.txt +93 -0
package/vendor/fonts/bootstrap-icons.woff +0 -0
package/vendor/fonts/bootstrap-icons.woff2 +0 -0
package/vendor/fonts/quicksand-500-latin-ext.woff2 +0 -0
package/vendor/fonts/quicksand-500-latin.woff2 +0 -0
package/vendor/fonts/quicksand-500-vietnamese.woff2 +0 -0

package/MIT-LICENSE ADDED Viewed

@@ -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.

package/README.md ADDED Viewed

@@ -0,0 +1,296 @@
+# HouseAccount design
+Everything a HouseAccount page is made of, in one place: the stylesheet and the script every
+page loads, the marks every app is known by, the pages shown when an app is not, and the
+Rails helpers that draw a head, a logo or a chat the same way in every app.
+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
+### From RubyGems
+```bash
+gem install houseaccount
+```
+```ruby
+# Gemfile
+gem 'houseaccount', '~> 0.10.0'
+```
+`~> 0.10.0` stops short of `0.11`, since below 1.0 a minor release may break whatever it likes.
+Rails 8.1 and Ruby 3.2 are the minimum.
+### From npm
+For a host that bundles the sources itself rather than serving the gem's built tree.
+```bash
+npm install houseaccount
+```
+```js
+import 'houseaccount'
+import 'houseaccount/houseaccount.css'
+```
+The module exports nothing and is imported for its effect: it starts Stimulus, registers every
+controller the house's markup names, and hands Turbo the dialog it draws for a confirmation.
+Bootstrap 6 is not on npm, so the bundle ships inside this package and a bundler has to send the
+bare `bootstrap` specifier there:
+```js
+// esbuild
+alias: { bootstrap: 'houseaccount/bootstrap' }
+```
+A single controller comes from `houseaccount/controllers`, for a host registering its own
+Stimulus application rather than taking the house's:
+```js
+import WallController from 'houseaccount/controllers/wall_controller.js'
+```
+Pin as a Gemfile does, and for the same reason: `"houseaccount": "~0.10.0"` stops short of `0.11`.
+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.10.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 %>
+<%# 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
+    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:
+```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' } %>
+```
+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`.
+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'>`.
+`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 :logo, 'houseaccount' %>
+<% 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' %>
+```
+`content_for :logo` is which of the family's marks the tab wears, for a page a customer reads
+rather than the app's own people: unsaid, it is this app's, by its name.
+The words are the view's, said in `content_for`: `:title` is the `h1`, `:subtitle` the line
+under it, drawn only where there is one, and `:width` how wide the card is, a CSS length that
+is `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 sent to a phone is the same words from every app, `HouseAccount.one_time_code`, in
+each voice they are said in. `written` is the sentence a person reads and, under it, the
+`@host #code` line that offers the code above the keyboard on the phone it arrived on;
+`spoken` is the sentence alone, its digits one at a time so a listener can write them down.
+The host is the application's default one unless `host:` says otherwise, and the words are
+the gem's `config/locales` entry.
+```ruby
+HouseAccount.one_time_code(contact.pin).written
+# => "Enter this 6-digit code to proceed: 482913\n\n@houseaccount.com #482913"
+HouseAccount.one_time_code(contact.pin).spoken
+# => "Enter this 6-digit code to proceed: 4, 8, 2, 9, 1, 3"
+```
+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.10.0/css/houseaccount.css'>
+<script type='module' src='https://design.houseaccount.com/v0.10.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
+```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.
+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.
+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.
+## Cloudflare
+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.

package/app/fonts/bootstrap-icons.woff2 ADDED Viewed

Binary file

package/app/javascript/houseaccount/bookmark_controller.js ADDED Viewed

@@ -0,0 +1,97 @@
+import { Controller } from '@hotwired/stimulus'
+import { flash } from './flash.js'
+// The square that keeps a row, answered before the server does. The icon flips under
+// the cursor and the request goes in the background, so the table is never redrawn and
+// the row stays where the eye left it — until the next load, where kept-first belongs.
+//
+// The form is still a real one. Without this controller it submits, redirects and
+// reloads, which is the same floor every other button here degrades to.
+export default class extends Controller {
+  static values = { kept: Boolean, error: String }
+  connect() {
+    this.form = this.element.closest('form')
+    this.row = this.element.closest('tr')
+    this.icon = this.element.querySelector('i')
+    this.form.addEventListener('submit', this.submit)
+  }
+  disconnect() {
+    this.form.removeEventListener('submit', this.submit)
+  }
+  // An arrow so `this` survives being handed to the listener, and so the same
+  // function object is the one removed again.
+  submit = (event) => {
+    event.preventDefault()
+    const kept = !this.keptValue
+    // Read the form before flipping it. The verb it is still wearing is the one this
+    // click means — `post` to keep the row, `delete` to drop it — while `render`
+    // dresses it for the click after this one, which is the opposite.
+    const body = new FormData(this.form)
+    this.render(kept)
+    this.send(body, kept)
+  }
+  // What the eye reads, what a screen reader reads, and what the next click will do:
+  // the path never changes, only the verb Rails wrote into the form.
+  render(kept) {
+    this.keptValue = kept
+    this.icon.className = kept ? 'bi bi-bookmark-fill' : 'bi bi-bookmark'
+    this.element.setAttribute('aria-pressed', kept)
+    this.method.value = kept ? 'delete' : 'post'
+  }
+  // The token in the head, not the one in the form. Rails scopes a form's own token
+  // to the method it was drawn with and this square flips that method; the form's is
+  // inside a cached fragment besides, so it belongs to whichever session drew the
+  // table. The head's is global to the session and fresh per request, and Rails takes
+  // whichever of the two is valid.
+  get token() {
+    return document.querySelector('meta[name="csrf-token"]')?.content
+  }
+  // Rails' own override field, which `button_to` writes only for a delete — so a
+  // square that started hollow has none until the first click makes one.
+  get method() {
+    let field = this.form.querySelector('input[name="_method"]')
+    if (!field) {
+      field = document.createElement('input')
+      field.type = 'hidden'
+      field.name = '_method'
+      this.form.prepend(field)
+    }
+    return field
+  }
+  // The response is never rendered, but it is read: a 500, a dropped connection or
+  // an expired session would otherwise leave a filled square that was never saved.
+  // `Accept` is what tells the server this one wants no flash and no redirect.
+  async send(body, kept) {
+    try {
+      const response = await fetch(this.form.action, {
+        method: 'post',
+        body,
+        headers: { Accept: 'application/json', 'X-CSRF-Token': this.token },
+      })
+      if (!response.ok) return this.revert(kept)
+      // The report, and the reason there is no toast: the row takes or loses its tint,
+      // which says which rows are kept. The icon flipped on the click and would have
+      // flipped under a request that never landed, so this is the half only the server
+      // can give.
+      this.row?.classList.toggle('recourse-kept', kept)
+    } catch {
+      this.revert(kept)
+    }
+  }
+  // Put the square back, and say why — the one time this column speaks, since a click
+  // that worked is reported by the row taking color. Nothing to put back but the
+  // square: the tint is never laid on until the row is written.
+  revert(kept) {
+    this.render(!kept)
+    flash(this.errorValue)
+  }
+}

package/app/javascript/houseaccount/clear_controller.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+export default class extends Controller {
+  static targets = ['input', 'button']
+  connect() {
+    this.toggle()
+  }
+  toggle() {
+    this.buttonTarget.classList.toggle('d-none', !this.inputTarget.value)
+  }
+  clear() {
+    this.inputTarget.value = ''
+    // The combobox filters its menu on `input`, so it has to hear one to put every
+    // row back. Bootstrap listens on the field itself, and the event bubbles anyway.
+    this.inputTarget.dispatchEvent(new Event('input', { bubbles: true }))
+    this.inputTarget.focus()
+    this.toggle()
+  }
+}

package/app/javascript/houseaccount/combobox/menu.js ADDED Viewed

@@ -0,0 +1,93 @@
+// The markup Bootstrap's combobox wants, built from a `<select>`: the toggle and the menu,
+// as the two nodes to put after it. Every word on them comes from the select or its
+// controller's values, so nothing here is in any one language.
+// The toggle takes the select's size and its error, and is labelled the way the select was.
+export function menuFor(select, controller) {
+  const toggle = element('button', 'form-control combobox-toggle', { type: 'button' })
+  if (select.classList.contains('form-select-sm')) { toggle.classList.add('form-control-sm') }
+  if (select.classList.contains('is-invalid')) { toggle.classList.add('is-invalid') }
+  toggle.dataset.bsToggle = 'combobox'
+  toggle.dataset.bsSearch = 'true'
+  toggle.dataset.bsPlaceholder = controller.placeholderValue
+  if (select.multiple) { toggle.dataset.bsMultiple = 'true' }
+  if (select.required) { toggle.setAttribute('aria-required', 'true') }
+  labelled(toggle, select)
+  toggle.append(element('span', 'combobox-value', {}, controller.placeholderValue),
+                element('i', 'bi bi-chevron-down combobox-caret'))
+  return [toggle, menu(select, controller)]
+}
+// The label that pointed at the select points at what a reader now clicks instead.
+function labelled(toggle, select) {
+  const label = select.id && document.querySelector(`label[for='${select.id}']`)
+  if (label) { toggle.setAttribute('aria-labelledby', label.id ||= `${select.id}-label`) }
+  for (const name of ['aria-label', 'aria-describedby']) {
+    if (select.hasAttribute(name)) { toggle.setAttribute(name, select.getAttribute(name)) }
+  }
+}
+function menu(select, controller) {
+  const menu = element('div', 'menu')
+  menu.append(search(select))
+  if (controller.hasAllValue && select.multiple) { menu.append(all(select, controller.allValue), element('div', 'menu-divider')) }
+  for (const option of select.options) { menu.append(item(option, select.multiple)) }
+  menu.append(element('div', 'combobox-no-results d-none', {}, select.dataset.noResults || ''))
+  return menu
+}
+// The box that narrows a long menu, with the X that empties it inside the field.
+function search(select) {
+  const box = element('div', 'combobox-search')
+  box.dataset.controller = 'clear'
+  const input = element('input', 'form-control combobox-search-input', {
+    type: 'text', autocomplete: 'off', placeholder: select.dataset.search || '', 'aria-label': select.dataset.search || '',
+  })
+  input.dataset.clearTarget = 'input'
+  input.dataset.action = 'input->clear#toggle'
+  const clear = element('button', 'combobox-search-clear d-none', { type: 'button', 'aria-label': select.dataset.clear || '' })
+  clear.dataset.clearTarget = 'button'
+  clear.dataset.action = 'clear#clear'
+  clear.append(element('i', 'bi bi-x-lg'))
+  box.append(input, clear)
+  return box
+}
+// `All`: no `data-bs-value`, so the plugin passes it by and the deselect controller has it.
+function all(select, words) {
+  const row = element('button', 'menu-item', { type: 'button' }, words)
+  row.dataset.controller = 'deselect'
+  row.dataset.action = 'deselect#all'
+  row.dataset.deselectMultipleValue = String(select.multiple)
+  return row
+}
+// One option as one row: its words, a figure beside them where it has one, a check where
+// the menu is multiple, and `d-none` where it waits for `All`. An empty option is the way
+// back to nothing, and takes the plugin's own empty value.
+function item(option, multiple) {
+  const row = element('button', 'menu-item', { type: 'button', 'aria-selected': String(option.selected) })
+  row.dataset.bsValue = option.value
+  if (option.selected) { row.classList.add('selected') }
+  if ('hidden' in option.dataset && !option.selected) { row.classList.add('d-none') }
+  const content = element('span', 'menu-item-content')
+  content.append(element('span', '', {}, option.textContent))
+  row.append(content)
+  if (option.dataset.count) { row.append(element('span', 'combobox-count fg-2', {}, option.dataset.count)) }
+  if (multiple) { row.append(element('i', 'bi bi-check menu-item-check')) }
+  return row
+}
+function element(tag, classes, attributes = {}, text = null) {
+  const node = document.createElement(tag)
+  if (classes) { node.className = classes }
+  for (const [name, value] of Object.entries(attributes)) { node.setAttribute(name, value) }
+  if (text !== null) { node.textContent = text }
+  return node
+}

package/app/javascript/houseaccount/combobox_controller.js ADDED Viewed

@@ -0,0 +1,82 @@
+import { Controller } from '@hotwired/stimulus'
+import { Combobox } from 'bootstrap'
+import { menuFor } from './combobox/menu.js'
+// A `<select data-controller='combobox'>` becomes Bootstrap's combobox: a toggle that reads
+// the picked option, a menu with a search box, and a check per pick where the select is
+// `multiple`. The select stays, hidden, as the one thing the form submits — the plugin is
+// told no `name`, so it writes no hidden input of its own — and every pick in the menu is
+// written back to it and announced as the select's own `change`. A page without this
+// script has a working select; a page with it has the same select dressed.
+//
+// A multiple menu reads as `California + 1 more` rather than the plugin's `2 selected`,
+// in the words `data-combobox-more-value` gives it. The select's own `data-` attributes
+// say the rest: a placeholder for the toggle, an `All` row that puts held-back options on
+// the menu, and on an option `data-count` for a figure beside it and `data-hidden` to hold
+// it back until `All` asks.
+export default class extends Controller {
+  static values = { more: String, placeholder: String, all: String }
+  connect() {
+    this.#dress()
+    this.morphed = () => this.#remake()
+    document.addEventListener('turbo:morph', this.morphed)
+  }
+  disconnect() {
+    document.removeEventListener('turbo:morph', this.morphed)
+    this.#undress()
+  }
+  #dress() {
+    this.widget = menuFor(this.element, this)
+    this.element.after(...this.widget)
+    this.element.hidden = true
+    this.combobox = Combobox.getOrCreateInstance(this.toggle)
+    this.#name()
+    this.picked = () => this.#pick()
+    this.toggle.addEventListener('change.bs.combobox', this.picked)
+  }
+  #undress() {
+    this.toggle.removeEventListener('change.bs.combobox', this.picked)
+    this.combobox.dispose()
+    this.widget.forEach((node) => node.remove())
+    this.element.hidden = false
+  }
+  get toggle() { return this.widget[0] }
+  get menu() { return this.widget[1] }
+  // Remade whole rather than repaired: a morph rewrote the select's options and what is
+  // selected among them, and a widget built from it again is the one way to be sure the
+  // toggle's text, the menu's ticks and the plugin's state all say the same thing.
+  #remake() {
+    if (!this.element.isConnected) { return }
+    this.#undress()
+    this.#dress()
+  }
+  // What the menu says, written onto the select, and said again as the select's own event
+  // so a form listening for a change hears one — the plugin's event never leaves the toggle.
+  #pick() {
+    const picked = new Set([...this.menu.querySelectorAll('.menu-item.selected')].map((item) => item.dataset.bsValue))
+    for (const option of this.element.options) { option.selected = picked.has(option.value) }
+    this.#name()
+    this.element.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+  // `California + 1 more` over the plugin's `2 selected`. Only a multiple menu with more
+  // than one pick: with one the plugin names it, and with none it shows the placeholder.
+  #name() {
+    const picked = this.menu.querySelectorAll('.menu-item.selected')
+    if (!this.element.multiple || picked.length < 2) { return }
+    const first = picked[0].querySelector('.menu-item-content > span:first-child')
+    this.toggle.querySelector('.combobox-value').textContent = this.moreValue
+      .replace('%{first}', first.textContent)
+      .replace('%{count}', picked.length - 1)
+  }
+}