rcf-lite 0.20.0 → 0.21.0

package/blueprints/application-charts/contributions/user-stories/application-charts-us-18102.json

@@ -0,0 +1,35 @@
+{
+  "usId": "application-charts-US-18102",
+  "prdId": "PRD-001",
+  "reqId": "application-charts-REQ-002",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Series distinction combines colour, pattern and direct label so a colour-blind reader reads the same distinction",
+  "asA": "reader with a colour-vision deficiency using the shipped surface",
+  "iWant": "each series on a multi-series chart to carry colour, a distinguishing pattern and a direct label at the series",
+  "soThat": "the series distinction is legible without relying on colour perception alone (WCAG 1.4.1)",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-18102-1",
+      "description": "Given a rendered chart with N series, the series distinction combines colour, pattern (dashed line, hatched fill or a marker shape) and a direct label at the series; every series in the DOM carries a data-pattern attribute or a stroke-dasharray or an SVG pattern fill reference and a labelled text node adjacent to the series. Probed by the application-charts pack check AC-18102-1 (Playwright drives the browser to the chart route, reads the accessibility tree and the DOM, and asserts every series carries at least one non-colour attribute plus a direct label). The runner has no vision-deficiency emulation seam today, so the check is proven at the DOM level (colour is only one of the three cues); the README names the vision-deficiency simulation gap under known mechanism-reach gaps.",
+      "given": "a rendered multi-series chart",
+      "when": "the DOM is inspected",
+      "then": "every series carries colour plus a non-colour pattern attribute plus a direct label",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-18102-2",
+      "description": "Given a rendered single-series chart, the AC-18102-1 rule does not apply (single-series distinction is not a WCAG 1.4.1 concern); the pack records applicable false for the check on the surface and no browser assertion runs. The blueprint's README names the single-series exemption under known mechanism-reach gaps.",
+      "given": "a rendered single-series chart",
+      "when": "the pack runs",
+      "then": "the AC-18102-1 rule does not apply and the pack records applicable false",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": ["TAC-1901-application-charts-render-shell"],
+  "tags": ["blueprint:application-charts"],
+  "createdAt": "2026-09-04T21:00:00Z",
+  "updatedAt": "2026-09-04T21:00:00Z"
+}

package/blueprints/application-charts/contributions/user-stories/application-charts-us-18103.json

@@ -0,0 +1,35 @@
+{
+  "usId": "application-charts-US-18103",
+  "prdId": "PRD-001",
+  "reqId": "application-charts-REQ-003",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Every chart ships a paired text-alternative table with the same data, focus-reachable in the same landmark",
+  "asA": "screen-reader user using the shipped surface",
+  "iWant": "every chart to ship a text-alternative table carrying the same data as the chart, in the same landmark, cell-per-value, focus-reachable",
+  "soThat": "the chart's information is available in a form assistive tech traverses cell-by-cell (WCAG 1.1.1 the shelf inherits through TAC-1901)",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-18103-1",
+      "description": "Given a rendered chart, a `<table>` element carrying the same data lives in the same landmark (`role=\"region\"` wrapping both the chart and the table, or the same `<section>` element), with a row per x-axis value or category and a column per series (cell-per-value contract). The table is either visible under the chart or visually-hidden and focus-reachable through a labelled control the shell renders (a `<button>` or a skip link). Assistive tech traverses the table cell-by-cell and every cell text matches the corresponding chart value. Probed by the application-charts pack check AC-18103-1 (Playwright drives to the route, reads the accessibility tree, asserts the table is present in the chart's landmark and the cell texts match the chart's rendered values).",
+      "given": "a rendered chart",
+      "when": "the accessibility tree is read",
+      "then": "a `<table>` in the same landmark carries the same values cell-by-cell and is focus-reachable",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-18103-2",
+      "description": "Given a rendered chart whose text-alternative table is visually-hidden, the shell renders a labelled control (a `<button>` or an anchor link) that moves focus to the table's first cell; the control's accessible name reads `Show data table` or an equivalent operator-configured label. The control is keyboard-reachable in reading order before the chart's own interactive controls.",
+      "given": "a rendered chart with a visually-hidden text-alternative table",
+      "when": "the operator tabs into the chart's landmark",
+      "then": "a labelled control appears before the chart's data-point controls and moves focus to the table on activation",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": ["TAC-1901-application-charts-render-shell"],
+  "tags": ["blueprint:application-charts"],
+  "createdAt": "2026-09-04T21:00:00Z",
+  "updatedAt": "2026-09-04T21:00:00Z"
+}

package/blueprints/application-charts/contributions/user-stories/application-charts-us-18104.json

@@ -0,0 +1,35 @@
+{
+  "usId": "application-charts-US-18104",
+  "prdId": "PRD-001",
+  "reqId": "application-charts-REQ-004",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "Interactive charts expose a keyboard traversal path with a stable announced-string contract",
+  "asA": "keyboard-only user reading an interactive chart",
+  "iWant": "each data point to be focus-reachable in reading order with a stable announced string carrying series name, x-value, y-value and unit",
+  "soThat": "the pointer-only granular data-point access is available to a keyboard user (WCAG 2.1.1)",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-18104-1",
+      "description": "Given an interactive chart (data points are clickable or hoverable and trigger a callback), keyboard focus reaches each data point in reading order (left-to-right, top-to-bottom for single-series; series-by-series for multi-series), and the announced string on focus matches the format `<seriesName>, <xValue>, <yValue> <unit>` (comma-separated, unit is the operator-configured unit or `unitless`). A `prefers-reduced-motion: reduce` media query on the rendered surface suppresses chart entry and update transitions (`transition-duration: 0` or `animation-duration: 0` on the affected elements). Probed by the application-charts pack check AC-18104-1 (Playwright drives the browser, tabs through the chart, asserts every data point receives focus, the announced string matches the format, and the reduced-motion CSS rule applies).",
+      "given": "an interactive chart with reduced-motion respect",
+      "when": "the operator tabs through the chart with prefers-reduced-motion set",
+      "then": "each data point receives focus in reading order, the announced string matches the format, and transitions are suppressed",
+      "testable": true,
+      "scope": "runtime"
+    },
+    {
+      "id": "AC-18104-2",
+      "description": "Given a non-interactive chart (no data-point activation), the keyboard-traversal AC does not apply; the chart is still tab-reachable as one focusable landmark exposing an accessible name (the chart's title or aria-label). The pack records applicable false for AC-18104-1 on a non-interactive chart; the reduced-motion rule still applies and is a separate observation on the pack record when the surface exposes any transition.",
+      "given": "a non-interactive chart",
+      "when": "the pack runs",
+      "then": "the AC-18104-1 keyboard-traversal rule does not apply and the pack records applicable false",
+      "testable": true,
+      "scope": "runtime"
+    }
+  ],
+  "tacIds": ["TAC-1901-application-charts-render-shell", "TAC-1902-application-charts-keyboard-traversal"],
+  "tags": ["blueprint:application-charts"],
+  "createdAt": "2026-09-04T21:00:00Z",
+  "updatedAt": "2026-09-04T21:00:00Z"
+}

package/blueprints/application-charts/contributions/user-stories/application-charts-us-18105.json

@@ -0,0 +1,35 @@
+{
+  "usId": "application-charts-US-18105",
+  "prdId": "PRD-001",
+  "reqId": "application-charts-REQ-002",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "The shell exposes the accessible-defaults palette hook (light and dark) and accepts elicited operator overrides",
+  "asA": "operator applying the blueprint",
+  "iWant": "the render shell to ship a light and dark categorical palette matched against WCAG contrast and to accept my brand tokens as overrides",
+  "soThat": "the ratified palette is the recommended default and brand overrides remain contrast-safe when I feed them in (ADR-1902)",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-18105-1",
+      "description": "Given a rendered chart on a light background, every series colour and every axis text carries a contrast ratio of at least 4.5:1 against its background (WCAG 1.4.3 for text; the 3:1 non-text contrast under WCAG 1.4.11 for series marks). The shell ships light and dark palettes matched against these ratios; the shell's palette accessor returns the applied palette by name and version. This AC is a build-scan surface (palette values readable from the applied blueprint's palette module); the pack has no dedicated check for it and the README names the gap under known mechanism-reach gaps as a build-scan opportunity for a v1.1 minor bump.",
+      "given": "a rendered chart under either the light or dark palette",
+      "when": "the palette is inspected",
+      "then": "series colours meet WCAG 1.4.11 (3:1 non-text contrast) and axis text meets WCAG 1.4.3 (4.5:1) against the applied background",
+      "testable": true,
+      "scope": "library"
+    },
+    {
+      "id": "AC-18105-2",
+      "description": "Given the shell's palette API, an operator supplies brand tokens (a palette override object keyed by series index or role) and the shell renders the operator palette; when the operator palette misses a token the shell falls back to the accessible-defaults palette at the same index and records a warning on the render log. The API surface (`renderShell({ palette, chart })`) is a project-side contract; the fallback behaviour is exercised by the applying project's own tests, not this blueprint's pack.",
+      "given": "an operator palette with missing tokens",
+      "when": "the shell renders",
+      "then": "missing tokens fall back to the accessible-defaults palette and a warning is recorded",
+      "testable": true,
+      "scope": "library"
+    }
+  ],
+  "tacIds": ["TAC-1901-application-charts-render-shell"],
+  "tags": ["blueprint:application-charts"],
+  "createdAt": "2026-09-04T21:00:00Z",
+  "updatedAt": "2026-09-04T21:00:00Z"
+}

package/blueprints/application-charts/contributions/user-stories/application-charts-us-18106.json

@@ -0,0 +1,35 @@
+{
+  "usId": "application-charts-US-18106",
+  "prdId": "PRD-001",
+  "reqId": "application-charts-REQ-004",
+  "version": "1.0.0",
+  "status": "approved",
+  "title": "A chart engine that refuses text-alternative access is refused on the applying project",
+  "asA": "shelf reviewer gating an applying project's chart engine choice",
+  "iWant": "the blueprint to refuse a chart engine choice that renders canvas-only surfaces with no text-alternative path",
+  "soThat": "the text-alternative REQ-003 and the keyboard-traversal REQ-004 stay reachable through the render shell's contract regardless of the chosen engine (ADR-1901)",
+  "acceptanceCriteria": [
+    {
+      "id": "AC-18106-1",
+      "description": "Given ADR-1901's engine choice (Recharts, ECharts, Chart.js, D3 primitives or another operator-elicited engine), the applying project's manifest records the engine and the text-alternative reach: the engine's rendered chart is paired with a `<table>` element the pack asserts (AC-18103-1). An engine that renders exclusively to a `<canvas>` and does not offer a text-alternative surface is refused at project-side review; the refusal is documented in the blueprint's README under the engine-refusal rule.",
+      "given": "an ADR-1901 engine choice",
+      "when": "the applying project's chart mount is reviewed",
+      "then": "the engine is refused if it renders canvas-only surfaces with no text-alternative path",
+      "testable": true,
+      "scope": "library"
+    },
+    {
+      "id": "AC-18106-2",
+      "description": "Given a compliant engine choice, the applying project's rendered chart carries a `data-chart-engine` attribute or an equivalent DOM marker naming the engine (Recharts, ECharts, Chart.js, D3 or the elicited name). This is a project-side observation, not a pack check; the README names it under known mechanism-reach gaps as a documentation contract on the applying project.",
+      "given": "a compliant chart engine on the applying project",
+      "when": "the rendered chart is inspected",
+      "then": "the engine name is discoverable on the rendered DOM through a stable attribute",
+      "testable": true,
+      "scope": "library"
+    }
+  ],
+  "tacIds": ["TAC-1901-application-charts-render-shell"],
+  "tags": ["blueprint:application-charts"],
+  "createdAt": "2026-09-04T21:00:00Z",
+  "updatedAt": "2026-09-04T21:00:00Z"
+}

package/blueprints/application-charts/docs/topics.md

@@ -0,0 +1,37 @@
+# application-charts: coordination vocabulary
+
+## Global topics
+
+The blueprint claims no new global topics at v1.0.0. The chart-component contract is a general accessibility-first practice; every ADR (engine choice, accessible palette, reduced motion) is non-global. When a second chart-shaped blueprint composes on the shelf (a Sankey blueprint, a mapping blueprint), THAT blueprint may claim a `chartEngine` topic; today, the single consumer (application-dashboard T-3) reads the shell contract directly.
+
+## Deliberately unclaimed topics
+
+- `chartEngine` (the chosen chart engine). Reserved for the applying project as an elicited choice, not a global topic; a second chart-shaped blueprint that composes with a specific engine would either supersede this blueprint or share the shell TAC.
+- `categoricalPalette` (the shipped light and dark accessible-defaults). Not a global topic; the palette accessor is exposed through the shell factory input, not through a topic lookup.
+- `chartMotionTokens` (the motion baseline the shell honours). The application-spa blueprint owns the motion tokens (`motionBaseline` topic in application-spa's docs/topics.md); the charts blueprint's ADR-1903 references them and adds no topic of its own.
+
+## Shelf id band and suffix block
+
+| Blueprint | US band | ADR/TAC suffix block | Status | Global topics |
+|---|---|---|---|---|
+| application-datatable | 17101-17899 | 18xx | shipped v1.0.0 | none |
+| application-charts | 18101-18899 | 19xx | shipped v1.0.0 | none |
+| application-dashboard | 19101-19899 | 20xx | shipped v1.0.0 | none |
+| application-notifications-in-app | 20101-20899 | 21xx | shipped v1.0.0 | none |
+| application-admin-console | 21101-21899 | 22xx | shipped v1.0.0 | none |
+
+The shelf-wide band registry lives in `packages/rcf-lite/docs/blueprint-authoring.md` section 5.
+
+## Probe pack
+
+`probe-packs/application-charts.pack.mjs` ships three checks anchored to blueprint AC ids:
+
+- `AC-18102-1` non-colour distinction (colour plus pattern plus direct label)
+- `AC-18103-1` text-alternative table in the same landmark, cell-per-value
+- `AC-18104-1` keyboard traversal contract with reduced-motion suppression
+
+Every check carries a `description` field per spec section 9. `appliesTo` binds `TAC-1901-application-charts-render-shell` OR any FBS route matching an operator-configured chart-route glob. See `probe-packs/application-charts.pack.mjs` for the source; see `packages/rcf-lite/test/fixtures/probe-pack-application-charts/README.md` for the sample-app fixture and the negative-run break switches.
+
+## Consumers
+
+- `application-dashboard` (visual round T-3): the leaf blueprint the dashboard shell consumes. The dashboard's chart region delegates chart rendering to this blueprint's render shell; the dashboard pack does not duplicate the chart-accessibility ACs, it references them.

package/blueprints/application-charts/guide/application-charts.md

@@ -0,0 +1,44 @@
+# Guide: application-charts (v1.0.0)
+
+## What it is
+
+A shipped, vendor-neutral chart-component contract for a rcf-lite application. One render shell (TAC-1901), one keyboard-traversal contract (TAC-1902), an accessible-defaults palette, and a shipped Playwright probe pack that gates ship on the three runtime-observable surfaces the shelf assures: series distinguish on colour plus pattern plus label, every chart pairs with a text-alternative table in the same landmark, and interactive charts expose a keyboard traversal path with reduced-motion suppression.
+
+## What it deliberately is not
+
+- Not a chart library. The shell is a contract; the applying project picks Recharts, ECharts, Chart.js, D3 primitives or a hand-authored SVG mount. The ACs are what ship must meet; the HOW is the project's decision.
+- Not a data-source contract. The applying `application-api-rest` blueprint owns the wire endpoint; the render shell reads the data it is given.
+- Not a dashboard layout. The applying `application-dashboard` blueprint owns tile placement, hierarchy and export handles; the charts blueprint owns the chart contract every tile carries.
+
+## When to reach for it
+
+- Any shipped surface that renders bar, line, area, pie, donut, single-value with sparkline, or heatmap charts. Analytics dashboards, admin overview surfaces, per-record trend views, monitoring UIs.
+- Projects that want the ARIA-first, palette-safe, keyboard-reachable discipline enforced at ship without hand-authoring per chart.
+- Any project where the T-3 application-dashboard is applied (charts is the leaf application-dashboard consumes).
+
+## When it does not fit
+
+- Print-only or export-only chart output where the runtime accessibility contract does not apply. A PDF report generation pipeline is a separate concern.
+- Highly bespoke visualisations outside the six committed forms (a network graph, a Sankey, a candlestick). Those supersede the blueprint with a project-authored engine contract naming the residuals.
+
+## What a good outcome looks like
+
+Every rendered chart on the surface mounts through the render shell; every multi-series chart carries colour AND a non-colour pattern AND a direct label at the series; every chart ships a paired `<table>` in the same landmark, focus-reachable through a labelled control, cell-per-value; every interactive chart tabs through its data points in reading order and announces `<seriesName>, <xValue>, <yValue> <unit>` on focus; `prefers-reduced-motion: reduce` suppresses transitions on every chart on the surface. The shipped probe pack runs green on the delivery-ci-workflows gate.
+
+## The operator decisions that remain open
+
+- **Chart engine** (ADR-1901). Recharts, ECharts, Chart.js, D3 primitives, hand-authored SVG. Elicited at apply; canvas-only-no-text-alternative is refused.
+- **Categorical palette** (ADR-1902). Light and dark accessible-defaults ship as the recommended default; operator brand tokens accepted with a fallback to the defaults on missing tokens.
+- **Interactive traversal scope**. Every chart interactive, or only detail-view charts. The shell binds the keyboard traversal contract on the interactive charts.
+- **Sparkline behaviour**. In-tile (mounted inside a stat tile via application-dashboard) or standalone (mounted on the shipped surface as one chart).
+
+## Common gotchas
+
+- Chart.js is canvas-based. The shell renders the text-alternative table for you; do not disable it because your engine has its own accessibility mode.
+- Colour-only series distinction is the single most common defect on shipped charts. The blueprint's palette is safe, but the pattern and label cues are still required regardless of palette.
+- `prefers-reduced-motion` is a real user preference. Do not gate it behind a feature flag or a build variable; the shell handles it via CSS media query on every chart on the surface.
+- A blueprint pack fires on any FBS whose surface matches the `appliesTo` predicate. A page with no chart declares no chart route and the pack records `applicable: false`; no need to disable the pack.
+
+## Ratified spec reference
+
+`projects/blueprint-library/specs/visual-round-spec-2026-09-04.md` section 5.2 in the operator repo names the contract this blueprint realises. Every content decision in the shipped v1.0.0 comes from the spec verbatim; where the shell contract carries a documented deviation from the spec, the blueprint README names it under CALLS MADE.

package/blueprints/application-charts/probe-packs/application-charts.pack.mjs

@@ -0,0 +1,191 @@
+// application-charts probe pack (v1.0.0).
+//
+// Three runtime-observable checks anchored to the blueprint's ACs:
+//   AC-18102-1 non-colour distinction (colour plus pattern plus direct label)
+//   AC-18103-1 text-alternative table in the same landmark, cell-per-value
+//   AC-18104-1 keyboard traversal contract with reduced-motion suppression
+//
+// Every check drives the real Playwright browser the T-0 runner
+// injects (packages/rcf-lite/src/browser-verify/pack-browser.js) and
+// asserts on the DOM the applying project renders under the render
+// shell (TAC-1901) and the keyboard traversal contract (TAC-1902).
+//
+// The runner has no vision-deficiency emulation seam today, so
+// AC-18102-1 is proven at the DOM level: every series carries a
+// non-colour cue (a `data-pattern` attribute, an SVG `pattern` fill
+// reference, a `stroke-dasharray`, or a marker shape) AND a direct
+// label at the series. When `emulateVisionDeficiency` reaches the
+// pack seam in a future runner minor, this pack will add a
+// deuteranopia render pass and lift the DOM-level cue rule; see the
+// README's known-mechanism-reach-gaps section.
+
+export default {
+  packName: 'application-charts',
+  version: '1.0.0',
+  blueprintSlug: 'application-charts',
+  // Applies to any FBS that realises the chart render-shell TAC or
+  // whose navModel routes match an operator-configured chart-route
+  // glob. The source references BOTH `tacIds` and `route` so the
+  // T-0 loader's applicability source-scan sees the two legal seams.
+  appliesTo: ({ fbs }) => {
+    const routes = fbs?.designStage?.navModel?.routes ?? [];
+    const tacIds = fbs?.contextRequirements?.tacIds ?? [];
+    if (tacIds.includes('TAC-1901-application-charts-render-shell')) return true;
+    return routes.some((r) => typeof r?.path === 'string' && /chart|charts|dashboard/.test(r.path));
+  },
+  boot: { bootCommand: null, waitForUrl: null, waitForSelector: null },
+  checks: [
+    {
+      id: 'AC-18102-1',
+      severity: 'block',
+      description: 'Non-colour distinction: every series carries a non-colour cue (data-pattern, stroke-dasharray, hatched fill or marker) plus a direct label at the series',
+      run: async ({ browser, runtimeUrl }) => {
+        if (!browser) return { verdict: 'fail', detail: 'no packBrowser wired' };
+        await browser.goto(new URL('', runtimeUrl).toString());
+        const seriesShape = await browser.evaluate(() => {
+          const svgs = Array.from(document.querySelectorAll('svg.chartSvg'));
+          const seriesReports = [];
+          svgs.forEach((svg) => {
+            const chartForm = svg.getAttribute('data-chart-form');
+            const seriesGroups = Array.from(svg.querySelectorAll('[data-series]'));
+            const seenSeries = new Set();
+            seriesGroups.forEach((el) => {
+              const name = el.getAttribute('data-series');
+              if (seenSeries.has(name)) return;
+              seenSeries.add(name);
+              const hasDataPattern = el.hasAttribute('data-pattern');
+              const hasDash = el.hasAttribute('stroke-dasharray') || (el.querySelector && el.querySelector('polyline[stroke-dasharray]')) ? true : false;
+              const fillRef = (el.getAttribute('fill') || '').startsWith('url(');
+              const nonColourCue = hasDataPattern || hasDash || fillRef;
+              const labelEl = svg.querySelector('[data-series-label="' + name + '"]');
+              const hasDirectLabel = Boolean(labelEl && labelEl.textContent && labelEl.textContent.trim() === name);
+              seriesReports.push({ chartForm, name, hasDataPattern, hasDash, fillRef, nonColourCue, hasDirectLabel });
+            });
+          });
+          return seriesReports;
+        });
+        if (!Array.isArray(seriesShape) || seriesShape.length === 0) {
+          return { verdict: 'fail', detail: 'no chart series found on the surface' };
+        }
+        const failing = seriesShape.filter((s) => !(s.nonColourCue && s.hasDirectLabel));
+        if (failing.length > 0) {
+          return { verdict: 'fail', detail: 'series missing non-colour cue or direct label: ' + JSON.stringify(failing) };
+        }
+        return { verdict: 'pass', detail: 'series with non-colour cue and direct label: ' + JSON.stringify(seriesShape.map((s) => ({ form: s.chartForm, name: s.name }))) };
+      },
+    },
+    {
+      id: 'AC-18103-1',
+      severity: 'block',
+      description: 'Text-alternative table: every chart landmark contains a table carrying the same values cell-per-value, focus-reachable through a labelled control',
+      run: async ({ browser, runtimeUrl }) => {
+        if (!browser) return { verdict: 'fail', detail: 'no packBrowser wired' };
+        await browser.goto(new URL('', runtimeUrl).toString());
+        const report = await browser.evaluate(() => {
+          const regions = Array.from(document.querySelectorAll('section.chartRegion[role="region"]'));
+          return regions.map((region) => {
+            const svg = region.querySelector('svg.chartSvg');
+            const chartForm = svg ? svg.getAttribute('data-chart-form') : null;
+            const table = region.querySelector('table.chartAltTable');
+            const showBtn = region.querySelector('button.chartShowAltTable');
+            let cellCount = 0;
+            let seriesCount = 0;
+            let xCount = 0;
+            const cellValues = [];
+            if (table) {
+              const headerCells = Array.from(table.querySelectorAll('thead th'));
+              seriesCount = Math.max(0, headerCells.length - 1);
+              const bodyRows = Array.from(table.querySelectorAll('tbody tr'));
+              xCount = bodyRows.length;
+              cellCount = bodyRows.reduce((acc, tr) => acc + tr.querySelectorAll('td').length, 0);
+              bodyRows.forEach((tr) => {
+                Array.from(tr.querySelectorAll('td')).forEach((td) => cellValues.push(Number(td.textContent.trim())));
+              });
+            }
+            const svgValues = svg ? Array.from(svg.querySelectorAll('[data-y]')).map((el) => Number(el.getAttribute('data-y'))) : [];
+            const svgSeries = new Set();
+            if (svg) Array.from(svg.querySelectorAll('[data-series]')).forEach((el) => svgSeries.add(el.getAttribute('data-series')));
+            const valuesMatch = svgValues.length > 0 && svgValues.every((v) => cellValues.includes(v));
+            return {
+              chartForm,
+              hasTable: Boolean(table),
+              cellCount,
+              seriesCount,
+              xCount,
+              showButtonPresent: Boolean(showBtn),
+              valuesMatch,
+              seriesCountSvg: svgSeries.size,
+            };
+          });
+        });
+        if (!Array.isArray(report) || report.length === 0) {
+          return { verdict: 'fail', detail: 'no chart regions found on the surface' };
+        }
+        const missingTable = report.filter((r) => !r.hasTable);
+        if (missingTable.length > 0) {
+          return { verdict: 'fail', detail: 'chart regions missing paired table: ' + JSON.stringify(missingTable.map((r) => r.chartForm)) };
+        }
+        const missingButton = report.filter((r) => !r.showButtonPresent);
+        if (missingButton.length > 0) {
+          return { verdict: 'fail', detail: 'chart regions missing show-table control: ' + JSON.stringify(missingButton.map((r) => r.chartForm)) };
+        }
+        const mismatched = report.filter((r) => r.hasTable && r.cellCount !== r.seriesCount * r.xCount);
+        if (mismatched.length > 0) {
+          return { verdict: 'fail', detail: 'chart tables do not honour cell-per-value: ' + JSON.stringify(mismatched) };
+        }
+        const valueMisses = report.filter((r) => r.hasTable && !r.valuesMatch);
+        if (valueMisses.length > 0) {
+          return { verdict: 'fail', detail: 'chart tables carry values that do not match the SVG data-y attributes: ' + JSON.stringify(valueMisses) };
+        }
+        return { verdict: 'pass', detail: 'chart regions with paired tables: ' + JSON.stringify(report.map((r) => ({ form: r.chartForm, rows: r.xCount, cols: r.seriesCount }))) };
+      },
+    },
+    {
+      id: 'AC-18104-1',
+      severity: 'block',
+      description: 'Keyboard traversal: every data point is tab-focusable, the announced string matches "series, x, y unit", and prefers-reduced-motion suppresses transitions',
+      run: async ({ browser, runtimeUrl }) => {
+        if (!browser) return { verdict: 'fail', detail: 'no packBrowser wired' };
+        await browser.goto(new URL('', runtimeUrl).toString());
+        const report = await browser.evaluate(() => {
+          const dataPoints = Array.from(document.querySelectorAll('.chartDataPoint'));
+          const focusable = dataPoints.filter((el) => el.getAttribute('tabindex') === '0');
+          const labelled = focusable.filter((el) => {
+            const label = el.getAttribute('aria-label');
+            if (!label) return false;
+            return /^[^,]+, [^,]+, [^ ]+ [^ ]+$/.test(label);
+          });
+          const sample = focusable.slice(0, 3).map((el) => ({
+            series: el.getAttribute('data-series'),
+            x: el.getAttribute('data-x'),
+            y: el.getAttribute('data-y'),
+            ariaLabel: el.getAttribute('aria-label'),
+          }));
+          const styles = Array.from(document.querySelectorAll('style')).map((s) => s.textContent).join('\n');
+          const hasReducedMotionRule = /@media\s*\(\s*prefers-reduced-motion:\s*reduce\s*\)/.test(styles) &&
+            /(transition-duration:\s*0|transition:\s*none|animation-duration:\s*0|animation:\s*none)/i.test(styles);
+          return {
+            totalDataPoints: dataPoints.length,
+            focusableCount: focusable.length,
+            labelledCount: labelled.length,
+            sample,
+            hasReducedMotionRule,
+          };
+        });
+        if (!report || report.totalDataPoints === 0) {
+          return { verdict: 'fail', detail: 'no data points found on the surface' };
+        }
+        if (report.focusableCount !== report.totalDataPoints) {
+          return { verdict: 'fail', detail: 'not every data point is focusable: total=' + report.totalDataPoints + ' focusable=' + report.focusableCount };
+        }
+        if (report.labelledCount !== report.focusableCount) {
+          return { verdict: 'fail', detail: 'aria-label format does not match "series, x, y unit" on every focusable data point: sample=' + JSON.stringify(report.sample) };
+        }
+        if (!report.hasReducedMotionRule) {
+          return { verdict: 'fail', detail: 'no prefers-reduced-motion rule suppressing transitions found in the rendered CSS' };
+        }
+        return { verdict: 'pass', detail: 'focusable data points=' + report.focusableCount + ' sample=' + JSON.stringify(report.sample.slice(0, 1)) + ' reduced-motion rule present' };
+      },
+    },
+  ],
+};

package/blueprints/application-dashboard/CHANGELOG.md

@@ -0,0 +1,10 @@
+# application-dashboard CHANGELOG
+
+## 1.0.0 (visual round T-3, spec 2026-09-04)
+
+- First ratified version of the shelf's application-dashboard blueprint. Five REQs (shell composition; primary-KPI top-left visual hierarchy on the F-scan across 1440, 1024 and 360; per-tile four-state contract with role region, aria-live polite and non-colour distinction; timeframe and filter chrome refetch fan-out with matching as-of stamp; export handle with format delegation to charts), seven USs binding runtime-observable ACs plus one on packaged-guidance adherence, three TACs (tile grid with CSS Grid position semantics and breakpoint reflow; timeframe picker and filter chrome with the fan-out contract; export handle with delegation to the application-charts render shell), three ADRs (primary-KPI kinds enum with elicited overrides; timeframe presets with recommendedDefault and elicited overrides plus auto-refresh off by default; export formats with recommendedDefault and elicited overrides). No new global topics.
+- Ships `assets/guidance/dashboard-design.md`: eight sections (primary KPI placement; tile density and count limits; timeframe and filter chrome; loading, empty and error states; colour and contrast; when a table beats a chart, delegating to application-datatable; refresh cadence and staleness; anti-patterns) with five https-cited sources (NN/g dashboard design, Few, Tufte, GOV.UK Design System patterns, WCAG 2.2 Understanding docs). Each section names whether the rule hardens into an AC on this blueprint or stays operator guidance. The applying agent reads this asset at apply and the gate reviewer references it at ship.
+- Ships `probe-packs/application-dashboard.pack.mjs`: three browser-verify checks anchored to blueprint AC ids, every check carrying a description field per spec section 9. `AC-19102-1` primary-KPI position by DOM order and CSS Grid position at 1440, 1024 and 360 (drives the new pack-browser `resize(width, height)` seam to each width). `AC-19104-1` timeframe refetch fan-out with matching boundary and as-of stamp (reads the request log from `window.__dashboardFetches` and reconciles with the `GET /__requests` endpoint). `AC-19103-1` per-tile four-state contract with role region, aria-live polite and non-colour distinction (drives `?tile=primary&state=<state>` for each of the four states). Third blueprint on the shelf that ships a Playwright probe pack under the T-0 runner extension.
+- Ships a sample-app fixture at `packages/rcf-lite/test/fixtures/probe-pack-application-dashboard/` (dependency-free Node HTTP server) so the pack can be probed at the shelf's own gate; the fixture is the golden the gate reviewer drives, with `?break=kpi-position`, `?break=fanout` and `?break=state-aria` query switches for the negative runs, `?tile=<id>&state=<state>` state pinning for the four-state check, and `?asof=<iso>` for a fixed shell as-of stamp.
+- Suggests the `logging` and `errorHandling` companions with the ratified spec's reasons. `providesRoles` absent, leaf blueprint per the loader contract (an empty array is refused, an omitted field marks the blueprint as a leaf).
+- Extends the pack-browser seam (`packages/rcf-lite/src/browser-verify/pack-browser.js`) with a `resize(width, height)` method: on the MCP route the method calls the pinned Playwright MCP's `browser_resize` tool; on the project route it calls `page.setViewportSize({ width, height })`. The next blueprints on the shelf that ship breakpoint-scoped visual ACs (T-4 notifications-in-app, T-5 admin-console) reuse the same seam.

package/blueprints/application-dashboard/README.md

@@ -0,0 +1,102 @@
+# Dashboard blueprint (v1.0.0)
+
+Vendor-neutral analytics-dashboard contract for a rcf-lite application. Ships the shell composition, the primary-KPI visual hierarchy, the per-tile four-state contract, the timeframe and filter chrome refetch fan-out, and the export handle with format delegation to charts. Consumes the application-charts render shell (TAC-1901) for every rendered chart; references application-datatable in the packaged design guidance's "when a table beats a chart" section. Ships a packaged design-guidance asset under `assets/guidance/dashboard-design.md` and a Playwright probe pack under `probe-packs/application-dashboard.pack.mjs` whose three checks are the runtime gate the delivery-ci-workflows runner drives (visual round spec 2026-09-04, section 5.3). No new global topics; suggests the `logging` and `errorHandling` companions. Third blueprint on the shelf that ships a Playwright probe pack under the T-0 runner extension.
+
+## Apply
+
+```
+rcf define blueprint add <path-to>/blueprints/application-dashboard
+```
+
+Applies namespaced contributions into the project tree and records `manifest.blueprints[]`. Consumes the `logging` and `errorHandling` companions when they resolve to an applied provider or a registered library; falls back to the shelf providers otherwise.
+
+## Anatomy
+
+| Piece | Where | What |
+|---|---|---|
+| Metadata | `blueprint.json` | Slug, version 1.0.0, category `application`, `suggestedCompanions: [{ logging }, { errorHandling }]`, `providesRoles: []`, 18 contributions in the 19xxx US band and 20xx ADR/TAC block |
+| Doc set | `contributions/` | 5 REQs, 7 USs, 3 TACs, 3 ADRs, schema-valid and namespaced |
+| Design guidance | `assets/guidance/dashboard-design.md` | Operator-and-agent-readable design guidance (eight sections; five https citations; each section names whether it hardens into an AC or stays guidance) |
+| Probe pack | `probe-packs/application-dashboard.pack.mjs` | Three browser-verify checks anchored to AC-19102-1 (primary-KPI position by DOM order and CSS Grid position at 1440, 1024 and 360), AC-19104-1 (timeframe refetch fan-out with matching boundary and as-of stamp), AC-19103-1 (per-tile four-state contract with role region, aria-live polite and non-colour distinction) |
+| Guide | `guide/application-dashboard.md` | Operator-facing: when to reach, when not, mechanism-reach gaps |
+| Coordination vocabulary | `docs/topics.md` | Shelf id band registry update; no new global topics claimed |
+
+## What it contributes, and what it deliberately does not
+
+Contributed: REQ, US (with inline ACs), TAC, ADR, plus one shipped probe pack and one packaged design-guidance asset. Adherence is expressed as ACs; the blueprint ships no dashboard-framework source and no test files (the probe pack drives the real browser against the applying project's own runtime).
+
+Deliberately not contributed: a choice of chart engine (the charts blueprint's ADR-1901 owns that); a chart-form set (application-charts REQ-001 owns that); a data-source contract (the applying project sources dashboard data through the applied `application-api-rest` blueprint or an equivalent); the sortable / filterable / exportable table (the applying `application-datatable` blueprint owns that; the dashboard's guidance section 6 delegates to it).
+
+## The packaged design guidance
+
+`assets/guidance/dashboard-design.md` is a shipped asset the applying agent reads at apply and the gate reviewer references at ship. Eight sections cover the ratified surface rules:
+
+1. Primary KPI placement (hardens into AC-19102-1)
+2. Tile density and count limits (stays operator guidance)
+3. Timeframe and filter chrome (hardens into AC-19105-1 and the fan-out rule under AC-19104-1)
+4. Loading, empty and error states (hardens into AC-19103-1 and AC-19103-2)
+5. Colour and contrast (stays operator guidance for the tile row; hardens through the charts blueprint on the chart region)
+6. When a table beats a chart, delegating to application-datatable (stays operator guidance)
+7. Refresh cadence and staleness (hardens into AC-19104-1 and AC-19104-2)
+8. Anti-patterns (stays operator guidance)
+
+Five https-cited sources anchor the guidance: NN/g dashboard design, Few (Information Dashboard Design), Tufte (The Visual Display of Quantitative Information), GOV.UK Design System patterns, and WCAG 2.2 Understanding docs.
+
+## The one runtime gate
+
+`probe-packs/application-dashboard.pack.mjs` ships three checks the `rcf verify browser` runner invokes on any FBS whose surface matches the pack's `appliesTo` predicate (an FBS binding `TAC-2001-application-dashboard-tile-grid` or whose nav model routes name a dashboard path). Each check drives the real Playwright browser the runner provisions (through the pinned Playwright MCP or the consuming project's own `playwright` installation), reads the accessibility tree and the DOM, and returns a verdict. A failing block-severity check refuses ship through the existing `browserVerification` aggregate verdict.
+
+The three shipped checks:
+
+- `AC-19102-1` primary-KPI position by DOM order and CSS Grid position at 1440, 1024 and 360. Drives the pack-browser's `resize(width, height)` seam (new in T-3) to each of the three widths, reads DOM order and computed `grid-column-start`/`grid-row-start` on the primary tile, and asserts the top-left placement holds at every width.
+- `AC-19104-1` timeframe refetch fan-out with matching boundary and as-of stamp. Clicks a second preset control, waits for the batch, reads the request log from `window.__dashboardFetches` and reconciles with the `GET /__requests` endpoint on the sample app, and asserts every fetch in the new batch carries the same `from`/`to`/`preset` trio and every tile's `data-as-of` matches the shell root in ISO-8601 form.
+- `AC-19103-1` per-tile four-state contract. Drives the sample app's state-pinning switches (`?tile=primary&state=<state>`) for each of the four states, reads the accessibility tree and the DOM, and asserts every state carries `role="region"`, `aria-live="polite"`, the `data-tile-state` attribute, and a distinct non-colour visual cue.
+
+The pack fires ONLY when its `appliesTo` returns true; a project whose FBS does not bind the tile-grid TAC or a dashboard route sees the pack recorded as `applicable: false` and no browser check runs.
+
+## The shelf pattern for tile-state pinning and fetch capture
+
+Two things this pack needs that the T-0 runner seam does not offer directly: viewport resize (added in T-3 through the `resize(width, height)` seam extension) and per-tile state mocking with fetch capture. Rather than adding a network interception seam, this blueprint documents a shelf pattern the applying project realises on its own runtime:
+
+- **State pinning through query switches**: the sample app accepts `?tile=<id>&state=<state>` on the dashboard route so the pack can drive each of the four states without a synthetic-event seam. An applying project realises the same pattern through its own dev-mode query handling.
+- **Fetch capture through a request log**: the sample app appends every fetch to `window.__dashboardFetches` (client-side) and to a server-side log the pack reads at `GET /__requests`. An applying project realises the same pattern through a dev-mode telemetry hook.
+
+The pack-browser seam extension in T-3 adds `resize(width, height)`; the two patterns above stay a shelf convention this README documents.
+
+## Elicited parameters (ADR-2001, ADR-2002, ADR-2003 and REQ notes)
+
+The applying project elicits these at apply; the declarative ADR shape (`elicited: true`) records the intent on the manifest. The runner has no apply-time elicitation phase today (tracked as w-2026-09-04-dave-022, built in T-5); accept the declarative shape and gather the operator's answers by hand during the apply pass.
+
+- **Primary-KPI kind** (ADR-2001): one of `revenue`, `active-users`, `error-rate`, `throughput`, `custom`. A `custom` value carries a short operator name in `data-kpi-name`.
+- **Tile inventory with slots** (REQ-002 and TAC-2001): the tile list (primary tile plus up to seven supporting tiles) and each tile's slot on the CSS Grid.
+- **Timeframe presets** (ADR-2002): the operator's preset set. Ships three by recommendedDefault (`last-7-days`, `last-30-days`, `quarter-to-date`); operator elicits an override.
+- **Auto-refresh interval** (ADR-2002): OFF by default; operator elicits an interval in seconds if the surface needs unattended refresh.
+- **Export formats** (ADR-2003): the operator's format list. Ships three by recommendedDefault (`csv`, `pdf`, `png-chart`); operator elicits an override.
+- **Per-organisation vs per-user vs global scope** (REQ-004 note): the boundary on which the fan-out runs. A per-user dashboard passes the user id on every fetch; a per-organisation dashboard passes the tenant id; a global dashboard passes neither. Elicited at apply; recorded on the manifest.
+
+## Standards trace
+
+NN/g F-scan on primary-KPI placement (ADR-2001, guidance section 1). NN/g dashboard design on refresh cadence (guidance section 7). GOV.UK Design System download patterns and WCAG 1.3.1 on the export handle (ADR-2003, guidance section 3). WCAG 2.2 (1.4.1, 1.4.3, 1.4.11, 2.1.1, 4.1.3) on the four-state contract, filter chrome and colour discipline. `standardsTraceClause` on each ADR carries the primary source.
+
+## Quality bar
+
+Every dashboard surface renders the five shell regions (tile row, chart region, filter chrome, timeframe picker, export handle) as labelled `role="region"` elements. The primary KPI tile is first in DOM order and top-left in CSS Grid at 1440, 1024 and 360. Every tile carries the four-state contract with role region, aria-live polite, a `data-tile-state` attribute and a non-colour visual cue distinct per state. A timeframe preset change fans out one refetch per tile with the same from/to/preset trio and one shared `as of <ISO-8601>` stamp. Auto-refresh is off unless the elicited interval is set. The export handle is a labelled `<button>` opening an accessible format list, and PNG-of-chart delegates to the application-charts render shell.
+
+## Known mechanism-reach gaps
+
+Every runtime-observable AC that is not bound to a pack check appears here individually per the T-1 gate discipline (`blueprint-authoring-checklist.md` section 6.g): categories are not enough. The pack has three checks; every other runtime-observable AC on this blueprint is a mechanism-reach gap named below.
+
+- **AC-19101-1 five-region shell composition**. The pack drives the primary-KPI region (AC-19102-1) and the timeframe region (AC-19104-1), which implies the shell renders at least those two, but the pack does not enumerate all five regions and their labels. A v1.1 minor bump could add a region-enumeration pre-check that walks `[data-region]` on the shell root.
+- **AC-19101-2 chart region mounts through the charts shell**. The application-charts pack fires on the dashboard's chart route through its own `appliesTo` predicate; the dashboard's pack does not itself assert the chart-shell contract on the region. Project-side review is the current mechanism.
+- **AC-19102-2 no-primary-KPI supersession fallback**. The pack asserts the primary KPI exists (AC-19102-1); the documentation-and-review contract on a surface with no primary KPI is not observable at runtime.
+- **AC-19103-2 state-transition announcement**. The pack does not simulate the transition today (the runner has no synthetic-event seam beyond click / type / press). A v1.2 runner minor with an event-emit seam would close the class.
+- **AC-19104-2 auto-refresh default and elicited interval**. The pack asserts `data-auto-refresh="off"` on the shell root at initial render (implied by the fixture); a runtime observation of the elicited-interval refresh cadence is not exercised. Project-side review carries the residual.
+- **AC-19105-1 filter chrome accessible controls**. The pack does not enumerate filter controls today. A v1.1 minor bump could add a filter-control enumeration check.
+- **AC-19105-2 filter fan-out**. The pack asserts the timeframe fan-out (AC-19104-1); the filter-change fan-out is a mechanism-reach gap. A v1.1 minor bump could add a paired filter-change check driving the filter chip and reading the same request log.
+- **AC-19106-1 export handle accessible format list**. The pack does not open the export list today. A v1.1 minor bump could add a check that activates the export button, reads the exposed listbox and asserts the format entries.
+- **AC-19106-2 PNG-of-chart delegation**. The pack browser has no download-capture seam today, so the PNG delegation is proven at project-side review. A v1.2 runner minor with a download-capture seam would close the class.
+- **AC-19107-2 dashboard shape reflects guidance rules**. The pack asserts the specific attributes the fixture emits (primary-KPI kind, as-of stamp, auto-refresh default); a general check that a shipped surface honours the guidance's hardened rules is project-side review.
+
+## The pack-browser resize seam extension
+
+This blueprint's train adds a small, honest extension to the T-0 pack-browser seam: `resize(width, height)`. On the MCP route the method calls the pinned Playwright MCP's `browser_resize` tool; on the project route it calls `page.setViewportSize({ width, height })`. The extension lets the primary-KPI position check (AC-19102-1) drive the three ratified breakpoints (1440, 1024, 360) through the same browser handle. The next blueprints on the shelf that carry breakpoint-scoped visual ACs (T-4 notifications-in-app, T-5 admin-console) reuse the same seam.