react-grab 0.1.28 → 0.1.30

package/dist/core-BWQ6C5g9.js

@@ -0,0 +1,4268 @@
+/**
+ * @license MIT
+ *
+ * Copyright (c) 2025 Aiden Bai
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { A as waitUntilNextFrame, G as MODIFIER_KEYS, I as DRAG_SELECTION_COVERAGE_THRESHOLD, J as OFFSCREEN_POSITION, K as MOUNT_ROOT_RECHECK_DELAY_MS, M as ARROW_KEYS, O as nativeCancelAnimationFrame, P as DEFAULT_ACTION_ID, S as getNearestComponentName, T as resolveSource, W as MAX_SESSION_STORAGE_SIZE_BYTES, _ as isRootElement, a as freezeGlobalAnimations, b as getElementContext, c as clearElementPositionCache, d as freezePseudoStates, dt as Z_INDEX_OVERLAY, f as resumePointerEventsFreeze, g as isValidGrabbableElement, h as clearVisibilityCache, i as freezeAnimations, j as getTagName, k as nativeRequestAnimationFrame, l as getElementAtPosition, lt as VERSION, m as unfreezePseudoStates, n as logRecoverableError, o as unfreezeGlobalAnimations, ot as TOOLBAR_DEFAULT_POSITION_RATIO, p as suspendPointerEventsFreeze, q as NEXTJS_REVALIDATION_DELAY_MS, r as freezeAllAnimations, s as openFile, t as freezeUpdates, u as getElementsAtPoint, ut as ZOOM_DETECTION_THRESHOLD, v as checkIsNextProject, w as getStackContext, y as getComponentDisplayName, z as FEEDBACK_DURATION_MS } from "./freeze-updates-MaNDvTJS.js";
+import { a as isMac, g as isElementConnected, h as isKeyboardEventTriggeredByInput, i as isEventFromOverlay, m as hasTextSelectionOnPage, n as saveToolbarState, p as hasTextSelectionInInput, r as resolveActionEnabled, s as clampToRange, t as loadToolbarState } from "./state-CpWrjvjx.js";
+import { n as extractElementCss, r as createElementSelector, t as disposeBaselineStyles } from "./extract-element-css-XGv0WWIL.js";
+import { createComponent, memo, render } from "solid-js/web";
+import { batch, createEffect, createMemo, createResource, createRoot, createSignal, on, onCleanup } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+
+//#region dist/styles.css?css-text
+var styles_default = "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: \"Geist\", ui-sans-serif, system-ui, sans-serif;\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    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --radius-sm: 0.25rem;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\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    --transition-fast: 100ms;\n    --transition-normal: 150ms;\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  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .touch-hitbox {\n    position: relative;\n    &::before {\n      content: \"\";\n      position: absolute;\n      display: block;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 100%;\n      height: 100%;\n      min-height: 44px;\n      min-width: 44px;\n    }\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .-top-1 {\n    top: calc(var(--spacing) * -1);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .-right-1 {\n    right: calc(var(--spacing) * -1);\n  }\n  .right-full {\n    right: 100%;\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-0\\.5 {\n    left: calc(var(--spacing) * 0.5);\n  }\n  .left-1\\.5 {\n    left: calc(var(--spacing) * 1.5);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2\\.5 {\n    left: calc(var(--spacing) * 2.5);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-2 {\n    margin-inline: calc(var(--spacing) * -2);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(var(--spacing) * 0.5);\n  }\n  .-my-1\\.5 {\n    margin-block: calc(var(--spacing) * -1.5);\n  }\n  .my-0\\.5 {\n    margin-block: calc(var(--spacing) * 0.5);\n  }\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * 0.5);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(var(--spacing) * 2.5);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(var(--spacing) * 0.5);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(var(--spacing) * 1.5);\n  }\n  .mr-2\\.5 {\n    margin-right: calc(var(--spacing) * 2.5);\n  }\n  .mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * 0.5);\n  }\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n  .mb-2\\.5 {\n    margin-bottom: calc(var(--spacing) * 2.5);\n  }\n  .-ml-\\[2px\\] {\n    margin-left: calc(2px * -1);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(var(--spacing) * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-2\\.5 {\n    margin-left: calc(var(--spacing) * 2.5);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .line-clamp-5 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 5;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-\\[17px\\] {\n    height: 17px;\n  }\n  .h-fit {\n    height: fit-content;\n  }\n  .max-h-\\[240px\\] {\n    max-height: 240px;\n  }\n  .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n  .min-h-4 {\n    min-height: calc(var(--spacing) * 4);\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-\\[calc\\(100\\%\\+16px\\)\\] {\n    width: calc(100% + 16px);\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[280px\\] {\n    max-width: 280px;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-2\\.5 {\n    min-width: calc(var(--spacing) * 2.5);\n  }\n  .min-w-\\[100px\\] {\n    min-width: 100px;\n  }\n  .min-w-\\[150px\\] {\n    min-width: 150px;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\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\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .-rotate-90 {\n    rotate: calc(90deg * -1);\n  }\n  .rotate-0 {\n    rotate: 0deg;\n  }\n  .rotate-90 {\n    rotate: 90deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .interactive-scale {\n    transition-property: transform;\n    transition-duration: var(--transition-normal);\n    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n        transform: scale(1.05);\n      }\n    }\n    &:active {\n      transform: scale(0.97);\n    }\n  }\n  .press-scale {\n    transition-property: transform;\n    transition-duration: var(--transition-fast);\n    transition-timing-function: ease-out;\n    &:active {\n      transform: scale(0.97);\n    }\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-\\[hint-flip-in_var\\(--transition-normal\\)_ease-out\\] {\n    animation: hint-flip-in var(--transition-normal) ease-out;\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  .resize-none {\n    resize: none;\n  }\n  .grid-cols-\\[0fr\\] {\n    grid-template-columns: 0fr;\n  }\n  .grid-cols-\\[1fr\\] {\n    grid-template-columns: 1fr;\n  }\n  .grid-rows-\\[0fr\\] {\n    grid-template-rows: 0fr;\n  }\n  .grid-rows-\\[1fr\\] {\n    grid-template-rows: 1fr;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-\\[5px\\] {\n    gap: 5px;\n  }\n  .self-stretch {\n    align-self: stretch;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-visible {\n    overflow: visible;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[10px\\] {\n    border-radius: 10px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .rounded-t-\\[10px\\] {\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n  }\n  .rounded-t-none {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  .rounded-l-\\[10px\\] {\n    border-top-left-radius: 10px;\n    border-bottom-left-radius: 10px;\n  }\n  .rounded-l-none {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .rounded-r-\\[10px\\] {\n    border-top-right-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .rounded-b-\\[6px\\] {\n    border-bottom-right-radius: 6px;\n    border-bottom-left-radius: 6px;\n  }\n  .rounded-b-\\[10px\\] {\n    border-bottom-right-radius: 10px;\n    border-bottom-left-radius: 10px;\n  }\n  .rounded-b-none {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .\\[border-width\\:0\\.5px\\] {\n    border-width: 0.5px;\n  }\n  .\\[border-top-width\\:0\\.5px\\] {\n    border-top-width: 0.5px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#B3B3B3\\] {\n    border-color: #B3B3B3;\n  }\n  .border-t-\\[\\#D9D9D9\\] {\n    border-top-color: #D9D9D9;\n  }\n  .bg-\\[\\#FEF2F2\\] {\n    background-color: #FEF2F2;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/5 {\n    background-color: color-mix(in srgb, #000 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n    }\n  }\n  .bg-black\\/25 {\n    background-color: color-mix(in srgb, #000 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n    }\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .px-0\\.5 {\n    padding-inline: calc(var(--spacing) * 0.5);\n  }\n  .px-0\\.25 {\n    padding-inline: calc(var(--spacing) * 0.25);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-\\[3px\\] {\n    padding-inline: 3px;\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-0\\.25 {\n    padding-block: calc(var(--spacing) * 0.25);\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  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-px {\n    padding-block: 1px;\n  }\n  .pt-1\\.5 {\n    padding-top: calc(var(--spacing) * 1.5);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\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  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .leading-3 {\n    --tw-leading: calc(var(--spacing) * 3);\n    line-height: calc(var(--spacing) * 3);\n  }\n  .leading-3\\.5 {\n    --tw-leading: calc(var(--spacing) * 3.5);\n    line-height: calc(var(--spacing) * 3.5);\n  }\n  .leading-4 {\n    --tw-leading: calc(var(--spacing) * 4);\n    line-height: calc(var(--spacing) * 4);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .wrap-break-word {\n    overflow-wrap: break-word;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-\\[\\#71717a\\] {\n    color: #71717a;\n  }\n  .text-\\[\\#B3B3B3\\] {\n    color: #B3B3B3;\n  }\n  .text-\\[\\#B91C1C\\] {\n    color: #B91C1C;\n  }\n  .text-\\[\\#B91C1C\\]\\/50 {\n    color: color-mix(in oklab, #B91C1C 50%, transparent);\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-black\\/25 {\n    color: color-mix(in srgb, #000 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 25%, transparent);\n    }\n  }\n  .text-black\\/30 {\n    color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n  }\n  .text-black\\/40 {\n    color: color-mix(in srgb, #000 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 40%, transparent);\n    }\n  }\n  .text-black\\/50 {\n    color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .text-black\\/60 {\n    color: color-mix(in srgb, #000 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 60%, transparent);\n    }\n  }\n  .text-black\\/70 {\n    color: color-mix(in srgb, #000 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 70%, transparent);\n    }\n  }\n  .text-black\\/85 {\n    color: color-mix(in srgb, #000 85%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 85%, transparent);\n    }\n  }\n  .text-white {\n    color: var(--color-white);\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  .antialiased {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-40 {\n    opacity: 40%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\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  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter-\\[drop-shadow\\(0px_1px_2px_\\#51515140\\)\\] {\n    filter: drop-shadow(0px 1px 2px #51515140);\n  }\n  .backdrop-filter {\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\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-\\[grid-template-columns\\,opacity\\] {\n    transition-property: grid-template-columns,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  .transition-\\[grid-template-columns\\] {\n    transition-property: grid-template-columns;\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-\\[grid-template-rows\\,opacity\\] {\n    transition-property: grid-template-rows,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  .transition-\\[grid-template-rows\\] {\n    transition-property: grid-template-rows;\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\\,transform\\] {\n    transition-property: opacity,transform;\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-\\[top\\,left\\,width\\,height\\,opacity\\] {\n    transition-property: top,left,width,height,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  .transition-\\[transform\\,opacity\\] {\n    transition-property: transform,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  .transition-all {\n    transition-property: all;\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-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(--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  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\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-75 {\n    --tw-duration: 75ms;\n    transition-duration: 75ms;\n  }\n  .duration-100 {\n    --tw-duration: 100ms;\n    transition-duration: 100ms;\n  }\n  .duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .will-change-\\[opacity\\,transform\\] {\n    will-change: opacity,transform;\n  }\n  .contain-layout {\n    --tw-contain-layout: layout;\n    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);\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  .\\[animation-fill-mode\\:backwards\\] {\n    animation-fill-mode: backwards;\n  }\n  .\\[corner-shape\\:superellipse\\(1\\.25\\)\\] {\n    corner-shape: superellipse(1.25);\n  }\n  .\\[font-synthesis\\:none\\] {\n    font-synthesis: none;\n  }\n  .\\[scrollbar-color\\:transparent_transparent\\] {\n    scrollbar-color: transparent transparent;\n  }\n  .\\[scrollbar-width\\:thin\\] {\n    scrollbar-width: thin;\n  }\n  .before\\:\\!min-h-full {\n    &::before {\n      content: var(--tw-content);\n      min-height: 100% !important;\n    }\n  }\n  .before\\:\\!min-w-full {\n    &::before {\n      content: var(--tw-content);\n      min-width: 100% !important;\n    }\n  }\n  .hover\\:bg-\\[\\#F5F5F5\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #F5F5F5;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#FEE2E2\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #FEE2E2;\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-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-black);\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:\\[scrollbar-color\\:rgba\\(0\\,0\\,0\\,0\\.15\\)_transparent\\] {\n    &:hover {\n      @media (hover: hover) {\n        scrollbar-color: rgba(0,0,0,0.15) transparent;\n      }\n    }\n  }\n  .disabled\\:cursor-default {\n    &:disabled {\n      cursor: default;\n    }\n  }\n  .disabled\\:opacity-40 {\n    &:disabled {\n      opacity: 40%;\n    }\n  }\n}\n:host {\n  all: initial;\n  direction: ltr;\n}\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  15% {\n    transform: translateX(-3px);\n  }\n  30% {\n    transform: translateX(3px);\n  }\n  45% {\n    transform: translateX(-3px);\n  }\n  60% {\n    transform: translateX(3px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  90% {\n    transform: translateX(2px);\n  }\n}\n@keyframes success-pop {\n  0% {\n    transform: scale(0.9);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.1);\n    opacity: 1;\n  }\n  80% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes hint-flip-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes icon-loader-spin {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 0.2;\n  }\n}\n.icon-loader-bar {\n  animation: icon-loader-spin 0.5s linear infinite;\n}\n@keyframes shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n.shimmer-text {\n  background: linear-gradient( 90deg, #71717a 0%, #a1a1aa 25%, #71717a 50%, #a1a1aa 75%, #71717a 100% );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  animation: shimmer 2.5s linear infinite;\n}\n@keyframes clock-flash {\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: scale(1.2);\n  }\n  50% {\n    transform: scale(0.92);\n  }\n  75% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.animate-clock-flash {\n  animation: clock-flash 400ms ease-out;\n  will-change: transform;\n}\n.animate-shake {\n  animation: shake 0.3s ease-out;\n  will-change: transform;\n}\n.animate-success-pop {\n  animation: success-pop 250ms ease-out;\n  will-change: transform, opacity;\n}\n.animate-tooltip-fade-in {\n  animation: tooltip-fade-in var(--transition-fast) ease-out;\n  will-change: transform, opacity;\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-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\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-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-layout {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-paint {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-style {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\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-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\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-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-contain-size: initial;\n      --tw-contain-layout: initial;\n      --tw-contain-paint: initial;\n      --tw-contain-style: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
+
+//#endregion
+//#region src/utils/strip-translate-from-transform.ts
+const isValidNumber = (value) => typeof value === "number" && !Number.isNaN(value) && Number.isFinite(value);
+const parseMatrixValue = (value) => {
+	const trimmedValue = value.trim();
+	if (!trimmedValue) return null;
+	const parsedValue = parseFloat(trimmedValue);
+	return isValidNumber(parsedValue) ? parsedValue : null;
+};
+const parseMatrixValues = (valuesString, expectedLength) => {
+	const rawValues = valuesString.split(",");
+	if (rawValues.length !== expectedLength) return null;
+	const parsedValues = [];
+	for (const rawValue of rawValues) {
+		const parsedValue = parseMatrixValue(rawValue);
+		if (parsedValue === null) return null;
+		parsedValues.push(parsedValue);
+	}
+	return parsedValues;
+};
+const isIdentityMatrix2d = (a, b, c, d) => a === 1 && b === 0 && c === 0 && d === 1;
+const isIdentityMatrix3d = (values) => values[0] === 1 && values[1] === 0 && values[2] === 0 && values[3] === 0 && values[4] === 0 && values[5] === 1 && values[6] === 0 && values[7] === 0 && values[8] === 0 && values[9] === 0 && values[10] === 1 && values[11] === 0 && values[15] === 1;
+const stripTranslateFromTransformString = (transform) => {
+	if (!transform || transform === "none") return "none";
+	if (transform.startsWith("matrix")) if (transform.startsWith("matrix3d(")) {
+		const start = 9;
+		const end = transform.length - 1;
+		const values = parseMatrixValues(transform.slice(start, end), 16);
+		if (values) {
+			values[12] = 0;
+			values[13] = 0;
+			values[14] = 0;
+			if (isIdentityMatrix3d(values)) return "none";
+			return `matrix3d(${values[0]}, ${values[1]}, ${values[2]}, ${values[3]}, ${values[4]}, ${values[5]}, ${values[6]}, ${values[7]}, ${values[8]}, ${values[9]}, ${values[10]}, ${values[11]}, 0, 0, 0, ${values[15]})`;
+		}
+	} else {
+		const start = 7;
+		const end = transform.length - 1;
+		const values = parseMatrixValues(transform.slice(start, end), 6);
+		if (values) {
+			const scaleX = values[0];
+			const skewY = values[1];
+			const skewX = values[2];
+			const scaleY = values[3];
+			if (isIdentityMatrix2d(scaleX, skewY, skewX, scaleY)) return "none";
+			return `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, 0, 0)`;
+		}
+	}
+	return "none";
+};
+const stripTranslateFromMatrix = (matrix) => {
+	if (matrix.isIdentity) return "none";
+	if (matrix.is2D) {
+		if (isIdentityMatrix2d(matrix.a, matrix.b, matrix.c, matrix.d)) return "none";
+		return `matrix(${matrix.a}, ${matrix.b}, ${matrix.c}, ${matrix.d}, 0, 0)`;
+	}
+	if (matrix.m11 === 1 && matrix.m12 === 0 && matrix.m13 === 0 && matrix.m14 === 0 && matrix.m21 === 0 && matrix.m22 === 1 && matrix.m23 === 0 && matrix.m24 === 0 && matrix.m31 === 0 && matrix.m32 === 0 && matrix.m33 === 1 && matrix.m34 === 0 && matrix.m44 === 1) return "none";
+	return `matrix3d(${matrix.m11}, ${matrix.m12}, ${matrix.m13}, ${matrix.m14}, ${matrix.m21}, ${matrix.m22}, ${matrix.m23}, ${matrix.m24}, ${matrix.m31}, ${matrix.m32}, ${matrix.m33}, ${matrix.m34}, 0, 0, 0, ${matrix.m44})`;
+};
+
+//#endregion
+//#region src/utils/create-element-bounds.ts
+let boundsCache = /* @__PURE__ */ new WeakMap();
+let ancestorTransformCache = /* @__PURE__ */ new WeakMap();
+let borderRadiusCache = /* @__PURE__ */ new WeakMap();
+const invalidateBoundsCache = () => {
+	boundsCache = /* @__PURE__ */ new WeakMap();
+	ancestorTransformCache = /* @__PURE__ */ new WeakMap();
+	borderRadiusCache = /* @__PURE__ */ new WeakMap();
+};
+const getAncestorTransformValue = (ancestor, now) => {
+	const cached = ancestorTransformCache.get(ancestor);
+	if (cached && now - cached.timestamp < 16) return cached.transform;
+	const transformValue = window.getComputedStyle(ancestor).transform;
+	const resolvedTransform = transformValue && transformValue !== "none" ? transformValue : "none";
+	ancestorTransformCache.set(ancestor, {
+		transform: resolvedTransform,
+		timestamp: now
+	});
+	return resolvedTransform;
+};
+const getAccumulatedTransform = (element, selfTransform, now) => {
+	const hasSelfTransform = selfTransform && selfTransform !== "none";
+	let accumulated = null;
+	let current = element.parentElement;
+	let depth = 0;
+	while (current && current !== document.documentElement && depth < 6) {
+		const transformValue = getAncestorTransformValue(current, now);
+		if (transformValue !== "none") accumulated = accumulated ? new DOMMatrix(transformValue).multiply(accumulated) : new DOMMatrix(transformValue);
+		else if (!hasSelfTransform && !accumulated && depth >= 3) return "none";
+		current = current.parentElement;
+		depth++;
+	}
+	if (!accumulated) return hasSelfTransform ? stripTranslateFromTransformString(selfTransform) : "none";
+	if (hasSelfTransform) accumulated = accumulated.multiply(new DOMMatrix(selfTransform));
+	return stripTranslateFromMatrix(accumulated);
+};
+const getCachedBorderRadius = (element, computedStyle, now) => {
+	const cached = borderRadiusCache.get(element);
+	if (cached && now - cached.timestamp < 200) return cached.borderRadius;
+	const borderRadius = (computedStyle ?? window.getComputedStyle(element)).borderRadius || "0px";
+	borderRadiusCache.set(element, {
+		borderRadius,
+		timestamp: now
+	});
+	return borderRadius;
+};
+const buildBoundsFromRect = (element, rect, style, now) => {
+	const transform = getAccumulatedTransform(element, style.transform, now);
+	const borderRadius = getCachedBorderRadius(element, style, now);
+	if (transform !== "none" && element instanceof HTMLElement) {
+		const offsetWidth = element.offsetWidth;
+		const offsetHeight = element.offsetHeight;
+		if (offsetWidth > 0 && offsetHeight > 0) {
+			const centerX = rect.left + rect.width * .5;
+			const centerY = rect.top + rect.height * .5;
+			return {
+				borderRadius,
+				height: offsetHeight,
+				transform,
+				width: offsetWidth,
+				x: centerX - offsetWidth * .5,
+				y: centerY - offsetHeight * .5
+			};
+		}
+	}
+	return {
+		borderRadius,
+		height: rect.height,
+		transform,
+		width: rect.width,
+		x: rect.left,
+		y: rect.top
+	};
+};
+const createElementBounds = (element) => {
+	const now = performance.now();
+	const cached = boundsCache.get(element);
+	if (cached && now - cached.timestamp < 16) return cached.bounds;
+	const bounds = buildBoundsFromRect(element, element.getBoundingClientRect(), window.getComputedStyle(element), now);
+	boundsCache.set(element, {
+		bounds,
+		timestamp: now
+	});
+	return bounds;
+};
+
+//#endregion
+//#region src/utils/get-bounds-center.ts
+const getBoundsCenter = (bounds) => ({
+	x: bounds.x + bounds.width / 2,
+	y: bounds.y + bounds.height / 2
+});
+
+//#endregion
+//#region src/core/store.ts
+const createInitialStore = (input) => ({
+	current: { state: "idle" },
+	wasActivatedByToggle: false,
+	pendingCommentMode: false,
+	keyHoldDuration: input.keyHoldDuration,
+	pointer: {
+		x: OFFSCREEN_POSITION,
+		y: OFFSCREEN_POSITION
+	},
+	dragStart: {
+		x: OFFSCREEN_POSITION,
+		y: OFFSCREEN_POSITION
+	},
+	copyStart: {
+		x: OFFSCREEN_POSITION,
+		y: OFFSCREEN_POSITION
+	},
+	copyOffsetFromCenterX: 0,
+	detectedElement: null,
+	frozenElement: null,
+	frozenElements: [],
+	frozenDragRect: null,
+	lastGrabbedElement: null,
+	lastCopiedElement: null,
+	selectionFilePath: null,
+	selectionLineNumber: null,
+	inputText: "",
+	viewportVersion: 0,
+	grabbedBoxes: [],
+	labelInstances: [],
+	isTouchMode: false,
+	theme: input.theme,
+	activationTimestamp: null,
+	previouslyFocusedElement: null,
+	contextMenuPosition: null,
+	contextMenuElement: null,
+	contextMenuClickOffset: null
+});
+const createGrabStore = (input) => {
+	const [store, setStore] = createStore(createInitialStore(input));
+	const clearFrozenElement = () => {
+		setStore(produce((draft) => {
+			draft.frozenElement = null;
+			draft.frozenElements = [];
+			draft.frozenDragRect = null;
+		}));
+	};
+	const setActivePhase = (phase) => {
+		setStore("current", produce((current) => {
+			if (current.state === "active") current.phase = phase;
+		}));
+	};
+	const actions = {
+		startHold: (duration) => {
+			if (duration !== void 0) setStore("keyHoldDuration", duration);
+			setStore("current", {
+				state: "holding",
+				startedAt: Date.now()
+			});
+		},
+		releaseHold: () => {
+			if (store.current.state === "holding") setStore("current", { state: "idle" });
+		},
+		activate: () => {
+			setStore(produce((draft) => {
+				draft.current = {
+					state: "active",
+					phase: "hovering",
+					isPromptMode: false,
+					isPendingDismiss: false
+				};
+				draft.activationTimestamp = Date.now();
+				draft.previouslyFocusedElement = document.activeElement;
+			}));
+		},
+		deactivate: () => {
+			setStore(produce((draft) => {
+				draft.current = { state: "idle" };
+				draft.wasActivatedByToggle = false;
+				draft.pendingCommentMode = false;
+				draft.inputText = "";
+				draft.frozenElement = null;
+				draft.frozenElements = [];
+				draft.frozenDragRect = null;
+				draft.activationTimestamp = null;
+				draft.previouslyFocusedElement = null;
+				draft.contextMenuPosition = null;
+				draft.contextMenuElement = null;
+				draft.contextMenuClickOffset = null;
+				draft.lastCopiedElement = null;
+			}));
+		},
+		toggle: () => {
+			if (store.activationTimestamp !== null) actions.deactivate();
+			else {
+				setStore("wasActivatedByToggle", true);
+				actions.activate();
+			}
+		},
+		freeze: () => {
+			if (store.current.state === "active") {
+				const elementToFreeze = store.frozenElement ?? store.detectedElement;
+				if (elementToFreeze) setStore("frozenElement", elementToFreeze);
+				setActivePhase("frozen");
+			}
+		},
+		unfreeze: () => {
+			if (store.current.state === "active") {
+				setStore(produce((draft) => {
+					draft.frozenElement = null;
+					draft.frozenElements = [];
+					draft.frozenDragRect = null;
+				}));
+				setActivePhase("hovering");
+			}
+		},
+		startDrag: (position) => {
+			if (store.current.state === "active") {
+				clearFrozenElement();
+				setStore("dragStart", {
+					x: position.x + window.scrollX,
+					y: position.y + window.scrollY
+				});
+				setActivePhase("dragging");
+			}
+		},
+		endDrag: () => {
+			if (store.current.state === "active" && store.current.phase === "dragging") {
+				setStore("dragStart", {
+					x: OFFSCREEN_POSITION,
+					y: OFFSCREEN_POSITION
+				});
+				setActivePhase("justDragged");
+			}
+		},
+		cancelDrag: () => {
+			if (store.current.state === "active" && store.current.phase === "dragging") {
+				setStore("dragStart", {
+					x: OFFSCREEN_POSITION,
+					y: OFFSCREEN_POSITION
+				});
+				setActivePhase("hovering");
+			}
+		},
+		finishJustDragged: () => {
+			if (store.current.state === "active" && store.current.phase === "justDragged") setActivePhase("hovering");
+		},
+		startCopy: () => {
+			const wasActive = store.current.state === "active";
+			setStore("current", {
+				state: "copying",
+				startedAt: Date.now(),
+				wasActive
+			});
+		},
+		completeCopy: (element) => {
+			if (element) setStore("lastCopiedElement", element);
+			const wasActive = store.current.state === "copying" ? store.current.wasActive : false;
+			setStore("current", {
+				state: "justCopied",
+				copiedAt: Date.now(),
+				wasActive
+			});
+		},
+		finishJustCopied: () => {
+			if (store.current.state === "justCopied") if (store.current.wasActive && !store.wasActivatedByToggle) {
+				clearFrozenElement();
+				setStore("current", {
+					state: "active",
+					phase: "hovering",
+					isPromptMode: false,
+					isPendingDismiss: false
+				});
+			} else actions.deactivate();
+		},
+		enterPromptMode: (position, element) => {
+			const { x: selectionCenterX } = getBoundsCenter(createElementBounds(element));
+			setStore("copyStart", position);
+			setStore("copyOffsetFromCenterX", position.x - selectionCenterX);
+			setStore("pointer", position);
+			setStore("frozenElement", element);
+			setStore("wasActivatedByToggle", true);
+			if (store.current.state !== "active") {
+				setStore("current", {
+					state: "active",
+					phase: "frozen",
+					isPromptMode: true,
+					isPendingDismiss: false
+				});
+				setStore("activationTimestamp", Date.now());
+				setStore("previouslyFocusedElement", document.activeElement);
+			} else setStore("current", produce((current) => {
+				if (current.state === "active") {
+					current.isPromptMode = true;
+					current.phase = "frozen";
+				}
+			}));
+		},
+		exitPromptMode: () => {
+			if (store.current.state === "active") setStore("current", produce((current) => {
+				if (current.state === "active") {
+					current.isPromptMode = false;
+					current.isPendingDismiss = false;
+				}
+			}));
+		},
+		setInputText: (value) => {
+			setStore("inputText", value);
+		},
+		clearInputText: () => {
+			setStore("inputText", "");
+		},
+		setPendingDismiss: (value) => {
+			if (store.current.state === "active") setStore("current", produce((current) => {
+				if (current.state === "active") current.isPendingDismiss = value;
+			}));
+		},
+		setPointer: (position) => {
+			setStore("pointer", position);
+		},
+		setDetectedElement: (element) => {
+			setStore("detectedElement", element);
+		},
+		setFrozenElement: (element) => {
+			setStore(produce((draft) => {
+				draft.frozenElement = element;
+				draft.frozenElements = [element];
+				draft.frozenDragRect = null;
+			}));
+		},
+		setFrozenElements: (elements) => {
+			setStore(produce((draft) => {
+				draft.frozenElements = elements;
+				draft.frozenElement = elements.length > 0 ? elements[0] : null;
+				draft.frozenDragRect = null;
+			}));
+		},
+		setFrozenDragRect: (rect) => {
+			setStore("frozenDragRect", rect);
+		},
+		setCopyStart: (position, element) => {
+			const { x: selectionCenterX } = getBoundsCenter(createElementBounds(element));
+			setStore("copyStart", position);
+			setStore("copyOffsetFromCenterX", position.x - selectionCenterX);
+		},
+		setLastGrabbed: (element) => {
+			setStore("lastGrabbedElement", element);
+		},
+		clearLastCopied: () => {
+			setStore("lastCopiedElement", null);
+		},
+		setWasActivatedByToggle: (value) => {
+			setStore("wasActivatedByToggle", value);
+		},
+		setPendingCommentMode: (value) => {
+			setStore("pendingCommentMode", value);
+		},
+		setTouchMode: (value) => {
+			setStore("isTouchMode", value);
+		},
+		setSelectionSource: (filePath, lineNumber) => {
+			setStore(produce((draft) => {
+				draft.selectionFilePath = filePath;
+				draft.selectionLineNumber = lineNumber;
+			}));
+		},
+		incrementViewportVersion: () => {
+			setStore("viewportVersion", (version) => version + 1);
+		},
+		addGrabbedBox: (box) => {
+			setStore("grabbedBoxes", (boxes) => [...boxes, box]);
+		},
+		removeGrabbedBox: (boxId) => {
+			setStore("grabbedBoxes", (boxes) => boxes.filter((box) => box.id !== boxId));
+		},
+		clearGrabbedBoxes: () => {
+			setStore("grabbedBoxes", []);
+		},
+		addLabelInstance: (instance) => {
+			setStore("labelInstances", (instances) => [...instances, instance]);
+		},
+		updateLabelInstance: (instanceId, status, errorMessage) => {
+			const index = store.labelInstances.findIndex((instance) => instance.id === instanceId);
+			if (index !== -1) setStore("labelInstances", index, produce((instance) => {
+				instance.status = status;
+				if (errorMessage !== void 0) instance.errorMessage = errorMessage;
+			}));
+		},
+		removeLabelInstance: (instanceId) => {
+			setStore("labelInstances", (instances) => instances.filter((instance) => instance.id !== instanceId));
+		},
+		clearLabelInstances: () => {
+			setStore("labelInstances", []);
+		},
+		showContextMenu: (position, element) => {
+			const { x: centerX, y: centerY } = getBoundsCenter(createElementBounds(element));
+			setStore(produce((draft) => {
+				draft.contextMenuPosition = position;
+				draft.contextMenuElement = element;
+				draft.contextMenuClickOffset = {
+					x: position.x - centerX,
+					y: position.y - centerY
+				};
+			}));
+		},
+		hideContextMenu: () => {
+			setStore(produce((draft) => {
+				draft.contextMenuPosition = null;
+				draft.contextMenuElement = null;
+				draft.contextMenuClickOffset = null;
+			}));
+		},
+		updateContextMenuPosition: () => {
+			const element = store.contextMenuElement;
+			const clickOffset = store.contextMenuClickOffset;
+			if (!element || !clickOffset) return;
+			if (!isElementConnected(element)) return;
+			const { x: newCenterX, y: newCenterY } = getBoundsCenter(createElementBounds(element));
+			setStore("contextMenuPosition", {
+				x: newCenterX + clickOffset.x,
+				y: newCenterY + clickOffset.y
+			});
+		}
+	};
+	return {
+		store,
+		actions
+	};
+};
+
+//#endregion
+//#region src/utils/mount-root.ts
+const ATTRIBUTE_NAME = "data-react-grab";
+const FONT_LINK_ID = "react-grab-fonts";
+const FONT_LINK_URL = "https://fonts.googleapis.com/css2?family=Geist:wght@500&display=swap";
+const loadFonts = () => {
+	if (document.getElementById(FONT_LINK_ID)) return;
+	if (!document.head) return;
+	const link = document.createElement("link");
+	link.id = FONT_LINK_ID;
+	link.rel = "stylesheet";
+	link.href = FONT_LINK_URL;
+	document.head.appendChild(link);
+};
+const mountRoot = (cssText) => {
+	loadFonts();
+	const mountedHost = document.querySelector(`[${ATTRIBUTE_NAME}]`);
+	if (mountedHost) {
+		const mountedRoot = mountedHost.shadowRoot?.querySelector(`[${ATTRIBUTE_NAME}]`);
+		if (mountedRoot instanceof HTMLDivElement && mountedHost.shadowRoot) return mountedRoot;
+	}
+	const host = document.createElement("div");
+	host.setAttribute(ATTRIBUTE_NAME, "true");
+	host.style.zIndex = String(Z_INDEX_OVERLAY);
+	host.style.position = "fixed";
+	host.style.inset = "0";
+	host.style.pointerEvents = "none";
+	const shadowRoot = host.attachShadow({ mode: "open" });
+	if (cssText) {
+		const styleElement = document.createElement("style");
+		styleElement.textContent = cssText;
+		shadowRoot.appendChild(styleElement);
+	}
+	const root = document.createElement("div");
+	root.setAttribute(ATTRIBUTE_NAME, "true");
+	shadowRoot.appendChild(root);
+	const doc = document.body ?? document.documentElement;
+	doc.appendChild(host);
+	setTimeout(() => {
+		doc.appendChild(host);
+	}, MOUNT_ROOT_RECHECK_DELAY_MS);
+	return root;
+};
+
+//#endregion
+//#region src/core/noop-api.ts
+const NOOP = () => {};
+const createNoopApi = () => ({
+	activate: NOOP,
+	deactivate: NOOP,
+	toggle: NOOP,
+	comment: NOOP,
+	isActive: () => false,
+	isEnabled: () => false,
+	setEnabled: NOOP,
+	getToolbarState: () => null,
+	setToolbarState: NOOP,
+	onToolbarStateChange: () => NOOP,
+	dispose: NOOP,
+	copyElement: () => Promise.resolve(false),
+	getSource: () => Promise.resolve(null),
+	getStackContext: () => Promise.resolve(""),
+	getState: () => ({
+		isActive: false,
+		isDragging: false,
+		isCopying: false,
+		isPromptMode: false,
+		isSelectionBoxVisible: false,
+		isDragBoxVisible: false,
+		targetElement: null,
+		dragBounds: null,
+		grabbedBoxes: [],
+		labelInstances: [],
+		selectionFilePath: null,
+		toolbarState: null
+	}),
+	setOptions: NOOP,
+	registerPlugin: NOOP,
+	unregisterPlugin: NOOP,
+	getPlugins: () => [],
+	getDisplayName: () => null
+});
+
+//#endregion
+//#region src/core/events.ts
+const createEventListenerManager = () => {
+	const abortController = new AbortController();
+	const addWindowListener = (type, listener, options = {}) => {
+		window.addEventListener(type, listener, {
+			...options,
+			signal: abortController.signal
+		});
+	};
+	const addDocumentListener = (type, listener, options = {}) => {
+		document.addEventListener(type, listener, {
+			...options,
+			signal: abortController.signal
+		});
+	};
+	return {
+		signal: abortController.signal,
+		abort: () => abortController.abort(),
+		addWindowListener,
+		addDocumentListener
+	};
+};
+
+//#endregion
+//#region src/utils/copy-content.ts
+const REACT_GRAB_MIME_TYPE = "application/x-react-grab";
+const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const copyContent = (content, options) => {
+	const elementName = options?.componentName ?? "div";
+	const reactGrabMetadata = {
+		version: VERSION,
+		content,
+		entries: options?.entries ?? [{
+			tagName: options?.tagName,
+			componentName: elementName,
+			content,
+			commentText: options?.commentText
+		}],
+		timestamp: Date.now()
+	};
+	const copyHandler = (event) => {
+		event.preventDefault();
+		event.clipboardData?.setData("text/plain", content);
+		event.clipboardData?.setData("text/html", `<meta charset='utf-8'><pre><code>${escapeHtml(content)}</code></pre>`);
+		event.clipboardData?.setData(REACT_GRAB_MIME_TYPE, JSON.stringify(reactGrabMetadata));
+	};
+	document.addEventListener("copy", copyHandler);
+	const textarea = document.createElement("textarea");
+	textarea.value = content;
+	textarea.style.position = "fixed";
+	textarea.style.left = "-9999px";
+	textarea.ariaHidden = "true";
+	document.body.appendChild(textarea);
+	textarea.select();
+	try {
+		if (typeof document.execCommand !== "function") return false;
+		return document.execCommand("copy");
+	} finally {
+		document.removeEventListener("copy", copyHandler);
+		textarea.remove();
+	}
+};
+
+//#endregion
+//#region src/utils/generate-snippet.ts
+const generateSnippet = async (elements, options = {}) => {
+	return (await Promise.allSettled(elements.map((element) => getElementContext(element, options)))).map((result) => result.status === "fulfilled" ? result.value : "");
+};
+
+//#endregion
+//#region src/utils/join-snippets.ts
+const joinSnippets = (snippets) => {
+	if (snippets.length <= 1) return snippets[0] ?? "";
+	return snippets.map((snippet, index) => `[${index + 1}]\n${snippet}`).join("\n\n");
+};
+
+//#endregion
+//#region src/utils/normalize-error.ts
+const normalizeErrorMessage = (error, fallback = "Unknown error") => error instanceof Error && error.message ? error.message : fallback;
+const normalizeError = (error) => error instanceof Error ? error : new Error(String(error));
+
+//#endregion
+//#region src/core/copy.ts
+const tryCopyWithFallback = async (options, hooks, elements, extraPrompt) => {
+	let didCopy = false;
+	let copiedContent = "";
+	await hooks.onBeforeCopy(elements);
+	try {
+		let generatedContent;
+		let entries;
+		if (options.getContent) generatedContent = await options.getContent(elements);
+		else {
+			const rawSnippets = await generateSnippet(elements, { maxLines: options.maxContextLines });
+			const snippetElementPairs = (await Promise.all(rawSnippets.map((snippet, index) => snippet.trim() ? hooks.transformSnippet(snippet, elements[index]) : Promise.resolve("")))).map((snippet, index) => ({
+				snippet,
+				element: elements[index]
+			})).filter(({ snippet }) => snippet.trim());
+			generatedContent = joinSnippets(snippetElementPairs.map(({ snippet }) => snippet));
+			entries = snippetElementPairs.map(({ snippet, element }) => ({
+				tagName: element.localName,
+				content: snippet,
+				commentText: extraPrompt
+			}));
+		}
+		if (generatedContent.trim()) {
+			const transformedContent = await hooks.transformCopyContent(generatedContent, elements);
+			copiedContent = extraPrompt ? `${extraPrompt}\n\n${transformedContent}` : transformedContent;
+			didCopy = copyContent(copiedContent, {
+				componentName: options.componentName,
+				entries
+			});
+		}
+	} catch (error) {
+		hooks.onCopyError(normalizeError(error));
+	}
+	if (didCopy) hooks.onCopySuccess(elements, copiedContent);
+	hooks.onAfterCopy(elements, didCopy);
+	return didCopy;
+};
+
+//#endregion
+//#region src/utils/get-elements-in-drag.ts
+const calculateIntersectionArea = (rect1, rect2) => {
+	const intersectionLeft = Math.max(rect1.left, rect2.left);
+	const intersectionTop = Math.max(rect1.top, rect2.top);
+	const intersectionRight = Math.min(rect1.right, rect2.right);
+	const intersectionBottom = Math.min(rect1.bottom, rect2.bottom);
+	return Math.max(0, intersectionRight - intersectionLeft) * Math.max(0, intersectionBottom - intersectionTop);
+};
+const hasIntersection = (rect1, rect2) => {
+	return rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top;
+};
+const sortByDocumentOrder = (elements) => {
+	return elements.sort((leftElement, rightElement) => {
+		if (leftElement === rightElement) return 0;
+		const position = leftElement.compareDocumentPosition(rightElement);
+		if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+		if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+		return 0;
+	});
+};
+const createSamplePoints = (dragRect) => {
+	if (dragRect.width <= 0 || dragRect.height <= 0) return [];
+	const viewportWidth = window.innerWidth;
+	const viewportHeight = window.innerHeight;
+	const left = dragRect.x;
+	const top = dragRect.y;
+	const right = dragRect.x + dragRect.width;
+	const bottom = dragRect.y + dragRect.height;
+	const centerX = left + dragRect.width / 2;
+	const centerY = top + dragRect.height / 2;
+	const xCount = clampToRange(Math.ceil(dragRect.width / 32), 3, 20);
+	const yCount = clampToRange(Math.ceil(dragRect.height / 32), 3, 20);
+	const totalGridPoints = xCount * yCount;
+	const scale = totalGridPoints > 100 ? Math.sqrt(100 / totalGridPoints) : 1;
+	const scaledXCount = clampToRange(Math.floor(xCount * scale), 3, 20);
+	const scaledYCount = clampToRange(Math.floor(yCount * scale), 3, 20);
+	const pointKeys = /* @__PURE__ */ new Set();
+	const points = [];
+	const addPoint = (x, y) => {
+		const clampedX = clampToRange(Math.round(x), 0, viewportWidth - 1);
+		const clampedY = clampToRange(Math.round(y), 0, viewportHeight - 1);
+		const key = `${clampedX}:${clampedY}`;
+		if (pointKeys.has(key)) return;
+		pointKeys.add(key);
+		points.push({
+			x: clampedX,
+			y: clampedY
+		});
+	};
+	addPoint(left + 1, top + 1);
+	addPoint(right - 1, top + 1);
+	addPoint(left + 1, bottom - 1);
+	addPoint(right - 1, bottom - 1);
+	addPoint(centerX, top + 1);
+	addPoint(centerX, bottom - 1);
+	addPoint(left + 1, centerY);
+	addPoint(right - 1, centerY);
+	addPoint(centerX, centerY);
+	for (let xIndex = 0; xIndex < scaledXCount; xIndex += 1) {
+		const sampleX = left + (xIndex + .5) / scaledXCount * dragRect.width;
+		for (let yIndex = 0; yIndex < scaledYCount; yIndex += 1) addPoint(sampleX, top + (yIndex + .5) / scaledYCount * dragRect.height);
+	}
+	return points;
+};
+const filterElementsInDrag = (dragRect, isValidGrabbableElement, shouldCheckCoverage) => {
+	const dragBounds = {
+		left: dragRect.x,
+		top: dragRect.y,
+		right: dragRect.x + dragRect.width,
+		bottom: dragRect.y + dragRect.height
+	};
+	const candidates = /* @__PURE__ */ new Set();
+	const samplePoints = createSamplePoints(dragRect);
+	suspendPointerEventsFreeze();
+	try {
+		for (const point of samplePoints) {
+			const elementsAtPoint = document.elementsFromPoint(point.x, point.y);
+			for (const candidateElement of elementsAtPoint) candidates.add(candidateElement);
+		}
+	} finally {
+		resumePointerEventsFreeze();
+	}
+	const validCandidates = [];
+	for (const candidateElement of candidates) {
+		if (!shouldCheckCoverage && isRootElement(candidateElement)) continue;
+		if (!isValidGrabbableElement(candidateElement)) continue;
+		validCandidates.push(candidateElement);
+	}
+	const candidateRects = /* @__PURE__ */ new Map();
+	for (const candidateElement of validCandidates) candidateRects.set(candidateElement, candidateElement.getBoundingClientRect());
+	const matchingElements = [];
+	for (const candidateElement of validCandidates) {
+		const elementRect = candidateRects.get(candidateElement);
+		if (elementRect.width <= 0 || elementRect.height <= 0) continue;
+		const elementBounds = {
+			left: elementRect.left,
+			top: elementRect.top,
+			right: elementRect.left + elementRect.width,
+			bottom: elementRect.top + elementRect.height
+		};
+		if (shouldCheckCoverage) {
+			const intersectionArea = calculateIntersectionArea(dragBounds, elementBounds);
+			const elementArea = elementRect.width * elementRect.height;
+			if (elementArea > 0 && intersectionArea / elementArea >= .75) matchingElements.push(candidateElement);
+		} else if (hasIntersection(elementBounds, dragBounds)) matchingElements.push(candidateElement);
+	}
+	return sortByDocumentOrder(matchingElements);
+};
+const removeNestedElements = (elements) => {
+	return elements.filter((element) => {
+		return !elements.some((otherElement) => otherElement !== element && otherElement.contains(element));
+	});
+};
+const getElementsInDrag = (dragRect, isValidGrabbableElement, shouldCheckCoverage = true) => {
+	return removeNestedElements(filterElementsInDrag(dragRect, isValidGrabbableElement, shouldCheckCoverage));
+};
+
+//#endregion
+//#region src/utils/get-ancestor-elements.ts
+const getAncestorElements = (element) => {
+	const ancestors = [];
+	let current = element.parentElement;
+	while (current && !isRootElement(current)) {
+		ancestors.push(current);
+		current = current.parentElement;
+	}
+	return ancestors;
+};
+
+//#endregion
+//#region src/utils/get-visible-bounds-center.ts
+const getVisibleBoundsCenter = (bounds) => {
+	const viewportWidth = window.innerWidth;
+	const viewportHeight = window.innerHeight;
+	const visibleLeft = Math.max(0, bounds.x);
+	const visibleRight = Math.min(viewportWidth, bounds.x + bounds.width);
+	const visibleTop = Math.max(0, bounds.y);
+	const visibleBottom = Math.min(viewportHeight, bounds.y + bounds.height);
+	return {
+		x: (visibleLeft + visibleRight) / 2,
+		y: (visibleTop + visibleBottom) / 2
+	};
+};
+
+//#endregion
+//#region src/utils/invalidate-interaction-caches.ts
+const invalidateInteractionCaches = () => {
+	invalidateBoundsCache();
+	clearElementPositionCache();
+	clearVisibilityCache();
+};
+
+//#endregion
+//#region src/utils/create-bounds-from-drag-rect.ts
+const createBoundsFromDragRect = (dragRect) => ({
+	x: dragRect.pageX - window.scrollX,
+	y: dragRect.pageY - window.scrollY,
+	width: dragRect.width,
+	height: dragRect.height,
+	borderRadius: "0px",
+	transform: "none"
+});
+const createPageRectFromBounds = (bounds) => ({
+	pageX: bounds.x + window.scrollX,
+	pageY: bounds.y + window.scrollY,
+	width: bounds.width,
+	height: bounds.height
+});
+const createFlatOverlayBounds = (bounds) => ({
+	...bounds,
+	borderRadius: "0px",
+	transform: "none"
+});
+
+//#endregion
+//#region src/utils/get-element-bounds-center.ts
+const getElementBoundsCenter = (element) => {
+	return { center: getBoundsCenter(createElementBounds(element)) };
+};
+
+//#endregion
+//#region src/utils/get-element-center.ts
+const getElementCenter = (element) => getBoundsCenter(createElementBounds(element));
+
+//#endregion
+//#region src/utils/is-c-like-key.ts
+const C_LIKE_CHARACTERS = new Set([
+	"c",
+	"C",
+	"с",
+	"С",
+	"ȼ",
+	"Ȼ",
+	"ↄ",
+	"Ↄ",
+	"ᴄ",
+	"ᶜ",
+	"ⱼ",
+	"ⅽ",
+	"Ⅽ",
+	"ç",
+	"Ç",
+	"ć",
+	"Ć",
+	"č",
+	"Č",
+	"ĉ",
+	"Ĉ",
+	"ċ",
+	"Ċ"
+]);
+const isCLikeKey = (key, code) => {
+	if (code === "KeyC") return true;
+	if (!key || key.length !== 1) return false;
+	return C_LIKE_CHARACTERS.has(key);
+};
+
+//#endregion
+//#region src/utils/key-matches-code.ts
+const keyMatchesCode = (targetKey, code) => {
+	const normalizedTarget = targetKey.toLowerCase();
+	if (code === "Space") return normalizedTarget === "space" || normalizedTarget === " ";
+	if (code.startsWith("Key")) return code.slice(3).toLowerCase() === normalizedTarget;
+	if (code.startsWith("Digit")) return code.slice(5) === normalizedTarget;
+	return false;
+};
+
+//#endregion
+//#region src/utils/parse-activation-key.ts
+const MODIFIER_MAP = {
+	meta: "metaKey",
+	cmd: "metaKey",
+	command: "metaKey",
+	win: "metaKey",
+	windows: "metaKey",
+	ctrl: "ctrlKey",
+	control: "ctrlKey",
+	shift: "shiftKey",
+	alt: "altKey",
+	option: "altKey",
+	opt: "altKey"
+};
+const parseString = (shortcut) => {
+	const parts = shortcut.split("+").map((part) => part.trim().toLowerCase());
+	const result = {
+		metaKey: false,
+		ctrlKey: false,
+		shiftKey: false,
+		altKey: false,
+		key: null
+	};
+	for (const part of parts) {
+		const modifierKey = MODIFIER_MAP[part];
+		if (modifierKey) result[modifierKey] = true;
+		else result.key = part;
+	}
+	return result;
+};
+const parseActivationKey = (activationKey) => {
+	if (typeof activationKey === "function") return activationKey;
+	const parsed = parseString(activationKey);
+	const targetKey = parsed.key;
+	return (event) => {
+		if (targetKey === null) {
+			const metaMatches = parsed.metaKey ? event.metaKey || event.key === "Meta" : true;
+			const ctrlMatches = parsed.ctrlKey ? event.ctrlKey || event.key === "Control" : true;
+			const shiftMatches = parsed.shiftKey ? event.shiftKey || event.key === "Shift" : true;
+			const altMatches = parsed.altKey ? event.altKey || event.key === "Alt" : true;
+			const allRequiredModifiersPressed = metaMatches && ctrlMatches && shiftMatches && altMatches;
+			const requiredModifierCount = [
+				parsed.metaKey,
+				parsed.ctrlKey,
+				parsed.shiftKey,
+				parsed.altKey
+			].filter(Boolean).length;
+			const pressedModifierCount = [
+				event.metaKey || event.key === "Meta",
+				event.ctrlKey || event.key === "Control",
+				event.shiftKey || event.key === "Shift",
+				event.altKey || event.key === "Alt"
+			].filter(Boolean).length;
+			return allRequiredModifiersPressed && pressedModifierCount >= requiredModifierCount;
+		}
+		const keyMatches = event.key?.toLowerCase() === targetKey || keyMatchesCode(targetKey, event.code);
+		const modifiersMatch = parsed.metaKey || parsed.ctrlKey || parsed.shiftKey || parsed.altKey ? (parsed.metaKey ? event.metaKey : true) && (parsed.ctrlKey ? event.ctrlKey : true) && (parsed.shiftKey ? event.shiftKey : true) && (parsed.altKey ? event.altKey : true) : !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+		return keyMatches && modifiersMatch;
+	};
+};
+const getModifiersFromActivationKey = (activationKey) => {
+	if (!activationKey || typeof activationKey === "function") return {
+		metaKey: isMac(),
+		ctrlKey: !isMac(),
+		shiftKey: false,
+		altKey: false,
+		key: null
+	};
+	return parseString(activationKey);
+};
+
+//#endregion
+//#region src/utils/is-target-key-combination.ts
+const isTargetKeyCombination = (event, options) => {
+	if (options.activationKey) return parseActivationKey(options.activationKey)(event);
+	const hasOnlyPlatformModifier = (isMac() ? event.metaKey : event.ctrlKey) && !event.shiftKey && !event.altKey;
+	return Boolean(event.key && hasOnlyPlatformModifier && isCLikeKey(event.key, event.code));
+};
+
+//#endregion
+//#region src/utils/combine-bounds.ts
+const combineBounds = (boundsList) => {
+	if (boundsList.length === 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	if (boundsList.length === 1) return boundsList[0];
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const bounds of boundsList) {
+		minX = Math.min(minX, bounds.x);
+		minY = Math.min(minY, bounds.y);
+		maxX = Math.max(maxX, bounds.x + bounds.width);
+		maxY = Math.max(maxY, bounds.y + bounds.height);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+};
+
+//#endregion
+//#region src/core/theme.ts
+const DEFAULT_THEME = {
+	enabled: true,
+	hue: 0,
+	selectionBox: { enabled: true },
+	dragBox: { enabled: true },
+	grabbedBoxes: { enabled: true },
+	elementLabel: { enabled: true },
+	toolbar: { enabled: true }
+};
+const deepMergeTheme = (baseTheme, partialTheme) => ({
+	enabled: partialTheme.enabled ?? baseTheme.enabled,
+	hue: partialTheme.hue ?? baseTheme.hue,
+	selectionBox: { enabled: partialTheme.selectionBox?.enabled ?? baseTheme.selectionBox.enabled },
+	dragBox: { enabled: partialTheme.dragBox?.enabled ?? baseTheme.dragBox.enabled },
+	grabbedBoxes: { enabled: partialTheme.grabbedBoxes?.enabled ?? baseTheme.grabbedBoxes.enabled },
+	elementLabel: { enabled: partialTheme.elementLabel?.enabled ?? baseTheme.elementLabel.enabled },
+	toolbar: { enabled: partialTheme.toolbar?.enabled ?? baseTheme.toolbar.enabled }
+});
+
+//#endregion
+//#region src/core/plugin-registry.ts
+const DEFAULT_OPTIONS = {
+	activationMode: "toggle",
+	keyHoldDuration: 100,
+	allowActivationInsideInput: true,
+	maxContextLines: 3,
+	activationKey: void 0,
+	getContent: void 0,
+	freezeReactUpdates: true
+};
+const createPluginRegistry = (initialOptions = {}) => {
+	const plugins = /* @__PURE__ */ new Map();
+	const directOptionOverrides = {};
+	const [store, setStore] = createStore({
+		theme: DEFAULT_THEME,
+		options: {
+			...DEFAULT_OPTIONS,
+			...initialOptions
+		},
+		actions: []
+	});
+	const recomputeStore = () => {
+		let mergedTheme = DEFAULT_THEME;
+		let mergedOptions = {
+			...DEFAULT_OPTIONS,
+			...initialOptions
+		};
+		const allContextMenuActions = [];
+		for (const { config } of plugins.values()) {
+			if (config.theme) mergedTheme = deepMergeTheme(mergedTheme, config.theme);
+			if (config.options) mergedOptions = {
+				...mergedOptions,
+				...config.options
+			};
+			if (config.actions) for (const action of config.actions) allContextMenuActions.push(action);
+		}
+		mergedOptions = {
+			...mergedOptions,
+			...directOptionOverrides
+		};
+		setStore("theme", mergedTheme);
+		setStore("options", mergedOptions);
+		setStore("actions", allContextMenuActions);
+	};
+	const setOption = (optionKey, optionValue) => {
+		directOptionOverrides[optionKey] = optionValue;
+		setStore("options", optionKey, optionValue);
+	};
+	const SETTABLE_OPTION_KEYS = [
+		"activationMode",
+		"keyHoldDuration",
+		"allowActivationInsideInput",
+		"maxContextLines",
+		"activationKey",
+		"getContent",
+		"freezeReactUpdates"
+	];
+	const setOptions = (optionUpdates) => {
+		for (const optionKey of SETTABLE_OPTION_KEYS) if (optionUpdates[optionKey] !== void 0) setOption(optionKey, optionUpdates[optionKey]);
+	};
+	const register = (plugin, api) => {
+		if (plugins.has(plugin.name)) unregister(plugin.name);
+		const config = plugin.setup?.(api, hooks) ?? {};
+		if (plugin.theme) config.theme = config.theme ? deepMergeTheme(deepMergeTheme(DEFAULT_THEME, plugin.theme), config.theme) : plugin.theme;
+		if (plugin.actions) config.actions = [...plugin.actions, ...config.actions ?? []];
+		if (plugin.hooks) config.hooks = config.hooks ? {
+			...plugin.hooks,
+			...config.hooks
+		} : plugin.hooks;
+		if (plugin.options) config.options = config.options ? {
+			...plugin.options,
+			...config.options
+		} : plugin.options;
+		plugins.set(plugin.name, {
+			plugin,
+			config
+		});
+		recomputeStore();
+	};
+	const unregister = (name) => {
+		const registered = plugins.get(name);
+		if (!registered) return;
+		if (registered.config.cleanup) registered.config.cleanup();
+		plugins.delete(name);
+		recomputeStore();
+	};
+	const getPluginNames = () => {
+		return Array.from(plugins.keys());
+	};
+	const callHook = (hookName, ...args) => {
+		for (const { config } of plugins.values()) {
+			const hook = config.hooks?.[hookName];
+			if (hook) hook(...args);
+		}
+	};
+	const callHookWithHandled = (hookName, ...args) => {
+		let handled = false;
+		for (const { config } of plugins.values()) {
+			const hook = config.hooks?.[hookName];
+			if (hook) {
+				if (hook(...args) === true) handled = true;
+			}
+		}
+		return handled;
+	};
+	const callHookAsync = async (hookName, ...args) => {
+		for (const { config } of plugins.values()) {
+			const hook = config.hooks?.[hookName];
+			if (hook) await hook(...args);
+		}
+	};
+	const callHookReduce = async (hookName, initialValue, ...extraArgs) => {
+		let result = initialValue;
+		for (const { config } of plugins.values()) {
+			const hook = config.hooks?.[hookName];
+			if (hook) result = await hook(result, ...extraArgs);
+		}
+		return result;
+	};
+	const callHookReduceSync = (hookName, initialValue, ...extraArgs) => {
+		let result = initialValue;
+		for (const { config } of plugins.values()) {
+			const hook = config.hooks?.[hookName];
+			if (hook) result = hook(result, ...extraArgs);
+		}
+		return result;
+	};
+	const hooks = {
+		onActivate: () => callHook("onActivate"),
+		onDeactivate: () => callHook("onDeactivate"),
+		onElementHover: (element) => callHook("onElementHover", element),
+		onElementSelect: (element) => {
+			let wasIntercepted = false;
+			let pendingResult;
+			for (const { config } of plugins.values()) {
+				const hook = config.hooks?.onElementSelect;
+				if (hook) {
+					const result = hook(element);
+					if (result === true) wasIntercepted = true;
+					else if (result instanceof Promise) {
+						wasIntercepted = true;
+						pendingResult = result;
+					}
+				}
+			}
+			return {
+				wasIntercepted,
+				pendingResult
+			};
+		},
+		onDragStart: (startX, startY) => callHook("onDragStart", startX, startY),
+		onDragEnd: (elements, bounds) => callHook("onDragEnd", elements, bounds),
+		onBeforeCopy: async (elements) => callHookAsync("onBeforeCopy", elements),
+		transformCopyContent: async (content, elements) => callHookReduce("transformCopyContent", content, elements),
+		onAfterCopy: (elements, success) => callHook("onAfterCopy", elements, success),
+		onCopySuccess: (elements, content) => callHook("onCopySuccess", elements, content),
+		onCopyError: (error) => callHook("onCopyError", error),
+		onStateChange: (state) => callHook("onStateChange", state),
+		onPromptModeChange: (isPromptMode, context) => callHook("onPromptModeChange", isPromptMode, context),
+		onSelectionBox: (visible, bounds, element) => callHook("onSelectionBox", visible, bounds, element),
+		onDragBox: (visible, bounds) => callHook("onDragBox", visible, bounds),
+		onGrabbedBox: (bounds, element) => callHook("onGrabbedBox", bounds, element),
+		onElementLabel: (visible, variant, context) => callHook("onElementLabel", visible, variant, context),
+		onContextMenu: (element, position) => callHook("onContextMenu", element, position),
+		onOpenFile: (filePath, lineNumber) => callHookWithHandled("onOpenFile", filePath, lineNumber),
+		transformHtmlContent: async (html, elements) => callHookReduce("transformHtmlContent", html, elements),
+		transformAgentContext: async (context, elements) => callHookReduce("transformAgentContext", context, elements),
+		transformActionContext: (context) => callHookReduceSync("transformActionContext", context),
+		transformOpenFileUrl: (url, filePath, lineNumber) => callHookReduceSync("transformOpenFileUrl", url, filePath, lineNumber),
+		transformSnippet: async (snippet, element) => callHookReduce("transformSnippet", snippet, element)
+	};
+	return {
+		register,
+		unregister,
+		getPluginNames,
+		setOptions,
+		store,
+		hooks
+	};
+};
+
+//#endregion
+//#region src/core/arrow-navigation.ts
+const createArrowNavigator = (isValidGrabbableElement, createElementBounds) => {
+	let navigationHistory = [];
+	const findVerticalNext = (currentElement, direction) => {
+		const probePoint = getVisibleBoundsCenter(createElementBounds(currentElement));
+		const elementsAtPoint = getElementsAtPoint(probePoint.x, probePoint.y).filter(isValidGrabbableElement);
+		const currentIndex = elementsAtPoint.indexOf(currentElement);
+		if (currentIndex === -1) return null;
+		return elementsAtPoint[currentIndex + direction] ?? null;
+	};
+	const findUp = (currentElement) => {
+		const nextElement = findVerticalNext(currentElement, 1);
+		if (nextElement) {
+			navigationHistory.push(currentElement);
+			if (navigationHistory.length > 50) navigationHistory = navigationHistory.slice(-50);
+		}
+		return nextElement;
+	};
+	const findDown = (currentElement) => {
+		if (navigationHistory.length > 0) {
+			const previousElement = navigationHistory.pop();
+			if (isElementConnected(previousElement)) return previousElement;
+		}
+		return findVerticalNext(currentElement, -1);
+	};
+	const findHorizontal = (currentElement, isForward) => {
+		const findEdgeDescendant = (parentElement) => {
+			const children = Array.from(parentElement.children);
+			const ordered = isForward ? children : children.reverse();
+			for (const childElement of ordered) if (isForward) {
+				if (isValidGrabbableElement(childElement)) return childElement;
+				const descendant = findEdgeDescendant(childElement);
+				if (descendant) return descendant;
+			} else {
+				const descendant = findEdgeDescendant(childElement);
+				if (descendant) return descendant;
+				if (isValidGrabbableElement(childElement)) return childElement;
+			}
+			return null;
+		};
+		const getSibling = (element) => isForward ? element.nextElementSibling : element.previousElementSibling;
+		let nextElement = null;
+		if (isForward) nextElement = findEdgeDescendant(currentElement);
+		if (!nextElement) {
+			let searchElement = currentElement;
+			while (searchElement) {
+				let sibling = getSibling(searchElement);
+				while (sibling) {
+					const descendant = findEdgeDescendant(sibling);
+					if (descendant) {
+						nextElement = descendant;
+						break;
+					}
+					if (isValidGrabbableElement(sibling)) {
+						nextElement = sibling;
+						break;
+					}
+					sibling = getSibling(sibling);
+				}
+				if (nextElement) break;
+				const parentElement = searchElement.parentElement;
+				if (!isForward && parentElement && isValidGrabbableElement(parentElement)) {
+					nextElement = parentElement;
+					break;
+				}
+				searchElement = parentElement;
+			}
+		}
+		return nextElement;
+	};
+	const findNext = (key, currentElement) => {
+		switch (key) {
+			case "ArrowUp": return findUp(currentElement);
+			case "ArrowDown": return findDown(currentElement);
+			case "ArrowRight": return findHorizontal(currentElement, true);
+			case "ArrowLeft": return findHorizontal(currentElement, false);
+			default: return null;
+		}
+	};
+	const clearHistory = () => {
+		navigationHistory = [];
+	};
+	return {
+		findNext,
+		clearHistory
+	};
+};
+
+//#endregion
+//#region src/core/keyboard-handlers.ts
+const getRequiredModifiers = (options) => {
+	const { metaKey, ctrlKey, shiftKey, altKey } = getModifiersFromActivationKey(options.activationKey);
+	return {
+		metaKey,
+		ctrlKey,
+		shiftKey,
+		altKey
+	};
+};
+const setupKeyboardEventClaimer = () => {
+	const claimedEvents = /* @__PURE__ */ new WeakSet();
+	const originalKeyDescriptor = Object.getOwnPropertyDescriptor(KeyboardEvent.prototype, "key");
+	let didPatch = false;
+	if (originalKeyDescriptor?.get && !originalKeyDescriptor.get.__reactGrabPatched) {
+		didPatch = true;
+		const originalGetter = originalKeyDescriptor.get;
+		const patchedGetter = function() {
+			if (claimedEvents.has(this)) return "";
+			return originalGetter.call(this);
+		};
+		patchedGetter.__reactGrabPatched = true;
+		Object.defineProperty(KeyboardEvent.prototype, "key", {
+			get: patchedGetter,
+			configurable: true
+		});
+	}
+	const restore = () => {
+		if (didPatch && originalKeyDescriptor) Object.defineProperty(KeyboardEvent.prototype, "key", originalKeyDescriptor);
+	};
+	return {
+		claimedEvents,
+		originalKeyDescriptor,
+		restore
+	};
+};
+
+//#endregion
+//#region src/core/auto-scroll.ts
+const getAutoScrollDirection = (clientX, clientY) => {
+	return {
+		top: clientY < 25,
+		bottom: clientY > window.innerHeight - 25,
+		left: clientX < 25,
+		right: clientX > window.innerWidth - 25
+	};
+};
+const createAutoScroller = (getMousePosition, shouldContinue) => {
+	let animationId = null;
+	const scroll = () => {
+		if (!shouldContinue()) {
+			stop();
+			return;
+		}
+		const position = getMousePosition();
+		const direction = getAutoScrollDirection(position.x, position.y);
+		if (direction.top) window.scrollBy(0, -10);
+		if (direction.bottom) window.scrollBy(0, 10);
+		if (direction.left) window.scrollBy(-10, 0);
+		if (direction.right) window.scrollBy(10, 0);
+		if (direction.top || direction.bottom || direction.left || direction.right) animationId = nativeRequestAnimationFrame(scroll);
+		else animationId = null;
+	};
+	const stop = () => {
+		if (animationId !== null) {
+			nativeCancelAnimationFrame(animationId);
+			animationId = null;
+		}
+	};
+	const isActive = () => animationId !== null;
+	return {
+		start: scroll,
+		stop,
+		isActive
+	};
+};
+
+//#endregion
+//#region src/core/logo-svg.ts
+const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 294 294"><path fill="#ff40e0" d="M145 47c25-20 50-27 67-17 16 9 23 30 20 60 0 2-1 5-1 7l-2 13h-1l-12-4c-8-3-17-5-25-6l-17-3c-10-1-20-1-29-1-10 0-20 0-29 1-6 8-11 16-16 24-5 9-9 17-13 26 4 9 8 18 13 26s10 16 16 24l11 14c5 7 11 13 18 19l10 8s-1 0 0 0l-11 9c-17 14-35 22-49 22-6 0-13-2-18-5-16-9-23-30-20-59 1-3 1-5 1-8-30-12-48-29-48-50 0-18 14-35 41-47 2-1 5-2 7-3 0-2 0-5-1-7-3-30 4-51 20-60 18-10 42-3 68 17M71 201c-1 2-1 4-1 5-2 24 3 41 13 47h1c11 7 30 1 51-15-10-9-18-18-26-29-13-1-26-4-38-8m9-38c-3 9-5 17-7 26 8 2 17 4 25 6-3-5-6-10-9-16-3-5-6-10-9-16m-19-53c-2 1-3 1-5 2-21 10-34 23-34 35 0 13 14 27 39 37 3-12 7-25 12-37-5-12-9-24-12-37m37-10c-8 1-17 3-25 6 2 8 4 16 7 25 3-5 6-11 9-16zm-3-61c-4-1-8 0-12 2-10 7-15 24-13 47 0 2 0 3 1 5 12-4 25-6 38-8 8-10 16-20 26-29-15-11-29-17-40-17m111 2c-4-2-8-3-12-2-11 0-25 5-40 17 10 9 19 19 26 29 13 2 26 4 39 8v-5c3-23-2-40-13-47m-61 23c-7 6-13 13-19 19h37c-6-6-12-13-18-19"/><mask id="a"><path fill="#fff" d="m235 85-133 27 28 133 133-27Z"/></mask><path fill="#ff40e0" d="m137 130 76 11c8 1 9 11 3 15l-28 16-4 32c-1 8-10 10-14 4l-41-66c-3-6 1-13 8-12" mask="url(#a)"/></svg>`;
+
+//#endregion
+//#region src/utils/is-extension-context.ts
+const isExtensionContext = () => {
+	const global = globalThis;
+	return Boolean(global.chrome?.runtime?.id || global.browser?.runtime?.id);
+};
+
+//#endregion
+//#region src/core/log-intro.ts
+const logIntro = () => {
+	try {
+		const version = "[DEV]";
+		const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
+		console.log(`%cReact Grab${` v${version}`}%c\nhttps://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${logoDataUri}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`, "");
+		if (navigator.onLine && !isExtensionContext()) fetch(`https://www.react-grab.com/api/version?source=browser&t=${Date.now()}`, {
+			referrerPolicy: "origin",
+			keepalive: true,
+			priority: "low",
+			cache: "no-store"
+		}).then((response) => response.text()).then((latestVersion) => {
+			if (latestVersion && latestVersion !== version) console.warn(`[React Grab] v${version} is outdated (latest: v${latestVersion})`);
+		}).catch(() => null);
+	} catch {}
+};
+
+//#endregion
+//#region src/utils/on-idle.ts
+const isBackgroundTaskScheduler = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	if (!("postTask" in value)) return false;
+	return typeof value.postTask === "function";
+};
+const onIdle = (callback) => {
+	if (typeof window !== "undefined") {
+		const schedulerCandidate = window.scheduler;
+		if (isBackgroundTaskScheduler(schedulerCandidate)) {
+			schedulerCandidate.postTask(callback, { priority: "background" });
+			return;
+		}
+		if ("requestIdleCallback" in window) {
+			requestIdleCallback(callback);
+			return;
+		}
+	}
+	setTimeout(callback, 0);
+};
+
+//#endregion
+//#region src/utils/get-script-options.ts
+const isObjectRecord = (value) => {
+	return typeof value === "object" && value !== null;
+};
+const parseOptionsFromJson = (rawValue) => {
+	if (!isObjectRecord(rawValue)) return null;
+	const parsedOptions = {};
+	if (typeof rawValue.enabled === "boolean") parsedOptions.enabled = rawValue.enabled;
+	if (rawValue.activationMode === "toggle" || rawValue.activationMode === "hold") parsedOptions.activationMode = rawValue.activationMode;
+	if (typeof rawValue.keyHoldDuration === "number" && Number.isFinite(rawValue.keyHoldDuration)) parsedOptions.keyHoldDuration = rawValue.keyHoldDuration;
+	if (typeof rawValue.allowActivationInsideInput === "boolean") parsedOptions.allowActivationInsideInput = rawValue.allowActivationInsideInput;
+	if (typeof rawValue.maxContextLines === "number" && Number.isFinite(rawValue.maxContextLines)) parsedOptions.maxContextLines = rawValue.maxContextLines;
+	if (typeof rawValue.activationKey === "string") parsedOptions.activationKey = rawValue.activationKey;
+	if (typeof rawValue.freezeReactUpdates === "boolean") parsedOptions.freezeReactUpdates = rawValue.freezeReactUpdates;
+	if (Object.keys(parsedOptions).length === 0) return null;
+	return parsedOptions;
+};
+const getScriptOptions = () => {
+	if (typeof window === "undefined") return null;
+	try {
+		const dataOptions = (document.currentScript instanceof HTMLScriptElement ? document.currentScript : null)?.getAttribute("data-options");
+		if (!dataOptions) return null;
+		return parseOptionsFromJson(JSON.parse(dataOptions));
+	} catch {
+		return null;
+	}
+};
+
+//#endregion
+//#region src/utils/is-enter-code.ts
+const isEnterCode = (code) => code === "Enter" || code === "NumpadEnter";
+
+//#endregion
+//#region src/core/plugins/create-pending-selection-plugin.ts
+const createPendingSelectionPlugin = (config) => ({
+	name: config.name,
+	setup: (api, hooks) => {
+		return {
+			actions: [typeof config.contextMenuAction === "function" ? config.contextMenuAction(api, hooks) : config.contextMenuAction],
+			cleanup: config.cleanup
+		};
+	}
+});
+
+//#endregion
+//#region src/core/plugins/copy.ts
+const copyPlugin = createPendingSelectionPlugin({
+	name: "copy",
+	contextMenuAction: {
+		id: "copy",
+		label: "Copy",
+		shortcut: "C",
+		showInToolbarMenu: true,
+		onAction: (context) => {
+			context.copy?.();
+		}
+	}
+});
+
+//#endregion
+//#region src/core/plugins/comment.ts
+const commentPlugin = {
+	name: "comment",
+	setup: () => ({ actions: [{
+		id: "comment",
+		label: "Comment",
+		shortcut: "Enter",
+		showInToolbarMenu: true,
+		onAction: (context) => {
+			context.enterPromptMode?.();
+		}
+	}] })
+};
+
+//#endregion
+//#region src/core/plugins/open.ts
+const openPlugin = {
+	name: "open",
+	actions: [{
+		id: "open",
+		label: "Open",
+		shortcut: "O",
+		enabled: (context) => Boolean(context.filePath),
+		onAction: (context) => {
+			if (!context.filePath) return;
+			if (!context.hooks.onOpenFile(context.filePath, context.lineNumber)) openFile(context.filePath, context.lineNumber, context.hooks.transformOpenFileUrl);
+			context.hideContextMenu();
+			context.cleanup();
+		}
+	}]
+};
+
+//#endregion
+//#region src/utils/append-stack-context.ts
+const appendStackContext = (content, stackContext) => {
+	if (!stackContext) return content;
+	return `${content}\n${stackContext}`;
+};
+
+//#endregion
+//#region src/core/plugins/copy-html.ts
+const copyHtmlPlugin = createPendingSelectionPlugin({
+	name: "copy-html",
+	contextMenuAction: (api) => ({
+		id: "copy-html",
+		label: "Copy HTML",
+		showInToolbarMenu: true,
+		onAction: async (context) => {
+			await context.performWithFeedback(async () => {
+				const combinedHtml = context.elements.map((element) => element.outerHTML).join("\n\n");
+				const transformedHtml = await context.hooks.transformHtmlContent(combinedHtml, context.elements);
+				if (!transformedHtml) return false;
+				return copyContent(appendStackContext(transformedHtml, await api.getStackContext(context.element)), {
+					componentName: context.componentName,
+					tagName: context.tagName
+				});
+			});
+		}
+	})
+});
+
+//#endregion
+//#region src/core/plugins/copy-styles.ts
+const copyStylesPlugin = createPendingSelectionPlugin({
+	name: "copy-styles",
+	contextMenuAction: (api) => ({
+		id: "copy-styles",
+		label: "Copy styles",
+		showInToolbarMenu: true,
+		onAction: async (context) => {
+			await context.performWithFeedback(async () => {
+				return copyContent(appendStackContext(context.elements.map(extractElementCss).join("\n\n"), await api.getStackContext(context.element)), {
+					componentName: context.componentName,
+					tagName: context.tagName
+				});
+			});
+		}
+	}),
+	cleanup: disposeBaselineStyles
+});
+
+//#endregion
+//#region src/utils/generate-id.ts
+const generateId = (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+
+//#endregion
+//#region src/utils/comment-storage.ts
+const COMMENT_ITEMS_KEY = "react-grab-comment-items";
+const LEGACY_COMMENT_ITEMS_KEY = "react-grab-history-items";
+const CLEAR_CONFIRMED_KEY = "react-grab-clear-confirmed";
+const migrateFromLegacyStorage = () => {
+	try {
+		const legacyData = sessionStorage.getItem(LEGACY_COMMENT_ITEMS_KEY);
+		if (legacyData && !sessionStorage.getItem(COMMENT_ITEMS_KEY)) sessionStorage.setItem(COMMENT_ITEMS_KEY, legacyData);
+		sessionStorage.removeItem(LEGACY_COMMENT_ITEMS_KEY);
+	} catch {}
+};
+const loadFromSessionStorage = () => {
+	try {
+		const serialized = sessionStorage.getItem(COMMENT_ITEMS_KEY);
+		if (!serialized) return [];
+		return JSON.parse(serialized).map((commentItem) => ({
+			...commentItem,
+			elementsCount: Math.max(1, commentItem.elementsCount ?? 1),
+			previewBounds: commentItem.previewBounds ?? [],
+			elementSelectors: commentItem.elementSelectors ?? []
+		}));
+	} catch (error) {
+		logRecoverableError("Failed to load comments from sessionStorage", error);
+		return [];
+	}
+};
+const readSessionFlag = (key) => {
+	try {
+		return sessionStorage.getItem(key) === "1";
+	} catch {
+		return false;
+	}
+};
+const trimToSizeLimit = (items) => {
+	let trimmedItems = items;
+	while (trimmedItems.length > 0) {
+		const serialized = JSON.stringify(trimmedItems);
+		if (new Blob([serialized]).size <= 2097152) return trimmedItems;
+		trimmedItems = trimmedItems.slice(0, -1);
+	}
+	return trimmedItems;
+};
+const persistCommentItems = (nextItems) => {
+	commentItems = trimToSizeLimit(nextItems);
+	try {
+		sessionStorage.setItem(COMMENT_ITEMS_KEY, JSON.stringify(commentItems));
+	} catch (error) {
+		logRecoverableError("Failed to save comments to sessionStorage", error);
+	}
+	return commentItems;
+};
+migrateFromLegacyStorage();
+let commentItems = loadFromSessionStorage();
+let didConfirmClear = readSessionFlag(CLEAR_CONFIRMED_KEY);
+const loadComments = () => commentItems;
+const addCommentItem = (item) => persistCommentItems([{
+	...item,
+	id: generateId("comment")
+}, ...commentItems].slice(0, 20));
+const removeCommentItem = (itemId) => {
+	persistCommentItems(commentItems.filter((innerItem) => innerItem.id !== itemId));
+};
+const clearComments = () => persistCommentItems([]);
+const isClearConfirmed = () => didConfirmClear;
+const confirmClear = () => {
+	didConfirmClear = true;
+	try {
+		sessionStorage.setItem(CLEAR_CONFIRMED_KEY, "1");
+	} catch (error) {
+		logRecoverableError("Failed to save clear preference to sessionStorage", error);
+	}
+};
+
+//#endregion
+//#region src/utils/lock-viewport-zoom.ts
+const lockViewportZoom = () => {
+	let meta = document.querySelector("meta[name=\"viewport\"]");
+	const originalContent = meta?.getAttribute("content") ?? null;
+	if (!meta) {
+		meta = document.createElement("meta");
+		meta.name = "viewport";
+		document.head.appendChild(meta);
+	}
+	const content = originalContent ?? "";
+	meta.content = /maximum-scale/.test(content) ? content.replace(/maximum-scale\s*=\s*[\d.]+/, "maximum-scale=1") : `${content}${content ? ", " : ""}maximum-scale=1`;
+	return () => {
+		if (originalContent !== null) meta.content = originalContent;
+		else meta.remove();
+	};
+};
+
+//#endregion
+//#region src/utils/get-nearest-edge.ts
+const getNearestEdge = (rect) => {
+	const centerX = rect.left + rect.width / 2;
+	const centerY = rect.top + rect.height / 2;
+	const distanceToTop = centerY;
+	const distanceToBottom = window.innerHeight - centerY;
+	const distanceToLeft = centerX;
+	const distanceToRight = window.innerWidth - centerX;
+	const minimumDistance = Math.min(distanceToTop, distanceToBottom, distanceToLeft, distanceToRight);
+	if (minimumDistance === distanceToTop) return "top";
+	if (minimumDistance === distanceToLeft) return "left";
+	if (minimumDistance === distanceToRight) return "right";
+	return "bottom";
+};
+
+//#endregion
+//#region src/core/index.tsx
+const builtInPlugins = [
+	copyPlugin,
+	commentPlugin,
+	copyHtmlPlugin,
+	copyStylesPlugin,
+	openPlugin
+];
+let hasInited = false;
+const toolbarStateChangeCallbacks = /* @__PURE__ */ new Set();
+const init = (rawOptions) => {
+	if (typeof window === "undefined") return createNoopApi();
+	const initialOptions = {
+		enabled: true,
+		activationMode: "toggle",
+		keyHoldDuration: 100,
+		allowActivationInsideInput: true,
+		maxContextLines: 3,
+		...getScriptOptions(),
+		...rawOptions
+	};
+	if (initialOptions.enabled === false || hasInited) return createNoopApi();
+	hasInited = true;
+	logIntro();
+	const { enabled: _enabled, ...settableOptions } = initialOptions;
+	return createRoot((dispose) => {
+		let disposed = false;
+		let disposeRenderer;
+		const pluginRegistry = createPluginRegistry(settableOptions);
+		const { store, actions } = createGrabStore({
+			theme: DEFAULT_THEME,
+			keyHoldDuration: pluginRegistry.store.options.keyHoldDuration ?? 100
+		});
+		const isHoldingKeys = createMemo(() => store.current.state === "holding");
+		const isActivated = createMemo(() => store.current.state === "active");
+		const isFrozenPhase = createMemo(() => store.current.state === "active" && store.current.phase === "frozen");
+		const isDragging = createMemo(() => store.current.state === "active" && store.current.phase === "dragging");
+		const didJustDrag = createMemo(() => store.current.state === "active" && store.current.phase === "justDragged");
+		const isCopying = createMemo(() => store.current.state === "copying");
+		const didJustCopy = createMemo(() => store.current.state === "justCopied");
+		const isPromptMode = createMemo(() => store.current.state === "active" && Boolean(store.current.isPromptMode));
+		const isCommentMode = createMemo(() => store.pendingCommentMode || isPromptMode());
+		const isPendingDismiss = createMemo(() => store.current.state === "active" && Boolean(store.current.isPromptMode) && Boolean(store.current.isPendingDismiss));
+		let unlockViewportZoom = null;
+		createEffect(on(isActivated, (activated, previousActivated) => {
+			if (activated && !previousActivated) {
+				freezePseudoStates();
+				freezeGlobalAnimations();
+				document.body.style.touchAction = "none";
+				unlockViewportZoom = lockViewportZoom();
+			} else if (!activated && previousActivated) {
+				unfreezePseudoStates();
+				unfreezeGlobalAnimations();
+				document.body.style.touchAction = "";
+				unlockViewportZoom?.();
+				unlockViewportZoom = null;
+			}
+		}));
+		const savedToolbarState = loadToolbarState();
+		const [isEnabled, setIsEnabled] = createSignal(savedToolbarState?.enabled ?? true);
+		const [toolbarShakeCount, setToolbarShakeCount] = createSignal(0);
+		const [selectionLabelShakeCount, setSelectionLabelShakeCount] = createSignal(0);
+		const [currentToolbarState, setCurrentToolbarState] = createSignal(savedToolbarState);
+		const [isToolbarSelectHovered, setIsToolbarSelectHovered] = createSignal(false);
+		const [commentItems, setCommentItems] = createSignal(loadComments());
+		const [commentsDropdownPosition, setCommentsDropdownPosition] = createSignal(null);
+		const [toolbarMenuPosition, setToolbarMenuPosition] = createSignal(null);
+		const [clearPromptPosition, setClearPromptPosition] = createSignal(null);
+		let toolbarElement;
+		let dropdownTrackingFrameId = null;
+		const commentElementMap = /* @__PURE__ */ new Map();
+		const [clockFlashTrigger, setClockFlashTrigger] = createSignal(0);
+		const [isCommentsHoverOpen, setIsCommentsHoverOpen] = createSignal(false);
+		let commentsHoverPreviews = [];
+		const updateToolbarState = (updates) => {
+			const currentState = currentToolbarState() ?? loadToolbarState();
+			const newState = {
+				edge: currentState?.edge ?? "bottom",
+				ratio: currentState?.ratio ?? .5,
+				collapsed: currentState?.collapsed ?? false,
+				enabled: currentState?.enabled ?? true,
+				defaultAction: currentState?.defaultAction ?? "comment",
+				...updates
+			};
+			saveToolbarState(newState);
+			setCurrentToolbarState(newState);
+			for (const callback of toolbarStateChangeCallbacks) callback(newState);
+		};
+		const getMappedCommentElements = (commentItemId) => commentElementMap.get(commentItemId) ?? [];
+		const reacquireCommentElements = (commentItem) => {
+			const selectors = commentItem.elementSelectors ?? [];
+			if (selectors.length === 0) return [];
+			const reacquiredElements = [];
+			for (const selector of selectors) {
+				if (!selector) continue;
+				try {
+					const reacquiredElement = document.querySelector(selector);
+					if (isElementConnected(reacquiredElement)) reacquiredElements.push(reacquiredElement);
+				} catch (error) {
+					logRecoverableError("Invalid stored selector", error);
+				}
+			}
+			return reacquiredElements;
+		};
+		const getConnectedCommentElements = (commentItem) => {
+			const mappedElements = getMappedCommentElements(commentItem.id);
+			const connectedMappedElements = mappedElements.filter((mappedElement) => isElementConnected(mappedElement));
+			if (mappedElements.length > 0 && connectedMappedElements.length === mappedElements.length) return connectedMappedElements;
+			const reacquiredElements = reacquireCommentElements(commentItem);
+			if (reacquiredElements.length > 0) {
+				commentElementMap.set(commentItem.id, reacquiredElements);
+				return reacquiredElements;
+			}
+			return connectedMappedElements;
+		};
+		const getFirstConnectedCommentElement = (commentItem) => getConnectedCommentElements(commentItem)[0];
+		const commentsDisconnectedItemIds = createMemo(() => {
+			commentsDropdownPosition();
+			const disconnectedIds = /* @__PURE__ */ new Set();
+			for (const item of commentItems()) if (getConnectedCommentElements(item).length === 0) disconnectedIds.add(item.id);
+			return disconnectedIds;
+		}, void 0, { equals: (prev, next) => {
+			if (prev.size !== next.size) return false;
+			for (const id of next) if (!prev.has(id)) return false;
+			return true;
+		} });
+		const clearHoldTimer = () => {
+			if (activationHoldState.timerId !== null) {
+				clearTimeout(activationHoldState.timerId);
+				activationHoldState.timerId = null;
+			}
+		};
+		const resetCopyConfirmation = () => {
+			activationHoldState.copyWaiting = false;
+			activationHoldState.holdTimerFired = false;
+			activationHoldState.startTimestamp = null;
+		};
+		createEffect(() => {
+			if (store.current.state !== "holding") {
+				clearHoldTimer();
+				return;
+			}
+			activationHoldState.startTimestamp = Date.now();
+			activationHoldState.timerId = window.setTimeout(() => {
+				activationHoldState.timerId = null;
+				if (activationHoldState.copyWaiting) {
+					activationHoldState.holdTimerFired = true;
+					return;
+				}
+				actions.activate();
+			}, store.keyHoldDuration);
+			onCleanup(clearHoldTimer);
+		});
+		createEffect(() => {
+			if (store.current.state !== "active" || store.current.phase !== "justDragged") return;
+			const timerId = setTimeout(() => {
+				actions.finishJustDragged();
+			}, FEEDBACK_DURATION_MS);
+			onCleanup(() => clearTimeout(timerId));
+		});
+		createEffect(() => {
+			if (store.current.state !== "justCopied") return;
+			const timerId = setTimeout(() => {
+				actions.finishJustCopied();
+			}, FEEDBACK_DURATION_MS);
+			onCleanup(() => clearTimeout(timerId));
+		});
+		createEffect(on(isHoldingKeys, (currentlyHolding, previouslyHolding = false) => {
+			if (!previouslyHolding || currentlyHolding || !isActivated()) return;
+			if (pluginRegistry.store.options.activationMode !== "hold") actions.setWasActivatedByToggle(true);
+			pluginRegistry.hooks.onActivate();
+		}));
+		const preparePromptMode = (element, positionX, positionY) => {
+			setCopyStartPosition(element, positionX, positionY);
+			actions.clearInputText();
+		};
+		const activatePromptMode = () => {
+			const element = store.frozenElement || targetElement();
+			if (element) actions.enterPromptMode({
+				x: store.pointer.x,
+				y: store.pointer.y
+			}, element);
+		};
+		const setCopyStartPosition = (element, positionX, positionY) => {
+			actions.setCopyStart({
+				x: positionX,
+				y: positionY
+			}, element);
+		};
+		const elementDetectionState = {
+			lastDetectionTimestamp: 0,
+			pendingDetectionScheduledAt: 0,
+			latestPointerX: 0,
+			latestPointerY: 0
+		};
+		let dragPreviewDebounceTimerId = null;
+		const [debouncedDragPointer, setDebouncedDragPointer] = createSignal(null);
+		const scheduleDragPreviewUpdate = (clientX, clientY) => {
+			if (dragPreviewDebounceTimerId !== null) clearTimeout(dragPreviewDebounceTimerId);
+			setDebouncedDragPointer(null);
+			dragPreviewDebounceTimerId = window.setTimeout(() => {
+				setDebouncedDragPointer({
+					x: clientX,
+					y: clientY
+				});
+				dragPreviewDebounceTimerId = null;
+			}, 32);
+		};
+		let keydownSpamTimerId = null;
+		const activationHoldState = {
+			timerId: null,
+			startTimestamp: null,
+			copyWaiting: false,
+			holdTimerFired: false
+		};
+		const [isInspectMode, setIsInspectMode] = createSignal(false);
+		let lastWindowFocusTimestamp = 0;
+		let isCopyFeedbackCooldownActive = false;
+		let copyFeedbackCooldownTimerId = null;
+		const startCopyFeedbackCooldown = () => {
+			isCopyFeedbackCooldownActive = true;
+			if (copyFeedbackCooldownTimerId !== null) window.clearTimeout(copyFeedbackCooldownTimerId);
+			copyFeedbackCooldownTimerId = window.setTimeout(() => {
+				isCopyFeedbackCooldownActive = false;
+				copyFeedbackCooldownTimerId = null;
+			}, FEEDBACK_DURATION_MS);
+		};
+		const clearCopyFeedbackCooldown = () => {
+			if (copyFeedbackCooldownTimerId !== null) {
+				window.clearTimeout(copyFeedbackCooldownTimerId);
+				copyFeedbackCooldownTimerId = null;
+			}
+			isCopyFeedbackCooldownActive = false;
+		};
+		let actionCycleIdleTimeoutId = null;
+		let selectionSourceRequestVersion = 0;
+		let componentNameRequestVersion = 0;
+		let componentNameDebounceTimerId = null;
+		let keyboardSelectedElement = null;
+		let isPendingContextMenuSelect = false;
+		let pendingDefaultActionId = null;
+		const [debouncedElementForComponentName, setDebouncedElementForComponentName] = createSignal(null);
+		const [resolvedComponentName, setResolvedComponentName] = createSignal(void 0);
+		const [actionCycleItems, setActionCycleItems] = createSignal([]);
+		const [actionCycleActiveIndex, setActionCycleActiveIndex] = createSignal(null);
+		const [arrowNavigationElements, setArrowNavigationElements] = createSignal([]);
+		const [arrowNavigationActiveIndex, setArrowNavigationActiveIndex] = createSignal(0);
+		const arrowNavigator = createArrowNavigator(isValidGrabbableElement, createElementBounds);
+		const autoScroller = createAutoScroller(() => store.pointer, () => isDragging());
+		const isRendererActive = createMemo(() => isActivated() && !isCopying());
+		const grabbedBoxTimeouts = /* @__PURE__ */ new Map();
+		const showTemporaryGrabbedBox = (bounds, element) => {
+			const boxId = generateId("grabbed");
+			const newBox = {
+				id: boxId,
+				bounds,
+				createdAt: Date.now(),
+				element
+			};
+			actions.addGrabbedBox(newBox);
+			pluginRegistry.hooks.onGrabbedBox(bounds, element);
+			const timeoutId = window.setTimeout(() => {
+				grabbedBoxTimeouts.delete(boxId);
+				actions.removeGrabbedBox(boxId);
+			}, FEEDBACK_DURATION_MS);
+			grabbedBoxTimeouts.set(boxId, timeoutId);
+		};
+		const notifyElementsSelected = async (elements) => {
+			const elementsPayload = await Promise.all(elements.map(async (element) => {
+				const source = await resolveSource(element);
+				let componentName = source?.componentName ?? null;
+				const filePath = source?.filePath;
+				const lineNumber = source?.lineNumber ?? void 0;
+				const columnNumber = source?.columnNumber ?? void 0;
+				if (!componentName) componentName = getComponentDisplayName(element);
+				const textContent = element instanceof HTMLElement ? element.innerText?.slice(0, 100) : void 0;
+				return {
+					tagName: getTagName(element),
+					id: element.id || void 0,
+					className: element.getAttribute("class") || void 0,
+					textContent,
+					componentName: componentName ?? void 0,
+					filePath,
+					lineNumber,
+					columnNumber
+				};
+			}));
+			window.dispatchEvent(new CustomEvent("react-grab:element-selected", { detail: { elements: elementsPayload } }));
+		};
+		const labelFadeTimeouts = /* @__PURE__ */ new Map();
+		const cancelLabelFade = (instanceId) => {
+			const existingTimeout = labelFadeTimeouts.get(instanceId);
+			if (existingTimeout !== void 0) {
+				window.clearTimeout(existingTimeout);
+				labelFadeTimeouts.delete(instanceId);
+			}
+		};
+		const cancelAllLabelFades = () => {
+			for (const timeoutId of labelFadeTimeouts.values()) window.clearTimeout(timeoutId);
+			labelFadeTimeouts.clear();
+		};
+		const scheduleLabelFade = (instanceId) => {
+			cancelLabelFade(instanceId);
+			const timeoutId = window.setTimeout(() => {
+				labelFadeTimeouts.delete(instanceId);
+				actions.updateLabelInstance(instanceId, "fading");
+				setTimeout(() => {
+					labelFadeTimeouts.delete(instanceId);
+					actions.removeLabelInstance(instanceId);
+				}, 150);
+			}, FEEDBACK_DURATION_MS);
+			labelFadeTimeouts.set(instanceId, timeoutId);
+		};
+		const handleLabelInstanceHoverChange = (instanceId, isHovered) => {
+			if (isHovered) cancelLabelFade(instanceId);
+			else {
+				const instance = store.labelInstances.find((labelInstance) => labelInstance.id === instanceId);
+				if (instance && instance.status === "copied") scheduleLabelFade(instanceId);
+			}
+		};
+		const createLabelInstance = (bounds, tagName, componentName, status, options) => {
+			actions.clearLabelInstances();
+			cancelAllLabelFades();
+			const instanceId = generateId("label");
+			const boundsCenterX = bounds.x + bounds.width / 2;
+			const boundsHalfWidth = bounds.width / 2;
+			const mouseX = options?.mouseX;
+			const mouseXOffset = mouseX !== void 0 ? mouseX - boundsCenterX : void 0;
+			const instance = {
+				id: instanceId,
+				bounds,
+				boundsMultiple: options?.boundsMultiple,
+				tagName,
+				componentName,
+				status,
+				createdAt: Date.now(),
+				element: options?.element,
+				elements: options?.elements,
+				mouseX,
+				mouseXOffsetFromCenter: mouseXOffset,
+				mouseXOffsetRatio: mouseXOffset !== void 0 && boundsHalfWidth > 0 ? mouseXOffset / boundsHalfWidth : void 0,
+				hideArrow: options?.hideArrow
+			};
+			actions.addLabelInstance(instance);
+			return instanceId;
+		};
+		const clearAllLabels = () => {
+			cancelAllLabelFades();
+			actions.clearLabelInstances();
+		};
+		const updateLabelAfterCopy = (labelInstanceId, didSucceed, errorMessage) => {
+			if (didSucceed) actions.updateLabelInstance(labelInstanceId, "copied");
+			else actions.updateLabelInstance(labelInstanceId, "error", errorMessage || "Unknown error");
+			scheduleLabelFade(labelInstanceId);
+		};
+		const executeCopyOperation = async (clipboardOperation, labelInstanceId, copiedElement, shouldDeactivateAfter) => {
+			clearCopyFeedbackCooldown();
+			if (store.current.state !== "copying") actions.startCopy();
+			let didSucceed = false;
+			let errorMessage;
+			try {
+				await clipboardOperation();
+				didSucceed = true;
+			} catch (error) {
+				errorMessage = normalizeErrorMessage(error, "Action failed");
+			}
+			if (labelInstanceId) updateLabelAfterCopy(labelInstanceId, didSucceed, errorMessage);
+			if (store.current.state !== "copying") return;
+			if (didSucceed) actions.completeCopy(copiedElement);
+			if (shouldDeactivateAfter) deactivateRenderer();
+			else if (didSucceed) {
+				actions.activate();
+				startCopyFeedbackCooldown();
+			} else actions.unfreeze();
+		};
+		const handleCopySuccessWithComments = (options) => {
+			const { copiedElements, content, extraPrompt, elementName, tagName, componentName } = options;
+			pluginRegistry.hooks.onCopySuccess(copiedElements, content);
+			if (!extraPrompt) return;
+			const hasCopiedElements = copiedElements.length > 0;
+			if (hasCopiedElements) {
+				const currentItems = commentItems();
+				for (const [existingItemId, mappedElements] of commentElementMap.entries()) {
+					if (!(mappedElements.length === copiedElements.length && mappedElements.every((mappedElement, index) => mappedElement === copiedElements[index]))) continue;
+					const existingItem = currentItems.find((item) => item.id === existingItemId);
+					if (!existingItem) continue;
+					if (existingItem.commentText === extraPrompt) {
+						removeCommentItem(existingItemId);
+						commentElementMap.delete(existingItemId);
+						break;
+					}
+				}
+			}
+			const elementSelectors = copiedElements.map((copiedElement, index) => createElementSelector(copiedElement, index === 0));
+			const updatedCommentItems = addCommentItem({
+				content,
+				elementName: elementName ?? "element",
+				tagName: tagName ?? "div",
+				componentName: componentName ?? void 0,
+				elementsCount: copiedElements.length,
+				previewBounds: copiedElements.map((copiedElement) => createElementBounds(copiedElement)),
+				elementSelectors,
+				commentText: extraPrompt,
+				timestamp: Date.now()
+			});
+			setCommentItems(updatedCommentItems);
+			setClockFlashTrigger((previous) => previous + 1);
+			const newestCommentItem = updatedCommentItems[0];
+			if (newestCommentItem && hasCopiedElements) commentElementMap.set(newestCommentItem.id, [...copiedElements]);
+			const currentItemIds = new Set(updatedCommentItems.map((item) => item.id));
+			for (const mapItemId of commentElementMap.keys()) if (!currentItemIds.has(mapItemId)) commentElementMap.delete(mapItemId);
+		};
+		const copyWithFallback = (elements, extraPrompt, resolvedComponentName) => {
+			const firstElement = elements[0];
+			const componentName = resolvedComponentName ?? (firstElement ? getComponentDisplayName(firstElement) : null);
+			const tagName = firstElement ? getTagName(firstElement) : null;
+			const elementName = componentName ?? tagName ?? void 0;
+			return tryCopyWithFallback({
+				maxContextLines: pluginRegistry.store.options.maxContextLines,
+				getContent: pluginRegistry.store.options.getContent,
+				componentName: elementName
+			}, {
+				onBeforeCopy: pluginRegistry.hooks.onBeforeCopy,
+				transformSnippet: pluginRegistry.hooks.transformSnippet,
+				transformCopyContent: pluginRegistry.hooks.transformCopyContent,
+				onAfterCopy: pluginRegistry.hooks.onAfterCopy,
+				onCopySuccess: (copiedElements, content) => {
+					handleCopySuccessWithComments({
+						copiedElements,
+						content,
+						extraPrompt,
+						elementName,
+						tagName,
+						componentName
+					});
+				},
+				onCopyError: pluginRegistry.hooks.onCopyError
+			}, elements, extraPrompt);
+		};
+		const copyElementsToClipboard = async (targetElements, extraPrompt, resolvedComponentName) => {
+			if (targetElements.length === 0) return;
+			const unhandledElements = [];
+			const pendingResults = [];
+			for (const element of targetElements) {
+				const { wasIntercepted, pendingResult } = pluginRegistry.hooks.onElementSelect(element);
+				if (!wasIntercepted) unhandledElements.push(element);
+				if (pendingResult) pendingResults.push(pendingResult);
+				if (pluginRegistry.store.theme.grabbedBoxes.enabled) showTemporaryGrabbedBox(createElementBounds(element), element);
+			}
+			await waitUntilNextFrame();
+			if (unhandledElements.length > 0) await copyWithFallback(unhandledElements, extraPrompt, resolvedComponentName);
+			else if (pendingResults.length > 0) {
+				if (!(await Promise.all(pendingResults)).every(Boolean)) throw new Error("Failed to copy");
+			}
+			notifyElementsSelected(targetElements);
+		};
+		const performCopyWithLabel = (options) => {
+			const { element, cursorX, selectedElements, extraPrompt, shouldDeactivateAfter, onComplete, dragRect: passedDragRect } = options;
+			const allTargetElements = selectedElements ?? [element];
+			const dragRect = passedDragRect ?? store.frozenDragRect;
+			const isMultiSelect = allTargetElements.length > 1;
+			const selectionBounds = dragRect && isMultiSelect ? createBoundsFromDragRect(dragRect) : createFlatOverlayBounds(createElementBounds(element));
+			const labelCursorX = isMultiSelect ? selectionBounds.x + selectionBounds.width / 2 : cursorX;
+			const tagName = getTagName(element);
+			clearCopyFeedbackCooldown();
+			actions.startCopy();
+			const labelInstanceId = tagName ? createLabelInstance(selectionBounds, tagName, void 0, "copying", {
+				element,
+				mouseX: labelCursorX,
+				elements: selectedElements
+			}) : null;
+			getNearestComponentName(element).then(async (componentName) => {
+				await executeCopyOperation(() => copyElementsToClipboard(allTargetElements, extraPrompt, componentName ?? void 0), labelInstanceId, element, shouldDeactivateAfter);
+				onComplete?.();
+			}).catch((error) => {
+				logRecoverableError("Copy operation failed", error);
+				if (labelInstanceId) updateLabelAfterCopy(labelInstanceId, false, normalizeErrorMessage(error, "Action failed"));
+				if (store.current.state === "copying") actions.unfreeze();
+			});
+		};
+		const targetElement = createMemo(() => {
+			store.viewportVersion;
+			if (!isRendererActive() || isDragging()) return null;
+			const element = store.detectedElement;
+			if (!isElementConnected(element)) return null;
+			return element;
+		});
+		const effectiveElement = createMemo(() => store.frozenElement || (isFrozenPhase() ? null : targetElement()));
+		createEffect(() => {
+			const element = store.detectedElement;
+			if (!element) return;
+			const intervalId = setInterval(() => {
+				if (!isElementConnected(element)) actions.setDetectedElement(null);
+			}, 100);
+			onCleanup(() => clearInterval(intervalId));
+		});
+		createEffect(on(effectiveElement, (element) => {
+			if (componentNameDebounceTimerId !== null) {
+				clearTimeout(componentNameDebounceTimerId);
+				componentNameDebounceTimerId = null;
+			}
+			if (!element) {
+				setDebouncedElementForComponentName(null);
+				return;
+			}
+			componentNameDebounceTimerId = window.setTimeout(() => {
+				componentNameDebounceTimerId = null;
+				setDebouncedElementForComponentName(element);
+			}, 100);
+		}));
+		onCleanup(() => {
+			if (componentNameDebounceTimerId !== null) {
+				clearTimeout(componentNameDebounceTimerId);
+				componentNameDebounceTimerId = null;
+			}
+		});
+		createEffect(() => {
+			const elements = store.frozenElements;
+			onCleanup(freezeAnimations(elements));
+		});
+		createEffect(on(isActivated, (activated) => {
+			if (!activated) return;
+			if (!pluginRegistry.store.options.freezeReactUpdates) return;
+			onCleanup(freezeUpdates());
+		}));
+		const getSelectionElement = () => {
+			if (store.isTouchMode && isDragging()) {
+				const detected = store.detectedElement;
+				if (!detected || isRootElement(detected)) return void 0;
+				return detected;
+			}
+			const element = effectiveElement();
+			if (!element || isRootElement(element)) return void 0;
+			return element;
+		};
+		const selectionElement = createMemo(() => getSelectionElement());
+		const isSelectionElementVisible = () => {
+			if (!selectionElement()) return false;
+			if (store.isTouchMode && isDragging()) return isRendererActive();
+			return isRendererActive() && !isDragging();
+		};
+		const frozenElementsBounds = createMemo(() => {
+			store.viewportVersion;
+			const frozenElements = store.frozenElements;
+			if (frozenElements.length === 0) return [];
+			const dragRect = store.frozenDragRect;
+			if (dragRect && frozenElements.length > 1) return [createBoundsFromDragRect(dragRect)];
+			return frozenElements.filter((element) => element !== null).map((element) => createElementBounds(element));
+		});
+		const selectionBounds = createMemo(() => {
+			store.viewportVersion;
+			const frozenElements = store.frozenElements;
+			if (frozenElements.length > 0) {
+				const frozenBounds = frozenElementsBounds();
+				if (frozenElements.length === 1) {
+					const firstBounds = frozenBounds[0];
+					if (firstBounds) return firstBounds;
+				}
+				const dragRect = store.frozenDragRect;
+				if (dragRect) return frozenBounds[0] ?? createBoundsFromDragRect(dragRect);
+				return createFlatOverlayBounds(combineBounds(frozenBounds));
+			}
+			const element = selectionElement();
+			if (!element) return void 0;
+			return createElementBounds(element);
+		});
+		const toPageCoordinates = (clientX, clientY) => ({
+			pageX: clientX + window.scrollX,
+			pageY: clientY + window.scrollY
+		});
+		const calculateDragDistance = (endX, endY) => {
+			const { pageX: endPageX, pageY: endPageY } = toPageCoordinates(endX, endY);
+			return {
+				x: Math.abs(endPageX - store.dragStart.x),
+				y: Math.abs(endPageY - store.dragStart.y)
+			};
+		};
+		const isDraggingBeyondThreshold = createMemo(() => {
+			if (!isDragging()) return false;
+			const dragDistance = calculateDragDistance(store.pointer.x, store.pointer.y);
+			return dragDistance.x > 2 || dragDistance.y > 2;
+		});
+		const calculateDragRectangle = (endX, endY) => {
+			const { pageX: endPageX, pageY: endPageY } = toPageCoordinates(endX, endY);
+			const dragPageX = Math.min(store.dragStart.x, endPageX);
+			const dragPageY = Math.min(store.dragStart.y, endPageY);
+			const dragWidth = Math.abs(endPageX - store.dragStart.x);
+			const dragHeight = Math.abs(endPageY - store.dragStart.y);
+			return {
+				x: dragPageX - window.scrollX,
+				y: dragPageY - window.scrollY,
+				width: dragWidth,
+				height: dragHeight
+			};
+		};
+		const dragBounds = createMemo(() => {
+			store.viewportVersion;
+			if (!isDraggingBeyondThreshold()) return void 0;
+			const drag = calculateDragRectangle(store.pointer.x, store.pointer.y);
+			return {
+				borderRadius: "0px",
+				height: drag.height,
+				transform: "none",
+				width: drag.width,
+				x: drag.x,
+				y: drag.y
+			};
+		});
+		const dragPreviewBounds = createMemo(() => {
+			store.viewportVersion;
+			if (!isDraggingBeyondThreshold()) return [];
+			const pointer = debouncedDragPointer();
+			if (!pointer) return [];
+			const drag = calculateDragRectangle(pointer.x, pointer.y);
+			const elements = getElementsInDrag(drag, isValidGrabbableElement);
+			return (elements.length > 0 ? elements : getElementsInDrag(drag, isValidGrabbableElement, false)).map((element) => createElementBounds(element));
+		});
+		const selectionBoundsMultiple = createMemo(() => {
+			const previewBounds = dragPreviewBounds();
+			if (previewBounds.length > 0) return previewBounds;
+			return frozenElementsBounds();
+		});
+		const inspectBounds = createMemo(() => {
+			if (!isInspectMode()) return [];
+			const element = effectiveElement();
+			if (!element) return [];
+			store.viewportVersion;
+			return [...getAncestorElements(element), element].map((ancestor) => createElementBounds(ancestor));
+		});
+		const cursorPosition = createMemo(() => {
+			if (isCopying() || isPromptMode()) {
+				store.viewportVersion;
+				const element = store.frozenElement || targetElement();
+				if (element) {
+					const { center } = getElementBoundsCenter(element);
+					return {
+						x: center.x + store.copyOffsetFromCenterX,
+						y: store.copyStart.y
+					};
+				}
+				return {
+					x: store.copyStart.x,
+					y: store.copyStart.y
+				};
+			}
+			return {
+				x: store.pointer.x,
+				y: store.pointer.y
+			};
+		});
+		createEffect(on(() => [targetElement(), store.lastGrabbedElement], ([currentElement, lastElement]) => {
+			if (lastElement && currentElement && lastElement !== currentElement) actions.setLastGrabbed(null);
+			if (currentElement) pluginRegistry.hooks.onElementHover(currentElement);
+		}));
+		createEffect(on(() => targetElement(), (element) => {
+			const currentVersion = ++selectionSourceRequestVersion;
+			const clearSource = () => {
+				if (selectionSourceRequestVersion === currentVersion) actions.setSelectionSource(null, null);
+			};
+			if (!element) {
+				clearSource();
+				return;
+			}
+			resolveSource(element).then((source) => {
+				if (selectionSourceRequestVersion !== currentVersion) return;
+				if (!source) {
+					clearSource();
+					return;
+				}
+				actions.setSelectionSource(source.filePath, source.lineNumber);
+			}).catch(() => {
+				if (selectionSourceRequestVersion === currentVersion) actions.setSelectionSource(null, null);
+			});
+		}));
+		const publicGrabbedBoxes = createMemo(() => store.grabbedBoxes.map((box) => ({
+			id: box.id,
+			bounds: box.bounds,
+			createdAt: box.createdAt
+		})));
+		const publicLabelInstances = createMemo(() => store.labelInstances.map((instance) => ({
+			id: instance.id,
+			status: instance.status,
+			tagName: instance.tagName,
+			componentName: instance.componentName,
+			createdAt: instance.createdAt
+		})));
+		createEffect(on(createMemo(() => {
+			const active = isActivated();
+			const dragging = isDragging();
+			const copying = isCopying();
+			const inputMode = isPromptMode();
+			const target = targetElement();
+			const drag = dragBounds();
+			const themeEnabled = pluginRegistry.store.theme.enabled;
+			const selectionBoxEnabled = pluginRegistry.store.theme.selectionBox.enabled;
+			const dragBoxEnabled = pluginRegistry.store.theme.dragBox.enabled;
+			const draggingBeyondThreshold = isDraggingBeyondThreshold();
+			const effectiveTarget = effectiveElement();
+			const justCopied = didJustCopy();
+			return {
+				isActive: active,
+				isDragging: dragging,
+				isCopying: copying,
+				isPromptMode: inputMode,
+				isSelectionBoxVisible: Boolean(themeEnabled && selectionBoxEnabled && active && !copying && !justCopied && !dragging && effectiveTarget != null),
+				isDragBoxVisible: Boolean(themeEnabled && dragBoxEnabled && active && !copying && draggingBeyondThreshold),
+				targetElement: target,
+				dragBounds: drag ? {
+					x: drag.x,
+					y: drag.y,
+					width: drag.width,
+					height: drag.height
+				} : null,
+				grabbedBoxes: [...publicGrabbedBoxes()],
+				labelInstances: [...publicLabelInstances()],
+				selectionFilePath: store.selectionFilePath,
+				toolbarState: currentToolbarState()
+			};
+		}), (state) => {
+			pluginRegistry.hooks.onStateChange(state);
+		}));
+		createEffect(on(() => [
+			isPromptMode(),
+			store.pointer.x,
+			store.pointer.y,
+			targetElement()
+		], ([inputMode, x, y, target]) => {
+			pluginRegistry.hooks.onPromptModeChange(inputMode, {
+				x,
+				y,
+				targetElement: target
+			});
+		}));
+		createEffect(on(() => [
+			selectionVisible(),
+			selectionBounds(),
+			targetElement()
+		], ([visible, bounds, element]) => {
+			pluginRegistry.hooks.onSelectionBox(Boolean(visible), bounds ?? null, element);
+		}));
+		createEffect(on(() => [dragVisible(), dragBounds()], ([visible, bounds]) => {
+			pluginRegistry.hooks.onDragBox(Boolean(visible), bounds ?? null);
+		}));
+		createEffect(on(() => [
+			labelVisible(),
+			labelVariant(),
+			cursorPosition(),
+			targetElement(),
+			store.selectionFilePath,
+			store.selectionLineNumber
+		], ([visible, variant, position, element, filePath, lineNumber]) => {
+			pluginRegistry.hooks.onElementLabel(Boolean(visible), variant, {
+				x: position.x,
+				y: position.y,
+				content: "",
+				element: element ?? void 0,
+				tagName: element ? getTagName(element) || void 0 : void 0,
+				filePath: filePath ?? void 0,
+				lineNumber: lineNumber ?? void 0
+			});
+		}));
+		let cursorStyleElement = null;
+		const setCursorOverride = (cursor) => {
+			if (cursor) {
+				if (!cursorStyleElement) {
+					cursorStyleElement = document.createElement("style");
+					cursorStyleElement.setAttribute("data-react-grab-cursor", "");
+					document.head.appendChild(cursorStyleElement);
+				}
+				cursorStyleElement.textContent = `* { cursor: ${cursor} !important; }`;
+			} else if (cursorStyleElement) {
+				cursorStyleElement.remove();
+				cursorStyleElement = null;
+			}
+		};
+		createEffect(on(() => [
+			isActivated(),
+			isCopying(),
+			isPromptMode()
+		], ([activated, copying, promptMode]) => {
+			if (copying) setCursorOverride("progress");
+			else if (activated && !promptMode) setCursorOverride("crosshair");
+			else setCursorOverride(null);
+		}));
+		const activateRenderer = () => {
+			const wasInHoldingState = isHoldingKeys();
+			actions.activate();
+			if (!wasInHoldingState) pluginRegistry.hooks.onActivate();
+		};
+		const deactivateRenderer = () => {
+			const wasDragging = isDragging();
+			const previousFocused = store.previouslyFocusedElement;
+			actions.deactivate();
+			setIsInspectMode(false);
+			clearArrowNavigation();
+			keyboardSelectedElement = null;
+			isPendingContextMenuSelect = false;
+			if (wasDragging) document.body.style.userSelect = "";
+			if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
+			autoScroller.stop();
+			if (previousFocused instanceof HTMLElement && isElementConnected(previousFocused)) previousFocused.focus();
+			pluginRegistry.hooks.onDeactivate();
+		};
+		const forceDeactivateAll = () => {
+			if (isHoldingKeys()) actions.releaseHold();
+			if (isActivated()) deactivateRenderer();
+			clearCopyFeedbackCooldown();
+		};
+		const toggleActivate = () => {
+			actions.setWasActivatedByToggle(true);
+			activateRenderer();
+		};
+		const handleInputSubmit = () => {
+			actions.clearLastCopied();
+			const frozenElements = [...store.frozenElements];
+			const element = store.frozenElement || targetElement();
+			const prompt = isPromptMode() ? store.inputText.trim() : "";
+			if (!element) {
+				deactivateRenderer();
+				return;
+			}
+			const elements = frozenElements.length > 0 ? frozenElements : [element];
+			const firstBounds = elements.map((selectedElement) => createElementBounds(selectedElement))[0];
+			const { x: currentX, y: currentY } = getBoundsCenter(firstBounds);
+			const labelPositionX = currentX + store.copyOffsetFromCenterX;
+			actions.setPointer({
+				x: currentX,
+				y: currentY
+			});
+			actions.exitPromptMode();
+			actions.clearInputText();
+			performCopyWithLabel({
+				element,
+				cursorX: labelPositionX,
+				selectedElements: elements,
+				extraPrompt: prompt || void 0,
+				shouldDeactivateAfter: true
+			});
+		};
+		const handleInputCancel = () => {
+			actions.clearLastCopied();
+			if (!isPromptMode()) return;
+			if (isPendingDismiss()) {
+				actions.clearInputText();
+				deactivateRenderer();
+				return;
+			}
+			actions.setPendingDismiss(true);
+			setSelectionLabelShakeCount((count) => count + 1);
+		};
+		const handleConfirmDismiss = () => {
+			actions.clearInputText();
+			deactivateRenderer();
+		};
+		const handleCancelDismiss = () => {
+			actions.setPendingDismiss(false);
+		};
+		const handleToggleExpand = () => {
+			const element = store.frozenElement || targetElement();
+			if (element) preparePromptMode(element, store.pointer.x, store.pointer.y);
+			activatePromptMode();
+		};
+		const handleToggleActive = () => {
+			if (isActivated()) deactivateRenderer();
+			else if (isEnabled()) {
+				const defaultActionId = currentToolbarState()?.defaultAction ?? "comment";
+				if (defaultActionId === "comment") actions.setPendingCommentMode(true);
+				else {
+					pendingDefaultActionId = defaultActionId;
+					isPendingContextMenuSelect = true;
+				}
+				toggleActivate();
+			}
+		};
+		const enterCommentModeForElement = (element, positionX, positionY) => {
+			actions.setPendingCommentMode(false);
+			actions.clearInputText();
+			actions.enterPromptMode({
+				x: positionX,
+				y: positionY
+			}, element);
+		};
+		const openContextMenu = (element, position) => {
+			actions.showContextMenu(position, element);
+			clearArrowNavigation();
+			dismissAllPopups();
+			pluginRegistry.hooks.onContextMenu(element, position);
+		};
+		const runPendingDefaultAction = (element, position) => {
+			const actionId = pendingDefaultActionId;
+			pendingDefaultActionId = null;
+			if (!actionId) return;
+			const action = pluginRegistry.store.actions.find((registeredAction) => registeredAction.id === actionId);
+			if (!action) {
+				handleSetDefaultAction(DEFAULT_ACTION_ID);
+				openContextMenu(element, position);
+				return;
+			}
+			const elementBounds = createElementBounds(element);
+			const context = buildActionContext({
+				element,
+				filePath: store.selectionFilePath ?? void 0,
+				lineNumber: store.selectionLineNumber ?? void 0,
+				tagName: getTagName(element) || void 0,
+				componentName: resolvedComponentName(),
+				position,
+				shouldDeferHideContextMenu: false,
+				performWithFeedbackOptions: {
+					fallbackBounds: elementBounds,
+					fallbackSelectionBounds: [elementBounds],
+					position
+				}
+			});
+			action.onAction(context);
+		};
+		const handleComment = () => {
+			if (!isEnabled()) return;
+			if (isActivated() && isCommentMode()) {
+				deactivateRenderer();
+				return;
+			}
+			actions.setPendingCommentMode(true);
+			if (!isActivated()) toggleActivate();
+		};
+		const handleToggleEnabled = () => {
+			const newEnabled = !isEnabled();
+			setIsEnabled(newEnabled);
+			updateToolbarState({ enabled: newEnabled });
+			if (!newEnabled) {
+				forceDeactivateAll();
+				dismissAllPopups();
+			}
+		};
+		const handlePointerMove = (clientX, clientY) => {
+			if (!isEnabled() || isPromptMode() || isFrozenPhase() || store.contextMenuPosition !== null) return;
+			actions.setPointer({
+				x: clientX,
+				y: clientY
+			});
+			elementDetectionState.latestPointerX = clientX;
+			elementDetectionState.latestPointerY = clientY;
+			const now = performance.now();
+			const isDetectionPending = elementDetectionState.pendingDetectionScheduledAt > 0 && now - elementDetectionState.pendingDetectionScheduledAt < 200;
+			if (now - elementDetectionState.lastDetectionTimestamp >= 32 && !isDetectionPending) {
+				elementDetectionState.lastDetectionTimestamp = now;
+				elementDetectionState.pendingDetectionScheduledAt = now;
+				onIdle(() => {
+					const candidate = getElementAtPosition(elementDetectionState.latestPointerX, elementDetectionState.latestPointerY);
+					if (candidate !== store.detectedElement) actions.setDetectedElement(candidate);
+					elementDetectionState.pendingDetectionScheduledAt = 0;
+				});
+			}
+			if (isDragging()) {
+				scheduleDragPreviewUpdate(clientX, clientY);
+				const direction = getAutoScrollDirection(clientX, clientY);
+				const isNearEdge = direction.top || direction.bottom || direction.left || direction.right;
+				if (isNearEdge && !autoScroller.isActive()) autoScroller.start();
+				else if (!isNearEdge && autoScroller.isActive()) autoScroller.stop();
+			}
+		};
+		const handlePointerDown = (clientX, clientY) => {
+			if (!isRendererActive() || isCopying()) return false;
+			actions.startDrag({
+				x: clientX,
+				y: clientY
+			});
+			actions.setPointer({
+				x: clientX,
+				y: clientY
+			});
+			document.body.style.userSelect = "none";
+			scheduleDragPreviewUpdate(clientX, clientY);
+			pluginRegistry.hooks.onDragStart(clientX + window.scrollX, clientY + window.scrollY);
+			return true;
+		};
+		const handleDragSelection = (dragSelectionRect, hasModifierKeyHeld) => {
+			const elements = getElementsInDrag(dragSelectionRect, isValidGrabbableElement);
+			const selectedElements = elements.length > 0 ? elements : getElementsInDrag(dragSelectionRect, isValidGrabbableElement, false);
+			if (selectedElements.length === 0) return;
+			freezeAllAnimations(selectedElements);
+			pluginRegistry.hooks.onDragEnd(selectedElements, dragSelectionRect);
+			const firstElement = selectedElements[0];
+			const center = getElementCenter(firstElement);
+			actions.setPointer(center);
+			actions.setFrozenElements(selectedElements);
+			const dragRect = createPageRectFromBounds(dragSelectionRect);
+			actions.setFrozenDragRect(dragRect);
+			actions.freeze();
+			actions.setLastGrabbed(firstElement);
+			if (store.pendingCommentMode) {
+				enterCommentModeForElement(firstElement, center.x, center.y);
+				return;
+			}
+			if (isPendingContextMenuSelect) {
+				isPendingContextMenuSelect = false;
+				if (pendingDefaultActionId) runPendingDefaultAction(firstElement, center);
+				else openContextMenu(firstElement, center);
+				return;
+			}
+			const shouldDeactivateAfter = store.wasActivatedByToggle && !hasModifierKeyHeld;
+			performCopyWithLabel({
+				element: firstElement,
+				cursorX: center.x,
+				selectedElements,
+				shouldDeactivateAfter,
+				dragRect
+			});
+		};
+		const handleSingleClick = (clientX, clientY, hasModifierKeyHeld) => {
+			const validFrozenElement = isElementConnected(store.frozenElement) ? store.frozenElement : null;
+			const validKeyboardSelectedElement = isElementConnected(keyboardSelectedElement) ? keyboardSelectedElement : null;
+			const element = validFrozenElement ?? validKeyboardSelectedElement ?? getElementAtPosition(clientX, clientY) ?? (isElementConnected(store.detectedElement) ? store.detectedElement : null);
+			if (!element) return;
+			const didSelectViaKeyboard = !validFrozenElement && validKeyboardSelectedElement === element;
+			let positionX;
+			let positionY;
+			if (validFrozenElement) {
+				positionX = store.pointer.x;
+				positionY = store.pointer.y;
+			} else if (didSelectViaKeyboard) {
+				const elementCenter = getElementCenter(element);
+				positionX = elementCenter.x;
+				positionY = elementCenter.y;
+			} else {
+				positionX = clientX;
+				positionY = clientY;
+			}
+			keyboardSelectedElement = null;
+			if (store.pendingCommentMode) {
+				enterCommentModeForElement(element, positionX, positionY);
+				return;
+			}
+			if (isPendingContextMenuSelect) {
+				isPendingContextMenuSelect = false;
+				const { wasIntercepted } = pluginRegistry.hooks.onElementSelect(element);
+				if (wasIntercepted) return;
+				freezeAllAnimations([element]);
+				actions.setFrozenElement(element);
+				const position = {
+					x: positionX,
+					y: positionY
+				};
+				actions.setPointer(position);
+				actions.freeze();
+				if (pendingDefaultActionId) runPendingDefaultAction(element, position);
+				else openContextMenu(element, position);
+				return;
+			}
+			const shouldDeactivateAfter = store.wasActivatedByToggle && !hasModifierKeyHeld;
+			actions.setLastGrabbed(element);
+			performCopyWithLabel({
+				element,
+				cursorX: positionX,
+				shouldDeactivateAfter
+			});
+		};
+		const cancelActiveDrag = () => {
+			if (!isDragging()) return;
+			actions.cancelDrag();
+			autoScroller.stop();
+			document.body.style.userSelect = "";
+		};
+		const handlePointerUp = (clientX, clientY, hasModifierKeyHeld) => {
+			if (!isDragging()) return;
+			if (dragPreviewDebounceTimerId !== null) {
+				clearTimeout(dragPreviewDebounceTimerId);
+				dragPreviewDebounceTimerId = null;
+			}
+			setDebouncedDragPointer(null);
+			const dragDistance = calculateDragDistance(clientX, clientY);
+			const wasDragGesture = dragDistance.x > 2 || dragDistance.y > 2;
+			const dragSelectionRect = wasDragGesture ? calculateDragRectangle(clientX, clientY) : null;
+			if (wasDragGesture) actions.endDrag();
+			else actions.cancelDrag();
+			autoScroller.stop();
+			document.body.style.userSelect = "";
+			if (dragSelectionRect) handleDragSelection(dragSelectionRect, hasModifierKeyHeld);
+			else handleSingleClick(clientX, clientY, hasModifierKeyHeld);
+		};
+		const eventListenerManager = createEventListenerManager();
+		const keyboardClaimer = setupKeyboardEventClaimer();
+		const blockEnterIfNeeded = (event) => {
+			let originalKey;
+			try {
+				originalKey = keyboardClaimer.originalKeyDescriptor?.get ? keyboardClaimer.originalKeyDescriptor.get.call(event) : event.key;
+			} catch {
+				return false;
+			}
+			const isEnterKey = originalKey === "Enter" || isEnterCode(event.code);
+			const isOverlayActive = isActivated() || isHoldingKeys();
+			if (isEnterKey && isOverlayActive && !isPromptMode() && !store.wasActivatedByToggle && clearPromptPosition() === null) {
+				keyboardClaimer.claimedEvents.add(event);
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return true;
+			}
+			return false;
+		};
+		eventListenerManager.addDocumentListener("keydown", blockEnterIfNeeded, { capture: true });
+		eventListenerManager.addDocumentListener("keyup", blockEnterIfNeeded, { capture: true });
+		eventListenerManager.addDocumentListener("keypress", blockEnterIfNeeded, { capture: true });
+		const clearArrowNavigation = () => {
+			setArrowNavigationElements([]);
+			setArrowNavigationActiveIndex(0);
+			arrowNavigator.clearHistory();
+		};
+		const selectAndFocusElement = (element) => {
+			actions.setFrozenElement(element);
+			actions.freeze();
+			keyboardSelectedElement = element;
+			const { center } = getElementBoundsCenter(element);
+			actions.setPointer(center);
+			if (store.contextMenuPosition !== null) actions.showContextMenu(center, element);
+		};
+		const openArrowNavigationMenu = (anchorElement) => {
+			const probePoint = getVisibleBoundsCenter(createElementBounds(anchorElement));
+			const elementsAtPoint = getElementsAtPoint(probePoint.x, probePoint.y).filter(isValidGrabbableElement).reverse();
+			setArrowNavigationElements(elementsAtPoint);
+			setArrowNavigationActiveIndex(Math.max(0, elementsAtPoint.indexOf(anchorElement)));
+		};
+		const handleArrowNavigationSelect = (index) => {
+			const targetElement = arrowNavigationElements()[index];
+			if (!targetElement) return;
+			setArrowNavigationActiveIndex(index);
+			arrowNavigator.clearHistory();
+			selectAndFocusElement(targetElement);
+		};
+		const handleArrowNavigation = (event) => {
+			if (!isActivated() || isPromptMode()) return false;
+			if (!ARROW_KEYS.has(event.key)) return false;
+			let currentElement = effectiveElement();
+			const isInitialSelection = !currentElement;
+			if (!currentElement) currentElement = getElementAtPosition(window.innerWidth / 2, window.innerHeight / 2);
+			if (!currentElement) return false;
+			if (!(event.key === "ArrowUp" || event.key === "ArrowDown")) {
+				clearArrowNavigation();
+				const nextElement = arrowNavigator.findNext(event.key, currentElement);
+				if (!nextElement && !isInitialSelection) return false;
+				event.preventDefault();
+				event.stopPropagation();
+				selectAndFocusElement(nextElement ?? currentElement);
+				return true;
+			}
+			if (arrowNavigationElements().length === 0) openArrowNavigationMenu(currentElement);
+			const elementToSelect = arrowNavigator.findNext(event.key, currentElement) ?? currentElement;
+			event.preventDefault();
+			event.stopPropagation();
+			selectAndFocusElement(elementToSelect);
+			const newIndex = arrowNavigationElements().indexOf(elementToSelect);
+			if (newIndex !== -1) setArrowNavigationActiveIndex(newIndex);
+			else openArrowNavigationMenu(elementToSelect);
+			return true;
+		};
+		const handleEnterKeyActivation = (event) => {
+			if (!isEnterCode(event.code)) return false;
+			if (isKeyboardEventTriggeredByInput(event)) return false;
+			const copiedElement = store.lastCopiedElement;
+			if (!isHoldingKeys() && !isPromptMode() && !isActivated() && copiedElement && isElementConnected(copiedElement) && !store.labelInstances.some((instance) => instance.status === "copied" || instance.status === "fading")) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				const center = getElementCenter(copiedElement);
+				actions.setPointer(center);
+				preparePromptMode(copiedElement, center.x, center.y);
+				actions.setFrozenElement(copiedElement);
+				actions.clearLastCopied();
+				activatePromptMode();
+				if (!isActivated()) activateRenderer();
+				return true;
+			}
+			if (isHoldingKeys() && !isPromptMode()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				const element = store.frozenElement || targetElement();
+				if (element) preparePromptMode(element, store.pointer.x, store.pointer.y);
+				actions.setPointer({
+					x: store.pointer.x,
+					y: store.pointer.y
+				});
+				if (element) actions.setFrozenElement(element);
+				activatePromptMode();
+				if (keydownSpamTimerId !== null) {
+					window.clearTimeout(keydownSpamTimerId);
+					keydownSpamTimerId = null;
+				}
+				if (!isActivated()) activateRenderer();
+				return true;
+			}
+			return false;
+		};
+		const handleOpenFileShortcut = (event) => {
+			if (event.key?.toLowerCase() !== "o" || isPromptMode()) return false;
+			if (!isActivated() || !(event.metaKey || event.ctrlKey)) return false;
+			const filePath = store.selectionFilePath;
+			const lineNumber = store.selectionLineNumber;
+			if (!filePath) return false;
+			event.preventDefault();
+			event.stopPropagation();
+			if (!pluginRegistry.hooks.onOpenFile(filePath, lineNumber ?? void 0)) openFile(filePath, lineNumber ?? void 0, pluginRegistry.hooks.transformOpenFileUrl);
+			return true;
+		};
+		const clearActionCycleIdleTimeout = () => {
+			if (actionCycleIdleTimeoutId !== null) {
+				window.clearTimeout(actionCycleIdleTimeoutId);
+				actionCycleIdleTimeoutId = null;
+			}
+		};
+		const resetActionCycle = () => {
+			clearActionCycleIdleTimeout();
+			setActionCycleItems([]);
+			setActionCycleActiveIndex(null);
+		};
+		const canCycleActions = createMemo(() => {
+			const element = selectionElement();
+			return Boolean(element) && isRendererActive() && !isPromptMode() && !isDragging() && store.contextMenuPosition === null;
+		});
+		const activationBaseKey = createMemo(() => {
+			const { key } = getModifiersFromActivationKey(pluginRegistry.store.options.activationKey);
+			return (key ?? "c").toUpperCase();
+		});
+		const actionCycleState = createMemo(() => ({
+			items: actionCycleItems(),
+			activeIndex: actionCycleActiveIndex(),
+			isVisible: actionCycleActiveIndex() !== null && actionCycleItems().length > 0 && !isCommentMode()
+		}));
+		const arrowNavigationItems = createMemo(() => arrowNavigationElements().map((element) => ({
+			tagName: getTagName(element) || "element",
+			componentName: getComponentDisplayName(element) ?? void 0
+		})));
+		const arrowNavigationState = createMemo(() => ({
+			items: arrowNavigationItems(),
+			activeIndex: arrowNavigationActiveIndex(),
+			isVisible: arrowNavigationElements().length > 0
+		}));
+		const inspectAncestorElements = createMemo(() => {
+			if (!isInspectMode()) return [];
+			const element = effectiveElement();
+			if (!element) return [];
+			return [...getAncestorElements(element).reverse(), element];
+		});
+		const inspectNavigationItems = createMemo(() => inspectAncestorElements().map((element) => ({
+			tagName: getTagName(element) || "element",
+			componentName: getComponentDisplayName(element) ?? void 0
+		})));
+		const [inspectActiveIndex, setInspectActiveIndex] = createSignal(-1);
+		createEffect(on(inspectAncestorElements, (elements) => {
+			setInspectActiveIndex(elements.length - 1);
+		}));
+		const inspectNavigationState = createMemo(() => {
+			const elements = inspectAncestorElements();
+			return {
+				items: inspectNavigationItems(),
+				activeIndex: inspectActiveIndex(),
+				isVisible: isInspectMode() && elements.length > 0
+			};
+		});
+		const handleInspectSelect = (index) => {
+			setInspectActiveIndex(index);
+		};
+		createEffect(on(selectionElement, () => {
+			resetActionCycle();
+		}));
+		createEffect(on(canCycleActions, (isEnabled) => {
+			if (!isEnabled) resetActionCycle();
+		}));
+		const getActionById = (actionId) => pluginRegistry.store.actions.find((action) => action.id === actionId);
+		const getActionCycleContext = () => {
+			const element = selectionElement();
+			if (!element) return void 0;
+			const fallbackBounds = selectionBounds();
+			return buildActionContext({
+				element,
+				filePath: store.selectionFilePath ?? void 0,
+				lineNumber: store.selectionLineNumber ?? void 0,
+				tagName: getTagName(element) || void 0,
+				componentName: resolvedComponentName(),
+				position: store.pointer,
+				performWithFeedbackOptions: {
+					fallbackBounds,
+					fallbackSelectionBounds: fallbackBounds ? [fallbackBounds] : []
+				},
+				shouldDeferHideContextMenu: false,
+				onBeforePrompt: resetActionCycle
+			});
+		};
+		const availableActionCycleItems = createMemo(() => {
+			if (!selectionElement()) return [];
+			const cycleItems = [];
+			for (const action of pluginRegistry.store.actions) {
+				if (typeof action.enabled === "boolean" && !action.enabled) continue;
+				if (action.shortcut && action.shortcut.toUpperCase() !== activationBaseKey()) continue;
+				cycleItems.push({
+					id: action.id,
+					label: action.label,
+					shortcut: action.shortcut
+				});
+			}
+			return cycleItems;
+		});
+		const scheduleActionCycleActivation = () => {
+			clearActionCycleIdleTimeout();
+			actionCycleIdleTimeoutId = window.setTimeout(() => {
+				actionCycleIdleTimeoutId = null;
+				const activeIndex = actionCycleActiveIndex();
+				const items = actionCycleItems();
+				if (activeIndex === null || items.length === 0) return;
+				const selectedItem = items[activeIndex];
+				if (!selectedItem) return;
+				const action = getActionById(selectedItem.id);
+				if (!action) {
+					resetActionCycle();
+					return;
+				}
+				const context = getActionCycleContext();
+				if (!context || !resolveActionEnabled(action, context)) {
+					resetActionCycle();
+					return;
+				}
+				resetActionCycle();
+				if (action.onAction(context) instanceof Promise) {}
+			}, 600);
+		};
+		const advanceActionCycle = () => {
+			if (!canCycleActions()) return false;
+			const cycleItems = availableActionCycleItems();
+			if (cycleItems.length === 0) return false;
+			setActionCycleItems(cycleItems);
+			const currentIndex = actionCycleActiveIndex();
+			setActionCycleActiveIndex(currentIndex !== null && currentIndex < cycleItems.length ? (currentIndex + 1) % cycleItems.length : 0);
+			scheduleActionCycleActivation();
+			return true;
+		};
+		const handleActionCycleKey = (event) => {
+			if (!keyMatchesCode(activationBaseKey(), event.code)) return false;
+			if (event.altKey || event.repeat) return false;
+			if (isKeyboardEventTriggeredByInput(event)) return false;
+			if (!advanceActionCycle()) return false;
+			event.preventDefault();
+			event.stopPropagation();
+			if (event.metaKey || event.ctrlKey) event.stopImmediatePropagation();
+			return true;
+		};
+		const handleActivationKeys = (event) => {
+			if (!pluginRegistry.store.options.allowActivationInsideInput && isKeyboardEventTriggeredByInput(event)) return;
+			if (!isTargetKeyCombination(event, pluginRegistry.store.options)) {
+				if ((event.metaKey || event.ctrlKey) && !MODIFIER_KEYS.includes(event.key) && !isEnterCode(event.code)) {
+					if (isActivated() && !store.wasActivatedByToggle) deactivateRenderer();
+					else if (isHoldingKeys()) {
+						clearHoldTimer();
+						resetCopyConfirmation();
+						actions.releaseHold();
+					}
+				}
+				if (!isEnterCode(event.code) || !isHoldingKeys()) return;
+			}
+			if ((isActivated() || isHoldingKeys()) && !isPromptMode()) {
+				event.preventDefault();
+				if (isEnterCode(event.code)) event.stopImmediatePropagation();
+			}
+			if (isActivated()) {
+				if (store.wasActivatedByToggle && pluginRegistry.store.options.activationMode !== "hold") return;
+				if (event.repeat) return;
+				if (keydownSpamTimerId !== null) window.clearTimeout(keydownSpamTimerId);
+				keydownSpamTimerId = window.setTimeout(() => {
+					deactivateRenderer();
+				}, 200);
+				return;
+			}
+			if (isHoldingKeys() && event.repeat) {
+				if (activationHoldState.copyWaiting) {
+					const shouldActivate = activationHoldState.holdTimerFired;
+					resetCopyConfirmation();
+					if (shouldActivate) actions.activate();
+				}
+				return;
+			}
+			if (isCopying() || didJustCopy()) return;
+			if (!isHoldingKeys()) {
+				let activationDuration = pluginRegistry.store.options.keyHoldDuration ?? 100;
+				if (isKeyboardEventTriggeredByInput(event)) if (hasTextSelectionInInput(event)) activationDuration += 600;
+				else activationDuration += 400;
+				else if (hasTextSelectionOnPage()) activationDuration += 600;
+				resetCopyConfirmation();
+				actions.startHold(activationDuration);
+			}
+		};
+		eventListenerManager.addWindowListener("keydown", (event) => {
+			blockEnterIfNeeded(event);
+			if (event.key === "Shift" && !event.repeat && isActivated()) {
+				setIsInspectMode(true);
+				if (isFrozenPhase()) {
+					actions.unfreeze();
+					clearArrowNavigation();
+				}
+			}
+			if (!isEnabled()) {
+				if (isTargetKeyCombination(event, pluginRegistry.store.options) && !event.repeat) setToolbarShakeCount((count) => count + 1);
+				return;
+			}
+			const isEnterToActivateInput = isEnterCode(event.code) && isHoldingKeys() && !isPromptMode();
+			const isFromReactGrabInput = isEventFromOverlay(event, "data-react-grab-input");
+			if (isPromptMode() && isTargetKeyCombination(event, pluginRegistry.store.options) && !event.repeat && !isFromReactGrabInput) {
+				event.preventDefault();
+				event.stopPropagation();
+				handleInputCancel();
+				return;
+			}
+			if (event.key === "Escape" && clearPromptPosition() !== null) return;
+			if (event.key === "Escape" && commentsDropdownPosition() !== null) {
+				dismissCommentsDropdown();
+				return;
+			}
+			if (event.key === "Escape" && toolbarMenuPosition() !== null) {
+				dismissToolbarMenu();
+				return;
+			}
+			const isFromOverlay = isEventFromOverlay(event, "data-react-grab-ignore-events") && !isEnterToActivateInput;
+			if (isPromptMode() || isFromOverlay) {
+				if (event.key === "Escape") {
+					if (isPromptMode()) handleInputCancel();
+					else if (store.wasActivatedByToggle) deactivateRenderer();
+				}
+				if (isFromOverlay && ARROW_KEYS.has(event.key)) {
+					if (handleArrowNavigation(event)) return;
+				}
+				return;
+			}
+			if (event.key === "Escape") {
+				if (isHoldingKeys() || store.wasActivatedByToggle) {
+					deactivateRenderer();
+					return;
+				}
+			}
+			const didWindowJustRegainFocus = Date.now() - lastWindowFocusTimestamp < 200;
+			if (!didWindowJustRegainFocus && handleActionCycleKey(event)) return;
+			if (handleArrowNavigation(event)) return;
+			if (handleEnterKeyActivation(event)) return;
+			if (handleOpenFileShortcut(event)) return;
+			if (!didWindowJustRegainFocus) handleActivationKeys(event);
+		}, { capture: true });
+		eventListenerManager.addWindowListener("keyup", (event) => {
+			if (blockEnterIfNeeded(event)) return;
+			if (event.key === "Shift") setIsInspectMode(false);
+			const requiredModifiers = getRequiredModifiers(pluginRegistry.store.options);
+			const isReleasingModifier = requiredModifiers.metaKey || requiredModifiers.ctrlKey ? isMac() ? !event.metaKey : !event.ctrlKey : requiredModifiers.shiftKey && !event.shiftKey || requiredModifiers.altKey && !event.altKey;
+			const isReleasingActivationKey = pluginRegistry.store.options.activationKey ? typeof pluginRegistry.store.options.activationKey === "function" ? pluginRegistry.store.options.activationKey(event) : parseActivationKey(pluginRegistry.store.options.activationKey)(event) : isCLikeKey(event.key, event.code);
+			if (didJustCopy() || isCopyFeedbackCooldownActive) {
+				if (isReleasingActivationKey || isReleasingModifier) {
+					clearCopyFeedbackCooldown();
+					deactivateRenderer();
+				}
+				return;
+			}
+			if (!isHoldingKeys() && !isActivated()) return;
+			if (isPromptMode()) return;
+			const hasCustomShortcut = Boolean(pluginRegistry.store.options.activationKey);
+			const isHoldMode = pluginRegistry.store.options.activationMode === "hold";
+			if (isActivated()) {
+				const hasContextMenu = store.contextMenuPosition !== null;
+				if (isReleasingModifier) {
+					if (store.wasActivatedByToggle && pluginRegistry.store.options.activationMode !== "hold") return;
+					if (hasContextMenu) return;
+					deactivateRenderer();
+				} else if (isHoldMode && isReleasingActivationKey) {
+					if (keydownSpamTimerId !== null) {
+						window.clearTimeout(keydownSpamTimerId);
+						keydownSpamTimerId = null;
+					}
+					if (hasContextMenu) return;
+					deactivateRenderer();
+				} else if (!hasCustomShortcut && isReleasingActivationKey && keydownSpamTimerId !== null) {
+					window.clearTimeout(keydownSpamTimerId);
+					keydownSpamTimerId = null;
+				}
+				return;
+			}
+			if (isReleasingActivationKey || isReleasingModifier) {
+				if (store.wasActivatedByToggle && pluginRegistry.store.options.activationMode !== "hold") return;
+				if (isHoldingKeys() || activationHoldState.holdTimerFired && isReleasingModifier) {
+					clearHoldTimer();
+					const heldLongEnoughForActivation = (activationHoldState.startTimestamp ? Date.now() - activationHoldState.startTimestamp : 0) >= 200;
+					const shouldActivateAfterCopy = activationHoldState.holdTimerFired && heldLongEnoughForActivation && (pluginRegistry.store.options.allowActivationInsideInput || !isKeyboardEventTriggeredByInput(event));
+					resetCopyConfirmation();
+					if (shouldActivateAfterCopy) actions.activate();
+					else actions.releaseHold();
+				} else deactivateRenderer();
+			}
+		}, { capture: true });
+		eventListenerManager.addDocumentListener("copy", () => {
+			if (isHoldingKeys()) activationHoldState.copyWaiting = true;
+		});
+		eventListenerManager.addWindowListener("keypress", blockEnterIfNeeded, { capture: true });
+		eventListenerManager.addWindowListener("pointermove", (event) => {
+			if (!event.isPrimary) return;
+			const isTouchPointer = event.pointerType === "touch";
+			actions.setTouchMode(isTouchPointer);
+			if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+			if (store.contextMenuPosition !== null) return;
+			if (isTouchPointer && !isHoldingKeys() && !isActivated()) return;
+			if ((isTouchPointer ? isHoldingKeys() : isActivated()) && !isPromptMode() && isFrozenPhase()) {
+				actions.unfreeze();
+				clearArrowNavigation();
+			}
+			handlePointerMove(event.clientX, event.clientY);
+		}, { passive: true });
+		eventListenerManager.addWindowListener("pointerdown", (event) => {
+			if (event.button !== 0) return;
+			if (!event.isPrimary) return;
+			actions.setTouchMode(event.pointerType === "touch");
+			if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+			if (store.contextMenuPosition !== null) return;
+			if (toolbarMenuPosition() !== null) return;
+			if (isPromptMode()) {
+				const bounds = selectionBounds();
+				if (bounds && event.clientX >= bounds.x && event.clientX <= bounds.x + bounds.width && event.clientY >= bounds.y && event.clientY <= bounds.y + bounds.height) handleInputSubmit();
+				else handleInputCancel();
+				return;
+			}
+			if (handlePointerDown(event.clientX, event.clientY)) {
+				document.documentElement.setPointerCapture(event.pointerId);
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, { capture: true });
+		eventListenerManager.addWindowListener("pointerup", (event) => {
+			if (event.button !== 0) return;
+			if (!event.isPrimary) return;
+			if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+			if (store.contextMenuPosition !== null) return;
+			const isActive = isRendererActive() || isCopying() || isDragging();
+			const hasModifierKeyHeld = event.metaKey || event.ctrlKey;
+			handlePointerUp(event.clientX, event.clientY, hasModifierKeyHeld);
+			if (isActive) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, { capture: true });
+		eventListenerManager.addWindowListener("contextmenu", (event) => {
+			if (!isRendererActive() || isCopying() || isPromptMode()) return;
+			const isFromOverlay = isEventFromOverlay(event, "data-react-grab-ignore-events");
+			if (isFromOverlay && arrowNavigationElements().length > 0) clearArrowNavigation();
+			else if (isFromOverlay) return;
+			if (store.contextMenuPosition !== null) {
+				event.preventDefault();
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			const element = getElementAtPosition(event.clientX, event.clientY);
+			if (!element) return;
+			const existingFrozenElements = store.frozenElements;
+			if (existingFrozenElements.length > 1 && existingFrozenElements.includes(element)) freezeAllAnimations(existingFrozenElements);
+			else {
+				freezeAllAnimations([element]);
+				actions.setFrozenElement(element);
+			}
+			const position = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			actions.setPointer(position);
+			actions.freeze();
+			openContextMenu(element, position);
+		}, { capture: true });
+		eventListenerManager.addWindowListener("pointercancel", (event) => {
+			if (!event.isPrimary) return;
+			cancelActiveDrag();
+		});
+		eventListenerManager.addWindowListener("click", (event) => {
+			if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+			if (store.contextMenuPosition !== null) return;
+			if (isRendererActive() || isCopying() || didJustDrag()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				if (store.wasActivatedByToggle && !isCopying() && !isPromptMode()) if (!isHoldingKeys()) deactivateRenderer();
+				else actions.setWasActivatedByToggle(false);
+			}
+		}, { capture: true });
+		eventListenerManager.addDocumentListener("visibilitychange", () => {
+			if (document.hidden) {
+				actions.clearGrabbedBoxes();
+				const storeActivationTimestamp = store.activationTimestamp;
+				if (isActivated() && !isPromptMode() && storeActivationTimestamp !== null && Date.now() - storeActivationTimestamp > 500) deactivateRenderer();
+			}
+		});
+		eventListenerManager.addWindowListener("blur", () => {
+			cancelActiveDrag();
+			if (isHoldingKeys()) {
+				clearHoldTimer();
+				actions.releaseHold();
+				resetCopyConfirmation();
+			}
+		});
+		eventListenerManager.addWindowListener("focus", () => {
+			lastWindowFocusTimestamp = Date.now();
+		});
+		eventListenerManager.addWindowListener("focusin", (event) => {
+			if (isEventFromOverlay(event, "data-react-grab")) event.stopPropagation();
+		}, { capture: true });
+		const redetectElementUnderPointer = () => {
+			if (store.isTouchMode && !isHoldingKeys() && !isActivated()) return;
+			if (isEnabled() && !isPromptMode() && !isFrozenPhase() && !isDragging() && store.contextMenuPosition === null && store.frozenElements.length === 0) {
+				const candidate = getElementAtPosition(store.pointer.x, store.pointer.y);
+				actions.setDetectedElement(candidate);
+			}
+		};
+		let boundsRecalcIntervalId = null;
+		let viewportChangeFrameId = null;
+		const handleViewportChange = () => {
+			invalidateInteractionCaches();
+			redetectElementUnderPointer();
+			actions.incrementViewportVersion();
+			actions.updateContextMenuPosition();
+		};
+		eventListenerManager.addWindowListener("scroll", handleViewportChange, { capture: true });
+		let previousViewportWidth = window.innerWidth;
+		let previousViewportHeight = window.innerHeight;
+		eventListenerManager.addWindowListener("resize", () => {
+			const currentViewportWidth = window.innerWidth;
+			const currentViewportHeight = window.innerHeight;
+			if (previousViewportWidth > 0 && previousViewportHeight > 0) {
+				const scaleX = currentViewportWidth / previousViewportWidth;
+				const scaleY = currentViewportHeight / previousViewportHeight;
+				const isUniformScale = Math.abs(scaleX - scaleY) < ZOOM_DETECTION_THRESHOLD;
+				const hasScaleChanged = Math.abs(scaleX - 1) > ZOOM_DETECTION_THRESHOLD;
+				if (isUniformScale && hasScaleChanged) actions.setPointer({
+					x: store.pointer.x * scaleX,
+					y: store.pointer.y * scaleY
+				});
+			}
+			previousViewportWidth = currentViewportWidth;
+			previousViewportHeight = currentViewportHeight;
+			handleViewportChange();
+		});
+		const visualViewport = window.visualViewport;
+		if (visualViewport) {
+			const { signal } = eventListenerManager;
+			visualViewport.addEventListener("resize", handleViewportChange, { signal });
+			visualViewport.addEventListener("scroll", handleViewportChange, { signal });
+		}
+		const scheduleBoundsSync = () => {
+			if (viewportChangeFrameId !== null) return;
+			viewportChangeFrameId = nativeRequestAnimationFrame(() => {
+				viewportChangeFrameId = null;
+				actions.incrementViewportVersion();
+			});
+		};
+		createEffect(() => {
+			if (pluginRegistry.store.theme.enabled && (isActivated() || isCopying() || store.labelInstances.length > 0 || store.grabbedBoxes.length > 0)) {
+				if (boundsRecalcIntervalId !== null) return;
+				boundsRecalcIntervalId = window.setInterval(() => {
+					scheduleBoundsSync();
+				}, 100);
+				return;
+			}
+			if (boundsRecalcIntervalId !== null) {
+				window.clearInterval(boundsRecalcIntervalId);
+				boundsRecalcIntervalId = null;
+			}
+			if (viewportChangeFrameId !== null) {
+				nativeCancelAnimationFrame(viewportChangeFrameId);
+				viewportChangeFrameId = null;
+			}
+		});
+		onCleanup(() => {
+			if (boundsRecalcIntervalId !== null) window.clearInterval(boundsRecalcIntervalId);
+			if (viewportChangeFrameId !== null) nativeCancelAnimationFrame(viewportChangeFrameId);
+		});
+		eventListenerManager.addDocumentListener("copy", (event) => {
+			if (isPromptMode() || isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+			if (isRendererActive() || isCopying()) event.preventDefault();
+		}, { capture: true });
+		onCleanup(() => {
+			eventListenerManager.abort();
+			if (dragPreviewDebounceTimerId !== null) window.clearTimeout(dragPreviewDebounceTimerId);
+			if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
+			clearCopyFeedbackCooldown();
+			if (actionCycleIdleTimeoutId) window.clearTimeout(actionCycleIdleTimeoutId);
+			if (dropdownTrackingFrameId !== null) nativeCancelAnimationFrame(dropdownTrackingFrameId);
+			grabbedBoxTimeouts.forEach((timeoutId) => window.clearTimeout(timeoutId));
+			grabbedBoxTimeouts.clear();
+			cancelAllLabelFades();
+			autoScroller.stop();
+			document.body.style.userSelect = "";
+			document.body.style.touchAction = "";
+			unlockViewportZoom?.();
+			unlockViewportZoom = null;
+			setCursorOverride(null);
+			keyboardClaimer.restore();
+		});
+		const rendererRoot = mountRoot(typeof "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: \"Geist\", ui-sans-serif, system-ui, sans-serif;\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    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --radius-sm: 0.25rem;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\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    --transition-fast: 100ms;\n    --transition-normal: 150ms;\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  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .touch-hitbox {\n    position: relative;\n    &::before {\n      content: \"\";\n      position: absolute;\n      display: block;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 100%;\n      height: 100%;\n      min-height: 44px;\n      min-width: 44px;\n    }\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .-top-1 {\n    top: calc(var(--spacing) * -1);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .-right-1 {\n    right: calc(var(--spacing) * -1);\n  }\n  .right-full {\n    right: 100%;\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-0\\.5 {\n    left: calc(var(--spacing) * 0.5);\n  }\n  .left-1\\.5 {\n    left: calc(var(--spacing) * 1.5);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2\\.5 {\n    left: calc(var(--spacing) * 2.5);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-2 {\n    margin-inline: calc(var(--spacing) * -2);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(var(--spacing) * 0.5);\n  }\n  .-my-1\\.5 {\n    margin-block: calc(var(--spacing) * -1.5);\n  }\n  .my-0\\.5 {\n    margin-block: calc(var(--spacing) * 0.5);\n  }\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * 0.5);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(var(--spacing) * 2.5);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(var(--spacing) * 0.5);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(var(--spacing) * 1.5);\n  }\n  .mr-2\\.5 {\n    margin-right: calc(var(--spacing) * 2.5);\n  }\n  .mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * 0.5);\n  }\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n  .mb-2\\.5 {\n    margin-bottom: calc(var(--spacing) * 2.5);\n  }\n  .-ml-\\[2px\\] {\n    margin-left: calc(2px * -1);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(var(--spacing) * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-2\\.5 {\n    margin-left: calc(var(--spacing) * 2.5);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .line-clamp-5 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 5;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-\\[18px\\] {\n    width: 18px;\n    height: 18px;\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-\\[17px\\] {\n    height: 17px;\n  }\n  .h-fit {\n    height: fit-content;\n  }\n  .max-h-\\[240px\\] {\n    max-height: 240px;\n  }\n  .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n  .min-h-4 {\n    min-height: calc(var(--spacing) * 4);\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-\\[calc\\(100\\%\\+16px\\)\\] {\n    width: calc(100% + 16px);\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[280px\\] {\n    max-width: 280px;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-2\\.5 {\n    min-width: calc(var(--spacing) * 2.5);\n  }\n  .min-w-\\[100px\\] {\n    min-width: 100px;\n  }\n  .min-w-\\[150px\\] {\n    min-width: 150px;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\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\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .-rotate-90 {\n    rotate: calc(90deg * -1);\n  }\n  .rotate-0 {\n    rotate: 0deg;\n  }\n  .rotate-90 {\n    rotate: 90deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .interactive-scale {\n    transition-property: transform;\n    transition-duration: var(--transition-normal);\n    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n        transform: scale(1.05);\n      }\n    }\n    &:active {\n      transform: scale(0.97);\n    }\n  }\n  .press-scale {\n    transition-property: transform;\n    transition-duration: var(--transition-fast);\n    transition-timing-function: ease-out;\n    &:active {\n      transform: scale(0.97);\n    }\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-\\[hint-flip-in_var\\(--transition-normal\\)_ease-out\\] {\n    animation: hint-flip-in var(--transition-normal) ease-out;\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  .resize-none {\n    resize: none;\n  }\n  .grid-cols-\\[0fr\\] {\n    grid-template-columns: 0fr;\n  }\n  .grid-cols-\\[1fr\\] {\n    grid-template-columns: 1fr;\n  }\n  .grid-rows-\\[0fr\\] {\n    grid-template-rows: 0fr;\n  }\n  .grid-rows-\\[1fr\\] {\n    grid-template-rows: 1fr;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-\\[5px\\] {\n    gap: 5px;\n  }\n  .self-stretch {\n    align-self: stretch;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-visible {\n    overflow: visible;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[10px\\] {\n    border-radius: 10px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .rounded-t-\\[10px\\] {\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n  }\n  .rounded-t-none {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  .rounded-l-\\[10px\\] {\n    border-top-left-radius: 10px;\n    border-bottom-left-radius: 10px;\n  }\n  .rounded-l-none {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .rounded-r-\\[10px\\] {\n    border-top-right-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .rounded-b-\\[6px\\] {\n    border-bottom-right-radius: 6px;\n    border-bottom-left-radius: 6px;\n  }\n  .rounded-b-\\[10px\\] {\n    border-bottom-right-radius: 10px;\n    border-bottom-left-radius: 10px;\n  }\n  .rounded-b-none {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .\\[border-width\\:0\\.5px\\] {\n    border-width: 0.5px;\n  }\n  .\\[border-top-width\\:0\\.5px\\] {\n    border-top-width: 0.5px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#B3B3B3\\] {\n    border-color: #B3B3B3;\n  }\n  .border-t-\\[\\#D9D9D9\\] {\n    border-top-color: #D9D9D9;\n  }\n  .bg-\\[\\#FEF2F2\\] {\n    background-color: #FEF2F2;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/5 {\n    background-color: color-mix(in srgb, #000 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n    }\n  }\n  .bg-black\\/25 {\n    background-color: color-mix(in srgb, #000 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n    }\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .px-0\\.5 {\n    padding-inline: calc(var(--spacing) * 0.5);\n  }\n  .px-0\\.25 {\n    padding-inline: calc(var(--spacing) * 0.25);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-\\[3px\\] {\n    padding-inline: 3px;\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-0\\.25 {\n    padding-block: calc(var(--spacing) * 0.25);\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  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-px {\n    padding-block: 1px;\n  }\n  .pt-1\\.5 {\n    padding-top: calc(var(--spacing) * 1.5);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\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  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .leading-3 {\n    --tw-leading: calc(var(--spacing) * 3);\n    line-height: calc(var(--spacing) * 3);\n  }\n  .leading-3\\.5 {\n    --tw-leading: calc(var(--spacing) * 3.5);\n    line-height: calc(var(--spacing) * 3.5);\n  }\n  .leading-4 {\n    --tw-leading: calc(var(--spacing) * 4);\n    line-height: calc(var(--spacing) * 4);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .wrap-break-word {\n    overflow-wrap: break-word;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-\\[\\#71717a\\] {\n    color: #71717a;\n  }\n  .text-\\[\\#B3B3B3\\] {\n    color: #B3B3B3;\n  }\n  .text-\\[\\#B91C1C\\] {\n    color: #B91C1C;\n  }\n  .text-\\[\\#B91C1C\\]\\/50 {\n    color: color-mix(in oklab, #B91C1C 50%, transparent);\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-black\\/25 {\n    color: color-mix(in srgb, #000 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 25%, transparent);\n    }\n  }\n  .text-black\\/30 {\n    color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n  }\n  .text-black\\/40 {\n    color: color-mix(in srgb, #000 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 40%, transparent);\n    }\n  }\n  .text-black\\/50 {\n    color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .text-black\\/60 {\n    color: color-mix(in srgb, #000 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 60%, transparent);\n    }\n  }\n  .text-black\\/70 {\n    color: color-mix(in srgb, #000 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 70%, transparent);\n    }\n  }\n  .text-black\\/85 {\n    color: color-mix(in srgb, #000 85%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 85%, transparent);\n    }\n  }\n  .text-white {\n    color: var(--color-white);\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  .antialiased {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-40 {\n    opacity: 40%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\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  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter-\\[drop-shadow\\(0px_1px_2px_\\#51515140\\)\\] {\n    filter: drop-shadow(0px 1px 2px #51515140);\n  }\n  .backdrop-filter {\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\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-\\[grid-template-columns\\,opacity\\] {\n    transition-property: grid-template-columns,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  .transition-\\[grid-template-columns\\] {\n    transition-property: grid-template-columns;\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-\\[grid-template-rows\\,opacity\\] {\n    transition-property: grid-template-rows,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  .transition-\\[grid-template-rows\\] {\n    transition-property: grid-template-rows;\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\\,transform\\] {\n    transition-property: opacity,transform;\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-\\[top\\,left\\,width\\,height\\,opacity\\] {\n    transition-property: top,left,width,height,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  .transition-\\[transform\\,opacity\\] {\n    transition-property: transform,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  .transition-all {\n    transition-property: all;\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-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(--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  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\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-75 {\n    --tw-duration: 75ms;\n    transition-duration: 75ms;\n  }\n  .duration-100 {\n    --tw-duration: 100ms;\n    transition-duration: 100ms;\n  }\n  .duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .will-change-\\[opacity\\,transform\\] {\n    will-change: opacity,transform;\n  }\n  .contain-layout {\n    --tw-contain-layout: layout;\n    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);\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  .\\[animation-fill-mode\\:backwards\\] {\n    animation-fill-mode: backwards;\n  }\n  .\\[corner-shape\\:superellipse\\(1\\.25\\)\\] {\n    corner-shape: superellipse(1.25);\n  }\n  .\\[font-synthesis\\:none\\] {\n    font-synthesis: none;\n  }\n  .\\[scrollbar-color\\:transparent_transparent\\] {\n    scrollbar-color: transparent transparent;\n  }\n  .\\[scrollbar-width\\:thin\\] {\n    scrollbar-width: thin;\n  }\n  .before\\:\\!min-h-full {\n    &::before {\n      content: var(--tw-content);\n      min-height: 100% !important;\n    }\n  }\n  .before\\:\\!min-w-full {\n    &::before {\n      content: var(--tw-content);\n      min-width: 100% !important;\n    }\n  }\n  .hover\\:bg-\\[\\#F5F5F5\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #F5F5F5;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#FEE2E2\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #FEE2E2;\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-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-black);\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:\\[scrollbar-color\\:rgba\\(0\\,0\\,0\\,0\\.15\\)_transparent\\] {\n    &:hover {\n      @media (hover: hover) {\n        scrollbar-color: rgba(0,0,0,0.15) transparent;\n      }\n    }\n  }\n  .disabled\\:cursor-default {\n    &:disabled {\n      cursor: default;\n    }\n  }\n  .disabled\\:opacity-40 {\n    &:disabled {\n      opacity: 40%;\n    }\n  }\n}\n:host {\n  all: initial;\n  direction: ltr;\n}\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  15% {\n    transform: translateX(-3px);\n  }\n  30% {\n    transform: translateX(3px);\n  }\n  45% {\n    transform: translateX(-3px);\n  }\n  60% {\n    transform: translateX(3px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  90% {\n    transform: translateX(2px);\n  }\n}\n@keyframes success-pop {\n  0% {\n    transform: scale(0.9);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.1);\n    opacity: 1;\n  }\n  80% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes hint-flip-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes icon-loader-spin {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 0.2;\n  }\n}\n.icon-loader-bar {\n  animation: icon-loader-spin 0.5s linear infinite;\n}\n@keyframes shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n.shimmer-text {\n  background: linear-gradient( 90deg, #71717a 0%, #a1a1aa 25%, #71717a 50%, #a1a1aa 75%, #71717a 100% );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  animation: shimmer 2.5s linear infinite;\n}\n@keyframes clock-flash {\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: scale(1.2);\n  }\n  50% {\n    transform: scale(0.92);\n  }\n  75% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.animate-clock-flash {\n  animation: clock-flash 400ms ease-out;\n  will-change: transform;\n}\n.animate-shake {\n  animation: shake 0.3s ease-out;\n  will-change: transform;\n}\n.animate-success-pop {\n  animation: success-pop 250ms ease-out;\n  will-change: transform, opacity;\n}\n.animate-tooltip-fade-in {\n  animation: tooltip-fade-in var(--transition-fast) ease-out;\n  will-change: transform, opacity;\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-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\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-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-layout {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-paint {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contain-style {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\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-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\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-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-contain-size: initial;\n      --tw-contain-layout: initial;\n      --tw-contain-paint: initial;\n      --tw-contain-style: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n" === "string" ? styles_default : "");
+		const isThemeEnabled = createMemo(() => pluginRegistry.store.theme.enabled);
+		const isSelectionBoxThemeEnabled = createMemo(() => pluginRegistry.store.theme.selectionBox.enabled);
+		const isElementLabelThemeEnabled = createMemo(() => pluginRegistry.store.theme.elementLabel.enabled);
+		const isDragBoxThemeEnabled = createMemo(() => pluginRegistry.store.theme.dragBox.enabled);
+		const isSelectionSuppressed = createMemo(() => didJustCopy() || isToolbarSelectHovered() && !isFrozenPhase());
+		const hasDragPreviewBounds = createMemo(() => dragPreviewBounds().length > 0);
+		const selectionVisible = createMemo(() => {
+			if (!isThemeEnabled()) return false;
+			if (!isSelectionBoxThemeEnabled()) return false;
+			if (isSelectionSuppressed()) return false;
+			if (hasDragPreviewBounds()) return true;
+			return isSelectionElementVisible();
+		});
+		const selectionTagName = createMemo(() => {
+			const element = selectionElement();
+			if (!element) return void 0;
+			return getTagName(element) || void 0;
+		});
+		createEffect(on(() => debouncedElementForComponentName(), (element) => {
+			const currentVersion = ++componentNameRequestVersion;
+			if (!element) {
+				setResolvedComponentName(void 0);
+				return;
+			}
+			getNearestComponentName(element).then((name) => {
+				if (componentNameRequestVersion !== currentVersion) return;
+				setResolvedComponentName(name ?? void 0);
+			}).catch(() => {
+				if (componentNameRequestVersion !== currentVersion) return;
+				setResolvedComponentName(void 0);
+			});
+		}));
+		const selectionLabelVisible = createMemo(() => {
+			if (store.contextMenuPosition !== null) return false;
+			if (!isElementLabelThemeEnabled()) return false;
+			if (isSelectionSuppressed()) return false;
+			return isSelectionElementVisible();
+		});
+		const labelInstanceCache = /* @__PURE__ */ new Map();
+		const recomputeLabelInstance = (instance) => {
+			const hasMultipleElements = instance.elements && instance.elements.length > 1;
+			const instanceElement = instance.element;
+			const newBounds = !hasMultipleElements && instanceElement && document.body.contains(instanceElement) ? createElementBounds(instanceElement) : instance.bounds;
+			const previousInstance = labelInstanceCache.get(instance.id);
+			const boundsUnchanged = previousInstance && previousInstance.bounds.x === newBounds.x && previousInstance.bounds.y === newBounds.y && previousInstance.bounds.width === newBounds.width && previousInstance.bounds.height === newBounds.height;
+			if (previousInstance && previousInstance.status === instance.status && previousInstance.errorMessage === instance.errorMessage && boundsUnchanged) return previousInstance;
+			const newBoundsCenterX = newBounds.x + newBounds.width / 2;
+			const newBoundsHalfWidth = newBounds.width / 2;
+			let newMouseX;
+			if (instance.mouseXOffsetRatio !== void 0 && newBoundsHalfWidth > 0) newMouseX = newBoundsCenterX + instance.mouseXOffsetRatio * newBoundsHalfWidth;
+			else if (instance.mouseXOffsetFromCenter !== void 0) newMouseX = newBoundsCenterX + instance.mouseXOffsetFromCenter;
+			else newMouseX = instance.mouseX ?? newBoundsCenterX;
+			const newCached = {
+				...instance,
+				bounds: newBounds,
+				mouseX: newMouseX
+			};
+			labelInstanceCache.set(instance.id, newCached);
+			return newCached;
+		};
+		const computedLabelInstances = createMemo(() => {
+			if (!isThemeEnabled()) return [];
+			if (!pluginRegistry.store.theme.grabbedBoxes.enabled) return [];
+			store.viewportVersion;
+			const currentIds = new Set(store.labelInstances.map((instance) => instance.id));
+			for (const cachedId of labelInstanceCache.keys()) if (!currentIds.has(cachedId)) labelInstanceCache.delete(cachedId);
+			return store.labelInstances.map(recomputeLabelInstance);
+		});
+		const computedGrabbedBoxes = createMemo(() => {
+			if (!isThemeEnabled()) return [];
+			if (!pluginRegistry.store.theme.grabbedBoxes.enabled) return [];
+			store.viewportVersion;
+			return store.grabbedBoxes.map((box) => {
+				if (!box.element || !document.body.contains(box.element)) return box;
+				return {
+					...box,
+					bounds: createElementBounds(box.element)
+				};
+			});
+		});
+		const dragVisible = createMemo(() => isThemeEnabled() && isDragBoxThemeEnabled() && isRendererActive() && isDraggingBeyondThreshold());
+		const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
+		const labelVisible = createMemo(() => {
+			if (!isThemeEnabled()) return false;
+			const themeEnabled = isElementLabelThemeEnabled();
+			const inPromptMode = isPromptMode();
+			const copying = isCopying();
+			const rendererActive = isRendererActive();
+			const dragging = isDragging();
+			const hasElement = Boolean(effectiveElement());
+			const toolbarSelectHovered = isToolbarSelectHovered();
+			const frozen = isFrozenPhase();
+			if (!themeEnabled) return false;
+			if (inPromptMode) return false;
+			if (toolbarSelectHovered && !frozen) return false;
+			if (copying) return true;
+			return rendererActive && !dragging && hasElement;
+		});
+		const contextMenuBounds = createMemo(() => {
+			store.viewportVersion;
+			const element = store.contextMenuElement;
+			if (!element) return null;
+			return createElementBounds(element);
+		});
+		const contextMenuPosition = createMemo(() => {
+			store.viewportVersion;
+			return store.contextMenuPosition;
+		});
+		const contextMenuTagName = createMemo(() => {
+			const element = store.contextMenuElement;
+			if (!element) return void 0;
+			const frozenCount = store.frozenElements.length;
+			if (frozenCount > 1) return `${frozenCount} elements`;
+			return getTagName(element) || void 0;
+		});
+		const [contextMenuComponentName] = createResource(() => ({
+			element: store.contextMenuElement,
+			frozenCount: store.frozenElements.length
+		}), async ({ element, frozenCount }) => {
+			if (!element) return void 0;
+			if (frozenCount > 1) return void 0;
+			return await getNearestComponentName(element) ?? void 0;
+		});
+		const [contextMenuFilePath] = createResource(() => store.contextMenuElement, async (element) => {
+			if (!element) return null;
+			return resolveSource(element);
+		});
+		const createPerformWithFeedback = (element, elements, tagName, componentName, options) => {
+			return async (action) => {
+				const fallbackBounds = options?.fallbackBounds ?? null;
+				const fallbackSelectionBounds = options?.fallbackSelectionBounds ?? [];
+				const position = options?.position ?? store.contextMenuPosition ?? store.pointer;
+				const frozenBounds = frozenElementsBounds();
+				const singleElementBounds = contextMenuBounds() ?? fallbackBounds;
+				const hasMultipleElements = elements.length > 1;
+				const labelBounds = hasMultipleElements ? createFlatOverlayBounds(combineBounds(frozenBounds)) : singleElementBounds;
+				const shouldDeactivateAfter = store.wasActivatedByToggle;
+				let selectionBoundsForLabel;
+				if (hasMultipleElements) selectionBoundsForLabel = frozenBounds;
+				else if (singleElementBounds) selectionBoundsForLabel = [singleElementBounds];
+				else selectionBoundsForLabel = fallbackSelectionBounds;
+				actions.hideContextMenu();
+				if (labelBounds) {
+					const labelCursorX = hasMultipleElements ? labelBounds.x + labelBounds.width / 2 : position.x;
+					const labelInstanceId = createLabelInstance(labelBounds, tagName || "element", componentName, "copying", {
+						element,
+						mouseX: labelCursorX,
+						elements: hasMultipleElements ? elements : void 0,
+						boundsMultiple: selectionBoundsForLabel
+					});
+					let didSucceed = false;
+					let errorMessage;
+					try {
+						didSucceed = await action();
+						if (!didSucceed) errorMessage = "Failed to copy";
+					} catch (error) {
+						errorMessage = normalizeErrorMessage(error, "Action failed");
+					}
+					updateLabelAfterCopy(labelInstanceId, didSucceed, errorMessage);
+				} else try {
+					await action();
+				} catch (error) {
+					logRecoverableError("Action failed without feedback bounds", error);
+				}
+				if (shouldDeactivateAfter) deactivateRenderer();
+				else actions.unfreeze();
+			};
+		};
+		const deferHideContextMenu = () => {
+			setTimeout(() => {
+				actions.hideContextMenu();
+			}, 0);
+		};
+		const buildActionContext = (options) => {
+			const { element, filePath, lineNumber, tagName, componentName, position, performWithFeedbackOptions, shouldDeferHideContextMenu, onBeforeCopy, onBeforePrompt, customEnterPromptMode } = options;
+			const elements = store.frozenElements.length > 0 ? store.frozenElements : [element];
+			const hideContextMenuAction = shouldDeferHideContextMenu ? deferHideContextMenu : actions.hideContextMenu;
+			const copyAction = () => {
+				onBeforeCopy?.();
+				performCopyWithLabel({
+					element,
+					cursorX: position.x,
+					selectedElements: elements.length > 1 ? elements : void 0,
+					shouldDeactivateAfter: store.wasActivatedByToggle
+				});
+				hideContextMenuAction();
+			};
+			const defaultEnterPromptMode = () => {
+				clearAllLabels();
+				onBeforePrompt?.();
+				preparePromptMode(element, position.x, position.y);
+				actions.setPointer({
+					x: position.x,
+					y: position.y
+				});
+				actions.setFrozenElement(element);
+				activatePromptMode();
+				if (!isActivated()) activateRenderer();
+				hideContextMenuAction();
+			};
+			const context = {
+				element,
+				elements,
+				filePath,
+				lineNumber,
+				componentName,
+				tagName,
+				enterPromptMode: customEnterPromptMode ?? defaultEnterPromptMode,
+				copy: copyAction,
+				hooks: {
+					transformHtmlContent: pluginRegistry.hooks.transformHtmlContent,
+					onOpenFile: pluginRegistry.hooks.onOpenFile,
+					transformOpenFileUrl: pluginRegistry.hooks.transformOpenFileUrl
+				},
+				performWithFeedback: createPerformWithFeedback(element, elements, tagName, componentName, performWithFeedbackOptions),
+				hideContextMenu: hideContextMenuAction,
+				cleanup: () => {
+					if (store.wasActivatedByToggle) deactivateRenderer();
+					else actions.unfreeze();
+				}
+			};
+			const transformedContext = pluginRegistry.hooks.transformActionContext(context);
+			return {
+				...context,
+				...transformedContext
+			};
+		};
+		const contextMenuActionContext = createMemo(() => {
+			const element = store.contextMenuElement;
+			if (!element) return void 0;
+			const fileInfo = contextMenuFilePath();
+			const position = store.contextMenuPosition ?? store.pointer;
+			return buildActionContext({
+				element,
+				filePath: fileInfo?.filePath,
+				lineNumber: fileInfo?.lineNumber ?? void 0,
+				tagName: contextMenuTagName(),
+				componentName: contextMenuComponentName(),
+				position,
+				shouldDeferHideContextMenu: true,
+				onBeforeCopy: () => {
+					keyboardSelectedElement = null;
+				},
+				customEnterPromptMode: () => {
+					clearAllLabels();
+					actions.clearInputText();
+					actions.enterPromptMode(position, element);
+					deferHideContextMenu();
+				}
+			});
+		});
+		const handleContextMenuDismiss = () => {
+			setTimeout(() => {
+				actions.hideContextMenu();
+				deactivateRenderer();
+			}, 0);
+		};
+		const clearCommentsHoverPreviews = () => {
+			for (const { boxId, labelId } of commentsHoverPreviews) {
+				actions.removeGrabbedBox(boxId);
+				if (labelId) actions.removeLabelInstance(labelId);
+			}
+			commentsHoverPreviews = [];
+		};
+		const addCommentItemPreview = (item, previewBounds, previewElements, idPrefix) => {
+			if (previewBounds.length === 0) return;
+			for (const [index, bounds] of previewBounds.entries()) {
+				const previewElement = previewElements[index];
+				const boxId = `${idPrefix}-${item.id}-${index}`;
+				actions.addGrabbedBox({
+					id: boxId,
+					bounds,
+					createdAt: 0,
+					element: previewElement
+				});
+				let labelId = null;
+				if (index === 0) {
+					labelId = `${idPrefix}-label-${item.id}`;
+					actions.addLabelInstance({
+						id: labelId,
+						bounds,
+						tagName: item.tagName,
+						componentName: item.componentName,
+						elementsCount: item.elementsCount,
+						status: "idle",
+						isPromptMode: Boolean(item.commentText),
+						inputValue: item.commentText ?? void 0,
+						createdAt: 0,
+						element: previewElement,
+						mouseX: bounds.x + bounds.width / 2
+					});
+				}
+				commentsHoverPreviews.push({
+					boxId,
+					labelId
+				});
+			}
+		};
+		const showCommentItemPreview = (item, idPrefix) => {
+			const connectedElements = getConnectedCommentElements(item);
+			addCommentItemPreview(item, connectedElements.map((element) => createElementBounds(element)), connectedElements, idPrefix);
+		};
+		const stopTrackingDropdownPosition = () => {
+			if (dropdownTrackingFrameId !== null) {
+				nativeCancelAnimationFrame(dropdownTrackingFrameId);
+				dropdownTrackingFrameId = null;
+			}
+		};
+		const startTrackingDropdownPosition = (computePosition) => {
+			stopTrackingDropdownPosition();
+			const updatePosition = () => {
+				computePosition();
+				dropdownTrackingFrameId = nativeRequestAnimationFrame(updatePosition);
+			};
+			updatePosition();
+		};
+		const computeDropdownAnchor = () => {
+			if (!toolbarElement) return null;
+			const toolbarRect = toolbarElement.getBoundingClientRect();
+			const edge = getNearestEdge(toolbarRect);
+			if (edge === "left" || edge === "right") return {
+				x: edge === "left" ? toolbarRect.right : toolbarRect.left,
+				y: toolbarRect.top + toolbarRect.height / 2,
+				edge,
+				toolbarWidth: toolbarRect.width
+			};
+			return {
+				x: toolbarRect.left + toolbarRect.width / 2,
+				y: edge === "top" ? toolbarRect.bottom : toolbarRect.top,
+				edge,
+				toolbarWidth: toolbarRect.width
+			};
+		};
+		const openTrackedDropdown = (setPosition) => {
+			startTrackingDropdownPosition(() => {
+				const anchor = computeDropdownAnchor();
+				if (anchor) setPosition(anchor);
+			});
+		};
+		const dismissCommentsDropdown = () => {
+			cancelCommentsHoverOpenTimeout();
+			cancelCommentsHoverCloseTimeout();
+			stopTrackingDropdownPosition();
+			clearCommentsHoverPreviews();
+			setCommentsDropdownPosition(null);
+			setIsCommentsHoverOpen(false);
+		};
+		const dismissToolbarMenu = () => {
+			stopTrackingDropdownPosition();
+			setToolbarMenuPosition(null);
+		};
+		const openCommentsDropdown = () => {
+			actions.hideContextMenu();
+			dismissToolbarMenu();
+			dismissClearPrompt();
+			setCommentItems(loadComments());
+			openTrackedDropdown(setCommentsDropdownPosition);
+		};
+		let commentsHoverOpenTimeoutId = null;
+		let commentsHoverCloseTimeoutId = null;
+		const cancelCommentsHoverOpenTimeout = () => {
+			if (commentsHoverOpenTimeoutId !== null) {
+				clearTimeout(commentsHoverOpenTimeoutId);
+				commentsHoverOpenTimeoutId = null;
+			}
+		};
+		const cancelCommentsHoverCloseTimeout = () => {
+			if (commentsHoverCloseTimeoutId !== null) {
+				clearTimeout(commentsHoverCloseTimeoutId);
+				commentsHoverCloseTimeoutId = null;
+			}
+		};
+		const scheduleCommentsHoverClose = () => {
+			commentsHoverCloseTimeoutId = setTimeout(() => {
+				commentsHoverCloseTimeoutId = null;
+				dismissCommentsDropdown();
+			}, 200);
+		};
+		const showClearPrompt = () => {
+			dismissCommentsDropdown();
+			dismissToolbarMenu();
+			openTrackedDropdown(setClearPromptPosition);
+		};
+		const dismissClearPrompt = () => {
+			stopTrackingDropdownPosition();
+			setClearPromptPosition(null);
+		};
+		const dismissAllPopups = () => {
+			dismissCommentsDropdown();
+			dismissToolbarMenu();
+			dismissClearPrompt();
+		};
+		const handleToggleToolbarMenu = () => {
+			if (toolbarMenuPosition() !== null) dismissToolbarMenu();
+			else {
+				actions.hideContextMenu();
+				dismissCommentsDropdown();
+				dismissClearPrompt();
+				openTrackedDropdown(setToolbarMenuPosition);
+			}
+		};
+		const handleSetDefaultAction = (actionId) => {
+			updateToolbarState({ defaultAction: actionId });
+		};
+		const handleToggleComments = () => {
+			cancelCommentsHoverOpenTimeout();
+			cancelCommentsHoverCloseTimeout();
+			if (commentsDropdownPosition() !== null) if (isCommentsHoverOpen()) {
+				clearCommentsHoverPreviews();
+				setIsCommentsHoverOpen(false);
+			} else dismissCommentsDropdown();
+			else {
+				clearCommentsHoverPreviews();
+				openCommentsDropdown();
+			}
+		};
+		const copyCommentItemContent = (item) => {
+			copyContent(item.content, {
+				tagName: item.tagName,
+				componentName: item.componentName ?? item.elementName,
+				commentText: item.commentText
+			});
+			const element = getFirstConnectedCommentElement(item);
+			if (!element) return;
+			clearAllLabels();
+			nativeRequestAnimationFrame(() => {
+				if (!isElementConnected(element)) return;
+				const bounds = createElementBounds(element);
+				const labelId = createLabelInstance(bounds, item.tagName, item.componentName, "copied", {
+					element,
+					mouseX: bounds.x + bounds.width / 2
+				});
+				if (labelId) scheduleLabelFade(labelId);
+			});
+		};
+		const handleCommentItemSelect = (item) => {
+			clearCommentsHoverPreviews();
+			if (isPromptMode()) {
+				actions.exitPromptMode();
+				actions.clearInputText();
+			}
+			const element = getFirstConnectedCommentElement(item);
+			if (item.commentText && element) {
+				const { center } = getElementBoundsCenter(element);
+				actions.enterPromptMode(center, element);
+				actions.setInputText(item.commentText);
+			} else copyCommentItemContent(item);
+		};
+		const handleCommentsCopyAll = () => {
+			clearCommentsHoverPreviews();
+			const currentCommentItems = commentItems();
+			if (currentCommentItems.length === 0) return;
+			const combinedContent = joinSnippets(currentCommentItems.map((commentItem) => commentItem.content));
+			const firstItem = currentCommentItems[0];
+			copyContent(combinedContent, {
+				componentName: firstItem.componentName ?? firstItem.tagName,
+				entries: currentCommentItems.map((commentItem) => ({
+					tagName: commentItem.tagName,
+					componentName: commentItem.componentName ?? commentItem.elementName,
+					content: commentItem.content,
+					commentText: commentItem.commentText
+				}))
+			});
+			if (isClearConfirmed()) handleCommentsClear();
+			else showClearPrompt();
+			clearAllLabels();
+			nativeRequestAnimationFrame(() => {
+				batch(() => {
+					for (const commentItem of currentCommentItems) {
+						const connectedElements = getConnectedCommentElements(commentItem);
+						for (const element of connectedElements) {
+							const bounds = createElementBounds(element);
+							const labelId = generateId("label");
+							actions.addLabelInstance({
+								id: labelId,
+								bounds,
+								tagName: commentItem.tagName,
+								componentName: commentItem.componentName,
+								status: "copied",
+								createdAt: Date.now(),
+								element,
+								mouseX: bounds.x + bounds.width / 2
+							});
+							scheduleLabelFade(labelId);
+						}
+					}
+				});
+			});
+		};
+		const handleCommentItemHover = (commentItemId) => {
+			clearCommentsHoverPreviews();
+			if (!commentItemId) return;
+			const item = commentItems().find((innerItem) => innerItem.id === commentItemId);
+			if (!item) return;
+			showCommentItemPreview(item, "comment-hover");
+		};
+		const handleCommentsButtonHover = (isHovered) => {
+			cancelCommentsHoverOpenTimeout();
+			clearCommentsHoverPreviews();
+			if (isHovered) {
+				cancelCommentsHoverCloseTimeout();
+				if (commentsDropdownPosition() === null && clearPromptPosition() === null) {
+					showAllCommentItemPreviews();
+					commentsHoverOpenTimeoutId = setTimeout(() => {
+						commentsHoverOpenTimeoutId = null;
+						setIsCommentsHoverOpen(true);
+						openCommentsDropdown();
+					}, 200);
+				}
+			} else if (isCommentsHoverOpen()) scheduleCommentsHoverClose();
+		};
+		const handleCommentsDropdownHover = (isHovered) => {
+			if (isHovered) cancelCommentsHoverCloseTimeout();
+			else if (isCommentsHoverOpen()) scheduleCommentsHoverClose();
+		};
+		const handleCommentsCopyAllHover = (isHovered) => {
+			clearCommentsHoverPreviews();
+			if (isHovered) {
+				cancelCommentsHoverCloseTimeout();
+				showAllCommentItemPreviews();
+			} else if (isCommentsHoverOpen()) scheduleCommentsHoverClose();
+		};
+		const showAllCommentItemPreviews = () => {
+			for (const item of commentItems()) showCommentItemPreview(item, "comment-all-hover");
+		};
+		const handleCommentsClear = () => {
+			commentElementMap.clear();
+			setCommentItems(clearComments());
+			dismissCommentsDropdown();
+		};
+		const handleShowContextMenuInstance = (instanceId) => {
+			const instance = store.labelInstances.find((labelInstance) => labelInstance.id === instanceId);
+			if (!instance?.element) return;
+			if (!isElementConnected(instance.element)) return;
+			const contextMenuElement = instance.element;
+			const { center } = getElementBoundsCenter(contextMenuElement);
+			const position = {
+				x: instance.mouseX ?? center.x,
+				y: center.y
+			};
+			const elementsToFreeze = instance.elements && instance.elements.length > 0 ? instance.elements.filter((element) => isElementConnected(element)) : [contextMenuElement];
+			setTimeout(() => {
+				if (!isActivated()) {
+					actions.setWasActivatedByToggle(true);
+					activateRenderer();
+				}
+				actions.setPointer(position);
+				actions.setFrozenElements(elementsToFreeze);
+				if (elementsToFreeze.length > 1 && instance.bounds) actions.setFrozenDragRect(createPageRectFromBounds(instance.bounds));
+				actions.freeze();
+				actions.showContextMenu(position, contextMenuElement);
+			}, 0);
+		};
+		createEffect(() => {
+			const hue = pluginRegistry.store.theme.hue;
+			if (hue !== 0) rendererRoot.style.filter = `hue-rotate(${hue}deg)`;
+			else rendererRoot.style.filter = "";
+		});
+		if (pluginRegistry.store.theme.enabled) import("./renderer-DtBv4wTu.js").then(({ ReactGrabRenderer }) => {
+			if (disposed) return;
+			disposeRenderer = render(() => {
+				return createComponent(ReactGrabRenderer, {
+					get selectionVisible() {
+						return selectionVisible();
+					},
+					get selectionBounds() {
+						return selectionBounds();
+					},
+					get selectionBoundsMultiple() {
+						return selectionBoundsMultiple();
+					},
+					get selectionShouldSnap() {
+						return store.frozenElements.length > 0 || dragPreviewBounds().length > 0;
+					},
+					get inspectVisible() {
+						return memo(() => !!isInspectMode())() && inspectBounds().length > 0;
+					},
+					get inspectBounds() {
+						return inspectBounds();
+					},
+					get selectionElementsCount() {
+						return store.frozenElements.length;
+					},
+					get selectionFilePath() {
+						return store.selectionFilePath ?? void 0;
+					},
+					get selectionLineNumber() {
+						return store.selectionLineNumber ?? void 0;
+					},
+					get selectionTagName() {
+						return selectionTagName();
+					},
+					get selectionComponentName() {
+						return resolvedComponentName();
+					},
+					get selectionLabelVisible() {
+						return selectionLabelVisible();
+					},
+					selectionLabelStatus: "idle",
+					get selectionActionCycleState() {
+						return actionCycleState();
+					},
+					get selectionArrowNavigationState() {
+						return arrowNavigationState();
+					},
+					onArrowNavigationSelect: handleArrowNavigationSelect,
+					get inspectNavigationState() {
+						return inspectNavigationState();
+					},
+					onInspectSelect: handleInspectSelect,
+					get labelInstances() {
+						return computedLabelInstances();
+					},
+					get dragVisible() {
+						return dragVisible();
+					},
+					get dragBounds() {
+						return dragBounds();
+					},
+					get grabbedBoxes() {
+						return computedGrabbedBoxes();
+					},
+					get mouseX() {
+						return memo(() => store.frozenElements.length > 1)() ? void 0 : cursorPosition().x;
+					},
+					get isFrozen() {
+						return isFrozenPhase() || isActivated() || isToolbarSelectHovered();
+					},
+					get inputValue() {
+						return store.inputText;
+					},
+					get isPromptMode() {
+						return isPromptMode();
+					},
+					onShowContextMenuInstance: handleShowContextMenuInstance,
+					onLabelInstanceHoverChange: handleLabelInstanceHoverChange,
+					get onInputChange() {
+						return actions.setInputText;
+					},
+					onInputSubmit: () => void handleInputSubmit(),
+					onToggleExpand: handleToggleExpand,
+					get isPendingDismiss() {
+						return isPendingDismiss();
+					},
+					get selectionLabelShakeCount() {
+						return selectionLabelShakeCount();
+					},
+					onConfirmDismiss: handleConfirmDismiss,
+					onCancelDismiss: handleCancelDismiss,
+					get toolbarVisible() {
+						return pluginRegistry.store.theme.toolbar.enabled;
+					},
+					get isActive() {
+						return isActivated();
+					},
+					onToggleActive: handleToggleActive,
+					get enabled() {
+						return isEnabled();
+					},
+					onToggleEnabled: handleToggleEnabled,
+					get shakeCount() {
+						return toolbarShakeCount();
+					},
+					onToolbarStateChange: (state) => {
+						setCurrentToolbarState(state);
+						toolbarStateChangeCallbacks.forEach((callback) => callback(state));
+					},
+					onSubscribeToToolbarStateChanges: (callback) => {
+						toolbarStateChangeCallbacks.add(callback);
+						return () => {
+							toolbarStateChangeCallbacks.delete(callback);
+						};
+					},
+					onToolbarSelectHoverChange: setIsToolbarSelectHovered,
+					onToolbarRef: (element) => {
+						toolbarElement = element;
+					},
+					get contextMenuPosition() {
+						return contextMenuPosition();
+					},
+					get contextMenuBounds() {
+						return contextMenuBounds();
+					},
+					get contextMenuTagName() {
+						return contextMenuTagName();
+					},
+					get contextMenuComponentName() {
+						return contextMenuComponentName();
+					},
+					get contextMenuHasFilePath() {
+						return Boolean(contextMenuFilePath()?.filePath);
+					},
+					get actions() {
+						return pluginRegistry.store.actions;
+					},
+					get actionContext() {
+						return contextMenuActionContext();
+					},
+					onContextMenuDismiss: handleContextMenuDismiss,
+					onContextMenuHide: deferHideContextMenu,
+					get commentItems() {
+						return commentItems();
+					},
+					get commentsDisconnectedItemIds() {
+						return commentsDisconnectedItemIds();
+					},
+					get commentItemCount() {
+						return commentItems().length;
+					},
+					get clockFlashTrigger() {
+						return clockFlashTrigger();
+					},
+					get commentsDropdownPosition() {
+						return commentsDropdownPosition();
+					},
+					get isCommentsPinned() {
+						return memo(() => commentsDropdownPosition() !== null)() && !isCommentsHoverOpen();
+					},
+					onToggleComments: handleToggleComments,
+					onCopyAll: handleCommentsCopyAll,
+					onCopyAllHover: handleCommentsCopyAllHover,
+					onCommentsButtonHover: handleCommentsButtonHover,
+					onCommentItemSelect: handleCommentItemSelect,
+					onCommentItemHover: handleCommentItemHover,
+					onCommentsCopyAll: handleCommentsCopyAll,
+					onCommentsCopyAllHover: handleCommentsCopyAllHover,
+					onCommentsClear: handleCommentsClear,
+					onCommentsDismiss: dismissCommentsDropdown,
+					onCommentsDropdownHover: handleCommentsDropdownHover,
+					get toolbarMenuPosition() {
+						return toolbarMenuPosition();
+					},
+					get toolbarMenuActions() {
+						return pluginRegistry.store.actions.filter((action) => action.showInToolbarMenu === true);
+					},
+					get defaultActionId() {
+						return currentToolbarState()?.defaultAction ?? "comment";
+					},
+					onSetDefaultAction: handleSetDefaultAction,
+					onToggleToolbarMenu: handleToggleToolbarMenu,
+					onToolbarMenuDismiss: dismissToolbarMenu,
+					get clearPromptPosition() {
+						return clearPromptPosition();
+					},
+					onClearCommentsConfirm: () => {
+						confirmClear();
+						dismissClearPrompt();
+						handleCommentsClear();
+					},
+					onClearCommentsCancel: dismissClearPrompt
+				});
+			}, rendererRoot);
+		}).catch((error) => {
+			console.warn("[react-grab] Failed to load renderer:", error);
+		});
+		const copyElementAPI = async (elements) => {
+			const elementsArray = Array.isArray(elements) ? elements : [elements];
+			if (elementsArray.length === 0) return false;
+			return await copyWithFallback(elementsArray);
+		};
+		const api = {
+			activate: () => {
+				actions.setPendingCommentMode(false);
+				if (!isActivated() && isEnabled()) toggleActivate();
+			},
+			deactivate: () => {
+				if (isActivated() || isCopying()) deactivateRenderer();
+			},
+			toggle: () => {
+				if (isActivated()) deactivateRenderer();
+				else if (isEnabled()) toggleActivate();
+			},
+			comment: handleComment,
+			isActive: () => isActivated(),
+			isEnabled: () => isEnabled(),
+			setEnabled: (enabled) => {
+				if (enabled === isEnabled()) return;
+				setIsEnabled(enabled);
+				if (!enabled) forceDeactivateAll();
+			},
+			getToolbarState: () => loadToolbarState(),
+			setToolbarState: (state) => {
+				const currentState = loadToolbarState();
+				const newState = {
+					edge: state.edge ?? currentState?.edge ?? "bottom",
+					ratio: state.ratio ?? currentState?.ratio ?? .5,
+					collapsed: state.collapsed ?? currentState?.collapsed ?? false,
+					enabled: state.enabled ?? currentState?.enabled ?? true,
+					defaultAction: state.defaultAction ?? currentState?.defaultAction ?? "comment"
+				};
+				saveToolbarState(newState);
+				setCurrentToolbarState(newState);
+				if (state.enabled !== void 0 && state.enabled !== isEnabled()) setIsEnabled(state.enabled);
+				toolbarStateChangeCallbacks.forEach((callback) => callback(newState));
+			},
+			onToolbarStateChange: (callback) => {
+				toolbarStateChangeCallbacks.add(callback);
+				return () => {
+					toolbarStateChangeCallbacks.delete(callback);
+				};
+			},
+			dispose: () => {
+				disposed = true;
+				hasInited = false;
+				disposeRenderer?.();
+				cancelCommentsHoverOpenTimeout();
+				cancelCommentsHoverCloseTimeout();
+				stopTrackingDropdownPosition();
+				toolbarStateChangeCallbacks.clear();
+				dispose();
+			},
+			copyElement: copyElementAPI,
+			getSource: async (element) => {
+				const source = await resolveSource(element);
+				if (!source) return null;
+				return {
+					filePath: source.filePath,
+					lineNumber: source.lineNumber,
+					componentName: source.componentName
+				};
+			},
+			getStackContext,
+			getState: () => ({
+				isActive: isActivated(),
+				isDragging: isDragging(),
+				isCopying: isCopying(),
+				isPromptMode: isPromptMode(),
+				isSelectionBoxVisible: Boolean(selectionVisible()),
+				isDragBoxVisible: Boolean(dragVisible()),
+				targetElement: targetElement(),
+				dragBounds: dragBounds() ?? null,
+				grabbedBoxes: [...publicGrabbedBoxes()],
+				labelInstances: [...publicLabelInstances()],
+				selectionFilePath: store.selectionFilePath,
+				toolbarState: currentToolbarState()
+			}),
+			setOptions: (newOptions) => {
+				pluginRegistry.setOptions(newOptions);
+			},
+			registerPlugin: (plugin) => {
+				pluginRegistry.register(plugin, api);
+			},
+			unregisterPlugin: (name) => {
+				pluginRegistry.unregister(name);
+			},
+			getPlugins: () => pluginRegistry.getPluginNames(),
+			getDisplayName: getComponentDisplayName
+		};
+		for (const plugin of builtInPlugins) pluginRegistry.register(plugin, api);
+		setTimeout(() => {
+			checkIsNextProject(true);
+		}, NEXTJS_REVALIDATION_DELAY_MS);
+		return api;
+	});
+};
+
+//#endregion
+export { generateSnippet as a, DEFAULT_THEME as i, openPlugin as n, copyContent as o, commentPlugin as r, init as t };