houseaccount 0.10.1

package/app/stylesheets/houseaccount/shell.css

@@ -0,0 +1,197 @@
+/* A crumb that is not a link keeps its resting colors under the cursor.
+   Bootstrap lights every .breadcrumb-link on hover, which on a <span>
+   promises a click that goes nowhere — and the element is the whole
+   discriminator, since a crumb that links is an <a>. Redefining the hover
+   tokens, rather than out-cascading the hover rule, leaves Bootstrap's own
+   selector in charge and the active crumb its own resting color. */
+span.breadcrumb-link {
+  --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-color);
+  --bs-breadcrumb-link-hover-bg: transparent;
+}
+span.breadcrumb-link.active {
+  --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-active-color);
+}
+
+/* Nothing here is meant to be wider than the window: the one thing that is, a
+   table, scrolls inside its own wrapper. Safari lays a stacked table's hidden
+   header row out at its full width all the same, and a page that can be
+   scrolled to it is a page Safari zooms out of and draws the navbar short on.
+   `clip` on the shell rather than `hidden`: a `hidden` axis turns the other into
+   `auto`, and the body then cut off whatever hung below it — a filter's menu, on a
+   page whose table had no rows to be taller than the menu. `clip` leaves the
+   other axis alone. */
+html { overflow-x: hidden; }
+.recourse-shell { overflow-x: clip; }
+
+/* A finger does not hover. The tint a pointer leaves on the row under it, or on
+   the link under it, would stay on whatever was last touched — or land on whatever
+   the redrawn page put under the finger — so a touch screen gets none. */
+@media (hover: none) {
+  .table-hover > tbody > tr:hover > * {
+    --bs-table-color-state: initial;
+    --bs-table-bg-state: initial;
+  }
+  .nav-link:hover:not(.active) { background-color: transparent; }
+}
+
+/* The navbar stacks over the content: a menu opened from a filter drops over the
+   first rows of the table rather than under them. */
+.recourse-shell > nav { position: relative; z-index: 1; }
+
+/* The shell is three things — the sidebar, the navbar, the content — written in
+   the order a phone reads them: a row of icons at the very top, the trail and the
+   search under it, the page under that, scrolling as one. From the width the
+   sidebar becomes a column at, a grid seats them the other way round. The navbar
+   runs across the top, the sidebar takes the column under it and the content the
+   rest, the shell is exactly the viewport, and `main` is the only thing in it that
+   scrolls — so the navbar and the sidebar stay where they are however far down the
+   table a reader is. `minmax(0, 1fr)` is what lets the second row be shorter than
+   what is in it; a `1fr` alone is as tall as its content, and the page would scroll
+   after all.
+   The sidebar deliberately does not scroll. A window dragged shorter than the
+   sidebar itself is the one case the viewport cannot hold, and there the sidebar
+   is allowed to spill past the shell and let the browser scroll the page — which is
+   what a reader expects of something taller than the screen. Were it to scroll on
+   its own instead, the same overflow would be hidden inside it and the page would
+   look whole while its foot was unreachable. */
+@media (width >= 768px) {
+  .recourse-shell {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-areas: 'nav nav' 'aside main';
+    height: 100dvh;
+  }
+  .recourse-shell > nav { grid-area: nav; }
+  .recourse-sidebar { grid-area: aside; }
+  .recourse-shell > main { grid-area: main; overflow-y: auto; }
+}
+
+/* The sidebar rules off the navbar below it while it is the band at the top of a
+   phone, and off the content beside it once it is a column. v6 generates no
+   responsive border utilities, so the switch is written out. */
+.recourse-sidebar {
+  border-block-end: var(--bs-border-width) solid var(--bs-border-color);
+}
+@media (width >= 768px) {
+  .recourse-sidebar {
+    border-block-end: 0;
+    border-inline-end: var(--bs-border-width) solid var(--bs-border-color);
+  }
+}
+
+/* Held Option marks the letter each sidebar link answers to. Marked rather than
+   bracketed: '[C]ontacts' would shift the whole sidebar two characters wide the
+   moment the key went down. Swap the two rules below for the bracketed form. */
+.recourse-keys .recourse-key {
+  font-weight: var(--bs-font-weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+/* .recourse-keys .recourse-key::before { content: '['; }
+   .recourse-keys .recourse-key::after  { content: ']'; } */
+
+/* The foot of the sidebar holds the scheme toggle and the way out side by side,
+   each centered in its own half of the row: the toggle alone is in the middle, and
+   the two together are at a quarter and at three quarters. Each control sits in
+   a wrapper — the toggle's own, the form `button_to` draws — and the wrapper is
+   the half, so a button is only as wide as its icon and so is its hover. */
+.recourse-foot { display: flex; }
+.recourse-foot > * { flex: 1 1 0; display: flex; justify-content: center; }
+.recourse-foot .nav-link { border-radius: var(--bs-radius-5); }
+/* A hand cursor alone says little on an icon: a tint under it says it is a control.
+   Only where something can hover: a finger's tap leaves `:hover` set until the next
+   tap elsewhere, and a tint that stays reads as a button stuck down. */
+@media (hover: hover) {
+  .recourse-foot .nav-link:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }
+}
+
+/* `.nav-item` ships `flex: auto`: in a row every entry would take an equal share
+   of the width and in a full-height column an equal share of the height, and the
+   foot's auto margin would never have anything left to push against. Every item is
+   its own size instead, in both directions. */
+.recourse-sidebar .nav-item { flex: 0 0 auto; }
+
+/* On a phone the sidebar is one row of icons across the top, centered, each entry
+   with less room around it than a column gives — a dozen have to fit — and wrapping
+   to a second line only where a host has more than a screen's width of them. */
+@media (width < 768px) {
+  .recourse-sidebar .nav { justify-content: center; --bs-nav-link-padding-x: .5rem; }
+}
+
+/* The foot sits at the bottom of the sidebar and stretches across it while the
+   sidebar is a column, and is simply the last item of the row while it is not
+   — the query matches the `md:` the sidebar's own classes use. */
+@media (width >= 768px) {
+  /* A floor rather than a height, and never wrapped. `.nav` ships `flex-wrap:
+     wrap`, and a column that may wrap, whose items are pinned to their own height
+     above, and which is told exactly how tall to be has one way to place a link
+     that does not fit: a second column. Which is what a short window used to draw.
+     The floor lets it be taller than the space it was given. */
+  .recourse-sidebar .nav { min-height: 100%; flex-wrap: nowrap; }
+  /* And it rides at the foot of the screen, which the auto margin alone is
+     enough to do: the nav's floor is the sidebar's full height, so while the
+     links leave room the margin takes all of it and the foot sits on the fold,
+     rising with it as the window is shortened. Once the links fill the nav there
+     is no room left to take, and the foot comes to rest immediately below the
+     last of them and goes under the fold with it, to be scrolled to.
+     Deliberately not sticky. Sticking it to the bottom of the viewport would lift
+     it off that resting place and hold it over the links it had passed — which is
+     what the background color was for, masking whichever one it covered. Both go
+     together: nothing is painted over, so nothing needs painting out. */
+  .recourse-sidebar .recourse-foot {
+    margin-block-start: auto;
+    align-self: stretch;
+  }
+}
+
+/* A phone reads the chrome as pictures. A sidebar entry is its icon, a crumb its
+   icon, a tab its icon and its figure — `17` rather than `17 franchises` — and the
+   foot's controls their icons, so the sidebar is one row of squares and the trail
+   leaves the search its room. The words are there all the same, read but not seen
+   the way Bootstrap's `.visually-hidden` does it, and the arrows at the foot put
+   them back: the cookie they write has the server draw the shell `.recourse-expanded`,
+   and then none of this applies. A tab or a crumb with no icon keeps its word at
+   every width, there being nothing else to stand for it.
+   The same hiding, at every width, for the foot's words once the sidebar is a
+   column: there is room for an icon and not for a word beside it. */
+.recourse-foot-word { margin-inline-start: .4em; }
+@media (width < 768px) {
+  .recourse-shell:not(.recourse-expanded) :is(.recourse-nav-word, .recourse-crumb-word,
+                                              .recourse-tab-word, .recourse-foot-word) {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+}
+@media (width >= 768px) {
+  .recourse-foot-word {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+  /* Nothing to expand: a column has its words already. */
+  .recourse-density { display: none; }
+}
+
+/* The arrows say where a tap goes, like the moon: parting, with `Expand`, while
+   the chrome is icons; meeting, with `Compact`, once the words are out. Both faces
+   are drawn and the shell's class picks, so the button needs no script to redraw. */
+.recourse-density-expanded { display: none; }
+.recourse-expanded .recourse-density-compact { display: none; }
+.recourse-expanded .recourse-density-expanded { display: inline; }
+
+/* The toggle draws both icons and shows the one that names where a click
+   would go: a moon on a light page, a sun on a dark one. Three states rather than
+   two, because a page nobody has chosen for carries no attribute at all, and the
+   media query is then the only thing that knows which mode it is in. Both are
+   declared at every step rather than one left to its default, so that no state
+   can end up hiding the pair and leaving a button with nothing in it. */
+.recourse-scheme-light { display: inline; }
+.recourse-scheme-dark { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-bs-theme='light']) .recourse-scheme-light { display: none; }
+  :root:not([data-bs-theme='light']) .recourse-scheme-dark { display: inline; }
+}
+:root[data-bs-theme='light'] .recourse-scheme-light { display: inline; }
+:root[data-bs-theme='light'] .recourse-scheme-dark { display: none; }
+:root[data-bs-theme='dark'] .recourse-scheme-light { display: none; }
+:root[data-bs-theme='dark'] .recourse-scheme-dark { display: inline; }

package/app/stylesheets/houseaccount/table.css

@@ -0,0 +1,105 @@
+/* An action column is as wide as a row is tall — an icon in a square — and a
+   counter column starts at the same square, widening only when a figure like
+   38,405 needs the room: a table laying out to 100% reads the width as a
+   preference, never crushes content into it, and hands what these cells do
+   not use to the columns carrying text. Not while the table is stacked, where
+   every cell is a block and a square one is a squashed one — the query
+   matches `.sm:table-stacked`'s. */
+@container (width >= 576px) {
+  .recourse-actions, .recourse-counter {
+    width: calc(1em * var(--bs-body-line-height) + 2 * var(--bs-table-cell-padding-y));
+    white-space: nowrap;
+    text-align: center;
+  }
+}
+
+/* Stacked, a cell reads as one line — `Estimate hi: 600`, the heading semibold
+   and the value after it — where Bootstrap puts the heading on a line of its own
+   and leaves the row's first cell with no heading at all, bold in its place: a
+   status opening a row would be a bare badge. Every cell is headed here. And a
+   value with no space in it — an address, a token — breaks rather than widening
+   the row past the phone. */
+@container (width < 576px) {
+  .sm\:table-stacked > tbody > tr > td[data-cell]::before {
+    content: attr(data-cell) ': ';
+    display: inline;
+    font-weight: var(--bs-font-weight-semibold);
+  }
+  .sm\:table-stacked > tbody > tr > td:first-child { font-weight: inherit; }
+  /* A counter's heading goes inside its link, so the whole `Franchises: 21` is
+     one thing to tap; the cell's own heading steps aside for it. */
+  .sm\:table-stacked > tbody > tr > td.recourse-counter::before { content: none; }
+  .sm\:table-stacked > tbody > tr > td.recourse-counter > [data-cell]::before {
+    content: attr(data-cell) ': ';
+    font-weight: var(--bs-font-weight-semibold);
+  }
+  .sm\:table-stacked > tbody > tr > td:not(:first-child) + td::before { margin-block-start: 0; }
+  .sm\:table-stacked > tbody > tr > td { overflow-wrap: anywhere; }
+}
+
+/* A counter says what it counts in one of two ways, and the table's own width is
+   what picks: the icon and a bare figure where the column is a square, the
+   counted model's words where there is room to read them. Bootstrap's `xl`, so
+   words arrive on a wide monitor and nowhere narrower — the width above is a
+   preference a table never crushes content into, so the column simply widens to
+   take them. Against `.table-responsive` like every query here, which is the
+   table's width rather than the window's: a sidebar takes a few hundred pixels
+   the window knows nothing about. */
+.recourse-counter-word { display: none; }
+@container (width >= 1280px) {
+  .recourse-counter-icon, .recourse-counter-figure { display: none; }
+  .recourse-counter-word { display: inline; }
+}
+
+/* A row the viewer has kept, and the only report a click ever gets, so it has to
+   be seen. A twelfth of the primary mixed into the page rather than
+   `--bs-primary-bg-subtle`: that token is a fixed step of the ramp, far enough
+   from the page on a low-contrast palette to cost the text a point of contrast
+   it has not got — mixing into the page keeps the tint the same distance from it
+   whatever the palette. A background rather than `.table-active`, which sets the
+   very variable `.table-hover` sets and would read as the row under the cursor,
+   and lose its tint the moment it became one; a background lets the hover shadow
+   lay over it. */
+.table > tbody > .recourse-kept > * {
+  background-color: color-mix(in srgb, var(--bs-primary-fg) 12%, var(--bs-bg-body));
+}
+
+/* The row a write just landed on, tinted for as long as the message saying so
+   stands. On the cells rather than on the row, like the kept tint beside it: the
+   table collapses its borders, so the cells are what paint, and one tint across
+   all of them is what reads as a single row — where anything drawn per cell reads
+   as a box around each of them instead.
+   A background rather than a border. A border on a collapsing table is a width
+   the table then measures around, and taking it away again leaves the line it
+   drew sitting between two rows that no longer want one.
+   Mixed into the page exactly as the kept tint below is, and never
+   `--bs-success-bg-subtle`: that token is `light-dark(--bs-green-100,
+   --bs-green-900)`, and a palette builds those steps by mixing toward white or
+   black rather than toward the page — so how far it lands from the page is the
+   palette's business and not ours. Mixing here keeps it the same distance on all
+   nine. The success family rather than the primary one is what tells it apart
+   from the kept tint it may land on top of: a different hue reads as a different
+   thing, where a second shade of the primary would read as more of the same. */
+.table > tbody > .recourse-written > *,
+.table > tbody > .recourse-written-out > * {
+  --recourse-written: color-mix(in srgb, var(--bs-success-fg) 12%, var(--bs-bg-body));
+}
+.table > tbody > .recourse-written > * {
+  background-color: var(--recourse-written);
+}
+/* Let go of over the second the toast beside it takes to fade, and started by the
+   same event. The class above comes off as this one goes on, so the animation is
+   the only thing painting the row while it runs and nothing paints it afterwards
+   — which hands a kept row back its own tint rather than leaving it wearing this
+   one. */
+.table > tbody > .recourse-written-out > * {
+  animation: recourse-written-out 1s linear;
+}
+@keyframes recourse-written-out {
+  from { background-color: var(--recourse-written); }
+  to { background-color: var(--bs-bg-body); }
+}
+/* The tint itself is not motion; only its going is. */
+@media (prefers-reduced-motion: reduce) {
+  .table > tbody > .recourse-written-out > * { animation: none; }
+}

package/app/stylesheets/houseaccount/values.css

@@ -0,0 +1,41 @@
+/* One rule per row of the show page, so a value and its heading read as one thing
+   and the next pair as another. On the cells rather than between them: a column's
+   gutter is padding inside it, so two side by side draw one unbroken line.
+   Every row reserves the width a rule takes, in `transparent`, and the show page
+   only colors it in — which is what leaves a field at exactly the height of the
+   value it edits, row after row down two pages. */
+.recourse-row {
+  border-block-end: var(--bs-border-width) solid transparent;
+}
+.recourse-values > .recourse-row {
+  border-block-end-color: var(--bs-border-color);
+}
+/* And a value stands as tall as the control that edits it, so a row on one page
+   is a row of the same height on the other. Bootstrap gives
+   `.form-control-plaintext` a control's padding and line height but no minimum,
+   and an icon or a badge is shorter than a box. */
+.recourse-values .form-control-plaintext {
+  min-height: var(--bs-control-min-height);
+}
+/* The reveal is a word beside a value rather than a control beside it, so it takes
+   the line's height and not `.btn-sm`'s minimum — which would leave a masked row
+   taller than the field that edits the same attribute. */
+.form-control-plaintext .btn {
+  min-height: 0;
+}
+
+/* A payload in a block of its own, bounded so it scrolls rather than grows. `pre`
+   for the indentation that makes JSON readable, but wrapping rather than running
+   off to the side: a flex item's automatic minimum size is the min-content width
+   of whatever is inside it, and `overflow` on this box does not lower it — so one
+   unbroken 4,000-character token became the width of the value's column, then of
+   `main`, which then wrapped below the sidebar it belongs beside. `pre-wrap` keeps
+   the indentation and takes the wrapping, and `anywhere` is what lowers
+   min-content, which `break-word` in its place would not. */
+.recourse-payload {
+  max-height: 12rem;
+  margin-block-end: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/app/stylesheets/houseaccount/wall.css

@@ -0,0 +1,123 @@
+/* The wall: a cyanotype of trade tools drifting behind a page, drawn by the `wall`
+   controller from one attribute. What stands on it is the host's to draw. Every color is a
+   pair for light and dark: a blueprint is white on blue, so the theme inverts the pair
+   rather than tinting one of them. */
+
+/*
+ * The wall's own values, at the root rather than on a shell: the field is rendered wherever a
+ * layout happens to put it, and off the shell it inherited nothing -- which left the ground
+ * unpainted and, with no size to read, every mark drawn at its natural size. One wall, the
+ * same on every page.
+ *
+ * A blueprint is white on blue, so the theme inverts the pair rather than tinting one of them:
+ * dark ink on pale stock in light, pale ink on deep navy in dark. Its own two blues rather
+ * than the theme's, so the wall reads the same whatever the primary is.
+ */
+:root {
+  /* One alpha for the whole wall: the grid and the marks recede together, and the words in
+     front of them stay the first thing read. */
+  --tool-alpha: 0.16;
+  --tool-ground: light-dark(#c9d9ea, #0c2338);
+  --tool-ink: light-dark(#10314f, #cbdff2);
+  --tool-ink-alt: light-dark(#19507f, #a5c6e6);
+  --tool-size: 52px;
+  /* One turn of the wall. Every column takes its own fraction of this. */
+  --tool-drift: 300s;
+}
+
+@media (min-width: 768px) {
+  :root { --tool-size: 60px }
+}
+
+/*
+ * The ground, painted from the attribute that asks for the wall: the `wall` controller draws
+ * the columns a moment after the first paint, and a page that turned from white to blue as
+ * they arrived would read as a flash. A stroke and its caps here rather than on each mark,
+ * so a mark carries geometry alone.
+ */
+[data-controller~='wall'] { position: relative; isolation: isolate; background: var(--tool-ground, #c9d9ea) }
+
+/*
+ * Fixed rather than absolute, so the wall fills a phone's viewport and never lengthens the
+ * page. It carries the ground the card contrasts against too.
+ */
+.tools {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background: var(--tool-ground, #c9d9ea);
+  /* Under everything else in the shell, which isolates it, so the wall never paints over
+     the sheet the controller put it beside. */
+  z-index: -1;
+}
+
+/* The drafting grid, drawn in the ink so it tracks the blue instead of being stated twice,
+   and held back by the same alpha as the marks rather than one baked into its colour. */
+.tools-grid {
+  position: absolute;
+  inset: 0;
+  opacity: var(--tool-alpha);
+  background-image:
+    linear-gradient(to right, var(--tool-ink-alt) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--tool-ink-alt) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/*
+ * One element per column, each on its own timeline. A single field moving as a block reads as
+ * a sheet sliding; columns drifting at slightly different rates read as depth. Every column is
+ * twice the viewport with its marks drawn twice, so translating it by half its own height
+ * lands exactly on the repeat and the loop has no seam.
+ */
+.tools-cols { position: absolute; inset: 0; display: flex }
+.tools-col {
+  position: relative;
+  flex: 1;
+  height: 200%;
+  animation: tool-drift calc(var(--tool-drift, 300s) * var(--col-rate, 1)) linear infinite;
+}
+
+/*
+ * Fewer columns as the page narrows rather than the same seven squeezed together: the ones
+ * left widen to fill the row, so a mark keeps its size and its neighbours stay about two
+ * hundred pixels away whatever the window is doing.
+ */
+@media (width < 1536px) { .tools-col:nth-child(n+7) { display: none } }
+@media (width < 1280px) { .tools-col:nth-child(n+6) { display: none } }
+@media (width < 1024px) { .tools-col:nth-child(n+5) { display: none } }
+@media (width < 768px) { .tools-col:nth-child(n+4) { display: none } }
+@media (width < 576px) { .tools-col:nth-child(n+3) { display: none } }
+
+@keyframes tool-drift {
+  from { translate: 0 0 }
+  to { translate: 0 -50% }
+}
+
+/* A moving pattern is decoration; somebody who asked for stillness keeps the pattern. */
+@media (prefers-reduced-motion: reduce) {
+  .tools-col { animation: none }
+}
+
+.tool {
+  position: absolute;
+  left: 50%;
+  width: var(--tool-size, 52px);
+  height: var(--tool-size, 52px);
+  /* Centered on its point by translate rather than a negative margin, so the mirrored columns
+     can use `scale` without the two fighting over one `transform`. */
+  translate: -50% -50%;
+  color: var(--tool-ink, #10314f);
+  opacity: var(--tool-alpha);
+  fill: none;
+  stroke: currentColor;
+  /* The house's stroke, on the 512 grid every mark is drawn on. */
+  stroke-width: 28;
+  /* Butt and miter rather than round: round caps are what made a wall of these read as a
+     nursery print rather than as a drawing. */
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+}
+
+.tool-alt { color: var(--tool-ink-alt) }
+

package/app/stylesheets/houseaccount.css

@@ -0,0 +1,16 @@
+/* Everything a HouseAccount page is styled by, in one file: Bootstrap 6 as upstream ships
+   it, its icons cut down to the ones the house draws, and then the house's own rules, each in a file named for what it draws.
+   Built by esbuild into /css/houseaccount.css; the imports are the reading order. */
+@import '../../vendor/bootstrap.min.css';
+@import 'houseaccount/icons.css';
+@import 'houseaccount/base.css';
+@import 'houseaccount/lockup.css';
+@import 'houseaccount/shell.css';
+@import 'houseaccount/table.css';
+@import 'houseaccount/map.css';
+@import 'houseaccount/search.css';
+@import 'houseaccount/values.css';
+@import 'houseaccount/chat.css';
+@import 'houseaccount/pin.css';
+@import 'houseaccount/wall.css';
+@import 'houseaccount/flow.css';

package/app/stylesheets/theme/bootstrap.css

@@ -0,0 +1,11 @@
+/* Bootstrap's own palette, and the only file here that declares nothing.
+
+   The eight beside it work by overriding upstream's `:root`, so having upstream's
+   palette back is a matter of dropping their block rather than of writing one — and
+   swapping this link in is how the sidebar's toggle drops it. `Recourse.theme = nil`
+   and `:bootstrap` are the same look by two routes: the first links no stylesheet at
+   all, the second links this one.
+
+   It is named so the toggle can reach it. A reader who rotates through nine palettes
+   and never finds the one the pages started in has been shown a door with no handle
+   on the inside. */