@streamoid/ui 0.6.30 → 0.6.31

package/dist/index.js

@@ -165,10 +165,13 @@ __export(index_exports, {
   createStreamoidAppSwitchUtilities: () => createStreamoidAppSwitchUtilities,
   formatSubAgentLabel: () => formatSubAgentLabel,
   hasCollapsedMark: () => hasCollapsedMark,
+  resolveAnchoredPopoverPosition: () => resolveAnchoredPopoverPosition,
   resolvePanelResize: () => resolvePanelResize,
   resolvePanelResizeKey: () => resolvePanelResizeKey,
+  scAppSwitchOrder: () => scAppSwitchOrder,
   streamoidAppSwitchTagline: () => streamoidAppSwitchTagline,
   streamoidChangelogUrl: () => streamoidChangelogUrl,
+  useStreamoidAnchoredPopoverPosition: () => useStreamoidAnchoredPopoverPosition,
   useStreamoidPanelWidth: () => useStreamoidPanelWidth,
   useStreamoidSidebarPopoverPosition: () => useStreamoidSidebarPopoverPosition,
   useStreamoidSidebarPreference: () => useStreamoidSidebarPreference,
@@ -399,21 +402,27 @@ function orderIndex(item) {
   const index = productBrandIndex(item.key, item.name);
   return index === -1 ? PRODUCT_BRANDS.length : index;
 }
+function scAppSwitchOrder(apps) {
+  return [...apps].sort((a, b) => orderIndex(a) - orderIndex(b));
+}
 var ScAppSwitchRow = ({
   item
 }) => {
   const [hover, setHover] = (0, import_react.useState)(false);
   const [focused, setFocused] = (0, import_react.useState)(false);
-  const interactive = hover || focused;
+  const current = item.current === true;
+  const interactive = !current && (hover || focused);
   const brand = matchProductBrand(item.key, item.name);
   const description = rowDescription(item, brand);
-  const labelColor = interactive ? T.primary : T.secondary;
+  const labelColor = interactive || current ? T.primary : T.secondary;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       type: "button",
-      "aria-label": `Switch to ${item.name}`,
-      onClick: item.onSelect,
+      "aria-label": current ? `${item.name}, current app` : `Switch to ${item.name}`,
+      "aria-current": current ? "true" : void 0,
+      "aria-disabled": current ? true : void 0,
+      onClick: current ? void 0 : item.onSelect,
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       onFocus: () => setFocused(true),
@@ -425,12 +434,16 @@ var ScAppSwitchRow = ({
         width: "100%",
         height: 60,
         padding: "var(--spacing-md, 8px) var(--spacing-xl, 12px) var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
-        background: interactive ? "var(--alias-fill-neutral-neutral, #f5f5f5)" : "transparent",
+        /* A FILL, NOT A SURFACE, for the selected row: every
+           `--alias-surface-*` token is #ffffff in the light theme (elevation
+           there is shadow and border, which a 60px row inside a flyout has
+           neither of), so a surface token would make it invisible on light. */
+        background: current ? "var(--alias-fill-neutral-neutralselected, #ededed)" : interactive ? "var(--alias-fill-neutral-neutral, #f5f5f5)" : "transparent",
         border: "1px solid transparent",
         borderRadius: "var(--radius-xl, 12px)",
         boxShadow: focused ? "inset 0 0 0 1px var(--alias-border-default, #cfcfcf)" : "none",
         outline: "none",
-        cursor: "pointer",
+        cursor: current ? "default" : "pointer",
         fontFamily: T.font,
         transition: "background-color 120ms ease, box-shadow 120ms ease"
       },
@@ -528,10 +541,10 @@ var ScAppSwitchRow = ({
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
-              opacity: interactive ? 1 : 0.45,
+              opacity: current || interactive ? 1 : 0.45,
               transition: "opacity 120ms ease"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.SiconRight, { size: 24, color: "var(--alias-text---icons-primary)" })
+            children: current ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.SiconCheck, { size: 24, color: "var(--alias-text---icons-primary)" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.SiconRight, { size: 24, color: "var(--alias-text---icons-primary)" })
           }
         )
       ]
@@ -598,7 +611,7 @@ var ScAppSwitchPanel = ({
   className,
   style
 }) => {
-  const ordered = [...apps].sort((a, b) => orderIndex(a) - orderIndex(b));
+  const ordered = scAppSwitchOrder(apps);
   const resolvedSystemItems = systemItems ?? (utilities ? createStreamoidAppSwitchUtilities(utilities) : []);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
@@ -5829,8 +5842,95 @@ function useStreamoidSidebarPreference(options = {}) {
   return { expanded, setExpanded, toggle };
 }
 
-// src/SC-SidebarShell/useStreamoidSidebarPopoverPosition.ts
+// src/SC-SidebarShell/useStreamoidAnchoredPopoverPosition.ts
 var import_react16 = require("react");
+var DEFAULT_GAP = 8;
+var DEFAULT_INSET = 16;
+function resolveAnchoredPopoverPosition({
+  anchor,
+  viewportWidth,
+  viewportHeight,
+  width,
+  height,
+  gap,
+  inset
+}) {
+  const available = Math.max(0, viewportWidth - inset * 2);
+  const panelWidth = Math.min(width, available);
+  const rightOfAnchor = anchor.right + gap;
+  const leftOfAnchor = anchor.left - gap - panelWidth;
+  const fitsRight = rightOfAnchor + panelWidth <= viewportWidth - inset;
+  const preferredLeft = fitsRight ? rightOfAnchor : leftOfAnchor >= inset ? leftOfAnchor : rightOfAnchor;
+  const left = Math.max(
+    inset,
+    Math.min(preferredLeft, Math.max(inset, viewportWidth - panelWidth - inset))
+  );
+  const panelHeight = height ?? 0;
+  const downwardTop = anchor.top;
+  const fitsDown = downwardTop + panelHeight <= viewportHeight - inset;
+  const upwardTop = anchor.bottom - panelHeight;
+  const preferredTop = fitsDown ? downwardTop : upwardTop;
+  const top = Math.max(
+    inset,
+    Math.min(preferredTop, Math.max(inset, viewportHeight - panelHeight - inset))
+  );
+  return { left, top, width: panelWidth };
+}
+function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap = DEFAULT_GAP, inset = DEFAULT_INSET }) {
+  const [position, setPosition] = (0, import_react16.useState)({
+    position: "fixed",
+    left: 0,
+    top: 0,
+    width,
+    maxWidth: `calc(100vw - ${inset * 2}px)`,
+    maxHeight: `calc(100dvh - ${inset * 2}px)`,
+    visibility: "hidden"
+  });
+  (0, import_react16.useLayoutEffect)(() => {
+    const anchor = anchorRef.current;
+    if (!anchor || typeof window === "undefined") return;
+    const measure = () => {
+      const bounds = anchor.getBoundingClientRect();
+      const panelHeight = panelRef.current?.offsetHeight;
+      const { left, top, width: panelWidth } = resolveAnchoredPopoverPosition({
+        anchor: bounds,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        width,
+        height: panelHeight,
+        gap,
+        inset
+      });
+      const next = {
+        position: "fixed",
+        left,
+        top,
+        width: panelWidth,
+        maxWidth: `calc(100vw - ${inset * 2}px)`,
+        maxHeight: `calc(100dvh - ${inset * 2}px)`,
+        visibility: "visible"
+      };
+      setPosition(
+        (prev) => prev.left === next.left && prev.top === next.top && prev.width === next.width && prev.visibility === next.visibility ? prev : next
+      );
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    resizeObserver?.observe(anchor);
+    if (panelRef.current) resizeObserver?.observe(panelRef.current);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+      resizeObserver?.disconnect();
+    };
+  }, [anchorRef, panelRef, width, gap, inset]);
+  return position;
+}
+
+// src/SC-SidebarShell/useStreamoidSidebarPopoverPosition.ts
+var import_react17 = require("react");
 var VIEWPORT_INSET = 16;
 function useStreamoidSidebarPopoverPosition(sidebarRef, {
   placement,
@@ -5838,7 +5938,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
   gap = 8,
   inset = 0
 }) {
-  const [position, setPosition] = (0, import_react16.useState)({
+  const [position, setPosition] = (0, import_react17.useState)({
     position: "fixed",
     left: 0,
     top: 0,
@@ -5847,7 +5947,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
     maxHeight: `calc(100dvh - ${VIEWPORT_INSET * 2}px)`,
     visibility: "hidden"
   });
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     const sidebar = sidebarRef.current;
     if (!sidebar || typeof window === "undefined") return;
     const findCard = () => (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
@@ -5908,7 +6008,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
 }
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.module.css
 var ScArtifaxSidebar_default = {
@@ -6015,7 +6115,7 @@ var ScArtifaxSidebar = ({
     }
   };
   const isControlled = !!openSections;
-  const [internalOpen, setInternalOpen] = (0, import_react17.useState)(
+  const [internalOpen, setInternalOpen] = (0, import_react18.useState)(
     () => {
       const init = {};
       sections.forEach((s) => {
@@ -6025,7 +6125,7 @@ var ScArtifaxSidebar = ({
     }
   );
   const isSectionOpen = (id) => isControlled ? !!openSections?.[id] : !!internalOpen[id];
-  const handleSectionToggle = (0, import_react17.useCallback)(
+  const handleSectionToggle = (0, import_react18.useCallback)(
     (id) => {
       const next = !isSectionOpen(id);
       if (isControlled) {
@@ -6232,7 +6332,7 @@ var ScArtifaxSidebar = ({
 };
 
 // src/SC-Catalogix-Sidebar/ScCatalogixSidebar.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/SC-Sidebar Switch menu/ScSidebarSwitchMenu.module.css
 var ScSidebarSwitchMenu_default = {
@@ -6874,7 +6974,7 @@ var ScCatalogixSidebar = ({
   className,
   style
 }) => {
-  const [appListOpen, setAppListOpen] = (0, import_react18.useState)(false);
+  const [appListOpen, setAppListOpen] = (0, import_react19.useState)(false);
   const handleSwitch = () => {
     setAppListOpen((prev) => !prev);
     onLogoClick?.();
@@ -7117,7 +7217,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_icons42 = require("@streamoid/icons");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var PRIMARY_ICON = "var(--alias-text---icons-primary)";
@@ -7308,12 +7408,12 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = (0, import_react19.useRef)(null);
+  const modalRef = (0, import_react20.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_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -8724,7 +8824,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_icons62 = require("@streamoid/icons");
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -8765,7 +8865,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = (0, import_react20.useState)(false);
+  const [internalHover, setInternalHover] = (0, import_react21.useState)(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -8893,7 +8993,7 @@ function ScWorkspaceSwitchCard({
 var NscWorkspaceSwitch = ScWorkspaceSwitchCard;
 
 // src/SC-Modal/ScModal.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/SC-Modal/ScModal.module.css
@@ -8915,7 +9015,7 @@ var ScModal = ({
   closeOnBackdrop = true,
   closeOnEsc = true
 }) => {
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -8948,7 +9048,7 @@ var ScModal = ({
 };
 
 // src/SC-Drawer/ScDrawer.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/SC-Drawer/ScDrawer.module.css
@@ -8976,8 +9076,8 @@ var ScDrawer = ({
   backdrop = false,
   zIndex
 }) => {
-  const panelRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const panelRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
       if (closeOnEsc && e.key === "Escape") onClose?.();
@@ -9075,7 +9175,7 @@ var ScTabs = ({
 };
 
 // src/SC-Counter/ScCounter.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_icons63 = require("@streamoid/icons");
 
 // src/SC-Counter/ScCounter.module.css
@@ -9097,7 +9197,7 @@ var ScCounter = ({
   className,
   style
 }) => {
-  const [showInput, setShowInput] = (0, import_react23.useState)(false);
+  const [showInput, setShowInput] = (0, import_react24.useState)(false);
   const set = (n) => {
     let v = n;
     if (min !== void 0) v = Math.max(min, v);
@@ -10186,7 +10286,7 @@ var ScSelectionList = ({
 };
 
 // src/SC-textArea/ScTextArea.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/SC-textArea/ScTextArea.module.css
 var ScTextArea_default = {
@@ -10216,7 +10316,7 @@ var ScTextArea = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = (0, import_react24.useState)(false);
+  const [focused, setFocused] = (0, import_react25.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")];
@@ -10258,7 +10358,7 @@ var ScTextArea = ({
 };
 
 // src/SC-select/ScSelect.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/SC-select/ScSelect.module.css
 var ScSelect_default = {
@@ -10295,9 +10395,9 @@ var ScSelect = (props) => {
     disabled = false,
     className
   } = props;
-  const [open, setOpen] = (0, import_react25.useState)(false);
-  const rootRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const [open, setOpen] = (0, import_react26.useState)(false);
+  const rootRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
@@ -10388,7 +10488,7 @@ var ScSelect = (props) => {
 };
 
 // src/SC-fileField/ScFileField.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/SC-fileField/ScFileField.module.css
 var ScFileField_default = {
@@ -10426,7 +10526,7 @@ var ScFileField = (props) => {
     label,
     className
   } = props;
-  const inputRef = (0, import_react26.useRef)(null);
+  const inputRef = (0, import_react27.useRef)(null);
   const hasFile = Boolean(fileName);
   const isUploading = Boolean(uploading);
   const clampedProgress = Math.max(0, Math.min(100, progress));
@@ -10545,7 +10645,7 @@ var ScFileField = (props) => {
 };
 
 // src/SC-mediaApproval/ScMediaApproval.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/SC-mediaApproval/ScMediaApproval.module.css
 var ScMediaApproval_default = {
@@ -10592,9 +10692,9 @@ var ScMediaApproval = (props) => {
     className
   } = props;
   const total = mediaUrls.length;
-  const [index, setIndex] = (0, import_react27.useState)(activeIndex ?? 0);
-  const [mediaLoading, setMediaLoading] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const [index, setIndex] = (0, import_react28.useState)(activeIndex ?? 0);
+  const [mediaLoading, setMediaLoading] = (0, import_react28.useState)(false);
+  (0, import_react28.useEffect)(() => {
     if (typeof activeIndex === "number") {
       setIndex(activeIndex);
     }
@@ -10729,7 +10829,7 @@ var ScMediaApproval = (props) => {
 };
 
 // src/SC-mediaSelect/ScMediaSelect.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/SC-mediaSelect/ScMediaSelect.module.css
 var ScMediaSelect_default = {
@@ -10785,7 +10885,7 @@ var ScMediaSelect = (props) => {
   } = props;
   const total = items.length;
   const resolvedMax = typeof max === "number" ? max : total;
-  const selectedSet = (0, import_react28.useMemo)(() => new Set(selected), [selected]);
+  const selectedSet = (0, import_react29.useMemo)(() => new Set(selected), [selected]);
   const selectedCount = selectedSet.size;
   let countLabel = selectedCount + " of " + total + " selected";
   if (min > 0) countLabel += " (min " + min + ")";
@@ -10854,7 +10954,7 @@ var ScMediaSelect = (props) => {
 };
 
 // src/SC-todoList/ScTodoList.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/SC-todoList/ScTodoList.module.css
 var ScTodoList_default = {
@@ -10887,9 +10987,9 @@ var ScTodoList = ({
   addPlaceholder = "Add an item",
   className
 }) => {
-  const [editingId, setEditingId] = (0, import_react29.useState)(null);
-  const [editValue, setEditValue] = (0, import_react29.useState)("");
-  const [newValue, setNewValue] = (0, import_react29.useState)("");
+  const [editingId, setEditingId] = (0, import_react30.useState)(null);
+  const [editValue, setEditValue] = (0, import_react30.useState)("");
+  const [newValue, setNewValue] = (0, import_react30.useState)("");
   const total = items.length;
   const completed = items.filter((i) => i.status === "completed").length;
   const startEditing = (item) => {
@@ -11743,7 +11843,7 @@ var ScWorkspaceSwitchMobileV2 = ({
 };
 
 // src/SC-imageField/ScImageField.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/SC-imageField/ScImageField.module.css
 var ScImageField_default = {
@@ -11770,7 +11870,7 @@ var ScImageField = ({
   onRemove,
   className
 }) => {
-  const inputRef = (0, import_react30.useRef)(null);
+  const inputRef = (0, import_react31.useRef)(null);
   const hasImage = !!imagePreview;
   function handleClick() {
     if (!hasImage) {
@@ -12006,7 +12106,7 @@ var ScPlanDetailsCardMobile = ({
 };
 
 // src/SC-ProfilePopup/ScProfilePopup.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/SC-ProfilePopup/ScProfilePopup.module.css
 var ScProfilePopup_default = {
@@ -12040,7 +12140,7 @@ var activateOnKey = (handler) => (event) => {
     handler();
   }
 };
-var ScProfilePopup = (0, import_react31.forwardRef)(
+var ScProfilePopup = (0, import_react32.forwardRef)(
   ({
     name = "Chris Hemsworth",
     email = "chris@kepler.com",