@oyerinde/caliper 0.1.0

package/dist/index.cjs

@@ -0,0 +1,4999 @@
+'use strict';
+
+/**
+ * @license MIT
+ *
+ * Caliper - Browser Measurement Tool
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var IS_DEV = false;
+var equalFn = (a, b) => a === b;
+var $TRACK = /* @__PURE__ */ Symbol("solid-track");
+var signalOptions = {
+  equals: equalFn
+};
+var runEffects = runQueue;
+var STALE = 1;
+var PENDING = 2;
+var UNOWNED = {
+  owned: null,
+  cleanups: null,
+  context: null,
+  owner: null
+};
+var Owner = null;
+var Transition = null;
+var ExternalSourceConfig = null;
+var Listener = null;
+var Updates = null;
+var Effects = null;
+var ExecCount = 0;
+function createRoot(fn, detachedOwner) {
+  const listener = Listener, owner = Owner, unowned = fn.length === 0, current = detachedOwner === void 0 ? owner : detachedOwner, root = unowned ? UNOWNED : {
+    owned: null,
+    cleanups: null,
+    context: current ? current.context : null,
+    owner: current
+  }, updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
+  Owner = root;
+  Listener = null;
+  try {
+    return runUpdates(updateFn, true);
+  } finally {
+    Listener = listener;
+    Owner = owner;
+  }
+}
+function createSignal(value, options) {
+  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+  const s = {
+    value,
+    observers: null,
+    observerSlots: null,
+    comparator: options.equals || void 0
+  };
+  const setter = (value2) => {
+    if (typeof value2 === "function") {
+      value2 = value2(s.value);
+    }
+    return writeSignal(s, value2);
+  };
+  return [readSignal.bind(s), setter];
+}
+function createRenderEffect(fn, value, options) {
+  const c = createComputation(fn, value, false, STALE);
+  updateComputation(c);
+}
+function createEffect(fn, value, options) {
+  runEffects = runUserEffects;
+  const c = createComputation(fn, value, false, STALE);
+  if (!options || !options.render) c.user = true;
+  Effects ? Effects.push(c) : updateComputation(c);
+}
+function createMemo(fn, value, options) {
+  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+  const c = createComputation(fn, value, true, 0);
+  c.observers = null;
+  c.observerSlots = null;
+  c.comparator = options.equals || void 0;
+  updateComputation(c);
+  return readSignal.bind(c);
+}
+function untrack(fn) {
+  if (Listener === null) return fn();
+  const listener = Listener;
+  Listener = null;
+  try {
+    if (ExternalSourceConfig) ;
+    return fn();
+  } finally {
+    Listener = listener;
+  }
+}
+function on(deps, fn, options) {
+  const isArray = Array.isArray(deps);
+  let prevInput;
+  return (prevValue) => {
+    let input;
+    if (isArray) {
+      input = Array(deps.length);
+      for (let i = 0; i < deps.length; i++) input[i] = deps[i]();
+    } else input = deps();
+    const result = untrack(() => fn(input, prevInput, prevValue));
+    prevInput = input;
+    return result;
+  };
+}
+function onMount(fn) {
+  createEffect(() => untrack(fn));
+}
+function onCleanup(fn) {
+  if (Owner === null) ;
+  else if (Owner.cleanups === null) Owner.cleanups = [fn];
+  else Owner.cleanups.push(fn);
+  return fn;
+}
+function getOwner() {
+  return Owner;
+}
+function runWithOwner(o, fn) {
+  const prev = Owner;
+  const prevListener = Listener;
+  Owner = o;
+  Listener = null;
+  try {
+    return runUpdates(fn, true);
+  } catch (err) {
+    handleError(err);
+  } finally {
+    Owner = prev;
+    Listener = prevListener;
+  }
+}
+var [transPending, setTransPending] = /* @__PURE__ */ createSignal(false);
+function readSignal() {
+  if (this.sources && (this.state)) {
+    if ((this.state) === STALE) updateComputation(this);
+    else {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(this), false);
+      Updates = updates;
+    }
+  }
+  if (Listener) {
+    const sSlot = this.observers ? this.observers.length : 0;
+    if (!Listener.sources) {
+      Listener.sources = [this];
+      Listener.sourceSlots = [sSlot];
+    } else {
+      Listener.sources.push(this);
+      Listener.sourceSlots.push(sSlot);
+    }
+    if (!this.observers) {
+      this.observers = [Listener];
+      this.observerSlots = [Listener.sources.length - 1];
+    } else {
+      this.observers.push(Listener);
+      this.observerSlots.push(Listener.sources.length - 1);
+    }
+  }
+  return this.value;
+}
+function writeSignal(node, value, isComp) {
+  let current = node.value;
+  if (!node.comparator || !node.comparator(current, value)) {
+    node.value = value;
+    if (node.observers && node.observers.length) {
+      runUpdates(() => {
+        for (let i = 0; i < node.observers.length; i += 1) {
+          const o = node.observers[i];
+          const TransitionRunning = Transition && Transition.running;
+          if (TransitionRunning && Transition.disposed.has(o)) ;
+          if (TransitionRunning ? !o.tState : !o.state) {
+            if (o.pure) Updates.push(o);
+            else Effects.push(o);
+            if (o.observers) markDownstream(o);
+          }
+          if (!TransitionRunning) o.state = STALE;
+        }
+        if (Updates.length > 1e6) {
+          Updates = [];
+          if (IS_DEV) ;
+          throw new Error();
+        }
+      }, false);
+    }
+  }
+  return value;
+}
+function updateComputation(node) {
+  if (!node.fn) return;
+  cleanNode(node);
+  const time = ExecCount;
+  runComputation(node, node.value, time);
+}
+function runComputation(node, value, time) {
+  let nextValue;
+  const owner = Owner, listener = Listener;
+  Listener = Owner = node;
+  try {
+    nextValue = node.fn(value);
+  } catch (err) {
+    if (node.pure) {
+      {
+        node.state = STALE;
+        node.owned && node.owned.forEach(cleanNode);
+        node.owned = null;
+      }
+    }
+    node.updatedAt = time + 1;
+    return handleError(err);
+  } finally {
+    Listener = listener;
+    Owner = owner;
+  }
+  if (!node.updatedAt || node.updatedAt <= time) {
+    if (node.updatedAt != null && "observers" in node) {
+      writeSignal(node, nextValue);
+    } else node.value = nextValue;
+    node.updatedAt = time;
+  }
+}
+function createComputation(fn, init, pure, state = STALE, options) {
+  const c = {
+    fn,
+    state,
+    updatedAt: null,
+    owned: null,
+    sources: null,
+    sourceSlots: null,
+    cleanups: null,
+    value: init,
+    owner: Owner,
+    context: Owner ? Owner.context : null,
+    pure
+  };
+  if (Owner === null) ;
+  else if (Owner !== UNOWNED) {
+    {
+      if (!Owner.owned) Owner.owned = [c];
+      else Owner.owned.push(c);
+    }
+  }
+  return c;
+}
+function runTop(node) {
+  if ((node.state) === 0) return;
+  if ((node.state) === PENDING) return lookUpstream(node);
+  if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
+  const ancestors = [node];
+  while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
+    if (node.state) ancestors.push(node);
+  }
+  for (let i = ancestors.length - 1; i >= 0; i--) {
+    node = ancestors[i];
+    if ((node.state) === STALE) {
+      updateComputation(node);
+    } else if ((node.state) === PENDING) {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(node, ancestors[0]), false);
+      Updates = updates;
+    }
+  }
+}
+function runUpdates(fn, init) {
+  if (Updates) return fn();
+  let wait = false;
+  if (!init) Updates = [];
+  if (Effects) wait = true;
+  else Effects = [];
+  ExecCount++;
+  try {
+    const res = fn();
+    completeUpdates(wait);
+    return res;
+  } catch (err) {
+    if (!wait) Effects = null;
+    Updates = null;
+    handleError(err);
+  }
+}
+function completeUpdates(wait) {
+  if (Updates) {
+    runQueue(Updates);
+    Updates = null;
+  }
+  if (wait) return;
+  const e = Effects;
+  Effects = null;
+  if (e.length) runUpdates(() => runEffects(e), false);
+}
+function runQueue(queue) {
+  for (let i = 0; i < queue.length; i++) runTop(queue[i]);
+}
+function runUserEffects(queue) {
+  let i, userLength = 0;
+  for (i = 0; i < queue.length; i++) {
+    const e = queue[i];
+    if (!e.user) runTop(e);
+    else queue[userLength++] = e;
+  }
+  for (i = 0; i < userLength; i++) runTop(queue[i]);
+}
+function lookUpstream(node, ignore) {
+  node.state = 0;
+  for (let i = 0; i < node.sources.length; i += 1) {
+    const source = node.sources[i];
+    if (source.sources) {
+      const state = source.state;
+      if (state === STALE) {
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
+      } else if (state === PENDING) lookUpstream(source, ignore);
+    }
+  }
+}
+function markDownstream(node) {
+  for (let i = 0; i < node.observers.length; i += 1) {
+    const o = node.observers[i];
+    if (!o.state) {
+      o.state = PENDING;
+      if (o.pure) Updates.push(o);
+      else Effects.push(o);
+      o.observers && markDownstream(o);
+    }
+  }
+}
+function cleanNode(node) {
+  let i;
+  if (node.sources) {
+    while (node.sources.length) {
+      const source = node.sources.pop(), index = node.sourceSlots.pop(), obs = source.observers;
+      if (obs && obs.length) {
+        const n = obs.pop(), s = source.observerSlots.pop();
+        if (index < obs.length) {
+          n.sourceSlots[s] = index;
+          obs[index] = n;
+          source.observerSlots[index] = s;
+        }
+      }
+    }
+  }
+  if (node.tOwned) {
+    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
+    delete node.tOwned;
+  }
+  if (node.owned) {
+    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
+  if (node.cleanups) {
+    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
+    node.cleanups = null;
+  }
+  node.state = 0;
+}
+function castError(err) {
+  if (err instanceof Error) return err;
+  return new Error(typeof err === "string" ? err : "Unknown error", {
+    cause: err
+  });
+}
+function handleError(err, owner = Owner) {
+  const error = castError(err);
+  throw error;
+}
+var FALLBACK = /* @__PURE__ */ Symbol("fallback");
+function dispose(d) {
+  for (let i = 0; i < d.length; i++) d[i]();
+}
+function mapArray(list, mapFn, options = {}) {
+  let items = [], mapped = [], disposers = [], len = 0, indexes = mapFn.length > 1 ? [] : null;
+  onCleanup(() => dispose(disposers));
+  return () => {
+    let newItems = list() || [], newLen = newItems.length, i, j;
+    newItems[$TRACK];
+    return untrack(() => {
+      let newIndices, newIndicesNext, temp, tempdisposers, tempIndexes, start, end, newEnd, item;
+      if (newLen === 0) {
+        if (len !== 0) {
+          dispose(disposers);
+          disposers = [];
+          items = [];
+          mapped = [];
+          len = 0;
+          indexes && (indexes = []);
+        }
+        if (options.fallback) {
+          items = [FALLBACK];
+          mapped[0] = createRoot((disposer) => {
+            disposers[0] = disposer;
+            return options.fallback();
+          });
+          len = 1;
+        }
+      } else if (len === 0) {
+        mapped = new Array(newLen);
+        for (j = 0; j < newLen; j++) {
+          items[j] = newItems[j];
+          mapped[j] = createRoot(mapper);
+        }
+        len = newLen;
+      } else {
+        temp = new Array(newLen);
+        tempdisposers = new Array(newLen);
+        indexes && (tempIndexes = new Array(newLen));
+        for (start = 0, end = Math.min(len, newLen); start < end && items[start] === newItems[start]; start++) ;
+        for (end = len - 1, newEnd = newLen - 1; end >= start && newEnd >= start && items[end] === newItems[newEnd]; end--, newEnd--) {
+          temp[newEnd] = mapped[end];
+          tempdisposers[newEnd] = disposers[end];
+          indexes && (tempIndexes[newEnd] = indexes[end]);
+        }
+        newIndices = /* @__PURE__ */ new Map();
+        newIndicesNext = new Array(newEnd + 1);
+        for (j = newEnd; j >= start; j--) {
+          item = newItems[j];
+          i = newIndices.get(item);
+          newIndicesNext[j] = i === void 0 ? -1 : i;
+          newIndices.set(item, j);
+        }
+        for (i = start; i <= end; i++) {
+          item = items[i];
+          j = newIndices.get(item);
+          if (j !== void 0 && j !== -1) {
+            temp[j] = mapped[i];
+            tempdisposers[j] = disposers[i];
+            indexes && (tempIndexes[j] = indexes[i]);
+            j = newIndicesNext[j];
+            newIndices.set(item, j);
+          } else disposers[i]();
+        }
+        for (j = start; j < newLen; j++) {
+          if (j in temp) {
+            mapped[j] = temp[j];
+            disposers[j] = tempdisposers[j];
+            if (indexes) {
+              indexes[j] = tempIndexes[j];
+              indexes[j](j);
+            }
+          } else mapped[j] = createRoot(mapper);
+        }
+        mapped = mapped.slice(0, len = newLen);
+        items = newItems.slice(0);
+      }
+      return mapped;
+    });
+    function mapper(disposer) {
+      disposers[j] = disposer;
+      if (indexes) {
+        const [s, set] = createSignal(j);
+        indexes[j] = set;
+        return mapFn(newItems[j], s);
+      }
+      return mapFn(newItems[j]);
+    }
+  };
+}
+function createComponent(Comp, props) {
+  return untrack(() => Comp(props || {}));
+}
+var narrowedError = (name) => `Stale read from <${name}>.`;
+function For(props) {
+  const fallback = "fallback" in props && {
+    fallback: () => props.fallback
+  };
+  return createMemo(mapArray(() => props.each, props.children, fallback || void 0));
+}
+function Show(props) {
+  const keyed = props.keyed;
+  const conditionValue = createMemo(() => props.when, void 0, void 0);
+  const condition = keyed ? conditionValue : createMemo(conditionValue, void 0, {
+    equals: (a, b) => !a === !b
+  });
+  return createMemo(() => {
+    const c = condition();
+    if (c) {
+      const child = props.children;
+      const fn = typeof child === "function" && child.length > 0;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (!untrack(condition)) throw narrowedError("Show");
+        return conditionValue();
+      })) : child;
+    }
+    return props.fallback;
+  }, void 0, void 0);
+}
+var memo = (fn) => createMemo(() => fn());
+function reconcileArrays(parentNode, a, b) {
+  let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null;
+  while (aStart < aEnd || bStart < bEnd) {
+    if (a[aStart] === b[bStart]) {
+      aStart++;
+      bStart++;
+      continue;
+    }
+    while (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--;
+      bEnd--;
+    }
+    if (aEnd === aStart) {
+      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
+      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+    } else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        if (!map || !map.has(a[aStart])) a[aStart].remove();
+        aStart++;
+      }
+    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+      const node = a[--aEnd].nextSibling;
+      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
+      parentNode.insertBefore(b[--bEnd], node);
+      a[aEnd] = b[bEnd];
+    } else {
+      if (!map) {
+        map = /* @__PURE__ */ new Map();
+        let i = bStart;
+        while (i < bEnd) map.set(b[i], i++);
+      }
+      const index = map.get(a[aStart]);
+      if (index != null) {
+        if (bStart < index && index < bEnd) {
+          let i = aStart, sequence = 1, t;
+          while (++i < aEnd && i < bEnd) {
+            if ((t = map.get(a[i])) == null || t !== index + sequence) break;
+            sequence++;
+          }
+          if (sequence > index - bStart) {
+            const node = a[aStart];
+            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
+          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
+        } else aStart++;
+      } else a[aStart++].remove();
+    }
+  }
+}
+var $$EVENTS = "_$DX_DELEGATE";
+function render(code, element, init, options = {}) {
+  let disposer;
+  createRoot((dispose2) => {
+    disposer = dispose2;
+    element === document ? code() : insert(element, code(), element.firstChild ? null : void 0, init);
+  }, options.owner);
+  return () => {
+    disposer();
+    element.textContent = "";
+  };
+}
+function template(html, isImportNode, isSVG, isMathML) {
+  let node;
+  const create = () => {
+    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
+  };
+  const fn = isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  fn.cloneNode = fn;
+  return fn;
+}
+function delegateEvents(eventNames, document2 = window.document) {
+  const e = document2[$$EVENTS] || (document2[$$EVENTS] = /* @__PURE__ */ new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      document2.addEventListener(name, eventHandler);
+    }
+  }
+}
+function setAttribute(node, name, value) {
+  if (value == null) node.removeAttribute(name);
+  else node.setAttribute(name, value);
+}
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");
+  else node.className = value;
+}
+function style(node, value, prev) {
+  if (!value) return prev ? setAttribute(node, "style") : value;
+  const nodeStyle = node.style;
+  if (typeof value === "string") return nodeStyle.cssText = value;
+  typeof prev === "string" && (nodeStyle.cssText = prev = void 0);
+  prev || (prev = {});
+  value || (value = {});
+  let v, s;
+  for (s in prev) {
+    value[s] == null && nodeStyle.removeProperty(s);
+    delete prev[s];
+  }
+  for (s in value) {
+    v = value[s];
+    if (v !== prev[s]) {
+      nodeStyle.setProperty(s, v);
+      prev[s] = v;
+    }
+  }
+  return prev;
+}
+function setStyleProperty(node, name, value) {
+  value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
+}
+function insert(parent, accessor, marker, initial) {
+  if (marker !== void 0 && !initial) initial = [];
+  if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+  createRenderEffect((current) => insertExpression(parent, accessor(), current, marker), initial);
+}
+function eventHandler(e) {
+  let node = e.target;
+  const key = `$$${e.type}`;
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  const retarget = (value) => Object.defineProperty(e, "target", {
+    configurable: true,
+    value
+  });
+  const handleNode = () => {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== void 0 ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble) return;
+    }
+    node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
+    return true;
+  };
+  const walkUpTree = () => {
+    while (handleNode() && (node = node._$host || node.parentNode || node.host)) ;
+  };
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+  if (e.composedPath) {
+    const path = e.composedPath();
+    retarget(path[0]);
+    for (let i = 0; i < path.length - 2; i++) {
+      node = path[i];
+      if (!handleNode()) break;
+      if (node._$host) {
+        node = node._$host;
+        walkUpTree();
+        break;
+      }
+      if (node.parentNode === oriCurrentTarget) {
+        break;
+      }
+    }
+  } else walkUpTree();
+  retarget(oriTarget);
+}
+function insertExpression(parent, value, current, marker, unwrapArray) {
+  while (typeof current === "function") current = current();
+  if (value === current) return current;
+  const t = typeof value, multi = marker !== void 0;
+  parent = multi && current[0] && current[0].parentNode || parent;
+  if (t === "string" || t === "number") {
+    if (t === "number") {
+      value = value.toString();
+      if (value === current) return current;
+    }
+    if (multi) {
+      let node = current[0];
+      if (node && node.nodeType === 3) {
+        node.data !== value && (node.data = value);
+      } else node = document.createTextNode(value);
+      current = cleanChildren(parent, current, marker, node);
+    } else {
+      if (current !== "" && typeof current === "string") {
+        current = parent.firstChild.data = value;
+      } else current = parent.textContent = value;
+    }
+  } else if (value == null || t === "boolean") {
+    current = cleanChildren(parent, current, marker);
+  } else if (t === "function") {
+    createRenderEffect(() => {
+      let v = value();
+      while (typeof v === "function") v = v();
+      current = insertExpression(parent, v, current, marker);
+    });
+    return () => current;
+  } else if (Array.isArray(value)) {
+    const array = [];
+    const currentArray = current && Array.isArray(current);
+    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
+      createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+      return () => current;
+    }
+    if (array.length === 0) {
+      current = cleanChildren(parent, current, marker);
+      if (multi) return current;
+    } else if (currentArray) {
+      if (current.length === 0) {
+        appendNodes(parent, array, marker);
+      } else reconcileArrays(parent, current, array);
+    } else {
+      current && cleanChildren(parent);
+      appendNodes(parent, array);
+    }
+    current = array;
+  } else if (value.nodeType) {
+    if (Array.isArray(current)) {
+      if (multi) return current = cleanChildren(parent, current, marker, value);
+      cleanChildren(parent, current, null, value);
+    } else if (current == null || current === "" || !parent.firstChild) {
+      parent.appendChild(value);
+    } else parent.replaceChild(value, parent.firstChild);
+    current = value;
+  } else ;
+  return current;
+}
+function normalizeIncomingArray(normalized, array, current, unwrap) {
+  let dynamic = false;
+  for (let i = 0, len = array.length; i < len; i++) {
+    let item = array[i], prev = current && current[normalized.length], t;
+    if (item == null || item === true || item === false) ;
+    else if ((t = typeof item) === "object" && item.nodeType) {
+      normalized.push(item);
+    } else if (Array.isArray(item)) {
+      dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
+    } else if (t === "function") {
+      if (unwrap) {
+        while (typeof item === "function") item = item();
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+      } else {
+        normalized.push(item);
+        dynamic = true;
+      }
+    } else {
+      const value = String(item);
+      if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);
+      else normalized.push(document.createTextNode(value));
+    }
+  }
+  return dynamic;
+}
+function appendNodes(parent, array, marker = null) {
+  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
+}
+function cleanChildren(parent, current, marker, replacement) {
+  if (marker === void 0) return parent.textContent = "";
+  const node = replacement || document.createTextNode("");
+  if (current.length) {
+    let inserted = false;
+    for (let i = current.length - 1; i >= 0; i--) {
+      const el = current[i];
+      if (node !== el) {
+        const isParent = el.parentNode === parent;
+        if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
+        else isParent && el.remove();
+      } else inserted = true;
+    }
+  } else parent.insertBefore(node, marker);
+  return [node];
+}
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function createElement(tagName, isSVG = false, is = void 0) {
+  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+    is
+  });
+}
+function Portal(props) {
+  const {
+    useShadow
+  } = props, marker = document.createTextNode(""), mount = () => props.mount || document.body, owner = getOwner();
+  let content;
+  createEffect(() => {
+    content || (content = runWithOwner(owner, () => createMemo(() => props.children)));
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot((dispose2) => insert(el, () => !clean() ? content() : dispose2(), null));
+      onCleanup(cleanup);
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG), renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+        mode: "open"
+      }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  }, void 0, {
+    render: true
+  });
+  return marker;
+}
+
+// ../core/dist/index.js
+function createReader() {
+  let rafId = null;
+  let idleId = null;
+  let timeoutId = null;
+  function detectBestStrategy() {
+    if ("scheduler" in globalThis) {
+      return "scheduler";
+    }
+    if ("requestIdleCallback" in window) {
+      return "idle";
+    }
+    return "post-raf";
+  }
+  function scheduleWithScheduler(callback, urgent) {
+    if (!("scheduler" in globalThis)) {
+      scheduleWithIdle(callback, urgent);
+      return;
+    }
+    const Scheduler2 = globalThis.scheduler;
+    const TaskController = globalThis.TaskController;
+    if (!TaskController) {
+      scheduleWithIdle(callback, urgent);
+      return;
+    }
+    const controller = new TaskController({
+      priority: urgent ? "user-visible" : "background"
+    });
+    controller.signal;
+    Scheduler2.postTask(
+      () => {
+        callback();
+      },
+      {
+        signal: controller.signal,
+        priority: urgent ? "user-visible" : "background"
+      }
+    );
+  }
+  function scheduleWithIdle(callback, urgent) {
+    if (!("requestIdleCallback" in window)) {
+      scheduleWithRAF(callback);
+      return;
+    }
+    idleId = requestIdleCallback(
+      (deadline) => {
+        if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
+          callback();
+        } else if (!urgent) {
+          scheduleWithIdle(callback, false);
+        } else {
+          scheduleWithRAF(callback);
+        }
+      },
+      { timeout: urgent ? 5 : 50 }
+    );
+  }
+  function scheduleWithRAF(callback) {
+    rafId = requestAnimationFrame(() => {
+      Promise.resolve().then(() => {
+        callback();
+      });
+    });
+  }
+  function scheduleWithTimeout(callback) {
+    timeoutId = setTimeout(() => {
+      callback();
+    }, 0);
+  }
+  function scheduleRead(callback, urgent = false) {
+    cancel();
+    const strategy = detectBestStrategy();
+    switch (strategy) {
+      case "scheduler":
+        scheduleWithScheduler(callback, urgent);
+        break;
+      case "idle":
+        scheduleWithIdle(callback, urgent);
+        break;
+      case "post-raf":
+        scheduleWithRAF(callback);
+        break;
+      case "timeout":
+        scheduleWithTimeout(callback);
+        break;
+    }
+  }
+  function cancel() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    if (idleId !== null && "cancelIdleCallback" in window) {
+      cancelIdleCallback(idleId);
+      idleId = null;
+    }
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  }
+  return { scheduleRead, cancel };
+}
+var MAX_FRAME_TIMES = 30;
+var DEFAULT_READ_INTERVAL = 16;
+var SUPPRESSION_MAX_FRAMES = 8;
+var RESIZE_THROTTLE_MS = 60;
+var SUPPRESSION_DELAY = 30;
+var MAX_RULER_PAIRS = 8;
+var MAX_RULER_LINES = MAX_RULER_PAIRS * 2;
+var RULER_SNAP_THRESHOLD = 6;
+var RULER_HIT_SIZE = 11;
+var CALIPER_PREFIX = "caliper-";
+function createFrequencyControlledReader(baseReader) {
+  let lastReadTime = 0;
+  let readInterval = DEFAULT_READ_INTERVAL;
+  const frameTimes = [];
+  let trailingTimeoutId = null;
+  let pendingTask = null;
+  function adaptToFrameRate(fps) {
+    readInterval = Math.ceil(1e3 / (fps / 2));
+  }
+  function recordFrameTime(timestamp) {
+    frameTimes.push(timestamp);
+    if (frameTimes.length > MAX_FRAME_TIMES) {
+      frameTimes.shift();
+    }
+    if (frameTimes.length >= 2) {
+      const last = frameTimes[frameTimes.length - 1];
+      const first = frameTimes[0];
+      if (last !== void 0 && first !== void 0) {
+        const duration = last - first;
+        const fps = frameTimes.length / duration * 1e3;
+        adaptToFrameRate(fps);
+      }
+    }
+  }
+  function executeNow() {
+    if (!pendingTask) return;
+    const { callback, urgent } = pendingTask;
+    pendingTask = null;
+    lastReadTime = performance.now();
+    baseReader.scheduleRead(callback, urgent);
+  }
+  function scheduleRead(callback, urgent = false) {
+    pendingTask = { callback, urgent };
+    const now = performance.now();
+    const timeSinceLastRead = now - lastReadTime;
+    if (urgent || timeSinceLastRead >= readInterval) {
+      if (trailingTimeoutId !== null) {
+        clearTimeout(trailingTimeoutId);
+        trailingTimeoutId = null;
+      }
+      executeNow();
+      return;
+    }
+    if (trailingTimeoutId === null) {
+      trailingTimeoutId = setTimeout(() => {
+        trailingTimeoutId = null;
+        executeNow();
+      }, readInterval - timeSinceLastRead);
+    }
+  }
+  function cancel() {
+    baseReader.cancel();
+    pendingTask = null;
+    if (trailingTimeoutId !== null) {
+      clearTimeout(trailingTimeoutId);
+      trailingTimeoutId = null;
+    }
+  }
+  return {
+    scheduleRead,
+    cancel,
+    adaptToFrameRate,
+    recordFrameTime
+  };
+}
+function createSuppressionDelegate(action, options = {}) {
+  const maxFrames = options.maxFrames ?? SUPPRESSION_MAX_FRAMES;
+  const delay = options.delay ?? SUPPRESSION_DELAY;
+  let suppressionFrames = 0;
+  let trailingTimer = null;
+  return {
+    execute(shouldSuppress, ...args) {
+      if (trailingTimer) {
+        clearTimeout(trailingTimer);
+        trailingTimer = null;
+      }
+      if (shouldSuppress && suppressionFrames < maxFrames) {
+        suppressionFrames++;
+        trailingTimer = setTimeout(() => {
+          suppressionFrames = 0;
+          action(...args);
+          trailingTimer = null;
+        }, delay);
+      } else {
+        suppressionFrames = 0;
+        action(...args);
+      }
+    },
+    cancel() {
+      if (trailingTimer) {
+        clearTimeout(trailingTimer);
+        trailingTimer = null;
+      }
+      suppressionFrames = 0;
+    }
+  };
+}
+function isVisible(element) {
+  if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
+    return false;
+  }
+  const style2 = window.getComputedStyle(element);
+  if (style2.display === "none") {
+    return false;
+  }
+  if (style2.visibility === "hidden") {
+    return false;
+  }
+  if (parseFloat(style2.opacity) === 0) {
+    return false;
+  }
+  return true;
+}
+function hasSize(element) {
+  if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+function isEligible(element) {
+  if (element.closest("[data-caliper-ignore]")) {
+    return false;
+  }
+  return isVisible(element) && hasSize(element);
+}
+var HYSTERESIS_THRESHOLD = 2;
+function isCaliperNode(node) {
+  if (!node || !(node instanceof Element)) return false;
+  return !!(node.closest("#caliper-overlay-root") || node.closest("[class*='caliper-']"));
+}
+function getElementAtPoint(x, y) {
+  const nodes = document.elementsFromPoint(x, y);
+  return nodes.find((node) => {
+    if (isCaliperNode(node)) return false;
+    return isEligible(node);
+  }) || null;
+}
+function getTopElementAtPoint(x, y) {
+  const node = document.elementFromPoint(x, y);
+  if (!node) return null;
+  if (isCaliperNode(node) || !isEligible(node)) return null;
+  return node;
+}
+function detectBestContext(selectedElement, cursorX, cursorY) {
+  let node = getElementAtPoint(cursorX, cursorY);
+  if (!node) return null;
+  while (node) {
+    if (node !== selectedElement) {
+      if (selectedElement.contains(node)) {
+        return { context: "child", element: node };
+      }
+      if (node.contains(selectedElement)) {
+        return { context: "parent", element: node };
+      }
+      return { context: "sibling", element: node };
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function getDistanceToEdge(x, y, rect) {
+  const dx = Math.min(Math.abs(x - rect.left), Math.abs(x - rect.right));
+  const dy = Math.min(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
+  return Math.min(dx, dy);
+}
+function resolveAmbiguousContext(selectedElement, cursorX, cursorY, previousContext, previousElement = null) {
+  const result = detectBestContext(selectedElement, cursorX, cursorY);
+  if (!result) return null;
+  const { context: winnerContext, element: winnerElement } = result;
+  if (previousContext && previousElement && (winnerContext !== previousContext || winnerElement !== previousElement)) {
+    const rect = previousElement.getBoundingClientRect();
+    const distance = getDistanceToEdge(cursorX, cursorY, rect);
+    if (distance <= HYSTERESIS_THRESHOLD) {
+      const isSwitchingToSpecific = (winnerContext === "sibling" || winnerContext === "child") && previousContext === "parent";
+      if (!isSwitchingToSpecific) {
+        return { context: previousContext, element: previousElement };
+      }
+    }
+  }
+  return result;
+}
+function getScrollAwareRect(rect) {
+  return new DOMRect(
+    rect.left + window.scrollX,
+    rect.top + window.scrollY,
+    rect.width,
+    rect.height
+  );
+}
+function isScrollContainer(element) {
+  if (!(element instanceof HTMLElement)) return false;
+  const style2 = window.getComputedStyle(element);
+  return /(auto|scroll)/.test(style2.overflow + style2.overflowY + style2.overflowX);
+}
+function getScrollHierarchy(element) {
+  const hierarchy = [];
+  let parent = element.parentElement;
+  while (parent && parent !== document.body) {
+    if (isScrollContainer(parent)) {
+      const el = parent;
+      hierarchy.push({
+        element: el,
+        initialScrollTop: el.scrollTop,
+        initialScrollLeft: el.scrollLeft,
+        containerRect: getScrollAwareRect(el.getBoundingClientRect())
+      });
+    }
+    parent = parent.parentElement;
+  }
+  return hierarchy;
+}
+function calculateStickyRef(scroll, naturalPos, threshold, containerDim, elementDim, isOppositeMode) {
+  const staticRel = naturalPos - scroll;
+  if (!isOppositeMode) {
+    let stuck = Math.max(staticRel, threshold);
+    stuck = Math.min(stuck, containerDim - elementDim);
+    return stuck;
+  } else {
+    let stuck = Math.min(staticRel, containerDim - elementDim - threshold);
+    stuck = Math.max(stuck, 0);
+    return stuck;
+  }
+}
+function calculateStickyDelta(currentScroll, initialScroll, naturalPos, threshold, containerDim, elementDim, isOppositeMode = false) {
+  if (threshold === null) return currentScroll - initialScroll;
+  const startRef = calculateStickyRef(
+    initialScroll,
+    naturalPos,
+    threshold,
+    containerDim,
+    elementDim,
+    isOppositeMode
+  );
+  const endRef = calculateStickyRef(
+    currentScroll,
+    naturalPos,
+    threshold,
+    containerDim,
+    elementDim,
+    isOppositeMode
+  );
+  return startRef - endRef;
+}
+function getTotalScrollDelta(hierarchy, position = "static", sticky, initWinX = 0, initWinY = 0) {
+  if (position === "fixed") {
+    return {
+      deltaX: initWinX - window.scrollX,
+      deltaY: initWinY - window.scrollY
+    };
+  }
+  let deltaX = 0;
+  let deltaY = 0;
+  for (let i = 0; i < hierarchy.length; i++) {
+    const s = hierarchy[i];
+    if (!s) continue;
+    let dX = s.element.scrollLeft - s.initialScrollLeft;
+    let dY = s.element.scrollTop - s.initialScrollTop;
+    if (i === 0 && position === "sticky" && sticky) {
+      dX = calculateStickyDelta(
+        s.element.scrollLeft,
+        s.initialScrollLeft,
+        sticky.naturalLeft,
+        sticky.left,
+        sticky.containerWidth,
+        sticky.elementWidth
+      );
+      dY = calculateStickyDelta(
+        s.element.scrollTop,
+        s.initialScrollTop,
+        sticky.naturalTop,
+        sticky.top,
+        sticky.containerHeight,
+        sticky.elementHeight
+      );
+    }
+    deltaX += dX;
+    deltaY += dY;
+  }
+  if (hierarchy.length === 0 && position === "sticky" && sticky) {
+    deltaX = calculateStickyDelta(
+      window.scrollX,
+      initWinX,
+      sticky.naturalLeft,
+      sticky.left,
+      window.innerWidth,
+      sticky.elementWidth
+    );
+    deltaY = calculateStickyDelta(
+      window.scrollY,
+      initWinY,
+      sticky.naturalTop,
+      sticky.top,
+      window.innerHeight,
+      sticky.elementHeight
+    );
+  }
+  return { deltaX, deltaY };
+}
+function getCommonVisibilityWindow(h1, h2, el1, el2) {
+  const h1Map = /* @__PURE__ */ new Map();
+  for (let i = 0; i < h1.length; i++) {
+    const item = h1[i];
+    if (item) h1Map.set(item.element, i);
+  }
+  const h2Map = /* @__PURE__ */ new Map();
+  for (let i = 0; i < h2.length; i++) {
+    const item = h2[i];
+    if (item) h2Map.set(item.element, i);
+  }
+  const commonElements = [];
+  for (let i = 0; i < h1.length; i++) {
+    const s = h1[i];
+    if (s && h2Map.has(s.element)) {
+      commonElements.push(s);
+    }
+  }
+  if (isScrollContainer(el2)) {
+    const sIdx = h1Map.get(el2);
+    if (sIdx !== void 0) {
+      const s = h1[sIdx];
+      if (s && !commonElements.includes(s)) commonElements.push(s);
+    }
+  }
+  if (isScrollContainer(el1)) {
+    const sIdx = h2Map.get(el1);
+    if (sIdx !== void 0) {
+      const s = h2[sIdx];
+      if (s && !commonElements.includes(s)) commonElements.push(s);
+    }
+  }
+  if (commonElements.length === 0) {
+    return { minX: -Infinity, maxX: Infinity, minY: -Infinity, maxY: Infinity };
+  }
+  let minX = -Infinity;
+  let maxX = Infinity;
+  let minY = -Infinity;
+  let maxY = Infinity;
+  const getSuffixSums = (h) => {
+    const sumsX = new Float64Array(h.length + 1);
+    const sumsY = new Float64Array(h.length + 1);
+    for (let i = h.length - 1; i >= 0; i--) {
+      const item = h[i];
+      if (item) {
+        sumsX[i] = (sumsX[i + 1] ?? 0) + (item.element.scrollLeft - item.initialScrollLeft);
+        sumsY[i] = (sumsY[i + 1] ?? 0) + (item.element.scrollTop - item.initialScrollTop);
+      }
+    }
+    return { sumsX, sumsY };
+  };
+  const h1Suffix = getSuffixSums(h1);
+  const h2Suffix = getSuffixSums(h2);
+  for (let i = 0; i < commonElements.length; i++) {
+    const s = commonElements[i];
+    if (!s) continue;
+    const isH1 = h1Map.has(s.element);
+    const suffix = isH1 ? h1Suffix : h2Suffix;
+    const sIndex = isH1 ? h1Map.get(s.element) : h2Map.get(s.element);
+    if (sIndex === void 0 || sIndex === -1) continue;
+    const ancestorDeltaX = suffix.sumsX[sIndex + 1] ?? 0;
+    const ancestorDeltaY = suffix.sumsY[sIndex + 1] ?? 0;
+    const cLiveLeft = s.containerRect.left - ancestorDeltaX;
+    const cLiveTop = s.containerRect.top - ancestorDeltaY;
+    const clipL = cLiveLeft + s.element.clientLeft;
+    const clipT = cLiveTop + s.element.clientTop;
+    const clipR = clipL + s.element.clientWidth;
+    const clipB = clipT + s.element.clientHeight;
+    if (minX === -Infinity) {
+      minX = clipL;
+      maxX = clipR;
+      minY = clipT;
+      maxY = clipB;
+    } else {
+      minX = Math.max(minX, clipL);
+      maxX = Math.min(maxX, clipR);
+      minY = Math.max(minY, clipT);
+      maxY = Math.min(maxY, clipB);
+    }
+  }
+  return { minX, maxX, minY, maxY };
+}
+function getLiveGeometry(stableRect, hierarchy, position = "static", sticky, initWinX = 0, initWinY = 0) {
+  if (!stableRect) return null;
+  const { deltaX, deltaY } = getTotalScrollDelta(hierarchy, position, sticky, initWinX, initWinY);
+  let vMinX = -Infinity;
+  let vMaxX = Infinity;
+  let vMinY = -Infinity;
+  let vMaxY = Infinity;
+  const len = hierarchy.length;
+  const suffixX = new Float64Array(len + 1);
+  const suffixY = new Float64Array(len + 1);
+  for (let i = len - 1; i >= 0; i--) {
+    const item = hierarchy[i];
+    if (item) {
+      suffixX[i] = (suffixX[i + 1] ?? 0) + (item.element.scrollLeft - item.initialScrollLeft);
+      suffixY[i] = (suffixY[i + 1] ?? 0) + (item.element.scrollTop - item.initialScrollTop);
+    }
+  }
+  for (let i = 0; i < len; i++) {
+    const s = hierarchy[i];
+    if (!s) continue;
+    const ancestorDeltaX = suffixX[i + 1] ?? 0;
+    const ancestorDeltaY = suffixY[i + 1] ?? 0;
+    const cLiveLeft = s.containerRect.left - ancestorDeltaX;
+    const cLiveTop = s.containerRect.top - ancestorDeltaY;
+    const clipL = cLiveLeft + s.element.clientLeft;
+    const clipT = cLiveTop + s.element.clientTop;
+    if (vMinX === -Infinity) {
+      vMinX = clipL;
+      vMaxX = clipL + s.element.clientWidth;
+      vMinY = clipT;
+      vMaxY = clipT + s.element.clientHeight;
+    } else {
+      vMinX = Math.max(vMinX, clipL);
+      vMaxX = Math.min(vMaxX, clipL + s.element.clientWidth);
+      vMinY = Math.max(vMinY, clipT);
+      vMaxY = Math.min(vMaxY, clipT + s.element.clientHeight);
+    }
+  }
+  const left = stableRect.left - deltaX;
+  const top = stableRect.top - deltaY;
+  const width = stableRect.width;
+  const height = stableRect.height;
+  const isHidden = vMinX !== -Infinity && (top + height < vMinY || top > vMaxY || left + width < vMinX || left > vMaxX);
+  const t = Math.max(0, vMinY - top);
+  const l = Math.max(0, vMinX - left);
+  const b = Math.max(0, top + height - vMaxY);
+  const r = Math.max(0, left + width - vMaxX);
+  return {
+    left,
+    top,
+    width,
+    height,
+    clipPath: vMinX === -Infinity ? "none" : `inset(${t}px ${r}px ${b}px ${l}px)`,
+    isHidden,
+    visibleMinX: vMinX,
+    visibleMaxX: vMaxX,
+    visibleMinY: vMinY,
+    visibleMaxY: vMaxY
+  };
+}
+function parseStickyOffset(val) {
+  if (val === "auto") return null;
+  const parsed = parseFloat(val);
+  return isNaN(parsed) ? null : parsed;
+}
+function getInheritedPositionMode(element) {
+  let curr = element;
+  while (curr && curr !== document.body) {
+    if (!(curr instanceof HTMLElement)) {
+      curr = curr.parentElement;
+      continue;
+    }
+    const style2 = window.getComputedStyle(curr);
+    if (style2.position === "fixed") return { mode: "fixed", anchor: curr };
+    if (style2.position === "sticky") return { mode: "sticky", anchor: curr };
+    curr = curr.parentElement;
+  }
+  return { mode: "static", anchor: null };
+}
+function getDistanceFromContainer(target, container) {
+  let x = 0;
+  let y = 0;
+  let current = target;
+  while (current && current !== container && current.offsetParent) {
+    x += current.offsetLeft;
+    y += current.offsetTop;
+    const parent = current.offsetParent;
+    x += parent.clientLeft || 0;
+    y += parent.clientTop || 0;
+    current = parent;
+  }
+  if (container instanceof HTMLElement) {
+    x -= container.clientLeft || 0;
+    y -= container.clientTop || 0;
+  }
+  return { x, y };
+}
+function deduceGeometry(element) {
+  const rect = element.getBoundingClientRect();
+  const scrollHierarchy = getScrollHierarchy(element);
+  const initialWindowX = window.scrollX;
+  const initialWindowY = window.scrollY;
+  const { mode: position, anchor } = getInheritedPositionMode(element);
+  let stickyConfig;
+  if (position === "sticky" && anchor) {
+    const style2 = window.getComputedStyle(anchor);
+    const parent = getScrollHierarchy(anchor)[0]?.element || document.documentElement;
+    const isDoc = parent === document.documentElement;
+    const anchorRect = anchor.getBoundingClientRect();
+    const childRelTop = rect.top - anchorRect.top;
+    const childRelLeft = rect.left - anchorRect.left;
+    const childRelBottom = anchorRect.bottom - rect.bottom;
+    const childRelRight = anchorRect.right - rect.right;
+    const t = parseStickyOffset(style2.top);
+    const b = parseStickyOffset(style2.bottom);
+    const l = parseStickyOffset(style2.left);
+    const r = parseStickyOffset(style2.right);
+    const naturalPos = getDistanceFromContainer(anchor, parent);
+    stickyConfig = {
+      top: t === null ? null : t + childRelTop,
+      bottom: b === null ? null : b + childRelBottom,
+      left: l === null ? null : l + childRelLeft,
+      right: r === null ? null : r + childRelRight,
+      naturalTop: naturalPos.y + childRelTop,
+      naturalLeft: naturalPos.x + childRelLeft,
+      containerWidth: isDoc ? window.innerWidth : parent.clientWidth,
+      containerHeight: isDoc ? window.innerHeight : parent.clientHeight,
+      elementWidth: anchorRect.width,
+      elementHeight: anchorRect.height
+    };
+  }
+  return {
+    rect: getScrollAwareRect(rect),
+    scrollHierarchy,
+    position,
+    stickyConfig,
+    initialWindowX,
+    initialWindowY
+  };
+}
+function clampPointToGeometry(pt, geo, viewport) {
+  if (!geo) return pt;
+  return {
+    x: Math.max(
+      geo.visibleMinX - viewport.scrollX,
+      Math.min(pt.x, geo.visibleMaxX - viewport.scrollX)
+    ),
+    y: Math.max(
+      geo.visibleMinY - viewport.scrollY,
+      Math.min(pt.y, geo.visibleMaxY - viewport.scrollY)
+    )
+  };
+}
+function createMeasurementLines(context, primary, secondary) {
+  if (!context || !secondary) {
+    return [];
+  }
+  const lines = [];
+  if (context === "sibling") {
+    const distance = calculateSiblingDistance(primary, secondary);
+    lines.push(distance);
+  } else if (context === "parent" || context === "child") {
+    const padding = calculatePaddingLines(primary, secondary, context);
+    lines.push(...padding);
+  }
+  return lines;
+}
+function calculateSiblingDistance(primary, sibling) {
+  const overlapXStart = Math.max(primary.left, sibling.left);
+  const overlapXEnd = Math.min(primary.right, sibling.right);
+  const hasOverlapX = overlapXEnd > overlapXStart;
+  const overlapYStart = Math.max(primary.top, sibling.top);
+  const overlapYEnd = Math.min(primary.bottom, sibling.bottom);
+  const hasOverlapY = overlapYEnd > overlapYStart;
+  const syncBase = { startSync: "primary", endSync: "secondary" };
+  if (hasOverlapX && !hasOverlapY) {
+    const centerX = (overlapXStart + overlapXEnd) / 2;
+    const distBtoT = Math.abs(sibling.top - primary.bottom);
+    const distTtoB = Math.abs(primary.top - sibling.bottom);
+    const startY = distBtoT < distTtoB ? primary.bottom : primary.top;
+    const endY = distBtoT < distTtoB ? sibling.top : sibling.bottom;
+    return {
+      type: "distance",
+      value: Math.min(distBtoT, distTtoB),
+      start: { x: centerX, y: startY },
+      end: { x: centerX, y: endY },
+      ...syncBase
+    };
+  }
+  if (hasOverlapY && !hasOverlapX) {
+    const centerY = (overlapYStart + overlapYEnd) / 2;
+    const distRtoL = Math.abs(sibling.left - primary.right);
+    const distLtoR = Math.abs(primary.left - sibling.right);
+    const startX = distRtoL < distLtoR ? primary.right : primary.left;
+    const endX = distRtoL < distLtoR ? sibling.left : sibling.right;
+    return {
+      type: "distance",
+      value: Math.min(distRtoL, distLtoR),
+      start: { x: startX, y: centerY },
+      end: { x: endX, y: centerY },
+      ...syncBase
+    };
+  }
+  const pFaces = [
+    { x: (primary.left + primary.right) / 2, y: primary.top },
+    { x: (primary.left + primary.right) / 2, y: primary.bottom }
+  ];
+  const sFaces = [
+    { x: (sibling.left + sibling.right) / 2, y: sibling.top },
+    { x: (sibling.left + sibling.right) / 2, y: sibling.bottom }
+  ];
+  let minD2 = Infinity;
+  let bestP = pFaces[0];
+  let bestS = sFaces[0];
+  for (const p of pFaces) {
+    for (const s of sFaces) {
+      const dx = p.x - s.x;
+      const dy = p.y - s.y;
+      const d2 = dx * dx + dy * dy;
+      if (d2 < minD2) {
+        minD2 = d2;
+        bestP = p;
+        bestS = s;
+      }
+    }
+  }
+  const pFace = bestP ?? pFaces[0];
+  const sFace = bestS ?? sFaces[0];
+  return {
+    type: "distance",
+    value: Math.sqrt(minD2),
+    start: { x: pFace.x, y: pFace.y },
+    end: { x: sFace.x, y: sFace.y },
+    ...syncBase
+  };
+}
+function calculatePaddingLines(primary, container, context) {
+  if (context === "parent") {
+    return [
+      {
+        type: "left",
+        value: Math.abs(primary.left - container.left),
+        start: { x: container.left, y: primary.top + primary.height / 2 },
+        end: { x: primary.left, y: primary.top + primary.height / 2 },
+        startSync: "secondary",
+        endSync: "primary"
+      },
+      {
+        type: "top",
+        value: Math.abs(primary.top - container.top),
+        start: { x: primary.left + primary.width / 2, y: container.top },
+        end: { x: primary.left + primary.width / 2, y: primary.top },
+        startSync: "secondary",
+        endSync: "primary"
+      },
+      {
+        type: "right",
+        value: Math.abs(container.right - primary.right),
+        start: { x: primary.right, y: primary.top + primary.height / 2 },
+        end: { x: container.right, y: primary.top + primary.height / 2 },
+        startSync: "primary",
+        endSync: "secondary"
+      },
+      {
+        type: "bottom",
+        value: Math.abs(container.bottom - primary.bottom),
+        start: { x: primary.left + primary.width / 2, y: primary.bottom },
+        end: { x: primary.left + primary.width / 2, y: container.bottom },
+        startSync: "primary",
+        endSync: "secondary"
+      }
+    ];
+  } else {
+    return [
+      {
+        type: "left",
+        value: Math.abs(container.left - primary.left),
+        start: { x: primary.left, y: container.top + container.height / 2 },
+        end: { x: container.left, y: container.top + container.height / 2 },
+        startSync: "primary",
+        endSync: "secondary"
+      },
+      {
+        type: "top",
+        value: Math.abs(container.top - primary.top),
+        start: { x: container.left + container.width / 2, y: primary.top },
+        end: { x: container.left + container.width / 2, y: container.top },
+        startSync: "primary",
+        endSync: "secondary"
+      },
+      {
+        type: "right",
+        value: Math.abs(primary.right - container.right),
+        start: { x: container.right, y: container.top + container.height / 2 },
+        end: { x: primary.right, y: container.top + container.height / 2 },
+        startSync: "secondary",
+        endSync: "primary"
+      },
+      {
+        type: "bottom",
+        value: Math.abs(primary.bottom - container.bottom),
+        start: { x: container.left + container.width / 2, y: container.bottom },
+        end: { x: container.left + container.width / 2, y: primary.bottom },
+        startSync: "secondary",
+        endSync: "primary"
+      }
+    ];
+  }
+}
+function getLivePoint(pt, owner, line, primaryDelta, secondaryDelta, scrollX = 0, scrollY = 0) {
+  const syncX = owner === "secondary" ? secondaryDelta : primaryDelta;
+  const syncY = owner === "secondary" ? secondaryDelta : primaryDelta;
+  return {
+    x: pt.x - (syncX?.deltaX ?? 0) - scrollX,
+    y: pt.y - (syncY?.deltaY ?? 0) - scrollY
+  };
+}
+function getLiveLineValue(line, result) {
+  if (!result) {
+    return line.value;
+  }
+  const primaryDelta = getTotalScrollDelta(
+    result.primaryHierarchy,
+    result.primaryPosition,
+    result.primarySticky,
+    result.primaryWinX,
+    result.primaryWinY
+  );
+  const secondaryDelta = getTotalScrollDelta(
+    result.secondaryHierarchy,
+    result.secondaryPosition,
+    result.secondarySticky,
+    result.secondaryWinX,
+    result.secondaryWinY
+  );
+  const startPoint = getLivePoint(line.start, line.startSync, line, primaryDelta, secondaryDelta);
+  const endPoint = getLivePoint(line.end, line.endSync, line, primaryDelta, secondaryDelta);
+  const dx = Math.abs(startPoint.x - endPoint.x);
+  const dy = Math.abs(startPoint.y - endPoint.y);
+  if (line.type === "top" || line.type === "bottom") {
+    return dy;
+  }
+  if (line.type === "left" || line.type === "right") {
+    return dx;
+  }
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function createMeasurement(selectedElement, cursorX, cursorY, previousContext = null, previousElement = null) {
+  const result = resolveAmbiguousContext(
+    selectedElement,
+    cursorX,
+    cursorY,
+    previousContext,
+    previousElement
+  );
+  if (!result) {
+    return null;
+  }
+  const { context, element: secondaryElement } = result;
+  if (secondaryElement === selectedElement) return null;
+  const primaryGeom = deduceGeometry(selectedElement);
+  const secondaryGeom = deduceGeometry(secondaryElement);
+  const primary = primaryGeom.rect;
+  const secondary = secondaryGeom.rect;
+  const lines = createMeasurementLines(context, primary, secondary);
+  return {
+    element: secondaryElement,
+    result: {
+      context,
+      lines,
+      primary,
+      secondary,
+      timestamp: performance.now(),
+      primaryHierarchy: primaryGeom.scrollHierarchy,
+      secondaryHierarchy: secondaryGeom.scrollHierarchy,
+      secondaryElement,
+      primaryPosition: primaryGeom.position,
+      secondaryPosition: secondaryGeom.position,
+      primarySticky: primaryGeom.stickyConfig,
+      secondarySticky: secondaryGeom.stickyConfig,
+      primaryWinX: primaryGeom.initialWindowX,
+      primaryWinY: primaryGeom.initialWindowY,
+      secondaryWinX: secondaryGeom.initialWindowX,
+      secondaryWinY: secondaryGeom.initialWindowY
+    }
+  };
+}
+function createStateMachine() {
+  let state = "IDLE";
+  function getState() {
+    return state;
+  }
+  function transitionTo(newState) {
+    const validTransitions = {
+      IDLE: ["ARMED", "FROZEN"],
+      ARMED: ["MEASURING", "FROZEN", "IDLE"],
+      MEASURING: ["FROZEN", "IDLE"],
+      FROZEN: ["MEASURING", "IDLE"]
+    };
+    const allowed = validTransitions[state];
+    if (allowed && allowed.includes(newState)) {
+      state = newState;
+      return true;
+    }
+    return false;
+  }
+  function isIdle() {
+    return state === "IDLE";
+  }
+  function isArmed() {
+    return state === "ARMED";
+  }
+  function isMeasuring() {
+    return state === "MEASURING";
+  }
+  function isFrozen() {
+    return state === "FROZEN";
+  }
+  return {
+    getState,
+    transitionTo,
+    isIdle,
+    isArmed,
+    isMeasuring,
+    isFrozen
+  };
+}
+function createCalculatorState() {
+  let state = {
+    baseValue: 0,
+    operation: null,
+    inputValue: "",
+    result: null,
+    isActive: false
+  };
+  function calculate2() {
+    const val = state.inputValue === "" ? "0" : state.inputValue;
+    const inputNum = parseFloat(val);
+    if (isNaN(inputNum)) {
+      return null;
+    }
+    switch (state.operation) {
+      case "+":
+        return state.baseValue + inputNum;
+      case "-":
+        return state.baseValue - inputNum;
+      case "*":
+        return state.baseValue * inputNum;
+      case "/":
+        return inputNum !== 0 ? state.baseValue / inputNum : null;
+      default:
+        return null;
+    }
+  }
+  function dispatch(action) {
+    switch (action.type) {
+      case "OPEN":
+        state = {
+          baseValue: action.baseValue,
+          operation: null,
+          inputValue: "",
+          result: null,
+          isActive: true
+        };
+        break;
+      case "SYNC_VALUE":
+        if (state.isActive && state.operation === null) {
+          state = {
+            ...state,
+            baseValue: action.value
+          };
+        }
+        break;
+      case "INPUT_DIGIT":
+        if (!state.isActive || !state.operation) return state;
+        const isDot = action.digit === ".";
+        const alreadyHasDot = (state.inputValue || "").includes(".");
+        if (isDot && alreadyHasDot) return state;
+        if (state.result !== null) {
+          state = {
+            ...state,
+            inputValue: isDot ? "0." : action.digit,
+            result: null
+          };
+        } else {
+          state = {
+            ...state,
+            inputValue: state.inputValue === "0" && !isDot ? action.digit : state.inputValue + action.digit
+          };
+        }
+        break;
+      case "INPUT_OPERATION":
+        if (!state.isActive) return state;
+        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;
+          state = {
+            baseValue: newBase,
+            operation: action.operation,
+            inputValue: "",
+            result: null,
+            isActive: true
+          };
+        } else {
+          state = {
+            ...state,
+            operation: action.operation,
+            inputValue: "",
+            result: null
+          };
+        }
+        break;
+      case "BACKSPACE":
+        if (!state.isActive) return state;
+        if (state.result !== null) {
+          state = {
+            ...state,
+            result: null
+          };
+        } else if (state.inputValue.length > 0) {
+          state = {
+            ...state,
+            inputValue: state.inputValue.slice(0, -1)
+          };
+        } else if (state.operation) {
+          state = {
+            ...state,
+            operation: null
+          };
+        } else {
+          state = {
+            ...state,
+            isActive: false
+          };
+        }
+        break;
+      case "DELETE":
+        if (!state.isActive) return state;
+        state = {
+          baseValue: state.baseValue,
+          operation: null,
+          inputValue: "",
+          result: null,
+          isActive: false
+        };
+        break;
+      case "ENTER":
+        if (!state.isActive || !state.operation) {
+          return state;
+        }
+        const result = calculate2();
+        state = {
+          ...state,
+          result
+        };
+        break;
+      case "CLOSE":
+        state = {
+          baseValue: 0,
+          operation: null,
+          inputValue: "",
+          result: null,
+          isActive: false
+        };
+        break;
+    }
+    return state;
+  }
+  function getState() {
+    return { ...state };
+  }
+  return { getState, dispatch, calculate: calculate2 };
+}
+function createCalculatorIntegration() {
+  const calculator = createCalculatorState();
+  function open(baseValue) {
+    calculator.dispatch({ type: "OPEN", baseValue });
+  }
+  function handleInput(key) {
+    if (/^[0-9.]$/.test(key)) {
+      calculator.dispatch({ type: "INPUT_DIGIT", digit: key });
+    } else if (/^[+\-*/]$/.test(key)) {
+      calculator.dispatch({
+        type: "INPUT_OPERATION",
+        operation: key
+      });
+    }
+  }
+  function handleBackspace() {
+    calculator.dispatch({ type: "BACKSPACE" });
+  }
+  function handleDelete() {
+    calculator.dispatch({ type: "DELETE" });
+  }
+  function handleEnter() {
+    calculator.dispatch({ type: "ENTER" });
+  }
+  function close() {
+    calculator.dispatch({ type: "CLOSE" });
+  }
+  function syncValue(value) {
+    calculator.dispatch({ type: "SYNC_VALUE", value });
+  }
+  function getResult() {
+    const state = calculator.getState();
+    return state.result;
+  }
+  return {
+    getState: calculator.getState,
+    open,
+    handleInput,
+    handleBackspace,
+    handleDelete,
+    handleEnter,
+    close,
+    syncValue,
+    getResult
+  };
+}
+function createMeasurementSystem() {
+  const baseReader = createReader();
+  const reader = createFrequencyControlledReader(baseReader);
+  const stateMachine = createStateMachine();
+  const calculator = createCalculatorIntegration();
+  const listeners = /* @__PURE__ */ new Set();
+  let currentResult = null;
+  let previousContext = null;
+  let previousElement = null;
+  function notifyListeners() {
+    listeners.forEach((listener) => listener());
+  }
+  function measure(selectedElement, cursor) {
+    stateMachine.transitionTo("ARMED");
+    reader.scheduleRead(() => {
+      performance.now();
+      const measurement = createMeasurement(
+        selectedElement,
+        cursor.x,
+        cursor.y,
+        previousContext,
+        previousElement
+      );
+      if (measurement) {
+        const { result, element } = measurement;
+        currentResult = result;
+        previousContext = result.context;
+        previousElement = element;
+        stateMachine.transitionTo("MEASURING");
+        notifyListeners();
+      }
+    });
+  }
+  function freeze() {
+    const state = stateMachine.getState();
+    if (state === "MEASURING" || state === "IDLE" || state === "ARMED") {
+      stateMachine.transitionTo("FROZEN");
+      notifyListeners();
+    }
+  }
+  function unfreeze(isAltDown) {
+    if (stateMachine.isFrozen()) {
+      stateMachine.transitionTo(isAltDown ? "MEASURING" : "IDLE");
+      notifyListeners();
+    }
+  }
+  function abort() {
+    reader.cancel();
+    stateMachine.transitionTo("IDLE");
+    calculator.close();
+    currentResult = null;
+    previousContext = null;
+    previousElement = null;
+    notifyListeners();
+  }
+  function stop() {
+    reader.cancel();
+    if (stateMachine.getState() === "MEASURING") {
+      stateMachine.transitionTo("IDLE");
+      notifyListeners();
+    }
+  }
+  function cleanup() {
+    abort();
+    listeners.clear();
+    currentResult = null;
+    previousContext = null;
+    previousElement = null;
+  }
+  function getState() {
+    return stateMachine.getState();
+  }
+  function getCurrentResult() {
+    return currentResult;
+  }
+  function getCalculator() {
+    return calculator;
+  }
+  function onStateChange(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  function updatePrimaryRect(rect) {
+    if (!currentResult) return;
+    const newPrimary = new DOMRect(
+      rect.left + window.scrollX,
+      rect.top + window.scrollY,
+      rect.width,
+      rect.height
+    );
+    currentResult = {
+      ...currentResult,
+      primary: newPrimary,
+      primaryWinX: window.scrollX,
+      primaryWinY: window.scrollY,
+      lines: createMeasurementLines(currentResult.context, newPrimary, currentResult.secondary)
+    };
+    notifyListeners();
+  }
+  function updateSecondaryRect(rect) {
+    if (!currentResult) return;
+    const newSecondary = new DOMRect(
+      rect.left + window.scrollX,
+      rect.top + window.scrollY,
+      rect.width,
+      rect.height
+    );
+    currentResult = {
+      ...currentResult,
+      secondary: newSecondary,
+      secondaryWinX: window.scrollX,
+      secondaryWinY: window.scrollY,
+      lines: createMeasurementLines(currentResult.context, currentResult.primary, newSecondary)
+    };
+    notifyListeners();
+  }
+  return {
+    measure,
+    abort,
+    stop,
+    freeze,
+    unfreeze,
+    cleanup,
+    getState,
+    getCurrentResult,
+    getCalculator,
+    onStateChange,
+    updatePrimaryRect,
+    updateSecondaryRect
+  };
+}
+function createSelectionSystem() {
+  let selectedElement = null;
+  let selectedRect = null;
+  let scrollHierarchy = [];
+  let position = "static";
+  let stickyConfig;
+  let initialWindowX = 0;
+  let initialWindowY = 0;
+  const updateListeners = /* @__PURE__ */ new Set();
+  function getMetadata() {
+    return {
+      element: selectedElement,
+      rect: selectedRect,
+      scrollHierarchy,
+      position,
+      stickyConfig,
+      initialWindowX,
+      initialWindowY
+    };
+  }
+  function notifyListeners() {
+    const metadata = getMetadata();
+    updateListeners.forEach((listener) => listener(metadata));
+  }
+  function select(element) {
+    if (selectedElement === element && (element !== null || selectedRect === null)) return;
+    selectedElement = element;
+    if (element) {
+      requestAnimationFrame(() => {
+        Promise.resolve().then(() => {
+          if (selectedElement === element) {
+            const geometry = deduceGeometry(element);
+            selectedRect = geometry.rect;
+            scrollHierarchy = geometry.scrollHierarchy;
+            position = geometry.position;
+            stickyConfig = geometry.stickyConfig;
+            initialWindowX = geometry.initialWindowX;
+            initialWindowY = geometry.initialWindowY;
+            notifyListeners();
+          }
+        });
+      });
+    } else {
+      selectedRect = null;
+      scrollHierarchy = [];
+      position = "static";
+      stickyConfig = void 0;
+      initialWindowX = 0;
+      initialWindowY = 0;
+      notifyListeners();
+    }
+  }
+  function getSelected() {
+    return selectedElement;
+  }
+  function getSelectedRect() {
+    return selectedRect;
+  }
+  function clear() {
+    select(null);
+  }
+  function onUpdate(callback) {
+    updateListeners.add(callback);
+    return () => {
+      updateListeners.delete(callback);
+    };
+  }
+  function updateRect(rect) {
+    if (!selectedElement) return;
+    selectedRect = new DOMRect(
+      rect.left + window.scrollX,
+      rect.top + window.scrollY,
+      rect.width,
+      rect.height
+    );
+    initialWindowX = window.scrollX;
+    initialWindowY = window.scrollY;
+    notifyListeners();
+  }
+  return {
+    select,
+    getSelected,
+    getSelectedRect,
+    getMetadata,
+    clear,
+    onUpdate,
+    updateRect
+  };
+}
+function createProjectionSystem() {
+  let state = {
+    direction: null,
+    value: "",
+    element: null
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    listeners.forEach((l) => l({ ...state }));
+  };
+  return {
+    getState: () => ({ ...state }),
+    setDirection: (direction) => {
+      state.direction = direction;
+      notify();
+    },
+    setElement: (element) => {
+      state.element = element;
+      notify();
+    },
+    appendValue: (char, max) => {
+      if (/^[0-9.]$/.test(char)) {
+        const isDot = char === ".";
+        const alreadyHasDot = state.value.includes(".");
+        if (isDot && alreadyHasDot) return;
+        const newValueStr = state.value + char;
+        const newValueNum = parseFloat(newValueStr) || 0;
+        if (max !== void 0 && newValueNum > max) {
+          state.value = Math.floor(max).toString();
+        } else {
+          state.value = newValueStr;
+        }
+        notify();
+      }
+    },
+    capValue: (max) => {
+      const currentVal = parseFloat(state.value) || 0;
+      if (currentVal > max) {
+        state.value = Math.floor(max).toString();
+        notify();
+      }
+    },
+    backspace: () => {
+      if (state.value.length > 0) {
+        state.value = state.value.slice(0, -1);
+        notify();
+      } else if (state.direction) {
+        state.direction = null;
+        notify();
+      }
+    },
+    clear: () => {
+      state = { direction: null, value: "", element: null };
+      notify();
+    },
+    onUpdate: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+function createRulerSystem() {
+  let state = {
+    lines: []
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    listeners.forEach((l) => l({ lines: [...state.lines] }));
+  };
+  return {
+    getState: () => ({ lines: [...state.lines] }),
+    addPair: (x, y) => {
+      if (state.lines.length >= MAX_RULER_LINES) return null;
+      const hLine = {
+        id: `ruler-h-${Math.random().toString(36).slice(2, 9)}`,
+        type: "horizontal",
+        position: y
+      };
+      const vLine = {
+        id: `ruler-v-${Math.random().toString(36).slice(2, 9)}`,
+        type: "vertical",
+        position: x
+      };
+      state.lines.push(hLine, vLine);
+      notify();
+      return vLine.id;
+    },
+    updateLine: (id, position) => {
+      const index = state.lines.findIndex((l) => l.id === id);
+      if (index !== -1 && state.lines[index]) {
+        state.lines[index] = { ...state.lines[index], position };
+        notify();
+      }
+    },
+    removeLine: (id) => {
+      state.lines = state.lines.filter((l) => l.id !== id);
+      notify();
+    },
+    clear: () => {
+      state.lines = [];
+      notify();
+    },
+    onUpdate: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var IS_BROWSER = typeof window !== "undefined";
+function detectOS() {
+  if (!IS_BROWSER) return "other";
+  const platform = navigator.userAgentData?.platform;
+  if (platform) {
+    switch (platform) {
+      case "macOS":
+        return "macos";
+      case "iOS":
+        return "ios";
+      case "Windows":
+        return "windows";
+      case "Android":
+        return "android";
+      case "Linux":
+        return "linux";
+    }
+  }
+  const ua = navigator.userAgent;
+  if (/iPhone|iPad|iPod/.test(ua)) return "ios";
+  if (/Macintosh/.test(ua)) return "macos";
+  if (/Windows/.test(ua)) return "windows";
+  if (/Android/.test(ua)) return "android";
+  if (/Linux/.test(ua)) return "linux";
+  return "other";
+}
+var OS_NAME = detectOS();
+var IS_APPLE = OS_NAME === "macos" || OS_NAME === "ios";
+var OS = {
+  IS_BROWSER,
+  NAME: OS_NAME,
+  IS_MAC: OS_NAME === "macos",
+  IS_IOS: OS_NAME === "ios",
+  IS_APPLE,
+  getControlKey: () => IS_APPLE ? "Meta" : "Control"
+};
+var DEFAULT_COMMANDS = {
+  activate: "Alt",
+  freeze: " ",
+  select: OS.getControlKey(),
+  clear: "Escape",
+  calculator: {
+    top: "t",
+    right: "r",
+    bottom: "b",
+    left: "l",
+    distance: "g"
+  },
+  projection: {
+    top: "w",
+    left: "a",
+    bottom: "s",
+    right: "d"
+  },
+  ruler: "r",
+  selectionHoldDuration: 250
+};
+var DEFAULT_THEME = {
+  primary: "rgba(24, 160, 251, 1)",
+  secondary: "rgba(242, 78, 30, 1)",
+  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",
+  projection: "rgba(155, 81, 224, 1)",
+  ruler: "rgba(24, 160, 251, 1)"
+};
+var DEFAULT_ANIMATION = {
+  enabled: true,
+  lerpFactor: 0.25
+};
+function parseNumber(value, defaultValue) {
+  if (value === void 0 || value === null || value === "") return defaultValue;
+  const num = Number(value);
+  return isFinite(num) && !isNaN(num) ? num : defaultValue;
+}
+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.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.ruler) root.style.setProperty("--caliper-ruler", theme.ruler);
+}
+function mergeCommands(userCommands) {
+  return {
+    activate: userCommands?.activate ?? DEFAULT_COMMANDS.activate,
+    freeze: userCommands?.freeze ?? DEFAULT_COMMANDS.freeze,
+    select: userCommands?.select ?? DEFAULT_COMMANDS.select,
+    clear: userCommands?.clear ?? DEFAULT_COMMANDS.clear,
+    calculator: {
+      top: userCommands?.calculator?.top ?? DEFAULT_COMMANDS.calculator.top,
+      right: userCommands?.calculator?.right ?? DEFAULT_COMMANDS.calculator.right,
+      bottom: userCommands?.calculator?.bottom ?? DEFAULT_COMMANDS.calculator.bottom,
+      left: userCommands?.calculator?.left ?? DEFAULT_COMMANDS.calculator.left,
+      distance: userCommands?.calculator?.distance ?? DEFAULT_COMMANDS.calculator.distance
+    },
+    projection: {
+      top: userCommands?.projection?.top ?? DEFAULT_COMMANDS.projection.top,
+      left: userCommands?.projection?.left ?? DEFAULT_COMMANDS.projection.left,
+      bottom: userCommands?.projection?.bottom ?? DEFAULT_COMMANDS.projection.bottom,
+      right: userCommands?.projection?.right ?? DEFAULT_COMMANDS.projection.right
+    },
+    ruler: userCommands?.ruler ?? DEFAULT_COMMANDS.ruler,
+    selectionHoldDuration: parseNumber(
+      userCommands?.selectionHoldDuration,
+      DEFAULT_COMMANDS.selectionHoldDuration
+    )
+  };
+}
+function mergeAnimation(userAnimation) {
+  return {
+    enabled: userAnimation?.enabled ?? DEFAULT_ANIMATION.enabled,
+    lerpFactor: parseNumber(userAnimation?.lerpFactor, DEFAULT_ANIMATION.lerpFactor)
+  };
+}
+function getConfig() {
+  if (typeof window !== "undefined") {
+    const windowConfig = window.__CALIPER_CONFIG__ ?? {};
+    const currentScript = typeof document !== "undefined" ? document.currentScript : null;
+    const dataConfig = currentScript?.getAttribute("data-config") || (typeof document !== "undefined" ? document.querySelector("script[data-config]")?.getAttribute("data-config") : null);
+    if (dataConfig) {
+      try {
+        const parsed = JSON.parse(dataConfig);
+        return {
+          ...windowConfig,
+          ...parsed,
+          theme: { ...windowConfig.theme, ...parsed.theme },
+          commands: { ...windowConfig.commands, ...parsed.commands },
+          animation: { ...windowConfig.animation, ...parsed.animation }
+        };
+      } catch (e) {
+        console.warn("[CALIPER] Failed to parse data-config attribute", e);
+      }
+    }
+    return windowConfig;
+  }
+  return {};
+}
+function setConfig(config) {
+  if (typeof window !== "undefined") {
+    window.__CALIPER_CONFIG__ = config;
+  }
+}
+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 response = await fetch(endpoint, {
+      method: "GET",
+      cache: "no-store",
+      headers: {
+        Accept: "application/json"
+      },
+      signal: AbortSignal.timeout(3e3)
+    });
+    if (response.ok) {
+      return await response.json();
+    }
+  } catch (error) {
+  }
+  return null;
+}
+function compareVersions(v1, v2) {
+  const parts1 = v1.split(".").map(Number);
+  const parts2 = v2.split(".").map(Number);
+  for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+    const part1 = parts1[i] || 0;
+    const part2 = parts2[i] || 0;
+    if (part1 < part2) return -1;
+    if (part1 > part2) return 1;
+  }
+  return 0;
+}
+async function showVersionInfo(currentVersion) {
+  if (typeof window === "undefined") return;
+  const style2 = `
+    font-size: 1px;
+    padding: 10px 34px;
+    background-image: url('${CALIPER_LOGO_SVG}');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  `;
+  console.log(`%c `, style2);
+  console.log(
+    `%cMeasurement Tool v${currentVersion}
+%cDocs -> https://caliper.danieloyerinde.com`,
+    "color: #3b82f6; font-weight: bold; font-family: monospace; padding-top: 5px;",
+    "color: #6b7280; font-family: monospace;"
+  );
+  fetchLatestVersion().then((latestInfo) => {
+    if (!latestInfo) return;
+    const comparison = compareVersions(currentVersion, latestInfo.version);
+    if (comparison < 0) {
+      console.log(
+        `%c\u26A0 Update available: ${latestInfo.version} (you're on ${currentVersion})`,
+        "color: #f59e0b; font-weight: bold; font-family: monospace;"
+      );
+    }
+  }).catch(() => {
+  });
+}
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+function lerpRect(start, end, t) {
+  return {
+    left: lerp(start.left, end.left, t),
+    top: lerp(start.top, end.top, t),
+    width: lerp(start.width, end.width, t),
+    height: lerp(start.height, end.height, t)
+  };
+}
+
+// ../overlay/dist/index.js
+var OVERLAY_STYLES = `
+: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};
+}
+
+#caliper-overlay-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 999999;
+}
+
+.${CALIPER_PREFIX}viewport-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.${CALIPER_PREFIX}overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 999999;
+}
+
+.${CALIPER_PREFIX}ruler-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 1000000;
+  touch-action: none;
+}
+
+.${CALIPER_PREFIX}alt-mode * {
+  pointer-events: none !important;
+}
+
+.${CALIPER_PREFIX}line {
+  stroke: var(--caliper-secondary);
+  stroke-width: 1px;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.${CALIPER_PREFIX}projection-line {
+  stroke: var(--caliper-projection);
+  stroke-width: 2px;
+  stroke-dasharray: 4 2;
+  pointer-events: auto;
+}
+
+.${CALIPER_PREFIX}label {
+  position: fixed;
+  pointer-events: auto;
+  cursor: pointer;
+  background: var(--caliper-secondary);
+  color: var(--caliper-text);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  white-space: nowrap;
+  z-index: 1000000;
+  will-change: transform;
+}
+
+.${CALIPER_PREFIX}projection-label {
+  background: var(--caliper-projection);
+  z-index: 1000001;
+}
+
+.${CALIPER_PREFIX}selection-label {
+  position: fixed;
+  pointer-events: none;
+  background: var(--caliper-primary);
+  color: var(--caliper-text);
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-size: 10px;
+  font-weight: 500;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  white-space: nowrap;
+  z-index: 1000001;
+  will-change: transform, opacity;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.${CALIPER_PREFIX}boundary-box {
+  position: fixed;
+  pointer-events: none;
+  box-sizing: border-box;
+  touch-action: none;
+}
+
+.${CALIPER_PREFIX}boundary-box-selected {
+  border: 2px solid var(--caliper-primary);
+  background: transparent;
+  z-index: 999998;
+  will-change: transform, width, height;
+}
+
+.${CALIPER_PREFIX}boundary-box-secondary {
+  border: 1px dashed var(--caliper-secondary-50);
+  background: var(--caliper-secondary-05);
+  z-index: 999997;
+}
+
+.${CALIPER_PREFIX}calculator, .${CALIPER_PREFIX}projection-input {
+  position: fixed;
+  pointer-events: auto;
+  background: var(--caliper-calc-bg);
+  color: var(--caliper-calc-text);
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  z-index: 1000005;
+  box-shadow: 0 4px 12px var(--caliper-calc-shadow);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  user-select: none;
+  overflow: hidden;
+  will-change: transform, width;
+  transform-origin: center;
+  width: fit-content;
+  min-width: 32px;
+  white-space: nowrap;
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+  border: 1px solid transparent;
+}
+
+.${CALIPER_PREFIX}calculator-focused, .${CALIPER_PREFIX}projection-input-focused {
+  border-color: var(--caliper-primary);
+  box-shadow: 0 0 0 2px var(--caliper-primary-50), 0 4px 12px var(--caliper-calc-shadow);
+  background: var(--caliper-calc-bg);
+}
+
+.${CALIPER_PREFIX}projection-input {
+  border-left: 3px solid var(--caliper-projection);
+}
+
+.${CALIPER_PREFIX}projection-direction-tag {
+  background: var(--caliper-projection-light);
+  color: var(--caliper-projection);
+  font-size: 10px;
+  padding: 2px 4px;
+  border-radius: 2px;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.${CALIPER_PREFIX}calculator-base {
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.${CALIPER_PREFIX}calculator-base-active {
+  opacity: 1;
+}
+
+.${CALIPER_PREFIX}calculator-operation {
+  background-color: var(--caliper-calc-op-highlight);
+  padding: 4px;
+  border-radius: 2px;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 0.3s ease-in-out;
+}
+
+.${CALIPER_PREFIX}calculator-input, .${CALIPER_PREFIX}projection-current-value {
+  min-width: 8px;
+  text-align: right;
+  transition: all 0.2s;
+}
+
+.${CALIPER_PREFIX}projection-current-value {
+  color: var(--caliper-projection);
+  font-weight: bold;
+}
+
+.${CALIPER_PREFIX}calculator-result {
+  font-weight: bold;
+  color: var(--caliper-primary);
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}
+
+.${CALIPER_PREFIX}line-clickable {
+  pointer-events: auto;
+  cursor: pointer;
+  transition: stroke-width 0.2s;
+}
+
+.${CALIPER_PREFIX}line-hit-target {
+  stroke: transparent;
+  stroke-width: 12px;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+
+.${CALIPER_PREFIX}line-clickable:hover {
+}
+
+.${CALIPER_PREFIX}ruler-line-visual {
+  transition: transform 0.1s ease-out;
+  will-change: transform;
+  position: fixed;
+  background-color: var(--caliper-ruler, var(--caliper-primary, rgba(24, 160, 251, 1)));
+  z-index: 1000000;
+}
+
+.${CALIPER_PREFIX}ruler-label {
+  background: var(--caliper-primary);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  position: fixed;
+  z-index: 1000002;
+}
+
+.${CALIPER_PREFIX}ruler-bridge-label {
+  position: fixed;
+  background: var(--caliper-secondary);
+  z-index: 1000003;
+  color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+`;
+var PREFIX = CALIPER_PREFIX;
+var _tmpl$ = /* @__PURE__ */ template(`<svg><defs><clipPath><rect></svg>`, false, true, false);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg style=z-index:999999><g>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg><g data-caliper-ignore style=pointer-events:auto;cursor:pointer><line></line><line></svg>`, false, true, false);
+function MeasurementLinesWithCalculator(props) {
+  const [hoveredLine, setHoveredLine] = createSignal(null);
+  const hasClipping = () => isFinite(props.data.common.minX);
+  const clipPathId = createSignal(`caliper-lines-clip-${Math.random().toString(36).substring(2, 9)}`)[0]();
+  const vCommon = () => ({
+    minX: props.data.common.minX - props.viewport.scrollX,
+    maxX: props.data.common.maxX - props.viewport.scrollX,
+    minY: props.data.common.minY - props.viewport.scrollY,
+    maxY: props.data.common.maxY - props.viewport.scrollY
+  });
+  return (() => {
+    var _el$ = _tmpl$2(), _el$5 = _el$.firstChild;
+    setAttribute(_el$, "class", `${PREFIX}viewport-fixed`);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return hasClipping();
+      },
+      get children() {
+        var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+        setAttribute(_el$3, "id", clipPathId);
+        createRenderEffect((_p$) => {
+          var _v$ = vCommon().minX, _v$2 = vCommon().minY, _v$3 = Math.max(0, vCommon().maxX - vCommon().minX), _v$4 = Math.max(0, vCommon().maxY - vCommon().minY);
+          _v$ !== _p$.e && setAttribute(_el$4, "x", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$4, "y", _p$.t = _v$2);
+          _v$3 !== _p$.a && setAttribute(_el$4, "width", _p$.a = _v$3);
+          _v$4 !== _p$.o && setAttribute(_el$4, "height", _p$.o = _v$4);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0
+        });
+        return _el$2;
+      }
+    }), _el$5);
+    insert(_el$5, createComponent(For, {
+      get each() {
+        return props.lines;
+      },
+      children: (line, index) => {
+        const lineData = createMemo(() => {
+          const sRaw = getLivePoint(line.start, line.startSync, line, props.data.primary.delta, props.data.secondary.delta, props.viewport.scrollX, props.viewport.scrollY);
+          const eRaw = getLivePoint(line.end, line.endSync, line, props.data.primary.delta, props.data.secondary.delta, props.viewport.scrollX, props.viewport.scrollY);
+          let start = sRaw;
+          let end = eRaw;
+          if (!props.data.isSameContext) {
+            start = clampPointToGeometry(sRaw, line.startSync === "secondary" ? props.data.secondary.geo : props.data.primary.geo, props.viewport);
+            const eRawClamped = clampPointToGeometry(eRaw, line.endSync === "secondary" ? props.data.secondary.geo : props.data.primary.geo, props.viewport);
+            end = {
+              ...eRawClamped
+            };
+          }
+          if (line.type === "top" || line.type === "bottom") {
+            if (line.startSync === "primary") end.x = start.x;
+            else start.x = end.x;
+          } else if (line.type === "left" || line.type === "right") {
+            if (line.startSync === "primary") end.y = start.y;
+            else start.y = end.y;
+          }
+          let liveValue = 0;
+          if (line.type === "top" || line.type === "bottom") {
+            liveValue = Math.abs(start.y - end.y);
+          } else if (line.type === "left" || line.type === "right") {
+            liveValue = Math.abs(start.x - end.x);
+          } else {
+            liveValue = Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2));
+          }
+          return {
+            x1: start.x,
+            y1: start.y,
+            x2: end.x,
+            y2: end.y,
+            liveValue
+          };
+        });
+        const isHovered = () => hoveredLine() === index();
+        return (() => {
+          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
+          _el$6.$$click = (e) => {
+            e.stopPropagation();
+            const data = lineData();
+            props.onLineClick?.(line, data.liveValue);
+          };
+          _el$6.addEventListener("mouseleave", () => setHoveredLine(null));
+          _el$6.addEventListener("mouseenter", () => setHoveredLine(index()));
+          setAttribute(_el$7, "class", `${PREFIX}line-hit-target`);
+          setAttribute(_el$8, "class", `${PREFIX}line ${PREFIX}line-clickable`);
+          createRenderEffect((_p$) => {
+            var _v$5 = lineData().x1, _v$6 = lineData().y1, _v$7 = lineData().x2, _v$8 = lineData().y2, _v$9 = lineData().x1, _v$0 = lineData().y1, _v$1 = lineData().x2, _v$10 = lineData().y2, _v$11 = isHovered() ? 2 : 1;
+            _v$5 !== _p$.e && setAttribute(_el$7, "x1", _p$.e = _v$5);
+            _v$6 !== _p$.t && setAttribute(_el$7, "y1", _p$.t = _v$6);
+            _v$7 !== _p$.a && setAttribute(_el$7, "x2", _p$.a = _v$7);
+            _v$8 !== _p$.o && setAttribute(_el$7, "y2", _p$.o = _v$8);
+            _v$9 !== _p$.i && setAttribute(_el$8, "x1", _p$.i = _v$9);
+            _v$0 !== _p$.n && setAttribute(_el$8, "y1", _p$.n = _v$0);
+            _v$1 !== _p$.s && setAttribute(_el$8, "x2", _p$.s = _v$1);
+            _v$10 !== _p$.h && setAttribute(_el$8, "y2", _p$.h = _v$10);
+            _v$11 !== _p$.r && setAttribute(_el$8, "stroke-width", _p$.r = _v$11);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0,
+            h: void 0,
+            r: void 0
+          });
+          return _el$6;
+        })();
+      }
+    }));
+    createRenderEffect(() => setAttribute(_el$5, "clip-path", hasClipping() ? `url(#${clipPathId})` : void 0));
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$4 = /* @__PURE__ */ template(`<div style=z-index:1000000>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div data-caliper-ignore style=left:0;top:0>`);
+function MeasurementLabels(props) {
+  const margin = 16;
+  return (() => {
+    var _el$ = _tmpl$4();
+    className(_el$, `${PREFIX}viewport-fixed`);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.lines;
+      },
+      children: (line) => {
+        const position = createMemo(() => {
+          props.viewport.version;
+          const sRaw = getLivePoint(line.start, line.startSync, line, props.data.primary.delta, props.data.secondary.delta, props.viewport.scrollX, props.viewport.scrollY);
+          const eRaw = getLivePoint(line.end, line.endSync, line, props.data.primary.delta, props.data.secondary.delta, props.viewport.scrollX, props.viewport.scrollY);
+          const dxRaw = Math.abs(sRaw.x - eRaw.x);
+          const dyRaw = Math.abs(sRaw.y - eRaw.y);
+          let liveValue = 0;
+          if (line.type === "top" || line.type === "bottom") {
+            liveValue = dyRaw;
+          } else if (line.type === "left" || line.type === "right") {
+            liveValue = dxRaw;
+          } else {
+            liveValue = Math.sqrt(dxRaw * dxRaw + dyRaw * dyRaw);
+          }
+          let start = sRaw;
+          let end = eRaw;
+          if (!props.data.isSameContext) {
+            start = clampPointToGeometry(sRaw, line.startSync === "secondary" ? props.data.secondary.geo : props.data.primary.geo, props.viewport);
+            const eClamped = clampPointToGeometry(eRaw, line.endSync === "secondary" ? props.data.secondary.geo : props.data.primary.geo, props.viewport);
+            end = {
+              ...eClamped
+            };
+          }
+          if (line.type === "top" || line.type === "bottom") {
+            if (line.startSync === "primary") end.x = start.x;
+            else start.x = end.x;
+          } else if (line.type === "left" || line.type === "right") {
+            if (line.startSync === "primary") end.y = start.y;
+            else start.y = end.y;
+          }
+          const naturalX = (start.x + end.x) / 2;
+          const naturalY = (start.y + end.y) / 2;
+          const vpMinX = 0;
+          const vpMaxX = props.viewport.width;
+          const vpMinY = 0;
+          const vpMaxY = props.viewport.height;
+          const common = props.data.common;
+          const hasCommon = isFinite(common.minX);
+          const cMinX = hasCommon ? Math.max(vpMinX, common.minX - props.viewport.scrollX) : vpMinX;
+          const cMaxX = hasCommon ? Math.min(vpMaxX, common.maxX - props.viewport.scrollX) : vpMaxX;
+          const cMinY = hasCommon ? Math.max(vpMinY, common.minY - props.viewport.scrollY) : vpMinY;
+          const cMaxY = hasCommon ? Math.min(vpMaxY, common.maxY - props.viewport.scrollY) : vpMaxY;
+          const lineMinX = Math.min(start.x, end.x);
+          const lineMaxX = Math.max(start.x, end.x);
+          const lineMinY = Math.min(start.y, end.y);
+          const lineMaxY = Math.max(start.y, end.y);
+          const isFullyHidden = lineMaxY < cMinY || lineMinY > cMaxY || lineMaxX < cMinX || lineMinX > cMaxX;
+          if (isFullyHidden) return {
+            x: 0,
+            y: 0,
+            isHidden: true,
+            value: 0
+          };
+          const visibleLineMinX = Math.max(lineMinX, cMinX);
+          const visibleLineMaxX = Math.min(lineMaxX, cMaxX);
+          const visibleLineMinY = Math.max(lineMinY, cMinY);
+          const visibleLineMaxY = Math.min(lineMaxY, cMaxY);
+          const centerX = (visibleLineMinX + visibleLineMaxX) / 2;
+          const centerY = (visibleLineMinY + visibleLineMaxY) / 2;
+          let targetX = naturalX;
+          let targetY = naturalY;
+          if (Math.abs(start.x - end.x) < 1) {
+            targetY = centerY;
+            targetX = Math.max(cMinX + margin, Math.min(cMaxX - margin, targetX));
+          } else if (Math.abs(start.y - end.y) < 1) {
+            targetX = centerX;
+            targetY = Math.max(cMinY + margin, Math.min(cMaxY - margin, targetY));
+          } else {
+            targetX = Math.max(cMinX + margin, Math.min(cMaxX - margin, naturalX));
+            targetY = Math.max(cMinY + margin, Math.min(cMaxY - margin, naturalY));
+          }
+          return {
+            x: targetX,
+            y: targetY,
+            isHidden: false,
+            value: liveValue
+          };
+        });
+        return createComponent(Show, {
+          get when() {
+            return memo(() => !!position())() && !position().isHidden;
+          },
+          get children() {
+            var _el$2 = _tmpl$22();
+            _el$2.$$click = (e) => {
+              e.stopPropagation();
+              const pos = position();
+              if (pos && !pos.isHidden) {
+                props.onLineClick?.(line, pos.value);
+              }
+            };
+            className(_el$2, `${PREFIX}label`);
+            insert(_el$2, () => Math.round(position().value * 100) / 100);
+            createRenderEffect((_$p) => setStyleProperty(_el$2, "transform", `translate3d(${position().x}px, ${position().y}px, 0) translate(-50%, -50%)`));
+            return _el$2;
+          }
+        });
+      }
+    }));
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$5 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"><line x1=12 y1=5 x2=12 y2=19></line><line x1=5 y1=12 x2=19 y2=12>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"><line x1=5 y1=12 x2=19 y2=12>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"><line x1=19 y1=5 x2=5 y2=19>`);
+var iconStyle = {
+  width: "12px",
+  height: "12px",
+  "stroke-width": "2.5",
+  stroke: "currentColor",
+  fill: "none",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  display: "block"
+};
+var Icons = {
+  "+": () => (() => {
+    var _el$ = _tmpl$5();
+    createRenderEffect((_$p) => style(_el$, iconStyle, _$p));
+    return _el$;
+  })(),
+  "-": () => (() => {
+    var _el$2 = _tmpl$23();
+    createRenderEffect((_$p) => style(_el$2, iconStyle, _$p));
+    return _el$2;
+  })(),
+  "*": () => (() => {
+    var _el$3 = _tmpl$32();
+    createRenderEffect((_$p) => style(_el$3, iconStyle, _$p));
+    return _el$3;
+  })(),
+  "/": () => (() => {
+    var _el$4 = _tmpl$42();
+    createRenderEffect((_$p) => style(_el$4, iconStyle, _$p));
+    return _el$4;
+  })()
+};
+var _tmpl$6 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<span>= `);
+var _tmpl$33 = /* @__PURE__ */ template(`<div data-caliper-ignore style=top:0;left:0><span>`);
+function Calculator(props) {
+  const formatValue = (value) => {
+    return Math.round(value * 100) / 100 + "";
+  };
+  return createComponent(Show, {
+    get when() {
+      return props.state.isActive;
+    },
+    get children() {
+      var _el$ = _tmpl$33(), _el$2 = _el$.firstChild;
+      insert(_el$2, () => formatValue(props.state.baseValue));
+      insert(_el$, createComponent(Show, {
+        keyed: true,
+        get when() {
+          return props.state.operation;
+        },
+        children: (operation) => {
+          const Icon = Icons[operation];
+          return (() => {
+            var _el$6 = _tmpl$6();
+            className(_el$6, `${PREFIX}calculator-operation`);
+            insert(_el$6, createComponent(Show, {
+              when: Icon,
+              fallback: operation,
+              get children() {
+                return createComponent(Icon, {});
+              }
+            }));
+            return _el$6;
+          })();
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return props.state.inputValue || props.state.operation;
+        },
+        get children() {
+          var _el$3 = _tmpl$6();
+          className(_el$3, `${PREFIX}calculator-input`);
+          insert(_el$3, () => props.state.inputValue || "0");
+          return _el$3;
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return props.state.result !== null;
+        },
+        get children() {
+          var _el$4 = _tmpl$24(); _el$4.firstChild;
+          className(_el$4, `${PREFIX}calculator-result`);
+          insert(_el$4, (() => {
+            var _c$ = memo(() => props.state.result !== null);
+            return () => _c$() ? formatValue(props.state.result) : "";
+          })(), null);
+          return _el$4;
+        }
+      }), null);
+      createRenderEffect((_p$) => {
+        var _v$ = `${PREFIX}calculator ${props.isFocused ? `${PREFIX}calculator-focused` : ""}`, _v$2 = `translate3d(${props.position.x + 10}px, ${props.position.y + 10}px, 0)`, _v$3 = `${PREFIX}calculator-base ${props.state.operation ? `${PREFIX}calculator-base-active` : ""}`;
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && setStyleProperty(_el$, "transform", _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      });
+      return _el$;
+    }
+  });
+}
+var _tmpl$7 = /* @__PURE__ */ template(`<div style=left:0;top:0>`);
+function BoundaryBoxes(props) {
+  const [anchor, setAnchor] = createSignal(null);
+  const [target, setTarget] = createSignal(null);
+  let lastElement = null;
+  let rafId = null;
+  const isRectSame = (a, b, threshold = 0.1) => {
+    if (!a || !b) return false;
+    return Math.abs(a.left - b.left) < threshold && Math.abs(a.top - b.top) < threshold && Math.abs(a.width - b.width) < threshold && Math.abs(a.height - b.height) < threshold;
+  };
+  const lerpTo = (current, targetGeo, lerpFactor) => {
+    if (!targetGeo) return null;
+    if (!current) return {
+      ...targetGeo
+    };
+    const next = lerpRect(current, targetGeo, lerpFactor);
+    if (isRectSame(next, targetGeo, 0.1)) {
+      return {
+        ...targetGeo
+      };
+    }
+    return {
+      ...targetGeo,
+      left: next.left,
+      top: next.top,
+      width: next.width,
+      height: next.height
+    };
+  };
+  const liveSelectionTarget = createMemo(() => {
+    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(() => {
+    props.viewport.version;
+    const res = props.result;
+    if (!(props.isAltPressed || 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]) => {
+    if (!selection) {
+      setAnchor(null);
+      setTarget(null);
+      lastElement = null;
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      return;
+    }
+    const isNewElement = lastElement !== element;
+    const useLerp = props.animation.enabled !== false;
+    setTarget(secondary);
+    if (isNewElement) {
+      lastElement = element;
+      if (useLerp) {
+        const animate = () => {
+          const currentAnchor = anchor();
+          const nextAnchor = lerpTo(currentAnchor, selection, factor);
+          setAnchor(nextAnchor);
+          if (selection && !isRectSame(nextAnchor, selection, 0.05)) {
+            rafId = requestAnimationFrame(animate);
+          } else {
+            rafId = null;
+          }
+        };
+        if (rafId) cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(animate);
+      } else {
+        if (rafId) {
+          cancelAnimationFrame(rafId);
+          rafId = null;
+        }
+        setAnchor(selection);
+      }
+    } else {
+      if (!rafId) {
+        setAnchor(selection);
+      }
+    }
+  }));
+  onCleanup(() => {
+    if (rafId) cancelAnimationFrame(rafId);
+  });
+  return [createComponent(Show, {
+    get when() {
+      return anchor();
+    },
+    children: (current) => createComponent(Portal, {
+      get mount() {
+        return document.body;
+      },
+      get children() {
+        var _el$ = _tmpl$7();
+        className(_el$, `${PREFIX}boundary-box ${PREFIX}boundary-box-selected`);
+        createRenderEffect((_p$) => {
+          var _v$ = `${current().width}px`, _v$2 = `${current().height}px`, _v$3 = `translate3d(${current().left - props.viewport.scrollX}px, ${current().top - props.viewport.scrollY}px, 0)`, _v$4 = current().clipPath;
+          _v$ !== _p$.e && setStyleProperty(_el$, "width", _p$.e = _v$);
+          _v$2 !== _p$.t && setStyleProperty(_el$, "height", _p$.t = _v$2);
+          _v$3 !== _p$.a && setStyleProperty(_el$, "transform", _p$.a = _v$3);
+          _v$4 !== _p$.o && setStyleProperty(_el$, "clip-path", _p$.o = _v$4);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0
+        });
+        return _el$;
+      }
+    })
+  }), createComponent(Show, {
+    get when() {
+      return target();
+    },
+    children: (current) => createComponent(Portal, {
+      get mount() {
+        return document.body;
+      },
+      get children() {
+        var _el$2 = _tmpl$7();
+        className(_el$2, `${PREFIX}boundary-box ${PREFIX}boundary-box-secondary`);
+        createRenderEffect((_p$) => {
+          var _v$5 = `${current().width}px`, _v$6 = `${current().height}px`, _v$7 = `translate3d(${current().left - props.viewport.scrollX}px, ${current().top - props.viewport.scrollY}px, 0)`, _v$8 = current().clipPath;
+          _v$5 !== _p$.e && setStyleProperty(_el$2, "width", _p$.e = _v$5);
+          _v$6 !== _p$.t && setStyleProperty(_el$2, "height", _p$.t = _v$6);
+          _v$7 !== _p$.a && setStyleProperty(_el$2, "transform", _p$.a = _v$7);
+          _v$8 !== _p$.o && setStyleProperty(_el$2, "clip-path", _p$.o = _v$8);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0
+        });
+        return _el$2;
+      }
+    })
+  })];
+}
+var _tmpl$8 = /* @__PURE__ */ template(`<div style=left:0;top:0> \xD7 `);
+function SelectionLabel(props) {
+  const margin = 16;
+  const liveGeo = createMemo(() => {
+    props.viewport.version;
+    return getLiveGeometry(props.metadata.rect, props.metadata.scrollHierarchy, props.metadata.position, props.metadata.stickyConfig, props.metadata.initialWindowX, props.metadata.initialWindowY);
+  });
+  const labelData = createMemo(() => {
+    const geo = liveGeo();
+    if (!geo || geo.isHidden) return null;
+    const vLeft = props.viewport.scrollX;
+    const vRight = props.viewport.scrollX + props.viewport.width;
+    const vBottom = props.viewport.scrollY + props.viewport.height;
+    const cLeft = geo.visibleMinX;
+    const cRight = geo.visibleMaxX;
+    const cBottom = geo.visibleMaxY;
+    const effectiveMinX = Math.max(vLeft, cLeft);
+    const effectiveMaxX = Math.min(vRight, cRight);
+    const effectiveMaxY = Math.min(vBottom, cBottom);
+    const visibleLeft = Math.max(geo.left, effectiveMinX + margin);
+    const visibleRight = Math.min(geo.left + geo.width, effectiveMaxX - margin);
+    let snapX = (visibleLeft + visibleRight) / 2;
+    let snapY = geo.top + geo.height + 8;
+    if (snapY > effectiveMaxY - margin - 24) {
+      if (geo.top < effectiveMaxY - margin) {
+        snapY = effectiveMaxY - margin - 24;
+      }
+    }
+    snapY = Math.max(snapY, geo.top + margin);
+    return {
+      width: Math.round(geo.width),
+      height: Math.round(geo.height),
+      x: snapX,
+      y: snapY
+    };
+  });
+  return createComponent(Show, {
+    get when() {
+      return labelData();
+    },
+    children: (data) => createComponent(Portal, {
+      get mount() {
+        return document.body;
+      },
+      get children() {
+        var _el$ = _tmpl$8(), _el$2 = _el$.firstChild;
+        className(_el$, `${PREFIX}selection-label`);
+        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;
+          _v$ !== _p$.e && setStyleProperty(_el$, "transform", _p$.e = _v$);
+          _v$2 !== _p$.t && setStyleProperty(_el$, "opacity", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$;
+      }
+    })
+  });
+}
+var _tmpl$9 = /* @__PURE__ */ template(`<svg style=z-index:1000000><line data-caliper-ignore stroke=transparent stroke-width=15></line><line>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div data-caliper-ignore style=top:0;left:0>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div data-caliper-ignore><span></span><span>`);
+function ProjectionOverlay(props) {
+  return createComponent(Show, {
+    get when() {
+      return memo(() => !!props.metadata().element)() && props.projectionState().direction;
+    },
+    get children() {
+      return [createComponent(ProjectionLines, {
+        get projectionState() {
+          return props.projectionState;
+        },
+        get metadata() {
+          return props.metadata;
+        },
+        get viewport() {
+          return props.viewport;
+        },
+        get onLineClick() {
+          return props.onLineClick;
+        }
+      }), createComponent(ProjectionInput, {
+        get projectionState() {
+          return props.projectionState;
+        },
+        get metadata() {
+          return props.metadata;
+        },
+        get viewport() {
+          return props.viewport;
+        },
+        get isFocused() {
+          return props.isFocused;
+        }
+      })];
+    }
+  });
+}
+function ProjectionLines(props) {
+  const lineData = createMemo(() => {
+    const vp = props.viewport();
+    vp.version;
+    const state = props.projectionState();
+    const value = parseFloat(state.value) || 0;
+    const metadata = props.metadata();
+    const live = getLiveGeometry(metadata.rect, metadata.scrollHierarchy, metadata.position, metadata.stickyConfig, metadata.initialWindowX, metadata.initialWindowY);
+    if (!live) return null;
+    let x1 = 0, y1 = 0, x2 = 0, y2 = 0;
+    let labelX = 0, labelY = 0;
+    let visibleY1 = 0, visibleY2 = 0, visibleX1 = 0, visibleX2 = 0;
+    const docWidth = document.documentElement.scrollWidth;
+    const docHeight = document.documentElement.scrollHeight;
+    const liveX = live.left - vp.scrollX;
+    const liveY = live.top - vp.scrollY;
+    let isOffScreen = false;
+    switch (state.direction) {
+      case "top":
+        x1 = x2 = liveX + live.width / 2;
+        y1 = liveY;
+        y2 = Math.max(-vp.scrollY, y1 - value);
+        labelX = x1;
+        visibleY1 = Math.max(0, Math.min(vp.height, y1));
+        visibleY2 = Math.max(0, Math.min(vp.height, y2));
+        if (Math.abs(visibleY1 - visibleY2) < 1) isOffScreen = true;
+        labelY = (Math.min(visibleY1, visibleY2) + Math.max(visibleY1, visibleY2)) / 2;
+        break;
+      case "bottom":
+        x1 = x2 = liveX + live.width / 2;
+        y1 = liveY + live.height;
+        y2 = Math.min(docHeight - vp.scrollY, y1 + value);
+        labelX = x1;
+        visibleY1 = Math.max(0, Math.min(vp.height, y1));
+        visibleY2 = Math.max(0, Math.min(vp.height, y2));
+        if (Math.abs(visibleY1 - visibleY2) < 1) isOffScreen = true;
+        labelY = (Math.min(visibleY1, visibleY2) + Math.max(visibleY1, visibleY2)) / 2;
+        break;
+      case "left":
+        y1 = y2 = liveY + live.height / 2;
+        x1 = liveX;
+        x2 = Math.max(-vp.scrollX, x1 - value);
+        visibleX1 = Math.max(0, Math.min(vp.width, x1));
+        visibleX2 = Math.max(0, Math.min(vp.width, x2));
+        if (Math.abs(visibleX1 - visibleX2) < 1) isOffScreen = true;
+        labelX = (Math.min(visibleX1, visibleX2) + Math.max(visibleX1, visibleX2)) / 2;
+        labelY = y1;
+        break;
+      case "right":
+        y1 = y2 = liveY + live.height / 2;
+        x1 = liveX + live.width;
+        x2 = Math.min(docWidth - vp.scrollX, x1 + value);
+        visibleX1 = Math.max(0, Math.min(vp.width, x1));
+        visibleX2 = Math.max(0, Math.min(vp.width, x2));
+        if (Math.abs(visibleX1 - visibleX2) < 1) isOffScreen = true;
+        labelX = (Math.min(visibleX1, visibleX2) + Math.max(visibleX1, visibleX2)) / 2;
+        labelY = y1;
+        break;
+    }
+    const rawValue = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    const actualValue = Number.isInteger(rawValue) ? rawValue : Math.round(rawValue * 100) / 100;
+    const displayValue = state.value || String(actualValue);
+    const labelWidthGuess = displayValue.length * 8 + 12;
+    const labelHeightGuess = 20;
+    const isHorizontal = state.direction === "left" || state.direction === "right";
+    const visibleLineLength = isHorizontal ? Math.abs(visibleX1 - visibleX2) : Math.abs(visibleY1 - visibleY2);
+    const labelSize = isHorizontal ? labelWidthGuess : labelHeightGuess;
+    const showLabel = visibleLineLength >= labelSize * 1.5;
+    return {
+      x1,
+      y1,
+      x2,
+      y2,
+      labelX,
+      labelY,
+      actualValue,
+      isHidden: live.isHidden || isOffScreen,
+      showLabel
+    };
+  });
+  const [isHovered, setIsHovered] = createSignal(false);
+  const handleLineClick = (e) => {
+    e.stopPropagation();
+    const data = lineData();
+    if (data) {
+      props.onLineClick?.({
+        type: "distance",
+        value: data.actualValue,
+        start: {
+          x: data.x1,
+          y: data.y1
+        },
+        end: {
+          x: data.x2,
+          y: data.y2
+        }
+      }, data.actualValue);
+    }
+  };
+  return createComponent(Show, {
+    get when() {
+      return memo(() => !!lineData())() && !lineData()?.isHidden;
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        setAttribute(_el$, "class", `${PREFIX}viewport-fixed`);
+        _el$2.addEventListener("mouseleave", () => setIsHovered(false));
+        _el$2.addEventListener("mouseenter", () => setIsHovered(true));
+        _el$2.$$click = handleLineClick;
+        setAttribute(_el$2, "class", `${PREFIX}line-hit-target`);
+        setAttribute(_el$3, "class", `${PREFIX}projection-line`);
+        createRenderEffect((_p$) => {
+          var _v$ = lineData().x1, _v$2 = lineData().y1, _v$3 = lineData().x2, _v$4 = lineData().y2, _v$5 = lineData().x1, _v$6 = lineData().y1, _v$7 = lineData().x2, _v$8 = lineData().y2, _v$9 = isHovered() ? 2 : 1;
+          _v$ !== _p$.e && setAttribute(_el$2, "x1", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$2, "y1", _p$.t = _v$2);
+          _v$3 !== _p$.a && setAttribute(_el$2, "x2", _p$.a = _v$3);
+          _v$4 !== _p$.o && setAttribute(_el$2, "y2", _p$.o = _v$4);
+          _v$5 !== _p$.i && setAttribute(_el$3, "x1", _p$.i = _v$5);
+          _v$6 !== _p$.n && setAttribute(_el$3, "y1", _p$.n = _v$6);
+          _v$7 !== _p$.s && setAttribute(_el$3, "x2", _p$.s = _v$7);
+          _v$8 !== _p$.h && setAttribute(_el$3, "y2", _p$.h = _v$8);
+          _v$9 !== _p$.r && setAttribute(_el$3, "stroke-width", _p$.r = _v$9);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0,
+          s: void 0,
+          h: void 0,
+          r: void 0
+        });
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return lineData().showLabel;
+        },
+        get children() {
+          var _el$4 = _tmpl$25();
+          _el$4.$$click = handleLineClick;
+          className(_el$4, `${PREFIX}label ${PREFIX}projection-label`);
+          insert(_el$4, () => lineData().actualValue);
+          createRenderEffect((_$p) => setStyleProperty(_el$4, "transform", `translate3d(${lineData().labelX}px, ${lineData().labelY}px, 0) translate(-50%, -50%)`));
+          return _el$4;
+        }
+      })];
+    }
+  });
+}
+function ProjectionInput(props) {
+  const style2 = createMemo(() => {
+    const vp = props.viewport();
+    vp.version;
+    const metadata = props.metadata();
+    const live = getLiveGeometry(metadata.rect, metadata.scrollHierarchy, metadata.position, metadata.stickyConfig, metadata.initialWindowX, metadata.initialWindowY);
+    if (!live || live.isHidden) return {
+      display: "none"
+    };
+    const windowTop = live.top - vp.scrollY;
+    const windowLeft = live.left - vp.scrollX;
+    const inputHeight = 35;
+    const margin = 10;
+    const shouldFlip = windowTop < inputHeight + margin;
+    const y = shouldFlip ? windowTop + live.height + margin : windowTop - inputHeight;
+    return {
+      top: "0",
+      left: "0",
+      transform: `translate3d(${windowLeft}px, ${y}px, 0)`
+    };
+  });
+  return (() => {
+    var _el$5 = _tmpl$34(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+    className(_el$6, `${PREFIX}projection-direction-tag`);
+    insert(_el$6, () => props.projectionState().direction);
+    className(_el$7, `${PREFIX}projection-current-value`);
+    insert(_el$7, () => props.projectionState().value || "0");
+    createRenderEffect((_p$) => {
+      var _v$0 = `${PREFIX}projection-input ${props.isFocused ? `${PREFIX}projection-input-focused` : ""}`, _v$1 = style2();
+      _v$0 !== _p$.e && className(_el$5, _p$.e = _v$0);
+      _p$.t = style(_el$5, _v$1, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$5;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$10 = /* @__PURE__ */ template(`<div data-caliper-ignore><svg style=z-index:999999>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<svg><g data-caliper-ignore style=cursor:pointer;pointer-events:auto><line stroke=transparent stroke-width=15></line><line stroke=var(--caliper-secondary) stroke-width=1 stroke-dasharray="4 2"></line><circle r=2.5 fill=var(--caliper-secondary)></circle><circle r=2.5 fill=var(--caliper-secondary)></svg>`, false, true, false);
+var _tmpl$35 = /* @__PURE__ */ template(`<div data-caliper-ignore style=left:0;top:0>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<div data-caliper-ignore style=position:fixed;left:0;top:0;pointer-events:auto;z-index:1000001>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div data-caliper-ignore>`);
+function RulerOverlay(props) {
+  const [draggingId, setDraggingId] = createSignal(null);
+  const [hoveredId, setHoveredId] = createSignal(null);
+  const [selectedIds, setSelectedIds] = createSignal(/* @__PURE__ */ new Set());
+  createEffect(() => {
+    const lines = props.state().lines;
+    const currentIds = selectedIds();
+    const validIds = /* @__PURE__ */ new Set();
+    currentIds.forEach((id) => {
+      if (lines.find((l) => l.id === id)) {
+        validIds.add(id);
+      }
+    });
+    if (validIds.size !== currentIds.size) {
+      setSelectedIds(validIds);
+    }
+  });
+  const getSnapPoints = (isV) => {
+    const points = [];
+    const state = props.projectionState?.();
+    const meta = props.metadata?.();
+    const res = props.result?.();
+    const vp = props.viewport();
+    if (meta && meta.element) {
+      const live = getLiveGeometry(meta.rect, meta.scrollHierarchy, meta.position, meta.stickyConfig, meta.initialWindowX, meta.initialWindowY);
+      if (live) {
+        const liveX = live.left - vp.scrollX;
+        const liveY = live.top - vp.scrollY;
+        if (isV) {
+          points.push(liveX, liveX + live.width, liveX + live.width / 2);
+        } else {
+          points.push(liveY, liveY + live.height, liveY + live.height / 2);
+        }
+        if (state && state.direction && state.element === meta.element) {
+          const value = parseFloat(state.value) || 0;
+          if (isV) {
+            if (state.direction === "left") points.push(liveX - value);
+            else if (state.direction === "right") points.push(liveX + live.width + value);
+          } else {
+            if (state.direction === "top") points.push(liveY - value);
+            else if (state.direction === "bottom") points.push(liveY + live.height + value);
+          }
+        }
+      }
+    }
+    if (res && res.secondary) {
+      const live = getLiveGeometry(res.secondary, res.secondaryHierarchy, res.secondaryPosition, res.secondarySticky, res.secondaryWinX, res.secondaryWinY);
+      if (live) {
+        const liveX = live.left - vp.scrollX;
+        const liveY = live.top - vp.scrollY;
+        if (isV) {
+          points.push(liveX, liveX + live.width, liveX + live.width / 2);
+        } else {
+          points.push(liveY, liveY + live.height, liveY + live.height / 2);
+        }
+      }
+    }
+    return points;
+  };
+  const applySnap = (pos, isV) => {
+    const points = getSnapPoints(isV);
+    for (const p of points) {
+      if (Math.abs(pos - p) <= RULER_SNAP_THRESHOLD) {
+        return p;
+      }
+    }
+    return pos;
+  };
+  const handleKeyDown = (e) => {
+    const activeIds = selectedIds();
+    if (activeIds.size === 0) return;
+    if (e.key === "Delete" || e.key === "Backspace") {
+      const idsToRemove = Array.from(activeIds);
+      idsToRemove.forEach((id) => props.onRemove(id));
+      setSelectedIds(/* @__PURE__ */ new Set());
+      return;
+    }
+    const lines = props.state().lines;
+    const activeLines = lines.filter((l) => activeIds.has(l.id));
+    if (activeLines.length === 0) return;
+    let step = 1;
+    if (e.shiftKey) step = 10;
+    else if (e.altKey) step = 0.1;
+    const firstLine = activeLines[0];
+    if (!firstLine) return;
+    const isV = firstLine.type === "vertical";
+    let delta = 0;
+    if (isV) {
+      if (e.key === "ArrowLeft") delta = -step;
+      if (e.key === "ArrowRight") delta = step;
+    } else {
+      if (e.key === "ArrowUp") delta = -step;
+      if (e.key === "ArrowDown") delta = step;
+    }
+    if (delta !== 0) {
+      e.preventDefault();
+      const vp = props.viewport();
+      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));
+        newPos = applySnap(newPos, isLineV);
+        props.onUpdate(line.id, newPos);
+      });
+    }
+  };
+  onMount(() => {
+    const handleGlobalClick = (e) => {
+      const target = e.target;
+      if (!target.closest(`.${PREFIX}ruler-line-hit`) && !target.closest(`.${PREFIX}ruler-bridge-label`) && !target.closest(`.${PREFIX}line-hit-target`) && !target.closest(`[data-caliper-ignore]`)) {
+        setSelectedIds(/* @__PURE__ */ new Set());
+      }
+    };
+    window.addEventListener("pointerdown", handleGlobalClick, {
+      capture: true
+    });
+    window.addEventListener("keydown", handleKeyDown, {
+      capture: true
+    });
+    onCleanup(() => {
+      window.removeEventListener("pointerdown", handleGlobalClick, {
+        capture: true
+      });
+      window.removeEventListener("keydown", handleKeyDown, {
+        capture: true
+      });
+    });
+  });
+  const handlePointerDown = (e) => {
+    const target = e.target;
+    const id = target.getAttribute("data-ruler-id");
+    const type = target.getAttribute("data-ruler-type");
+    if (!id || !type) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDraggingId(id);
+    target.setPointerCapture(e.pointerId);
+    if (e.shiftKey) {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    } else {
+      if (!selectedIds().has(id)) {
+        setSelectedIds(/* @__PURE__ */ new Set([id]));
+      }
+    }
+    const onPointerMove = (moveEvent) => {
+      const vp = props.viewport();
+      const isV = type === "vertical";
+      let pos = isV ? moveEvent.clientX : moveEvent.clientY;
+      const max = (isV ? vp.width : vp.height) - 1;
+      pos = Math.max(0, Math.min(pos, max));
+      pos = applySnap(pos, isV);
+      props.onUpdate(id, pos);
+    };
+    const onPointerUp = (upEvent) => {
+      setDraggingId(null);
+      target.releasePointerCapture(upEvent.pointerId);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+  const handleDoubleClick = (e) => {
+    const target = e.target;
+    const id = target.getAttribute("data-ruler-id");
+    if (id) {
+      props.onRemove(id);
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }
+  };
+  const handlePointerOver = (e) => {
+    const target = e.target;
+    const id = target.getAttribute("data-ruler-id");
+    if (id) setHoveredId(id);
+  };
+  const handlePointerOut = (e) => {
+    const target = e.target;
+    if (target.hasAttribute("data-ruler-id")) setHoveredId(null);
+  };
+  const bridges = createMemo(() => {
+    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 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;
+      if (val > 0) {
+        result.push({
+          x1: l1.position,
+          y1: vp.height / 2 + 100,
+          // Move default bridge line off center for better visibility
+          x2: l2.position,
+          y2: vp.height / 2 + 100,
+          value: val,
+          type: "vertical",
+          labelX: l1.position + 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;
+      if (val > 0) {
+        result.push({
+          x1: vp.width / 2 + 100,
+          y1: l1.position,
+          x2: vp.width / 2 + 100,
+          y2: l2.position,
+          value: val,
+          type: "horizontal",
+          labelX: vp.width / 2 + 115,
+          labelY: l1.position + val / 2
+        });
+      }
+    }
+    return result;
+  });
+  const handleClick = (bridge, e) => {
+    e.stopPropagation();
+    props.onLineClick?.({
+      type: "distance",
+      value: bridge.value,
+      start: {
+        x: bridge.x1,
+        y: bridge.y1
+      },
+      end: {
+        x: bridge.x2,
+        y: bridge.y2
+      }
+    }, bridge.value);
+  };
+  return (() => {
+    var _el$ = _tmpl$10(), _el$2 = _el$.firstChild;
+    _el$.$$pointerout = handlePointerOut;
+    _el$.$$pointerover = handlePointerOver;
+    _el$.$$dblclick = handleDoubleClick;
+    _el$.$$pointerdown = handlePointerDown;
+    className(_el$, `${PREFIX}ruler-layer`);
+    setAttribute(_el$2, "class", `${PREFIX}viewport-fixed`);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return bridges();
+      },
+      children: (bridge) => (() => {
+        var _el$3 = _tmpl$26(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling;
+        _el$3.$$click = (e) => handleClick(bridge, e);
+        setAttribute(_el$4, "class", `${PREFIX}line-hit-target`);
+        createRenderEffect((_p$) => {
+          var _v$ = bridge.x1, _v$2 = bridge.y1, _v$3 = bridge.x2, _v$4 = bridge.y2, _v$5 = bridge.x1, _v$6 = bridge.y1, _v$7 = bridge.x2, _v$8 = bridge.y2, _v$9 = bridge.x1, _v$0 = bridge.y1, _v$1 = bridge.x2, _v$10 = bridge.y2;
+          _v$ !== _p$.e && setAttribute(_el$4, "x1", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$4, "y1", _p$.t = _v$2);
+          _v$3 !== _p$.a && setAttribute(_el$4, "x2", _p$.a = _v$3);
+          _v$4 !== _p$.o && setAttribute(_el$4, "y2", _p$.o = _v$4);
+          _v$5 !== _p$.i && setAttribute(_el$5, "x1", _p$.i = _v$5);
+          _v$6 !== _p$.n && setAttribute(_el$5, "y1", _p$.n = _v$6);
+          _v$7 !== _p$.s && setAttribute(_el$5, "x2", _p$.s = _v$7);
+          _v$8 !== _p$.h && setAttribute(_el$5, "y2", _p$.h = _v$8);
+          _v$9 !== _p$.r && setAttribute(_el$6, "cx", _p$.r = _v$9);
+          _v$0 !== _p$.d && setAttribute(_el$6, "cy", _p$.d = _v$0);
+          _v$1 !== _p$.l && setAttribute(_el$7, "cx", _p$.l = _v$1);
+          _v$10 !== _p$.u && setAttribute(_el$7, "cy", _p$.u = _v$10);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0,
+          s: void 0,
+          h: void 0,
+          r: void 0,
+          d: void 0,
+          l: void 0,
+          u: void 0
+        });
+        return _el$3;
+      })()
+    }));
+    insert(_el$, createComponent(For, {
+      get each() {
+        return bridges();
+      },
+      children: (bridge) => (() => {
+        var _el$8 = _tmpl$35();
+        _el$8.$$click = (e) => handleClick(bridge, e);
+        className(_el$8, `${PREFIX}label ${PREFIX}ruler-bridge-label`);
+        insert(_el$8, () => Math.round(bridge.value * 100) / 100);
+        createRenderEffect((_$p) => setStyleProperty(_el$8, "transform", `translate3d(${bridge.labelX}px, ${bridge.labelY}px, 0) translate(-50%, -50%)`));
+        return _el$8;
+      })()
+    }), null);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.state().lines;
+      },
+      children: (line) => createComponent(RulerLineItem, {
+        line,
+        get isDragging() {
+          return draggingId() === line.id;
+        },
+        get isHovered() {
+          return hoveredId() === line.id;
+        },
+        get isSelected() {
+          return selectedIds().has(line.id);
+        },
+        get onLineClick() {
+          return props.onLineClick;
+        },
+        get viewport() {
+          return props.viewport;
+        }
+      })
+    }), null);
+    return _el$;
+  })();
+}
+function RulerLineItem(props) {
+  const lineStyle = createMemo(() => {
+    const isV = props.line.type === "vertical";
+    const pos = props.line.position;
+    const isActive = props.isDragging || props.isHovered || props.isSelected;
+    return {
+      left: "0",
+      top: "0",
+      width: isV ? "1px" : "100%",
+      height: isV ? "100%" : "1px",
+      transform: `translate3d(${isV ? pos : 0}px, ${isV ? 0 : pos}px, 0) ${isActive ? isV ? "scaleX(1.5)" : "scaleY(1.5)" : "scale(1)"}`,
+      opacity: props.isSelected ? "1" : props.isHovered ? "0.8" : "0.6",
+      filter: props.isSelected ? "drop-shadow(0 0 1.5px var(--caliper-primary))" : "none",
+      "transform-origin": "center"
+    };
+  });
+  const hitSize = createMemo(() => `${RULER_HIT_SIZE}px`);
+  const hitOffset = createMemo(() => (RULER_HIT_SIZE - 1) / 2);
+  return [(() => {
+    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";
+      _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);
+      _v$14 !== _p$.o && setStyleProperty(_el$9, "height", _p$.o = _v$14);
+      _v$15 !== _p$.i && setStyleProperty(_el$9, "transform", _p$.i = _v$15);
+      _v$16 !== _p$.n && setStyleProperty(_el$9, "cursor", _p$.n = _v$16);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$9;
+  })(), (() => {
+    var _el$0 = _tmpl$52();
+    className(_el$0, `${PREFIX}ruler-line-visual`);
+    createRenderEffect((_$p) => style(_el$0, {
+      ...lineStyle()
+    }, _$p));
+    return _el$0;
+  })(), createComponent(Show, {
+    get when() {
+      return props.isDragging || props.isHovered || props.isSelected;
+    },
+    get children() {
+      var _el$1 = _tmpl$35();
+      _el$1.$$click = (e) => {
+        e.stopPropagation();
+        const isV = props.line.type === "vertical";
+        const vp = props.viewport();
+        props.onLineClick?.({
+          type: "distance",
+          value: props.line.position,
+          start: isV ? {
+            x: props.line.position,
+            y: 0
+          } : {
+            x: 0,
+            y: props.line.position
+          },
+          end: isV ? {
+            x: props.line.position,
+            y: vp.height
+          } : {
+            x: vp.width,
+            y: props.line.position
+          }
+        }, props.line.position);
+      };
+      className(_el$1, `${PREFIX}label ${PREFIX}ruler-label`);
+      insert(_el$1, () => Math.round(props.line.position * 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";
+        _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$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$1;
+    }
+  })];
+}
+delegateEvents(["pointerdown", "dblclick", "pointerover", "pointerout", "click"]);
+var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+function Overlay(props) {
+  const resultData = createMemo(() => {
+    const res = props.result();
+    if (!res) return null;
+    props.viewport().version;
+    const primaryGeo = getLiveGeometry(res.primary, res.primaryHierarchy, res.primaryPosition, res.primarySticky, res.primaryWinX, res.primaryWinY);
+    if (!primaryGeo) return null;
+    return {
+      primary: {
+        geo: primaryGeo,
+        delta: getTotalScrollDelta(res.primaryHierarchy, res.primaryPosition, res.primarySticky, res.primaryWinX, res.primaryWinY)
+      },
+      secondary: {
+        geo: getLiveGeometry(res.secondary, res.secondaryHierarchy, res.secondaryPosition, res.secondarySticky, res.secondaryWinX, res.secondaryWinY),
+        delta: getTotalScrollDelta(res.secondaryHierarchy, res.secondaryPosition, res.secondarySticky, res.secondaryWinX, res.secondaryWinY)
+      },
+      common: getCommonVisibilityWindow(res.primaryHierarchy, res.secondaryHierarchy, props.selectionMetadata().element, res.secondaryElement),
+      isSameContext: !!(res.primaryPosition === res.secondaryPosition && res.primaryHierarchy.length === res.secondaryHierarchy.length && res.primaryHierarchy.every((p, i) => p.element === res.secondaryHierarchy[i]?.element) || res.primaryHierarchy.length > 0 && res.primaryHierarchy[0]?.element === res.secondaryElement || res.secondaryHierarchy.length > 0 && res.secondaryHierarchy[0]?.element === props.selectionMetadata().element)
+    };
+  });
+  return [createComponent(BoundaryBoxes, {
+    get metadata() {
+      return props.selectionMetadata();
+    },
+    get result() {
+      return props.result();
+    },
+    get isAltPressed() {
+      return props.isAltPressed();
+    },
+    get isFrozen() {
+      return props.isFrozen();
+    },
+    get animation() {
+      return props.animation;
+    },
+    get viewport() {
+      return props.viewport();
+    }
+  }), createComponent(SelectionLabel, {
+    get metadata() {
+      return props.selectionMetadata();
+    },
+    get isAltPressed() {
+      return props.isAltPressed();
+    },
+    get viewport() {
+      return props.viewport();
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!(props.isAltPressed() || props.isFrozen()))() && resultData();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          var _el$ = _tmpl$11();
+          className(_el$, `${PREFIX}overlay`);
+          insert(_el$, createComponent(MeasurementLinesWithCalculator, {
+            get lines() {
+              return props.result().lines;
+            },
+            get data() {
+              return resultData();
+            },
+            get viewport() {
+              return props.viewport();
+            },
+            get onLineClick() {
+              return props.onLineClick;
+            }
+          }), null);
+          insert(_el$, createComponent(MeasurementLabels, {
+            get lines() {
+              return props.result().lines;
+            },
+            get data() {
+              return resultData();
+            },
+            get viewport() {
+              return props.viewport();
+            },
+            get onLineClick() {
+              return props.onLineClick;
+            }
+          }), null);
+          return _el$;
+        }
+      });
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!props.calculatorState)() && props.calculatorState() !== null;
+    },
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          return createComponent(Calculator, {
+            get state() {
+              return props.calculatorState();
+            },
+            get onClose() {
+              return props.onCalculatorClose || (() => {
+              });
+            },
+            get position() {
+              return {
+                x: props.cursor().x,
+                y: props.cursor().y
+              };
+            },
+            get isFocused() {
+              return props.activeFocus?.() === "calculator";
+            }
+          });
+        }
+      });
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!(props.projectionState && props.projectionState()?.direction !== null))() && props.projectionState()?.element === props.selectionMetadata().element;
+    },
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          return createComponent(ProjectionOverlay, {
+            get projectionState() {
+              return props.projectionState;
+            },
+            get metadata() {
+              return props.selectionMetadata;
+            },
+            get viewport() {
+              return props.viewport;
+            },
+            get isFocused() {
+              return props.activeFocus?.() === "projection";
+            },
+            get onLineClick() {
+              return props.onLineClick;
+            }
+          });
+        }
+      });
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!props.rulerState)() && props.rulerState().lines.length > 0;
+    },
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return document.body;
+        },
+        get children() {
+          return createComponent(RulerOverlay, {
+            get state() {
+              return props.rulerState;
+            },
+            get viewport() {
+              return props.viewport;
+            },
+            get projectionState() {
+              return props.projectionState;
+            },
+            get metadata() {
+              return props.selectionMetadata;
+            },
+            get result() {
+              return props.result;
+            },
+            get onUpdate() {
+              return props.onRulerUpdate || (() => {
+              });
+            },
+            get onRemove() {
+              return props.onRulerRemove || (() => {
+              });
+            },
+            get onLineClick() {
+              return props.onLineClick;
+            }
+          });
+        }
+      });
+    }
+  })];
+}
+function Root(config) {
+  const {
+    commands,
+    animation
+  } = config;
+  const [result, setResult] = createSignal(null);
+  const [cursor, setCursor] = createSignal({
+    x: 0,
+    y: 0
+  });
+  const [viewport, setViewport] = createSignal({
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+    version: 0
+  });
+  const [selectionMetadata, setSelectionMetadata] = createSignal({
+    element: null,
+    rect: null,
+    scrollHierarchy: [],
+    position: "static",
+    initialWindowX: 0,
+    initialWindowY: 0
+  });
+  const [calculatorState, setCalculatorState] = createSignal(null);
+  const [projectionState, setProjectionState] = createSignal({
+    direction: null,
+    value: "",
+    element: null
+  });
+  const [activeCalculatorLine, setActiveCalculatorLine] = createSignal(null);
+  const [isSelectKeyDown, setIsSelectKeyDown] = createSignal(false);
+  const [activeInputFocus, setActiveInputFocus] = createSignal("calculator");
+  let system = null;
+  let selectionSystem = null;
+  let projectionSystem = null;
+  let rulerSystem = null;
+  const [rulerState, setRulerState] = createSignal({
+    lines: []
+  });
+  const [isAltPressed, setIsAltPressed] = createSignal(false);
+  const [isFrozen, setIsFrozen] = createSignal(false);
+  let viewportRafId = null;
+  let resizeObserver = null;
+  let observedPrimary = null;
+  let observedSecondary = null;
+  const syncViewport = () => {
+    setViewport((prev) => ({
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight,
+      version: (prev.version || 0) + 1
+    }));
+    viewportRafId = null;
+  };
+  const scheduleUpdate = () => {
+    if (!viewportRafId) {
+      viewportRafId = requestAnimationFrame(syncViewport);
+    }
+  };
+  onMount(() => {
+    selectionSystem = createSelectionSystem();
+    system = createMeasurementSystem();
+    projectionSystem = createProjectionSystem();
+    const unsubscribeProjection = projectionSystem.onUpdate((state) => {
+      setProjectionState(state);
+      if (state.direction === null) {
+        if (calculatorState()?.isActive) {
+          setActiveInputFocus("calculator");
+        }
+        if (system?.getState() === "FROZEN") {
+          system?.unfreeze(false);
+        }
+      }
+    });
+    rulerSystem = createRulerSystem();
+    const unsubscribeRuler = rulerSystem.onUpdate((state) => {
+      setRulerState(state);
+    });
+    const unsubscribe = system.onStateChange(() => {
+      if (!system) return;
+      setResult(system.getCurrentResult());
+      setIsFrozen(system.getState() === "FROZEN");
+    });
+    const currentResult = system.getCurrentResult();
+    setResult(currentResult);
+    const unsubscribeUpdate = selectionSystem.onUpdate((metadata) => {
+      setSelectionMetadata(metadata);
+    });
+    let selectionTimeoutId = null;
+    let lastPointerPos = {
+      x: 0,
+      y: 0
+    };
+    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();
+        }
+        lastHoveredElement = null;
+        selectionDelegate.cancel();
+        measureDelegate.cancel();
+        selectionSystem.select(element);
+      }
+    };
+    const isCommandActive = (e) => {
+      const {
+        ctrlKey,
+        metaKey,
+        altKey,
+        shiftKey
+      } = e;
+      const key = commands.select;
+      const modifiers = {
+        Control: ctrlKey,
+        Meta: metaKey,
+        Alt: altKey,
+        Shift: shiftKey
+      };
+      if (key in modifiers) {
+        return Object.entries(modifiers).every(([name, value]) => name === key ? value === true : value === false);
+      }
+      return isSelectKeyDown() && !ctrlKey && !metaKey && !altKey && !shiftKey;
+    };
+    const handlePointerDown = (e) => {
+      lastPointerPos = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      if (isCommandActive(e)) {
+        e.preventDefault();
+        if (selectionTimeoutId) window.clearTimeout(selectionTimeoutId);
+        selectionTimeoutId = window.setTimeout(() => {
+          performSelection(lastPointerPos.x, lastPointerPos.y);
+          selectionTimeoutId = null;
+        }, commands.selectionHoldDuration);
+      } else {
+        if (selectionTimeoutId) window.clearTimeout(selectionTimeoutId);
+      }
+    };
+    const handlePointerUp = (e) => {
+      if (selectionTimeoutId) {
+        window.clearTimeout(selectionTimeoutId);
+        selectionTimeoutId = null;
+      }
+      const target = e.target;
+      if (target.closest(`[data-caliper-ignore]`) || target.closest(`.${PREFIX}projection-input`)) {
+        if (target.closest(`.${PREFIX}projection-input`)) {
+          setActiveInputFocus("projection");
+        } else if (target.closest(`.${PREFIX}calculator`)) {
+          setActiveInputFocus("calculator");
+        }
+      }
+    };
+    const handleContextMenu = (e) => {
+      if (isCommandActive(e)) {
+        e.preventDefault();
+      }
+    };
+    let lastMouseEvent = null;
+    let mouseMoveRafId = null;
+    let lastHoveredElement = null;
+    const selectionDelegate = createSuppressionDelegate((el) => {
+      lastHoveredElement = el;
+      selectionSystem?.select(el);
+    });
+    const measureDelegate = createSuppressionDelegate((el, cursor2, hover) => {
+      if (hover) {
+        lastHoveredElement = hover;
+      }
+      system?.measure(el, cursor2);
+    });
+    const processMouseMove = () => {
+      if (!lastMouseEvent || !selectionSystem) {
+        mouseMoveRafId = null;
+        return;
+      }
+      const e = lastMouseEvent;
+      const cursorPoint = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      setCursor(cursorPoint);
+      const selectedElement = selectionSystem.getSelected();
+      const isAlt = isAltPressed();
+      const state = system?.getState();
+      if (selectedElement) {
+        const hoveredElement = getTopElementAtPoint(e.clientX, e.clientY);
+        const isAncestor = hoveredElement && lastHoveredElement && hoveredElement.contains(lastHoveredElement) && hoveredElement !== lastHoveredElement;
+        if (isAlt) {
+          if (system) {
+            measureDelegate.execute(!!isAncestor, selectedElement, cursorPoint, hoveredElement);
+          }
+        } else if (state !== "FROZEN") {
+          if (hoveredElement) {
+            selectionDelegate.execute(!!isAncestor, hoveredElement);
+          }
+        }
+      }
+      mouseMoveRafId = null;
+    };
+    const handleMouseMove = (e) => {
+      lastMouseEvent = e;
+      lastPointerPos = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      if (!mouseMoveRafId) {
+        mouseMoveRafId = requestAnimationFrame(processMouseMove);
+      }
+    };
+    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 (projectionSystem) {
+          projectionSystem.clear();
+        }
+        if (rulerSystem) {
+          rulerSystem.clear();
+        }
+        if (system) {
+          system.abort();
+          const calc = system.getCalculator();
+          calc.close();
+          setResult(null);
+        }
+        return;
+      }
+      if (e.key === commands.select) {
+        setIsSelectKeyDown(true);
+      }
+      if (e.key.toLowerCase() === commands.ruler && e.shiftKey && rulerSystem) {
+        e.preventDefault();
+        const vp = viewport();
+        const x = Math.max(0, Math.min(cursor().x, vp.width));
+        const y = Math.max(0, Math.min(cursor().y, vp.height));
+        rulerSystem.addPair(x, y);
+        return;
+      }
+      const isAltKey = e.key === "Alt" || e.key === "AltGraph" || e.key === commands.activate;
+      if (isAltKey) {
+        e.preventDefault();
+        if (!isAltPressed()) {
+          if (system) {
+            system.abort();
+            setResult(null);
+            handleCalculatorClose();
+          }
+          if (projectionSystem) {
+            projectionSystem.clear();
+          }
+        }
+        setIsAltPressed(true);
+      } else if (e.key === commands.freeze && e.target === document.body && system) {
+        const state = system.getState();
+        if (state === "FROZEN") {
+          e.preventDefault();
+          system.unfreeze(isAltPressed());
+        } else if (selectionMetadata().element) {
+          e.preventDefault();
+          system.freeze();
+        }
+      } else {
+        const key = e.key.toLowerCase();
+        const {
+          calculator,
+          projection
+        } = commands;
+        const isCalcActive = !!calculatorState();
+        const isProjActive = projectionState().direction !== null;
+        const shouldCalcGetNumbers = isCalcActive && (activeInputFocus() === "calculator" || !isProjActive);
+        if (isCalcActive && (shouldCalcGetNumbers || !/^\d$/.test(e.key))) {
+          const isNumeric = /^[0-9]$/.test(e.key);
+          const isOperator = /^[+\-*/]$/.test(e.key);
+          const isDecimal = e.key === ".";
+          const isBackspace = e.key === "Backspace";
+          const isDelete = e.key === "Delete";
+          const isEnter = e.key === "Enter";
+          const isEscape = e.key === "Escape";
+          if (isNumeric || isOperator || isDecimal || isBackspace || isDelete || isEnter || isEscape) {
+            if ((isNumeric || isBackspace || isDecimal) && !shouldCalcGetNumbers) ; else {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+              if (isNumeric || isOperator || isDecimal) handleCalculatorInput(e.key);
+              else if (isBackspace) handleCalculatorBackspace();
+              else if (isDelete) handleCalculatorDelete();
+              else if (isEnter) handleCalculatorEnter();
+              else if (isEscape) handleCalculatorClose();
+              return;
+            }
+          }
+        }
+        const dirMap = {
+          [projection.top]: "top",
+          [projection.left]: "left",
+          [projection.bottom]: "bottom",
+          [projection.right]: "right"
+        };
+        const dir = dirMap[key];
+        if (dir && selectionMetadata().element) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          setActiveInputFocus("projection");
+          const currentElement = selectionMetadata().element;
+          if (currentElement) {
+            projectionSystem?.setElement(currentElement);
+          }
+          projectionSystem?.setDirection(dir);
+          if (system) {
+            system.freeze();
+          }
+          const getRunway = (dir2) => {
+            const metadata = selectionMetadata();
+            const live = getLiveGeometry(metadata.rect, metadata.scrollHierarchy, metadata.position, metadata.stickyConfig, metadata.initialWindowX, metadata.initialWindowY);
+            if (!live) return void 0;
+            return getMaxProjectionDistance(dir2, live);
+          };
+          const maxRunway = getRunway(dir);
+          if (maxRunway !== void 0) projectionSystem?.capValue(maxRunway);
+          return;
+        }
+        if (isProjActive) {
+          const isNumeric = /^[0-9.]$/.test(key);
+          const isBackspace = e.key === "Backspace";
+          const hasPriority = activeInputFocus() === "projection" || !isCalcActive;
+          if ((isNumeric || isBackspace) && hasPriority) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            const currentDir = projectionState().direction;
+            if (isNumeric && currentDir) {
+              const metadata = selectionMetadata();
+              const live = getLiveGeometry(metadata.rect, metadata.scrollHierarchy, metadata.position, metadata.stickyConfig, metadata.initialWindowX, metadata.initialWindowY);
+              let max;
+              if (live) {
+                max = getMaxProjectionDistance(currentDir, live);
+              }
+              projectionSystem?.appendValue(key, max);
+            } else if (isBackspace) {
+              projectionSystem?.backspace();
+            }
+            return;
+          }
+        }
+        if (isFrozen() && result()) {
+          const typeMap = {
+            [calculator.top]: "top",
+            [calculator.right]: "right",
+            [calculator.bottom]: "bottom",
+            [calculator.left]: "left",
+            [calculator.distance]: "distance"
+          };
+          const targetType = typeMap[key];
+          if (targetType) {
+            e.preventDefault();
+            const currentLines = result()?.lines || [];
+            const targetLine = currentLines.find((l) => l.type === targetType);
+            if (targetLine) {
+              const liveValue = getLiveLineValue(targetLine, result());
+              handleLineClick(targetLine, liveValue);
+            }
+          }
+        }
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (e.key === commands.select) {
+        setIsSelectKeyDown(false);
+      }
+      const isAltKey = e.key === "Alt" || e.key === "AltGraph" || e.key === commands.activate;
+      if (isAltKey) {
+        e.preventDefault();
+        if (isAltPressed()) {
+          setIsAltPressed(false);
+          if (system) {
+            system.stop();
+          }
+        }
+      }
+    };
+    const handleBlur = () => {
+      if (isAltPressed()) {
+        setIsAltPressed(false);
+        if (system) {
+          system.stop();
+          setResult(null);
+        }
+      }
+    };
+    window.addEventListener("pointerdown", handlePointerDown, {
+      capture: true
+    });
+    window.addEventListener("pointerup", handlePointerUp, {
+      capture: true
+    });
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("keydown", handleKeyDown, {
+      capture: true
+    });
+    window.addEventListener("keyup", handleKeyUp, {
+      capture: true
+    });
+    window.addEventListener("contextmenu", handleContextMenu, {
+      capture: true
+    });
+    window.addEventListener("blur", handleBlur);
+    onCleanup(() => {
+      window.removeEventListener("pointerdown", handlePointerDown, {
+        capture: true
+      });
+      window.removeEventListener("pointerup", handlePointerUp, {
+        capture: true
+      });
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("keydown", handleKeyDown, {
+        capture: true
+      });
+      window.removeEventListener("keyup", handleKeyUp, {
+        capture: true
+      });
+      window.removeEventListener("contextmenu", handleContextMenu, {
+        capture: true
+      });
+      window.removeEventListener("blur", handleBlur);
+      if (mouseMoveRafId) {
+        cancelAnimationFrame(mouseMoveRafId);
+      }
+      selectionDelegate.cancel();
+      measureDelegate.cancel();
+      unsubscribe();
+      unsubscribeUpdate();
+      unsubscribeProjection();
+      unsubscribeRuler();
+      handleCleanup();
+      if (projectionSystem) {
+        projectionSystem = null;
+      }
+      if (rulerSystem) {
+        rulerSystem = null;
+      }
+    });
+  });
+  createEffect(() => {
+    const active = !!selectionMetadata().element || !!result();
+    if (active) {
+      window.addEventListener("scroll", scheduleUpdate, {
+        passive: true,
+        capture: true
+      });
+      syncViewport();
+      onCleanup(() => {
+        window.removeEventListener("scroll", scheduleUpdate, {
+          capture: true
+        });
+        if (viewportRafId) {
+          cancelAnimationFrame(viewportRafId);
+          viewportRafId = null;
+        }
+      });
+    }
+  });
+  const updateResizeObservations = (primaryEl, secondaryEl) => {
+    if (!resizeObserver) return;
+    if (primaryEl === observedPrimary && secondaryEl === observedSecondary) {
+      return;
+    }
+    if (observedPrimary && observedPrimary !== primaryEl) {
+      resizeObserver.unobserve(observedPrimary);
+      observedPrimary = null;
+    }
+    if (observedSecondary && observedSecondary !== secondaryEl && observedSecondary !== primaryEl) {
+      resizeObserver.unobserve(observedSecondary);
+      observedSecondary = null;
+    }
+    if (primaryEl && primaryEl !== observedPrimary) {
+      resizeObserver.observe(primaryEl);
+      observedPrimary = primaryEl;
+    }
+    if (secondaryEl && secondaryEl !== primaryEl && secondaryEl !== observedSecondary) {
+      resizeObserver.observe(secondaryEl);
+      observedSecondary = secondaryEl;
+    }
+  };
+  createEffect(() => {
+    let resizeTimer = null;
+    let lastRun = 0;
+    let sentinelResized = false;
+    let primaryChanged = false;
+    let secondaryChanged = false;
+    const runUpdates2 = () => {
+      if (sentinelResized || primaryChanged) {
+        if (observedPrimary) {
+          const rect = observedPrimary.getBoundingClientRect();
+          selectionSystem?.updateRect(rect);
+          if (system) system.updatePrimaryRect(rect);
+        }
+      }
+      if (sentinelResized || secondaryChanged) {
+        if (observedSecondary) {
+          const rect = observedSecondary.getBoundingClientRect();
+          system?.updateSecondaryRect(rect);
+        }
+      }
+      sentinelResized = false;
+      primaryChanged = false;
+      secondaryChanged = false;
+    };
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === document.documentElement) {
+          sentinelResized = true;
+        } else if (entry.target === observedPrimary) {
+          primaryChanged = true;
+        } else if (entry.target === observedSecondary) {
+          secondaryChanged = true;
+        }
+      }
+      if (sentinelResized) {
+        scheduleUpdate();
+      }
+      const now = Date.now();
+      const remaining = RESIZE_THROTTLE_MS - (now - lastRun);
+      if (remaining <= 0) {
+        if (resizeTimer) clearTimeout(resizeTimer);
+        lastRun = now;
+        runUpdates2();
+      } else if (!resizeTimer) {
+        resizeTimer = window.setTimeout(() => {
+          lastRun = Date.now();
+          resizeTimer = null;
+          runUpdates2();
+        }, remaining);
+      }
+    });
+    resizeObserver.observe(document.documentElement);
+    onCleanup(() => {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      observedPrimary = null;
+      observedSecondary = null;
+      if (resizeTimer) clearTimeout(resizeTimer);
+    });
+  });
+  createEffect(() => {
+    const primaryEl = selectionMetadata().element;
+    const currentResult = result();
+    const secondaryEl = isFrozen() ? currentResult?.secondaryElement ?? null : null;
+    if (!primaryEl && !secondaryEl) {
+      updateResizeObservations(null, null);
+      return;
+    }
+    updateResizeObservations(primaryEl, secondaryEl);
+  });
+  createEffect(() => {
+    const calcLine = activeCalculatorLine();
+    const currentResult = result();
+    if (calcLine && currentResult && system) {
+      const state = untrack(() => calculatorState());
+      if (state?.isActive) {
+        viewport().version;
+        const matchingLine = currentResult.lines.find((l) => l.type === calcLine.type);
+        if (matchingLine) {
+          const liveValue = getLiveLineValue(matchingLine, currentResult);
+          const calc = system.getCalculator();
+          calc.syncValue(liveValue);
+          setCalculatorState(calc.getState());
+        }
+      }
+    }
+  });
+  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);
+      if ("startSync" in line) {
+        setActiveCalculatorLine(line);
+      }
+    }
+  };
+  const handleCalculatorInput = (key) => {
+    if (system) {
+      const calc = system.getCalculator();
+      calc.handleInput(key);
+      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");
+      }
+    }
+  };
+  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");
+        }
+      }
+    }
+  };
+  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");
+      }
+    }
+  };
+  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");
+      }
+    }
+  };
+  const handleCalculatorClose = () => {
+    if (system) {
+      const calc = system.getCalculator();
+      calc.close();
+      setCalculatorState(null);
+      setActiveCalculatorLine(null);
+      if (projectionState().direction !== null) {
+        setActiveInputFocus("projection");
+      }
+    }
+  };
+  const handleRulerUpdate = (id, position) => {
+    rulerSystem?.updateLine(id, position);
+  };
+  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,
+    isFrozen,
+    animation,
+    viewport,
+    calculatorState,
+    projectionState,
+    rulerState,
+    activeFocus: activeInputFocus,
+    onLineClick: handleLineClick,
+    onRulerUpdate: handleRulerUpdate,
+    onRulerRemove: handleRulerRemove,
+    onCalculatorClose: handleCalculatorClose
+  });
+}
+function getMaxProjectionDistance(dir, live) {
+  const docWidth = document.documentElement.scrollWidth;
+  const docHeight = document.documentElement.scrollHeight;
+  switch (dir) {
+    case "top":
+      return live.top;
+    case "bottom":
+      return docHeight - (live.top + live.height);
+    case "left":
+      return live.left;
+    case "right":
+      return docWidth - (live.left + live.width);
+  }
+}
+var styleElement = null;
+var injectionCount = 0;
+function injectStyles() {
+  if (styleElement) {
+    injectionCount++;
+    return;
+  }
+  styleElement = document.createElement("style");
+  styleElement.textContent = OVERLAY_STYLES;
+  styleElement.setAttribute("data-caliper-styles", "true");
+  const head = document.head || document.getElementsByTagName("head")[0];
+  head.appendChild(styleElement);
+  injectionCount = 1;
+}
+function removeStyles() {
+  if (!styleElement) {
+    return;
+  }
+  injectionCount--;
+  if (injectionCount <= 0) {
+    styleElement.remove();
+    styleElement = null;
+    injectionCount = 0;
+  }
+}
+var IS_BROWSER2 = typeof window !== "undefined";
+var activeInstance = null;
+function createOverlay(config) {
+  if (!IS_BROWSER2) {
+    return {
+      mount: () => {
+      },
+      dispose: () => {
+      },
+      mounted: false
+    };
+  }
+  if (activeInstance?.mounted) {
+    return activeInstance;
+  }
+  if (window.__CALIPER__?.mounted) {
+    activeInstance = window.__CALIPER__;
+    return activeInstance;
+  }
+  const windowConfig = getConfig();
+  const mergedConfig = {
+    theme: { ...windowConfig?.theme, ...config?.theme },
+    commands: {
+      ...windowConfig?.commands,
+      ...config?.commands,
+      calculator: {
+        ...windowConfig?.commands?.calculator,
+        ...config?.commands?.calculator
+      },
+      projection: {
+        ...windowConfig?.commands?.projection,
+        ...config?.commands?.projection
+      }
+    },
+    animation: { ...windowConfig?.animation, ...config?.animation }
+  };
+  const commands = mergeCommands(mergedConfig.commands);
+  const animation = mergeAnimation(mergedConfig.animation);
+  let cleanup = null;
+  const instance = {
+    mounted: false,
+    mount: (container) => {
+      if (instance.mounted) return;
+      if (document.getElementById("caliper-overlay-root")) {
+        instance.mounted = true;
+        return;
+      }
+      if (mergedConfig.theme) {
+        applyTheme(mergedConfig.theme);
+      }
+      const target = container || document.body;
+      injectStyles();
+      const overlayContainer = document.createElement("div");
+      overlayContainer.id = "caliper-overlay-root";
+      target.appendChild(overlayContainer);
+      const disposeRender = render(() => Root({ commands, animation }), overlayContainer);
+      cleanup = () => {
+        disposeRender();
+        overlayContainer.remove();
+        removeStyles();
+        instance.mounted = false;
+        if (activeInstance === instance) activeInstance = null;
+      };
+      instance.mounted = true;
+    },
+    dispose: () => {
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+    }
+  };
+  activeInstance = instance;
+  window.__CALIPER__ = instance;
+  if (IS_BROWSER2) {
+    instance.mount();
+  }
+  return instance;
+}
+if (IS_BROWSER2) {
+  showVersionInfo("0.1.0").catch(() => {
+  });
+}
+
+// src/index.ts
+var VERSION = "0.1.0";
+
+exports.VERSION = VERSION;
+exports.getConfig = getConfig;
+exports.init = createOverlay;
+exports.setConfig = setConfig;