@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/smart-input/composer/ComposerMenu.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useContext,
@@ -16,22 +17,22 @@ const ComposerMenuPresentationContext = createContext("popover");
 const ComposerSheetNavContext = createContext(null);
 const SHEET_ROW = "sheet-row flex w-full min-w-0 shrink-0 items-center gap-3 bg-card px-3 text-left text-base text-foreground transition-colors active:bg-accent first:rounded-t-xl last:rounded-b-xl [.sheet-gap+&]:rounded-t-xl [&:has(+.sheet-gap)]:rounded-b-xl [.sheet-row+&]:border-t [.sheet-row+&]:border-border/60";
 function SheetIcon({ icon: Icon }) {
-  return /* @__PURE__ */ React.createElement("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted" }, /* @__PURE__ */ React.createElement(Icon, { className: "h-[18px] w-[18px] text-foreground" }));
+  return /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "h-[18px] w-[18px] text-foreground" }) });
 }
 function ComposerMenuLabel({ children }) {
   const presentation = useContext(ComposerMenuPresentationContext);
   if (presentation === "sheet") {
-    return /* @__PURE__ */ React.createElement("div", { className: "sheet-gap truncate px-3 pb-1.5 pt-5 text-xs font-medium uppercase tracking-wide text-muted-foreground first:pt-0" }, children);
+    return /* @__PURE__ */ jsx("div", { className: "sheet-gap truncate px-3 pb-1.5 pt-5 text-xs font-medium uppercase tracking-wide text-muted-foreground first:pt-0", children });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "truncate px-2.5 pb-1 pt-2 text-xs font-medium text-muted-foreground" }, children);
+  return /* @__PURE__ */ jsx("div", { className: "truncate px-2.5 pb-1 pt-2 text-xs font-medium text-muted-foreground", children });
 }
 function ComposerMenuDivider() {
   const presentation = useContext(ComposerMenuPresentationContext);
-  if (presentation === "sheet") return /* @__PURE__ */ React.createElement("div", { className: "sheet-gap h-6 shrink-0", role: "separator" });
-  return /* @__PURE__ */ React.createElement("div", { className: "mx-1 my-1 h-px shrink-0 bg-border", role: "separator" });
+  if (presentation === "sheet") return /* @__PURE__ */ jsx("div", { className: "sheet-gap h-6 shrink-0", role: "separator" });
+  return /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px shrink-0 bg-border", role: "separator" });
 }
 function ComposerMenuHelp({ children }) {
-  return /* @__PURE__ */ React.createElement("p", { className: "px-2.5 py-1.5 text-xs leading-snug text-muted-foreground" }, children);
+  return /* @__PURE__ */ jsx("p", { className: "px-2.5 py-1.5 text-xs leading-snug text-muted-foreground", children });
 }
 function ComposerMenuRow({
   icon: Icon,
@@ -52,24 +53,29 @@ function ComposerMenuRow({
   const level = useContext(ComposerMenuLevelContext);
   const presentation = useContext(ComposerMenuPresentationContext);
   if (presentation === "sheet") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick,
         disabled,
         title,
-        className: cn(SHEET_ROW, description ? "min-h-14 py-2" : "min-h-12", "disabled:opacity-50")
-      },
-      Icon ? /* @__PURE__ */ React.createElement(SheetIcon, { icon: Icon }) : null,
-      /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, label), description ? /* @__PURE__ */ React.createElement("span", { className: cn("truncate text-sm", warning ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground") }, description) : null),
-      badge !== void 0 && badge !== null ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-base tabular-nums text-muted-foreground" }, badge) : null,
-      detail ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 whitespace-nowrap text-base text-muted-foreground" }, detail) : null,
-      checked ? /* @__PURE__ */ React.createElement(Check, { className: "h-5 w-5 shrink-0 text-primary" }) : null,
-      chevron ? /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-5 w-5 shrink-0 text-muted-foreground/60" }) : null
+        className: cn(SHEET_ROW, description ? "min-h-14 py-2" : "min-h-12", "disabled:opacity-50"),
+        children: [
+          Icon ? /* @__PURE__ */ jsx(SheetIcon, { icon: Icon }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+            description ? /* @__PURE__ */ jsx("span", { className: cn("truncate text-sm", warning ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"), children: description }) : null
+          ] }),
+          badge !== void 0 && badge !== null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-base tabular-nums text-muted-foreground", children: badge }) : null,
+          detail ? /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap text-base text-muted-foreground", children: detail }) : null,
+          checked ? /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 shrink-0 text-primary" }) : null,
+          chevron ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 shrink-0 text-muted-foreground/60" }) : null
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -86,14 +92,19 @@ function ComposerMenuRow({
         description ? "py-1.5" : "h-9",
         "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
         active && "bg-accent"
-      )
-    },
-    Icon ? /* @__PURE__ */ React.createElement(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null,
-    /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, label), description ? /* @__PURE__ */ React.createElement("span", { className: cn("truncate text-xs", warning ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground") }, description) : null),
-    badge !== void 0 && badge !== null ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] tabular-nums text-muted-foreground" }, badge) : null,
-    detail ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 whitespace-nowrap text-xs text-muted-foreground" }, detail) : null,
-    checked ? /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4 shrink-0 text-primary" }) : null,
-    chevron ? /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null
+      ),
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+          description ? /* @__PURE__ */ jsx("span", { className: cn("truncate text-xs", warning ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"), children: description }) : null
+        ] }),
+        badge !== void 0 && badge !== null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] tabular-nums text-muted-foreground", children: badge }) : null,
+        detail ? /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap text-xs text-muted-foreground", children: detail }) : null,
+        checked ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-primary" }) : null,
+        chevron ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null
+      ]
+    }
   );
 }
 function ComposerMenuSwitchRow({
@@ -107,7 +118,7 @@ function ComposerMenuSwitchRow({
   const level = useContext(ComposerMenuLevelContext);
   const presentation = useContext(ComposerMenuPresentationContext);
   if (presentation === "sheet") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "label",
       {
         className: cn(
@@ -115,23 +126,28 @@ function ComposerMenuSwitchRow({
           "cursor-pointer",
           description ? "min-h-14 py-2" : "min-h-12",
           disabled && "cursor-not-allowed opacity-50"
-        )
-      },
-      Icon ? /* @__PURE__ */ React.createElement(SheetIcon, { icon: Icon }) : null,
-      /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, label), description ? /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm text-muted-foreground" }, description) : null),
-      /* @__PURE__ */ React.createElement(
-        Switch,
-        {
-          checked,
-          disabled,
-          onCheckedChange,
-          "aria-label": label,
-          className: "shrink-0"
-        }
-      )
+        ),
+        children: [
+          Icon ? /* @__PURE__ */ jsx(SheetIcon, { icon: Icon }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+            description ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked,
+              disabled,
+              onCheckedChange,
+              "aria-label": label,
+              className: "shrink-0"
+            }
+          )
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "label",
     {
       onPointerEnter: (event) => {
@@ -142,20 +158,25 @@ function ComposerMenuSwitchRow({
         "flex w-full min-w-0 shrink-0 cursor-pointer items-center gap-2.5 rounded-lg px-2.5 text-sm text-foreground hover:bg-accent",
         description ? "py-1.5" : "h-9",
         disabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
-      )
-    },
-    Icon ? /* @__PURE__ */ React.createElement(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null,
-    /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, label), description ? /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs text-muted-foreground" }, description) : null),
-    /* @__PURE__ */ React.createElement(
-      Switch,
-      {
-        checked,
-        disabled,
-        onCheckedChange,
-        "aria-label": label,
-        className: "shrink-0"
-      }
-    )
+      ),
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+          description ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked,
+            disabled,
+            onCheckedChange,
+            "aria-label": label,
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
   );
 }
 const TEXT_FIELD_SELECTOR = [
@@ -203,7 +224,7 @@ function ComposerMenuLevel({ children }) {
       setOpenId(id);
     }, HOVER_INTENT_MS);
   };
-  return /* @__PURE__ */ React.createElement(ComposerMenuLevelContext.Provider, { value: { openId, setOpenId, request, cancel } }, children);
+  return /* @__PURE__ */ jsx(ComposerMenuLevelContext.Provider, { value: { openId, setOpenId, request, cancel }, children });
 }
 function useNarrowViewport() {
   const [narrow, setNarrow] = useState(false);
@@ -242,7 +263,7 @@ function ComposerSubmenu({
   const sheetNav = useContext(ComposerSheetNavContext);
   const narrow = useNarrowViewport();
   if (sheetNav) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ComposerMenuRow,
       {
         ...row,
@@ -252,56 +273,59 @@ function ComposerSubmenu({
           // A panel with no fixed height on desktop is content-sized on the
           // phone too — one sizing decision, both presentations.
           fit: panelClassName && !/(^|\s)h-\[/.test(panelClassName) ? "content" : "fill",
-          render: () => /* @__PURE__ */ React.createElement(SlotBoundary, { name: `menu:${typeof row.label === "string" ? row.label : "panel"}` }, typeof children === "function" ? children(sheetNav.pop) : children)
+          render: () => /* @__PURE__ */ jsx(SlotBoundary, { name: `menu:${typeof row.label === "string" ? row.label : "panel"}`, children: typeof children === "function" ? children(sheetNav.pop) : children })
         })
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(PopoverAnchor, { asChild: true }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      ...row,
-      chevron: true,
-      active: open,
-      onClick: () => {
-        level?.cancel();
-        setOpen(!open);
-      },
-      onPointerEnter: (event) => {
-        if (event.pointerType !== "mouse" || row.disabled) return;
-        if (level && controlledOpen === void 0) level.request(id);
-      },
-      onPointerLeave: () => level?.cancel()
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      side: narrow ? "top" : "right",
-      align: "start",
-      sideOffset: 6,
-      collisionPadding: 8,
-      onEscapeKeyDown: () => {
-        close();
-        closeAll?.();
-      },
-      onPointerDownOutside: ignoreOwnWrapper,
-      onPointerEnter: () => level?.cancel(),
-      "data-composer-panel": "",
-      onOpenAutoFocus: (event) => {
-        const field = firstTextField(event.currentTarget);
-        if (!field) return;
-        event.preventDefault();
-        field.focus({ preventScroll: true });
-      },
-      className: cn(
-        "flex max-h-[var(--radix-popover-content-available-height)] flex-col overflow-hidden p-1",
-        COMPOSER_MENU_NO_ENTRANCE,
-        panelClassName ?? "w-72",
-        "max-sm:!w-[calc(100vw-1rem)]"
-      )
-    },
-    /* @__PURE__ */ React.createElement(ComposerMenuLevel, null, drillInPlace ? /* @__PURE__ */ React.createElement(InPlaceNav, null, /* @__PURE__ */ React.createElement(SlotBoundary, { name: `menu:${typeof row.label === "string" ? row.label : "panel"}` }, typeof children === "function" ? children(close) : children)) : /* @__PURE__ */ React.createElement(SlotBoundary, { name: `menu:${typeof row.label === "string" ? row.label : "panel"}` }, typeof children === "function" ? children(close) : children))
-  ));
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      ComposerMenuRow,
+      {
+        ...row,
+        chevron: true,
+        active: open,
+        onClick: () => {
+          level?.cancel();
+          setOpen(!open);
+        },
+        onPointerEnter: (event) => {
+          if (event.pointerType !== "mouse" || row.disabled) return;
+          if (level && controlledOpen === void 0) level.request(id);
+        },
+        onPointerLeave: () => level?.cancel()
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side: narrow ? "top" : "right",
+        align: "start",
+        sideOffset: 6,
+        collisionPadding: 8,
+        onEscapeKeyDown: () => {
+          close();
+          closeAll?.();
+        },
+        onPointerDownOutside: ignoreOwnWrapper,
+        onPointerEnter: () => level?.cancel(),
+        "data-composer-panel": "",
+        onOpenAutoFocus: (event) => {
+          const field = firstTextField(event.currentTarget);
+          if (!field) return;
+          event.preventDefault();
+          field.focus({ preventScroll: true });
+        },
+        className: cn(
+          "flex max-h-[var(--radix-popover-content-available-height)] flex-col overflow-hidden p-1",
+          COMPOSER_MENU_NO_ENTRANCE,
+          panelClassName ?? "w-72",
+          "max-sm:!w-[calc(100vw-1rem)]"
+        ),
+        children: /* @__PURE__ */ jsx(ComposerMenuLevel, { children: drillInPlace ? /* @__PURE__ */ jsx(InPlaceNav, { children: /* @__PURE__ */ jsx(SlotBoundary, { name: `menu:${typeof row.label === "string" ? row.label : "panel"}`, children: typeof children === "function" ? children(close) : children }) }) : /* @__PURE__ */ jsx(SlotBoundary, { name: `menu:${typeof row.label === "string" ? row.label : "panel"}`, children: typeof children === "function" ? children(close) : children }) })
+      }
+    )
+  ] });
 }
 function InPlaceNav({ children }) {
   const [stack, setStack] = useState([]);
@@ -310,7 +334,7 @@ function InPlaceNav({ children }) {
     push: (page) => setStack((current) => [...current, page]),
     pop: () => setStack((current) => current.slice(0, -1))
   };
-  return /* @__PURE__ */ React.createElement(ComposerSheetNavContext.Provider, { value: nav }, top ? /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col" }, top.render()) : children);
+  return /* @__PURE__ */ jsx(ComposerSheetNavContext.Provider, { value: nav, children: top ? /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col", children: top.render() }) : children });
 }
 function ComposerFoldedSection({ children }) {
   const [fresh, setFresh] = useState(true);
@@ -318,18 +342,22 @@ function ComposerFoldedSection({ children }) {
     const timer = window.setTimeout(() => setFresh(false), 1400);
     return () => window.clearTimeout(timer);
   }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComposerMenuDivider, null), /* @__PURE__ */ React.createElement(ComposerMenuLabel, null, "From the toolbar"), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-composer-folded-section": "",
-      className: cn(
-        "flex flex-col gap-1",
-        "[&>*]:rounded-md [&>*]:transition-[background-color,box-shadow] [&>*]:duration-1000 [&>*]:ease-out motion-reduce:[&>*]:transition-none",
-        fresh ? "[&>*]:bg-primary/10 [&>*]:ring-1 [&>*]:ring-inset [&>*]:ring-primary/30" : "[&>*]:bg-transparent"
-      )
-    },
-    children
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+    /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "From the toolbar" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-composer-folded-section": "",
+        className: cn(
+          "flex flex-col gap-1",
+          "[&>*]:rounded-md [&>*]:transition-[background-color,box-shadow] [&>*]:duration-1000 [&>*]:ease-out motion-reduce:[&>*]:transition-none",
+          fresh ? "[&>*]:bg-primary/10 [&>*]:ring-1 [&>*]:ring-inset [&>*]:ring-primary/30" : "[&>*]:bg-transparent"
+        ),
+        children
+      }
+    )
+  ] });
 }
 export {
   COMPOSER_MENU_NO_ENTRANCE,

package/dist/agents/components/inputs/smart-input/composer/ComposerMenuSheet.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { BottomSheet, BottomSheetHeader } from "@ai-matrx/design-system";
 import { cn } from "@ai-matrx/design-system";
@@ -31,7 +32,7 @@ function ComposerMenuSheet({
   };
   const back = () => pageBack.current ? pageBack.current() : pop();
   const setOpen = (next) => onOpenChange(next);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     BottomSheet,
     {
       open,
@@ -39,29 +40,31 @@ function ComposerMenuSheet({
       title: top?.title ?? title ?? accessibleName,
       size: top && top.fit !== "content" ? "full" : "adaptive",
       surface: "solid",
-      contentClassName: "bg-muted dark:bg-background"
-    },
-    /* @__PURE__ */ React.createElement(ComposerMenuPresentationContext.Provider, { value: "sheet" }, /* @__PURE__ */ React.createElement(ComposerSheetNavContext.Provider, { value: { push, pop } }, /* @__PURE__ */ React.createElement(ComposerMenuCloseAllContext.Provider, { value: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
-      PickerBackOverrideContext.Provider,
-      {
-        value: (fn) => {
-          pageBack.current = fn;
-        }
-      },
-      top ? /* @__PURE__ */ React.createElement(BottomSheetHeader, { title: top.title, showBack: true, onBack: back }) : title ? /* @__PURE__ */ React.createElement(BottomSheetHeader, { title }) : null,
-      /* @__PURE__ */ React.createElement(
-        "div",
+      contentClassName: "bg-muted dark:bg-background",
+      children: /* @__PURE__ */ jsx(ComposerMenuPresentationContext.Provider, { value: "sheet", children: /* @__PURE__ */ jsx(ComposerSheetNavContext.Provider, { value: { push, pop }, children: /* @__PURE__ */ jsx(ComposerMenuCloseAllContext.Provider, { value: () => setOpen(false), children: /* @__PURE__ */ jsxs(
+        PickerBackOverrideContext.Provider,
         {
-          key: stack.length,
-          className: cn(
-            "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-            "motion-safe:animate-in motion-safe:fade-in",
-            top && "motion-safe:slide-in-from-right-6"
-          )
-        },
-        top ? top.render() : children
-      )
-    ))))
+          value: (fn) => {
+            pageBack.current = fn;
+          },
+          children: [
+            top ? /* @__PURE__ */ jsx(BottomSheetHeader, { title: top.title, showBack: true, onBack: back }) : title ? /* @__PURE__ */ jsx(BottomSheetHeader, { title }) : null,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
+                  "motion-safe:animate-in motion-safe:fade-in",
+                  top && "motion-safe:slide-in-from-right-6"
+                ),
+                children: top ? top.render() : children
+              },
+              stack.length
+            )
+          ]
+        }
+      ) }) }) })
+    }
   );
 }
 export {

package/dist/agents/components/inputs/smart-input/composer/ComposerMetaRow.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ActiveContextLensChip } from "../../../../../context/sources/scopes.js";
 import { ComposerAgentPill } from "./ComposerAgentPill.js";
 import { ComposerEffortPill } from "./ComposerEffortPill.js";
@@ -18,13 +19,13 @@ function useDatabaseBacked() {
   return useConversationAbilities().database;
 }
 function ComposerValueGroupChip({ conversationId }) {
-  return useDatabaseBacked() ? /* @__PURE__ */ React.createElement(ComposerValueGroupChipBody, { conversationId }) : null;
+  return useDatabaseBacked() ? /* @__PURE__ */ jsx(ComposerValueGroupChipBody, { conversationId }) : null;
 }
 function ComposerValueGroupChipBody({ conversationId }) {
   const shown = useConversationContextChipShown(conversationId);
   const agentId = useAppSelector(selectAgentIdFromInstance(conversationId));
   if (!shown) return null;
-  return /* @__PURE__ */ React.createElement("span", { className: "flex shrink-0 items-center" }, /* @__PURE__ */ React.createElement(ConversationContextChip, { conversationId, agentId: agentId ?? null }));
+  return /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(ConversationContextChip, { conversationId, agentId: agentId ?? null }) });
 }
 const SCOPE_CHIP_VARIANT = {
   plain: "quiet",
@@ -36,16 +37,19 @@ function ComposerScopeCluster({
   folded = false
 }) {
   if (!useDatabaseBacked()) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1.5" }, folded ? null : /* @__PURE__ */ React.createElement(
-    ActiveContextLensChip,
-    {
-      conversationId,
-      variant: SCOPE_CHIP_VARIANT[composer.scopeChipStyle ?? "plain"]
-    }
-  ), /* @__PURE__ */ React.createElement(ComposerValueGroupChip, { conversationId }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+    folded ? null : /* @__PURE__ */ jsx(
+      ActiveContextLensChip,
+      {
+        conversationId,
+        variant: SCOPE_CHIP_VARIANT[composer.scopeChipStyle ?? "plain"]
+      }
+    ),
+    /* @__PURE__ */ jsx(ComposerValueGroupChip, { conversationId })
+  ] });
 }
 function ComposerPills(props) {
-  return useDatabaseBacked() ? /* @__PURE__ */ React.createElement(ComposerPillsBody, { ...props }) : null;
+  return useDatabaseBacked() ? /* @__PURE__ */ jsx(ComposerPillsBody, { ...props }) : null;
 }
 function ComposerPillsBody({
   conversationId,
@@ -62,25 +66,29 @@ function ComposerPillsBody({
     // never below a readable floor. `ml-auto` keeps the cluster on the right;
     // start-justified, any overflow runs into the row's sideways scroll and
     // never over its left neighbour.
-    /* @__PURE__ */ React.createElement("div", { className: "ml-auto flex min-w-0 shrink items-center gap-1.5 [&>*:first-child]:min-w-[4.5rem] [&>*:not(:first-child)]:shrink-0" }, withAgent ? /* @__PURE__ */ React.createElement(
-      ComposerAgentPill,
-      {
-        conversationId,
-        mode: composer.mode,
-        size: composer.size,
-        agentControl: composer.agent,
-        menuSide,
-        folded
-      }
-    ) : null, foldIntoAgent ? null : /* @__PURE__ */ React.createElement(ComposerOutputPill, { conversationId, size: composer.size, menuSide }), showEffort ? /* @__PURE__ */ React.createElement(
-      ComposerEffortPill,
-      {
-        conversationId,
-        modelId: effectiveModelId,
-        size: composer.size,
-        menuSide
-      }
-    ) : null)
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex min-w-0 shrink items-center gap-1.5 [&>*:first-child]:min-w-[4.5rem] [&>*:not(:first-child)]:shrink-0", children: [
+      withAgent ? /* @__PURE__ */ jsx(
+        ComposerAgentPill,
+        {
+          conversationId,
+          mode: composer.mode,
+          size: composer.size,
+          agentControl: composer.agent,
+          menuSide,
+          folded
+        }
+      ) : null,
+      foldIntoAgent ? null : /* @__PURE__ */ jsx(ComposerOutputPill, { conversationId, size: composer.size, menuSide }),
+      showEffort ? /* @__PURE__ */ jsx(
+        ComposerEffortPill,
+        {
+          conversationId,
+          modelId: effectiveModelId,
+          size: composer.size,
+          menuSide
+        }
+      ) : null
+    ] })
   );
 }
 function ComposerMetaRow({
@@ -93,7 +101,10 @@ function ComposerMetaRow({
   return (
     // One line, always: a narrow column scrolls the row sideways, never wraps it.
     // Every gap is the tap-target 6px; the clusters sit at the two ends.
-    /* @__PURE__ */ React.createElement("div", { "data-composer-row": "", className: cn(COMPOSER_ROW_CLASS, "justify-between gap-1.5 px-1") }, /* @__PURE__ */ React.createElement(ComposerScopeCluster, { conversationId, composer, folded }), /* @__PURE__ */ React.createElement(ComposerPills, { conversationId, composer, menuSide, folded }))
+    /* @__PURE__ */ jsxs("div", { "data-composer-row": "", className: cn(COMPOSER_ROW_CLASS, "justify-between gap-1.5 px-1"), children: [
+      /* @__PURE__ */ jsx(ComposerScopeCluster, { conversationId, composer, folded }),
+      /* @__PURE__ */ jsx(ComposerPills, { conversationId, composer, menuSide, folded })
+    ] })
   );
 }
 export {