@oyerinde/caliper 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.2.2] - 2026-03-05
+
+### Improved
+
+- **Context Menu**: Swapped copy shortcuts. Right-click now copies the `data-caliper-agent-id`; `Shift + Right-Click` copies the full JSON fingerprint.
+
+### Fixed
+
+- **Geometry Engine**: Fixed measurement breakout on sticky elements during scroll.
+- **Logger**: Fixed `__DEV__` guard in production builds preventing `debug`, `info`, and `log` from appearing when enabled.
+- **MCP Server**: Fixed `console.log` usage on startup to ensure `stdout` is reserved exclusively for the JSON-RPC protocol.
+
+## [0.2.1] - 2026-02-16
+
+### Refactored
+
+- **Configuration Engine**: Renamed `OverlayConfig` to `CaliperConfig` to reflect its expanded scope.
+- **Bridge Decoupling**: Moved `bridge` configuration out of the core config type. It is now exclusively a plugin concern, with specialized `IIFEConfig` handling for CDN/script-tag users.
+
+### Added
+
+- **Agent Bridge Serialization**: Introduced `onStateChangeGlobal` to allow string-based callback names in `data-config` for IIFE/CDN environments.
+
+### Fixed
+
+- **Boundary Box Snapping**: Fixed boxes snapping to (0,0) by retaining last known position for detached or animating elements.
+
 ## [0.2.0] - 2026-02-12
 
 ### Added

package/README.md

@@ -1,6 +1,5 @@
 <img src="https://raw.githubusercontent.com/oyerindedaniel/caliper/main/apps/web/public/caliper_logo.svg" width="144" alt="Caliper Logo" style="margin-bottom: 24px;" />
 
-[![Unpkg Bundle Size](https://img.shields.io/bundlephobia/minzip/@oyerinde/caliper?style=flat-square&color=black&labelColor=black)](https://bundlephobia.com/package/@oyerinde/caliper)
 [![NPM Version](https://img.shields.io/npm/v/@oyerinde/caliper?style=flat-square&color=black&labelColor=black)](https://www.npmjs.com/package/@oyerinde/caliper)
 
 **Essential tooling for detail-obsessed design engineers.**
@@ -183,7 +182,7 @@ const caliper = init();
 caliper.use(
   CaliperBridge({
     enabled: true,
-    wsUrl: "ws://localhost:9876",
+    wsPort: 9876,
   })
 );
 ```
@@ -263,10 +262,6 @@ init({
     enabled: true, // Smooth hover box
     lerpFactor: 0.25, // Fluidity (low = slower)
   },
-  bridge: {
-    enabled: true, // Connect to AI Agents
-    wsPort: 9876, // Port for MCP relay
-  },
 });
 ```
 
@@ -324,9 +319,6 @@ For AI agents to reliably rediscover elements across re-renders (like HMR), we r
 
 This project is licensed under the **MIT License**.
 
-- **Allowed**: Personal and commercial use, modification, and distribution.
-- **Open**: Completely permissive with no restrictions on derivative works or competition.
-
 ---
 
 ## Author & Acknowledgement 👤

package/dist/bridge.cjs

@@ -1,50 +1,50 @@
 'use strict';
 
-var chunk3W2YKDGV_cjs = require('./chunk-3W2YKDGV.cjs');
+var chunk2SVFU7M3_cjs = require('./chunk-2SVFU7M3.cjs');
 
 
 
 Object.defineProperty(exports, "CALIPER_METHODS", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CALIPER_METHODS; }
+  get: function () { return chunk2SVFU7M3_cjs.CALIPER_METHODS; }
 });
 Object.defineProperty(exports, "CaliperActionResultSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperActionResultSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperActionResultSchema; }
 });
 Object.defineProperty(exports, "CaliperAgentStateSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperAgentStateSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperAgentStateSchema; }
 });
 Object.defineProperty(exports, "CaliperBridge", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperBridge; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperBridge; }
 });
 Object.defineProperty(exports, "CaliperGetContextPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperGetContextPayloadSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperGetContextPayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperInspectPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperInspectPayloadSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperInspectPayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperMeasurePayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperMeasurePayloadSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperMeasurePayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperSelectPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperSelectPayloadSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperSelectPayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperWalkAndMeasurePayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperWalkAndMeasurePayloadSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperWalkAndMeasurePayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperWalkDomPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperWalkDomPayloadSchema; }
+  get: function () { return chunk2SVFU7M3_cjs.CaliperWalkDomPayloadSchema; }
 });
 Object.defineProperty(exports, "dispatchCaliperIntent", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.dispatchCaliperIntent; }
+  get: function () { return chunk2SVFU7M3_cjs.dispatchCaliperIntent; }
 });

package/dist/bridge.d.cts

@@ -8,6 +8,8 @@ declare interface AgentBridgeConfig {
     wsPort?: number;
     /** Callback for agent state changes */
     onStateChange?: (state: CaliperAgentState) => void;
+    /** Name of a global window function to call on state changes (IIFE/CDN-safe, JSON-serializable) */
+    onStateChangeGlobal?: string;
 }
 
 declare interface CalculatorIntegration {
@@ -882,7 +884,7 @@ export declare const CaliperAgentStateSchema: z.ZodObject<{
  * When installed, this plugin:
  * 1. Starts a local WebSocket server (or connects to one) to receive agent commands.
  * 2. Exposes `window.dispatchCaliperIntent` for manual/in-page agentic calls.
- * 3. Syncs the overlay state (camera, selection, measurements) back to the agent.
+ * 3. Syncs the overlay state (selection, measurements) back to the agent.
  *
  * @example
  * ```ts

package/dist/bridge.d.ts

@@ -8,6 +8,8 @@ declare interface AgentBridgeConfig {
     wsPort?: number;
     /** Callback for agent state changes */
     onStateChange?: (state: CaliperAgentState) => void;
+    /** Name of a global window function to call on state changes (IIFE/CDN-safe, JSON-serializable) */
+    onStateChangeGlobal?: string;
 }
 
 declare interface CalculatorIntegration {
@@ -882,7 +884,7 @@ export declare const CaliperAgentStateSchema: z.ZodObject<{
  * When installed, this plugin:
  * 1. Starts a local WebSocket server (or connects to one) to receive agent commands.
  * 2. Exposes `window.dispatchCaliperIntent` for manual/in-page agentic calls.
- * 3. Syncs the overlay state (camera, selection, measurements) back to the agent.
+ * 3. Syncs the overlay state (selection, measurements) back to the agent.
  *
  * @example
  * ```ts

package/dist/bridge.js

@@ -1 +1 @@
-export { CALIPER_METHODS, CaliperActionResultSchema, CaliperAgentStateSchema, CaliperBridge, CaliperGetContextPayloadSchema, CaliperInspectPayloadSchema, CaliperMeasurePayloadSchema, CaliperSelectPayloadSchema, CaliperWalkAndMeasurePayloadSchema, CaliperWalkDomPayloadSchema, dispatchCaliperIntent } from './chunk-ACV6FK43.js';
+export { CALIPER_METHODS, CaliperActionResultSchema, CaliperAgentStateSchema, CaliperBridge, CaliperGetContextPayloadSchema, CaliperInspectPayloadSchema, CaliperMeasurePayloadSchema, CaliperSelectPayloadSchema, CaliperWalkAndMeasurePayloadSchema, CaliperWalkDomPayloadSchema, dispatchCaliperIntent } from './chunk-PRUCSUJA.js';

package/dist/{chunk-3W2YKDGV.cjs → chunk-2SVFU7M3.cjs}

@@ -230,7 +230,6 @@ var WalkOptionsSchema = zod.z.object({
   minElementSize: zod.z.number().optional(),
   ignoreSelectors: zod.z.array(zod.z.string()).optional()
 });
-var JSONRPCResultResponseSchema = types_js.JSONRPCResultResponseSchema;
 var JSONRPCErrorResponseSchema = types_js.JSONRPCErrorResponseSchema;
 var ViewportSchema = zod.z.object({
   width: zod.z.number(),
@@ -290,8 +289,20 @@ var SourceHintsSchema = zod.z.object({
   tagName: zod.z.string()
 });
 var CaliperActionResultSchema = zod.z.union([
-  zod.z.object({ success: zod.z.literal(true), method: zod.z.literal(CALIPER_METHODS.SELECT), selector: zod.z.string(), selection: SelectionMetadataSchema, timestamp: zod.z.number() }),
-  zod.z.object({ success: zod.z.literal(true), method: zod.z.literal(CALIPER_METHODS.MEASURE), selector: zod.z.string(), measurement: MeasurementResultSchema, timestamp: zod.z.number() }),
+  zod.z.object({
+    success: zod.z.literal(true),
+    method: zod.z.literal(CALIPER_METHODS.SELECT),
+    selector: zod.z.string(),
+    selection: SelectionMetadataSchema,
+    timestamp: zod.z.number()
+  }),
+  zod.z.object({
+    success: zod.z.literal(true),
+    method: zod.z.literal(CALIPER_METHODS.MEASURE),
+    selector: zod.z.string(),
+    measurement: MeasurementResultSchema,
+    timestamp: zod.z.number()
+  }),
   zod.z.object({
     success: zod.z.literal(true),
     method: zod.z.literal(CALIPER_METHODS.INSPECT),
@@ -312,8 +323,16 @@ var CaliperActionResultSchema = zod.z.union([
     sourceHints: SourceHintsSchema.optional(),
     timestamp: zod.z.number()
   }),
-  zod.z.object({ success: zod.z.literal(true), method: zod.z.literal(CALIPER_METHODS.FREEZE), timestamp: zod.z.number() }),
-  zod.z.object({ success: zod.z.literal(true), method: zod.z.literal(CALIPER_METHODS.CLEAR), timestamp: zod.z.number() }),
+  zod.z.object({
+    success: zod.z.literal(true),
+    method: zod.z.literal(CALIPER_METHODS.FREEZE),
+    timestamp: zod.z.number()
+  }),
+  zod.z.object({
+    success: zod.z.literal(true),
+    method: zod.z.literal(CALIPER_METHODS.CLEAR),
+    timestamp: zod.z.number()
+  }),
   zod.z.object({
     success: zod.z.literal(true),
     method: zod.z.literal(CALIPER_METHODS.WALK_DOM),
@@ -400,11 +419,7 @@ var CaliperNotificationSchema = zod.z.union([
     params: CaliperAgentStateSchema
   })
 ]);
-zod.z.union([
-  CaliperResponseSchema,
-  CaliperNotificationSchema,
-  JSONRPCResultResponseSchema
-]);
+zod.z.union([CaliperResponseSchema, CaliperNotificationSchema]);
 var CaliperSelectPayloadSchema = zod.z.object({
   selector: zod.z.string()
 });
@@ -1362,10 +1377,12 @@ var Logger = class {
     isGlobalEnabled = enabled;
   }
   debug(...args) {
-    return;
+    if (!isGlobalEnabled) return;
+    console.debug(this.prefix, ...args);
   }
   info(...args) {
-    return;
+    if (!isGlobalEnabled) return;
+    console.info(this.prefix, ...args);
   }
   warn(...args) {
     if (!isGlobalEnabled) return;
@@ -1376,7 +1393,8 @@ var Logger = class {
     console.error(this.prefix, ...args);
   }
   log(...args) {
-    return;
+    if (!isGlobalEnabled) return;
+    console.log(this.prefix, ...args);
   }
 };
 new Logger({ prefix: "Caliper" });
@@ -15074,7 +15092,7 @@ var JSONRPCNotificationSchema = object({
   jsonrpc: literal(JSONRPC_VERSION),
   ...NotificationSchema.shape
 }).strict();
-var JSONRPCResultResponseSchema2 = object({
+var JSONRPCResultResponseSchema = object({
   jsonrpc: literal(JSONRPC_VERSION),
   id: RequestIdSchema,
   result: ResultSchema
@@ -15111,10 +15129,10 @@ var JSONRPCErrorResponseSchema2 = object({
 union([
   JSONRPCRequestSchema,
   JSONRPCNotificationSchema,
-  JSONRPCResultResponseSchema2,
+  JSONRPCResultResponseSchema,
   JSONRPCErrorResponseSchema2
 ]);
-union([JSONRPCResultResponseSchema2, JSONRPCErrorResponseSchema2]);
+union([JSONRPCResultResponseSchema, JSONRPCErrorResponseSchema2]);
 var EmptyResultSchema = ResultSchema.strict();
 var CancelledNotificationParamsSchema = NotificationsParamsSchema.extend({
   /**
@@ -16678,7 +16696,7 @@ var WalkOptionsSchema2 = external_exports.object({
 });
 var JSONRPCRequestSchema2 = JSONRPCRequestSchema;
 var JSONRPCNotificationSchema2 = JSONRPCNotificationSchema;
-var JSONRPCResultResponseSchema22 = JSONRPCResultResponseSchema2;
+var JSONRPCResultResponseSchema2 = JSONRPCResultResponseSchema;
 var JSONRPCErrorResponseSchema22 = JSONRPCErrorResponseSchema2;
 var ViewportSchema2 = external_exports.object({
   width: external_exports.number(),
@@ -16738,8 +16756,20 @@ var SourceHintsSchema2 = external_exports.object({
   tagName: external_exports.string()
 });
 var CaliperActionResultSchema2 = external_exports.union([
-  external_exports.object({ success: external_exports.literal(true), method: external_exports.literal(CALIPER_METHODS2.SELECT), selector: external_exports.string(), selection: SelectionMetadataSchema2, timestamp: external_exports.number() }),
-  external_exports.object({ success: external_exports.literal(true), method: external_exports.literal(CALIPER_METHODS2.MEASURE), selector: external_exports.string(), measurement: MeasurementResultSchema2, timestamp: external_exports.number() }),
+  external_exports.object({
+    success: external_exports.literal(true),
+    method: external_exports.literal(CALIPER_METHODS2.SELECT),
+    selector: external_exports.string(),
+    selection: SelectionMetadataSchema2,
+    timestamp: external_exports.number()
+  }),
+  external_exports.object({
+    success: external_exports.literal(true),
+    method: external_exports.literal(CALIPER_METHODS2.MEASURE),
+    selector: external_exports.string(),
+    measurement: MeasurementResultSchema2,
+    timestamp: external_exports.number()
+  }),
   external_exports.object({
     success: external_exports.literal(true),
     method: external_exports.literal(CALIPER_METHODS2.INSPECT),
@@ -16760,8 +16790,16 @@ var CaliperActionResultSchema2 = external_exports.union([
     sourceHints: SourceHintsSchema2.optional(),
     timestamp: external_exports.number()
   }),
-  external_exports.object({ success: external_exports.literal(true), method: external_exports.literal(CALIPER_METHODS2.FREEZE), timestamp: external_exports.number() }),
-  external_exports.object({ success: external_exports.literal(true), method: external_exports.literal(CALIPER_METHODS2.CLEAR), timestamp: external_exports.number() }),
+  external_exports.object({
+    success: external_exports.literal(true),
+    method: external_exports.literal(CALIPER_METHODS2.FREEZE),
+    timestamp: external_exports.number()
+  }),
+  external_exports.object({
+    success: external_exports.literal(true),
+    method: external_exports.literal(CALIPER_METHODS2.CLEAR),
+    timestamp: external_exports.number()
+  }),
   external_exports.object({
     success: external_exports.literal(true),
     method: external_exports.literal(CALIPER_METHODS2.WALK_DOM),
@@ -16821,13 +16859,21 @@ var RpcFactory = class {
     return JSONRPCRequestSchema2.parse({ jsonrpc: "2.0", method, params, id });
   }
   static response(id, result) {
-    return JSONRPCResultResponseSchema22.parse({ jsonrpc: "2.0", id, result });
+    return JSONRPCResultResponseSchema2.parse({ jsonrpc: "2.0", id, result });
   }
   static error(id, code, message, data) {
-    return JSONRPCErrorResponseSchema22.parse({ jsonrpc: "2.0", id, error: { code, message, data } });
+    return JSONRPCErrorResponseSchema22.parse({
+      jsonrpc: "2.0",
+      id,
+      error: { code, message, data }
+    });
   }
   static notification(method, params) {
-    return JSONRPCNotificationSchema2.parse({ jsonrpc: "2.0", method, params });
+    return JSONRPCNotificationSchema2.parse({
+      jsonrpc: "2.0",
+      method,
+      params
+    });
   }
 };
 var CaliperResponseSchema2 = external_exports.union([
@@ -16862,11 +16908,7 @@ var CaliperNotificationSchema2 = external_exports.union([
     params: CaliperAgentStateSchema2
   })
 ]);
-external_exports.union([
-  CaliperResponseSchema2,
-  CaliperNotificationSchema2,
-  JSONRPCResultResponseSchema22
-]);
+external_exports.union([CaliperResponseSchema2, CaliperNotificationSchema2]);
 external_exports.object({
   selector: external_exports.string()
 });
@@ -18564,6 +18606,12 @@ function CaliperBridge(config2) {
         const disposeSync = initStateSync(stateStore, systems, (state) => {
           wsBridge.sendStateUpdate(state);
           config2.onStateChange?.(state);
+          if (config2.onStateChangeGlobal) {
+            const globalCallback = window[config2.onStateChangeGlobal];
+            if (typeof globalCallback === "function") {
+              globalCallback(state);
+            }
+          }
         });
         window.dispatchCaliperIntent = async (intent) => {
           if (!intentHandler) {

package/dist/{chunk-OSQHATBH.cjs → chunk-AHX2GS7J.cjs}

@@ -2852,8 +2852,7 @@ function getConfig() {
           ...parsed,
           theme: { ...windowConfig.theme, ...parsed.theme },
           commands: { ...windowConfig.commands, ...parsed.commands },
-          animation: { ...windowConfig.animation, ...parsed.animation },
-          bridge: { ...windowConfig.bridge, ...parsed.bridge }
+          animation: { ...windowConfig.animation, ...parsed.animation }
         };
       } catch (e) {
         console.warn("[CALIPER] Failed to parse data-config attribute", e);
@@ -3033,10 +3032,12 @@ var Logger = class {
     isGlobalEnabled = enabled;
   }
   debug(...args) {
-    return;
+    if (!isGlobalEnabled) return;
+    console.debug(this.prefix, ...args);
   }
   info(...args) {
-    return;
+    if (!isGlobalEnabled) return;
+    console.info(this.prefix, ...args);
   }
   warn(...args) {
     if (!isGlobalEnabled) return;
@@ -3047,7 +3048,8 @@ var Logger = class {
     console.error(this.prefix, ...args);
   }
   log(...args) {
-    return;
+    if (!isGlobalEnabled) return;
+    console.log(this.prefix, ...args);
   }
 };
 var logger = new Logger({ prefix: "Caliper" });
@@ -3436,11 +3438,11 @@ function MeasurementLinesWithCalculator(props) {
             };
           }
           if (line.type === "top" || line.type === "bottom") {
-            if (line.startSync === "primary") end.x = start.x;
-            else start.x = end.x;
+            if (line.type === "top") start.x = end.x;
+            else end.x = start.x;
           } else if (line.type === "left" || line.type === "right") {
-            if (line.startSync === "primary") end.y = start.y;
-            else start.y = end.y;
+            if (line.type === "left") start.y = end.y;
+            else end.y = start.y;
           }
           let liveValue = 0;
           if (line.type === "top" || line.type === "bottom") {
@@ -3538,11 +3540,11 @@ function MeasurementLabels(props) {
             };
           }
           if (line.type === "top" || line.type === "bottom") {
-            if (line.startSync === "primary") end.x = start.x;
-            else start.x = end.x;
+            if (line.type === "top") start.x = end.x;
+            else end.x = start.x;
           } else if (line.type === "left" || line.type === "right") {
-            if (line.startSync === "primary") end.y = start.y;
-            else start.y = end.y;
+            if (line.type === "left") start.y = end.y;
+            else end.y = start.y;
           }
           const naturalX = (start.x + end.x) / 2;
           const naturalY = (start.y + end.y) / 2;
@@ -3757,16 +3759,27 @@ function BoundaryBoxes(props) {
       height: next.height
     };
   };
-  const liveSelectionTarget = createMemo(() => {
+  const isDegenerate = (geo) => geo !== null && geo.width === 0 && geo.height === 0;
+  const liveSelectionTarget = createMemo((prev) => {
     props.viewport.version;
-    return getLiveGeometry(props.metadata.rect, props.metadata.scrollHierarchy, props.metadata.position, props.metadata.stickyConfig, props.metadata.initialWindowX, props.metadata.initialWindowY);
-  });
-  const liveSecondaryTarget = createMemo(() => {
+    if (prev && props.metadata.element && !document.contains(props.metadata.element)) {
+      return prev;
+    }
+    const geo = getLiveGeometry(props.metadata.rect, props.metadata.scrollHierarchy, props.metadata.position, props.metadata.stickyConfig, props.metadata.initialWindowX, props.metadata.initialWindowY);
+    if (isDegenerate(geo)) return prev;
+    return geo;
+  }, null);
+  const liveSecondaryTarget = createMemo((prev) => {
     props.viewport.version;
     const res = props.result;
     if (!(props.isActivatePressed || props.isFrozen) || !res) return null;
-    return getLiveGeometry(res.secondary, res.secondaryHierarchy, res.secondaryPosition, res.secondarySticky, res.secondaryWinX, res.secondaryWinY);
-  });
+    if (prev && res.secondaryElement && !document.contains(res.secondaryElement)) {
+      return prev;
+    }
+    const geo = getLiveGeometry(res.secondary, res.secondaryHierarchy, res.secondaryPosition, res.secondarySticky, res.secondaryWinX, res.secondaryWinY);
+    if (isDegenerate(geo)) return prev;
+    return geo;
+  }, null);
   createEffect(on([liveSelectionTarget, liveSecondaryTarget, () => props.animation.lerpFactor, () => props.metadata.element], ([selection, secondary, factor, element]) => {
     if (!selection) {
       setAnchor(null);
@@ -5095,27 +5108,48 @@ function Root(config) {
         contextEvent.preventDefault();
         contextEvent.stopImmediatePropagation();
         let clipboardContent = "";
-        if (contextEvent.shiftKey && selectedElement) {
-          clipboardContent = selectedElement.getAttribute("data-caliper-agent-id") || "";
-        } else if (measurementResult && system && selectionSystem) {
-          const primaryElement = selectionSystem.getSelected();
-          const secondaryElement = system.getSecondaryElement();
-          if (primaryElement && secondaryElement) {
-            clipboardContent = JSON.stringify({
-              primary: buildSelectorInfo(primaryElement, selectionMetadata()),
-              secondary: buildSelectorInfo(secondaryElement, {
-                rect: measurementResult.secondary,
-                scrollHierarchy: measurementResult.secondaryHierarchy,
-                position: measurementResult.secondaryPosition,
-                stickyConfig: measurementResult.secondarySticky,
-                initialWindowX: measurementResult.secondaryWinX,
-                initialWindowY: measurementResult.secondaryWinY,
-                hasContainingBlock: measurementResult.secondaryHasContainingBlock
-              })
-            });
+        if (contextEvent.shiftKey) {
+          if (measurementResult && system && selectionSystem) {
+            const primaryElement = selectionSystem.getSelected();
+            const secondaryElement = system.getSecondaryElement();
+            if (primaryElement && secondaryElement) {
+              clipboardContent = JSON.stringify({
+                primary: buildSelectorInfo(primaryElement, selectionMetadata()),
+                secondary: buildSelectorInfo(secondaryElement, {
+                  rect: measurementResult.secondary,
+                  scrollHierarchy: measurementResult.secondaryHierarchy,
+                  position: measurementResult.secondaryPosition,
+                  stickyConfig: measurementResult.secondarySticky,
+                  initialWindowX: measurementResult.secondaryWinX,
+                  initialWindowY: measurementResult.secondaryWinY,
+                  hasContainingBlock: measurementResult.secondaryHasContainingBlock
+                })
+              });
+            }
+          } else if (selectedElement) {
+            clipboardContent = JSON.stringify(buildSelectorInfo(selectedElement, selectionMetadata()));
+          }
+        } else {
+          const ensureAgentId = (el) => {
+            let id = el.getAttribute("data-caliper-agent-id");
+            if (!id) {
+              id = generateId("caliper");
+              el.setAttribute("data-caliper-agent-id", id);
+            }
+            return id;
+          };
+          if (measurementResult && system && selectionSystem) {
+            const primaryElement = selectionSystem.getSelected();
+            const secondaryElement = system.getSecondaryElement();
+            if (primaryElement && secondaryElement) {
+              clipboardContent = JSON.stringify({
+                primary: ensureAgentId(primaryElement),
+                secondary: ensureAgentId(secondaryElement)
+              });
+            }
+          } else if (selectedElement) {
+            clipboardContent = ensureAgentId(selectedElement);
           }
-        } else if (selectedElement) {
-          clipboardContent = JSON.stringify(buildSelectorInfo(selectedElement, selectionMetadata()));
         }
         if (clipboardContent) {
           navigator.clipboard.writeText(clipboardContent).then(() => {
@@ -5172,12 +5206,13 @@ function Root(config) {
       if (selectedElement) {
         const hoveredElement = getTopElementAtPoint(e.clientX, e.clientY);
         const isAncestor = hoveredElement && lastHoveredElement && hoveredElement.contains(lastHoveredElement) && hoveredElement !== lastHoveredElement;
+        const lastHoveredDetached = lastHoveredElement && !document.contains(lastHoveredElement);
         if (isAlt) {
           if (system) {
             measureDelegate.execute(!!isAncestor, selectedElement, cursorPoint, hoveredElement);
           }
         } else if (state !== "FROZEN") {
-          if (hoveredElement) {
+          if (hoveredElement && !lastHoveredDetached) {
             selectionDelegate.execute(!!isAncestor, hoveredElement);
           }
         }
@@ -5555,14 +5590,14 @@ function Root(config) {
     let secondaryChanged = false;
     const runUpdates2 = () => {
       if (sentinelResized || primaryChanged) {
-        if (observedPrimary) {
+        if (observedPrimary && document.contains(observedPrimary)) {
           const rect = observedPrimary.getBoundingClientRect();
           selectionSystem?.updateRect(rect);
           if (system) system.updatePrimaryRect(rect);
         }
       }
       if (sentinelResized || secondaryChanged) {
-        if (observedSecondary) {
+        if (observedSecondary && document.contains(observedSecondary)) {
           const rect = observedSecondary.getBoundingClientRect();
           system?.updateSecondaryRect(rect);
         }
@@ -5877,12 +5912,12 @@ function createOverlay(config) {
   return instance;
 }
 if (IS_BROWSER2) {
-  showVersionInfo("0.2.0").catch(() => {
+  showVersionInfo("0.2.2").catch(() => {
   });
 }
 
 // src/index.ts
-var VERSION = "0.2.0";
+var VERSION = "0.2.2";
 
 exports.VERSION = VERSION;
 exports.caliperProps = caliperProps;