@the-portland-company/shell 0.97.0 → 0.98.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.98.0
+
+The one VRM Verified badge (Contacts v59 §4, decided 2026-11-05, Ben: "Every badge is the brand `verifiedIcon`, drawn by one shared shell component"; Data-System/VRM-Verified v7 §2, §2.6).
+
+- **New `VrmVerifiedBadge`** (on `.` and `./native`): `tier` (`verified | identified | anonymous | stale | inactive | null`), `size`, `showLabel`. Verified draws the Brand `assets.verifiedIcon` read at runtime from the token sheet (`--asset-verified-icon`), never a bundled copy; until the sheet loads its box is reserved and nothing stands in. Other tiers draw a dot (colour from `--vrm-tier-<tier>`, defaults as the apps draw them today per Contacts §4.1) and the tier name. The Verified tooltip is the spec's sentence, "Politogy has confirmed this is a real, registered voter."; no tooltip suggests permission to text or email. Also exports `VRM_VERIFIED_TOOLTIP`, `VRM_TIER_LABELS`, types `VrmVerifiedTier`, `VrmVerifiedBadgeProps`.
+- **New `useBrandAsset(kind)`** and `BrandAssetKind` gains `'verified-icon'`.
+- Tier dot colours per VRM-Verified v8 (decided 2026-11-05, Ben): Identified purple, Anonymous black, Stale yellow, Inactive gray; Verified is the brand badge. They are CSS variables (`--vrm-tier-<tier>`).
+- Tests: `__tests__/vrmVerifiedBadge.test.tsx` (new).
+
+## 0.97.1
+
+Two left-bar and top-bar fixes (Ben 2026-11-05, typed in the UI debugging box; specs updated with his go).
+
+- **Top-bar tooltips stay on screen.** `TopBarTooltip` gains `align?: 'center' | 'end'` (default `center`). `end` lines the body up with the trigger's right edge and keeps the arrow on the trigger's center. `TopBarLinkAction` (Organization settings, My profile) uses `end`. Measured at 1547px before the fix: the centered 224px body ran 75px past the viewport for My profile and 35px for Organization settings.
+- **One quiet build line.** The left-bar footer's two build rows (`env | commit | version`, `date | author`) are now one line, `v<version> · <Mon D>`, 10px mono in the inactive-row gray (`--sidebar-row-text`: 66% white, `#F0CFD2` on the Campaign rail; both clear 4.5:1). The full build info (env, commit, version, date, author) is the line's hover title. New export `buildLineParts()`. Specs/Left-Navigation §10, Reference/UI-Platform → Debug info.
+- Tests: `__tests__/tooltipEdge.test.tsx` (new), `__tests__/native.test.tsx`, `__tests__/sidebarContrast.test.ts` (the contrast check now targets the build line's `--sidebar-row-text`).
+
 ## 0.97.0
 
 Top bar and left bar rework (Ben 2026-11-04, typed in the UI debugging box; specs updated with his go).

package/dist/app-chrome.cjs

@@ -622,19 +622,26 @@ function TopBarCountBadge({ count }) {
 }
 function TopBarTooltip({
   title,
-  description
+  description,
+  align = "center"
 }) {
+  const bodyPosition = align === "end" ? "right-0" : "left-1/2 -translate-x-1/2";
+  const arrowPosition = align === "end" ? "" : "left-1/2 -translate-x-1/2";
+  const arrowStyle = align === "end" ? { right: "calc(var(--topbar-icon-button-size, 34px) / 2 - 5px)" } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       role: "tooltip",
-      className: "pointer-events-none absolute left-1/2 top-full z-50 mt-2 hidden w-max max-w-56 -translate-x-1/2 flex-col rounded-lg border border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex group-focus-visible/tbtip:flex",
+      "data-tooltip-align": align,
+      className: `pointer-events-none absolute ${bodyPosition} top-full z-50 mt-2 hidden w-max max-w-56 flex-col rounded-lg border border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex group-focus-visible/tbtip:flex`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "aria-hidden": true,
-            className: "absolute -top-[5px] left-1/2 h-2.5 w-2.5 -translate-x-1/2 rotate-45 border-l border-t border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)]"
+            "data-tooltip-arrow": true,
+            style: arrowStyle,
+            className: `absolute -top-[5px] ${arrowPosition} h-2.5 w-2.5 rotate-45 border-l border-t border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)]`
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--app-btn-tooltip-fg,#FFFFFF)]", children: title }),
@@ -1576,7 +1583,7 @@ var NAV_DISPLAY_OPTIONS = [
 function TopBarLinkAction({ label, description, href, icon: Icon }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("a", { href, "aria-label": label, className: topBarIconButtonClass(), children: [
     /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
-    /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description })
+    /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description, align: "end" })
   ] });
 }
 function OrganizationSettingsAction({ href }) {
@@ -2123,6 +2130,33 @@ function shortEnvLabel(label) {
   if (l === "development") return "dev";
   return l;
 }
+function buildLineParts(meta) {
+  const version = meta.version ? `v${meta.version.replace(/^v/, "")}` : null;
+  const parsed = meta.commitDate ? new Date(meta.commitDate) : null;
+  const date = parsed && !Number.isNaN(parsed.getTime()) ? parsed.toLocaleDateString(void 0, { month: "short", day: "numeric" }) : null;
+  const line = [version, date].filter(Boolean).join(" \xB7 ");
+  const detail = [
+    meta.envLabel ? shortEnvLabel(meta.envLabel) : null,
+    meta.commit ? meta.commit.slice(0, 12) : null,
+    version,
+    date,
+    meta.commitAuthor ? meta.commitAuthor.split(/\s+/)[0] : null
+  ].filter(Boolean).join(" | ");
+  return { line, detail };
+}
+function ShellBuildLine({ footer, hidden }) {
+  const { line, detail } = buildLineParts(footer);
+  if (!line && !detail) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-shell-meta": true,
+      title: detail,
+      className: `mt-1.5 truncate text-center font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[10px] leading-[1.2] text-[color:var(--sidebar-row-text,rgba(255,255,255,0.66))] ${hidden}`,
+      children: line || detail
+    }
+  );
+}
 var ORG_PILL_DEFAULT = "var(--color-accent-bg-safe,var(--color-accent))";
 var RailCollapsibleContext = react.createContext(false);
 function useRailCollapse() {
@@ -2615,31 +2649,7 @@ function NavSidebar({
                 }
               )
             ] }, l.label)) }) : null,
-            footer.envLabel || footer.commit || footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                "data-shell-meta": true,
-                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,
-                    footer.commit ? footer.commit.slice(-4) : null,
-                    footer.version ? `v${footer.version.replace(/^v/, "")}` : null
-                  ].filter((v) => Boolean(v)).map((v, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-                    i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "|" }) : null,
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: v })
-                  ] }, i)) }),
-                  footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                    footer.commitDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
-                      month: "short",
-                      day: "numeric"
-                    }) }) : null,
-                    footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "|" }) : null,
-                    footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
-                  ] }) : null
-                ]
-              }
-            ) : null
+            footer.envLabel || footer.commit || footer.version ? /* @__PURE__ */ jsxRuntime.jsx(ShellBuildLine, { footer, hidden: rc("max-md:hidden") }) : null
           ] }) : null
         ]
       }