@inkindcards/semantic-layer 2.1.0 → 2.2.1

package/dist/components.d.cts

@@ -61,8 +61,9 @@ 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.
+ * 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.
  */
 declare function Inspectable({ label, currentSource, data, columns, children, }: InspectableProps): react_jsx_runtime.JSX.Element;
 

package/dist/components.d.ts

@@ -61,8 +61,9 @@ 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.
+ * 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.
  */
 declare function Inspectable({ label, currentSource, data, columns, children, }: InspectableProps): react_jsx_runtime.JSX.Element;
 

package/dist/components.js

@@ -862,48 +862,59 @@ function Inspectable({
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   const isSelected = registry.selectedId === id;
-  const showOutline = registry.inspectActive;
+  const inspecting = registry.inspectActive;
   const handleClick = (e) => {
-    if (!registry.inspectActive) return;
     e.stopPropagation();
+    e.preventDefault();
     registry.setSelectedId(isSelected ? null : id);
   };
+  if (!inspecting) {
+    return /* @__PURE__ */ jsx("div", { ref, children });
+  }
   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"
-      },
+      style: { position: "relative" },
       children: [
-        showOutline && /* @__PURE__ */ jsx(
+        children,
+        /* @__PURE__ */ jsx(
           "div",
           {
+            onClick: handleClick,
             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"
+              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: label
+            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
+              }
+            )
           }
-        ),
-        children
+        )
       ]
     }
   );