sonance-brand-mcp 1.3.78 → 1.3.80

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

@@ -64,6 +64,7 @@ import {
   removePreviewStyles,
   injectPreviewStyles,
   extractPreviewCSSFromCode,
+  getActiveModalContent,
 } from "./utils";
 import { Section, ColorSwatch, SelectField } from "./components/common";
 import { InspectorOverlay } from "./components/InspectorOverlay";
@@ -795,14 +796,28 @@ export function SonanceDevTools() {
         return rect; // No scroll parent, use original rect
       };
 
+      // Helper: Detect active modal and filter elements to only those in the topmost layer
+      const activeModalContent = getActiveModalContent();
+      const isInActiveLayer = (el: Element): boolean => {
+        // Always exclude DevTools panel
+        if (el.closest("[data-sonance-devtools]")) return false;
+
+        // If a modal is active, only include elements inside the modal content
+        if (activeModalContent) {
+          return activeModalContent.contains(el) || el === activeModalContent;
+        }
+
+        return true;
+      };
+
       // Scan for tagged components
       if (inspectorEnabled || activeTab === "components") {
         // 1. Scan for explicitly tagged components
         const taggedComponents = document.querySelectorAll("[data-sonance-name]");
         taggedComponents.forEach((el) => {
-          // Skip DevTools elements
-          if (el.closest("[data-sonance-devtools]")) return;
-          
+          // Skip elements outside the active layer (DevTools, behind modals)
+          if (!isInActiveLayer(el)) return;
+
           const name = el.getAttribute("data-sonance-name");
           if (name) {
             const rawRect = el.getBoundingClientRect();
@@ -848,9 +863,9 @@ export function SonanceDevTools() {
         Object.entries(genericSelectors).forEach(([genericName, selector]) => {
           const elements = document.querySelectorAll(selector);
           elements.forEach((el) => {
-            // Skip DevTools elements
-            if (el.closest("[data-sonance-devtools]")) return;
-            
+            // Skip elements outside the active layer (DevTools, behind modals)
+            if (!isInActiveLayer(el)) return;
+
             const rawRect = el.getBoundingClientRect();
             const rect = getVisibleRect(el, rawRect);
             if (rect && rect.width > 0 && rect.height > 0) {
@@ -890,6 +905,9 @@ export function SonanceDevTools() {
       if (activeTab === "logos") {
         const images = document.querySelectorAll("img");
         images.forEach((img) => {
+          // Skip elements outside the active layer (DevTools, behind modals)
+          if (!isInActiveLayer(img)) return;
+
           const src = img.src || img.getAttribute("src") || "";
           const alt = img.alt || "";
           
@@ -944,9 +962,9 @@ export function SonanceDevTools() {
         const addedElements = new Set<Element>();
         
         textElements.forEach((el) => {
-          // Skip elements that are part of the DevTools UI
-          if (el.closest("[data-sonance-devtools]")) return;
-          
+          // Skip elements outside the active layer (DevTools, behind modals)
+          if (!isInActiveLayer(el)) return;
+
           // Skip if this element is inside another text element we're already tracking
           // This prevents duplicate labels for nested structures
           const parentTextEl = el.parentElement?.closest("h1, h2, h3, h4, h5, h6, p, a, label, blockquote, figcaption, li");

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

@@ -402,6 +402,11 @@ export function ChatInterface({
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}
+          onPointerDown={(e) => {
+            // Force focus capture - prevents modal focus trapping from blocking input
+            e.stopPropagation();
+            setTimeout(() => inputRef.current?.focus(), 0);
+          }}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();

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

@@ -88,9 +88,11 @@ export function InspectorOverlay({
       const clickX = e.clientX;
       const clickY = e.clientY;
 
-      // Don't capture clicks on the DevTools panel itself
+      // Don't capture clicks on the DevTools panel or its portal container
       const devToolsPanel = document.querySelector('[data-sonance-devtools="true"]');
+      const devToolsRoot = document.getElementById('sonance-devtools-root');
       if (devToolsPanel?.contains(e.target as Node)) return;
+      if (devToolsRoot?.contains(e.target as Node)) return;
 
       // Find ALL elements that contain the click point
       const matchingElements = elements.filter(el =>

package/dist/assets/dev-tools/utils.ts

@@ -329,6 +329,55 @@ export function extractPreviewCSSFromCode(
   return rules.join("\n");
 }
 
+/**
+ * Finds the topmost modal/dialog content container if one is open.
+ * Returns the content element (not the backdrop) or null if no modal is active.
+ *
+ * Detection strategy:
+ * 1. Look for Radix UI dialogs with [data-state="open"]
+ * 2. Look for role="dialog" elements
+ * 3. Look for native <dialog open> elements
+ * 4. Look for custom Dialog with z-50 fixed positioning
+ * 5. Look for Drawer/Sheet overlays
+ */
+export function getActiveModalContent(): Element | null {
+  if (typeof document === "undefined") return null;
+
+  // Priority-ordered list of modal content selectors
+  const contentSelectors = [
+    // Radix UI Dialog content
+    '[data-state="open"][role="dialog"]',
+    // Custom Dialog content (has data-sonance-name="dialog")
+    '.fixed.inset-0.z-50 [data-sonance-name="dialog"]',
+    '.fixed.inset-0.z-50 > .relative.z-10',
+    // Native dialog
+    'dialog[open]',
+    // aria-modal content
+    '[aria-modal="true"]',
+    // Sheet/Drawer content
+    '[data-state="open"][data-sheet-content]',
+    '[data-state="open"][role="complementary"]',
+  ];
+
+  for (const selector of contentSelectors) {
+    const modal = document.querySelector(selector);
+    if (modal) {
+      // Return innermost dialog content, not the wrapper
+      return modal;
+    }
+  }
+
+  // Fallback: check for z-50 fixed full-screen overlays
+  const fixedOverlays = document.querySelectorAll('.fixed.inset-0.z-50');
+  for (const overlay of fixedOverlays) {
+    // Find the content within (skip if it's just a backdrop)
+    const content = overlay.querySelector('.relative.z-10, [data-sonance-name]');
+    if (content) return content;
+  }
+
+  return null;
+}
+
 // Helper to check if a category should show scope options
 export function shouldShowScopeOptions(category: string): boolean {
   if (category === "all") return true; // Show for "all" selection

package/package.json

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