@inkindcards/semantic-layer 2.2.1 → 2.2.2

package/dist/components.cjs

@@ -3,6 +3,7 @@
 var chunkT2C43AAL_cjs = require('./chunk-T2C43AAL.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 var containerStyle = {
   fontFamily: "system-ui, -apple-system, sans-serif",
@@ -836,6 +837,21 @@ function InspectableRegistry({ children }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(InspectableRegistryContext.Provider, { value, children });
 }
+function getChildrenBounds(el) {
+  const children = el.children;
+  if (children.length === 0) return null;
+  let top = Infinity, left = Infinity, bottom = -Infinity, right = -Infinity;
+  for (let i = 0; i < children.length; i++) {
+    const r = children[i].getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) continue;
+    top = Math.min(top, r.top);
+    left = Math.min(left, r.left);
+    bottom = Math.max(bottom, r.bottom);
+    right = Math.max(right, r.right);
+  }
+  if (top === Infinity) return null;
+  return new DOMRect(left, top, right - left, bottom - top);
+}
 function Inspectable({
   label,
   currentSource = "unknown",
@@ -845,7 +861,8 @@ function Inspectable({
 }) {
   const registry = react.useContext(InspectableRegistryContext);
   const id = react.useId();
-  const ref = react.useRef(null);
+  const wrapperRef = react.useRef(null);
+  const [rect, setRect] = react.useState(null);
   const inferredColumns = columns ?? (data?.[0] ? Object.keys(data[0]) : []);
   const sampleValues = data?.slice(0, 3) ?? [];
   react.useEffect(() => {
@@ -856,70 +873,86 @@ function Inspectable({
       currentSource,
       columns: inferredColumns,
       sampleValues,
-      element: ref.current
+      element: wrapperRef.current
     });
     return () => registry.unregister(id);
   }, [id, label, currentSource, inferredColumns.join(","), registry]);
+  react.useEffect(() => {
+    if (!registry?.inspectActive || !wrapperRef.current) {
+      setRect(null);
+      return;
+    }
+    const measure = () => {
+      if (wrapperRef.current) {
+        setRect(getChildrenBounds(wrapperRef.current));
+      }
+    };
+    measure();
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    const interval = setInterval(measure, 300);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+      clearInterval(interval);
+    };
+  }, [registry?.inspectActive]);
   if (!registry) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
   const isSelected = registry.selectedId === id;
-  const inspecting = registry.inspectActive;
   const handleClick = (e) => {
     e.stopPropagation();
     e.preventDefault();
     registry.setSelectedId(isSelected ? null : id);
   };
-  if (!inspecting) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      style: { position: "relative" },
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            onClick: handleClick,
-            style: {
-              position: "absolute",
-              inset: 0,
-              zIndex: 9999,
-              cursor: "pointer",
-              outline: isSelected ? "2px solid #3b82f6" : "2px dashed #93c5fd",
-              outlineOffset: 2,
-              borderRadius: 4,
-              transition: "outline 0.15s ease",
-              background: isSelected ? "rgba(59,130,246,0.05)" : "transparent"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: -10,
-                  left: 4,
-                  fontSize: 10,
-                  fontWeight: 600,
-                  fontFamily: "system-ui, -apple-system, sans-serif",
-                  color: "#fff",
-                  backgroundColor: isSelected ? "#3b82f6" : "#93c5fd",
-                  padding: "1px 6px",
-                  borderRadius: 3,
-                  pointerEvents: "none",
-                  whiteSpace: "nowrap"
-                },
-                children: label
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, style: { display: "contents" }, children: [
+    children,
+    registry.inspectActive && rect && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          onClick: handleClick,
+          style: {
+            position: "fixed",
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
+            zIndex: 9999,
+            cursor: "pointer",
+            outline: isSelected ? "2px solid #3b82f6" : "2px dashed #93c5fd",
+            outlineOffset: 2,
+            borderRadius: 4,
+            transition: "outline 0.15s ease",
+            background: isSelected ? "rgba(59,130,246,0.05)" : "transparent",
+            pointerEvents: "auto"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: -10,
+                left: 4,
+                fontSize: 10,
+                fontWeight: 600,
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                color: "#fff",
+                backgroundColor: isSelected ? "#3b82f6" : "#93c5fd",
+                padding: "1px 6px",
+                borderRadius: 3,
+                pointerEvents: "none",
+                whiteSpace: "nowrap"
+              },
+              children: label
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
 }
 
 // src/components/field-matcher.ts