@the-portland-company/shell 0.53.1 → 0.55.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.55.0 — 2026-09-30
+
+### Fixed — org pill body no longer takes the Mode accent (`./native`)
+
+Reference/UI-Platform ("Left bar" / "Per-mode branding") is explicit: the org
+pill sits on a **neutral surface** — only the circular org badge carries a
+brand or Mode color, never the pill body. The `./native` `NavSidebar`'s org
+pill (both the disabled single-org button and the multi-org `<details>`
+selector) resolved `var(--mode-accent, var(--panel-elevated))` as its own
+background and `var(--mode-on-accent, var(--foreground))` as its text color —
+so a Mode with its own accent (Campaign's `#8F1F2A`) painted the **whole
+pill** solid red instead of just the badge. Reported live as "V1 styling" on
+a2p.politogyvrm.com (shell 0.46.0, still present through 0.54.0). Both spots
+now render the neutral `--panel-elevated` / `--line` / `--foreground` chain
+unconditionally; the badge (unchanged) still resolves the org's brand color
+or, absent one, the chrome/Mode accent.
+
+### Fixed — mode pill resolves the semantic Mode accent, not the flat global one
+
+The mode pill (both the disabled single-mode button and the multi-mode
+selector) was hardcoded to `var(--color-accent)` / `text-white`, so a Mode
+that declares its own `chrome.accent` (Reference/UI-Platform → "Per-mode
+branding") never reached this pill — only the rail background did. It now
+resolves `var(--mode-accent, var(--color-accent))` with
+`var(--mode-on-accent, white)`, matching the org pill's badge and the active
+nav row's existing pattern.
+
+### Why
+
+Live audit against Reference/UI-Platform + the shared Relationship Mode UI
+design template (orchestrator rail-parity sweep, 2026-09-30).
+
 ## 0.53.0 — 2026-09-29
 
 ### Added — Loading Screen boot surface (Specs/Loading-Screen)

package/dist/app-chrome.cjs

@@ -1932,7 +1932,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(--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("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("span", { className: "flex min-w-0 items-center gap-2.5", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
@@ -2021,7 +2021,7 @@ function NavSidebar({
                 {
                   type: "button",
                   onClick: org.onClick,
-                  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))]",
+                  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)]",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2040,7 +2040,7 @@ function NavSidebar({
               )
             ] }) : null,
             mode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: mode.options && mode.options.length > 1 && mode.onSelect ? /* @__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 bg-[color:var(--color-accent)] px-2.5 py-2 text-white shadow-sm transition hover:opacity-95 [&::-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 bg-[color:var(--mode-accent,var(--color-accent))] px-2.5 py-2 text-[color:var(--mode-on-accent,white)] shadow-sm transition hover:bg-[color:var(--mode-accent-strong,var(--color-accent))] hover:opacity-95 [&::-webkit-details-marker]:hidden", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
                   ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tracking-[-0.01em]", children: mode.label })
@@ -2075,7 +2075,7 @@ function NavSidebar({
               "button",
               {
                 type: "button",
-                className: "flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-accent)] px-2.5 py-2 text-white shadow-sm",
+                className: "flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--mode-accent,var(--color-accent))] px-2.5 py-2 text-[color:var(--mode-on-accent,white)] shadow-sm",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
                     ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
@@ -3256,6 +3256,41 @@ function watchLogout(onLogout, options = {}) {
   }
   return cleanup;
 }
+var BOOT_STAGE_TABLE = [
+  { id: "s0_session", weight: 5, critical: true, waitsOn: "Politogy ID session resolution" },
+  { id: "s1_org", weight: 10, critical: true, waitsOn: "Chrome API /api/chrome/me + orgs" },
+  { id: "s2_uvp_connect", weight: 10, critical: true, waitsOn: "UVP data layer connection" },
+  { id: "s3_district", weight: 5, critical: true, waitsOn: "uvp_geo_entitlements / uvp_boundaries scope" },
+  { id: "s4_universe", weight: 25, critical: true, waitsOn: "UVP universe load + total count" },
+  { id: "s5_layers", weight: 15, critical: false, waitsOn: "UVP enrichment layer joins" },
+  { id: "s6_verified", weight: 10, critical: false, waitsOn: "VRM Verified tier computation" },
+  { id: "s7_tribes", weight: 10, critical: false, waitsOn: "Tribes member_count + Hot Tribes warm-up" },
+  { id: "s8_intelligence", weight: 5, critical: false, waitsOn: "Mode intelligence signals (Polling/Relationship/Petition)" },
+  { id: "s9_shell", weight: 5, critical: true, waitsOn: "Shell paint-ready handoff" }
+];
+var BOOT_STAGE_ORDER = BOOT_STAGE_TABLE.map((s) => s.id);
+var BOOT_STAGE_WEIGHTS = Object.fromEntries(
+  BOOT_STAGE_TABLE.map((s) => [s.id, s.weight])
+);
+function computeWeightedPct(args) {
+  const skipped = new Set(args.skippedStageIds ?? []);
+  const applicable = BOOT_STAGE_ORDER.filter((id) => !skipped.has(id));
+  const applicableWeightTotal = applicable.reduce((sum, id) => sum + BOOT_STAGE_WEIGHTS[id], 0);
+  if (applicableWeightTotal <= 0) return 100;
+  const redistributionFactor = 100 / applicableWeightTotal;
+  const completed = new Set(args.completedStageIds);
+  let pct = 0;
+  for (const id of applicable) {
+    const effectiveWeight = BOOT_STAGE_WEIGHTS[id] * redistributionFactor;
+    if (completed.has(id)) {
+      pct += effectiveWeight;
+    } else if (id === args.currentStageId) {
+      const progress = Math.min(1, Math.max(0, args.currentStageProgress ?? 0));
+      pct += effectiveWeight * progress;
+    }
+  }
+  return Math.min(100, pct);
+}
 var SYNTHETIC_STAGES = [
   { pct: 20, label: "Connecting to your organization\u2026" },
   { pct: 100, label: "Ready." }
@@ -3334,7 +3369,25 @@ function LoadingScreen({
       phase: syntheticReady ? "done" : "booting"
     };
   }, [syntheticReady]);
-  const pct = bootProgress?.pct ?? synthetic.pct;
+  const weightedPct = react.useMemo(() => {
+    if (!bootProgress) return void 0;
+    if (typeof bootProgress.pct === "number") return bootProgress.pct;
+    if (!bootProgress.completedStageIds && !bootProgress.skippedStageIds) return void 0;
+    return computeWeightedPct({
+      completedStageIds: bootProgress.completedStageIds ?? [],
+      skippedStageIds: bootProgress.skippedStageIds,
+      currentStageId: bootProgress.stageId,
+      currentStageProgress: bootProgress.currentStageProgress
+    });
+  }, [
+    bootProgress,
+    bootProgress?.pct,
+    bootProgress?.completedStageIds,
+    bootProgress?.skippedStageIds,
+    bootProgress?.stageId,
+    bootProgress?.currentStageProgress
+  ]);
+  const pct = weightedPct ?? synthetic.pct;
   const rawLabel = bootProgress?.label ?? synthetic.label;
   const phase = bootProgress?.phase ?? synthetic.phase;
   const isFinal = phase === "done" && pct >= 100;
@@ -3457,11 +3510,82 @@ function LoadingScreen({
               children: announced
             }
           ),
-          isError && (bootProgress?.onRetry || bootProgress?.onSignOut) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1rem", display: "flex", gap: "0.75rem", justifyContent: "center" }, children: [
-            bootProgress?.onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: bootProgress.onRetry, children: "Retry" }),
-            bootProgress?.onSignOut && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: bootProgress.onSignOut, children: "Sign out" })
-          ] })
-        ] })
+          isError && (bootProgress?.onRetry || bootProgress?.onSignOut) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                marginTop: "1.25rem",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.75rem",
+                alignItems: "center"
+              },
+              children: [
+                bootProgress?.onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: bootProgress.onRetry,
+                    style: {
+                      height: 40,
+                      padding: "0 1.25rem",
+                      borderRadius: "var(--radius-md, 8px)",
+                      border: "none",
+                      background: "var(--color-race-red, #dc2626)",
+                      color: "#fff",
+                      fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+                      fontSize: "0.875rem",
+                      fontWeight: 600,
+                      cursor: "pointer"
+                    },
+                    children: "Retry"
+                  }
+                ),
+                bootProgress?.onSignOut && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: bootProgress.onSignOut,
+                    style: {
+                      height: "auto",
+                      padding: 0,
+                      border: "none",
+                      background: "transparent",
+                      color: "rgba(255,255,255,0.38)",
+                      fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+                      fontSize: "12.5px",
+                      textDecoration: "underline",
+                      cursor: "pointer"
+                    },
+                    children: "Sign out"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "0 32px 30px",
+              fontFamily: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+              fontSize: "12.5px",
+              color: "rgba(255,255,255,0.38)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Politogy VRM. Built for the long game." }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono, ui-monospace, monospace)", letterSpacing: "0.04em" }, children: (bootProgress?.version ?? "v\u2014") + " \xB7 " + (bootProgress?.region ?? "\u2014") })
+            ]
+          }
+        )
       ]
     }
   );