@streamoid/ui 0.6.30 → 0.6.31

package/dist/index.mjs

@@ -119,7 +119,7 @@ function ScAppCardForCopilot({
 
 // src/SC-AppSwitch/ScAppSwitchPanel.tsx
 import { useState } from "react";
-import { SiconExternalLink, SiconRight as SiconRight2 } from "@streamoid/icons";
+import { SiconCheck, SiconExternalLink, SiconRight as SiconRight2 } from "@streamoid/icons";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var STREAMOID_CHANGELOG_URLS = {
   tactix: "https://streamoid.com/tactix/changelog",
@@ -221,21 +221,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] = useState(false);
   const [focused, setFocused] = 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__ */ jsxs3(
     "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),
@@ -247,12 +253,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"
       },
@@ -350,10 +360,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__ */ jsx4(SiconRight2, { size: 24, color: "var(--alias-text---icons-primary)" })
+            children: current ? /* @__PURE__ */ jsx4(SiconCheck, { size: 24, color: "var(--alias-text---icons-primary)" }) : /* @__PURE__ */ jsx4(SiconRight2, { size: 24, color: "var(--alias-text---icons-primary)" })
           }
         )
       ]
@@ -420,7 +430,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__ */ jsxs3(
     "div",
@@ -5660,11 +5670,101 @@ function useStreamoidSidebarPreference(options = {}) {
   return { expanded, setExpanded, toggle };
 }
 
-// src/SC-SidebarShell/useStreamoidSidebarPopoverPosition.ts
+// src/SC-SidebarShell/useStreamoidAnchoredPopoverPosition.ts
 import {
   useLayoutEffect,
   useState as useState13
 } from "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] = useState13({
+    position: "fixed",
+    left: 0,
+    top: 0,
+    width,
+    maxWidth: `calc(100vw - ${inset * 2}px)`,
+    maxHeight: `calc(100dvh - ${inset * 2}px)`,
+    visibility: "hidden"
+  });
+  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
+import {
+  useLayoutEffect as useLayoutEffect2,
+  useState as useState14
+} from "react";
 var VIEWPORT_INSET = 16;
 function useStreamoidSidebarPopoverPosition(sidebarRef, {
   placement,
@@ -5672,7 +5772,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
   gap = 8,
   inset = 0
 }) {
-  const [position, setPosition] = useState13({
+  const [position, setPosition] = useState14({
     position: "fixed",
     left: 0,
     top: 0,
@@ -5681,7 +5781,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
     maxHeight: `calc(100dvh - ${VIEWPORT_INSET * 2}px)`,
     visibility: "hidden"
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const sidebar = sidebarRef.current;
     if (!sidebar || typeof window === "undefined") return;
     const findCard = () => (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
@@ -5744,7 +5844,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
 import {
   useCallback as useCallback3,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.module.css
@@ -5852,7 +5952,7 @@ var ScArtifaxSidebar = ({
     }
   };
   const isControlled = !!openSections;
-  const [internalOpen, setInternalOpen] = useState14(
+  const [internalOpen, setInternalOpen] = useState15(
     () => {
       const init = {};
       sections.forEach((s) => {
@@ -6069,7 +6169,7 @@ var ScArtifaxSidebar = ({
 };
 
 // src/SC-Catalogix-Sidebar/ScCatalogixSidebar.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 
 // src/SC-Sidebar Switch menu/ScSidebarSwitchMenu.module.css
 var ScSidebarSwitchMenu_default = {
@@ -6717,7 +6817,7 @@ var ScCatalogixSidebar = ({
   className,
   style
 }) => {
-  const [appListOpen, setAppListOpen] = useState15(false);
+  const [appListOpen, setAppListOpen] = useState16(false);
   const handleSwitch = () => {
     setAppListOpen((prev) => !prev);
     onLogoClick?.();
@@ -8577,7 +8677,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3, SiconLogout as SiconLogout3 } from "@streamoid/icons";
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -8618,7 +8718,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = useState16(false);
+  const [internalHover, setInternalHover] = useState17(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -8928,7 +9028,7 @@ var ScTabs = ({
 };
 
 // src/SC-Counter/ScCounter.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { SiconMinus, SiconPlus as SiconPlus2 } from "@streamoid/icons";
 
 // src/SC-Counter/ScCounter.module.css
@@ -8950,7 +9050,7 @@ var ScCounter = ({
   className,
   style
 }) => {
-  const [showInput, setShowInput] = useState17(false);
+  const [showInput, setShowInput] = useState18(false);
   const set = (n) => {
     let v = n;
     if (min !== void 0) v = Math.max(min, v);
@@ -9441,7 +9541,7 @@ import {
   SiconPlus as SiconPlus3,
   SiconRight as SiconRight6,
   SiconWarning,
-  SiconCheck,
+  SiconCheck as SiconCheck2,
   SiconClose as SiconClose4
 } from "@streamoid/icons";
 
@@ -9602,7 +9702,7 @@ var ScMappingCard = ({
                   className: [ScMappingCard_default.statusLabel, ScMappingCard_default.statusSuccess].join(" "),
                   children: [
                     /* @__PURE__ */ jsx97("span", { className: ScMappingCard_default.statusIcon, children: /* @__PURE__ */ jsx97(
-                      SiconCheck,
+                      SiconCheck2,
                       {
                         size: 24,
                         color: "var(--alias-text-and-icons-success, #00b96b)"
@@ -10045,7 +10145,7 @@ var ScSelectionList = ({
 };
 
 // src/SC-textArea/ScTextArea.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 
 // src/SC-textArea/ScTextArea.module.css
 var ScTextArea_default = {
@@ -10075,7 +10175,7 @@ var ScTextArea = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = useState18(false);
+  const [focused, setFocused] = useState19(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")];
@@ -10117,7 +10217,7 @@ var ScTextArea = ({
 };
 
 // src/SC-select/ScSelect.tsx
-import { useState as useState19, useRef as useRef8, useEffect as useEffect8 } from "react";
+import { useState as useState20, useRef as useRef8, useEffect as useEffect8 } from "react";
 
 // src/SC-select/ScSelect.module.css
 var ScSelect_default = {
@@ -10154,7 +10254,7 @@ var ScSelect = (props) => {
     disabled = false,
     className
   } = props;
-  const [open, setOpen] = useState19(false);
+  const [open, setOpen] = useState20(false);
   const rootRef = useRef8(null);
   useEffect8(() => {
     if (!open) return;
@@ -10404,7 +10504,7 @@ var ScFileField = (props) => {
 };
 
 // src/SC-mediaApproval/ScMediaApproval.tsx
-import { useState as useState20, useEffect as useEffect9 } from "react";
+import { useState as useState21, useEffect as useEffect9 } from "react";
 
 // src/SC-mediaApproval/ScMediaApproval.module.css
 var ScMediaApproval_default = {
@@ -10451,8 +10551,8 @@ var ScMediaApproval = (props) => {
     className
   } = props;
   const total = mediaUrls.length;
-  const [index, setIndex] = useState20(activeIndex ?? 0);
-  const [mediaLoading, setMediaLoading] = useState20(false);
+  const [index, setIndex] = useState21(activeIndex ?? 0);
+  const [mediaLoading, setMediaLoading] = useState21(false);
   useEffect9(() => {
     if (typeof activeIndex === "number") {
       setIndex(activeIndex);
@@ -10713,7 +10813,7 @@ var ScMediaSelect = (props) => {
 };
 
 // src/SC-todoList/ScTodoList.tsx
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 
 // src/SC-todoList/ScTodoList.module.css
 var ScTodoList_default = {
@@ -10746,9 +10846,9 @@ var ScTodoList = ({
   addPlaceholder = "Add an item",
   className
 }) => {
-  const [editingId, setEditingId] = useState21(null);
-  const [editValue, setEditValue] = useState21("");
-  const [newValue, setNewValue] = useState21("");
+  const [editingId, setEditingId] = useState22(null);
+  const [editValue, setEditValue] = useState22("");
+  const [newValue, setNewValue] = useState22("");
   const total = items.length;
   const completed = items.filter((i) => i.status === "completed").length;
   const startEditing = (item) => {
@@ -12239,10 +12339,13 @@ export {
   createStreamoidAppSwitchUtilities,
   formatSubAgentLabel,
   hasCollapsedMark,
+  resolveAnchoredPopoverPosition,
   resolvePanelResize,
   resolvePanelResizeKey,
+  scAppSwitchOrder,
   streamoidAppSwitchTagline,
   streamoidChangelogUrl,
+  useStreamoidAnchoredPopoverPosition,
   useStreamoidPanelWidth,
   useStreamoidSidebarPopoverPosition,
   useStreamoidSidebarPreference,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.6.30",
+  "version": "0.6.31",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",