mesurer 0.0.9 → 0.0.11

package/dist/index.js

@@ -1,10 +1,10 @@
 // measurer.tsx
 import {
-  useCallback as useCallback6,
-  useEffect as useEffect5,
+  useCallback as useCallback8,
+  useEffect as useEffect7,
   useMemo as useMemo2,
-  useRef as useRef9,
-  useState as useState8,
+  useRef as useRef12,
+  useState as useState11,
   useSyncExternalStore
 } from "react";
 import { createPortal } from "react-dom";
@@ -24,6 +24,7 @@ var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
 
 // runtime/style-inject.ts
 var MESURER_STYLE_ID = "mesurer-styles";
+var injectedTargets = /* @__PURE__ */ new WeakSet();
 var isDocument = (target) => target.nodeType === 9;
 var isShadowRoot = (target) => target.nodeType === 11;
 var getStyleTarget = (target) => {
@@ -34,12 +35,29 @@ var getStyleTarget = (target) => {
   if (rootNode.nodeType === 11) return rootNode;
   return target.ownerDocument ?? document;
 };
+var adoptSheet = (styleTarget, cssText) => {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(cssText);
+  styleTarget.adoptedStyleSheets = [...styleTarget.adoptedStyleSheets, sheet];
+};
 function ensureMeasurerStyles(cssText, target) {
   if (typeof document === "undefined") return;
   if (!cssText) return;
   const styleTarget = getStyleTarget(target);
   if (!styleTarget) return;
-  if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) return;
+  if (injectedTargets.has(styleTarget)) return;
+  if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) {
+    injectedTargets.add(styleTarget);
+    return;
+  }
+  if (isShadowRoot(styleTarget)) {
+    try {
+      adoptSheet(styleTarget, cssText);
+      injectedTargets.add(styleTarget);
+      return;
+    } catch {
+    }
+  }
   const ownerDocument = isDocument(styleTarget) ? styleTarget : styleTarget.ownerDocument;
   if (!ownerDocument) return;
   const style = ownerDocument.createElement("style");
@@ -47,22 +65,24 @@ function ensureMeasurerStyles(cssText, target) {
   style.textContent = cssText;
   if (isShadowRoot(styleTarget)) {
     styleTarget.appendChild(style);
-    return;
+  } else {
+    ownerDocument.head.appendChild(style);
   }
-  ownerDocument.head.appendChild(style);
+  injectedTargets.add(styleTarget);
 }
 
 // styles.generated.ts
-var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --msr-color-black: #000;\n    --msr-color-white: #fff;\n    --msr-spacing: 0.25rem;\n    --msr-radius-md: 0.375rem;\n    --msr-radius-lg: 0.5rem;\n    --msr-default-transition-duration: 150ms;\n    --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --msr-default-font-family: var(--msr-font-sans);\n    --msr-default-mono-font-family: var(--msr-font-mono);\n    --msr-color-ink-50: var(--color-ink-50);\n    --msr-color-ink-200: var(--color-ink-200);\n    --msr-color-ink-700: var(--color-ink-700);\n    --msr-color-ink-900: var(--color-ink-900);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--msr-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--msr-default-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .msr\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .msr\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .msr\\:absolute {\n    position: absolute;\n  }\n  .msr\\:fixed {\n    position: fixed;\n  }\n  .msr\\:relative {\n    position: relative;\n  }\n  .msr\\:inset-0 {\n    inset: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-0 {\n    top: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-\\[18px\\] {\n    top: 18px;\n  }\n  .msr\\:top-full {\n    top: 100%;\n  }\n  .msr\\:right-0 {\n    right: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:bottom-0 {\n    bottom: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:bottom-full {\n    bottom: 100%;\n  }\n  .msr\\:left-0 {\n    left: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .msr\\:left-\\[18px\\] {\n    left: 18px;\n  }\n  .msr\\:z-50 {\n    z-index: 50;\n  }\n  .msr\\:z-\\[70\\] {\n    z-index: 70;\n  }\n  .msr\\:z-\\[90\\] {\n    z-index: 90;\n  }\n  .msr\\:mt-2 {\n    margin-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:mb-2 {\n    margin-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:-ml-1 {\n    margin-left: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:block {\n    display: block;\n  }\n  .msr\\:flex {\n    display: flex;\n  }\n  .msr\\:size-8 {\n    width: calc(var(--msr-spacing) * 8);\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .msr\\:h-6 {\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:h-8 {\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:h-full {\n    height: 100%;\n  }\n  .msr\\:h-px {\n    height: 1px;\n  }\n  .msr\\:w-4 {\n    width: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:w-6 {\n    width: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:w-44 {\n    width: calc(var(--msr-spacing) * 44);\n  }\n  .msr\\:w-\\[18px\\] {\n    width: 18px;\n  }\n  .msr\\:w-full {\n    width: 100%;\n  }\n  .msr\\:w-px {\n    width: 1px;\n  }\n  .msr\\:flex-1 {\n    flex: 1;\n  }\n  .msr\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:rotate-90 {\n    rotate: 90deg;\n  }\n  .msr\\:rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .msr\\:cursor-crosshair {\n    cursor: crosshair;\n  }\n  .msr\\:cursor-default {\n    cursor: default;\n  }\n  .msr\\:flex-col {\n    flex-direction: column;\n  }\n  .msr\\:items-center {\n    align-items: center;\n  }\n  .msr\\:items-stretch {\n    align-items: stretch;\n  }\n  .msr\\:justify-center {\n    justify-content: center;\n  }\n  .msr\\:gap-1 {\n    gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:gap-2 {\n    gap: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:gap-px {\n    gap: 1px;\n  }\n  .msr\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .msr\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .msr\\:rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .msr\\:rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .msr\\:rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .msr\\:rounded-lg {\n    border-radius: var(--msr-radius-lg);\n  }\n  .msr\\:rounded-md {\n    border-radius: var(--msr-radius-md);\n  }\n  .msr\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .msr\\:border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .msr\\:border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .msr\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .msr\\:border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .msr\\:border-ink-200 {\n    border-color: var(--msr-color-ink-200);\n  }\n  .msr\\:bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .msr\\:bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .msr\\:bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .msr\\:bg-black {\n    background-color: var(--msr-color-black);\n  }\n  .msr\\:bg-black\\/10 {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:bg-ink-900\\/90 {\n    background-color: var(--msr-color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n    }\n  }\n  .msr\\:bg-transparent {\n    background-color: transparent;\n  }\n  .msr\\:bg-white {\n    background-color: var(--msr-color-white);\n  }\n  .msr\\:p-1 {\n    padding: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:px-1 {\n    padding-inline: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:px-2 {\n    padding-inline: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:py-0\\.5 {\n    padding-block: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:py-1 {\n    padding-block: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:py-1\\.5 {\n    padding-block: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:text-left {\n    text-align: left;\n  }\n  .msr\\:text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .msr\\:text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .msr\\:text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .msr\\:text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .msr\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .msr\\:text-\\[\\#64748b\\] {\n    color: #64748b;\n  }\n  .msr\\:text-black {\n    color: var(--msr-color-black);\n  }\n  .msr\\:text-ink-50 {\n    color: var(--msr-color-ink-50);\n  }\n  .msr\\:text-ink-700 {\n    color: var(--msr-color-ink-700);\n  }\n  .msr\\:text-white {\n    color: var(--msr-color-white);\n  }\n  .msr\\:text-white\\/60 {\n    color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .msr\\:opacity-0 {\n    opacity: 0%;\n  }\n  .msr\\:opacity-100 {\n    opacity: 100%;\n  }\n  .msr\\:outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:outline-transparent {\n    outline-color: transparent;\n  }\n  .msr\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-none {\n    transition-property: none;\n  }\n  .msr\\:duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .msr\\:outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .msr\\:hover\\:bg-\\[\\#0d99ff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0d99ff;\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/4 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-white);\n      }\n    }\n  }\n  .msr\\:focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n:root, :host {\n  --color-ink-50: #f8fafc;\n  --color-ink-200: #e2e8f0;\n  --color-ink-500: #64748b;\n  --color-ink-700: #334155;\n  --color-ink-900: #0f172a;\n}\n.mesurer-toolbar-surface {\n  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n.mesurer-root {\n  --msr-spacing: 4px;\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n';
+var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --msr-color-red-50: oklch(97.1% 0.013 17.38);\n    --msr-color-red-200: oklch(88.5% 0.062 18.334);\n    --msr-color-red-600: oklch(57.7% 0.245 27.325);\n    --msr-color-black: #000;\n    --msr-color-white: #fff;\n    --msr-spacing: 0.25rem;\n    --msr-font-weight-normal: 400;\n    --msr-font-weight-medium: 500;\n    --msr-font-weight-semibold: 600;\n    --msr-radius-md: 0.375rem;\n    --msr-radius-lg: 0.5rem;\n    --msr-default-transition-duration: 150ms;\n    --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --msr-default-font-family: var(--msr-font-sans);\n    --msr-default-mono-font-family: var(--msr-font-mono);\n    --msr-color-ink-50: #f8fafc;\n    --msr-color-ink-200: #e2e8f0;\n    --msr-color-ink-500: #64748b;\n    --msr-color-ink-700: #334155;\n    --msr-color-ink-900: #0f172a;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--msr-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--msr-default-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .msr\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .msr\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .msr\\:absolute {\n    position: absolute;\n  }\n  .msr\\:fixed {\n    position: fixed;\n  }\n  .msr\\:relative {\n    position: relative;\n  }\n  .msr\\:inset-0 {\n    inset: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-0 {\n    top: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-\\[18px\\] {\n    top: 18px;\n  }\n  .msr\\:top-full {\n    top: 100%;\n  }\n  .msr\\:-right-1 {\n    right: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:right-0 {\n    right: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:right-\\[8px\\] {\n    right: 8px;\n  }\n  .msr\\:bottom-0 {\n    bottom: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:bottom-full {\n    bottom: 100%;\n  }\n  .msr\\:left-0 {\n    left: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .msr\\:left-\\[8px\\] {\n    left: 8px;\n  }\n  .msr\\:left-\\[18px\\] {\n    left: 18px;\n  }\n  .msr\\:z-10 {\n    z-index: 10;\n  }\n  .msr\\:z-50 {\n    z-index: 50;\n  }\n  .msr\\:z-\\[70\\] {\n    z-index: 70;\n  }\n  .msr\\:z-\\[80\\] {\n    z-index: 80;\n  }\n  .msr\\:z-\\[90\\] {\n    z-index: 90;\n  }\n  .msr\\:col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .msr\\:mt-2 {\n    margin-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:mb-1 {\n    margin-bottom: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:mb-2 {\n    margin-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:-ml-1 {\n    margin-left: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:ml-1 {\n    margin-left: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:box-border {\n    box-sizing: border-box;\n  }\n  .msr\\:block {\n    display: block;\n  }\n  .msr\\:flex {\n    display: flex;\n  }\n  .msr\\:grid {\n    display: grid;\n  }\n  .msr\\:inline-flex {\n    display: inline-flex;\n  }\n  .msr\\:size-3 {\n    width: calc(var(--msr-spacing) * 3);\n    height: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:size-4 {\n    width: calc(var(--msr-spacing) * 4);\n    height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:size-8 {\n    width: calc(var(--msr-spacing) * 8);\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:size-\\[10px\\] {\n    width: 10px;\n    height: 10px;\n  }\n  .msr\\:size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .msr\\:size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .msr\\:h-6 {\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:h-8 {\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:h-\\[14px\\] {\n    height: 14px;\n  }\n  .msr\\:h-full {\n    height: 100%;\n  }\n  .msr\\:h-px {\n    height: 1px;\n  }\n  .msr\\:max-h-\\[min\\(70vh\\,34rem\\)\\] {\n    max-height: min(70vh, 34rem);\n  }\n  .msr\\:w-4 {\n    width: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:w-6 {\n    width: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:w-9 {\n    width: calc(var(--msr-spacing) * 9);\n  }\n  .msr\\:w-12 {\n    width: calc(var(--msr-spacing) * 12);\n  }\n  .msr\\:w-44 {\n    width: calc(var(--msr-spacing) * 44);\n  }\n  .msr\\:w-\\[18px\\] {\n    width: 18px;\n  }\n  .msr\\:w-\\[26px\\] {\n    width: 26px;\n  }\n  .msr\\:w-\\[272px\\] {\n    width: 272px;\n  }\n  .msr\\:w-full {\n    width: 100%;\n  }\n  .msr\\:w-px {\n    width: 1px;\n  }\n  .msr\\:max-w-\\[calc\\(100vw-16px\\)\\] {\n    max-width: calc(100vw - 16px);\n  }\n  .msr\\:min-w-0 {\n    min-width: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:min-w-36 {\n    min-width: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:flex-1 {\n    flex: 1;\n  }\n  .msr\\:shrink-0 {\n    flex-shrink: 0;\n  }\n  .msr\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:rotate-90 {\n    rotate: 90deg;\n  }\n  .msr\\:rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .msr\\:cursor-crosshair {\n    cursor: crosshair;\n  }\n  .msr\\:cursor-default {\n    cursor: default;\n  }\n  .msr\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .msr\\:touch-none {\n    touch-action: none;\n  }\n  .msr\\:appearance-none {\n    appearance: none;\n  }\n  .msr\\:grid-cols-\\[78px_156px\\] {\n    grid-template-columns: 78px 156px;\n  }\n  .msr\\:flex-col {\n    flex-direction: column;\n  }\n  .msr\\:items-center {\n    align-items: center;\n  }\n  .msr\\:items-start {\n    align-items: flex-start;\n  }\n  .msr\\:items-stretch {\n    align-items: stretch;\n  }\n  .msr\\:justify-between {\n    justify-content: space-between;\n  }\n  .msr\\:justify-center {\n    justify-content: center;\n  }\n  .msr\\:justify-end {\n    justify-content: flex-end;\n  }\n  .msr\\:gap-0 {\n    gap: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:gap-1 {\n    gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:gap-1\\.5 {\n    gap: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:gap-2 {\n    gap: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:gap-3 {\n    gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-px {\n    gap: 1px;\n  }\n  .msr\\:gap-x-3 {\n    column-gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-y-1 {\n    row-gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:justify-self-end {\n    justify-self: flex-end;\n  }\n  .msr\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .msr\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .msr\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .msr\\:rounded-\\[3px\\] {\n    border-radius: 3px;\n  }\n  .msr\\:rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .msr\\:rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .msr\\:rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .msr\\:rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .msr\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .msr\\:rounded-lg {\n    border-radius: var(--msr-radius-lg);\n  }\n  .msr\\:rounded-md {\n    border-radius: var(--msr-radius-md);\n  }\n  .msr\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .msr\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .msr\\:border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .msr\\:border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .msr\\:border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .msr\\:border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .msr\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .msr\\:border-dotted {\n    --tw-border-style: dotted;\n    border-style: dotted;\n  }\n  .msr\\:border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .msr\\:border-\\[\\#0d99ff\\] {\n    border-color: #0d99ff;\n  }\n  .msr\\:border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .msr\\:border-black\\/8 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 8%, transparent);\n    }\n  }\n  .msr\\:border-black\\/10 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:border-black\\/15 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 15%, transparent);\n    }\n  }\n  .msr\\:border-ink-200 {\n    border-color: var(--msr-color-ink-200);\n  }\n  .msr\\:border-ink-700 {\n    border-color: var(--msr-color-ink-700);\n  }\n  .msr\\:border-red-200 {\n    border-color: var(--msr-color-red-200);\n  }\n  .msr\\:border-transparent {\n    border-color: transparent;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\]\\/10 {\n    background-color: color-mix(in oklab, #0d99ff 10%, transparent);\n  }\n  .msr\\:bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .msr\\:bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .msr\\:bg-black {\n    background-color: var(--msr-color-black);\n  }\n  .msr\\:bg-black\\/10 {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:bg-ink-50 {\n    background-color: var(--msr-color-ink-50);\n  }\n  .msr\\:bg-ink-900\\/90 {\n    background-color: var(--msr-color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n    }\n  }\n  .msr\\:bg-transparent {\n    background-color: transparent;\n  }\n  .msr\\:bg-white {\n    background-color: var(--msr-color-white);\n  }\n  .msr\\:p-1 {\n    padding: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:p-3 {\n    padding: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:p-px {\n    padding: 1px;\n  }\n  .msr\\:px-1 {\n    padding-inline: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:px-1\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:px-2 {\n    padding-inline: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:py-0 {\n    padding-block: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:py-0\\.5 {\n    padding-block: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:py-1 {\n    padding-block: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:py-1\\.5 {\n    padding-block: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:py-2 {\n    padding-block: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pb-1 {\n    padding-bottom: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:text-center {\n    text-align: center;\n  }\n  .msr\\:text-left {\n    text-align: left;\n  }\n  .msr\\:font-mono {\n    font-family: var(--msr-font-mono);\n  }\n  .msr\\:text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .msr\\:text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .msr\\:text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .msr\\:text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .msr\\:leading-4 {\n    --tw-leading: calc(var(--msr-spacing) * 4);\n    line-height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .msr\\:font-medium {\n    --tw-font-weight: var(--msr-font-weight-medium);\n    font-weight: var(--msr-font-weight-medium);\n  }\n  .msr\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .msr\\:text-\\[\\#64748b\\] {\n    color: #64748b;\n  }\n  .msr\\:text-black {\n    color: var(--msr-color-black);\n  }\n  .msr\\:text-black\\/45 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 45%, transparent);\n    }\n  }\n  .msr\\:text-black\\/60 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 60%, transparent);\n    }\n  }\n  .msr\\:text-ink-50 {\n    color: var(--msr-color-ink-50);\n  }\n  .msr\\:text-ink-500 {\n    color: var(--msr-color-ink-500);\n  }\n  .msr\\:text-ink-700 {\n    color: var(--msr-color-ink-700);\n  }\n  .msr\\:text-ink-900 {\n    color: var(--msr-color-ink-900);\n  }\n  .msr\\:text-red-600 {\n    color: var(--msr-color-red-600);\n  }\n  .msr\\:text-white {\n    color: var(--msr-color-white);\n  }\n  .msr\\:text-white\\/60 {\n    color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .msr\\:opacity-0 {\n    opacity: 0%;\n  }\n  .msr\\:opacity-100 {\n    opacity: 100%;\n  }\n  .msr\\:shadow-\\[0_0_0_1px_rgba\\(15\\,23\\,42\\,0\\.12\\)\\] {\n    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.12));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:outline-transparent {\n    outline-color: transparent;\n  }\n  .msr\\:transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-none {\n    transition-property: none;\n  }\n  .msr\\:duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .msr\\:outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .msr\\:group-hover\\:border-ink-200 {\n    &:is(:where(.msr\\:group):hover *) {\n      @media (hover: hover) {\n        border-color: var(--msr-color-ink-200);\n      }\n    }\n  }\n  .msr\\:focus-within\\:rounded-l-\\[5px\\] {\n    &:focus-within {\n      border-top-left-radius: 5px;\n      border-bottom-left-radius: 5px;\n    }\n  }\n  .msr\\:focus-within\\:rounded-r-\\[5px\\] {\n    &:focus-within {\n      border-top-right-radius: 5px;\n      border-bottom-right-radius: 5px;\n    }\n  }\n  .msr\\:focus-within\\:outline {\n    &:focus-within {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-1 {\n    &:focus-within {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-offset-\\[-1px\\] {\n    &:focus-within {\n      outline-offset: -1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-\\[\\#0d99ff\\] {\n    &:focus-within {\n      outline-color: #0d99ff;\n    }\n  }\n  .msr\\:hover\\:border-ink-200 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--msr-color-ink-200);\n      }\n    }\n  }\n  .msr\\:hover\\:bg-\\[\\#0d99ff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0d99ff;\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/4 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-ink-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-ink-50);\n      }\n    }\n  }\n  .msr\\:hover\\:bg-red-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-red-50);\n      }\n    }\n  }\n  .msr\\:hover\\:text-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-black);\n      }\n    }\n  }\n  .msr\\:hover\\:text-ink-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-ink-700);\n      }\n    }\n  }\n  .msr\\:hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-white);\n      }\n    }\n  }\n  .msr\\:hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\] {\n    &:focus {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\] {\n    &:focus-visible {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#ef4444\\] {\n    &:focus-visible {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #ef4444);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:ring-1 {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:ring-\\[\\#0d99ff\\]\\/25 {\n    &:focus-visible {\n      --tw-ring-color: color-mix(in oklab, #0d99ff 25%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:outline-none {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n:root, :host {\n  --color-ink-50: #f8fafc;\n  --color-ink-200: #e2e8f0;\n  --color-ink-500: #64748b;\n  --color-ink-700: #334155;\n  --color-ink-900: #0f172a;\n}\n:host {\n  all: initial;\n  display: block;\n  color-scheme: light;\n  color: #0f172a;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.5;\n  letter-spacing: normal;\n  direction: ltr;\n  --msr-spacing: 4px;\n}\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n@layer base {\n  *, ::before, ::after, ::backdrop {\n    --tw-border-style: solid;\n    --tw-outline-style: solid;\n    --tw-shadow: 0 0 #0000;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n  }\n  button, input, select, textarea {\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    letter-spacing: inherit;\n  }\n}\n.mesurer-toolbar-surface {\n  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n.mesurer-color-picker {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n.mesurer-settings-tabs {\n  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);\n}\n.mesurer-settings-tab[aria-selected="true"] {\n  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);\n}\n.mesurer-switch-track {\n  box-sizing: border-box;\n  border: 1px solid #e2e8f0;\n}\n.mesurer-switch-track[data-checked="true"] {\n  border-color: #0d99ff;\n}\n.mesurer-control-shell {\n  border: 1px solid transparent;\n}\n.mesurer-control-shell:hover {\n  border-color: #e2e8f0;\n}\n.mesurer-control-focus:focus-within {\n  outline: 1px solid #0d99ff;\n  outline-offset: -1px;\n}\n.mesurer-root {\n  --msr-spacing: 4px;\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n';
 
 // components/toolbar.tsx
 import {
   forwardRef,
   memo,
-  useCallback,
+  useCallback as useCallback2,
+  useEffect,
   useLayoutEffect,
-  useRef,
-  useState
+  useRef as useRef2,
+  useState as useState3
 } from "react";
 
 // core/utils.ts
@@ -70,9 +90,751 @@ 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/settings-panel.tsx
+import { useState as useState2 } from "react";
+
+// package.json
+var package_default = {
+  name: "mesurer",
+  version: "0.0.11",
+  description: "Measure and align elements on any website.",
+  license: "MIT",
+  author: "Julien Thibeaut",
+  type: "module",
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  types: "./dist/index.d.ts",
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      import: "./dist/index.js",
+      require: "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  files: [
+    "dist",
+    "dist/styles.css",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE"
+  ],
+  sideEffects: [
+    "*.css"
+  ],
+  publishConfig: {
+    access: "public"
+  },
+  homepage: "https://mesurer.dev",
+  repository: {
+    type: "git",
+    url: "https://github.com/ibelick/mesurer.git"
+  },
+  bugs: {
+    url: "https://github.com/ibelick/mesurer/issues"
+  },
+  scripts: {
+    build: "pnpm exec tailwindcss -i styles.css -o styles.generated.css && node scripts/generate-styles.mjs && tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css",
+    dev: "node scripts/dev.mjs",
+    typecheck: "tsc --noEmit",
+    prepublishOnly: "npm run typecheck && npm run build"
+  },
+  peerDependencies: {
+    react: ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  devDependencies: {
+    "@tailwindcss/cli": "^4.2.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    react: "^19.0.0",
+    "react-dom": "^19.0.0",
+    tailwindcss: "^4.2.2",
+    tsup: "^8.5.0",
+    typescript: "^5.9.2"
+  },
+  keywords: [
+    "measurement",
+    "alignment"
+  ]
+};
+
+// core/colors.ts
+var clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+var round = (value, digits = 2) => {
+  const factor = 10 ** digits;
+  return Math.round(value * factor) / factor;
+};
+var parseChannel = (value) => {
+  const trimmed = value.trim();
+  const numeric = trimmed.endsWith("%") ? trimmed.slice(0, -1).trim() : trimmed;
+  if (!/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(numeric)) return null;
+  const parsed = Number.parseFloat(numeric);
+  if (!Number.isFinite(parsed)) return null;
+  if (trimmed.endsWith("%")) return clamp(parsed / 100) * 255;
+  return clamp(parsed / 255) * 255;
+};
+var parseAlpha = (value) => {
+  if (!value) return 1;
+  const trimmed = value.trim();
+  const numeric = trimmed.endsWith("%") ? trimmed.slice(0, -1).trim() : trimmed;
+  if (!/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(numeric)) return null;
+  const parsed = Number.parseFloat(numeric);
+  if (!Number.isFinite(parsed)) return null;
+  return clamp(trimmed.endsWith("%") ? parsed / 100 : parsed);
+};
+var parseCssColor = (value) => {
+  const input = value.trim().toLowerCase();
+  if (!input || input === "transparent") return null;
+  if (input.startsWith("#")) {
+    const hex = input.slice(1);
+    const expanded = hex.length === 3 || hex.length === 4 ? hex.split("").map((digit) => digit + digit).join("") : hex;
+    if (![6, 8].includes(expanded.length) || !/^[\da-f]+$/.test(expanded)) return null;
+    return {
+      red: Number.parseInt(expanded.slice(0, 2), 16),
+      green: Number.parseInt(expanded.slice(2, 4), 16),
+      blue: Number.parseInt(expanded.slice(4, 6), 16),
+      alpha: expanded.length === 8 ? Number.parseInt(expanded.slice(6, 8), 16) / 255 : 1
+    };
+  }
+  const match = input.match(/^rgba?\((.*)\)$/);
+  if (!match) return null;
+  const channels = match[1].replace(/\//g, " ").split(/[ ,]+/).filter(Boolean);
+  if (channels.length < 3 || channels.length > 4) return null;
+  const red = parseChannel(channels[0]);
+  const green = parseChannel(channels[1]);
+  const blue = parseChannel(channels[2]);
+  const alpha = parseAlpha(channels[3]);
+  if (red === null || green === null || blue === null || alpha === null) return null;
+  return { red, green, blue, alpha };
+};
+var toByte = (value) => Math.round(clamp(value / 255) * 255);
+var colorToHex = (color) => {
+  const hex = [color.red, color.green, color.blue].map((channel) => toByte(channel).toString(16).padStart(2, "0")).join("");
+  if (color.alpha >= 0.999) return `#${hex}`;
+  return `#${hex}${Math.round(color.alpha * 255).toString(16).padStart(2, "0")}`;
+};
+var colorToRgb = (color) => {
+  const channels = `${toByte(color.red)}, ${toByte(color.green)}, ${toByte(color.blue)}`;
+  return color.alpha >= 0.999 ? `rgb(${channels})` : `rgba(${channels}, ${round(color.alpha, 3)})`;
+};
+var colorToHsl = (color) => {
+  const red = color.red / 255;
+  const green = color.green / 255;
+  const blue = color.blue / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const lightness = (max + min) / 2;
+  const delta = max - min;
+  let hue = 0;
+  let saturation = 0;
+  if (delta !== 0) {
+    saturation = delta / (1 - Math.abs(2 * lightness - 1));
+    if (max === red) hue = (green - blue) / delta % 6;
+    else if (max === green) hue = (blue - red) / delta + 2;
+    else hue = (red - green) / delta + 4;
+    hue *= 60;
+    if (hue < 0) hue += 360;
+  }
+  const result = `hsl(${round(hue, 1)} ${round(saturation * 100, 1)}% ${round(lightness * 100, 1)}%`;
+  return color.alpha >= 0.999 ? `${result})` : `${result} / ${round(color.alpha, 3)})`;
+};
+var linearize = (value) => {
+  const normalized = value / 255;
+  return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+};
+var colorToOklch = (color) => {
+  const red = linearize(color.red);
+  const green = linearize(color.green);
+  const blue = linearize(color.blue);
+  const l = 0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue;
+  const m = 0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue;
+  const s = 0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue;
+  const lRoot = Math.cbrt(l);
+  const mRoot = Math.cbrt(m);
+  const sRoot = Math.cbrt(s);
+  const lightness = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
+  const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
+  const b = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
+  const chroma = Math.sqrt(a * a + b * b);
+  let hue = Math.atan2(b, a) * 180 / Math.PI;
+  if (hue < 0) hue += 360;
+  const result = `oklch(${round(lightness, 3)} ${round(chroma, 3)} ${round(hue, 1)}`;
+  return color.alpha >= 0.999 ? `${result})` : `${result} / ${round(color.alpha, 3)})`;
+};
+var formatColor = (color, format) => {
+  if (format === "hex") return colorToHex(color);
+  if (format === "rgb") return colorToRgb(color);
+  if (format === "hsl") return colorToHsl(color);
+  return colorToOklch(color);
+};
+
+// components/tooltip.tsx
+import { useCallback, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TOOLTIP_DELAY_MS = 800;
+function Tooltip({
+  label,
+  shortcut,
+  visible,
+  instant = false,
+  side = "top",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "tooltip",
+      className: cn(
+        "msr:pointer-events-none msr:absolute msr:left-1/2 msr:-translate-x-1/2 msr:whitespace-nowrap msr:rounded msr:bg-black msr:px-2 msr:py-1 msr:text-[11px] msr:text-white msr:transition-opacity msr:duration-150 msr:select-none",
+        instant && "msr:transition-none",
+        side === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
+        visible === void 0 ? null : visible ? "msr:opacity-100" : "msr:opacity-0",
+        className
+      ),
+      children: [
+        label,
+        shortcut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("kbd", { className: "msr:text-white/60", children: shortcut })
+        ] }) : null
+      ]
+    }
+  );
+}
+function useTooltip() {
+  const [visibleTooltipId, setVisibleTooltipId] = useState(null);
+  const timerRef = useRef(null);
+  const instantRef = useRef(false);
+  const [tooltipInstant, setTooltipInstant] = useState(false);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current === null) return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const onTooltipEnter = useCallback((id) => {
+    clearTimer();
+    if (instantRef.current) {
+      setTooltipInstant(true);
+      setVisibleTooltipId(id);
+      return;
+    }
+    setTooltipInstant(false);
+    timerRef.current = window.setTimeout(() => {
+      setVisibleTooltipId(id);
+      instantRef.current = true;
+      timerRef.current = null;
+    }, TOOLTIP_DELAY_MS);
+  }, [clearTimer]);
+  const onTooltipLeave = useCallback(() => {
+    clearTimer();
+    setVisibleTooltipId(null);
+  }, [clearTimer]);
+  const onTooltipContainerLeave = useCallback(() => {
+    clearTimer();
+    setVisibleTooltipId(null);
+    instantRef.current = false;
+    setTooltipInstant(false);
+  }, [clearTimer]);
+  return {
+    visibleTooltipId,
+    tooltipInstant,
+    onTooltipEnter,
+    onTooltipLeave,
+    onTooltipContainerLeave
+  };
+}
+
+// components/settings-panel.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var COLOR_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var GUIDE_PATTERNS = [
+  { value: "solid", label: "Solid" },
+  { value: "dashed", label: "Dashed" },
+  { value: "dotted", label: "Dotted" }
+];
+function ControlShell({ left, right }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "mesurer-control-shell msr:group msr:flex msr:h-6 msr:w-full msr:min-w-0 msr:items-center msr:overflow-hidden msr:rounded-[5px] msr:border msr:border-transparent msr:bg-ink-50 msr:hover:border-ink-200",
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "mesurer-control-focus msr:flex msr:h-full msr:min-w-0 msr:flex-1 msr:items-center msr:focus-within:rounded-l-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: left }),
+        /* @__PURE__ */ jsx2("div", { className: "mesurer-control-focus msr:box-border msr:flex msr:h-full msr:w-12 msr:shrink-0 msr:items-center msr:border-l msr:border-transparent msr:group-hover:border-ink-200 msr:focus-within:rounded-r-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: right })
+      ]
+    }
+  );
+}
+function SettingsSwitch({ label, checked, onChange }) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      className: "msr:col-span-2 msr:grid msr:h-6 msr:w-full msr:appearance-none msr:grid-cols-[78px_156px] msr:items-center msr:gap-3 msr:text-left msr:text-[12px] msr:leading-none msr:text-ink-700",
+      onClick: () => onChange(!checked),
+      children: [
+        /* @__PURE__ */ jsx2("span", { children: label }),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: { justifySelf: "end" },
+            "data-checked": checked ? "true" : void 0,
+            className: cn(
+              "mesurer-switch-track msr:flex msr:h-[14px] msr:w-[26px] msr:shrink-0 msr:items-center msr:rounded-full msr:border msr:p-px msr:transition-colors",
+              checked ? "msr:border-[#0d99ff] msr:bg-[#0d99ff]" : "msr:border-ink-200 msr:bg-ink-50"
+            ),
+            children: /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "msr:block msr:size-[10px] msr:shrink-0 msr:rounded-full msr:bg-white msr:shadow-sm msr:transition-transform",
+                style: { transform: `translateX(${checked ? 12 : 0}px)` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SliderControl({
+  label,
+  min,
+  max,
+  step,
+  value,
+  onChange,
+  formatValue: formatValue4 = (currentValue) => String(currentValue),
+  parseInput = (input) => Number(input)
+}) {
+  const thumbSize = 12;
+  const thumbInset = 8;
+  const percentage = (value - min) / (max - min) * 100;
+  const [draftValue, setDraftValue] = useState2(formatValue4(value));
+  const [editing, setEditing] = useState2(false);
+  const commitDraft = () => {
+    const parsed = parseInput(draftValue);
+    if (Number.isFinite(parsed)) {
+      onChange(Math.min(max, Math.max(min, parsed)));
+    }
+    const next = Number.isFinite(parsed) ? Math.min(max, Math.max(min, parsed)) : value;
+    setDraftValue(formatValue4(next));
+    setEditing(false);
+  };
+  const updateFromPointer = (event) => {
+    event.stopPropagation();
+    const rect = event.currentTarget.getBoundingClientRect();
+    const usableWidth = Math.max(1, rect.width - thumbInset * 2);
+    const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left - thumbInset) / usableWidth));
+    const rawValue = min + ratio * (max - min);
+    const steppedValue = Math.round((rawValue - min) / step) * step + min;
+    onChange(Number(steppedValue.toFixed(4)));
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "msr:col-span-2 msr:grid msr:w-full msr:grid-cols-[78px_156px] msr:items-center msr:gap-3", children: [
+    /* @__PURE__ */ jsx2("span", { className: "msr:text-[11px] msr:font-medium msr:text-ink-700", children: label }),
+    /* @__PURE__ */ jsx2(
+      ControlShell,
+      {
+        left: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "msr:relative msr:min-w-0 msr:flex-1 msr:touch-none msr:select-none msr:px-2",
+            style: { height: 20 },
+            "data-slider-container": "true",
+            onPointerDown: (event) => {
+              event.stopPropagation();
+              event.currentTarget.setPointerCapture(event.pointerId);
+              updateFromPointer(event);
+            },
+            onPointerMove: (event) => {
+              if (event.currentTarget.hasPointerCapture(event.pointerId)) updateFromPointer(event);
+            },
+            onPointerUp: (event) => {
+              event.stopPropagation();
+              if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+            },
+            onPointerCancel: (event) => {
+              event.stopPropagation();
+              if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+            },
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "msr:absolute msr:left-[8px] msr:right-[8px] msr:rounded-full",
+                  style: { top: 8, height: 4, backgroundColor: "rgba(15, 23, 42, 0.16)" },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "msr:absolute msr:left-[8px] msr:rounded-full",
+                  style: { top: 8, width: `calc(${percentage}% - ${percentage * thumbInset * 2 / 100}px)`, height: 4, backgroundColor: "#0d99ff" },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "msr:absolute msr:rounded-[5px] msr:bg-white msr:shadow-sm msr:transition-shadow msr:outline-none msr:focus-visible:ring-1 msr:focus-visible:ring-[#0d99ff]/25",
+                  style: {
+                    left: `calc(8px + (100% - 16px) * ${percentage / 100})`,
+                    top: 4,
+                    width: thumbSize,
+                    height: thumbSize,
+                    border: "0",
+                    transform: "translateX(-50%)"
+                  },
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": label,
+                  "aria-valuemin": min,
+                  "aria-valuemax": max,
+                  "aria-valuenow": value,
+                  "aria-orientation": "horizontal",
+                  onKeyDown: (event) => {
+                    event.stopPropagation();
+                    const direction = event.key === "ArrowRight" || event.key === "ArrowUp" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowDown" ? -1 : 0;
+                    if (event.key === "Home") onChange(min);
+                    else if (event.key === "End") onChange(max);
+                    else if (direction) {
+                      event.preventDefault();
+                      onChange(Number(Math.min(max, Math.max(min, value + direction * step)).toFixed(4)));
+                    } else return;
+                    event.preventDefault();
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        right: /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "text",
+            "aria-label": `${label} value`,
+            className: "msr:h-full msr:w-full msr:shrink-0 msr:border-0 msr:bg-transparent msr:px-2 msr:text-center msr:font-mono msr:text-[12px] msr:font-medium msr:tabular-nums msr:text-ink-700 msr:outline-none",
+            style: { boxSizing: "border-box", borderRadius: "0 5px 5px 0", lineHeight: "1rem" },
+            value: editing ? draftValue : formatValue4(value),
+            onFocus: () => {
+              setDraftValue(formatValue4(value));
+              setEditing(true);
+            },
+            onChange: (event) => {
+              const nextDraft = event.target.value;
+              setDraftValue(nextDraft);
+              const next = parseInput(nextDraft);
+              if (Number.isFinite(next)) onChange(Math.min(max, Math.max(min, next)));
+            },
+            onPointerDown: (event) => event.stopPropagation(),
+            onClick: (event) => event.stopPropagation(),
+            onBlur: () => {
+              commitDraft();
+            },
+            onKeyDown: (event) => {
+              event.stopPropagation();
+              if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                const current = parseInput(event.currentTarget.value);
+                const direction = event.key === "ArrowUp" ? 1 : -1;
+                const next = Number(
+                  Math.min(max, Math.max(min, (Number.isFinite(current) ? current : value) + direction * step)).toFixed(4)
+                );
+                setDraftValue(formatValue4(next));
+                onChange(next);
+                return;
+              }
+              if (event.key === "Enter") {
+                event.preventDefault();
+                event.currentTarget.blur();
+              }
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function ColorField({ label, value, fallback, ownerWindow, onChange }) {
+  const parsed = parseCssColor(value);
+  const canvas = ownerWindow.document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (context) context.fillStyle = value;
+  const serialized = typeof context?.fillStyle === "string" ? context.fillStyle : "";
+  const converted = serialized ? parseCssColor(serialized) : null;
+  const inputValue = parsed ?? converted ? colorToHex(parsed ?? converted).slice(0, 7) : fallback;
+  const sample = parsed ?? converted ?? parseCssColor(fallback);
+  const hexValue = sample ? colorToHex({ ...sample, alpha: 1 }).slice(1).toUpperCase() : "000000";
+  const alphaValue = sample ? Math.round(sample.alpha * 100) : 100;
+  const [hexDraft, setHexDraft] = useState2(hexValue);
+  const [alphaDraft, setAlphaDraft] = useState2(String(alphaValue));
+  const [hexFocused, setHexFocused] = useState2(false);
+  const [alphaFocused, setAlphaFocused] = useState2(false);
+  const updateColor = (nextHex, nextAlpha) => {
+    if (!/^[\da-f]{6}$/i.test(nextHex)) return;
+    const nextSample = parseCssColor(`#${nextHex}`);
+    if (!nextSample) return;
+    onChange(colorToHex({ ...nextSample, alpha: Math.min(100, Math.max(0, nextAlpha)) / 100 }));
+  };
+  const swatchColor = ownerWindow.CSS?.supports("color", value) ? value : fallback;
+  return /* @__PURE__ */ jsxs2("div", { className: "msr:col-span-2 msr:grid msr:w-full msr:grid-cols-[78px_156px] msr:items-center msr:gap-3 msr:text-[12px] msr:text-ink-700", children: [
+    /* @__PURE__ */ jsx2("span", { children: label }),
+    /* @__PURE__ */ jsx2(
+      ControlShell,
+      {
+        left: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: "msr:relative msr:ml-1 msr:block msr:size-4 msr:shrink-0 msr:overflow-hidden msr:rounded-[3px] msr:border msr:border-black/10",
+              style: { backgroundColor: swatchColor },
+              children: /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "color",
+                  "aria-label": `${label} color picker`,
+                  value: inputValue,
+                  className: "msr:absolute msr:inset-0 msr:size-full msr:cursor-pointer msr:opacity-0",
+                  onChange: (event) => onChange(event.target.value)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              "aria-label": `${label} hex value`,
+              type: "text",
+              value: hexFocused ? hexDraft : hexValue,
+              maxLength: 6,
+              className: "msr:min-w-0 msr:flex-1 msr:bg-transparent msr:px-2 msr:font-mono msr:text-[12px] msr:tabular-nums msr:text-ink-700 msr:outline-none",
+              onFocus: () => {
+                setHexDraft(hexValue);
+                setHexFocused(true);
+              },
+              onBlur: () => setHexFocused(false),
+              onChange: (event) => {
+                const next = event.target.value.replace(/[^\da-f]/gi, "").slice(0, 6).toUpperCase();
+                setHexDraft(next);
+                updateColor(next, alphaFocused ? Number(alphaDraft) : alphaValue);
+              },
+              onPointerDown: (event) => event.stopPropagation(),
+              onClick: (event) => event.stopPropagation()
+            }
+          )
+        ] }),
+        right: /* @__PURE__ */ jsx2(
+          "input",
+          {
+            "aria-label": `${label} opacity value`,
+            type: "text",
+            inputMode: "numeric",
+            value: alphaFocused ? alphaDraft ? `${alphaDraft}%` : "" : `${alphaValue}%`,
+            maxLength: 4,
+            className: "msr:h-full msr:w-full msr:bg-transparent msr:px-1 msr:text-center msr:font-mono msr:text-[12px] msr:tabular-nums msr:text-ink-700 msr:outline-none",
+            onFocus: () => {
+              setAlphaDraft(String(alphaValue));
+              setAlphaFocused(true);
+            },
+            onBlur: () => setAlphaFocused(false),
+            onChange: (event) => {
+              const next = event.target.value.replace(/\D/g, "").slice(0, 3);
+              setAlphaDraft(next);
+              updateColor(hexFocused ? hexDraft : hexValue, Number(next));
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+              event.preventDefault();
+              event.stopPropagation();
+              const current = Number.parseInt(alphaFocused ? alphaDraft : String(alphaValue), 10);
+              const direction = event.key === "ArrowUp" ? 1 : -1;
+              const next = Math.min(100, Math.max(0, (Number.isFinite(current) ? current : 0) + direction));
+              setAlphaDraft(String(next));
+              updateColor(hexFocused ? hexDraft : hexValue, next);
+            },
+            onPointerDown: (event) => event.stopPropagation(),
+            onClick: (event) => event.stopPropagation()
+          }
+        )
+      }
+    )
+  ] });
+}
+function SettingsPanel({
+  ownerWindow,
+  highlightColor,
+  setHighlightColor,
+  guideColor,
+  setGuideColor,
+  hoverHighlight,
+  setHoverHighlight,
+  persistOnReload,
+  setPersistOnReload,
+  colorFormats,
+  setColorFormats,
+  colorClickFormat,
+  setColorClickFormat,
+  snapEnabled,
+  setSnapEnabled,
+  snapGuidesEnabled,
+  setSnapGuidesEnabled,
+  selectNewGuideEnabled,
+  setSelectNewGuideEnabled,
+  multiMeasureEnabled,
+  setMultiMeasureEnabled,
+  guideStyle,
+  setGuideStyle,
+  rulerSettings,
+  setRulerSettings,
+  activeTab,
+  onTabChange,
+  onResetSettings,
+  onClearWorkspace
+}) {
+  const toggleFormat = (format) => {
+    setColorFormats((previous) => {
+      if (previous.includes(format)) {
+        if (previous.length === 1) return previous;
+        return previous.filter((item) => item !== format);
+      }
+      return [...previous, format];
+    });
+  };
+  const patternTooltip = useTooltip();
+  return /* @__PURE__ */ jsxs2("div", { className: "msr:flex msr:max-h-[min(70vh,34rem)] msr:flex-col msr:gap-2 msr:overflow-y-auto", onPointerDown: (event) => event.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2("div", { className: "mesurer-settings-tabs msr:flex msr:h-6 msr:shrink-0 msr:select-none msr:items-stretch msr:gap-0 msr:rounded-[5px] msr:bg-ink-50 msr:p-px", role: "tablist", "aria-label": "Settings sections", children: [
+      ["guides", "Guides"],
+      ["select", "Select"],
+      ["color-picker", "Color"],
+      ["rulers", "Rulers"],
+      ["general", "General"]
+    ].map(([value, label]) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": activeTab === value,
+        className: cn(
+          "mesurer-settings-tab msr:relative msr:flex msr:min-w-0 msr:flex-1 msr:appearance-none msr:items-center msr:justify-center msr:whitespace-nowrap msr:px-1.5 msr:py-0 msr:text-[10px] msr:font-medium msr:transition-colors msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#0d99ff]",
+          activeTab === value ? "msr:rounded-[5px] msr:bg-white msr:text-ink-900 msr:shadow-[0_0_0_1px_rgba(15,23,42,0.12)]" : "msr:rounded-[5px] msr:text-ink-500 msr:hover:text-ink-700"
+        ),
+        onClick: () => onTabChange(value),
+        children: label
+      },
+      value
+    )) }),
+    activeTab === "guides" ? /* @__PURE__ */ jsxs2("section", { className: "msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-x-3 msr:gap-y-1", "aria-label": "Guide settings", children: [
+      /* @__PURE__ */ jsx2(ColorField, { label: "Color", value: guideColor, fallback: "#f97316", ownerWindow, onChange: setGuideColor }),
+      /* @__PURE__ */ jsx2(SliderControl, { label: "Weight", min: 1, max: 4, step: 1, value: guideStyle.width, formatValue: (value) => `${value}px`, parseInput: (input) => Number.parseFloat(input), onChange: (value) => setGuideStyle((style) => ({ ...style, width: value })) }),
+      /* @__PURE__ */ jsxs2("div", { className: "msr:col-span-2 msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-3", children: [
+        /* @__PURE__ */ jsx2("span", { className: "msr:text-[12px] msr:text-ink-700", children: "Pattern" }),
+        /* @__PURE__ */ jsx2("div", { className: "msr:flex msr:gap-1", role: "radiogroup", "aria-label": "Guide pattern", onMouseLeave: patternTooltip.onTooltipContainerLeave, children: GUIDE_PATTERNS.map(({ value, label }) => {
+          const selected = guideStyle.pattern === value;
+          const tooltipId = `guide-pattern-${value}`;
+          return /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-label": `${label} guide pattern`,
+              "aria-checked": selected,
+              className: cn(
+                "msr:relative msr:flex msr:h-6 msr:min-w-0 msr:flex-1 msr:items-center msr:justify-center msr:rounded-[5px] msr:border msr:px-1 msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#0d99ff]",
+                selected ? "msr:border-[#0d99ff] msr:bg-[#0d99ff]/10" : "msr:border-ink-200 msr:bg-ink-50 msr:hover:bg-ink-100"
+              ),
+              onClick: () => setGuideStyle((style) => ({ ...style, pattern: value })),
+              onMouseEnter: () => patternTooltip.onTooltipEnter(tooltipId),
+              onFocus: () => patternTooltip.onTooltipEnter(tooltipId),
+              onBlur: patternTooltip.onTooltipLeave,
+              children: [
+                /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: cn("msr:block msr:w-full msr:border-t-2 msr:border-ink-700", value === "dashed" ? "msr:border-dashed" : value === "dotted" ? "msr:border-dotted" : "msr:border-solid") }),
+                /* @__PURE__ */ jsx2(Tooltip, { label, visible: patternTooltip.visibleTooltipId === tooltipId, instant: patternTooltip.tooltipInstant, className: "msr:z-10" })
+              ]
+            },
+            value
+          );
+        }) })
+      ] }),
+      guideStyle.pattern !== "solid" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2(SliderControl, { label: "Length", min: 2, max: 24, step: 1, value: guideStyle.dashLength, formatValue: (value) => `${value}px`, parseInput: (input) => Number.parseFloat(input), onChange: (value) => setGuideStyle((style) => ({ ...style, dashLength: value })) }),
+        /* @__PURE__ */ jsx2(SliderControl, { label: "Gap", min: 0, max: 24, step: 1, value: guideStyle.gap, formatValue: (value) => `${value}px`, parseInput: (input) => Number.parseFloat(input), onChange: (value) => setGuideStyle((style) => ({ ...style, gap: value })) })
+      ] }) : null,
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Snap", checked: snapGuidesEnabled, onChange: setSnapGuidesEnabled }) }),
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Highlight", checked: selectNewGuideEnabled, onChange: setSelectNewGuideEnabled }) })
+    ] }) : null,
+    activeTab === "select" ? /* @__PURE__ */ jsxs2("section", { className: "msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-x-3 msr:gap-y-1", "aria-label": "Selection settings", children: [
+      /* @__PURE__ */ jsx2(ColorField, { label: "Color", value: highlightColor, fallback: "#0d99ff", ownerWindow, onChange: setHighlightColor }),
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Hover", checked: hoverHighlight, onChange: setHoverHighlight }) }),
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Element snap", checked: snapEnabled, onChange: setSnapEnabled }) }),
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Stack", checked: multiMeasureEnabled, onChange: setMultiMeasureEnabled }) })
+    ] }) : null,
+    activeTab === "color-picker" ? /* @__PURE__ */ jsxs2("section", { className: "msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-x-3 msr:gap-y-1", "aria-label": "Color settings", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "msr:col-span-2 msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-3", children: [
+        /* @__PURE__ */ jsx2("span", { className: "msr:text-[12px] msr:text-ink-700", children: "Format" }),
+        /* @__PURE__ */ jsx2("div", { className: "msr:flex msr:min-w-0 msr:gap-1", children: COLOR_FORMATS.map((format) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": colorFormats.includes(format),
+            className: cn(
+              "msr:h-6 msr:min-w-0 msr:flex-1 msr:rounded-[5px] msr:border msr:px-1 msr:text-[11px] msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#0d99ff]",
+              colorFormats.includes(format) ? "msr:border-[#0d99ff] msr:bg-[#0d99ff] msr:text-white" : "msr:border-ink-200 msr:text-ink-500 msr:hover:bg-ink-50"
+            ),
+            onClick: () => toggleFormat(format),
+            children: format
+          },
+          format
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "msr:col-span-2 msr:flex msr:items-center msr:justify-between msr:gap-3 msr:text-[12px] msr:text-ink-700", children: [
+        "Copy",
+        /* @__PURE__ */ jsx2("select", { value: colorClickFormat, className: "msr:rounded-[5px] msr:border msr:border-ink-200 msr:bg-white msr:px-1.5 msr:py-1 msr:text-[11px] msr:outline-none msr:focus:shadow-[inset_0_0_0_1px_#0d99ff]", onChange: (event) => setColorClickFormat(event.target.value), children: COLOR_FORMATS.map((format) => /* @__PURE__ */ jsx2("option", { value: format, children: format }, format)) })
+      ] })
+    ] }) : null,
+    activeTab === "rulers" ? /* @__PURE__ */ jsxs2("section", { className: "msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-x-3 msr:gap-y-1", "aria-label": "Ruler settings", children: [
+      /* @__PURE__ */ jsx2(SliderControl, { label: "Opacity", min: 0.2, max: 1, step: 0.05, value: rulerSettings.opacity, formatValue: (value) => `${Math.round(value * 100)}%`, parseInput: (input) => Number.parseFloat(input) / 100, onChange: (value) => setRulerSettings((settings) => ({ ...settings, opacity: value })) }),
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Edge reveal", checked: rulerSettings.edgeReveal, onChange: (edgeReveal) => setRulerSettings((settings) => ({ ...settings, edgeReveal })) }) })
+    ] }) : null,
+    activeTab === "general" ? /* @__PURE__ */ jsxs2("section", { className: "msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-x-3 msr:gap-y-1", "aria-label": "General settings", children: [
+      /* @__PURE__ */ jsx2("div", { className: "msr:col-span-2", children: /* @__PURE__ */ jsx2(SettingsSwitch, { label: "Persist", checked: persistOnReload, onChange: setPersistOnReload }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "msr:col-span-2 msr:grid msr:h-6 msr:grid-cols-[78px_156px] msr:items-center msr:gap-3 msr:text-[12px] msr:text-ink-700", children: [
+        /* @__PURE__ */ jsx2("span", { children: "Version" }),
+        /* @__PURE__ */ jsx2("span", { className: "msr:justify-self-end msr:font-mono msr:text-[11px] msr:tabular-nums msr:text-ink-700", children: package_default.version })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "msr:col-span-2 msr:flex msr:justify-end msr:gap-1", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Reset settings to defaults",
+            className: "msr:rounded-[5px] msr:border msr:border-ink-200 msr:px-2 msr:py-1 msr:text-[11px] msr:text-ink-700 msr:hover:bg-ink-50 msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#0d99ff]",
+            onClick: onResetSettings,
+            children: "Use defaults"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear workspace",
+            className: "msr:rounded-[5px] msr:border msr:border-red-200 msr:px-2 msr:py-1 msr:text-[11px] msr:text-red-600 msr:hover:bg-red-50 msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#ef4444]",
+            onClick: onClearWorkspace,
+            children: "Clear workspace"
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+
 // components/icons.tsx
-import { jsx } from "react/jsx-runtime";
-var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ jsx(
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ jsx3(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -80,12 +842,14 @@ var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ jsx(
     height: size,
     viewBox: "0 0 256 256",
     fill: "currentColor",
+    "aria-hidden": "true",
+    onDragStart: (event) => event.preventDefault(),
     ...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 XrayIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx(
+var CursorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3("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__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3("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 XrayIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3(
   "path",
   {
     fill: "none",
@@ -97,7 +861,7 @@ var XrayIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(IconBase, { size
     d: "M76 48h96a16 16 0 0 1 16 16v96a16 16 0 0 1-16 16H76a16 16 0 0 1-16-16V64a16 16 0 0 1 16-16Zm32 32h96a16 16 0 0 1 16 16v96a16 16 0 0 1-16 16h-96a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16Z"
   }
 ) });
-var RulersIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(IconBase, { size, ...props, children: /* @__PURE__ */ jsx(
+var RulersIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3(
   "path",
   {
     fill: "none",
@@ -108,10 +872,10 @@ var RulersIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(IconBase, { si
     d: "M48 208V48h160M80 48v24m32-24v24m32-24v24m32-24v24M48 80h24M48 112h24m-24 32h24m-24 32h24"
   }
 ) });
-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" }) });
-var TextInspectorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(
+var CaretDownIcon = ({ size = 8, ...props }) => /* @__PURE__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3("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__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3("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__ */ jsx3(IconBase, { size, ...props, children: /* @__PURE__ */ jsx3("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" }) });
+var TextInspectorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx3(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -119,8 +883,10 @@ var TextInspectorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(
     height: size,
     viewBox: "0 0 256 256",
     fill: "currentColor",
+    "aria-hidden": "true",
+    onDragStart: (event) => event.preventDefault(),
     ...props,
-    children: /* @__PURE__ */ jsx(
+    children: /* @__PURE__ */ jsx3(
       "text",
       {
         x: "50%",
@@ -136,9 +902,54 @@ var TextInspectorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx(
     )
   }
 );
+var ColorPickerIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        transform: "translate(-1.44 -1.44) scale(1.12)",
+        d: "M15.16 5.658a2.25 2.25 0 0 1 3.18.001l.155.17a2.25 2.25 0 0 1 0 2.84l-.154.172-1.696 1.692a1.5 1.5 0 0 1 .02 1.913l-.104.114a1.5 1.5 0 0 1-2.007.103l-.02-.018-4.443 4.447a2.24 2.24 0 0 1-1.716.65l-.814.815a1.5 1.5 0 0 1-2.121-2.121l.816-.818a2.25 2.25 0 0 1 .653-1.708l4.443-4.446a1.5 1.5 0 0 1 .088-2.025l.114-.103a1.5 1.5 0 0 1 1.91.015zm-7.544 8.959a1.25 1.25 0 0 0-.358 1.021c.021.197-.014.406-.154.546l-.958.96a.5.5 0 0 0 .708.706l.955-.956c.14-.14.352-.176.55-.153.364.042.745-.077 1.025-.356l4.438-4.442-1.767-1.767zm10.018-8.251a1.25 1.25 0 0 0-1.768 0l-1.782 1.78-.065.06a.87.87 0 0 1-1.165-.06.5.5 0 0 0-.707.707l3 3a.5.5 0 0 0 .628.064l.079-.064a.5.5 0 0 0 0-.707l-.004-.004a.873.873 0 0 1 .004-1.23l1.78-1.778a1.25 1.25 0 0 0 0-1.768",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+var GearIcon = ({ size = 20, ...props }) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3(
+        "path",
+        {
+          d: "M10.6504 5.81117C10.9939 4.39628 13.0061 4.39628 13.3496 5.81117C13.5715 6.72517 14.6187 7.15891 15.4219 6.66952C16.6652 5.91193 18.0881 7.33479 17.3305 8.57815C16.8411 9.38134 17.2748 10.4285 18.1888 10.6504C19.6037 10.9939 19.6037 13.0061 18.1888 13.3496C17.2748 13.5715 16.8411 14.6187 17.3305 15.4219C18.0881 16.6652 16.6652 18.0881 15.4219 17.3305C14.6187 16.8411 13.5715 17.2748 13.3496 18.1888C13.0061 19.6037 10.9939 19.6037 10.6504 18.1888C10.4285 17.2748 9.38135 16.8411 8.57815 17.3305C7.33479 18.0881 5.91193 16.6652 6.66952 15.4219C7.15891 14.6187 6.72517 13.5715 5.81117 13.3496C4.39628 13.0061 4.39628 10.9939 5.81117 10.6504C6.72517 10.4285 7.15891 9.38134 6.66952 8.57815C5.91193 7.33479 7.33479 5.91192 8.57815 6.66952C9.38135 7.15891 10.4285 6.72517 10.6504 5.81117Z",
+          stroke: "currentColor",
+          strokeWidth: "1",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "2.5", stroke: "currentColor", strokeWidth: "1" })
+    ]
+  }
+);
 
 // components/toolbar.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var TOOLBAR_TOOLTIP_DELAY_MS = 800;
 var TOOLBAR_DRAG_SLOP = 6;
 var GUIDE_MENU_WIDTH = 176;
@@ -156,61 +967,43 @@ function ToolbarButton({
   onTooltipLeave,
   children
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "msr:relative",
       onMouseEnter: () => onTooltipEnter(id),
       onMouseLeave: () => onTooltipLeave(id),
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
-            "aria-label": `${label} (${shortcut})`,
             "aria-pressed": active,
-            title: `${label} (${shortcut})`,
+            "aria-label": `${label} (${shortcut})`,
             className: cn(
-              "msr:flex msr:size-8 msr:items-center msr:justify-center msr:rounded-[8px] msr:outline-none",
+              "msr:flex msr:size-8 msr:select-none msr:items-center msr:justify-center msr:rounded-[8px] msr:outline-none",
               active ? "msr:bg-[#0d99ff] msr:text-white" : "msr:bg-transparent msr:text-black msr:hover:bg-black/4"
             ),
             onClick,
             children
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              cn(
-                "msr:pointer-events-none msr:absolute msr:left-1/2 msr:-translate-x-1/2 msr:whitespace-nowrap msr:rounded msr:bg-black msr:px-2 msr:py-1 msr:text-[11px] msr:text-white msr:transition-opacity msr:duration-150 msr:select-none",
-                tooltipInstant && "msr:transition-none"
-              ),
-              tooltipSide === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
-              tooltipVisible ? "msr:opacity-100" : "msr:opacity-0"
-            ),
-            children: [
-              label,
-              " ",
-              /* @__PURE__ */ jsx2("kbd", { className: "msr:text-white/60", children: shortcut })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsx4(Tooltip, { label, shortcut, visible: tooltipVisible, instant: tooltipInstant, side: tooltipSide })
       ]
     }
   );
 }
 function useToolbarTooltip() {
-  const [visibleTooltipId, setVisibleTooltipId] = useState(null);
-  const timerRef = useRef(null);
-  const instantRef = useRef(false);
-  const [tooltipInstant, setTooltipInstant] = useState(false);
-  const clearTimer = useCallback(() => {
+  const [visibleTooltipId, setVisibleTooltipId] = useState3(null);
+  const timerRef = useRef2(null);
+  const instantRef = useRef2(false);
+  const [tooltipInstant, setTooltipInstant] = useState3(false);
+  const clearTimer = useCallback2(() => {
     if (timerRef.current === null) return;
     window.clearTimeout(timerRef.current);
     timerRef.current = null;
   }, []);
-  const onTooltipEnter = useCallback(
+  const onTooltipEnter = useCallback2(
     (id) => {
       clearTimer();
       if (instantRef.current) {
@@ -227,14 +1020,14 @@ function useToolbarTooltip() {
     },
     [clearTimer]
   );
-  const onTooltipLeave = useCallback(
+  const onTooltipLeave = useCallback2(
     (id) => {
       clearTimer();
       setVisibleTooltipId((prev) => prev === id ? null : prev);
     },
     [clearTimer]
   );
-  const onToolbarLeave = useCallback(() => {
+  const onToolbarLeave = useCallback2(() => {
     clearTimer();
     setVisibleTooltipId(null);
     instantRef.current = false;
@@ -249,10 +1042,11 @@ function useToolbarTooltip() {
   };
 }
 function useToolbarDrag(initialPosition, eventTarget) {
-  const [position, setPosition] = useState(initialPosition);
-  const suppressClickRef = useRef(false);
-  const detachListenersRef = useRef(null);
-  const dragRef = useRef({
+  const [position, setPosition] = useState3(initialPosition);
+  const suppressClickRef = useRef2(false);
+  const previousUserSelectRef = useRef2(null);
+  const detachListenersRef = useRef2(null);
+  const dragRef = useRef2({
     active: false,
     didDrag: false,
     pointerId: -1,
@@ -263,12 +1057,28 @@ function useToolbarDrag(initialPosition, eventTarget) {
     width: 0,
     height: 0
   });
-  const onPointerDown = useCallback(
+  const disableTextSelection = useCallback2(() => {
+    if (previousUserSelectRef.current !== null) return;
+    const root = eventTarget.document.documentElement;
+    previousUserSelectRef.current = root.style.userSelect;
+    root.style.setProperty("user-select", "none", "important");
+  }, [eventTarget]);
+  const restoreTextSelection = useCallback2(() => {
+    const previous = previousUserSelectRef.current;
+    if (previous === null) return;
+    const root = eventTarget.document.documentElement;
+    root.style.userSelect = previous;
+    previousUserSelectRef.current = null;
+  }, [eventTarget]);
+  useEffect(() => restoreTextSelection, [restoreTextSelection]);
+  const onPointerDown = useCallback2(
     (event) => {
       if (event.button !== 0) return;
+      disableTextSelection();
       if (detachListenersRef.current) {
         detachListenersRef.current();
         detachListenersRef.current = null;
+        restoreTextSelection();
       }
       const state = dragRef.current;
       state.active = false;
@@ -303,6 +1113,7 @@ function useToolbarDrag(initialPosition, eventTarget) {
         if (current.pointerId !== endEvent.pointerId && current.pointerId !== -1)
           return;
         suppressClickRef.current = current.didDrag;
+        restoreTextSelection();
         current.active = false;
         current.didDrag = false;
         current.pointerId = -1;
@@ -320,9 +1131,9 @@ function useToolbarDrag(initialPosition, eventTarget) {
         eventTarget.removeEventListener("pointercancel", handlePointerEnd);
       };
     },
-    [eventTarget, position.x, position.y]
+    [disableTextSelection, eventTarget, position.x, position.y, restoreTextSelection]
   );
-  const onClickCapture = useCallback(
+  const onClickCapture = useCallback2(
     (event) => {
       if (!suppressClickRef.current) return;
       event.preventDefault();
@@ -337,12 +1148,48 @@ function ToolbarComponent({
   toolMode,
   setEnabled,
   setToolMode,
+  xrayVisible,
+  setXrayVisible,
   rulersVisible,
   setRulersVisible,
   guideOrientation,
   setGuideOrientation,
   onInteract,
-  eventTarget
+  eventTarget,
+  colorPickerActive,
+  setColorPickerActive,
+  onColorPickerClick,
+  settingsOpen,
+  setSettingsOpen,
+  highlightColor,
+  setHighlightColor,
+  guideColor,
+  setGuideColor,
+  hoverHighlight,
+  setHoverHighlight,
+  persistOnReload,
+  setPersistOnReload,
+  colorPickerFormats,
+  setColorPickerFormats,
+  colorPickerClickFormat,
+  setColorPickerClickFormat,
+  snapEnabled,
+  setSnapEnabled,
+  snapGuidesEnabled,
+  setSnapGuidesEnabled,
+  selectNewGuideEnabled,
+  setSelectNewGuideEnabled,
+  multiMeasureEnabled,
+  setMultiMeasureEnabled,
+  guideStyle,
+  setGuideStyle,
+  rulerSettings,
+  setRulerSettings,
+  settingsTab,
+  setSettingsTab,
+  onToggleSettings,
+  onResetSettings,
+  onClearWorkspace
 }, ref) {
   const { position, onPointerDown, onClickCapture } = useToolbarDrag({
     x: 16,
@@ -355,11 +1202,13 @@ function ToolbarComponent({
     onTooltipLeave,
     onToolbarLeave
   } = useToolbarTooltip();
-  const [guideMenuOpen, setGuideMenuOpen] = useState(false);
-  const guideMenuRef = useRef(null);
-  const [activeMenuIndex, setActiveMenuIndex] = useState(0);
-  const [menuAlign, setMenuAlign] = useState("right");
-  const updateMenuAlign = useCallback(() => {
+  const [guideMenuOpen, setGuideMenuOpen] = useState3(false);
+  const settingsRef = useRef2(null);
+  const guideMenuRef = useRef2(null);
+  const [activeMenuIndex, setActiveMenuIndex] = useState3(0);
+  const [menuAlign, setMenuAlign] = useState3("right");
+  const tooltipsEnabled = !guideMenuOpen && !settingsOpen;
+  const updateMenuAlign = useCallback2(() => {
     const anchorRect = guideMenuRef.current?.getBoundingClientRect();
     if (!anchorRect) return;
     const rightAlignedLeft = anchorRect.right - GUIDE_MENU_WIDTH;
@@ -379,34 +1228,50 @@ function ToolbarComponent({
   const nearBottom = viewportHeight > 0 && position.y > viewportHeight - 56;
   const tooltipSide = nearTop && !nearBottom ? "bottom" : "top";
   const menuSide = nearBottom ? "top" : "bottom";
-  const selectMode = useCallback(() => {
+  const selectMode = useCallback2(() => {
     setEnabled(true);
+    setColorPickerActive(false);
     setToolMode((prev) => prev === "select" ? "none" : "select");
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const guidesMode = useCallback(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const guidesMode = useCallback2(() => {
     setEnabled(true);
+    setColorPickerActive(false);
     setToolMode((prev) => prev === "guides" ? "none" : "guides");
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const textInspectorMode = useCallback(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const textInspectorMode = useCallback2(() => {
     setEnabled(true);
+    setColorPickerActive(false);
     setToolMode(
       (prev) => prev === "text-inspector" ? "none" : "text-inspector"
     );
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const xrayMode = useCallback(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const xrayMode = useCallback2(() => {
     setEnabled(true);
-    setToolMode((prev) => prev === "xray" ? "none" : "xray");
+    setColorPickerActive(false);
+    setXrayVisible((prev) => !prev);
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const rulersMode = useCallback(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setXrayVisible]);
+  const colorPickerMode = useCallback2(() => {
     setEnabled(true);
+    setToolMode("none");
+    if (colorPickerActive) {
+      setColorPickerActive(false);
+    } else {
+      setColorPickerActive(true);
+      onColorPickerClick();
+    }
+    onInteract();
+  }, [colorPickerActive, onColorPickerClick, onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const rulersMode = useCallback2(() => {
+    setEnabled(true);
+    setColorPickerActive(false);
     setRulersVisible((prev) => !prev);
     onInteract();
-  }, [onInteract, setEnabled, setRulersVisible]);
-  const selectGuideOrientation = useCallback(
+  }, [onInteract, setColorPickerActive, setEnabled, setRulersVisible]);
+  const selectGuideOrientation = useCallback2(
     (orientation) => {
       setEnabled(true);
       setToolMode("guides");
@@ -417,29 +1282,33 @@ function ToolbarComponent({
     [onInteract, setEnabled, setGuideOrientation, setToolMode]
   );
   useLayoutEffect(() => {
-    if (!guideMenuOpen) return;
-    const frame = eventTarget.requestAnimationFrame(() => {
+    if (!guideMenuOpen && !settingsOpen) return;
+    const frame = guideMenuOpen ? eventTarget.requestAnimationFrame(() => {
       guideMenuRef.current?.querySelector("[role='menu']")?.focus();
-    });
+    }) : 0;
     const handlePointerDown = (event) => {
-      const menu = guideMenuRef.current;
-      if (!menu) return;
       const path = event.composedPath();
-      if (path.includes(menu)) return;
-      setGuideMenuOpen(false);
+      if (guideMenuOpen) {
+        const menu = guideMenuRef.current;
+        if (menu && !path.includes(menu)) setGuideMenuOpen(false);
+      }
+      if (settingsOpen) {
+        const settings = settingsRef.current;
+        if (settings && !path.includes(settings)) setSettingsOpen(false);
+      }
     };
     const handleResize = () => {
-      updateMenuAlign();
+      if (guideMenuOpen) updateMenuAlign();
     };
     eventTarget.addEventListener("pointerdown", handlePointerDown);
-    eventTarget.addEventListener("resize", handleResize);
+    if (guideMenuOpen) eventTarget.addEventListener("resize", handleResize);
     return () => {
-      eventTarget.cancelAnimationFrame(frame);
+      if (frame) eventTarget.cancelAnimationFrame(frame);
       eventTarget.removeEventListener("pointerdown", handlePointerDown);
       eventTarget.removeEventListener("resize", handleResize);
     };
-  }, [eventTarget, guideMenuOpen, guideOrientation, updateMenuAlign]);
-  return /* @__PURE__ */ jsxs(
+  }, [eventTarget, guideMenuOpen, guideOrientation, settingsOpen, updateMenuAlign]);
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref,
@@ -452,7 +1321,7 @@ function ToolbarComponent({
       onClickCapture,
       onMouseLeave: onToolbarLeave,
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           ToolbarButton,
           {
             id: "select",
@@ -460,31 +1329,47 @@ function ToolbarComponent({
             label: "Select",
             shortcut: "S",
             onClick: selectMode,
-            tooltipVisible: visibleTooltipId === "select",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "select",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ jsx2(CursorIcon, { size: 20 })
+            children: /* @__PURE__ */ jsx4(CursorIcon, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           ToolbarButton,
           {
             id: "xray",
-            active: toolMode === "xray",
+            active: xrayVisible,
             label: "X-ray",
             shortcut: "X",
             onClick: xrayMode,
-            tooltipVisible: visibleTooltipId === "xray",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "xray",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ jsx2(XrayIcon, { size: 20 })
+            children: /* @__PURE__ */ jsx4(XrayIcon, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
+          ToolbarButton,
+          {
+            id: "color-picker",
+            active: colorPickerActive,
+            label: "Color picker",
+            shortcut: "P",
+            onClick: colorPickerMode,
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "color-picker",
+            tooltipInstant,
+            tooltipSide,
+            onTooltipEnter,
+            onTooltipLeave,
+            children: /* @__PURE__ */ jsx4(ColorPickerIcon, { size: 20, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
           ToolbarButton,
           {
             id: "rulers",
@@ -492,15 +1377,15 @@ function ToolbarComponent({
             label: "Rulers",
             shortcut: "R",
             onClick: rulersMode,
-            tooltipVisible: visibleTooltipId === "rulers",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "rulers",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ jsx2(RulersIcon, { size: 20 })
+            children: /* @__PURE__ */ jsx4(RulersIcon, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           ToolbarButton,
           {
             id: "text-inspector",
@@ -508,15 +1393,15 @@ function ToolbarComponent({
             label: "Text inspector",
             shortcut: "A",
             onClick: textInspectorMode,
-            tooltipVisible: visibleTooltipId === "text-inspector",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "text-inspector",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ jsx2(TextInspectorIcon, { size: 20, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx4(TextInspectorIcon, { size: 20, "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           ToolbarButton,
           {
             id: "guides",
@@ -524,12 +1409,12 @@ function ToolbarComponent({
             label: "Guides",
             shortcut: "G",
             onClick: guidesMode,
-            tooltipVisible: visibleTooltipId === "guides",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "guides",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsx4(
               RulerIcon,
               {
                 size: 20,
@@ -540,7 +1425,7 @@ function ToolbarComponent({
             )
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             className: "msr:group msr:relative msr:-ml-1 msr:flex msr:items-stretch",
@@ -548,12 +1433,11 @@ function ToolbarComponent({
             onMouseEnter: () => onTooltipEnter("guide-menu"),
             onMouseLeave: () => onTooltipLeave("guide-menu"),
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Guide orientation menu",
-                  title: "Guide orientation",
                   className: cn(
                     "msr:flex msr:h-8 msr:w-4 msr:items-center msr:justify-center msr:rounded-[6px] msr:outline-none msr:hover:bg-black/10",
                     guideMenuOpen ? "msr:bg-black/10 msr:text-black" : "msr:text-black"
@@ -568,21 +1452,21 @@ function ToolbarComponent({
                       return !prev;
                     });
                   },
-                  children: /* @__PURE__ */ jsx2(CaretDownIcon, { size: 8 })
+                  children: /* @__PURE__ */ jsx4(CaretDownIcon, { size: 8 })
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "span",
                 {
                   className: cn(
                     "msr:pointer-events-none msr:absolute msr:left-1/2 msr:-translate-x-1/2 msr:whitespace-nowrap msr:rounded msr:bg-black msr:px-2 msr:py-1 msr:text-[11px] msr:text-white msr:transition-opacity msr:duration-150 msr:select-none",
                     tooltipSide === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
-                    visibleTooltipId === "guide-menu" && !guideMenuOpen ? "msr:opacity-100" : "msr:opacity-0"
+                    visibleTooltipId === "guide-menu" && tooltipsEnabled ? "msr:opacity-100" : "msr:opacity-0"
                   ),
                   children: "Orientation Guide"
                 }
               ),
-              guideMenuOpen ? /* @__PURE__ */ jsxs(
+              guideMenuOpen ? /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   className: cn(
@@ -623,7 +1507,7 @@ function ToolbarComponent({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ jsxs4(
                       "button",
                       {
                         type: "button",
@@ -633,7 +1517,7 @@ function ToolbarComponent({
                         ),
                         onClick: () => selectGuideOrientation("horizontal"),
                         children: [
-                          /* @__PURE__ */ jsx2(
+                          /* @__PURE__ */ jsx4(
                             CheckIcon,
                             {
                               size: 12,
@@ -642,13 +1526,13 @@ function ToolbarComponent({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx2(MinusIcon, { size: 12 }),
-                          /* @__PURE__ */ jsx2("span", { className: "msr:flex-1", children: "Horizontal" }),
-                          /* @__PURE__ */ jsx2("span", { children: "H" })
+                          /* @__PURE__ */ jsx4(MinusIcon, { size: 12 }),
+                          /* @__PURE__ */ jsx4("span", { className: "msr:flex-1", children: "Horizontal" }),
+                          /* @__PURE__ */ jsx4("span", { children: "H" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ jsxs4(
                       "button",
                       {
                         type: "button",
@@ -658,7 +1542,7 @@ function ToolbarComponent({
                         ),
                         onClick: () => selectGuideOrientation("vertical"),
                         children: [
-                          /* @__PURE__ */ jsx2(
+                          /* @__PURE__ */ jsx4(
                             CheckIcon,
                             {
                               size: 12,
@@ -667,9 +1551,9 @@ function ToolbarComponent({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx2(MinusIcon, { size: 12, className: "msr:rotate-90" }),
-                          /* @__PURE__ */ jsx2("span", { className: "msr:flex-1", children: "Vertical" }),
-                          /* @__PURE__ */ jsx2("span", { children: "V" })
+                          /* @__PURE__ */ jsx4(MinusIcon, { size: 12, className: "msr:rotate-90" }),
+                          /* @__PURE__ */ jsx4("span", { className: "msr:flex-1", children: "Vertical" }),
+                          /* @__PURE__ */ jsx4("span", { children: "V" })
                         ]
                       }
                     )
@@ -678,34 +1562,329 @@ function ToolbarComponent({
               ) : null
             ]
           }
+        ),
+        /* @__PURE__ */ jsxs4("div", { ref: settingsRef, className: "msr:relative msr:flex", children: [
+          /* @__PURE__ */ jsx4(
+            ToolbarButton,
+            {
+              id: "settings",
+              active: settingsOpen,
+              label: "Settings",
+              shortcut: "\u2318/Ctrl+,",
+              onClick: () => {
+                onInteract();
+                onToggleSettings();
+              },
+              tooltipVisible: tooltipsEnabled && visibleTooltipId === "settings",
+              tooltipInstant,
+              tooltipSide,
+              onTooltipEnter,
+              onTooltipLeave,
+              children: /* @__PURE__ */ jsx4(GearIcon, { size: 20, "aria-hidden": "true" })
+            }
+          ),
+          settingsOpen ? /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: cn(
+                "mesurer-menu-surface msr:absolute msr:-right-1 msr:z-[70] msr:box-border msr:w-[272px] msr:max-w-[calc(100vw-16px)] msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-3",
+                menuSide === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"
+              ),
+              "data-mesurer-inspector-ui": "true",
+              role: "dialog",
+              "aria-label": "Settings",
+              onPointerDown: (event) => event.stopPropagation(),
+              onPointerMove: (event) => event.stopPropagation(),
+              onPointerUp: (event) => event.stopPropagation(),
+              onClick: (event) => event.stopPropagation(),
+              children: /* @__PURE__ */ jsx4(
+                SettingsPanel,
+                {
+                  ownerWindow: eventTarget,
+                  highlightColor,
+                  setHighlightColor,
+                  guideColor,
+                  setGuideColor,
+                  hoverHighlight,
+                  setHoverHighlight,
+                  persistOnReload,
+                  setPersistOnReload,
+                  colorFormats: colorPickerFormats,
+                  setColorFormats: setColorPickerFormats,
+                  colorClickFormat: colorPickerClickFormat,
+                  setColorClickFormat: setColorPickerClickFormat,
+                  snapEnabled,
+                  setSnapEnabled,
+                  snapGuidesEnabled,
+                  setSnapGuidesEnabled,
+                  selectNewGuideEnabled,
+                  setSelectNewGuideEnabled,
+                  multiMeasureEnabled,
+                  setMultiMeasureEnabled,
+                  guideStyle,
+                  setGuideStyle,
+                  rulerSettings,
+                  setRulerSettings,
+                  activeTab: settingsTab,
+                  onTabChange: setSettingsTab,
+                  onResetSettings,
+                  onClearWorkspace
+                }
+              )
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+var Toolbar = memo(forwardRef(ToolbarComponent));
+
+// components/color-picker.tsx
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function CopyableColorValue({
+  id,
+  value,
+  copiedId,
+  onCopy,
+  onTooltipEnter,
+  tooltip,
+  className
+}) {
+  const copied = copiedId === id;
+  const showTooltip = tooltip.visibleTooltipId === id || copied && tooltip.visibleTooltipId === null;
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: "msr:relative msr:inline-flex",
+      onMouseLeave: tooltip.onTooltipLeave,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className,
+            onMouseEnter: () => onTooltipEnter(id),
+            onFocus: () => onTooltipEnter(id),
+            onBlur: tooltip.onTooltipLeave,
+            onClick: onCopy,
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Tooltip,
+          {
+            label: copied ? "Copied!" : "Click to copy",
+            visible: showTooltip,
+            instant: copied || tooltip.tooltipInstant,
+            side: "bottom",
+            className: "msr:z-10"
+          }
         )
       ]
     }
   );
 }
-var Toolbar = memo(forwardRef(ToolbarComponent));
+function ColorPicker({
+  active,
+  sample,
+  unsupported,
+  formats,
+  favoriteFormat,
+  ownerWindow,
+  toolbarRef,
+  onClose
+}) {
+  const panelRef = useRef3(null);
+  const copyTimeoutRef = useRef3(null);
+  const [copiedId, setCopiedId] = useState4(null);
+  const tooltip = useTooltip();
+  const copyValue = useCallback3(
+    (id, value) => {
+      const clipboardWrite = ownerWindow.navigator.clipboard?.writeText(value);
+      void clipboardWrite?.catch(() => void 0);
+      tooltip.onTooltipLeave();
+      setCopiedId(id);
+      if (copyTimeoutRef.current !== null) {
+        ownerWindow.clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = ownerWindow.setTimeout(() => {
+        copyTimeoutRef.current = null;
+        setCopiedId(null);
+      }, 1500);
+    },
+    [ownerWindow, tooltip]
+  );
+  const handleTooltipEnter = useCallback3(
+    (id) => {
+      if (copiedId !== null && copiedId !== id) {
+        if (copyTimeoutRef.current !== null) {
+          ownerWindow.clearTimeout(copyTimeoutRef.current);
+          copyTimeoutRef.current = null;
+        }
+        setCopiedId(null);
+      }
+      tooltip.onTooltipEnter(id);
+    },
+    [copiedId, ownerWindow, tooltip]
+  );
+  useLayoutEffect2(() => {
+    if (!active) return;
+    const panel = panelRef.current;
+    const toolbar = toolbarRef.current;
+    if (!panel || !toolbar) return;
+    let frame = 0;
+    const updatePosition = () => {
+      const toolbarRect = toolbar.getBoundingClientRect();
+      const panelRect = panel.getBoundingClientRect();
+      const left = Math.min(
+        Math.max(8, toolbarRect.left),
+        ownerWindow.innerWidth - panelRect.width - 8
+      );
+      const belowTop = toolbarRect.bottom + 8;
+      const aboveTop = toolbarRect.top - panelRect.height - 8;
+      const top = belowTop + panelRect.height <= ownerWindow.innerHeight ? belowTop : Math.max(8, aboveTop);
+      panel.style.left = `${left}px`;
+      panel.style.top = `${top}px`;
+      frame = ownerWindow.requestAnimationFrame(updatePosition);
+    };
+    frame = ownerWindow.requestAnimationFrame(updatePosition);
+    return () => ownerWindow.cancelAnimationFrame(frame);
+  }, [active, ownerWindow, toolbarRef, formats, sample, unsupported, favoriteFormat]);
+  useLayoutEffect2(() => {
+    return () => {
+      if (copyTimeoutRef.current !== null) {
+        ownerWindow.clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, [ownerWindow]);
+  if (!active || !sample && !unsupported) return null;
+  const headerFormat = formats.includes(favoriteFormat) ? favoriteFormat : formats[0];
+  const secondaryFormats = headerFormat ? formats.filter((format) => format !== headerFormat) : [];
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: panelRef,
+      className: "mesurer-color-picker msr:pointer-events-auto msr:fixed msr:z-[80] msr:min-w-36 msr:rounded-lg msr:border msr:border-black/10 msr:bg-white msr:px-2 msr:py-2 msr:font-mono msr:text-[10px] msr:leading-4 msr:shadow-lg",
+      role: "dialog",
+      "aria-label": "Selected color values",
+      onMouseLeave: tooltip.onTooltipContainerLeave,
+      children: unsupported ? /* @__PURE__ */ jsxs5("div", { className: "msr:flex msr:items-start msr:gap-2", children: [
+        /* @__PURE__ */ jsx5("span", { className: "msr:text-black/60", children: "Color picker is not supported in this browser." }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className: "msr:text-black/45 msr:hover:text-black",
+            "aria-label": "Close color picker message",
+            onClick: onClose,
+            children: "x"
+          }
+        )
+      ] }) : sample ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        headerFormat ? /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: secondaryFormats.length > 0 ? "msr:mb-1 msr:flex msr:items-center msr:gap-1.5 msr:border-b msr:border-black/8 msr:pb-1" : "msr:flex msr:items-center msr:gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: "msr:size-3 msr:shrink-0 msr:rounded-full msr:border msr:border-black/15",
+                  style: { backgroundColor: colorToHex(sample) },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                CopyableColorValue,
+                {
+                  id: headerFormat,
+                  value: formatColor(sample, headerFormat),
+                  copiedId,
+                  onCopy: () => copyValue(headerFormat, formatColor(sample, headerFormat)),
+                  onTooltipEnter: handleTooltipEnter,
+                  tooltip,
+                  className: "msr:font-medium msr:tabular-nums msr:text-black msr:hover:underline"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx5("div", { className: "msr:flex msr:items-center", children: /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "msr:size-3 msr:shrink-0 msr:rounded-full msr:border msr:border-black/15",
+            style: { backgroundColor: colorToHex(sample) },
+            "aria-hidden": "true"
+          }
+        ) }),
+        secondaryFormats.map((format) => {
+          const value = formatColor(sample, format);
+          return /* @__PURE__ */ jsxs5("div", { className: "msr:flex msr:items-center msr:gap-2", children: [
+            /* @__PURE__ */ jsx5("span", { className: "msr:w-9 msr:text-black/45", children: format }),
+            /* @__PURE__ */ jsx5(
+              CopyableColorValue,
+              {
+                id: format,
+                value,
+                copiedId,
+                onCopy: () => copyValue(format, value),
+                onTooltipEnter: handleTooltipEnter,
+                tooltip,
+                className: "msr:tabular-nums msr:text-black msr:hover:underline"
+              }
+            )
+          ] }, format);
+        })
+      ] }) : null
+    }
+  );
+}
 
 // components/rulers-overlay.tsx
-import { memo as memo2, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { memo as memo2, useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var RULER_SIZE = 18;
 var RULER_LENGTH = 4e3;
 var TICK_STEP = 5;
+var RULER_EDGE_REVEAL_DISTANCE = 32;
+var RULER_FADE_MS = 100;
 var ticks = Array.from(
   { length: RULER_LENGTH / TICK_STEP + 1 },
   (_, index) => index * TICK_STEP
 );
 var RulersOverlay = memo2(function RulersOverlay2({
+  ownerWindow,
+  settings,
   onStartGuide,
   onMoveGuide,
   onFinishGuide,
   onCancelGuide,
   guides,
-  selectedGuideIds
+  selectedGuideIds,
+  interactive = true,
+  forceVisible = false
 }) {
-  const [dragPosition, setDragPosition] = useState2(null);
-  const [dragOrientation, setDragOrientation] = useState2(null);
-  const dragRef = useRef2(null);
+  const [dragPosition, setDragPosition] = useState5(null);
+  const [dragOrientation, setDragOrientation] = useState5(null);
+  const [nearEdge, setNearEdge] = useState5(false);
+  const dragRef = useRef4(null);
+  useEffect2(() => {
+    if (!settings.edgeReveal) return;
+    const handlePointerMove = (event) => {
+      const pointer = event;
+      const nearHorizontalEdge = pointer.clientX <= RULER_EDGE_REVEAL_DISTANCE || pointer.clientX >= ownerWindow.innerWidth - RULER_EDGE_REVEAL_DISTANCE;
+      const nearVerticalEdge = pointer.clientY <= RULER_EDGE_REVEAL_DISTANCE || pointer.clientY >= ownerWindow.innerHeight - RULER_EDGE_REVEAL_DISTANCE;
+      setNearEdge(nearHorizontalEdge || nearVerticalEdge);
+    };
+    ownerWindow.document.addEventListener("pointermove", handlePointerMove, true);
+    ownerWindow.document.addEventListener("mousemove", handlePointerMove, true);
+    return () => {
+      ownerWindow.document.removeEventListener("pointermove", handlePointerMove, true);
+      ownerWindow.document.removeEventListener("mousemove", handlePointerMove, true);
+    };
+  }, [ownerWindow, settings.edgeReveal]);
+  const showRulers = forceVisible || !settings.edgeReveal || nearEdge;
   const beginGuideDrag = (orientation, event) => {
     if (event.button !== 0) return;
     event.stopPropagation();
@@ -755,13 +1934,18 @@ var RulersOverlay = memo2(function RulersOverlay2({
   const selectedHorizontalGuides = guides.filter(
     (guide) => guide.orientation === "horizontal" && selectedGuideIds.includes(guide.id)
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "aria-hidden": "true",
+      "data-mesurer-rulers": "true",
       className: "msr:pointer-events-none msr:absolute msr:inset-0 msr:select-none msr:text-[9px] msr:text-[#64748b]",
+      style: {
+        opacity: showRulers ? settings.opacity : 0,
+        transition: `opacity ${RULER_FADE_MS}ms ease`
+      },
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             className: "msr:absolute msr:left-[18px] msr:right-0 msr:top-0 msr:overflow-hidden msr:bg-white",
@@ -769,13 +1953,13 @@ var RulersOverlay = memo2(function RulersOverlay2({
               boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
               height: RULER_SIZE,
               cursor: "ns-resize",
-              pointerEvents: "auto"
+              pointerEvents: showRulers && interactive ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("horizontal", event),
             onPointerMove: moveGuide,
             onPointerUp: finishGuideDrag,
             onPointerCancel: cancelGuideDrag,
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs6(
               "svg",
               {
                 className: "msr:block msr:h-6",
@@ -783,7 +1967,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                 height: RULER_SIZE,
                 viewBox: `0 0 ${RULER_LENGTH} ${RULER_SIZE}`,
                 children: [
-                  /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs2(
+                  /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsxs6(
                     "linearGradient",
                     {
                       id: "ruler-label-fade-x",
@@ -791,18 +1975,18 @@ var RulersOverlay = memo2(function RulersOverlay2({
                       x2: "100%",
                       gradientUnits: "objectBoundingBox",
                       children: [
-                        /* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "0.2", stopColor: "white" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "0.8", stopColor: "white" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+                        /* @__PURE__ */ jsx6("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
+                        /* @__PURE__ */ jsx6("stop", { offset: "0.2", stopColor: "white" }),
+                        /* @__PURE__ */ jsx6("stop", { offset: "0.8", stopColor: "white" }),
+                        /* @__PURE__ */ jsx6("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
                       ]
                     }
                   ) }),
                   ticks.map((x) => {
                     const major = x % 100 === 0;
                     const medium = x % 50 === 0;
-                    return /* @__PURE__ */ jsxs2("g", { children: [
-                      /* @__PURE__ */ jsx3(
+                    return /* @__PURE__ */ jsxs6("g", { children: [
+                      /* @__PURE__ */ jsx6(
                         "line",
                         {
                           x1: x,
@@ -813,11 +1997,11 @@ var RulersOverlay = memo2(function RulersOverlay2({
                           strokeWidth: "1"
                         }
                       ),
-                      major ? /* @__PURE__ */ jsx3("text", { x, y: "8", textAnchor: "middle", fill: "currentColor", children: x }) : null
+                      major ? /* @__PURE__ */ jsx6("text", { x, y: "8", textAnchor: "middle", fill: "currentColor", children: x }) : null
                     ] }, x);
                   }),
-                  selectedVerticalGuides.map((guide) => /* @__PURE__ */ jsxs2("g", { children: [
-                    /* @__PURE__ */ jsx3(
+                  selectedVerticalGuides.map((guide) => /* @__PURE__ */ jsxs6("g", { children: [
+                    /* @__PURE__ */ jsx6(
                       "rect",
                       {
                         x: guide.position - RULER_SIZE - 8,
@@ -827,7 +2011,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-x)"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx6(
                       "text",
                       {
                         x: guide.position - RULER_SIZE + 16,
@@ -839,8 +2023,8 @@ var RulersOverlay = memo2(function RulersOverlay2({
                       }
                     )
                   ] }, guide.id)),
-                  dragOrientation === "vertical" && dragPosition !== null ? /* @__PURE__ */ jsxs2("g", { children: [
-                    /* @__PURE__ */ jsx3(
+                  dragOrientation === "vertical" && dragPosition !== null ? /* @__PURE__ */ jsxs6("g", { children: [
+                    /* @__PURE__ */ jsx6(
                       "rect",
                       {
                         x: dragPosition - RULER_SIZE - 8,
@@ -850,7 +2034,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-x)"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx6(
                       "text",
                       {
                         x: dragPosition - RULER_SIZE + 16,
@@ -867,7 +2051,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
             )
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             className: "msr:absolute msr:bottom-0 msr:left-0 msr:top-[18px] msr:w-[18px] msr:overflow-hidden msr:bg-white",
@@ -875,13 +2059,13 @@ var RulersOverlay = memo2(function RulersOverlay2({
               boxShadow: "1px 0 3px rgba(0, 0, 0, 0.12)",
               width: RULER_SIZE,
               cursor: "ew-resize",
-              pointerEvents: "auto"
+              pointerEvents: showRulers && interactive ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("vertical", event),
             onPointerMove: moveGuide,
             onPointerUp: finishGuideDrag,
             onPointerCancel: cancelGuideDrag,
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs6(
               "svg",
               {
                 className: "msr:block msr:w-6",
@@ -889,7 +2073,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                 height: RULER_LENGTH,
                 viewBox: `0 0 ${RULER_SIZE} ${RULER_LENGTH}`,
                 children: [
-                  /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs2(
+                  /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsxs6(
                     "linearGradient",
                     {
                       id: "ruler-label-fade-y",
@@ -897,18 +2081,18 @@ var RulersOverlay = memo2(function RulersOverlay2({
                       y2: "100%",
                       gradientUnits: "objectBoundingBox",
                       children: [
-                        /* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "0.2", stopColor: "white" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "0.8", stopColor: "white" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+                        /* @__PURE__ */ jsx6("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
+                        /* @__PURE__ */ jsx6("stop", { offset: "0.2", stopColor: "white" }),
+                        /* @__PURE__ */ jsx6("stop", { offset: "0.8", stopColor: "white" }),
+                        /* @__PURE__ */ jsx6("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
                       ]
                     }
                   ) }),
                   ticks.map((y) => {
                     const major = y % 100 === 0;
                     const medium = y % 50 === 0;
-                    return /* @__PURE__ */ jsxs2("g", { children: [
-                      /* @__PURE__ */ jsx3(
+                    return /* @__PURE__ */ jsxs6("g", { children: [
+                      /* @__PURE__ */ jsx6(
                         "line",
                         {
                           x1: RULER_SIZE,
@@ -919,7 +2103,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                           strokeWidth: "1"
                         }
                       ),
-                      major ? /* @__PURE__ */ jsx3(
+                      major ? /* @__PURE__ */ jsx6(
                         "text",
                         {
                           x: "8",
@@ -931,8 +2115,8 @@ var RulersOverlay = memo2(function RulersOverlay2({
                       ) : null
                     ] }, y);
                   }),
-                  selectedHorizontalGuides.map((guide) => /* @__PURE__ */ jsxs2("g", { children: [
-                    /* @__PURE__ */ jsx3(
+                  selectedHorizontalGuides.map((guide) => /* @__PURE__ */ jsxs6("g", { children: [
+                    /* @__PURE__ */ jsx6(
                       "rect",
                       {
                         x: "-3",
@@ -942,7 +2126,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-y)"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx6(
                       "text",
                       {
                         x: "9",
@@ -955,8 +2139,8 @@ var RulersOverlay = memo2(function RulersOverlay2({
                       }
                     )
                   ] }, guide.id)),
-                  dragOrientation === "horizontal" && dragPosition !== null ? /* @__PURE__ */ jsxs2("g", { children: [
-                    /* @__PURE__ */ jsx3(
+                  dragOrientation === "horizontal" && dragPosition !== null ? /* @__PURE__ */ jsxs6("g", { children: [
+                    /* @__PURE__ */ jsx6(
                       "rect",
                       {
                         x: "-3",
@@ -966,7 +2150,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-y)"
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx6(
                       "text",
                       {
                         x: "9",
@@ -984,34 +2168,34 @@ var RulersOverlay = memo2(function RulersOverlay2({
             )
           }
         ),
-        /* @__PURE__ */ jsx3("div", { className: "msr:absolute msr:left-0 msr:top-0 msr:size-[18px] msr:bg-white" })
+        /* @__PURE__ */ jsx6("div", { className: "msr:absolute msr:left-0 msr:top-0 msr:size-[18px] msr:bg-white" })
       ]
     }
   );
 });
 
 // hooks/use-drag-state.ts
-import { useState as useState3 } from "react";
+import { useState as useState6 } from "react";
 var useDragState = () => {
-  const [start, setStart] = useState3(null);
-  const [end, setEnd] = useState3(null);
-  const [isDragging, setIsDragging] = useState3(false);
+  const [start, setStart] = useState6(null);
+  const [end, setEnd] = useState6(null);
+  const [isDragging, setIsDragging] = useState6(false);
   return { start, setStart, end, setEnd, isDragging, setIsDragging };
 };
 
 // hooks/use-guide-drag-hold.ts
-import { useCallback as useCallback2, useRef as useRef3 } from "react";
+import { useCallback as useCallback4, useRef as useRef5 } from "react";
 var useGuideDragHold = (eventTarget) => {
-  const guideDragHoldTimerRef = useRef3(null);
-  const guideDragHoldGuideIdRef = useRef3(null);
-  const clearGuideDragHold = useCallback2(() => {
+  const guideDragHoldTimerRef = useRef5(null);
+  const guideDragHoldGuideIdRef = useRef5(null);
+  const clearGuideDragHold = useCallback4(() => {
     if (guideDragHoldTimerRef.current !== null) {
       eventTarget.clearTimeout(guideDragHoldTimerRef.current);
       guideDragHoldTimerRef.current = null;
     }
     guideDragHoldGuideIdRef.current = null;
   }, []);
-  const scheduleGuideDragHold = useCallback2(
+  const scheduleGuideDragHold = useCallback4(
     (id, onHold) => {
       clearGuideDragHold();
       guideDragHoldGuideIdRef.current = id;
@@ -1030,11 +2214,11 @@ var useGuideDragHold = (eventTarget) => {
 };
 
 // hooks/use-guide-state.ts
-import { useState as useState4 } from "react";
+import { useState as useState7 } from "react";
 var useGuideState = (options = {}) => {
-  const [guides, setGuides] = useState4(options.initialGuides ?? []);
-  const [draggingGuideId, setDraggingGuideId] = useState4(null);
-  const [selectedGuideIds, setSelectedGuideIds] = useState4(
+  const [guides, setGuides] = useState7(options.initialGuides ?? []);
+  const [draggingGuideId, setDraggingGuideId] = useState7(null);
+  const [selectedGuideIds, setSelectedGuideIds] = useState7(
     options.initialSelectedGuideIds ?? []
   );
   return {
@@ -1048,67 +2232,91 @@ var useGuideState = (options = {}) => {
 };
 
 // hooks/use-hotkeys.ts
-import { useEffect } from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
 var useHotkeys = (options) => {
-  useEffect(() => {
+  const optionsRef = useRef6(options);
+  optionsRef.current = options;
+  useEffect3(() => {
     const target = options.eventTarget;
     const handleKeyDown = (event) => {
+      const current = optionsRef.current;
       if (event.key === "Escape") {
-        options.clearAll();
+        if (current.isSettingsOpen()) {
+          current.onToggleSettings();
+          return;
+        }
+        if (current.isColorPickerActive()) {
+          current.onCloseColorPicker();
+          return;
+        }
+        current.clearAll();
         return;
       }
       if (event.metaKey || event.ctrlKey) {
+        if (event.key === ",") {
+          event.preventDefault();
+          current.onToggleSettings();
+          current.onInteract();
+          return;
+        }
         if (event.key.toLowerCase() !== "z") return;
         if (event.shiftKey) {
           event.preventDefault();
-          options.redo();
+          current.redo();
           return;
         }
         event.preventDefault();
-        options.undo();
+        current.undo();
         return;
       }
       if (event.key.toLowerCase() === "m") {
-        options.setEnabled((prev) => !prev);
+        current.setEnabled((prev) => !prev);
       }
       const key = event.key.toLowerCase();
-      if (options.isOverlayActive()) {
+      if (key === "p") {
+        event.preventDefault();
+        current.onColorPicker();
+        current.onInteract();
+        return;
+      }
+      if (key === "x") {
+        current.onToggleXray();
+        current.onInteract();
+        return;
+      }
+      if (current.isOverlayActive()) {
         if (key === "a") {
-          options.setToolMode(
+          current.setToolMode(
             (prev) => prev === "text-inspector" ? "none" : "text-inspector"
           );
-          options.onInteract();
+          current.onInteract();
         }
         if (key === "s") {
-          options.setToolMode((prev) => prev === "select" ? "none" : "select");
-          options.onInteract();
+          current.setToolMode((prev) => prev === "select" ? "none" : "select");
+          current.onInteract();
         }
         if (key === "g") {
-          options.setToolMode((prev) => prev === "guides" ? "none" : "guides");
-          options.onInteract();
-        }
-        if (key === "x") {
-          options.setToolMode((prev) => prev === "xray" ? "none" : "xray");
-          options.onInteract();
+          current.setToolMode((prev) => prev === "guides" ? "none" : "guides");
+          current.onInteract();
         }
         if (key === "r") {
-          options.setRulersVisible((prev) => !prev);
-          options.onInteract();
+          current.setRulersVisible((prev) => !prev);
+          current.onInteract();
         }
         if (key === "h") {
-          options.setGuideOrientation("horizontal");
-          options.onInteract();
+          current.setGuideOrientation("horizontal");
+          current.onInteract();
         }
         if (key === "v") {
-          options.setGuideOrientation("vertical");
-          options.onInteract();
+          current.setGuideOrientation("vertical");
+          current.onInteract();
         }
       }
       if (event.key === "Alt") {
-        options.setAltPressed(true);
+        current.setAltPressed(true);
       }
       if (event.key === "Backspace" || event.key === "Delete") {
-        const removed = options.removeSelectedGuides();
+        const removed = current.removeSelectedGuides();
         if (removed) {
           event.preventDefault();
         }
@@ -1116,7 +2324,7 @@ var useHotkeys = (options) => {
     };
     const handleKeyUp = (event) => {
       if (event.key === "Alt") {
-        options.setAltPressed(false);
+        optionsRef.current.setAltPressed(false);
       }
     };
     target.addEventListener("keydown", handleKeyDown);
@@ -1125,11 +2333,11 @@ var useHotkeys = (options) => {
       target.removeEventListener("keydown", handleKeyDown);
       target.removeEventListener("keyup", handleKeyUp);
     };
-  }, [options]);
+  }, [options.eventTarget]);
 };
 
 // hooks/use-live-element-tracking.ts
-import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef7 } from "react";
 
 // core/geometry.ts
 var getViewportSize = (ownerWindow) => ({
@@ -1155,7 +2363,7 @@ var getRectFromPoints = (start, end) => {
   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 clamp2 = (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) => {
@@ -1219,10 +2427,10 @@ var getDistanceOverlay = (rectA, rectB, elementRefA, elementRefB, ownerWindow =
     }
   }
   const normalizedConnectors = connectors.map((segment) => ({
-    x1: clamp(segment.x1, 0, ownerWindow.innerWidth),
-    y1: clamp(segment.y1, 0, ownerWindow.innerHeight),
-    x2: clamp(segment.x2, 0, ownerWindow.innerWidth),
-    y2: clamp(segment.y2, 0, ownerWindow.innerHeight)
+    x1: clamp2(segment.x1, 0, ownerWindow.innerWidth),
+    y1: clamp2(segment.y1, 0, ownerWindow.innerHeight),
+    x2: clamp2(segment.x2, 0, ownerWindow.innerWidth),
+    y2: clamp2(segment.y2, 0, ownerWindow.innerHeight)
   })).filter(
     (segment) => Math.abs(segment.x1 - segment.x2) > 0.5 || Math.abs(segment.y1 - segment.y2) > 0.5
   );
@@ -1389,19 +2597,23 @@ var updateMeasurementForResize = (measurement, viewport = getViewportSize(), own
 
 // hooks/use-live-element-tracking.ts
 var useLiveElementTracking = (params) => {
-  const frameRef = useRef4(null);
-  useEffect2(() => {
+  const paramsRef = useRef7(params);
+  paramsRef.current = params;
+  const frameRef = useRef7(null);
+  useEffect4(() => {
+    const ownerWindow = params.window;
     if (!params.enabled) {
       if (frameRef.current) {
-        params.window.cancelAnimationFrame(frameRef.current);
+        ownerWindow.cancelAnimationFrame(frameRef.current);
       }
       frameRef.current = null;
       return;
     }
     const tick = () => {
-      params.setMeasurements(
+      const current = paramsRef.current;
+      current.setMeasurements(
         (prev) => prev.map((measurement) => {
-          if (!measurement.elementRef || !params.document.contains(measurement.elementRef)) {
+          if (!measurement.elementRef || !current.document.contains(measurement.elementRef)) {
             return measurement;
           }
           const rect = getRectFromDom(measurement.elementRef);
@@ -1414,8 +2626,8 @@ var useLiveElementTracking = (params) => {
           };
         })
       );
-      params.setActiveMeasurement((prev) => {
-        if (!prev?.elementRef || !params.document.contains(prev.elementRef))
+      current.setActiveMeasurement((prev) => {
+        if (!prev?.elementRef || !current.document.contains(prev.elementRef))
           return prev;
         const rect = getRectFromDom(prev.elementRef);
         if (rectAlmostEqual(rect, prev.rect)) return prev;
@@ -1426,10 +2638,10 @@ var useLiveElementTracking = (params) => {
           originRect: void 0
         };
       });
-      params.setHeldDistances(
+      current.setHeldDistances(
         (prev) => prev.map((distance) => {
-          const canTrackA = distance.elementRefA && params.document.contains(distance.elementRefA);
-          const canTrackB = distance.elementRefB && params.document.contains(distance.elementRefB);
+          const canTrackA = distance.elementRefA && current.document.contains(distance.elementRefA);
+          const canTrackB = distance.elementRefB && current.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;
@@ -1441,7 +2653,7 @@ var useLiveElementTracking = (params) => {
             rectB,
             distance.elementRefA,
             distance.elementRefB,
-            params.window
+            ownerWindow
           );
           return {
             ...updated,
@@ -1449,62 +2661,71 @@ var useLiveElementTracking = (params) => {
           };
         })
       );
-      const selected = params.selectedElementRef.current;
-      if (selected && params.document.contains(selected)) {
-        params.setSelectedMeasurement((prev) => {
-          const next = getInspectMeasurement(selected, params.window);
+      const selected = current.selectedElementRef.current;
+      if (current.selectionEnabled && selected && current.document.contains(selected)) {
+        current.setSelectedMeasurement((prev) => {
+          const next = getInspectMeasurement(selected, ownerWindow);
           if (prev && rectAlmostEqual(prev.rect, next.rect)) return prev;
           return next;
         });
       }
-      params.setSelectedMeasurements(
-        (prev) => prev.map((measurement) => {
-          if (!measurement.elementRef || !params.document.contains(measurement.elementRef)) {
-            return measurement;
-          }
-          const next = getInspectMeasurement(measurement.elementRef, params.window);
-          if (rectAlmostEqual(next.rect, measurement.rect)) return measurement;
-          return {
-            ...next,
-            id: measurement.id
-          };
-        })
-      );
-      const hover = params.hoverElementRef.current;
-      if (hover && params.document.contains(hover)) {
+      if (current.selectionEnabled) {
+        current.setSelectedMeasurements(
+          (prev) => prev.map((measurement) => {
+            if (!measurement.elementRef || !current.document.contains(measurement.elementRef)) {
+              return measurement;
+            }
+            const next = getInspectMeasurement(measurement.elementRef, ownerWindow);
+            if (rectAlmostEqual(next.rect, measurement.rect)) return measurement;
+            return {
+              ...next,
+              id: measurement.id
+            };
+          })
+        );
+      }
+      const hover = current.hoverElementRef.current;
+      if (current.selectionEnabled && hover && current.document.contains(hover)) {
         const rect = getRectFromDom(hover);
-        params.setHoverRect(
+        current.setHoverRect(
           (prev) => prev && rectAlmostEqual(prev, rect) ? prev : rect
         );
       }
-      frameRef.current = params.window.requestAnimationFrame(tick);
+      frameRef.current = ownerWindow.requestAnimationFrame(tick);
     };
-    frameRef.current = params.window.requestAnimationFrame(tick);
+    frameRef.current = ownerWindow.requestAnimationFrame(tick);
     return () => {
       if (frameRef.current) {
-        params.window.cancelAnimationFrame(frameRef.current);
+        ownerWindow.cancelAnimationFrame(frameRef.current);
       }
       frameRef.current = null;
     };
-  }, [params]);
+  }, [params.enabled, params.window]);
 };
 
 // hooks/use-measure-toggles.ts
-import { useState as useState5 } from "react";
+import { useState as useState8 } from "react";
 var useMeasureToggles = (options = {}) => {
-  const [enabled, setEnabled] = useState5(options.initialEnabled ?? true);
-  const [altPressed, setAltPressed] = useState5(false);
-  const [toolMode, setToolMode] = useState5(
+  const [enabled, setEnabled] = useState8(options.initialEnabled ?? true);
+  const [altPressed, setAltPressed] = useState8(false);
+  const [toolMode, setToolMode] = useState8(
     options.initialToolMode ?? "none"
   );
-  const [rulersVisible, setRulersVisible] = useState5(
+  const [rulersVisible, setRulersVisible] = useState8(
     options.initialRulersVisible ?? false
   );
   const holdEnabled = false;
-  const multiMeasureEnabled = false;
-  const snapGuidesEnabled = true;
+  const [multiMeasureEnabled, setMultiMeasureEnabled] = useState8(
+    options.initialMultiMeasureEnabled ?? false
+  );
+  const [snapGuidesEnabled, setSnapGuidesEnabled] = useState8(
+    options.initialSnapGuidesEnabled ?? true
+  );
+  const [selectNewGuideEnabled, setSelectNewGuideEnabled] = useState8(
+    options.initialSelectNewGuideEnabled ?? true
+  );
   const guidesEnabled = toolMode === "guides";
-  const snapEnabled = true;
+  const [snapEnabled, setSnapEnabled] = useState8(options.initialSnapEnabled ?? true);
   return {
     enabled,
     setEnabled,
@@ -1518,21 +2739,26 @@ var useMeasureToggles = (options = {}) => {
     guidesEnabled,
     multiMeasureEnabled,
     snapGuidesEnabled,
-    snapEnabled
+    setSnapGuidesEnabled,
+    selectNewGuideEnabled,
+    setSelectNewGuideEnabled,
+    snapEnabled,
+    setSnapEnabled,
+    setMultiMeasureEnabled
   };
 };
 
 // hooks/use-measurement-state.ts
-import { useState as useState6 } from "react";
+import { useState as useState9 } from "react";
 var useMeasurementState = (options = {}) => {
-  const [activeMeasurement, setActiveMeasurement] = useState6(options.initialActiveMeasurement ?? null);
-  const [measurements, setMeasurements] = useState6(
+  const [activeMeasurement, setActiveMeasurement] = useState9(options.initialActiveMeasurement ?? null);
+  const [measurements, setMeasurements] = useState9(
     options.initialMeasurements ?? []
   );
-  const [selectedMeasurement, setSelectedMeasurement] = useState6(null);
-  const [selectedMeasurements, setSelectedMeasurements] = useState6([]);
-  const [hoverRect, setHoverRect] = useState6(null);
-  const [heldDistances, setHeldDistances] = useState6(
+  const [selectedMeasurement, setSelectedMeasurement] = useState9(null);
+  const [selectedMeasurements, setSelectedMeasurements] = useState9([]);
+  const [hoverRect, setHoverRect] = useState9(null);
+  const [heldDistances, setHeldDistances] = useState9(
     options.initialHeldDistances ?? []
   );
   return {
@@ -2022,7 +3248,7 @@ var useMeasurerDerived = ({
 };
 
 // hooks/use-measurer-history.ts
-import { useCallback as useCallback3, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useRef as useRef8 } from "react";
 var HISTORY_LIMIT = 50;
 var useMeasurerHistory = ({
   toggles,
@@ -2068,10 +3294,10 @@ var useMeasurerHistory = ({
     setSelectedElement,
     clearSelectionRect
   } = transient;
-  const historyRef = useRef5([]);
-  const futureRef = useRef5([]);
-  const historySignatureRef = useRef5(null);
-  const captureSnapshot = useCallback3(() => {
+  const historyRef = useRef8([]);
+  const futureRef = useRef8([]);
+  const historySignatureRef = useRef8(null);
+  const captureSnapshot = useCallback5(() => {
     return {
       enabled,
       toolMode,
@@ -2098,7 +3324,7 @@ var useMeasurerHistory = ({
     selectedMeasurements,
     toolMode
   ]);
-  const getSnapshotSignature = useCallback3((snapshot) => {
+  const getSnapshotSignature = useCallback5((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",
@@ -2114,7 +3340,7 @@ var useMeasurerHistory = ({
       snapshot.draggingGuideId ?? ""
     ].join("|");
   }, []);
-  const recordSnapshot = useCallback3(() => {
+  const recordSnapshot = useCallback5(() => {
     const snapshot = captureSnapshot();
     const signature = getSnapshotSignature(snapshot);
     if (historySignatureRef.current === signature) return;
@@ -2125,7 +3351,7 @@ var useMeasurerHistory = ({
       historyRef.current.shift();
     }
   }, [captureSnapshot, getSnapshotSignature]);
-  const restoreSnapshot = useCallback3(
+  const restoreSnapshot = useCallback5(
     (snapshot) => {
       setEnabled(snapshot.enabled);
       setToolMode(snapshot.toolMode);
@@ -2170,7 +3396,7 @@ var useMeasurerHistory = ({
       setHoverElement
     ]
   );
-  const undo = useCallback3(() => {
+  const undo = useCallback5(() => {
     const previousSnapshot = historyRef.current.pop();
     if (!previousSnapshot) return;
     const currentSnapshot = captureSnapshot();
@@ -2181,7 +3407,7 @@ var useMeasurerHistory = ({
     historySignatureRef.current = null;
     restoreSnapshot(previousSnapshot);
   }, [captureSnapshot, restoreSnapshot]);
-  const redo = useCallback3(() => {
+  const redo = useCallback5(() => {
     const nextSnapshot = futureRef.current.pop();
     if (!nextSnapshot) return;
     historyRef.current.push(captureSnapshot());
@@ -2191,7 +3417,7 @@ var useMeasurerHistory = ({
     historySignatureRef.current = null;
     restoreSnapshot(nextSnapshot);
   }, [captureSnapshot, restoreSnapshot]);
-  const setToolModeWithHistory = useCallback3(
+  const setToolModeWithHistory = useCallback5(
     (value) => {
       setToolMode((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -2202,7 +3428,7 @@ var useMeasurerHistory = ({
     },
     [recordSnapshot, setToolMode]
   );
-  const setGuideOrientationWithHistory = useCallback3(
+  const setGuideOrientationWithHistory = useCallback5(
     (value) => {
       setGuideOrientation((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -2213,7 +3439,7 @@ var useMeasurerHistory = ({
     },
     [recordSnapshot, setGuideOrientation]
   );
-  const setEnabledWithHistory = useCallback3(
+  const setEnabledWithHistory = useCallback5(
     (value) => {
       setEnabled((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -2224,7 +3450,7 @@ var useMeasurerHistory = ({
     },
     [recordSnapshot, setEnabled]
   );
-  const createActionCommit = useCallback3(() => {
+  const createActionCommit = useCallback5(() => {
     let committed = false;
     return () => {
       if (committed) return;
@@ -2244,35 +3470,35 @@ var useMeasurerHistory = ({
 };
 
 // hooks/use-measurer-local-state.ts
-import { useCallback as useCallback4, useState as useState7 } from "react";
+import { useCallback as useCallback6, useState as useState10 } from "react";
 var useMeasurerLocalState = ({
   selectedElementRef,
   hoverElementRef,
   selectionRectRef
 }) => {
-  const [selectionOriginRect, setSelectionOriginRect] = useState7(
+  const [selectionOriginRect, setSelectionOriginRect] = useState10(
     null
   );
-  const [hoverPointer, setHoverPointer] = useState7(null);
-  const [hoverElement, setHoverElementState] = useState7(
+  const [hoverPointer, setHoverPointer] = useState10(null);
+  const [hoverElement, setHoverElementState] = useState10(
     null
   );
-  const [selectedElement, setSelectedElementState] = useState7(null);
-  const setSelectedElement = useCallback4(
+  const [selectedElement, setSelectedElementState] = useState10(null);
+  const setSelectedElement = useCallback6(
     (element) => {
       selectedElementRef.current = element;
       setSelectedElementState(element);
     },
     [selectedElementRef]
   );
-  const setHoverElement = useCallback4(
+  const setHoverElement = useCallback6(
     (element) => {
       hoverElementRef.current = element;
       setHoverElementState(element);
     },
     [hoverElementRef]
   );
-  const clearSelectionRect = useCallback4(() => {
+  const clearSelectionRect = useCallback6(() => {
     selectionRectRef.current = null;
     setSelectionOriginRect(null);
   }, [selectionRectRef]);
@@ -2290,7 +3516,7 @@ var useMeasurerLocalState = ({
 };
 
 // hooks/use-measurer-pointer.ts
-import { useCallback as useCallback5, useEffect as useEffect3, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef9 } from "react";
 
 // core/targets.ts
 var pickMultiTargets = (selectionRect, items) => {
@@ -2493,10 +3719,12 @@ var useMeasurerPointer = ({
   clearGuideDragHold,
   scheduleGuideDragHold,
   enabled,
+  settingsOpen,
   toolMode,
   guidesEnabled,
   snapEnabled,
   snapGuidesEnabled,
+  selectNewGuideEnabled,
   altPressed,
   guideOrientation,
   hoverHighlightEnabled,
@@ -2529,24 +3757,24 @@ var useMeasurerPointer = ({
   setHoverPointer,
   clearSelectionRect
 }) => {
-  const hoverFrameRef = useRef6(null);
-  const hoverPointRef = useRef6(null);
-  const selectionCacheRef = useRef6({
+  const hoverFrameRef = useRef9(null);
+  const hoverPointRef = useRef9(null);
+  const selectionCacheRef = useRef9({
     key: "",
     entries: [],
     overlayNode: null,
     frame: -1
   });
-  const shiftDragRef = useRef6(false);
-  const shiftToggleElementRef = useRef6(null);
-  useEffect3(() => {
+  const shiftDragRef = useRef9(false);
+  const shiftToggleElementRef = useRef9(null);
+  useEffect5(() => {
     return () => {
       if (hoverFrameRef.current) {
         window2.cancelAnimationFrame(hoverFrameRef.current);
       }
     };
   }, []);
-  const updateHoverTarget = useCallback5(
+  const updateHoverTarget = useCallback7(
     (point) => {
       const target = getTargetElement(point, overlayRef.current, document2);
       if (target) {
@@ -2565,18 +3793,19 @@ var useMeasurerPointer = ({
     },
     [document2, overlayRef, setHoverElement, setHoverRect]
   );
-  const updateHoverElement = useCallback5(
+  const updateHoverElement = useCallback7(
     (point) => {
       const target = getTargetElement(point, overlayRef.current, document2);
       setHoverElement(target);
     },
     [document2, overlayRef, setHoverElement]
   );
-  const handlePointerDown = useCallback5(
+  const handlePointerDown = useCallback7(
     (event) => {
       const commit = createActionCommit();
       const toolbarNode = toolbarRef.current;
       if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (settingsOpen) return;
       if (!enabled || event.button !== 0) return;
       if (toolMode === "none") return;
       clearSelectionRect();
@@ -2601,7 +3830,11 @@ var useMeasurerPointer = ({
         return;
       }
       if (guidesEnabled) {
+        event.preventDefault();
         commit();
+        setStart(null);
+        setEnd(null);
+        setIsDragging(false);
         const position = getSnapGuidePosition({
           orientation: guideOrientation,
           point,
@@ -2612,7 +3845,7 @@ var useMeasurerPointer = ({
           document: document2
         });
         const id = createId();
-        setSelectedGuideIds([id]);
+        setSelectedGuideIds(selectNewGuideEnabled ? [id] : []);
         setGuides((prev) => [
           ...prev,
           { id, orientation: guideOrientation, position }
@@ -2637,12 +3870,14 @@ var useMeasurerPointer = ({
       draggingGuideId,
       document2,
       enabled,
+      settingsOpen,
       guideOrientation,
       guides,
       guidesEnabled,
       optionPairOverlay,
       overlayRef,
       scheduleGuideDragHold,
+      selectNewGuideEnabled,
       selectedGuideIds.length,
       selectedMeasurements,
       setDraggingGuideId,
@@ -2657,10 +3892,11 @@ var useMeasurerPointer = ({
       toolbarRef
     ]
   );
-  const handlePointerMove = useCallback5(
+  const handlePointerMove = useCallback7(
     (event) => {
       const toolbarNode = toolbarRef.current;
       if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (settingsOpen) return;
       if (!enabled) return;
       if (toolMode === "none") {
         if (hoverHighlightEnabled) {
@@ -2679,7 +3915,7 @@ var useMeasurerPointer = ({
       if (!hoverFrameRef.current) {
         hoverFrameRef.current = window2.requestAnimationFrame(() => {
           const latest = hoverPointRef.current;
-          if (latest && !draggingGuideId) {
+          if (latest && !draggingGuideId && !guidesEnabled) {
             if (hoverHighlightEnabled) {
               updateHoverTarget(latest);
             } else {
@@ -2729,6 +3965,7 @@ var useMeasurerPointer = ({
           )
         );
       }
+      if (guidesEnabled) return;
       if (!start) return;
       setEnd(point);
       if (!isDragging) {
@@ -2744,6 +3981,7 @@ var useMeasurerPointer = ({
       altPressed,
       draggingGuideId,
       enabled,
+      settingsOpen,
       hoverHighlightEnabled,
       guides,
       guidesEnabled,
@@ -2766,13 +4004,20 @@ var useMeasurerPointer = ({
       updateHoverTarget
     ]
   );
-  const handlePointerUp = useCallback5(
+  const handlePointerUp = useCallback7(
     (event) => {
       const commit = createActionCommit();
       const toolbarNode = toolbarRef.current;
       if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (settingsOpen) return;
       if (!enabled) return;
       clearGuideDragHold();
+      if (guidesEnabled) {
+        setStart(null);
+        setEnd(null);
+        setIsDragging(false);
+        return;
+      }
       if (toolMode === "none") {
         setStart(null);
         setEnd(null);
@@ -2943,7 +4188,9 @@ var useMeasurerPointer = ({
       createActionCommit,
       draggingGuideId,
       enabled,
+      settingsOpen,
       end,
+      guidesEnabled,
       hoverHighlightEnabled,
       isDragging,
       overlayRef,
@@ -2966,7 +4213,7 @@ var useMeasurerPointer = ({
       toolbarRef
     ]
   );
-  const handlePointerLeave = useCallback5(() => {
+  const handlePointerLeave = useCallback7(() => {
     clearGuideDragHold();
     setStart(null);
     setEnd(null);
@@ -2990,54 +4237,58 @@ var useMeasurerPointer = ({
 };
 
 // hooks/use-overlay-refs.ts
-import { useRef as useRef7 } from "react";
+import { useRef as useRef10 } from "react";
 var useOverlayRefs = () => {
-  const overlayRef = useRef7(null);
-  const selectedElementRef = useRef7(null);
-  const hoverElementRef = useRef7(null);
+  const overlayRef = useRef10(null);
+  const selectedElementRef = useRef10(null);
+  const hoverElementRef = useRef10(null);
   return { overlayRef, selectedElementRef, hoverElementRef };
 };
 
 // hooks/use-resize-sync.ts
-import { useEffect as useEffect4, useRef as useRef8 } from "react";
+import { useEffect as useEffect6, useRef as useRef11 } from "react";
 var useResizeSync = (params) => {
-  const resizeFrameRef = useRef8(null);
-  const viewportRef = useRef8(getViewportSize(params.window));
-  useEffect4(() => {
+  const paramsRef = useRef11(params);
+  paramsRef.current = params;
+  const resizeFrameRef = useRef11(null);
+  const viewportRef = useRef11(getViewportSize(params.window));
+  useEffect6(() => {
+    const ownerWindow = params.window;
     const handleResize = () => {
+      const current = paramsRef.current;
       if (resizeFrameRef.current) {
-        params.window.cancelAnimationFrame(resizeFrameRef.current);
+        ownerWindow.cancelAnimationFrame(resizeFrameRef.current);
       }
-      resizeFrameRef.current = params.window.requestAnimationFrame(() => {
-        const viewport = getViewportSize(params.window);
+      resizeFrameRef.current = ownerWindow.requestAnimationFrame(() => {
+        const viewport = getViewportSize(ownerWindow);
         const previousViewport = viewportRef.current;
-        params.setMeasurements(
+        current.setMeasurements(
           (prev) => prev.map(
-            (measurement) => updateMeasurementForResize(measurement, viewport, params.document)
+            (measurement) => updateMeasurementForResize(measurement, viewport, current.document)
           )
         );
-        params.setActiveMeasurement(
-          (prev) => prev ? updateMeasurementForResize(prev, viewport, params.document) : prev
+        current.setActiveMeasurement(
+          (prev) => prev ? updateMeasurementForResize(prev, viewport, current.document) : prev
         );
-        params.setHeldDistances(
+        current.setHeldDistances(
           (prev) => prev.map(
             (distance) => updateDistanceForResize(
               distance,
               viewport,
-              params.document,
-              params.window
+              current.document,
+              ownerWindow
             )
           )
         );
-        if (params.selectedElementRef.current && params.document.contains(params.selectedElementRef.current)) {
-          params.setSelectedMeasurement(
-            getInspectMeasurement(params.selectedElementRef.current, params.window)
+        if (current.selectedElementRef.current && current.document.contains(current.selectedElementRef.current)) {
+          current.setSelectedMeasurement(
+            getInspectMeasurement(current.selectedElementRef.current, ownerWindow)
           );
         }
         if (previousViewport.width > 0 && previousViewport.height > 0) {
           const scaleX = viewport.width / previousViewport.width;
           const scaleY = viewport.height / previousViewport.height;
-          params.setGuides(
+          current.setGuides(
             (prev) => prev.map(
               (guide) => guide.orientation === "vertical" ? { ...guide, position: guide.position * scaleX } : { ...guide, position: guide.position * scaleY }
             )
@@ -3046,27 +4297,27 @@ var useResizeSync = (params) => {
         viewportRef.current = viewport;
       });
     };
-    params.window.addEventListener("resize", handleResize);
+    ownerWindow.addEventListener("resize", handleResize);
     return () => {
       if (resizeFrameRef.current) {
-        params.window.cancelAnimationFrame(resizeFrameRef.current);
+        ownerWindow.cancelAnimationFrame(resizeFrameRef.current);
       }
-      params.window.removeEventListener("resize", handleResize);
+      ownerWindow.removeEventListener("resize", handleResize);
     };
-  }, [params]);
+  }, [params.window]);
 };
 
 // render/measurer-overlay.tsx
 import { memo as memo6 } from "react";
 
 // components/measure-tag.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function MeasureTag({
   children,
   className = "",
   style
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn(
@@ -3081,20 +4332,20 @@ function MeasureTag({
 
 // components/measurement-box.tsx
 import { memo as memo3 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var formatValue2 = (value) => Math.round(value);
 var MeasurementBox = memo3(function MeasurementBox2({
   measurement,
   transitionMs,
   labelOffset,
-  edgeVisibility
+  edgeVisibility,
+  outlineColor,
+  fillColor
 }) {
   const edges = edgeVisibility ?? { top: true, right: true, bottom: true, left: true };
   const displayRect = 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: "msr:pointer-events-none", children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs7("div", { className: "msr:pointer-events-none", children: [
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         className: "msr:absolute",
@@ -3107,28 +4358,28 @@ var MeasurementBox = memo3(function MeasurementBox2({
           transition: `left ${transitionMs}ms ease, top ${transitionMs}ms ease, width ${transitionMs}ms ease, height ${transitionMs}ms ease`
         },
         children: [
-          edges.top ? /* @__PURE__ */ jsx5(
+          edges.top ? /* @__PURE__ */ jsx8(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.right ? /* @__PURE__ */ jsx5(
+          edges.right ? /* @__PURE__ */ jsx8(
             "div",
             {
               className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.bottom ? /* @__PURE__ */ jsx5(
+          edges.bottom ? /* @__PURE__ */ jsx8(
             "div",
             {
               className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.left ? /* @__PURE__ */ jsx5(
+          edges.left ? /* @__PURE__ */ jsx8(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3138,7 +4389,7 @@ var MeasurementBox = memo3(function MeasurementBox2({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs7(
       MeasureTag,
       {
         className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3159,20 +4410,20 @@ var MeasurementBox = memo3(function MeasurementBox2({
 
 // components/selected-measurement-box.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var formatValue3 = (value) => Math.round(value);
 var SelectedMeasurementBox = memo4(function SelectedMeasurementBox2({
   measurement,
   transitionMs,
   labelOffset,
-  edgeVisibility
+  edgeVisibility,
+  outlineColor,
+  fillColor
 }) {
   const edges = edgeVisibility ?? { top: true, right: true, bottom: true, left: true };
   const displayRect = 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__ */ jsxs4("div", { className: "msr:pointer-events-none", children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs8("div", { className: "msr:pointer-events-none", "data-mesurer-selected-measurement": "true", children: [
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         className: "msr:absolute",
@@ -3185,28 +4436,28 @@ var SelectedMeasurementBox = memo4(function SelectedMeasurementBox2({
           transition: `left ${transitionMs}ms ease, top ${transitionMs}ms ease, width ${transitionMs}ms ease, height ${transitionMs}ms ease`
         },
         children: [
-          edges.top ? /* @__PURE__ */ jsx6(
+          edges.top ? /* @__PURE__ */ jsx9(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.right ? /* @__PURE__ */ jsx6(
+          edges.right ? /* @__PURE__ */ jsx9(
             "div",
             {
               className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.bottom ? /* @__PURE__ */ jsx6(
+          edges.bottom ? /* @__PURE__ */ jsx9(
             "div",
             {
               className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.left ? /* @__PURE__ */ jsx6(
+          edges.left ? /* @__PURE__ */ jsx9(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3216,7 +4467,7 @@ var SelectedMeasurementBox = memo4(function SelectedMeasurementBox2({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs8(
       MeasureTag,
       {
         className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3237,13 +4488,13 @@ var SelectedMeasurementBox = memo4(function SelectedMeasurementBox2({
 
 // render/distance-overlay-item.tsx
 import { memo as memo5 } from "react";
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
   distance,
   labelOffset,
   onRemove
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: onRemove ? "msr:pointer-events-auto" : "msr:pointer-events-none",
@@ -3252,7 +4503,7 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
         onRemove(distance.id);
       } : void 0,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
@@ -3264,7 +4515,7 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
             }
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
@@ -3277,7 +4528,7 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
           }
         ),
         distance.connectors.map(
-          (connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ jsx7(
+          (connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ jsx10(
             "div",
             {
               className: "msr:absolute msr:border-l msr:border-dashed msr:border-[#2563eb]/70",
@@ -3288,7 +4539,7 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
               }
             },
             `${distance.id}-connector-${index}`
-          ) : /* @__PURE__ */ jsx7(
+          ) : /* @__PURE__ */ jsx10(
             "div",
             {
               className: "msr:absolute msr:border-t msr:border-dashed msr:border-[#2563eb]/70",
@@ -3301,8 +4552,8 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
             `${distance.id}-connector-${index}`
           )
         ),
-        distance.horizontal && distance.horizontal.value > 0 ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+        distance.horizontal && distance.horizontal.value > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx10(
             "div",
             {
               className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
@@ -3313,7 +4564,7 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
               }
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx10(
             MeasureTag,
             {
               className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3325,8 +4576,8 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
             }
           )
         ] }) : null,
-        distance.vertical && distance.vertical.value > 0 ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+        distance.vertical && distance.vertical.value > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx10(
             "div",
             {
               className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
@@ -3337,7 +4588,7 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
               }
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx10(
             MeasureTag,
             {
               className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
@@ -3355,9 +4606,10 @@ var DistanceOverlayItem = memo5(function DistanceOverlayItem2({
 });
 
 // render/measurer-overlay.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var MeasurerOverlay = memo6(function MeasurerOverlay2({
   enabled,
+  interactive = true,
   toolMode,
   guidePointerEvents,
   guidesEnabled,
@@ -3387,6 +4639,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
   guideColorActive,
   guideColorHover,
   guideColorDefault,
+  guideStyle,
   onPointerDown,
   onPointerMove,
   onPointerUp,
@@ -3397,30 +4650,32 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
   onGuidePointerCancel
 }) {
   const overlayVisible = enabled;
-  const overlayInteractive = overlayVisible && toolMode !== "none" && toolMode !== "text-inspector" && toolMode !== "xray" && toolMode !== "rulers";
+  const overlayInteractive = interactive && overlayVisible && toolMode !== "none" && toolMode !== "text-inspector" && toolMode !== "xray" && toolMode !== "rulers";
   const selectionVisible = toolMode === "select";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
-      className: `msr:absolute msr:inset-0 ${overlayVisible ? `msr:pointer-events-auto ${guidesEnabled ? hoverGuide || draggingGuideId ? "msr:cursor-default" : "msr:cursor-crosshair" : "msr:cursor-default"} msr:opacity-100` : "msr:pointer-events-none msr:opacity-0"}`,
+      className: `msr:absolute msr:inset-0 msr:select-none ${overlayVisible ? `msr:pointer-events-auto ${guidesEnabled ? hoverGuide || draggingGuideId ? "msr:cursor-default" : "msr:cursor-crosshair" : "msr:cursor-default"} msr:opacity-100` : "msr:pointer-events-none msr:opacity-0"}`,
       style: { pointerEvents: overlayInteractive ? "auto" : "none" },
       onPointerDown,
       onPointerMove,
       onPointerUp,
       onPointerLeave,
       children: [
-        selectionVisible ? displayedMeasurements.map((measurement, index) => /* @__PURE__ */ jsx8(
+        selectionVisible ? displayedMeasurements.map((measurement, index) => /* @__PURE__ */ jsx11(
           MeasurementBox,
           {
             measurement,
             transitionMs: MEASURE_TRANSITION_MS,
             labelOffset: MEASURE_LABEL_OFFSET,
-            edgeVisibility: measurementEdgeVisibility[index]
+            edgeVisibility: measurementEdgeVisibility[index],
+            outlineColor,
+            fillColor
           },
           measurement.id
         )) : null,
-        selectionVisible && activeRect && isDragging ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsxs6(
+        selectionVisible && activeRect && isDragging ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+          /* @__PURE__ */ jsxs10(
             "div",
             {
               className: "msr:pointer-events-none msr:absolute",
@@ -3432,28 +4687,28 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
                 backgroundColor: fillColor
               },
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   "div",
                   {
                     className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
                     style: { backgroundColor: outlineColor }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   "div",
                   {
                     className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
                     style: { backgroundColor: outlineColor }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   "div",
                   {
                     className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
                     style: { backgroundColor: outlineColor }
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   "div",
                   {
                     className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3463,7 +4718,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs10(
             MeasureTag,
             {
               className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3479,7 +4734,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
             }
           )
         ] }) : null,
-        selectionVisible && hoverRectToShow ? /* @__PURE__ */ jsxs6(
+        selectionVisible && hoverRectToShow ? /* @__PURE__ */ jsxs10(
           "div",
           {
             className: "msr:pointer-events-none msr:absolute",
@@ -3491,28 +4746,28 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               backgroundColor: fillColor
             },
             children: [
-              hoverEdgeVisibility?.top ? /* @__PURE__ */ jsx8(
+              hoverEdgeVisibility?.top ? /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
                   style: { backgroundColor: outlineColor }
                 }
               ) : null,
-              hoverEdgeVisibility?.right ? /* @__PURE__ */ jsx8(
+              hoverEdgeVisibility?.right ? /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
                   style: { backgroundColor: outlineColor }
                 }
               ) : null,
-              hoverEdgeVisibility?.bottom ? /* @__PURE__ */ jsx8(
+              hoverEdgeVisibility?.bottom ? /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
                   style: { backgroundColor: outlineColor }
                 }
               ) : null,
-              hoverEdgeVisibility?.left ? /* @__PURE__ */ jsx8(
+              hoverEdgeVisibility?.left ? /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3522,7 +4777,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
             ]
           }
         ) : null,
-        guidesEnabled && guidePreview ? /* @__PURE__ */ jsx8(
+        interactive && guidesEnabled && guidePreview ? /* @__PURE__ */ jsx11(
           "div",
           {
             className: "msr:pointer-events-none msr:absolute",
@@ -3537,7 +4792,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               height: GUIDE_HITBOX_SIZE,
               width: "100%"
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx11(
               "div",
               {
                 className: "msr:absolute",
@@ -3558,17 +4813,19 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
             )
           }
         ) : null,
-        selectionVisible ? displayedSelectedMeasurements.map((measurement, index) => /* @__PURE__ */ jsx8(
+        selectionVisible ? displayedSelectedMeasurements.map((measurement, index) => /* @__PURE__ */ jsx11(
           SelectedMeasurementBox,
           {
             measurement,
             transitionMs: MEASURE_TRANSITION_MS,
             labelOffset: MEASURE_LABEL_OFFSET,
-            edgeVisibility: selectedEdgeVisibility[index]
+            edgeVisibility: selectedEdgeVisibility[index],
+            outlineColor,
+            fillColor
           },
           measurement.id
         )) : null,
-        heldDistances.map((distance) => /* @__PURE__ */ jsx8(
+        heldDistances.map((distance) => /* @__PURE__ */ jsx11(
           DistanceOverlayItem,
           {
             distance,
@@ -3577,7 +4834,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
           },
           `held-${distance.id}`
         )),
-        selectionVisible && altPressed && optionPairOverlay ? /* @__PURE__ */ jsx8(
+        selectionVisible && altPressed && optionPairOverlay ? /* @__PURE__ */ jsx11(
           DistanceOverlayItem,
           {
             distance: optionPairOverlay,
@@ -3585,7 +4842,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
           },
           `option-${optionPairOverlay.id}`
         ) : null,
-        guidesEnabled && altPressed && guideDistanceOverlay ? /* @__PURE__ */ jsx8(
+        interactive && guidesEnabled && altPressed && guideDistanceOverlay ? /* @__PURE__ */ jsx11(
           DistanceOverlayItem,
           {
             distance: guideDistanceOverlay,
@@ -3593,9 +4850,9 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
           },
           `guide-preview-${guideDistanceOverlay.id}`
         ) : null,
-        selectionVisible && altPressed && optionContainerLines ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          optionContainerLines.top.value > 0 ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-            /* @__PURE__ */ jsx8(
+        selectionVisible && altPressed && optionContainerLines ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+          optionContainerLines.top.value > 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+            /* @__PURE__ */ jsx11(
               "div",
               {
                 className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
@@ -3606,7 +4863,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx11(
               MeasureTag,
               {
                 className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
@@ -3618,8 +4875,8 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               }
             )
           ] }) : null,
-          optionContainerLines.bottom.value > 0 ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-            /* @__PURE__ */ jsx8(
+          optionContainerLines.bottom.value > 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+            /* @__PURE__ */ jsx11(
               "div",
               {
                 className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
@@ -3630,7 +4887,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx11(
               MeasureTag,
               {
                 className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
@@ -3642,8 +4899,8 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               }
             )
           ] }) : null,
-          optionContainerLines.left.value > 0 ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-            /* @__PURE__ */ jsx8(
+          optionContainerLines.left.value > 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+            /* @__PURE__ */ jsx11(
               "div",
               {
                 className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
@@ -3654,7 +4911,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx11(
               MeasureTag,
               {
                 className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3666,8 +4923,8 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               }
             )
           ] }) : null,
-          optionContainerLines.right.value > 0 ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-            /* @__PURE__ */ jsx8(
+          optionContainerLines.right.value > 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+            /* @__PURE__ */ jsx11(
               "div",
               {
                 className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
@@ -3678,7 +4935,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx11(
               MeasureTag,
               {
                 className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3694,9 +4951,12 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
         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__ */ jsx8(
+          const strokeWidth = Math.max(guideStyle.width, isSelected || isHovered ? 2 : guideStyle.width);
+          const isSolid = guideStyle.pattern === "solid";
+          const backgroundImage = guideStyle.pattern === "solid" ? void 0 : guideStyle.pattern === "dotted" ? `radial-gradient(circle, ${strokeColor} 0 ${strokeWidth / 2}px, transparent ${strokeWidth / 2 + 0.5}px)` : `repeating-linear-gradient(${guide.orientation === "vertical" ? "to bottom" : "to right"}, ${strokeColor} 0 ${guideStyle.dashLength}px, transparent ${guideStyle.dashLength}px ${guideStyle.dashLength + guideStyle.gap}px)`;
+          const backgroundSize = guideStyle.pattern === "dotted" ? guide.orientation === "vertical" ? `${strokeWidth}px ${guideStyle.dashLength + guideStyle.gap}px` : `${guideStyle.dashLength + guideStyle.gap}px ${strokeWidth}px` : void 0;
+          return /* @__PURE__ */ jsx11(
             "div",
             {
               className: "msr:absolute",
@@ -3717,7 +4977,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
               onPointerDown: (event) => onGuidePointerDown(guide, event),
               onPointerUp: (event) => onGuidePointerUp(guide, event),
               onPointerCancel: (event) => onGuidePointerCancel(guide, event),
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "msr:absolute",
@@ -3726,13 +4986,19 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
                     top: 0,
                     width: strokeWidth,
                     height: "100%",
-                    backgroundColor: strokeColor
+                    backgroundColor: isSolid ? strokeColor : "transparent",
+                    backgroundImage,
+                    backgroundSize,
+                    opacity: guideStyle.opacity
                   } : {
                     top: GUIDE_HITBOX_SIZE / 2 - 1,
                     left: 0,
                     height: strokeWidth,
                     width: "100%",
-                    backgroundColor: strokeColor
+                    backgroundColor: isSolid ? strokeColor : "transparent",
+                    backgroundImage,
+                    backgroundSize,
+                    opacity: guideStyle.opacity
                   }
                 }
               )
@@ -4253,6 +5519,7 @@ var createTextInspector = (options = {}, legacy = false) => {
     if (!element) return false;
     for (let node = element; node; node = node.parentElement) {
       if (node.classList.contains("mesurer-toolbar-surface")) return true;
+      if (node.hasAttribute("data-mesurer-inspector-ui")) return true;
     }
     return false;
   };
@@ -4550,7 +5817,7 @@ var createTextInspector = (options = {}, legacy = false) => {
   const isInspectorUIEvent = (event) => event.composedPath().some(
     (node) => node instanceof HTMLElementConstructor && (() => {
       const element = node;
-      return element.id === OVERLAY_ID || element.classList.contains("mesurer-ti-card") || element.classList.contains("mesurer-ti-box") || element.classList.contains("mesurer-ti-close") || element.classList.contains("mesurer-toolbar-surface");
+      return element.id === OVERLAY_ID || element.classList.contains("mesurer-ti-card") || element.classList.contains("mesurer-ti-box") || element.classList.contains("mesurer-ti-close") || element.classList.contains("mesurer-toolbar-surface") || element.hasAttribute("data-mesurer-inspector-ui");
     })()
   );
   const onClick = (event) => {
@@ -4633,8 +5900,226 @@ var createTextInspector = (options = {}, legacy = false) => {
 };
 var TextInspector = createTextInspector({}, true);
 
+// core/persistence.ts
+var MESURER_STORAGE_VERSION = 2;
+var DEFAULT_GUIDE_STYLE = {
+  opacity: 1,
+  width: 1,
+  pattern: "solid",
+  dashLength: 6,
+  gap: 4
+};
+var DEFAULT_RULER_SETTINGS = {
+  opacity: 1,
+  edgeReveal: false
+};
+var isFormat = (value) => value === "hex" || value === "rgb" || value === "hsl" || value === "oklch";
+var normalizeGuideStyle = (value) => {
+  if (!value || typeof value !== "object") return void 0;
+  const input = value;
+  return {
+    opacity: typeof input.opacity === "number" ? Math.min(1, Math.max(0, input.opacity)) : DEFAULT_GUIDE_STYLE.opacity,
+    width: typeof input.width === "number" ? Math.min(4, Math.max(1, input.width)) : DEFAULT_GUIDE_STYLE.width,
+    pattern: input.pattern === "dashed" || input.pattern === "dotted" ? input.pattern : DEFAULT_GUIDE_STYLE.pattern,
+    dashLength: typeof input.dashLength === "number" ? Math.min(24, Math.max(2, input.dashLength)) : DEFAULT_GUIDE_STYLE.dashLength,
+    gap: typeof input.gap === "number" ? Math.min(24, Math.max(0, input.gap)) : DEFAULT_GUIDE_STYLE.gap
+  };
+};
+var normalizeRulerSettings = (value) => {
+  if (!value || typeof value !== "object") return void 0;
+  const input = value;
+  return {
+    opacity: typeof input.opacity === "number" ? Math.min(1, Math.max(0.2, input.opacity)) : DEFAULT_RULER_SETTINGS.opacity,
+    edgeReveal: typeof input.edgeReveal === "boolean" ? input.edgeReveal : DEFAULT_RULER_SETTINGS.edgeReveal
+  };
+};
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var isRect = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const rect = value;
+  return isFiniteNumber(rect.left) && isFiniteNumber(rect.top) && isFiniteNumber(rect.width) && rect.width >= 0 && isFiniteNumber(rect.height) && rect.height >= 0;
+};
+var isNormalizedRect = (value) => isRect(value);
+var isMeasurement = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const measurement = value;
+  return typeof measurement.id === "string" && isRect(measurement.rect) && isNormalizedRect(measurement.normalizedRect) && isFiniteNumber(measurement.deltaX) && isFiniteNumber(measurement.deltaY) && (measurement.snapped === void 0 || typeof measurement.snapped === "boolean");
+};
+var isGuide = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const guide = value;
+  return typeof guide.id === "string" && (guide.orientation === "vertical" || guide.orientation === "horizontal") && isFiniteNumber(guide.position);
+};
+var isDistanceOverlay = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const distance = value;
+  const isDistanceLine = (line) => {
+    if (line === null) return true;
+    if (!line || typeof line !== "object") return false;
+    const item = line;
+    return isFiniteNumber(item.x1) && isFiniteNumber(item.x2) && isFiniteNumber(item.y) && isFiniteNumber(item.value);
+  };
+  const isVerticalLine = (line) => {
+    if (line === null) return true;
+    if (!line || typeof line !== "object") return false;
+    const item = line;
+    return isFiniteNumber(item.y1) && isFiniteNumber(item.y2) && isFiniteNumber(item.x) && isFiniteNumber(item.value);
+  };
+  return typeof distance.id === "string" && isRect(distance.rectA) && isRect(distance.rectB) && isNormalizedRect(distance.normalizedRectA) && isNormalizedRect(distance.normalizedRectB) && isDistanceLine(distance.horizontal) && isVerticalLine(distance.vertical) && Array.isArray(distance.connectors) && distance.connectors.every((connector) => {
+    if (!connector || typeof connector !== "object") return false;
+    const item = connector;
+    return isFiniteNumber(item.x1) && isFiniteNumber(item.y1) && isFiniteNumber(item.x2) && isFiniteNumber(item.y2);
+  });
+};
+var normalizeStoredSettings = (value) => {
+  if (!value || typeof value !== "object") return {};
+  const input = value;
+  return {
+    ...typeof input.highlightColor === "string" ? { highlightColor: input.highlightColor } : {},
+    ...typeof input.guideColor === "string" ? { guideColor: input.guideColor } : {},
+    ...typeof input.hoverHighlightEnabled === "boolean" ? { hoverHighlightEnabled: input.hoverHighlightEnabled } : {},
+    ...Array.isArray(input.colorPickerFormats) && input.colorPickerFormats.some(isFormat) ? { colorPickerFormats: input.colorPickerFormats.filter(isFormat) } : {},
+    ...isFormat(input.colorPickerClickFormat) ? { colorPickerClickFormat: input.colorPickerClickFormat } : {},
+    ...typeof input.snapEnabled === "boolean" ? { snapEnabled: input.snapEnabled } : {},
+    ...typeof input.snapGuidesEnabled === "boolean" ? { snapGuidesEnabled: input.snapGuidesEnabled } : {},
+    ...typeof input.selectNewGuideEnabled === "boolean" ? { selectNewGuideEnabled: input.selectNewGuideEnabled } : {},
+    ...typeof input.multiMeasureEnabled === "boolean" ? { multiMeasureEnabled: input.multiMeasureEnabled } : {},
+    ...typeof input.persistOnReload === "boolean" ? { persistOnReload: input.persistOnReload } : {},
+    ...normalizeGuideStyle(input.guideStyle) ? { guideStyle: normalizeGuideStyle(input.guideStyle) } : {},
+    ...normalizeRulerSettings(input.rulerSettings) ? { rulerSettings: normalizeRulerSettings(input.rulerSettings) } : {}
+  };
+};
+var normalizeStoredWorkspace = (value) => {
+  if (!value || typeof value !== "object") return null;
+  const input = value;
+  if (typeof input.enabled !== "boolean" || input.toolMode !== "none" && input.toolMode !== "select" && input.toolMode !== "guides" && input.toolMode !== "text-inspector" && input.toolMode !== "xray" && input.toolMode !== "rulers" || typeof input.rulersVisible !== "boolean" || input.guideOrientation !== "vertical" && input.guideOrientation !== "horizontal" || !Array.isArray(input.guides) || !Array.isArray(input.selectedGuideIds) || !Array.isArray(input.measurements) || !Array.isArray(input.heldDistances)) return null;
+  return {
+    enabled: input.enabled,
+    xrayVisible: typeof input.xrayVisible === "boolean" ? input.xrayVisible : input.toolMode === "xray",
+    toolMode: input.toolMode,
+    rulersVisible: input.rulersVisible,
+    guideOrientation: input.guideOrientation,
+    guides: input.guides.filter(isGuide),
+    selectedGuideIds: input.selectedGuideIds.filter((id) => typeof id === "string"),
+    measurements: input.measurements.filter(isMeasurement),
+    activeMeasurement: isMeasurement(input.activeMeasurement) ? input.activeMeasurement : null,
+    heldDistances: input.heldDistances.filter(isDistanceOverlay)
+  };
+};
+var normalizePersistenceSnapshot = (value) => {
+  if (!value || typeof value !== "object") return null;
+  const record = value;
+  if (record.version !== MESURER_STORAGE_VERSION) return null;
+  return {
+    settings: normalizeStoredSettings(record.settings),
+    workspace: normalizeStoredWorkspace(record.workspace)
+  };
+};
+var migrate = (record) => {
+  if (record.version === MESURER_STORAGE_VERSION) {
+    return normalizePersistenceSnapshot(record);
+  }
+  if (record.version !== 1) return null;
+  return {
+    settings: {},
+    workspace: record.enabled === void 0 || !record.toolMode || !record.guideOrientation || !record.guides || !record.selectedGuideIds || !record.measurements || record.activeMeasurement === void 0 || !record.heldDistances ? null : normalizeStoredWorkspace({
+      enabled: record.enabled,
+      xrayVisible: record.toolMode === "xray",
+      toolMode: record.toolMode,
+      rulersVisible: record.rulersVisible ?? record.toolMode === "rulers",
+      guideOrientation: record.guideOrientation,
+      guides: record.guides,
+      selectedGuideIds: record.selectedGuideIds,
+      measurements: record.measurements,
+      activeMeasurement: record.activeMeasurement,
+      heldDistances: record.heldDistances
+    })
+  };
+};
+var createLocalStoragePersistence = (ownerWindow, workspaceKey, settingsKey = workspaceKey, legacyKey) => {
+  let errorHandler;
+  const readRecord = (key) => {
+    try {
+      const raw = ownerWindow.localStorage.getItem(key);
+      if (!raw) return null;
+      return migrate(JSON.parse(raw));
+    } catch (error) {
+      errorHandler?.(error);
+      return null;
+    }
+  };
+  const read = () => {
+    const legacy = legacyKey ? readRecord(legacyKey) : null;
+    const settingsRecord = readRecord(settingsKey);
+    const workspaceRecord = readRecord(workspaceKey);
+    if (!settingsRecord && !workspaceRecord && !legacy) return null;
+    return {
+      settings: settingsRecord?.settings ?? legacy?.settings ?? {},
+      workspace: workspaceRecord?.workspace ?? legacy?.workspace ?? null
+    };
+  };
+  const writeRecord = (key, snapshot) => {
+    try {
+      ownerWindow.localStorage.setItem(
+        key,
+        JSON.stringify({ version: MESURER_STORAGE_VERSION, ...snapshot })
+      );
+    } catch (error) {
+      errorHandler?.(error);
+    }
+  };
+  return {
+    load: read,
+    saveSettings: (settings) => {
+      if (settingsKey === workspaceKey) {
+        writeRecord(workspaceKey, { settings, workspace: read()?.workspace ?? null });
+        return;
+      }
+      writeRecord(settingsKey, { settings, workspace: null });
+    },
+    saveWorkspace: (workspace) => {
+      if (settingsKey === workspaceKey) {
+        writeRecord(workspaceKey, { settings: read()?.settings ?? {}, workspace });
+        return;
+      }
+      writeRecord(workspaceKey, { settings: {}, workspace });
+    },
+    clearWorkspace: () => {
+      if (settingsKey === workspaceKey) {
+        const current = read();
+        if (current) writeRecord(workspaceKey, { settings: current.settings, workspace: null });
+        return;
+      }
+      writeRecord(workspaceKey, { settings: {}, workspace: null });
+    },
+    clearSettings: () => {
+      if (settingsKey === workspaceKey) {
+        writeRecord(workspaceKey, { settings: {}, workspace: read()?.workspace ?? null });
+        return;
+      }
+      writeRecord(settingsKey, { settings: {}, workspace: null });
+    },
+    setErrorHandler: (handler) => {
+      errorHandler = handler;
+    },
+    subscribe: (listener) => {
+      const handleStorage = (event) => {
+        if (event.key !== settingsKey && event.key !== workspaceKey && event.key !== legacyKey) return;
+        listener(read(), {
+          settings: event.key === settingsKey || event.key === legacyKey || settingsKey === workspaceKey,
+          workspace: event.key === workspaceKey || event.key === legacyKey || settingsKey === workspaceKey
+        });
+      };
+      ownerWindow.addEventListener("storage", handleStorage);
+      return () => {
+        ownerWindow.removeEventListener("storage", handleStorage);
+      };
+    }
+  };
+};
+
 // measurer.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var measurerInstanceCount = 0;
 var XRAY_STYLE_ID = "mesurer-xray-styles";
 var XRAY_STYLES = `
@@ -4646,7 +6131,11 @@ var XRAY_STYLES = `
 .xray-mode .mesurer-root,
 .xray-mode .mesurer-root *,
 .xray-mode .mesurer-toolbar-surface,
-.xray-mode .mesurer-toolbar-surface * {
+.xray-mode .mesurer-toolbar-surface *,
+.xray-mode .mesurer-ti-box,
+.xray-mode .mesurer-ti-card,
+.xray-mode .mesurer-ti-card *,
+.xray-mode .mesurer-ti-close {
   outline: none !important;
 }
 `;
@@ -4666,70 +6155,112 @@ var stripDistance = (distance) => ({
   elementRefA: void 0,
   elementRefB: void 0
 });
+var TAB_ID_KEY = "mesurer:tab-id";
+var SETTINGS_STORAGE_KEY = "mesurer-settings";
+var LEGACY_STORAGE_KEY = "mesurer-state";
+var getTabId = (ownerWindow) => {
+  try {
+    const existing = ownerWindow.sessionStorage.getItem(TAB_ID_KEY);
+    if (existing) return existing;
+    const id = ownerWindow.crypto.randomUUID();
+    ownerWindow.sessionStorage.setItem(TAB_ID_KEY, id);
+    return id;
+  } catch {
+    return "session";
+  }
+};
+var sanitizeStoredSettings = (ownerWindow, settings) => {
+  const supportsColor = (value) => value !== void 0 && ownerWindow.CSS?.supports("color", value) === true;
+  return {
+    ...settings,
+    ...supportsColor(settings.highlightColor) ? {} : { highlightColor: void 0 },
+    ...supportsColor(settings.guideColor) ? {} : { guideColor: void 0 }
+  };
+};
 function MeasurerClient({
   highlightColor,
   guideColor,
   hoverHighlightEnabled,
   persistOnReload,
   portalTarget,
-  persistKey
+  persistKey,
+  colorPickerFormats,
+  colorPickerClickFormat,
+  snapEnabled: snapEnabledDefault,
+  snapGuidesEnabled: snapGuidesEnabledDefault,
+  selectNewGuideEnabled: selectNewGuideEnabledDefault,
+  multiMeasureEnabled: multiMeasureEnabledDefault,
+  guideStyle: guideStyleDefault,
+  rulerSettings: rulerSettingsDefault,
+  persistence,
+  onPersistenceError
 }) {
-  const instanceIdRef = useRef9(null);
+  const instanceIdRef = useRef12(null);
   if (instanceIdRef.current === null) {
     instanceIdRef.current = ++measurerInstanceCount;
   }
-  const storageKey = persistKey ?? (instanceIdRef.current === 1 ? "mesurer-state" : `mesurer-state-${instanceIdRef.current}`);
   const ownerDocument = portalTarget.ownerDocument ?? document;
   const ownerWindow = ownerDocument.defaultView ?? window;
-  const guideScrollRef = useRef9({
+  const tabIdRef = useRef12(null);
+  if (tabIdRef.current === null) tabIdRef.current = getTabId(ownerWindow);
+  const storageKey = persistKey ?? (instanceIdRef.current === 1 ? `mesurer-state:${tabIdRef.current}` : `mesurer-state:${tabIdRef.current}:${instanceIdRef.current}`);
+  const legacyStorageKey = persistKey ? void 0 : LEGACY_STORAGE_KEY;
+  const guideScrollRef = useRef12({
     x: ownerWindow.scrollX,
     y: ownerWindow.scrollY
   });
-  const textInspectorRef = useRef9(null);
+  const textInspectorRef = useRef12(null);
   if (!textInspectorRef.current) {
     textInspectorRef.current = createTextInspector({ portalTarget });
   }
   const textInspector = textInspectorRef.current;
-  const selectionRectRef = useRef9(null);
-  const toolbarRef = useRef9(null);
-  const selectionAnimationCleanupTimeoutRef = useRef9(null);
-  const guideDragRef = useRef9(null);
-  const guideUserSelectRef = useRef9(null);
-  const persistedState = useMemo2(() => {
-    if (!persistOnReload) return null;
-    try {
-      const stored = window.localStorage.getItem(storageKey);
-      if (!stored) return null;
-      const parsed = JSON.parse(stored);
-      if (!parsed || parsed.version !== 1) return null;
-      return parsed;
-    } catch {
-      return null;
-    }
-  }, [persistOnReload, storageKey]);
-  const enabledRef = useRef9(false);
-  const toolModeRef = useRef9(
+  const selectionRectRef = useRef12(null);
+  const toolbarRef = useRef12(null);
+  const selectionAnimationCleanupTimeoutRef = useRef12(null);
+  const guideDragRef = useRef12(null);
+  const guideUserSelectRef = useRef12(null);
+  const persistenceErrorHandlerRef = useRef12(onPersistenceError);
+  persistenceErrorHandlerRef.current = onPersistenceError;
+  const activePersistence = useMemo2(() => {
+    const next = persistence ?? createLocalStoragePersistence(ownerWindow, storageKey, SETTINGS_STORAGE_KEY, legacyStorageKey);
+    next.setErrorHandler?.((error) => persistenceErrorHandlerRef.current?.(error));
+    return next;
+  }, [legacyStorageKey, ownerWindow, persistence, storageKey]);
+  const storedState = useMemo2(
+    () => activePersistence.load(),
+    [activePersistence]
+  );
+  const persistedState = persistOnReload || storedState?.settings.persistOnReload ? storedState?.workspace ?? null : null;
+  const persistedSettings = sanitizeStoredSettings(ownerWindow, storedState?.settings ?? {});
+  useEffect7(() => {
+    return () => activePersistence.setErrorHandler?.(void 0);
+  }, [activePersistence]);
+  const enabledRef = useRef12(false);
+  const toolModeRef = useRef12(
     persistedState?.toolMode === "rulers" ? "none" : persistedState?.toolMode ?? "none"
   );
-  const rulersVisibleRef = useRef9(
+  const rulersVisibleRef = useRef12(
     persistedState?.rulersVisible ?? persistedState?.toolMode === "rulers"
   );
-  const guideOrientationRef = useRef9(
+  const xrayVisibleRef = useRef12(persistedState?.xrayVisible ?? persistedState?.toolMode === "xray");
+  const guideOrientationRef = useRef12(
     persistedState?.guideOrientation ?? "vertical"
   );
-  const measurementsRef = useRef9(
+  const measurementsRef = useRef12(
     persistedState?.measurements ?? []
   );
-  const activeMeasurementRef = useRef9(
+  const activeMeasurementRef = useRef12(
     persistedState?.activeMeasurement ?? null
   );
-  const heldDistancesRef = useRef9(
+  const heldDistancesRef = useRef12(
     persistedState?.heldDistances ?? []
   );
-  const guidesRef = useRef9(persistedState?.guides ?? []);
-  const selectedGuideIdsRef = useRef9(
+  const guidesRef = useRef12(persistedState?.guides ?? []);
+  const selectedGuideIdsRef = useRef12(
     persistedState?.selectedGuideIds ?? []
   );
+  const workspacePersistTimeoutRef = useRef12(null);
+  const applyingExternalPersistenceRef = useRef12(false);
   const { overlayRef, selectedElementRef, hoverElementRef } = useOverlayRefs();
   const {
     selectionOriginRect,
@@ -4759,11 +6290,20 @@ function MeasurerClient({
     setRulersVisible,
     guidesEnabled,
     multiMeasureEnabled,
-    snapGuidesEnabled
+    snapGuidesEnabled,
+    setSnapGuidesEnabled,
+    selectNewGuideEnabled,
+    setSelectNewGuideEnabled,
+    setSnapEnabled,
+    setMultiMeasureEnabled
   } = useMeasureToggles({
     initialEnabled: persistedState?.enabled,
     initialToolMode: persistedState?.toolMode === "rulers" ? "none" : persistedState?.toolMode,
-    initialRulersVisible: persistedState?.rulersVisible ?? persistedState?.toolMode === "rulers"
+    initialRulersVisible: persistedState?.rulersVisible ?? persistedState?.toolMode === "rulers",
+    initialSnapEnabled: persistedSettings.snapEnabled ?? snapEnabledDefault,
+    initialSnapGuidesEnabled: persistedSettings.snapGuidesEnabled ?? snapGuidesEnabledDefault,
+    initialSelectNewGuideEnabled: persistedSettings.selectNewGuideEnabled ?? selectNewGuideEnabledDefault,
+    initialMultiMeasureEnabled: persistedSettings.multiMeasureEnabled ?? multiMeasureEnabledDefault
   });
   const { start, setStart, end, setEnd, isDragging, setIsDragging } = useDragState();
   const {
@@ -4795,11 +6335,59 @@ function MeasurerClient({
     initialGuides: persistedState?.guides ?? [],
     initialSelectedGuideIds: persistedState?.selectedGuideIds ?? []
   });
-  const [toolbarActive, setToolbarActive] = useState8(true);
+  const [toolbarActive, setToolbarActive] = useState11(true);
+  const [colorPickerActive, setColorPickerActive] = useState11(false);
+  const [colorPickerSample, setColorPickerSample] = useState11(null);
+  const [colorPickerUnsupported, setColorPickerUnsupported] = useState11(false);
+  const [settingsOpen, setSettingsOpen] = useState11(false);
+  const [settingsTab, setSettingsTab] = useState11("general");
+  const [settingsHighlightColor, setSettingsHighlightColor] = useState11(
+    persistedSettings.highlightColor ?? highlightColor
+  );
+  const [settingsGuideColor, setSettingsGuideColor] = useState11(
+    persistedSettings.guideColor ?? guideColor
+  );
+  const [settingsHoverHighlight, setSettingsHoverHighlight] = useState11(
+    persistedSettings.hoverHighlightEnabled ?? hoverHighlightEnabled
+  );
+  const [settingsPersistOnReload, setSettingsPersistOnReload] = useState11(
+    persistedSettings.persistOnReload ?? persistOnReload
+  );
+  const [settingsColorFormats, setSettingsColorFormats] = useState11(
+    persistedSettings.colorPickerFormats ?? colorPickerFormats
+  );
+  const [settingsColorClickFormat, setSettingsColorClickFormat] = useState11(
+    persistedSettings.colorPickerClickFormat ?? colorPickerClickFormat
+  );
+  const [settingsGuideStyle, setSettingsGuideStyle] = useState11({
+    ...guideStyleDefault,
+    ...persistedSettings.guideStyle
+  });
+  const [settingsRulerSettings, setSettingsRulerSettings] = useState11({
+    ...rulerSettingsDefault,
+    ...persistedSettings.rulerSettings
+  });
+  const [xrayVisible, setXrayVisible] = useState11(xrayVisibleRef.current);
   const { clearGuideDragHold, scheduleGuideDragHold } = useGuideDragHold(ownerWindow);
-  const [guidePreview, setGuidePreview] = useState8(null);
-  const [guideOrientation, setGuideOrientation] = useState8(persistedState?.guideOrientation ?? "vertical");
+  const [guidePreview, setGuidePreview] = useState11(null);
+  const resetSettings = () => {
+    setSettingsHighlightColor(highlightColor);
+    setSettingsGuideColor(guideColor);
+    setSettingsHoverHighlight(hoverHighlightEnabled);
+    setSettingsPersistOnReload(persistOnReload);
+    setSettingsColorFormats([...colorPickerFormats]);
+    setSettingsColorClickFormat(colorPickerClickFormat);
+    setSnapEnabled(snapEnabledDefault);
+    setSnapGuidesEnabled(snapGuidesEnabledDefault);
+    setSelectNewGuideEnabled(selectNewGuideEnabledDefault);
+    setMultiMeasureEnabled(multiMeasureEnabledDefault);
+    setSettingsGuideStyle({ ...guideStyleDefault });
+    setSettingsRulerSettings({ ...rulerSettingsDefault });
+  };
+  const initialSettingsTab = colorPickerActive ? "color-picker" : rulersVisible ? "rulers" : toolMode === "guides" ? "guides" : toolMode === "select" || toolMode === "text-inspector" ? "select" : "general";
+  const [guideOrientation, setGuideOrientation] = useState11(persistedState?.guideOrientation ?? "vertical");
   enabledRef.current = enabled;
+  xrayVisibleRef.current = xrayVisible;
   toolModeRef.current = toolMode;
   rulersVisibleRef.current = rulersVisible;
   guideOrientationRef.current = guideOrientation;
@@ -4808,29 +6396,168 @@ function MeasurerClient({
   heldDistancesRef.current = heldDistances;
   guidesRef.current = guides;
   selectedGuideIdsRef.current = selectedGuideIds;
-  const persistState = useCallback6(() => {
-    if (!persistOnReload) return;
-    if (typeof window === "undefined") return;
-    try {
-      window.localStorage.setItem(
-        storageKey,
-        JSON.stringify({
-          version: 1,
-          enabled: enabledRef.current,
-          toolMode: toolModeRef.current,
-          rulersVisible: rulersVisibleRef.current,
-          guideOrientation: guideOrientationRef.current,
-          guides: guidesRef.current,
-          selectedGuideIds: selectedGuideIdsRef.current,
-          measurements: measurementsRef.current.map(stripMeasurement),
-          activeMeasurement: activeMeasurementRef.current ? stripMeasurement(activeMeasurementRef.current) : null,
-          heldDistances: heldDistancesRef.current.map(stripDistance)
-        })
-      );
-    } catch {
+  const saveWorkspace = useCallback8(() => {
+    if (!settingsPersistOnReload) return;
+    const workspace = {
+      enabled: enabledRef.current,
+      xrayVisible: xrayVisibleRef.current,
+      toolMode: toolModeRef.current,
+      rulersVisible: rulersVisibleRef.current,
+      guideOrientation: guideOrientationRef.current,
+      guides: guidesRef.current,
+      selectedGuideIds: selectedGuideIdsRef.current,
+      measurements: measurementsRef.current.map(stripMeasurement),
+      activeMeasurement: activeMeasurementRef.current ? stripMeasurement(activeMeasurementRef.current) : null,
+      heldDistances: heldDistancesRef.current.map(stripDistance)
+    };
+    activePersistence.saveWorkspace(workspace);
+  }, [activePersistence, settingsPersistOnReload]);
+  const persistState = useCallback8(() => {
+    if (!settingsPersistOnReload) return;
+    if (workspacePersistTimeoutRef.current !== null) {
+      ownerWindow.clearTimeout(workspacePersistTimeoutRef.current);
+    }
+    workspacePersistTimeoutRef.current = ownerWindow.setTimeout(() => {
+      workspacePersistTimeoutRef.current = null;
+      saveWorkspace();
+    }, 250);
+  }, [ownerWindow, saveWorkspace, settingsPersistOnReload]);
+  const persistSettings = useCallback8(() => {
+    activePersistence.saveSettings({
+      highlightColor: settingsHighlightColor,
+      guideColor: settingsGuideColor,
+      hoverHighlightEnabled: settingsHoverHighlight,
+      colorPickerFormats: settingsColorFormats,
+      colorPickerClickFormat: settingsColorClickFormat,
+      snapEnabled,
+      snapGuidesEnabled,
+      selectNewGuideEnabled,
+      multiMeasureEnabled,
+      persistOnReload: settingsPersistOnReload,
+      guideStyle: settingsGuideStyle,
+      rulerSettings: settingsRulerSettings
+    });
+  }, [
+    multiMeasureEnabled,
+    selectNewGuideEnabled,
+    settingsColorClickFormat,
+    settingsColorFormats,
+    settingsGuideColor,
+    settingsHighlightColor,
+    settingsHoverHighlight,
+    settingsPersistOnReload,
+    snapEnabled,
+    snapGuidesEnabled,
+    activePersistence,
+    settingsGuideStyle,
+    settingsRulerSettings
+  ]);
+  useEffect7(() => {
+    if (applyingExternalPersistenceRef.current) {
+      applyingExternalPersistenceRef.current = false;
+      return;
+    }
+    persistSettings();
+    if (settingsPersistOnReload) persistState();
+  }, [persistSettings, persistState, settingsPersistOnReload]);
+  useEffect7(() => {
+    if (!settingsPersistOnReload) return;
+    const handleBeforeUnload = () => saveWorkspace();
+    ownerWindow.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      ownerWindow.removeEventListener("beforeunload", handleBeforeUnload);
+      if (workspacePersistTimeoutRef.current !== null) {
+        ownerWindow.clearTimeout(workspacePersistTimeoutRef.current);
+        workspacePersistTimeoutRef.current = null;
+        saveWorkspace();
+      }
+    };
+  }, [ownerWindow, saveWorkspace, settingsPersistOnReload]);
+  const clearPersistedWorkspace = useCallback8(() => {
+    enabledRef.current = false;
+    toolModeRef.current = "none";
+    rulersVisibleRef.current = false;
+    xrayVisibleRef.current = false;
+    guideOrientationRef.current = "vertical";
+    measurementsRef.current = [];
+    activeMeasurementRef.current = null;
+    heldDistancesRef.current = [];
+    guidesRef.current = [];
+    selectedGuideIdsRef.current = [];
+    setEnabled(false);
+    setToolMode("none");
+    setRulersVisible(false);
+    setXrayVisible(false);
+    setGuideOrientation("vertical");
+    setMeasurements([]);
+    setActiveMeasurement(null);
+    setSelectedMeasurement(null);
+    setSelectedMeasurements([]);
+    setHeldDistances([]);
+    setGuides([]);
+    setSelectedGuideIds([]);
+  }, [setActiveMeasurement, setEnabled, setGuideOrientation, setGuides, setHeldDistances, setMeasurements, setRulersVisible, setSelectedGuideIds, setSelectedMeasurement, setSelectedMeasurements, setToolMode]);
+  const clearWorkspace = useCallback8(() => {
+    clearPersistedWorkspace();
+    activePersistence.clearWorkspace();
+  }, [activePersistence, clearPersistedWorkspace]);
+  const applyPersistedWorkspace = useCallback8((workspace) => {
+    enabledRef.current = workspace.enabled;
+    toolModeRef.current = workspace.toolMode;
+    rulersVisibleRef.current = workspace.rulersVisible;
+    xrayVisibleRef.current = workspace.xrayVisible;
+    guideOrientationRef.current = workspace.guideOrientation;
+    measurementsRef.current = workspace.measurements;
+    activeMeasurementRef.current = workspace.activeMeasurement;
+    heldDistancesRef.current = workspace.heldDistances;
+    guidesRef.current = workspace.guides;
+    selectedGuideIdsRef.current = workspace.selectedGuideIds;
+    setEnabled(workspace.enabled);
+    setToolMode(workspace.toolMode);
+    setRulersVisible(workspace.rulersVisible);
+    setXrayVisible(workspace.xrayVisible);
+    setGuideOrientation(workspace.guideOrientation);
+    setMeasurements(workspace.measurements);
+    setActiveMeasurement(workspace.activeMeasurement);
+    setGuides(workspace.guides);
+    setSelectedGuideIds(workspace.selectedGuideIds);
+    setHeldDistances(workspace.heldDistances);
+  }, [setActiveMeasurement, setEnabled, setGuideOrientation, setGuides, setHeldDistances, setMeasurements, setRulersVisible, setSelectedGuideIds, setToolMode]);
+  const applyPersistenceSnapshot = useCallback8((snapshot, source) => {
+    if (!snapshot) return;
+    applyingExternalPersistenceRef.current = true;
+    const settings = sanitizeStoredSettings(ownerWindow, snapshot.settings);
+    if (settings.highlightColor !== void 0) setSettingsHighlightColor(settings.highlightColor);
+    if (settings.guideColor !== void 0) setSettingsGuideColor(settings.guideColor);
+    if (settings.hoverHighlightEnabled !== void 0) setSettingsHoverHighlight(settings.hoverHighlightEnabled);
+    if (settings.colorPickerFormats !== void 0) setSettingsColorFormats(settings.colorPickerFormats);
+    if (settings.colorPickerClickFormat !== void 0) setSettingsColorClickFormat(settings.colorPickerClickFormat);
+    if (settings.persistOnReload !== void 0) setSettingsPersistOnReload(settings.persistOnReload);
+    if (settings.snapEnabled !== void 0) setSnapEnabled(settings.snapEnabled);
+    if (settings.snapGuidesEnabled !== void 0) setSnapGuidesEnabled(settings.snapGuidesEnabled);
+    if (settings.selectNewGuideEnabled !== void 0) setSelectNewGuideEnabled(settings.selectNewGuideEnabled);
+    if (settings.multiMeasureEnabled !== void 0) setMultiMeasureEnabled(settings.multiMeasureEnabled);
+    if (settings.guideStyle !== void 0) setSettingsGuideStyle({ ...guideStyleDefault, ...settings.guideStyle });
+    if (settings.rulerSettings !== void 0) setSettingsRulerSettings({ ...rulerSettingsDefault, ...settings.rulerSettings });
+    const workspace = snapshot.workspace;
+    if (source?.workspace !== false && workspace && (settings.persistOnReload ?? settingsPersistOnReload)) {
+      applyPersistedWorkspace(workspace);
     }
-  }, [persistOnReload, storageKey]);
-  const setEnabledPersisted = useCallback6(
+    ownerWindow.setTimeout(() => {
+      applyingExternalPersistenceRef.current = false;
+    }, 0);
+  }, [applyPersistedWorkspace, guideStyleDefault, ownerWindow, rulerSettingsDefault, setMultiMeasureEnabled, setSelectNewGuideEnabled, setSettingsColorClickFormat, setSettingsColorFormats, setSettingsGuideColor, setSettingsHighlightColor, setSettingsHoverHighlight, setSettingsPersistOnReload, setSnapEnabled, setSnapGuidesEnabled, settingsPersistOnReload]);
+  const previousPersistenceRef = useRef12(activePersistence);
+  useEffect7(() => {
+    if (previousPersistenceRef.current === activePersistence) return;
+    previousPersistenceRef.current = activePersistence;
+    applyPersistenceSnapshot(storedState);
+  }, [activePersistence, applyPersistenceSnapshot, storedState]);
+  useEffect7(() => {
+    const unsubscribe = activePersistence.subscribe?.(applyPersistenceSnapshot);
+    return unsubscribe;
+  }, [activePersistence, applyPersistenceSnapshot]);
+  const setEnabledPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(enabledRef.current) : value;
       if (Object.is(next, enabledRef.current)) return;
@@ -4840,7 +6567,7 @@ function MeasurerClient({
     },
     [persistState, setEnabled]
   );
-  const setRulersVisiblePersisted = useCallback6(
+  const setRulersVisiblePersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(rulersVisibleRef.current) : value;
       if (Object.is(next, rulersVisibleRef.current)) return;
@@ -4850,7 +6577,7 @@ function MeasurerClient({
     },
     [persistState, setRulersVisible]
   );
-  const setToolModePersisted = useCallback6(
+  const setToolModePersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(toolModeRef.current) : value;
       if (Object.is(next, toolModeRef.current)) return;
@@ -4865,7 +6592,7 @@ function MeasurerClient({
     },
     [persistState, setToolMode, textInspector]
   );
-  const setGuideOrientationPersisted = useCallback6(
+  const setGuideOrientationPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(guideOrientationRef.current) : value;
       if (Object.is(next, guideOrientationRef.current)) return;
@@ -4875,7 +6602,7 @@ function MeasurerClient({
     },
     [persistState, setGuideOrientation]
   );
-  const setMeasurementsPersisted = useCallback6(
+  const setMeasurementsPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(measurementsRef.current) : value;
       if (Object.is(next, measurementsRef.current)) return;
@@ -4885,7 +6612,7 @@ function MeasurerClient({
     },
     [persistState, setMeasurements]
   );
-  const setActiveMeasurementPersisted = useCallback6(
+  const setActiveMeasurementPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(activeMeasurementRef.current) : value;
       if (Object.is(next, activeMeasurementRef.current)) return;
@@ -4895,7 +6622,7 @@ function MeasurerClient({
     },
     [persistState, setActiveMeasurement]
   );
-  const setHeldDistancesPersisted = useCallback6(
+  const setHeldDistancesPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(heldDistancesRef.current) : value;
       if (Object.is(next, heldDistancesRef.current)) return;
@@ -4905,7 +6632,7 @@ function MeasurerClient({
     },
     [persistState, setHeldDistances]
   );
-  const setGuidesPersisted = useCallback6(
+  const setGuidesPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(guidesRef.current) : value;
       if (Object.is(next, guidesRef.current)) return;
@@ -4915,7 +6642,7 @@ function MeasurerClient({
     },
     [persistState, setGuides]
   );
-  const setSelectedGuideIdsPersisted = useCallback6(
+  const setSelectedGuideIdsPersisted = useCallback8(
     (value) => {
       const next = typeof value === "function" ? value(selectedGuideIdsRef.current) : value;
       if (Object.is(next, selectedGuideIdsRef.current)) return;
@@ -4973,15 +6700,15 @@ function MeasurerClient({
       clearSelectionRect
     }
   });
-  const undo = useCallback6(() => {
+  const undo = useCallback8(() => {
     if (toolMode === "text-inspector" && textInspector.undo()) return;
     undoHistory();
   }, [textInspector, toolMode, undoHistory]);
-  const redo = useCallback6(() => {
+  const redo = useCallback8(() => {
     if (toolMode === "text-inspector" && textInspector.redo()) return;
     redoHistory();
   }, [redoHistory, textInspector, toolMode]);
-  const clearAll = useCallback6(() => {
+  const clearAll = useCallback8(() => {
     if (toolMode === "text-inspector") {
       textInspector.clear();
     }
@@ -5021,7 +6748,7 @@ function MeasurerClient({
     textInspector,
     toolMode
   ]);
-  const removeSelectedGuides = useCallback6(() => {
+  const removeSelectedGuides = useCallback8(() => {
     if (selectedGuideIds.length === 0) return false;
     recordSnapshot();
     setGuidesPersisted(
@@ -5035,6 +6762,37 @@ function MeasurerClient({
     setGuidesPersisted,
     setSelectedGuideIdsPersisted
   ]);
+  const openColorPicker = useCallback8(async () => {
+    const EyeDropper = ownerWindow.EyeDropper;
+    setEnabledWithHistory(true);
+    setToolModeWithHistory("none");
+    setColorPickerActive(true);
+    setColorPickerSample(null);
+    setColorPickerUnsupported(!EyeDropper);
+    if (!EyeDropper) return;
+    try {
+      const result = await new EyeDropper().open();
+      const nextSample = parseCssColor(result.sRGBHex);
+      if (!nextSample) return;
+      setColorPickerSample(nextSample);
+      const clipboardWrite = ownerWindow.navigator.clipboard?.writeText(
+        formatColor(nextSample, settingsColorClickFormat)
+      );
+      void clipboardWrite?.catch(() => void 0);
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        setColorPickerActive(false);
+      }
+    }
+  }, [ownerWindow, setEnabledWithHistory, setToolModeWithHistory, settingsColorClickFormat]);
+  const toggleSettings = useCallback8(() => {
+    if (settingsOpen) {
+      setSettingsOpen(false);
+      return;
+    }
+    setSettingsTab(initialSettingsTab);
+    setSettingsOpen(true);
+  }, [initialSettingsTab, settingsOpen]);
   useHotkeys({
     eventTarget: ownerWindow,
     clearAll,
@@ -5047,7 +6805,13 @@ function MeasurerClient({
     setAltPressed,
     isOverlayActive: () => enabled && (toolMode !== "none" || toolbarActive),
     setGuideOrientation: setGuideOrientationWithHistory,
-    onInteract: () => setToolbarActive(true)
+    onInteract: () => setToolbarActive(true),
+    onColorPicker: openColorPicker,
+    onToggleXray: () => setXrayVisible((previous) => !previous),
+    onToggleSettings: toggleSettings,
+    isSettingsOpen: () => settingsOpen,
+    onCloseColorPicker: () => setColorPickerActive(false),
+    isColorPickerActive: () => colorPickerActive
   });
   useResizeSync({
     document: ownerDocument,
@@ -5059,7 +6823,7 @@ function MeasurerClient({
     setGuides: setGuidesPersisted,
     selectedElementRef
   });
-  useEffect5(() => {
+  useEffect7(() => {
     const handleScroll = () => {
       const next = {
         x: ownerWindow.scrollX,
@@ -5083,6 +6847,7 @@ function MeasurerClient({
     document: ownerDocument,
     window: ownerWindow,
     enabled,
+    selectionEnabled: toolMode === "select",
     selectedElementRef,
     hoverElementRef,
     setSelectedMeasurement,
@@ -5092,7 +6857,7 @@ function MeasurerClient({
     setActiveMeasurement: setActiveMeasurementPersisted,
     setHeldDistances: setHeldDistancesPersisted
   });
-  useEffect5(() => {
+  useEffect7(() => {
     if (!toolbarActive || toolMode !== "none") return;
     const handlePointerDown2 = (event) => {
       const toolbarNode = toolbarRef.current;
@@ -5104,9 +6869,10 @@ function MeasurerClient({
       ownerWindow.removeEventListener("pointerdown", handlePointerDown2);
     };
   }, [ownerWindow, toolbarActive, toolMode]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!enabled) return;
     const handleGuidePointerDown2 = (event) => {
+      if (settingsOpen) return;
       if (toolbarRef.current?.contains(event.target)) return;
       const guideTarget = event.composedPath().some(
         (target) => target instanceof ownerWindow.Element && target.hasAttribute("data-mesurer-guide")
@@ -5189,16 +6955,30 @@ function MeasurerClient({
     ownerWindow,
     setGuidesPersisted,
     setSelectedGuideIdsPersisted,
+    settingsOpen,
     toolMode
   ]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (toolMode === "text-inspector") {
       textInspector.enable();
     } else {
       textInspector.disable();
     }
   }, [textInspector, toolMode]);
-  useEffect5(() => {
+  const selectionToolRef = useRef12(toolMode);
+  if (selectionToolRef.current !== toolMode) {
+    selectionToolRef.current = toolMode;
+    if (toolMode !== "select") {
+      setSelectedElement(null);
+      setHoverElement(null);
+      setHoverRect(null);
+      setHoverPointer(null);
+      setSelectedMeasurement(null);
+      setSelectedMeasurements([]);
+      clearSelectionRect();
+    }
+  }
+  useEffect7(() => {
     let style = ownerDocument.getElementById(XRAY_STYLE_ID);
     if (!style) {
       style = ownerDocument.createElement("style");
@@ -5206,7 +6986,7 @@ function MeasurerClient({
       style.textContent = XRAY_STYLES;
       ownerDocument.head.appendChild(style);
     }
-    if (toolMode === "xray") {
+    if (xrayVisible) {
       ownerDocument.body.classList.add("xray-mode");
     } else {
       ownerDocument.body.classList.remove("xray-mode");
@@ -5214,13 +6994,13 @@ function MeasurerClient({
     return () => {
       ownerDocument.body.classList.remove("xray-mode");
     };
-  }, [ownerDocument, toolMode]);
-  useEffect5(() => {
+  }, [ownerDocument, xrayVisible]);
+  useEffect7(() => {
     return () => {
       textInspector.destroy();
     };
   }, [textInspector]);
-  useEffect5(() => {
+  useEffect7(() => {
     const hasSelectionAnimationState = !!selectionOriginRect || !!selectedMeasurement?.originRect || selectedMeasurements.some((measurement) => !!measurement.originRect);
     if (!hasSelectionAnimationState) {
       if (selectionAnimationCleanupTimeoutRef.current !== null) {
@@ -5301,9 +7081,9 @@ function MeasurerClient({
     guidesEnabled,
     guidePreview,
     displayedMeasurements,
-    hoverHighlightEnabled,
-    highlightColor,
-    guideColor
+    hoverHighlightEnabled: settingsHoverHighlight,
+    highlightColor: settingsHighlightColor,
+    guideColor: settingsGuideColor
   });
   const {
     handlePointerDown,
@@ -5320,10 +7100,12 @@ function MeasurerClient({
     clearGuideDragHold,
     scheduleGuideDragHold,
     enabled,
+    settingsOpen,
     toolMode,
     guidesEnabled,
     snapEnabled,
     snapGuidesEnabled,
+    selectNewGuideEnabled,
     altPressed,
     guideOrientation,
     hoverHighlightEnabled,
@@ -5356,7 +7138,7 @@ function MeasurerClient({
     setHoverPointer,
     clearSelectionRect
   });
-  const removeHeldDistance = useCallback6(
+  const removeHeldDistance = useCallback8(
     (id) => {
       recordSnapshot();
       setHeldDistancesPersisted(
@@ -5365,42 +7147,62 @@ function MeasurerClient({
     },
     [recordSnapshot, setHeldDistancesPersisted]
   );
-  const startGuideFromRuler = useCallback6(
+  const snapGuidePosition = useCallback8(
+    (orientation, position, draggingGuideId2 = null) => getSnapGuidePosition({
+      orientation,
+      point: orientation === "vertical" ? { x: position, y: 0 } : { x: 0, y: position },
+      snapGuidesEnabled,
+      overlayNode: overlayRef.current,
+      guides,
+      draggingGuideId: draggingGuideId2,
+      document: ownerDocument
+    }),
+    [guides, ownerDocument, overlayRef, snapGuidesEnabled]
+  );
+  const startGuideFromRuler = useCallback8(
     (orientation, position) => {
       const id = createId();
       const commit = createActionCommit();
       commit();
       setSelectedGuideIdsPersisted([]);
-      setGuidesPersisted((prev) => [...prev, { id, orientation, position }]);
+      setGuidesPersisted((prev) => [
+        ...prev,
+        { id, orientation, position: snapGuidePosition(orientation, position) }
+      ]);
       return id;
     },
     [
       createActionCommit,
       setGuidesPersisted,
-      setSelectedGuideIdsPersisted
+      setSelectedGuideIdsPersisted,
+      snapGuidePosition
     ]
   );
-  const moveGuideFromRuler = useCallback6(
+  const moveGuideFromRuler = useCallback8(
     (id, position) => {
       setGuidesPersisted(
-        (prev) => prev.map((guide) => guide.id === id ? { ...guide, position } : guide)
+        (prev) => prev.map(
+          (guide) => guide.id === id ? { ...guide, position: snapGuidePosition(guide.orientation, position, id) } : guide
+        )
       );
     },
-    [setGuidesPersisted]
+    [setGuidesPersisted, snapGuidePosition]
   );
-  const finishGuideFromRuler = useCallback6(
+  const finishGuideFromRuler = useCallback8(
     (id) => {
-      setSelectedGuideIdsPersisted([id]);
+      if (selectNewGuideEnabled) {
+        setSelectedGuideIdsPersisted([id]);
+      }
     },
-    [setSelectedGuideIdsPersisted]
+    [selectNewGuideEnabled, setSelectedGuideIdsPersisted]
   );
-  const cancelGuideFromRuler = useCallback6(
+  const cancelGuideFromRuler = useCallback8(
     (id) => {
       setGuidesPersisted((prev) => prev.filter((guide) => guide.id !== id));
     },
     [setGuidesPersisted]
   );
-  const handleGuidePointerDown = useCallback6(
+  const handleGuidePointerDown = useCallback8(
     (guide, event) => {
       const commit = createActionCommit();
       if (!enabled) return;
@@ -5426,7 +7228,7 @@ function MeasurerClient({
       setSelectedGuideIdsPersisted
     ]
   );
-  const handleGuidePointerUp = useCallback6(
+  const handleGuidePointerUp = useCallback8(
     (guide, event) => {
       event.stopPropagation();
       clearGuideDragHold();
@@ -5437,16 +7239,37 @@ function MeasurerClient({
     },
     [clearGuideDragHold, setDraggingGuideId]
   );
+  const overlayInteractive = enabled && !settingsOpen;
+  const overlayGuides = useMemo2(() => {
+    if (guides.length > 0) return guides;
+    if (!settingsOpen || settingsTab !== "guides") return guides;
+    return [
+      {
+        id: "__mesurer-preview-vertical",
+        orientation: "vertical",
+        position: ownerWindow.innerWidth / 2
+      },
+      {
+        id: "__mesurer-preview-horizontal",
+        orientation: "horizontal",
+        position: ownerWindow.innerHeight / 2
+      }
+    ];
+  }, [guides, ownerWindow, settingsOpen, settingsTab]);
   return createPortal(
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         ref: overlayRef,
         className: "mesurer-root msr:pointer-events-none msr:fixed msr:inset-0 msr:z-50",
         children: [
-          enabled && rulersVisible ? /* @__PURE__ */ jsx9(
+          enabled && rulersVisible ? /* @__PURE__ */ jsx12(
             RulersOverlay,
             {
+              ownerWindow,
+              settings: settingsRulerSettings,
+              interactive: !settingsOpen,
+              forceVisible: settingsOpen,
               onStartGuide: startGuideFromRuler,
               onMoveGuide: moveGuideFromRuler,
               onFinishGuide: finishGuideFromRuler,
@@ -5455,12 +7278,13 @@ function MeasurerClient({
               selectedGuideIds
             }
           ) : null,
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx12(
             MeasurerOverlay,
             {
               enabled,
+              interactive: overlayInteractive,
               toolMode,
-              guidePointerEvents: enabled && (toolMode !== "none" || rulersVisible),
+              guidePointerEvents: overlayInteractive && (toolMode !== "none" || rulersVisible),
               guidesEnabled,
               altPressed,
               isDragging,
@@ -5481,13 +7305,14 @@ function MeasurerClient({
               optionPairOverlay,
               guideDistanceOverlay,
               optionContainerLines,
-              guides,
+              guides: overlayGuides,
               hoverGuide,
               draggingGuideId,
               selectedGuideIds,
               guideColorActive,
               guideColorHover,
               guideColorDefault,
+              guideStyle: settingsGuideStyle,
               onPointerDown: handlePointerDown,
               onPointerMove: handlePointerMove,
               onPointerUp: handlePointerUp,
@@ -5498,7 +7323,20 @@ function MeasurerClient({
               onGuidePointerCancel: handleGuidePointerUp
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx12(
+            ColorPicker,
+            {
+              active: colorPickerActive,
+              sample: colorPickerSample,
+              unsupported: colorPickerUnsupported,
+              ownerWindow,
+              toolbarRef,
+              formats: settingsColorFormats,
+              favoriteFormat: settingsColorClickFormat,
+              onClose: () => setColorPickerActive(false)
+            }
+          ),
+          /* @__PURE__ */ jsx12(
             Toolbar,
             {
               ref: toolbarRef,
@@ -5506,11 +7344,47 @@ function MeasurerClient({
               toolMode,
               setEnabled: setEnabledWithHistory,
               setToolMode: setToolModeWithHistory,
+              xrayVisible,
+              setXrayVisible,
               rulersVisible,
               setRulersVisible: setRulersVisiblePersisted,
               guideOrientation,
               setGuideOrientation: setGuideOrientationWithHistory,
-              onInteract: () => setToolbarActive(true)
+              onInteract: () => setToolbarActive(true),
+              colorPickerActive,
+              setColorPickerActive,
+              onColorPickerClick: openColorPicker,
+              settingsOpen,
+              setSettingsOpen,
+              highlightColor: settingsHighlightColor,
+              setHighlightColor: setSettingsHighlightColor,
+              guideColor: settingsGuideColor,
+              setGuideColor: setSettingsGuideColor,
+              hoverHighlight: settingsHoverHighlight,
+              setHoverHighlight: setSettingsHoverHighlight,
+              persistOnReload: settingsPersistOnReload,
+              setPersistOnReload: setSettingsPersistOnReload,
+              colorPickerFormats: settingsColorFormats,
+              setColorPickerFormats: setSettingsColorFormats,
+              colorPickerClickFormat: settingsColorClickFormat,
+              setColorPickerClickFormat: setSettingsColorClickFormat,
+              snapEnabled,
+              setSnapEnabled,
+              snapGuidesEnabled,
+              setSnapGuidesEnabled,
+              selectNewGuideEnabled,
+              setSelectNewGuideEnabled,
+              multiMeasureEnabled,
+              setMultiMeasureEnabled,
+              guideStyle: settingsGuideStyle,
+              setGuideStyle: setSettingsGuideStyle,
+              rulerSettings: settingsRulerSettings,
+              setRulerSettings: setSettingsRulerSettings,
+              settingsTab,
+              setSettingsTab,
+              onToggleSettings: toggleSettings,
+              onResetSettings: resetSettings,
+              onClearWorkspace: clearWorkspace
             }
           )
         ]
@@ -5525,14 +7399,24 @@ function Measurer({
   hoverHighlightEnabled = true,
   persistOnReload = false,
   portalTarget,
-  persistKey
+  persistKey,
+  colorPickerFormats = ["hex", "rgb", "oklch"],
+  colorPickerClickFormat = "hex",
+  snapEnabled = true,
+  snapGuidesEnabled = true,
+  selectNewGuideEnabled = true,
+  multiMeasureEnabled = false,
+  guideStyle,
+  rulerSettings,
+  persistence,
+  onPersistenceError
 }) {
   if (typeof document !== "undefined") {
     ensureMeasurerStyles(MESURER_STYLES, portalTarget);
   }
   const hydrated = useHydrated();
   if (!hydrated) return null;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     MeasurerClient,
     {
       highlightColor,
@@ -5540,12 +7424,26 @@ function Measurer({
       hoverHighlightEnabled,
       persistOnReload,
       persistKey,
+      colorPickerFormats,
+      colorPickerClickFormat,
+      snapEnabled,
+      snapGuidesEnabled,
+      selectNewGuideEnabled,
+      multiMeasureEnabled,
+      guideStyle: { ...DEFAULT_GUIDE_STYLE, ...guideStyle },
+      rulerSettings: { ...DEFAULT_RULER_SETTINGS, ...rulerSettings },
+      persistence,
+      onPersistenceError,
       portalTarget: portalTarget ?? document.body
     }
   );
 }
 export {
+  MESURER_STORAGE_VERSION,
   Measurer,
   TextInspector,
-  createTextInspector
+  createLocalStoragePersistence,
+  createTextInspector,
+  normalizeStoredSettings,
+  normalizeStoredWorkspace
 };