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/app/javascript/houseaccount/confirm.js ADDED Viewed

@@ -0,0 +1,89 @@
+import { Dialog } from 'bootstrap'
+// Turbo hands over the whole warning as one string, and the element and the button that
+// asked. The first line is the question and each remaining line a paragraph — real
+// paragraphs here, where a confirm() box had newlines. Always textContent, never
+// innerHTML: the title carries a record's own name, and a name is data. The dialog is
+// built the first time a page asks, so any page loading this bundle has one.
+export default function confirm(message, element, submitter) {
+  const dialog = dialogFor()
+  const [title, ...lines] = message.split('\n')
+  dialog.querySelector('.dialog-title').textContent = title
+  dialog.querySelector('.dialog-body').replaceChildren(...paragraphs(lines))
+  const answer = dialog.querySelector('.houseaccount-confirm-answer')
+  answer.textContent = wordsOn(submitter, element) || 'OK'
+  return new Promise(resolve => {
+    // `onclick` rather than addEventListener: reassigning replaces the previous
+    // answer's handler, so asking twice on one page never wires the button twice.
+    answer.onclick = () => {
+      resolve(true)
+      Dialog.getOrCreateInstance(dialog).hide()
+    }
+    // Cancel, Esc and a click on the backdrop all close through here. After an
+    // answer the promise is settled, and settling it again is a no-op.
+    dialog.addEventListener('hidden.bs.dialog', () => resolve(false), { once: true })
+    Dialog.getOrCreateInstance(dialog).show()
+  })
+}
+// The answer is the very words of the button that asked — `Delete place` — so the dialog
+// never has to know what the page is about, nor in which language. A link with a method
+// arrives as the form Turbo built for it, with no submitter; the link itself still has
+// the focus its click gave it.
+function wordsOn(submitter, element) {
+  const form = element?.tagName === 'FORM'
+  const source = submitter || (form ? element.querySelector('[type=submit]') || document.activeElement : element)
+  return source?.textContent?.trim() || source?.value
+}
+function paragraphs(lines) {
+  return lines.filter(line => line).map(line => {
+    const paragraph = document.createElement('p')
+    paragraph.textContent = line
+    return paragraph
+  })
+}
+// The one dialog every warning on a page speaks through, made on the first ask. Cancel
+// keeps the focus on the safe answer: `showModal` gives it to `autofocus` first.
+// `dialog-slide-down` is the animation, shipped by Bootstrap 6.
+function dialogFor() {
+  let dialog = document.querySelector('#houseaccount-confirm')
+  if (dialog) { return dialog }
+  dialog = document.createElement('dialog')
+  dialog.className = 'dialog dialog-slide-down'
+  dialog.id = 'houseaccount-confirm'
+  dialog.setAttribute('aria-labelledby', 'houseaccount-confirm-title')
+  dialog.innerHTML = `
+    <div class='dialog-header'><h1 class='dialog-title' id='houseaccount-confirm-title'></h1></div>
+    <div class='dialog-body'></div>
+    <div class='dialog-footer'>
+      <button type='button' class='btn btn-solid theme-secondary' data-bs-dismiss='dialog' autofocus>${cancel()}</button>
+      <button type='button' class='btn btn-solid theme-danger houseaccount-confirm-answer'></button>
+    </div>`
+  document.body.append(dialog)
+  return dialog
+}
+// The one word the page cannot supply, in the page's own language where a host has said
+// it in a `<meta name='houseaccount-cancel'>`, and English otherwise.
+function cancel() {
+  return document.querySelector('meta[name="houseaccount-cancel"]')?.content || 'Cancel'
+}
+// Three things outlive a Turbo visit that starts mid-close: the snapshot, which would
+// restore an open dialog; `dialog-open` on <html>, which is the scroll lock; and
+// `hiding` on the dialog, the class its closing animation runs under. dispose() closes
+// instantly and lifts the lock, but cuts the animation short of the end that would
+// have taken `hiding` off — and a dialog still wearing it opens invisible the next
+// time it is asked, which on a table of Remove buttons is the very next click. In the
+// module, so it registers once.
+document.addEventListener('turbo:before-cache', () => {
+  const dialog = document.querySelector('#houseaccount-confirm')
+  if (dialog?.open) Dialog.getOrCreateInstance(dialog).dispose()
+  dialog?.classList.remove('hiding')
+})

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

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus'
+// The arrows at the foot of the sidebar, drawn on a phone alone: a tap puts the words
+// back beside every icon the chrome shows — the sidebar's entries, the crumbs, the tabs,
+// the foot's own controls — and the next tap takes them away again. The choice goes to
+// the server in a cookie, the way the zone does, and the page is loaded again outright
+// rather than reshaped in place: Safari left the row of entries where it was when the
+// words came out of hiding, one link over the next, until a reload laid it out afresh.
+// A Turbo visit to the same address is no better — an index carries the metas that make
+// a refresh morph, so the visit reshaped the body it had rather than drawing a new one.
+export default class extends Controller {
+  static values = { storage: String }
+  toggle() {
+    const expanded = document.body.classList.contains('recourse-expanded')
+    const density = expanded ? 'compact' : 'expanded'
+    document.cookie = `${this.storageValue}=${density}; path=/; max-age=31536000; samesite=lax`
+    window.location.reload()
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus'
+export default class extends Controller {
+  static values = { multiple: Boolean }
+  // `All` asks for the options the menu is holding back — they are in it already, and
+  // this is what puts them on it.
+  all(event) {
+    // A menu that sets a value is configured to close on any click inside it, this
+    // button included — which would shut it over the options it was clicked to see. The
+    // listener doing that is on the document, so stopping the click here is what keeps
+    // them in view. A menu that narrows a table closes on outside clicks only, and is
+    // unaffected either way.
+    event.stopPropagation()
+    const menu = this.element.closest('.menu')
+    for (const waiting of menu.querySelectorAll('.menu-item.d-none')) {
+      waiting.classList.remove('d-none')
+    }
+    // And, on a menu that narrows a table, it means every row as well as every option,
+    // which is what nothing being ticked says. Clicking each chosen item is what the
+    // plugin is already listening for, so the hidden input, the toggle's text and the
+    // events stay its business rather than ours — it has no method for this, and
+    // reaching into its state would be guessing.
+    //
+    // Only there. A menu that sets a value cannot mean none of them, and a click on the
+    // one already chosen is the plugin being told to choose it again — which closes the
+    // menu over the options this button was clicked to see.
+    if (!this.multipleValue) return
+    for (const item of menu.querySelectorAll('.menu-item.selected')) {
+      item.click()
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+// The toast the server ships, built in the browser for the one message that has no
+// response to arrive with. `data-controller` is what hands it to the toast
+// controller for its timer and its X, so the two kinds fade alike.
+export function flash(message, theme = 'theme-danger') {
+  const toast = document.createElement('div')
+  toast.className = `toast fade show ${theme}`
+  toast.setAttribute('role', 'alert')
+  toast.setAttribute('aria-live', 'assertive')
+  toast.dataset.controller = 'toast'
+  toast.dataset.action = ['mouseenter->toast#stopTimer', 'mouseleave->toast#startTimer',
+                          'focusin->toast#stopTimer', 'focusout->toast#startTimer'].join(' ')
+  const header = document.createElement('div')
+  header.className = 'toast-header border-0'
+  const text = document.createElement('span')
+  text.className = 'me-auto'
+  // Never innerHTML: this is a message, and a message is data.
+  text.textContent = message
+  header.append(text)
+  toast.append(header)
+  container().append(toast)
+}
+// A page with nothing to say ships no container at all, so the first message is what
+// makes one.
+function container() {
+  let container = document.querySelector('.toast-container')
+  if (container) return container
+  container = document.createElement('div')
+  container.className = 'toast-container position-fixed bottom-0 end-0 p-3'
+  container.dataset.turboTemporary = ''
+  document.body.append(container)
+  return container
+}

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

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+// How much of a table one page shows. The choice belongs to the reader rather than
+// to the app, so it is kept in their browser — but in a cookie rather than in local
+// storage, which is where the scheme goes: pagy decides the page on the server, and
+// a cookie is the only storage the server is sent.
+export default class extends Controller {
+  static values = { storage: String, to: Number }
+  // Back to the first page, always: page five of twenty is past the end of a hundred
+  // to a page, and pagy answers that with an empty table rather than an error. And
+  // only the frame, so what is redrawn is the table and the row under it — the answer
+  // brings the button back naming the size a click would go to next.
+  toggle() {
+    document.cookie =
+      `${this.storageValue}=${this.toValue}; path=/; max-age=31536000; samesite=lax`
+    const url = new URL(window.location.href)
+    url.searchParams.delete('page')
+    window.Turbo.visit(url.href, { frame: 'results', action: 'replace' })
+  }
+}

package/app/javascript/houseaccount/map/loader.js ADDED Viewed

@@ -0,0 +1,20 @@
+// Google's own bootstrap, spelled out: `importLibrary` fetches the API the first time it
+// is asked for a library, and the API then answers it itself. Once per page, however many
+// maps are on it — and a Turbo visit keeps the page, so once per session in practice.
+export function load(key) {
+  const maps = (window.google ||= {}).maps ||= {}
+  if (maps.importLibrary) return
+  let loading
+  maps.importLibrary = (library, ...rest) => {
+    loading ||= new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      const params = new URLSearchParams({ key, v: 'weekly', loading: 'async', callback: 'google.maps.__ib__' })
+      script.src = `https://maps.googleapis.com/maps/api/js?${params}`
+      maps.__ib__ = resolve
+      script.onerror = () => reject(new Error('The Google Maps API could not be loaded'))
+      document.head.append(script)
+    })
+    return loading.then(() => maps.importLibrary(library, ...rest))
+  }
+}

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

@@ -0,0 +1,88 @@
+import { Controller } from '@hotwired/stimulus'
+import { load } from './map/loader.js'
+// This page of a table on a Google map. A row keeping a place ID has its area filled in
+// on the boundary layer its model named — a county, a ZIP — or, where the model named
+// none, a pin at the place; a row keeping coordinates is a pin there and then, with
+// nothing to look up. The key and the map are the host's, read from its credentials; the
+// rows are the page's, and the map is fitted round whatever it drew.
+export default class extends Controller {
+  static values = { key: String, id: String, boundary: String, places: Array, points: Array }
+  async connect() {
+    load(this.keyValue)
+    const { Map } = await google.maps.importLibrary('maps')
+    const { LatLngBounds } = await google.maps.importLibrary('core')
+    // A picture rather than a control: the table's search, sort and pages are how a
+    // reader moves through the rows, and the map only shows where this page's are.
+    const map = new Map(this.element, {
+      mapId: this.idValue, gestureHandling: 'none', zoomControl: false,
+      disableDefaultUI: true, keyboardShortcuts: false
+    })
+    const bounds = new LatLngBounds()
+    await Promise.all([this.place(map, bounds), this.point(map, bounds)])
+    if (!bounds.isEmpty()) map.fitBounds(bounds, 10)
+  }
+  // The rows named by a place ID: areas on the boundary layer, or pins where there is none.
+  async place(map, bounds) {
+    if (this.placesValue.length === 0) return
+    const { Place } = await google.maps.importLibrary('places')
+    const places = this.placesValue.map(id => new Place({ id }))
+    if (this.hasBoundaryValue) return this.fill(map, bounds, places)
+    return this.pin(map, bounds, places)
+  }
+  // The layer styles every boundary Google knows at that level, and a function saying
+  // which of them are ours is what fills them in. The bounds are the places' viewports.
+  async fill(map, bounds, places) {
+    const ours = new Set(this.placesValue)
+    map.getFeatureLayer(this.boundaryValue).style = ({ feature }) => {
+      if (ours.has(feature.placeId)) return FILLED
+    }
+    await Promise.all(places.map(place =>
+      fetched(place, 'viewport').then(() => { if (place.viewport) bounds.union(place.viewport) })
+    ))
+  }
+  async pin(map, bounds, places) {
+    const drop = await this.dropper(map, bounds)
+    await Promise.all(places.map(place =>
+      fetched(place, 'location').then(() => { if (place.location) drop(place.location) })
+    ))
+  }
+  // The rows named by coordinates, which are pins without a lookup.
+  async point(map, bounds) {
+    if (this.pointsValue.length === 0) return
+    const drop = await this.dropper(map, bounds)
+    for (const [lat, lng] of this.pointsValue) drop({ lat, lng })
+  }
+  // One marker at a position, and the bounds widened to hold it.
+  async dropper(map, bounds) {
+    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker')
+    return (position) => {
+      new AdvancedMarkerElement({ map, position })
+      bounds.extend(position)
+    }
+  }
+}
+// A place that cannot be fetched — an ID Google no longer knows — is left off the map
+// rather than taking the rest of the page's rows with it.
+function fetched(place, field) {
+  return place.fetchFields({ fields: [field] }).catch(console.error)
+}
+const FILLED = {
+  strokeColor: '#2D85FF', strokeOpacity: 1.0, strokeWeight: 3.0,
+  fillColor: '#2D85FF', fillOpacity: 0.5
+}

package/app/javascript/houseaccount/otp/slots.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { OtpInput } from 'bootstrap'
+// Draws the six slots over the one real field and returns the plugin's instance. A page
+// restored from history comes back with the slots still in it, and a re-render can leave a
+// connected controller holding an instance whose slots have been deleted underneath it — so
+// neither the markup nor the instance is trusted, only taken down and drawn again.
+export function drawSlots(element, field) {
+  OtpInput.getInstance(element)?.dispose()
+  element.querySelector('.otp-slots')?.remove()
+  element.classList.remove('otp-rendered')
+  const otp = new OtpInput(element)
+  // A refused code comes back in the field, the way any invalid field keeps what was typed —
+  // but a re-render leaves nothing focused, so backspace and a new digit went nowhere.
+  // Focused with the caret past the last digit, fixing a typo is one keystroke.
+  if (field.value) {
+    field.focus()
+    field.setSelectionRange(field.value.length, field.value.length)
+  }
+  // The plugin rewrites `pattern` to `[0-9]*` from its own type, and `minlength` cannot stand
+  // in: the browser enforces tooShort only on a value a person edited, and this plugin writes
+  // every value programmatically. Restoring the exact length is what keeps the submit shut
+  // until all six digits are in rather than after the first.
+  field.pattern = '[0-9]{6}'
+  return otp
+}

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

@@ -0,0 +1,98 @@
+import { Controller } from '@hotwired/stimulus'
+import { drawSlots } from './otp/slots.js'
+// Draws Bootstrap's OTP input: one real field rendered as six slots. Bootstrap initializes
+// it on DOMContentLoaded, which a Turbo visit never fires — and a verification page is only
+// ever reached by one, so without this the reader is left with an empty box.
+export default class extends Controller {
+  connect() {
+    // Says the slots are coming, which is what lets the stylesheet hold back the bare field.
+    this.element.classList.add('otp-drawing')
+    this.pasted = false
+    this.draw = () => {
+      if (!this.element.isConnected) { return }
+      this.otp = drawSlots(this.element, this.field)
+    }
+    // A keystroke past the sixth is one iOS cannot place, and it answers by selecting inside
+    // the real field rather than by doing nothing. That field's text and caret are both
+    // transparent, but a selection is not its to hide: iOS draws the grab handles itself, and
+    // the hidden text they follow lies crammed against the left edge rather than under the
+    // slots — so a bar surfaces inside the first one. Collapsed to the end there is nothing
+    // left to draw, and only once the code is whole, so selecting to replace a half-typed one
+    // still works.
+    this.collapse = () => {
+      if (document.activeElement !== this.field) { return }
+      const { value, selectionStart, selectionEnd } = this.field
+      if (value.length < 6 || selectionStart === selectionEnd) { return }
+      this.field.setSelectionRange(value.length, value.length)
+    }
+    // The plugin cancels every `beforeinput` and writes the value itself, so typing a code
+    // fires no `input` on the field at all — only its own `input.bs.otpInput`, which leaves
+    // everything watching the field behind, the submit gating included. Say it again in the
+    // language the page speaks, guarded, since the plugin answers `input` with another.
+    this.relay = () => {
+      if (this.relaying) { return }
+      this.relaying = true
+      this.field.dispatchEvent(new Event('input', { bubbles: true }))
+      this.relaying = false
+    }
+    // A pasted code is a whole code, so there is nothing left to confirm: send it. A typed
+    // one is not, because the sixth digit may be a typo the typist is about to fix. Emptied
+    // first, or a code pasted over six already there is dropped: the field is full and
+    // `maxlength` has nowhere to put the new one.
+    this.remember = () => {
+      this.pasted = true
+      this.field.value = ''
+    }
+    this.forget = (event) => { if (/^[0-9]$/.test(event.key)) { this.pasted = false } }
+    this.send = () => {
+      if (!this.pasted) { return }
+      this.pasted = false
+      this.submit()
+    }
+    this.submit = () => this.element.closest('form')?.requestSubmit()
+    // A code that arrives without a keystroke — iOS offering it from Messages, or any other
+    // autofill — is written straight into the field, which fires a native `input`; typing
+    // never does. So this is either the relay above or a whole code that appeared, and the
+    // slots have to be told. `keyup` is one of the three events the plugin re-reads the field
+    // on, and it re-reads in place: redrawing takes the row of six down and puts it back up,
+    // which is the shrink with the bare field showing yellow underneath. And the plugin
+    // announces completeness only for input it handled, so a code that landed this way is
+    // sent from here as a pasted one is — tapping the suggestion is the confirmation.
+    this.adopt = () => {
+      if (this.relaying) { return }
+      this.field.dispatchEvent(new Event('keyup', { bubbles: true }))
+      if (this.field.checkValidity()) { this.submit() }
+    }
+    this.listeners = [['input', this.adopt], ['input.bs.otpInput', this.relay],
+      ['paste', this.remember], ['keydown', this.forget], ['complete.bs.otpInput', this.send]]
+    for (const [name, on] of this.listeners) { this.element.addEventListener(name, on) }
+    this.draw()
+    // A refused code comes back as a re-render that can leave this controller untouched, so
+    // the drawing is redone whenever Turbo renders rather than only when Stimulus connects.
+    document.addEventListener('turbo:render', this.draw)
+    // On the document rather than the field: iOS reports a selection it made itself here.
+    document.addEventListener('selectionchange', this.collapse)
+  }
+  disconnect() {
+    document.removeEventListener('turbo:render', this.draw)
+    document.removeEventListener('selectionchange', this.collapse)
+    for (const [name, on] of this.listeners) { this.element.removeEventListener(name, on) }
+    this.otp?.dispose()
+  }
+  // The one real field the six slots are drawn over, and the only thing that holds the code.
+  get field() { return this.element.querySelector('.otp-input') }
+}

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

@@ -0,0 +1,89 @@
+import { Controller } from '@hotwired/stimulus'
+// How a North American phone reads on a HouseAccount page: `555-555-5555`, on a cell
+// that shows one and in a field that takes one. The server hands over ten bare digits
+// and a `data-controller`, and everything about the shape is decided here, so an app
+// that wants `(555) 555-5555` changes this file and no Ruby.
+export default class extends Controller {
+  // Ten digits with the separators typed in; an area or exchange code never starts
+  // with 0 or 1, which is what NANP forbids and what the server's own check enforces.
+  static pattern = '[2-9]\\d{2}-[2-9]\\d{2}-\\d{4}'
+  static sample = '555-555-5555'
+  // A field says what shape it wants where the markup left that blank, and both a
+  // field and a cell are formatted at once — so a form redrawn after a rejected save
+  // shows the separators rather than the digits it was sent.
+  connect() {
+    if (this.#field) { this.#constrain() }
+    this.#format()
+  }
+  // Only a digit goes in, and not an eleventh: a full field refuses the key itself rather
+  // than taking it and cutting it back, since everything else watching the field — a
+  // submit shut until it is valid — would see the eleven digits first and never the ten.
+  down(event) {
+    if (!event.key) { return }
+    if (event.ctrlKey) { return }
+    if (event.metaKey) { return }
+    if (event.key.length > 1) { return }
+    if (!/[0-9.]/.test(event.key)) { event.preventDefault(); return }
+    if (this.#digits().length >= 10 && this.#nothingSelected()) { event.preventDefault() }
+  }
+  input(event) {
+    if (event.inputType === 'deleteContentBackward') { return }
+    this.#format()
+  }
+  get #field() {
+    return this.element instanceof HTMLInputElement
+  }
+  #digits() {
+    return this.constructor.digits(this.#field ? this.element.value : this.element.textContent)
+  }
+  #nothingSelected() {
+    return this.element.selectionStart === this.element.selectionEnd
+  }
+  #constrain() {
+    const { pattern, sample } = this.constructor
+    const field = this.element
+    field.pattern ||= pattern
+    field.placeholder ||= sample
+    field.title ||= `Please match the format ${sample}`
+    field.inputMode ||= 'numeric'
+  }
+  // A value that came in whole — pasted, autofilled — is reshaped, and where that changed
+  // it the field says `input` again, so a submit that read the raw paste reads the shape.
+  #format() {
+    const text = this.#field ? this.element.value : this.element.textContent
+    const formatted = this.constructor.format(text)
+    if (formatted === text) { return }
+    if (!this.#field) { this.element.textContent = formatted; return }
+    this.element.value = formatted
+    if (this.saying) { return }
+    this.saying = true
+    this.element.dispatchEvent(new Event('input', { bubbles: true }))
+    this.saying = false
+  }
+  // The digits in `text`, up to ten, with a dash after the third and the sixth.
+  static format(text) {
+    const digits = this.digits(text)
+    const parts = [digits.substring(0, 3), digits.substring(3, 6), digits.substring(6, 10)]
+    return parts.filter((part) => part.length > 0).join('-')
+  }
+  // The digits alone, less the country code a number arrives with: no NANP area code
+  // starts with a 1, so a leading 1 on eleven digits is +1 and nothing else.
+  static digits(text) {
+    const digits = text.replace(/\D/g, '')
+    return digits.length > 10 && digits.startsWith('1') ? digits.slice(1, 11) : digits.slice(0, 10)
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+// Cycles a field's own suggestion, so the placeholder reads as an invitation rather than as
+// one fixed example. Somebody who has started typing is left alone.
+export default class extends Controller {
+  static values = { questions: Array, every: { type: Number, default: 10000 } }
+  connect() {
+    this.index = 0
+    this.timer = setInterval(() => this.#cycle(), this.everyValue)
+  }
+  disconnect() {
+    clearInterval(this.timer)
+  }
+  // The class fades the placeholder out; the text is swapped while it cannot be seen.
+  #cycle() {
+    if (this.element.value) { return }
+    this.element.classList.add('is-fading')
+    setTimeout(() => {
+      this.index = (this.index + 1) % this.questionsValue.length
+      this.element.placeholder = this.questionsValue[this.index]
+      this.element.classList.remove('is-fading')
+    }, 300)
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+import { Tooltip } from 'bootstrap'
+// Largest first, so the first one an instant clears is the one it is said in.
+const UNITS = [
+  ['year', 31536000000], ['month', 2592000000], ['week', 604800000],
+  ['day', 86400000], ['hour', 3600000], ['minute', 60000],
+]
+// How long ago a timestamp was, said again at the moment somebody asks. The server
+// writes the same words with Rails' own helper, which is what a reader without
+// JavaScript gets — but a table is cached and a page is left open, so those words are
+// only true when they are drawn. These are true when they are read.
+export default class extends Controller {
+  // Before the `tooltip` controller beside it, which is what makes the instance: this
+  // listener is registered first and so runs before Bootstrap's own.
+  connect() {
+    this.entered = () => this.#refresh()
+    this.element.addEventListener('mouseenter', this.entered)
+  }
+  disconnect() {
+    this.element.removeEventListener('mouseenter', this.entered)
+  }
+  // Through `setContent`, since Bootstrap reads a tooltip's words once when it is made
+  // and never looks at the attribute again.
+  #refresh() {
+    const at = new Date(this.element.getAttribute('datetime'))
+    if (isNaN(at.getTime())) { return }
+    Tooltip.getInstance(this.element)?.setContent({ '.tooltip-inner': this.#words(at) })
+  }
+  #words(at) {
+    const format = new Intl.RelativeTimeFormat(document.documentElement.lang || 'en')
+    const ms = at - new Date()
+    for (const [unit, size] of UNITS) {
+      if (Math.abs(ms) >= size) { return format.format(Math.round(ms / size), unit) }
+    }
+    return format.format(Math.round(ms / 1000), 'second')
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+// A form's submit is shut until every required field has a value, so a reader is told
+// a message cannot be sent before they try, not after.
+export default class extends Controller {
+  connect() {
+    this.toggle()
+    this.element.querySelectorAll('[required]').forEach((field) => {
+      field.addEventListener('input', () => this.toggle())
+    })
+  }
+  toggle() {
+    const invalid = this.element.querySelectorAll('[required]:invalid').length > 0
+    this.element.querySelectorAll('[type="submit"]').forEach((button) => { button.disabled = invalid })
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+// One masked value and the click that unmasks it. The plaintext arrives with the
+// page rather than being fetched: the mask is against a screenshot, not against
+// whoever is already reading the record.
+export default class extends Controller {
+  static targets = ['mask', 'button']
+  static values = { plain: String }
+  show() {
+    this.maskTarget.textContent = this.plainValue
+    // Nothing left for it to do, and a link that reveals what is already revealed
+    // reads as though there were more to see.
+    this.buttonTarget.remove()
+  }
+}