@the-portland-company/shell 0.47.0 → 0.48.0-rc.1

package/CHANGELOG.md

@@ -1,3 +1,71 @@
+## 0.48.0 — 2026-08-13
+
+V1-parity round 2, driven by a measured element-by-element audit of a live V1
+build against 0.47.1. Two kinds of change: one global conformance fix, and a
+set of registry/Mode opt-ins that are byte-identical for apps that declare
+nothing.
+
+### Fixed — the sidebar now consumes its own Brand tokens (GLOBAL)
+
+"Sidebar width, colors, item radius, and spacing come from `--sidebar-*`"
+(Reference/UI-Platform) — but the chrome painted the bar from `--surface-1`
+and rows from `--muted`, so `--sidebar-bg: #FFFFFF` and
+`--sidebar-text: #2F3136` were dead tokens and a Brand edit to them did
+nothing. Consuming them changes every app toward what the Brand editor
+declares: white rail, dark rows in light; the same #161616 ramp in dark
+(dark values added to chrome.css's own `.dark` block so stylesheet order
+between chrome.css and the runtime sheet cannot flip them). This also ends
+the app-wide 3.65:1 AA failure on every inactive row (now 12.6:1).
+
+### Added — opt-in, byte-identical defaults
+
+- **Org pill takes the Mode accent** (`--mode-accent` / `--mode-on-accent`,
+  the latter luminance-derived by the Brand API). Neutral everywhere a Mode
+  declares nothing, and in dark.
+- **`navShape: 'flat'` (registry)** — a rail whose whole tree nests under one
+  entry renders the children at the root: no parent "Dashboard" row, no
+  accordion; rows take the wash active treatment (V1's rail rows).
+- **`beta: false` (registry)** — omits the Beta banner strip for that app.
+- **`'title'` grant** — a granted app's pages may publish the top-bar title
+  ("Batches", not the app name on every page).
+- **Granted breadcrumbs now REPLACE the derived trail** (like core): a page
+  that publishes none shows none, instead of inheriting
+  "Dashboard › <page>" from a tree it opted out of.
+
+Petitions is the only registry row using any of these.
+
+## 0.47.1 — 2026-08-13
+
+Two fixes found by running a consuming app's WCAG contrast gate against 0.47.0.
+Both are 0.47.0 defects; nothing from before 0.47.0 is affected.
+
+### Fixed — `--color-danger` collided with apps' own Tailwind theme colour
+
+0.47.0 introduced `--color-danger` at `:root` to separate "attention/error" from
+"accent". The name was a bad choice: Tailwind v4 derives utilities from
+`--color-*` theme keys, and Petitions already defined
+`--color-danger: var(--tone-danger)` (`#c53030`) to back its `bg-danger` badges.
+The shell's declaration won the cascade, so every `bg-danger` element repainted
+from `#c53030` to `#E63946` — dropping white-on-danger from 6.2:1 to **4.17:1**
+and failing WCAG AA on eight badges in one view.
+
+Renamed to **`--chrome-danger`**. The shell should not squat a generic
+`--color-*` name that apps legitimately own; `--color-accent` stays as it is,
+because that one is a documented chrome alias apps already consume.
+
+### Fixed — a Mode accent must not carry into dark
+
+0.47.0 let a Mode's accent through to dark on the theory that a foreground
+colour is safe there. Measured: Petition Mode's `#15803D` on the dark elevated
+panel `#1F1F1F` is **3.29:1**, and it regressed fourteen routes at once.
+
+A Mode's palette is authored against white. Nothing makes it legible against
+black, and deriving a dark variant would be inventing a dark theme for a Mode
+whose design never had one — which the brief explicitly ruled out. So a Mode
+accent is now reset under `.dark`, and dark keeps the platform's neutral ramp
+exactly as it did on 0.46.0. This is chrome POLICY, in `chrome.css`, so no Mode
+can opt out of it by authoring a value.
+
 ## 0.47.0 — 2026-08-13
 
 Petition Mode has been green since V1 and has rendered red for the whole of the
@@ -20,7 +88,7 @@ Besides mis-signalling, it made the accent unoverridable — apps reasonably set
 
 Those 32 references now resolve a semantic token, split by what the colour
 actually means: `--color-accent` for genuine accent furniture, and a new
-`--color-danger` for attention and error (count badges, the low-fuel meter and
+`--chrome-danger` for attention and error (count badges, the low-fuel meter and
 its nudge, validation messages). The danger set stays red in every Mode — a
 green "3 unread" badge is worse than a red one.
 

package/dist/app-chrome.cjs

@@ -165,7 +165,7 @@ function resolveOrgLogoUrl(url) {
   return `${CORE_APP_ORIGIN}${raw.startsWith("/") ? "" : "/"}${raw}`;
 }
 function topBarIconButtonClass(tone = "default") {
-  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-danger)] hover:text-[color:var(--color-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
   return [
     // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
     "group/tbtip relative flex items-center justify-center rounded-full border border-[color:var(--line)] transition",
@@ -192,7 +192,7 @@ function useAnyTopBarPanelOpen() {
 }
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-danger)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
 }
 function TopBarTooltip({
   title,
@@ -516,7 +516,7 @@ function FuelRow({
           {
             className: [
               "text-xs font-semibold tabular-nums",
-              low ? "text-[color:var(--color-danger)]" : "text-[color:var(--muted)]"
+              low ? "text-[color:var(--chrome-danger)]" : "text-[color:var(--muted)]"
             ].join(" "),
             children: [
               remaining.toLocaleString(),
@@ -540,7 +540,7 @@ function FuelRow({
       {
         className: [
           "h-full rounded-full transition-[width]",
-          low ? "bg-[color:var(--color-danger)]" : "bg-[color:var(--color-ok,#00A651)]"
+          low ? "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--color-ok,#00A651)]"
         ].join(" "),
         style: { width: `${ratio}%` }
       }
@@ -576,14 +576,14 @@ function LowFuelHint({ lowFuel, orgId }) {
     "div",
     {
       role: "status",
-      className: "absolute right-0 top-[calc(100%+10px)] z-50 w-60 rounded-lg border border-[color:var(--color-danger)] bg-[color:var(--color-danger)] px-3 py-2 text-white shadow-[var(--shadow-soft)]",
+      className: "absolute right-0 top-[calc(100%+10px)] z-50 w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-white shadow-[var(--shadow-soft)]",
       onClick: (e) => e.stopPropagation(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "aria-hidden": true,
-            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--color-danger)]"
+            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--chrome-danger)]"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
@@ -1237,7 +1237,7 @@ function SupportAction({ orgId } = {}) {
                     className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
                   }
                 ),
-                showEmailError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-[color:var(--color-danger)]", children: "Enter an email so support can reply." }) : null
+                showEmailError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-[color:var(--chrome-danger)]", children: "Enter an email so support can reply." }) : null
               ] }) : null,
               missingPhone ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-3 block", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your phone \u2014 optional" }),
@@ -1262,7 +1262,7 @@ function SupportAction({ orgId } = {}) {
                   className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
                 }
               ),
-              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-danger)]", children: "Sending failed \u2014 try again." }) : null,
+              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--chrome-danger)]", children: "Sending failed \u2014 try again." }) : null,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -1766,7 +1766,7 @@ function NavSidebar({
     setOpenGroup(activeGroupKey);
   }, [activeGroupKey]);
   const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--nav-surface)] lg:flex", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--sidebar-bg,var(--nav-surface))] lg:flex", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
@@ -1792,7 +1792,7 @@ function NavSidebar({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto px-4 pb-2", children: [
       org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]", children: "Organization" }),
           org.id && !org.loading ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
         ] }),
         org.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm", children: [
@@ -1812,7 +1812,7 @@ function NavSidebar({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading organization" })
         ] }) : org.organizations && org.organizations.length > 0 && org.onSwitch ? /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)] [&::-webkit-details-marker]:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md border border-[color:var(--mode-accent,var(--line))] bg-[color:var(--mode-accent,var(--panel-elevated))] px-2.5 py-2 text-left text-[color:var(--mode-on-accent,var(--foreground))] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--panel))] [&::-webkit-details-marker]:hidden", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
@@ -1875,7 +1875,7 @@ function NavSidebar({
           {
             type: "button",
             onClick: org.onClick,
-            className: "flex w-full items-center justify-between gap-2 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 text-left text-[color:var(--foreground)] shadow-sm transition hover:bg-[color:var(--panel)]",
+            className: "flex w-full items-center justify-between gap-2 rounded-md border border-[color:var(--mode-accent,var(--line))] bg-[color:var(--mode-accent,var(--panel-elevated))] px-2.5 py-2 text-left text-[color:var(--mode-on-accent,var(--foreground))] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--panel))]",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1940,7 +1940,7 @@ function NavSidebar({
         }
       ) }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-1", children: [
-        nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: nav.groupLabel }) : null,
+        nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]", children: nav.groupLabel }) : null,
         nav.items.map((item, idx) => {
           if (item.kind === "section") {
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1952,6 +1952,30 @@ function NavSidebar({
               `section-${idx}-${item.label}`
             );
           }
+          if (nav.flatten && item.children && item.children.length > 0) {
+            return item.children.map((child, i) => {
+              if (child.kind === "section") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  NavSectionRow,
+                  {
+                    label: child.label,
+                    first: idx === 0 && i === 0
+                  },
+                  `flat-section-${idx}-${i}-${child.label}`
+                );
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                NavRow,
+                {
+                  item: child,
+                  active: child.href ? activeFn(pathname, child.href) : false,
+                  Link,
+                  variant: "flat"
+                },
+                child.href ?? `flat-${idx}-${i}-${child.label}`
+              );
+            });
+          }
           if (item.children && item.children.length > 0) {
             const key = groupKeyOf(item, idx);
             const selfActive = item.href ? activeFn(pathname, item.href) : false;
@@ -2059,7 +2083,7 @@ function NavSectionRow({
     "p",
     {
       className: [
-        "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]",
+        "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]",
         variant === "sub" ? "px-3 pb-0.5" : "px-2 pb-1",
         first ? "" : "mt-3"
       ].join(" "),
@@ -2075,14 +2099,15 @@ function NavRow({
 }) {
   const Icon = item.icon;
   const isSub = variant === "sub";
-  const activeClasses = isSub ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent)] shadow-sm" : "bg-[color:var(--color-accent)] text-white shadow-sm";
+  const washActive = variant !== "top";
+  const activeClasses = washActive ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent)] shadow-sm" : "bg-[color:var(--color-accent)] text-white shadow-sm";
   const wrapperClasses = [
     "group relative block overflow-hidden rounded-md transition",
-    active ? activeClasses : "text-[color:var(--muted)] hover:text-white"
+    active ? activeClasses : "text-[color:var(--sidebar-text,var(--muted))] hover:text-white"
   ].join(" ");
   const rowPadding = isSub ? "px-3 py-1.5 text-[13px]" : "px-3 py-2 text-sm";
   const iconSize = isSub ? 16 : 18;
-  const iconClass = active && !isSub ? "text-white" : "text-current";
+  const iconClass = active && !washActive ? "text-white" : "text-current";
   const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !active ? /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -2147,7 +2172,7 @@ function NavGroup({
   const headerClasses = [
     "group relative block w-full overflow-hidden text-left transition",
     open ? "rounded-t-md" : "rounded-md",
-    active ? "bg-[color:var(--color-accent)] text-white shadow-sm" : open ? "bg-[color:var(--panel)] text-[color:var(--foreground)]" : "text-[color:var(--muted)] hover:text-white"
+    active ? "bg-[color:var(--color-accent)] text-white shadow-sm" : open ? "bg-[color:var(--panel)] text-[color:var(--foreground)]" : "text-[color:var(--sidebar-text,var(--muted))] hover:text-white"
   ].join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2244,7 +2269,7 @@ function NavSubGroup({
         "aria-expanded": open,
         className: [
           "flex w-full items-center gap-2.5 rounded px-3 py-1.5 text-left text-[13px] font-medium transition",
-          ownsActive ? "text-[color:var(--color-accent)]" : "text-[color:var(--muted)] hover:bg-[color:var(--nav-row-hover)] hover:text-[color:var(--foreground)]"
+          ownsActive ? "text-[color:var(--color-accent)]" : "text-[color:var(--sidebar-text,var(--muted))] hover:bg-[color:var(--nav-row-hover)] hover:text-[color:var(--foreground)]"
         ].join(" "),
         children: [
           Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 15, className: "shrink-0 text-current" }) : null,
@@ -3037,7 +3062,11 @@ var POLITOGY_APPS = {
     // <main>), and its adjudication case is addressed per sheet and per line —
     // a trail derived from the nav tree reads "Dashboard › Adjudication" on
     // every one of those URLs and cannot name the record you are actually on.
-    grants: ["contentWrapper", "breadcrumbs"]
+    // 'title' for the same reason: its pages have real names ("Batches"),
+    // where the registry can only say "Petitions".
+    grants: ["contentWrapper", "breadcrumbs", "title"],
+    navShape: "flat",
+    beta: false
   },
   // 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
@@ -3178,7 +3207,7 @@ function FrameBody({
     () => deriveBreadcrumbs(navItems, pathname, { search, origin: meta.origin }),
     [navItems, pathname, search, meta.origin]
   );
-  const breadcrumbs = core ? core.page?.breadcrumbs : granted("breadcrumbs") ?? derivedBreadcrumbs;
+  const breadcrumbs = core ? core.page?.breadcrumbs : grants?.includes("breadcrumbs") ? granted("breadcrumbs") : derivedBreadcrumbs;
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavAppShell,
     {
@@ -3191,7 +3220,11 @@ function FrameBody({
           title: "Politogy"
         },
         nav: {
-          items: navDisplay === "tabs" ? navItems.map(({ children: _sub, ...item }) => item) : navItems
+          // A flat rail's sub-menu IS the nav, so the 'tabs only' preference
+          // (which strips children) would leave one childless parent row —
+          // flat apps ignore the stripping.
+          items: navDisplay === "tabs" && meta.navShape !== "flat" ? navItems.map(({ children: _sub, ...item }) => item) : navItems,
+          flatten: meta.navShape === "flat"
         },
         // The app's own workspace is NOT the organization — it is a per-app
         // bootstrap account with a different id in every app. Showing it while
@@ -3210,13 +3243,13 @@ function FrameBody({
         footer,
         linkComponent
       },
-      betaBanner: {},
+      betaBanner: meta.beta === false ? void 0 : {},
       modeId: appMode,
       contentWrapper: core?.contentWrapper ?? granted("contentWrapper"),
       topBar: {
         // Core's pages publish their own identity; every other app is one
         // product surface and takes its registry title.
-        title: core?.page?.title ?? meta.title,
+        title: core?.page?.title ?? (grants?.includes("title") ? data?.frame?.title : void 0) ?? meta.title,
         breadcrumbs,
         user: {
           name: identity.userName,