mesurer 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -20,14 +20,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+  MESURER_STORAGE_VERSION: () => MESURER_STORAGE_VERSION,
   Measurer: () => Measurer,
   TextInspector: () => TextInspector,
-  createTextInspector: () => createTextInspector
+  createLocalStoragePersistence: () => createLocalStoragePersistence,
+  createTextInspector: () => createTextInspector,
+  normalizeStoredSettings: () => normalizeStoredSettings,
+  normalizeStoredWorkspace: () => normalizeStoredWorkspace
 });
 module.exports = __toCommonJS(index_exports);
 
 // measurer.tsx
-var import_react20 = require("react");
+var import_react23 = require("react");
 var import_react_dom = require("react-dom");
 
 // core/constants.ts
@@ -74,19 +78,760 @@ function ensureMeasurerStyles(cssText, target) {
 }
 
 // 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: var(--color-ink-50);\n    --msr-color-ink-200: var(--color-ink-200);\n    --msr-color-ink-500: var(--color-ink-500);\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-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.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-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
-var import_react = require("react");
+var import_react3 = require("react");
 
 // core/utils.ts
 var formatValue = (value) => Math.round(value);
 var cn = (...inputs) => inputs.filter(Boolean).join(" ");
 var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`;
 
-// components/icons.tsx
+// components/settings-panel.tsx
+var import_react2 = require("react");
+
+// package.json
+var package_default = {
+  name: "mesurer",
+  version: "0.0.10",
+  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
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var TOOLTIP_DELAY_MS = 800;
+function Tooltip({
+  label,
+  shortcut,
+  visible,
+  instant = false,
+  side = "top",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "msr:text-white/60", children: shortcut })
+        ] }) : null
+      ]
+    }
+  );
+}
+function useTooltip() {
+  const [visibleTooltipId, setVisibleTooltipId] = (0, import_react.useState)(null);
+  const timerRef = (0, import_react.useRef)(null);
+  const instantRef = (0, import_react.useRef)(false);
+  const [tooltipInstant, setTooltipInstant] = (0, import_react.useState)(false);
+  const clearTimer = (0, import_react.useCallback)(() => {
+    if (timerRef.current === null) return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const onTooltipEnter = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    clearTimer();
+    setVisibleTooltipId(null);
+  }, [clearTimer]);
+  const onTooltipContainerLeave = (0, import_react.useCallback)(() => {
+    clearTimer();
+    setVisibleTooltipId(null);
+    instantRef.current = false;
+    setTooltipInstant(false);
+  }, [clearTimer]);
+  return {
+    visibleTooltipId,
+    tooltipInstant,
+    onTooltipEnter,
+    onTooltipLeave,
+    onTooltipContainerLeave
+  };
+}
+
+// components/settings-panel.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "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__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      className: "msr:col-span-2 msr:grid msr:h-6 msr:w-full 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__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: { justifySelf: "end" },
+            className: cn(
+              "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__ */ (0, import_jsx_runtime2.jsx)(
+              "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] = (0, import_react2.useState)(formatValue4(value));
+  const [editing, setEditing] = (0, import_react2.useState)(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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "msr:col-span-2 msr:grid msr:w-full msr:grid-cols-[78px_156px] msr:items-center msr:gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:text-[11px] msr:font-medium msr:text-ink-700", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ControlShell,
+      {
+        left: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "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__ */ (0, import_jsx_runtime2.jsx)(
+                "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__ */ (0, import_jsx_runtime2.jsx)(
+                "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__ */ (0, import_jsx_runtime2.jsx)(
+                "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__ */ (0, import_jsx_runtime2.jsx)(
+          "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] = (0, import_react2.useState)(hexValue);
+  const [alphaDraft, setAlphaDraft] = (0, import_react2.useState)(String(alphaValue));
+  const [hexFocused, setHexFocused] = (0, import_react2.useState)(false);
+  const [alphaFocused, setAlphaFocused] = (0, import_react2.useState)(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__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ControlShell,
+      {
+        left: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "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__ */ (0, import_jsx_runtime2.jsx)(
+                "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__ */ (0, import_jsx_runtime2.jsx)(
+            "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__ */ (0, import_jsx_runtime2.jsx)(
+          "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,
+  initialTab,
+  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 [activeTab, setActiveTab] = (0, import_react2.useState)(initialTab);
+  const patternTooltip = useTooltip();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "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__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": activeTab === value,
+        className: cn(
+          "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: () => setActiveTab(value),
+        children: label
+      },
+      value
+    )) }),
+    activeTab === "guides" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)(ColorField, { label: "Color", value: guideColor, fallback: "#f97316", ownerWindow, onChange: setGuideColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "msr:col-span-2 msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:text-[12px] msr:text-ink-700", children: "Pattern" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)(
+            "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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(Tooltip, { label, visible: patternTooltip.visibleTooltipId === tooltipId, instant: patternTooltip.tooltipInstant, className: "msr:z-10" })
+              ]
+            },
+            value
+          );
+        }) })
+      ] }),
+      guideStyle.pattern !== "solid" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Snap", checked: snapGuidesEnabled, onChange: setSnapGuidesEnabled }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Highlight", checked: selectNewGuideEnabled, onChange: setSelectNewGuideEnabled }) })
+    ] }) : null,
+    activeTab === "select" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)(ColorField, { label: "Color", value: highlightColor, fallback: "#0d99ff", ownerWindow, onChange: setHighlightColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Hover", checked: hoverHighlight, onChange: setHoverHighlight }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Element snap", checked: snapEnabled, onChange: setSnapEnabled }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Stack", checked: multiMeasureEnabled, onChange: setMultiMeasureEnabled }) })
+    ] }) : null,
+    activeTab === "color-picker" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "msr:col-span-2 msr:grid msr:grid-cols-[78px_156px] msr:items-center msr:gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:text-[12px] msr:text-ink-700", children: "Format" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:flex msr:min-w-0 msr:gap-1", children: COLOR_FORMATS.map((format) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("option", { value: format, children: format }, format)) })
+      ] })
+    ] }) : null,
+    activeTab === "rulers" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Edge reveal", checked: rulerSettings.edgeReveal, onChange: (edgeReveal) => setRulerSettings((settings) => ({ ...settings, edgeReveal })) }) })
+    ] }) : null,
+    activeTab === "general" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "msr:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsSwitch, { label: "Persist", checked: persistOnReload, onChange: setPersistOnReload }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Version" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:justify-self-end msr:font-mono msr:text-[11px] msr:tabular-nums msr:text-ink-700", children: package_default.version })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "msr:col-span-2 msr:flex msr:justify-end msr:gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsx)(
+          "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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -94,12 +839,14 @@ var IconBase = ({ size = 24, ...props }) => /* @__PURE__ */ (0, import_jsx_runti
     height: size,
     viewBox: "0 0 256 256",
     fill: "currentColor",
+    "aria-hidden": "true",
+    onDragStart: (event) => event.preventDefault(),
     ...props
   }
 );
-var CursorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var CursorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "path",
   {
     fill: "none",
@@ -111,7 +858,7 @@ var XrayIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_runti
     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__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var RulersIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "path",
   {
     fill: "none",
@@ -122,10 +869,10 @@ var RulersIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_run
     d: "M48 208V48h160M80 48v24m32-24v24m32-24v24m32-24v24M48 80h24M48 112h24m-24 32h24m-24 32h24"
   }
 ) });
-var CaretDownIcon = ({ size = 8, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+var CaretDownIcon = ({ size = 8, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(IconBase, { size, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -133,8 +880,10 @@ var TextInspectorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_
     height: size,
     viewBox: "0 0 256 256",
     fill: "currentColor",
+    "aria-hidden": "true",
+    onDragStart: (event) => event.preventDefault(),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "text",
       {
         x: "50%",
@@ -150,9 +899,54 @@ var TextInspectorIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_
     )
   }
 );
+var ColorPickerIcon = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "2.5", stroke: "currentColor", strokeWidth: "1" })
+    ]
+  }
+);
 
 // components/toolbar.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var TOOLBAR_TOOLTIP_DELAY_MS = 800;
 var TOOLBAR_DRAG_SLOP = 6;
 var GUIDE_MENU_WIDTH = 176;
@@ -170,61 +964,43 @@ function ToolbarButton({
   onTooltipLeave,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: "msr:relative",
       onMouseEnter: () => onTooltipEnter(id),
       onMouseLeave: () => onTooltipLeave(id),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "msr:text-white/60", children: shortcut })
-            ]
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { label, shortcut, visible: tooltipVisible, instant: tooltipInstant, side: tooltipSide })
       ]
     }
   );
 }
 function useToolbarTooltip() {
-  const [visibleTooltipId, setVisibleTooltipId] = (0, import_react.useState)(null);
-  const timerRef = (0, import_react.useRef)(null);
-  const instantRef = (0, import_react.useRef)(false);
-  const [tooltipInstant, setTooltipInstant] = (0, import_react.useState)(false);
-  const clearTimer = (0, import_react.useCallback)(() => {
+  const [visibleTooltipId, setVisibleTooltipId] = (0, import_react3.useState)(null);
+  const timerRef = (0, import_react3.useRef)(null);
+  const instantRef = (0, import_react3.useRef)(false);
+  const [tooltipInstant, setTooltipInstant] = (0, import_react3.useState)(false);
+  const clearTimer = (0, import_react3.useCallback)(() => {
     if (timerRef.current === null) return;
     window.clearTimeout(timerRef.current);
     timerRef.current = null;
   }, []);
-  const onTooltipEnter = (0, import_react.useCallback)(
+  const onTooltipEnter = (0, import_react3.useCallback)(
     (id) => {
       clearTimer();
       if (instantRef.current) {
@@ -241,14 +1017,14 @@ function useToolbarTooltip() {
     },
     [clearTimer]
   );
-  const onTooltipLeave = (0, import_react.useCallback)(
+  const onTooltipLeave = (0, import_react3.useCallback)(
     (id) => {
       clearTimer();
       setVisibleTooltipId((prev) => prev === id ? null : prev);
     },
     [clearTimer]
   );
-  const onToolbarLeave = (0, import_react.useCallback)(() => {
+  const onToolbarLeave = (0, import_react3.useCallback)(() => {
     clearTimer();
     setVisibleTooltipId(null);
     instantRef.current = false;
@@ -263,10 +1039,11 @@ function useToolbarTooltip() {
   };
 }
 function useToolbarDrag(initialPosition, eventTarget) {
-  const [position, setPosition] = (0, import_react.useState)(initialPosition);
-  const suppressClickRef = (0, import_react.useRef)(false);
-  const detachListenersRef = (0, import_react.useRef)(null);
-  const dragRef = (0, import_react.useRef)({
+  const [position, setPosition] = (0, import_react3.useState)(initialPosition);
+  const suppressClickRef = (0, import_react3.useRef)(false);
+  const previousUserSelectRef = (0, import_react3.useRef)(null);
+  const detachListenersRef = (0, import_react3.useRef)(null);
+  const dragRef = (0, import_react3.useRef)({
     active: false,
     didDrag: false,
     pointerId: -1,
@@ -277,12 +1054,28 @@ function useToolbarDrag(initialPosition, eventTarget) {
     width: 0,
     height: 0
   });
-  const onPointerDown = (0, import_react.useCallback)(
+  const disableTextSelection = (0, import_react3.useCallback)(() => {
+    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 = (0, import_react3.useCallback)(() => {
+    const previous = previousUserSelectRef.current;
+    if (previous === null) return;
+    const root = eventTarget.document.documentElement;
+    root.style.userSelect = previous;
+    previousUserSelectRef.current = null;
+  }, [eventTarget]);
+  (0, import_react3.useEffect)(() => restoreTextSelection, [restoreTextSelection]);
+  const onPointerDown = (0, import_react3.useCallback)(
     (event) => {
       if (event.button !== 0) return;
+      disableTextSelection();
       if (detachListenersRef.current) {
         detachListenersRef.current();
         detachListenersRef.current = null;
+        restoreTextSelection();
       }
       const state = dragRef.current;
       state.active = false;
@@ -317,6 +1110,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;
@@ -334,9 +1128,9 @@ function useToolbarDrag(initialPosition, eventTarget) {
         eventTarget.removeEventListener("pointercancel", handlePointerEnd);
       };
     },
-    [eventTarget, position.x, position.y]
+    [disableTextSelection, eventTarget, position.x, position.y, restoreTextSelection]
   );
-  const onClickCapture = (0, import_react.useCallback)(
+  const onClickCapture = (0, import_react3.useCallback)(
     (event) => {
       if (!suppressClickRef.current) return;
       event.preventDefault();
@@ -351,12 +1145,46 @@ 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,
+  initialSettingsTab,
+  onResetSettings,
+  onClearWorkspace
 }, ref) {
   const { position, onPointerDown, onClickCapture } = useToolbarDrag({
     x: 16,
@@ -369,11 +1197,13 @@ function ToolbarComponent({
     onTooltipLeave,
     onToolbarLeave
   } = useToolbarTooltip();
-  const [guideMenuOpen, setGuideMenuOpen] = (0, import_react.useState)(false);
-  const guideMenuRef = (0, import_react.useRef)(null);
-  const [activeMenuIndex, setActiveMenuIndex] = (0, import_react.useState)(0);
-  const [menuAlign, setMenuAlign] = (0, import_react.useState)("right");
-  const updateMenuAlign = (0, import_react.useCallback)(() => {
+  const [guideMenuOpen, setGuideMenuOpen] = (0, import_react3.useState)(false);
+  const settingsRef = (0, import_react3.useRef)(null);
+  const guideMenuRef = (0, import_react3.useRef)(null);
+  const [activeMenuIndex, setActiveMenuIndex] = (0, import_react3.useState)(0);
+  const [menuAlign, setMenuAlign] = (0, import_react3.useState)("right");
+  const tooltipsEnabled = !guideMenuOpen && !settingsOpen;
+  const updateMenuAlign = (0, import_react3.useCallback)(() => {
     const anchorRect = guideMenuRef.current?.getBoundingClientRect();
     if (!anchorRect) return;
     const rightAlignedLeft = anchorRect.right - GUIDE_MENU_WIDTH;
@@ -393,34 +1223,50 @@ function ToolbarComponent({
   const nearBottom = viewportHeight > 0 && position.y > viewportHeight - 56;
   const tooltipSide = nearTop && !nearBottom ? "bottom" : "top";
   const menuSide = nearBottom ? "top" : "bottom";
-  const selectMode = (0, import_react.useCallback)(() => {
+  const selectMode = (0, import_react3.useCallback)(() => {
     setEnabled(true);
+    setColorPickerActive(false);
     setToolMode((prev) => prev === "select" ? "none" : "select");
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const guidesMode = (0, import_react.useCallback)(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const guidesMode = (0, import_react3.useCallback)(() => {
     setEnabled(true);
+    setColorPickerActive(false);
     setToolMode((prev) => prev === "guides" ? "none" : "guides");
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const textInspectorMode = (0, import_react.useCallback)(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const textInspectorMode = (0, import_react3.useCallback)(() => {
     setEnabled(true);
+    setColorPickerActive(false);
     setToolMode(
       (prev) => prev === "text-inspector" ? "none" : "text-inspector"
     );
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const xrayMode = (0, import_react.useCallback)(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const xrayMode = (0, import_react3.useCallback)(() => {
     setEnabled(true);
-    setToolMode((prev) => prev === "xray" ? "none" : "xray");
+    setColorPickerActive(false);
+    setXrayVisible((prev) => !prev);
     onInteract();
-  }, [onInteract, setEnabled, setToolMode]);
-  const rulersMode = (0, import_react.useCallback)(() => {
+  }, [onInteract, setColorPickerActive, setEnabled, setXrayVisible]);
+  const colorPickerMode = (0, import_react3.useCallback)(() => {
     setEnabled(true);
+    setToolMode("none");
+    if (colorPickerActive) {
+      setColorPickerActive(false);
+    } else {
+      setColorPickerActive(true);
+      onColorPickerClick();
+    }
+    onInteract();
+  }, [colorPickerActive, onColorPickerClick, onInteract, setColorPickerActive, setEnabled, setToolMode]);
+  const rulersMode = (0, import_react3.useCallback)(() => {
+    setEnabled(true);
+    setColorPickerActive(false);
     setRulersVisible((prev) => !prev);
     onInteract();
-  }, [onInteract, setEnabled, setRulersVisible]);
-  const selectGuideOrientation = (0, import_react.useCallback)(
+  }, [onInteract, setColorPickerActive, setEnabled, setRulersVisible]);
+  const selectGuideOrientation = (0, import_react3.useCallback)(
     (orientation) => {
       setEnabled(true);
       setToolMode("guides");
@@ -430,30 +1276,34 @@ function ToolbarComponent({
     },
     [onInteract, setEnabled, setGuideOrientation, setToolMode]
   );
-  (0, import_react.useLayoutEffect)(() => {
-    if (!guideMenuOpen) return;
-    const frame = eventTarget.requestAnimationFrame(() => {
+  (0, import_react3.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime2.jsxs)(
+  }, [eventTarget, guideMenuOpen, guideOrientation, settingsOpen, updateMenuAlign]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref,
@@ -466,7 +1316,7 @@ function ToolbarComponent({
       onClickCapture,
       onMouseLeave: onToolbarLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           ToolbarButton,
           {
             id: "select",
@@ -474,31 +1324,47 @@ function ToolbarComponent({
             label: "Select",
             shortcut: "S",
             onClick: selectMode,
-            tooltipVisible: visibleTooltipId === "select",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "select",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CursorIcon, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CursorIcon, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           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__ */ (0, import_jsx_runtime2.jsx)(XrayIcon, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XrayIcon, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ToolbarButton,
+          {
+            id: "color-picker",
+            active: colorPickerActive,
+            label: "Color picker",
+            shortcut: "P",
+            onClick: colorPickerMode,
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "color-picker",
+            tooltipInstant,
+            tooltipSide,
+            onTooltipEnter,
+            onTooltipLeave,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorPickerIcon, { size: 20, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           ToolbarButton,
           {
             id: "rulers",
@@ -506,15 +1372,15 @@ function ToolbarComponent({
             label: "Rulers",
             shortcut: "R",
             onClick: rulersMode,
-            tooltipVisible: visibleTooltipId === "rulers",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "rulers",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RulersIcon, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RulersIcon, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           ToolbarButton,
           {
             id: "text-inspector",
@@ -522,15 +1388,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__ */ (0, import_jsx_runtime2.jsx)(TextInspectorIcon, { size: 20, "aria-hidden": "true" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextInspectorIcon, { size: 20, "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           ToolbarButton,
           {
             id: "guides",
@@ -538,12 +1404,12 @@ function ToolbarComponent({
             label: "Guides",
             shortcut: "G",
             onClick: guidesMode,
-            tooltipVisible: visibleTooltipId === "guides",
+            tooltipVisible: tooltipsEnabled && visibleTooltipId === "guides",
             tooltipInstant,
             tooltipSide,
             onTooltipEnter,
             onTooltipLeave,
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               RulerIcon,
               {
                 size: 20,
@@ -554,7 +1420,7 @@ function ToolbarComponent({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             className: "msr:group msr:relative msr:-ml-1 msr:flex msr:items-stretch",
@@ -562,12 +1428,11 @@ function ToolbarComponent({
             onMouseEnter: () => onTooltipEnter("guide-menu"),
             onMouseLeave: () => onTooltipLeave("guide-menu"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "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"
@@ -582,21 +1447,21 @@ function ToolbarComponent({
                       return !prev;
                     });
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CaretDownIcon, { size: 8 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CaretDownIcon, { size: 8 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "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__ */ (0, import_jsx_runtime2.jsxs)(
+              guideMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -637,7 +1502,7 @@ function ToolbarComponent({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -647,7 +1512,7 @@ function ToolbarComponent({
                         ),
                         onClick: () => selectGuideOrientation("horizontal"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             CheckIcon,
                             {
                               size: 12,
@@ -656,13 +1521,13 @@ function ToolbarComponent({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12 }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:flex-1", children: "Horizontal" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "H" })
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MinusIcon, { size: 12 }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "msr:flex-1", children: "Horizontal" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "H" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -672,7 +1537,7 @@ function ToolbarComponent({
                         ),
                         onClick: () => selectGuideOrientation("vertical"),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             CheckIcon,
                             {
                               size: 12,
@@ -681,35 +1546,310 @@ function ToolbarComponent({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12, className: "msr:rotate-90" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:flex-1", children: "Vertical" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "V" })
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MinusIcon, { size: 12, className: "msr:rotate-90" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "msr:flex-1", children: "Vertical" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "V" })
                         ]
                       }
                     )
                   ]
                 }
-              ) : null
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: settingsRef, className: "msr:relative msr:flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            ToolbarButton,
+            {
+              id: "settings",
+              active: settingsOpen,
+              label: "Settings",
+              shortcut: "\u2318/Ctrl+,",
+              onClick: () => {
+                onInteract();
+                setSettingsOpen((previous) => !previous);
+              },
+              tooltipVisible: tooltipsEnabled && visibleTooltipId === "settings",
+              tooltipInstant,
+              tooltipSide,
+              onTooltipEnter,
+              onTooltipLeave,
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GearIcon, { size: 20, "aria-hidden": "true" })
+            }
+          ),
+          settingsOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsx)(
+                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,
+                  initialTab: initialSettingsTab,
+                  onResetSettings,
+                  onClearWorkspace
+                }
+              )
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+var Toolbar = (0, import_react3.memo)((0, import_react3.forwardRef)(ToolbarComponent));
+
+// components/color-picker.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      className: "msr:relative msr:inline-flex",
+      onMouseLeave: tooltip.onTooltipLeave,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className,
+            onMouseEnter: () => onTooltipEnter(id),
+            onFocus: () => onTooltipEnter(id),
+            onBlur: tooltip.onTooltipLeave,
+            onClick: onCopy,
+            children: value
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Tooltip,
+          {
+            label: copied ? "Copied!" : "Click to copy",
+            visible: showTooltip,
+            instant: copied || tooltip.tooltipInstant,
+            side: "bottom",
+            className: "msr:z-10"
+          }
+        )
+      ]
+    }
+  );
+}
+function ColorPicker({
+  active,
+  sample,
+  unsupported,
+  formats,
+  favoriteFormat,
+  ownerWindow,
+  toolbarRef,
+  onClose
+}) {
+  const panelRef = (0, import_react4.useRef)(null);
+  const copyTimeoutRef = (0, import_react4.useRef)(null);
+  const [copiedId, setCopiedId] = (0, import_react4.useState)(null);
+  const tooltip = useTooltip();
+  const copyValue = (0, import_react4.useCallback)(
+    (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 = (0, import_react4.useCallback)(
+    (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]
+  );
+  (0, import_react4.useLayoutEffect)(() => {
+    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]);
+  (0, import_react4.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime5.jsx)(
+    "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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "msr:flex msr:items-start msr:gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "msr:text-black/60", children: "Color picker is not supported in this browser." }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "msr:text-black/45 msr:hover:text-black",
+            "aria-label": "Close color picker message",
+            onClick: onClose,
+            children: "x"
+          }
+        )
+      ] }) : sample ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        headerFormat ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "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__ */ (0, import_jsx_runtime5.jsx)(
+                "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__ */ (0, import_jsx_runtime5.jsx)(
+                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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "msr:flex msr:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "msr:flex msr:items-center msr:gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "msr:w-9 msr:text-black/45", children: format }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              CopyableColorValue,
+              {
+                id: format,
+                value,
+                copiedId,
+                onCopy: () => copyValue(format, value),
+                onTooltipEnter: handleTooltipEnter,
+                tooltip,
+                className: "msr:tabular-nums msr:text-black msr:hover:underline"
+              }
+            )
+          ] }, format);
+        })
+      ] }) : null
     }
   );
 }
-var Toolbar = (0, import_react.memo)((0, import_react.forwardRef)(ToolbarComponent));
 
 // components/rulers-overlay.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("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 = (0, import_react2.memo)(function RulersOverlay2({
+var RulersOverlay = (0, import_react5.memo)(function RulersOverlay2({
+  ownerWindow,
+  settings,
   onStartGuide,
   onMoveGuide,
   onFinishGuide,
@@ -717,9 +1857,26 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
   guides,
   selectedGuideIds
 }) {
-  const [dragPosition, setDragPosition] = (0, import_react2.useState)(null);
-  const [dragOrientation, setDragOrientation] = (0, import_react2.useState)(null);
-  const dragRef = (0, import_react2.useRef)(null);
+  const [dragPosition, setDragPosition] = (0, import_react5.useState)(null);
+  const [dragOrientation, setDragOrientation] = (0, import_react5.useState)(null);
+  const [nearEdge, setNearEdge] = (0, import_react5.useState)(false);
+  const dragRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    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 = !settings.edgeReveal || nearEdge;
   const beginGuideDrag = (orientation, event) => {
     if (event.button !== 0) return;
     event.stopPropagation();
@@ -769,13 +1926,18 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
   const selectedHorizontalGuides = guides.filter(
     (guide) => guide.orientation === "horizontal" && selectedGuideIds.includes(guide.id)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "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__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "msr:absolute msr:left-[18px] msr:right-0 msr:top-0 msr:overflow-hidden msr:bg-white",
@@ -783,13 +1945,13 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
               boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
               height: RULER_SIZE,
               cursor: "ns-resize",
-              pointerEvents: "auto"
+              pointerEvents: showRulers ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("horizontal", event),
             onPointerMove: moveGuide,
             onPointerUp: finishGuideDrag,
             onPointerCancel: cancelGuideDrag,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "svg",
               {
                 className: "msr:block msr:h-6",
@@ -797,7 +1959,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                 height: RULER_SIZE,
                 viewBox: `0 0 ${RULER_LENGTH} ${RULER_SIZE}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                     "linearGradient",
                     {
                       id: "ruler-label-fade-x",
@@ -805,18 +1967,18 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                       x2: "100%",
                       gradientUnits: "objectBoundingBox",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0.2", stopColor: "white" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0.8", stopColor: "white" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0.2", stopColor: "white" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0.8", stopColor: "white" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
                       ]
                     }
                   ) }),
                   ticks.map((x) => {
                     const major = x % 100 === 0;
                     const medium = x % 50 === 0;
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "line",
                         {
                           x1: x,
@@ -827,11 +1989,11 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                           strokeWidth: "1"
                         }
                       ),
-                      major ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x, y: "8", textAnchor: "middle", fill: "currentColor", children: x }) : null
+                      major ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x, y: "8", textAnchor: "middle", fill: "currentColor", children: x }) : null
                     ] }, x);
                   }),
-                  selectedVerticalGuides.map((guide) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  selectedVerticalGuides.map((guide) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "rect",
                       {
                         x: guide.position - RULER_SIZE - 8,
@@ -841,7 +2003,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-x)"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "text",
                       {
                         x: guide.position - RULER_SIZE + 16,
@@ -853,8 +2015,8 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                       }
                     )
                   ] }, guide.id)),
-                  dragOrientation === "vertical" && dragPosition !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  dragOrientation === "vertical" && dragPosition !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "rect",
                       {
                         x: dragPosition - RULER_SIZE - 8,
@@ -864,7 +2026,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-x)"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "text",
                       {
                         x: dragPosition - RULER_SIZE + 16,
@@ -881,7 +2043,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "msr:absolute msr:bottom-0 msr:left-0 msr:top-[18px] msr:w-[18px] msr:overflow-hidden msr:bg-white",
@@ -889,13 +2051,13 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
               boxShadow: "1px 0 3px rgba(0, 0, 0, 0.12)",
               width: RULER_SIZE,
               cursor: "ew-resize",
-              pointerEvents: "auto"
+              pointerEvents: showRulers ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("vertical", event),
             onPointerMove: moveGuide,
             onPointerUp: finishGuideDrag,
             onPointerCancel: cancelGuideDrag,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "svg",
               {
                 className: "msr:block msr:w-6",
@@ -903,7 +2065,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                 height: RULER_LENGTH,
                 viewBox: `0 0 ${RULER_SIZE} ${RULER_LENGTH}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                     "linearGradient",
                     {
                       id: "ruler-label-fade-y",
@@ -911,18 +2073,18 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                       y2: "100%",
                       gradientUnits: "objectBoundingBox",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0.2", stopColor: "white" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0.8", stopColor: "white" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0.2", stopColor: "white" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "0.8", stopColor: "white" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
                       ]
                     }
                   ) }),
                   ticks.map((y) => {
                     const major = y % 100 === 0;
                     const medium = y % 50 === 0;
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "line",
                         {
                           x1: RULER_SIZE,
@@ -933,7 +2095,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                           strokeWidth: "1"
                         }
                       ),
-                      major ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      major ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "text",
                         {
                           x: "8",
@@ -945,8 +2107,8 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                       ) : null
                     ] }, y);
                   }),
-                  selectedHorizontalGuides.map((guide) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  selectedHorizontalGuides.map((guide) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "rect",
                       {
                         x: "-3",
@@ -956,7 +2118,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-y)"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "text",
                       {
                         x: "9",
@@ -969,8 +2131,8 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                       }
                     )
                   ] }, guide.id)),
-                  dragOrientation === "horizontal" && dragPosition !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  dragOrientation === "horizontal" && dragPosition !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "rect",
                       {
                         x: "-3",
@@ -980,7 +2142,7 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
                         fill: "url(#ruler-label-fade-y)"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "text",
                       {
                         x: "9",
@@ -998,34 +2160,34 @@ var RulersOverlay = (0, import_react2.memo)(function RulersOverlay2({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "msr:absolute msr:left-0 msr:top-0 msr:size-[18px] msr:bg-white" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "msr:absolute msr:left-0 msr:top-0 msr:size-[18px] msr:bg-white" })
       ]
     }
   );
 });
 
 // hooks/use-drag-state.ts
-var import_react3 = require("react");
+var import_react6 = require("react");
 var useDragState = () => {
-  const [start, setStart] = (0, import_react3.useState)(null);
-  const [end, setEnd] = (0, import_react3.useState)(null);
-  const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
+  const [start, setStart] = (0, import_react6.useState)(null);
+  const [end, setEnd] = (0, import_react6.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
   return { start, setStart, end, setEnd, isDragging, setIsDragging };
 };
 
 // hooks/use-guide-drag-hold.ts
-var import_react4 = require("react");
+var import_react7 = require("react");
 var useGuideDragHold = (eventTarget) => {
-  const guideDragHoldTimerRef = (0, import_react4.useRef)(null);
-  const guideDragHoldGuideIdRef = (0, import_react4.useRef)(null);
-  const clearGuideDragHold = (0, import_react4.useCallback)(() => {
+  const guideDragHoldTimerRef = (0, import_react7.useRef)(null);
+  const guideDragHoldGuideIdRef = (0, import_react7.useRef)(null);
+  const clearGuideDragHold = (0, import_react7.useCallback)(() => {
     if (guideDragHoldTimerRef.current !== null) {
       eventTarget.clearTimeout(guideDragHoldTimerRef.current);
       guideDragHoldTimerRef.current = null;
     }
     guideDragHoldGuideIdRef.current = null;
   }, []);
-  const scheduleGuideDragHold = (0, import_react4.useCallback)(
+  const scheduleGuideDragHold = (0, import_react7.useCallback)(
     (id, onHold) => {
       clearGuideDragHold();
       guideDragHoldGuideIdRef.current = id;
@@ -1044,11 +2206,11 @@ var useGuideDragHold = (eventTarget) => {
 };
 
 // hooks/use-guide-state.ts
-var import_react5 = require("react");
+var import_react8 = require("react");
 var useGuideState = (options = {}) => {
-  const [guides, setGuides] = (0, import_react5.useState)(options.initialGuides ?? []);
-  const [draggingGuideId, setDraggingGuideId] = (0, import_react5.useState)(null);
-  const [selectedGuideIds, setSelectedGuideIds] = (0, import_react5.useState)(
+  const [guides, setGuides] = (0, import_react8.useState)(options.initialGuides ?? []);
+  const [draggingGuideId, setDraggingGuideId] = (0, import_react8.useState)(null);
+  const [selectedGuideIds, setSelectedGuideIds] = (0, import_react8.useState)(
     options.initialSelectedGuideIds ?? []
   );
   return {
@@ -1062,67 +2224,91 @@ var useGuideState = (options = {}) => {
 };
 
 // hooks/use-hotkeys.ts
-var import_react6 = require("react");
+var import_react9 = require("react");
 var useHotkeys = (options) => {
-  (0, import_react6.useEffect)(() => {
+  const optionsRef = (0, import_react9.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react9.useEffect)(() => {
     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();
         }
@@ -1130,7 +2316,7 @@ var useHotkeys = (options) => {
     };
     const handleKeyUp = (event) => {
       if (event.key === "Alt") {
-        options.setAltPressed(false);
+        optionsRef.current.setAltPressed(false);
       }
     };
     target.addEventListener("keydown", handleKeyDown);
@@ -1139,11 +2325,11 @@ var useHotkeys = (options) => {
       target.removeEventListener("keydown", handleKeyDown);
       target.removeEventListener("keyup", handleKeyUp);
     };
-  }, [options]);
+  }, [options.eventTarget]);
 };
 
 // hooks/use-live-element-tracking.ts
-var import_react7 = require("react");
+var import_react10 = require("react");
 
 // core/geometry.ts
 var getViewportSize = (ownerWindow) => ({
@@ -1169,7 +2355,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) => {
@@ -1233,10 +2419,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
   );
@@ -1403,19 +2589,23 @@ var updateMeasurementForResize = (measurement, viewport = getViewportSize(), own
 
 // hooks/use-live-element-tracking.ts
 var useLiveElementTracking = (params) => {
-  const frameRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const paramsRef = (0, import_react10.useRef)(params);
+  paramsRef.current = params;
+  const frameRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    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);
@@ -1428,8 +2618,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;
@@ -1440,10 +2630,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;
@@ -1455,7 +2645,7 @@ var useLiveElementTracking = (params) => {
             rectB,
             distance.elementRefA,
             distance.elementRefB,
-            params.window
+            ownerWindow
           );
           return {
             ...updated,
@@ -1463,62 +2653,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
-var import_react8 = require("react");
+var import_react11 = require("react");
 var useMeasureToggles = (options = {}) => {
-  const [enabled, setEnabled] = (0, import_react8.useState)(options.initialEnabled ?? true);
-  const [altPressed, setAltPressed] = (0, import_react8.useState)(false);
-  const [toolMode, setToolMode] = (0, import_react8.useState)(
+  const [enabled, setEnabled] = (0, import_react11.useState)(options.initialEnabled ?? true);
+  const [altPressed, setAltPressed] = (0, import_react11.useState)(false);
+  const [toolMode, setToolMode] = (0, import_react11.useState)(
     options.initialToolMode ?? "none"
   );
-  const [rulersVisible, setRulersVisible] = (0, import_react8.useState)(
+  const [rulersVisible, setRulersVisible] = (0, import_react11.useState)(
     options.initialRulersVisible ?? false
   );
   const holdEnabled = false;
-  const multiMeasureEnabled = false;
-  const snapGuidesEnabled = true;
+  const [multiMeasureEnabled, setMultiMeasureEnabled] = (0, import_react11.useState)(
+    options.initialMultiMeasureEnabled ?? false
+  );
+  const [snapGuidesEnabled, setSnapGuidesEnabled] = (0, import_react11.useState)(
+    options.initialSnapGuidesEnabled ?? true
+  );
+  const [selectNewGuideEnabled, setSelectNewGuideEnabled] = (0, import_react11.useState)(
+    options.initialSelectNewGuideEnabled ?? true
+  );
   const guidesEnabled = toolMode === "guides";
-  const snapEnabled = true;
+  const [snapEnabled, setSnapEnabled] = (0, import_react11.useState)(options.initialSnapEnabled ?? true);
   return {
     enabled,
     setEnabled,
@@ -1532,21 +2731,26 @@ var useMeasureToggles = (options = {}) => {
     guidesEnabled,
     multiMeasureEnabled,
     snapGuidesEnabled,
-    snapEnabled
+    setSnapGuidesEnabled,
+    selectNewGuideEnabled,
+    setSelectNewGuideEnabled,
+    snapEnabled,
+    setSnapEnabled,
+    setMultiMeasureEnabled
   };
 };
 
 // hooks/use-measurement-state.ts
-var import_react9 = require("react");
+var import_react12 = require("react");
 var useMeasurementState = (options = {}) => {
-  const [activeMeasurement, setActiveMeasurement] = (0, import_react9.useState)(options.initialActiveMeasurement ?? null);
-  const [measurements, setMeasurements] = (0, import_react9.useState)(
+  const [activeMeasurement, setActiveMeasurement] = (0, import_react12.useState)(options.initialActiveMeasurement ?? null);
+  const [measurements, setMeasurements] = (0, import_react12.useState)(
     options.initialMeasurements ?? []
   );
-  const [selectedMeasurement, setSelectedMeasurement] = (0, import_react9.useState)(null);
-  const [selectedMeasurements, setSelectedMeasurements] = (0, import_react9.useState)([]);
-  const [hoverRect, setHoverRect] = (0, import_react9.useState)(null);
-  const [heldDistances, setHeldDistances] = (0, import_react9.useState)(
+  const [selectedMeasurement, setSelectedMeasurement] = (0, import_react12.useState)(null);
+  const [selectedMeasurements, setSelectedMeasurements] = (0, import_react12.useState)([]);
+  const [hoverRect, setHoverRect] = (0, import_react12.useState)(null);
+  const [heldDistances, setHeldDistances] = (0, import_react12.useState)(
     options.initialHeldDistances ?? []
   );
   return {
@@ -1566,7 +2770,7 @@ var useMeasurementState = (options = {}) => {
 };
 
 // hooks/use-measurer-derived.ts
-var import_react10 = require("react");
+var import_react13 = require("react");
 
 // core/edge-visibility.ts
 var rangesOverlap = (a1, a2, b1, b2) => Math.min(a2, b2) - Math.max(a1, b1) > 0;
@@ -1835,7 +3039,7 @@ var useMeasurerDerived = ({
   highlightColor,
   guideColor
 }) => {
-  const activeRect = (0, import_react10.useMemo)(() => {
+  const activeRect = (0, import_react13.useMemo)(() => {
     if (!start || !end) return null;
     return {
       left: Math.min(start.x, end.x),
@@ -1846,7 +3050,7 @@ var useMeasurerDerived = ({
   }, [end, start]);
   const activeWidth = activeRect ? formatValue(activeRect.width) : 0;
   const activeHeight = activeRect ? formatValue(activeRect.height) : 0;
-  const groupedSelection = (0, import_react10.useMemo)(() => {
+  const groupedSelection = (0, import_react13.useMemo)(() => {
     if (selectedMeasurements.length <= 1) return null;
     const selectionKey = selectedMeasurements.map((measurement) => measurement.id).join("|");
     const rects = selectedMeasurements.map((measurement) => measurement.rect);
@@ -1876,24 +3080,24 @@ var useMeasurerDerived = ({
       originRect: selectionOriginRect ?? void 0
     };
   }, [selectedMeasurements, selectionOriginRect]);
-  const displayedSelectedMeasurements = (0, import_react10.useMemo)(
+  const displayedSelectedMeasurements = (0, import_react13.useMemo)(
     () => groupedSelection ? [groupedSelection] : selectedMeasurements.length > 0 ? selectedMeasurements : selectedMeasurement ? [selectedMeasurement] : [],
     [groupedSelection, selectedMeasurement, selectedMeasurements]
   );
-  const selectedGuide = (0, import_react10.useMemo)(
+  const selectedGuide = (0, import_react13.useMemo)(
     () => getSelectedGuide(guides, selectedGuideIds),
     [guides, selectedGuideIds]
   );
-  const hoverGuide = (0, import_react10.useMemo)(
+  const hoverGuide = (0, import_react13.useMemo)(
     () => getHoveredGuide(hoverPointer, guides),
     [guides, hoverPointer]
   );
-  const primarySelectedMeasurement = (0, import_react10.useMemo)(
+  const primarySelectedMeasurement = (0, import_react13.useMemo)(
     () => getPrimarySelectedMeasurement(selectedMeasurements, selectedMeasurement),
     [selectedMeasurement, selectedMeasurements]
   );
   const effectivePrimarySelected = groupedSelection ?? primarySelectedMeasurement;
-  const optionPairOverlay = (0, import_react10.useMemo)(() => {
+  const optionPairOverlay = (0, import_react13.useMemo)(() => {
     return getOptionPairOverlay({
       altPressed,
       primarySelectedMeasurement: effectivePrimarySelected,
@@ -1912,7 +3116,7 @@ var useMeasurerDerived = ({
     selectedElement,
     selectedGuide
   ]);
-  const optionContainerLines = (0, import_react10.useMemo)(() => {
+  const optionContainerLines = (0, import_react13.useMemo)(() => {
     return getOptionContainerLines({
       altPressed,
       primarySelectedMeasurement: effectivePrimarySelected,
@@ -1931,7 +3135,7 @@ var useMeasurerDerived = ({
     selectedElement,
     selectedGuideIds
   ]);
-  const guideDistanceOverlay = (0, import_react10.useMemo)(() => {
+  const guideDistanceOverlay = (0, import_react13.useMemo)(() => {
     if (!altPressed || !guidesEnabled) return null;
     if (selectedGuide && hoverGuide && selectedGuide.id !== hoverGuide.id) {
       return getDistanceOverlay(
@@ -1983,7 +3187,7 @@ var useMeasurerDerived = ({
     guideColorHover,
     guideColorDefault,
     guideColorPreview
-  } = (0, import_react10.useMemo)(
+  } = (0, import_react13.useMemo)(
     () => ({
       outlineColor: `color-mix(in oklch, ${highlightColor} 80%, transparent)`,
       fillColor: `color-mix(in oklch, ${highlightColor} 8%, transparent)`,
@@ -1994,12 +3198,12 @@ var useMeasurerDerived = ({
     }),
     [guideColor, highlightColor]
   );
-  const selectedRects = (0, import_react10.useMemo)(
+  const selectedRects = (0, import_react13.useMemo)(
     () => displayedSelectedMeasurements.map((measurement) => measurement.rect),
     [displayedSelectedMeasurements]
   );
   const hoverRectToShow = hoverHighlightEnabled && hoverRect && selectedMeasurements.length <= 1 ? hoverRect : null;
-  const selectionEdgeVisibility = (0, import_react10.useMemo)(
+  const selectionEdgeVisibility = (0, import_react13.useMemo)(
     () => getEdgeVisibilityForRects(selectedRects),
     [selectedRects]
   );
@@ -2008,7 +3212,7 @@ var useMeasurerDerived = ({
     selectedRects.length
   );
   const hoverEdgeVisibility = hoverRectToShow ? { top: true, right: true, bottom: true, left: true } : null;
-  const measurementEdgeVisibility = (0, import_react10.useMemo)(
+  const measurementEdgeVisibility = (0, import_react13.useMemo)(
     () => getEdgeVisibilityForRects(displayedMeasurements.map((m) => m.rect)),
     [displayedMeasurements]
   );
@@ -2036,7 +3240,7 @@ var useMeasurerDerived = ({
 };
 
 // hooks/use-measurer-history.ts
-var import_react11 = require("react");
+var import_react14 = require("react");
 var HISTORY_LIMIT = 50;
 var useMeasurerHistory = ({
   toggles,
@@ -2082,10 +3286,10 @@ var useMeasurerHistory = ({
     setSelectedElement,
     clearSelectionRect
   } = transient;
-  const historyRef = (0, import_react11.useRef)([]);
-  const futureRef = (0, import_react11.useRef)([]);
-  const historySignatureRef = (0, import_react11.useRef)(null);
-  const captureSnapshot = (0, import_react11.useCallback)(() => {
+  const historyRef = (0, import_react14.useRef)([]);
+  const futureRef = (0, import_react14.useRef)([]);
+  const historySignatureRef = (0, import_react14.useRef)(null);
+  const captureSnapshot = (0, import_react14.useCallback)(() => {
     return {
       enabled,
       toolMode,
@@ -2112,7 +3316,7 @@ var useMeasurerHistory = ({
     selectedMeasurements,
     toolMode
   ]);
-  const getSnapshotSignature = (0, import_react11.useCallback)((snapshot) => {
+  const getSnapshotSignature = (0, import_react14.useCallback)((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",
@@ -2128,7 +3332,7 @@ var useMeasurerHistory = ({
       snapshot.draggingGuideId ?? ""
     ].join("|");
   }, []);
-  const recordSnapshot = (0, import_react11.useCallback)(() => {
+  const recordSnapshot = (0, import_react14.useCallback)(() => {
     const snapshot = captureSnapshot();
     const signature = getSnapshotSignature(snapshot);
     if (historySignatureRef.current === signature) return;
@@ -2139,7 +3343,7 @@ var useMeasurerHistory = ({
       historyRef.current.shift();
     }
   }, [captureSnapshot, getSnapshotSignature]);
-  const restoreSnapshot = (0, import_react11.useCallback)(
+  const restoreSnapshot = (0, import_react14.useCallback)(
     (snapshot) => {
       setEnabled(snapshot.enabled);
       setToolMode(snapshot.toolMode);
@@ -2184,7 +3388,7 @@ var useMeasurerHistory = ({
       setHoverElement
     ]
   );
-  const undo = (0, import_react11.useCallback)(() => {
+  const undo = (0, import_react14.useCallback)(() => {
     const previousSnapshot = historyRef.current.pop();
     if (!previousSnapshot) return;
     const currentSnapshot = captureSnapshot();
@@ -2195,7 +3399,7 @@ var useMeasurerHistory = ({
     historySignatureRef.current = null;
     restoreSnapshot(previousSnapshot);
   }, [captureSnapshot, restoreSnapshot]);
-  const redo = (0, import_react11.useCallback)(() => {
+  const redo = (0, import_react14.useCallback)(() => {
     const nextSnapshot = futureRef.current.pop();
     if (!nextSnapshot) return;
     historyRef.current.push(captureSnapshot());
@@ -2205,7 +3409,7 @@ var useMeasurerHistory = ({
     historySignatureRef.current = null;
     restoreSnapshot(nextSnapshot);
   }, [captureSnapshot, restoreSnapshot]);
-  const setToolModeWithHistory = (0, import_react11.useCallback)(
+  const setToolModeWithHistory = (0, import_react14.useCallback)(
     (value) => {
       setToolMode((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -2216,7 +3420,7 @@ var useMeasurerHistory = ({
     },
     [recordSnapshot, setToolMode]
   );
-  const setGuideOrientationWithHistory = (0, import_react11.useCallback)(
+  const setGuideOrientationWithHistory = (0, import_react14.useCallback)(
     (value) => {
       setGuideOrientation((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -2227,7 +3431,7 @@ var useMeasurerHistory = ({
     },
     [recordSnapshot, setGuideOrientation]
   );
-  const setEnabledWithHistory = (0, import_react11.useCallback)(
+  const setEnabledWithHistory = (0, import_react14.useCallback)(
     (value) => {
       setEnabled((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -2238,7 +3442,7 @@ var useMeasurerHistory = ({
     },
     [recordSnapshot, setEnabled]
   );
-  const createActionCommit = (0, import_react11.useCallback)(() => {
+  const createActionCommit = (0, import_react14.useCallback)(() => {
     let committed = false;
     return () => {
       if (committed) return;
@@ -2258,35 +3462,35 @@ var useMeasurerHistory = ({
 };
 
 // hooks/use-measurer-local-state.ts
-var import_react12 = require("react");
+var import_react15 = require("react");
 var useMeasurerLocalState = ({
   selectedElementRef,
   hoverElementRef,
   selectionRectRef
 }) => {
-  const [selectionOriginRect, setSelectionOriginRect] = (0, import_react12.useState)(
+  const [selectionOriginRect, setSelectionOriginRect] = (0, import_react15.useState)(
     null
   );
-  const [hoverPointer, setHoverPointer] = (0, import_react12.useState)(null);
-  const [hoverElement, setHoverElementState] = (0, import_react12.useState)(
+  const [hoverPointer, setHoverPointer] = (0, import_react15.useState)(null);
+  const [hoverElement, setHoverElementState] = (0, import_react15.useState)(
     null
   );
-  const [selectedElement, setSelectedElementState] = (0, import_react12.useState)(null);
-  const setSelectedElement = (0, import_react12.useCallback)(
+  const [selectedElement, setSelectedElementState] = (0, import_react15.useState)(null);
+  const setSelectedElement = (0, import_react15.useCallback)(
     (element) => {
       selectedElementRef.current = element;
       setSelectedElementState(element);
     },
     [selectedElementRef]
   );
-  const setHoverElement = (0, import_react12.useCallback)(
+  const setHoverElement = (0, import_react15.useCallback)(
     (element) => {
       hoverElementRef.current = element;
       setHoverElementState(element);
     },
     [hoverElementRef]
   );
-  const clearSelectionRect = (0, import_react12.useCallback)(() => {
+  const clearSelectionRect = (0, import_react15.useCallback)(() => {
     selectionRectRef.current = null;
     setSelectionOriginRect(null);
   }, [selectionRectRef]);
@@ -2304,7 +3508,7 @@ var useMeasurerLocalState = ({
 };
 
 // hooks/use-measurer-pointer.ts
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // core/targets.ts
 var pickMultiTargets = (selectionRect, items) => {
@@ -2507,10 +3711,12 @@ var useMeasurerPointer = ({
   clearGuideDragHold,
   scheduleGuideDragHold,
   enabled,
+  settingsOpen,
   toolMode,
   guidesEnabled,
   snapEnabled,
   snapGuidesEnabled,
+  selectNewGuideEnabled,
   altPressed,
   guideOrientation,
   hoverHighlightEnabled,
@@ -2543,24 +3749,24 @@ var useMeasurerPointer = ({
   setHoverPointer,
   clearSelectionRect
 }) => {
-  const hoverFrameRef = (0, import_react13.useRef)(null);
-  const hoverPointRef = (0, import_react13.useRef)(null);
-  const selectionCacheRef = (0, import_react13.useRef)({
+  const hoverFrameRef = (0, import_react16.useRef)(null);
+  const hoverPointRef = (0, import_react16.useRef)(null);
+  const selectionCacheRef = (0, import_react16.useRef)({
     key: "",
     entries: [],
     overlayNode: null,
     frame: -1
   });
-  const shiftDragRef = (0, import_react13.useRef)(false);
-  const shiftToggleElementRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const shiftDragRef = (0, import_react16.useRef)(false);
+  const shiftToggleElementRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     return () => {
       if (hoverFrameRef.current) {
         window2.cancelAnimationFrame(hoverFrameRef.current);
       }
     };
   }, []);
-  const updateHoverTarget = (0, import_react13.useCallback)(
+  const updateHoverTarget = (0, import_react16.useCallback)(
     (point) => {
       const target = getTargetElement(point, overlayRef.current, document2);
       if (target) {
@@ -2579,18 +3785,19 @@ var useMeasurerPointer = ({
     },
     [document2, overlayRef, setHoverElement, setHoverRect]
   );
-  const updateHoverElement = (0, import_react13.useCallback)(
+  const updateHoverElement = (0, import_react16.useCallback)(
     (point) => {
       const target = getTargetElement(point, overlayRef.current, document2);
       setHoverElement(target);
     },
     [document2, overlayRef, setHoverElement]
   );
-  const handlePointerDown = (0, import_react13.useCallback)(
+  const handlePointerDown = (0, import_react16.useCallback)(
     (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();
@@ -2615,7 +3822,11 @@ var useMeasurerPointer = ({
         return;
       }
       if (guidesEnabled) {
+        event.preventDefault();
         commit();
+        setStart(null);
+        setEnd(null);
+        setIsDragging(false);
         const position = getSnapGuidePosition({
           orientation: guideOrientation,
           point,
@@ -2626,7 +3837,7 @@ var useMeasurerPointer = ({
           document: document2
         });
         const id = createId();
-        setSelectedGuideIds([id]);
+        setSelectedGuideIds(selectNewGuideEnabled ? [id] : []);
         setGuides((prev) => [
           ...prev,
           { id, orientation: guideOrientation, position }
@@ -2651,12 +3862,14 @@ var useMeasurerPointer = ({
       draggingGuideId,
       document2,
       enabled,
+      settingsOpen,
       guideOrientation,
       guides,
       guidesEnabled,
       optionPairOverlay,
       overlayRef,
       scheduleGuideDragHold,
+      selectNewGuideEnabled,
       selectedGuideIds.length,
       selectedMeasurements,
       setDraggingGuideId,
@@ -2671,10 +3884,11 @@ var useMeasurerPointer = ({
       toolbarRef
     ]
   );
-  const handlePointerMove = (0, import_react13.useCallback)(
+  const handlePointerMove = (0, import_react16.useCallback)(
     (event) => {
       const toolbarNode = toolbarRef.current;
       if (toolbarNode && toolbarNode.contains(event.target)) return;
+      if (settingsOpen) return;
       if (!enabled) return;
       if (toolMode === "none") {
         if (hoverHighlightEnabled) {
@@ -2693,7 +3907,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 {
@@ -2743,6 +3957,7 @@ var useMeasurerPointer = ({
           )
         );
       }
+      if (guidesEnabled) return;
       if (!start) return;
       setEnd(point);
       if (!isDragging) {
@@ -2758,6 +3973,7 @@ var useMeasurerPointer = ({
       altPressed,
       draggingGuideId,
       enabled,
+      settingsOpen,
       hoverHighlightEnabled,
       guides,
       guidesEnabled,
@@ -2780,13 +3996,20 @@ var useMeasurerPointer = ({
       updateHoverTarget
     ]
   );
-  const handlePointerUp = (0, import_react13.useCallback)(
+  const handlePointerUp = (0, import_react16.useCallback)(
     (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);
@@ -2957,7 +4180,9 @@ var useMeasurerPointer = ({
       createActionCommit,
       draggingGuideId,
       enabled,
+      settingsOpen,
       end,
+      guidesEnabled,
       hoverHighlightEnabled,
       isDragging,
       overlayRef,
@@ -2980,7 +4205,7 @@ var useMeasurerPointer = ({
       toolbarRef
     ]
   );
-  const handlePointerLeave = (0, import_react13.useCallback)(() => {
+  const handlePointerLeave = (0, import_react16.useCallback)(() => {
     clearGuideDragHold();
     setStart(null);
     setEnd(null);
@@ -3004,54 +4229,58 @@ var useMeasurerPointer = ({
 };
 
 // hooks/use-overlay-refs.ts
-var import_react14 = require("react");
+var import_react17 = require("react");
 var useOverlayRefs = () => {
-  const overlayRef = (0, import_react14.useRef)(null);
-  const selectedElementRef = (0, import_react14.useRef)(null);
-  const hoverElementRef = (0, import_react14.useRef)(null);
+  const overlayRef = (0, import_react17.useRef)(null);
+  const selectedElementRef = (0, import_react17.useRef)(null);
+  const hoverElementRef = (0, import_react17.useRef)(null);
   return { overlayRef, selectedElementRef, hoverElementRef };
 };
 
 // hooks/use-resize-sync.ts
-var import_react15 = require("react");
+var import_react18 = require("react");
 var useResizeSync = (params) => {
-  const resizeFrameRef = (0, import_react15.useRef)(null);
-  const viewportRef = (0, import_react15.useRef)(getViewportSize(params.window));
-  (0, import_react15.useEffect)(() => {
+  const paramsRef = (0, import_react18.useRef)(params);
+  paramsRef.current = params;
+  const resizeFrameRef = (0, import_react18.useRef)(null);
+  const viewportRef = (0, import_react18.useRef)(getViewportSize(params.window));
+  (0, import_react18.useEffect)(() => {
+    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 }
             )
@@ -3060,27 +4289,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
-var import_react19 = require("react");
+var import_react22 = require("react");
 
 // components/measure-tag.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MeasureTag({
   children,
   className = "",
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: cn(
@@ -3094,21 +4323,21 @@ function MeasureTag({
 }
 
 // components/measurement-box.tsx
-var import_react16 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var formatValue2 = (value) => Math.round(value);
-var MeasurementBox = (0, import_react16.memo)(function MeasurementBox2({
+var MeasurementBox = (0, import_react19.memo)(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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "msr:pointer-events-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "msr:pointer-events-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: "msr:absolute",
@@ -3121,28 +4350,28 @@ var MeasurementBox = (0, import_react16.memo)(function MeasurementBox2({
           transition: `left ${transitionMs}ms ease, top ${transitionMs}ms ease, width ${transitionMs}ms ease, height ${transitionMs}ms ease`
         },
         children: [
-          edges.top ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          edges.top ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.right ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          edges.right ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.bottom ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          edges.bottom ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.left ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          edges.left ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3152,7 +4381,7 @@ var MeasurementBox = (0, import_react16.memo)(function MeasurementBox2({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       MeasureTag,
       {
         className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3172,21 +4401,21 @@ var MeasurementBox = (0, import_react16.memo)(function MeasurementBox2({
 });
 
 // components/selected-measurement-box.tsx
-var import_react17 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var formatValue3 = (value) => Math.round(value);
-var SelectedMeasurementBox = (0, import_react17.memo)(function SelectedMeasurementBox2({
+var SelectedMeasurementBox = (0, import_react20.memo)(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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "msr:pointer-events-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "msr:pointer-events-none", "data-mesurer-selected-measurement": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         className: "msr:absolute",
@@ -3199,28 +4428,28 @@ var SelectedMeasurementBox = (0, import_react17.memo)(function SelectedMeasureme
           transition: `left ${transitionMs}ms ease, top ${transitionMs}ms ease, width ${transitionMs}ms ease, height ${transitionMs}ms ease`
         },
         children: [
-          edges.top ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          edges.top ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.right ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          edges.right ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.bottom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          edges.bottom ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
               style: { backgroundColor: outlineColor }
             }
           ) : null,
-          edges.left ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          edges.left ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3230,7 +4459,7 @@ var SelectedMeasurementBox = (0, import_react17.memo)(function SelectedMeasureme
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       MeasureTag,
       {
         className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3250,14 +4479,14 @@ var SelectedMeasurementBox = (0, import_react17.memo)(function SelectedMeasureme
 });
 
 // render/distance-overlay-item.tsx
-var import_react18 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2({
+var import_react21 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DistanceOverlayItem = (0, import_react21.memo)(function DistanceOverlayItem2({
   distance,
   labelOffset,
   onRemove
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: onRemove ? "msr:pointer-events-auto" : "msr:pointer-events-none",
@@ -3266,7 +4495,7 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
         onRemove(distance.id);
       } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
@@ -3278,7 +4507,7 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
@@ -3291,7 +4520,7 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
           }
         ),
         distance.connectors.map(
-          (connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          (connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               className: "msr:absolute msr:border-l msr:border-dashed msr:border-[#2563eb]/70",
@@ -3302,7 +4531,7 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
               }
             },
             `${distance.id}-connector-${index}`
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               className: "msr:absolute msr:border-t msr:border-dashed msr:border-[#2563eb]/70",
@@ -3315,8 +4544,8 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
             `${distance.id}-connector-${index}`
           )
         ),
-        distance.horizontal && distance.horizontal.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        distance.horizontal && distance.horizontal.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
@@ -3327,7 +4556,7 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             MeasureTag,
             {
               className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3339,8 +4568,8 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
             }
           )
         ] }) : null,
-        distance.vertical && distance.vertical.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        distance.vertical && distance.vertical.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
@@ -3351,7 +4580,7 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             MeasureTag,
             {
               className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
@@ -3369,9 +4598,10 @@ var DistanceOverlayItem = (0, import_react18.memo)(function DistanceOverlayItem2
 });
 
 // render/measurer-overlay.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MeasurerOverlay = (0, import_react22.memo)(function MeasurerOverlay2({
   enabled,
+  interactive = true,
   toolMode,
   guidePointerEvents,
   guidesEnabled,
@@ -3401,6 +4631,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
   guideColorActive,
   guideColorHover,
   guideColorDefault,
+  guideStyle,
   onPointerDown,
   onPointerMove,
   onPointerUp,
@@ -3411,30 +4642,32 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
   onGuidePointerCancel
 }) {
   const overlayVisible = enabled;
-  const overlayInteractive = overlayVisible && toolMode !== "none" && toolMode !== "text-inspector" && toolMode !== "xray" && toolMode !== "rulers";
-  const selectionVisible = toolMode === "select";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const overlayInteractive = interactive && overlayVisible && toolMode !== "none" && toolMode !== "text-inspector" && toolMode !== "xray" && toolMode !== "rulers";
+  const selectionVisible = interactive && toolMode === "select";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "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__ */ (0, import_jsx_runtime8.jsx)(
+        selectionVisible ? displayedMeasurements.map((measurement, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        selectionVisible && activeRect && isDragging ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "msr:pointer-events-none msr:absolute",
@@ -3446,28 +4679,28 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
                 backgroundColor: fillColor
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "div",
                   {
                     className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
                     style: { backgroundColor: outlineColor }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "div",
                   {
                     className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
                     style: { backgroundColor: outlineColor }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "div",
                   {
                     className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
                     style: { backgroundColor: outlineColor }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "div",
                   {
                     className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3477,7 +4710,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             MeasureTag,
             {
               className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3493,7 +4726,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
             }
           )
         ] }) : null,
-        selectionVisible && hoverRectToShow ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        selectionVisible && hoverRectToShow ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             className: "msr:pointer-events-none msr:absolute",
@@ -3505,28 +4738,28 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               backgroundColor: fillColor
             },
             children: [
-              hoverEdgeVisibility?.top ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              hoverEdgeVisibility?.top ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
                   style: { backgroundColor: outlineColor }
                 }
               ) : null,
-              hoverEdgeVisibility?.right ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              hoverEdgeVisibility?.right ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
                   style: { backgroundColor: outlineColor }
                 }
               ) : null,
-              hoverEdgeVisibility?.bottom ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              hoverEdgeVisibility?.bottom ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
                   style: { backgroundColor: outlineColor }
                 }
               ) : null,
-              hoverEdgeVisibility?.left ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              hoverEdgeVisibility?.left ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
@@ -3536,7 +4769,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
             ]
           }
         ) : null,
-        guidesEnabled && guidePreview ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        interactive && guidesEnabled && guidePreview ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             className: "msr:pointer-events-none msr:absolute",
@@ -3551,7 +4784,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               height: GUIDE_HITBOX_SIZE,
               width: "100%"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
                 className: "msr:absolute",
@@ -3572,17 +4805,19 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
             )
           }
         ) : null,
-        selectionVisible ? displayedSelectedMeasurements.map((measurement, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        selectionVisible ? displayedSelectedMeasurements.map((measurement, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           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__ */ (0, import_jsx_runtime8.jsx)(
+        interactive ? heldDistances.map((distance) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           DistanceOverlayItem,
           {
             distance,
@@ -3590,8 +4825,8 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
             onRemove: onRemoveHeldDistance
           },
           `held-${distance.id}`
-        )),
-        selectionVisible && altPressed && optionPairOverlay ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        )) : null,
+        selectionVisible && altPressed && optionPairOverlay ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           DistanceOverlayItem,
           {
             distance: optionPairOverlay,
@@ -3599,7 +4834,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
           },
           `option-${optionPairOverlay.id}`
         ) : null,
-        guidesEnabled && altPressed && guideDistanceOverlay ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        interactive && guidesEnabled && altPressed && guideDistanceOverlay ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           DistanceOverlayItem,
           {
             distance: guideDistanceOverlay,
@@ -3607,9 +4842,9 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
           },
           `guide-preview-${guideDistanceOverlay.id}`
         ) : null,
-        selectionVisible && altPressed && optionContainerLines ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          optionContainerLines.top.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        selectionVisible && altPressed && optionContainerLines ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          optionContainerLines.top.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
                 className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
@@ -3620,7 +4855,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               MeasureTag,
               {
                 className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
@@ -3632,8 +4867,8 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               }
             )
           ] }) : null,
-          optionContainerLines.bottom.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          optionContainerLines.bottom.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
                 className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
@@ -3644,7 +4879,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               MeasureTag,
               {
                 className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
@@ -3656,8 +4891,8 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               }
             )
           ] }) : null,
-          optionContainerLines.left.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          optionContainerLines.left.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
                 className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
@@ -3668,7 +4903,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               MeasureTag,
               {
                 className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3680,8 +4915,8 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               }
             )
           ] }) : null,
-          optionContainerLines.right.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          optionContainerLines.right.value > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
                 className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
@@ -3692,7 +4927,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               MeasureTag,
               {
                 className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
@@ -3708,9 +4943,12 @@ var MeasurerOverlay = (0, import_react19.memo)(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__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
               className: "msr:absolute",
@@ -3731,7 +4969,7 @@ var MeasurerOverlay = (0, import_react19.memo)(function MeasurerOverlay2({
               onPointerDown: (event) => onGuidePointerDown(guide, event),
               onPointerUp: (event) => onGuidePointerUp(guide, event),
               onPointerCancel: (event) => onGuidePointerCancel(guide, event),
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "msr:absolute",
@@ -3740,13 +4978,19 @@ var MeasurerOverlay = (0, import_react19.memo)(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
                   }
                 }
               )
@@ -4267,6 +5511,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;
   };
@@ -4564,7 +5809,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) => {
@@ -4647,8 +5892,223 @@ 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());
+      };
+      ownerWindow.addEventListener("storage", handleStorage);
+      return () => {
+        ownerWindow.removeEventListener("storage", handleStorage);
+      };
+    }
+  };
+};
+
 // measurer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var measurerInstanceCount = 0;
 var XRAY_STYLE_ID = "mesurer-xray-styles";
 var XRAY_STYLES = `
@@ -4660,13 +6120,17 @@ 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;
 }
 `;
 var subscribeHydration = () => () => {
 };
-var useHydrated = () => (0, import_react20.useSyncExternalStore)(
+var useHydrated = () => (0, import_react23.useSyncExternalStore)(
   subscribeHydration,
   () => true,
   () => false
@@ -4680,70 +6144,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 = (0, import_react20.useRef)(null);
+  const instanceIdRef = (0, import_react23.useRef)(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 = (0, import_react20.useRef)({
+  const tabIdRef = (0, import_react23.useRef)(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 = (0, import_react23.useRef)({
     x: ownerWindow.scrollX,
     y: ownerWindow.scrollY
   });
-  const textInspectorRef = (0, import_react20.useRef)(null);
+  const textInspectorRef = (0, import_react23.useRef)(null);
   if (!textInspectorRef.current) {
     textInspectorRef.current = createTextInspector({ portalTarget });
   }
   const textInspector = textInspectorRef.current;
-  const selectionRectRef = (0, import_react20.useRef)(null);
-  const toolbarRef = (0, import_react20.useRef)(null);
-  const selectionAnimationCleanupTimeoutRef = (0, import_react20.useRef)(null);
-  const guideDragRef = (0, import_react20.useRef)(null);
-  const guideUserSelectRef = (0, import_react20.useRef)(null);
-  const persistedState = (0, import_react20.useMemo)(() => {
-    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 = (0, import_react20.useRef)(false);
-  const toolModeRef = (0, import_react20.useRef)(
+  const selectionRectRef = (0, import_react23.useRef)(null);
+  const toolbarRef = (0, import_react23.useRef)(null);
+  const selectionAnimationCleanupTimeoutRef = (0, import_react23.useRef)(null);
+  const guideDragRef = (0, import_react23.useRef)(null);
+  const guideUserSelectRef = (0, import_react23.useRef)(null);
+  const persistenceErrorHandlerRef = (0, import_react23.useRef)(onPersistenceError);
+  persistenceErrorHandlerRef.current = onPersistenceError;
+  const activePersistence = (0, import_react23.useMemo)(() => {
+    const next = persistence ?? createLocalStoragePersistence(ownerWindow, storageKey, SETTINGS_STORAGE_KEY, legacyStorageKey);
+    next.setErrorHandler?.((error) => persistenceErrorHandlerRef.current?.(error));
+    return next;
+  }, [legacyStorageKey, ownerWindow, persistence, storageKey]);
+  const storedState = (0, import_react23.useMemo)(
+    () => activePersistence.load(),
+    [activePersistence]
+  );
+  const persistedState = persistOnReload || storedState?.settings.persistOnReload ? storedState?.workspace ?? null : null;
+  const persistedSettings = sanitizeStoredSettings(ownerWindow, storedState?.settings ?? {});
+  (0, import_react23.useEffect)(() => {
+    return () => activePersistence.setErrorHandler?.(void 0);
+  }, [activePersistence]);
+  const enabledRef = (0, import_react23.useRef)(false);
+  const toolModeRef = (0, import_react23.useRef)(
     persistedState?.toolMode === "rulers" ? "none" : persistedState?.toolMode ?? "none"
   );
-  const rulersVisibleRef = (0, import_react20.useRef)(
+  const rulersVisibleRef = (0, import_react23.useRef)(
     persistedState?.rulersVisible ?? persistedState?.toolMode === "rulers"
   );
-  const guideOrientationRef = (0, import_react20.useRef)(
+  const xrayVisibleRef = (0, import_react23.useRef)(persistedState?.xrayVisible ?? persistedState?.toolMode === "xray");
+  const guideOrientationRef = (0, import_react23.useRef)(
     persistedState?.guideOrientation ?? "vertical"
   );
-  const measurementsRef = (0, import_react20.useRef)(
+  const measurementsRef = (0, import_react23.useRef)(
     persistedState?.measurements ?? []
   );
-  const activeMeasurementRef = (0, import_react20.useRef)(
+  const activeMeasurementRef = (0, import_react23.useRef)(
     persistedState?.activeMeasurement ?? null
   );
-  const heldDistancesRef = (0, import_react20.useRef)(
+  const heldDistancesRef = (0, import_react23.useRef)(
     persistedState?.heldDistances ?? []
   );
-  const guidesRef = (0, import_react20.useRef)(persistedState?.guides ?? []);
-  const selectedGuideIdsRef = (0, import_react20.useRef)(
+  const guidesRef = (0, import_react23.useRef)(persistedState?.guides ?? []);
+  const selectedGuideIdsRef = (0, import_react23.useRef)(
     persistedState?.selectedGuideIds ?? []
   );
+  const workspacePersistTimeoutRef = (0, import_react23.useRef)(null);
+  const applyingExternalPersistenceRef = (0, import_react23.useRef)(false);
   const { overlayRef, selectedElementRef, hoverElementRef } = useOverlayRefs();
   const {
     selectionOriginRect,
@@ -4773,11 +6279,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 {
@@ -4809,11 +6324,58 @@ function MeasurerClient({
     initialGuides: persistedState?.guides ?? [],
     initialSelectedGuideIds: persistedState?.selectedGuideIds ?? []
   });
-  const [toolbarActive, setToolbarActive] = (0, import_react20.useState)(true);
+  const [toolbarActive, setToolbarActive] = (0, import_react23.useState)(true);
+  const [colorPickerActive, setColorPickerActive] = (0, import_react23.useState)(false);
+  const [colorPickerSample, setColorPickerSample] = (0, import_react23.useState)(null);
+  const [colorPickerUnsupported, setColorPickerUnsupported] = (0, import_react23.useState)(false);
+  const [settingsOpen, setSettingsOpen] = (0, import_react23.useState)(false);
+  const [settingsHighlightColor, setSettingsHighlightColor] = (0, import_react23.useState)(
+    persistedSettings.highlightColor ?? highlightColor
+  );
+  const [settingsGuideColor, setSettingsGuideColor] = (0, import_react23.useState)(
+    persistedSettings.guideColor ?? guideColor
+  );
+  const [settingsHoverHighlight, setSettingsHoverHighlight] = (0, import_react23.useState)(
+    persistedSettings.hoverHighlightEnabled ?? hoverHighlightEnabled
+  );
+  const [settingsPersistOnReload, setSettingsPersistOnReload] = (0, import_react23.useState)(
+    persistedSettings.persistOnReload ?? persistOnReload
+  );
+  const [settingsColorFormats, setSettingsColorFormats] = (0, import_react23.useState)(
+    persistedSettings.colorPickerFormats ?? colorPickerFormats
+  );
+  const [settingsColorClickFormat, setSettingsColorClickFormat] = (0, import_react23.useState)(
+    persistedSettings.colorPickerClickFormat ?? colorPickerClickFormat
+  );
+  const [settingsGuideStyle, setSettingsGuideStyle] = (0, import_react23.useState)({
+    ...guideStyleDefault,
+    ...persistedSettings.guideStyle
+  });
+  const [settingsRulerSettings, setSettingsRulerSettings] = (0, import_react23.useState)({
+    ...rulerSettingsDefault,
+    ...persistedSettings.rulerSettings
+  });
+  const [xrayVisible, setXrayVisible] = (0, import_react23.useState)(xrayVisibleRef.current);
   const { clearGuideDragHold, scheduleGuideDragHold } = useGuideDragHold(ownerWindow);
-  const [guidePreview, setGuidePreview] = (0, import_react20.useState)(null);
-  const [guideOrientation, setGuideOrientation] = (0, import_react20.useState)(persistedState?.guideOrientation ?? "vertical");
+  const [guidePreview, setGuidePreview] = (0, import_react23.useState)(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] = (0, import_react23.useState)(persistedState?.guideOrientation ?? "vertical");
   enabledRef.current = enabled;
+  xrayVisibleRef.current = xrayVisible;
   toolModeRef.current = toolMode;
   rulersVisibleRef.current = rulersVisible;
   guideOrientationRef.current = guideOrientation;
@@ -4822,29 +6384,173 @@ function MeasurerClient({
   heldDistancesRef.current = heldDistances;
   guidesRef.current = guides;
   selectedGuideIdsRef.current = selectedGuideIds;
-  const persistState = (0, import_react20.useCallback)(() => {
-    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 = (0, import_react23.useCallback)(() => {
+    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 = (0, import_react23.useCallback)(() => {
+    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 = (0, import_react23.useCallback)(() => {
+    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
+  ]);
+  (0, import_react23.useEffect)(() => {
+    if (applyingExternalPersistenceRef.current) {
+      applyingExternalPersistenceRef.current = false;
+      return;
+    }
+    persistSettings();
+    if (settingsPersistOnReload) persistState();
+  }, [persistSettings, persistState, settingsPersistOnReload]);
+  (0, import_react23.useEffect)(() => {
+    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 = (0, import_react23.useCallback)(() => {
+    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 = (0, import_react23.useCallback)(() => {
+    clearPersistedWorkspace();
+    activePersistence.clearWorkspace();
+  }, [activePersistence, clearPersistedWorkspace]);
+  const applyPersistedWorkspace = (0, import_react23.useCallback)((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 = (0, import_react23.useCallback)((snapshot) => {
+    if (!snapshot) {
+      clearPersistedWorkspace();
+      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 (!workspace) {
+      clearPersistedWorkspace();
+    } else if (settings.persistOnReload ?? settingsPersistOnReload) {
+      applyPersistedWorkspace(workspace);
     }
-  }, [persistOnReload, storageKey]);
-  const setEnabledPersisted = (0, import_react20.useCallback)(
+    ownerWindow.setTimeout(() => {
+      applyingExternalPersistenceRef.current = false;
+    }, 0);
+  }, [applyPersistedWorkspace, clearPersistedWorkspace, guideStyleDefault, ownerWindow, rulerSettingsDefault, setMultiMeasureEnabled, setSelectNewGuideEnabled, setSettingsColorClickFormat, setSettingsColorFormats, setSettingsGuideColor, setSettingsHighlightColor, setSettingsHoverHighlight, setSettingsPersistOnReload, setSnapEnabled, setSnapGuidesEnabled, settingsPersistOnReload]);
+  const previousPersistenceRef = (0, import_react23.useRef)(activePersistence);
+  (0, import_react23.useEffect)(() => {
+    if (previousPersistenceRef.current === activePersistence) return;
+    previousPersistenceRef.current = activePersistence;
+    applyPersistenceSnapshot(storedState);
+  }, [activePersistence, applyPersistenceSnapshot, storedState]);
+  (0, import_react23.useEffect)(() => {
+    const unsubscribe = activePersistence.subscribe?.(applyPersistenceSnapshot);
+    return unsubscribe;
+  }, [activePersistence, applyPersistenceSnapshot]);
+  const setEnabledPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(enabledRef.current) : value;
       if (Object.is(next, enabledRef.current)) return;
@@ -4854,7 +6560,7 @@ function MeasurerClient({
     },
     [persistState, setEnabled]
   );
-  const setRulersVisiblePersisted = (0, import_react20.useCallback)(
+  const setRulersVisiblePersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(rulersVisibleRef.current) : value;
       if (Object.is(next, rulersVisibleRef.current)) return;
@@ -4864,7 +6570,7 @@ function MeasurerClient({
     },
     [persistState, setRulersVisible]
   );
-  const setToolModePersisted = (0, import_react20.useCallback)(
+  const setToolModePersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(toolModeRef.current) : value;
       if (Object.is(next, toolModeRef.current)) return;
@@ -4879,7 +6585,7 @@ function MeasurerClient({
     },
     [persistState, setToolMode, textInspector]
   );
-  const setGuideOrientationPersisted = (0, import_react20.useCallback)(
+  const setGuideOrientationPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(guideOrientationRef.current) : value;
       if (Object.is(next, guideOrientationRef.current)) return;
@@ -4889,7 +6595,7 @@ function MeasurerClient({
     },
     [persistState, setGuideOrientation]
   );
-  const setMeasurementsPersisted = (0, import_react20.useCallback)(
+  const setMeasurementsPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(measurementsRef.current) : value;
       if (Object.is(next, measurementsRef.current)) return;
@@ -4899,7 +6605,7 @@ function MeasurerClient({
     },
     [persistState, setMeasurements]
   );
-  const setActiveMeasurementPersisted = (0, import_react20.useCallback)(
+  const setActiveMeasurementPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(activeMeasurementRef.current) : value;
       if (Object.is(next, activeMeasurementRef.current)) return;
@@ -4909,7 +6615,7 @@ function MeasurerClient({
     },
     [persistState, setActiveMeasurement]
   );
-  const setHeldDistancesPersisted = (0, import_react20.useCallback)(
+  const setHeldDistancesPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(heldDistancesRef.current) : value;
       if (Object.is(next, heldDistancesRef.current)) return;
@@ -4919,7 +6625,7 @@ function MeasurerClient({
     },
     [persistState, setHeldDistances]
   );
-  const setGuidesPersisted = (0, import_react20.useCallback)(
+  const setGuidesPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(guidesRef.current) : value;
       if (Object.is(next, guidesRef.current)) return;
@@ -4929,7 +6635,7 @@ function MeasurerClient({
     },
     [persistState, setGuides]
   );
-  const setSelectedGuideIdsPersisted = (0, import_react20.useCallback)(
+  const setSelectedGuideIdsPersisted = (0, import_react23.useCallback)(
     (value) => {
       const next = typeof value === "function" ? value(selectedGuideIdsRef.current) : value;
       if (Object.is(next, selectedGuideIdsRef.current)) return;
@@ -4987,15 +6693,15 @@ function MeasurerClient({
       clearSelectionRect
     }
   });
-  const undo = (0, import_react20.useCallback)(() => {
+  const undo = (0, import_react23.useCallback)(() => {
     if (toolMode === "text-inspector" && textInspector.undo()) return;
     undoHistory();
   }, [textInspector, toolMode, undoHistory]);
-  const redo = (0, import_react20.useCallback)(() => {
+  const redo = (0, import_react23.useCallback)(() => {
     if (toolMode === "text-inspector" && textInspector.redo()) return;
     redoHistory();
   }, [redoHistory, textInspector, toolMode]);
-  const clearAll = (0, import_react20.useCallback)(() => {
+  const clearAll = (0, import_react23.useCallback)(() => {
     if (toolMode === "text-inspector") {
       textInspector.clear();
     }
@@ -5035,7 +6741,7 @@ function MeasurerClient({
     textInspector,
     toolMode
   ]);
-  const removeSelectedGuides = (0, import_react20.useCallback)(() => {
+  const removeSelectedGuides = (0, import_react23.useCallback)(() => {
     if (selectedGuideIds.length === 0) return false;
     recordSnapshot();
     setGuidesPersisted(
@@ -5049,6 +6755,29 @@ function MeasurerClient({
     setGuidesPersisted,
     setSelectedGuideIdsPersisted
   ]);
+  const openColorPicker = (0, import_react23.useCallback)(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]);
   useHotkeys({
     eventTarget: ownerWindow,
     clearAll,
@@ -5061,7 +6790,13 @@ function MeasurerClient({
     setAltPressed,
     isOverlayActive: () => enabled && (toolMode !== "none" || toolbarActive),
     setGuideOrientation: setGuideOrientationWithHistory,
-    onInteract: () => setToolbarActive(true)
+    onInteract: () => setToolbarActive(true),
+    onColorPicker: openColorPicker,
+    onToggleXray: () => setXrayVisible((previous) => !previous),
+    onToggleSettings: () => setSettingsOpen((previous) => !previous),
+    isSettingsOpen: () => settingsOpen,
+    onCloseColorPicker: () => setColorPickerActive(false),
+    isColorPickerActive: () => colorPickerActive
   });
   useResizeSync({
     document: ownerDocument,
@@ -5073,7 +6808,7 @@ function MeasurerClient({
     setGuides: setGuidesPersisted,
     selectedElementRef
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const handleScroll = () => {
       const next = {
         x: ownerWindow.scrollX,
@@ -5097,6 +6832,7 @@ function MeasurerClient({
     document: ownerDocument,
     window: ownerWindow,
     enabled,
+    selectionEnabled: toolMode === "select" && !settingsOpen,
     selectedElementRef,
     hoverElementRef,
     setSelectedMeasurement,
@@ -5106,7 +6842,7 @@ function MeasurerClient({
     setActiveMeasurement: setActiveMeasurementPersisted,
     setHeldDistances: setHeldDistancesPersisted
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!toolbarActive || toolMode !== "none") return;
     const handlePointerDown2 = (event) => {
       const toolbarNode = toolbarRef.current;
@@ -5118,9 +6854,10 @@ function MeasurerClient({
       ownerWindow.removeEventListener("pointerdown", handlePointerDown2);
     };
   }, [ownerWindow, toolbarActive, toolMode]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     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")
@@ -5203,16 +6940,30 @@ function MeasurerClient({
     ownerWindow,
     setGuidesPersisted,
     setSelectedGuideIdsPersisted,
+    settingsOpen,
     toolMode
   ]);
-  (0, import_react20.useEffect)(() => {
-    if (toolMode === "text-inspector") {
+  (0, import_react23.useEffect)(() => {
+    if (toolMode === "text-inspector" && !settingsOpen) {
       textInspector.enable();
     } else {
       textInspector.disable();
     }
-  }, [textInspector, toolMode]);
-  (0, import_react20.useEffect)(() => {
+  }, [settingsOpen, textInspector, toolMode]);
+  const selectionContextRef = (0, import_react23.useRef)({ toolMode, settingsOpen });
+  if (selectionContextRef.current.toolMode !== toolMode || selectionContextRef.current.settingsOpen !== settingsOpen) {
+    selectionContextRef.current = { toolMode, settingsOpen };
+    if (!(toolMode === "select" && !settingsOpen)) {
+      setSelectedElement(null);
+      setHoverElement(null);
+      setHoverRect(null);
+      setHoverPointer(null);
+      setSelectedMeasurement(null);
+      setSelectedMeasurements([]);
+      clearSelectionRect();
+    }
+  }
+  (0, import_react23.useEffect)(() => {
     let style = ownerDocument.getElementById(XRAY_STYLE_ID);
     if (!style) {
       style = ownerDocument.createElement("style");
@@ -5220,7 +6971,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");
@@ -5228,13 +6979,13 @@ function MeasurerClient({
     return () => {
       ownerDocument.body.classList.remove("xray-mode");
     };
-  }, [ownerDocument, toolMode]);
-  (0, import_react20.useEffect)(() => {
+  }, [ownerDocument, xrayVisible]);
+  (0, import_react23.useEffect)(() => {
     return () => {
       textInspector.destroy();
     };
   }, [textInspector]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const hasSelectionAnimationState = !!selectionOriginRect || !!selectedMeasurement?.originRect || selectedMeasurements.some((measurement) => !!measurement.originRect);
     if (!hasSelectionAnimationState) {
       if (selectionAnimationCleanupTimeoutRef.current !== null) {
@@ -5315,9 +7066,9 @@ function MeasurerClient({
     guidesEnabled,
     guidePreview,
     displayedMeasurements,
-    hoverHighlightEnabled,
-    highlightColor,
-    guideColor
+    hoverHighlightEnabled: settingsHoverHighlight,
+    highlightColor: settingsHighlightColor,
+    guideColor: settingsGuideColor
   });
   const {
     handlePointerDown,
@@ -5334,10 +7085,12 @@ function MeasurerClient({
     clearGuideDragHold,
     scheduleGuideDragHold,
     enabled,
+    settingsOpen,
     toolMode,
     guidesEnabled,
     snapEnabled,
     snapGuidesEnabled,
+    selectNewGuideEnabled,
     altPressed,
     guideOrientation,
     hoverHighlightEnabled,
@@ -5370,7 +7123,7 @@ function MeasurerClient({
     setHoverPointer,
     clearSelectionRect
   });
-  const removeHeldDistance = (0, import_react20.useCallback)(
+  const removeHeldDistance = (0, import_react23.useCallback)(
     (id) => {
       recordSnapshot();
       setHeldDistancesPersisted(
@@ -5379,42 +7132,62 @@ function MeasurerClient({
     },
     [recordSnapshot, setHeldDistancesPersisted]
   );
-  const startGuideFromRuler = (0, import_react20.useCallback)(
+  const snapGuidePosition = (0, import_react23.useCallback)(
+    (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 = (0, import_react23.useCallback)(
     (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 = (0, import_react20.useCallback)(
+  const moveGuideFromRuler = (0, import_react23.useCallback)(
     (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 = (0, import_react20.useCallback)(
+  const finishGuideFromRuler = (0, import_react23.useCallback)(
     (id) => {
-      setSelectedGuideIdsPersisted([id]);
+      if (selectNewGuideEnabled) {
+        setSelectedGuideIdsPersisted([id]);
+      }
     },
-    [setSelectedGuideIdsPersisted]
+    [selectNewGuideEnabled, setSelectedGuideIdsPersisted]
   );
-  const cancelGuideFromRuler = (0, import_react20.useCallback)(
+  const cancelGuideFromRuler = (0, import_react23.useCallback)(
     (id) => {
       setGuidesPersisted((prev) => prev.filter((guide) => guide.id !== id));
     },
     [setGuidesPersisted]
   );
-  const handleGuidePointerDown = (0, import_react20.useCallback)(
+  const handleGuidePointerDown = (0, import_react23.useCallback)(
     (guide, event) => {
       const commit = createActionCommit();
       if (!enabled) return;
@@ -5440,7 +7213,7 @@ function MeasurerClient({
       setSelectedGuideIdsPersisted
     ]
   );
-  const handleGuidePointerUp = (0, import_react20.useCallback)(
+  const handleGuidePointerUp = (0, import_react23.useCallback)(
     (guide, event) => {
       event.stopPropagation();
       clearGuideDragHold();
@@ -5451,16 +7224,19 @@ function MeasurerClient({
     },
     [clearGuideDragHold, setDraggingGuideId]
   );
+  const overlayInteractive = enabled && !settingsOpen;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         ref: overlayRef,
         className: "mesurer-root msr:pointer-events-none msr:fixed msr:inset-0 msr:z-50",
         children: [
-          enabled && rulersVisible ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          enabled && rulersVisible && !settingsOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             RulersOverlay,
             {
+              ownerWindow,
+              settings: settingsRulerSettings,
               onStartGuide: startGuideFromRuler,
               onMoveGuide: moveGuideFromRuler,
               onFinishGuide: finishGuideFromRuler,
@@ -5469,12 +7245,13 @@ function MeasurerClient({
               selectedGuideIds
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             MeasurerOverlay,
             {
-              enabled,
+              enabled: enabled && (!settingsOpen || guides.length > 0),
+              interactive: overlayInteractive,
               toolMode,
-              guidePointerEvents: enabled && (toolMode !== "none" || rulersVisible),
+              guidePointerEvents: overlayInteractive && (toolMode !== "none" || rulersVisible),
               guidesEnabled,
               altPressed,
               isDragging,
@@ -5502,6 +7279,7 @@ function MeasurerClient({
               guideColorActive,
               guideColorHover,
               guideColorDefault,
+              guideStyle: settingsGuideStyle,
               onPointerDown: handlePointerDown,
               onPointerMove: handlePointerMove,
               onPointerUp: handlePointerUp,
@@ -5512,7 +7290,20 @@ function MeasurerClient({
               onGuidePointerCancel: handleGuidePointerUp
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            ColorPicker,
+            {
+              active: colorPickerActive,
+              sample: colorPickerSample,
+              unsupported: colorPickerUnsupported,
+              ownerWindow,
+              toolbarRef,
+              formats: settingsColorFormats,
+              favoriteFormat: settingsColorClickFormat,
+              onClose: () => setColorPickerActive(false)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Toolbar,
             {
               ref: toolbarRef,
@@ -5520,11 +7311,45 @@ 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,
+              initialSettingsTab,
+              onResetSettings: resetSettings,
+              onClearWorkspace: clearWorkspace
             }
           )
         ]
@@ -5539,14 +7364,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__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     MeasurerClient,
     {
       highlightColor,
@@ -5554,13 +7389,27 @@ 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
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MESURER_STORAGE_VERSION,
   Measurer,
   TextInspector,
-  createTextInspector
+  createLocalStoragePersistence,
+  createTextInspector,
+  normalizeStoredSettings,
+  normalizeStoredWorkspace
 });