@the-portland-company/shell 0.71.0 → 0.72.0

package/dist/native.cjs

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var fi = require('react-icons/fi');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
+var lu = require('react-icons/lu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1917,6 +1918,45 @@ function useThemePreference() {
 function FormColumn({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx__default.default("w-full max-w-[960px]", className), children });
 }
+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 = {
@@ -2030,7 +2070,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)) }));
@@ -2242,6 +2282,30 @@ function hasActiveChild(item, pathname, activeFn) {
     )
   );
 }
+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;
+}
 function envChipClasses(label) {
   const l = label.toLowerCase();
   if (l === "production" || l === "prod")
@@ -2352,7 +2416,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",
@@ -2692,21 +2755,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;
@@ -2741,41 +2799,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
                 ]
@@ -3009,142 +3052,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(
@@ -3444,8 +3351,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: [
@@ -3845,7 +3752,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(
@@ -3918,7 +3825,10 @@ exports.TopBarWidgetSlot = TopBarWidgetSlot;
 exports.clearBetaBannerDismissal = clearBetaBannerDismissal;
 exports.envChipClasses = envChipClasses;
 exports.isNavItemActive = isNavItemActive;
+exports.modeIdFromLabel = modeIdFromLabel;
 exports.resolveOrgLogoUrl = resolveOrgLogoUrl;
+exports.shortEnvLabel = shortEnvLabel;
+exports.shortUserName = shortUserName;
 exports.standardPolitogyNav = standardPolitogyNav;
 exports.topBarIconButtonClass = topBarIconButtonClass;
 exports.useChromeMe = useChromeMe;