sonance-brand-mcp 1.3.83 → 1.3.85

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -2582,7 +2582,15 @@ export function SonanceDevTools() {
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto p-4 text-[#333F48]">
+      <div
+        className="flex-1 overflow-y-auto p-4 text-[#333F48]"
+        style={{
+          overscrollBehavior: "contain", // Prevent scroll chaining to parent (modal)
+          WebkitOverflowScrolling: "touch", // Smooth scrolling on iOS
+        }}
+        onWheel={(e) => e.stopPropagation()} // Prevent modal from intercepting wheel events
+        onTouchMove={(e) => e.stopPropagation()} // Prevent modal from intercepting touch scroll
+      >
         {/* Analysis Tab */}
         {activeTab === "analysis" && (
           <AnalysisPanel

package/dist/assets/dev-tools/components/ChatInterface.tsx

@@ -396,7 +396,27 @@ export function ChatInterface({
       )}
 
       {/* Input */}
-      <div className="flex gap-2">
+      <div
+        className="flex gap-2"
+        onPointerDown={(e) => {
+          // Force focus to input when clicking anywhere in this container
+          // This bypasses modal focus traps by using requestAnimationFrame
+          e.stopPropagation();
+          const input = inputRef.current;
+          if (input && !isProcessing) {
+            // Blur any currently focused element first (escape focus trap)
+            if (document.activeElement && document.activeElement !== input) {
+              (document.activeElement as HTMLElement).blur?.();
+            }
+            // Use rAF to ensure focus happens after any focus trap logic runs
+            requestAnimationFrame(() => {
+              input.focus();
+              // Also try native focus method as fallback
+              input.click();
+            });
+          }
+        }}
+      >
         <input
           ref={inputRef}
           type="text"
@@ -404,15 +424,31 @@ export function ChatInterface({
           onChange={(e) => setInput(e.target.value)}
           onClick={(e) => {
             e.stopPropagation();
-            inputRef.current?.focus();
+            e.preventDefault();
+            // Force focus using multiple strategies
+            const input = inputRef.current;
+            if (input) {
+              // Escape any focus trap
+              if (document.activeElement && document.activeElement !== input) {
+                (document.activeElement as HTMLElement).blur?.();
+              }
+              input.focus();
+            }
           }}
           onPointerDown={(e) => {
             e.stopPropagation();
-            inputRef.current?.focus();
+            // Don't preventDefault here - let native click handling work
+            const input = inputRef.current;
+            if (input) {
+              requestAnimationFrame(() => input.focus());
+            }
           }}
           onMouseDown={(e) => {
             e.stopPropagation();
-            inputRef.current?.focus();
+            const input = inputRef.current;
+            if (input) {
+              requestAnimationFrame(() => input.focus());
+            }
           }}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.83",
+  "version": "1.3.85",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",