@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/dist/{chunk-XEYL6AFZ.cjs → chunk-E2ZZOYSM.cjs}

@@ -10,33 +10,147 @@ var _chunkUYHKZN5Dcjs = require('./chunk-UYHKZN5D.cjs');
 var _chunkWWUSFOJ7cjs = require('./chunk-WWUSFOJ7.cjs');
 
 
-var _chunkBEMGJDXIcjs = require('./chunk-BEMGJDXI.cjs');
+var _chunkXAA5LUHCcjs = require('./chunk-XAA5LUHC.cjs');
 
 
 
 
-var _chunkBNUZKBNVcjs = require('./chunk-BNUZKBNV.cjs');
+var _chunkZJS45HQZcjs = require('./chunk-ZJS45HQZ.cjs');
 
 
 var _chunkAQXKXZWBcjs = require('./chunk-AQXKXZWB.cjs');
 
 
-var _chunkTUAATMUEcjs = require('./chunk-TUAATMUE.cjs');
+var _chunkCS5SZJFVcjs = require('./chunk-CS5SZJFV.cjs');
 
 
 
-var _chunkXIFEZ2JTcjs = require('./chunk-XIFEZ2JT.cjs');
+var _chunk4DQ4CNAGcjs = require('./chunk-4DQ4CNAG.cjs');
 
 
-var _chunkTF5D5MNOcjs = require('./chunk-TF5D5MNO.cjs');
 
 
-var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
+var _chunkNNNRN4OFcjs = require('./chunk-NNNRN4OF.cjs');
 
-// src/components/ui/modal-v2.tsx
+
+var _chunkFLS6DZENcjs = require('./chunk-FLS6DZEN.cjs');
+
+
+
+
+
+
+
+var _chunkMGEUZRNQcjs = require('./chunk-MGEUZRNQ.cjs');
+
+// src/components/ui/scroll-fade.tsx
 var _react = require('react');
-var _reactremovescroll = require('react-remove-scroll');
 var _jsxruntime = require('react/jsx-runtime');
+function useScrollFade(axis = "vertical") {
+  const scrollRef = _react.useRef.call(void 0, null);
+  const [fade, setFade] = _react.useState.call(void 0, { top: false, bottom: false, left: false, right: false });
+  const update = _react.useCallback.call(void 0, () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setFade((prev) => {
+      const vertical = axis !== "horizontal";
+      const horizontal = axis !== "vertical";
+      const top = vertical && el.scrollTop > 0;
+      const bottom = vertical && el.scrollHeight - el.scrollTop - el.clientHeight > 1;
+      const left = horizontal && el.scrollLeft > 0;
+      const right = horizontal && el.scrollWidth - el.scrollLeft - el.clientWidth > 1;
+      return prev.top === top && prev.bottom === bottom && prev.left === left && prev.right === right ? prev : { top, bottom, left, right };
+    });
+  }, [axis]);
+  _react.useLayoutEffect.call(void 0, () => {
+    update();
+    const el = scrollRef.current;
+    if (!el) return void 0;
+    const cleanups = [];
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(update);
+      resizeObserver.observe(el);
+      cleanups.push(() => resizeObserver.disconnect());
+    }
+    if (typeof MutationObserver !== "undefined") {
+      const mutationObserver = new MutationObserver(update);
+      mutationObserver.observe(el, { childList: true, subtree: true, characterData: true });
+      cleanups.push(() => mutationObserver.disconnect());
+    }
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  }, [update]);
+  return {
+    scrollRef,
+    fadeTop: fade.top,
+    fadeBottom: fade.bottom,
+    fadeLeft: fade.left,
+    fadeRight: fade.right,
+    update
+  };
+}
+var EDGE_GRADIENT_ANGLE = {
+  top: "0deg",
+  bottom: "180deg",
+  left: "270deg",
+  right: "90deg"
+};
+function ScrollFadeOverlay({ edge, visible, color = "var(--color-bg)", className }) {
+  const isVertical = edge === "top" || edge === "bottom";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "aria-hidden": true,
+      className: _chunkMGEUZRNQcjs.cn.call(void 0, 
+        "pointer-events-none absolute transition-opacity duration-150",
+        isVertical ? "inset-x-0 h-16" : "inset-y-0 w-10",
+        edge === "top" && "top-0",
+        edge === "bottom" && "bottom-0",
+        edge === "left" && "left-0",
+        edge === "right" && "right-0",
+        visible ? "opacity-100" : "opacity-0",
+        className
+      ),
+      style: {
+        background: `linear-gradient(${EDGE_GRADIENT_ANGLE[edge]}, transparent 0%, ${color} 100%)`
+      }
+    }
+  );
+}
+function ScrollShadow({
+  axis = "vertical",
+  color = "var(--color-bg)",
+  className,
+  scrollClassName,
+  overlayClassName,
+  children,
+  ...rest
+}) {
+  const { scrollRef, fadeTop, fadeBottom, fadeLeft, fadeRight, update } = useScrollFade(axis);
+  const vertical = axis !== "horizontal";
+  const horizontal = axis !== "vertical";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, "relative", className), ...rest, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: scrollRef,
+        onScroll: update,
+        className: _chunkMGEUZRNQcjs.cn.call(void 0, horizontal && "overflow-x-auto", vertical && "overflow-y-auto", scrollClassName),
+        children
+      }
+    ),
+    vertical && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollFadeOverlay, { edge: "top", visible: fadeTop, color, className: overlayClassName }),
+    vertical && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollFadeOverlay, { edge: "bottom", visible: fadeBottom, color, className: overlayClassName }),
+    horizontal && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollFadeOverlay, { edge: "left", visible: fadeLeft, color, className: overlayClassName }),
+    horizontal && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollFadeOverlay, { edge: "right", visible: fadeRight, color, className: overlayClassName })
+  ] });
+}
+
+// src/components/ui/modal-v2.tsx
+
+var _reactremovescroll = require('react-remove-scroll');
+
 var ANIMATION_DURATION = 200;
 var ModalContext = _react.createContext.call(void 0, {});
 var MODAL_V2_SIZE_CLASSES = {
@@ -157,7 +271,7 @@ var Modal = _react.forwardRef.call(void 0,
               "div",
               {
                 "data-state": state,
-                className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                className: _chunkMGEUZRNQcjs.cn.call(void 0, 
                   "absolute inset-0 bg-ods-overlay backdrop-blur-[2px] md:backdrop-blur-none",
                   "duration-200 fill-mode-forwards",
                   "data-[state=open]:animate-in data-[state=open]:fade-in-0",
@@ -181,7 +295,7 @@ var Modal = _react.forwardRef.call(void 0,
                 },
                 tabIndex: -1,
                 "data-state": state,
-                className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                className: _chunkMGEUZRNQcjs.cn.call(void 0, 
                   // A single base utility per size (not md:max-w-*) so consumer
                   // max-w-* overrides via className still win at every breakpoint.
                   "relative z-10 flex w-full min-w-0 flex-col",
@@ -222,7 +336,7 @@ var Modal = _react.forwardRef.call(void 0,
                 ),
                 role: "dialog",
                 "aria-modal": "true",
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXIFEZ2JTcjs.PortalContainerContext.Provider, { value: portalHost, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXIFEZ2JTcjs.CollisionBoundaryContext.Provider, { value: null, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAQXKXZWBcjs.ViewportBreakpoints, { children }) }) }) })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4DQ4CNAGcjs.PortalContainerContext.Provider, { value: portalHost, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4DQ4CNAGcjs.CollisionBoundaryContext.Provider, { value: null, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAQXKXZWBcjs.ViewportBreakpoints, { children }) }) }) })
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setPortalHost, className: "contents" })
@@ -233,32 +347,35 @@ var Modal = _react.forwardRef.call(void 0,
   }
 );
 Modal.displayName = "ModalV2";
-var ModalContent = _react.forwardRef.call(void 0, ({ children, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto", className), children }));
+var ModalContent = _react.forwardRef.call(void 0, ({ children, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunkMGEUZRNQcjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto", className), children }));
 ModalContent.displayName = "ModalV2Content";
-var ModalTwoColumn = _react.forwardRef.call(void 0, ({ left, right, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto lg:overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:h-full lg:min-h-0 lg:grid-cols-2 lg:grid-rows-[minmax(0,1fr)]", children: [
+var ModalTwoColumn = _react.forwardRef.call(void 0, ({ left, right, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunkMGEUZRNQcjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto lg:overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:h-full lg:min-h-0 lg:grid-cols-2 lg:grid-rows-[minmax(0,1fr)]", children: [
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 space-y-[var(--spacing-system-lf)] lg:overflow-y-auto lg:pr-[var(--spacing-system-sf)]", children: left }),
   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 space-y-[var(--spacing-system-lf)] lg:overflow-y-auto lg:pr-[var(--spacing-system-sf)]", children: right })
 ] }) }));
 ModalTwoColumn.displayName = "ModalV2TwoColumn";
 var ModalHeader = _react.forwardRef.call(void 0, ({ children, className }, ref) => {
   const { onClose } = _react.useContext.call(void 0, ModalContext);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "flex items-center gap-[var(--spacing-system-sf)]", className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunkMGEUZRNQcjs.cn.call(void 0, "flex items-center gap-[var(--spacing-system-sf)]", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col", children }),
     onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "button",
+      _chunkFLS6DZENcjs.Button,
       {
+        variant: "bare",
+        size: "icon-sm",
+        type: "button",
         onClick: onClose,
-        className: "hidden shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary md:flex",
+        className: "hidden shrink-0 md:inline-flex",
         "aria-label": "Close",
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWWUSFOJ7cjs.XmarkIcon, { className: "size-6" })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWWUSFOJ7cjs.XmarkIcon, { className: "text-ods-text-secondary" })
       }
     )
   ] });
 });
 ModalHeader.displayName = "ModalV2Header";
-var ModalTitle = _react.forwardRef.call(void 0, ({ children, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "text-ods-text-primary text-h2", className), children }));
+var ModalTitle = _react.forwardRef.call(void 0, ({ children, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { ref, className: _chunkMGEUZRNQcjs.cn.call(void 0, "text-ods-text-primary text-h2", className), children }));
 ModalTitle.displayName = "ModalV2Title";
-var ModalFooter = _react.forwardRef.call(void 0, ({ children, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "flex gap-4", className), children }));
+var ModalFooter = _react.forwardRef.call(void 0, ({ children, className }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _chunkMGEUZRNQcjs.cn.call(void 0, "flex gap-4", className), children }));
 ModalFooter.displayName = "ModalV2Footer";
 
 // src/components/chat/types/chat.types.ts
@@ -335,13 +452,13 @@ var ChatTypingIndicator = _react.forwardRef.call(void 0,
       md: "h-6",
       lg: "h-8"
     };
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "flex items-center gap-2", className), ...props, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunkMGEUZRNQcjs.cn.call(void 0, "flex items-center gap-2", className), ...props, children: [
       showText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-text-secondary text-h6", children: "Assistant is typing" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "inline-flex items-center justify-center gap-1", containerSizeClasses[size]), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkMGEUZRNQcjs.cn.call(void 0, "inline-flex items-center justify-center gap-1", containerSizeClasses[size]), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
-            className: _chunk65VVJSQZcjs.cn.call(void 0, 
+            className: _chunkMGEUZRNQcjs.cn.call(void 0, 
               dotSizeClasses[size],
               "animate-dot-pulse rounded-full",
               dotClassName || "bg-ods-text-primary"
@@ -352,7 +469,7 @@ var ChatTypingIndicator = _react.forwardRef.call(void 0,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
-            className: _chunk65VVJSQZcjs.cn.call(void 0, 
+            className: _chunkMGEUZRNQcjs.cn.call(void 0, 
               dotSizeClasses[size],
               "animate-dot-pulse rounded-full",
               dotClassName || "bg-ods-text-primary"
@@ -363,7 +480,7 @@ var ChatTypingIndicator = _react.forwardRef.call(void 0,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
-            className: _chunk65VVJSQZcjs.cn.call(void 0, 
+            className: _chunkMGEUZRNQcjs.cn.call(void 0, 
               dotSizeClasses[size],
               "animate-dot-pulse rounded-full",
               dotClassName || "bg-ods-text-primary"
@@ -377,8 +494,154 @@ var ChatTypingIndicator = _react.forwardRef.call(void 0,
 );
 ChatTypingIndicator.displayName = "ChatTypingIndicator";
 
+// src/components/chat/chat-nav-sidebar.tsx
+
+
+var ChatNavSidebar = _react.forwardRef.call(void 0, 
+  ({ className, logo, items, sectionLabel, sectionActions, listHeader, children, footer, ...props }, ref) => {
+    const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade();
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "aside",
+      {
+        ref,
+        className: _chunkMGEUZRNQcjs.cn.call(void 0, "flex h-full w-[296px] shrink-0 flex-col border-r border-ods-border bg-ods-bg", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] px-[var(--spacing-system-xs)] pt-[var(--spacing-system-mf)]", children: [
+            logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center px-[var(--spacing-system-xs)]", children: logo }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]", children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatNavSidebarButton, { icon: item.icon, active: item.active, onClick: item.onClick, children: item.label }, item.id)) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+              sectionLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex shrink-0 items-end gap-[var(--spacing-system-m)] px-[var(--spacing-system-xs)] pt-[var(--spacing-system-xs)]", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "min-w-0 flex-1 text-ods-text-secondary text-h5", children: sectionLabel }),
+                sectionActions
+              ] }),
+              listHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0", children: listHeader }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    ref: scrollRef,
+                    onScroll: updateFade,
+                    className: "flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)] overflow-y-auto overscroll-contain pb-[var(--spacing-system-mf)]",
+                    children
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollFadeOverlay, { edge: "top", visible: fadeTop }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollFadeOverlay, { edge: "bottom", visible: fadeBottom })
+              ] })
+            ] })
+          ] }),
+          footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0 border-t border-ods-border", children: footer })
+        ]
+      }
+    );
+  }
+);
+ChatNavSidebar.displayName = "ChatNavSidebar";
+function ChatNavSidebarButton({ icon, active, className, children, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkFLS6DZENcjs.Button,
+    {
+      variant: "row",
+      type: "button",
+      "aria-current": active ? "page" : void 0,
+      "data-state": active ? "active" : void 0,
+      "data-tone": "link",
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkMGEUZRNQcjs.cn.call(void 0, "flex shrink-0 [&_svg]:size-6", active ? "text-ods-accent" : "text-ods-text-secondary"), children: icon }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate", children })
+      ]
+    }
+  );
+}
+var SKELETON_TITLE_WIDTHS = ["w-3/5", "w-4/5", "w-2/5", "w-3/4", "w-1/2", "w-2/3"];
+var TRAILING_CLASS = "flex shrink-0 items-center [&_svg]:size-6";
+var CHAT_LIST_ITEM_CLASS = _chunkMGEUZRNQcjs.cn.call(void 0, _chunkMGEUZRNQcjs.BUTTON_KIND_CLASS.row, "shrink-0");
+var ChatListItem = _react.forwardRef.call(void 0, 
+  ({ className, title, subtitle, leading, trailing, active, loading: loadingProp = false, index = 0, ...props }, ref) => {
+    const loading = _chunkMGEUZRNQcjs.useLoadingScope.call(void 0, ) || loadingProp;
+    const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)]", children: [
+          leading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: leading }),
+          loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.TextLineSkeleton, { type: "h4", className: SKELETON_TITLE_WIDTHS[index % SKELETON_TITLE_WIDTHS.length] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: _chunkMGEUZRNQcjs.cn.call(void 0, "min-w-0 flex-1 truncate text-h4", active ? "text-ods-accent" : "text-ods-text-primary"),
+              children: title
+            }
+          )
+        ] }),
+        subtitle != null && (loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.TextLineSkeleton, { type: "h6", className: "w-1/3" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkMGEUZRNQcjs.cn.call(void 0, "truncate text-h6", active ? "text-ods-text-primary" : "text-ods-text-secondary"), children: subtitle }))
+      ] }),
+      loading ? trailing != null && // The status glyph's 24px box (`MediaSkeleton.Icon` md), the loaded glyph's size.
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: TRAILING_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.MediaSkeleton.Icon, { size: "md" }) }) : trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: TRAILING_CLASS, children: trailing })
+    ] });
+    if (loading) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          "aria-hidden": true,
+          "data-tone": "accent",
+          className: _chunkMGEUZRNQcjs.cn.call(void 0, CHAT_LIST_ITEM_CLASS, className),
+          ..._chunkMGEUZRNQcjs.loadingItemProps.call(void 0, props),
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkFLS6DZENcjs.Button,
+      {
+        variant: "row",
+        ref,
+        type: "button",
+        "aria-current": active ? "true" : void 0,
+        "data-state": active ? "active" : void 0,
+        "data-tone": "accent",
+        className: _chunkMGEUZRNQcjs.cn.call(void 0, "shrink-0", className),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+ChatListItem.displayName = "ChatListItem";
+function ChatListItemLoadingPage({
+  count,
+  subtitle = false,
+  trailing = false
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMGEUZRNQcjs.LoadingItems, { count, children: (index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ChatListItem,
+    {
+      loading: true,
+      index,
+      title: "",
+      subtitle: subtitle ? "" : void 0,
+      trailing: trailing ? "" : void 0,
+      "data-loading-item": true
+    }
+  ) });
+}
+
 // src/components/chat/mingo-onboarding-card.tsx
 
+var CARD_BASE_CLASS = "flex w-full items-start border-b border-ods-border bg-ods-card p-[var(--spacing-system-s)] text-left last:border-b-0";
+var CARD_BODY_CLASS = "flex w-full flex-col gap-[var(--spacing-system-xxs)]";
+var CARD_TITLE_ROW_CLASS = "flex w-full items-center gap-[var(--spacing-system-xxs)]";
+var CARD_ICON_CLASS = "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary";
+var CARD_ACTIONS_CLASS = "mt-[var(--spacing-system-xs)] flex flex-wrap items-center gap-[var(--spacing-system-xxs)]";
+var MINGO_ONBOARDING_CARD_SKELETON_ACTIONS = 3;
+var ROW_VARIANTS = [
+  { slashWidth: "w-20", descriptionLines: 2 },
+  { slashWidth: "w-16", descriptionLines: 2 },
+  { slashWidth: "w-24", descriptionLines: 2 },
+  { slashWidth: "w-28", descriptionLines: 2 },
+  { slashWidth: "w-24", descriptionLines: 1 },
+  { slashWidth: "w-16", descriptionLines: 2 }
+];
 function MingoOnboardingCard({
   icon,
   title,
@@ -386,48 +649,68 @@ function MingoOnboardingCard({
   description,
   actions,
   onClick,
-  className
+  loading: loadingProp = false,
+  skeletonIndex = 0,
+  className,
+  ...props
 }) {
+  const loading = _chunkMGEUZRNQcjs.useLoadingScope.call(void 0, ) || loadingProp;
   const hasActions = !!actions && actions.length > 0;
-  const isInteractive = !hasActions && !!onClick;
-  const body = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-[var(--spacing-system-xxs)]", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-[var(--spacing-system-xxs)]", children: [
-      icon ? (
+  const itemProps = _chunkMGEUZRNQcjs.loadingItemProps.call(void 0, props);
+  const variant = ROW_VARIANTS[skeletonIndex % ROW_VARIANTS.length];
+  const isInteractive = !loading && !hasActions && !!onClick;
+  const actionButtons = hasActions ? actions.map((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkFLS6DZENcjs.Button,
+    {
+      "data-loading-item": true,
+      type: "button",
+      variant: "outline",
+      size: "small",
+      onClick: (e) => {
+        e.stopPropagation();
+        action.onClick(e);
+      },
+      children: action.label
+    },
+    action.id
+  )) : null;
+  const body = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_BODY_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_TITLE_ROW_CLASS, children: [
+      loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: CARD_ICON_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.MediaSkeleton.Icon, { size: "sm" }) }) : icon ? (
         // Icon slot — monochrome `ods-text-secondary` (≈ #888) so
         // consumers can drop any `icons-v2-generated` glyph (they use
         // `currentColor`) without per-card styling. Brand multi-color
         // SVGs ignore this color.
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary", children: icon })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: CARD_ICON_CLASS, children: icon })
       ) : null,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate text-ods-text-primary text-h6", children: title }),
-      slashCommand ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "whitespace-nowrap text-ods-text-secondary text-h6", children: slashCommand }) : null
+      loading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkNNNRN4OFcjs.TextLineSkeleton,
+          {
+            type: "h6",
+            className: SKELETON_TITLE_WIDTHS[skeletonIndex % SKELETON_TITLE_WIDTHS.length]
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.TextLineSkeleton, { type: "h6", className: _chunkMGEUZRNQcjs.cn.call(void 0, "shrink-0", variant.slashWidth) })
+      ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate text-ods-text-primary text-h6", children: title }),
+        slashCommand ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "whitespace-nowrap text-ods-text-secondary text-h6", children: slashCommand }) : null
+      ] })
     ] }),
-    description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full text-ods-text-secondary text-h6", children: description }) : null,
-    hasActions ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-[var(--spacing-system-xs)] flex flex-wrap items-center gap-[var(--spacing-system-xxs)]", children: actions.map((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkTF5D5MNOcjs.Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "small",
-        onClick: (e) => {
-          e.stopPropagation();
-          action.onClick(e);
-        },
-        children: action.label
-      },
-      action.id
-    )) }) : null
+    loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.TextLineSkeleton, { type: "h6", lines: variant.descriptionLines, className: "w-full" }) : description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full text-ods-text-secondary text-h6", children: description }) : null,
+    loading && actions === void 0 ? (
+      // The commands are not read yet: the typical card's three action chips.
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CARD_ACTIONS_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMGEUZRNQcjs.LoadingItems, { count: MINGO_ONBOARDING_CARD_SKELETON_ACTIONS, children: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNNNRN4OFcjs.InteractiveSkeleton.Button, { "data-loading-item": true, size: "small", className: "w-16" }) }) })
+    ) : hasActions ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CARD_ACTIONS_CLASS, children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMGEUZRNQcjs.InertWhileLoading, { className: "contents", children: actionButtons }) : actionButtons }) : null
   ] });
-  const baseClass = _chunk65VVJSQZcjs.cn.call(void 0, 
-    "flex w-full items-start border-b border-ods-border bg-ods-card p-[var(--spacing-system-s)] text-left last:border-b-0",
-    isInteractive && "cursor-pointer transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent",
-    className
-  );
+  const rowCard = !!onClick && !hasActions;
+  const baseClass = _chunkMGEUZRNQcjs.cn.call(void 0, rowCard ? _chunkMGEUZRNQcjs.BUTTON_KIND_CLASS.row : CARD_BASE_CLASS, className);
   if (isInteractive) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", onClick, className: baseClass, children: body });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFLS6DZENcjs.Button, { variant: "row", type: "button", onClick, className, ...itemProps, children: body });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: baseClass, children: body });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: baseClass, "aria-hidden": loading || void 0, ...itemProps, children: body });
 }
+var MINGO_ONBOARDING_SKELETON_ROWS = ROW_VARIANTS.length;
 
 // src/components/chat/slash-command-suggestions.tsx
 
@@ -446,13 +729,13 @@ function SlashCommandSuggestions({
     {
       role: "menu",
       "aria-label": "Slash command suggestions",
-      className: _chunk65VVJSQZcjs.cn.call(void 0, 
+      className: _chunkMGEUZRNQcjs.cn.call(void 0, 
         "absolute bottom-full left-0 right-0 z-50 mb-2 max-h-96 overflow-y-auto overscroll-contain",
         "rounded-md border border-ods-border bg-ods-card shadow-lg",
         className
       ),
       children: commands.map((cmd, idx) => {
-        const Icon = _chunkTUAATMUEcjs.resolveIcon.call(void 0, cmd.iconName);
+        const Icon = _chunkCS5SZJFVcjs.resolveIcon.call(void 0, cmd.iconName);
         const legacyMeta = !cmd.iconName && cmd.primarySourceId && resolveSourceIcon ? resolveSourceIcon(cmd.primarySourceId) : void 0;
         const LegacyIcon = _optionalChain([legacyMeta, 'optionalAccess', _4 => _4.Icon]);
         const title = _nullishCoalesce(_nullishCoalesce(cmd.label, () => ( _optionalChain([legacyMeta, 'optionalAccess', _5 => _5.label]))), () => ( cmd.id));
@@ -489,7 +772,7 @@ function SlashCommandSuggestions({
                 slashCommand: slashLabel,
                 description: cmd.description,
                 actions: cardActions,
-                className: _chunk65VVJSQZcjs.cn.call(void 0, "transition-colors", isHighlighted && "bg-ods-bg-hover")
+                className: _chunkMGEUZRNQcjs.cn.call(void 0, "transition-colors", isHighlighted && "bg-ods-bg-hover")
               }
             )
           },
@@ -548,7 +831,7 @@ function buildChipEl(token, label, icon) {
   span.className = "mx-0.5 inline-flex h-9 items-center select-none align-top";
   span.innerHTML = _server.renderToStaticMarkup.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkBNUZKBNVcjs.Tag,
+      _chunkZJS45HQZcjs.Tag,
       {
         as: "span",
         variant: "badge",
@@ -918,7 +1201,7 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: _chunk65VVJSQZcjs.cn.call(void 0, 
+      className: _chunkMGEUZRNQcjs.cn.call(void 0, 
         fullWidth ? "w-full flex-shrink-0" : "mx-auto w-full max-w-ods-content-narrow flex-shrink-0",
         className
       ),
@@ -936,7 +1219,7 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
             className: "flex min-h-11 w-full items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] md:min-h-12",
             children: [
               awaitingTeam && awaitingTeam.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkBEMGJDXIcjs.AvatarStack,
+                _chunkXAA5LUHCcjs.AvatarStack,
                 {
                   people: awaitingTeam,
                   total: awaitingTeamCount,
@@ -971,7 +1254,7 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
                 focusEditor();
               }
             },
-            className: _chunk65VVJSQZcjs.cn.call(void 0, 
+            className: _chunkMGEUZRNQcjs.cn.call(void 0, 
               // `items-center` keeps the empty single-line text AND a mention chip
               // vertically centered the same way. With a chip in the box, `py-1.5`
               // (6px) pairs with the editor's `leading-9` (36px) → that row is
@@ -993,7 +1276,7 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
                   "span",
                   {
                     "data-editor-ghost": true,
-                    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                    className: _chunkMGEUZRNQcjs.cn.call(void 0, 
                       // One line, clipped with an ellipsis (Figma 954:28455): the
                       // disabled copy is a sentence, and the panel's narrowest
                       // width does not fit it — wrapped, it ran under the row.
@@ -1009,7 +1292,7 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
                   "p",
                   {
                     "data-editor-ghost": true,
-                    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                    className: _chunkMGEUZRNQcjs.cn.call(void 0, 
                       "pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-ods-text-secondary text-h4",
                       hasChips && "!leading-9"
                     ),
@@ -1040,7 +1323,7 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
                     },
                     onFocus: () => setFocused(true),
                     onBlur: () => setFocused(false),
-                    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+                    className: _chunkMGEUZRNQcjs.cn.call(void 0, 
                       "max-h-[160px] overflow-y-auto overscroll-contain whitespace-pre-wrap break-words outline-none",
                       // While a ghost preview shows, the editor stays IN FLOW (it
                       // alone drives the row height, which must NOT change on hover —
@@ -1071,24 +1354,16 @@ var ChatInput = _react.forwardRef.call(void 0, (allProps, ref) => {
                 )
               ] }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "button",
+                _chunkFLS6DZENcjs.Button,
                 {
+                  variant: "bare",
+                  size: "icon-sm",
                   type: "button",
                   "aria-label": isStopMode ? "Stop generation" : "Send message",
+                  "data-state": focused && !isStopMode ? "active" : void 0,
                   onClick: isStopMode ? handleStop : handleSubmit,
                   disabled: isStopMode ? isStopping : sendDisabled,
-                  className: _chunk65VVJSQZcjs.cn.call(void 0, 
-                    "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
-                    // Focus accent applies to the SEND icon only. Stop stays neutral
-                    // regardless of where focus sits — otherwise it reads yellow after
-                    // an Enter-send (editor keeps focus) but gray after an approve
-                    // click (focus moved to the card button).
-                    focused && !isStopMode && "text-ods-accent",
-                    "[&_svg]:size-4 md:[&_svg]:size-6",
-                    "cursor-pointer hover:text-ods-text-primary",
-                    "focus-visible:text-ods-accent focus-visible:outline-none",
-                    "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary"
-                  ),
+                  className: "shrink-0",
                   children: isStopMode ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6CJIAC3Bcjs.StopCircleIcon, { size: 20 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUYHKZN5Dcjs.Send01Icon, { size: 20 })
                 }
               )
@@ -1103,7 +1378,7 @@ ChatInput.displayName = "ChatInput";
 
 // src/utils/format-date.ts
 var INVALID_DATE_PLACEHOLDER = "\u2014";
-var render = (input, fields) => _chunkBNUZKBNVcjs.formatDateWithTimezone.call(void 0, input, _chunkBNUZKBNVcjs.VIEWER_TIMEZONE, fields, { viewerLocale: true }) || INVALID_DATE_PLACEHOLDER;
+var render = (input, fields) => _chunkZJS45HQZcjs.formatDateWithTimezone.call(void 0, input, _chunkZJS45HQZcjs.VIEWER_TIMEZONE, fields, { viewerLocale: true }) || INVALID_DATE_PLACEHOLDER;
 var formatDate = (input) => render(input, { dateStyle: "short" });
 var formatTime = (input) => render(input, { timeStyle: "short" });
 
@@ -1131,4 +1406,12 @@ var formatTime = (input) => render(input, { timeStyle: "short" });
 
 
 
-exports.Modal = Modal; exports.ModalContent = ModalContent; exports.ModalTwoColumn = ModalTwoColumn; exports.ModalHeader = ModalHeader; exports.ModalTitle = ModalTitle; exports.ModalFooter = ModalFooter; exports.CHAT_TYPE = CHAT_TYPE; exports.OWNER_TYPE = OWNER_TYPE; exports.MESSAGE_ROLE = MESSAGE_ROLE; exports.ASSISTANT_TYPE = ASSISTANT_TYPE; exports.AUTHOR_TYPE = AUTHOR_TYPE; exports.APPROVAL_STATUS = APPROVAL_STATUS; exports.APPROVAL_BLOCK_VARIANT = APPROVAL_BLOCK_VARIANT; exports.CHAT_APPEARANCE = CHAT_APPEARANCE; exports.CONNECTION_STATUS = CONNECTION_STATUS; exports.isStructuredContent = isStructuredContent; exports.normalizeContent = normalizeContent; exports.formatDate = formatDate; exports.formatTime = formatTime; exports.ChatTypingIndicator = ChatTypingIndicator; exports.MingoOnboardingCard = MingoOnboardingCard; exports.SlashCommandSuggestions = SlashCommandSuggestions; exports.ChatInput = ChatInput;
+
+
+
+
+
+
+
+
+exports.useScrollFade = useScrollFade; exports.ScrollFadeOverlay = ScrollFadeOverlay; exports.ScrollShadow = ScrollShadow; exports.Modal = Modal; exports.ModalContent = ModalContent; exports.ModalTwoColumn = ModalTwoColumn; exports.ModalHeader = ModalHeader; exports.ModalTitle = ModalTitle; exports.ModalFooter = ModalFooter; exports.CHAT_TYPE = CHAT_TYPE; exports.OWNER_TYPE = OWNER_TYPE; exports.MESSAGE_ROLE = MESSAGE_ROLE; exports.ASSISTANT_TYPE = ASSISTANT_TYPE; exports.AUTHOR_TYPE = AUTHOR_TYPE; exports.APPROVAL_STATUS = APPROVAL_STATUS; exports.APPROVAL_BLOCK_VARIANT = APPROVAL_BLOCK_VARIANT; exports.CHAT_APPEARANCE = CHAT_APPEARANCE; exports.CONNECTION_STATUS = CONNECTION_STATUS; exports.isStructuredContent = isStructuredContent; exports.normalizeContent = normalizeContent; exports.formatDate = formatDate; exports.formatTime = formatTime; exports.ChatTypingIndicator = ChatTypingIndicator; exports.ChatNavSidebar = ChatNavSidebar; exports.SKELETON_TITLE_WIDTHS = SKELETON_TITLE_WIDTHS; exports.ChatListItem = ChatListItem; exports.ChatListItemLoadingPage = ChatListItemLoadingPage; exports.MingoOnboardingCard = MingoOnboardingCard; exports.MINGO_ONBOARDING_SKELETON_ROWS = MINGO_ONBOARDING_SKELETON_ROWS; exports.SlashCommandSuggestions = SlashCommandSuggestions; exports.ChatInput = ChatInput;