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

package/assets/css/primitives.css

@@ -92,6 +92,45 @@
   font-family: var(--font-sans, Roboto, sans-serif);
 }
 
+/* ------------------------------------------------------------------ */
+/* The icon face.                                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws every icon with Google's `Material Symbols Outlined`
+ * variable font, requested in `nuxt.config.ts` alongside Manrope. The icon
+ * set in `plugins/vuetify.ts` turns each `mdi-*` name into that font's
+ * ligature and puts this class on the element; this rule is what makes the
+ * ligature resolve.
+ *
+ * One class, no `!important`. `.v-icon` already gives us `font-feature-
+ * settings: "liga"`, `letter-spacing: normal`, `line-height: 1` and the 1em
+ * box, and Vuetify never sets `font-family` on it - the old family arrived
+ * through `.mdi:before`, which we no longer emit. Only `text-transform` has
+ * to be stated: `.v-btn` uppercases its contents, and an uppercased "close"
+ * matches no ligature, so the icon would render as the word.
+ */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-variation-settings:
+    "FILL" 0,
+    "GRAD" 0,
+    "opsz" 24;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* mdi's spin modifier, kept working now the glyph is not a `:before`.
+   `@keyframes mdi-spin` still comes from `@mdi/font`, which stays loaded so
+   that any icon name without a mapping keeps drawing its old glyph. */
+.material-symbols-outlined.mdi-spin {
+  animation: mdi-spin 2s infinite linear;
+}
+
 /* ------------------------------------------------------------------ */
 /* PageHeader - the row every screen opens with.                       */
 /* ------------------------------------------------------------------ */

package/nuxt.config.ts

@@ -20,6 +20,11 @@ export default defineNuxtConfig({
    * leave the whole product looking half-migrated; each phase adopts the token
    * as it rebuilds its own surfaces. Browsers do not download a webfont no
    * element uses, so until then this costs one small CSS request.
+   *
+   * The second family is the redesign's icon set. Its axis ranges are the
+   * handoff's, character for character (`opsz,wght,FILL,GRAD@20..48,300..700,
+   * 0..1,0`) - do not widen or narrow them without a design change to point
+   * at. `plugins/vuetify.ts` and `assets/css/primitives.css` do the applying.
    */
   app: {
     head: {
@@ -32,7 +37,7 @@ export default defineNuxtConfig({
         },
         {
           rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+          href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..700,0..1,0&display=swap",
         },
       ],
     },

package/package.json

@@ -2,9 +2,30 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.122",
+  "version": "3.2.2-staging.123",
   "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.",
+  "files": [
+    "CHANGELOG.md",
+    "app.vue",
+    "error.vue",
+    "nuxt.config.ts",
+    "tsconfig.json",
+    ".nuxtrc",
+    "assets",
+    "components",
+    "composables",
+    "constants",
+    "layouts",
+    "middleware",
+    "pages",
+    "plugins",
+    "public",
+    "services",
+    "types",
+    "utils"
+  ],
   "publishConfig": {
     "access": "public"
   },

package/plugins/vuetify.ts

@@ -43,6 +43,7 @@ import {
 import "vuetify-pro-tiptap/style.css";
 
 import { LIGHT_THEME, DARK_THEME } from "../utils/theme";
+import { MDI_TO_SYMBOL } from "../utils/materialSymbols";
 import { THEME_COOKIE } from "../composables/useThemePreference";
 import type { CookieOptions } from "#app";
 
@@ -56,6 +57,41 @@ import "../assets/css/shell.css";
 import "../assets/css/screens.css";
 import "../assets/css/primitives.css";
 
+/**
+ * THE ICON SET.
+ *
+ * The design handoff draws icons with Google's `Material Symbols Outlined`
+ * variable font - the stylesheet for it is already requested in
+ * `nuxt.config.ts` - while the product asks for Material Design Icons names
+ * (`mdi-close`, `mdi-magnify`, ...) in roughly 680 places here and again in
+ * every application. Translating at the icon set means none of those call sites
+ * change: a component still writes `mdi-close`, and this renders the Material
+ * Symbols glyph for it.
+ *
+ * A name with no entry in the table falls through to the previous Iconify
+ * rendering, so an unrecognised icon draws its old glyph instead of a blank
+ * box. `mdi-blank` maps to an empty string on purpose - it is mdi's deliberate
+ * spacer, and `.v-icon` keeps the 1em box.
+ *
+ * `icon` and `tag` are declared props so Vue does not also emit them as
+ * literal attributes; everything else Vuetify passes (the `v-icon` classes,
+ * size, colour, click handling) falls through to the root element untouched.
+ */
+const MaterialSymbol = (props: any) => {
+  // "mdi-loading mdi-spin" - the name first, any mdi modifier classes after it.
+  const [name, ...modifiers] = String(props.icon ?? "").split(/\s+/);
+  const symbol = MDI_TO_SYMBOL[name];
+
+  return symbol === undefined
+    ? h(Icon, { icon: props.icon })
+    : h(
+        props.tag ?? "span",
+        { class: ["material-symbols-outlined", ...modifiers] },
+        symbol,
+      );
+};
+MaterialSymbol.props = ["icon", "tag"];
+
 export default defineNuxtPlugin((app) => {
   /**
    * BOOT ON THE REMEMBERED THEME, DON'T CORRECT IT AFTERWARDS.
@@ -145,7 +181,7 @@ export default defineNuxtPlugin((app) => {
       defaultSet: "iconify",
       sets: {
         iconify: {
-          component: (props: any) => h(Icon, { icon: props.icon }),
+          component: MaterialSymbol,
         },
       },
     },

package/utils/materialSymbols.ts

@@ -0,0 +1,363 @@
+/**
+ * mdi -> Material Symbols Outlined.
+ *
+ * The design handoff draws every icon with Google's variable
+ * `Material Symbols Outlined` font (`opsz,wght,FILL,GRAD@20..48,300..700,0..1,0`),
+ * using the icon's name as the element's text and letting the font's ligature
+ * table turn it into a glyph. The product ships Material Design Icons (`mdi`)
+ * instead - a different, heavier family - so every screen mixes two icon
+ * languages.
+ *
+ * Rather than rewrite ~680 call sites across this package (and again in eleven
+ * applications), the Vuetify icon set in `plugins/vuetify.ts` translates on the
+ * way out: a component still asks for `mdi-close`, this table answers `close`,
+ * and the span renders the Material Symbols glyph. Vuetify's own internal
+ * aliases (`$dropdown`, `$checkboxOn`, `$next`, ...) resolve to `mdi-*` strings
+ * too, so they are listed here as well and convert with everything else.
+ *
+ * Anything NOT in this table falls back to the previous Iconify rendering, so
+ * an unmapped name draws its old icon rather than a blank box.
+ *
+ * Every value below was checked against Google's published codepoint list for
+ * the variable font, so no entry is a name that does not exist.
+ *
+ * Where mdi draws something Material Symbols has no equivalent for, the entry
+ * is marked NEAREST with what was lost. Those are deliberate, not oversights.
+ */
+export const MDI_TO_SYMBOL: Record<string, string> = {
+  // --- navigation & chevrons ---
+  "mdi-chevron-left": "chevron_left",
+  "mdi-chevron-right": "chevron_right",
+  "mdi-chevron-up": "expand_less",
+  "mdi-chevron-down": "expand_more",
+  "mdi-chevron-down-box-outline": "expand_more", // NEAREST: no boxed chevron
+  "mdi-menu": "menu",
+  "mdi-menu-down": "arrow_drop_down",
+  "mdi-menu-right": "arrow_right",
+  "mdi-unfold-more-horizontal": "unfold_more",
+  "mdi-arrow-left": "arrow_back",
+  "mdi-arrow-right": "arrow_forward",
+  "mdi-arrow-up": "arrow_upward",
+  "mdi-arrow-down": "arrow_downward",
+  "mdi-arrow-u-left-top": "undo",
+  "mdi-page-first": "first_page",
+  "mdi-page-last": "last_page",
+  "mdi-open-in-new": "open_in_new",
+  "mdi-swap-horizontal": "swap_horiz",
+  "mdi-drag": "drag_indicator",
+  "mdi-dots-vertical": "more_vert",
+  "mdi-dots-horizontal": "more_horiz",
+
+  // --- actions ---
+  "mdi-close": "close",
+  "mdi-close-circle": "cancel",
+  "mdi-close-circle-outline": "cancel",
+  "mdi-check": "check",
+  "mdi-check-circle": "check_circle",
+  "mdi-check-circle-outline": "check_circle",
+  "mdi-plus": "add",
+  "mdi-minus": "remove",
+  "mdi-minus-box": "indeterminate_check_box",
+  "mdi-refresh": "refresh",
+  "mdi-cached": "cached",
+  "mdi-restore": "restore",
+  "mdi-magnify": "search",
+  "mdi-magnify-close": "search_off",
+  "mdi-pencil": "edit",
+  "mdi-pencil-outline": "edit",
+  "mdi-square-edit-outline": "edit_square",
+  "mdi-delete": "delete",
+  "mdi-delete-outline": "delete",
+  "mdi-trash-outline": "delete",
+  "mdi-trash-can-outline": "delete",
+  "mdi-content-save": "save",
+  "mdi-content-copy": "content_copy",
+  "mdi-download": "download",
+  "mdi-download-outline": "download",
+  "mdi-upload": "upload",
+  "mdi-tray-arrow-up": "file_upload",
+  "mdi-export": "output",
+  "mdi-printer": "print",
+  "mdi-printer-alert": "print_error",
+  "mdi-printer-check": "print", // NEAREST: no printer-with-tick
+  "mdi-draw": "draw",
+  "mdi-tune-variant": "tune",
+  "mdi-cog": "settings",
+  "mdi-cog-outline": "settings",
+  "mdi-backspace": "backspace",
+  "mdi-eyedropper": "colorize",
+  "mdi-palette": "palette",
+  "mdi-sort-alphabetical-ascending": "sort_by_alpha",
+
+  // --- status & feedback ---
+  "mdi-alert": "warning",
+  "mdi-alert-outline": "warning",
+  "mdi-alert-circle": "error",
+  "mdi-alert-circle-outline": "error",
+  "mdi-information": "info",
+  "mdi-information-outline": "info",
+  "mdi-information-symbol": "info",
+  "mdi-help-circle": "help",
+  "mdi-loading": "progress_activity",
+  "mdi-progress-clock": "pending", // NEAREST: no clock-with-progress-arc
+  "mdi-history": "history",
+  "mdi-trending-up": "trending_up",
+  "mdi-flag": "flag",
+  "mdi-flash": "bolt",
+  "mdi-bug": "bug_report",
+  "mdi-bug-outline": "bug_report",
+  "mdi-radar": "radar",
+  "mdi-emoticon-happy-outline": "sentiment_satisfied",
+  "mdi-star": "star",
+  "mdi-star-outline": "star",
+  "mdi-star-half-full": "star_half",
+  "mdi-circle": "circle",
+  "mdi-circle-outline": "radio_button_unchecked",
+
+  // --- form controls (Vuetify's internal aliases live here) ---
+  "mdi-checkbox-marked": "check_box",
+  "mdi-checkbox-blank-outline": "check_box_outline_blank",
+  "mdi-checkbox-multiple-outline": "checklist", // NEAREST: no stacked checkboxes
+  "mdi-radiobox-marked": "radio_button_checked",
+  "mdi-radiobox-blank": "radio_button_unchecked",
+  "mdi-form-textbox": "text_fields",
+  "mdi-text": "subject",
+  "mdi-format-list-bulleted": "format_list_bulleted",
+  "mdi-format-list-numbered": "format_list_numbered",
+  "mdi-format-header-1": "format_h1",
+  "mdi-keyboard-return": "keyboard_return",
+  "mdi-keyboard-space": "space_bar",
+  "mdi-apple-keyboard-command": "keyboard_command_key",
+  "mdi-apple-keyboard-control": "keyboard_control_key",
+  "mdi-apple-keyboard-option": "keyboard_option_key",
+  "mdi-apple-keyboard-shift": "shift",
+
+  // --- time & calendar ---
+  "mdi-calendar": "calendar_month",
+  "mdi-calendar-month-outline": "calendar_month",
+  "mdi-calendar-range": "date_range",
+  "mdi-calendar-check": "event_available",
+  "mdi-calendar-remove": "event_busy",
+  "mdi-calendar-clock": "calendar_clock",
+  "mdi-calendar-start": "today", // NEAREST: no start/end calendar pair
+  "mdi-calendar-end": "event", // NEAREST: no start/end calendar pair
+  "mdi-clock-outline": "schedule",
+  "mdi-clock-check": "update",
+  "mdi-clock-check-outline": "update",
+  "mdi-clock-time-four-outline": "schedule", // NEAREST: no per-hour clock faces
+  "mdi-clock-time-eight-outline": "schedule", // NEAREST: no per-hour clock faces
+  "mdi-timer-outline": "timer",
+
+  // --- files & documents ---
+  "mdi-file": "draft",
+  "mdi-file-outline": "draft",
+  "mdi-file-document-outline": "description",
+  "mdi-file-document-remove-outline": "scan_delete",
+  "mdi-file-question-outline": "unknown_document",
+  "mdi-file-pdf": "picture_as_pdf",
+  "mdi-file-pdf-box": "picture_as_pdf",
+  "mdi-file-pdf-outline": "picture_as_pdf",
+  "mdi-file-word-box": "description", // NEAREST: no per-format document icons
+  "mdi-file-excel": "table_chart", // NEAREST: no per-format document icons
+  "mdi-file-excel-box": "table_chart", // NEAREST: no per-format document icons
+  "mdi-file-powerpoint-box": "slideshow", // NEAREST: no per-format document icons
+  "mdi-file-csv": "csv",
+  "mdi-file-delimited-outline": "csv",
+  "mdi-folder": "folder",
+  "mdi-folder-plus-outline": "create_new_folder",
+  "mdi-folder-zip-outline": "folder_zip",
+  "mdi-zip-box-outline": "folder_zip",
+  "mdi-paperclip": "attach_file",
+  "mdi-clipboard-list": "assignment",
+  "mdi-clipboard-text-outline": "assignment",
+  "mdi-clipboard-check-outline": "assignment_turned_in",
+  "mdi-cloud-upload": "cloud_upload",
+  "mdi-cloud-upload-outline": "cloud_upload",
+  "mdi-database-sync-outline": "sync", // NEAREST: no database-with-sync
+  "mdi-database-search-outline": "manage_search", // NEAREST: no database-with-search
+
+  // --- media & camera ---
+  "mdi-camera": "photo_camera",
+  "mdi-camera-outline": "photo_camera",
+  "mdi-camera-off": "no_photography",
+  "mdi-camera-off-outline": "no_photography",
+  "mdi-camera-plus-outline": "add_a_photo",
+  "mdi-camera-retake": "flip_camera_android", // NEAREST: retake reads as flip
+  "mdi-camera-switch": "cameraswitch",
+  "mdi-cctv": "videocam", // NEAREST: no dome/CCTV camera
+  "mdi-video": "videocam",
+  "mdi-image": "image",
+  "mdi-image-broken": "broken_image",
+  "mdi-play": "play_arrow",
+  "mdi-play-circle-outline": "play_circle",
+  "mdi-pause": "pause",
+  "mdi-fullscreen": "fullscreen",
+  "mdi-fullscreen-exit": "fullscreen_exit",
+  "mdi-microphone": "mic",
+  "mdi-microphone-off": "mic_off",
+  "mdi-volume-high": "volume_up",
+  "mdi-volume-medium": "volume_down",
+  "mdi-volume-low": "volume_mute",
+  "mdi-volume-variant-off": "volume_off",
+  "mdi-eye": "visibility",
+  "mdi-eye-outline": "visibility",
+  "mdi-eye-off": "visibility_off",
+  "mdi-eye-off-outline": "visibility_off",
+  "mdi-view-grid": "grid_view",
+
+  // --- people & accounts ---
+  "mdi-account": "person",
+  "mdi-user": "person",
+  "mdi-account-circle": "account_circle",
+  "mdi-account-plus": "person_add",
+  "mdi-account-off": "person_off",
+  "mdi-account-search-outline": "person_search",
+  "mdi-account-cog-outline": "manage_accounts",
+  "mdi-account-arrow-right": "how_to_reg", // NEAREST: person-with-arrow reads as check-in
+  "mdi-account-multiple": "group",
+  "mdi-account-group": "groups",
+  "mdi-account-badge": "badge",
+  "mdi-card-account-details": "badge",
+  "mdi-card-account-details-outline": "badge",
+  "mdi-card-account-details-star": "badge", // NEAREST: no starred ID card
+  "mdi-card-bulleted-outline": "badge", // NEAREST: access card reads as badge
+  "mdi-credit-card-outline": "credit_card",
+  "mdi-face-recognition": "face", // NEAREST: no face-recognition frame
+  "mdi-briefcase": "work",
+  "mdi-login": "login",
+  "mdi-logout": "logout",
+
+  // --- communication ---
+  "mdi-phone": "call",
+  "mdi-phone-outline": "call",
+  "mdi-phone-hangup": "call_end",
+  "mdi-phone-incoming": "call_received",
+  "mdi-phone-outgoing": "call_made",
+  "mdi-phone-in-talk": "phone_in_talk",
+  "mdi-phone-in-talk-outline": "phone_in_talk",
+  "mdi-email": "mail",
+  "mdi-message": "chat_bubble",
+  "mdi-message-outline": "chat_bubble",
+  "mdi-comment-multiple": "forum",
+  "mdi-link-variant": "link",
+  "mdi-lan-connect": "lan",
+  "mdi-lan-disconnect": "link_off", // NEAREST: no disconnected-LAN glyph
+  "mdi-bluetooth": "bluetooth",
+  "mdi-nfc": "nfc",
+
+  // --- places, security & operations ---
+  "mdi-office-building": "apartment",
+  "mdi-office-building-marker-outline": "location_city",
+  "mdi-building": "apartment",
+  "mdi-domain": "domain",
+  "mdi-home-city-outline": "home_work",
+  "mdi-warehouse": "warehouse",
+  "mdi-storefront-outline": "storefront",
+  "mdi-map-marker": "location_on",
+  "mdi-map-search": "travel_explore", // NEAREST: no map-with-magnifier
+  "mdi-door-open": "door_open",
+  "mdi-key": "key",
+  "mdi-lock": "lock",
+  "mdi-lock-outline": "lock",
+  "mdi-shield-outline": "shield",
+  "mdi-shield-check": "verified_user",
+  "mdi-shield-crown": "admin_panel_settings", // NEAREST: no crowned shield
+  "mdi-qrcode": "qr_code",
+  "mdi-qrcode-scan": "qr_code_scanner",
+  "mdi-barcode-scan": "barcode_scanner",
+  "mdi-car": "directions_car",
+  "mdi-car-back": "directions_car", // NEAREST: no rear-view car
+  "mdi-truck": "local_shipping",
+  "mdi-cart-plus": "add_shopping_cart",
+  "mdi-pool": "pool",
+  "mdi-broom": "cleaning_services",
+  "mdi-spray-bottle": "sanitizer",
+  "mdi-tools": "handyman",
+  "mdi-tree-outline": "park",
+  "mdi-flower": "local_florist",
+  "mdi-weather-sunny": "light_mode",
+  "mdi-weather-night": "dark_mode",
+
+  // mdi's deliberate spacer. No glyph, but `.v-icon` still holds the 1em box.
+  "mdi-blank": "",
+
+  // ------------------------------------------------------------------
+  // Names this package never uses, but the eleven applications do.
+  // ------------------------------------------------------------------
+  // The applications draw their icons through this same set, so a name
+  // missing here is an mdi glyph sitting next to a Material Symbols one on
+  // the same screen - the exact split the sweep exists to remove. Adding
+  // them here means no application repository needs a change of its own.
+  "mdi-view-dashboard": "dashboard",
+  "mdi-chart-bar": "bar_chart",
+  "mdi-update": "update",
+  "mdi-calendar-clock-outline": "calendar_clock",
+  "mdi-calendar-check-outline": "event_available",
+  "mdi-timer-check-outline": "timer", // NEAREST: no timer-with-tick
+  "mdi-timer-remove-outline": "timer_off",
+  "mdi-progress-check": "task_alt", // NEAREST: no progress-arc family
+  "mdi-progress-alert": "error", // NEAREST: no progress-arc family
+  "mdi-progress-question": "help", // NEAREST: no progress-arc family
+  "mdi-comment-outline": "chat_bubble",
+  "mdi-message-text": "chat",
+  "mdi-email-outline": "mail",
+  "mdi-email-fast-outline": "forward_to_inbox",
+  "mdi-bullhorn-outline": "campaign",
+  "mdi-web": "language",
+  "mdi-cellphone": "smartphone",
+  "mdi-cellphone-cog": "phonelink_setup",
+  "mdi-nfc-variant": "nfc",
+  "mdi-nfc-tap": "contactless",
+  "mdi-handshake": "handshake",
+  "mdi-hand-coin-outline": "payments", // NEAREST: no hand-holding-coin
+  "mdi-wallet-outline": "account_balance_wallet",
+  "mdi-credit-card": "credit_card",
+  "mdi-account-credit-card-outline": "credit_card", // NEAREST: no person-with-card
+  "mdi-sale-outline": "sell",
+  "mdi-rocket-launch": "rocket_launch",
+  "mdi-rocket-launch-outline": "rocket_launch",
+  "mdi-robot-happy-outline": "smart_toy",
+  "mdi-account-hard-hat": "engineering",
+  "mdi-account-wrench": "engineering", // NEAREST: no person-with-spanner
+  "mdi-wrench-clock": "build", // NEAREST: no spanner-with-clock
+  "mdi-account-clock": "pending_actions", // NEAREST: no person-with-clock
+  "mdi-account-clock-outline": "pending_actions", // NEAREST: no person-with-clock
+  "mdi-account-remove": "person_remove",
+  "mdi-account-cog": "manage_accounts",
+  "mdi-account-multiple-outline": "group",
+  "mdi-account-group-outline": "groups",
+  "mdi-account-multiple-check-outline": "how_to_reg", // NEAREST: no group-with-tick
+  "mdi-badge-account-outline": "badge",
+  "mdi-shield": "shield",
+  "mdi-shield-account": "admin_panel_settings",
+  "mdi-shield-account-outline": "admin_panel_settings",
+  "mdi-shield-search": "policy",
+  "mdi-office-building-outline": "apartment",
+  "mdi-office-building-marker": "location_city",
+  "mdi-office-building-cog-outline": "apartment", // NEAREST: no building-with-cog
+  "mdi-home-modern": "house",
+  "mdi-sign-text": "signpost",
+  "mdi-car-side": "directions_car", // NEAREST: one car glyph for all views
+  "mdi-car-clock": "directions_car", // NEAREST: no car-with-clock
+  "mdi-car-emergency": "emergency",
+  "mdi-key-variant": "key",
+  "mdi-pencil-box": "edit_square",
+  "mdi-trash": "delete",
+  "mdi-delete-forever-outline": "delete_forever",
+  "mdi-close-box": "disabled_by_default",
+  "mdi-circle-slice-8": "circle",
+  "mdi-help-circle-outline": "help",
+  "mdi-folder-alert": "folder", // NEAREST: no folder-with-alert
+  "mdi-note-text-outline": "description",
+  "mdi-card-text-outline": "article",
+  "mdi-list-box-outline": "list_alt",
+  "mdi-form-select": "dynamic_form", // NEAREST: no form-with-select
+  "mdi-microsoft-excel": "table_chart", // NEAREST: no per-format document icons
+  "mdi-tray-arrow-down": "file_download",
+  "mdi-image-off-outline": "hide_image",
+  "mdi-eye-arrow-right-outline": "visibility", // NEAREST: no eye-with-arrow
+
+  // Landed on staging while this branch was open (the HID screens).
+  "mdi-account-off-outline": "person_off",
+  "mdi-deskphone": "deskphone",
+};

package/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/camera-wall-gated-endpoint.md

@@ -1,47 +0,0 @@
----
-"@7365admin1/layer-common": patch
----
-
-Draw the camera wall from the gated wall endpoint, and show the server's own
-reason on a tile.
-
-`CameraWall` fetched its cameras from `GET /api/site-cameras` - the Settings
-panel's paginated CRUD list, which took its site from an optional query
-parameter and checked nothing about the caller. Any signed-in user from any
-organisation could read every camera in the estate through it, `host` and
-`username` included.
-
-It now calls `GET /api/site-cameras/site/:siteId/wall`, which already exists,
-which the React Native monitoring app was built against, and which is
-authorised server-side: the caller must be a member of the site, of its owning
-organisation, or work for an organisation actively engaged to serve it. That
-endpoint also returns `type: "ip"` cameras only and each camera's capability
-descriptor, so a wall cannot be handed an ANPR unit and a tile can explain
-itself.
-
-Two consequences worth stating:
-
-- **The pager is gone.** The wall endpoint returns the site's cameras in one
-  answer. Paging a video wall was an artefact of borrowing the CRUD list.
-- **A tile now prefers the server's `unavailableReason`** over the reason it
-  used to work out itself. The server knows things the browser cannot - chiefly
-  "No recorder is configured for this camera's relay", which is the true answer
-  for every camera in the estate until the API host is configured, and which the
-  wall used to replace with its own guess. Offline still beats everything, since
-  it explains every tile at once.
-
-No permission gate was invented here. Each application still gates its own menu
-entry; this component draws what it is given, and the server decides.
-
-Two smaller things in the same area:
-
-- **A refused wall now says so.** The catch-all message told every failure to
-  "check your connection", which sends somebody who simply may not see that
-  site off to debug their wifi. A 401/403/404 now reads "You do not have access
-  to this site's cameras." The server answers "not yours" and "does not exist"
-  identically, so this wording does not distinguish them either.
-- **`middleware/member.ts` is removed.** It read a cookie into an unused
-  variable and did nothing else - a file named like a membership gate that was
-  not one. No page in any of the eleven web apps referenced it. The real check
-  is `plugins/secure-member.client.ts`, driven by `memberOnly` page meta, which
-  is untouched.

package/.changeset/camera-wall-plain-english.md

@@ -1,60 +0,0 @@
----
-"@7365admin1/layer-common": patch
----
-
-Rewrite the camera wall's detail panel for the people who read it, and stop
-repeating the same sentence four times.
-
-The panel under the tiles was written for a developer. On the live wall it
-read:
-
-> BBQ AREA
-> The video page loaded, but this browser cannot confirm a picture is arriving.
-> The player belongs to the video service and a browser cannot look inside it.
-> Judge the tile by what you can see, and report a blank or frozen picture.
-> ● Recorder responding   Last picture this server received: none yet
-> Firmware and device clock are not available: this recorder is reachable over
-> video only.
-
-Every one of those statements is true, and the screen was still wrong: it
-explained cross-origin isolation to a guard, repeated the camera's name the
-tile already showed, put a green light beside the words "none yet", and printed
-the same reason on four capability cards in a row.
-
-Changes, all copy and layout — **no behaviour, no capability gating and no
-permission check is touched**:
-
-- **The badge reads "Not confirmed"**, not "Not verified". "Not verified"
-  describes a check we failed to make; "Not confirmed" describes the picture,
-  which is the thing the reader cares about. Same claim, and the wall still
-  refuses to say "Live" until the video service reports a decoded frame.
-- **The sentence behind it is now an instruction**: "This page cannot confirm
-  the picture is arriving, so check the tile yourself. If it is blank or frozen,
-  report the camera." Why the software cannot confirm it is our problem, and it
-  has been removed from the product.
-- **The camera's name is no longer a heading of its own.** It is the subject of
-  the status line — "BBQ AREA · Recorder responding" — so a reader on a 3x3 wall
-  still knows which tile the panel describes, without a second caption under the
-  first one.
-- **"Last picture" is drawn only when there has been one.** A green "Recorder
-  responding" beside "none yet" read as a contradiction. They were never in
-  conflict, but a screen that has to be explained is wrong. The tile's own
-  health line has always behaved this way; the panel now matches it.
-- **The firmware-and-device-clock sentence is gone**, from the panel and from
-  the tile's tooltip. This screen never showed either value, so explaining their
-  absence gave the reader nothing to do. The server still sends
-  `detailUnavailableReason`; nothing draws it.
-- **One reason for the group instead of four copies.** When every switched-off
-  control is off for the same reason, that reason and its next step are stated
-  once above the row and each card keeps only its title and its state. When the
-  reasons differ — "the recorder is unreachable" and "this camera cannot move"
-  are two problems with two different people to ask — the group note is refused
-  and each card carries its own again. New rule 7, in `camera-wall.ts`, with
-  four tests.
-- Shorter next-step and no-signal wording, and a subject on the recorder's
-  status labels ("Recorder not checked yet" rather than "Health not checked
-  yet").
-
-Rules 3 and 6 are intact: the server's own sentence is still shown verbatim and
-never rewritten, and the recorder's state is still a separate fact from the
-tile's badge.