mesurer 0.0.1 → 0.0.3

package/README.md

@@ -33,6 +33,8 @@ function App() {
 }
 ```
 
+No additional CSS import is required.
+
 ## Features
 
 - **Toggle on/off** – Enable the overlay with a single shortcut
@@ -45,7 +47,6 @@ function App() {
 ## Requirements
 
 - React 18+
-- Tailwind CSS v4 with package content included
 
 ## License
 

package/dist/index.cjs

@@ -23,12 +23,39 @@ __export(index_exports, {
   Measurer: () => Measurer
 });
 module.exports = __toCommonJS(index_exports);
-var import_styles = require("./styles.css");
+
+// style-inject.ts
+var MESURER_STYLE_ID = "mesurer-styles";
+function ensureMeasurerStyles(cssText) {
+  if (typeof document === "undefined") return;
+  if (!cssText) return;
+  if (document.getElementById(MESURER_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = MESURER_STYLE_ID;
+  style.textContent = cssText;
+  document.head.appendChild(style);
+}
+
+// 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    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-ink-50: var(--color-ink-50);\n    --color-ink-200: var(--color-ink-200);\n    --color-ink-500: var(--color-ink-500);\n    --color-ink-700: var(--color-ink-700);\n    --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(--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(--default-font-feature-settings, normal);\n    font-variation-settings: var(--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(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--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  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1 {\n    left: calc(var(--spacing) * 1);\n  }\n  .left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[70\\] {\n    z-index: 70;\n  }\n  .z-\\[90\\] {\n    z-index: 90;\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .-ml-1 {\n    margin-left: calc(var(--spacing) * -1);\n  }\n  .flex {\n    display: flex;\n  }\n  .table {\n    display: table;\n  }\n  .size-8 {\n    width: calc(var(--spacing) * 8);\n    height: calc(var(--spacing) * 8);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-44 {\n    width: calc(var(--spacing) * 44);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-px {\n    width: 1px;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1 {\n    --tw-translate-x: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-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  .-translate-y-1 {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-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  .rotate-90 {\n    rotate: 90deg;\n  }\n  .rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .cursor-crosshair {\n    cursor: crosshair;\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-grab {\n    cursor: grab;\n  }\n  .cursor-grabbing {\n    cursor: grabbing;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-px {\n    gap: 1px;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .border-ink-200 {\n    border-color: var(--color-ink-200);\n  }\n  .bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/10 {\n    background-color: color-mix(in srgb, #000 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n    }\n  }\n  .bg-ink-900 {\n    background-color: var(--color-ink-900);\n  }\n  .bg-ink-900\\/90 {\n    background-color: var(--color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-ink-900) 90%, transparent);\n    }\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .py-0 {\n    padding-block: calc(var(--spacing) * 0);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-ink-50 {\n    color: var(--color-ink-50);\n  }\n  .text-ink-500 {\n    color: var(--color-ink-500);\n  }\n  .text-ink-700 {\n    color: var(--color-ink-700);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/60 {\n    color: color-mix(in srgb, #fff 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 60%, transparent);\n    }\n  }\n  .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  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-\\[0px_0px_\\.5px_rgba\\(0\\,0\\,0\\,\\.18\\)\\,0px_3px_8px_rgba\\(0\\,0\\,0\\,\\.1\\)\\,0px_1px_3px_rgba\\(0\\,0\\,0\\,\\.1\\)\\] {\n    --tw-shadow: 0px 0px .5px var(--tw-shadow-color, rgba(0,0,0,.18)), 0px 3px 8px var(--tw-shadow-color, rgba(0,0,0,.1)), 0px 1px 3px var(--tw-shadow-color, rgba(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  .shadow-\\[0px_10px_30px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n    --tw-shadow: 0px 10px 30px var(--tw-shadow-color, rgba(0,0,0,0.08));\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  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-transparent {\n    outline-color: transparent;\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .hover\\:bg-\\[\\#0d99ff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0d99ff;\n      }\n    }\n  }\n  .hover\\:bg-black\\/4 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #000 4%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-black) 4%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #000 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n:root {\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@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-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-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';
 
 // measurer.tsx
 var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 
+// constants.ts
+var MEASURE_LABEL_OFFSET = 2;
+var GUIDE_SNAP_DISTANCE = 10;
+var GUIDE_HITBOX_SIZE = 14;
+var GUIDE_DRAG_HOLD_MS = 220;
+var MEASURE_TRANSITION_MS = 140;
+var MIN_MULTI_TARGET_SIZE = 8;
+var MIN_MULTI_ELEMENT_COVERAGE = 0.45;
+var ANCESTOR_PRUNE_SCALE = 1.6;
+var ANCESTOR_KEEP_COVERAGE = 0.92;
+var MIN_SINGLE_TARGET_SIZE = 8;
+var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
+
 // components/toolbar.tsx
 var import_react = require("react");
 
@@ -530,21 +557,6 @@ var useDragState = () => {
 
 // hooks/use-guide-drag-hold.ts
 var import_react3 = require("react");
-
-// constants.ts
-var MEASURE_LABEL_OFFSET = 2;
-var GUIDE_SNAP_DISTANCE = 10;
-var GUIDE_HITBOX_SIZE = 14;
-var GUIDE_DRAG_HOLD_MS = 220;
-var MEASURE_TRANSITION_MS = 140;
-var MIN_MULTI_TARGET_SIZE = 8;
-var MIN_MULTI_ELEMENT_COVERAGE = 0.45;
-var ANCESTOR_PRUNE_SCALE = 1.6;
-var ANCESTOR_KEEP_COVERAGE = 0.92;
-var MIN_SINGLE_TARGET_SIZE = 8;
-var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
-
-// hooks/use-guide-drag-hold.ts
 var useGuideDragHold = () => {
   const guideDragHoldTimerRef = (0, import_react3.useRef)(null);
   const guideDragHoldGuideIdRef = (0, import_react3.useRef)(null);
@@ -2846,6 +2858,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
   optionContainerLines,
   guides,
   hoverGuide,
+  draggingGuideId,
   selectedGuideIds,
   guideColorActive,
   guideColorHover,
@@ -2862,7 +2875,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: `absolute inset-0 ${enabled && toolMode !== "none" ? `pointer-events-auto ${guidesEnabled ? "cursor-crosshair" : "cursor-default"} opacity-100` : "pointer-events-none opacity-0"}`,
+      className: `absolute inset-0 ${enabled && toolMode !== "none" ? `pointer-events-auto ${guidesEnabled ? hoverGuide || draggingGuideId ? "cursor-default" : "cursor-crosshair" : "cursor-default"} opacity-100` : "pointer-events-none opacity-0"}`,
       onPointerDown,
       onPointerMove,
       onPointerUp,
@@ -3227,6 +3240,7 @@ function MeasurerClient({
 }) {
   const selectionRectRef = (0, import_react19.useRef)(null);
   const toolbarRef = (0, import_react19.useRef)(null);
+  const selectionAnimationCleanupTimeoutRef = (0, import_react19.useRef)(null);
   const persistedState = (0, import_react19.useMemo)(() => {
     if (!persistOnReload) return null;
     const stored = window.localStorage.getItem("mesurer-state");
@@ -3483,6 +3497,50 @@ function MeasurerClient({
     if (hoverHighlightEnabled) return;
     setHoverRect(null);
   }, [hoverHighlightEnabled, setHoverRect]);
+  (0, import_react19.useEffect)(() => {
+    const hasSelectionAnimationState = !!selectionOriginRect || !!selectedMeasurement?.originRect || selectedMeasurements.some((measurement) => !!measurement.originRect);
+    if (!hasSelectionAnimationState) {
+      if (selectionAnimationCleanupTimeoutRef.current !== null) {
+        window.clearTimeout(selectionAnimationCleanupTimeoutRef.current);
+        selectionAnimationCleanupTimeoutRef.current = null;
+      }
+      return;
+    }
+    if (selectionAnimationCleanupTimeoutRef.current !== null) return;
+    selectionAnimationCleanupTimeoutRef.current = window.setTimeout(() => {
+      selectionAnimationCleanupTimeoutRef.current = null;
+      setSelectionOriginRect((prev) => prev ? null : prev);
+      setSelectedMeasurement((prev) => {
+        if (!prev?.originRect) return prev;
+        const { originRect: _originRect, ...next } = prev;
+        return next;
+      });
+      setSelectedMeasurements((prev) => {
+        let changed = false;
+        const next = prev.map((measurement) => {
+          if (!measurement.originRect) return measurement;
+          changed = true;
+          const { originRect: _originRect, ...rest } = measurement;
+          return rest;
+        });
+        return changed ? next : prev;
+      });
+    }, MEASURE_TRANSITION_MS);
+  }, [
+    selectionOriginRect,
+    selectedMeasurement,
+    selectedMeasurements,
+    setSelectedMeasurement,
+    setSelectedMeasurements,
+    setSelectionOriginRect
+  ]);
+  (0, import_react19.useEffect)(() => {
+    return () => {
+      if (selectionAnimationCleanupTimeoutRef.current !== null) {
+        window.clearTimeout(selectionAnimationCleanupTimeoutRef.current);
+      }
+    };
+  }, []);
   const displayedMeasurements = holdEnabled ? measurements : multiMeasureEnabled && measurements.length > 0 ? measurements : activeMeasurement ? [activeMeasurement] : [];
   const {
     activeRect,
@@ -3644,6 +3702,7 @@ function MeasurerClient({
           optionContainerLines,
           guides,
           hoverGuide,
+          draggingGuideId,
           selectedGuideIds,
           guideColorActive,
           guideColorHover,
@@ -3692,6 +3751,9 @@ function Measurer({
     }
   );
 }
+
+// index.ts
+ensureMeasurerStyles(MESURER_STYLES);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Measurer

package/dist/index.js

@@ -1,5 +1,17 @@
-// index.ts
-import "./styles.css";
+// style-inject.ts
+var MESURER_STYLE_ID = "mesurer-styles";
+function ensureMeasurerStyles(cssText) {
+  if (typeof document === "undefined") return;
+  if (!cssText) return;
+  if (document.getElementById(MESURER_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = MESURER_STYLE_ID;
+  style.textContent = cssText;
+  document.head.appendChild(style);
+}
+
+// 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    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-ink-50: var(--color-ink-50);\n    --color-ink-200: var(--color-ink-200);\n    --color-ink-500: var(--color-ink-500);\n    --color-ink-700: var(--color-ink-700);\n    --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(--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(--default-font-feature-settings, normal);\n    font-variation-settings: var(--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(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--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  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1 {\n    left: calc(var(--spacing) * 1);\n  }\n  .left-1\\/2 {\n    left: calc(1 / 2 * 100%);\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[70\\] {\n    z-index: 70;\n  }\n  .z-\\[90\\] {\n    z-index: 90;\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .-ml-1 {\n    margin-left: calc(var(--spacing) * -1);\n  }\n  .flex {\n    display: flex;\n  }\n  .table {\n    display: table;\n  }\n  .size-8 {\n    width: calc(var(--spacing) * 8);\n    height: calc(var(--spacing) * 8);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-44 {\n    width: calc(var(--spacing) * 44);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-px {\n    width: 1px;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1 {\n    --tw-translate-x: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-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  .-translate-y-1 {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-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  .rotate-90 {\n    rotate: 90deg;\n  }\n  .rotate-\\[45deg\\] {\n    rotate: 45deg;\n  }\n  .rotate-\\[135deg\\] {\n    rotate: 135deg;\n  }\n  .cursor-crosshair {\n    cursor: crosshair;\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-grab {\n    cursor: grab;\n  }\n  .cursor-grabbing {\n    cursor: grabbing;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-px {\n    gap: 1px;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .rounded-\\[8px\\] {\n    border-radius: 8px;\n  }\n  .rounded-\\[12px\\] {\n    border-radius: 12px;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .border-\\[\\#2563eb\\]\\/70 {\n    border-color: color-mix(in oklab, #2563eb 70%, transparent);\n  }\n  .border-ink-200 {\n    border-color: var(--color-ink-200);\n  }\n  .bg-\\[\\#0d99ff\\] {\n    background-color: #0d99ff;\n  }\n  .bg-\\[\\#2563eb\\] {\n    background-color: #2563eb;\n  }\n  .bg-\\[\\#fff\\] {\n    background-color: #fff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/10 {\n    background-color: color-mix(in srgb, #000 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n    }\n  }\n  .bg-ink-900 {\n    background-color: var(--color-ink-900);\n  }\n  .bg-ink-900\\/90 {\n    background-color: var(--color-ink-900);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-ink-900) 90%, transparent);\n    }\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .py-0 {\n    padding-block: calc(var(--spacing) * 0);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-ink-50 {\n    color: var(--color-ink-50);\n  }\n  .text-ink-500 {\n    color: var(--color-ink-500);\n  }\n  .text-ink-700 {\n    color: var(--color-ink-700);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/60 {\n    color: color-mix(in srgb, #fff 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 60%, transparent);\n    }\n  }\n  .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  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-\\[0px_0px_\\.5px_rgba\\(0\\,0\\,0\\,\\.18\\)\\,0px_3px_8px_rgba\\(0\\,0\\,0\\,\\.1\\)\\,0px_1px_3px_rgba\\(0\\,0\\,0\\,\\.1\\)\\] {\n    --tw-shadow: 0px 0px .5px var(--tw-shadow-color, rgba(0,0,0,.18)), 0px 3px 8px var(--tw-shadow-color, rgba(0,0,0,.1)), 0px 1px 3px var(--tw-shadow-color, rgba(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  .shadow-\\[0px_10px_30px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n    --tw-shadow: 0px 10px 30px var(--tw-shadow-color, rgba(0,0,0,0.08));\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  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-transparent {\n    outline-color: transparent;\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .hover\\:bg-\\[\\#0d99ff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0d99ff;\n      }\n    }\n  }\n  .hover\\:bg-black\\/4 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #000 4%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-black) 4%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-black\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #000 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n:root {\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@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-ordinal {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-slashed-zero {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-figure {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-spacing {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-numeric-fraction {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-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-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';
 
 // measurer.tsx
 import {
@@ -12,6 +24,19 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
+// constants.ts
+var MEASURE_LABEL_OFFSET = 2;
+var GUIDE_SNAP_DISTANCE = 10;
+var GUIDE_HITBOX_SIZE = 14;
+var GUIDE_DRAG_HOLD_MS = 220;
+var MEASURE_TRANSITION_MS = 140;
+var MIN_MULTI_TARGET_SIZE = 8;
+var MIN_MULTI_ELEMENT_COVERAGE = 0.45;
+var ANCESTOR_PRUNE_SCALE = 1.6;
+var ANCESTOR_KEEP_COVERAGE = 0.92;
+var MIN_SINGLE_TARGET_SIZE = 8;
+var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
+
 // components/toolbar.tsx
 import {
   forwardRef,
@@ -521,21 +546,6 @@ var useDragState = () => {
 
 // hooks/use-guide-drag-hold.ts
 import { useCallback as useCallback2, useRef as useRef2 } from "react";
-
-// constants.ts
-var MEASURE_LABEL_OFFSET = 2;
-var GUIDE_SNAP_DISTANCE = 10;
-var GUIDE_HITBOX_SIZE = 14;
-var GUIDE_DRAG_HOLD_MS = 220;
-var MEASURE_TRANSITION_MS = 140;
-var MIN_MULTI_TARGET_SIZE = 8;
-var MIN_MULTI_ELEMENT_COVERAGE = 0.45;
-var ANCESTOR_PRUNE_SCALE = 1.6;
-var ANCESTOR_KEEP_COVERAGE = 0.92;
-var MIN_SINGLE_TARGET_SIZE = 8;
-var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
-
-// hooks/use-guide-drag-hold.ts
 var useGuideDragHold = () => {
   const guideDragHoldTimerRef = useRef2(null);
   const guideDragHoldGuideIdRef = useRef2(null);
@@ -2837,6 +2847,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
   optionContainerLines,
   guides,
   hoverGuide,
+  draggingGuideId,
   selectedGuideIds,
   guideColorActive,
   guideColorHover,
@@ -2853,7 +2864,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
   return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: `absolute inset-0 ${enabled && toolMode !== "none" ? `pointer-events-auto ${guidesEnabled ? "cursor-crosshair" : "cursor-default"} opacity-100` : "pointer-events-none opacity-0"}`,
+      className: `absolute inset-0 ${enabled && toolMode !== "none" ? `pointer-events-auto ${guidesEnabled ? hoverGuide || draggingGuideId ? "cursor-default" : "cursor-crosshair" : "cursor-default"} opacity-100` : "pointer-events-none opacity-0"}`,
       onPointerDown,
       onPointerMove,
       onPointerUp,
@@ -3218,6 +3229,7 @@ function MeasurerClient({
 }) {
   const selectionRectRef = useRef8(null);
   const toolbarRef = useRef8(null);
+  const selectionAnimationCleanupTimeoutRef = useRef8(null);
   const persistedState = useMemo2(() => {
     if (!persistOnReload) return null;
     const stored = window.localStorage.getItem("mesurer-state");
@@ -3474,6 +3486,50 @@ function MeasurerClient({
     if (hoverHighlightEnabled) return;
     setHoverRect(null);
   }, [hoverHighlightEnabled, setHoverRect]);
+  useEffect9(() => {
+    const hasSelectionAnimationState = !!selectionOriginRect || !!selectedMeasurement?.originRect || selectedMeasurements.some((measurement) => !!measurement.originRect);
+    if (!hasSelectionAnimationState) {
+      if (selectionAnimationCleanupTimeoutRef.current !== null) {
+        window.clearTimeout(selectionAnimationCleanupTimeoutRef.current);
+        selectionAnimationCleanupTimeoutRef.current = null;
+      }
+      return;
+    }
+    if (selectionAnimationCleanupTimeoutRef.current !== null) return;
+    selectionAnimationCleanupTimeoutRef.current = window.setTimeout(() => {
+      selectionAnimationCleanupTimeoutRef.current = null;
+      setSelectionOriginRect((prev) => prev ? null : prev);
+      setSelectedMeasurement((prev) => {
+        if (!prev?.originRect) return prev;
+        const { originRect: _originRect, ...next } = prev;
+        return next;
+      });
+      setSelectedMeasurements((prev) => {
+        let changed = false;
+        const next = prev.map((measurement) => {
+          if (!measurement.originRect) return measurement;
+          changed = true;
+          const { originRect: _originRect, ...rest } = measurement;
+          return rest;
+        });
+        return changed ? next : prev;
+      });
+    }, MEASURE_TRANSITION_MS);
+  }, [
+    selectionOriginRect,
+    selectedMeasurement,
+    selectedMeasurements,
+    setSelectedMeasurement,
+    setSelectedMeasurements,
+    setSelectionOriginRect
+  ]);
+  useEffect9(() => {
+    return () => {
+      if (selectionAnimationCleanupTimeoutRef.current !== null) {
+        window.clearTimeout(selectionAnimationCleanupTimeoutRef.current);
+      }
+    };
+  }, []);
   const displayedMeasurements = holdEnabled ? measurements : multiMeasureEnabled && measurements.length > 0 ? measurements : activeMeasurement ? [activeMeasurement] : [];
   const {
     activeRect,
@@ -3635,6 +3691,7 @@ function MeasurerClient({
           optionContainerLines,
           guides,
           hoverGuide,
+          draggingGuideId,
           selectedGuideIds,
           guideColorActive,
           guideColorHover,
@@ -3683,6 +3740,9 @@ function Measurer({
     }
   );
 }
+
+// index.ts
+ensureMeasurerStyles(MESURER_STYLES);
 export {
   Measurer
 };

package/dist/styles.css

@@ -214,6 +214,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
@@ -238,6 +241,9 @@
   .flex {
     display: flex;
   }
+  .table {
+    display: table;
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -266,10 +272,21 @@
   .flex-1 {
     flex: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -289,6 +306,15 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
+  .cursor-grabbing {
+    cursor: grabbing;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
@@ -371,6 +397,9 @@
       background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
+  .bg-ink-900 {
+    background-color: var(--color-ink-900);
+  }
   .bg-ink-900\/90 {
     background-color: var(--color-ink-900);
     @supports (color: color-mix(in lab, red, red)) {
@@ -392,6 +421,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -441,6 +473,9 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-0 {
     opacity: 0%;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesurer",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Measure and align everything on localhost.",
   "license": "MIT",
   "author": "Julien Thibeaut",
@@ -36,15 +36,14 @@
     "url": "https://github.com/ibelick/mesurer/issues"
   },
   "scripts": {
-    "build": "tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css",
+    "build": "pnpm exec tailwindcss -i styles.css -o styles.generated.css && node scripts/generate-styles.mjs && tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run typecheck && npm run build"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "tailwindcss": ">=4.0.0"
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.2",
@@ -57,10 +56,7 @@
     "typescript": "^5.9.2"
   },
   "keywords": [
-    "tailwindcss",
-    "plugin",
-    "gradient",
-    "easing",
-    "css"
+    "measurement",
+    "alignment"
   ]
 }