sonance-brand-mcp 1.3.77 → 1.3.78

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

@@ -126,6 +126,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>>({});
@@ -2384,7 +2412,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 +2431,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 +2665,9 @@ export function SonanceDevTools() {
     </div>
   );
 
+  // Wait for portal container to be ready
+  if (!portalContainer) return null;
+
   return createPortal(
     <>
       {trigger}
@@ -2677,6 +2708,6 @@ export function SonanceDevTools() {
         />
       )}
     </>,
-    document.body
+    portalContainer
   );
 }

package/package.json

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