@the-portland-company/shell 0.71.0 → 0.72.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.72.0
+
+Left-Navigation §5, §10 and §12.
+- The rail takes its mode colour from the current mode label when no registry modeId is passed, as in VRM core. Campaign Mode is now Deep Race Red, not ink.
+- The Campaign rail tokens are #A12430 for raised wells, #F0CFD2 for inactive row text and #F6DADD for the eyebrow.
+- The footer user row shows the name as "First L.", with two-letter initials.
+- Flat bar per §8.2: a row with children is drawn as one link with no chevron and no accordion. It points to its own page or its first child's, and it is active on any route beneath it. The children stay in the tree for breadcrumbs and tabs.
+- Icons per §8.1: standardPolitogyNav falls back to the shared Lucide map when no `icons` are passed, so VRM core rows get icons. The map moved to native/standardNavIcons and app-chrome re-exports it.
+- Removed the tests for the retired accordion and Navigation Display sub-menu, and added §8.2 tests.
+
+## 0.71.1
+
+Build line in the rail footer follows Specs/Left-Navigation §9 and Reference/UI-Platform Meta.
+- Shown in production too, as `prod | <commit> | v<version>` over `date | author`.
+- Two centered rows of plain mono text at 11px, with no chip and no leading or trailing pipes.
+
 ## 0.71.0
 
 Rail and top bar match the Specs/Left-Navigation Design.

package/dist/app-chrome.cjs

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var fi = require('react-icons/fi');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
-var devnotes = require('@the-portland-company/devnotes');
 var lu = require('react-icons/lu');
+var devnotes = require('@the-portland-company/devnotes');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1931,6 +1931,45 @@ function useThemePreference() {
   );
   return { value, setValue };
 }
+var standardNavIcons = {
+  home: lu.LuHouse,
+  users: lu.LuUsers,
+  mail: lu.LuMail,
+  messageSquare: lu.LuMessageSquare,
+  layout: lu.LuLayoutDashboard,
+  activity: lu.LuActivity,
+  lifeBuoy: lu.LuLifeBuoy,
+  grid: lu.LuLayoutGrid,
+  list: lu.LuList,
+  upload: lu.LuUpload,
+  edit: lu.LuPencil,
+  fileText: lu.LuFileText,
+  send: lu.LuSend,
+  clock: lu.LuClock,
+  user: lu.LuUser,
+  barChart: lu.LuChartColumn,
+  briefcase: lu.LuBriefcase,
+  settings: lu.LuSettings,
+  creditCard: lu.LuCreditCard,
+  dollarSign: lu.LuDollarSign,
+  share: lu.LuShare2,
+  // Campaign / Petition mode slots.
+  phone: lu.LuPhone,
+  map: lu.LuMap,
+  mapPin: lu.LuMapPin,
+  target: lu.LuTarget,
+  flag: lu.LuFlag,
+  layoutDashboard: lu.LuLayoutDashboard,
+  usersRound: lu.LuUsersRound,
+  mousePointerClick: lu.LuMousePointerClick,
+  clipboardList: lu.LuClipboardList,
+  circleUser: lu.LuCircleUser,
+  crosshair: lu.LuCrosshair,
+  landmark: lu.LuLandmark,
+  chartNoAxes: lu.LuChartNoAxesColumn,
+  doorOpen: lu.LuDoorOpen,
+  signpost: lu.LuSignpost
+};
 
 // src/native/standardNav.ts
 var CAMPAIGN_FEATURE_AVAILABILITY = {
@@ -2044,7 +2083,7 @@ var APP_SIGNS_CHILDREN = [
 function standardPolitogyNav(opts) {
   const base = opts.coreBaseUrl.replace(/\/+$/, "");
   const abs = (path) => `${base}${path.startsWith("/") ? path : `/${path}`}`;
-  const icon = (key) => opts.icons?.[key];
+  const icon = (key) => opts.icons?.[key] ?? standardNavIcons[key];
   const orgParam = opts.activeOrgId ? `org=${opts.activeOrgId}` : "";
   const withOrg = (url) => orgParam ? `${url}${url.includes("?") ? "&" : "?"}${orgParam}` : url;
   const leaves = (children) => children.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(abs(c.path)) }));
@@ -2256,15 +2295,29 @@ function hasActiveChild(item, pathname, activeFn) {
     )
   );
 }
-function envChipClasses(label) {
-  const l = label.toLowerCase();
-  if (l === "production" || l === "prod")
-    return "bg-[#fee2e2] text-[#ef4444]";
-  if (l === "staging" || l === "stage")
-    return "bg-[#ffedd5] text-[#f97316]";
-  if (l === "local" || l === "development" || l === "dev")
-    return "bg-[#dcfce7] text-[#22c55e]";
-  return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
+function firstLeafHref(item) {
+  for (const c of item.children ?? []) {
+    if (c.kind === "section") continue;
+    if (c.href) return c.href;
+    const deep = firstLeafHref(c);
+    if (deep) return deep;
+  }
+  return void 0;
+}
+function modeIdFromLabel(label) {
+  const l = label?.trim().toLowerCase();
+  return l ? l.replace(/\s+mode$/, "") : void 0;
+}
+function shortUserName(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length < 2) return parts[0] ?? "";
+  return `${parts[0]} ${parts[parts.length - 1][0].toUpperCase()}.`;
+}
+function shortEnvLabel(label) {
+  const l = label.trim().toLowerCase();
+  if (l === "production") return "prod";
+  if (l === "development") return "dev";
+  return l;
 }
 var ORG_PILL_DEFAULT = "var(--color-accent)";
 var RailCollapsibleContext = react.createContext(false);
@@ -2366,7 +2419,6 @@ function NavSidebar({
   react.useEffect(() => {
     setOpenGroup(activeGroupKey);
   }, [activeGroupKey]);
-  const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
   return /* @__PURE__ */ jsxRuntime.jsxs(RailCollapsibleContext.Provider, { value: collapsible, children: [
     open ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -2706,21 +2758,16 @@ function NavSidebar({
                 });
               }
               if (item.children && item.children.length > 0) {
-                const key = groupKeyOf(item, idx);
                 const selfActive = item.href ? activeFn(pathname, item.href) : false;
                 const parentActive = selfActive || hasActiveChild(item, pathname, activeFn);
                 return /* @__PURE__ */ jsxRuntime.jsx(
-                  NavGroup,
+                  NavRow,
                   {
-                    item,
+                    item: { ...item, href: item.href ?? firstLeafHref(item), children: void 0 },
                     active: parentActive,
-                    open: openGroup === key,
-                    onToggle: () => toggleGroup(key),
-                    pathname,
-                    activeFn,
                     Link
                   },
-                  key
+                  item.href ?? groupKeyOf(item, idx)
                 );
               }
               const active = item.href ? activeFn(pathname, item.href) : false;
@@ -2755,41 +2802,26 @@ function NavSidebar({
                 }
               )
             ] }, l.label)) }) : null,
-            footer.envLabel && footer.envLabel.trim().toLowerCase() !== "production" ? /* @__PURE__ */ jsxRuntime.jsxs(
+            footer.envLabel || footer.commit || footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 "data-shell-meta": true,
-                className: `mt-1.5 flex flex-col items-start gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))] ${rc("max-md:hidden")}`,
+                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")}`,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: [
-                          "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
-                          envChipClasses(footer.envLabel)
-                        ].join(" "),
-                        children: footer.envLabel
-                      }
-                    ),
-                    footer.commit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commit.slice(-4) })
-                    ] }) : null,
-                    footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                        "v",
-                        footer.version
-                      ] })
-                    ] }) : null
-                  ] }),
+                  /* @__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", { className: "text-[color:var(--muted)]", children: "|" }) : 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
                 ]
@@ -3023,142 +3055,6 @@ function NavRow({
     }
   );
 }
-function NavGroup({
-  item,
-  active,
-  open,
-  onToggle,
-  pathname,
-  activeFn,
-  Link
-}) {
-  const rc = useRailCollapse();
-  const Icon = item.icon;
-  const headerClasses = [
-    "group relative block w-full overflow-hidden text-left transition",
-    open ? "rounded-t-[5px]" : "rounded-[5px]",
-    active ? NAV_TOP_ACTIVE_CLASS : open ? "bg-[color:var(--sidebar-row-hover-bg,var(--panel))] text-[color:var(--sidebar-text,var(--foreground))]" : NAV_TOP_INACTIVE_CLASS
-  ].join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          onToggle();
-          item.onClick?.();
-        },
-        "aria-expanded": open,
-        title: item.label,
-        className: headerClasses,
-        children: [
-          active ? /* @__PURE__ */ jsxRuntime.jsx(NavActiveRail, {}) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center ${NAV_TOP_ROW_CLASS(active)} ${rc("max-md:justify-center max-md:px-0")}`, children: [
-            Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: NAV_TOP_ICON_SIZE, className: "shrink-0 text-current" }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `min-w-0 flex-1 truncate ${rc("max-md:hidden")}`, children: item.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(NavRowBadge, { value: item.badge }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ChevronDown,
-              {
-                className: [
-                  "shrink-0 opacity-80 transition-transform duration-200",
-                  open ? "rotate-180" : "",
-                  rc("max-md:hidden")
-                ].join(" ")
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1 ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
-      if (child.kind === "section") {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          NavSectionRow,
-          {
-            label: child.label,
-            first: i === 0,
-            variant: "sub"
-          },
-          `sub-section-${i}-${child.label}`
-        );
-      }
-      const childActive = child.href ? activeFn(pathname, child.href) : false;
-      if (child.children && child.children.length > 0) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          NavSubGroup,
-          {
-            item: child,
-            pathname,
-            activeFn,
-            Link
-          },
-          child.href ?? `subgrp-${i}-${child.label}`
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        NavRow,
-        {
-          item: child,
-          active: childActive,
-          Link,
-          variant: "sub"
-        },
-        child.href ?? `sub-${i}-${child.label}`
-      );
-    }) }) }) : null
-  ] });
-}
-function NavSubGroup({
-  item,
-  pathname,
-  activeFn,
-  Link
-}) {
-  const ownsActive = (item.href ? activeFn(pathname, item.href) : false) || (item.children ?? []).some((c) => c.href ? activeFn(pathname, c.href) : false);
-  const [open, setOpen] = react.useState(ownsActive);
-  react.useEffect(() => {
-    if (ownsActive) setOpen(true);
-  }, [ownsActive]);
-  const Icon = item.icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((v) => !v),
-        "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(--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,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ChevronDown,
-            {
-              className: [
-                "shrink-0 opacity-70 transition-transform duration-200",
-                open ? "rotate-180" : ""
-              ].join(" ")
-            }
-          )
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 flex flex-col gap-0.5 border-l border-[color:var(--line)] pl-2", children: item.children.map((leaf, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      NavRow,
-      {
-        item: leaf,
-        active: leaf.href ? activeFn(pathname, leaf.href) : false,
-        Link,
-        variant: "sub"
-      },
-      leaf.href ?? `subsub-${i}-${leaf.label}`
-    )) }) : null
-  ] });
-}
 function OrgIdCopyButton({ id }) {
   const [copied, setCopied] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3458,8 +3354,8 @@ function NavSidebarUserCard({
 }) {
   const rawName = user.name?.trim() || "";
   const hasRealName = rawName.length > 0 && !rawName.includes("@");
-  const displayName = hasRealName ? rawName : user.email ?? "Signed in";
-  const initials = (hasRealName ? rawName : user.email ?? "P").slice(0, 2).toUpperCase();
+  const displayName = hasRealName ? shortUserName(rawName) : user.email ?? "Signed in";
+  const initials = hasRealName ? rawName.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase() : (user.email ?? "P").slice(0, 2).toUpperCase();
   const secondary = hasRealName ? user.email || [user.tier, user.role].filter(Boolean).join(" \xB7 ") || "member" : [user.tier, user.role].filter(Boolean).join(" \xB7 ") || "member";
   const rc = useRailCollapse();
   return /* @__PURE__ */ jsxRuntime.jsxs("details", { "data-nav-details": true, className: "group/acct relative", children: [
@@ -3775,7 +3671,7 @@ function NavAppShell({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      "data-politogy-mode": modeId,
+      "data-politogy-mode": modeId ?? modeIdFromLabel(sidebar.mode?.label),
       className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4791,45 +4687,6 @@ function FrameBody({
     )
   ] });
 }
-var standardNavIcons = {
-  home: lu.LuHouse,
-  users: lu.LuUsers,
-  mail: lu.LuMail,
-  messageSquare: lu.LuMessageSquare,
-  layout: lu.LuLayoutDashboard,
-  activity: lu.LuActivity,
-  lifeBuoy: lu.LuLifeBuoy,
-  grid: lu.LuLayoutGrid,
-  list: lu.LuList,
-  upload: lu.LuUpload,
-  edit: lu.LuPencil,
-  fileText: lu.LuFileText,
-  send: lu.LuSend,
-  clock: lu.LuClock,
-  user: lu.LuUser,
-  barChart: lu.LuChartColumn,
-  briefcase: lu.LuBriefcase,
-  settings: lu.LuSettings,
-  creditCard: lu.LuCreditCard,
-  dollarSign: lu.LuDollarSign,
-  share: lu.LuShare2,
-  // Campaign / Petition mode slots.
-  phone: lu.LuPhone,
-  map: lu.LuMap,
-  mapPin: lu.LuMapPin,
-  target: lu.LuTarget,
-  flag: lu.LuFlag,
-  layoutDashboard: lu.LuLayoutDashboard,
-  usersRound: lu.LuUsersRound,
-  mousePointerClick: lu.LuMousePointerClick,
-  clipboardList: lu.LuClipboardList,
-  circleUser: lu.LuCircleUser,
-  crosshair: lu.LuCrosshair,
-  landmark: lu.LuLandmark,
-  chartNoAxes: lu.LuChartNoAxesColumn,
-  doorOpen: lu.LuDoorOpen,
-  signpost: lu.LuSignpost
-};
 var ORG_STORAGE_KEY = "vrm.activeOrg";
 var MODE_STORAGE_KEY = "vrm.activeMode";
 var CORE_BASE_URL = "https://app.politogyvrm.com";