@inkindcards/semantic-layer 2.2.0 → 2.2.2

package/dist/components.d.cts

@@ -61,8 +61,10 @@ interface InspectableProps {
 }
 /**
  * Wraps a data-bound component and registers it with the DataInspector overlay.
- * When no DataInspector/InspectableRegistry ancestor exists, renders as a plain div
- * with no overhead.
+ * Uses `display: contents` so the wrapper is invisible to CSS layout — charts,
+ * grids, and flex items render exactly as if Inspectable were not there.
+ * The inspect-mode highlight is rendered via a React portal into document.body,
+ * positioned with getBoundingClientRect().
  */
 declare function Inspectable({ label, currentSource, data, columns, children, }: InspectableProps): react_jsx_runtime.JSX.Element;
 

package/dist/components.d.ts

@@ -61,8 +61,10 @@ interface InspectableProps {
 }
 /**
  * Wraps a data-bound component and registers it with the DataInspector overlay.
- * When no DataInspector/InspectableRegistry ancestor exists, renders as a plain div
- * with no overhead.
+ * Uses `display: contents` so the wrapper is invisible to CSS layout — charts,
+ * grids, and flex items render exactly as if Inspectable were not there.
+ * The inspect-mode highlight is rendered via a React portal into document.body,
+ * positioned with getBoundingClientRect().
  */
 declare function Inspectable({ label, currentSource, data, columns, children, }: InspectableProps): react_jsx_runtime.JSX.Element;
 

package/dist/components.js

@@ -1,6 +1,7 @@
 import { useMetrics, useAuth, useAdminFields, useAdminRoles, useAdminUsers } from './chunk-3OR3QCN6.js';
 import { createContext, useState, useMemo, useCallback, useContext, useId, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 var containerStyle = {
   fontFamily: "system-ui, -apple-system, sans-serif",
@@ -834,6 +835,21 @@ function InspectableRegistry({ children }) {
   };
   return /* @__PURE__ */ 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",
@@ -843,7 +859,8 @@ function Inspectable({
 }) {
   const registry = useContext(InspectableRegistryContext);
   const id = useId();
-  const ref = useRef(null);
+  const wrapperRef = useRef(null);
+  const [rect, setRect] = useState(null);
   const inferredColumns = columns ?? (data?.[0] ? Object.keys(data[0]) : []);
   const sampleValues = data?.slice(0, 3) ?? [];
   useEffect(() => {
@@ -854,59 +871,86 @@ function Inspectable({
       currentSource,
       columns: inferredColumns,
       sampleValues,
-      element: ref.current
+      element: wrapperRef.current
     });
     return () => registry.unregister(id);
   }, [id, label, currentSource, inferredColumns.join(","), registry]);
+  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__ */ jsx(Fragment, { children });
   }
   const isSelected = registry.selectedId === id;
-  const showOutline = registry.inspectActive;
   const handleClick = (e) => {
-    if (!registry.inspectActive) return;
     e.stopPropagation();
+    e.preventDefault();
     registry.setSelectedId(isSelected ? null : id);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      onClick: handleClick,
-      style: {
-        position: "relative",
-        outline: showOutline ? isSelected ? "2px solid #3b82f6" : "2px dashed #93c5fd" : "none",
-        outlineOffset: 2,
-        borderRadius: 4,
-        cursor: showOutline ? "pointer" : "inherit",
-        transition: "outline 0.15s ease"
-      },
-      children: [
-        showOutline && /* @__PURE__ */ 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,
-              zIndex: 1e4,
-              pointerEvents: "none",
-              whiteSpace: "nowrap"
-            },
-            children: label
-          }
-        ),
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, style: { display: "contents" }, children: [
+    children,
+    registry.inspectActive && rect && createPortal(
+      /* @__PURE__ */ 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__ */ 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