sonance-brand-mcp 1.3.82 → 1.3.84

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

@@ -155,35 +155,6 @@ 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>>({});

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.82",
+  "version": "1.3.84",
   "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",