@the-portland-company/shell 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { extendTheme, Tooltip, ChakraProvider, useColorModeValue, Flex, Menu, MenuButton, HStack, Avatar, VStack, Text, Box, Portal, MenuList, MenuItem, MenuDivider, Badge, IconButton, Link as Link$1, Collapse, Skeleton, Button, Image, useDisclosure, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Textarea, ModalFooter, useClipboard } from '@chakra-ui/react';
+import { extendTheme, Tooltip, ChakraProvider, useColorModeValue, Flex, Menu, MenuButton, HStack, Avatar, VStack, Text, Box, Portal, MenuList, MenuItem, MenuDivider, Badge, IconButton, Link as Link$1, Collapse, Skeleton, Button, useClipboard, Icon, Image, useDisclosure, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Textarea, ModalFooter } from '@chakra-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx2 from 'clsx';
 import { Link, useLocation, useNavigate, NavLink } from 'react-router-dom';
@@ -1147,7 +1147,8 @@ function ShellProvider({
   linkedAccounts,
   support,
   devNotesMenu,
-  myProfileHref
+  myProfileHref,
+  userAvatarUrl
 }) {
   const [status, setStatus] = useState("loading");
   const [session, setSession] = useState(null);
@@ -1189,9 +1190,10 @@ function ShellProvider({
   const chrome = useMemo(
     () => ({
       devNotesMenu: devNotesMenu ?? null,
-      myProfileHref: myProfileHref ?? "/my-profile"
+      myProfileHref: myProfileHref ?? "/my-profile",
+      userAvatarUrl
     }),
-    [devNotesMenu, myProfileHref]
+    [devNotesMenu, myProfileHref, userAvatarUrl]
   );
   return /* @__PURE__ */ jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsx(ShellModeContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellNavItemsContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellNavigationPreferenceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellRoleContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellFooterContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsx(ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) }) }) }) }) }) });
 }
@@ -1278,7 +1280,8 @@ function UserMenu() {
     myProfileHref,
     organizationSettingsHref,
     showContinueOnboarding,
-    onContinueOnboarding
+    onContinueOnboarding,
+    userAvatarUrl
   } = useShellChrome();
   const linked = useShellLinkedAccounts();
   const mode = useShellMode();
@@ -1289,7 +1292,7 @@ function UserMenu() {
   const menuListBorderColor = useColorModeValue("gray.200", "gray.700");
   if (status !== "authenticated" || !user) return null;
   const displayName = getUserDisplayName(user.raw);
-  const avatarUrl = avatarUrlFromUser(user);
+  const avatarUrl = userAvatarUrl ?? avatarUrlFromUser(user);
   const modeConfig = mode?.getModeConfig() ?? null;
   const currentOrg = org?.currentOrg ?? null;
   const linkedAccounts = linked?.linkedAccounts ?? [];
@@ -1444,8 +1447,7 @@ function Header({ onOpen, id }) {
     breadcrumbs,
     headerActions,
     headerIconsSlot,
-    brandLogoSrc,
-    devNotesMenu
+    brandLogoSrc
   } = useShellChrome();
   const mobileNavBg = useColorModeValue("white", "gray.900");
   const mobileNavBorderColor = useColorModeValue("gray.200", "gray.700");
@@ -1521,8 +1523,7 @@ function Header({ onOpen, id }) {
               },
               children: [
                 headerActions,
-                headerIconsSlot,
-                devNotesMenu
+                headerIconsSlot
               ]
             }
           ),
@@ -2178,6 +2179,237 @@ function ModePill() {
   ] }) });
 }
 var ModePill_default = ModePill;
+function ActivityIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+    }
+  );
+}
+function defaultEnvChip(label) {
+  if (!label) return null;
+  const lower = label.toLowerCase();
+  if (lower.includes("prod")) {
+    return { color: "#ef4444", bg: "#fee2e2", border: "#fecaca", name: label };
+  }
+  if (lower.includes("stag")) {
+    return { color: "#f97316", bg: "#ffedd5", border: "#fed7aa", name: label };
+  }
+  if (lower.includes("local") || lower.includes("dev")) {
+    return { color: "#22c55e", bg: "#dcfce7", border: "#bbf7d0", name: label };
+  }
+  return { color: "#6b7280", bg: "#f3f4f6", border: "#e5e7eb", name: label };
+}
+var PLACEHOLDER_SHA_VALUES = /* @__PURE__ */ new Set(["unknown", "n/a", "null", "undefined", ""]);
+function isMeaningfulCommit(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return !PLACEHOLDER_SHA_VALUES.has(trimmed.toLowerCase());
+}
+function isMeaningfulAuthor(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return !PLACEHOLDER_SHA_VALUES.has(trimmed.toLowerCase());
+}
+function getFirstName(value) {
+  if (!value) return "";
+  const stripped = value.replace(/<[^>]+>/g, "").trim();
+  if (!stripped) return "";
+  const [firstToken] = stripped.split(/\s+/);
+  return firstToken || stripped;
+}
+function CommitCopyButton({
+  envNode,
+  environmentLabel,
+  commit,
+  version = "",
+  commitDate = "",
+  commitAuthor = "",
+  commitLog = "",
+  onDiagnosticsClick
+}) {
+  const safeCommit = isMeaningfulCommit(commit) ? commit.trim() : "";
+  const { hasCopied, onCopy } = useClipboard(safeCommit);
+  const shortCommit = safeCommit ? safeCommit.slice(-4) : "";
+  const copiedAnimation = keyframes`
+    0% { opacity: 0; transform: translateY(6px); }
+    20% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  `;
+  const formattedDate = useMemo(() => {
+    if (!commitDate) return "";
+    const parsed = new Date(commitDate);
+    if (Number.isNaN(parsed.getTime())) return commitDate;
+    return parsed.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  }, [commitDate]);
+  const metaLine = useMemo(() => {
+    const firstName = isMeaningfulAuthor(commitAuthor) ? getFirstName(commitAuthor) : "";
+    return [formattedDate, firstName].filter(Boolean).join(" | ");
+  }, [formattedDate, commitAuthor]);
+  const normalizedCommitLog = useMemo(() => {
+    if (commitLog?.trim()) {
+      return commitLog.replace(/\r\n/g, "\n").replace(/\\n/g, "\n");
+    }
+    return "";
+  }, [commitLog]);
+  const tooltipContent = normalizedCommitLog.length > 0 ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      maxW: "600px",
+      width: "min(600px, 90vw)",
+      maxH: "80vh",
+      whiteSpace: "pre-wrap",
+      overflowY: "auto",
+      overflowX: "auto",
+      fontSize: "xs",
+      fontFamily: "mono",
+      wordBreak: "break-word",
+      children: normalizedCommitLog
+    }
+  ) : void 0;
+  const envChip = useMemo(() => {
+    if (envNode) return envNode;
+    const chip = defaultEnvChip(environmentLabel);
+    if (!chip) return null;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        display: "inline-flex",
+        alignItems: "center",
+        px: "1.5",
+        py: "0.5",
+        borderWidth: "1px",
+        borderColor: chip.border,
+        bg: chip.bg,
+        color: chip.color,
+        borderRadius: "md",
+        fontSize: "2xs",
+        fontWeight: "600",
+        lineHeight: "1",
+        textTransform: "capitalize",
+        "aria-label": `Environment: ${chip.name}`,
+        children: chip.name
+      }
+    );
+  }, [envNode, environmentLabel]);
+  const showEnv = Boolean(envChip);
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      justify: "center",
+      align: "center",
+      borderRadius: "md",
+      py: 0.5,
+      px: 1,
+      position: "relative",
+      spacing: 0,
+      textAlign: "center",
+      w: "full",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "center", align: "center", gap: 2, whiteSpace: "nowrap", children: [
+          showEnv ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                label: tooltipContent,
+                isDisabled: !tooltipContent,
+                hasArrow: true,
+                placement: "top-start",
+                openDelay: 150,
+                closeOnClick: false,
+                shouldWrapChildren: true,
+                modifiers: [
+                  { name: "preventOverflow", options: { padding: 16 } },
+                  { name: "offset", options: { offset: [0, 12] } }
+                ],
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "unstyled",
+                    minW: "auto",
+                    h: "auto",
+                    p: 0,
+                    lineHeight: "1",
+                    color: "inherit",
+                    onClick: onCopy,
+                    "aria-label": "Copy commit ID",
+                    isDisabled: !safeCommit,
+                    children: envChip
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" })
+          ] }) : null,
+          shortCommit ? /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: hasCopied ? "green.500" : "gray.400", flexShrink: 0, children: shortCommit }) : null,
+          version ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            shortCommit ? /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }) : null,
+            /* @__PURE__ */ jsxs(Text, { fontSize: "2xs", color: "gray.400", flexShrink: 0, children: [
+              "v",
+              version
+            ] })
+          ] }) : null,
+          onDiagnosticsClick ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Diagnostics", hasArrow: true, placement: "top", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "unstyled",
+                minW: "auto",
+                h: "auto",
+                p: 0,
+                lineHeight: "1",
+                color: "gray.400",
+                _hover: { color: "gray.600" },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDiagnosticsClick();
+                },
+                "aria-label": "Diagnostics",
+                children: /* @__PURE__ */ jsx(Icon, { as: ActivityIcon, boxSize: 3 })
+              }
+            ) })
+          ] }) : null
+        ] }),
+        metaLine ? /* @__PURE__ */ jsxs(Text, { fontSize: "2xs", color: "gray.500", textAlign: "center", whiteSpace: "nowrap", children: [
+          "| ",
+          metaLine,
+          " |"
+        ] }) : null,
+        hasCopied && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            bottom: "100%",
+            mb: "6px",
+            px: "2",
+            py: "1",
+            fontSize: "xs",
+            bg: "gray.700",
+            color: "white",
+            borderRadius: "md",
+            animation: `${copiedAnimation} 0.9s ease-out`,
+            pointerEvents: "none",
+            children: "Copied"
+          }
+        )
+      ]
+    }
+  );
+}
 function Sidebar({ onClose, id }) {
   const { brandLogoSrc } = useShellChrome();
   const navItems = useShellNavItems()?.items ?? [];
@@ -2310,17 +2542,19 @@ function Sidebar({ onClose, id }) {
                   }
                 )
               ] }, `${l.label}-${idx}`)) }),
-              (footer.version || footer.commit || footer.environmentLabel) && /* @__PURE__ */ jsxs(HStack, { spacing: 2, fontSize: "xs", color: "gray.500", wrap: "wrap", children: [
-                footer.environmentLabel ? /* @__PURE__ */ jsx(Text, { fontWeight: "semibold", children: footer.environmentLabel }) : null,
-                footer.version ? /* @__PURE__ */ jsxs(Text, { children: [
-                  "v",
-                  footer.version
-                ] }) : null,
-                footer.commit ? /* @__PURE__ */ jsxs(Text, { fontFamily: "mono", children: [
-                  "#",
-                  footer.commit.slice(-7)
-                ] }) : null
-              ] })
+              (footer.version || footer.commit || footer.commitFull || footer.environmentLabel || footer.envNode) && /* @__PURE__ */ jsx(
+                CommitCopyButton,
+                {
+                  envNode: footer.envNode,
+                  environmentLabel: footer.environmentLabel,
+                  commit: footer.commitFull ?? footer.commit,
+                  version: footer.version,
+                  commitDate: footer.commitDate,
+                  commitAuthor: footer.commitAuthor,
+                  commitLog: footer.commitLog,
+                  onDiagnosticsClick: footer.onDiagnosticsClick
+                }
+              )
             ] })
           }
         )
@@ -2674,7 +2908,8 @@ function ShellChrome({
   onContinueOnboarding,
   pageTitle,
   breadcrumbs,
-  headerActions
+  headerActions,
+  userAvatarUrl
 }) {
   const chrome = useMemo(
     () => ({
@@ -2687,7 +2922,8 @@ function ShellChrome({
       onContinueOnboarding,
       pageTitle,
       breadcrumbs,
-      headerActions
+      headerActions,
+      userAvatarUrl
     }),
     [
       devNotesMenu,
@@ -2699,7 +2935,8 @@ function ShellChrome({
       onContinueOnboarding,
       pageTitle,
       breadcrumbs,
-      headerActions
+      headerActions,
+      userAvatarUrl
     ]
   );
   const navItemsValue = useMemo(
@@ -2739,6 +2976,6 @@ function buildSpeculationRules(currentApp, registry) {
   return JSON.stringify(payload);
 }
 
-export { AppLayout, BrandIcon, BrandLogo, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, ShellChrome, ShellChromeContext, ShellFooterContext, ShellLinkedAccountsContext, ShellModeContext, ShellNavItemsContext, ShellNavigationPreferenceContext, ShellOrgContext, ShellProvider, ShellRoleContext, ShellSupportProviderContext, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
+export { AppLayout, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, Footer, GlobalUiIdProvider, Header, HeaderTabBar, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, ShellChrome, ShellChromeContext, ShellFooterContext, ShellLinkedAccountsContext, ShellModeContext, ShellNavItemsContext, ShellNavigationPreferenceContext, ShellOrgContext, ShellProvider, ShellRoleContext, ShellSupportProviderContext, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map