sonance-brand-mcp 1.3.80 → 1.3.82

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

@@ -155,6 +155,35 @@ export function SonanceDevTools() {
     return () => observer.disconnect();
   }, []);
 
+  // Protect DevTools from host app event capture (e.g., modal focus traps)
+  // This uses capture phase to intercept events BEFORE host app listeners can grab them
+  useEffect(() => {
+    if (!mounted || !isOpen) return;
+
+    const protectDevToolsEvents = (e: Event) => {
+      // Check if the event target is inside the DevTools panel
+      const devToolsPanel = document.querySelector('[data-sonance-devtools="true"]');
+      if (devToolsPanel?.contains(e.target as Node)) {
+        // Stop the event from being captured by host app listeners
+        e.stopImmediatePropagation();
+      }
+    };
+
+    // Capture phase (third param = true) runs before bubble phase
+    // stopImmediatePropagation prevents other capture listeners from running
+    const events = ['pointerdown', 'mousedown', 'touchstart', 'click', 'focus', 'focusin'];
+
+    events.forEach(eventType => {
+      document.addEventListener(eventType, protectDevToolsEvents, true);
+    });
+
+    return () => {
+      events.forEach(eventType => {
+        document.removeEventListener(eventType, protectDevToolsEvents, true);
+      });
+    };
+  }, [mounted, isOpen]);
+
   // Component-specific style overrides (for scalable, project-agnostic styling)
   // Key: component type (e.g., "card", "button-primary", "card:variant123"), Value: style overrides
   const [componentOverrides, setComponentOverrides] = useState<Record<string, ComponentStyle>>({});
@@ -2461,6 +2490,9 @@ export function SonanceDevTools() {
         transform: `translate(${dragPosition.x}px, ${dragPosition.y}px)`,
       }}
       // Event isolation - prevent clicks from closing popups in the main app
+      // onPointerDown fires before onMouseDown in modern browsers - must stop both
+      onPointerDown={(e) => e.stopPropagation()}
+      onTouchStart={(e) => e.stopPropagation()}
       onMouseDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
       onFocus={(e) => e.stopPropagation()}

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

@@ -402,10 +402,17 @@ export function ChatInterface({
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}
+          onClick={(e) => {
+            e.stopPropagation();
+            inputRef.current?.focus();
+          }}
           onPointerDown={(e) => {
-            // Force focus capture - prevents modal focus trapping from blocking input
             e.stopPropagation();
-            setTimeout(() => inputRef.current?.focus(), 0);
+            inputRef.current?.focus();
+          }}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            inputRef.current?.focus();
           }}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
@@ -433,6 +440,7 @@ export function ChatInterface({
         />
         <button
           onClick={() => handleSend(input || inputRef.current?.value || "")}
+          onPointerDown={(e) => e.stopPropagation()}
           disabled={isProcessing}
           className={cn(
             "px-3 py-2 rounded transition-colors",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.80",
+  "version": "1.3.82",
   "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",