@7365admin1/layer-common 3.2.2-staging.109 → 3.2.2-staging.110

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.109",
+  "version": "3.2.2-staging.110",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/tools/render-harness/README.md

@@ -0,0 +1,87 @@
+# Render harness hardening
+
+Tooling, not product code. Nothing here ships in `@7365admin1/layer-common` and
+nothing here is imported by any component — it exists to stop the theme-review
+harness reporting a pass it has not earned.
+
+The harness itself (vite + Vuetify + a mirror of this package, driven by
+Playwright) lives outside the repo, under
+`_scratch-theme-review/harness`. These four files attach to it.
+
+| File | What it does |
+|---|---|
+| `harness-init.ps1` | Makes a private harness for one worktree: fork directory and dev port both derived from the worktree path, own vite cache, mirror stamped with what was synced. |
+| `render-check.mjs` | The run. Refuses to measure an unprovable mirror, then measures each screen at 360/768/1024/1440 × light/dark. |
+| `probe.mjs` | The in-page half — what is actually read off the glass. |
+| `render-check.selftest.mjs` | Proves every detector fails the scenario it was written for. `node render-check.selftest.mjs`, no server needed. |
+| `baselines.json` | Per-screen recorded element and painted-text counts. |
+
+## Use
+
+```powershell
+cd <worktree>
+..\iservice365-layer-common\tools\render-harness\harness-init.ps1     # prints fork + port
+Start-Process -WorkingDirectory <fork> cmd.exe -ArgumentList '/c','npx vite --port <port> --strictPort'
+cd <fork>; $env:PORT=<port>
+node render-check.mjs <label> CameraMain NotificationSettings
+```
+
+Re-run `harness-init.ps1` after any edit to `assets`, `components`,
+`composables`, `constants`, `types` or `utils` — `render-check.mjs` compares the
+mirror to the worktree file by file and refuses to run when they disagree.
+
+## What each guard is for
+
+Every one of these was a real false pass on 2026-08-14, not a hypothetical.
+
+- **Shared mirror.** One `lc/` copy meant two agents silently measured each
+  other's branch. Isolation is now derived from the worktree, so there is
+  nothing to remember, and the mirror carries a stamp the run checks.
+- **Empty state.** A panel scored 8/8 dark-clean while drawing "No access logs
+  found". A table was signed off with zero header columns and "No data
+  available", so the header and cell rules under review had never been drawn. A
+  screen showing its empty state is a fixture bug and fails.
+- **Empty form.** The same bug in a shape nothing else can see — 1112 elements,
+  nothing blank, and not one control holding a value.
+- **Blank screen.** Six elements, zero page errors, and a counter read it as a
+  pass. Painted text is the honest signal.
+- **Element counts.** `MIN_ELS = 20` was at once too low (a cold partial paint
+  at 32 scored ok where warm is 49) and too high (a drawing screen at 19 was
+  reported NOT-MOUNTED). Screens legitimately range from 3 to 1100 elements, so
+  each carries its own baseline and an un-baselined screen is refused rather
+  than guessed at.
+- **Cold compile.** The run waits for the DOM to stop growing instead of a fixed
+  timeout, warms every screen first, prints the discarded warm-up numbers so the
+  gap is visible, and re-measures any row well under that screen's own best.
+- **Undefined custom properties.** `var(--success)` where the token is `--ok`:
+  the declaration is invalid, the element inherits, and nothing reports it. Now
+  caught even when the rule matches nothing on the screen — which is how the
+  original survived a full 8-shot render.
+- **Disabled controls.** WCAG-1.4.3-exempt, so logging them as failures put
+  fictional entries in an AA ledger. Classified as exempt, and the enabled state
+  is probed separately so the exemption cannot hide a real failure.
+- **Vuetify defaults.** `VAutocomplete` was missing from the harness, and 19
+  components in this package use one — the run would have invented a defect the
+  product does not have. The defaults are diffed against `plugins/vuetify.ts`
+  every run.
+
+## Baselines
+
+`--record` writes the current run's element and painted-text counts:
+
+```powershell
+node render-check.mjs --record base CameraMain
+```
+
+Only record from a run whose **screenshots you have opened**. A baseline
+recorded from a broken render makes the break permanent. A conversion that
+genuinely shrinks a screen below 70% of its baseline will flag — look at the
+shot, then re-record.
+
+`baselines.json` accepts `"allowEmpty": true` per screen for the rare component
+whose empty state IS the thing under review.
+
+## Rule that does not bend
+
+Fixtures are harness-only. Package code is never bent to suit the harness. If a
+screen will not draw, the fixture is wrong.

package/tools/render-harness/baselines.json

@@ -0,0 +1,22 @@
+{
+  "CameraMain": {
+    "els": 55,
+    "textChars": 85,
+    "recordedFrom": "0642279"
+  },
+  "NotificationSettings": {
+    "els": 150,
+    "textChars": 485,
+    "recordedFrom": "0642279"
+  },
+  "OvernightParkingAvailability": {
+    "els": 1132,
+    "textChars": 385,
+    "recordedFrom": "0642279"
+  },
+  "BulletinExpirationChip": {
+    "els": 3,
+    "textChars": 2,
+    "recordedFrom": "0642279"
+  }
+}

package/tools/render-harness/harness-init.ps1

@@ -0,0 +1,123 @@
+# Per-worktree render-harness isolation.
+#
+# WHY THIS EXISTS. The theme-review harness renders ONE `harness/lc/` mirror,
+# synced from a layer-common checkout by `sync-lc.ps1`. When two agents work at
+# once, the second `sync-lc.ps1` overwrites the first agent's mirror, and both
+# then measure whichever checkout synced last. That is silent - the run still
+# prints element counts, contrast readings and screenshots, all of the WRONG
+# branch. On 2026-08-14 it happened repeatedly, and every batch worked around it
+# by hand-forking the harness and hand-picking a port. Hand-picking is what
+# fails: forget it once and the whole run is fiction.
+#
+# So: isolation is DERIVED, never chosen. The fork directory and the dev port
+# both come from the worktree path, so the same worktree always gets the same
+# private harness and the same port, and two different worktrees cannot collide.
+#
+#   cd <worktree>; ..\iservice365-layer-common\tools\render-harness\harness-init.ps1
+#
+# Prints the fork path and port. Re-running is safe: it re-syncs `lc/` and
+# leaves the port alone.
+[CmdletBinding()]
+param(
+  # The layer-common worktree to render. Defaults to the current git worktree.
+  [string]$Worktree = (git rev-parse --show-toplevel),
+  # The canonical harness this fork is copied from.
+  [string]$Canonical = "C:\Seven365Projects\iService365\_scratch-theme-review\harness"
+)
+
+$ErrorActionPreference = "Stop"
+
+if (-not (Test-Path "$Worktree\.git")) { throw "not a git worktree: $Worktree" }
+if (-not (Test-Path "$Canonical\src\main.js")) { throw "canonical harness not found: $Canonical" }
+
+$slug = Split-Path $Worktree -Leaf
+$fork = Join-Path (Split-Path $Canonical -Parent) "harness-$slug"
+
+# --- port, derived ----------------------------------------------------------
+# FNV-1a over the worktree path: same worktree -> same port, every session, on
+# every machine. Then step upward past anything already listening, so a hash
+# collision or a stale server degrades to "next free port" instead of two
+# agents sharing one vite and measuring each other.
+function Get-DerivedPort([string]$s) {
+  $h = [uint32]2166136261
+  foreach ($c in $s.ToLower().ToCharArray()) {
+    # uint64 multiply, then modulo back into 32 bits. PowerShell widens past
+    # uint32 and refuses the cast rather than wrapping, and `-band 0xFFFFFFFF`
+    # is not the mask it looks like - 5.1 parses that literal as int -1.
+    $h = [uint32]((([uint64]($h -bxor [uint32][int]$c)) * 16777619) % 4294967296)
+  }
+  $p = 5400 + [int]($h % 200)
+  $busy = (Get-NetTCPConnection -State Listen -ErrorAction SilentlyContinue).LocalPort
+  while ($busy -contains $p) { $p++ }
+  return $p
+}
+
+$portFile = Join-Path $fork ".harness-port"
+if (Test-Path $portFile) {
+  $port = [int](Get-Content $portFile -Raw).Trim()
+} else {
+  $port = Get-DerivedPort $Worktree
+}
+
+# --- fork -------------------------------------------------------------------
+# Keyed on a file the copy produces, not on the directory: a run that died
+# half-way would otherwise leave a directory that looks finished forever.
+if (-not (Test-Path "$fork\vite.config.mjs")) {
+  New-Item -ItemType Directory -Path $fork -Force | Out-Null
+  # An ALLOWLIST, not "everything minus the big things": the canonical harness
+  # has accumulated hundreds of one-off runners, .json measure dumps and logs,
+  # and it also contains a stray `nul` that Copy-Item cannot read at all.
+  # `node_modules` becomes a junction (a full copy is ~400MB per agent) and
+  # `lc` is re-synced below.
+  foreach ($n in "src", "apps", "public", "index.html", "package.json", "yarn.lock", "vite.config.mjs", "sync-lc.ps1") {
+    Copy-Item (Join-Path $Canonical $n) -Destination $fork -Recurse -Force
+  }
+  cmd /c mklink /J "$fork\node_modules" "$Canonical\node_modules" | Out-Null
+}
+
+# The hardened runner lives in the repo, next to this script, so a fork always
+# gets the CURRENT one rather than whatever the canonical harness was carrying.
+Copy-Item (Join-Path $PSScriptRoot "render-check.mjs") -Destination $fork -Force
+Copy-Item (Join-Path $PSScriptRoot "baselines.json") -Destination $fork -Force -ErrorAction SilentlyContinue
+
+# A junctioned `node_modules` SHARES `node_modules/.vite` with the harness it
+# points at. Two servers writing one dep-cache produced 504s that photograph as
+# a blank screen - i.e. a fake "conversion broke the page". Own cache, always.
+$vite = Join-Path $fork "vite.config.mjs"
+$cfg = [System.IO.File]::ReadAllText($vite)
+if ($cfg -notmatch "cacheDir") {
+  $cfg = $cfg -replace "(?m)^\s*server:\s*\{", "  cacheDir: `"./.vite-cache`",`r`n  server: {"
+  # UTF8Encoding($false): Set-Content -Encoding utf8 writes a BOM on Windows
+  # PowerShell 5.1, and a BOM in a config file makes PostCSS's loader throw,
+  # which 500s EVERY .vue file - indistinguishable from a broken checkout.
+  [System.IO.File]::WriteAllText($vite, $cfg, (New-Object System.Text.UTF8Encoding($false)))
+}
+
+$pkgPath = Join-Path $fork "package.json"
+$pkg = [System.IO.File]::ReadAllText($pkgPath)
+$pkg = $pkg -replace '--port \d+', "--port $port"
+[System.IO.File]::WriteAllText($pkgPath, $pkg, (New-Object System.Text.UTF8Encoding($false)))
+[System.IO.File]::WriteAllText($portFile, "$port", (New-Object System.Text.UTF8Encoding($false)))
+
+# --- mirror -----------------------------------------------------------------
+& "$fork\sync-lc.ps1" -Src $Worktree
+
+# Stamp WHAT was mirrored, so a measurement can prove which checkout it rendered
+# rather than assume it. `render-check.mjs` refuses to run when this disagrees
+# with the worktree it was pointed at - which is what a foreign `sync-lc.ps1`
+# stamping over the mirror looks like. Written after the sync, because
+# `sync-lc.ps1` deletes everything in `lc/` that is not one of its six dirs.
+$stamp = @{
+  worktree = $Worktree
+  head     = (git -C $Worktree rev-parse HEAD)
+  branch   = (git -C $Worktree rev-parse --abbrev-ref HEAD)
+  port     = $port
+} | ConvertTo-Json -Compress
+[System.IO.File]::WriteAllText((Join-Path $fork "lc\.synced-from.json"), $stamp, (New-Object System.Text.UTF8Encoding($false)))
+
+Write-Output "harness  : $fork"
+Write-Output "port     : $port"
+Write-Output "renders  : $Worktree @ $(git -C $Worktree rev-parse --short HEAD)"
+Write-Output ""
+Write-Output "  Start-Process -WorkingDirectory '$fork' npx -ArgumentList 'vite','--port','$port','--strictPort'"
+Write-Output "  cd '$fork'; `$env:PORT=$port; node render-check.mjs <label> <Screen> [Screen...]"

package/tools/render-harness/probe.mjs

@@ -0,0 +1,229 @@
+// The in-page probe, in its own file so render-check.selftest.mjs can assert on
+// it against a hand-built page instead of hoping some product screen happens to
+// contain a disabled control, an undefined token and an empty state today.
+//
+export default function probe(opts) {
+  const root = document.querySelector(".app-content") || document.body;
+
+  const parseRGB = (s) => {
+    const m = String(s).match(/[\d.]+/g);
+    return m ? m.slice(0, 4).map(Number) : null;
+  };
+  const over = (fg, bg) => {
+    const a = fg.length > 3 ? fg[3] : 1;
+    return [0, 1, 2].map((i) => fg[i] * a + bg[i] * (1 - a));
+  };
+  const lum = (c) => {
+    const f = c.map((v) => {
+      v /= 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * f[0] + 0.7152 * f[1] + 0.0722 * f[2];
+  };
+  const ratio = (a, b) => {
+    const [l1, l2] = [lum(a), lum(b)].sort((x, y) => y - x);
+    return (l1 + 0.05) / (l2 + 0.05);
+  };
+  const backdrop = (el) => {
+    const stack = [];
+    for (let n = el; n; n = n.parentElement) {
+      const bg = parseRGB(getComputedStyle(n).backgroundColor);
+      if (!bg) continue;
+      const a = bg.length > 3 ? bg[3] : 1;
+      if (a === 0) continue;
+      stack.push(bg);
+      if (a === 1) break;
+    }
+    let base = [255, 255, 255];
+    for (let i = stack.length - 1; i >= 0; i--) base = over(stack[i], base);
+    return base;
+  };
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) return false;
+    const s = getComputedStyle(el);
+    return s.visibility !== "hidden" && s.display !== "none" && Number(s.opacity) > 0.05;
+  };
+
+  // A disabled control is exempt from WCAG 1.4.3, so its reading is not a
+  // defect. It is still recorded - separately - because "exempt" must not be a
+  // way for a real failure to disappear.
+  const DISABLED_SEL =
+    '[disabled],[aria-disabled="true"],.v-btn--disabled,.v-input--disabled,.v-field--disabled,fieldset[disabled]';
+  const isDisabled = (el) => !!el.closest(DISABLED_SEL);
+
+  const ownText = (el) =>
+    [...el.childNodes]
+      .filter((n) => n.nodeType === 3 && n.textContent.trim())
+      .map((n) => n.textContent.trim())
+      .join(" ");
+
+  const contrast = (only) => {
+    const out = [];
+    const seen = new Set();
+    for (const el of root.querySelectorAll("*")) {
+      if (only && !only.has(el)) continue;
+      if (!visible(el)) continue;
+      const own = ownText(el);
+      if (!own) continue;
+      const s = getComputedStyle(el);
+      const fg = parseRGB(s.color);
+      if (!fg) continue;
+      const bg = backdrop(el);
+      const px = parseFloat(s.fontSize);
+      const w = parseInt(s.fontWeight, 10) || 400;
+      const large = px >= 18.66 || (px >= 14 && w >= 700);
+      const need = large ? 3 : 4.5;
+      const r = ratio(over(fg, bg), bg);
+      if (r + 0.005 < need) {
+        const key = `${own.slice(0, 30)}|${s.color}|${px}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        out.push({
+          text: own.slice(0, 40),
+          color: s.color,
+          bg: `rgb(${bg.map(Math.round).join(", ")})`,
+          px,
+          weight: w,
+          ratio: Math.round(r * 100) / 100,
+          need,
+          disabled: isDisabled(el),
+        });
+      }
+    }
+    return out;
+  };
+
+  // --- empty state -------------------------------------------------------
+  // Vuetify's own no-data slot, plus the hand-written variants the screens use
+  // ("No access logs found", "No records", "Nothing to show").
+  const EMPTY_RE = /^no\b[\w\s'-]{0,40}\b(data|records?|results?|items?|found|available|yet)\b|^nothing to (show|display)\b/i;
+  const emptyText = [];
+  for (const el of root.querySelectorAll("*")) {
+    if (!visible(el)) continue;
+    const t = ownText(el);
+    if (t && t.length < 60 && EMPTY_RE.test(t)) emptyText.push(t.slice(0, 50));
+  }
+
+  // A table with zero header cells is the `computedHeaders === undefined`
+  // trap: the screen mounts, the toolbar draws, and the thing under review -
+  // the header and cell type rules - was never on the glass.
+  const tables = [...root.querySelectorAll("table")].filter(visible).map((t) => ({
+    cols: t.querySelectorAll("thead th").length,
+    rows: [...t.querySelectorAll("tbody tr")].filter((tr) => !EMPTY_RE.test(tr.innerText.trim())).length,
+  }));
+
+  // A form whose every control is empty is the other shape of the same fixture
+  // bug, and it does NOT show an empty state or a short DOM - which is how
+  // `OvernightParkingAvailability` was signed off with every day toggled off
+  // and every time select blank at 1112 elements. That left its Save button
+  // permanently disabled, and the disabled ink is the entire source of the
+  // 1.75:1 / 2.21:1 readings that went into an AA ledger as real defects.
+  // A screen with several controls and not one value in any of them was fed
+  // nothing.
+  const controls = [...root.querySelectorAll("input, textarea, select, .v-field__input")].filter(visible);
+  const filled = controls.filter((c) => {
+    if (c.type === "checkbox" || c.type === "radio") return c.checked;
+    if ("value" in c && c.value !== undefined) return String(c.value).trim() !== "";
+    return c.textContent.trim() !== "";
+  }).length;
+  const emptyForm = controls.length >= 4 && filled === 0;
+
+  // --- blank screen ------------------------------------------------------
+  // Element count alone said "6 elements, no errors" and a counter read it as a
+  // pass. Painted text is the honest signal: a screen nobody can read is blank
+  // whatever its element count.
+  let textChars = 0;
+  for (const el of root.querySelectorAll("*")) if (visible(el)) textChars += ownText(el).length;
+
+  // --- undefined custom properties ---------------------------------------
+  // `color: var(--success)` where the token is `--ok`. An undefined custom
+  // property with no fallback invalidates the entire declaration, so the
+  // element inherits and nothing anywhere reports a problem.
+  //
+  // Two passes: collect every custom property DECLARED by any stylesheet, then
+  // look for `var(--x)` references (no fallback) to a name nothing declares.
+  // Referencing a name that IS declared somewhere is left alone - it may be
+  // scoped to a component that this screen does not draw, and guessing there
+  // would produce exactly the kind of invented defect this file exists to stop.
+  const declared = new Set();
+  const refs = new Map(); // --name -> {prop, selector}
+  for (const sheet of document.styleSheets) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    const id = sheet.ownerNode?.getAttribute?.("data-vite-dev-id") || sheet.href || "";
+    const ours = !/vuetify|materialdesignicons/i.test(id);
+    const walk = (list) => {
+      for (const rule of list) {
+        if (rule.cssRules) walk(rule.cssRules);
+        const st = rule.style;
+        if (!st) continue;
+        for (const prop of st) {
+          if (prop.startsWith("--")) declared.add(prop);
+          if (!ours) continue;
+          const v = st.getPropertyValue(prop);
+          if (!v.includes("var(")) continue;
+          for (const m of v.matchAll(/var\(\s*(--[\w-]+)\s*\)/g))
+            if (!refs.has(m[1])) refs.set(m[1], { prop, selector: (rule.selectorText || "").slice(0, 60) });
+        }
+      }
+    };
+    walk(rules);
+  }
+  const undefinedVars = [];
+  for (const [name, where] of refs) {
+    if (declared.has(name)) continue;
+    // last chance: a property set inline or by script rather than by a rule
+    if (getComputedStyle(document.documentElement).getPropertyValue(name).trim()) continue;
+    undefinedVars.push({ name, ...where });
+  }
+
+  // --- the rest ----------------------------------------------------------
+  const bars = [...root.querySelectorAll(".v-toolbar")].filter(visible);
+  const legacy = bars.filter(
+    (b) =>
+      !b.classList.contains("screen-dialog-bar") &&
+      [...b.classList].some((c) => /^bg-(grey|blue-grey|white|black)/.test(c)),
+  );
+  const t = root.querySelector(".screen-title, .page-header__title, h1, .text-h5, .text-h6");
+
+  const result = {
+    els: root.querySelectorAll("*").length,
+    textChars,
+    title: t ? t.innerText.trim().slice(0, 40) : null,
+    bars: bars.length,
+    legacy: legacy.length,
+    overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    emptyText: [...new Set(emptyText)],
+    tables,
+    controls: controls.length,
+    filled,
+    emptyForm,
+    undefinedVars,
+    fails: contrast(null),
+  };
+
+  // --- enabled re-probe --------------------------------------------------
+  // Runs LAST and mutates the DOM, so nothing above sees it. Strips the
+  // disabled state off every control that had one and re-reads contrast on
+  // just those elements, so "exempt because disabled" can never be the reason a
+  // real failure went unreported.
+  if (opts.probeEnabled) {
+    const touched = new Set();
+    for (const el of root.querySelectorAll(DISABLED_SEL)) {
+      el.removeAttribute("disabled");
+      el.removeAttribute("aria-disabled");
+      for (const c of [...el.classList]) if (/--disabled$/.test(c)) el.classList.remove(c);
+      for (const d of el.querySelectorAll("*")) touched.add(d);
+      touched.add(el);
+    }
+    void root.offsetHeight;
+    result.enabledFails = touched.size ? contrast(touched) : [];
+  }
+  return result;
+}

package/tools/render-harness/render-check.mjs

@@ -0,0 +1,306 @@
+// Hardened render check for the theme-review harness.
+//
+// This supersedes the ad-hoc `*-measure.mjs` runners. Every guard below exists
+// because the older runners produced a FALSE PASS on 2026-08-14 - a green row
+// for a screen that had not drawn the thing being reviewed. In order of how
+// much damage each one did:
+//
+//   1. ISOLATION      one shared `lc/` mirror, so two agents silently measured
+//                     each other's branch. Now the mirror is stamped and the
+//                     run aborts unless the stamp matches what it was pointed
+//                     at (see harness-init.ps1).
+//   2. EMPTY STATE    a panel scored 8/8 dark-clean while drawing "No access
+//                     logs found"; a table was signed off with zero columns and
+//                     "No data available". A screen showing its empty state has
+//                     not been measured - it is a fixture bug, and it FAILS.
+//   3. BASELINE       `MIN_ELS = 20` was both too low (a partial paint at 32
+//                     els scored ok where warm was 49) and too high (a
+//                     correctly-drawing screen at 19 els was reported
+//                     NOT-MOUNTED). One global floor cannot be right for
+//                     screens that legitimately range from 19 to 1100 elements,
+//                     so each screen carries its own recorded baseline and an
+//                     un-baselined screen is refused rather than guessed at.
+//   4. COLD COMPILE   a cold vite compile paints a PARTIAL screen that still
+//                     cleared the floor. Warm-up is mandatory and unskippable,
+//                     and any row well under its own screen's best is remeasured.
+//   5. UNDEFINED VAR  `var(--success)` where the token is `--ok`: an undefined
+//                     custom property makes the whole declaration invalid and
+//                     the element silently inherits. No error, no warning, and
+//                     the render looks plausible. Now detected.
+//   6. DISABLED NOISE disabled controls are WCAG-1.4.3-exempt, but the contrast
+//                     probe logged them as failures, which put fictional
+//                     entries in an AA ledger. Now classified, and the ENABLED
+//                     state is probed separately so the exemption never hides a
+//                     real failure.
+//   7. DEFAULTS DRIFT `VAutocomplete` was missing from the harness's Vuetify
+//                     defaults, so 19 components would have been measured
+//                     unstyled - inventing a defect the product does not have.
+//                     The harness defaults are now diffed against the product's
+//                     `plugins/vuetify.ts` on every run.
+//
+// Usage:
+//   PORT=5412 node render-check.mjs <label> Screen [Screen...]
+//   PORT=5412 node render-check.mjs --record <label> Screen [Screen...]
+//
+// `--record` writes/updates baselines.json from THIS run. Only ever record from
+// a run you have opened the screenshots for.
+import { chromium } from "playwright";
+import { writeFileSync, readFileSync, readdirSync, existsSync, mkdirSync } from "node:fs";
+import { createHash } from "node:crypto";
+// The in-page probe lives in its own file so `render-check.selftest.mjs` can
+// assert on it directly. Passed to page.evaluate as a FUNCTION, never as a
+// source string: a string expression cannot receive the argument, so `opts`
+// arrived undefined and the enabled re-probe silently never ran.
+import IN_PAGE from "./probe.mjs";
+
+const args = process.argv.slice(2);
+const record = args[0] === "--record" && args.shift();
+const [label, ...screens] = args;
+if (!label || !screens.length) {
+  console.error("usage: [--record] node render-check.mjs <label> Screen [Screen...]");
+  process.exit(1);
+}
+
+const PORT = Number(process.env.PORT || 0);
+const WIDTHS = [360, 768, 1024, 1440];
+const THEMES = ["light", "dark"];
+const PARTIAL = 0.7; // a row this far under its own screen's best is a partial paint
+
+let fatal = 0;
+const die = (msg) => {
+  console.error(`FATAL: ${msg}`);
+  fatal++;
+};
+
+// ---------------------------------------------------------------------------
+// GUARD 1 - isolation. Refuse to measure a mirror we cannot prove the origin of.
+// ---------------------------------------------------------------------------
+if (!existsSync("lc/.synced-from.json")) {
+  die(
+    "lc/ carries no .synced-from.json stamp, so there is no way to tell which\n" +
+      "       checkout is mounted. Run tools/render-harness/harness-init.ps1 first.",
+  );
+}
+// The mirror is compared to the worktree by CONTENT, not by commit: an
+// uncommitted edit is exactly as invisible as a foreign re-sync, and a commit
+// that touches nothing the harness renders should not force a re-sync.
+const MIRRORED = ["assets", "components", "composables", "constants", "types", "utils"];
+const fingerprint = (base) => {
+  const files = [];
+  const walk = (dir, rel) => {
+    if (!existsSync(dir)) return;
+    for (const e of readdirSync(dir, { withFileTypes: true })) {
+      if (e.isDirectory()) walk(`${dir}/${e.name}`, `${rel}/${e.name}`);
+      else files.push([`${rel}/${e.name}`, createHash("sha1").update(readFileSync(`${dir}/${e.name}`)).digest("hex")]);
+    }
+  };
+  for (const d of MIRRORED) walk(`${base}/${d}`, d);
+  files.sort((a, b) => (a[0] < b[0] ? -1 : 1));
+  return new Map(files);
+};
+
+let stamp = null;
+if (!fatal) {
+  stamp = JSON.parse(readFileSync("lc/.synced-from.json", "utf8"));
+  if (PORT && stamp.port !== PORT)
+    die(`mirror was stamped for port ${stamp.port} but PORT=${PORT} - that is another agent's server.`);
+
+  const mine = fingerprint(stamp.worktree);
+  const mirror = fingerprint("lc");
+  let diff = null;
+  for (const [p, h] of mine) if (mirror.get(p) !== h) { diff = mirror.has(p) ? `differs: ${p}` : `missing: ${p}`; break; }
+  if (!diff) for (const p of mirror.keys()) if (!mine.has(p)) { diff = `stale extra: ${p}`; break; }
+  if (diff)
+    die(
+      `lc/ does not match ${stamp.worktree} (${diff}).\n` +
+        "       Either the worktree moved on, or another agent's sync-lc.ps1 wrote over this mirror.\n" +
+        "       Re-run harness-init.ps1; measuring now would report someone else's code.",
+    );
+}
+
+// ---------------------------------------------------------------------------
+// GUARD 2 - Vuetify defaults drift. The harness has to configure Vuetify the
+// same way the product does, or it measures a component the product never ships.
+// Compared by parsing both files rather than by keeping a second hand-written
+// list, which is the thing that went stale in the first place.
+// ---------------------------------------------------------------------------
+const defaultKeys = (src) => {
+  const at = src.indexOf("defaults:");
+  if (at < 0) return null;
+  let depth = 0,
+    end = at;
+  for (let i = src.indexOf("{", at); i < src.length; i++) {
+    if (src[i] === "{") depth++;
+    else if (src[i] === "}" && --depth === 0) {
+      end = i;
+      break;
+    }
+  }
+  const block = src.slice(at, end);
+  // only top-level component keys, and not the ones commented out
+  return new Set(
+    block
+      .split("\n")
+      .filter((l) => !l.trim().startsWith("//"))
+      .join("\n")
+      .match(/\bV[A-Z][A-Za-z]*(?=:\s*\{)/g) ?? [],
+  );
+};
+if (!fatal && stamp) {
+  const productFile = `${stamp.worktree}/plugins/vuetify.ts`;
+  if (existsSync(productFile) && existsSync("src/main.js")) {
+    const want = defaultKeys(readFileSync(productFile, "utf8"));
+    const have = defaultKeys(readFileSync("src/main.js", "utf8"));
+    const missing = [...(want ?? [])].filter((k) => !have?.has(k));
+    if (missing.length)
+      die(
+        `harness Vuetify defaults are missing ${missing.join(", ")}, which plugins/vuetify.ts sets.\n` +
+          "       Those components would render unstyled here and the run would invent a defect.",
+      );
+  }
+}
+
+if (fatal) process.exit(1);
+
+const shotDir = `shots-${label}`;
+mkdirSync(shotDir, { recursive: true });
+const baselines = existsSync("baselines.json") ? JSON.parse(readFileSync("baselines.json", "utf8")) : {};
+
+// ---------------------------------------------------------------------------
+const browser = await chromium.launch();
+const URL_FOR = (name, theme) => `http://localhost:${PORT}/?screen=module&main=${name}&theme=${theme}`;
+
+const probe = async (name, theme, width, shot) => {
+  const page = await browser.newPage({ viewport: { width, height: 900 } });
+  const errs = [];
+  page.on("pageerror", (e) => errs.push(String(e).slice(0, 160)));
+  await page.goto(URL_FOR(name, theme), { waitUntil: "networkidle" });
+  // Wait for the DOM to STOP GROWING rather than for a fixed 900ms. A cold vite
+  // compile paints a screen in pieces, and the old fixed wait sometimes ended
+  // mid-paint: NFCTagMain came back els:32 bars:0 and scored ok where the warm
+  // render is els:49 with two legacy toolbars. That is worse than a blank,
+  // because every number in the row looks like a successful conversion.
+  let last = -1;
+  for (let i = 0; i < 40; i++) {
+    await page.waitForTimeout(150);
+    const n = await page.evaluate(() => (document.querySelector(".app-content") || document.body).querySelectorAll("*").length);
+    if (n === last && i >= 3) break; // 3 polls minimum, then two agreeing reads
+    last = n;
+  }
+  const r = await page.evaluate(IN_PAGE, { probeEnabled: false });
+  if (shot) await page.screenshot({ path: shot, fullPage: true });
+  // after the screenshot, because it edits the DOM
+  const withEnabled = await page.evaluate(IN_PAGE, { probeEnabled: true });
+  await page.close();
+  return { name, theme, width, ...r, enabledFails: withEnabled.enabledFails ?? [], errs };
+};
+
+// Mandatory warm-up. Not a flag: a cold compile paints a partial screen that
+// looks like a pass, and an option to skip this is an option to publish fiction.
+const warm = new Map();
+for (const name of screens) warm.set(name, (await probe(name, "light", 1440, null)).els);
+// Printed, not just used: on a cold vite cache the warm-up number comes back
+// materially UNDER the steady one, and that gap is the whole of trap 4. Seeing
+// it is how you know the warm-up earned its place in this run rather than in
+// some other one.
+console.log(`warm-up (discarded): ${[...warm].map(([n, e]) => `${n} els:${e}`).join(", ")}\n`);
+
+const rows = [];
+for (const name of screens) {
+  const slug = name.replace(/\//g, "-");
+  for (const theme of THEMES)
+    for (const width of WIDTHS)
+      rows.push(await probe(name, theme, width, `${shotDir}/${slug}--${theme}--${width}.png`));
+}
+
+// Partial-paint guard: seeded with the warm-up so a screen whose every measured
+// row is partial still has something honest to be compared against.
+const best = new Map(warm);
+for (const r of rows) best.set(r.name, Math.max(best.get(r.name) ?? 0, r.els));
+for (let i = 0; i < rows.length; i++) {
+  const r = rows[i];
+  if (r.els >= best.get(r.name) * PARTIAL) continue;
+  const slug = r.name.replace(/\//g, "-");
+  console.log(`  re-measuring ${r.name} ${r.theme} ${r.width} (els:${r.els} vs best ${best.get(r.name)})`);
+  rows[i] = await probe(r.name, r.theme, r.width, `${shotDir}/${slug}--${r.theme}--${r.width}.png`);
+  rows[i].remeasured = true;
+}
+await browser.close();
+
+writeFileSync(`${label}-measure.json`, JSON.stringify(rows, null, 2));
+
+if (record) {
+  for (const name of screens) {
+    const mine = rows.filter((r) => r.name === name);
+    baselines[name] = {
+      ...baselines[name],
+      els: Math.max(...mine.map((r) => r.els)),
+      textChars: Math.max(...mine.map((r) => r.textChars)),
+      recordedFrom: stamp.head.slice(0, 7),
+    };
+  }
+  writeFileSync("baselines.json", JSON.stringify(baselines, null, 2) + "\n");
+  console.log(`recorded ${screens.length} baseline(s) -> baselines.json`);
+}
+
+// ---------------------------------------------------------------------------
+// Verdict. Every one of these is a hard fail; none of them used to be.
+// ---------------------------------------------------------------------------
+let bad = 0;
+for (const r of rows) {
+  const base = baselines[r.name];
+  const problems = [];
+
+  if (!base) problems.push("NO-BASELINE");
+  else if (r.els < Math.floor(base.els * PARTIAL)) problems.push(`UNDER-BASELINE (${r.els}/${base.els})`);
+
+  if (r.textChars === 0) problems.push("BLANK");
+  else if (base && r.textChars < Math.floor(base.textChars * PARTIAL))
+    problems.push(`UNDER-TEXT (${r.textChars}/${base.textChars})`);
+
+  if (r.els < best.get(r.name) * PARTIAL) problems.push(`PARTIAL (${r.els}/${best.get(r.name)})`);
+
+  if (!base?.allowEmpty) {
+    if (r.emptyText.length) problems.push(`EMPTY-STATE "${r.emptyText[0]}"`);
+    if (r.emptyForm) problems.push(`EMPTY-FORM (0/${r.controls} controls hold a value)`);
+    for (const t of r.tables) {
+      if (!t.cols) problems.push("TABLE-0-COLS");
+      else if (!t.rows) problems.push("TABLE-0-ROWS");
+    }
+  }
+  if (r.undefinedVars.length)
+    problems.push(`UNDEFINED-VAR ${r.undefinedVars.map((v) => v.name).join(",")}`);
+
+  const aa = r.fails.filter((f) => !f.disabled);
+  const exempt = r.fails.length - aa.length;
+  if (aa.length) problems.push(`AA:${aa.length}`);
+  if (r.enabledFails.length) problems.push(`AA-ENABLED:${r.enabledFails.length}`);
+  if (r.overflow > 0) problems.push(`OVERFLOW+${r.overflow}`);
+  if (r.legacy) problems.push(`LEGACY:${r.legacy}`);
+
+  if (problems.length) bad++;
+  console.log(
+    `${r.name.padEnd(28)} ${r.theme.padEnd(5)} ${String(r.width).padStart(4)}  els:${String(r.els).padStart(4)}` +
+      ` txt:${String(r.textChars).padStart(5)} bars:${r.bars}(legacy ${r.legacy}) title:${r.title ?? "NONE"}` +
+      `${exempt ? ` exempt:${exempt}` : ""}  ${problems.join(" ") || "ok"}`,
+  );
+  if (r.errs.length) console.log("      pageerror: " + r.errs[0]);
+}
+console.log(`\n${rows.length} rows, ${bad} with problems. json -> ${label}-measure.json, shots -> ${shotDir}/`);
+
+const agg = new Map();
+for (const r of rows)
+  for (const f of [...r.fails.filter((x) => !x.disabled), ...r.enabledFails.map((x) => ({ ...x, forced: true }))]) {
+    const k = `${f.color}|${f.px}|${f.weight}|${f.bg}|${f.forced ? "en" : ""}`;
+    if (!agg.has(k)) agg.set(k, { ...f, where: new Set() });
+    agg.get(k).where.add(`${r.name}/${r.theme}`);
+  }
+if (agg.size) {
+  console.log("\nDISTINCT CONTRAST FAILURES (worst first; [forced-enabled] = read after removing the disabled state)");
+  for (const f of [...agg.values()].sort((a, b) => a.ratio - b.ratio))
+    console.log(
+      `  ${String(f.ratio).padStart(5)}:1 (need ${f.need}) ${f.px}px/${f.weight} ${f.color} on ${f.bg}` +
+        `  "${f.text}"${f.forced ? " [forced-enabled]" : ""}  [${[...f.where].join(", ")}]`,
+    );
+}
+process.exit(bad ? 1 : 0);

package/tools/render-harness/render-check.selftest.mjs

@@ -0,0 +1,129 @@
+// Proves each detector in probe.mjs FAILS the scenario it was written for, and
+// passes the corrected version of that same scenario.
+//
+// Against a hand-built page rather than a product screen, on purpose: which
+// screen happens to contain a disabled control or an undefined token changes
+// week to week, and a guard nobody can demonstrate failing is not a guard.
+//
+//   node render-check.selftest.mjs
+import { chromium } from "playwright";
+import probe from "./probe.mjs";
+
+let failed = 0;
+const check = (name, cond, got) => {
+  console.log(`${cond ? "  ok  " : "FAIL  "}${name}${cond ? "" : `   got: ${JSON.stringify(got)}`}`);
+  if (!cond) failed++;
+};
+
+const page = await (await chromium.launch()).newPage({ viewport: { width: 1200, height: 900 } });
+const run = async (html, opts = { probeEnabled: true }) => {
+  await page.setContent(`<div class="app-content">${html}</div>`, { waitUntil: "load" });
+  return page.evaluate(probe, opts);
+};
+
+// --- empty state -----------------------------------------------------------
+// The HID access-logs panel scored 8/8 dark-clean while drawing this string.
+check(
+  "empty state: 'No access logs found' is detected",
+  (await run(`<p>No access logs found</p>`)).emptyText.length === 1,
+);
+check(
+  "empty state: real content is not",
+  (await run(`<p>Lobby ANPR</p><p>Carpark Exit</p>`)).emptyText.length === 0,
+);
+
+// --- table shape -----------------------------------------------------------
+// CameraMain: computedHeaders returned undefined, so the table drew no columns
+// at all and the header/cell rules under review were never on the glass.
+const noCols = await run(`<table><thead><tr></tr></thead><tbody><tr><td>x</td></tr></tbody></table>`);
+check("table: zero header columns is detected", noCols.tables[0].cols === 0, noCols.tables);
+const ok = await run(
+  `<table><thead><tr><th>URL</th><th>Type</th></tr></thead><tbody><tr><td>a</td><td>b</td></tr></tbody></table>`,
+);
+check("table: a drawn table reports its columns and rows", ok.tables[0].cols === 2 && ok.tables[0].rows === 1, ok.tables);
+const noRows = await run(
+  `<table><thead><tr><th>URL</th></tr></thead><tbody><tr><td>No data available</td></tr></tbody></table>`,
+);
+check("table: the no-data row is not counted as a row", noRows.tables[0].rows === 0, noRows.tables);
+
+// --- blank screen ----------------------------------------------------------
+// OvernightParkingAvailability once rendered blank with zero page errors and
+// six elements, and a counter read that as a pass.
+check("blank: no painted text reports textChars 0", (await run(`<div><span></span><span></span></div>`)).textChars === 0);
+const painted = await run(`<p>Seventh Condominium</p>`);
+check("blank: painted text is counted", painted.textChars === 19, painted.textChars);
+
+// --- empty form ------------------------------------------------------------
+// The other shape of the same fixture bug: 1112 elements, nothing blank, and
+// not one control holding a value - which is what left Save disabled and put
+// its disabled ink into an AA ledger as a real defect.
+const blankForm = await run(
+  `<form>${'<input type="text" value="">'.repeat(3)}<input type="checkbox"><input type="checkbox"></form>`,
+);
+check("empty form: no control holds a value is detected", blankForm.emptyForm === true, blankForm);
+const oneValue = await run(
+  `<form><input type="text" value="22:00">${'<input type="text" value="">'.repeat(2)}<input type="checkbox" checked><input type="checkbox"></form>`,
+);
+check("empty form: one saved value clears it", oneValue.emptyForm === false, oneValue);
+
+// --- undefined custom property ---------------------------------------------
+// `var(--success)` where the token is `--ok`. The declaration is invalid, the
+// element inherits, and nothing anywhere reports a problem.
+const badVar = await run(
+  `<style>:root{--ok:#0e7c58}.day-tick--on{color:var(--success)}</style><p class="day-tick--on">on</p>`,
+);
+check(
+  "undefined var: var(--success) with no such token is detected",
+  badVar.undefinedVars.length === 1 && badVar.undefinedVars[0].name === "--success",
+  badVar.undefinedVars,
+);
+const goodVar = await run(
+  `<style>:root{--ok:#0e7c58}.day-tick--on{color:var(--ok)}</style><p class="day-tick--on">on</p>`,
+);
+check("undefined var: the correct token is not flagged", goodVar.undefinedVars.length === 0, goodVar.undefinedVars);
+// The 2026-08-14 bug survived a full 8-shot render because the element never
+// drew. Catching it only when it draws would not have caught it.
+const unrendered = await run(
+  `<style>:root{--ok:#0e7c58}.day-tick--on{color:var(--success)}</style><p>no tick on this screen</p>`,
+);
+check(
+  "undefined var: caught even when nothing on the screen uses the rule",
+  unrendered.undefinedVars.length === 1,
+  unrendered.undefinedVars,
+);
+// A name that IS declared elsewhere must not be flagged, or every scoped
+// component variable becomes an invented defect.
+const scoped = await run(
+  `<style>.card{--pad:8px}.other{padding:var(--pad)}</style><p class="other">x</p>`,
+);
+check("undefined var: a property declared elsewhere is left alone", scoped.undefinedVars.length === 0, scoped.undefinedVars);
+
+// --- disabled classification + enabled re-probe ------------------------------
+// Disabled controls are WCAG-1.4.3-exempt. Logging them as failures put
+// fictional entries in an AA ledger; hiding them entirely would let a real
+// failure escape behind the exemption. Both, separately.
+const dis = await run(
+  `<style>button{background:#ffffff;color:#c9c9c9;font-size:14px}</style><button disabled>Save</button>`,
+);
+check("disabled: the reading is captured", dis.fails.length === 1, dis.fails);
+check("disabled: and classified exempt, not counted as AA", dis.fails[0]?.disabled === true, dis.fails[0]);
+check(
+  "disabled: the ENABLED state is probed separately and still fails",
+  dis.enabledFails.length === 1,
+  dis.enabledFails,
+);
+const enabled = await run(
+  `<style>button{background:#ffffff;color:#c9c9c9;font-size:14px}</style><button>Save</button>`,
+);
+check("disabled: an enabled control is not marked exempt", enabled.fails[0]?.disabled === false, enabled.fails[0]);
+const contrasty = await run(
+  `<style>button{background:#ffffff;color:#1b1d21;font-size:14px}</style><button disabled>Save</button>`,
+);
+check(
+  "disabled: a disabled control that also passes enabled reports nothing",
+  contrasty.fails.length === 0 && contrasty.enabledFails.length === 0,
+  contrasty.fails,
+);
+
+console.log(failed ? `\n${failed} FAILED` : "\nall detectors fire");
+process.exit(failed ? 1 : 0);