@7365admin1/layer-common 3.2.2-staging.183 → 3.2.2-staging.188

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 3.2.7
+
+### Patch Changes
+
+- 9c1803d: 08172026 Release latest version
+
 ## 3.2.6
 
 ### Patch Changes

package/assets/css/primitives.css

@@ -614,6 +614,28 @@ button.app-btn--err {
   opacity: 1;
 }
 
+/*
+ * A native `<select>`'s option list is painted by the BROWSER, not by the page.
+ * The control above sets `color`, and an `<option>` inherits it - but it gets
+ * no background of its own, so the browser paints its own popup behind the
+ * theme's ink. In dark mode that popup is white on Windows/Chrome, and the
+ * theme's near-white ink on it measures 1.14:1: the list reads as blank, with
+ * only the highlighted row legible. QA reported exactly that on two apps.
+ *
+ * Giving the option the card's own fill and ink is what makes the open list
+ * belong to the theme. `--card`/`--text` and not a literal, so it follows the
+ * `v-theme--*` subtree the select is actually in - a dialog that forces a
+ * theme included. Declared once here rather than per component, so every
+ * native select this layer renders is covered, in every consuming app.
+ *
+ * The FRAME around the list is browser chrome and is not ours to paint; a
+ * light strip may remain around the options in some browsers.
+ */
+select option {
+  background-color: var(--card);
+  color: var(--text);
+}
+
 /* The `trailing` slot's control - same muted weight as the leading icon, so a
    reveal toggle reads as field chrome rather than as a second action. */
 .app-field__trailing {

package/assets/css/screens.css

@@ -646,7 +646,16 @@
  */
 .table-card thead th {
   background: var(--thead) !important;
-  color: var(--muted) !important;
+  /*
+   * `--text2`, not the prototype's `--muted`. `--muted` on the header band
+   * measures 3.10:1 in light (3.24:1 where the band sits on a plain card) -
+   * below AA, and reported independently by two apps' QA runs. `--text2` is
+   * the design's SECONDARY text token: 9.22:1 light / 9.57:1 dark on the same
+   * band, while still sitting clearly below the primary ink the data rows use
+   * (16.52:1 / 13.77:1), so the header keeps reading as secondary to the data.
+   * The uppercase/800/11px treatment below is unchanged.
+   */
+  color: var(--text2) !important;
   font-size: var(--fs-table-head) !important;
   font-weight: var(--fw-table-head) !important;
   letter-spacing: var(--ls-table-head);

package/components/DashboardEmptyState.vue

@@ -1,10 +1,28 @@
+<!--
+  "No data to display" and "we could not fetch it" are not the same sentence.
+
+  This component drew the first one for both, because every dashboard request
+  defaulted a rejection to an empty list. `error` splits them: a genuine zero
+  keeps the neutral wording, a failed request says so in the error tone and
+  tells the reader the figure is missing rather than nil.
+-->
 <template>
   <div
     class="d-flex flex-column align-center justify-center text-center dashboard-empty"
+    :class="{ 'dashboard-empty--error': error }"
     :style="{ minHeight: compact ? '72px' : '140px', gap: '8px' }"
+    role="status"
   >
-    <v-icon icon="mdi-database-search-outline" size="28" />
-    <span class="text-caption font-weight-bold">No data to display</span>
+    <v-icon
+      :icon="error ? 'mdi-cloud-alert-outline' : 'mdi-database-search-outline'"
+      size="28"
+    />
+    <span class="text-caption font-weight-bold">
+      {{ error ? "Couldn't load this data" : "No data to display" }}
+    </span>
+    <span v-if="error" class="text-caption dashboard-empty__hint">
+      The request failed — this is not a zero. Refresh to try again.
+    </span>
   </div>
 </template>
 
@@ -14,6 +32,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  /** The request behind this panel failed - say so instead of showing "none". */
+  error: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -25,4 +48,16 @@ defineProps({
   font-family: var(--font-sans);
   color: var(--muted);
 }
+
+/* `--err` is the design's own error tone and is AA in both themes; the hint
+   line stays on `--text2` so the explanation is never the palest thing here
+   (a dimmed explanation is the one line that must stay readable). */
+.dashboard-empty--error {
+  color: var(--err);
+}
+
+.dashboard-empty__hint {
+  color: var(--text2);
+  max-width: 34ch;
+}
 </style>

package/components/DashboardMain.vue

@@ -21,7 +21,7 @@
         <template
           v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
         >
-          <div class="d-flex flex-column ga-2 mt-2">
+          <div v-if="card.raw.items.length" class="d-flex flex-column ga-2 mt-2">
             <div
               v-for="item in card.raw.items"
               :key="item._id || item.name"
@@ -31,6 +31,7 @@
               <span class="text-blue-grey">Balance: {{ item.qty }}</span>
             </div>
           </div>
+          <div v-else class="print-kpi-meta mt-2">No supplies recorded</div>
         </template>
         <template v-else>
           <div class="print-kpi-value">{{ card.value }}</div>
@@ -254,6 +255,27 @@
       class="mb-4"
     />
 
+    <!--
+      SAY IT ONCE AT THE TOP, THEN AGAIN WHERE IT HAPPENED. A failed request
+      used to be invisible: zeros in the tiles, "No data to display" in the
+      lists, nothing else. This names what did not load; each tile and panel
+      below carries its own failure too, so nobody has to guess which zero is
+      real. `variant="tonal"` on purpose - Vuetify derives a WHITE label for a
+      filled error alert, which measures 3.60:1 in these themes.
+    -->
+    <v-alert
+      v-if="failedWidgetLabels.length"
+      type="error"
+      variant="tonal"
+      density="compact"
+      icon="mdi-cloud-alert-outline"
+      class="mb-4"
+    >
+      Some of this dashboard could not be loaded ({{
+        failedWidgetLabels.join(", ")
+      }}). The figures for it are missing, not zero — refresh to try again.
+    </v-alert>
+
     <!-- ── KPI Cards ───────────────────────────────────────────────────────── -->
     <v-row dense class="mb-1 align-stretch">
       <v-col
@@ -332,7 +354,11 @@
           <template
             v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
           >
-            <div class="d-flex flex-column ga-2">
+            <!--
+              An empty list used to render a title and a blank card - no number,
+              no words, nothing to read. The tile now says what it found.
+            -->
+            <div v-if="card.raw.items.length" class="d-flex flex-column ga-2">
               <div
                 v-for="item in card.raw.items"
                 :key="item._id || item.name"
@@ -342,6 +368,7 @@
                 <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
             </div>
+            <DashboardEmptyState v-else compact />
           </template>
         </AppKpiTile>
       </v-col>
@@ -488,7 +515,7 @@
         </div>
       </div>
 
-      <DashboardEmptyState v-else />
+      <DashboardEmptyState v-else :error="chartFailed" />
     </v-card>
 
     <!-- ── Hygiene / M&E / Landscape / Pest / Pool — task + attendance ────── -->
@@ -533,7 +560,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="taskScheduleFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -565,7 +592,7 @@
               <span class="figma-row-figure">{{ item.totalHours || 0 }} hrs</span>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="attendanceFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -599,7 +626,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -644,7 +671,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -689,7 +716,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -738,7 +765,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -774,7 +801,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -822,7 +849,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -899,7 +926,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -941,7 +968,7 @@
                 <StatusChip :status="item.status || 'On duty'" pill />
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="attendanceFailed" />
           </div>
         </div>
       </v-col>
@@ -977,7 +1004,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -1158,6 +1185,15 @@
 </template>
 
 <script setup lang="ts">
+// The one non-auto-imported thing this file needs: the cookie options type, so
+// `runtimeConfig.public.cookieConfig` (typed `unknown`) can be narrowed once
+// rather than at the call site. Same import `useThemePreference.ts` uses.
+import type { CookieOptions } from "#app";
+// Explicitly, not by auto-import: every other component in this layer reaches
+// its utils by relative path (`StatusChip.vue`, `CameraWall.vue`,
+// `plugins/vuetify.ts`), and a bare call resolved to nothing when driven.
+import { buildWorkOrderStatus } from "../utils/dashboard";
+
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 type DashboardMetric = {
@@ -1455,8 +1491,11 @@ const currentVisitorTypeParam = computed(
 // ─── Data Fetching ────────────────────────────────────────────────────────────
 
 // Hygiene / M&E / Landscape / Pest / Pool main metrics
-const { data: getDashboardReq, pending: loadingMetrics } =
-  await useLazyAsyncData(
+const {
+  data: getDashboardReq,
+  pending: loadingMetrics,
+  error: metricsError,
+} = await useLazyAsyncData(
     `get-dashboard-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
@@ -1472,8 +1511,11 @@ const { data: getDashboardReq, pending: loadingMetrics } =
   );
 
 // Property / Security main metrics (uses generic getDashboard with visitor type)
-const { data: getDashboardAltReq, pending: loadingAltMetrics } =
-  await useLazyAsyncData(
+const {
+  data: getDashboardAltReq,
+  pending: loadingAltMetrics,
+  error: altMetricsError,
+} = await useLazyAsyncData(
     `get-dashboard-alt-${props.site}-${props.serviceType}`,
     () =>
       props.site && (isPropertyMode.value || isSecurityMode.value)
@@ -1497,8 +1539,11 @@ const { data: getDashboardAltReq, pending: loadingAltMetrics } =
   );
 
 // Weekly activity (all modes)
-const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
-  await useLazyAsyncData(
+const {
+  data: weeklyActivityReq,
+  pending: loadingWeeklyActivity,
+  error: weeklyActivityError,
+} = await useLazyAsyncData(
     `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
@@ -1514,8 +1559,11 @@ const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
   );
 
 // Task schedule (hygiene mode only)
-const { data: taskScheduleReq, pending: loadingTaskSchedule } =
-  await useLazyAsyncData(
+const {
+  data: taskScheduleReq,
+  pending: loadingTaskSchedule,
+  error: taskScheduleError,
+} = await useLazyAsyncData(
     `get-dashboard-task-schedule-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
@@ -1531,8 +1579,11 @@ const { data: taskScheduleReq, pending: loadingTaskSchedule } =
   );
 
 // Attendance (hygiene + security modes)
-const { data: attendanceReq, pending: loadingAttendance } =
-  await useLazyAsyncData(
+const {
+  data: attendanceReq,
+  pending: loadingAttendance,
+  error: attendanceError,
+} = await useLazyAsyncData(
     `get-dashboard-attendance-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && !isPropertyMode.value
@@ -1548,8 +1599,11 @@ const { data: attendanceReq, pending: loadingAttendance } =
   );
 
 // Feedbacks (all modes)
-const { data: feedbacksReq, pending: loadingFeedbacks } =
-  await useLazyAsyncData(
+const {
+  data: feedbacksReq,
+  pending: loadingFeedbacks,
+  error: feedbacksError,
+} = await useLazyAsyncData(
     `get-dashboard-feedbacks-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
@@ -1593,35 +1647,64 @@ const finalLoading = computed(() => {
   );
 });
 
+// ─── Request Failures ─────────────────────────────────────────────────────────
+
+/**
+ * A DEAD API USED TO LOOK EXACTLY LIKE A QUIET DAY.
+ *
+ * Every request's result was read as `x.value ?? <zero>`, so a rejected call
+ * produced the same screen as a site with nothing on it: every tile 0, every
+ * trend +0%, every list "No data to display", and not one word to say the data
+ * never arrived. That ambiguity has cost this estate days before now.
+ *
+ * `useLazyAsyncData` already hands back an `error` ref; these carry it to the
+ * widgets that asked for the data, so a zero on this page is a measurement and
+ * a failure says so.
+ */
+const metricsFailed = computed(() =>
+  Boolean(isHygieneMode.value ? metricsError.value : altMetricsError.value)
+);
+const chartFailed = computed(() => Boolean(weeklyActivityError.value));
+const taskScheduleFailed = computed(() => Boolean(taskScheduleError.value));
+const attendanceFailed = computed(() => Boolean(attendanceError.value));
+const feedbacksFailed = computed(() => Boolean(feedbacksError.value));
+
+/** The header banner - one line, whatever combination failed. */
+const failedWidgetLabels = computed(() => {
+  const labels: string[] = [];
+  if (metricsFailed.value) labels.push("the summary tiles");
+  if (chartFailed.value) labels.push("the activity chart");
+  if (taskScheduleFailed.value && isHygieneMode.value)
+    labels.push(primaryListConfig.value.title.toLowerCase());
+  if (attendanceFailed.value && !isPropertyMode.value) labels.push("staff");
+  if (feedbacksFailed.value) labels.push("feedbacks");
+  return labels;
+});
+
+/** The text a tile or panel shows in place of a figure it does not have. */
+const LOAD_FAILED_TEXT = "Couldn't load";
+
 // ─── Merged Dashboard Data ────────────────────────────────────────────────────
 
 const finalDashboardData = computed<Record<string, any>>(() => {
   if (!props.serviceType) return props.dashboardData || {};
 
-  let weeklyActivity = weeklyActivityReq.value ?? [];
-  const hasNoActivity =
-    !weeklyActivity.length ||
-    weeklyActivity.every(
-      (item: any) =>
-        !item.workOrder &&
-        !item.taskCompleted &&
-        !item.openWorkOrder &&
-        !item.closedWorkOrder &&
-        !item.incidents &&
-        !item.visitors
-    );
-
-  if (hasNoActivity && currentPeriod.value === "thisWeek") {
-    weeklyActivity = [
-      { day: "Mon", workOrder: 800, taskCompleted: 1400 },
-      { day: "Tue", workOrder: 450, taskCompleted: 900 },
-      { day: "Wed", workOrder: 950, taskCompleted: 1640 },
-      { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
-      { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
-      { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
-      { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
-    ];
-  }
+  /**
+   * A QUIET WEEK IS NOT A BUSY ONE.
+   *
+   * This used to substitute a hard-coded seven-day curve - Mon 800/1400 through
+   * Sun 2800/3200 - whenever the week's activity came back with nothing in it,
+   * and draw it as real, y-axis to 3,200. The backend zero-fills one row per
+   * day and never returns an empty array, so "nothing in it" is exactly what a
+   * genuinely quiet site looks like; `?? []` made it exactly what a FAILED
+   * request looks like too. And it left the screen: Export -> Word wrote those
+   * invented figures into a document a manager can hand to a client.
+   *
+   * Deleted outright. An empty week now falls through to `hasChartData` and
+   * renders the empty state, a failed one renders the error state, and the Word
+   * export's chart table is already gated on the same `hasChartData`.
+   */
+  const weeklyActivity = weeklyActivityReq.value ?? [];
 
   // `weekly-activity` returns each interval twice over: `openWorkOrder` and
   // `workOrder` are the same not-yet-completed count, `closedWorkOrder` and
@@ -1760,9 +1843,21 @@ const defaultCardValues: TDashboardCardValue[] = [
   {
     key: "supplyAlert",
     periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: KPI_TONES.err.color,
+    /**
+     * IT IS NOT AN ALERT, SO IT NO LONGER SAYS ALERT.
+     *
+     * The server returns the three lowest-quantity active supplies and NO
+     * threshold of any kind (new-dashboard.repo.ts) - so 900 gloves appeared
+     * under a red "SUPPLY ALERT" heading with a warning triangle, next to
+     * items that genuinely were low, and nothing distinguished them. The title,
+     * the icon and the tone now describe what the data is.
+     *
+     * A real low-stock alert needs a per-supply reorder level the server does
+     * not hold. That is backend work and is deliberately NOT invented here.
+     */
+    title: "Lowest Stock",
+    icon: "mdi-package-variant",
+    color: KPI_TONES.info.color,
   },
 ];
 
@@ -1837,12 +1932,16 @@ const resolvedCardValues = computed(() => {
 
 // ─── Widget Keys by Mode ──────────────────────────────────────────────────────
 
+// "recentActivity" was in this list and in the Customize dialog, and NOTHING
+// renders it - `isWidgetVisible("recentActivity")` appears nowhere in the
+// template. Five apps offered a switch that did nothing whichever way it was
+// set. Removed rather than built: there is no Recent Activity panel anywhere in
+// the estate to connect it to, and inventing one is a new feature, not a fix.
 const defaultExtraWidgetKeys = [
   "activity",
   "taskSchedule",
   "staffStatus",
   "feedbacks",
-  "recentActivity",
 ];
 
 const propertyDefaultWidgetKeys = [
@@ -1869,6 +1968,36 @@ const securityDefaultWidgetKeys = [
   "feedbacks",
 ];
 
+/**
+ * THE CUSTOMISE CHOICE, REMEMBERED.
+ *
+ * Hiding a widget worked and then forgot: nothing was written anywhere, so a
+ * reload brought every panel back and the dialog was decoration.
+ *
+ * A COOKIE, and specifically the layer's own `cookieConfig` - the same
+ * mechanism `sid`, `user`, `landing-page` and the light/dark preference already
+ * travel on (see `composables/useThemePreference.ts` for the full reasoning).
+ * localStorage would be per-origin, and this is one component shipped into
+ * seven applications on seven hostnames. No new storage mechanism, and no
+ * invented endpoint - there is no save API on the server for this.
+ *
+ * One cookie per dashboard MODE, because the three modes have different widget
+ * sets and a security member's choice must not decide what a hygiene member
+ * sees.
+ */
+const widgetPrefsCookie = useCookie<string[] | null>(
+  `dashboard-widgets-${
+    isPropertyMode.value
+      ? "property"
+      : isSecurityMode.value
+      ? "security"
+      : "service"
+  }`,
+  runtimeConfig.public.cookieConfig as CookieOptions<string[] | null> & {
+    readonly?: false;
+  }
+);
+
 const defaultVisibleWidgetKeys = computed(() => {
   if (props.extraWidgetKeys && props.extraWidgetKeys.length > 0) {
     return [
@@ -1889,8 +2018,16 @@ watch(
   (keys) => {
     const nextKeys = [...keys];
     if (!visibleWidgetKeys.value.length) {
-      visibleWidgetKeys.value = nextKeys;
-      draftVisibleWidgetKeys.value = nextKeys;
+      // A remembered choice wins on first paint, filtered against the keys this
+      // mode actually has so a stale cookie cannot resurrect a removed widget.
+      // `Array.isArray` rather than a length check: "the user hid everything"
+      // and "there is no cookie" are different answers.
+      const remembered = Array.isArray(widgetPrefsCookie.value)
+        ? widgetPrefsCookie.value.filter((k) => nextKeys.includes(k))
+        : null;
+      const initial = remembered ?? nextKeys;
+      visibleWidgetKeys.value = initial;
+      draftVisibleWidgetKeys.value = [...initial];
       return;
     }
     visibleWidgetKeys.value = visibleWidgetKeys.value.filter((k) =>
@@ -2037,11 +2174,6 @@ const customizeWidgets = computed(() => {
       title: "Feedbacks",
       description: "Show recent feedback and resolution state.",
     },
-    {
-      key: "recentActivity",
-      title: "Recent Activity",
-      description: "Latest updates across the service.",
-    },
   ];
 });
 
@@ -2285,7 +2417,7 @@ function getSecurityKpiCards() {
   ];
 }
 
-const kpiCards = computed(() => {
+const rawKpiCards = computed(() => {
   if (isPropertyMode.value) return getPropertyKpiCards();
   if (isSecurityMode.value) return getSecurityKpiCards();
 
@@ -2312,6 +2444,22 @@ const kpiCards = computed(() => {
   });
 });
 
+/**
+ * A tile whose request failed shows an em dash and says so, never a zero.
+ * `percentage: NaN` is what suppresses the pill - `kpiChipText()` returns ""
+ * for anything non-finite - and `raw: {}` empties the supply list with it.
+ */
+const kpiCards = computed(() => {
+  if (!metricsFailed.value) return rawKpiCards.value;
+  return rawKpiCards.value.map((card) => ({
+    ...card,
+    value: "—",
+    percentage: NaN,
+    meta: LOAD_FAILED_TEXT,
+    raw: {} as any,
+  }));
+});
+
 const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
@@ -2534,42 +2682,15 @@ const todayAttentions = computed(() =>
  * is shared by every chip in the estate - or ruling that a chart series is not
  * a status chip. Both are design decisions, so neither is taken here.
  */
-const workOrderStatus = computed(() => {
-  const summary = finalDashboardData.value?.workOrderStatusSummary;
-  const metric = getMetric(["openWorkOrder", "workOrders", "workOrder"]);
-
-  const src = summary || metric;
-  if (!src) return [];
-
-  const completed = Number(src.completed ?? 0);
-  const inProgress = Number(src.inProgress ?? 0);
-  const pending =
-    src.pending !== undefined
-      ? Number(src.pending)
-      : Math.max(0, Number(src.count ?? 0) - inProgress);
-  const max = Math.max(completed, inProgress, pending, 1);
-
-  return [
-    {
-      label: "Completed",
-      value: completed,
-      percent: (completed / max) * 100,
-      color: "var(--ok)",
-    },
-    {
-      label: "In Progress",
-      value: inProgress,
-      percent: (inProgress / max) * 100,
-      color: "var(--err)",
-    },
-    {
-      label: "Pending",
-      value: pending,
-      percent: (pending / max) * 100,
-      color: "var(--warn)",
-    },
-  ];
-});
+const workOrderStatus = computed(() =>
+  // The arithmetic and the "no breakdown, no bars" rule live in
+  // `utils/dashboard.ts` so they have a test; the tone -> token mapping stays
+  // here because it is this template's colour question, not the server's.
+  buildWorkOrderStatus(finalDashboardData.value?.workOrderStatus).map((row) => ({
+    ...row,
+    color: `var(--${row.tone})`,
+  }))
+);
 
 // Security-mode lists
 const activePatrolItems = computed<any[]>(
@@ -2762,7 +2883,21 @@ onUnmounted(() => {
 watch(selectedRange, (period) => {
   if (props.serviceType) {
     const apiPeriod = periodValue[period];
-    if (apiPeriod) currentPeriod.value = apiPeriod;
+    if (apiPeriod) {
+      currentPeriod.value = apiPeriod;
+      /**
+       * The component already READ `?period=` on mount and never wrote it
+       * back, so a refresh - or a link sent to a colleague - silently returned
+       * to Today while the button still said This Month. Writing it closes
+       * both. `replace`, not `push`: changing the range is not a navigation
+       * step the Back button should have to walk through.
+       *
+       * What each range MEANS is untouched here.
+       */
+      if (route.query.period !== apiPeriod) {
+        router.replace({ query: { ...route.query, period: apiPeriod } });
+      }
+    }
   }
   emit("updatePeriod", { key: "__all__", period });
 });
@@ -3341,6 +3476,9 @@ function resetCustomizeDraft() {
 
 function submitCustomize() {
   visibleWidgetKeys.value = [...draftVisibleWidgetKeys.value];
+  // The write is the whole point - see `widgetPrefsCookie`. Saving on Submit
+  // rather than on every switch keeps Cancel meaning cancel.
+  widgetPrefsCookie.value = [...draftVisibleWidgetKeys.value];
   widgetSearch.value = "";
   customizeDialog.value = false;
 }
@@ -3440,6 +3578,13 @@ async function exportDashboard(format: "PDF" | "Word") {
 <body>
   <h1>${props.title || dashboardTitle.value}</h1>
   <div class="subtitle">Site: ${siteName} | Period: ${periodLabel}</div>
+  ${
+    failedWidgetLabels.value.length
+      ? `<div class="subtitle" style="color:#b73535;">Incomplete report: ${failedWidgetLabels.value.join(
+          ", "
+        )} could not be loaded. Any figure shown as — is missing, not zero.</div>`
+      : ""
+  }
       `;
 
       if (visibleKpiCards.value && visibleKpiCards.value.length > 0) {
@@ -3452,6 +3597,9 @@ async function exportDashboard(format: "PDF" | "Word") {
           let kpiValueHtml = `<div class="kpi-value">${card.value}</div>`;
           if (card.key === "supplyAlert" && Array.isArray(card.raw?.items)) {
             kpiValueHtml = '<div style="font-size: 9pt; margin-top: 4px;">';
+            if (!card.raw.items.length) {
+              kpiValueHtml += "<div>No supplies recorded</div>";
+            }
             card.raw.items.forEach((item: any) => {
               kpiValueHtml += `<div><strong>${item.name}</strong>: Balance ${item.qty}</div>`;
             });

package/components/Layout/Header.vue

@@ -89,6 +89,8 @@
 </template>
 
 <script setup lang="ts">
+import { moduleNameFromRoute } from "../../utils/breadcrumb";
+
 const props = defineProps({
   hideNavIcon: {
     type: Boolean,
@@ -142,39 +144,12 @@ const siteName = computed(() =>
 const route = useRoute();
 
 /**
- * The module's name comes off the route name, which the applications build
- * from their own folder structure: `org-site-work-orders` is Work Orders.
- * Leading parameter segments (`org`, `site`) are skipped and the name stops at
- * the first one that follows, so a detail route (`...-feedbacks-id`) and a
- * status route (`...-members-status`) both name their module rather than their
- * argument.
+ * The page's name comes off the route name, which the applications build from
+ * their own folder structure: `org-site-work-orders` is Work Orders. The rule
+ * itself lives in `utils/breadcrumb.ts`, where it is unit-tested against every
+ * route shape the eleven applications actually have.
  */
-const ACRONYMS: Record<string, string> = {
-  cctv: "CCTV",
-  hid: "HID",
-  dob: "DOB",
-  anpr: "ANPR",
-  nfc: "NFC",
-  qr: "QR",
-  soa: "SOA",
-  sp: "SP",
-  id: "ID",
-};
-
-const moduleName = computed(() => {
-  const segments = String(route.name ?? "").split("-").filter(Boolean);
-  const params = new Set(Object.keys(route.params ?? {}));
-
-  let i = 0;
-  while (i < segments.length && params.has(segments[i])) i++;
-
-  const words: string[] = [];
-  while (i < segments.length && !params.has(segments[i])) words.push(segments[i++]);
-
-  return words
-    .map((w) => ACRONYMS[w] ?? w.charAt(0).toUpperCase() + w.slice(1))
-    .join(" ");
-});
+const moduleName = computed(() => moduleNameFromRoute(route));
 
 const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;

package/components/SwitchContext.vue

@@ -35,7 +35,9 @@
       </span>
       <v-text-field
         v-model="search"
-        @keydown.enter="emit('search')"
+        @keydown.enter="triggerSearch"
+        clearable
+        @click:clear="clearSearch"
         density="compact"
         width="100%"
         hide-details
@@ -178,6 +180,33 @@ watchEffect(() => {
   }
 });
 
+let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+let skipNextWatch = false;
+
+const triggerSearch = () => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+  emit("search");
+};
+
+const clearSearch = () => {
+  skipNextWatch = true;
+  search.value = "";
+  triggerSearch();
+};
+
+watch(search, () => {
+  if (skipNextWatch) {
+    skipNextWatch = false;
+    return;
+  }
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(triggerSearch, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+});
+
 const selectItem = (value: string) => {
   selected.value = value;
   menu.value = false;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.183",
+  "version": "3.2.2-staging.188",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/breadcrumb.test.ts

@@ -0,0 +1,108 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { moduleNameFromRoute } from "./breadcrumb.ts";
+
+/**
+ * Real routes, not invented ones: name, path and parameters exactly as
+ * vue-router hands them to the bar in each application.
+ */
+const ID = "68b0c1d2e3f4a5b6c7d8e9f0";
+
+test("a site application names the page, not its parameters", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-work-orders",
+      path: `/${ID}/${ID}/work-orders`,
+      params: { org: ID, site: ID },
+    }),
+    "Work Orders"
+  );
+});
+
+test("a detail route names its module, not its argument", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-feedbacks-id",
+      path: `/${ID}/${ID}/feedbacks/${ID}`,
+      params: { org: ID, site: ID, id: ID },
+    }),
+    "Feedbacks"
+  );
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-members-status",
+      path: `/${ID}/${ID}/members/pending`,
+      params: { org: ID, site: ID, status: "pending" },
+    }),
+    "Members"
+  );
+});
+
+test("a fixed folder in front of the context parameter is not the page", () => {
+  // THE DEFECT: every screen of the organization application read "Org".
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-organization-marketplace",
+      path: `/org/${ID}/marketplace`,
+      params: { organization: ID },
+    }),
+    "Marketplace"
+  );
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-organization-payment-methods-linked",
+      path: `/org/${ID}/payment-methods/linked`,
+      params: { organization: ID },
+    }),
+    "Payment Methods Linked"
+  );
+});
+
+test("a literal second segment is NOT a skipped context", () => {
+  // `/organizations/status/:status` also begins with a literal folder, but
+  // "Organizations" is the page here - only the THIRD segment is a parameter.
+  assert.equal(
+    moduleNameFromRoute({
+      name: "organizations-status-status",
+      path: "/organizations/status/pending",
+      params: { status: "pending" },
+    }),
+    "Organizations"
+  );
+});
+
+test("a route with no parameters is left alone", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "super-admin-client-list",
+      path: "/super-admin/client-list",
+      params: {},
+    }),
+    "Super Admin Client List"
+  );
+  assert.equal(
+    moduleNameFromRoute({ name: "personal-info-name", path: "/personal-info/name", params: {} }),
+    "Personal Info Name"
+  );
+});
+
+test("acronyms keep their case", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-virtual-patrol-cctv",
+      path: `/${ID}/${ID}/virtual-patrol/cctv`,
+      params: { org: ID, site: ID },
+    }),
+    "Virtual Patrol CCTV"
+  );
+});
+
+test("a context-only route has no page half", () => {
+  // The organization dashboard: the bar shows the organization's name alone.
+  assert.equal(
+    moduleNameFromRoute({ name: "org-organization", path: `/org/${ID}`, params: { organization: ID } }),
+    ""
+  );
+  assert.equal(moduleNameFromRoute({ name: "", path: "/", params: {} }), "");
+});

package/utils/breadcrumb.ts

@@ -0,0 +1,82 @@
+/**
+ * THE TOP BAR'S BREADCRUMB, PAGE HALF.
+ *
+ * The bar draws `Context / Page`. The page half is derived from the route the
+ * router is already on - nothing is fetched and nothing is configured per app,
+ * because the applications build their route names from their own folder
+ * structure: `org-site-work-orders` is Work Orders.
+ *
+ * Lives here rather than in the component so the rule is testable: it is the
+ * one piece of the bar with real branching, and it named a whole application's
+ * screens wrongly for want of a case.
+ */
+const ACRONYMS: Record<string, string> = {
+  cctv: "CCTV",
+  hid: "HID",
+  dob: "DOB",
+  anpr: "ANPR",
+  nfc: "NFC",
+  qr: "QR",
+  soa: "SOA",
+  sp: "SP",
+  id: "ID",
+};
+
+export function moduleNameFromRoute(route: {
+  name?: unknown;
+  path?: unknown;
+  params?: Record<string, unknown> | null;
+}): string {
+  const segments = String(route.name ?? "").split("-").filter(Boolean);
+  const params = new Set(Object.keys(route.params ?? {}));
+
+  let i = 0;
+
+  /**
+   * A FIXED FOLDER IN FRONT OF THE CONTEXT PARAMETER IS NOT THE PAGE.
+   *
+   * The site applications are `/:org/:site/...`, so skipping the leading
+   * parameters was enough. The organization application is
+   * `/org/:organization/...` - a literal folder first - and the route NAME
+   * cannot tell that "org" is a folder and not a parameter, so every one of
+   * that application's screens named itself "Org" instead of the page it is.
+   *
+   * The PATH can tell: its first segment is that same word, and the segment
+   * after it is a parameter's VALUE. Checked against the path rather than
+   * assumed, because `/organizations/status/:status` also begins with a
+   * literal - and there "Organizations Status" is the right page name, its
+   * second path segment being the folder `status` and not the parameter's
+   * value.
+   */
+  const values = new Set(
+    Object.values(route.params ?? {})
+      .flat()
+      .map((v) => String(v))
+      .filter(Boolean)
+  );
+  const pathParts = String(route.path ?? "").split("/").filter(Boolean);
+
+  if (
+    segments.length > 1 &&
+    !params.has(segments[0]) &&
+    pathParts[0] === segments[0] &&
+    values.has(String(pathParts[1] ?? ""))
+  ) {
+    i++;
+  }
+
+  /**
+   * Leading parameter segments (`org`, `site`) are skipped and the name stops
+   * at the first one that follows, so a detail route (`...-feedbacks-id`) and
+   * a status route (`...-members-status`) both name their module rather than
+   * their argument.
+   */
+  while (i < segments.length && params.has(segments[i])) i++;
+
+  const words: string[] = [];
+  while (i < segments.length && !params.has(segments[i])) words.push(segments[i++]);
+
+  return words
+    .map((w) => ACRONYMS[w] ?? w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}

package/utils/dashboard.test.ts

@@ -0,0 +1,118 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { buildWorkOrderStatus } from "./dashboard.ts";
+
+/**
+ * THE DEFECT THIS FILE EXISTS FOR.
+ *
+ * The Property Management "Work Order Status" panel read
+ * `workOrderStatusSummary` - a key no endpoint returns - and fell through to
+ * the `openWorkOrder` KPI metric, which carries no `completed` field. So
+ * Completed read 0 on every site on every day, and Pending was silently
+ * recomputed as (open work orders - in progress) instead of read.
+ *
+ * The shape below is the one `new-dashboard.repo.ts` actually sends.
+ */
+test("the server's breakdown is read, not recomputed", () => {
+  const rows = buildWorkOrderStatus({
+    pending: 20,
+    inProgress: 12,
+    completed: 55,
+  });
+
+  assert.deepEqual(
+    rows.map((r) => [r.label, r.value]),
+    [
+      ["Completed", 55],
+      ["In Progress", 12],
+      ["Pending", 20],
+    ]
+  );
+});
+
+/**
+ * The exact regression. Before the fix this same input drew
+ * Completed 0 / In Progress 12 / Pending 28.
+ */
+test("Completed is never zero when the server says it is not", () => {
+  const completed = buildWorkOrderStatus({
+    pending: 20,
+    inProgress: 12,
+    completed: 55,
+  }).find((r) => r.label === "Completed");
+
+  assert.equal(completed?.value, 55);
+});
+
+/**
+ * The bars are share-of-largest-bucket, so the biggest is always full width
+ * and the rest are proportional to it. This is the widths the panel draws.
+ */
+test("each bar is its share of the largest bucket", () => {
+  const rows = buildWorkOrderStatus({ pending: 25, inProgress: 50, completed: 100 });
+
+  assert.deepEqual(
+    rows.map((r) => r.percent),
+    [100, 50, 25]
+  );
+});
+
+/** Three empty buckets must draw three empty bars, not divide by zero. */
+test("an all-zero breakdown does not divide by zero", () => {
+  const rows = buildWorkOrderStatus({ pending: 0, inProgress: 0, completed: 0 });
+
+  assert.equal(rows.length, 3);
+  for (const row of rows) {
+    assert.equal(row.value, 0);
+    assert.equal(row.percent, 0, row.label);
+    assert.ok(Number.isFinite(row.percent), row.label);
+  }
+});
+
+/** A partial payload is read for what it has and zeroed for what it does not. */
+test("missing buckets read as zero rather than undefined", () => {
+  const rows = buildWorkOrderStatus({ completed: 7 });
+
+  assert.deepEqual(
+    rows.map((r) => r.value),
+    [7, 0, 0]
+  );
+});
+
+/**
+ * NO FALLBACK, DELIBERATELY. When the breakdown is absent there is nothing
+ * honest to draw, so the panel must show its empty state - not bars built out
+ * of a different metric. An empty array is what triggers that.
+ */
+test("no breakdown means no bars, never invented ones", () => {
+  assert.deepEqual(buildWorkOrderStatus(undefined), []);
+  assert.deepEqual(buildWorkOrderStatus(null), []);
+  assert.deepEqual(buildWorkOrderStatus(42 as never), []);
+  assert.deepEqual(buildWorkOrderStatus("55" as never), []);
+});
+
+/**
+ * The tone is a token NAME, not a colour. The template writes `var(--<tone>)`,
+ * so a tone that is not a real token silently paints nothing.
+ */
+test("every row carries a real design token name", () => {
+  const rows = buildWorkOrderStatus({ pending: 1, inProgress: 2, completed: 3 });
+
+  assert.deepEqual(
+    rows.map((r) => r.tone),
+    ["ok", "err", "warn"]
+  );
+});
+
+/**
+ * The buckets are the whole of the server's status report - it folds every
+ * unrecognised status into `pending` rather than dropping it - so nothing the
+ * server counted goes missing on the way to the screen.
+ */
+test("the three buckets account for the whole breakdown", () => {
+  const src = { pending: 20, inProgress: 12, completed: 55 };
+  const total = buildWorkOrderStatus(src).reduce((sum, r) => sum + r.value, 0);
+
+  assert.equal(total, src.pending + src.inProgress + src.completed);
+});

package/utils/dashboard.ts

@@ -0,0 +1,53 @@
+/**
+ * Dashboard arithmetic that is worth testing on its own.
+ *
+ * `DashboardMain.vue` is 4,800 lines of template and wiring, and none of it is
+ * reachable from `node --test`. The one piece with real arithmetic in it - the
+ * work-order status breakdown - lives here instead, so the defect that made
+ * "Completed" read zero on every Property Management dashboard has a test that
+ * fails if it ever comes back.
+ */
+
+export type TWorkOrderStatusSource = {
+  pending?: number;
+  inProgress?: number;
+  completed?: number;
+} | null | undefined;
+
+export type TWorkOrderStatusRow = {
+  label: string;
+  value: number;
+  /** Share of the largest bucket, 0-100 - the bar's width. */
+  percent: number;
+  /** A design token name, not a colour: the caller writes `var(--<tone>)`. */
+  tone: "ok" | "err" | "warn";
+};
+
+/**
+ * The three status bars, from the breakdown the server sends as
+ * `workOrderStatus` (new-dashboard.repo.ts, property branch).
+ *
+ * NO FALLBACK. The screen used to read `workOrderStatusSummary` - a key no
+ * endpoint returns - and fall through to the `openWorkOrder` KPI metric, which
+ * carries no `completed` field: Completed was therefore ALWAYS 0 and Pending
+ * was silently recomputed as (open work orders - in progress) instead of read.
+ * Without the real breakdown there is nothing honest to draw, so this returns
+ * an empty list and the panel shows its empty state.
+ */
+export function buildWorkOrderStatus(
+  src: TWorkOrderStatusSource
+): TWorkOrderStatusRow[] {
+  if (!src || typeof src !== "object") return [];
+
+  const completed = Number(src.completed ?? 0);
+  const inProgress = Number(src.inProgress ?? 0);
+  const pending = Number(src.pending ?? 0);
+  // `1` floors the divisor: three empty buckets must not divide by zero.
+  const max = Math.max(completed, inProgress, pending, 1);
+
+  return [
+    { label: "Completed", value: completed, percent: (completed / max) * 100, tone: "ok" },
+    { label: "In Progress", value: inProgress, percent: (inProgress / max) * 100, tone: "err" },
+    { label: "Pending", value: pending, percent: (pending / max) * 100, tone: "warn" },
+  ];
+}

package/utils/theme-aa-ledger.ts

@@ -76,9 +76,15 @@ export const LIGHT_PAIRS: Array<{
   bg: string;
   need: number;
 }> = [
-  { what: "muted on a card (table header text, sub-lines)", fg: L.muted, bg: L.card, need: 4.5 },
+  { what: "muted on a card (KPI sub-lines, field labels)", fg: L.muted, bg: L.card, need: 4.5 },
   { what: "muted on the page background", fg: L.muted, bg: L.bg, need: 4.5 },
-  { what: "muted on a table header band", fg: L.muted, bg: thead, need: 4.5 },
+  /*
+   * `muted on a table header band` used to sit here at 3.10:1. `.table-card
+   * thead th` now takes `--text2` (9.22:1 light / 9.57:1 dark), and nothing
+   * else paints `--muted` on a `--thead` band - `.table-card__group`'s label
+   * is Vuetify's `text-medium-emphasis`. The pair no longer occurs, so it is
+   * no longer carried as accepted debt.
+   */
   { what: "muted on the sidebar", fg: L.muted, bg: L.sidebar, need: 4.5 },
   { what: "muted on a disabled control's hover fill", fg: L.muted, bg: hoverOnBg, need: 4.5 },
   { what: "ok label on its own chip", fg: L.ok, bg: chip.ok, need: 4.5 },
@@ -115,7 +121,7 @@ export const DARK_PAIRS = () => {
   return [
     { what: "muted on a card", fg: D.muted, bg: D.card, need: 4.5 },
     { what: "muted on the page background", fg: D.muted, bg: D.bg, need: 4.5 },
-    { what: "muted on a table header band", fg: D.muted, bg: dthead, need: 4.5 },
+    { what: "muted on a --thead band (the tint itself, no longer the header text)", fg: D.muted, bg: dthead, need: 4.5 },
     { what: "muted on the sidebar", fg: D.muted, bg: D.sidebar, need: 4.5 },
     { what: "text on a card", fg: D.text, bg: D.card, need: 4.5 },
     { what: "text2 on a card", fg: D.text2, bg: D.card, need: 4.5 },

package/utils/theme.test.ts

@@ -1,4 +1,5 @@
 import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
 import { test } from "node:test";
 
 import { DARK_THEME, LIGHT_THEME, PALETTE, type TPalette } from "./theme.ts";
@@ -505,9 +506,8 @@ test("the light palette is the handoff's, value for value", () => {
  */
 test("the light theme's sub-AA pairs measure exactly what the ledger says", () => {
   const EXPECTED: Record<string, number> = {
-    "muted on a card (table header text, sub-lines)": 3.24,
+    "muted on a card (KPI sub-lines, field labels)": 3.24,
     "muted on the page background": 2.99,
-    "muted on a table header band": 3.1,
     "muted on the sidebar": 3.13,
     "muted on a disabled control's hover fill": 2.71,
     "ok label on its own chip": 4.57,
@@ -548,8 +548,8 @@ test("the light theme's sub-AA pairs measure exactly what the ledger says", () =
   const failing = measured.filter((r) => !r.passes).length;
   assert.equal(
     failing,
-    8,
-    `${failing} light pairs are below AA; the recorded, accepted count is 8. ` +
+    7,
+    `${failing} light pairs are below AA; the recorded, accepted count is 7. ` +
       "If this moved, the owner's design-fidelity decision needs re-stating."
   );
 });
@@ -560,6 +560,90 @@ test("the dark theme has no sub-AA pairs at all", () => {
   assert.deepEqual(bad, [], "dark mode was exact AND compliant - keep it that way");
 });
 
+/* ------------------------------------------------------------------ */
+/* The two contrast fixes QA drove, asserted at the token level AND at  */
+/* the stylesheet that wires them.                                     */
+/* ------------------------------------------------------------------ */
+
+/**
+ * A native `<select>`'s option list is painted by the browser. With no
+ * background of its own the option keeps the theme's ink over whatever the
+ * browser paints - white on Windows/Chrome - which is 1.14:1 in dark mode.
+ * The rule gives it `--card`/`--text`, the same pair the themed popover uses.
+ */
+test("a native option's own fill carries the theme ink in both themes", () => {
+  for (const [name, p] of [["light", PALETTE.light], ["dark", PALETTE.dark]] as const) {
+    assert.ok(
+      contrast(p.text, p.card) >= 4.5,
+      `${name}: option ink on the card fill is ${contrast(p.text, p.card).toFixed(2)}:1`
+    );
+  }
+
+  // What the defect measured, so the number stays on the record.
+  assert.equal(Number(contrast(PALETTE.dark.text, "#ffffff").toFixed(2)), 1.14);
+});
+
+/**
+ * The table header. `--muted` measured 3.10:1 on the header band in light -
+ * below AA and reported by two apps' QA. `--text2` clears AA in both themes
+ * while staying clearly below the primary ink the data rows use, so the
+ * header still reads as secondary to the data.
+ */
+test("the table header clears AA and still reads below the data", () => {
+  for (const [name, p, wash] of [
+    ["light", PALETTE.light, "#14161a"],
+    ["dark", PALETTE.dark, "#ffffff"],
+  ] as const) {
+    const band = over(wash, p.card, 0.02);
+    const header = contrast(p.text2, band);
+    const data = contrast(p.text, band);
+
+    assert.ok(header >= 4.5, `${name}: header is ${header.toFixed(2)}:1, below AA`);
+    assert.ok(
+      header < data,
+      `${name}: the header (${header.toFixed(2)}:1) must stay below the data ` +
+        `(${data.toFixed(2)}:1) or it stops reading as secondary`
+    );
+    assert.ok(
+      contrast(p.muted, band) < header,
+      `${name}: --text2 must be an improvement on the --muted it replaced`
+    );
+  }
+});
+
+/**
+ * The ratios above are the tokens'. They say nothing about whether the CSS
+ * still ASKS for them - a deleted rule would leave every number here passing.
+ * These two assertions are the wiring. Neither can measure a real computed
+ * style: that needs a browser, and the measured evidence for it is in the PR.
+ */
+test("the stylesheets still ask for the tokens the two fixes chose", () => {
+  const css = (f: string) =>
+    readFileSync(new URL(`../assets/css/${f}`, import.meta.url), "utf8")
+      .replace(/\/\*[\s\S]*?\*\//g, "");
+
+  const primitives = css("primitives.css");
+  const optionRule = primitives.slice(primitives.indexOf("select option {"));
+  assert.ok(
+    primitives.includes("select option {"),
+    "the native <option> fill rule is gone - dark mode goes back to 1.14:1"
+  );
+  const optionBody = optionRule.slice(0, optionRule.indexOf("}"));
+  assert.ok(
+    optionBody.includes("background-color: var(--card)"),
+    "the option lost its own fill, which is the whole defect"
+  );
+  assert.ok(optionBody.includes("color: var(--text)"), "the option lost its ink");
+
+  const screens = css("screens.css");
+  const header = screens.slice(screens.indexOf(".table-card thead th {"));
+  const headerBody = header.slice(0, header.indexOf("}"));
+  assert.ok(
+    headerBody.includes("color: var(--text2) !important"),
+    "the table header is back on a token that does not clear AA in light"
+  );
+});
+
 /**
  * THE BRIDGE. Every design token in `assets/css/tokens.css` is an alias onto a
  * `--v-theme-*`, so a token whose Vuetify colour does not exist resolves to