@ai-matrx/agents 0.21.40 → 0.21.42

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.21.42
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/matrx-agents/v0.21.41..npm/matrx-agents/v0.21.42 -- apps/shared/matrx-agents`).
+No source changes intended and no consumer action required.
+
+## 0.21.41
+### Unreleased
+
+- **A side-opening `AgentListDropdown` never leaves the screen** (blind run PB-03, /chat/new in an 800px pane, 2026-10-01): with `contentSide="left"|"right"` the 680px panel is placed at open time by `sideThatFits` — the asked side when it fits, else the opposite side, else below (where Radix shifts it into view). Before, it ran off the left edge and the search, tabs and names were cut off. Guard: `catalog/react/side-that-fits.test.tsx`. Consumer action: none.
+
 ## 0.21.40
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/catalog/react/index.cjs

@@ -54,6 +54,7 @@ __export(react_exports, {
   orchestraLabel: () => orchestraLabel,
   orchestraModeLabel: () => orchestraModeLabel,
   panelHeightBelow: () => panelHeightBelow,
+  sideThatFits: () => sideThatFits,
   useAgentCatalog: () => useAgentCatalog,
   useAgentCatalogRows: () => useAgentCatalogRows,
   useAgentCatalogState: () => useAgentCatalogState,
@@ -1598,6 +1599,17 @@ function panelHeightBelow(trigger, options = {}) {
   if (below >= full) return null;
   return below >= minUsable ? `${Math.floor(below)}px` : null;
 }
+function sideThatFits(trigger, side, options = {}) {
+  if (!trigger || typeof window === "undefined" || side !== "left" && side !== "right") return side;
+  const width = options.width ?? 680;
+  const gap = options.gap ?? 16;
+  const rect = trigger.getBoundingClientRect();
+  const room = { left: rect.left - gap, right: window.innerWidth - rect.right - gap };
+  if (room[side] >= width) return side;
+  const other = side === "left" ? "right" : "left";
+  if (room[other] >= width) return other;
+  return "bottom";
+}
 
 // catalog/react/AgentFilterBar.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -2501,6 +2513,7 @@ function AgentListDropdown({
   const [open, setOpen] = (0, import_react8.useState)(false);
   const triggerRef = (0, import_react8.useRef)(null);
   const [fitHeight, setFitHeight] = (0, import_react8.useState)(null);
+  const [openSide, setOpenSide] = (0, import_react8.useState)(contentSide);
   const core = useAgentListCore({
     consumerId,
     ...onSelect ? { onSelect } : {},
@@ -2522,6 +2535,7 @@ function AgentListDropdown({
     setOpen(nextOpen);
     if (nextOpen) {
       setFitHeight(contentSide || isMobile ? null : panelHeightBelow(triggerRef.current));
+      setOpenSide(contentSide && !isMobile ? sideThatFits(triggerRef.current, contentSide) : contentSide);
     }
   };
   const resolveAgentHref = (0, import_react8.useMemo)(() => {
@@ -2582,7 +2596,7 @@ function AgentListDropdown({
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_design_system8.PopoverContent,
       {
-        ...contentSide ? { side: contentSide } : fitHeight ? { side: "bottom" } : {},
+        ...openSide ? { side: openSide } : fitHeight ? { side: "bottom" } : {},
         align: "start",
         sideOffset: 4,
         collisionPadding: 12,