mesurer 0.0.0 → 0.0.1

package/dist/index.js

@@ -0,0 +1,3688 @@
+// index.ts
+import "./styles.css";
+
+// measurer.tsx
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect9,
+  useMemo as useMemo2,
+  useRef as useRef8,
+  useState as useState9,
+  useSyncExternalStore
+} from "react";
+import { createPortal } from "react-dom";
+
+// components/toolbar.tsx
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+
+// utils.ts
+var formatValue = (value) => Math.round(value);
+var cn = (...inputs) => inputs.filter(Boolean).join(" ");
+var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`;
+
+// components/icons.tsx
+import { jsx } from "react/jsx-runtime";
+var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    ...props
+  }
+);
+var CursorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M166.59,134.1a1.91,1.91,0,0,1-.55-1.79,2,2,0,0,1,1.08-1.42l46.25-17.76.24-.1A14,14,0,0,0,212.38,87L52.29,34.7A13.95,13.95,0,0,0,34.7,52.29L87,212.38a13.82,13.82,0,0,0,12.6,9.6c.23,0,.46,0,.69,0A13.84,13.84,0,0,0,113,213.61a2.44,2.44,0,0,0,.1-.24l17.76-46.25a2,2,0,0,1,3.21-.53l51.31,51.31a14,14,0,0,0,19.8,0l12.69-12.69a14,14,0,0,0,0-19.8Zm42.82,62.63-12.68,12.68a2,2,0,0,1-2.83,0L142.59,158.1a14,14,0,0,0-22.74,4.32,2.44,2.44,0,0,0-.1.24L102,208.91a2,2,0,0,1-3.61-.26L46.11,48.57a1.87,1.87,0,0,1,.47-2A1.92,1.92,0,0,1,47.93,46a2.22,2.22,0,0,1,.64.1L208.65,98.38a2,2,0,0,1,.26,3.61l-46.25,17.76-.24.1a14,14,0,0,0-4.32,22.74h0l51.31,51.31A2,2,0,0,1,209.41,196.73Z" }) });
+var RulerIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M233.91,74.79,181.22,22.1a14,14,0,0,0-19.8,0L22.09,161.41a14,14,0,0,0,0,19.8L74.78,233.9a14,14,0,0,0,19.8,0L233.91,94.59A14,14,0,0,0,233.91,74.79ZM225.42,86.1,86.1,225.41h0a2,2,0,0,1-2.83,0L30.58,172.73a2,2,0,0,1,0-2.83L64,136.48l27.76,27.76a6,6,0,1,0,8.48-8.48L72.48,128,96,104.48l27.76,27.76a6,6,0,0,0,8.48-8.48L104.48,96,128,72.49l27.76,27.75a6,6,0,0,0,8.48-8.48L136.49,64,169.9,30.59a2,2,0,0,1,2.83,0l52.69,52.68A2,2,0,0,1,225.42,86.1Z" }) });
+var CaretDownIcon = ({ size = 8, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) });
+var CheckIcon = ({ size = 12, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }) });
+var MinusIcon = ({ size = 12, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" }) });
+
+// components/toolbar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TOOLBAR_TOOLTIP_DELAY_MS = 800;
+var TOOLBAR_DRAG_SLOP = 6;
+function ToolbarButton({
+  id,
+  active,
+  label,
+  shortcut,
+  onClick,
+  tooltipVisible,
+  tooltipSide,
+  onTooltipEnter,
+  onTooltipLeave,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      onMouseEnter: () => onTooltipEnter(id),
+      onMouseLeave: () => onTooltipLeave(id),
+      children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${label} (${shortcut})`,
+            title: `${label} (${shortcut})`,
+            className: cn(
+              "flex size-8 items-center justify-center rounded-[8px] outline-none",
+              active ? "bg-[#0d99ff] text-white" : "bg-transparent text-black hover:bg-black/4"
+            ),
+            onClick,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-[11px] text-white transition-opacity duration-150 select-none",
+              tooltipSide === "top" ? "bottom-full mb-2" : "top-full mt-2",
+              tooltipVisible ? "opacity-100" : "opacity-0"
+            ),
+            children: [
+              label,
+              " ",
+              /* @__PURE__ */ jsx2("kbd", { className: "text-white/60", children: shortcut })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function useToolbarTooltip() {
+  const [visibleTooltipId, setVisibleTooltipId] = useState(null);
+  const timerRef = useRef(null);
+  const instantRef = useRef(false);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current === null) return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const onTooltipEnter = useCallback(
+    (id) => {
+      clearTimer();
+      if (instantRef.current) {
+        setVisibleTooltipId(id);
+        return;
+      }
+      timerRef.current = window.setTimeout(() => {
+        setVisibleTooltipId(id);
+        instantRef.current = true;
+        timerRef.current = null;
+      }, TOOLBAR_TOOLTIP_DELAY_MS);
+    },
+    [clearTimer]
+  );
+  const onTooltipLeave = useCallback(
+    (id) => {
+      clearTimer();
+      setVisibleTooltipId((prev) => prev === id ? null : prev);
+    },
+    [clearTimer]
+  );
+  const onToolbarLeave = useCallback(() => {
+    clearTimer();
+    setVisibleTooltipId(null);
+    instantRef.current = false;
+  }, [clearTimer]);
+  useEffect(() => {
+    return () => {
+      clearTimer();
+    };
+  }, [clearTimer]);
+  return { visibleTooltipId, onTooltipEnter, onTooltipLeave, onToolbarLeave };
+}
+function useToolbarDrag(initialPosition) {
+  const [position, setPosition] = useState(initialPosition);
+  const suppressClickRef = useRef(false);
+  const detachListenersRef = useRef(null);
+  const dragRef = useRef({
+    active: false,
+    didDrag: false,
+    pointerId: -1,
+    startX: 0,
+    startY: 0,
+    originX: 0,
+    originY: 0,
+    width: 0,
+    height: 0
+  });
+  const onPointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0) return;
+      if (detachListenersRef.current) {
+        detachListenersRef.current();
+        detachListenersRef.current = null;
+      }
+      const state = dragRef.current;
+      state.active = false;
+      state.didDrag = false;
+      state.pointerId = event.pointerId;
+      state.startX = event.clientX;
+      state.startY = event.clientY;
+      state.originX = position.x;
+      state.originY = position.y;
+      const rect = event.currentTarget.getBoundingClientRect();
+      state.width = rect.width;
+      state.height = rect.height;
+      const handlePointerMove = (moveEvent) => {
+        const current = dragRef.current;
+        if (current.pointerId !== moveEvent.pointerId) return;
+        const dx = moveEvent.clientX - current.startX;
+        const dy = moveEvent.clientY - current.startY;
+        if (!current.active) {
+          current.active = Math.abs(dx) > TOOLBAR_DRAG_SLOP || Math.abs(dy) > TOOLBAR_DRAG_SLOP;
+        }
+        if (!current.active) return;
+        current.didDrag = true;
+        const maxX = Math.max(8, window.innerWidth - current.width - 8);
+        const maxY = Math.max(8, window.innerHeight - current.height - 8);
+        setPosition({
+          x: Math.min(maxX, Math.max(8, current.originX + dx)),
+          y: Math.min(maxY, Math.max(8, current.originY + dy))
+        });
+      };
+      const handlePointerEnd = (endEvent) => {
+        const current = dragRef.current;
+        if (current.pointerId !== endEvent.pointerId && current.pointerId !== -1)
+          return;
+        suppressClickRef.current = current.didDrag;
+        current.active = false;
+        current.didDrag = false;
+        current.pointerId = -1;
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerEnd);
+        window.removeEventListener("pointercancel", handlePointerEnd);
+        detachListenersRef.current = null;
+      };
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerEnd);
+      window.addEventListener("pointercancel", handlePointerEnd);
+      detachListenersRef.current = () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerEnd);
+        window.removeEventListener("pointercancel", handlePointerEnd);
+      };
+    },
+    [position.x, position.y]
+  );
+  const onClickCapture = useCallback(
+    (event) => {
+      if (!suppressClickRef.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      suppressClickRef.current = false;
+    },
+    []
+  );
+  return { position, onPointerDown, onClickCapture };
+}
+function ToolbarComponent({
+  toolMode,
+  setEnabled,
+  setToolMode,
+  guideOrientation,
+  setGuideOrientation,
+  onInteract
+}, ref) {
+  const { position, onPointerDown, onClickCapture } = useToolbarDrag({
+    x: 16,
+    y: 16
+  });
+  const { visibleTooltipId, onTooltipEnter, onTooltipLeave, onToolbarLeave } = useToolbarTooltip();
+  const [guideMenuOpen, setGuideMenuOpen] = useState(false);
+  const guideMenuRef = useRef(null);
+  const guideMenuPanelRef = useRef(null);
+  const [activeMenuIndex, setActiveMenuIndex] = useState(0);
+  const [menuAlign, setMenuAlign] = useState("right");
+  const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight || 0;
+  const nearTop = position.y < 56;
+  const nearBottom = viewportHeight > 0 && position.y > viewportHeight - 56;
+  const tooltipSide = nearTop && !nearBottom ? "bottom" : "top";
+  const menuSide = nearBottom ? "top" : "bottom";
+  const selectMode = useCallback(() => {
+    setEnabled(true);
+    setToolMode((prev) => prev === "select" ? "none" : "select");
+    onInteract();
+  }, [onInteract, setEnabled, setToolMode]);
+  const guidesMode = useCallback(() => {
+    setEnabled(true);
+    setToolMode((prev) => prev === "guides" ? "none" : "guides");
+    onInteract();
+  }, [onInteract, setEnabled, setToolMode]);
+  const selectGuideOrientation = useCallback(
+    (orientation) => {
+      setEnabled(true);
+      setToolMode("guides");
+      setGuideOrientation(orientation);
+      onInteract();
+      setGuideMenuOpen(false);
+    },
+    [onInteract, setEnabled, setGuideOrientation, setToolMode]
+  );
+  useLayoutEffect(() => {
+    if (!guideMenuOpen) return;
+    const frame = requestAnimationFrame(() => {
+      guideMenuRef.current?.querySelector("[role='menu']")?.focus();
+      const panel = guideMenuPanelRef.current;
+      if (!panel) return;
+      const rect = panel.getBoundingClientRect();
+      if (rect.left < 8) {
+        setMenuAlign("left");
+        return;
+      }
+      if (rect.right > window.innerWidth - 8) {
+        setMenuAlign("right");
+      }
+    });
+    const handlePointerDown = (event) => {
+      if (!guideMenuRef.current) return;
+      if (guideMenuRef.current.contains(event.target)) return;
+      setGuideMenuOpen(false);
+    };
+    const handleResize = () => {
+      const panel = guideMenuPanelRef.current;
+      if (!panel) return;
+      const rect = panel.getBoundingClientRect();
+      if (rect.left < 8) {
+        setMenuAlign("left");
+        return;
+      }
+      if (rect.right > window.innerWidth - 8) {
+        setMenuAlign("right");
+      }
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [guideMenuOpen, guideOrientation]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "pointer-events-auto absolute z-[90] flex items-center gap-1 rounded-[12px] bg-[#fff] p-1 outline outline-transparent shadow-[0px_0px_.5px_rgba(0,0,0,.18),0px_3px_8px_rgba(0,0,0,.1),0px_1px_3px_rgba(0,0,0,.1)]",
+      style: { left: position.x, top: position.y },
+      onPointerDown: (event) => {
+        onInteract();
+        onPointerDown(event);
+      },
+      onClickCapture,
+      onMouseLeave: onToolbarLeave,
+      children: [
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
+          {
+            id: "select",
+            active: toolMode === "select",
+            label: "Select",
+            shortcut: "S",
+            onClick: selectMode,
+            tooltipVisible: visibleTooltipId === "select",
+            tooltipSide,
+            onTooltipEnter,
+            onTooltipLeave,
+            children: /* @__PURE__ */ jsx2(CursorIcon, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
+          {
+            id: "guides",
+            active: toolMode === "guides",
+            label: "Guides",
+            shortcut: "G",
+            onClick: guidesMode,
+            tooltipVisible: visibleTooltipId === "guides",
+            tooltipSide,
+            onTooltipEnter,
+            onTooltipLeave,
+            children: /* @__PURE__ */ jsx2(
+              RulerIcon,
+              {
+                size: 20,
+                className: cn(
+                  guideOrientation === "vertical" ? "rotate-[135deg]" : "rotate-[45deg]"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "group relative -ml-1 flex items-stretch",
+            ref: guideMenuRef,
+            onMouseEnter: () => onTooltipEnter("guide-menu"),
+            onMouseLeave: () => onTooltipLeave("guide-menu"),
+            children: [
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Guide orientation menu",
+                  title: "Guide orientation",
+                  className: cn(
+                    "flex h-8 w-4 items-center justify-center rounded-[6px] outline-none hover:bg-black/10",
+                    guideMenuOpen ? "bg-black/10 text-black" : "text-black"
+                  ),
+                  onClick: () => {
+                    onInteract();
+                    setGuideMenuOpen((prev) => {
+                      if (!prev) {
+                        setActiveMenuIndex(guideOrientation === "horizontal" ? 0 : 1);
+                      }
+                      return !prev;
+                    });
+                  },
+                  children: /* @__PURE__ */ jsx2(CaretDownIcon, { size: 8 })
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: cn(
+                    "pointer-events-none absolute left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-[11px] text-white transition-opacity duration-150 select-none",
+                    tooltipSide === "top" ? "bottom-full mb-2" : "top-full mt-2",
+                    visibleTooltipId === "guide-menu" && !guideMenuOpen ? "opacity-100" : "opacity-0"
+                  ),
+                  children: "Orientation Guide"
+                }
+              ),
+              guideMenuOpen ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute z-[70] w-44 rounded-lg border border-ink-200 bg-white p-1 shadow-[0px_10px_30px_rgba(0,0,0,0.08)] outline-none focus:outline-none",
+                    "flex flex-col gap-px",
+                    menuSide === "bottom" ? "top-full mt-2" : "bottom-full mb-2",
+                    menuAlign === "left" ? "left-0" : "right-0"
+                  ),
+                  ref: guideMenuPanelRef,
+                  role: "menu",
+                  tabIndex: 0,
+                  onKeyDown: (event) => {
+                    const key = event.key.toLowerCase();
+                    if (event.key === "ArrowDown") {
+                      event.preventDefault();
+                      setActiveMenuIndex((prev) => (prev + 1) % 2);
+                    }
+                    if (event.key === "ArrowUp") {
+                      event.preventDefault();
+                      setActiveMenuIndex((prev) => (prev + 1) % 2);
+                    }
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      selectGuideOrientation(
+                        activeMenuIndex === 0 ? "horizontal" : "vertical"
+                      );
+                    }
+                    if (key === "h") {
+                      event.preventDefault();
+                      selectGuideOrientation("horizontal");
+                    }
+                    if (key === "v") {
+                      event.preventDefault();
+                      selectGuideOrientation("vertical");
+                    }
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      setGuideMenuOpen(false);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: cn(
+                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
+                          activeMenuIndex === 0 || guideOrientation === "horizontal" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
+                        ),
+                        onClick: () => selectGuideOrientation("horizontal"),
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            CheckIcon,
+                            {
+                              size: 12,
+                              className: cn(
+                                guideOrientation === "horizontal" ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(MinusIcon, { size: 12 }),
+                          /* @__PURE__ */ jsx2("span", { className: "flex-1", children: "Horizontal" }),
+                          /* @__PURE__ */ jsx2("span", { className: "text-ink-500", children: "H" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: cn(
+                          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
+                          activeMenuIndex === 1 || guideOrientation === "vertical" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
+                        ),
+                        onClick: () => selectGuideOrientation("vertical"),
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            CheckIcon,
+                            {
+                              size: 12,
+                              className: cn(
+                                guideOrientation === "vertical" ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(MinusIcon, { size: 12, className: "rotate-90" }),
+                          /* @__PURE__ */ jsx2("span", { className: "flex-1", children: "Vertical" }),
+                          /* @__PURE__ */ jsx2("span", { className: "text-ink-500", children: "V" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Toolbar = memo(forwardRef(ToolbarComponent));
+
+// hooks/use-drag-state.ts
+import { useState as useState2 } from "react";
+var useDragState = () => {
+  const [start, setStart] = useState2(null);
+  const [end, setEnd] = useState2(null);
+  const [isDragging, setIsDragging] = useState2(false);
+  return { start, setStart, end, setEnd, isDragging, setIsDragging };
+};
+
+// hooks/use-guide-drag-hold.ts
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
+
+// constants.ts
+var MEASURE_LABEL_OFFSET = 2;
+var GUIDE_SNAP_DISTANCE = 10;
+var GUIDE_HITBOX_SIZE = 14;
+var GUIDE_DRAG_HOLD_MS = 220;
+var MEASURE_TRANSITION_MS = 140;
+var MIN_MULTI_TARGET_SIZE = 8;
+var MIN_MULTI_ELEMENT_COVERAGE = 0.45;
+var ANCESTOR_PRUNE_SCALE = 1.6;
+var ANCESTOR_KEEP_COVERAGE = 0.92;
+var MIN_SINGLE_TARGET_SIZE = 8;
+var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
+
+// hooks/use-guide-drag-hold.ts
+var useGuideDragHold = () => {
+  const guideDragHoldTimerRef = useRef2(null);
+  const guideDragHoldGuideIdRef = useRef2(null);
+  const clearGuideDragHold = useCallback2(() => {
+    if (guideDragHoldTimerRef.current !== null) {
+      window.clearTimeout(guideDragHoldTimerRef.current);
+      guideDragHoldTimerRef.current = null;
+    }
+    guideDragHoldGuideIdRef.current = null;
+  }, []);
+  const scheduleGuideDragHold = useCallback2(
+    (id, onHold) => {
+      clearGuideDragHold();
+      guideDragHoldGuideIdRef.current = id;
+      guideDragHoldTimerRef.current = window.setTimeout(() => {
+        if (guideDragHoldGuideIdRef.current === id) {
+          onHold(id);
+        }
+      }, GUIDE_DRAG_HOLD_MS);
+    },
+    [clearGuideDragHold]
+  );
+  return {
+    clearGuideDragHold,
+    scheduleGuideDragHold
+  };
+};
+
+// hooks/use-guide-state.ts
+import { useState as useState3 } from "react";
+var useGuideState = (options = {}) => {
+  const [guides, setGuides] = useState3(options.initialGuides ?? []);
+  const [draggingGuideId, setDraggingGuideId] = useState3(null);
+  const [selectedGuideIds, setSelectedGuideIds] = useState3(
+    options.initialSelectedGuideIds ?? []
+  );
+  return {
+    guides,
+    setGuides,
+    draggingGuideId,
+    setDraggingGuideId,
+    selectedGuideIds,
+    setSelectedGuideIds
+  };
+};
+
+// hooks/use-hotkeys.ts
+import { useEffect as useEffect2 } from "react";
+var useHotkeys = (options) => {
+  useEffect2(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        options.clearAll();
+        return;
+      }
+      if (event.key.toLowerCase() === "m") {
+        options.setEnabled((prev) => !prev);
+      }
+      const key = event.key.toLowerCase();
+      if (options.isOverlayActive()) {
+        if (key === "s") {
+          options.setToolMode((prev) => prev === "select" ? "none" : "select");
+          options.onInteract();
+        }
+        if (key === "g") {
+          options.setToolMode((prev) => prev === "guides" ? "none" : "guides");
+          options.onInteract();
+        }
+        if (key === "h") {
+          options.setGuideOrientation("horizontal");
+          options.onInteract();
+        }
+        if (key === "v") {
+          options.setGuideOrientation("vertical");
+          options.onInteract();
+        }
+      }
+      if (event.key === "Alt") {
+        options.setAltPressed(true);
+      }
+      if (event.key === "Backspace" || event.key === "Delete") {
+        const removed = options.removeSelectedGuides();
+        if (removed) {
+          event.preventDefault();
+        }
+      }
+    };
+    const handleKeyUp = (event) => {
+      if (event.key === "Alt") {
+        options.setAltPressed(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [options]);
+};
+
+// hooks/use-live-element-tracking.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// geometry.ts
+var getViewportSize = () => ({
+  width: typeof window === "undefined" ? 1 : window.innerWidth || 1,
+  height: typeof window === "undefined" ? 1 : window.innerHeight || 1
+});
+var normalizeRect = (rect, viewport = getViewportSize()) => ({
+  left: rect.left / viewport.width,
+  top: rect.top / viewport.height,
+  width: rect.width / viewport.width,
+  height: rect.height / viewport.height
+});
+var denormalizeRect = (rect, viewport = getViewportSize()) => ({
+  left: rect.left * viewport.width,
+  top: rect.top * viewport.height,
+  width: rect.width * viewport.width,
+  height: rect.height * viewport.height
+});
+var getRectFromPoints = (start, end) => {
+  const left = Math.min(start.x, end.x);
+  const top = Math.min(start.y, end.y);
+  const width = Math.abs(start.x - end.x);
+  const height = Math.abs(start.y - end.y);
+  return { left, top, width, height };
+};
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var rectsOverlap = (rectA, rectB) => rectA.left < rectB.left + rectB.width && rectA.left + rectA.width > rectB.left && rectA.top < rectB.top + rectB.height && rectA.top + rectA.height > rectB.top;
+var rectArea = (rect) => rect.width * rect.height;
+var intersectionArea = (rectA, rectB) => {
+  const x1 = Math.max(rectA.left, rectB.left);
+  const y1 = Math.max(rectA.top, rectB.top);
+  const x2 = Math.min(rectA.left + rectA.width, rectB.left + rectB.width);
+  const y2 = Math.min(rectA.top + rectA.height, rectB.top + rectB.height);
+  const width = Math.max(0, x2 - x1);
+  const height = Math.max(0, y2 - y1);
+  return width * height;
+};
+var rectAlmostEqual = (a, b, epsilon = 0.25) => Math.abs(a.left - b.left) < epsilon && Math.abs(a.top - b.top) < epsilon && Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon;
+var getDistanceToRect = (point, rect) => {
+  const right = rect.left + rect.width;
+  const bottom = rect.top + rect.height;
+  const dx = point.x < rect.left ? rect.left - point.x : point.x > right ? point.x - right : 0;
+  const dy = point.y < rect.top ? rect.top - point.y : point.y > bottom ? point.y - bottom : 0;
+  return Math.hypot(dx, dy);
+};
+
+// distances.ts
+var getDistanceOverlay = (rectA, rectB, elementRefA, elementRefB) => {
+  const viewport = getViewportSize();
+  const normalizedRectA = normalizeRect(rectA, viewport);
+  const normalizedRectB = normalizeRect(rectB, viewport);
+  const rightA = rectA.left + rectA.width;
+  const bottomA = rectA.top + rectA.height;
+  const rightB = rectB.left + rectB.width;
+  const bottomB = rectB.top + rectB.height;
+  const centerAX = rectA.left + rectA.width / 2;
+  const centerAY = rectA.top + rectA.height / 2;
+  let horizontal = null;
+  let vertical = null;
+  const connectors = [];
+  const separatedX = rightA <= rectB.left || rightB <= rectA.left;
+  const separatedY = bottomA <= rectB.top || bottomB <= rectA.top;
+  if (separatedX) {
+    const aIsLeft = rightA <= rectB.left;
+    const x1 = aIsLeft ? rightA : rightB;
+    const x2 = aIsLeft ? rectB.left : rectA.left;
+    const y = centerAY;
+    horizontal = { x1, x2, y, value: Math.abs(x2 - x1) };
+    const edgeBX = aIsLeft ? rectB.left : rightB;
+    if (y < rectB.top) {
+      connectors.push({ x1: edgeBX, y1: y, x2: edgeBX, y2: rectB.top });
+    } else if (y > bottomB) {
+      connectors.push({ x1: edgeBX, y1: y, x2: edgeBX, y2: bottomB });
+    }
+  }
+  if (separatedY) {
+    const aIsTop = bottomA <= rectB.top;
+    const y1 = aIsTop ? bottomA : bottomB;
+    const y2 = aIsTop ? rectB.top : rectA.top;
+    const x = centerAX;
+    vertical = { y1, y2, x, value: Math.abs(y2 - y1) };
+    const edgeBY = aIsTop ? rectB.top : bottomB;
+    if (x < rectB.left) {
+      connectors.push({ x1: x, y1: edgeBY, x2: rectB.left, y2: edgeBY });
+    } else if (x > rightB) {
+      connectors.push({ x1: x, y1: edgeBY, x2: rightB, y2: edgeBY });
+    }
+  }
+  const normalizedConnectors = connectors.map((segment) => ({
+    x1: clamp(segment.x1, 0, window.innerWidth),
+    y1: clamp(segment.y1, 0, window.innerHeight),
+    x2: clamp(segment.x2, 0, window.innerWidth),
+    y2: clamp(segment.y2, 0, window.innerHeight)
+  })).filter(
+    (segment) => Math.abs(segment.x1 - segment.x2) > 0.5 || Math.abs(segment.y1 - segment.y2) > 0.5
+  );
+  return {
+    id: createId(),
+    rectA,
+    rectB,
+    normalizedRectA,
+    normalizedRectB,
+    elementRefA,
+    elementRefB,
+    horizontal,
+    vertical,
+    connectors: normalizedConnectors
+  };
+};
+var updateDistanceForResize = (distance, viewport = getViewportSize()) => {
+  const normalizedRectA = distance.normalizedRectA ?? normalizeRect(distance.rectA);
+  const normalizedRectB = distance.normalizedRectB ?? normalizeRect(distance.rectB);
+  let rectA = distance.rectA;
+  let rectB = distance.rectB;
+  if (distance.elementRefA && document.contains(distance.elementRefA)) {
+    rectA = distance.elementRefA.getBoundingClientRect();
+  } else {
+    rectA = denormalizeRect(normalizedRectA, viewport);
+  }
+  if (distance.elementRefB && document.contains(distance.elementRefB)) {
+    rectB = distance.elementRefB.getBoundingClientRect();
+  } else {
+    rectB = denormalizeRect(normalizedRectB, viewport);
+  }
+  const updated = getDistanceOverlay(
+    rectA,
+    rectB,
+    distance.elementRefA,
+    distance.elementRefB
+  );
+  return {
+    ...updated,
+    id: distance.id
+  };
+};
+
+// dom.ts
+var getElementLabel = (element) => {
+  const tag = element.tagName.toLowerCase();
+  const id = element.id ? `#${element.id}` : "";
+  const className = element.className ? `.${element.className.toString().split(" ")[0]}` : "";
+  return `${tag}${id}${className}`;
+};
+var parseEdge = (value) => Number.parseFloat(value) || 0;
+var getRectFromDom = (element) => {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+};
+var rectCacheFrame = -1;
+var rectCache = /* @__PURE__ */ new Map();
+var getRectFromDomCached = (element) => {
+  const frame = getFrameToken();
+  if (frame !== rectCacheFrame) {
+    rectCacheFrame = frame;
+    rectCache.clear();
+  }
+  const cached = rectCache.get(element);
+  if (cached) return cached;
+  const rect = getRectFromDom(element);
+  rectCache.set(element, rect);
+  return rect;
+};
+var cachedElements = [];
+var cachedFrame = -1;
+var getFrameToken = () => {
+  if (typeof performance === "undefined") return 0;
+  return Math.floor(performance.now() / 16);
+};
+var getBodyElementsCached = () => {
+  const frame = getFrameToken();
+  if (frame === cachedFrame && cachedElements.length > 0) {
+    return cachedElements;
+  }
+  cachedFrame = frame;
+  cachedElements = Array.from(document.querySelectorAll("body *")).filter(
+    (element) => element instanceof HTMLElement
+  );
+  return cachedElements;
+};
+var getInspectMeasurement = (element) => {
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const padding = {
+    top: parseEdge(style.paddingTop),
+    right: parseEdge(style.paddingRight),
+    bottom: parseEdge(style.paddingBottom),
+    left: parseEdge(style.paddingLeft)
+  };
+  const margin = {
+    top: parseEdge(style.marginTop),
+    right: parseEdge(style.marginRight),
+    bottom: parseEdge(style.marginBottom),
+    left: parseEdge(style.marginLeft)
+  };
+  const paddingRect = {
+    left: rect.left + padding.left,
+    top: rect.top + padding.top,
+    width: Math.max(0, rect.width - padding.left - padding.right),
+    height: Math.max(0, rect.height - padding.top - padding.bottom)
+  };
+  const marginRect = {
+    left: rect.left - margin.left,
+    top: rect.top - margin.top,
+    width: rect.width + margin.left + margin.right,
+    height: rect.height + margin.top + margin.bottom
+  };
+  return {
+    id: createId(),
+    rect: {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height
+    },
+    paddingRect,
+    marginRect,
+    padding,
+    margin,
+    label: getElementLabel(element),
+    elementRef: element
+  };
+};
+var updateMeasurementForResize = (measurement, viewport = getViewportSize()) => {
+  let rect = measurement.rect;
+  if (measurement.elementRef && document.contains(measurement.elementRef)) {
+    rect = getRectFromDom(measurement.elementRef);
+  } else if (measurement.normalizedRect) {
+    rect = denormalizeRect(measurement.normalizedRect, viewport);
+  }
+  return {
+    ...measurement,
+    rect,
+    normalizedRect: normalizeRect(rect, viewport),
+    originRect: void 0
+  };
+};
+
+// hooks/use-live-element-tracking.ts
+var useLiveElementTracking = (params) => {
+  const frameRef = useRef3(null);
+  useEffect3(() => {
+    if (!params.enabled) {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+      frameRef.current = null;
+      return;
+    }
+    const tick = () => {
+      params.setMeasurements(
+        (prev) => prev.map((measurement) => {
+          if (!measurement.elementRef || !document.contains(measurement.elementRef)) {
+            return measurement;
+          }
+          const rect = getRectFromDom(measurement.elementRef);
+          if (rectAlmostEqual(rect, measurement.rect)) return measurement;
+          return {
+            ...measurement,
+            rect,
+            normalizedRect: normalizeRect(rect),
+            originRect: void 0
+          };
+        })
+      );
+      params.setActiveMeasurement((prev) => {
+        if (!prev?.elementRef || !document.contains(prev.elementRef))
+          return prev;
+        const rect = getRectFromDom(prev.elementRef);
+        if (rectAlmostEqual(rect, prev.rect)) return prev;
+        return {
+          ...prev,
+          rect,
+          normalizedRect: normalizeRect(rect),
+          originRect: void 0
+        };
+      });
+      params.setHeldDistances(
+        (prev) => prev.map((distance) => {
+          const canTrackA = distance.elementRefA && document.contains(distance.elementRefA);
+          const canTrackB = distance.elementRefB && document.contains(distance.elementRefB);
+          if (!canTrackA && !canTrackB) return distance;
+          const rectA = canTrackA ? getRectFromDom(distance.elementRefA) : distance.rectA;
+          const rectB = canTrackB ? getRectFromDom(distance.elementRefB) : distance.rectB;
+          if (rectAlmostEqual(rectA, distance.rectA) && rectAlmostEqual(rectB, distance.rectB)) {
+            return distance;
+          }
+          const updated = getDistanceOverlay(
+            rectA,
+            rectB,
+            distance.elementRefA,
+            distance.elementRefB
+          );
+          return {
+            ...updated,
+            id: distance.id
+          };
+        })
+      );
+      const selected = params.selectedElementRef.current;
+      if (selected && document.contains(selected)) {
+        params.setSelectedMeasurement((prev) => {
+          const next = getInspectMeasurement(selected);
+          if (prev && rectAlmostEqual(prev.rect, next.rect)) return prev;
+          return next;
+        });
+      }
+      params.setSelectedMeasurements(
+        (prev) => prev.map((measurement) => {
+          if (!measurement.elementRef || !document.contains(measurement.elementRef)) {
+            return measurement;
+          }
+          const next = getInspectMeasurement(measurement.elementRef);
+          if (rectAlmostEqual(next.rect, measurement.rect)) return measurement;
+          return {
+            ...next,
+            id: measurement.id
+          };
+        })
+      );
+      const hover = params.hoverElementRef.current;
+      if (hover && document.contains(hover)) {
+        const rect = getRectFromDom(hover);
+        params.setHoverRect(
+          (prev) => prev && rectAlmostEqual(prev, rect) ? prev : rect
+        );
+      }
+      frameRef.current = requestAnimationFrame(tick);
+    };
+    frameRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+      frameRef.current = null;
+    };
+  }, [params]);
+};
+
+// hooks/use-measure-toggles.ts
+import { useState as useState4 } from "react";
+var useMeasureToggles = (options = {}) => {
+  const [enabled, setEnabled] = useState4(options.initialEnabled ?? true);
+  const [altPressed, setAltPressed] = useState4(false);
+  const [toolMode, setToolMode] = useState4(
+    options.initialToolMode ?? "none"
+  );
+  const holdEnabled = false;
+  const multiMeasureEnabled = false;
+  const snapGuidesEnabled = true;
+  const guidesEnabled = toolMode === "guides";
+  const snapEnabled = true;
+  return {
+    enabled,
+    setEnabled,
+    holdEnabled,
+    altPressed,
+    setAltPressed,
+    toolMode,
+    setToolMode,
+    guidesEnabled,
+    multiMeasureEnabled,
+    snapGuidesEnabled,
+    snapEnabled
+  };
+};
+
+// hooks/use-measurement-state.ts
+import { useState as useState5 } from "react";
+var useMeasurementState = (options = {}) => {
+  const [activeMeasurement, setActiveMeasurement] = useState5(options.initialActiveMeasurement ?? null);
+  const [measurements, setMeasurements] = useState5(
+    options.initialMeasurements ?? []
+  );
+  const [selectedMeasurement, setSelectedMeasurement] = useState5(null);
+  const [selectedMeasurements, setSelectedMeasurements] = useState5([]);
+  const [hoverRect, setHoverRect] = useState5(null);
+  const [heldDistances, setHeldDistances] = useState5(
+    options.initialHeldDistances ?? []
+  );
+  return {
+    activeMeasurement,
+    setActiveMeasurement,
+    measurements,
+    setMeasurements,
+    selectedMeasurement,
+    setSelectedMeasurement,
+    selectedMeasurements,
+    setSelectedMeasurements,
+    hoverRect,
+    setHoverRect,
+    heldDistances,
+    setHeldDistances
+  };
+};
+
+// hooks/use-measurer-derived.ts
+import { useMemo } from "react";
+
+// edge-visibility.ts
+var rangesOverlap = (a1, a2, b1, b2) => Math.min(a2, b2) - Math.max(a1, b1) > 0;
+var getEdgeVisibilityForRects = (rects, epsilon = 1) => {
+  const visibility = rects.map(() => ({
+    top: true,
+    right: true,
+    bottom: true,
+    left: true
+  }));
+  for (let i = 0; i < rects.length; i += 1) {
+    const a = rects[i];
+    const aRight = a.left + a.width;
+    const aBottom = a.top + a.height;
+    for (let j = i + 1; j < rects.length; j += 1) {
+      const b = rects[j];
+      const bRight = b.left + b.width;
+      const bBottom = b.top + b.height;
+      const overlapX = rangesOverlap(a.left, aRight, b.left, bRight);
+      const overlapY = rangesOverlap(a.top, aBottom, b.top, bBottom);
+      if (Math.abs(aRight - b.left) <= epsilon && overlapY) {
+        visibility[i].right = false;
+        visibility[j].left = false;
+      }
+      if (Math.abs(a.left - bRight) <= epsilon && overlapY) {
+        visibility[i].left = false;
+        visibility[j].right = false;
+      }
+      if (Math.abs(aBottom - b.top) <= epsilon && overlapX) {
+        visibility[i].bottom = false;
+        visibility[j].top = false;
+      }
+      if (Math.abs(a.top - bBottom) <= epsilon && overlapX) {
+        visibility[i].top = false;
+        visibility[j].bottom = false;
+      }
+    }
+  }
+  return visibility;
+};
+
+// guides.ts
+var getGuideRect = (guide) => {
+  const viewport = getViewportSize();
+  return guide.orientation === "vertical" ? { left: guide.position, top: 0, width: 1, height: viewport.height } : { left: 0, top: guide.position, width: viewport.width, height: 1 };
+};
+var getGuideDistance = (guide, point) => guide.orientation === "vertical" ? Math.abs(guide.position - point.x) : Math.abs(guide.position - point.y);
+var getSnapGuidePosition = (params) => {
+  const { orientation, point, snapGuidesEnabled, overlayNode, guides } = params;
+  if (!snapGuidesEnabled) {
+    return orientation === "vertical" ? point.x : point.y;
+  }
+  const elements = getBodyElementsCached();
+  let bestValue = orientation === "vertical" ? point.x : point.y;
+  let bestDistance = GUIDE_SNAP_DISTANCE + 1;
+  for (const element of elements) {
+    if (!(element instanceof HTMLElement)) continue;
+    if (overlayNode && overlayNode.contains(element)) continue;
+    if (element === document.body || element === document.documentElement)
+      continue;
+    const rect = getRectFromDomCached(element);
+    if (rect.width <= 2 || rect.height <= 2) continue;
+    if (orientation === "vertical") {
+      if (point.x < rect.left - GUIDE_SNAP_DISTANCE || point.x > rect.left + rect.width + GUIDE_SNAP_DISTANCE) {
+        continue;
+      }
+    } else {
+      if (point.y < rect.top - GUIDE_SNAP_DISTANCE || point.y > rect.top + rect.height + GUIDE_SNAP_DISTANCE) {
+        continue;
+      }
+    }
+    const candidates = orientation === "vertical" ? [rect.left, rect.left + rect.width, rect.left + rect.width / 2] : [rect.top, rect.top + rect.height, rect.top + rect.height / 2];
+    candidates.forEach((candidate) => {
+      const distance = orientation === "vertical" ? Math.abs(candidate - point.x) : Math.abs(candidate - point.y);
+      if (distance > GUIDE_SNAP_DISTANCE) return;
+      if (distance < bestDistance) {
+        bestValue = candidate;
+        bestDistance = distance;
+      }
+    });
+  }
+  guides.forEach((guide) => {
+    if (guide.id === params.draggingGuideId) return;
+    const candidate = guide.position;
+    const distance = orientation === "vertical" ? Math.abs(candidate - point.x) : Math.abs(candidate - point.y);
+    if (distance > GUIDE_SNAP_DISTANCE) return;
+    if (distance < bestDistance) {
+      bestValue = candidate;
+      bestDistance = distance;
+    }
+  });
+  return bestDistance <= GUIDE_SNAP_DISTANCE ? bestValue : orientation === "vertical" ? point.x : point.y;
+};
+
+// option-measurements.ts
+var getHoveredGuide = (point, guides) => {
+  if (!point || guides.length === 0) return null;
+  let closest = null;
+  let closestDistance = GUIDE_SNAP_DISTANCE + 1;
+  for (const guide of guides) {
+    const distance = getGuideDistance(guide, point);
+    if (distance > GUIDE_SNAP_DISTANCE) continue;
+    if (distance < closestDistance) {
+      closest = guide;
+      closestDistance = distance;
+    }
+  }
+  return closest;
+};
+var getSelectedGuide = (guides, selectedGuideIds) => {
+  if (selectedGuideIds.length === 0) return null;
+  const lastId = selectedGuideIds[selectedGuideIds.length - 1];
+  return guides.find((guide) => guide.id === lastId) ?? null;
+};
+var getOptionPairOverlay = (params) => {
+  if (!params.altPressed || !params.primarySelectedMeasurement) return null;
+  const selectedElement = params.selectedGuide ? null : params.primarySelectedMeasurement.elementRef ?? params.selectedElementRef ?? null;
+  const selectedTarget = params.selectedGuide ? {
+    rect: getGuideRect(params.selectedGuide),
+    guideId: params.selectedGuide.id
+  } : selectedElement ? {
+    rect: params.primarySelectedMeasurement.rect,
+    element: selectedElement
+  } : null;
+  const hoverTarget = params.hoverGuide ? { rect: getGuideRect(params.hoverGuide), guideId: params.hoverGuide.id } : params.hoverElement ? {
+    rect: getRectFromDom(params.hoverElement),
+    element: params.hoverElement
+  } : null;
+  if (!selectedTarget || !hoverTarget) return null;
+  if (selectedTarget.element && hoverTarget.element) {
+    if (selectedTarget.element === hoverTarget.element || selectedTarget.element.contains(hoverTarget.element) || hoverTarget.element.contains(selectedTarget.element)) {
+      return null;
+    }
+  }
+  if (selectedTarget.guideId && hoverTarget.guideId && selectedTarget.guideId === hoverTarget.guideId) {
+    return null;
+  }
+  return getDistanceOverlay(
+    selectedTarget.rect,
+    hoverTarget.rect,
+    selectedTarget.element ?? null,
+    hoverTarget.element ?? null
+  );
+};
+var getOptionContainerLines = (params) => {
+  if (!params.altPressed || !params.primarySelectedMeasurement || params.optionPairOverlay)
+    return null;
+  if (params.selectedGuideIds.length > 0) return null;
+  let containerElement = params.selectedElement?.parentElement ?? null;
+  if (params.selectedElement && params.hoverElement && params.hoverElement !== params.selectedElement && params.hoverElement.contains(params.selectedElement)) {
+    containerElement = params.hoverElement;
+  }
+  const containerRect = containerElement && containerElement !== document.body && containerElement !== document.documentElement ? getRectFromDom(containerElement) : {
+    left: 0,
+    top: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  const rect = params.primarySelectedMeasurement.rect;
+  const right = rect.left + rect.width;
+  const bottom = rect.top + rect.height;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const containerRight = containerRect.left + containerRect.width;
+  const containerBottom = containerRect.top + containerRect.height;
+  const lineX = Math.max(containerRect.left, Math.min(centerX, containerRight));
+  const lineY = Math.max(containerRect.top, Math.min(centerY, containerBottom));
+  return {
+    top: {
+      y1: containerRect.top,
+      y2: rect.top,
+      x: lineX,
+      value: Math.max(0, rect.top - containerRect.top)
+    },
+    bottom: {
+      y1: bottom,
+      y2: containerBottom,
+      x: lineX,
+      value: Math.max(0, containerBottom - bottom)
+    },
+    left: {
+      x1: containerRect.left,
+      x2: rect.left,
+      y: lineY,
+      value: Math.max(0, rect.left - containerRect.left)
+    },
+    right: {
+      x1: right,
+      x2: containerRight,
+      y: lineY,
+      value: Math.max(0, containerRight - right)
+    }
+  };
+};
+
+// selection-helpers.ts
+var getPrimarySelectedMeasurement = (selectedMeasurements, selectedMeasurement) => selectedMeasurements.length > 0 ? selectedMeasurements[selectedMeasurements.length - 1] : selectedMeasurement;
+var getSelectedMeasurementHit = (params) => {
+  const candidates = params.selectedMeasurements.map((measurement) => {
+    const element = measurement.elementRef;
+    if (!element || !document.contains(element)) return null;
+    const rect = getRectFromDom(element);
+    return {
+      measurement,
+      element,
+      rect,
+      area: rect.width * rect.height
+    };
+  }).filter((item) => item !== null).sort((a, b) => a.area - b.area);
+  if (candidates.length === 0) return null;
+  const stack = document.elementsFromPoint(params.point.x, params.point.y);
+  for (const element of stack) {
+    if (!(element instanceof HTMLElement)) continue;
+    if (params.overlayNode && params.overlayNode.contains(element)) continue;
+    for (const candidate of candidates) {
+      if (candidate.element === element || candidate.element.contains(element)) {
+        return candidate.measurement;
+      }
+    }
+  }
+  for (const candidate of candidates) {
+    const { rect } = candidate;
+    const inRect = params.point.x >= rect.left && params.point.x <= rect.left + rect.width && params.point.y >= rect.top && params.point.y <= rect.top + rect.height;
+    if (inRect) return candidate.measurement;
+  }
+  return null;
+};
+
+// hooks/use-measurer-derived.ts
+var useMeasurerDerived = ({
+  start,
+  end,
+  selectedMeasurements,
+  selectedMeasurement,
+  selectionOriginRect,
+  guides,
+  selectedGuideIds,
+  hoverPointer,
+  hoverRect,
+  hoverElement,
+  selectedElement,
+  altPressed,
+  guidesEnabled,
+  guidePreview,
+  displayedMeasurements,
+  hoverHighlightEnabled,
+  highlightColor,
+  guideColor
+}) => {
+  const activeRect = useMemo(() => {
+    if (!start || !end) return null;
+    return {
+      left: Math.min(start.x, end.x),
+      top: Math.min(start.y, end.y),
+      width: Math.abs(end.x - start.x),
+      height: Math.abs(end.y - start.y)
+    };
+  }, [end, start]);
+  const activeWidth = activeRect ? formatValue(activeRect.width) : 0;
+  const activeHeight = activeRect ? formatValue(activeRect.height) : 0;
+  const groupedSelection = useMemo(() => {
+    if (selectedMeasurements.length <= 1) return null;
+    const selectionKey = selectedMeasurements.map((measurement) => measurement.id).join("|");
+    const rects = selectedMeasurements.map((measurement) => measurement.rect);
+    let left = Number.POSITIVE_INFINITY;
+    let top = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    rects.forEach((rect) => {
+      left = Math.min(left, rect.left);
+      top = Math.min(top, rect.top);
+      right = Math.max(right, rect.left + rect.width);
+      bottom = Math.max(bottom, rect.top + rect.height);
+    });
+    const unionRect = {
+      left,
+      top,
+      width: right - left,
+      height: bottom - top
+    };
+    const base = selectedMeasurements[selectedMeasurements.length - 1];
+    return {
+      ...base,
+      id: `group-${selectionKey}`,
+      rect: unionRect,
+      paddingRect: unionRect,
+      marginRect: unionRect,
+      originRect: selectionOriginRect ?? void 0
+    };
+  }, [selectedMeasurements, selectionOriginRect]);
+  const displayedSelectedMeasurements = useMemo(
+    () => groupedSelection ? [groupedSelection] : selectedMeasurements.length > 0 ? selectedMeasurements : selectedMeasurement ? [selectedMeasurement] : [],
+    [groupedSelection, selectedMeasurement, selectedMeasurements]
+  );
+  const selectedGuide = useMemo(
+    () => getSelectedGuide(guides, selectedGuideIds),
+    [guides, selectedGuideIds]
+  );
+  const hoverGuide = useMemo(
+    () => getHoveredGuide(hoverPointer, guides),
+    [guides, hoverPointer]
+  );
+  const primarySelectedMeasurement = useMemo(
+    () => getPrimarySelectedMeasurement(selectedMeasurements, selectedMeasurement),
+    [selectedMeasurement, selectedMeasurements]
+  );
+  const effectivePrimarySelected = groupedSelection ?? primarySelectedMeasurement;
+  const optionPairOverlay = useMemo(() => {
+    return getOptionPairOverlay({
+      altPressed,
+      primarySelectedMeasurement: effectivePrimarySelected,
+      selectedGuide,
+      hoverGuide,
+      hoverElement,
+      selectedElementRef: selectedElement
+    });
+  }, [
+    altPressed,
+    effectivePrimarySelected,
+    hoverElement,
+    hoverGuide,
+    selectedElement,
+    selectedGuide
+  ]);
+  const optionContainerLines = useMemo(() => {
+    return getOptionContainerLines({
+      altPressed,
+      primarySelectedMeasurement: effectivePrimarySelected,
+      optionPairOverlay,
+      selectedGuideIds,
+      selectedElement,
+      hoverElement
+    });
+  }, [
+    altPressed,
+    effectivePrimarySelected,
+    hoverElement,
+    optionPairOverlay,
+    selectedElement,
+    selectedGuideIds
+  ]);
+  const guideDistanceOverlay = useMemo(() => {
+    if (!altPressed || !guidesEnabled || !guidePreview) return null;
+    const previewGuide = {
+      id: "preview",
+      orientation: guidePreview.orientation,
+      position: guidePreview.position
+    };
+    const sameOrientation = guides.filter(
+      (guide) => guide.orientation === guidePreview.orientation
+    );
+    if (sameOrientation.length === 0) return null;
+    const nearest = sameOrientation.reduce(
+      (closest, guide) => {
+        const distance = Math.abs(guide.position - previewGuide.position);
+        if (!closest) return { guide, distance };
+        return distance < closest.distance ? { guide, distance } : closest;
+      },
+      null
+    );
+    if (!nearest) return null;
+    return getDistanceOverlay(
+      getGuideRect(previewGuide),
+      getGuideRect(nearest.guide)
+    );
+  }, [altPressed, guidePreview, guides, guidesEnabled]);
+  const {
+    outlineColor,
+    fillColor,
+    guideColorActive,
+    guideColorHover,
+    guideColorDefault,
+    guideColorPreview
+  } = useMemo(
+    () => ({
+      outlineColor: `color-mix(in oklch, ${highlightColor} 80%, transparent)`,
+      fillColor: `color-mix(in oklch, ${highlightColor} 8%, transparent)`,
+      guideColorActive: `color-mix(in oklch, ${guideColor} 100%, transparent)`,
+      guideColorHover: `color-mix(in oklch, ${guideColor} 90%, transparent)`,
+      guideColorDefault: `color-mix(in oklch, ${guideColor} 70%, transparent)`,
+      guideColorPreview: `color-mix(in oklch, ${guideColor} 50%, transparent)`
+    }),
+    [guideColor, highlightColor]
+  );
+  const selectedRects = useMemo(
+    () => displayedSelectedMeasurements.map((measurement) => measurement.rect),
+    [displayedSelectedMeasurements]
+  );
+  const hoverRectToShow = hoverHighlightEnabled && hoverRect && selectedMeasurements.length <= 1 ? hoverRect : null;
+  const selectionEdgeVisibility = useMemo(
+    () => getEdgeVisibilityForRects(selectedRects),
+    [selectedRects]
+  );
+  const selectedEdgeVisibility = selectionEdgeVisibility.slice(
+    0,
+    selectedRects.length
+  );
+  const hoverEdgeVisibility = hoverRectToShow ? { top: true, right: true, bottom: true, left: true } : null;
+  const measurementEdgeVisibility = useMemo(
+    () => getEdgeVisibilityForRects(displayedMeasurements.map((m) => m.rect)),
+    [displayedMeasurements]
+  );
+  return {
+    activeRect,
+    activeWidth,
+    activeHeight,
+    displayedSelectedMeasurements,
+    selectedGuide,
+    hoverGuide,
+    optionPairOverlay,
+    optionContainerLines,
+    guideDistanceOverlay,
+    outlineColor,
+    fillColor,
+    guideColorActive,
+    guideColorHover,
+    guideColorDefault,
+    guideColorPreview,
+    hoverRectToShow,
+    selectedEdgeVisibility,
+    hoverEdgeVisibility,
+    measurementEdgeVisibility
+  };
+};
+
+// hooks/use-measurer-history.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4 } from "react";
+var HISTORY_LIMIT = 50;
+var useMeasurerHistory = ({
+  toggles,
+  measurements,
+  guides,
+  transient
+}) => {
+  const {
+    enabled,
+    setEnabled,
+    toolMode,
+    setToolMode,
+    guideOrientation,
+    setGuideOrientation
+  } = toggles;
+  const {
+    measurements: measurementEntries,
+    setMeasurements,
+    activeMeasurement,
+    setActiveMeasurement,
+    selectedMeasurements,
+    setSelectedMeasurements,
+    selectedMeasurement,
+    setSelectedMeasurement,
+    heldDistances,
+    setHeldDistances
+  } = measurements;
+  const {
+    guides: guideEntries,
+    setGuides,
+    selectedGuideIds,
+    setSelectedGuideIds,
+    draggingGuideId,
+    setDraggingGuideId
+  } = guides;
+  const {
+    setStart,
+    setEnd,
+    setIsDragging,
+    setGuidePreview,
+    setHoverRect,
+    setHoverElement,
+    setSelectedElement,
+    clearSelectionRect
+  } = transient;
+  const historyRef = useRef4([]);
+  const futureRef = useRef4([]);
+  const historySignatureRef = useRef4(null);
+  const captureSnapshot = useCallback3(() => {
+    return {
+      enabled,
+      toolMode,
+      guideOrientation,
+      measurements: [...measurementEntries],
+      activeMeasurement,
+      selectedMeasurements: [...selectedMeasurements],
+      selectedMeasurement,
+      heldDistances: [...heldDistances],
+      guides: [...guideEntries],
+      selectedGuideIds: [...selectedGuideIds],
+      draggingGuideId
+    };
+  }, [
+    activeMeasurement,
+    draggingGuideId,
+    enabled,
+    guideOrientation,
+    guideEntries,
+    heldDistances,
+    measurementEntries,
+    selectedGuideIds,
+    selectedMeasurement,
+    selectedMeasurements,
+    toolMode
+  ]);
+  const getSnapshotSignature = useCallback3((snapshot) => {
+    const serializeRect = (rect) => `${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`;
+    return [
+      snapshot.enabled ? "1" : "0",
+      snapshot.toolMode,
+      snapshot.guideOrientation,
+      snapshot.measurements.map((item) => `${item.id}@${serializeRect(item.rect)}`).join(","),
+      snapshot.activeMeasurement ? `${snapshot.activeMeasurement.id}@${serializeRect(snapshot.activeMeasurement.rect)}` : "",
+      snapshot.selectedMeasurements.map((item) => `${item.id}@${serializeRect(item.rect)}`).join(","),
+      snapshot.selectedMeasurement ? `${snapshot.selectedMeasurement.id}@${serializeRect(snapshot.selectedMeasurement.rect)}` : "",
+      snapshot.heldDistances.map((item) => item.id).join(","),
+      snapshot.guides.map((item) => `${item.id}:${item.position}`).join(","),
+      snapshot.selectedGuideIds.join(","),
+      snapshot.draggingGuideId ?? ""
+    ].join("|");
+  }, []);
+  const recordSnapshot = useCallback3(() => {
+    const snapshot = captureSnapshot();
+    const signature = getSnapshotSignature(snapshot);
+    if (historySignatureRef.current === signature) return;
+    historyRef.current.push(snapshot);
+    futureRef.current = [];
+    historySignatureRef.current = signature;
+    if (historyRef.current.length > HISTORY_LIMIT) {
+      historyRef.current.shift();
+    }
+  }, [captureSnapshot, getSnapshotSignature]);
+  const restoreSnapshot = useCallback3(
+    (snapshot) => {
+      setEnabled(snapshot.enabled);
+      setToolMode(snapshot.toolMode);
+      setGuideOrientation(snapshot.guideOrientation);
+      setMeasurements(snapshot.measurements);
+      setActiveMeasurement(snapshot.activeMeasurement);
+      setSelectedMeasurements(snapshot.selectedMeasurements);
+      setSelectedMeasurement(snapshot.selectedMeasurement);
+      setHeldDistances(snapshot.heldDistances);
+      setGuides(snapshot.guides);
+      setSelectedGuideIds(snapshot.selectedGuideIds);
+      setDraggingGuideId(snapshot.draggingGuideId);
+      setStart(null);
+      setEnd(null);
+      setIsDragging(false);
+      setGuidePreview(null);
+      setHoverRect(null);
+      setHoverElement(null);
+      clearSelectionRect();
+      const nextSelectedElement = snapshot.selectedMeasurement?.elementRef ?? snapshot.selectedMeasurements[snapshot.selectedMeasurements.length - 1]?.elementRef ?? null;
+      setSelectedElement(nextSelectedElement);
+    },
+    [
+      clearSelectionRect,
+      setActiveMeasurement,
+      setDraggingGuideId,
+      setEnabled,
+      setEnd,
+      setGuideOrientation,
+      setGuidePreview,
+      setGuides,
+      setHeldDistances,
+      setHoverRect,
+      setIsDragging,
+      setMeasurements,
+      setSelectedGuideIds,
+      setSelectedMeasurement,
+      setSelectedMeasurements,
+      setSelectedElement,
+      setStart,
+      setToolMode,
+      setHoverElement
+    ]
+  );
+  const undo = useCallback3(() => {
+    const previousSnapshot = historyRef.current.pop();
+    if (!previousSnapshot) return;
+    const currentSnapshot = captureSnapshot();
+    futureRef.current.push(currentSnapshot);
+    if (futureRef.current.length > HISTORY_LIMIT) {
+      futureRef.current.shift();
+    }
+    historySignatureRef.current = null;
+    restoreSnapshot(previousSnapshot);
+  }, [captureSnapshot, restoreSnapshot]);
+  const redo = useCallback3(() => {
+    const nextSnapshot = futureRef.current.pop();
+    if (!nextSnapshot) return;
+    historyRef.current.push(captureSnapshot());
+    if (historyRef.current.length > HISTORY_LIMIT) {
+      historyRef.current.shift();
+    }
+    historySignatureRef.current = null;
+    restoreSnapshot(nextSnapshot);
+  }, [captureSnapshot, restoreSnapshot]);
+  const setToolModeWithHistory = useCallback3(
+    (value) => {
+      setToolMode((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        if (next === prev) return prev;
+        recordSnapshot();
+        return next;
+      });
+    },
+    [recordSnapshot, setToolMode]
+  );
+  const setGuideOrientationWithHistory = useCallback3(
+    (value) => {
+      setGuideOrientation((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        if (next === prev) return prev;
+        recordSnapshot();
+        return next;
+      });
+    },
+    [recordSnapshot, setGuideOrientation]
+  );
+  const setEnabledWithHistory = useCallback3(
+    (value) => {
+      setEnabled((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        if (next === prev) return prev;
+        recordSnapshot();
+        return next;
+      });
+    },
+    [recordSnapshot, setEnabled]
+  );
+  const createActionCommit = useCallback3(() => {
+    let committed = false;
+    return () => {
+      if (committed) return;
+      recordSnapshot();
+      committed = true;
+    };
+  }, [recordSnapshot]);
+  useEffect4(() => {
+    const handleKeyDown = (event) => {
+      if (!(event.metaKey || event.ctrlKey)) return;
+      if (event.key.toLowerCase() !== "z") return;
+      if (event.shiftKey) {
+        if (futureRef.current.length === 0) return;
+        event.preventDefault();
+        redo();
+        return;
+      }
+      if (historyRef.current.length === 0) return;
+      event.preventDefault();
+      undo();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [redo, undo]);
+  return {
+    recordSnapshot,
+    createActionCommit,
+    setToolModeWithHistory,
+    setGuideOrientationWithHistory,
+    setEnabledWithHistory
+  };
+};
+
+// hooks/use-measurer-local-state.ts
+import { useCallback as useCallback4, useState as useState6 } from "react";
+var useMeasurerLocalState = ({
+  selectedElementRef,
+  hoverElementRef,
+  selectionRectRef
+}) => {
+  const [selectionOriginRect, setSelectionOriginRect] = useState6(
+    null
+  );
+  const [hoverPointer, setHoverPointer] = useState6(null);
+  const [hoverElement, setHoverElementState] = useState6(
+    null
+  );
+  const [selectedElement, setSelectedElementState] = useState6(null);
+  const setSelectedElement = useCallback4(
+    (element) => {
+      selectedElementRef.current = element;
+      setSelectedElementState(element);
+    },
+    [selectedElementRef]
+  );
+  const setHoverElement = useCallback4(
+    (element) => {
+      hoverElementRef.current = element;
+      setHoverElementState(element);
+    },
+    [hoverElementRef]
+  );
+  const clearSelectionRect = useCallback4(() => {
+    selectionRectRef.current = null;
+    setSelectionOriginRect(null);
+  }, [selectionRectRef]);
+  return {
+    selectionOriginRect,
+    setSelectionOriginRect,
+    hoverPointer,
+    setHoverPointer,
+    hoverElement,
+    setHoverElement,
+    selectedElement,
+    setSelectedElement,
+    clearSelectionRect
+  };
+};
+
+// hooks/use-measurer-pointer.ts
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef5 } from "react";
+
+// targets.ts
+var pickMultiTargets = (selectionRect, items) => {
+  const candidates = items.map(({ element, rect }) => {
+    const overlapArea = intersectionArea(selectionRect, rect);
+    const elementArea = Math.max(1, rectArea(rect));
+    return {
+      element,
+      rect,
+      overlapArea,
+      elementCoverage: overlapArea / elementArea
+    };
+  }).filter(({ overlapArea, elementCoverage }) => {
+    if (overlapArea <= 0) return false;
+    return elementCoverage >= MIN_MULTI_ELEMENT_COVERAGE;
+  });
+  const pruned = candidates.filter((candidate, index) => {
+    return !candidates.some((other, otherIndex) => {
+      if (index === otherIndex) return false;
+      const candidateArea = rectArea(candidate.rect);
+      const otherArea = rectArea(other.rect);
+      const isAncestorLike = candidateArea > otherArea * ANCESTOR_PRUNE_SCALE && candidate.rect.left <= other.rect.left && candidate.rect.top <= other.rect.top && candidate.rect.left + candidate.rect.width >= other.rect.left + other.rect.width && candidate.rect.top + candidate.rect.height >= other.rect.top + other.rect.height;
+      return isAncestorLike && candidate.elementCoverage < ANCESTOR_KEEP_COVERAGE;
+    });
+  });
+  return (pruned.length > 0 ? pruned : candidates).sort((a, b) => rectArea(a.rect) - rectArea(b.rect)).map(({ element }) => element);
+};
+var pickSingleTarget = (selectionRect, point, items) => {
+  const selectionArea = Math.max(1, rectArea(selectionRect));
+  const scored = items.map(({ element, rect }) => {
+    const overlap = intersectionArea(selectionRect, rect);
+    const elementArea = Math.max(1, rectArea(rect));
+    const coverage = overlap / elementArea;
+    const areaRatio = elementArea / selectionArea;
+    const areaSimilarity = 1 - Math.min(1, Math.abs(Math.log(areaRatio)) / 2);
+    const pointerInside = point.x >= rect.left && point.x <= rect.left + rect.width && point.y >= rect.top && point.y <= rect.top + rect.height;
+    const largeContainerPenalty = elementArea > selectionArea * 4 && coverage < 0.9 ? 0.25 : 0;
+    const score = coverage * 0.55 + areaSimilarity * 0.35 + (pointerInside ? 0.2 : 0) - largeContainerPenalty;
+    return { element, rect, coverage, score };
+  }).filter(({ rect, coverage }) => {
+    if (rect.width < MIN_SINGLE_TARGET_SIZE || rect.height < MIN_SINGLE_TARGET_SIZE) {
+      return false;
+    }
+    return coverage >= MIN_SINGLE_ELEMENT_COVERAGE;
+  });
+  if (scored.length === 0) return null;
+  scored.sort((a, b) => b.score - a.score);
+  return scored[0].element;
+};
+var pickPointTarget = (point, items) => {
+  const scored = items.filter(({ rect }) => {
+    return rect.width >= MIN_SINGLE_TARGET_SIZE && rect.height >= MIN_SINGLE_TARGET_SIZE;
+  }).map(({ element, rect }) => {
+    const area = Math.max(1, rectArea(rect));
+    const inside = point.x >= rect.left && point.x <= rect.left + rect.width && point.y >= rect.top && point.y <= rect.top + rect.height;
+    const distance = getDistanceToRect(point, rect);
+    const proximity = 1 / (1 + distance);
+    const areaWeight = 1 / (1 + Math.log(area));
+    const score = (inside ? 2 : 0) + proximity * 0.9 + areaWeight * 0.35;
+    return { element, score };
+  });
+  if (scored.length === 0) return null;
+  scored.sort((a, b) => b.score - a.score);
+  return scored[0].element;
+};
+
+// selection.ts
+var getTargetElement = (point, overlayNode) => {
+  if (overlayNode) {
+    const previous = overlayNode.style.pointerEvents;
+    overlayNode.style.pointerEvents = "none";
+    const elements2 = document.elementsFromPoint(point.x, point.y);
+    overlayNode.style.pointerEvents = previous;
+    for (const element of elements2) {
+      if (!(element instanceof HTMLElement)) continue;
+      if (overlayNode.contains(element)) continue;
+      if (element === document.body || element === document.documentElement)
+        continue;
+      const rect = element.getBoundingClientRect();
+      if (rect.width <= 2 || rect.height <= 2) continue;
+      return element;
+    }
+    return null;
+  }
+  const elements = document.elementsFromPoint(point.x, point.y);
+  for (const element of elements) {
+    if (!(element instanceof HTMLElement)) continue;
+    if (element === document.body || element === document.documentElement)
+      continue;
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 2 || rect.height <= 2) continue;
+    return element;
+  }
+  return null;
+};
+var getSnappedClickTarget = (point, overlayNode, snapEnabled) => {
+  if (!snapEnabled) return getTargetElement(point, overlayNode);
+  const probeRect = {
+    left: point.x - 20,
+    top: point.y - 20,
+    width: 40,
+    height: 40
+  };
+  const entries = getSelectionEntries(probeRect, overlayNode);
+  return pickPointTarget(point, entries) ?? pickSingleTarget(probeRect, point, entries) ?? getTargetElement(point, overlayNode);
+};
+var getSelectionEntries = (rect, overlayNode) => {
+  const frame = getFrameToken();
+  const key = `${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(
+    rect.width
+  )}:${Math.round(rect.height)}`;
+  if (frame === cachedSelectionFrame && cachedSelectionKey === key && cachedOverlayNode === overlayNode) {
+    return cachedSelectionEntries;
+  }
+  const minLeft = rect.left - 1;
+  const minTop = rect.top - 1;
+  const maxRight = rect.left + rect.width + 1;
+  const maxBottom = rect.top + rect.height + 1;
+  const elements = getBodyElementsCached();
+  const entries = elements.map((element) => ({ element, rect: getRectFromDomCached(element) })).filter(({ element, rect: elementRect }) => {
+    if (overlayNode && overlayNode.contains(element)) return false;
+    if (element === document.body || element === document.documentElement)
+      return false;
+    if (elementRect.width < MIN_MULTI_TARGET_SIZE || elementRect.height < MIN_MULTI_TARGET_SIZE) {
+      return false;
+    }
+    if (elementRect.left > maxRight || elementRect.top > maxBottom)
+      return false;
+    if (elementRect.left + elementRect.width < minLeft) return false;
+    if (elementRect.top + elementRect.height < minTop) return false;
+    return rectsOverlap(rect, elementRect);
+  });
+  cachedSelectionFrame = frame;
+  cachedSelectionKey = key;
+  cachedOverlayNode = overlayNode;
+  cachedSelectionEntries = entries;
+  return entries;
+};
+var cachedSelectionFrame = -1;
+var cachedSelectionKey = "";
+var cachedSelectionEntries = [];
+var cachedOverlayNode = null;
+var getSelectionCacheKey = (rect) => `${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(
+  rect.width
+)}:${Math.round(rect.height)}`;
+var getSelectionEntriesCached = (rect, overlayNode, cache) => {
+  const frame = getFrameToken();
+  const key = getSelectionCacheKey(rect);
+  if (cache.key === key && cache.overlayNode === overlayNode && cache.frame === frame) {
+    return cache.entries;
+  }
+  const entries = getSelectionEntries(rect, overlayNode);
+  cache.key = key;
+  cache.overlayNode = overlayNode;
+  cache.frame = frame;
+  cache.entries = entries;
+  return entries;
+};
+var getElementsInRectCached = (rect, overlayNode, cache) => {
+  const entries = getSelectionEntriesCached(rect, overlayNode, cache);
+  if (entries.length === 0) return [];
+  return pickMultiTargets(rect, entries);
+};
+
+// hooks/use-measurer-pointer.ts
+var useMeasurerPointer = ({
+  toolbarRef,
+  overlayRef,
+  selectionRectRef,
+  createActionCommit,
+  clearGuideDragHold,
+  scheduleGuideDragHold,
+  enabled,
+  toolMode,
+  guidesEnabled,
+  snapEnabled,
+  snapGuidesEnabled,
+  altPressed,
+  guideOrientation,
+  hoverHighlightEnabled,
+  start,
+  end,
+  isDragging,
+  selectedMeasurements,
+  selectedMeasurement,
+  selectedGuideIds,
+  guides,
+  draggingGuideId,
+  optionPairOverlay,
+  setAltPressed,
+  setGuidePreview,
+  setSelectedGuideIds,
+  setGuides,
+  setStart,
+  setEnd,
+  setIsDragging,
+  setHeldDistances,
+  setDraggingGuideId,
+  setActiveMeasurement,
+  setMeasurements,
+  setSelectedMeasurements,
+  setSelectedMeasurement,
+  setSelectionOriginRect,
+  setSelectedElement,
+  setHoverRect,
+  setHoverElement,
+  setHoverPointer,
+  clearSelectionRect
+}) => {
+  const hoverFrameRef = useRef5(null);
+  const hoverPointRef = useRef5(null);
+  const selectionCacheRef = useRef5({
+    key: "",
+    entries: [],
+    overlayNode: null,
+    frame: -1
+  });
+  const shiftDragRef = useRef5(false);
+  const shiftToggleElementRef = useRef5(null);
+  const guidesEnabledRef = useRef5(guidesEnabled);
+  const guidesRef = useRef5(guides);
+  const snapGuidesEnabledRef = useRef5(snapGuidesEnabled);
+  const draggingGuideIdRef = useRef5(draggingGuideId);
+  const guideOrientationRef = useRef5(guideOrientation);
+  useEffect5(() => {
+    return () => {
+      if (hoverFrameRef.current) {
+        cancelAnimationFrame(hoverFrameRef.current);
+      }
+    };
+  }, []);
+  useEffect5(() => {
+    guidesEnabledRef.current = guidesEnabled;
+  }, [guidesEnabled]);
+  useEffect5(() => {
+    guidesRef.current = guides;
+  }, [guides]);
+  useEffect5(() => {
+    snapGuidesEnabledRef.current = snapGuidesEnabled;
+  }, [snapGuidesEnabled]);
+  useEffect5(() => {
+    guideOrientationRef.current = guideOrientation;
+  }, [guideOrientation]);
+  useEffect5(() => {
+    draggingGuideIdRef.current = draggingGuideId;
+  }, [draggingGuideId]);
+  const updateHoverTarget = useCallback5(
+    (point) => {
+      const target = getTargetElement(point, overlayRef.current);
+      if (target) {
+        const rect = target.getBoundingClientRect();
+        setHoverRect({
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height
+        });
+        setHoverElement(target);
+      } else {
+        setHoverRect(null);
+        setHoverElement(null);
+      }
+    },
+    [overlayRef, setHoverElement, setHoverRect]
+  );
+  const updateHoverElement = useCallback5(
+    (point) => {
+      const target = getTargetElement(point, overlayRef.current);
+      setHoverElement(target);
+    },
+    [overlayRef, setHoverElement]
+  );
+  const handlePointerDown = useCallback5(
+    (event) => {
+      const commit = createActionCommit();
+      const toolbarNode = toolbarRef.current;
+      if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (!enabled || event.button !== 0) return;
+      if (toolMode === "none") return;
+      clearSelectionRect();
+      const point = { x: event.clientX, y: event.clientY };
+      shiftDragRef.current = event.shiftKey;
+      shiftToggleElementRef.current = event.shiftKey ? getSelectedMeasurementHit({
+        point,
+        selectedMeasurements,
+        overlayNode: overlayRef.current
+      })?.elementRef ?? null : null;
+      selectionCacheRef.current.key = "";
+      if (altPressed && optionPairOverlay) {
+        commit();
+        setHeldDistances((prev) => [
+          ...prev,
+          {
+            ...optionPairOverlay,
+            id: createId()
+          }
+        ]);
+        return;
+      }
+      if (guidesEnabled) {
+        commit();
+        const position = getSnapGuidePosition({
+          orientation: guideOrientation,
+          point,
+          snapGuidesEnabled,
+          overlayNode: overlayRef.current,
+          guides,
+          draggingGuideId
+        });
+        const id = createId();
+        setSelectedGuideIds([]);
+        setGuides((prev) => [
+          ...prev,
+          { id, orientation: guideOrientation, position }
+        ]);
+        setSelectedGuideIds([id]);
+        scheduleGuideDragHold(id, setDraggingGuideId);
+        event.currentTarget.setPointerCapture(event.pointerId);
+        return;
+      }
+      if (selectedGuideIds.length > 0) {
+        commit();
+        setSelectedGuideIds([]);
+      }
+      setStart(point);
+      setEnd(point);
+      setIsDragging(false);
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [
+      altPressed,
+      clearSelectionRect,
+      createActionCommit,
+      draggingGuideId,
+      enabled,
+      guideOrientation,
+      guides,
+      guidesEnabled,
+      optionPairOverlay,
+      overlayRef,
+      scheduleGuideDragHold,
+      selectedGuideIds.length,
+      selectedMeasurements,
+      setDraggingGuideId,
+      setEnd,
+      setGuides,
+      setHeldDistances,
+      setIsDragging,
+      setSelectedGuideIds,
+      setStart,
+      snapGuidesEnabled,
+      toolMode,
+      toolbarRef
+    ]
+  );
+  const handlePointerMove = useCallback5(
+    (event) => {
+      const toolbarNode = toolbarRef.current;
+      if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (!enabled) return;
+      if (toolMode === "none") {
+        if (hoverHighlightEnabled) {
+          setHoverRect(null);
+          setHoverElement(null);
+        }
+        setHoverPointer(null);
+        setGuidePreview(null);
+        return;
+      }
+      const point = { x: event.clientX, y: event.clientY };
+      if (event.altKey !== altPressed) {
+        setAltPressed(event.altKey);
+      }
+      hoverPointRef.current = point;
+      if (!hoverFrameRef.current) {
+        hoverFrameRef.current = requestAnimationFrame(() => {
+          const latest = hoverPointRef.current;
+          if (latest && !draggingGuideIdRef.current) {
+            if (hoverHighlightEnabled) {
+              updateHoverTarget(latest);
+            } else {
+              updateHoverElement(latest);
+            }
+          }
+          if (latest && guidesRef.current.length > 0) {
+            setHoverPointer(latest);
+          } else {
+            setHoverPointer(null);
+          }
+          if (guidesEnabledRef.current && latest && !draggingGuideIdRef.current) {
+            const position = getSnapGuidePosition({
+              orientation: guideOrientationRef.current,
+              point: latest,
+              snapGuidesEnabled: snapGuidesEnabledRef.current,
+              overlayNode: overlayRef.current,
+              guides: guidesRef.current,
+              draggingGuideId: draggingGuideIdRef.current
+            });
+            setGuidePreview({
+              orientation: guideOrientationRef.current,
+              position
+            });
+          } else {
+            setGuidePreview(null);
+          }
+          hoverFrameRef.current = null;
+        });
+      }
+      if (draggingGuideId) {
+        setGuides(
+          (prev) => prev.map(
+            (guide) => guide.id === draggingGuideId ? {
+              ...guide,
+              position: getSnapGuidePosition({
+                orientation: guide.orientation,
+                point,
+                snapGuidesEnabled: snapGuidesEnabledRef.current,
+                overlayNode: overlayRef.current,
+                guides: guidesRef.current,
+                draggingGuideId: draggingGuideIdRef.current
+              })
+            } : guide
+          )
+        );
+      }
+      if (!start) return;
+      setEnd(point);
+      if (!isDragging) {
+        const dx = Math.abs(point.x - start.x);
+        const dy = Math.abs(point.y - start.y);
+        const threshold = shiftDragRef.current ? 12 : 4;
+        if (dx > threshold || dy > threshold) {
+          setIsDragging(true);
+        }
+      }
+    },
+    [
+      altPressed,
+      draggingGuideId,
+      enabled,
+      hoverHighlightEnabled,
+      isDragging,
+      overlayRef,
+      setAltPressed,
+      setEnd,
+      setGuidePreview,
+      setGuides,
+      setHoverElement,
+      setHoverPointer,
+      setHoverRect,
+      setIsDragging,
+      start,
+      toolMode,
+      toolbarRef,
+      updateHoverElement,
+      updateHoverTarget
+    ]
+  );
+  const handlePointerUp = useCallback5(
+    (event) => {
+      const commit = createActionCommit();
+      const toolbarNode = toolbarRef.current;
+      if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (!enabled) return;
+      clearGuideDragHold();
+      if (toolMode === "none") {
+        setStart(null);
+        setEnd(null);
+        setIsDragging(false);
+        return;
+      }
+      const point = { x: event.clientX, y: event.clientY };
+      const resetDragState = () => {
+        setStart(null);
+        setEnd(null);
+        setIsDragging(false);
+        shiftDragRef.current = false;
+        shiftToggleElementRef.current = null;
+      };
+      const clearTransientMeasurements = () => {
+        setActiveMeasurement(null);
+        setMeasurements([]);
+      };
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      if (draggingGuideId) {
+        setDraggingGuideId(null);
+      }
+      if (!start || !end) {
+        resetDragState();
+        return;
+      }
+      const dragDx = Math.abs(point.x - start.x);
+      const dragDy = Math.abs(point.y - start.y);
+      const shiftThreshold = 12;
+      const isShiftClick = event.shiftKey && dragDx <= shiftThreshold && dragDy <= shiftThreshold;
+      if (isDragging && !isShiftClick) {
+        const selectionRect = getRectFromPoints(start, point);
+        selectionRectRef.current = selectionRect;
+        setSelectionOriginRect(selectionRect);
+        const elements = getElementsInRectCached(
+          selectionRect,
+          overlayRef.current,
+          selectionCacheRef.current
+        );
+        const hasSameSelection = elements.length === selectedMeasurements.length && elements.every(
+          (element, index) => selectedMeasurements[index]?.elementRef === element
+        );
+        const lastElement = elements[elements.length - 1] ?? null;
+        const lastChanged = (selectedMeasurement?.elementRef ?? null) !== lastElement;
+        if (elements.length > 0) {
+          if (!hasSameSelection) {
+            commit();
+            const nextMeasurements = elements.map((element) => ({
+              ...getInspectMeasurement(element),
+              originRect: selectionRect
+            }));
+            setSelectedMeasurements(nextMeasurements);
+            setSelectedElement(lastElement);
+            setSelectedMeasurement(
+              nextMeasurements[nextMeasurements.length - 1]
+            );
+          } else if (lastChanged) {
+            commit();
+            setSelectedElement(lastElement);
+            const lastMeasurement = selectedMeasurements.find(
+              (measurement) => measurement.elementRef === lastElement
+            );
+            if (lastMeasurement) {
+              setSelectedMeasurement(lastMeasurement);
+            }
+          }
+        } else if (selectedMeasurements.length > 0 || selectedMeasurement) {
+          commit();
+          setSelectedElement(null);
+          setSelectedMeasurement(null);
+          setSelectedMeasurements([]);
+          clearSelectionRect();
+        }
+        clearTransientMeasurements();
+        resetDragState();
+        return;
+      }
+      const selectedHit = shiftToggleElementRef.current ? selectedMeasurements.find(
+        (measurement) => measurement.elementRef === shiftToggleElementRef.current
+      ) ?? null : getSelectedMeasurementHit({
+        point,
+        selectedMeasurements,
+        overlayNode: overlayRef.current
+      });
+      if (event.shiftKey && selectedHit) {
+        commit();
+        const nextSelected = selectedMeasurements.filter(
+          (measurement) => measurement.elementRef !== selectedHit.elementRef
+        );
+        setSelectedMeasurements(nextSelected);
+        clearSelectionRect();
+        const nextPrimary = nextSelected.length > 0 ? nextSelected[nextSelected.length - 1] : null;
+        setSelectedElement(nextPrimary?.elementRef ?? null);
+        setSelectedMeasurement(nextPrimary);
+        clearTransientMeasurements();
+        resetDragState();
+        return;
+      }
+      if (!hoverHighlightEnabled && !event.shiftKey && selectedHit) {
+        commit();
+        const nextSelected = selectedMeasurements.filter(
+          (measurement) => measurement.elementRef !== selectedHit.elementRef
+        );
+        setSelectedMeasurements(nextSelected);
+        clearSelectionRect();
+        const nextPrimary = nextSelected.length > 0 ? nextSelected[nextSelected.length - 1] : null;
+        setSelectedElement(nextPrimary?.elementRef ?? null);
+        setSelectedMeasurement(nextPrimary);
+        clearTransientMeasurements();
+        resetDragState();
+        return;
+      }
+      const target = event.shiftKey ? getTargetElement(point, overlayRef.current) ?? getSnappedClickTarget(point, overlayRef.current, snapEnabled) : getSnappedClickTarget(point, overlayRef.current, snapEnabled);
+      if (target) {
+        const inspectMeasurement = getInspectMeasurement(target);
+        clearTransientMeasurements();
+        if (event.shiftKey) {
+          const alreadySelected = selectedMeasurements.some(
+            (measurement) => measurement.elementRef === target
+          );
+          if (alreadySelected) {
+            commit();
+            const nextSelected = selectedMeasurements.filter(
+              (measurement) => measurement.elementRef !== target
+            );
+            setSelectedMeasurements(nextSelected);
+            clearSelectionRect();
+            const nextPrimary = nextSelected.length > 0 ? nextSelected[nextSelected.length - 1] : null;
+            setSelectedElement(nextPrimary?.elementRef ?? null);
+            setSelectedMeasurement(nextPrimary);
+          } else {
+            commit();
+            setSelectedMeasurements((prev) => [...prev, inspectMeasurement]);
+            setSelectedElement(target);
+            setSelectedMeasurement(inspectMeasurement);
+            clearSelectionRect();
+          }
+          clearTransientMeasurements();
+          resetDragState();
+          return;
+        }
+        setSelectedElement(target);
+        commit();
+        setSelectedMeasurements([inspectMeasurement]);
+        setSelectedMeasurement(inspectMeasurement);
+        clearSelectionRect();
+      } else {
+        if (event.shiftKey) {
+          clearTransientMeasurements();
+          resetDragState();
+          return;
+        }
+        commit();
+        setSelectedElement(null);
+        setSelectedMeasurement(null);
+        setSelectedMeasurements([]);
+        clearSelectionRect();
+      }
+      resetDragState();
+    },
+    [
+      clearGuideDragHold,
+      clearSelectionRect,
+      createActionCommit,
+      draggingGuideId,
+      enabled,
+      end,
+      hoverHighlightEnabled,
+      isDragging,
+      overlayRef,
+      selectedMeasurement,
+      selectedMeasurements,
+      selectionRectRef,
+      setActiveMeasurement,
+      setDraggingGuideId,
+      setEnd,
+      setIsDragging,
+      setMeasurements,
+      setSelectedElement,
+      setSelectedMeasurement,
+      setSelectedMeasurements,
+      setSelectionOriginRect,
+      setStart,
+      snapEnabled,
+      start,
+      toolMode,
+      toolbarRef
+    ]
+  );
+  const handlePointerLeave = useCallback5(() => {
+    clearGuideDragHold();
+    setStart(null);
+    setEnd(null);
+    setIsDragging(false);
+    setDraggingGuideId(null);
+    setGuidePreview(null);
+  }, [
+    clearGuideDragHold,
+    setDraggingGuideId,
+    setEnd,
+    setGuidePreview,
+    setIsDragging,
+    setStart
+  ]);
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerLeave
+  };
+};
+
+// hooks/use-overlay-refs.ts
+import { useRef as useRef6 } from "react";
+var useOverlayRefs = () => {
+  const overlayRef = useRef6(null);
+  const selectedElementRef = useRef6(null);
+  const hoverElementRef = useRef6(null);
+  return { overlayRef, selectedElementRef, hoverElementRef };
+};
+
+// hooks/use-resize-sync.ts
+import { useEffect as useEffect6, useRef as useRef7 } from "react";
+var useResizeSync = (params) => {
+  const resizeFrameRef = useRef7(null);
+  const viewportRef = useRef7(getViewportSize());
+  useEffect6(() => {
+    const handleResize = () => {
+      if (resizeFrameRef.current) {
+        cancelAnimationFrame(resizeFrameRef.current);
+      }
+      resizeFrameRef.current = requestAnimationFrame(() => {
+        const viewport = getViewportSize();
+        const previousViewport = viewportRef.current;
+        params.setMeasurements(
+          (prev) => prev.map(
+            (measurement) => updateMeasurementForResize(measurement, viewport)
+          )
+        );
+        params.setActiveMeasurement(
+          (prev) => prev ? updateMeasurementForResize(prev, viewport) : prev
+        );
+        params.setHeldDistances(
+          (prev) => prev.map((distance) => updateDistanceForResize(distance, viewport))
+        );
+        if (params.selectedElementRef.current) {
+          params.setSelectedMeasurement(
+            getInspectMeasurement(params.selectedElementRef.current)
+          );
+        }
+        if (previousViewport.width > 0 && previousViewport.height > 0) {
+          const scaleX = viewport.width / previousViewport.width;
+          const scaleY = viewport.height / previousViewport.height;
+          params.setGuides(
+            (prev) => prev.map(
+              (guide) => guide.orientation === "vertical" ? { ...guide, position: guide.position * scaleX } : { ...guide, position: guide.position * scaleY }
+            )
+          );
+        }
+        viewportRef.current = viewport;
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (resizeFrameRef.current) {
+        cancelAnimationFrame(resizeFrameRef.current);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [params]);
+};
+
+// render/measurer-overlay.tsx
+import { memo as memo5 } from "react";
+
+// components/measure-tag.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MeasureTag({
+  children,
+  className = "",
+  style
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute rounded px-1 py-0.5 text-[10px] text-ink-50 tabular-nums select-none",
+        className
+      ),
+      style,
+      children
+    }
+  );
+}
+
+// components/measurement-box.tsx
+import { memo as memo2, useEffect as useEffect7, useState as useState7 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var formatValue2 = (value) => Math.round(value);
+var MeasurementBox = memo2(function MeasurementBox2({
+  measurement,
+  transitionMs,
+  labelOffset,
+  edgeVisibility
+}) {
+  const [rect, setRect] = useState7(
+    measurement.originRect ?? measurement.rect
+  );
+  useEffect7(() => {
+    if (!measurement.originRect) return;
+    const frame = requestAnimationFrame(() => {
+      setRect(measurement.rect);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [measurement]);
+  const edges = edgeVisibility ?? { top: true, right: true, bottom: true, left: true };
+  const displayRect = measurement.originRect ? rect : measurement.rect;
+  const outlineColor = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
+  const fillColor = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
+  return /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none", children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "absolute",
+        style: {
+          left: displayRect.left,
+          top: displayRect.top,
+          width: displayRect.width,
+          height: displayRect.height,
+          backgroundColor: fillColor,
+          transition: measurement.originRect ? `left ${transitionMs}ms ease, top ${transitionMs}ms ease, width ${transitionMs}ms ease, height ${transitionMs}ms ease` : void 0
+        },
+        children: [
+          edges.top ? /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-px w-full",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null,
+          edges.right ? /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute right-0 top-0 h-full w-px",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null,
+          edges.bottom ? /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 h-px w-full",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null,
+          edges.left ? /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-full w-px",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      MeasureTag,
+      {
+        className: "-translate-x-1/2 bg-ink-900/90",
+        style: {
+          left: displayRect.left + displayRect.width / 2,
+          top: displayRect.top + displayRect.height + labelOffset,
+          transition: measurement.originRect ? `left ${transitionMs}ms ease, top ${transitionMs}ms ease` : void 0
+        },
+        children: [
+          formatValue2(displayRect.width),
+          " x ",
+          formatValue2(displayRect.height)
+        ]
+      }
+    )
+  ] });
+});
+
+// components/selected-measurement-box.tsx
+import { memo as memo3, useEffect as useEffect8, useState as useState8 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var formatValue3 = (value) => Math.round(value);
+var SelectedMeasurementBox = memo3(function SelectedMeasurementBox2({
+  measurement,
+  transitionMs,
+  labelOffset,
+  edgeVisibility
+}) {
+  const [rect, setRect] = useState8(
+    measurement.originRect ?? measurement.rect
+  );
+  useEffect8(() => {
+    if (!measurement.originRect) return;
+    const frame = requestAnimationFrame(() => {
+      setRect(measurement.rect);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [measurement]);
+  const edges = edgeVisibility ?? { top: true, right: true, bottom: true, left: true };
+  const displayRect = measurement.originRect ? rect : measurement.rect;
+  const outlineColor = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
+  const fillColor = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
+  return /* @__PURE__ */ jsxs3("div", { className: "pointer-events-none", children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "absolute",
+        style: {
+          left: displayRect.left,
+          top: displayRect.top,
+          width: displayRect.width,
+          height: displayRect.height,
+          backgroundColor: fillColor,
+          transition: measurement.originRect ? `left ${transitionMs}ms ease, top ${transitionMs}ms ease, width ${transitionMs}ms ease, height ${transitionMs}ms ease` : void 0
+        },
+        children: [
+          edges.top ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-px w-full",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null,
+          edges.right ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "absolute right-0 top-0 h-full w-px",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null,
+          edges.bottom ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 h-px w-full",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null,
+          edges.left ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-full w-px",
+              style: { backgroundColor: outlineColor }
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      MeasureTag,
+      {
+        className: "-translate-x-1/2 bg-ink-900/90",
+        style: {
+          left: displayRect.left + displayRect.width / 2,
+          top: displayRect.top + displayRect.height + labelOffset,
+          transition: measurement.originRect ? `left ${transitionMs}ms ease, top ${transitionMs}ms ease` : void 0
+        },
+        children: [
+          formatValue3(displayRect.width),
+          " x ",
+          formatValue3(displayRect.height)
+        ]
+      }
+    )
+  ] });
+});
+
+// render/distance-overlay-item.tsx
+import { memo as memo4 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
+  distance,
+  labelOffset,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: onRemove ? "pointer-events-auto" : "pointer-events-none",
+      onClick: onRemove ? (event) => {
+        event.stopPropagation();
+        onRemove(distance.id);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "absolute rounded border border-[#2563eb]/70",
+            style: {
+              left: distance.rectA.left,
+              top: distance.rectA.top,
+              width: distance.rectA.width,
+              height: distance.rectA.height
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "absolute rounded border border-[#2563eb]/70",
+            style: {
+              left: distance.rectB.left,
+              top: distance.rectB.top,
+              width: distance.rectB.width,
+              height: distance.rectB.height
+            }
+          }
+        ),
+        distance.connectors.map(
+          (connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: "absolute border-l border-dashed border-[#2563eb]/70",
+              style: {
+                left: connector.x1,
+                top: Math.min(connector.y1, connector.y2),
+                height: Math.abs(connector.y2 - connector.y1)
+              }
+            },
+            `${distance.id}-connector-${index}`
+          ) : /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: "absolute border-t border-dashed border-[#2563eb]/70",
+              style: {
+                left: Math.min(connector.x1, connector.x2),
+                top: connector.y1,
+                width: Math.abs(connector.x2 - connector.x1)
+              }
+            },
+            `${distance.id}-connector-${index}`
+          )
+        ),
+        distance.horizontal && distance.horizontal.value > 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: "absolute h-px bg-[#2563eb]",
+              style: {
+                left: Math.min(distance.horizontal.x1, distance.horizontal.x2),
+                width: Math.abs(distance.horizontal.x2 - distance.horizontal.x1),
+                top: distance.horizontal.y
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            MeasureTag,
+            {
+              className: "-translate-x-1/2 bg-ink-900/90",
+              style: {
+                left: (distance.horizontal.x1 + distance.horizontal.x2) / 2,
+                top: distance.horizontal.y + labelOffset
+              },
+              children: formatValue(distance.horizontal.value)
+            }
+          )
+        ] }) : null,
+        distance.vertical && distance.vertical.value > 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: "absolute w-px bg-[#2563eb]",
+              style: {
+                top: Math.min(distance.vertical.y1, distance.vertical.y2),
+                height: Math.abs(distance.vertical.y2 - distance.vertical.y1),
+                left: distance.vertical.x
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            MeasureTag,
+            {
+              className: "-translate-y-1/2 bg-ink-900/90",
+              style: {
+                left: distance.vertical.x + labelOffset,
+                top: (distance.vertical.y1 + distance.vertical.y2) / 2
+              },
+              children: formatValue(distance.vertical.value)
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+});
+
+// render/measurer-overlay.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var MeasurerOverlay = memo5(function MeasurerOverlay2({
+  enabled,
+  toolMode,
+  guidesEnabled,
+  altPressed,
+  isDragging,
+  displayedMeasurements,
+  measurementEdgeVisibility,
+  activeRect,
+  activeWidth,
+  activeHeight,
+  fillColor,
+  outlineColor,
+  hoverRectToShow,
+  hoverEdgeVisibility,
+  guidePreview,
+  guideColorPreview,
+  displayedSelectedMeasurements,
+  selectedEdgeVisibility,
+  heldDistances,
+  optionPairOverlay,
+  guideDistanceOverlay,
+  optionContainerLines,
+  guides,
+  hoverGuide,
+  selectedGuideIds,
+  guideColorActive,
+  guideColorHover,
+  guideColorDefault,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerLeave,
+  onRemoveHeldDistance,
+  onGuidePointerDown,
+  onGuidePointerUp,
+  onGuidePointerCancel
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `absolute inset-0 ${enabled && toolMode !== "none" ? `pointer-events-auto ${guidesEnabled ? "cursor-crosshair" : "cursor-default"} opacity-100` : "pointer-events-none opacity-0"}`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerLeave,
+      children: [
+        !guidesEnabled ? displayedMeasurements.map((measurement, index) => /* @__PURE__ */ jsx7(
+          MeasurementBox,
+          {
+            measurement,
+            transitionMs: MEASURE_TRANSITION_MS,
+            labelOffset: MEASURE_LABEL_OFFSET,
+            edgeVisibility: measurementEdgeVisibility[index]
+          },
+          measurement.id
+        )) : null,
+        !guidesEnabled && activeRect && isDragging ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: "pointer-events-none absolute",
+              style: {
+                left: activeRect.left,
+                top: activeRect.top,
+                width: activeRect.width,
+                height: activeRect.height,
+                backgroundColor: fillColor
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    className: "absolute left-0 top-0 h-px w-full",
+                    style: { backgroundColor: outlineColor }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    className: "absolute right-0 top-0 h-full w-px",
+                    style: { backgroundColor: outlineColor }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    className: "absolute bottom-0 left-0 h-px w-full",
+                    style: { backgroundColor: outlineColor }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    className: "absolute left-0 top-0 h-full w-px",
+                    style: { backgroundColor: outlineColor }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs5(
+            MeasureTag,
+            {
+              className: "-translate-x-1/2 bg-ink-900/90",
+              style: {
+                left: activeRect.left + activeRect.width / 2,
+                top: activeRect.top + activeRect.height + MEASURE_LABEL_OFFSET
+              },
+              children: [
+                activeWidth,
+                " x ",
+                activeHeight
+              ]
+            }
+          )
+        ] }) : null,
+        !guidesEnabled && hoverRectToShow ? /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: "pointer-events-none absolute",
+            style: {
+              left: hoverRectToShow.left,
+              top: hoverRectToShow.top,
+              width: hoverRectToShow.width,
+              height: hoverRectToShow.height,
+              backgroundColor: fillColor
+            },
+            children: [
+              hoverEdgeVisibility?.top ? /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "absolute left-0 top-0 h-px w-full",
+                  style: { backgroundColor: outlineColor }
+                }
+              ) : null,
+              hoverEdgeVisibility?.right ? /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "absolute right-0 top-0 h-full w-px",
+                  style: { backgroundColor: outlineColor }
+                }
+              ) : null,
+              hoverEdgeVisibility?.bottom ? /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "absolute bottom-0 left-0 h-px w-full",
+                  style: { backgroundColor: outlineColor }
+                }
+              ) : null,
+              hoverEdgeVisibility?.left ? /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "absolute left-0 top-0 h-full w-px",
+                  style: { backgroundColor: outlineColor }
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        guidesEnabled && guidePreview ? /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "pointer-events-none absolute",
+            style: guidePreview.orientation === "vertical" ? {
+              left: guidePreview.position - GUIDE_HITBOX_SIZE / 2,
+              top: 0,
+              width: GUIDE_HITBOX_SIZE,
+              height: "100%"
+            } : {
+              top: guidePreview.position - GUIDE_HITBOX_SIZE / 2,
+              left: 0,
+              height: GUIDE_HITBOX_SIZE,
+              width: "100%"
+            },
+            children: /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: "absolute",
+                style: guidePreview.orientation === "vertical" ? {
+                  left: GUIDE_HITBOX_SIZE / 2 - 1,
+                  top: 0,
+                  width: 2,
+                  height: "100%",
+                  backgroundColor: guideColorPreview
+                } : {
+                  top: GUIDE_HITBOX_SIZE / 2 - 1,
+                  left: 0,
+                  height: 2,
+                  width: "100%",
+                  backgroundColor: guideColorPreview
+                }
+              }
+            )
+          }
+        ) : null,
+        !guidesEnabled ? displayedSelectedMeasurements.map((measurement, index) => /* @__PURE__ */ jsx7(
+          SelectedMeasurementBox,
+          {
+            measurement,
+            transitionMs: MEASURE_TRANSITION_MS,
+            labelOffset: MEASURE_LABEL_OFFSET,
+            edgeVisibility: selectedEdgeVisibility[index]
+          },
+          measurement.id
+        )) : null,
+        heldDistances.map((distance) => /* @__PURE__ */ jsx7(
+          DistanceOverlayItem,
+          {
+            distance,
+            labelOffset: MEASURE_LABEL_OFFSET,
+            onRemove: onRemoveHeldDistance
+          },
+          `held-${distance.id}`
+        )),
+        !guidesEnabled && altPressed && optionPairOverlay ? /* @__PURE__ */ jsx7(
+          DistanceOverlayItem,
+          {
+            distance: optionPairOverlay,
+            labelOffset: MEASURE_LABEL_OFFSET
+          },
+          `option-${optionPairOverlay.id}`
+        ) : null,
+        guidesEnabled && altPressed && guideDistanceOverlay ? /* @__PURE__ */ jsx7(
+          DistanceOverlayItem,
+          {
+            distance: guideDistanceOverlay,
+            labelOffset: MEASURE_LABEL_OFFSET
+          },
+          `guide-preview-${guideDistanceOverlay.id}`
+        ) : null,
+        !guidesEnabled && altPressed && optionContainerLines ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          optionContainerLines.top.value > 0 ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: "absolute w-px bg-[#2563eb]",
+                style: {
+                  top: optionContainerLines.top.y1,
+                  height: optionContainerLines.top.y2 - optionContainerLines.top.y1,
+                  left: optionContainerLines.top.x
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              MeasureTag,
+              {
+                className: "-translate-y-1/2 bg-ink-900/90",
+                style: {
+                  left: optionContainerLines.top.x + MEASURE_LABEL_OFFSET,
+                  top: (optionContainerLines.top.y1 + optionContainerLines.top.y2) / 2
+                },
+                children: formatValue(optionContainerLines.top.value)
+              }
+            )
+          ] }) : null,
+          optionContainerLines.bottom.value > 0 ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: "absolute w-px bg-[#2563eb]",
+                style: {
+                  top: optionContainerLines.bottom.y1,
+                  height: optionContainerLines.bottom.y2 - optionContainerLines.bottom.y1,
+                  left: optionContainerLines.bottom.x
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              MeasureTag,
+              {
+                className: "-translate-y-1/2 bg-ink-900/90",
+                style: {
+                  left: optionContainerLines.bottom.x + MEASURE_LABEL_OFFSET,
+                  top: (optionContainerLines.bottom.y1 + optionContainerLines.bottom.y2) / 2
+                },
+                children: formatValue(optionContainerLines.bottom.value)
+              }
+            )
+          ] }) : null,
+          optionContainerLines.left.value > 0 ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: "absolute h-px bg-[#2563eb]",
+                style: {
+                  left: optionContainerLines.left.x1,
+                  width: optionContainerLines.left.x2 - optionContainerLines.left.x1,
+                  top: optionContainerLines.left.y
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              MeasureTag,
+              {
+                className: "-translate-x-1/2 bg-ink-900/90",
+                style: {
+                  left: (optionContainerLines.left.x1 + optionContainerLines.left.x2) / 2,
+                  top: optionContainerLines.left.y + MEASURE_LABEL_OFFSET
+                },
+                children: formatValue(optionContainerLines.left.value)
+              }
+            )
+          ] }) : null,
+          optionContainerLines.right.value > 0 ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: "absolute h-px bg-[#2563eb]",
+                style: {
+                  left: optionContainerLines.right.x1,
+                  width: optionContainerLines.right.x2 - optionContainerLines.right.x1,
+                  top: optionContainerLines.right.y
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              MeasureTag,
+              {
+                className: "-translate-x-1/2 bg-ink-900/90",
+                style: {
+                  left: (optionContainerLines.right.x1 + optionContainerLines.right.x2) / 2,
+                  top: optionContainerLines.right.y + MEASURE_LABEL_OFFSET
+                },
+                children: formatValue(optionContainerLines.right.value)
+              }
+            )
+          ] }) : null
+        ] }) : null,
+        guides.map((guide) => {
+          const isSelected = selectedGuideIds.includes(guide.id);
+          const isHovered = hoverGuide?.id === guide.id;
+          const strokeWidth = isSelected || isHovered ? 2 : 1;
+          const strokeColor = isSelected ? guideColorActive : isHovered ? guideColorHover : guideColorDefault;
+          return /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "absolute",
+              style: guide.orientation === "vertical" ? {
+                left: guide.position - GUIDE_HITBOX_SIZE / 2,
+                top: 0,
+                width: GUIDE_HITBOX_SIZE,
+                height: "100%"
+              } : {
+                top: guide.position - GUIDE_HITBOX_SIZE / 2,
+                left: 0,
+                height: GUIDE_HITBOX_SIZE,
+                width: "100%"
+              },
+              onPointerDown: (event) => onGuidePointerDown(guide, event),
+              onPointerUp: (event) => onGuidePointerUp(guide, event),
+              onPointerCancel: (event) => onGuidePointerCancel(guide, event),
+              children: /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "absolute",
+                  style: guide.orientation === "vertical" ? {
+                    left: GUIDE_HITBOX_SIZE / 2 - 1,
+                    top: 0,
+                    width: strokeWidth,
+                    height: "100%",
+                    backgroundColor: strokeColor
+                  } : {
+                    top: GUIDE_HITBOX_SIZE / 2 - 1,
+                    left: 0,
+                    height: strokeWidth,
+                    width: "100%",
+                    backgroundColor: strokeColor
+                  }
+                }
+              )
+            },
+            guide.id
+          );
+        })
+      ]
+    }
+  );
+});
+
+// measurer.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var subscribeHydration = () => () => {
+};
+var useHydrated = () => useSyncExternalStore(
+  subscribeHydration,
+  () => true,
+  () => false
+);
+var stripMeasurement = (measurement) => ({
+  ...measurement,
+  elementRef: void 0
+});
+var stripDistance = (distance) => ({
+  ...distance,
+  elementRefA: void 0,
+  elementRefB: void 0
+});
+function MeasurerClient({
+  highlightColor,
+  guideColor,
+  hoverHighlightEnabled,
+  persistOnReload
+}) {
+  const selectionRectRef = useRef8(null);
+  const toolbarRef = useRef8(null);
+  const persistedState = useMemo2(() => {
+    if (!persistOnReload) return null;
+    const stored = window.localStorage.getItem("mesurer-state");
+    if (!stored) return null;
+    try {
+      const parsed = JSON.parse(stored);
+      if (!parsed || parsed.version !== 1) return null;
+      return parsed;
+    } catch {
+      return null;
+    }
+  }, [persistOnReload]);
+  const { overlayRef, selectedElementRef, hoverElementRef } = useOverlayRefs();
+  const {
+    selectionOriginRect,
+    setSelectionOriginRect,
+    hoverPointer,
+    setHoverPointer,
+    hoverElement,
+    setHoverElement,
+    selectedElement,
+    setSelectedElement,
+    clearSelectionRect
+  } = useMeasurerLocalState({
+    selectedElementRef,
+    hoverElementRef,
+    selectionRectRef
+  });
+  const {
+    enabled,
+    setEnabled,
+    holdEnabled,
+    snapEnabled,
+    altPressed,
+    setAltPressed,
+    toolMode,
+    setToolMode,
+    guidesEnabled,
+    multiMeasureEnabled,
+    snapGuidesEnabled
+  } = useMeasureToggles({
+    initialEnabled: persistedState?.enabled,
+    initialToolMode: persistedState?.toolMode
+  });
+  const { start, setStart, end, setEnd, isDragging, setIsDragging } = useDragState();
+  const {
+    activeMeasurement,
+    setActiveMeasurement,
+    measurements,
+    setMeasurements,
+    selectedMeasurement,
+    setSelectedMeasurement,
+    selectedMeasurements,
+    setSelectedMeasurements,
+    hoverRect,
+    setHoverRect,
+    heldDistances,
+    setHeldDistances
+  } = useMeasurementState({
+    initialActiveMeasurement: persistedState?.activeMeasurement ?? null,
+    initialMeasurements: persistedState?.measurements ?? [],
+    initialHeldDistances: persistedState?.heldDistances ?? []
+  });
+  const {
+    guides,
+    setGuides,
+    draggingGuideId,
+    setDraggingGuideId,
+    selectedGuideIds,
+    setSelectedGuideIds
+  } = useGuideState({
+    initialGuides: persistedState?.guides ?? [],
+    initialSelectedGuideIds: persistedState?.selectedGuideIds ?? []
+  });
+  const [toolbarActive, setToolbarActive] = useState9(true);
+  const { clearGuideDragHold, scheduleGuideDragHold } = useGuideDragHold();
+  const [guidePreview, setGuidePreview] = useState9(null);
+  const [guideOrientation, setGuideOrientation] = useState9(persistedState?.guideOrientation ?? "vertical");
+  const persistPayload = useMemo2(() => {
+    if (!persistOnReload) return null;
+    return JSON.stringify({
+      version: 1,
+      enabled,
+      toolMode,
+      guideOrientation,
+      guides,
+      selectedGuideIds,
+      measurements: measurements.map(stripMeasurement),
+      activeMeasurement: activeMeasurement ? stripMeasurement(activeMeasurement) : null,
+      heldDistances: heldDistances.map(stripDistance)
+    });
+  }, [
+    activeMeasurement,
+    enabled,
+    guideOrientation,
+    guides,
+    heldDistances,
+    measurements,
+    persistOnReload,
+    selectedGuideIds,
+    toolMode
+  ]);
+  useEffect9(() => {
+    if (!persistOnReload) return;
+    if (typeof window === "undefined") return;
+    if (!persistPayload) return;
+    try {
+      window.localStorage.setItem("mesurer-state", persistPayload);
+    } catch {
+    }
+    const handlePageHide = () => {
+      try {
+        window.localStorage.setItem("mesurer-state", persistPayload);
+      } catch {
+      }
+    };
+    window.addEventListener("pagehide", handlePageHide);
+    return () => {
+      window.removeEventListener("pagehide", handlePageHide);
+    };
+  }, [persistOnReload, persistPayload]);
+  const {
+    recordSnapshot,
+    createActionCommit,
+    setToolModeWithHistory,
+    setGuideOrientationWithHistory,
+    setEnabledWithHistory
+  } = useMeasurerHistory({
+    toggles: {
+      enabled,
+      setEnabled,
+      toolMode,
+      setToolMode,
+      guideOrientation,
+      setGuideOrientation
+    },
+    measurements: {
+      measurements,
+      setMeasurements,
+      activeMeasurement,
+      setActiveMeasurement,
+      selectedMeasurements,
+      setSelectedMeasurements,
+      selectedMeasurement,
+      setSelectedMeasurement,
+      heldDistances,
+      setHeldDistances
+    },
+    guides: {
+      guides,
+      setGuides,
+      selectedGuideIds,
+      setSelectedGuideIds,
+      draggingGuideId,
+      setDraggingGuideId
+    },
+    transient: {
+      setStart,
+      setEnd,
+      setIsDragging,
+      setGuidePreview,
+      setHoverRect,
+      setHoverElement,
+      setSelectedElement,
+      clearSelectionRect
+    }
+  });
+  const clearAll = useCallback6(() => {
+    recordSnapshot();
+    clearGuideDragHold();
+    setStart(null);
+    setEnd(null);
+    setIsDragging(false);
+    setActiveMeasurement(null);
+    setMeasurements([]);
+    setSelectedMeasurement(null);
+    setSelectedMeasurements([]);
+    clearSelectionRect();
+    setSelectedElement(null);
+    setHoverRect(null);
+    setHoverElement(null);
+    setGuides([]);
+    setSelectedGuideIds([]);
+    setHeldDistances([]);
+  }, [
+    clearGuideDragHold,
+    clearSelectionRect,
+    recordSnapshot,
+    setActiveMeasurement,
+    setEnd,
+    setGuides,
+    setHeldDistances,
+    setHoverElement,
+    setHoverRect,
+    setIsDragging,
+    setMeasurements,
+    setSelectedElement,
+    setSelectedGuideIds,
+    setSelectedMeasurement,
+    setSelectedMeasurements,
+    setStart
+  ]);
+  const removeSelectedGuides = useCallback6(() => {
+    if (selectedGuideIds.length === 0) return false;
+    recordSnapshot();
+    setGuides(
+      (prev) => prev.filter((guide) => !selectedGuideIds.includes(guide.id))
+    );
+    setSelectedGuideIds([]);
+    return true;
+  }, [recordSnapshot, selectedGuideIds, setGuides, setSelectedGuideIds]);
+  useHotkeys({
+    clearAll,
+    removeSelectedGuides,
+    setEnabled: setEnabledWithHistory,
+    setToolMode: setToolModeWithHistory,
+    setAltPressed,
+    isOverlayActive: () => enabled && (toolMode !== "none" || toolbarActive),
+    setGuideOrientation: setGuideOrientationWithHistory,
+    onInteract: () => setToolbarActive(true)
+  });
+  useResizeSync({
+    setMeasurements,
+    setActiveMeasurement,
+    setHeldDistances,
+    setSelectedMeasurement,
+    setGuides,
+    selectedElementRef
+  });
+  useLiveElementTracking({
+    enabled,
+    selectedElementRef,
+    hoverElementRef,
+    setSelectedMeasurement,
+    setSelectedMeasurements,
+    setHoverRect,
+    setMeasurements,
+    setActiveMeasurement,
+    setHeldDistances
+  });
+  useEffect9(() => {
+    if (!toolbarActive || toolMode !== "none") return;
+    const handlePointerDown2 = (event) => {
+      const toolbarNode = toolbarRef.current;
+      if (toolbarNode && toolbarNode.contains(event.target)) return;
+      setToolbarActive(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown2);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown2);
+    };
+  }, [toolbarActive, toolMode]);
+  useEffect9(() => {
+    if (hoverHighlightEnabled) return;
+    setHoverRect(null);
+  }, [hoverHighlightEnabled, setHoverRect]);
+  const displayedMeasurements = holdEnabled ? measurements : multiMeasureEnabled && measurements.length > 0 ? measurements : activeMeasurement ? [activeMeasurement] : [];
+  const {
+    activeRect,
+    activeWidth,
+    activeHeight,
+    displayedSelectedMeasurements,
+    hoverGuide,
+    optionPairOverlay,
+    optionContainerLines,
+    guideDistanceOverlay,
+    outlineColor,
+    fillColor,
+    guideColorActive,
+    guideColorHover,
+    guideColorDefault,
+    guideColorPreview,
+    hoverRectToShow,
+    selectedEdgeVisibility,
+    hoverEdgeVisibility,
+    measurementEdgeVisibility
+  } = useMeasurerDerived({
+    start,
+    end,
+    selectedMeasurements,
+    selectedMeasurement,
+    selectionOriginRect,
+    guides,
+    selectedGuideIds,
+    hoverPointer,
+    hoverRect,
+    hoverElement,
+    selectedElement,
+    altPressed,
+    guidesEnabled,
+    guidePreview,
+    displayedMeasurements,
+    hoverHighlightEnabled,
+    highlightColor,
+    guideColor
+  });
+  const {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerLeave
+  } = useMeasurerPointer({
+    toolbarRef,
+    overlayRef,
+    selectionRectRef,
+    createActionCommit,
+    clearGuideDragHold,
+    scheduleGuideDragHold,
+    enabled,
+    toolMode,
+    guidesEnabled,
+    snapEnabled,
+    snapGuidesEnabled,
+    altPressed,
+    guideOrientation,
+    hoverHighlightEnabled,
+    start,
+    end,
+    isDragging,
+    selectedMeasurements,
+    selectedMeasurement,
+    selectedGuideIds,
+    guides,
+    draggingGuideId,
+    optionPairOverlay,
+    setAltPressed,
+    setGuidePreview,
+    setSelectedGuideIds,
+    setGuides,
+    setStart,
+    setEnd,
+    setIsDragging,
+    setHeldDistances,
+    setDraggingGuideId,
+    setActiveMeasurement,
+    setMeasurements,
+    setSelectedMeasurements,
+    setSelectedMeasurement,
+    setSelectionOriginRect,
+    setSelectedElement,
+    setHoverRect,
+    setHoverElement,
+    setHoverPointer,
+    clearSelectionRect
+  });
+  const removeHeldDistance = useCallback6(
+    (id) => {
+      recordSnapshot();
+      setHeldDistances((prev) => prev.filter((distance) => distance.id !== id));
+    },
+    [recordSnapshot, setHeldDistances]
+  );
+  const handleGuidePointerDown = useCallback6(
+    (guide, event) => {
+      const commit = createActionCommit();
+      if (!enabled) return;
+      event.stopPropagation();
+      if (event.shiftKey) {
+        commit();
+        setSelectedGuideIds(
+          (prev) => prev.includes(guide.id) ? prev.filter((id) => id !== guide.id) : [...prev, guide.id]
+        );
+        return;
+      }
+      commit();
+      setSelectedGuideIds([guide.id]);
+      scheduleGuideDragHold(guide.id, setDraggingGuideId);
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [
+      createActionCommit,
+      enabled,
+      scheduleGuideDragHold,
+      setDraggingGuideId,
+      setSelectedGuideIds
+    ]
+  );
+  const handleGuidePointerUp = useCallback6(
+    (guide, event) => {
+      event.stopPropagation();
+      clearGuideDragHold();
+      setDraggingGuideId((prev) => prev === guide.id ? null : prev);
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    },
+    [clearGuideDragHold, setDraggingGuideId]
+  );
+  return createPortal(
+    /* @__PURE__ */ jsxs6("div", { ref: overlayRef, className: "pointer-events-none fixed inset-0 z-50", children: [
+      /* @__PURE__ */ jsx8(
+        MeasurerOverlay,
+        {
+          enabled,
+          toolMode,
+          guidesEnabled,
+          altPressed,
+          isDragging,
+          displayedMeasurements,
+          measurementEdgeVisibility,
+          activeRect,
+          activeWidth,
+          activeHeight,
+          fillColor,
+          outlineColor,
+          hoverRectToShow,
+          hoverEdgeVisibility,
+          guidePreview,
+          guideColorPreview,
+          displayedSelectedMeasurements,
+          selectedEdgeVisibility,
+          heldDistances,
+          optionPairOverlay,
+          guideDistanceOverlay,
+          optionContainerLines,
+          guides,
+          hoverGuide,
+          selectedGuideIds,
+          guideColorActive,
+          guideColorHover,
+          guideColorDefault,
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave,
+          onRemoveHeldDistance: removeHeldDistance,
+          onGuidePointerDown: handleGuidePointerDown,
+          onGuidePointerUp: handleGuidePointerUp,
+          onGuidePointerCancel: handleGuidePointerUp
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        Toolbar,
+        {
+          ref: toolbarRef,
+          toolMode,
+          setEnabled: setEnabledWithHistory,
+          setToolMode: setToolModeWithHistory,
+          guideOrientation,
+          setGuideOrientation: setGuideOrientationWithHistory,
+          onInteract: () => setToolbarActive(true)
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function Measurer({
+  highlightColor = "oklch(0.62 0.18 255)",
+  guideColor = "oklch(0.63 0.26 29.23)",
+  hoverHighlightEnabled = true,
+  persistOnReload = false
+}) {
+  const hydrated = useHydrated();
+  if (!hydrated) return null;
+  return /* @__PURE__ */ jsx8(
+    MeasurerClient,
+    {
+      highlightColor,
+      guideColor,
+      hoverHighlightEnabled,
+      persistOnReload
+    }
+  );
+}
+export {
+  Measurer
+};