mesurer 0.0.10 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # mesurer
 
+## 0.0.11
+
+- keep guides, select, and rulers on screen while Settings is open so styles can be edited live
+- isolate the Chrome extension overlay from host-page CSS
+- stop settings saves from clearing the live workspace
+
 ## 0.0.10
 
 - add a color picker with hex, rgb, hsl, and oklch output

package/dist/index.cjs

@@ -49,6 +49,7 @@ var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
 
 // runtime/style-inject.ts
 var MESURER_STYLE_ID = "mesurer-styles";
+var injectedTargets = /* @__PURE__ */ new WeakSet();
 var isDocument = (target) => target.nodeType === 9;
 var isShadowRoot = (target) => target.nodeType === 11;
 var getStyleTarget = (target) => {
@@ -59,12 +60,29 @@ var getStyleTarget = (target) => {
   if (rootNode.nodeType === 11) return rootNode;
   return target.ownerDocument ?? document;
 };
+var adoptSheet = (styleTarget, cssText) => {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(cssText);
+  styleTarget.adoptedStyleSheets = [...styleTarget.adoptedStyleSheets, sheet];
+};
 function ensureMeasurerStyles(cssText, target) {
   if (typeof document === "undefined") return;
   if (!cssText) return;
   const styleTarget = getStyleTarget(target);
   if (!styleTarget) return;
-  if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) return;
+  if (injectedTargets.has(styleTarget)) return;
+  if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) {
+    injectedTargets.add(styleTarget);
+    return;
+  }
+  if (isShadowRoot(styleTarget)) {
+    try {
+      adoptSheet(styleTarget, cssText);
+      injectedTargets.add(styleTarget);
+      return;
+    } catch {
+    }
+  }
   const ownerDocument = isDocument(styleTarget) ? styleTarget : styleTarget.ownerDocument;
   if (!ownerDocument) return;
   const style = ownerDocument.createElement("style");
@@ -72,13 +90,14 @@ function ensureMeasurerStyles(cssText, target) {
   style.textContent = cssText;
   if (isShadowRoot(styleTarget)) {
     styleTarget.appendChild(style);
-    return;
+  } else {
+    ownerDocument.head.appendChild(style);
   }
-  ownerDocument.head.appendChild(style);
+  injectedTargets.add(styleTarget);
 }
 
 // styles.generated.ts
-var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --msr-color-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';
+var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --msr-color-red-50: oklch(97.1% 0.013 17.38);\n    --msr-color-red-200: oklch(88.5% 0.062 18.334);\n    --msr-color-red-600: oklch(57.7% 0.245 27.325);\n    --msr-color-black: #000;\n    --msr-color-white: #fff;\n    --msr-spacing: 0.25rem;\n    --msr-font-weight-normal: 400;\n    --msr-font-weight-medium: 500;\n    --msr-font-weight-semibold: 600;\n    --msr-radius-md: 0.375rem;\n    --msr-radius-lg: 0.5rem;\n    --msr-default-transition-duration: 150ms;\n    --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --msr-default-font-family: var(--msr-font-sans);\n    --msr-default-mono-font-family: var(--msr-font-mono);\n    --msr-color-ink-50: #f8fafc;\n    --msr-color-ink-200: #e2e8f0;\n    --msr-color-ink-500: #64748b;\n    --msr-color-ink-700: #334155;\n    --msr-color-ink-900: #0f172a;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--msr-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--msr-default-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .msr\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .msr\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .msr\\:absolute {\n    position: absolute;\n  }\n  .msr\\:fixed {\n    position: fixed;\n  }\n  .msr\\:relative {\n    position: relative;\n  }\n  .msr\\:inset-0 {\n    inset: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-0 {\n    top: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-\\[18px\\] {\n    top: 18px;\n  }\n  .msr\\:top-full {\n    top: 100%;\n  }\n  .msr\\:-right-1 {\n    right: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:right-0 {\n    right: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:right-\\[8px\\] {\n    right: 8px;\n  }\n  .msr\\:bottom-0 {\n    bottom: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:bottom-full {\n    bottom: 100%;\n  }\n  .msr\\:left-0 {\n    left: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .msr\\:left-\\[8px\\] {\n    left: 8px;\n  }\n  .msr\\:left-\\[18px\\] {\n    left: 18px;\n  }\n  .msr\\:z-10 {\n    z-index: 10;\n  }\n  .msr\\:z-50 {\n    z-index: 50;\n  }\n  .msr\\:z-\\[70\\] {\n    z-index: 70;\n  }\n  .msr\\:z-\\[80\\] {\n    z-index: 80;\n  }\n  .msr\\:z-\\[90\\] {\n    z-index: 90;\n  }\n  .msr\\:col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .msr\\:mt-2 {\n    margin-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:mb-1 {\n    margin-bottom: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:mb-2 {\n    margin-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:-ml-1 {\n    margin-left: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:ml-1 {\n    margin-left: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:box-border {\n    box-sizing: border-box;\n  }\n  .msr\\:block {\n    display: block;\n  }\n  .msr\\:flex {\n    display: flex;\n  }\n  .msr\\:grid {\n    display: grid;\n  }\n  .msr\\:inline-flex {\n    display: inline-flex;\n  }\n  .msr\\:size-3 {\n    width: calc(var(--msr-spacing) * 3);\n    height: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:size-4 {\n    width: calc(var(--msr-spacing) * 4);\n    height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:size-8 {\n    width: calc(var(--msr-spacing) * 8);\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:size-\\[10px\\] {\n    width: 10px;\n    height: 10px;\n  }\n  .msr\\:size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .msr\\:size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .msr\\:h-6 {\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:h-8 {\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:h-\\[14px\\] {\n    height: 14px;\n  }\n  .msr\\:h-full {\n    height: 100%;\n  }\n  .msr\\:h-px {\n    height: 1px;\n  }\n  .msr\\:max-h-\\[min\\(70vh\\,34rem\\)\\] {\n    max-height: min(70vh, 34rem);\n  }\n  .msr\\:w-4 {\n    width: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:w-6 {\n    width: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:w-9 {\n    width: calc(var(--msr-spacing) * 9);\n  }\n  .msr\\:w-12 {\n    width: calc(var(--msr-spacing) * 12);\n  }\n  .msr\\:w-44 {\n    width: calc(var(--msr-spacing) * 44);\n  }\n  .msr\\:w-\\[18px\\] {\n    width: 18px;\n  }\n  .msr\\:w-\\[26px\\] {\n    width: 26px;\n  }\n  .msr\\:w-\\[272px\\] {\n    width: 272px;\n  }\n  .msr\\:w-full {\n    width: 100%;\n  }\n  .msr\\:w-px {\n    width: 1px;\n  }\n  .msr\\:max-w-\\[calc\\(100vw-16px\\)\\] {\n    max-width: calc(100vw - 16px);\n  }\n  .msr\\:min-w-0 {\n    min-width: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:min-w-36 {\n    min-width: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:flex-1 {\n    flex: 1;\n  }\n  .msr\\:shrink-0 {\n    flex-shrink: 0;\n  }\n  .msr\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:rotate-90 {\n    rotate: 90deg;\n  }\n  .msr\\:rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .msr\\:cursor-crosshair {\n    cursor: crosshair;\n  }\n  .msr\\:cursor-default {\n    cursor: default;\n  }\n  .msr\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .msr\\:touch-none {\n    touch-action: none;\n  }\n  .msr\\:appearance-none {\n    appearance: none;\n  }\n  .msr\\:grid-cols-\\[78px_156px\\] {\n    grid-template-columns: 78px 156px;\n  }\n  .msr\\:flex-col {\n    flex-direction: column;\n  }\n  .msr\\:items-center {\n    align-items: center;\n  }\n  .msr\\:items-start {\n    align-items: flex-start;\n  }\n  .msr\\:items-stretch {\n    align-items: stretch;\n  }\n  .msr\\:justify-between {\n    justify-content: space-between;\n  }\n  .msr\\:justify-center {\n    justify-content: center;\n  }\n  .msr\\:justify-end {\n    justify-content: flex-end;\n  }\n  .msr\\:gap-0 {\n    gap: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:gap-1 {\n    gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:gap-1\\.5 {\n    gap: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:gap-2 {\n    gap: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:gap-3 {\n    gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-px {\n    gap: 1px;\n  }\n  .msr\\:gap-x-3 {\n    column-gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-y-1 {\n    row-gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:justify-self-end {\n    justify-self: flex-end;\n  }\n  .msr\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .msr\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .msr\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .msr\\:rounded-\\[3px\\] {\n    border-radius: 3px;\n  }\n  .msr\\:rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .msr\\:rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .msr\\:rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .msr\\:rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .msr\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .msr\\:rounded-lg {\n    border-radius: var(--msr-radius-lg);\n  }\n  .msr\\:rounded-md {\n    border-radius: var(--msr-radius-md);\n  }\n  .msr\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .msr\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .msr\\:border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .msr\\:border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .msr\\:border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .msr\\:border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .msr\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .msr\\:border-dotted {\n    --tw-border-style: dotted;\n    border-style: dotted;\n  }\n  .msr\\:border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .msr\\:border-\\[\\#0d99ff\\] {\n    border-color: #0d99ff;\n  }\n  .msr\\:border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .msr\\:border-black\\/8 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 8%, transparent);\n    }\n  }\n  .msr\\:border-black\\/10 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:border-black\\/15 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 15%, transparent);\n    }\n  }\n  .msr\\:border-ink-200 {\n    border-color: var(--msr-color-ink-200);\n  }\n  .msr\\:border-ink-700 {\n    border-color: var(--msr-color-ink-700);\n  }\n  .msr\\:border-red-200 {\n    border-color: var(--msr-color-red-200);\n  }\n  .msr\\:border-transparent {\n    border-color: transparent;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\]\\/10 {\n    background-color: color-mix(in oklab, #0d99ff 10%, transparent);\n  }\n  .msr\\:bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .msr\\:bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .msr\\:bg-black {\n    background-color: var(--msr-color-black);\n  }\n  .msr\\:bg-black\\/10 {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:bg-ink-50 {\n    background-color: var(--msr-color-ink-50);\n  }\n  .msr\\:bg-ink-900\\/90 {\n    background-color: var(--msr-color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n    }\n  }\n  .msr\\:bg-transparent {\n    background-color: transparent;\n  }\n  .msr\\:bg-white {\n    background-color: var(--msr-color-white);\n  }\n  .msr\\:p-1 {\n    padding: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:p-3 {\n    padding: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:p-px {\n    padding: 1px;\n  }\n  .msr\\:px-1 {\n    padding-inline: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:px-1\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:px-2 {\n    padding-inline: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:py-0 {\n    padding-block: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:py-0\\.5 {\n    padding-block: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:py-1 {\n    padding-block: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:py-1\\.5 {\n    padding-block: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:py-2 {\n    padding-block: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pb-1 {\n    padding-bottom: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:text-center {\n    text-align: center;\n  }\n  .msr\\:text-left {\n    text-align: left;\n  }\n  .msr\\:font-mono {\n    font-family: var(--msr-font-mono);\n  }\n  .msr\\:text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .msr\\:text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .msr\\:text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .msr\\:text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .msr\\:leading-4 {\n    --tw-leading: calc(var(--msr-spacing) * 4);\n    line-height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .msr\\:font-medium {\n    --tw-font-weight: var(--msr-font-weight-medium);\n    font-weight: var(--msr-font-weight-medium);\n  }\n  .msr\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .msr\\:text-\\[\\#64748b\\] {\n    color: #64748b;\n  }\n  .msr\\:text-black {\n    color: var(--msr-color-black);\n  }\n  .msr\\:text-black\\/45 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 45%, transparent);\n    }\n  }\n  .msr\\:text-black\\/60 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 60%, transparent);\n    }\n  }\n  .msr\\:text-ink-50 {\n    color: var(--msr-color-ink-50);\n  }\n  .msr\\:text-ink-500 {\n    color: var(--msr-color-ink-500);\n  }\n  .msr\\:text-ink-700 {\n    color: var(--msr-color-ink-700);\n  }\n  .msr\\:text-ink-900 {\n    color: var(--msr-color-ink-900);\n  }\n  .msr\\:text-red-600 {\n    color: var(--msr-color-red-600);\n  }\n  .msr\\:text-white {\n    color: var(--msr-color-white);\n  }\n  .msr\\:text-white\\/60 {\n    color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .msr\\:opacity-0 {\n    opacity: 0%;\n  }\n  .msr\\:opacity-100 {\n    opacity: 100%;\n  }\n  .msr\\:shadow-\\[0_0_0_1px_rgba\\(15\\,23\\,42\\,0\\.12\\)\\] {\n    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.12));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:outline-transparent {\n    outline-color: transparent;\n  }\n  .msr\\:transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-none {\n    transition-property: none;\n  }\n  .msr\\:duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .msr\\:outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .msr\\:group-hover\\:border-ink-200 {\n    &:is(:where(.msr\\:group):hover *) {\n      @media (hover: hover) {\n        border-color: var(--msr-color-ink-200);\n      }\n    }\n  }\n  .msr\\:focus-within\\:rounded-l-\\[5px\\] {\n    &:focus-within {\n      border-top-left-radius: 5px;\n      border-bottom-left-radius: 5px;\n    }\n  }\n  .msr\\:focus-within\\:rounded-r-\\[5px\\] {\n    &:focus-within {\n      border-top-right-radius: 5px;\n      border-bottom-right-radius: 5px;\n    }\n  }\n  .msr\\:focus-within\\:outline {\n    &:focus-within {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-1 {\n    &:focus-within {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-offset-\\[-1px\\] {\n    &:focus-within {\n      outline-offset: -1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-\\[\\#0d99ff\\] {\n    &:focus-within {\n      outline-color: #0d99ff;\n    }\n  }\n  .msr\\:hover\\:border-ink-200 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--msr-color-ink-200);\n      }\n    }\n  }\n  .msr\\:hover\\:bg-\\[\\#0d99ff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0d99ff;\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/4 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-ink-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-ink-50);\n      }\n    }\n  }\n  .msr\\:hover\\:bg-red-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-red-50);\n      }\n    }\n  }\n  .msr\\:hover\\:text-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-black);\n      }\n    }\n  }\n  .msr\\:hover\\:text-ink-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-ink-700);\n      }\n    }\n  }\n  .msr\\:hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-white);\n      }\n    }\n  }\n  .msr\\:hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\] {\n    &:focus {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\] {\n    &:focus-visible {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#ef4444\\] {\n    &:focus-visible {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #ef4444);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:ring-1 {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:ring-\\[\\#0d99ff\\]\\/25 {\n    &:focus-visible {\n      --tw-ring-color: color-mix(in oklab, #0d99ff 25%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:outline-none {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n:root, :host {\n  --color-ink-50: #f8fafc;\n  --color-ink-200: #e2e8f0;\n  --color-ink-500: #64748b;\n  --color-ink-700: #334155;\n  --color-ink-900: #0f172a;\n}\n:host {\n  all: initial;\n  display: block;\n  color-scheme: light;\n  color: #0f172a;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.5;\n  letter-spacing: normal;\n  direction: ltr;\n  --msr-spacing: 4px;\n}\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n@layer base {\n  *, ::before, ::after, ::backdrop {\n    --tw-border-style: solid;\n    --tw-outline-style: solid;\n    --tw-shadow: 0 0 #0000;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n  }\n  button, input, select, textarea {\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    letter-spacing: inherit;\n  }\n}\n.mesurer-toolbar-surface {\n  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n.mesurer-color-picker {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n.mesurer-settings-tabs {\n  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);\n}\n.mesurer-settings-tab[aria-selected="true"] {\n  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);\n}\n.mesurer-switch-track {\n  box-sizing: border-box;\n  border: 1px solid #e2e8f0;\n}\n.mesurer-switch-track[data-checked="true"] {\n  border-color: #0d99ff;\n}\n.mesurer-control-shell {\n  border: 1px solid transparent;\n}\n.mesurer-control-shell:hover {\n  border-color: #e2e8f0;\n}\n.mesurer-control-focus:focus-within {\n  outline: 1px solid #0d99ff;\n  outline-offset: -1px;\n}\n.mesurer-root {\n  --msr-spacing: 4px;\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n';
 
 // components/toolbar.tsx
 var import_react3 = require("react");
@@ -94,7 +113,7 @@ var import_react2 = require("react");
 // package.json
 var package_default = {
   name: "mesurer",
-  version: "0.0.10",
+  version: "0.0.11",
   description: "Measure and align elements on any website.",
   license: "MIT",
   author: "Julien Thibeaut",
@@ -356,10 +375,10 @@ 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",
+      className: "mesurer-control-shell msr:group msr:flex msr:h-6 msr:w-full msr:min-w-0 msr:items-center msr:overflow-hidden msr:rounded-[5px] msr:border msr:border-transparent msr:bg-ink-50 msr:hover:border-ink-200",
       children: [
-        /* @__PURE__ */ (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 })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mesurer-control-focus msr:flex msr:h-full msr:min-w-0 msr:flex-1 msr:items-center msr:focus-within:rounded-l-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mesurer-control-focus msr:box-border msr:flex msr:h-full msr:w-12 msr:shrink-0 msr:items-center msr:border-l msr:border-transparent msr:group-hover:border-ink-200 msr:focus-within:rounded-r-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: right })
       ]
     }
   );
@@ -371,7 +390,7 @@ function SettingsSwitch({ label, checked, onChange }) {
       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",
+      className: "msr:col-span-2 msr:grid msr:h-6 msr:w-full msr:appearance-none msr:grid-cols-[78px_156px] msr:items-center msr:gap-3 msr:text-left msr:text-[12px] msr:leading-none msr:text-ink-700",
       onClick: () => onChange(!checked),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }),
@@ -380,8 +399,9 @@ function SettingsSwitch({ label, checked, onChange }) {
           {
             "aria-hidden": "true",
             style: { justifySelf: "end" },
+            "data-checked": checked ? "true" : void 0,
             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",
+              "mesurer-switch-track msr:flex msr:h-[14px] msr:w-[26px] msr:shrink-0 msr:items-center msr:rounded-full msr:border msr:p-px msr:transition-colors",
               checked ? "msr:border-[#0d99ff] msr:bg-[#0d99ff]" : "msr:border-ink-200 msr:bg-ink-50"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -688,7 +708,8 @@ function SettingsPanel({
   setGuideStyle,
   rulerSettings,
   setRulerSettings,
-  initialTab,
+  activeTab,
+  onTabChange,
   onResetSettings,
   onClearWorkspace
 }) {
@@ -701,10 +722,9 @@ function SettingsPanel({
       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: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mesurer-settings-tabs msr:flex msr:h-6 msr:shrink-0 msr:select-none msr:items-stretch msr:gap-0 msr:rounded-[5px] msr:bg-ink-50 msr:p-px", role: "tablist", "aria-label": "Settings sections", children: [
       ["guides", "Guides"],
       ["select", "Select"],
       ["color-picker", "Color"],
@@ -717,10 +737,10 @@ function SettingsPanel({
         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]",
+          "mesurer-settings-tab msr:relative msr:flex msr:min-w-0 msr:flex-1 msr:appearance-none msr:items-center msr:justify-center msr:whitespace-nowrap msr:px-1.5 msr:py-0 msr:text-[10px] msr:font-medium msr:transition-colors msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#0d99ff]",
           activeTab === value ? "msr:rounded-[5px] msr:bg-white msr:text-ink-900 msr:shadow-[0_0_0_1px_rgba(15,23,42,0.12)]" : "msr:rounded-[5px] msr:text-ink-500 msr:hover:text-ink-700"
         ),
-        onClick: () => setActiveTab(value),
+        onClick: () => onTabChange(value),
         children: label
       },
       value
@@ -1182,7 +1202,9 @@ function ToolbarComponent({
   setGuideStyle,
   rulerSettings,
   setRulerSettings,
-  initialSettingsTab,
+  settingsTab,
+  setSettingsTab,
+  onToggleSettings,
   onResetSettings,
   onClearWorkspace
 }, ref) {
@@ -1568,7 +1590,7 @@ function ToolbarComponent({
               shortcut: "\u2318/Ctrl+,",
               onClick: () => {
                 onInteract();
-                setSettingsOpen((previous) => !previous);
+                onToggleSettings();
               },
               tooltipVisible: tooltipsEnabled && visibleTooltipId === "settings",
               tooltipInstant,
@@ -1620,7 +1642,8 @@ function ToolbarComponent({
                   setGuideStyle,
                   rulerSettings,
                   setRulerSettings,
-                  initialTab: initialSettingsTab,
+                  activeTab: settingsTab,
+                  onTabChange: setSettingsTab,
                   onResetSettings,
                   onClearWorkspace
                 }
@@ -1855,7 +1878,9 @@ var RulersOverlay = (0, import_react5.memo)(function RulersOverlay2({
   onFinishGuide,
   onCancelGuide,
   guides,
-  selectedGuideIds
+  selectedGuideIds,
+  interactive = true,
+  forceVisible = false
 }) {
   const [dragPosition, setDragPosition] = (0, import_react5.useState)(null);
   const [dragOrientation, setDragOrientation] = (0, import_react5.useState)(null);
@@ -1876,7 +1901,7 @@ var RulersOverlay = (0, import_react5.memo)(function RulersOverlay2({
       ownerWindow.document.removeEventListener("mousemove", handlePointerMove, true);
     };
   }, [ownerWindow, settings.edgeReveal]);
-  const showRulers = !settings.edgeReveal || nearEdge;
+  const showRulers = forceVisible || !settings.edgeReveal || nearEdge;
   const beginGuideDrag = (orientation, event) => {
     if (event.button !== 0) return;
     event.stopPropagation();
@@ -1945,7 +1970,7 @@ var RulersOverlay = (0, import_react5.memo)(function RulersOverlay2({
               boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
               height: RULER_SIZE,
               cursor: "ns-resize",
-              pointerEvents: showRulers ? "auto" : "none"
+              pointerEvents: showRulers && interactive ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("horizontal", event),
             onPointerMove: moveGuide,
@@ -2051,7 +2076,7 @@ var RulersOverlay = (0, import_react5.memo)(function RulersOverlay2({
               boxShadow: "1px 0 3px rgba(0, 0, 0, 0.12)",
               width: RULER_SIZE,
               cursor: "ew-resize",
-              pointerEvents: showRulers ? "auto" : "none"
+              pointerEvents: showRulers && interactive ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("vertical", event),
             onPointerMove: moveGuide,
@@ -4643,7 +4668,7 @@ var MeasurerOverlay = (0, import_react22.memo)(function MeasurerOverlay2({
 }) {
   const overlayVisible = enabled;
   const overlayInteractive = interactive && overlayVisible && toolMode !== "none" && toolMode !== "text-inspector" && toolMode !== "xray" && toolMode !== "rulers";
-  const selectionVisible = interactive && toolMode === "select";
+  const selectionVisible = toolMode === "select";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
@@ -4817,7 +4842,7 @@ var MeasurerOverlay = (0, import_react22.memo)(function MeasurerOverlay2({
           },
           measurement.id
         )) : null,
-        interactive ? heldDistances.map((distance) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        heldDistances.map((distance) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           DistanceOverlayItem,
           {
             distance,
@@ -4825,7 +4850,7 @@ var MeasurerOverlay = (0, import_react22.memo)(function MeasurerOverlay2({
             onRemove: onRemoveHeldDistance
           },
           `held-${distance.id}`
-        )) : null,
+        )),
         selectionVisible && altPressed && optionPairOverlay ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           DistanceOverlayItem,
           {
@@ -6097,7 +6122,10 @@ var createLocalStoragePersistence = (ownerWindow, workspaceKey, settingsKey = wo
     subscribe: (listener) => {
       const handleStorage = (event) => {
         if (event.key !== settingsKey && event.key !== workspaceKey && event.key !== legacyKey) return;
-        listener(read());
+        listener(read(), {
+          settings: event.key === settingsKey || event.key === legacyKey || settingsKey === workspaceKey,
+          workspace: event.key === workspaceKey || event.key === legacyKey || settingsKey === workspaceKey
+        });
       };
       ownerWindow.addEventListener("storage", handleStorage);
       return () => {
@@ -6329,6 +6357,7 @@ function MeasurerClient({
   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 [settingsTab, setSettingsTab] = (0, import_react23.useState)("general");
   const [settingsHighlightColor, setSettingsHighlightColor] = (0, import_react23.useState)(
     persistedSettings.highlightColor ?? highlightColor
   );
@@ -6511,11 +6540,8 @@ function MeasurerClient({
     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;
-    }
+  const applyPersistenceSnapshot = (0, import_react23.useCallback)((snapshot, source) => {
+    if (!snapshot) return;
     applyingExternalPersistenceRef.current = true;
     const settings = sanitizeStoredSettings(ownerWindow, snapshot.settings);
     if (settings.highlightColor !== void 0) setSettingsHighlightColor(settings.highlightColor);
@@ -6531,15 +6557,13 @@ function MeasurerClient({
     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) {
+    if (source?.workspace !== false && workspace && (settings.persistOnReload ?? settingsPersistOnReload)) {
       applyPersistedWorkspace(workspace);
     }
     ownerWindow.setTimeout(() => {
       applyingExternalPersistenceRef.current = false;
     }, 0);
-  }, [applyPersistedWorkspace, clearPersistedWorkspace, guideStyleDefault, ownerWindow, rulerSettingsDefault, setMultiMeasureEnabled, setSelectNewGuideEnabled, setSettingsColorClickFormat, setSettingsColorFormats, setSettingsGuideColor, setSettingsHighlightColor, setSettingsHoverHighlight, setSettingsPersistOnReload, setSnapEnabled, setSnapGuidesEnabled, settingsPersistOnReload]);
+  }, [applyPersistedWorkspace, 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;
@@ -6778,6 +6802,14 @@ function MeasurerClient({
       }
     }
   }, [ownerWindow, setEnabledWithHistory, setToolModeWithHistory, settingsColorClickFormat]);
+  const toggleSettings = (0, import_react23.useCallback)(() => {
+    if (settingsOpen) {
+      setSettingsOpen(false);
+      return;
+    }
+    setSettingsTab(initialSettingsTab);
+    setSettingsOpen(true);
+  }, [initialSettingsTab, settingsOpen]);
   useHotkeys({
     eventTarget: ownerWindow,
     clearAll,
@@ -6793,7 +6825,7 @@ function MeasurerClient({
     onInteract: () => setToolbarActive(true),
     onColorPicker: openColorPicker,
     onToggleXray: () => setXrayVisible((previous) => !previous),
-    onToggleSettings: () => setSettingsOpen((previous) => !previous),
+    onToggleSettings: toggleSettings,
     isSettingsOpen: () => settingsOpen,
     onCloseColorPicker: () => setColorPickerActive(false),
     isColorPickerActive: () => colorPickerActive
@@ -6832,7 +6864,7 @@ function MeasurerClient({
     document: ownerDocument,
     window: ownerWindow,
     enabled,
-    selectionEnabled: toolMode === "select" && !settingsOpen,
+    selectionEnabled: toolMode === "select",
     selectedElementRef,
     hoverElementRef,
     setSelectedMeasurement,
@@ -6944,16 +6976,16 @@ function MeasurerClient({
     toolMode
   ]);
   (0, import_react23.useEffect)(() => {
-    if (toolMode === "text-inspector" && !settingsOpen) {
+    if (toolMode === "text-inspector") {
       textInspector.enable();
     } else {
       textInspector.disable();
     }
-  }, [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)) {
+  }, [textInspector, toolMode]);
+  const selectionToolRef = (0, import_react23.useRef)(toolMode);
+  if (selectionToolRef.current !== toolMode) {
+    selectionToolRef.current = toolMode;
+    if (toolMode !== "select") {
       setSelectedElement(null);
       setHoverElement(null);
       setHoverRect(null);
@@ -7225,6 +7257,22 @@ function MeasurerClient({
     [clearGuideDragHold, setDraggingGuideId]
   );
   const overlayInteractive = enabled && !settingsOpen;
+  const overlayGuides = (0, import_react23.useMemo)(() => {
+    if (guides.length > 0) return guides;
+    if (!settingsOpen || settingsTab !== "guides") return guides;
+    return [
+      {
+        id: "__mesurer-preview-vertical",
+        orientation: "vertical",
+        position: ownerWindow.innerWidth / 2
+      },
+      {
+        id: "__mesurer-preview-horizontal",
+        orientation: "horizontal",
+        position: ownerWindow.innerHeight / 2
+      }
+    ];
+  }, [guides, ownerWindow, settingsOpen, settingsTab]);
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
@@ -7232,11 +7280,13 @@ function MeasurerClient({
         ref: overlayRef,
         className: "mesurer-root msr:pointer-events-none msr:fixed msr:inset-0 msr:z-50",
         children: [
-          enabled && rulersVisible && !settingsOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          enabled && rulersVisible ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             RulersOverlay,
             {
               ownerWindow,
               settings: settingsRulerSettings,
+              interactive: !settingsOpen,
+              forceVisible: settingsOpen,
               onStartGuide: startGuideFromRuler,
               onMoveGuide: moveGuideFromRuler,
               onFinishGuide: finishGuideFromRuler,
@@ -7248,7 +7298,7 @@ function MeasurerClient({
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             MeasurerOverlay,
             {
-              enabled: enabled && (!settingsOpen || guides.length > 0),
+              enabled,
               interactive: overlayInteractive,
               toolMode,
               guidePointerEvents: overlayInteractive && (toolMode !== "none" || rulersVisible),
@@ -7272,7 +7322,7 @@ function MeasurerClient({
               optionPairOverlay,
               guideDistanceOverlay,
               optionContainerLines,
-              guides,
+              guides: overlayGuides,
               hoverGuide,
               draggingGuideId,
               selectedGuideIds,
@@ -7347,7 +7397,9 @@ function MeasurerClient({
               setGuideStyle: setSettingsGuideStyle,
               rulerSettings: settingsRulerSettings,
               setRulerSettings: setSettingsRulerSettings,
-              initialSettingsTab,
+              settingsTab,
+              setSettingsTab,
+              onToggleSettings: toggleSettings,
               onResetSettings: resetSettings,
               onClearWorkspace: clearWorkspace
             }

package/dist/index.d.cts

@@ -107,13 +107,17 @@ type MesurerPersistenceSnapshot = {
     settings: MesurerStoredSettings;
     workspace: MesurerStoredWorkspace | null;
 };
+type PersistenceChangeSource = {
+    settings?: boolean;
+    workspace?: boolean;
+};
 type MesurerPersistence = {
     load: () => MesurerPersistenceSnapshot | null;
     saveSettings: (settings: MesurerStoredSettings) => void;
     saveWorkspace: (workspace: MesurerStoredWorkspace) => void;
     clearWorkspace: () => void;
     clearSettings: () => void;
-    subscribe?: (listener: (snapshot: MesurerPersistenceSnapshot | null) => void) => () => void;
+    subscribe?: (listener: (snapshot: MesurerPersistenceSnapshot | null, source?: PersistenceChangeSource) => void) => () => void;
     setErrorHandler?: (handler: ((error: unknown) => void) | undefined) => void;
 };
 declare const normalizeStoredSettings: (value: unknown) => MesurerStoredSettings;

package/dist/index.d.ts

@@ -107,13 +107,17 @@ type MesurerPersistenceSnapshot = {
     settings: MesurerStoredSettings;
     workspace: MesurerStoredWorkspace | null;
 };
+type PersistenceChangeSource = {
+    settings?: boolean;
+    workspace?: boolean;
+};
 type MesurerPersistence = {
     load: () => MesurerPersistenceSnapshot | null;
     saveSettings: (settings: MesurerStoredSettings) => void;
     saveWorkspace: (workspace: MesurerStoredWorkspace) => void;
     clearWorkspace: () => void;
     clearSettings: () => void;
-    subscribe?: (listener: (snapshot: MesurerPersistenceSnapshot | null) => void) => () => void;
+    subscribe?: (listener: (snapshot: MesurerPersistenceSnapshot | null, source?: PersistenceChangeSource) => void) => () => void;
     setErrorHandler?: (handler: ((error: unknown) => void) | undefined) => void;
 };
 declare const normalizeStoredSettings: (value: unknown) => MesurerStoredSettings;

package/dist/index.js

@@ -24,6 +24,7 @@ var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
 
 // runtime/style-inject.ts
 var MESURER_STYLE_ID = "mesurer-styles";
+var injectedTargets = /* @__PURE__ */ new WeakSet();
 var isDocument = (target) => target.nodeType === 9;
 var isShadowRoot = (target) => target.nodeType === 11;
 var getStyleTarget = (target) => {
@@ -34,12 +35,29 @@ var getStyleTarget = (target) => {
   if (rootNode.nodeType === 11) return rootNode;
   return target.ownerDocument ?? document;
 };
+var adoptSheet = (styleTarget, cssText) => {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(cssText);
+  styleTarget.adoptedStyleSheets = [...styleTarget.adoptedStyleSheets, sheet];
+};
 function ensureMeasurerStyles(cssText, target) {
   if (typeof document === "undefined") return;
   if (!cssText) return;
   const styleTarget = getStyleTarget(target);
   if (!styleTarget) return;
-  if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) return;
+  if (injectedTargets.has(styleTarget)) return;
+  if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) {
+    injectedTargets.add(styleTarget);
+    return;
+  }
+  if (isShadowRoot(styleTarget)) {
+    try {
+      adoptSheet(styleTarget, cssText);
+      injectedTargets.add(styleTarget);
+      return;
+    } catch {
+    }
+  }
   const ownerDocument = isDocument(styleTarget) ? styleTarget : styleTarget.ownerDocument;
   if (!ownerDocument) return;
   const style = ownerDocument.createElement("style");
@@ -47,13 +65,14 @@ function ensureMeasurerStyles(cssText, target) {
   style.textContent = cssText;
   if (isShadowRoot(styleTarget)) {
     styleTarget.appendChild(style);
-    return;
+  } else {
+    ownerDocument.head.appendChild(style);
   }
-  ownerDocument.head.appendChild(style);
+  injectedTargets.add(styleTarget);
 }
 
 // styles.generated.ts
-var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --msr-color-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';
+var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --msr-color-red-50: oklch(97.1% 0.013 17.38);\n    --msr-color-red-200: oklch(88.5% 0.062 18.334);\n    --msr-color-red-600: oklch(57.7% 0.245 27.325);\n    --msr-color-black: #000;\n    --msr-color-white: #fff;\n    --msr-spacing: 0.25rem;\n    --msr-font-weight-normal: 400;\n    --msr-font-weight-medium: 500;\n    --msr-font-weight-semibold: 600;\n    --msr-radius-md: 0.375rem;\n    --msr-radius-lg: 0.5rem;\n    --msr-default-transition-duration: 150ms;\n    --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --msr-default-font-family: var(--msr-font-sans);\n    --msr-default-mono-font-family: var(--msr-font-mono);\n    --msr-color-ink-50: #f8fafc;\n    --msr-color-ink-200: #e2e8f0;\n    --msr-color-ink-500: #64748b;\n    --msr-color-ink-700: #334155;\n    --msr-color-ink-900: #0f172a;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--msr-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--msr-default-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .msr\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .msr\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .msr\\:absolute {\n    position: absolute;\n  }\n  .msr\\:fixed {\n    position: fixed;\n  }\n  .msr\\:relative {\n    position: relative;\n  }\n  .msr\\:inset-0 {\n    inset: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-0 {\n    top: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:top-\\[18px\\] {\n    top: 18px;\n  }\n  .msr\\:top-full {\n    top: 100%;\n  }\n  .msr\\:-right-1 {\n    right: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:right-0 {\n    right: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:right-\\[8px\\] {\n    right: 8px;\n  }\n  .msr\\:bottom-0 {\n    bottom: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:bottom-full {\n    bottom: 100%;\n  }\n  .msr\\:left-0 {\n    left: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .msr\\:left-\\[8px\\] {\n    left: 8px;\n  }\n  .msr\\:left-\\[18px\\] {\n    left: 18px;\n  }\n  .msr\\:z-10 {\n    z-index: 10;\n  }\n  .msr\\:z-50 {\n    z-index: 50;\n  }\n  .msr\\:z-\\[70\\] {\n    z-index: 70;\n  }\n  .msr\\:z-\\[80\\] {\n    z-index: 80;\n  }\n  .msr\\:z-\\[90\\] {\n    z-index: 90;\n  }\n  .msr\\:col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .msr\\:mt-2 {\n    margin-top: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:mb-1 {\n    margin-bottom: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:mb-2 {\n    margin-bottom: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:-ml-1 {\n    margin-left: calc(var(--msr-spacing) * -1);\n  }\n  .msr\\:ml-1 {\n    margin-left: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:box-border {\n    box-sizing: border-box;\n  }\n  .msr\\:block {\n    display: block;\n  }\n  .msr\\:flex {\n    display: flex;\n  }\n  .msr\\:grid {\n    display: grid;\n  }\n  .msr\\:inline-flex {\n    display: inline-flex;\n  }\n  .msr\\:size-3 {\n    width: calc(var(--msr-spacing) * 3);\n    height: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:size-4 {\n    width: calc(var(--msr-spacing) * 4);\n    height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:size-8 {\n    width: calc(var(--msr-spacing) * 8);\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:size-\\[10px\\] {\n    width: 10px;\n    height: 10px;\n  }\n  .msr\\:size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .msr\\:size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .msr\\:h-6 {\n    height: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:h-8 {\n    height: calc(var(--msr-spacing) * 8);\n  }\n  .msr\\:h-\\[14px\\] {\n    height: 14px;\n  }\n  .msr\\:h-full {\n    height: 100%;\n  }\n  .msr\\:h-px {\n    height: 1px;\n  }\n  .msr\\:max-h-\\[min\\(70vh\\,34rem\\)\\] {\n    max-height: min(70vh, 34rem);\n  }\n  .msr\\:w-4 {\n    width: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:w-6 {\n    width: calc(var(--msr-spacing) * 6);\n  }\n  .msr\\:w-9 {\n    width: calc(var(--msr-spacing) * 9);\n  }\n  .msr\\:w-12 {\n    width: calc(var(--msr-spacing) * 12);\n  }\n  .msr\\:w-44 {\n    width: calc(var(--msr-spacing) * 44);\n  }\n  .msr\\:w-\\[18px\\] {\n    width: 18px;\n  }\n  .msr\\:w-\\[26px\\] {\n    width: 26px;\n  }\n  .msr\\:w-\\[272px\\] {\n    width: 272px;\n  }\n  .msr\\:w-full {\n    width: 100%;\n  }\n  .msr\\:w-px {\n    width: 1px;\n  }\n  .msr\\:max-w-\\[calc\\(100vw-16px\\)\\] {\n    max-width: calc(100vw - 16px);\n  }\n  .msr\\:min-w-0 {\n    min-width: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:min-w-36 {\n    min-width: calc(var(--msr-spacing) * 36);\n  }\n  .msr\\:flex-1 {\n    flex: 1;\n  }\n  .msr\\:shrink-0 {\n    flex-shrink: 0;\n  }\n  .msr\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .msr\\:rotate-90 {\n    rotate: 90deg;\n  }\n  .msr\\:rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .msr\\:rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .msr\\:cursor-crosshair {\n    cursor: crosshair;\n  }\n  .msr\\:cursor-default {\n    cursor: default;\n  }\n  .msr\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .msr\\:touch-none {\n    touch-action: none;\n  }\n  .msr\\:appearance-none {\n    appearance: none;\n  }\n  .msr\\:grid-cols-\\[78px_156px\\] {\n    grid-template-columns: 78px 156px;\n  }\n  .msr\\:flex-col {\n    flex-direction: column;\n  }\n  .msr\\:items-center {\n    align-items: center;\n  }\n  .msr\\:items-start {\n    align-items: flex-start;\n  }\n  .msr\\:items-stretch {\n    align-items: stretch;\n  }\n  .msr\\:justify-between {\n    justify-content: space-between;\n  }\n  .msr\\:justify-center {\n    justify-content: center;\n  }\n  .msr\\:justify-end {\n    justify-content: flex-end;\n  }\n  .msr\\:gap-0 {\n    gap: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:gap-1 {\n    gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:gap-1\\.5 {\n    gap: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:gap-2 {\n    gap: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:gap-3 {\n    gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-px {\n    gap: 1px;\n  }\n  .msr\\:gap-x-3 {\n    column-gap: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:gap-y-1 {\n    row-gap: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:justify-self-end {\n    justify-self: flex-end;\n  }\n  .msr\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .msr\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .msr\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .msr\\:rounded-\\[3px\\] {\n    border-radius: 3px;\n  }\n  .msr\\:rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .msr\\:rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .msr\\:rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .msr\\:rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .msr\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .msr\\:rounded-lg {\n    border-radius: var(--msr-radius-lg);\n  }\n  .msr\\:rounded-md {\n    border-radius: var(--msr-radius-md);\n  }\n  .msr\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .msr\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .msr\\:border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .msr\\:border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .msr\\:border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .msr\\:border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .msr\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .msr\\:border-dotted {\n    --tw-border-style: dotted;\n    border-style: dotted;\n  }\n  .msr\\:border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .msr\\:border-\\[\\#0d99ff\\] {\n    border-color: #0d99ff;\n  }\n  .msr\\:border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .msr\\:border-black\\/8 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 8%, transparent);\n    }\n  }\n  .msr\\:border-black\\/10 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:border-black\\/15 {\n    border-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--msr-color-black) 15%, transparent);\n    }\n  }\n  .msr\\:border-ink-200 {\n    border-color: var(--msr-color-ink-200);\n  }\n  .msr\\:border-ink-700 {\n    border-color: var(--msr-color-ink-700);\n  }\n  .msr\\:border-red-200 {\n    border-color: var(--msr-color-red-200);\n  }\n  .msr\\:border-transparent {\n    border-color: transparent;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .msr\\:bg-\\[\\#0d99ff\\]\\/10 {\n    background-color: color-mix(in oklab, #0d99ff 10%, transparent);\n  }\n  .msr\\:bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .msr\\:bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .msr\\:bg-black {\n    background-color: var(--msr-color-black);\n  }\n  .msr\\:bg-black\\/10 {\n    background-color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n    }\n  }\n  .msr\\:bg-ink-50 {\n    background-color: var(--msr-color-ink-50);\n  }\n  .msr\\:bg-ink-900\\/90 {\n    background-color: var(--msr-color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n    }\n  }\n  .msr\\:bg-transparent {\n    background-color: transparent;\n  }\n  .msr\\:bg-white {\n    background-color: var(--msr-color-white);\n  }\n  .msr\\:p-1 {\n    padding: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:p-3 {\n    padding: calc(var(--msr-spacing) * 3);\n  }\n  .msr\\:p-px {\n    padding: 1px;\n  }\n  .msr\\:px-1 {\n    padding-inline: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:px-1\\.5 {\n    padding-inline: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:px-2 {\n    padding-inline: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:py-0 {\n    padding-block: calc(var(--msr-spacing) * 0);\n  }\n  .msr\\:py-0\\.5 {\n    padding-block: calc(var(--msr-spacing) * 0.5);\n  }\n  .msr\\:py-1 {\n    padding-block: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:py-1\\.5 {\n    padding-block: calc(var(--msr-spacing) * 1.5);\n  }\n  .msr\\:py-2 {\n    padding-block: calc(var(--msr-spacing) * 2);\n  }\n  .msr\\:pb-1 {\n    padding-bottom: calc(var(--msr-spacing) * 1);\n  }\n  .msr\\:text-center {\n    text-align: center;\n  }\n  .msr\\:text-left {\n    text-align: left;\n  }\n  .msr\\:font-mono {\n    font-family: var(--msr-font-mono);\n  }\n  .msr\\:text-\\[9px\\] {\n    font-size: 9px;\n  }\n  .msr\\:text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .msr\\:text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .msr\\:text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .msr\\:leading-4 {\n    --tw-leading: calc(var(--msr-spacing) * 4);\n    line-height: calc(var(--msr-spacing) * 4);\n  }\n  .msr\\:leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .msr\\:font-medium {\n    --tw-font-weight: var(--msr-font-weight-medium);\n    font-weight: var(--msr-font-weight-medium);\n  }\n  .msr\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .msr\\:text-\\[\\#64748b\\] {\n    color: #64748b;\n  }\n  .msr\\:text-black {\n    color: var(--msr-color-black);\n  }\n  .msr\\:text-black\\/45 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 45%, transparent);\n    }\n  }\n  .msr\\:text-black\\/60 {\n    color: var(--msr-color-black);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-black) 60%, transparent);\n    }\n  }\n  .msr\\:text-ink-50 {\n    color: var(--msr-color-ink-50);\n  }\n  .msr\\:text-ink-500 {\n    color: var(--msr-color-ink-500);\n  }\n  .msr\\:text-ink-700 {\n    color: var(--msr-color-ink-700);\n  }\n  .msr\\:text-ink-900 {\n    color: var(--msr-color-ink-900);\n  }\n  .msr\\:text-red-600 {\n    color: var(--msr-color-red-600);\n  }\n  .msr\\:text-white {\n    color: var(--msr-color-white);\n  }\n  .msr\\:text-white\\/60 {\n    color: var(--msr-color-white);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n    }\n  }\n  .msr\\:tabular-nums {\n    --tw-numeric-spacing: tabular-nums;\n    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n  }\n  .msr\\:opacity-0 {\n    opacity: 0%;\n  }\n  .msr\\:opacity-100 {\n    opacity: 100%;\n  }\n  .msr\\:shadow-\\[0_0_0_1px_rgba\\(15\\,23\\,42\\,0\\.12\\)\\] {\n    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.12));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .msr\\:outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .msr\\:outline-transparent {\n    outline-color: transparent;\n  }\n  .msr\\:transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n  }\n  .msr\\:transition-none {\n    transition-property: none;\n  }\n  .msr\\:duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .msr\\:outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .msr\\:select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .msr\\:group-hover\\:border-ink-200 {\n    &:is(:where(.msr\\:group):hover *) {\n      @media (hover: hover) {\n        border-color: var(--msr-color-ink-200);\n      }\n    }\n  }\n  .msr\\:focus-within\\:rounded-l-\\[5px\\] {\n    &:focus-within {\n      border-top-left-radius: 5px;\n      border-bottom-left-radius: 5px;\n    }\n  }\n  .msr\\:focus-within\\:rounded-r-\\[5px\\] {\n    &:focus-within {\n      border-top-right-radius: 5px;\n      border-bottom-right-radius: 5px;\n    }\n  }\n  .msr\\:focus-within\\:outline {\n    &:focus-within {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-1 {\n    &:focus-within {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-offset-\\[-1px\\] {\n    &:focus-within {\n      outline-offset: -1px;\n    }\n  }\n  .msr\\:focus-within\\:outline-\\[\\#0d99ff\\] {\n    &:focus-within {\n      outline-color: #0d99ff;\n    }\n  }\n  .msr\\:hover\\:border-ink-200 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--msr-color-ink-200);\n      }\n    }\n  }\n  .msr\\:hover\\:bg-\\[\\#0d99ff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0d99ff;\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/4 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-black);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .msr\\:hover\\:bg-ink-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-ink-50);\n      }\n    }\n  }\n  .msr\\:hover\\:bg-red-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--msr-color-red-50);\n      }\n    }\n  }\n  .msr\\:hover\\:text-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-black);\n      }\n    }\n  }\n  .msr\\:hover\\:text-ink-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-ink-700);\n      }\n    }\n  }\n  .msr\\:hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--msr-color-white);\n      }\n    }\n  }\n  .msr\\:hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\] {\n    &:focus {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\] {\n    &:focus-visible {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0d99ff);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_\\#ef4444\\] {\n    &:focus-visible {\n      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #ef4444);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:ring-1 {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .msr\\:focus-visible\\:ring-\\[\\#0d99ff\\]\\/25 {\n    &:focus-visible {\n      --tw-ring-color: color-mix(in oklab, #0d99ff 25%, transparent);\n    }\n  }\n  .msr\\:focus-visible\\:outline-none {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n:root, :host {\n  --color-ink-50: #f8fafc;\n  --color-ink-200: #e2e8f0;\n  --color-ink-500: #64748b;\n  --color-ink-700: #334155;\n  --color-ink-900: #0f172a;\n}\n:host {\n  all: initial;\n  display: block;\n  color-scheme: light;\n  color: #0f172a;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.5;\n  letter-spacing: normal;\n  direction: ltr;\n  --msr-spacing: 4px;\n}\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n@layer base {\n  *, ::before, ::after, ::backdrop {\n    --tw-border-style: solid;\n    --tw-outline-style: solid;\n    --tw-shadow: 0 0 #0000;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n  }\n  button, input, select, textarea {\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    letter-spacing: inherit;\n  }\n}\n.mesurer-toolbar-surface {\n  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n.mesurer-color-picker {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n.mesurer-settings-tabs {\n  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);\n}\n.mesurer-settings-tab[aria-selected="true"] {\n  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);\n}\n.mesurer-switch-track {\n  box-sizing: border-box;\n  border: 1px solid #e2e8f0;\n}\n.mesurer-switch-track[data-checked="true"] {\n  border-color: #0d99ff;\n}\n.mesurer-control-shell {\n  border: 1px solid transparent;\n}\n.mesurer-control-shell:hover {\n  border-color: #e2e8f0;\n}\n.mesurer-control-focus:focus-within {\n  outline: 1px solid #0d99ff;\n  outline-offset: -1px;\n}\n.mesurer-root {\n  --msr-spacing: 4px;\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-ordinal: initial;\n      --tw-slashed-zero: initial;\n      --tw-numeric-figure: initial;\n      --tw-numeric-spacing: initial;\n      --tw-numeric-fraction: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n';
 
 // components/toolbar.tsx
 import {
@@ -77,7 +96,7 @@ import { useState as useState2 } from "react";
 // package.json
 var package_default = {
   name: "mesurer",
-  version: "0.0.10",
+  version: "0.0.11",
   description: "Measure and align elements on any website.",
   license: "MIT",
   author: "Julien Thibeaut",
@@ -339,10 +358,10 @@ function ControlShell({ left, right }) {
   return /* @__PURE__ */ jsxs2(
     "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",
+      className: "mesurer-control-shell msr:group msr:flex msr:h-6 msr:w-full msr:min-w-0 msr:items-center msr:overflow-hidden msr:rounded-[5px] msr:border msr:border-transparent msr:bg-ink-50 msr:hover:border-ink-200",
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "msr:flex msr:h-full msr:min-w-0 msr:flex-1 msr:items-center msr:focus-within:rounded-l-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: left }),
-        /* @__PURE__ */ jsx2("div", { className: "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 })
+        /* @__PURE__ */ jsx2("div", { className: "mesurer-control-focus msr:flex msr:h-full msr:min-w-0 msr:flex-1 msr:items-center msr:focus-within:rounded-l-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: left }),
+        /* @__PURE__ */ jsx2("div", { className: "mesurer-control-focus msr:box-border msr:flex msr:h-full msr:w-12 msr:shrink-0 msr:items-center msr:border-l msr:border-transparent msr:group-hover:border-ink-200 msr:focus-within:rounded-r-[5px] msr:focus-within:outline msr:focus-within:outline-1 msr:focus-within:outline-[#0d99ff] msr:focus-within:outline-offset-[-1px]", children: right })
       ]
     }
   );
@@ -354,7 +373,7 @@ function SettingsSwitch({ label, checked, onChange }) {
       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",
+      className: "msr:col-span-2 msr:grid msr:h-6 msr:w-full msr:appearance-none msr:grid-cols-[78px_156px] msr:items-center msr:gap-3 msr:text-left msr:text-[12px] msr:leading-none msr:text-ink-700",
       onClick: () => onChange(!checked),
       children: [
         /* @__PURE__ */ jsx2("span", { children: label }),
@@ -363,8 +382,9 @@ function SettingsSwitch({ label, checked, onChange }) {
           {
             "aria-hidden": "true",
             style: { justifySelf: "end" },
+            "data-checked": checked ? "true" : void 0,
             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",
+              "mesurer-switch-track msr:flex msr:h-[14px] msr:w-[26px] msr:shrink-0 msr:items-center msr:rounded-full msr:border msr:p-px msr:transition-colors",
               checked ? "msr:border-[#0d99ff] msr:bg-[#0d99ff]" : "msr:border-ink-200 msr:bg-ink-50"
             ),
             children: /* @__PURE__ */ jsx2(
@@ -671,7 +691,8 @@ function SettingsPanel({
   setGuideStyle,
   rulerSettings,
   setRulerSettings,
-  initialTab,
+  activeTab,
+  onTabChange,
   onResetSettings,
   onClearWorkspace
 }) {
@@ -684,10 +705,9 @@ function SettingsPanel({
       return [...previous, format];
     });
   };
-  const [activeTab, setActiveTab] = useState2(initialTab);
   const patternTooltip = useTooltip();
   return /* @__PURE__ */ jsxs2("div", { className: "msr:flex msr:max-h-[min(70vh,34rem)] msr:flex-col msr:gap-2 msr:overflow-y-auto", onPointerDown: (event) => event.stopPropagation(), children: [
-    /* @__PURE__ */ jsx2("div", { className: "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: [
+    /* @__PURE__ */ jsx2("div", { className: "mesurer-settings-tabs msr:flex msr:h-6 msr:shrink-0 msr:select-none msr:items-stretch msr:gap-0 msr:rounded-[5px] msr:bg-ink-50 msr:p-px", role: "tablist", "aria-label": "Settings sections", children: [
       ["guides", "Guides"],
       ["select", "Select"],
       ["color-picker", "Color"],
@@ -700,10 +720,10 @@ function SettingsPanel({
         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]",
+          "mesurer-settings-tab msr:relative msr:flex msr:min-w-0 msr:flex-1 msr:appearance-none msr:items-center msr:justify-center msr:whitespace-nowrap msr:px-1.5 msr:py-0 msr:text-[10px] msr:font-medium msr:transition-colors msr:focus-visible:outline-none msr:focus-visible:shadow-[inset_0_0_0_1px_#0d99ff]",
           activeTab === value ? "msr:rounded-[5px] msr:bg-white msr:text-ink-900 msr:shadow-[0_0_0_1px_rgba(15,23,42,0.12)]" : "msr:rounded-[5px] msr:text-ink-500 msr:hover:text-ink-700"
         ),
-        onClick: () => setActiveTab(value),
+        onClick: () => onTabChange(value),
         children: label
       },
       value
@@ -1165,7 +1185,9 @@ function ToolbarComponent({
   setGuideStyle,
   rulerSettings,
   setRulerSettings,
-  initialSettingsTab,
+  settingsTab,
+  setSettingsTab,
+  onToggleSettings,
   onResetSettings,
   onClearWorkspace
 }, ref) {
@@ -1551,7 +1573,7 @@ function ToolbarComponent({
               shortcut: "\u2318/Ctrl+,",
               onClick: () => {
                 onInteract();
-                setSettingsOpen((previous) => !previous);
+                onToggleSettings();
               },
               tooltipVisible: tooltipsEnabled && visibleTooltipId === "settings",
               tooltipInstant,
@@ -1603,7 +1625,8 @@ function ToolbarComponent({
                   setGuideStyle,
                   rulerSettings,
                   setRulerSettings,
-                  initialTab: initialSettingsTab,
+                  activeTab: settingsTab,
+                  onTabChange: setSettingsTab,
                   onResetSettings,
                   onClearWorkspace
                 }
@@ -1838,7 +1861,9 @@ var RulersOverlay = memo2(function RulersOverlay2({
   onFinishGuide,
   onCancelGuide,
   guides,
-  selectedGuideIds
+  selectedGuideIds,
+  interactive = true,
+  forceVisible = false
 }) {
   const [dragPosition, setDragPosition] = useState5(null);
   const [dragOrientation, setDragOrientation] = useState5(null);
@@ -1859,7 +1884,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
       ownerWindow.document.removeEventListener("mousemove", handlePointerMove, true);
     };
   }, [ownerWindow, settings.edgeReveal]);
-  const showRulers = !settings.edgeReveal || nearEdge;
+  const showRulers = forceVisible || !settings.edgeReveal || nearEdge;
   const beginGuideDrag = (orientation, event) => {
     if (event.button !== 0) return;
     event.stopPropagation();
@@ -1928,7 +1953,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
               boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
               height: RULER_SIZE,
               cursor: "ns-resize",
-              pointerEvents: showRulers ? "auto" : "none"
+              pointerEvents: showRulers && interactive ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("horizontal", event),
             onPointerMove: moveGuide,
@@ -2034,7 +2059,7 @@ var RulersOverlay = memo2(function RulersOverlay2({
               boxShadow: "1px 0 3px rgba(0, 0, 0, 0.12)",
               width: RULER_SIZE,
               cursor: "ew-resize",
-              pointerEvents: showRulers ? "auto" : "none"
+              pointerEvents: showRulers && interactive ? "auto" : "none"
             },
             onPointerDown: (event) => beginGuideDrag("vertical", event),
             onPointerMove: moveGuide,
@@ -4626,7 +4651,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
 }) {
   const overlayVisible = enabled;
   const overlayInteractive = interactive && overlayVisible && toolMode !== "none" && toolMode !== "text-inspector" && toolMode !== "xray" && toolMode !== "rulers";
-  const selectionVisible = interactive && toolMode === "select";
+  const selectionVisible = toolMode === "select";
   return /* @__PURE__ */ jsxs10(
     "div",
     {
@@ -4800,7 +4825,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
           },
           measurement.id
         )) : null,
-        interactive ? heldDistances.map((distance) => /* @__PURE__ */ jsx11(
+        heldDistances.map((distance) => /* @__PURE__ */ jsx11(
           DistanceOverlayItem,
           {
             distance,
@@ -4808,7 +4833,7 @@ var MeasurerOverlay = memo6(function MeasurerOverlay2({
             onRemove: onRemoveHeldDistance
           },
           `held-${distance.id}`
-        )) : null,
+        )),
         selectionVisible && altPressed && optionPairOverlay ? /* @__PURE__ */ jsx11(
           DistanceOverlayItem,
           {
@@ -6080,7 +6105,10 @@ var createLocalStoragePersistence = (ownerWindow, workspaceKey, settingsKey = wo
     subscribe: (listener) => {
       const handleStorage = (event) => {
         if (event.key !== settingsKey && event.key !== workspaceKey && event.key !== legacyKey) return;
-        listener(read());
+        listener(read(), {
+          settings: event.key === settingsKey || event.key === legacyKey || settingsKey === workspaceKey,
+          workspace: event.key === workspaceKey || event.key === legacyKey || settingsKey === workspaceKey
+        });
       };
       ownerWindow.addEventListener("storage", handleStorage);
       return () => {
@@ -6312,6 +6340,7 @@ function MeasurerClient({
   const [colorPickerSample, setColorPickerSample] = useState11(null);
   const [colorPickerUnsupported, setColorPickerUnsupported] = useState11(false);
   const [settingsOpen, setSettingsOpen] = useState11(false);
+  const [settingsTab, setSettingsTab] = useState11("general");
   const [settingsHighlightColor, setSettingsHighlightColor] = useState11(
     persistedSettings.highlightColor ?? highlightColor
   );
@@ -6494,11 +6523,8 @@ function MeasurerClient({
     setSelectedGuideIds(workspace.selectedGuideIds);
     setHeldDistances(workspace.heldDistances);
   }, [setActiveMeasurement, setEnabled, setGuideOrientation, setGuides, setHeldDistances, setMeasurements, setRulersVisible, setSelectedGuideIds, setToolMode]);
-  const applyPersistenceSnapshot = useCallback8((snapshot) => {
-    if (!snapshot) {
-      clearPersistedWorkspace();
-      return;
-    }
+  const applyPersistenceSnapshot = useCallback8((snapshot, source) => {
+    if (!snapshot) return;
     applyingExternalPersistenceRef.current = true;
     const settings = sanitizeStoredSettings(ownerWindow, snapshot.settings);
     if (settings.highlightColor !== void 0) setSettingsHighlightColor(settings.highlightColor);
@@ -6514,15 +6540,13 @@ function MeasurerClient({
     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) {
+    if (source?.workspace !== false && workspace && (settings.persistOnReload ?? settingsPersistOnReload)) {
       applyPersistedWorkspace(workspace);
     }
     ownerWindow.setTimeout(() => {
       applyingExternalPersistenceRef.current = false;
     }, 0);
-  }, [applyPersistedWorkspace, clearPersistedWorkspace, guideStyleDefault, ownerWindow, rulerSettingsDefault, setMultiMeasureEnabled, setSelectNewGuideEnabled, setSettingsColorClickFormat, setSettingsColorFormats, setSettingsGuideColor, setSettingsHighlightColor, setSettingsHoverHighlight, setSettingsPersistOnReload, setSnapEnabled, setSnapGuidesEnabled, settingsPersistOnReload]);
+  }, [applyPersistedWorkspace, guideStyleDefault, ownerWindow, rulerSettingsDefault, setMultiMeasureEnabled, setSelectNewGuideEnabled, setSettingsColorClickFormat, setSettingsColorFormats, setSettingsGuideColor, setSettingsHighlightColor, setSettingsHoverHighlight, setSettingsPersistOnReload, setSnapEnabled, setSnapGuidesEnabled, settingsPersistOnReload]);
   const previousPersistenceRef = useRef12(activePersistence);
   useEffect7(() => {
     if (previousPersistenceRef.current === activePersistence) return;
@@ -6761,6 +6785,14 @@ function MeasurerClient({
       }
     }
   }, [ownerWindow, setEnabledWithHistory, setToolModeWithHistory, settingsColorClickFormat]);
+  const toggleSettings = useCallback8(() => {
+    if (settingsOpen) {
+      setSettingsOpen(false);
+      return;
+    }
+    setSettingsTab(initialSettingsTab);
+    setSettingsOpen(true);
+  }, [initialSettingsTab, settingsOpen]);
   useHotkeys({
     eventTarget: ownerWindow,
     clearAll,
@@ -6776,7 +6808,7 @@ function MeasurerClient({
     onInteract: () => setToolbarActive(true),
     onColorPicker: openColorPicker,
     onToggleXray: () => setXrayVisible((previous) => !previous),
-    onToggleSettings: () => setSettingsOpen((previous) => !previous),
+    onToggleSettings: toggleSettings,
     isSettingsOpen: () => settingsOpen,
     onCloseColorPicker: () => setColorPickerActive(false),
     isColorPickerActive: () => colorPickerActive
@@ -6815,7 +6847,7 @@ function MeasurerClient({
     document: ownerDocument,
     window: ownerWindow,
     enabled,
-    selectionEnabled: toolMode === "select" && !settingsOpen,
+    selectionEnabled: toolMode === "select",
     selectedElementRef,
     hoverElementRef,
     setSelectedMeasurement,
@@ -6927,16 +6959,16 @@ function MeasurerClient({
     toolMode
   ]);
   useEffect7(() => {
-    if (toolMode === "text-inspector" && !settingsOpen) {
+    if (toolMode === "text-inspector") {
       textInspector.enable();
     } else {
       textInspector.disable();
     }
-  }, [settingsOpen, textInspector, toolMode]);
-  const selectionContextRef = useRef12({ toolMode, settingsOpen });
-  if (selectionContextRef.current.toolMode !== toolMode || selectionContextRef.current.settingsOpen !== settingsOpen) {
-    selectionContextRef.current = { toolMode, settingsOpen };
-    if (!(toolMode === "select" && !settingsOpen)) {
+  }, [textInspector, toolMode]);
+  const selectionToolRef = useRef12(toolMode);
+  if (selectionToolRef.current !== toolMode) {
+    selectionToolRef.current = toolMode;
+    if (toolMode !== "select") {
       setSelectedElement(null);
       setHoverElement(null);
       setHoverRect(null);
@@ -7208,6 +7240,22 @@ function MeasurerClient({
     [clearGuideDragHold, setDraggingGuideId]
   );
   const overlayInteractive = enabled && !settingsOpen;
+  const overlayGuides = useMemo2(() => {
+    if (guides.length > 0) return guides;
+    if (!settingsOpen || settingsTab !== "guides") return guides;
+    return [
+      {
+        id: "__mesurer-preview-vertical",
+        orientation: "vertical",
+        position: ownerWindow.innerWidth / 2
+      },
+      {
+        id: "__mesurer-preview-horizontal",
+        orientation: "horizontal",
+        position: ownerWindow.innerHeight / 2
+      }
+    ];
+  }, [guides, ownerWindow, settingsOpen, settingsTab]);
   return createPortal(
     /* @__PURE__ */ jsxs11(
       "div",
@@ -7215,11 +7263,13 @@ function MeasurerClient({
         ref: overlayRef,
         className: "mesurer-root msr:pointer-events-none msr:fixed msr:inset-0 msr:z-50",
         children: [
-          enabled && rulersVisible && !settingsOpen ? /* @__PURE__ */ jsx12(
+          enabled && rulersVisible ? /* @__PURE__ */ jsx12(
             RulersOverlay,
             {
               ownerWindow,
               settings: settingsRulerSettings,
+              interactive: !settingsOpen,
+              forceVisible: settingsOpen,
               onStartGuide: startGuideFromRuler,
               onMoveGuide: moveGuideFromRuler,
               onFinishGuide: finishGuideFromRuler,
@@ -7231,7 +7281,7 @@ function MeasurerClient({
           /* @__PURE__ */ jsx12(
             MeasurerOverlay,
             {
-              enabled: enabled && (!settingsOpen || guides.length > 0),
+              enabled,
               interactive: overlayInteractive,
               toolMode,
               guidePointerEvents: overlayInteractive && (toolMode !== "none" || rulersVisible),
@@ -7255,7 +7305,7 @@ function MeasurerClient({
               optionPairOverlay,
               guideDistanceOverlay,
               optionContainerLines,
-              guides,
+              guides: overlayGuides,
               hoverGuide,
               draggingGuideId,
               selectedGuideIds,
@@ -7330,7 +7380,9 @@ function MeasurerClient({
               setGuideStyle: setSettingsGuideStyle,
               rulerSettings: settingsRulerSettings,
               setRulerSettings: setSettingsRulerSettings,
-              initialSettingsTab,
+              settingsTab,
+              setSettingsTab,
+              onToggleSettings: toggleSettings,
               onResetSettings: resetSettings,
               onClearWorkspace: clearWorkspace
             }

package/dist/styles.css

@@ -22,11 +22,11 @@
     --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --msr-default-font-family: var(--msr-font-sans);
     --msr-default-mono-font-family: var(--msr-font-mono);
-    --msr-color-ink-50: var(--color-ink-50);
-    --msr-color-ink-200: var(--color-ink-200);
-    --msr-color-ink-500: var(--color-ink-500);
-    --msr-color-ink-700: var(--color-ink-700);
-    --msr-color-ink-900: var(--color-ink-900);
+    --msr-color-ink-50: #f8fafc;
+    --msr-color-ink-200: #e2e8f0;
+    --msr-color-ink-500: #64748b;
+    --msr-color-ink-700: #334155;
+    --msr-color-ink-900: #0f172a;
   }
 }
 @layer base {
@@ -935,12 +935,77 @@
   --color-ink-700: #334155;
   --color-ink-900: #0f172a;
 }
+:host {
+  all: initial;
+  display: block;
+  color-scheme: light;
+  color: #0f172a;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: normal;
+  direction: ltr;
+  --msr-spacing: 4px;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+@layer base {
+  *, ::before, ::after, ::backdrop {
+    --tw-border-style: solid;
+    --tw-outline-style: solid;
+    --tw-shadow: 0 0 #0000;
+    --tw-inset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-inset-ring-shadow: 0 0 #0000;
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-translate-z: 0;
+  }
+  button, input, select, textarea {
+    appearance: none;
+    background-color: transparent;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+  }
+}
 .mesurer-toolbar-surface {
   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);
 }
 .mesurer-menu-surface {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
+.mesurer-color-picker {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+.mesurer-settings-tabs {
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
+}
+.mesurer-settings-tab[aria-selected="true"] {
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
+}
+.mesurer-switch-track {
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+}
+.mesurer-switch-track[data-checked="true"] {
+  border-color: #0d99ff;
+}
+.mesurer-control-shell {
+  border: 1px solid transparent;
+}
+.mesurer-control-shell:hover {
+  border-color: #e2e8f0;
+}
+.mesurer-control-focus:focus-within {
+  outline: 1px solid #0d99ff;
+  outline-offset: -1px;
+}
 .mesurer-root {
   --msr-spacing: 4px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesurer",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Measure and align elements on any website.",
   "license": "MIT",
   "author": "Julien Thibeaut",