# ui_kits/app — applied interface kit

The avonlake.city public-record design system, applied to the surfaces the rest of the
site needs. Everything here is built **only** from tokens read out of `index.html`,
the redesigned home page.

Open `ui_kits/app/index.html` first.

## Files

| File | What it is |
|---|---|
| `index.html` | Kit index. Applied masthead / hero / panel / card-grid / dark-band / footer, the install steps, the four working rules, and a live React binding demo. |
| `register-browser.html` | **Surface 01.** The prototype's 197-cell ALERG match field wired to a case-source tally and a filterable record table. Isolate a source → the field dims to 13%, the table filters, and the caption restates the count. |
| `case-file.html` | **Surface 02.** A single investigation: filing panel, dark ledger, deed table, decision record, and a three-cell stated-limitations block. |
| `corrections.html` | **Surface 03.** The intake form — tabs for "correct a claim" / "point at a record", plus an open-records-request table. The one place a resident writes back to the record. |
| `components.html` | **Surface 04.** All 21 components with their selector, their line in `index.html`, and the one rule that keeps each inside the system. |
| `app.css` | The component layer, extracted from `index.html`. Everything below the `EXTENSIONS` banner is derived, not observed. |
| `app.js` | The behavior layer, ported from the source's inline script. Same ARIA, same reduced-motion handling. |
| `components/` | Optional React binding — see below. |

## Components

`components/` is an **optional** React binding for teams porting the system into a React
codebase. Each file emits this system's class names and nothing else — no inlined token
values — so a change in `colors_and_type.css` still reaches them. Each assigns its browser
global, so they load as plain scripts with no bundler:

| File | Component | Source line in `index.html` |
|---|---|---|
| `components/Stamp.jsx` | `Stamp` — the status vocabulary (`live` / `prep`, plus the neutral `quiet`) | 159–161 |
| `components/Panel.jsx` | `Panel` — the filing-card evidence container, count-up and split bar included | 90–101, 487–516 |
| `components/FilingCard.jsx` | `FilingCard` — the catalog entry with its `data-tab` filing tab | 152–162 |
| `components/Ledger.jsx` | `Ledger` — the on-dark evidence list; warns if you pass more than one volt row | 132–137 |
| `components/RecordField.jsx` | `RecordField` — the prototype 197-match corpus encoding with isolate-on-hover/focus/click | 114–122, 437–485 |

`index.html` mounts all five over a static fallback. If React, Babel or any component file
fails to load, the fallback markup stands and every other page in the kit is unaffected.
The CSS and behavior layers stay dependency-free — this binding is the one exception.

## Usage

Copy the four core files, keep the load order, and reuse the page skeleton below.

```html
<link rel="stylesheet" href="colors_and_type.css">   <!-- color + type -->
<link rel="stylesheet" href="tokens.css">            <!-- spacing, radius, elevation, motion -->
<link rel="stylesheet" href="ui_kits/app/app.css">   <!-- components -->
<script src="ui_kits/app/app.js" defer></script>
```

Later files depend on earlier custom properties. No build step, no package, no CDN — the
system makes no third-party request. **Every rule in `app.css` consumes semantic roles**
(`--canvas`, `--ink`, `--action`, `--status-*`), not raw primitives, which is what makes
`data-theme="dark"` work without touching a component. `colors_and_type.css` binds Charis SIL with a relative
`url()`, so copy `fonts/` alongside it; the `@font-face` resolves relative to the
stylesheet, not the page.

### Page skeleton

```html
<a href="#main" class="skip">Skip to content</a>
<div class="topline" aria-hidden="true"></div>
<header class="mast">…wordmark · disclaimer tag · nav · live chip…</header>
<main id="main">
  <div class="hero">…</div>            <!-- editorial column + .panel -->
  <section class="field">…</section>   <!-- white: the corpus -->
  <section class="feat">…</section>    <!-- dark: at most one per page -->
  <section class="band">…</section>    <!-- .doc grid for anything methodological -->
</main>
<footer>…wordmark · disclaimer · file links · colophon…</footer>
```

### Behavior is opt-in by markup

`app.js` does nothing unless the markup asks for it:

| Attribute / class | Effect |
|---|---|
| `[data-nav-toggle]` + `[data-nav]` | Mobile drawer, maintains `aria-expanded` |
| `.hl` | Highlighter swipe (pre-lit under reduced motion) |
| `[data-record-field]` + `[data-legend]` | Builds the prototype 197-match field and its chips |
| `[data-count]` (+ `data-prefix`, `data-suffix`) | Count-up on reveal, decimals preserved |
| `.rv` | Scroll reveal |
| `[data-fill]` | Split-bar width, 200ms after its container reveals |

`register-browser.html` runs its own script instead, because it drives the table filter as
well as the field.

## Design Notes

Based on `index.html` only — a self-contained document with no third-party requests
(516 lines at extraction, 521 after the display and interface faces were bound). These notes carry forward
the rules that make it work:

1. **Volt has four roles:** one highlighted word, one figure per data block, one primary CTA per dark band, the footer TLD. Nothing beyond those.
2. **One hue family** — a ~150° green ramp, plus amber for "on record, not yet obtainable". No blue links, no red errors.
3. **Every headline figure is serif + `tabular-nums`.** Sans numerals break the document reading — the serif is self-hosted (Charis SIL, 28 KB) so this holds on every platform.
4. **Every claim carries a `.src` line** — register, retrieval date, or the limitation.
5. **The "not affiliated" disclaimer stays** in every masthead and footer.
6. **Nothing is reachable only through motion.** Reduced-motion users land on the same page.
7. **10px is the size floor**, and mono tracking values (`.16em` / `.11em` / `.07em`) are maximums tuned on SF Mono — reduce toward `.12em` on a wider mono, never increase.

Layout notes: the signature grid is `.doc` — a 172px mono margin note carrying the
methodological caveat beside the content it qualifies. Bands run 64px (light), 66px (dark)
and 60px (the white corpus field) on a 1180px measure with a 28px gutter. Colors, typography
and spacing tokens all live upstream in `colors_and_type.css` and `tokens.css`; nothing in
this kit redeclares a value.

Three components here are **not** in the source — the record table (`.rt`), the form field
(`.fld`) and the tab set (`.tabs`). They sit under the `EXTENSIONS` banner in `app.css`,
are stamped **Extension** in `components.html`, and are listed in `../../context/provenance.md`.

## Sample data

Figures on these surfaces are drawn from the source home page's ALERG prototype
(197 keyword matches across its early 14-source case fixture, 43.23 ac, $15M, 90.6%,
and the four 2021 exempt deeds). The first two figures are not live registry or
warehouse totals.
Everything beyond that — the sampled table rows, the open-request dates — is clearly
scoped as a demonstration in the page's own caption, and the forms are not wired to a
backend. No metric here is invented and presented as real.

## Related

- `../../DESIGN.md` — the full system
- `../../IMPLEMENTATION.md` — layers, theming, status mapping, porting, pre-ship checklist
- `../../SKILL.md` — agent-facing build instructions
- `../../preview/index.html` — ten focused review cards
- `../../preview/type-audit.html` — why the display face is bound, with live specimens
- `../../context/provenance.md` — what was read, what was excluded, and why