@oyerinde/caliper 0.1.0 → 0.1.2

package/dist/index.global.js

@@ -801,6 +801,7 @@
   function createReader() {
     let rafId = null;
     let idleId = null;
+    let taskController = null;
     let timeoutId = null;
     function detectBestStrategy() {
       if ("scheduler" in globalThis) {
@@ -822,19 +823,19 @@
         scheduleWithIdle(callback, urgent);
         return;
       }
-      const controller = new TaskController({
+      taskController = new TaskController({
         priority: urgent ? "user-visible" : "background"
       });
-      controller.signal;
       Scheduler2.postTask(
         () => {
           callback();
         },
         {
-          signal: controller.signal,
+          signal: taskController?.signal,
           priority: urgent ? "user-visible" : "background"
         }
-      );
+      ).catch(() => {
+      });
     }
     function scheduleWithIdle(callback, urgent) {
       if (!("requestIdleCallback" in window)) {
@@ -893,6 +894,10 @@
         cancelIdleCallback(idleId);
         idleId = null;
       }
+      if (taskController) {
+        taskController.abort();
+        taskController = null;
+      }
       if (timeoutId !== null) {
         clearTimeout(timeoutId);
         timeoutId = null;
@@ -1030,6 +1035,13 @@
     const rect = element.getBoundingClientRect();
     return rect.width > 0 && rect.height > 0;
   }
+  function isEditable(element) {
+    if (!element || !(element instanceof HTMLElement)) {
+      return false;
+    }
+    const tagName = element.tagName;
+    return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT" || element.isContentEditable;
+  }
   function isEligible(element) {
     if (element.closest("[data-caliper-ignore]")) {
       return false;
@@ -1050,8 +1062,7 @@
   }
   function getTopElementAtPoint(x, y) {
     const node = document.elementFromPoint(x, y);
-    if (!node) return null;
-    if (isCaliperNode(node) || !isEligible(node)) return null;
+    if (!node || isCaliperNode(node) || !isEligible(node)) return null;
     return node;
   }
   function detectBestContext(selectedElement, cursorX, cursorY) {
@@ -1726,7 +1737,7 @@
       result: null,
       isActive: false
     };
-    function calculate2() {
+    function calculate() {
       const val = state.inputValue === "" ? "0" : state.inputValue;
       const inputNum = parseFloat(val);
       if (isNaN(inputNum)) {
@@ -1787,7 +1798,7 @@
           const hasResult = state.result !== null;
           const isSwitchable = state.inputValue === "" || state.inputValue === "0";
           if (hasResult || state.operation && !isSwitchable) {
-            const newBase = hasResult ? state.result : calculate2() ?? state.baseValue;
+            const newBase = hasResult ? state.result : calculate() ?? state.baseValue;
             state = {
               baseValue: newBase,
               operation: action.operation,
@@ -1842,7 +1853,7 @@
           if (!state.isActive || !state.operation) {
             return state;
           }
-          const result = calculate2();
+          const result = calculate();
           state = {
             ...state,
             result
@@ -1863,7 +1874,7 @@
     function getState() {
       return { ...state };
     }
-    return { getState, dispatch, calculate: calculate2 };
+    return { getState, dispatch, calculate };
   }
   function createCalculatorIntegration() {
     const calculator = createCalculatorState();
@@ -1936,6 +1947,12 @@
         );
         if (measurement) {
           const { result, element } = measurement;
+          if (!stateMachine.isMeasuring() && !stateMachine.isArmed()) {
+            return;
+          }
+          if (stateMachine.isMeasuring() && element === previousElement && result.context === previousContext) {
+            return;
+          }
           currentResult = result;
           previousContext = result.context;
           previousElement = element;
@@ -1947,6 +1964,7 @@
     function freeze() {
       const state = stateMachine.getState();
       if (state === "MEASURING" || state === "IDLE" || state === "ARMED") {
+        reader.cancel();
         stateMachine.transitionTo("FROZEN");
         notifyListeners();
       }
@@ -2304,8 +2322,8 @@
     calcBg: "rgba(30, 30, 30, 0.95)",
     calcShadow: "rgba(0, 0, 0, 0.25)",
     calcOpHighlight: "rgba(24, 160, 251, 0.3)",
-    calcText: "white",
-    text: "white",
+    calcText: "rgba(255, 255, 255, 1)",
+    text: "rgba(255, 255, 255, 1)",
     projection: "rgba(155, 81, 224, 1)",
     ruler: "rgba(24, 160, 251, 1)"
   };
@@ -2318,18 +2336,49 @@
     const num = Number(value);
     return isFinite(num) && !isNaN(num) ? num : defaultValue;
   }
+  function withOpacity(color, opacity) {
+    if (color.startsWith("#")) {
+      let hex = color.slice(1);
+      if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    if (color.startsWith("rgba")) {
+      return color.replace(/[\d.]+\)$/g, `${opacity})`);
+    }
+    if (color.startsWith("rgb")) {
+      return color.replace(")", `, ${opacity})`).replace("rgb", "rgba");
+    }
+    return color;
+  }
   function applyTheme(theme) {
     if (!theme) return;
     const root = document.documentElement;
-    if (theme.primary) root.style.setProperty("--caliper-primary", theme.primary);
-    if (theme.secondary) root.style.setProperty("--caliper-secondary", theme.secondary);
+    if (theme.primary) {
+      root.style.setProperty("--caliper-primary", theme.primary);
+      root.style.setProperty("--caliper-primary-90", withOpacity(theme.primary, 0.9));
+      root.style.setProperty("--caliper-primary-95", withOpacity(theme.primary, 0.95));
+      root.style.setProperty("--caliper-primary-50", withOpacity(theme.primary, 0.5));
+      root.style.setProperty("--caliper-primary-05", withOpacity(theme.primary, 0.05));
+    }
+    if (theme.secondary) {
+      root.style.setProperty("--caliper-secondary", theme.secondary);
+      root.style.setProperty("--caliper-secondary-50", withOpacity(theme.secondary, 0.5));
+      root.style.setProperty("--caliper-secondary-05", withOpacity(theme.secondary, 0.05));
+    }
     if (theme.calcBg) root.style.setProperty("--caliper-calc-bg", theme.calcBg);
     if (theme.calcShadow) root.style.setProperty("--caliper-calc-shadow", theme.calcShadow);
     if (theme.calcOpHighlight)
       root.style.setProperty("--caliper-calc-op-highlight", theme.calcOpHighlight);
     if (theme.calcText) root.style.setProperty("--caliper-calc-text", theme.calcText);
     if (theme.text) root.style.setProperty("--caliper-text", theme.text);
-    if (theme.projection) root.style.setProperty("--caliper-projection", theme.projection);
+    if (theme.projection) {
+      root.style.setProperty("--caliper-projection", theme.projection);
+      root.style.setProperty("--caliper-projection-90", withOpacity(theme.projection, 0.9));
+      root.style.setProperty("--caliper-projection-light", withOpacity(theme.projection, 0.2));
+    }
     if (theme.ruler) root.style.setProperty("--caliper-ruler", theme.ruler);
   }
   function mergeCommands(userCommands) {
@@ -2364,6 +2413,19 @@
       lerpFactor: parseNumber(userAnimation?.lerpFactor, DEFAULT_ANIMATION.lerpFactor)
     };
   }
+  function mergeTheme(userTheme) {
+    return {
+      primary: userTheme?.primary ?? DEFAULT_THEME.primary,
+      secondary: userTheme?.secondary ?? DEFAULT_THEME.secondary,
+      calcBg: userTheme?.calcBg ?? DEFAULT_THEME.calcBg,
+      calcShadow: userTheme?.calcShadow ?? DEFAULT_THEME.calcShadow,
+      calcOpHighlight: userTheme?.calcOpHighlight ?? DEFAULT_THEME.calcOpHighlight,
+      calcText: userTheme?.calcText ?? DEFAULT_THEME.calcText,
+      text: userTheme?.text ?? DEFAULT_THEME.text,
+      projection: userTheme?.projection ?? DEFAULT_THEME.projection,
+      ruler: userTheme?.ruler ?? DEFAULT_THEME.ruler
+    };
+  }
   function getConfig() {
     if (typeof window !== "undefined") {
       const windowConfig = window.__CALIPER_CONFIG__ ?? {};
@@ -2390,7 +2452,7 @@
   var CALIPER_LOGO_SVG = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTcyIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTcyIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQ3LjIxNDQgNy42MjkzOWUtMDZIMzIuNzkyOEwyNS44MjUgNDMuMzIyNUgzNS4wNjEzTDM2LjE5NTYgMzUuMDE2M0g0NC4xMzU2TDQ1LjI2OTkgNDMuMzIyNUg1NC42NjgzTDQ3LjIxNDQgNy42MjkzOWUtMDZaTTM5LjU5ODUgOC4zMDYySDQwLjczMjhMNDQuMTM1NiAyOC4xNzU5SDM2LjE5NTZMMzkuNTk4NSA4LjMwNjJaIiBmaWxsPSIjQUMyMzIzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4wMjMyOCAwTDAgNS4wNDg4NlYyOC4zMzg4TDUuMTg1MzIgMzMuMzg3NkgxNy41MDA0VjM1LjM0MkgxNS41NTZWNDYuNzQyN0gxOS4xMjA5TDI0LjMwNjIgMzUuNjY3OFYyNS44OTU4SDcuMTI5ODFWNy4zMjg5OUgxMy40NDk0VjBINS4wMjMyOFoiIGZpbGw9IiNBQzIzMjMiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02Ni40OTc0IDcuNjI5MzllLTA2SDU3LjI2MVY0LjM5NzRINjIuNDQ2M1Y1LjIxMTczSDU3LjI2MVY2LjY3NzU0SDYwLjE3NzdWNy4zMjg5OUg1Ny4yNjFWOC45NTc2Nkg2MC4xNzc3VjkuNjA5MTNINTcuMjYxVjExLjA3NDlINjAuMTc3N1YxMS43MjY0SDU3LjI2MVYxMy4xOTIySDYyLjQ0NjNWMTMuODQzN0g1Ny4yNjFWMTUuNDcyM0g2MC4xNzc3VjE2LjEyMzhINTcuMjYxVjE3LjU4OTZINjAuMTc3N1YxOC4yNDExSDU3LjI2MVYxOS44Njk3SDYwLjE3NzdWMjAuNTIxMkg1Ny4yNjFWMjEuODI0MUg2Mi40NDYzVjIyLjYzODRINTcuMjYxVjI0LjI2NzFINjAuMTc3N1YyNC43NTU3SDU3LjI2MVYyNi4zODQ0SDYwLjE3NzdWMjcuMDM1OEg1Ny4yNjFWMjguNTAxNkg2MC4xNzc3VjI5LjE1MzFINTcuMjYxVjMwLjYxODlINjIuNDQ2M1YzMS40MzMySDU3LjI2MVYzMi44OTlINjAuMTc3N1YzMy41NTA1SDU3LjI2MVYzNS4wMTYzSDYwLjE3NzdWMzUuODMwNkg1Ny4yNjFWMzcuMjk2NEg2MC4xNzc3VjM3Ljk0NzlINTcuMjYxVjM5LjQxMzdINjIuNDQ2M1Y0MC4yMjhINTcuMjYxVjQzLjMyMjVINzcuODQwMlYzNS4wMTYzSDY2LjQ5NzRWNy42MjkzOWUtMDZaIiBmaWxsPSIjQUMyMzIzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNzcuODQwMiAyNy42ODczSDY3LjQ2OTZMNjkuNDE0MSAzMC42MTg5TDc5Ljc4NDcgMzQuMjAyVjQzLjk3MzlDNzcuNTQzOSA0NC4zNzMgNzYuNTQzOSA0NS4yNzY5IDc2LjU0MzkgNDcuMDY4NEM3Ni41NDM5IDQ5LjE4NTcgNzcuNTc4IDQ5Ljg1MjEgNzkuNzg0NyA1MEg4Mi44NjM1VjI4LjUwMTZINzcuODQwMlYyNy42ODczWiIgZmlsbD0iI0FDMjMyMyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTg5Ljk5MzMgNy42MjkzOWUtMDZIODAuNzU3VjQuMzk3NEg4NS43ODAzVjUuMjExNzNIODAuNzU3VjYuNjc3NTRIODMuNTExN1Y3LjMyODk5SDgwLjc1N1Y4Ljk1NzY2SDgzLjUxMTdWOS40NDYyNkg4MC43NTdWMTEuMDc0OUg4My41MTE3VjExLjcyNjRIODAuNzU3VjEzLjE5MjJIODUuNzgwM1YxMy44NDM3SDgwLjc1N1YxNS40NzIzSDgzLjUxMTdWMTYuMTIzOEg4MC43NTdWMTcuNTg5Nkg4My41MTE3VjE4LjI0MTFIODAuNzU3VjE5Ljg2OTdIODMuNTExN1YyMC41MjEySDgwLjc1N1YyMS44MjQxSDg1Ljc4MDNWMjIuNjM4NEg4MC43NTdWMjcuMDM1OEg4My44MzU4VjQzLjMyMjVIODcuMjM4NlYxMi4zNzc5SDkyLjI2MTlWOS40NDYyNkg5My4wNzIxVjEwLjA5NzdIOTkuNzE1OEM5OC45MDU2IDguNzk0NzkgOTcuMTIzMSA3LjY1NDczIDk0Ljg1NDYgNy4wMDMyN0g4OS45OTMzVjcuNjI5MzllLTA2WiIgZmlsbD0iI0FDMjMyMyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkyLjI2MTkgMTMuODQzN0g4OC4wNDg4VjQzLjMyMjVIOTIuMjYxOVYyOC41MDE2SDkzLjA3MjFWMjkuMzE2SDk0Ljg1NDZWMjUuNTdIOTMuMDcyMVYyNi4zODQ0SDkyLjI2MTlWMTMuODQzN1oiIGZpbGw9IiNBQzIzMjMiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05NS42NjQ4IDYuMzUxOFY3LjYyOTM5ZS0wNkgxMTMuMDAzTDExOS42NDcgNi4zNTE4VjIxLjgyNDFMMTEzLjAwMyAyOC41MDE2SDEwNC45MDFMMTA0LjczOSA0My4zMjI1SDk1LjY2NDhWMTEuMDc0OUgxMDAuODVDMTAwLjUyNiA4LjYzMTkzIDk4LjkwNTYgNy4zMjkgOTUuNjY0OCA2LjM1MThaTTEwNC45MDEgNy45ODA0NkgxMTAuNTczVjIwLjUyMTJIMTA0LjkwMVY3Ljk4MDQ2WiIgZmlsbD0iI0FDMjMyMyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0My4zMDUgNy42MjkzOWUtMDZIMTIzLjIxMlY0My4zMjI1SDE0My4zMDVWMzUuMDE2M0gxMzIuNDQ4VjI0LjQzSDE0MS42ODVWMTYuMTIzOEgxMzIuNDQ4VjcuOTgwNDZIMTQzLjMwNVY3LjYyOTM5ZS0wNloiIGZpbGw9IiNBQzIzMjMiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDcuMTk0IDQzLjMyMjVWNy42MjkzOWUtMDZIMTY1LjE4TDE3MS41IDUuODYzMlYxNi45MzgxTDE2Ni4xNTMgMjEuODI0MUwxNzEuNSAyNS41N1Y0My4zMjI1SDE2Mi40MjZWMjUuNTdIMTU2LjI2OFY0My4zMjI1SDE0Ny4xOTRaTTE1Ni4yNjggNy45ODA0NkgxNjIuNDI2VjE3LjU4OTZIMTU2LjI2OFY3Ljk4MDQ2WiIgZmlsbD0iI0FDMjMyMyIvPgo8L3N2Zz4K`;
   async function fetchLatestVersion() {
     try {
-      const endpoint = `https://unpkg.com/@oyerinde/caliper@latest/package.json`;
+      const endpoint = `https://unpkg.com/@oyerinde/caliper@latest/dist/version.json`;
       const response = await fetch(endpoint, {
         method: "GET",
         cache: "no-store",
@@ -2463,21 +2525,13 @@
 :root {
   interpolate-size: allow-keywords;
   --caliper-primary: ${DEFAULT_THEME.primary};
-  --caliper-primary-90: ${DEFAULT_THEME.primary.replace("1)", "0.9)")};
-  --caliper-primary-95: ${DEFAULT_THEME.primary.replace("1)", "0.95)")};
-  --caliper-primary-50: ${DEFAULT_THEME.primary.replace("1)", "0.5)")};
-  --caliper-primary-05: ${DEFAULT_THEME.primary.replace("1)", "0.05)")};
   --caliper-secondary: ${DEFAULT_THEME.secondary};
-  --caliper-secondary-50: ${DEFAULT_THEME.secondary.replace("1)", "0.5)")};
-  --caliper-secondary-05: ${DEFAULT_THEME.secondary.replace("1)", "0.05)")};
   --caliper-calc-bg: ${DEFAULT_THEME.calcBg};
   --caliper-calc-shadow: ${DEFAULT_THEME.calcShadow};
   --caliper-calc-op-highlight: ${DEFAULT_THEME.calcOpHighlight};
   --caliper-calc-text: ${DEFAULT_THEME.calcText};
   --caliper-text: ${DEFAULT_THEME.text};
   --caliper-projection: ${DEFAULT_THEME.projection};
-  --caliper-projection-90: ${DEFAULT_THEME.projection.replace("1)", "0.9)")};
-  --caliper-projection-light: ${DEFAULT_THEME.projection.replace("1)", "0.2)")};
   --caliper-ruler: ${DEFAULT_THEME.ruler};
 }
 
@@ -3136,7 +3190,7 @@
     const liveSecondaryTarget = createMemo(() => {
       props.viewport.version;
       const res = props.result;
-      if (!(props.isAltPressed || props.isFrozen) || !res) return null;
+      if (!(props.isActivatePressed || props.isFrozen) || !res) return null;
       return getLiveGeometry(res.secondary, res.secondaryHierarchy, res.secondaryPosition, res.secondarySticky, res.secondaryWinX, res.secondaryWinY);
     });
     createEffect(on([liveSelectionTarget, liveSecondaryTarget, () => props.animation.lerpFactor, () => props.metadata.element], ([selection, secondary, factor, element]) => {
@@ -3290,7 +3344,7 @@
           insert(_el$, () => data().width, _el$2);
           insert(_el$, () => data().height, null);
           createRenderEffect((_p$) => {
-            var _v$ = `translate3d(${data().x - props.viewport.scrollX}px, ${data().y - props.viewport.scrollY}px, 0) translate(-50%, 0)`, _v$2 = props.isAltPressed ? 0 : 1;
+            var _v$ = `translate3d(${data().x - props.viewport.scrollX}px, ${data().y - props.viewport.scrollY}px, 0) translate(-50%, 0)`, _v$2 = props.isActivatePressed ? 0 : 1;
             _v$ !== _p$.e && setStyleProperty(_el$, "transform", _p$.e = _v$);
             _v$2 !== _p$.t && setStyleProperty(_el$, "opacity", _p$.t = _v$2);
             return _p$;
@@ -3543,6 +3597,7 @@
     const [draggingId, setDraggingId] = createSignal(null);
     const [hoveredId, setHoveredId] = createSignal(null);
     const [selectedIds, setSelectedIds] = createSignal(/* @__PURE__ */ new Set());
+    const [rulerOrigins, setRulerOrigins] = createSignal(/* @__PURE__ */ new Map());
     createEffect(() => {
       const lines = props.state().lines;
       const currentIds = selectedIds();
@@ -3556,6 +3611,45 @@
         setSelectedIds(validIds);
       }
     });
+    createEffect(() => {
+      const lines = props.state().lines;
+      const vp = props.viewport();
+      const origins = rulerOrigins();
+      let updated = false;
+      const newOrigins = new Map(origins);
+      lines.forEach((line) => {
+        if (!newOrigins.has(line.id)) {
+          newOrigins.set(line.id, {
+            width: vp.width,
+            height: vp.height
+          });
+          updated = true;
+        }
+      });
+      const lineIds = new Set(lines.map((l) => l.id));
+      newOrigins.forEach((_, id) => {
+        if (!lineIds.has(id)) {
+          newOrigins.delete(id);
+          updated = true;
+        }
+      });
+      if (updated) {
+        setRulerOrigins(newOrigins);
+      }
+    });
+    const getProportionalPosition = (line) => {
+      const vp = props.viewport();
+      const origin = rulerOrigins().get(line.id);
+      if (!origin) {
+        return line.position;
+      }
+      const isV = line.type === "vertical";
+      const originDim = isV ? origin.width : origin.height;
+      const currentDim = isV ? vp.width : vp.height;
+      if (originDim === 0) return line.position;
+      const ratio = line.position / originDim;
+      return ratio * currentDim;
+    };
     const getSnapPoints = (isV) => {
       const points = [];
       const state = props.projectionState?.();
@@ -3639,8 +3733,17 @@
         activeLines.forEach((line) => {
           const isLineV = line.type === "vertical";
           const max = (isLineV ? vp.width : vp.height) - 1;
-          let newPos = Math.max(0, Math.min(line.position + delta, max));
+          const currentPos = getProportionalPosition(line);
+          let newPos = Math.max(0, Math.min(currentPos + delta, max));
           newPos = applySnap(newPos, isLineV);
+          setRulerOrigins((prev) => {
+            const next = new Map(prev);
+            next.set(line.id, {
+              width: vp.width,
+              height: vp.height
+            });
+            return next;
+          });
           props.onUpdate(line.id, newPos);
         });
       }
@@ -3676,6 +3779,20 @@
       e.stopPropagation();
       setDraggingId(id);
       target.setPointerCapture(e.pointerId);
+      const vp = props.viewport();
+      const line = props.state().lines.find((l) => l.id === id);
+      if (line) {
+        const currentPos = getProportionalPosition(line);
+        setRulerOrigins((prev) => {
+          const next = new Map(prev);
+          next.set(id, {
+            width: vp.width,
+            height: vp.height
+          });
+          return next;
+        });
+        props.onUpdate(id, currentPos);
+      }
       if (e.shiftKey) {
         setSelectedIds((prev) => {
           const next = new Set(prev);
@@ -3689,10 +3806,10 @@
         }
       }
       const onPointerMove = (moveEvent) => {
-        const vp = props.viewport();
+        const vp2 = props.viewport();
         const isV = type === "vertical";
         let pos = isV ? moveEvent.clientX : moveEvent.clientY;
-        const max = (isV ? vp.width : vp.height) - 1;
+        const max = (isV ? vp2.width : vp2.height) - 1;
         pos = Math.max(0, Math.min(pos, max));
         pos = applySnap(pos, isV);
         props.onUpdate(id, pos);
@@ -3731,42 +3848,48 @@
       const ids = selectedIds();
       if (ids.size < 2) return [];
       const lines = props.state().lines.filter((l) => ids.has(l.id));
-      const vLines = lines.filter((l) => l.type === "vertical").sort((a, b) => a.position - b.position);
-      const hLines = lines.filter((l) => l.type === "horizontal").sort((a, b) => a.position - b.position);
+      const vLinesWithPos = lines.filter((l) => l.type === "vertical").map((l) => ({
+        line: l,
+        pos: getProportionalPosition(l)
+      })).sort((a, b) => a.pos - b.pos);
+      const hLinesWithPos = lines.filter((l) => l.type === "horizontal").map((l) => ({
+        line: l,
+        pos: getProportionalPosition(l)
+      })).sort((a, b) => a.pos - b.pos);
       const result = [];
       const vp = props.viewport();
-      for (let i = 0; i < vLines.length - 1; i++) {
-        const l1 = vLines[i];
-        const l2 = vLines[i + 1];
-        const val = l2.position - l1.position;
+      for (let i = 0; i < vLinesWithPos.length - 1; i++) {
+        const l1 = vLinesWithPos[i];
+        const l2 = vLinesWithPos[i + 1];
+        const val = l2.pos - l1.pos;
         if (val > 0) {
           result.push({
-            x1: l1.position,
+            x1: l1.pos,
             y1: vp.height / 2 + 100,
             // Move default bridge line off center for better visibility
-            x2: l2.position,
+            x2: l2.pos,
             y2: vp.height / 2 + 100,
             value: val,
             type: "vertical",
-            labelX: l1.position + val / 2,
+            labelX: l1.pos + val / 2,
             labelY: vp.height / 2 + 85
           });
         }
       }
-      for (let i = 0; i < hLines.length - 1; i++) {
-        const l1 = hLines[i];
-        const l2 = hLines[i + 1];
-        const val = l2.position - l1.position;
+      for (let i = 0; i < hLinesWithPos.length - 1; i++) {
+        const l1 = hLinesWithPos[i];
+        const l2 = hLinesWithPos[i + 1];
+        const val = l2.pos - l1.pos;
         if (val > 0) {
           result.push({
             x1: vp.width / 2 + 100,
-            y1: l1.position,
+            y1: l1.pos,
             x2: vp.width / 2 + 100,
-            y2: l2.position,
+            y2: l2.pos,
             value: val,
             type: "horizontal",
             labelX: vp.width / 2 + 115,
-            labelY: l1.position + val / 2
+            labelY: l1.pos + val / 2
           });
         }
       }
@@ -3854,6 +3977,9 @@
         },
         children: (line) => createComponent(RulerLineItem, {
           line,
+          get pixelPosition() {
+            return getProportionalPosition(line);
+          },
           get isDragging() {
             return draggingId() === line.id;
           },
@@ -3877,7 +4003,7 @@
   function RulerLineItem(props) {
     const lineStyle = createMemo(() => {
       const isV = props.line.type === "vertical";
-      const pos = props.line.position;
+      const pos = props.pixelPosition;
       const isActive = props.isDragging || props.isHovered || props.isSelected;
       return {
         left: "0",
@@ -3896,7 +4022,7 @@
       var _el$9 = _tmpl$43();
       className(_el$9, `${PREFIX}ruler-line-hit`);
       createRenderEffect((_p$) => {
-        var _v$11 = props.line.id, _v$12 = props.line.type, _v$13 = props.line.type === "vertical" ? hitSize() : "100%", _v$14 = props.line.type === "vertical" ? "100%" : hitSize(), _v$15 = `translate3d(${props.line.type === "vertical" ? props.line.position - hitOffset() : 0}px, ${props.line.type === "vertical" ? 0 : props.line.position - hitOffset()}px, 0)`, _v$16 = props.line.type === "vertical" ? "col-resize" : "row-resize";
+        var _v$11 = props.line.id, _v$12 = props.line.type, _v$13 = props.line.type === "vertical" ? hitSize() : "100%", _v$14 = props.line.type === "vertical" ? "100%" : hitSize(), _v$15 = `translate3d(${props.line.type === "vertical" ? props.pixelPosition - hitOffset() : 0}px, ${props.line.type === "vertical" ? 0 : props.pixelPosition - hitOffset()}px, 0)`, _v$16 = props.line.type === "vertical" ? "col-resize" : "row-resize";
         _v$11 !== _p$.e && setAttribute(_el$9, "data-ruler-id", _p$.e = _v$11);
         _v$12 !== _p$.t && setAttribute(_el$9, "data-ruler-type", _p$.t = _v$12);
         _v$13 !== _p$.a && setStyleProperty(_el$9, "width", _p$.a = _v$13);
@@ -3930,29 +4056,30 @@
           e.stopPropagation();
           const isV = props.line.type === "vertical";
           const vp = props.viewport();
+          const pos = props.pixelPosition;
           props.onLineClick?.({
             type: "distance",
-            value: props.line.position,
+            value: pos,
             start: isV ? {
-              x: props.line.position,
+              x: pos,
               y: 0
             } : {
               x: 0,
-              y: props.line.position
+              y: pos
             },
             end: isV ? {
-              x: props.line.position,
+              x: pos,
               y: vp.height
             } : {
               x: vp.width,
-              y: props.line.position
+              y: pos
             }
-          }, props.line.position);
+          }, pos);
         };
         className(_el$1, `${PREFIX}label ${PREFIX}ruler-label`);
-        insert(_el$1, () => Math.round(props.line.position * 100) / 100);
+        insert(_el$1, () => Math.round(props.pixelPosition * 100) / 100);
         createRenderEffect((_p$) => {
-          var _v$17 = `translate3d(${props.line.type === "vertical" ? props.line.position + 10 : 20}px, ${props.line.type === "vertical" ? 20 : props.line.position + 10}px, 0)`, _v$18 = props.isSelected && !props.isHovered && !props.isDragging ? "0.7" : "1";
+          var _v$17 = `translate3d(${props.line.type === "vertical" ? props.pixelPosition + 10 : 20}px, ${props.line.type === "vertical" ? 20 : props.pixelPosition + 10}px, 0)`, _v$18 = props.isSelected && !props.isHovered && !props.isDragging ? "0.7" : "1";
           _v$17 !== _p$.e && setStyleProperty(_el$1, "transform", _p$.e = _v$17);
           _v$18 !== _p$.t && setStyleProperty(_el$1, "opacity", _p$.t = _v$18);
           return _p$;
@@ -3993,8 +4120,8 @@
       get result() {
         return props.result();
       },
-      get isAltPressed() {
-        return props.isAltPressed();
+      get isActivatePressed() {
+        return props.isActivatePressed();
       },
       get isFrozen() {
         return props.isFrozen();
@@ -4009,15 +4136,15 @@
       get metadata() {
         return props.selectionMetadata();
       },
-      get isAltPressed() {
-        return props.isAltPressed();
+      get isActivatePressed() {
+        return props.isActivatePressed();
       },
       get viewport() {
         return props.viewport();
       }
     }), createComponent(Show, {
       get when() {
-        return memo(() => !!(props.isAltPressed() || props.isFrozen()))() && resultData();
+        return memo(() => !!(props.isActivatePressed() || props.isFrozen()))() && resultData();
       },
       get children() {
         return createComponent(Portal, {
@@ -4204,12 +4331,34 @@
     const [rulerState, setRulerState] = createSignal({
       lines: []
     });
-    const [isAltPressed, setIsAltPressed] = createSignal(false);
+    const [isActivatePressed, setIsActivatePressed] = createSignal(false);
     const [isFrozen, setIsFrozen] = createSignal(false);
+    const ignoredElements = /* @__PURE__ */ new WeakSet();
     let viewportRafId = null;
     let resizeObserver = null;
+    let observedRoot = false;
     let observedPrimary = null;
     let observedSecondary = null;
+    const resetCalculatorUI = () => {
+      setCalculatorState(null);
+      setActiveCalculatorLine(null);
+      if (projectionState().direction !== null) {
+        setActiveInputFocus("projection");
+      }
+    };
+    const syncCalculatorUI = (state) => {
+      if (!state.isActive) {
+        resetCalculatorUI();
+        return;
+      }
+      setCalculatorState(state);
+      if (state.operation) {
+        setActiveCalculatorLine(null);
+      }
+    };
+    const isActive = createMemo(() => {
+      return !!selectionMetadata().element || !!result() || rulerState().lines.length > 0 || projectionState().direction !== null;
+    });
     const syncViewport = () => {
       setViewport((prev) => ({
         scrollX: window.scrollX,
@@ -4221,6 +4370,7 @@
       viewportRafId = null;
     };
     const scheduleUpdate = () => {
+      if (!isActive()) return;
       if (!viewportRafId) {
         viewportRafId = requestAnimationFrame(syncViewport);
       }
@@ -4238,6 +4388,8 @@
           if (system?.getState() === "FROZEN") {
             system?.unfreeze(false);
           }
+        } else {
+          setActiveInputFocus("projection");
         }
       });
       rulerSystem = createRulerSystem();
@@ -4249,8 +4401,6 @@
         setResult(system.getCurrentResult());
         setIsFrozen(system.getState() === "FROZEN");
       });
-      const currentResult = system.getCurrentResult();
-      setResult(currentResult);
       const unsubscribeUpdate = selectionSystem.onUpdate((metadata) => {
         setSelectionMetadata(metadata);
       });
@@ -4262,16 +4412,14 @@
       const performSelection = (x, y) => {
         const element = getTopElementAtPoint(x, y);
         if (element && selectionSystem) {
-          setResult(null);
-          setCalculatorState(null);
-          setActiveInputFocus("calculator");
-          if (projectionSystem) {
-            projectionSystem.clear();
-          }
           if (system) {
             system.abort();
-            system.getCalculator().close();
           }
+          if (projectionSystem) {
+            projectionSystem.clear();
+          }
+          resetCalculatorUI();
+          setActiveInputFocus("calculator");
           lastHoveredElement = null;
           selectionDelegate.cancel();
           measureDelegate.cancel();
@@ -4297,6 +4445,9 @@
         }
         return isSelectKeyDown() && !ctrlKey && !metaKey && !altKey && !shiftKey;
       };
+      const isActivateActive = (e) => {
+        return e.key === commands.activate || commands.activate === "Alt" && (e.key === "Alt" || e.key === "AltGraph");
+      };
       const handlePointerDown = (e) => {
         lastPointerPos = {
           x: e.clientX,
@@ -4336,6 +4487,9 @@
       let mouseMoveRafId = null;
       let lastHoveredElement = null;
       const selectionDelegate = createSuppressionDelegate((el) => {
+        if (selectionSystem?.getSelected() !== el) {
+          system?.abort();
+        }
         lastHoveredElement = el;
         selectionSystem?.select(el);
       });
@@ -4357,7 +4511,7 @@
         };
         setCursor(cursorPoint);
         const selectedElement = selectionSystem.getSelected();
-        const isAlt = isAltPressed();
+        const isAlt = isActivatePressed();
         const state = system?.getState();
         if (selectedElement) {
           const hoveredElement = getTopElementAtPoint(e.clientX, e.clientY);
@@ -4385,15 +4539,14 @@
         }
       };
       const handleKeyDown = (e) => {
-        if (e.key === commands.clear) {
-          setIsAltPressed(false);
-          setCalculatorState(null);
-          setActiveCalculatorLine(null);
-          if (selectionSystem) {
-            lastHoveredElement = null;
-            selectionDelegate.cancel();
-            measureDelegate.cancel();
-            selectionSystem.clear();
+        if (e.key === commands.clear && !isEditable(e.target)) {
+          if (!isActive()) return;
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          setIsActivatePressed(false);
+          resetCalculatorUI();
+          if (system) {
+            system.abort();
           }
           if (projectionSystem) {
             projectionSystem.clear();
@@ -4401,18 +4554,18 @@
           if (rulerSystem) {
             rulerSystem.clear();
           }
-          if (system) {
-            system.abort();
-            const calc = system.getCalculator();
-            calc.close();
-            setResult(null);
+          if (selectionSystem) {
+            lastHoveredElement = null;
+            selectionDelegate.cancel();
+            measureDelegate.cancel();
+            selectionSystem.clear();
           }
           return;
         }
-        if (e.key === commands.select) {
+        if (e.key === commands.select && !isEditable(e.target)) {
           setIsSelectKeyDown(true);
         }
-        if (e.key.toLowerCase() === commands.ruler && e.shiftKey && rulerSystem) {
+        if (e.key.toLowerCase() === commands.ruler.toLowerCase() && e.shiftKey && rulerSystem && !isEditable(e.target)) {
           e.preventDefault();
           const vp = viewport();
           const x = Math.max(0, Math.min(cursor().x, vp.width));
@@ -4420,31 +4573,34 @@
           rulerSystem.addPair(x, y);
           return;
         }
-        const isAltKey = e.key === "Alt" || e.key === "AltGraph" || e.key === commands.activate;
-        if (isAltKey) {
-          e.preventDefault();
-          if (!isAltPressed()) {
+        if (isActivateActive(e)) {
+          if (selectionMetadata().element) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+          }
+          if (!isActivatePressed() && isActive()) {
             if (system) {
               system.abort();
-              setResult(null);
-              handleCalculatorClose();
             }
             if (projectionSystem) {
               projectionSystem.clear();
             }
+            resetCalculatorUI();
           }
-          setIsAltPressed(true);
-        } else if (e.key === commands.freeze && e.target === document.body && system) {
+          setIsActivatePressed(true);
+        } else if (e.key === commands.freeze && !isEditable(e.target) && system) {
           const state = system.getState();
           if (state === "FROZEN") {
             e.preventDefault();
-            system.unfreeze(isAltPressed());
+            e.stopImmediatePropagation();
+            system.unfreeze(isActivatePressed());
           } else if (selectionMetadata().element) {
             e.preventDefault();
+            e.stopImmediatePropagation();
             system.freeze();
           }
         } else {
-          const key = e.key.toLowerCase();
+          const key = e.key;
           const {
             calculator,
             projection
@@ -4480,7 +4636,7 @@
             [projection.right]: "right"
           };
           const dir = dirMap[key];
-          if (dir && selectionMetadata().element) {
+          if (dir && selectionMetadata().element && !isEditable(e.target)) {
             e.preventDefault();
             e.stopImmediatePropagation();
             setActiveInputFocus("projection");
@@ -4534,10 +4690,11 @@
             };
             const targetType = typeMap[key];
             if (targetType) {
-              e.preventDefault();
               const currentLines = result()?.lines || [];
               const targetLine = currentLines.find((l) => l.type === targetType);
               if (targetLine) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
                 const liveValue = getLiveLineValue(targetLine, result());
                 handleLineClick(targetLine, liveValue);
               }
@@ -4549,26 +4706,29 @@
         if (e.key === commands.select) {
           setIsSelectKeyDown(false);
         }
-        const isAltKey = e.key === "Alt" || e.key === "AltGraph" || e.key === commands.activate;
-        if (isAltKey) {
+        if (isActivateActive(e)) {
           e.preventDefault();
-          if (isAltPressed()) {
-            setIsAltPressed(false);
-            if (system) {
+          if (isActivatePressed()) {
+            setIsActivatePressed(false);
+            if (system && isActive()) {
               system.stop();
             }
           }
         }
       };
       const handleBlur = () => {
-        if (isAltPressed()) {
-          setIsAltPressed(false);
-          if (system) {
+        if (isActivatePressed()) {
+          setIsActivatePressed(false);
+          if (system && isActive()) {
             system.stop();
-            setResult(null);
           }
         }
       };
+      const handleFocus = () => {
+        if (!isActive()) return;
+        scheduleUpdate();
+        window.focus();
+      };
       window.addEventListener("pointerdown", handlePointerDown, {
         capture: true
       });
@@ -4586,6 +4746,7 @@
         capture: true
       });
       window.addEventListener("blur", handleBlur);
+      window.addEventListener("focus", handleFocus);
       onCleanup(() => {
         window.removeEventListener("pointerdown", handlePointerDown, {
           capture: true
@@ -4604,6 +4765,7 @@
           capture: true
         });
         window.removeEventListener("blur", handleBlur);
+        window.removeEventListener("focus", handleFocus);
         if (mouseMoveRafId) {
           cancelAnimationFrame(mouseMoveRafId);
         }
@@ -4613,7 +4775,9 @@
         unsubscribeUpdate();
         unsubscribeProjection();
         unsubscribeRuler();
-        handleCleanup();
+        if (system) {
+          system.cleanup();
+        }
         if (projectionSystem) {
           projectionSystem = null;
         }
@@ -4623,8 +4787,7 @@
       });
     });
     createEffect(() => {
-      const active = !!selectionMetadata().element || !!result();
-      if (active) {
+      if (isActive()) {
         window.addEventListener("scroll", scheduleUpdate, {
           passive: true,
           capture: true
@@ -4641,8 +4804,15 @@
         });
       }
     });
-    const updateResizeObservations = (primaryEl, secondaryEl) => {
+    const updateResizeObservations = (active, primaryEl, secondaryEl) => {
       if (!resizeObserver) return;
+      if (active && !observedRoot) {
+        resizeObserver.observe(document.documentElement);
+        observedRoot = true;
+      } else if (!active && observedRoot) {
+        resizeObserver.unobserve(document.documentElement);
+        observedRoot = false;
+      }
       if (primaryEl === observedPrimary && secondaryEl === observedSecondary) {
         return;
       }
@@ -4655,10 +4825,12 @@
         observedSecondary = null;
       }
       if (primaryEl && primaryEl !== observedPrimary) {
+        ignoredElements.add(primaryEl);
         resizeObserver.observe(primaryEl);
         observedPrimary = primaryEl;
       }
       if (secondaryEl && secondaryEl !== primaryEl && secondaryEl !== observedSecondary) {
+        ignoredElements.add(secondaryEl);
         resizeObserver.observe(secondaryEl);
         observedSecondary = secondaryEl;
       }
@@ -4688,6 +4860,16 @@
         secondaryChanged = false;
       };
       resizeObserver = new ResizeObserver((entries) => {
+        if (!isActive()) return;
+        let hasActualResize = false;
+        for (const entry of entries) {
+          if (ignoredElements.has(entry.target)) {
+            ignoredElements.delete(entry.target);
+            continue;
+          }
+          hasActualResize = true;
+        }
+        if (!hasActualResize) return;
         for (const entry of entries) {
           if (entry.target === document.documentElement) {
             sentinelResized = true;
@@ -4714,7 +4896,6 @@
           }, remaining);
         }
       });
-      resizeObserver.observe(document.documentElement);
       onCleanup(() => {
         resizeObserver?.disconnect();
         resizeObserver = null;
@@ -4724,14 +4905,15 @@
       });
     });
     createEffect(() => {
+      const active = isActive();
       const primaryEl = selectionMetadata().element;
       const currentResult = result();
       const secondaryEl = isFrozen() ? currentResult?.secondaryElement ?? null : null;
-      if (!primaryEl && !secondaryEl) {
-        updateResizeObservations(null, null);
+      if (!active) {
+        updateResizeObservations(false, null, null);
         return;
       }
-      updateResizeObservations(primaryEl, secondaryEl);
+      updateResizeObservations(true, primaryEl, secondaryEl);
     });
     createEffect(() => {
       const calcLine = activeCalculatorLine();
@@ -4752,12 +4934,10 @@
     });
     const handleLineClick = (line, liveValue) => {
       if (system) {
-        setActiveCalculatorLine(null);
         const calc = system.getCalculator();
         calc.open(liveValue);
         setActiveInputFocus("calculator");
-        const calcState = calc.getState();
-        setCalculatorState(calcState.isActive ? calcState : null);
+        syncCalculatorUI(calc.getState());
         if ("startSync" in line) {
           setActiveCalculatorLine(line);
         }
@@ -4770,67 +4950,35 @@
         if (/^[+\-*/.]$/.test(key)) {
           setActiveInputFocus("calculator");
         }
-        const calcState = calc.getState();
-        const isActive = calcState.isActive;
-        setCalculatorState(isActive ? calcState : null);
-        if (calcState.operation) {
-          setActiveCalculatorLine(null);
-        }
-        if (!isActive && projectionState().direction !== null) {
-          setActiveInputFocus("projection");
-        }
+        syncCalculatorUI(calc.getState());
       }
     };
     const handleCalculatorBackspace = () => {
       if (system) {
         const calc = system.getCalculator();
         calc.handleBackspace();
-        const calcState = calc.getState();
-        const isActive = calcState.isActive;
-        setCalculatorState(isActive ? calcState : null);
-        if (!isActive) {
-          setActiveCalculatorLine(null);
-          if (projectionState().direction !== null) {
-            setActiveInputFocus("projection");
-          }
-        }
+        syncCalculatorUI(calc.getState());
       }
     };
     const handleCalculatorDelete = () => {
       if (system) {
         const calc = system.getCalculator();
         calc.handleDelete();
-        const calcState = calc.getState();
-        const isActive = calcState.isActive;
-        setCalculatorState(isActive ? calcState : null);
-        setActiveCalculatorLine(null);
-        if (!isActive && projectionState().direction !== null) {
-          setActiveInputFocus("projection");
-        }
+        syncCalculatorUI(calc.getState());
       }
     };
     const handleCalculatorEnter = () => {
       if (system) {
         const calc = system.getCalculator();
         calc.handleEnter();
-        const calcState = calc.getState();
-        const isActive = calcState.isActive;
-        setCalculatorState(isActive ? calcState : null);
-        setActiveCalculatorLine(null);
-        if (!isActive && projectionState().direction !== null) {
-          setActiveInputFocus("projection");
-        }
+        syncCalculatorUI(calc.getState());
       }
     };
     const handleCalculatorClose = () => {
       if (system) {
         const calc = system.getCalculator();
         calc.close();
-        setCalculatorState(null);
-        setActiveCalculatorLine(null);
-        if (projectionState().direction !== null) {
-          setActiveInputFocus("projection");
-        }
+        resetCalculatorUI();
       }
     };
     const handleRulerUpdate = (id, position) => {
@@ -4839,17 +4987,11 @@
     const handleRulerRemove = (id) => {
       rulerSystem?.removeLine(id);
     };
-    const handleCleanup = () => {
-      if (system) system.cleanup();
-      if (selectionSystem) selectionSystem.clear();
-      if (projectionSystem) projectionSystem.clear();
-      if (rulerSystem) rulerSystem.clear();
-    };
     return createComponent(Overlay, {
       result,
       cursor,
       selectionMetadata,
-      isAltPressed,
+      isActivatePressed,
       isFrozen,
       animation,
       viewport,
@@ -4940,6 +5082,7 @@
     };
     const commands = mergeCommands(mergedConfig.commands);
     const animation = mergeAnimation(mergedConfig.animation);
+    const theme = mergeTheme(mergedConfig.theme);
     let cleanup = null;
     const instance = {
       mounted: false,
@@ -4949,9 +5092,7 @@
           instance.mounted = true;
           return;
         }
-        if (mergedConfig.theme) {
-          applyTheme(mergedConfig.theme);
-        }
+        applyTheme(theme);
         const target = container || document.body;
         injectStyles();
         const overlayContainer = document.createElement("div");
@@ -4982,7 +5123,7 @@
     return instance;
   }
   if (IS_BROWSER2) {
-    showVersionInfo("0.1.0").catch(() => {
+    showVersionInfo("0.1.2").catch(() => {
     });
   }