@inkindcards/semantic-layer 2.2.1 → 2.2.3

package/dist/components.d.cts

@@ -61,9 +61,10 @@ interface InspectableProps {
 }
 /**
  * Wraps a data-bound component and registers it with the DataInspector overlay.
- * When inspect mode is off or no DataInspector ancestor exists, renders children
- * with zero layout impact (no wrapper div). Only adds a positioned wrapper
- * with a click-capture overlay when inspect mode is active.
+ * 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,9 +61,10 @@ interface InspectableProps {
 }
 /**
  * Wraps a data-bound component and registers it with the DataInspector overlay.
- * When inspect mode is off or no DataInspector ancestor exists, renders children
- * with zero layout impact (no wrapper div). Only adds a positioned wrapper
- * with a click-capture overlay when inspect mode is active.
+ * 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,81 +859,103 @@ function Inspectable({
 }) {
   const registry = useContext(InspectableRegistryContext);
   const id = useId();
-  const ref = useRef(null);
+  const wrapperRef = useRef(null);
+  const [rect, setRect] = useState(null);
+  const registryRef = useRef(registry);
+  registryRef.current = registry;
   const inferredColumns = columns ?? (data?.[0] ? Object.keys(data[0]) : []);
   const sampleValues = data?.slice(0, 3) ?? [];
+  const columnsKey = inferredColumns.join(",");
   useEffect(() => {
-    if (!registry) return;
-    registry.register({
+    const reg = registryRef.current;
+    if (!reg) return;
+    reg.register({
       id,
       label,
       currentSource,
-      columns: inferredColumns,
+      columns: columnsKey.split(",").filter(Boolean),
       sampleValues,
-      element: ref.current
+      element: wrapperRef.current
     });
-    return () => registry.unregister(id);
-  }, [id, label, currentSource, inferredColumns.join(","), registry]);
+    return () => reg.unregister(id);
+  }, [id, label, currentSource, columnsKey]);
+  const inspectActive = registry?.inspectActive ?? false;
+  useEffect(() => {
+    if (!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);
+    };
+  }, [inspectActive]);
   if (!registry) {
     return /* @__PURE__ */ jsx(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__ */ jsx("div", { ref, children });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      style: { position: "relative" },
-      children: [
-        children,
-        /* @__PURE__ */ 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__ */ 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__ */ 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