sonance-brand-mcp 1.3.77 → 1.3.79

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";
@@ -126,6 +127,34 @@ export function SonanceDevTools() {
   const dragOffsetRef = useRef({ x: 0, y: 0 });
   const panelRef = useRef<HTMLDivElement>(null);
 
+  // Portal container state - ensures DevTool is always on top of modals
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  // Create and manage dedicated portal container that stays on top
+  useEffect(() => {
+    // Create container if it doesn't exist
+    let container = document.getElementById('sonance-devtools-root');
+    if (!container) {
+      container = document.createElement('div');
+      container.id = 'sonance-devtools-root';
+      container.style.cssText = 'position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; isolation: isolate;';
+      document.body.appendChild(container);
+    }
+    setPortalContainer(container);
+
+    // MutationObserver to keep container as last child of body
+    // This ensures DevTool stays on top even when modals are dynamically added
+    const observer = new MutationObserver(() => {
+      if (container && container.nextSibling) {
+        document.body.appendChild(container);
+      }
+    });
+    
+    observer.observe(document.body, { childList: true });
+    
+    return () => observer.disconnect();
+  }, []);
+
   // 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>>({});
@@ -767,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();
@@ -820,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) {
@@ -862,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 || "";
           
@@ -916,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");
@@ -2384,7 +2430,7 @@ export function SonanceDevTools() {
     <button
       onClick={() => setIsOpen(true)}
       className={cn(
-        "fixed bottom-6 right-6 z-[2147483646]",
+        "fixed bottom-6 right-6 z-[2147483646] pointer-events-auto",
         "flex h-14 w-14 items-center justify-center",
         "rounded-full bg-[#333F48] text-white shadow-lg",
         "hover:scale-105 hover:shadow-xl",
@@ -2403,7 +2449,7 @@ export function SonanceDevTools() {
       ref={panelRef}
       data-sonance-devtools="true"
       className={cn(
-        "fixed bottom-6 right-6 z-[2147483647]",
+        "fixed bottom-6 right-6 z-[2147483647] pointer-events-auto",
         "w-[360px] max-h-[80vh]",
         "bg-white rounded-lg shadow-2xl border border-gray-200",
         "flex flex-col overflow-hidden",
@@ -2637,6 +2683,9 @@ export function SonanceDevTools() {
     </div>
   );
 
+  // Wait for portal container to be ready
+  if (!portalContainer) return null;
+
   return createPortal(
     <>
       {trigger}
@@ -2677,6 +2726,6 @@ export function SonanceDevTools() {
         />
       )}
     </>,
-    document.body
+    portalContainer
   );
 }

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.77",
+  "version": "1.3.79",
   "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",