@swift-food-services/catering-widget 0.2.0-beta.0 → 0.2.0-beta.2

package/dist/index.cjs

@@ -3557,12 +3557,12 @@ styleInject(`/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
   .swift-catering-widget .right-8 {
     right: calc(var(--spacing) * 8);
   }
+  .swift-catering-widget .right-96 {
+    right: calc(var(--spacing) * 96);
+  }
   .swift-catering-widget .right-\\[-45px\\] {
     right: -45px;
   }
-  .swift-catering-widget .right-\\[calc\\(24rem\\+0\\.5rem\\)\\] {
-    right: 24.5rem;
-  }
   .swift-catering-widget .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -4472,6 +4472,9 @@ styleInject(`/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
   .swift-catering-widget .overflow-y-auto {
     overflow-y: auto;
   }
+  .swift-catering-widget .overscroll-contain {
+    overscroll-behavior: contain;
+  }
   .swift-catering-widget .overscroll-none {
     overscroll-behavior: none;
   }
@@ -16819,7 +16822,7 @@ function AIChatBody() {
     await applyEditField(field, value, idx);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "swift-chat-design bg-white rounded-xl shadow-sm border border-base-200 flex h-full min-h-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2.5 flex items-center gap-3 border-b border-base-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 px-3 py-2.5 flex items-center gap-3 border-b border-base-200", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-full bg-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 text-white" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-800", children: "AI Assistant" }),
@@ -16857,7 +16860,7 @@ function AIChatBody() {
         {
           ref: messagesScrollRef,
           onScroll: handleMessagesScroll,
-          className: "absolute inset-0 overflow-y-auto p-3",
+          className: "absolute inset-0 overflow-y-auto overscroll-contain p-3",
           children: /* @__PURE__ */ jsxRuntime.jsx(ChatMessagesView, {})
         }
       ),
@@ -16877,8 +16880,8 @@ function AIChatBody() {
         }
       ) })
     ] }),
-    actionChips.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-base-200 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(ChipGroup, { chips: actionChips, onAction: handleChipClick }) }),
-    missingFields && missingFields.fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    actionChips.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-t border-base-200 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(ChipGroup, { chips: actionChips, onAction: handleChipClick }) }),
+    missingFields && missingFields.fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       MissingFieldsClarifier,
       {
         missing: missingFields,
@@ -16891,8 +16894,8 @@ function AIChatBody() {
           setEditValue(void 0);
         }
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-base-200 p-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", initial: false, children: editField !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-t border-base-200 p-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", initial: false, children: editField !== null ? /* @__PURE__ */ jsxRuntime.jsx(
       react$1.motion.div,
       {
         initial: { opacity: 0, y: 8 },
@@ -19836,17 +19839,34 @@ function resolveDraftItems(mealSessionParts, aiMealSessions, activeMealSessionIn
 function SuggestionsOverlay({ onClose }) {
   const { stickyTopOffset = 0 } = useCateringConfig();
   react.useEffect(() => {
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    const body = document.body;
+    const scrollY = window.scrollY;
+    const prev = {
+      position: body.style.position,
+      top: body.style.top,
+      left: body.style.left,
+      right: body.style.right,
+      width: body.style.width
+    };
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.width = "100%";
     return () => {
-      document.body.style.overflow = prev;
+      body.style.position = prev.position;
+      body.style.top = prev.top;
+      body.style.left = prev.left;
+      body.style.right = prev.right;
+      body.style.width = prev.width;
+      window.scrollTo(0, scrollY);
     };
   }, []);
   if (typeof document === "undefined") return null;
   const overlay = /* @__PURE__ */ jsxRuntime.jsxs(
     react$1.motion.div,
     {
-      className: "fixed bottom-0 left-2 right-[calc(24rem+0.5rem)] z-50 hidden md:block",
+      className: "fixed bottom-0 left-2 right-96 z-50 hidden md:block",
       style: { top: stickyTopOffset },
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -26700,6 +26720,7 @@ function CateringOrderBuilder() {
   };
   const { stickyTopOffset = 0, publishableKey, aiEnabled = false } = useCateringConfig();
   const effectiveRightPanelTab = aiEnabled ? rightPanelTab : "cart";
+  const [overlayVisible, setOverlayVisible] = react.useState(false);
   const basketColumnRef = react.useRef(null);
   const [basketHeight, setBasketHeight] = react.useState("100vh");
   react.useEffect(() => {
@@ -27522,17 +27543,24 @@ function CateringOrderBuilder() {
                   onRegisterMobileSearchSetter: handleRegisterMobileSearchSetter
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(SuggestionsOverlayBridge, { active: effectiveRightPanelTab === "ai" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SuggestionsOverlayBridge,
+                {
+                  active: effectiveRightPanelTab === "ai",
+                  onVisibleChange: setOverlayVisible
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: basketColumnRef,
-              className: "hidden md:flex md:w-96 flex-shrink-0 flex-col sticky overflow-hidden py-2 px-1",
+              className: `hidden md:flex md:w-96 flex-shrink-0 flex-col overflow-hidden py-2 px-1 ${overlayVisible ? "fixed z-50 bg-base-100" : "sticky"}`,
               style: {
                 top: stickyTopOffset,
-                height: basketHeight,
+                right: overlayVisible ? 0 : void 0,
+                height: overlayVisible ? `calc(100dvh - ${stickyTopOffset}px)` : basketHeight,
                 alignSelf: "flex-start"
               },
               children: mealSessions[activeSessionIndex] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col gap-2 overflow-hidden", children: [
@@ -28345,7 +28373,10 @@ function MobileAIInput({
     )
   ] });
 }
-function SuggestionsOverlayBridge({ active }) {
+function SuggestionsOverlayBridge({
+  active,
+  onVisibleChange
+}) {
   const {
     hasResults,
     suggestionsOverlayDismissed,
@@ -28354,6 +28385,9 @@ function SuggestionsOverlayBridge({ active }) {
   } = useChatSessionContext();
   const hasContent = hasResults || activeViewedPreview !== null;
   const visible = active && hasContent && !suggestionsOverlayDismissed;
+  react.useEffect(() => {
+    onVisibleChange?.(visible);
+  }, [visible, onVisibleChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: visible && /* @__PURE__ */ jsxRuntime.jsx(
     SuggestionsOverlay,
     {