@the-portland-company/shell 0.75.0 → 0.75.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.75.2
+
+Two fixes found on top of 0.75.1:
+
+- **Contrast (item 4).** Several rail/mono text colors were tuned only against the ink rail (`#1B1C20`) and dropped below WCAG 2.2 AA's 4.5:1 minimum for normal-size text on the Campaign-mode red rail (`#8F1F2A`, raised card `#A12430`) and the loading screen (`#0a0a0c`): the account-menu "Roles & Organizations" caption (`--muted` / `--topbar-breadcrumb-color`, 3.63:1 on `--panel-elevated`), the sidebar user-email/mode caption (`--sidebar-caption`, 3.25:1 on the Campaign rail), the org-id hash (2.93:1 on the Campaign card), the nav section eyebrow (`--sidebar-eyebrow`, 3.55:1 even on the ink rail), and the loading-screen footer tagline (inline literal, 3.50:1). Fixed entirely through tokens: `--topbar-breadcrumb-color` darkened to `#5C6B80`; `--sidebar-text-muted`/`--sidebar-meta-text` lightened to `#CDCFD2`; `--sidebar-eyebrow`/`--sidebar-caption`/`--sidebar-row-text` raised to `rgba(255,255,255,.72)`/`.66`; the loading-screen's two `rgba(255,255,255,0.38)` literals (footer tagline and the error-state "Sign out" button) raised to `0.72`; and `native/index.tsx`'s hardcoded `--sidebar-meta-text` fallback updated to match. Each value clears 4.5:1 against every background it can actually render on (ink rail, Campaign rail, Campaign card, loading-screen ink, white/`--panel-elevated`), not just the one it was first tuned against. New test: `__tests__/sidebarContrast.test.ts` computes WCAG relative-luminance contrast for each token/background pair and fails the build if any drops below 4.5:1.
+- **Missing `title` grant (item 5).** `POLITOGY_APPS.forms` had no `title` grant, so Forms could never publish a real per-page title — the page header fell back to the static registry title "Forms" forever and the designed "mode" eyebrow + H2 + subtitle block never rendered with real page data. Same gap existed on every other feature app with real per-page names: `surveys`, `polls`, `ctas`, `email`, `a2p`, `phonebank`, `canvass`, `signs` all got `grants: ['title']` added, by the same reasoning already applied to `petitions`. Left `dashboard` and `settings` (no per-record pages), `contacts` (already `pageTitle: false`), and `vrm` (core, gated by `app === CORE_APP` instead) ungranted. `__tests__/frame-grants.test.tsx` rewritten to assert the full grant set explicitly.
+
+**Noted, not fixed:** UI-Platform (v44) says the `breadcrumbs` grant was retired 2026-09-30, but `petitions` still carries `grants: ['breadcrumbs', 'title']` and the `PolitogyFrameGrant` type still includes `'breadcrumbs'`. Removing it touches `deriveBreadcrumbs`, the `NavBreadcrumb` type, `PolitogyGrantedFrame.breadcrumbs`/`PolitogyCoreFrame.page.breadcrumbs`, and the `breadcrumbs` prop threaded into `NavTopBar` — out of scope for this release. Flagging per spec-is-source-of-truth rather than doing an unscoped removal.
+
+## 0.75.1
+
+Three visual-regression fixes found by cross-app comparison (every app diverged from the design the same three ways):
+
+- **Font tokens.** `--font-sans`, `--font-mono` and `--font-plex-mono` were referenced across `loading-screen.tsx` and `native/index.tsx` (and `theme/index.ts` read `--type-mono-family`) but `chrome.css` never emitted any of them, so those surfaces silently fell back to a hardcoded system stack instead of the Brand `--font-family` token — the actual source of the Inter/Acumin mismatch. Every sans surface now consumes `--font-family` (the one token the Brand API emits); every mono surface now consumes one shared, shell-emitted `--font-mono` (also added to `scripts/gen-tokens.mjs`).
+- **Card tokens.** `--color-panel` aliased `--color-surface` (`--surface-1`, #F0F4F7 — the PAGE background), so every card rendered page-tinted instead of the Brand Card white. `--color-border` aliased `--line` / `--sidebar-border`, a token scoped to the always-dark left rail, leaking a dark-rail-intended border onto light content. Fixed in `chrome.css` (and `gen-tokens.mjs`): `--color-panel` is now `--color-layer-3` (white); `--color-border` is now `--color-g3` (#D7DADF, the neutral Brand border step).
+- **Mode eyebrow + tab icons.** `PageHeader` had no `mode`/`eyebrow` prop at all, so the 11px uppercase mode eyebrow (Reference/UI-Platform → "Page header") never had anywhere to render; it now renders by default whenever `mode` is passed (`showEyebrow`/`eyebrow` to override). `NavTab.icon` was marked `@deprecated` and explicitly not rendered as of 0.69.0 — reversed by the 2026-10-06 Tabs decision ("Icon + label. Each tab is a Lucide icon") — `NavTabStrip` now renders the icon again, 15px (13px on `size="sm"`), 1.75 stroke, 6px left of the label, following the label's color via `currentColor`.
+
 ## 0.75.0
 
 Built on top of 0.74.0 (`claude/retire-nav`). Two fixes:

package/dist/app-chrome.cjs

@@ -2896,7 +2896,7 @@ function NavSidebar({
               "div",
               {
                 "data-shell-meta": true,
-                className: `mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[11px] text-[color:var(--sidebar-meta-text,rgba(255,255,255,0.4))] ${rc("max-md:hidden")}`,
+                className: `mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] text-[color:var(--sidebar-meta-text,rgba(255,255,255,0.72))] ${rc("max-md:hidden")}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: [
                     footer.envLabel ? shortEnvLabel(footer.envLabel) : null,
@@ -3046,7 +3046,7 @@ function NavActiveRail() {
 function NavRowBadge({ value }) {
   const rc = useRailCollapse();
   if (value === void 0 || value === null || value === "") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: value });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-auto shrink-0 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: value });
 }
 function NavSectionRow({
   label,
@@ -3160,7 +3160,7 @@ function OrgIdCopyButton({ id }) {
         setTimeout(() => setCopied(false), 1500);
       },
       title: "Copy organization id",
-      className: "-ml-1 rounded px-1 text-left font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
+      className: "-ml-1 rounded px-1 text-left font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
       children: copied ? "Copied" : `\u2026${id.slice(-8)}`
     }
   );
@@ -3220,7 +3220,7 @@ function NavTopBar({
           "kbd",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute right-[10px] hidden md:block rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--muted)]",
+            className: "pointer-events-none absolute right-[10px] hidden md:block rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--muted)]",
             children: "/"
           }
         )
@@ -4243,7 +4243,7 @@ function LoadingScreen({
               display: "flex",
               alignItems: "center",
               gap: "0.6rem",
-              fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)"
+              fontFamily: "var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif)"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4337,7 +4337,7 @@ function LoadingScreen({
                       border: "none",
                       background: "var(--color-race-red, #dc2626)",
                       color: "#fff",
-                      fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+                      fontFamily: "var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif)",
                       fontSize: "0.875rem",
                       fontWeight: 600,
                       cursor: "pointer"
@@ -4355,8 +4355,10 @@ function LoadingScreen({
                       padding: 0,
                       border: "none",
                       background: "transparent",
-                      color: "rgba(255,255,255,0.38)",
-                      fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+                      // 0.38 alpha was 3.51:1 on the ink-900 loading background —
+                      // below WCAG 2.2 AA 4.5:1. 0.72 clears it.
+                      color: "rgba(255,255,255,0.72)",
+                      fontFamily: "var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif)",
                       fontSize: "12.5px",
                       textDecoration: "underline",
                       cursor: "pointer"
@@ -4380,9 +4382,11 @@ function LoadingScreen({
               alignItems: "center",
               justifyContent: "space-between",
               padding: "0 32px 30px",
-              fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+              fontFamily: "var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif)",
               fontSize: "12.5px",
-              color: "rgba(255,255,255,0.38)"
+              // 0.38 alpha was 3.51:1 on the ink-900 loading background — below
+              // WCAG 2.2 AA 4.5:1. 0.72 clears it.
+              color: "rgba(255,255,255,0.72)"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Politogy VRM. Built for the long game." }),
@@ -4450,11 +4454,17 @@ var POLITOGY_APPS = {
     storagePrefix: "contacts",
     pageTitle: false
   },
-  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms" },
-  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys" },
+  // 'title' for forms/surveys/polls/ctas for the same reason as petitions
+  // below: their pages have real names ("Volunteer Signup", "Q3 Satisfaction"),
+  // where the registry can only say the app's own name. Without the grant the
+  // page header falls back to the static registry title forever, so the
+  // designed "<mode> mode" eyebrow + H2 + subtitle block never gets the real
+  // per-page title an app passes it (UI-Platform → Page header).
+  forms: { title: "Forms", origin: "https://forms.politogyvrm.com", storagePrefix: "forms", grants: ["title"] },
+  surveys: { title: "Surveys", origin: "https://surveys.politogyvrm.com", storagePrefix: "surveys", grants: ["title"] },
   // Specs/Left-Navigation §9.2: Polling is a Campaign row (Research).
-  polls: { title: "Polls", origin: "https://polls.politogyvrm.com", storagePrefix: "polls", mode: "campaign" },
-  ctas: { title: "CTAs", origin: "https://ctas.politogyvrm.com", storagePrefix: "ctas" },
+  polls: { title: "Polls", origin: "https://polls.politogyvrm.com", storagePrefix: "polls", mode: "campaign", grants: ["title"] },
+  ctas: { title: "CTAs", origin: "https://ctas.politogyvrm.com", storagePrefix: "ctas", grants: ["title"] },
   // V2 apps that replace retired app.politogyvrm.com pages (Reference/
   // UI-Platform v42 "Retirement of app.politogyvrm.com"). Dashboard hosts the
   // Relationship Dashboard + Campaign Battleground/District data/Campaigns
@@ -4478,7 +4488,7 @@ var POLITOGY_APPS = {
   },
   // Relationship Mode Email Engine (Specs/Email-Engine) — the V2 standalone
   // app, running in parallel to VRM core's V1 Email Broadcast.
-  email: { title: "Email", origin: "https://email.politogyvrm.com", storagePrefix: "email", mode: "relationship" },
+  email: { title: "Email", origin: "https://email.politogyvrm.com", storagePrefix: "email", mode: "relationship", grants: ["title"] },
   // Campaign Mode apps — each scoped to Campaign, so they render the Campaign
   // tree and a static Campaign pill. Not yet deployed; hidden from the Campaign
   // nav by CAMPAIGN_FEATURE_AVAILABILITY until their launch flips the flag.
@@ -4491,11 +4501,12 @@ var POLITOGY_APPS = {
     origin: "https://a2p.politogyvrm.com",
     storagePrefix: "a2p",
     mode: "campaign",
-    dual: { modes: ["relationship", "campaign"], defaultMode: "campaign" }
+    dual: { modes: ["relationship", "campaign"], defaultMode: "campaign" },
+    grants: ["title"]
   },
-  phonebank: { title: "Phone Banking", origin: "https://phonebank.politogyvrm.com", storagePrefix: "phonebank", mode: "campaign" },
-  canvass: { title: "Field Canvassing", origin: "https://canvass.politogyvrm.com", storagePrefix: "canvass", mode: "campaign" },
-  signs: { title: "Sign Mapping", origin: "https://signs.politogyvrm.com", storagePrefix: "signs", mode: "campaign" }
+  phonebank: { title: "Phone Banking", origin: "https://phonebank.politogyvrm.com", storagePrefix: "phonebank", mode: "campaign", grants: ["title"] },
+  canvass: { title: "Field Canvassing", origin: "https://canvass.politogyvrm.com", storagePrefix: "canvass", mode: "campaign", grants: ["title"] },
+  signs: { title: "Sign Mapping", origin: "https://signs.politogyvrm.com", storagePrefix: "signs", mode: "campaign", grants: ["title"] }
 };
 var DEFAULT_SEARCH_PLACEHOLDER = {
   contacts: "Search contacts, segments, forms"