@7365admin1/layer-common 3.2.2-staging.120 → 3.2.2-staging.122

package/components/Nfc/NFCTagForm.vue

@@ -64,6 +64,10 @@
         </v-col>
 
         <v-col cols="6" class="pa-0">
+          <!-- Was `color="black"`: a fixed slab that stayed black on the dark
+               card. `primary-button` is the theme's FILL token, and its pair
+               `on-primary-button` supplies the white label - unlike `primary`,
+               which is a FOREGROUND here (links, icons, text buttons). -->
           <v-btn
             block
             tile
@@ -71,7 +75,7 @@
             class="text-none"
             size="large"
             height="48"
-            color="black"
+            color="primary-button"
             @click="submit"
             :loading="loading"
             :disabled="!valid || loading || !hasChanges"

package/components/StatusChip.vue

@@ -19,6 +19,22 @@
          word - a padlock on "Closed - View Only" - so adopting the design's
          pill does not quietly drop it. -->
     <slot>{{ label ?? status }}</slot>
+    <!--
+      The remove control. NEW design, approved by the owner on 2026-08-14 - the
+      handoff draws no removable chip. It is an affordance ON the existing pill,
+      not a second shape, so a removable "KEY-309" and a read-only "Issued" stay
+      visibly the same family: same 999px pill, same 4px 10px, same 12px/700,
+      same 24px height. A chip that cannot be removed is byte-for-byte unchanged.
+    -->
+    <button
+      v-if="removable"
+      type="button"
+      class="status-chip__x"
+      :aria-label="removeLabel || `Remove ${label ?? status}`"
+      @click="emit('remove')"
+    >
+      <v-icon icon="mdi-close" :size="12" />
+    </button>
   </span>
 </template>
 
@@ -47,8 +63,19 @@ const props = defineProps({
     type: String as PropType<"ok" | "warn" | "err" | "info" | "neutral" | "">,
     default: "",
   },
+  /** Draws the × and emits `remove` when it is pressed. */
+  removable: { type: Boolean, default: false },
+  /**
+   * The × 's accessible name. Defaults to `Remove <the printed label>`, which
+   * is right for an identifier chip ("Remove KEY-309"); give it explicitly
+   * whenever the printed text alone would not tell a screen-reader user what
+   * is about to be taken away.
+   */
+  removeLabel: { type: String, default: "" },
 });
 
+const emit = defineEmits<{ (e: "remove"): void }>();
+
 const toneClass = computed(() =>
   props.tone ? `tone-${props.tone}` : statusToneClass(props.status)
 );
@@ -83,6 +110,42 @@ const toneClass = computed(() =>
   font-size: var(--fs-chip);
 }
 
+/*
+ * A 12px glyph needs a 24px target to stay pressable at 360px, but the chip is
+ * only 24px tall - so the hit area is INSET into the pill's own padding rather
+ * than added to it. The negative margin is what keeps the × from making a
+ * removable chip taller than the read-only one beside it.
+ */
+.status-chip__x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -6px -6px -6px 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--r-pill);
+  background: transparent;
+  /* Chips read as labels first and controls second, so the × sits back from
+     the word until it is reached for. */
+  color: inherit;
+  opacity: 0.62;
+  cursor: pointer;
+  transition: opacity var(--motion) ease, background var(--motion) ease;
+}
+
+.status-chip__x:hover,
+.status-chip__x:focus-visible {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.v-theme--dark .status-chip__x:hover,
+.v-theme--dark .status-chip__x:focus-visible {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .status-chip__dot {
   width: 6px;
   height: 6px;

package/components/TableMain.vue

@@ -155,8 +155,14 @@
         </div>
 
         <!-- Data Table -->
+        <!--
+          `tableHeaders`, not `headers`, and the two are the SAME ARRAY unless a
+          caller has opted into fixed proportions by putting `weight` on a
+          column. See `columnsAreWeighted` below.
+        -->
         <v-data-table
-          :headers="headers"
+          :class="columnsAreWeighted ? 'table-card__fixed' : undefined"
+          :headers="tableHeaders"
           :items="items"
           :item-value="itemValue"
           :items-per-page="itemsPerPage"
@@ -257,6 +263,49 @@ const props = defineProps({
   },
 });
 
+/**
+ * THE DESIGN'S FIXED COLUMN PROPORTIONS, AND WHY THEY ARE OPT-IN.
+ *
+ * Every table in the prototype is a CSS grid with an explicit, per-table
+ * `grid-template-columns` - `0.9fr 1.5fr 1.7fr 0.8fr 1fr 1.1fr` on Feedbacks,
+ * `2fr 1fr 1fr` on Units, `1.6fr 1fr 1.3fr 1.6fr 48px` on Pass & Key. Those
+ * ratios are a per-screen design decision. Nothing in a caller's `headers`
+ * array carries that information, so this shared component cannot derive them,
+ * and inventing one set of proportions for 21 components and 18 app pages would
+ * be worse than the automatic layout they have now.
+ *
+ * So it is stated, not guessed: a header may carry `weight: 1.5` and this turns
+ * the weights into percentage widths and switches the table to
+ * `table-layout: fixed`, which is what makes a width binding rather than a hint.
+ * A column with NO weight is left exactly as the caller wrote it, so an
+ * existing `width` (an action column pinned at 48px, say) survives untouched
+ * and only the weighted columns share out what is left.
+ *
+ * NO caller changes. With no weights anywhere, `tableHeaders` IS `props.headers`
+ * - the same array reference - and the table renders exactly what it renders
+ * today, automatic widths and all.
+ */
+const columnsAreWeighted = computed(() =>
+  props.headers.some((h) => Number(h?.weight) > 0)
+);
+
+const tableHeaders = computed(() => {
+  if (!columnsAreWeighted.value) return props.headers;
+
+  // Columns with no weight keep whatever width they already had (often none,
+  // e.g. a 48px action column), and only the weighted ones share what is left.
+  const total = props.headers.reduce(
+    (sum, h) => sum + (Number(h?.weight) > 0 ? Number(h.weight) : 0),
+    0
+  );
+
+  return props.headers.map((h) =>
+    Number(h?.weight) > 0
+      ? { ...h, width: `${((Number(h.weight) / total) * 100).toFixed(4)}%` }
+      : h
+  );
+});
+
 const emits = defineEmits([
   "create",
   "scan",

package/components/VisitorManagement.vue

@@ -613,15 +613,21 @@
                 class="d-flex align-center"
               >
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="success"
-                  text="Checkin"
+                <!-- The design's check-in / check-out pair. Was Vuetify's
+                     `color="success"` beside a hardcoded `color="red"` - two
+                     different systems on one field list, and neither of them a
+                     token. `:loading` is dropped rather than re-invented: the
+                     same flag already drives `:disabled`, which is the
+                     precedent set when the scanned-visitor form converted. -->
+                <AppButton
+                  variant="ok"
+                  icon="mdi-check"
+                  class="ml-3"
                   :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
                   @click="handleCheckin(selectedVisitorDataObject)"
-                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
-                />
+                >
+                  Check In
+                </AppButton>
               </span>
               <span
                 v-if="
@@ -633,14 +639,15 @@
                 class="d-flex align-center"
               >
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="red"
-                  text="Checkout"
+                <AppButton
+                  variant="err"
+                  icon="mdi-close"
+                  class="ml-3"
                   :disabled="loading.checkingOut"
                   @click="handleCheckout(selectedVisitorId as string)"
-                />
+                >
+                  Check Out
+                </AppButton>
               </span>
 
               <span

package/components/VisitorsReportPreview.vue

@@ -335,7 +335,10 @@ onMounted(() => {
 }
 
 .snapshot-label--out {
-    color: var(--error);
+    /* Was `var(--error)`, which is not a token here - the name is `--err`. An
+       undefined custom property invalidates the declaration silently, so the
+       label inherited instead of turning red. */
+    color: var(--err);
 }
 
 :deep(.v-card) {

package/package.json

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

package/tools/render-harness/baselines.json

@@ -18,5 +18,100 @@
     "els": 3,
     "textChars": 2,
     "recordedFrom": "0642279"
+  },
+  "AccessCardAssignToUnitForm": {
+    "els": 177,
+    "textChars": 131,
+    "recordedFrom": "178ebf0"
+  },
+  "AccessCardReplaceForm": {
+    "els": 68,
+    "textChars": 83,
+    "recordedFrom": "178ebf0"
+  },
+  "AddEqupmentForm": {
+    "els": 90,
+    "textChars": 99,
+    "recordedFrom": "178ebf0"
+  },
+  "BuildingForm": {
+    "els": 126,
+    "textChars": 69,
+    "recordedFrom": "178ebf0"
+  },
+  "BulletinBoardForm": {
+    "els": 172,
+    "textChars": 165,
+    "recordedFrom": "178ebf0"
+  },
+  "CameraForm": {
+    "els": 127,
+    "textChars": 80,
+    "recordedFrom": "178ebf0"
+  },
+  "DocumentForm": {
+    "els": 52,
+    "textChars": 57,
+    "recordedFrom": "178ebf0"
+  },
+  "InvitationClientForm": {
+    "els": 101,
+    "textChars": 47,
+    "recordedFrom": "178ebf0"
+  },
+  "InvitationForm": {
+    "els": 86,
+    "textChars": 43,
+    "recordedFrom": "178ebf0"
+  },
+  "ServiceProviderFormCreate": {
+    "els": 51,
+    "textChars": 38,
+    "recordedFrom": "178ebf0"
+  },
+  "AcceptDialog": {
+    "els": 24,
+    "textChars": 106,
+    "recordedFrom": "178ebf0"
+  },
+  "Card/DeleteConfirmation": {
+    "els": 21,
+    "textChars": 129,
+    "recordedFrom": "178ebf0"
+  },
+  "Dialog/DeleteConfirmation": {
+    "els": 21,
+    "textChars": 129,
+    "recordedFrom": "178ebf0"
+  },
+  "HidAccessLogDashboard": {
+    "els": 172,
+    "textChars": 437,
+    "recordedFrom": "178ebf0"
+  },
+  "HidIntercomManagement": {
+    "els": 148,
+    "textChars": 167,
+    "recordedFrom": "178ebf0"
+  },
+  "HidUserEnrollment": {
+    "els": 142,
+    "textChars": 287,
+    "recordedFrom": "178ebf0"
+  },
+  "HidReaderManagement": {
+    "els": 112,
+    "textChars": 377,
+    "recordedFrom": "178ebf0"
+  },
+  "HidQrCodeConfiguration": {
+    "els": 106,
+    "textChars": 453,
+    "recordedFrom": "178ebf0"
+  },
+  "HidServiceSettingsPanel": {
+    "els": 18,
+    "textChars": 164,
+    "recordedFrom": "178ebf0"
   }
 }

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

@@ -78,6 +78,10 @@ if (-not (Test-Path "$fork\vite.config.mjs")) {
 # The hardened runner lives in the repo, next to this script, so a fork always
 # gets the CURRENT one rather than whatever the canonical harness was carrying.
 Copy-Item (Join-Path $PSScriptRoot "render-check.mjs") -Destination $fork -Force
+# `probe.mjs` is imported by the runner, so a fork without it dies on
+# ERR_MODULE_NOT_FOUND before it measures anything. It was missing from this
+# list, which every fork made before now had to work around by hand.
+Copy-Item (Join-Path $PSScriptRoot "probe.mjs") -Destination $fork -Force
 Copy-Item (Join-Path $PSScriptRoot "baselines.json") -Destination $fork -Force -ErrorAction SilentlyContinue
 
 # A junctioned `node_modules` SHARES `node_modules/.vite` with the harness it

package/utils/status.test.ts

@@ -62,6 +62,39 @@ test("the product's own status words keep the tone the screens already gave them
   }
 });
 
+/**
+ * HID enrolment. These two are the whole point of the Status column on
+ * `HidUserEnrollment` - if they were left unlisted they would BOTH be neutral
+ * and the column would stop distinguishing anything, so they are pinned.
+ */
+test("Mapped and Unmapped keep the tones the enrolment screen already gave them", () => {
+  assert.equal(statusTone("Mapped"), "ok");
+  assert.equal(statusTone("Unmapped"), "warn");
+});
+
+/**
+ * HID intercom SIP state. "Disabled" and "Not connected" must stay NEUTRAL -
+ * painting an intentionally-off intercom red would read as a fault.
+ */
+/**
+ * HID access authorization, landing on `staging` in b0667a7. Pinned before that
+ * merge so the words cannot arrive and quietly render neutral - the difference
+ * between a granted and a denied door is the whole point of the column.
+ */
+test("HID authorization states are known to the shared map before b0667a7 merges", () => {
+  assert.equal(statusTone("Authorized"), "ok");
+  assert.equal(statusTone("Not Authorized"), "err");
+  assert.equal(statusTone("Unknown"), "warn");
+});
+
+test("intercom SIP states keep the tones the intercom screen already gave them", () => {
+  assert.equal(statusTone("Connected"), "ok");
+  assert.equal(statusTone("Connecting"), "warn");
+  assert.equal(statusTone("Not connected"), "neutral");
+  assert.equal(statusTone("Disabled"), "neutral");
+  assert.equal(statusTone("Failed"), "err");
+});
+
 /**
  * The one place the handoff and the old per-screen colour disagree: `Open` was
  * grey on the cleaning schedules and the design names it `ok`. Pinned so the

package/utils/status.ts

@@ -70,6 +70,42 @@ const TONES: Record<string, TStatusTone> = {
   expired: "neutral", // was `grey`
 
   "awaiting approval": "warn", // a waiting state, like Pending
+
+  /**
+   * HID enrolment: is this reader identity tied to a real person record yet?
+   * Same rule as the Phase 4 block above - not a new opinion, but the tone
+   * `HidUserEnrollment` already painted these two words, moved into the one
+   * list. Left unlisted they would BOTH come out neutral, which would erase
+   * the only distinction the column exists to draw.
+   */
+  mapped: "ok", // was `status-success`, #1b7f3a on #dff7e7
+  unmapped: "warn", // was `status-warning`, #9a6700 on #fff0cc
+
+  /**
+   * HID intercom SIP state, from `HidIntercomManagement`'s own
+   * `getStatusClass`. Same rule again: the tone the screen already gave the
+   * word, moved into the one list. "Disabled" and "Not connected" are NOT
+   * failures - the operator turned SIP off, or never set it up - so they stay
+   * neutral, which is what `status-muted` painted them.
+   */
+  /**
+   * HID access authorization. These arrive with `b0667a7` on `staging`
+   * ("Call the Authorized status API from Amico via Access Logs"), which
+   * replaces the Access Logs' Mapped/Unmapped column with these three words.
+   * Listed here AHEAD of that merge so the shared chip already knows them -
+   * unlisted they would all come out neutral, silently erasing the difference
+   * between a granted and a denied door. Tones are that commit's own:
+   * `mapped-chip` green, `unmapped-chip` red, `unknown-chip` amber.
+   */
+  authorized: "ok",
+  "not authorized": "err",
+  unknown: "warn",
+
+  connected: "ok", // was `status-success`
+  connecting: "warn", // was `status-warning`, the fall-through case
+  "not connected": "neutral", // was `status-muted`
+  disabled: "neutral", // was `status-muted`
+  failed: "err", // was `status-error`
 };
 
 /**

package/utils/theme-aa-ledger.ts

@@ -0,0 +1,142 @@
+/**
+ * THE LIGHT THEME'S KNOWN AA FAILURES, MEASURED.
+ *
+ * The owner's 2026-08-14 decision is 100% design fidelity over WCAG AA, so the
+ * six light values that had been darkened are back on the handoff and the light
+ * theme no longer clears 4.5:1 everywhere. This file is the ledger of exactly
+ * what that costs: every pair, its measured ratio, and what it needs.
+ *
+ * It is data, not prose - `theme.test.ts` asserts each entry still measures what
+ * it says, so a later change that drifts a colour (in either direction) fails
+ * the build and has to come back here and say so.
+ *
+ * `run` prints the table: `node --experimental-strip-types utils/theme-aa-ledger.ts`
+ */
+import { PALETTE, LIGHT_THEME, DARK_THEME } from "./theme.ts";
+
+const luminance = (hex: string): number => {
+  const c = [0, 2, 4]
+    .map((i) => parseInt(hex.slice(1 + i, 3 + i), 16) / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+
+export const contrast = (a: string, b: string): number => {
+  const [x, y] = [luminance(a), luminance(b)];
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+};
+
+export const over = (fg: string, bg: string, alpha: number): string =>
+  "#" +
+  [0, 2, 4]
+    .map((i) =>
+      Math.round(
+        parseInt(fg.slice(1 + i, 3 + i), 16) * alpha +
+          parseInt(bg.slice(1 + i, 3 + i), 16) * (1 - alpha),
+      )
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("");
+
+const L = PALETTE.light;
+
+/** `--thead` is a 2% ink wash over the card, not a colour of its own. */
+export const thead = over("#14161a", L.card, 0.02);
+
+/**
+ * `--hover` is a 5% ink wash. On the page background it is the fill a DISABLED
+ * control sits on (the HID reader identification methods, greyed until Online
+ * Mode is on), so `--muted` label on `--hover` is a pair a person actually reads.
+ */
+export const hoverOnBg = over("#14161a", L.bg, 0.05);
+
+
+/** The soft chip backgrounds, exactly as the design states them. */
+export const chip = {
+  ok: over("#0f8a62", L.card, 0.1),
+  warn: over("#be8c19", L.card, 0.13),
+  err: over("#cf4b4b", L.card, 0.1),
+  info: over("#3b6fd4", L.card, 0.1),
+};
+
+/** `--accent-soft` is transparent, so it takes the colour of what is behind it. */
+export const accentSoft = {
+  sidebar: over(L.accent, L.sidebar, 0.12),
+  card: over(L.accent, L.card, 0.12),
+};
+
+/**
+ * Every LIGHT pair a person actually reads. `need` is 4.5 for body text and 3
+ * for large text (>=18.66px, or >=14px at 700+) and for non-text edges.
+ */
+export const LIGHT_PAIRS: Array<{
+  what: string;
+  fg: string;
+  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 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 },
+  { 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 },
+  { what: "warn label on its own chip", fg: L.warn, bg: chip.warn, need: 4.5 },
+  { what: "err label on its own chip", fg: L.err, bg: chip.err, need: 4.5 },
+  { what: "info label on its own chip", fg: L.info, bg: chip.info, need: 4.5 },
+  { what: "ok as plain text on a card", fg: L.ok, bg: L.card, need: 4.5 },
+  { what: "warn as plain text on a card", fg: L.warn, bg: L.card, need: 4.5 },
+  { what: "err as plain text on a card (the Logout row)", fg: L.err, bg: L.card, need: 4.5 },
+  { what: "info as plain text on a card", fg: L.info, bg: L.card, need: 4.5 },
+  { what: "accent-text as a link on a card", fg: L.accentText, bg: L.card, need: 4.5 },
+  { what: "accent-text on accent-soft over the sidebar (active nav item)", fg: L.accentText, bg: accentSoft.sidebar, need: 4.5 },
+  { what: "accent-text on accent-soft over a card (active tab, avatar initials)", fg: L.accentText, bg: accentSoft.card, need: 4.5 },
+  { what: "white on the filled success colour", fg: "#ffffff", bg: L.ok, need: 4.5 },
+  { what: "white on the filled warning colour", fg: "#ffffff", bg: L.warn, need: 4.5 },
+  { what: "white on the filled error colour", fg: "#ffffff", bg: L.err, need: 4.5 },
+  { what: "white on the filled info colour", fg: "#ffffff", bg: L.info, need: 4.5 },
+  { what: "white on primary-button (accent-strong) - NOT reverted", fg: "#ffffff", bg: L.accentStrong, need: 4.5 },
+  { what: "text on a card", fg: L.text, bg: L.card, need: 4.5 },
+  { what: "text2 on a card", fg: L.text2, bg: L.card, need: 4.5 },
+];
+
+export const measure = () =>
+  LIGHT_PAIRS.map((p) => ({
+    ...p,
+    ratio: Math.round(contrast(p.fg, p.bg) * 100) / 100,
+    passes: contrast(p.fg, p.bg) >= p.need,
+  }));
+
+/** The dark theme was exact as handed over and clears AA - this proves it still does. */
+export const DARK_PAIRS = () => {
+  const D = PALETTE.dark;
+  const dthead = over("#ffffff", D.card, 0.02);
+  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 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 },
+    { what: "ok on its chip", fg: D.ok, bg: over("#41c795", D.card, 0.12), need: 4.5 },
+    { what: "warn on its chip", fg: D.warn, bg: over("#dcaf4e", D.card, 0.13), need: 4.5 },
+    { what: "err on its chip", fg: D.err, bg: over("#e57373", D.card, 0.12), need: 4.5 },
+    { what: "info on its chip", fg: D.info, bg: over("#7da6ec", D.card, 0.12), need: 4.5 },
+    { what: "accent-text on accent-soft over the sidebar", fg: D.accentText, bg: over(D.accent, D.sidebar, 0.12), need: 4.5 },
+    { what: "accent-text on accent-soft over a card", fg: D.accentText, bg: over(D.accent, D.card, 0.12), need: 4.5 },
+  ].map((p) => ({ ...p, ratio: Math.round(contrast(p.fg, p.bg) * 100) / 100, passes: contrast(p.fg, p.bg) >= p.need }));
+};
+
+if (process.argv[1]?.endsWith("theme-aa-ledger.ts")) {
+  const row = (r: { what: string; fg: string; bg: string; ratio: number; need: number; passes: boolean }) =>
+    `${r.passes ? "PASS" : "FAIL"}  ${String(r.ratio).padStart(5)}:1 / ${r.need}  ${r.fg} on ${r.bg}  ${r.what}`;
+  console.log("LIGHT");
+  for (const r of measure()) console.log("  " + row(r));
+  console.log("\nDARK");
+  for (const r of DARK_PAIRS()) console.log("  " + row(r));
+  const f = measure().filter((r) => !r.passes).length;
+  console.log(`\n${f} of ${LIGHT_PAIRS.length} light pairs below AA; ${DARK_PAIRS().filter((r) => !r.passes).length} dark.`);
+  void LIGHT_THEME;
+  void DARK_THEME;
+}