@streamoid/ui 0.6.20 → 0.6.22

package/dist/index.js

@@ -26,6 +26,8 @@ __export(index_exports, {
   ProductCollapsedMark: () => ProductCollapsedMark,
   ProductWordmark: () => ProductWordmark,
   SIDEBAR_RESIZE_THRESHOLD_PX: () => SIDEBAR_RESIZE_THRESHOLD_PX,
+  STREAMOID_CHANGELOG_URL: () => STREAMOID_CHANGELOG_URL,
+  STREAMOID_STATUS_PAGE_URL: () => STREAMOID_STATUS_PAGE_URL,
   ScAccess: () => ScAccess,
   ScAppCard: () => ScAppCard,
   ScAppCardForCopilot: () => ScAppCardForCopilot,
@@ -155,8 +157,10 @@ __export(index_exports, {
   StreamoidWorkspaceSwitcher: () => StreamoidWorkspaceSwitcher,
   UsageHistoryMobile: () => UsageHistoryMobile,
   advanceSidebarResizeGesture: () => advanceSidebarResizeGesture,
+  createStreamoidAppSwitchUtilities: () => createStreamoidAppSwitchUtilities,
   formatSubAgentLabel: () => formatSubAgentLabel,
   hasCollapsedMark: () => hasCollapsedMark,
+  useStreamoidSidebarPopoverPosition: () => useStreamoidSidebarPopoverPosition,
   useStreamoidSidebarPreference: () => useStreamoidSidebarPreference,
   useStreamoidThemePreference: () => useStreamoidThemePreference
 });
@@ -379,6 +383,43 @@ function ScStreamoidMascot({
 
 // src/SC-AppSwitch/ScAppSwitchPanel.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var STREAMOID_CHANGELOG_URL = "https://doc.clickup.com/3414296/p/h/3868r-26044/13a22b6f796b2c8";
+var STREAMOID_STATUS_PAGE_URL = "https://status.streamoid.com/";
+function openExternal(url) {
+  if (typeof window !== "undefined") {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}
+function createStreamoidAppSwitchUtilities(utilities) {
+  const before = (action) => () => {
+    utilities.onClose?.();
+    action();
+  };
+  return [
+    {
+      key: "changelog",
+      label: "Changelog",
+      trailingText: utilities.appVersion,
+      external: true,
+      onSelect: before(
+        () => openExternal(utilities.changelogUrl ?? STREAMOID_CHANGELOG_URL)
+      )
+    },
+    {
+      key: "status",
+      label: "Status Page",
+      external: true,
+      onSelect: before(
+        () => openExternal(utilities.statusPageUrl ?? STREAMOID_STATUS_PAGE_URL)
+      )
+    },
+    {
+      key: "support",
+      label: "Help and Support",
+      onSelect: before(utilities.onHelpAndSupport)
+    }
+  ];
+}
 var T = {
   primary: "var(--alias-text---icons-primary, #f5f5f5)",
   secondary: "var(--alias-text---icons-secondary, #dadada)",
@@ -597,12 +638,14 @@ var ScAppSwitchSystemRow = ({ item }) => {
 };
 var ScAppSwitchPanel = ({
   apps,
-  systemItems = [],
+  systemItems,
+  utilities,
   systemLabel,
   className,
   style
 }) => {
   const ordered = [...apps].sort((a, b) => orderIndex(a) - orderIndex(b));
+  const resolvedSystemItems = systemItems ?? (utilities ? createStreamoidAppSwitchUtilities(utilities) : []);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
@@ -617,7 +660,7 @@ var ScAppSwitchPanel = ({
       },
       children: [
         ordered.map((app) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScAppSwitchRow, { item: app }, app.key)),
-        systemItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        resolvedSystemItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             style: {
@@ -642,7 +685,7 @@ var ScAppSwitchPanel = ({
                   children: systemLabel
                 }
               ) : null,
-              systemItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScAppSwitchSystemRow, { item }, item.key))
+              resolvedSystemItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScAppSwitchSystemRow, { item }, item.key))
             ]
           }
         ) : null
@@ -4288,6 +4331,7 @@ function StreamoidSidebar({
   expandedLogo,
   collapsedLogo,
   profile,
+  appIdentity,
   versionText = "v1.0.0",
   toggleIcon,
   toggleInProfile = false,
@@ -4347,6 +4391,7 @@ function StreamoidSidebar({
           /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
             "div",
             {
+              "data-streamoid-sidebar-card": true,
               className: "flex flex-col h-full relative shrink-0",
               style: {
                 backgroundColor: "var(--alias-surface-base)",
@@ -4542,7 +4587,26 @@ function StreamoidSidebar({
                   }
                 ) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(HDivider, { edgeToEdge: true }),
-                profile ? toggleInProfile && !effectiveHideFooter ? (
+                appIdentity ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex items-center shrink-0 w-full",
+                    style: {
+                      minWidth: 0,
+                      minHeight: 48,
+                      padding: "var(--spacing-md) var(--spacing-xl)",
+                      border: 0,
+                      borderRadius: "var(--radius-xl)",
+                      background: "transparent",
+                      color: "inherit",
+                      cursor: "pointer"
+                    },
+                    onClick: appIdentity.onClick,
+                    "aria-label": appIdentity.ariaLabel ?? "Switch apps",
+                    children: appIdentity.content
+                  }
+                ) : profile ? toggleInProfile && !effectiveHideFooter ? (
                   /* Footer row: profile and collapse toggle are two SEPARATE
                      interactive units side by side (own rounded hover bg each). */
                   /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
@@ -4710,6 +4774,7 @@ function StreamoidSidebar({
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "div",
           {
+            "data-streamoid-sidebar-card": true,
             className: "flex flex-col h-full items-center justify-center relative shrink-0",
             style: {
               backgroundColor: "var(--alias-surface-base)",
@@ -4857,7 +4922,26 @@ function StreamoidSidebar({
                 }
               ) : null,
               /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(HDivider, { edgeToEdge: true }),
-              profile ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              appIdentity ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center justify-center shrink-0",
+                  style: {
+                    width: 48,
+                    height: 48,
+                    padding: "var(--spacing-md)",
+                    border: 0,
+                    borderRadius: "var(--radius-3xl)",
+                    background: "transparent",
+                    color: "inherit",
+                    cursor: "pointer"
+                  },
+                  onClick: appIdentity.onClick,
+                  "aria-label": appIdentity.ariaLabel ?? "Switch apps",
+                  children: appIdentity.content
+                }
+              ) : profile ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 "div",
                 {
                   className: "flex items-center justify-center shrink-0 cursor-pointer",
@@ -5235,7 +5319,7 @@ function ScWorkspaceAccountMenu({
                   Icon,
                   {
                     size: 20,
-                    color: selected ? "var(--alias-text---icons-onfill, #fff)" : mutedIcon
+                    color: selected ? "#fff" : mutedIcon
                   }
                 )
               },
@@ -5446,8 +5530,73 @@ function useStreamoidSidebarPreference(options = {}) {
   return { expanded, setExpanded, toggle };
 }
 
-// src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
+// src/SC-SidebarShell/useStreamoidSidebarPopoverPosition.ts
 var import_react14 = require("react");
+var VIEWPORT_INSET = 16;
+function useStreamoidSidebarPopoverPosition(sidebarRef, {
+  placement,
+  width,
+  gap = 8,
+  inset = 24
+}) {
+  const [position, setPosition] = (0, import_react14.useState)({
+    position: "fixed",
+    left: 0,
+    top: 0,
+    width,
+    maxWidth: `calc(100vw - ${VIEWPORT_INSET * 2}px)`,
+    maxHeight: `calc(100dvh - ${VIEWPORT_INSET * 2}px)`,
+    visibility: "hidden"
+  });
+  (0, import_react14.useLayoutEffect)(() => {
+    const sidebar = sidebarRef.current;
+    if (!sidebar || typeof window === "undefined") return;
+    const card = (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
+      "[data-streamoid-sidebar-card]"
+    )) ?? sidebar;
+    const measure = () => {
+      const bounds = card.getBoundingClientRect();
+      const availableWidth = Math.max(0, window.innerWidth - VIEWPORT_INSET * 2);
+      const panelWidth = Math.min(width, availableWidth);
+      const preferredLeft = bounds.right + gap;
+      const maximumLeft = Math.max(
+        VIEWPORT_INSET,
+        window.innerWidth - panelWidth - VIEWPORT_INSET
+      );
+      const left = Math.max(
+        VIEWPORT_INSET,
+        Math.min(preferredLeft, maximumLeft)
+      );
+      const vertical = placement === "top-right" ? { top: Math.max(VIEWPORT_INSET, bounds.top + inset) } : {
+        bottom: Math.max(
+          VIEWPORT_INSET,
+          window.innerHeight - bounds.bottom + inset
+        )
+      };
+      setPosition({
+        position: "fixed",
+        left,
+        width: panelWidth,
+        maxWidth: `calc(100vw - ${VIEWPORT_INSET * 2}px)`,
+        maxHeight: `calc(100dvh - ${VIEWPORT_INSET * 2}px)`,
+        visibility: "visible",
+        ...vertical
+      });
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(card);
+    return () => {
+      window.removeEventListener("resize", measure);
+      observer?.disconnect();
+    };
+  }, [gap, inset, placement, sidebarRef, width]);
+  return position;
+}
+
+// src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
+var import_react15 = require("react");
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.module.css
 var ScArtifaxSidebar_default = {
@@ -5469,6 +5618,8 @@ var ScArtifaxSidebar_default = {
   sectionChevron: "ScArtifaxSidebar_sectionChevron",
   profileRow: "ScArtifaxSidebar_profileRow",
   profileMain: "ScArtifaxSidebar_profileMain",
+  appIdentityMain: "ScArtifaxSidebar_appIdentityMain",
+  appIdentityCollapsed: "ScArtifaxSidebar_appIdentityCollapsed",
   profileRowCollapsed: "ScArtifaxSidebar_profileRowCollapsed",
   profileAvatar: "ScArtifaxSidebar_profileAvatar",
   profileInfo: "ScArtifaxSidebar_profileInfo",
@@ -5536,6 +5687,7 @@ var ScArtifaxSidebar = ({
   creditWarning,
   assistantCta,
   profile,
+  appIdentity,
   toggleIcon,
   hideToggle = false,
   openSections,
@@ -5551,7 +5703,7 @@ var ScArtifaxSidebar = ({
     }
   };
   const isControlled = !!openSections;
-  const [internalOpen, setInternalOpen] = (0, import_react14.useState)(
+  const [internalOpen, setInternalOpen] = (0, import_react15.useState)(
     () => {
       const init = {};
       sections.forEach((s) => {
@@ -5561,7 +5713,7 @@ var ScArtifaxSidebar = ({
     }
   );
   const isSectionOpen = (id) => isControlled ? !!openSections?.[id] : !!internalOpen[id];
-  const handleSectionToggle = (0, import_react14.useCallback)(
+  const handleSectionToggle = (0, import_react15.useCallback)(
     (id) => {
       const next = !isSectionOpen(id);
       if (isControlled) {
@@ -5603,72 +5755,88 @@ var ScArtifaxSidebar = ({
               onExpandedChange: changeExpanded
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.container + " " + ScArtifaxSidebar_default.expanded, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { "aria-hidden": "true", className: ScArtifaxSidebar_default.borderOverlayExpanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.body, children: [
-              expandedLogo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.logoUnitExpanded, children: expandedLogo }) : null,
-              sections.map((section, idx) => {
-                const open = section.label ? section.collapsible !== false ? isSectionOpen(section.id) : true : true;
-                const showHeader = !!section.label;
-                const canToggle = showHeader && section.collapsible !== false;
-                return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
-                  idx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.sectionContainer, children: [
-                    showHeader ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-                      SectionHeader2,
-                      {
-                        label: section.label,
-                        open,
-                        onToggle: canToggle ? () => handleSectionToggle(section.id) : void 0
-                      }
-                    ) : null,
-                    open ? section.items.map(
-                      (item) => renderMenuItem2(item, section.id)
-                    ) : null
-                  ] })
-                ] }, section.id);
-              })
-            ] }),
-            creditWarning ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.creditWarningSlot, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-              CreditWarningBanner,
-              {
-                availableCredits: creditWarning.availableCredits,
-                remainingPct: creditWarning.remainingPct,
-                level: creditWarning.level ?? "danger",
-                onBuyCredits: creditWarning.onBuyCredits,
-                expanded: true
-              }
-            ) }) : null,
-            assistantCta ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScAskAgentSlot, { cta: assistantCta }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.profileRow, children: [
-              profile ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  className: ScArtifaxSidebar_default.profileMain,
-                  onClick: profile.onClick,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.profileAvatar, children: profile.avatar }),
-                    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.profileInfo, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ScArtifaxSidebar_default.profileName, children: profile.name }),
-                      profile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ScArtifaxSidebar_default.profileSubtitle, children: profile.subtitle }) : null
-                    ] })
-                  ]
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ScArtifaxSidebar_default.profileMain, "aria-hidden": "true" }),
-              !hideToggle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: ScArtifaxSidebar_default.footerToggle,
-                  onClick: onToggle,
-                  "aria-label": "Collapse sidebar",
-                  children: resolveToggleIcon2(toggleIcon, true)
-                }
-              ) : null
-            ] })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+            "div",
+            {
+              "data-streamoid-sidebar-card": true,
+              className: ScArtifaxSidebar_default.container + " " + ScArtifaxSidebar_default.expanded,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { "aria-hidden": "true", className: ScArtifaxSidebar_default.borderOverlayExpanded }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.body, children: [
+                  expandedLogo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.logoUnitExpanded, children: expandedLogo }) : null,
+                  sections.map((section, idx) => {
+                    const open = section.label ? section.collapsible !== false ? isSectionOpen(section.id) : true : true;
+                    const showHeader = !!section.label;
+                    const canToggle = showHeader && section.collapsible !== false;
+                    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+                      idx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.sectionContainer, children: [
+                        showHeader ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                          SectionHeader2,
+                          {
+                            label: section.label,
+                            open,
+                            onToggle: canToggle ? () => handleSectionToggle(section.id) : void 0
+                          }
+                        ) : null,
+                        open ? section.items.map(
+                          (item) => renderMenuItem2(item, section.id)
+                        ) : null
+                      ] })
+                    ] }, section.id);
+                  })
+                ] }),
+                creditWarning ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.creditWarningSlot, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  CreditWarningBanner,
+                  {
+                    availableCredits: creditWarning.availableCredits,
+                    remainingPct: creditWarning.remainingPct,
+                    level: creditWarning.level ?? "danger",
+                    onBuyCredits: creditWarning.onBuyCredits,
+                    expanded: true
+                  }
+                ) }) : null,
+                assistantCta ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScAskAgentSlot, { cta: assistantCta }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.profileRow, children: [
+                  appIdentity ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: ScArtifaxSidebar_default.appIdentityMain,
+                      onClick: appIdentity.onClick,
+                      "aria-label": appIdentity.ariaLabel ?? "Switch apps",
+                      children: appIdentity.content
+                    }
+                  ) : profile ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      className: ScArtifaxSidebar_default.profileMain,
+                      onClick: profile.onClick,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.profileAvatar, children: profile.avatar }),
+                        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.profileInfo, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ScArtifaxSidebar_default.profileName, children: profile.name }),
+                          profile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ScArtifaxSidebar_default.profileSubtitle, children: profile.subtitle }) : null
+                        ] })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: ScArtifaxSidebar_default.profileMain, "aria-hidden": "true" }),
+                  !hideToggle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: ScArtifaxSidebar_default.footerToggle,
+                      onClick: onToggle,
+                      "aria-label": "Collapse sidebar",
+                      children: resolveToggleIcon2(toggleIcon, true)
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          )
         ]
       }
     );
@@ -5686,57 +5854,73 @@ var ScArtifaxSidebar = ({
             onExpandedChange: changeExpanded
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.container + " " + ScArtifaxSidebar_default.collapsed, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { "aria-hidden": "true", className: ScArtifaxSidebar_default.borderOverlayCollapsed }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.body + " " + ScArtifaxSidebar_default.bodyCollapsed, children: [
-            collapsedLogo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.logoUnitCollapsed, children: collapsedLogo }) : null,
-            sections.map((section, idx) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
-              idx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.sectionContainerCollapsed, children: section.items.map((item) => renderMenuItem2(item, section.id)) })
-            ] }, section.id))
-          ] }),
-          creditWarning ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.creditWarningSlot, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            CreditWarningBanner,
-            {
-              availableCredits: creditWarning.availableCredits,
-              remainingPct: creditWarning.remainingPct,
-              level: creditWarning.level ?? "danger",
-              onBuyCredits: creditWarning.onBuyCredits,
-              expanded: false
-            }
-          ) }) : null,
-          assistantCta ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScAskAgentSlot, { cta: assistantCta, collapsed: true }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.footerCollapsed, children: [
-            profile ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-              "button",
-              {
-                type: "button",
-                className: ScArtifaxSidebar_default.profileRowCollapsed,
-                onClick: profile.onClick,
-                "aria-label": profile.name,
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.profileAvatar, children: profile.avatar })
-              }
-            ) : null,
-            !hideToggle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-              "button",
-              {
-                type: "button",
-                className: ScArtifaxSidebar_default.footerToggle,
-                onClick: onToggle,
-                "aria-label": "Expand sidebar",
-                children: resolveToggleIcon2(toggleIcon, false)
-              }
-            ) : null
-          ] })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          "div",
+          {
+            "data-streamoid-sidebar-card": true,
+            className: ScArtifaxSidebar_default.container + " " + ScArtifaxSidebar_default.collapsed,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { "aria-hidden": "true", className: ScArtifaxSidebar_default.borderOverlayCollapsed }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.body + " " + ScArtifaxSidebar_default.bodyCollapsed, children: [
+                collapsedLogo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.logoUnitCollapsed, children: collapsedLogo }) : null,
+                sections.map((section, idx) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+                  idx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.sectionContainerCollapsed, children: section.items.map((item) => renderMenuItem2(item, section.id)) })
+                ] }, section.id))
+              ] }),
+              creditWarning ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.creditWarningSlot, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                CreditWarningBanner,
+                {
+                  availableCredits: creditWarning.availableCredits,
+                  remainingPct: creditWarning.remainingPct,
+                  level: creditWarning.level ?? "danger",
+                  onBuyCredits: creditWarning.onBuyCredits,
+                  expanded: false
+                }
+              ) }) : null,
+              assistantCta ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScAskAgentSlot, { cta: assistantCta, collapsed: true }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScHDivider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: ScArtifaxSidebar_default.footerCollapsed, children: [
+                appIdentity ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: ScArtifaxSidebar_default.appIdentityCollapsed,
+                    onClick: appIdentity.onClick,
+                    "aria-label": appIdentity.ariaLabel ?? "Switch apps",
+                    children: appIdentity.content
+                  }
+                ) : profile ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: ScArtifaxSidebar_default.profileRowCollapsed,
+                    onClick: profile.onClick,
+                    "aria-label": profile.name,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: ScArtifaxSidebar_default.profileAvatar, children: profile.avatar })
+                  }
+                ) : null,
+                !hideToggle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: ScArtifaxSidebar_default.footerToggle,
+                    onClick: onToggle,
+                    "aria-label": "Expand sidebar",
+                    children: resolveToggleIcon2(toggleIcon, false)
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
 };
 
 // src/SC-Catalogix-Sidebar/ScCatalogixSidebar.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/SC-Sidebar Switch menu/ScSidebarSwitchMenu.module.css
 var ScSidebarSwitchMenu_default = {
@@ -6378,7 +6562,7 @@ var ScCatalogixSidebar = ({
   className,
   style
 }) => {
-  const [appListOpen, setAppListOpen] = (0, import_react15.useState)(false);
+  const [appListOpen, setAppListOpen] = (0, import_react16.useState)(false);
   const handleSwitch = () => {
     setAppListOpen((prev) => !prev);
     onLogoClick?.();
@@ -6621,7 +6805,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_icons42 = require("@streamoid/icons");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var PRIMARY_ICON = "var(--alias-text---icons-primary)";
@@ -6812,12 +6996,12 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = (0, import_react16.useRef)(null);
+  const modalRef = (0, import_react17.useRef)(null);
   const title = config?.title || "Switch workspace";
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -8228,7 +8412,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_icons62 = require("@streamoid/icons");
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -8269,7 +8453,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = (0, import_react17.useState)(false);
+  const [internalHover, setInternalHover] = (0, import_react18.useState)(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -8397,7 +8581,7 @@ function ScWorkspaceSwitchCard({
 var NscWorkspaceSwitch = ScWorkspaceSwitchCard;
 
 // src/SC-Modal/ScModal.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/SC-Modal/ScModal.module.css
@@ -8419,7 +8603,7 @@ var ScModal = ({
   closeOnBackdrop = true,
   closeOnEsc = true
 }) => {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -8452,7 +8636,7 @@ var ScModal = ({
 };
 
 // src/SC-Drawer/ScDrawer.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/SC-Drawer/ScDrawer.module.css
@@ -8480,8 +8664,8 @@ var ScDrawer = ({
   backdrop = false,
   zIndex
 }) => {
-  const panelRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useEffect)(() => {
+  const panelRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
       if (closeOnEsc && e.key === "Escape") onClose?.();
@@ -8579,7 +8763,7 @@ var ScTabs = ({
 };
 
 // src/SC-Counter/ScCounter.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_icons63 = require("@streamoid/icons");
 
 // src/SC-Counter/ScCounter.module.css
@@ -8601,7 +8785,7 @@ var ScCounter = ({
   className,
   style
 }) => {
-  const [showInput, setShowInput] = (0, import_react20.useState)(false);
+  const [showInput, setShowInput] = (0, import_react21.useState)(false);
   const set = (n) => {
     let v = n;
     if (min !== void 0) v = Math.max(min, v);
@@ -9690,7 +9874,7 @@ var ScSelectionList = ({
 };
 
 // src/SC-textArea/ScTextArea.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/SC-textArea/ScTextArea.module.css
 var ScTextArea_default = {
@@ -9720,7 +9904,7 @@ var ScTextArea = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = (0, import_react21.useState)(false);
+  const [focused, setFocused] = (0, import_react22.useState)(false);
   const derivedState = state ?? (props.disabled ? "disabled" : focused ? "active" : (props.value !== void 0 ? String(props.value).length > 0 : false) ? "filled" : "default");
   const stateClass = ScTextArea_default["state-" + derivedState];
   const labelGroupClass = ScTextArea_default["label-group-" + (labelGroup || "none")];
@@ -9762,7 +9946,7 @@ var ScTextArea = ({
 };
 
 // src/SC-select/ScSelect.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/SC-select/ScSelect.module.css
 var ScSelect_default = {
@@ -9799,9 +9983,9 @@ var ScSelect = (props) => {
     disabled = false,
     className
   } = props;
-  const [open, setOpen] = (0, import_react22.useState)(false);
-  const rootRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const rootRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
@@ -9892,7 +10076,7 @@ var ScSelect = (props) => {
 };
 
 // src/SC-fileField/ScFileField.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/SC-fileField/ScFileField.module.css
 var ScFileField_default = {
@@ -9930,7 +10114,7 @@ var ScFileField = (props) => {
     label,
     className
   } = props;
-  const inputRef = (0, import_react23.useRef)(null);
+  const inputRef = (0, import_react24.useRef)(null);
   const hasFile = Boolean(fileName);
   const isUploading = Boolean(uploading);
   const clampedProgress = Math.max(0, Math.min(100, progress));
@@ -10049,7 +10233,7 @@ var ScFileField = (props) => {
 };
 
 // src/SC-mediaApproval/ScMediaApproval.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/SC-mediaApproval/ScMediaApproval.module.css
 var ScMediaApproval_default = {
@@ -10096,9 +10280,9 @@ var ScMediaApproval = (props) => {
     className
   } = props;
   const total = mediaUrls.length;
-  const [index, setIndex] = (0, import_react24.useState)(activeIndex ?? 0);
-  const [mediaLoading, setMediaLoading] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const [index, setIndex] = (0, import_react25.useState)(activeIndex ?? 0);
+  const [mediaLoading, setMediaLoading] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     if (typeof activeIndex === "number") {
       setIndex(activeIndex);
     }
@@ -10233,7 +10417,7 @@ var ScMediaApproval = (props) => {
 };
 
 // src/SC-mediaSelect/ScMediaSelect.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/SC-mediaSelect/ScMediaSelect.module.css
 var ScMediaSelect_default = {
@@ -10289,7 +10473,7 @@ var ScMediaSelect = (props) => {
   } = props;
   const total = items.length;
   const resolvedMax = typeof max === "number" ? max : total;
-  const selectedSet = (0, import_react25.useMemo)(() => new Set(selected), [selected]);
+  const selectedSet = (0, import_react26.useMemo)(() => new Set(selected), [selected]);
   const selectedCount = selectedSet.size;
   let countLabel = selectedCount + " of " + total + " selected";
   if (min > 0) countLabel += " (min " + min + ")";
@@ -10358,7 +10542,7 @@ var ScMediaSelect = (props) => {
 };
 
 // src/SC-todoList/ScTodoList.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/SC-todoList/ScTodoList.module.css
 var ScTodoList_default = {
@@ -10391,9 +10575,9 @@ var ScTodoList = ({
   addPlaceholder = "Add an item",
   className
 }) => {
-  const [editingId, setEditingId] = (0, import_react26.useState)(null);
-  const [editValue, setEditValue] = (0, import_react26.useState)("");
-  const [newValue, setNewValue] = (0, import_react26.useState)("");
+  const [editingId, setEditingId] = (0, import_react27.useState)(null);
+  const [editValue, setEditValue] = (0, import_react27.useState)("");
+  const [newValue, setNewValue] = (0, import_react27.useState)("");
   const total = items.length;
   const completed = items.filter((i) => i.status === "completed").length;
   const startEditing = (item) => {
@@ -11247,7 +11431,7 @@ var ScWorkspaceSwitchMobileV2 = ({
 };
 
 // src/SC-imageField/ScImageField.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/SC-imageField/ScImageField.module.css
 var ScImageField_default = {
@@ -11274,7 +11458,7 @@ var ScImageField = ({
   onRemove,
   className
 }) => {
-  const inputRef = (0, import_react27.useRef)(null);
+  const inputRef = (0, import_react28.useRef)(null);
   const hasImage = !!imagePreview;
   function handleClick() {
     if (!hasImage) {
@@ -11510,7 +11694,7 @@ var ScPlanDetailsCardMobile = ({
 };
 
 // src/SC-ProfilePopup/ScProfilePopup.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/SC-ProfilePopup/ScProfilePopup.module.css
 var ScProfilePopup_default = {
@@ -11544,7 +11728,7 @@ var activateOnKey = (handler) => (event) => {
     handler();
   }
 };
-var ScProfilePopup = (0, import_react28.forwardRef)(
+var ScProfilePopup = (0, import_react29.forwardRef)(
   ({
     name = "Chris Hemsworth",
     email = "chris@kepler.com",