@the-portland-company/shell 0.70.0 → 0.71.1

package/dist/chrome.css

@@ -155,7 +155,7 @@
   --sidebar-border: #E2E8F0;
   --sidebar-brand-logo-height: 24px;
   --sidebar-org-logo-max-height: 34px;
-  --sidebar-org-band-height: 48px;
+  --sidebar-org-band-height: 70px;
   --sidebar-item-radius: 8px;
   --sidebar-item-padding-x: 16px;
   --sidebar-item-padding-y: 10px;
@@ -447,7 +447,7 @@
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  border: 1px solid var(--line) !important;
+  border: 1px solid transparent !important;
   border-radius: var(--topbar-icon-button-radius, 5px) !important;
   background: transparent !important;
   color: var(--topbar-icon-color, var(--muted)) !important;

package/dist/{chunk-CZI66JVG.js → chunk-JBPJOPLW.js}

@@ -1,7 +1,7 @@
 import { warnDeprecated } from './chunk-LPSBSAF3.js';
 import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-NHBNM5P3.js';
 import { readRailPreference, writeRailPreference } from './chunk-7YVJ7HQG.js';
-import { createContext, useRef, useState, useEffect, useContext, useCallback, useMemo, useSyncExternalStore } from 'react';
+import { createContext, useRef, useState, useEffect, useContext, useCallback, useMemo, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import clsx from 'clsx';
 import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap, FiBatteryCharging, FiBattery } from 'react-icons/fi';
 import { createPortal } from 'react-dom';
@@ -91,7 +91,7 @@ function topBarIconButtonClass(tone = "default") {
   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-[var(--topbar-icon-button-radius,5px)] border border-[color:var(--line)] transition",
+    "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-transparent transition",
     "h-[var(--topbar-icon-button-size,34px)] w-[var(--topbar-icon-button-size,34px)]",
     toneClass
   ].join(" ");
@@ -2074,6 +2074,12 @@ function hasActiveChild(item, pathname, activeFn) {
     )
   );
 }
+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")
@@ -2287,7 +2293,7 @@ function NavSidebar({
               }
             ),
             org ? /* @__PURE__ */ jsxs("div", { className: rc("max-md:flex max-md:justify-center"), children: [
-              /* @__PURE__ */ jsx("div", { className: `mb-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
+              /* @__PURE__ */ jsx("div", { className: `mb-[7px] mt-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
               org.loading ? /* @__PURE__ */ 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 ${rc("max-md:w-auto max-md:border-0 max-md:bg-transparent max-md:p-0 max-md:shadow-none")}`, children: [
                 /* @__PURE__ */ jsx(
                   "span",
@@ -2313,7 +2319,7 @@ function NavSidebar({
                     className: `flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                     children: [
                       /* @__PURE__ */ jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
-                      /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,70px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                         orgLogoSrc ? /* @__PURE__ */ jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsx(
                           "a",
                           {
@@ -2325,7 +2331,7 @@ function NavSidebar({
                         ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                       ] }),
-                      /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-[10px] ${rc("max-md:hidden")}`, children: [
                         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
                           /* @__PURE__ */ jsx(
                             "span",
@@ -2415,7 +2421,7 @@ function NavSidebar({
                   className: `flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                   children: [
                     /* @__PURE__ */ jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
-                    /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
+                    /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,70px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                       orgLogoSrc ? /* @__PURE__ */ jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsx(
                         "a",
                         {
@@ -2427,7 +2433,7 @@ function NavSidebar({
                       ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                       /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                     ] }),
-                    /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
+                    /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-[10px] ${rc("max-md:hidden")}`, children: [
                       /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
                         /* @__PURE__ */ jsx(
                           "span",
@@ -2472,7 +2478,7 @@ function NavSidebar({
                           },
                           disabled: !available,
                           className: [
-                            "flex flex-1 items-center justify-center rounded-[5px] px-[9px] py-[6px] transition",
+                            `flex flex-none items-center justify-center rounded-[5px] px-[9px] py-[6px] transition ${rc("max-md:flex-1")}`,
                             !available ? "cursor-not-allowed text-[color:var(--sidebar-text-muted,var(--muted))] opacity-35" : selected ? "bg-[color:var(--sidebar-mode-selected-bg,var(--mode-accent,var(--color-accent)))] text-[color:var(--mode-on-accent,white)]" : "text-[color:var(--sidebar-text-muted,var(--muted))] hover:bg-[#FFFFFF]/5 hover:text-[color:var(--sidebar-text,var(--foreground))]"
                           ].join(" "),
                           children: OptIcon ? /* @__PURE__ */ jsx(OptIcon, { size: 15, className: "shrink-0" }) : null
@@ -2562,50 +2568,37 @@ function NavSidebar({
                 onSignOut: footer.onSignOut
               }
             ) : null,
-            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l) => /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: safeHref(l.href),
-                className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:text-[color:var(--sidebar-text,var(--foreground))] hover:underline",
-                children: l.label
-              },
-              l.label
-            )) }) : null,
-            footer.envLabel && footer.envLabel.trim().toLowerCase() !== "production" ? /* @__PURE__ */ jsxs(
+            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center justify-center gap-[6px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: "\xB7" }) : null,
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: safeHref(l.href),
+                  className: "text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:text-[color:var(--sidebar-text,var(--foreground))] hover:underline",
+                  children: l.label
+                }
+              )
+            ] }, l.label)) }) : null,
+            footer.envLabel || footer.commit || footer.version ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-                      /* @__PURE__ */ jsx("span", { children: footer.commit.slice(-4) })
-                    ] }) : null,
-                    footer.version ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        "v",
-                        footer.version
-                      ] })
-                    ] }) : null
-                  ] }),
+                  /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
+                    i > 0 ? /* @__PURE__ */ jsx("span", { children: "|" }) : null,
+                    /* @__PURE__ */ jsx("span", { children: v })
+                  ] }, i)) }),
                   footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
                     footer.commitDate ? /* @__PURE__ */ jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
                       month: "short",
                       day: "numeric"
                     }) }) : null,
-                    footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+                    footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsx("span", { children: "|" }) : null,
                     footer.commitAuthor ? /* @__PURE__ */ jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
                   ] }) : null
                 ]
@@ -3722,6 +3715,6 @@ function NavAppShell({
   );
 }
 
-export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, resolveOrgLogoUrl, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
-//# sourceMappingURL=chunk-CZI66JVG.js.map
-//# sourceMappingURL=chunk-CZI66JVG.js.map
+export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, resolveOrgLogoUrl, shortEnvLabel, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
+//# sourceMappingURL=chunk-JBPJOPLW.js.map
+//# sourceMappingURL=chunk-JBPJOPLW.js.map