@streamoid/ui 0.6.51 → 0.6.53

package/dist/index.mjs

@@ -4611,10 +4611,49 @@ function ScSidebarResizeHandle({
   );
 }
 
+// src/SC-SidebarShell/ScPopoverArrow.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
+function ScPopoverArrow({
+  arrow,
+  background = "var(--alias-surface-base, #101010)",
+  borderColor = "var(--alias-border-default, #3e3e3e)",
+  size = 12,
+  style
+}) {
+  if (!arrow) return null;
+  const half = size / 2;
+  const onLeftEdge = arrow.side === "left";
+  return /* @__PURE__ */ jsx51(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-streamoid-popover-arrow": arrow.side,
+      style: {
+        position: "absolute",
+        top: arrow.top - half,
+        [onLeftEdge ? "left" : "right"]: -half,
+        width: size,
+        height: size,
+        background,
+        /* Only the two edges that face away from the card. The other two sit
+           under it, where a border would draw a line across the card's own
+           edge. */
+        borderTop: onLeftEdge ? "none" : `1px solid ${borderColor}`,
+        borderRight: onLeftEdge ? "none" : `1px solid ${borderColor}`,
+        borderBottom: onLeftEdge ? `1px solid ${borderColor}` : "none",
+        borderLeft: onLeftEdge ? `1px solid ${borderColor}` : "none",
+        transform: "rotate(45deg)",
+        pointerEvents: "none",
+        ...style
+      }
+    }
+  );
+}
+
 // src/SC-Sidebar-new/streamoid-sidebar.tsx
-import { Fragment as Fragment15, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 function SectionHeader({ label }) {
-  return /* @__PURE__ */ jsx51("div", { className: "opacity-50 shrink-0 w-full", children: /* @__PURE__ */ jsx51("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52("div", { className: "opacity-50 shrink-0 w-full", children: /* @__PURE__ */ jsx52("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx52(
     "div",
     {
       className: "flex items-center w-full text-text-xs-regular",
@@ -4622,12 +4661,12 @@ function SectionHeader({ label }) {
         padding: "var(--spacing-xs) var(--spacing-3xl)",
         color: "var(--alias-text---icons-tertiary)"
       },
-      children: /* @__PURE__ */ jsx51("span", { children: label })
+      children: /* @__PURE__ */ jsx52("span", { children: label })
     }
   ) }) });
 }
 function HDivider({ edgeToEdge = false }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       className: "shrink-0",
@@ -4672,7 +4711,7 @@ function renderMenuItem({
   const derivedState = active ? "active" : highlighted ? "default-highlight" : "default";
   const state = stateOverride ?? derivedState;
   const iconActive = state === "active" || state === "default-active" || state === "default-highlight";
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     ScSidebarMenu,
     {
       icon: resolveIcon(iconMap, item, iconActive, expanded),
@@ -4731,8 +4770,8 @@ function StreamoidSidebar({
   };
   if (expanded) {
     const logoRow = /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between w-full shrink-0", children: [
-      /* @__PURE__ */ jsx51("div", { className: "min-w-0 flex-1", children: expandedLogo }),
-      isMobile ? /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52("div", { className: "min-w-0 flex-1", children: expandedLogo }),
+      isMobile ? /* @__PURE__ */ jsx52(
         "div",
         {
           className: "flex items-center cursor-pointer shrink-0",
@@ -4751,7 +4790,7 @@ function StreamoidSidebar({
         className: `relative flex h-full items-center shrink-0 ${className ?? ""}`.trim(),
         style: { padding: "var(--spacing-3xl)", ...style },
         children: [
-          resizable && !isMobile ? /* @__PURE__ */ jsx51(
+          resizable && !isMobile ? /* @__PURE__ */ jsx52(
             ScSidebarResizeHandle,
             {
               expanded,
@@ -4775,7 +4814,7 @@ function StreamoidSidebar({
                 gap: "var(--spacing-xxs)"
               },
               children: [
-                /* @__PURE__ */ jsx51(
+                /* @__PURE__ */ jsx52(
                   "div",
                   {
                     "aria-hidden": "true",
@@ -4804,7 +4843,7 @@ function StreamoidSidebar({
                       transition: "background-color 200ms ease, box-shadow 200ms ease"
                     },
                     children: [
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "div",
                         {
                           style: {
@@ -4816,7 +4855,7 @@ function StreamoidSidebar({
                           children: logoRow
                         }
                       ),
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "div",
                         {
                           className: "absolute left-0 right-0",
@@ -4832,7 +4871,7 @@ function StreamoidSidebar({
                             overflow: "hidden",
                             transition: "opacity 200ms ease, background-color 200ms ease, box-shadow 200ms ease"
                           },
-                          children: /* @__PURE__ */ jsx51(
+                          children: /* @__PURE__ */ jsx52(
                             "div",
                             {
                               style: {
@@ -4840,7 +4879,7 @@ function StreamoidSidebar({
                                 gridTemplateRows: panelOpen ? "1fr" : "0fr",
                                 transition: "grid-template-rows 220ms ease"
                               },
-                              children: /* @__PURE__ */ jsx51("div", { style: { overflow: "hidden", minHeight: 0 }, children: switchPanel })
+                              children: /* @__PURE__ */ jsx52("div", { style: { overflow: "hidden", minHeight: 0 }, children: switchPanel })
                             }
                           )
                         }
@@ -4848,7 +4887,7 @@ function StreamoidSidebar({
                     ]
                   }
                 ) : null,
-                hasSwitchCard ? /* @__PURE__ */ jsx51(
+                hasSwitchCard ? /* @__PURE__ */ jsx52(
                   "div",
                   {
                     "aria-hidden": "true",
@@ -4883,8 +4922,8 @@ function StreamoidSidebar({
                     children: [
                       !hasSwitchCard ? logoRow : null,
                       !!(topItems?.length || config.topItem) && /* @__PURE__ */ jsxs41(Fragment15, { children: [
-                        /* @__PURE__ */ jsx51(HDivider, { edgeToEdge: true }),
-                        /* @__PURE__ */ jsx51(
+                        /* @__PURE__ */ jsx52(HDivider, { edgeToEdge: true }),
+                        /* @__PURE__ */ jsx52(
                           "div",
                           {
                             className: "flex flex-col items-stretch shrink-0 w-full",
@@ -4905,10 +4944,10 @@ function StreamoidSidebar({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx51(HDivider, {})
+                        /* @__PURE__ */ jsx52(HDivider, {})
                       ] }),
-                      showBody && bodyContent ? /* @__PURE__ */ jsx51("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ jsxs41(Fragment15, { children: [
-                        !(topItems?.length || config.topItem) && /* @__PURE__ */ jsx51(HDivider, { edgeToEdge: true }),
+                      showBody && bodyContent ? /* @__PURE__ */ jsx52("div", { className: "flex flex-col flex-1 min-h-0 w-full overflow-hidden", children: bodyContent }) : /* @__PURE__ */ jsxs41(Fragment15, { children: [
+                        !(topItems?.length || config.topItem) && /* @__PURE__ */ jsx52(HDivider, { edgeToEdge: true }),
                         config.sections.map((section) => /* @__PURE__ */ jsxs41(
                           "div",
                           {
@@ -4918,7 +4957,7 @@ function StreamoidSidebar({
                               gap: "var(--spacing-xxs)"
                             },
                             children: [
-                              section.label ? /* @__PURE__ */ jsx51(SectionHeader, { label: section.label }) : null,
+                              section.label ? /* @__PURE__ */ jsx52(SectionHeader, { label: section.label }) : null,
                               section.items.map(
                                 (item) => renderMenuItem({
                                   item,
@@ -4937,9 +4976,9 @@ function StreamoidSidebar({
                     ]
                   }
                 ),
-                assistantCta ? /* @__PURE__ */ jsx51(ScAskAgentSlot, { cta: assistantCta }) : null,
+                assistantCta ? /* @__PURE__ */ jsx52(ScAskAgentSlot, { cta: assistantCta }) : null,
                 preFooterContent,
-                config.bottomItems?.length ? /* @__PURE__ */ jsx51(
+                config.bottomItems?.length ? /* @__PURE__ */ jsx52(
                   "div",
                   {
                     className: "flex flex-col items-start shrink-0 w-full",
@@ -4956,8 +4995,8 @@ function StreamoidSidebar({
                     )
                   }
                 ) : null,
-                /* @__PURE__ */ jsx51(HDivider, { edgeToEdge: true }),
-                appIdentity ? /* @__PURE__ */ jsx51(
+                /* @__PURE__ */ jsx52(HDivider, { edgeToEdge: true }),
+                appIdentity ? /* @__PURE__ */ jsx52(
                   "button",
                   {
                     type: "button",
@@ -5005,7 +5044,7 @@ function StreamoidSidebar({
                             children: [
                               profile.avatar,
                               /* @__PURE__ */ jsxs41("div", { className: "flex flex-col flex-1 min-w-0", children: [
-                                /* @__PURE__ */ jsx51(
+                                /* @__PURE__ */ jsx52(
                                   "span",
                                   {
                                     className: "text-text-sm-medium truncate",
@@ -5013,7 +5052,7 @@ function StreamoidSidebar({
                                     children: profile.name
                                   }
                                 ),
-                                profile.subtitle ? /* @__PURE__ */ jsx51(
+                                profile.subtitle ? /* @__PURE__ */ jsx52(
                                   "span",
                                   {
                                     className: "text-text-xs-regular truncate",
@@ -5025,7 +5064,7 @@ function StreamoidSidebar({
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx51(
+                        /* @__PURE__ */ jsx52(
                           "div",
                           {
                             className: "flex items-center cursor-pointer shrink-0",
@@ -5067,7 +5106,7 @@ function StreamoidSidebar({
                       children: [
                         profile.avatar,
                         /* @__PURE__ */ jsxs41("div", { className: "flex flex-col flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx51(
+                          /* @__PURE__ */ jsx52(
                             "span",
                             {
                               className: "text-text-sm-medium truncate",
@@ -5075,7 +5114,7 @@ function StreamoidSidebar({
                               children: profile.name
                             }
                           ),
-                          profile.subtitle ? /* @__PURE__ */ jsx51(
+                          profile.subtitle ? /* @__PURE__ */ jsx52(
                             "span",
                             {
                               className: "text-text-xs-regular truncate",
@@ -5087,9 +5126,9 @@ function StreamoidSidebar({
                       ]
                     }
                   ),
-                  !effectiveHideFooter && /* @__PURE__ */ jsx51(Fragment15, { children: /* @__PURE__ */ jsx51(HDivider, {}) })
+                  !effectiveHideFooter && /* @__PURE__ */ jsx52(Fragment15, { children: /* @__PURE__ */ jsx52(HDivider, {}) })
                 ] }) : null,
-                !effectiveHideFooter && !toggleInProfile && /* @__PURE__ */ jsx51("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx51("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs41(
+                !effectiveHideFooter && !toggleInProfile && /* @__PURE__ */ jsx52("div", { className: "shrink-0 w-full", children: /* @__PURE__ */ jsx52("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs41(
                   "div",
                   {
                     className: "flex items-center w-full",
@@ -5098,7 +5137,7 @@ function StreamoidSidebar({
                       padding: "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xl)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "p",
                         {
                           className: "flex-1 text-text-sm-regular truncate",
@@ -5106,7 +5145,7 @@ function StreamoidSidebar({
                           children: versionText
                         }
                       ),
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "div",
                         {
                           className: "flex items-center cursor-pointer",
@@ -5134,7 +5173,7 @@ function StreamoidSidebar({
       className: `relative flex h-full items-center justify-center shrink-0 ${className ?? ""}`.trim(),
       style: { padding: "var(--spacing-3xl)", ...style },
       children: [
-        resizable && !isMobile ? /* @__PURE__ */ jsx51(
+        resizable && !isMobile ? /* @__PURE__ */ jsx52(
           ScSidebarResizeHandle,
           {
             expanded,
@@ -5157,7 +5196,7 @@ function StreamoidSidebar({
               gap: "var(--spacing-xxs)"
             },
             children: [
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx52(
                 "div",
                 {
                   "aria-hidden": "true",
@@ -5170,7 +5209,7 @@ function StreamoidSidebar({
                 }
               ),
               hasSwitchCard ? /* @__PURE__ */ jsxs41(Fragment15, { children: [
-                /* @__PURE__ */ jsx51(
+                /* @__PURE__ */ jsx52(
                   "div",
                   {
                     "aria-hidden": "true",
@@ -5185,7 +5224,7 @@ function StreamoidSidebar({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx51(
+                /* @__PURE__ */ jsxs41(
                   "div",
                   {
                     style: {
@@ -5197,14 +5236,29 @@ function StreamoidSidebar({
                       backgroundColor: "var(--alias-surface-base)",
                       border: "1px solid var(--alias-border-default)",
                       borderRadius: "var(--radius-3xl)",
-                      overflow: "hidden",
-                      paddingBottom: "var(--spacing-md)",
+                      /* NOT `overflow: hidden`. The caret below hangs half outside
+                         this card by design, and clipping here cuts it off. The
+                         inner box clips instead — which is also what keeps a
+                         child's opaque background off the rounded corners. */
                       opacity: panelOpen ? 1 : 0,
                       transform: panelOpen ? "translateX(0)" : "translateX(-4px)",
                       pointerEvents: panelOpen ? "auto" : "none",
                       transition: "opacity 180ms ease, transform 180ms ease"
                     },
-                    children: switchPanel
+                    children: [
+                      /* @__PURE__ */ jsx52(ScPopoverArrow, { arrow: { side: "left", top: 24 } }),
+                      /* @__PURE__ */ jsx52(
+                        "div",
+                        {
+                          style: {
+                            borderRadius: "var(--radius-3xl)",
+                            overflow: "hidden",
+                            paddingBottom: "var(--spacing-md)"
+                          },
+                          children: switchPanel
+                        }
+                      )
+                    ]
                   }
                 )
               ] }) : null,
@@ -5223,8 +5277,8 @@ function StreamoidSidebar({
                   children: [
                     collapsedLogo,
                     !!(topItems?.length || config.topItem) ? /* @__PURE__ */ jsxs41(Fragment15, { children: [
-                      /* @__PURE__ */ jsx51(HDivider, { edgeToEdge: true }),
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(HDivider, { edgeToEdge: true }),
+                      /* @__PURE__ */ jsx52(
                         "div",
                         {
                           className: "flex flex-col items-center shrink-0",
@@ -5245,10 +5299,10 @@ function StreamoidSidebar({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx51(HDivider, {})
+                      /* @__PURE__ */ jsx52(HDivider, {})
                     ] }) : null,
-                    showBody && bodyContent ? /* @__PURE__ */ jsx51("div", { className: "flex flex-col items-center w-full", children: bodyContent }) : config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs41("div", { className: "flex flex-col items-center w-full", children: [
-                      /* @__PURE__ */ jsx51(
+                    showBody && bodyContent ? /* @__PURE__ */ jsx52("div", { className: "flex flex-col items-center w-full", children: bodyContent }) : config.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs41("div", { className: "flex flex-col items-center w-full", children: [
+                      /* @__PURE__ */ jsx52(
                         "div",
                         {
                           className: "flex flex-col items-start shrink-0",
@@ -5271,14 +5325,14 @@ function StreamoidSidebar({
                           )
                         }
                       ),
-                      sectionIndex < config.sections.length - 1 ? /* @__PURE__ */ jsx51(HDivider, {}) : null
+                      sectionIndex < config.sections.length - 1 ? /* @__PURE__ */ jsx52(HDivider, {}) : null
                     ] }, section.id))
                   ]
                 }
               ),
-              assistantCta ? /* @__PURE__ */ jsx51(ScAskAgentSlot, { cta: assistantCta, collapsed: true }) : null,
+              assistantCta ? /* @__PURE__ */ jsx52(ScAskAgentSlot, { cta: assistantCta, collapsed: true }) : null,
               preFooterContent,
-              config.bottomItems?.length ? /* @__PURE__ */ jsx51(
+              config.bottomItems?.length ? /* @__PURE__ */ jsx52(
                 "div",
                 {
                   className: "flex flex-col items-center justify-center shrink-0 w-full",
@@ -5298,8 +5352,8 @@ function StreamoidSidebar({
                   )
                 }
               ) : null,
-              /* @__PURE__ */ jsx51(HDivider, { edgeToEdge: true }),
-              appIdentity ? /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx52(HDivider, { edgeToEdge: true }),
+              appIdentity ? /* @__PURE__ */ jsx52(
                 "button",
                 {
                   type: "button",
@@ -5318,7 +5372,7 @@ function StreamoidSidebar({
                   "aria-label": appIdentity.ariaLabel ?? "Switch apps",
                   children: appIdentity.content
                 }
-              ) : profile ? /* @__PURE__ */ jsx51(
+              ) : profile ? /* @__PURE__ */ jsx52(
                 "div",
                 {
                   className: "flex items-center justify-center shrink-0 cursor-pointer",
@@ -5347,7 +5401,7 @@ function StreamoidSidebar({
                     width: 56
                   },
                   children: [
-                    /* @__PURE__ */ jsx51(
+                    /* @__PURE__ */ jsx52(
                       "div",
                       {
                         className: "flex items-center cursor-pointer",
@@ -5359,7 +5413,7 @@ function StreamoidSidebar({
                         children: resolveToggleIcon(toggleIcon, false)
                       }
                     ),
-                    versionText ? /* @__PURE__ */ jsx51(
+                    versionText ? /* @__PURE__ */ jsx52(
                       "p",
                       {
                         className: "text-text-xs-regular text-center truncate",
@@ -5428,7 +5482,7 @@ var ScSidebarShell_default = {
 };
 
 // src/SC-SidebarShell/ScSidebarShell.tsx
-import { Fragment as Fragment16, jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 function ScSidebarWorkspaceTrigger({
   workspaceName,
   workspaceImage,
@@ -5449,7 +5503,7 @@ function ScSidebarWorkspaceTrigger({
       className: `${ScSidebarShell_default.workspaceTrigger} ${expanded ? ScSidebarShell_default.workspaceTriggerExpanded : ScSidebarShell_default.workspaceTriggerCollapsed}${className ? ` ${className}` : ""}`,
       style,
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           ScDp,
           {
             type: workspaceImage ? "image" : "initial",
@@ -5460,8 +5514,8 @@ function ScSidebarWorkspaceTrigger({
           }
         ),
         expanded ? /* @__PURE__ */ jsxs42(Fragment16, { children: [
-          /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.workspaceName, children: workspaceName }),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.workspaceName, children: workspaceName }),
+          /* @__PURE__ */ jsx53(
             SiconDoubleArrow,
             {
               size: 16,
@@ -5489,7 +5543,7 @@ function ScSidebarSearchTrigger({
       onClick,
       className: `${ScSidebarShell_default.searchTrigger} ${expanded ? ScSidebarShell_default.searchTriggerExpanded : ScSidebarShell_default.searchTriggerCollapsed}${className ? ` ${className}` : ""}`,
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           SiconSearch,
           {
             size: expanded ? 16 : 18,
@@ -5497,15 +5551,15 @@ function ScSidebarSearchTrigger({
           }
         ),
         expanded ? /* @__PURE__ */ jsxs42(Fragment16, { children: [
-          /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.searchLabel, children: label }),
-          shortcut ? /* @__PURE__ */ jsx52("kbd", { className: ScSidebarShell_default.shortcut, children: shortcut }) : null
+          /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.searchLabel, children: label }),
+          shortcut ? /* @__PURE__ */ jsx53("kbd", { className: ScSidebarShell_default.shortcut, children: shortcut }) : null
         ] }) : null
       ]
     }
   );
 }
 function AppGridIcon() {
-  return /* @__PURE__ */ jsx52("span", { "aria-hidden": true, className: ScSidebarShell_default.appGridIcon, children: Array.from({ length: 9 }, (_, index) => /* @__PURE__ */ jsx52("span", {}, index)) });
+  return /* @__PURE__ */ jsx53("span", { "aria-hidden": true, className: ScSidebarShell_default.appGridIcon, children: Array.from({ length: 9 }, (_, index) => /* @__PURE__ */ jsx53("span", {}, index)) });
 }
 var COMPACT_APP_LABELS = {
   // `cxo` is the product; `"streamoid"` (the company) is handled separately
@@ -5525,22 +5579,22 @@ function ScSidebarAppIdentity({
   className
 }) {
   const appLabel = label ?? (product === "streamoid" ? "Streamoid" : product);
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "span",
     {
       "aria-label": `Switch Apps. Current app: ${appLabel}`,
       title: "Switch Apps",
       className: `${ScSidebarShell_default.appIdentity} ${expanded ? ScSidebarShell_default.appIdentityExpanded : ScSidebarShell_default.appIdentityCollapsed}${className ? ` ${className}` : ""}`,
       children: expanded ? /* @__PURE__ */ jsxs42(Fragment16, { children: [
-        /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.appWordmark, children: product === "streamoid" ? /* @__PURE__ */ jsx52(ScStreamoidWordmark, { width: 110, height: 16 }) : /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.appWordmark, children: product === "streamoid" ? /* @__PURE__ */ jsx53(ScStreamoidWordmark, { width: 110, height: 16 }) : /* @__PURE__ */ jsx53(
           ScAppcardLogos,
           {
             product,
             style: { height: 16 }
           }
         ) }),
-        /* @__PURE__ */ jsx52(AppGridIcon, {})
-      ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ jsx52(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ jsx52("span", { "aria-hidden": true, className: ScSidebarShell_default.collapsedProductMark, children: collapsedLabel ?? COMPACT_APP_LABELS[product] }))
+        /* @__PURE__ */ jsx53(AppGridIcon, {})
+      ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ jsx53(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ jsx53("span", { "aria-hidden": true, className: ScSidebarShell_default.collapsedProductMark, children: collapsedLabel ?? COMPACT_APP_LABELS[product] }))
     }
   );
 }
@@ -5553,12 +5607,12 @@ function MenuActionRow({
   ariaLabel
 }) {
   const content = /* @__PURE__ */ jsxs42(Fragment16, { children: [
-    /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.rowIcon, children: icon }),
-    /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.rowLabel, children: label }),
-    value != null ? /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.rowValue, children: value }) : null,
-    trailing ? /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.rowTrailing, children: trailing }) : null
+    /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.rowIcon, children: icon }),
+    /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.rowLabel, children: label }),
+    value != null ? /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.rowValue, children: value }) : null,
+    trailing ? /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.rowTrailing, children: trailing }) : null
   ] });
-  return onClick ? /* @__PURE__ */ jsx52(
+  return onClick ? /* @__PURE__ */ jsx53(
     "button",
     {
       type: "button",
@@ -5567,13 +5621,13 @@ function MenuActionRow({
       className: ScSidebarShell_default.actionRow,
       children: content
     }
-  ) : /* @__PURE__ */ jsx52("div", { className: `${ScSidebarShell_default.actionRow} ${ScSidebarShell_default.actionRowStatic}`, children: content });
+  ) : /* @__PURE__ */ jsx53("div", { className: `${ScSidebarShell_default.actionRow} ${ScSidebarShell_default.actionRowStatic}`, children: content });
 }
 function SectionTitle({ children }) {
-  return /* @__PURE__ */ jsx52("h2", { className: ScSidebarShell_default.sectionTitle, children });
+  return /* @__PURE__ */ jsx53("h2", { className: ScSidebarShell_default.sectionTitle, children });
 }
 function ChevronRight() {
-  return /* @__PURE__ */ jsx52("span", { "aria-hidden": true, className: ScSidebarShell_default.chevronRight, children: "\u203A" });
+  return /* @__PURE__ */ jsx53("span", { "aria-hidden": true, className: ScSidebarShell_default.chevronRight, children: "\u203A" });
 }
 function ScWorkspaceAccountMenu({
   workspaceName,
@@ -5613,7 +5667,7 @@ function ScWorkspaceAccountMenu({
       ...props,
       children: [
         /* @__PURE__ */ jsxs42("section", { className: ScSidebarShell_default.section, children: [
-          /* @__PURE__ */ jsx52(SectionTitle, { children: "Workspace" }),
+          /* @__PURE__ */ jsx53(SectionTitle, { children: "Workspace" }),
           /* @__PURE__ */ jsxs42(
             "button",
             {
@@ -5622,7 +5676,7 @@ function ScWorkspaceAccountMenu({
               onClick: onSwitchWorkspace,
               className: ScSidebarShell_default.identityRow,
               children: [
-                /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsx53(
                   ScDp,
                   {
                     type: workspaceImage ? "image" : "initial",
@@ -5633,52 +5687,52 @@ function ScWorkspaceAccountMenu({
                   }
                 ),
                 /* @__PURE__ */ jsxs42("span", { className: ScSidebarShell_default.identityText, children: [
-                  /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.identityName, children: workspaceName }),
+                  /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.identityName, children: workspaceName }),
                   /* @__PURE__ */ jsxs42("span", { className: ScSidebarShell_default.identitySubtitle, children: [
                     normalizedRole,
                     " \xB7 Switch or create"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx52(ChevronRight, {})
+                /* @__PURE__ */ jsx53(ChevronRight, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             MenuActionRow,
             {
-              icon: /* @__PURE__ */ jsx52(SiconTeam4, { size: 20, color: primaryIcon }),
+              icon: /* @__PURE__ */ jsx53(SiconTeam4, { size: 20, color: primaryIcon }),
               label: "Invite Members",
               onClick: onInviteMembers
             }
           ),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             MenuActionRow,
             {
-              icon: /* @__PURE__ */ jsx52(SiconBilling4, { size: 20, color: primaryIcon }),
+              icon: /* @__PURE__ */ jsx53(SiconBilling4, { size: 20, color: primaryIcon }),
               label: "Billing & Usage",
               value: creditsLabel,
               onClick: onBilling
             }
           )
         ] }),
-        /* @__PURE__ */ jsx52("div", { "aria-hidden": true, className: ScSidebarShell_default.divider }),
+        /* @__PURE__ */ jsx53("div", { "aria-hidden": true, className: ScSidebarShell_default.divider }),
         /* @__PURE__ */ jsxs42("section", { className: ScSidebarShell_default.section, children: [
-          /* @__PURE__ */ jsx52(SectionTitle, { children: "Organization" }),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(SectionTitle, { children: "Organization" }),
+          /* @__PURE__ */ jsx53(
             MenuActionRow,
             {
-              icon: /* @__PURE__ */ jsx52(SiconWorkspace, { size: 20, color: primaryIcon }),
+              icon: /* @__PURE__ */ jsx53(SiconWorkspace, { size: 20, color: primaryIcon }),
               label: organizationName || "No organization",
               value: organizationName && organizationRole ? organizationRole : void 0,
               ariaLabel: organizationName ? `Open ${organizationName} organization settings` : void 0,
-              trailing: organizationName ? /* @__PURE__ */ jsx52(ChevronRight, {}) : void 0,
+              trailing: organizationName ? /* @__PURE__ */ jsx53(ChevronRight, {}) : void 0,
               onClick: organizationName ? onOrganizationClick : void 0
             }
           )
         ] }),
-        /* @__PURE__ */ jsx52("div", { "aria-hidden": true, className: ScSidebarShell_default.divider }),
+        /* @__PURE__ */ jsx53("div", { "aria-hidden": true, className: ScSidebarShell_default.divider }),
         /* @__PURE__ */ jsxs42("section", { className: ScSidebarShell_default.section, children: [
-          /* @__PURE__ */ jsx52(SectionTitle, { children: "Account" }),
+          /* @__PURE__ */ jsx53(SectionTitle, { children: "Account" }),
           /* @__PURE__ */ jsxs42(
             "button",
             {
@@ -5687,7 +5741,7 @@ function ScWorkspaceAccountMenu({
               onClick: onAccountClick,
               className: ScSidebarShell_default.identityRow,
               children: [
-                /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsx53(
                   ScDp,
                   {
                     type: accountImage ? "image" : "initial",
@@ -5698,16 +5752,16 @@ function ScWorkspaceAccountMenu({
                   }
                 ),
                 /* @__PURE__ */ jsxs42("span", { className: ScSidebarShell_default.identityText, children: [
-                  /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.identityName, children: accountName }),
-                  accountEmail ? /* @__PURE__ */ jsx52("span", { className: ScSidebarShell_default.identitySubtitle, children: accountEmail }) : null
+                  /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.identityName, children: accountName }),
+                  accountEmail ? /* @__PURE__ */ jsx53("span", { className: ScSidebarShell_default.identitySubtitle, children: accountEmail }) : null
                 ] }),
-                /* @__PURE__ */ jsx52(ChevronRight, {})
+                /* @__PURE__ */ jsx53(ChevronRight, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx52("div", { role: "radiogroup", "aria-label": "Theme", className: ScSidebarShell_default.themePicker, children: themes.map(({ value, label, icon: Icon }) => {
+          /* @__PURE__ */ jsx53("div", { role: "radiogroup", "aria-label": "Theme", className: ScSidebarShell_default.themePicker, children: themes.map(({ value, label, icon: Icon }) => {
             const selected = themeMode === value;
-            return /* @__PURE__ */ jsx52(
+            return /* @__PURE__ */ jsx53(
               "button",
               {
                 type: "button",
@@ -5717,7 +5771,7 @@ function ScWorkspaceAccountMenu({
                 title: label,
                 onClick: () => onThemeModeChange?.(value),
                 className: `${ScSidebarShell_default.themeButton}${selected ? ` ${ScSidebarShell_default.themeButtonSelected}` : ""}`,
-                children: /* @__PURE__ */ jsx52(
+                children: /* @__PURE__ */ jsx53(
                   Icon,
                   {
                     size: 20,
@@ -6104,45 +6158,6 @@ function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap =
   return position;
 }
 
-// src/SC-SidebarShell/ScPopoverArrow.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
-function ScPopoverArrow({
-  arrow,
-  background = "var(--alias-surface-base, #101010)",
-  borderColor = "var(--alias-border-default, #3e3e3e)",
-  size = 12,
-  style
-}) {
-  if (!arrow) return null;
-  const half = size / 2;
-  const onLeftEdge = arrow.side === "left";
-  return /* @__PURE__ */ jsx53(
-    "span",
-    {
-      "aria-hidden": true,
-      "data-streamoid-popover-arrow": arrow.side,
-      style: {
-        position: "absolute",
-        top: arrow.top - half,
-        [onLeftEdge ? "left" : "right"]: -half,
-        width: size,
-        height: size,
-        background,
-        /* Only the two edges that face away from the card. The other two sit
-           under it, where a border would draw a line across the card's own
-           edge. */
-        borderTop: onLeftEdge ? "none" : `1px solid ${borderColor}`,
-        borderRight: onLeftEdge ? "none" : `1px solid ${borderColor}`,
-        borderBottom: onLeftEdge ? `1px solid ${borderColor}` : "none",
-        borderLeft: onLeftEdge ? `1px solid ${borderColor}` : "none",
-        transform: "rotate(45deg)",
-        pointerEvents: "none",
-        ...style
-      }
-    }
-  );
-}
-
 // src/SC-SidebarShell/useStreamoidSidebarPopoverPosition.ts
 import {
   useLayoutEffect as useLayoutEffect2,
@@ -6243,6 +6258,7 @@ function ScSidebarPopover({
   role = "menu",
   ariaLabel,
   testId,
+  backdrop = true,
   className,
   style
 }) {
@@ -6260,41 +6276,44 @@ function ScSidebarPopover({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [onClose]);
   if (typeof document === "undefined") return null;
+  const panel = /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      ref: panelRef,
+      onMouseDown: (event) => event.stopPropagation(),
+      role,
+      "aria-label": ariaLabel,
+      "data-testid": testId,
+      className,
+      style: {
+        ...position,
+        backgroundColor: SURFACE,
+        border: `1px solid ${BORDER}`,
+        borderRadius: RADIUS,
+        boxShadow: "var(--sc-sidebar-popover-shadow, 0 12px 32px rgba(0, 0, 0, 0.24))",
+        zIndex: 50,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx54(ScPopoverArrow, { arrow, background: SURFACE, borderColor: BORDER }),
+        /* @__PURE__ */ jsx54("div", { style: { borderRadius: RADIUS, overflow: "hidden" }, children })
+      ]
+    }
+  );
   return createPortal(
-    /* The backdrop is what makes a click anywhere else dismiss this, without
-       a document-level listener that fires before the opening click has
-       finished and closes the popover as it opens. */
-    /* @__PURE__ */ jsx54(
-      "div",
-      {
-        style: { position: "fixed", inset: 0, zIndex: 40 },
-        onMouseDown: onClose,
-        children: /* @__PURE__ */ jsxs43(
-          "div",
-          {
-            ref: panelRef,
-            onMouseDown: (event) => event.stopPropagation(),
-            role,
-            "aria-label": ariaLabel,
-            "data-testid": testId,
-            className,
-            style: {
-              ...position,
-              backgroundColor: SURFACE,
-              border: `1px solid ${BORDER}`,
-              borderRadius: RADIUS,
-              boxShadow: "var(--sc-sidebar-popover-shadow, 0 12px 32px rgba(0, 0, 0, 0.24))",
-              zIndex: 50,
-              ...style
-            },
-            children: [
-              /* @__PURE__ */ jsx54(ScPopoverArrow, { arrow, background: SURFACE, borderColor: BORDER }),
-              /* @__PURE__ */ jsx54("div", { style: { borderRadius: RADIUS, overflow: "hidden" }, children })
-            ]
-          }
-        )
-      }
-    ),
+    backdrop ? (
+      /* The catcher is what makes a click anywhere else dismiss this, without
+         a document-level listener that fires before the opening click has
+         finished and closes the popover as it opens. */
+      /* @__PURE__ */ jsx54(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 40 },
+          onMouseDown: onClose,
+          children: panel
+        }
+      )
+    ) : panel,
     document.body
   );
 }