@the-portland-company/shell 0.47.1 → 0.48.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 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.

package/dist/app-chrome.cjs

@@ -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,