@oyerinde/caliper 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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 a bug where boxes would snap to `(0,0)` when elements animated out or were removed from the DOM. The overlay now retains the last known good position.
+
 ## [0.2.0] - 2026-02-12
 
 ### Added

package/README.md

@@ -183,7 +183,7 @@ const caliper = init();
 caliper.use(
   CaliperBridge({
     enabled: true,
-    wsUrl: "ws://localhost:9876",
+    wsPort: 9876,
   })
 );
 ```
@@ -263,10 +263,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
-  },
 });
 ```
 

package/dist/bridge.cjs

@@ -1,50 +1,50 @@
 'use strict';
 
-var chunk3W2YKDGV_cjs = require('./chunk-3W2YKDGV.cjs');
+var chunkPYAVLOZM_cjs = require('./chunk-PYAVLOZM.cjs');
 
 
 
 Object.defineProperty(exports, "CALIPER_METHODS", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CALIPER_METHODS; }
+  get: function () { return chunkPYAVLOZM_cjs.CALIPER_METHODS; }
 });
 Object.defineProperty(exports, "CaliperActionResultSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperActionResultSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperActionResultSchema; }
 });
 Object.defineProperty(exports, "CaliperAgentStateSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperAgentStateSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperAgentStateSchema; }
 });
 Object.defineProperty(exports, "CaliperBridge", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperBridge; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperBridge; }
 });
 Object.defineProperty(exports, "CaliperGetContextPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperGetContextPayloadSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperGetContextPayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperInspectPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperInspectPayloadSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperInspectPayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperMeasurePayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperMeasurePayloadSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperMeasurePayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperSelectPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperSelectPayloadSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperSelectPayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperWalkAndMeasurePayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperWalkAndMeasurePayloadSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperWalkAndMeasurePayloadSchema; }
 });
 Object.defineProperty(exports, "CaliperWalkDomPayloadSchema", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.CaliperWalkDomPayloadSchema; }
+  get: function () { return chunkPYAVLOZM_cjs.CaliperWalkDomPayloadSchema; }
 });
 Object.defineProperty(exports, "dispatchCaliperIntent", {
   enumerable: true,
-  get: function () { return chunk3W2YKDGV_cjs.dispatchCaliperIntent; }
+  get: function () { return chunkPYAVLOZM_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 {

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 {

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-L47FGEH6.js';

package/dist/{chunk-ACV6FK43.js → chunk-L47FGEH6.js}

@@ -18562,6 +18562,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-XYBNY4BT.js → chunk-MTIWXK3P.js}

@@ -2850,8 +2850,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);
@@ -3755,16 +3754,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);
@@ -5170,12 +5180,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);
           }
         }
@@ -5553,14 +5564,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);
         }
@@ -5875,11 +5886,11 @@ function createOverlay(config) {
   return instance;
 }
 if (IS_BROWSER2) {
-  showVersionInfo("0.2.0").catch(() => {
+  showVersionInfo("0.2.1").catch(() => {
   });
 }
 
 // src/index.ts
-var VERSION = "0.2.0";
+var VERSION = "0.2.1";
 
 export { VERSION, caliperProps, createOverlay, getConfig, setConfig };

package/dist/{chunk-OSQHATBH.cjs → chunk-P37B6G5P.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);
@@ -3757,16 +3756,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);
@@ -5172,12 +5182,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 +5566,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 +5888,12 @@ function createOverlay(config) {
   return instance;
 }
 if (IS_BROWSER2) {
-  showVersionInfo("0.2.0").catch(() => {
+  showVersionInfo("0.2.1").catch(() => {
   });
 }
 
 // src/index.ts
-var VERSION = "0.2.0";
+var VERSION = "0.2.1";
 
 exports.VERSION = VERSION;
 exports.caliperProps = caliperProps;

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

@@ -18564,6 +18564,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/index.cjs

@@ -1,26 +1,26 @@
 'use strict';
 
-var chunkOSQHATBH_cjs = require('./chunk-OSQHATBH.cjs');
+var chunkP37B6G5P_cjs = require('./chunk-P37B6G5P.cjs');
 
 
 
 Object.defineProperty(exports, "VERSION", {
   enumerable: true,
-  get: function () { return chunkOSQHATBH_cjs.VERSION; }
+  get: function () { return chunkP37B6G5P_cjs.VERSION; }
 });
 Object.defineProperty(exports, "caliperProps", {
   enumerable: true,
-  get: function () { return chunkOSQHATBH_cjs.caliperProps; }
+  get: function () { return chunkP37B6G5P_cjs.caliperProps; }
 });
 Object.defineProperty(exports, "getConfig", {
   enumerable: true,
-  get: function () { return chunkOSQHATBH_cjs.getConfig; }
+  get: function () { return chunkP37B6G5P_cjs.getConfig; }
 });
 Object.defineProperty(exports, "init", {
   enumerable: true,
-  get: function () { return chunkOSQHATBH_cjs.createOverlay; }
+  get: function () { return chunkP37B6G5P_cjs.createOverlay; }
 });
 Object.defineProperty(exports, "setConfig", {
   enumerable: true,
-  get: function () { return chunkOSQHATBH_cjs.setConfig; }
+  get: function () { return chunkP37B6G5P_cjs.setConfig; }
 });

package/dist/index.d.cts

@@ -7,6 +7,8 @@ export 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;
 }
 
 export declare interface AnimationConfig {
@@ -439,6 +441,17 @@ declare const CaliperAgentStateSchema: z.ZodObject<{
     lastUpdated: z.ZodNumber;
 }, z.core.$strip>;
 
+export declare interface CaliperConfig {
+    /** Customize the visual appearance of the overlay (colors, shadows). */
+    theme?: ThemeConfig;
+    /** Customize keyboard shortcuts for all interactions. */
+    commands?: CommandsConfig;
+    /** Control the boundary box lerp animation behavior. */
+    animation?: AnimationConfig;
+    /** Enable debug logging (default: true). All logs are stripped from production builds. */
+    debug?: boolean;
+}
+
 /**
  * A plugin allows extending Caliper's functionality by accessing the
  * OverlayInstance and internal systems.
@@ -491,9 +504,9 @@ export declare interface CommandsConfig {
  * 1. Global window object (`window.__CALIPER_CONFIG__`)
  * 2. `data-config` attribute on the script tag (useful for UMD/CDN usage)
  *
- * @returns The resolved OverlayConfig object.
+ * @returns The resolved CaliperConfig object.
  */
-export declare function getConfig(): OverlayConfig;
+export declare function getConfig(): CaliperConfig;
 
 /**
  * Core factory function to create and mount the Caliper overlay.
@@ -523,7 +536,7 @@ export declare function getConfig(): OverlayConfig;
  * @param config - The initial configuration object to merge with global defaults.
  * @returns An OverlayInstance with mount, dispose, and plugin management capabilities.
  */
-export declare function init(config?: OverlayConfig): OverlayInstance;
+export declare function init(config?: CaliperConfig): OverlayInstance;
 
 export declare type MeasurementLine = MeasurementLine_2;
 
@@ -729,18 +742,8 @@ export declare interface MeasurementSystem {
 
 export declare type MeasurementSystemListener = () => void;
 
-export declare interface OverlayConfig {
-    /** Customize the visual appearance of the overlay (colors, shadows). */
-    theme?: ThemeConfig;
-    /** Customize keyboard shortcuts for all interactions. */
-    commands?: CommandsConfig;
-    /** Control the boundary box lerp animation behavior. */
-    animation?: AnimationConfig;
-    /** Configure the Agent Bridge for AI/MCP integration. */
-    bridge?: AgentBridgeConfig;
-    /** Enable debug logging (default: true). All logs are stripped from production builds. */
-    debug?: boolean;
-}
+/** @deprecated Use CaliperConfig instead */
+export declare type OverlayConfig = CaliperConfig;
 
 /**
  * Handle to a running Caliper overlay.
@@ -948,7 +951,7 @@ export declare interface SelectionSystem {
  * });
  * ```
  */
-export declare function setConfig(config: OverlayConfig): void;
+export declare function setConfig(config: CaliperConfig): void;
 
 export declare interface Systems {
     measurementSystem: MeasurementSystem;

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export 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;
 }
 
 export declare interface AnimationConfig {
@@ -439,6 +441,17 @@ declare const CaliperAgentStateSchema: z.ZodObject<{
     lastUpdated: z.ZodNumber;
 }, z.core.$strip>;
 
+export declare interface CaliperConfig {
+    /** Customize the visual appearance of the overlay (colors, shadows). */
+    theme?: ThemeConfig;
+    /** Customize keyboard shortcuts for all interactions. */
+    commands?: CommandsConfig;
+    /** Control the boundary box lerp animation behavior. */
+    animation?: AnimationConfig;
+    /** Enable debug logging (default: true). All logs are stripped from production builds. */
+    debug?: boolean;
+}
+
 /**
  * A plugin allows extending Caliper's functionality by accessing the
  * OverlayInstance and internal systems.
@@ -491,9 +504,9 @@ export declare interface CommandsConfig {
  * 1. Global window object (`window.__CALIPER_CONFIG__`)
  * 2. `data-config` attribute on the script tag (useful for UMD/CDN usage)
  *
- * @returns The resolved OverlayConfig object.
+ * @returns The resolved CaliperConfig object.
  */
-export declare function getConfig(): OverlayConfig;
+export declare function getConfig(): CaliperConfig;
 
 /**
  * Core factory function to create and mount the Caliper overlay.
@@ -523,7 +536,7 @@ export declare function getConfig(): OverlayConfig;
  * @param config - The initial configuration object to merge with global defaults.
  * @returns An OverlayInstance with mount, dispose, and plugin management capabilities.
  */
-export declare function init(config?: OverlayConfig): OverlayInstance;
+export declare function init(config?: CaliperConfig): OverlayInstance;
 
 export declare type MeasurementLine = MeasurementLine_2;
 
@@ -729,18 +742,8 @@ export declare interface MeasurementSystem {
 
 export declare type MeasurementSystemListener = () => void;
 
-export declare interface OverlayConfig {
-    /** Customize the visual appearance of the overlay (colors, shadows). */
-    theme?: ThemeConfig;
-    /** Customize keyboard shortcuts for all interactions. */
-    commands?: CommandsConfig;
-    /** Control the boundary box lerp animation behavior. */
-    animation?: AnimationConfig;
-    /** Configure the Agent Bridge for AI/MCP integration. */
-    bridge?: AgentBridgeConfig;
-    /** Enable debug logging (default: true). All logs are stripped from production builds. */
-    debug?: boolean;
-}
+/** @deprecated Use CaliperConfig instead */
+export declare type OverlayConfig = CaliperConfig;
 
 /**
  * Handle to a running Caliper overlay.
@@ -948,7 +951,7 @@ export declare interface SelectionSystem {
  * });
  * ```
  */
-export declare function setConfig(config: OverlayConfig): void;
+export declare function setConfig(config: CaliperConfig): void;
 
 export declare interface Systems {
     measurementSystem: MeasurementSystem;