@the-portland-company/shell 0.75.0 → 0.75.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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.4))] ${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"
@@ -4356,7 +4356,7 @@ function LoadingScreen({
                       border: "none",
                       background: "transparent",
                       color: "rgba(255,255,255,0.38)",
-                      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",
                       textDecoration: "underline",
                       cursor: "pointer"
@@ -4380,7 +4380,7 @@ 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)"
             },