react-grab 0.0.54 → 0.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -552,12 +552,21 @@ function delegateEvents(eventNames, document2 = window.document) {
552
552
  }
553
553
  }
554
554
  function setAttribute(node, name, value) {
555
- node.removeAttribute(name);
555
+ if (value == null) node.removeAttribute(name);
556
+ else node.setAttribute(name, value);
556
557
  }
557
558
  function className(node, value) {
558
559
  if (value == null) node.removeAttribute("class");
559
560
  else node.className = value;
560
561
  }
562
+ function addEventListener(node, name, handler, delegate) {
563
+ {
564
+ if (Array.isArray(handler)) {
565
+ node[`$$${name}`] = handler[0];
566
+ node[`$$${name}Data`] = handler[1];
567
+ } else node[`$$${name}`] = handler;
568
+ }
569
+ }
561
570
  function style(node, value, prev) {
562
571
  if (!value) return prev ? setAttribute(node, "style") : value;
563
572
  const nodeStyle = node.style;
@@ -742,7 +751,7 @@ function cleanChildren(parent, current, marker, replacement) {
742
751
  }
743
752
 
744
753
  // dist/styles.css
745
- var styles_default = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-white:#fff;--spacing:.25rem;--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-grab-pink:#b21c8e;--color-grab-pink-light:#fde7f7;--color-grab-pink-border:#f7c5ec;--color-grab-purple:#d239c0}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-0{top:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-2147483645{z-index:2147483645}.z-2147483646{z-index:2147483646}.z-\\[2147483645\\]{z-index:2147483645}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mr-1{margin-right:calc(var(--spacing)*1)}.ml-1{margin-left:calc(var(--spacing)*1)}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.h-2{height:calc(var(--spacing)*2)}.min-h-\\[18px\\]{min-height:18px}.w-2{width:calc(var(--spacing)*2)}.w-\\[150px\\]{width:150px}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\\[3px\\]{border-radius:3px}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-grab-pink-border{border-color:var(--color-grab-pink-border)}.border-grab-purple{border-color:var(--color-grab-purple)}.border-grab-purple\\/40{border-color:#d239c066}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/40{border-color:color-mix(in oklab,var(--color-grab-purple)40%,transparent)}}.border-grab-purple\\/50{border-color:#d239c080}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/50{border-color:color-mix(in oklab,var(--color-grab-purple)50%,transparent)}}.border-t-transparent{border-top-color:#0000}.bg-grab-pink-light{background-color:var(--color-grab-pink-light)}.bg-grab-pink\\/20{background-color:#b21c8e33}@supports (color:color-mix(in lab, red, red)){.bg-grab-pink\\/20{background-color:color-mix(in oklab,var(--color-grab-pink)20%,transparent)}}.bg-grab-purple\\/5{background-color:#d239c00d}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/5{background-color:color-mix(in oklab,var(--color-grab-purple)5%,transparent)}}.bg-grab-purple\\/8{background-color:#d239c014}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/8{background-color:color-mix(in oklab,var(--color-grab-purple)8%,transparent)}}.bg-white{background-color:var(--color-white)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-\\[3px\\]{padding-inline:3px}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-grab-pink{color:var(--color-grab-pink)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.opacity-60{opacity:.6}.filter{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,)}.transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.will-change-\\[transform\\,width\\,height\\]{will-change:transform,width,height}.outline-none{--tw-outline-style:none;outline-style:none}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}';
754
+ var styles_default = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--font-weight-medium:500;--ease-out:cubic-bezier(0,0,.2,1);--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-grab-pink:#b21c8e;--color-grab-purple:#d239c0;--color-label-tag-border:#730079;--color-label-tag-text:#1e001f;--color-label-gray-border:#b0b0b0;--color-label-success-bg:#d9ffe4;--color-label-success-border:#00bb69;--color-label-success-text:#006e3b;--color-label-divider:#dedede;--color-label-muted:#767676}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-0{top:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-2147483645{z-index:2147483645}.z-2147483646{z-index:2147483646}.z-2147483647{z-index:2147483647}.z-\\[2147483645\\]{z-index:2147483645}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mt-\\[2\\.5px\\]{margin-top:2.5px}.-ml-\\[5px\\]{margin-left:-5px}.ml-1{margin-left:calc(var(--spacing)*1)}.box-border{box-sizing:border-box}.flex{display:flex}.hidden{display:none}.h-0{height:calc(var(--spacing)*0)}.h-5{height:calc(var(--spacing)*5)}.h-5\\.5{height:calc(var(--spacing)*5.5)}.h-\\[14px\\]{height:14px}.h-\\[18px\\]{height:18px}.h-fit{height:fit-content}.min-h-\\[14px\\]{min-height:14px}.w-0{width:calc(var(--spacing)*0)}.w-0\\.5{width:calc(var(--spacing)*.5)}.w-1{width:calc(var(--spacing)*1)}.w-\\[18px\\]{width:18px}.w-fit{width:fit-content}.w-full{width:100%}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-75{--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-crosshair{cursor:crosshair}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-\\[3px\\]{gap:3px}.gap-\\[5px\\]{gap:5px}.rounded-\\[1\\.5px\\]{border-radius:1.5px}.rounded-\\[3px\\]{border-radius:3px}.rounded-full{border-radius:3.40282e38px}.rounded-br-\\[3px\\]{border-bottom-right-radius:3px}.rounded-bl-\\[3px\\]{border-bottom-left-radius:3px}.border{border-style:var(--tw-border-style);border-width:1px}.border-\\[0\\.5px\\]{border-style:var(--tw-border-style);border-width:.5px}.border-t-\\[0\\.5px\\]{border-top-style:var(--tw-border-style);border-top-width:.5px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-grab-purple{border-color:var(--color-grab-purple)}.border-grab-purple\\/40{border-color:#d239c066}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/40{border-color:color-mix(in oklab,var(--color-grab-purple)40%,transparent)}}.border-grab-purple\\/50{border-color:#d239c080}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/50{border-color:color-mix(in oklab,var(--color-grab-purple)50%,transparent)}}.border-label-gray-border{border-color:var(--color-label-gray-border)}.border-label-success-border{border-color:var(--color-label-success-border)}.border-label-tag-border{border-color:var(--color-label-tag-border)}.border-t-label-divider{border-top-color:var(--color-label-divider)}.bg-black{background-color:var(--color-black)}.bg-grab-pink{background-color:var(--color-grab-pink)}.bg-grab-purple\\/5{background-color:#d239c00d}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/5{background-color:color-mix(in oklab,var(--color-grab-purple)5%,transparent)}}.bg-grab-purple\\/8{background-color:#d239c014}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/8{background-color:color-mix(in oklab,var(--color-grab-purple)8%,transparent)}}.bg-label-success-bg{background-color:var(--color-label-success-bg)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-0{padding:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-\\[5px\\]{padding-inline:5px}.py-\\[5px\\]{padding-block:5px}.py-px{padding-block:1px}.pt-1{padding-top:calc(var(--spacing)*1)}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[12px\\]{font-size:12px}.leading-3\\.5{--tw-leading:calc(var(--spacing)*3.5);line-height:calc(var(--spacing)*3.5)}.leading-4{--tw-leading:calc(var(--spacing)*4);line-height:calc(var(--spacing)*4)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-\\[-0\\.04em\\]{--tw-tracking:-.04em;letter-spacing:-.04em}.text-black{color:var(--color-black)}.text-label-muted{color:var(--color-label-muted)}.text-label-success-text{color:var(--color-label-success-text)}.text-label-tag-border{color:var(--color-label-tag-border)}.text-label-tag-text{color:var(--color-label-tag-text)}.text-white{color:var(--color-white)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.opacity-\\[0\\.65\\]{opacity:.65}.brightness-125{--tw-brightness:brightness(125%);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,)}.filter{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,)}.transition{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;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[width\\,height\\]{transition-property:width,height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.will-change-\\[transform\\,width\\,height\\]{will-change:transform,width,height}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\\:opacity-80:hover{opacity:.8}.hover\\:opacity-100:hover{opacity:1}}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.react-grab-shimmer{position:relative;overflow:hidden}.react-grab-shimmer:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%) 0 0/200% 100%;animation:1.5s ease-in-out infinite shimmer;position:absolute;inset:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
746
755
 
747
756
  // src/utils/is-keyboard-event-triggered-by-input.ts
748
757
  var FORM_TAGS_AND_ROLES = [
@@ -793,6 +802,39 @@ var isKeyboardEventTriggeredByInput = (event) => {
793
802
  return isHotkeyEnabledOnTagName(event, FORM_TAGS_AND_ROLES);
794
803
  };
795
804
 
805
+ // src/utils/is-selection-inside-editable-element.ts
806
+ var isEditableElement = (element) => {
807
+ const tagName = element.tagName.toLowerCase();
808
+ if (tagName === "input" || tagName === "textarea") {
809
+ return true;
810
+ }
811
+ if (element instanceof HTMLElement && element.isContentEditable) {
812
+ return true;
813
+ }
814
+ return false;
815
+ };
816
+ var isSelectionInsideEditableElement = (cursorX, cursorY) => {
817
+ const activeElement = document.activeElement;
818
+ if (activeElement) {
819
+ let current = activeElement;
820
+ while (current) {
821
+ if (isEditableElement(current)) {
822
+ return true;
823
+ }
824
+ current = current.parentElement;
825
+ }
826
+ }
827
+ if (cursorX !== void 0 && cursorY !== void 0) {
828
+ const elementsAtPoint = document.elementsFromPoint(cursorX, cursorY);
829
+ for (const element of elementsAtPoint) {
830
+ if (isEditableElement(element)) {
831
+ return true;
832
+ }
833
+ }
834
+ }
835
+ return false;
836
+ };
837
+
796
838
  // src/utils/mount-root.ts
797
839
  var ATTRIBUTE_NAME = "data-react-grab";
798
840
  var mountRoot = (cssText) => {
@@ -825,18 +867,27 @@ var mountRoot = (cssText) => {
825
867
  return root;
826
868
  };
827
869
 
870
+ // src/utils/build-open-file-url.ts
871
+ var BASE_URL = "https://react-grab.com" ;
872
+ var buildOpenFileUrl = (filePath, lineNumber) => {
873
+ const lineParam = lineNumber ? `&line=${lineNumber}` : "";
874
+ return `${BASE_URL}/open-file?url=${encodeURIComponent(filePath)}${lineParam}`;
875
+ };
876
+
828
877
  // src/constants.ts
829
878
  var VIEWPORT_MARGIN_PX = 8;
830
- var INDICATOR_CLAMP_PADDING_PX = 4;
831
- var CURSOR_OFFSET_PX = 14;
832
879
  var OFFSCREEN_POSITION = -1e3;
833
880
  var SELECTION_LERP_FACTOR = 0.95;
834
881
  var SUCCESS_LABEL_DURATION_MS = 1700;
835
- var PROGRESS_INDICATOR_DELAY_MS = 150;
882
+ var COPIED_LABEL_DURATION_MS = 1500;
883
+ var SELECTION_CURSOR_SETTLE_DELAY_MS = 500;
884
+ var BLUR_DEACTIVATION_THRESHOLD_MS = 500;
836
885
  var DRAG_THRESHOLD_PX = 2;
837
886
  var AUTO_SCROLL_EDGE_THRESHOLD_PX = 25;
838
887
  var AUTO_SCROLL_SPEED_PX = 10;
839
888
  var Z_INDEX_LABEL = 2147483647;
889
+ var MODIFIER_KEYS = ["Meta", "Control", "Shift", "Alt"];
890
+ var LOGO_SVG = `<svg width="294" height="294" viewBox="0 0 294 294" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_0_3)"><mask id="mask0_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="294" height="294"><path d="M294 0H0V294H294V0Z" fill="white"/></mask><g mask="url(#mask0_0_3)"><path d="M144.599 47.4924C169.712 27.3959 194.548 20.0265 212.132 30.1797C227.847 39.2555 234.881 60.3243 231.926 89.516C231.677 92.0069 231.328 94.5423 230.94 97.1058L228.526 110.14C228.517 110.136 228.505 110.132 228.495 110.127C228.486 110.165 228.479 110.203 228.468 110.24L216.255 105.741C216.256 105.736 216.248 105.728 216.248 105.723C207.915 103.125 199.421 101.075 190.82 99.5888L190.696 99.5588L173.526 97.2648L173.511 97.2631C173.492 97.236 173.467 97.2176 173.447 97.1905C163.862 96.2064 154.233 95.7166 144.599 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8624 138.391 86.939 147.193C90.8624 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245C115.749 197.245 115.758 197.246 115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.507 229.974L144.609 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.472 238.38C154.485 238.392 154.499 238.402 154.513 238.412L143.846 247.482L143.827 247.497C126.56 261.128 109.472 268.745 94.8019 268.745C88.5916 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3164 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3363 185.327 9.52301 167.51 9.52301 147.193C9.52301 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3164 60.3243 61.3496 39.2555 77.0657 30.1797C94.6494 20.0265 119.486 27.3959 144.599 47.4924ZM70.6423 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5176 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8516 207.742 83.0977 205.066 70.6423 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1787 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.9311 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.759 110.203C59.234 110.839 57.7378 111.475 56.27 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9104 147.193C67.822 135.23 63.7566 122.855 60.759 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.854 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.6291 47.6015 67.6975 64.5954 70.0424 87.9446L70.0416 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8263 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.773 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.29 38.512C183.321 38.512 169.34 44.4991 154.444 56.0153C163.93 64.9374 172.634 74.6557 180.462 85.064C193.375 86.6345 206.128 89.3102 218.584 93.0624C218.812 91.4325 219.003 89.8118 219.165 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.552 64.3097C138.104 70.2614 132.054 76.6306 126.443 83.3765C132.39 82.995 138.426 82.8046 144.552 82.8046C150.727 82.8046 156.778 83.0143 162.707 83.3765C157.08 76.6293 151.015 70.2596 144.552 64.3097Z" fill="white"/><path d="M144.598 47.4924C169.712 27.3959 194.547 20.0265 212.131 30.1797C227.847 39.2555 234.88 60.3243 231.926 89.516C231.677 92.0069 231.327 94.5423 230.941 97.1058L228.526 110.14L228.496 110.127C228.487 110.165 228.478 110.203 228.469 110.24L216.255 105.741L216.249 105.723C207.916 103.125 199.42 101.075 190.82 99.5888L190.696 99.5588L173.525 97.2648L173.511 97.263C173.492 97.236 173.468 97.2176 173.447 97.1905C163.863 96.2064 154.234 95.7166 144.598 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8622 138.391 86.939 147.193C90.8622 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245L115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.506 229.974L144.61 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.473 238.38L154.512 238.412L143.847 247.482L143.827 247.497C126.56 261.13 109.472 268.745 94.8018 268.745C88.5915 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3162 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3362 185.327 9.52298 167.51 9.52298 147.193C9.52298 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3162 60.3243 61.3496 39.2555 77.0657 30.1797C94.6493 20.0265 119.486 27.3959 144.598 47.4924ZM70.6422 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5175 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8515 207.742 83.0977 205.066 70.6422 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1786 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.931 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.7589 110.203C59.234 110.839 57.7378 111.475 56.2699 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9103 147.193C67.822 135.23 63.7566 122.855 60.7589 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.8539 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.629 47.6015 67.6975 64.5954 70.0424 87.9446L70.0415 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8262 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.772 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.291 38.512C183.321 38.512 169.34 44.4991 154.443 56.0153C163.929 64.9374 172.634 74.6557 180.462 85.064C193.374 86.6345 206.129 89.3102 218.584 93.0624C218.813 91.4325 219.003 89.8118 219.166 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.551 64.3097C138.103 70.2614 132.055 76.6306 126.443 83.3765C132.389 82.995 138.427 82.8046 144.551 82.8046C150.727 82.8046 156.779 83.0143 162.707 83.3765C157.079 76.6293 151.015 70.2596 144.551 64.3097Z" fill="#FF40E0"/></g><mask id="mask1_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="102" y="84" width="161" height="162"><path d="M235.282 84.827L102.261 112.259L129.693 245.28L262.714 217.848L235.282 84.827Z" fill="white"/></mask><g mask="url(#mask1_0_3)"><path d="M136.863 129.916L213.258 141.224C220.669 142.322 222.495 152.179 215.967 155.856L187.592 171.843L184.135 204.227C183.339 211.678 173.564 213.901 169.624 207.526L129.021 141.831C125.503 136.14 130.245 128.936 136.863 129.916Z" fill="#FF40E0" stroke="#FF40E0" stroke-width="0.817337" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="clip0_0_3"><rect width="294" height="294" fill="white"/></clipPath></defs></svg>`;
840
891
 
841
892
  // src/utils/lerp.ts
842
893
  var lerp = (start, end, factor) => {
@@ -3319,12 +3370,10 @@ var getDefaultConfig = () => {
3319
3370
  var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
3320
3371
 
3321
3372
  // src/utils/cn.ts
3322
- var cn = (...inputs) => {
3323
- return twMerge(clsx(inputs));
3324
- };
3373
+ var cn = (...inputs) => twMerge(clsx(inputs));
3325
3374
 
3326
3375
  // src/components/selection-box.tsx
3327
- var _tmpl$ = /* @__PURE__ */ template(`<div>`);
3376
+ var _tmpl$ = /* @__PURE__ */ template(`<div style=overflow:visible>`);
3328
3377
  var SelectionBox = (props) => {
3329
3378
  const [currentX, setCurrentX] = createSignal(props.bounds.x);
3330
3379
  const [currentY, setCurrentY] = createSignal(props.bounds.y);
@@ -3400,7 +3449,7 @@ var SelectionBox = (props) => {
3400
3449
  get children() {
3401
3450
  var _el$ = _tmpl$();
3402
3451
  createRenderEffect((_p$) => {
3403
- var _v$ = cn("fixed box-border", props.variant === "drag" && "pointer-events-none", props.variant !== "drag" && "pointer-events-auto", props.variant === "grabbed" && "z-2147483645", props.variant !== "grabbed" && "z-2147483646", props.variant === "drag" && "border border-dashed border-grab-purple/40 bg-grab-purple/5 will-change-[transform,width,height] cursor-crosshair", props.variant === "selection" && "border border-dashed border-grab-purple/50 bg-grab-purple/8", props.variant === "grabbed" && "border border-solid border-grab-purple bg-grab-purple/8 transition-opacity duration-300 ease-out"), _v$2 = `${currentY()}px`, _v$3 = `${currentX()}px`, _v$4 = `${currentWidth()}px`, _v$5 = `${currentHeight()}px`, _v$6 = props.bounds.borderRadius, _v$7 = props.bounds.transform, _v$8 = opacity(), _v$9 = props.variant === "drag" ? "layout paint size" : void 0;
3452
+ var _v$ = cn("fixed box-border", props.variant === "drag" && "pointer-events-none", props.variant !== "drag" && "pointer-events-auto", props.variant === "grabbed" && "z-2147483645", props.variant !== "grabbed" && "z-2147483646", props.variant === "drag" && "border border-solid border-grab-purple/40 bg-grab-purple/5 will-change-[transform,width,height] cursor-crosshair", props.variant === "selection" && "border border-solid border-grab-purple/50 bg-grab-purple/8 transition-opacity duration-100 ease-out", props.variant === "grabbed" && "border border-solid border-grab-purple bg-grab-purple/8 transition-opacity duration-300 ease-out", props.variant === "processing" && "border border-solid border-grab-purple/50 bg-grab-purple/8"), _v$2 = `${currentY()}px`, _v$3 = `${currentX()}px`, _v$4 = `${currentWidth()}px`, _v$5 = `${currentHeight()}px`, _v$6 = props.bounds.borderRadius, _v$7 = props.bounds.transform, _v$8 = props.isFading ? 0 : opacity(), _v$9 = props.variant === "drag" ? "layout paint size" : void 0;
3404
3453
  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
3405
3454
  _v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
3406
3455
  _v$3 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$3);
@@ -3427,45 +3476,6 @@ var SelectionBox = (props) => {
3427
3476
  });
3428
3477
  };
3429
3478
 
3430
- // src/components/spinner.tsx
3431
- var _tmpl$2 = /* @__PURE__ */ template(`<span class="inline-block w-2 h-2 border-[1.5px] border-grab-dark-pink border-t-transparent rounded-full mr-1 align-middle">`);
3432
- var Spinner = (props) => {
3433
- let spinnerRef;
3434
- onMount(() => {
3435
- if (spinnerRef) {
3436
- spinnerRef.animate([{
3437
- transform: "rotate(0deg)"
3438
- }, {
3439
- transform: "rotate(360deg)"
3440
- }], {
3441
- duration: 600,
3442
- easing: "linear",
3443
- iterations: Infinity
3444
- });
3445
- }
3446
- });
3447
- return (() => {
3448
- var _el$ = _tmpl$2();
3449
- var _ref$ = spinnerRef;
3450
- typeof _ref$ === "function" ? use(_ref$, _el$) : spinnerRef = _el$;
3451
- createRenderEffect((_$p) => style(_el$, props.style, _$p));
3452
- return _el$;
3453
- })();
3454
- };
3455
-
3456
- // src/utils/get-clamped-element-position.ts
3457
- var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elementHeight) => {
3458
- const viewportWidth = window.innerWidth;
3459
- const viewportHeight = window.innerHeight;
3460
- const minLeft = VIEWPORT_MARGIN_PX;
3461
- const minTop = VIEWPORT_MARGIN_PX;
3462
- const maxLeft = viewportWidth - elementWidth - VIEWPORT_MARGIN_PX;
3463
- const maxTop = viewportHeight - elementHeight - VIEWPORT_MARGIN_PX;
3464
- const clampedLeft = Math.max(minLeft, Math.min(positionLeft, maxLeft));
3465
- const clampedTop = Math.max(minTop, Math.min(positionTop, maxTop));
3466
- return { left: clampedLeft, top: clampedTop };
3467
- };
3468
-
3469
3479
  // src/hooks/use-animated-lerp.ts
3470
3480
  var useAnimatedPosition = (options) => {
3471
3481
  const lerpFactor = options.lerpFactor ?? 0.3;
@@ -3512,187 +3522,8 @@ var useAnimatedPosition = (options) => {
3512
3522
  return { x: x3, y: y2 };
3513
3523
  };
3514
3524
 
3515
- // src/hooks/use-fade-in-out.ts
3516
- var useFadeInOut = (options) => {
3517
- const [opacity, setOpacity] = createSignal(0);
3518
- createEffect(
3519
- on(
3520
- () => options.visible,
3521
- (isVisible) => {
3522
- if (isVisible !== false) {
3523
- requestAnimationFrame(() => {
3524
- setOpacity(1);
3525
- });
3526
- } else {
3527
- setOpacity(0);
3528
- return;
3529
- }
3530
- if (options.autoFadeOutAfter !== void 0) {
3531
- const fadeOutTimer = setTimeout(() => {
3532
- setOpacity(0);
3533
- }, options.autoFadeOutAfter);
3534
- onCleanup(() => clearTimeout(fadeOutTimer));
3535
- }
3536
- }
3537
- )
3538
- );
3539
- return opacity;
3540
- };
3541
-
3542
- // src/utils/get-cursor-quadrants.ts
3543
- var getCursorQuadrants = (cursorX, cursorY, elementWidth, elementHeight, offset) => {
3544
- return [
3545
- {
3546
- left: Math.round(cursorX) + offset,
3547
- top: Math.round(cursorY) + offset
3548
- },
3549
- {
3550
- left: Math.round(cursorX) - elementWidth - offset,
3551
- top: Math.round(cursorY) + offset
3552
- },
3553
- {
3554
- left: Math.round(cursorX) + offset,
3555
- top: Math.round(cursorY) - elementHeight - offset
3556
- },
3557
- {
3558
- left: Math.round(cursorX) - elementWidth - offset,
3559
- top: Math.round(cursorY) - elementHeight - offset
3560
- }
3561
- ];
3562
- };
3563
-
3564
- // src/components/label.tsx
3565
- var _tmpl$3 = /* @__PURE__ */ template(`<div class="absolute top-0 left-0 bottom-0 bg-grab-pink/20 rounded-[3px] transition-[width] duration-100 ease-out pointer-events-none">`);
3566
- var _tmpl$22 = /* @__PURE__ */ template(`<span class="inline-block mr-1 font-semibold">\u2713`);
3567
- var _tmpl$32 = /* @__PURE__ */ template(`<div class=mr-1>Copied`);
3568
- var _tmpl$4 = /* @__PURE__ */ template(`<div class=ml-1>to clipboard`);
3569
- var _tmpl$5 = /* @__PURE__ */ template(`<div class="text-[9px] opacity-60 text-center mt-0.5">Click or drag to select`);
3570
- var _tmpl$6 = /* @__PURE__ */ template(`<div class="fixed bg-grab-pink-light text-grab-pink border border-grab-pink-border rounded text-[11px] font-medium font-sans pointer-events-none transition-opacity duration-200 ease-in-out overflow-hidden"style="max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))"><div class="relative py-0.5 px-1.5 flex flex-col"><div class="flex items-center text-ellipsis whitespace-nowrap">`);
3571
- var Label = (props) => {
3572
- let labelRef;
3573
- const position = useAnimatedPosition({
3574
- x: () => props.x,
3575
- y: () => props.y,
3576
- lerpFactor: 0.3
3577
- });
3578
- const opacity = useFadeInOut({
3579
- visible: props.visible,
3580
- autoFadeOutAfter: props.variant === "success" ? SUCCESS_LABEL_DURATION_MS : void 0
3581
- });
3582
- const labelBoundingRect = () => labelRef?.getBoundingClientRect();
3583
- const computedPosition = () => {
3584
- const boundingRect = labelBoundingRect();
3585
- if (!boundingRect) return {
3586
- left: position.x(),
3587
- top: position.y()
3588
- };
3589
- const viewportWidth = window.innerWidth;
3590
- const viewportHeight = window.innerHeight;
3591
- const quadrants = getCursorQuadrants(position.x(), position.y(), boundingRect.width, boundingRect.height, CURSOR_OFFSET_PX);
3592
- for (const position2 of quadrants) {
3593
- const fitsHorizontally = position2.left >= VIEWPORT_MARGIN_PX && position2.left + boundingRect.width <= viewportWidth - VIEWPORT_MARGIN_PX;
3594
- const fitsVertically = position2.top >= VIEWPORT_MARGIN_PX && position2.top + boundingRect.height <= viewportHeight - VIEWPORT_MARGIN_PX;
3595
- if (fitsHorizontally && fitsVertically) {
3596
- return position2;
3597
- }
3598
- }
3599
- const fallback = getClampedElementPosition(quadrants[0].left, quadrants[0].top, boundingRect.width, boundingRect.height);
3600
- fallback.left += INDICATOR_CLAMP_PADDING_PX;
3601
- fallback.top += INDICATOR_CLAMP_PADDING_PX;
3602
- return fallback;
3603
- };
3604
- return createComponent(Show, {
3605
- get when() {
3606
- return props.visible !== false;
3607
- },
3608
- get children() {
3609
- var _el$ = _tmpl$6(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild;
3610
- var _ref$ = labelRef;
3611
- typeof _ref$ === "function" ? use(_ref$, _el$) : labelRef = _el$;
3612
- insert(_el$, createComponent(Show, {
3613
- get when() {
3614
- return memo(() => props.variant === "processing")() && props.progress !== void 0;
3615
- },
3616
- get children() {
3617
- var _el$2 = _tmpl$3();
3618
- createRenderEffect((_$p) => setStyleProperty(_el$2, "width", `${Math.min(100, Math.max(0, (props.progress ?? 0) * 100))}%`));
3619
- return _el$2;
3620
- }
3621
- }), _el$3);
3622
- insert(_el$4, createComponent(Show, {
3623
- get when() {
3624
- return props.variant === "processing";
3625
- },
3626
- get children() {
3627
- return createComponent(Spinner, {});
3628
- }
3629
- }), null);
3630
- insert(_el$4, createComponent(Show, {
3631
- get when() {
3632
- return props.variant === "success";
3633
- },
3634
- get children() {
3635
- return _tmpl$22();
3636
- }
3637
- }), null);
3638
- insert(_el$4, createComponent(Show, {
3639
- get when() {
3640
- return props.variant === "success";
3641
- },
3642
- get children() {
3643
- return _tmpl$32();
3644
- }
3645
- }), null);
3646
- insert(_el$4, createComponent(Show, {
3647
- get when() {
3648
- return props.variant === "processing";
3649
- },
3650
- children: "Please wait\u2026"
3651
- }), null);
3652
- insert(_el$4, createComponent(Show, {
3653
- get when() {
3654
- return props.variant !== "processing";
3655
- },
3656
- get children() {
3657
- return props.content;
3658
- }
3659
- }), null);
3660
- insert(_el$4, createComponent(Show, {
3661
- get when() {
3662
- return props.variant === "success";
3663
- },
3664
- get children() {
3665
- return _tmpl$4();
3666
- }
3667
- }), null);
3668
- insert(_el$3, createComponent(Show, {
3669
- get when() {
3670
- return memo(() => props.variant === "hover")() && props.showHint;
3671
- },
3672
- get children() {
3673
- return _tmpl$5();
3674
- }
3675
- }), null);
3676
- createRenderEffect((_p$) => {
3677
- var _v$ = `${computedPosition().top}px`, _v$2 = `${computedPosition().left}px`, _v$3 = props.zIndex?.toString() ?? "2147483647", _v$4 = opacity();
3678
- _v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
3679
- _v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
3680
- _v$3 !== _p$.a && setStyleProperty(_el$, "z-index", _p$.a = _v$3);
3681
- _v$4 !== _p$.o && setStyleProperty(_el$, "opacity", _p$.o = _v$4);
3682
- return _p$;
3683
- }, {
3684
- e: void 0,
3685
- t: void 0,
3686
- a: void 0,
3687
- o: void 0
3688
- });
3689
- return _el$;
3690
- }
3691
- });
3692
- };
3693
-
3694
3525
  // src/components/crosshair.tsx
3695
- var _tmpl$7 = /* @__PURE__ */ template(`<canvas class="fixed top-0 left-0 pointer-events-none z-[2147483645]">`);
3526
+ var _tmpl$2 = /* @__PURE__ */ template(`<canvas class="fixed top-0 left-0 pointer-events-none z-[2147483645]">`);
3696
3527
  var Crosshair = (props) => {
3697
3528
  let canvasRef;
3698
3529
  let context = null;
@@ -3752,7 +3583,7 @@ var Crosshair = (props) => {
3752
3583
  return props.visible !== false;
3753
3584
  },
3754
3585
  get children() {
3755
- var _el$ = _tmpl$7();
3586
+ var _el$ = _tmpl$2();
3756
3587
  var _ref$ = canvasRef;
3757
3588
  typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
3758
3589
  return _el$;
@@ -3760,106 +3591,658 @@ var Crosshair = (props) => {
3760
3591
  });
3761
3592
  };
3762
3593
 
3763
- // src/components/input-overlay.tsx
3764
- var _tmpl$8 = /* @__PURE__ */ template(`<div data-react-grab-input class="fixed bg-grab-pink-light text-grab-pink border border-grab-pink-border rounded text-[11px] font-medium font-sans overflow-hidden"style="max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))"><div class="relative p-0.5 px-[3px] flex flex-col gap-0.5"><textarea placeholder="Make a change"rows=1 class="w-[150px] px-1 py-0.5 bg-white text-grab-pink border border-grab-pink-border rounded-[3px] text-[11px] leading-tight font-sans outline-none resize-none min-h-[18px] overflow-hidden"></textarea><div class="text-[9px] opacity-60 text-center">Enter \u23CE submit &middot; Esc cancel`);
3765
- var InputOverlay = (props) => {
3594
+ // src/components/icon-checkmark.tsx
3595
+ var _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 9 9"fill=none><path d="M1 4.5L3.5 7L8 1.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
3596
+ var IconCheckmark = (props) => {
3597
+ const size = () => props.size ?? 9;
3598
+ return (() => {
3599
+ var _el$ = _tmpl$3();
3600
+ createRenderEffect((_p$) => {
3601
+ var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3602
+ _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3603
+ _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3604
+ _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3605
+ return _p$;
3606
+ }, {
3607
+ e: void 0,
3608
+ t: void 0,
3609
+ a: void 0
3610
+ });
3611
+ return _el$;
3612
+ })();
3613
+ };
3614
+
3615
+ // src/components/icon-cursor-simple.tsx
3616
+ var _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 12 12"fill=none><path fill-rule=evenodd clip-rule=evenodd d="M0.675576 0.0318497C0.491988 -0.0369956 0.285105 0.0078173 0.146461 0.146461C0.0078173 0.285105 -0.0369956 0.491988 0.0318497 0.675576L4.15685 11.6756C4.2337 11.8805 4.43492 12.0117 4.65345 11.9992C4.87197 11.9868 5.057 11.8336 5.11009 11.6213L6.41232 6.41232L11.6213 5.11009C11.8336 5.057 11.9868 4.87197 11.9992 4.65345C12.0117 4.43492 11.8805 4.2337 11.6756 4.15685L0.675576 0.0318497Z"fill=currentColor>`);
3617
+ var IconCursorSimple = (props) => {
3618
+ const size = () => props.size ?? 9;
3619
+ return (() => {
3620
+ var _el$ = _tmpl$4();
3621
+ createRenderEffect((_p$) => {
3622
+ var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3623
+ _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3624
+ _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3625
+ _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3626
+ return _p$;
3627
+ }, {
3628
+ e: void 0,
3629
+ t: void 0,
3630
+ a: void 0
3631
+ });
3632
+ return _el$;
3633
+ })();
3634
+ };
3635
+
3636
+ // src/components/icon-open.tsx
3637
+ var _tmpl$5 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><path d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"></path><path d="M11 13l9-9"></path><path d="M15 4h5v5">`);
3638
+ var IconOpen = (props) => {
3639
+ const size = () => props.size ?? 12;
3640
+ return (() => {
3641
+ var _el$ = _tmpl$5();
3642
+ createRenderEffect((_p$) => {
3643
+ var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3644
+ _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3645
+ _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3646
+ _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3647
+ return _p$;
3648
+ }, {
3649
+ e: void 0,
3650
+ t: void 0,
3651
+ a: void 0
3652
+ });
3653
+ return _el$;
3654
+ })();
3655
+ };
3656
+
3657
+ // src/components/icon-return-key.tsx
3658
+ var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 12 12"><g fill=none stroke-linecap=round stroke-linejoin=round stroke-width=1 stroke=currentColor><path d=m1.25,6.75h8.5c.5523,0,1-.4477,1-1v-2.5c0-.5523-.4477-1-1-1h-1.75></path><polyline points="3.75 4 1 6.75 3.75 9.5">`);
3659
+ var IconReturnKey = (props) => {
3660
+ const size = () => props.size ?? 14;
3661
+ return (() => {
3662
+ var _el$ = _tmpl$6();
3663
+ createRenderEffect((_p$) => {
3664
+ var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3665
+ _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3666
+ _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3667
+ _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3668
+ return _p$;
3669
+ }, {
3670
+ e: void 0,
3671
+ t: void 0,
3672
+ a: void 0
3673
+ });
3674
+ return _el$;
3675
+ })();
3676
+ };
3677
+
3678
+ // src/components/icon-stop.tsx
3679
+ var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 9 9"fill=none><rect x=1 y=1 width=7 height=7 rx=1 fill=currentColor>`);
3680
+ var IconStop = (props) => {
3681
+ const size = () => props.size ?? 9;
3682
+ return (() => {
3683
+ var _el$ = _tmpl$7();
3684
+ createRenderEffect((_p$) => {
3685
+ var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3686
+ _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3687
+ _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3688
+ _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3689
+ return _p$;
3690
+ }, {
3691
+ e: void 0,
3692
+ t: void 0,
3693
+ a: void 0
3694
+ });
3695
+ return _el$;
3696
+ })();
3697
+ };
3698
+
3699
+ // src/components/selection-label.tsx
3700
+ var _tmpl$8 = /* @__PURE__ */ template(`<div style="background-image:linear-gradient(in oklab 180deg, oklab(88.7% 0.086 -0.058) 0%, oklab(83.2% 0.132 -0.089) 100%)"><span>`);
3701
+ var _tmpl$22 = /* @__PURE__ */ template(`<span>`);
3702
+ var _tmpl$32 = /* @__PURE__ */ template(`<button>`);
3703
+ var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
3704
+ var _tmpl$52 = /* @__PURE__ */ template(`<div class="flex items-center h-[18px] rounded-[1.5px] gap-[3px] px-[5px] py-px bg-label-success-bg border-[0.5px] border-solid border-label-success-border"><span class="text-label-success-text text-[12px] leading-4 font-medium tracking-[-0.04em]">`);
3705
+ var _tmpl$62 = /* @__PURE__ */ template(`<div class="absolute w-0 h-0"style="border-left:8px solid transparent;border-right:8px solid transparent;z-index:1">`);
3706
+ var _tmpl$72 = /* @__PURE__ */ template(`<div class="shrink-0 flex flex-col items-start px-2 py-[5px] w-full h-fit rounded-bl-[3px] rounded-br-[3px] border-t-[0.5px] border-t-solid border-t-label-divider">`);
3707
+ var _tmpl$82 = /* @__PURE__ */ template(`<div class="flex items-center gap-[3px]">`);
3708
+ var _tmpl$9 = /* @__PURE__ */ template(`<button class="flex items-center justify-center w-[18px] h-[18px] rounded-full cursor-pointer bg-black border-none transition-opacity hover:opacity-80"title=Stop>`);
3709
+ var _tmpl$0 = /* @__PURE__ */ template(`<div class="flex items-center gap-[3px] react-grab-shimmer rounded-[3px]">`);
3710
+ var _tmpl$1 = /* @__PURE__ */ template(`<div class="shrink-0 flex items-center gap-1 w-full h-[14px]"><span class="text-label-muted text-[12px] leading-3.5 shrink-0 tracking-[-0.04em] font-medium w-fit h-fit">to change`);
3711
+ var _tmpl$10 = /* @__PURE__ */ template(`<div class="shrink-0 flex flex-col justify-center items-start gap-1 w-fit h-fit"><div class="shrink-0 flex items-center gap-[3px] pt-1 w-fit h-fit px-1">`);
3712
+ var _tmpl$11 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-start w-full min-h-[14px]"><textarea class="text-black text-[12px] leading-3.5 tracking-[-0.04em] font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0"placeholder="type to modify..."rows=1 style=field-sizing:content;min-height:14px></textarea><button class="shrink-0 flex items-center gap-1 w-fit h-fit cursor-pointer bg-transparent border-none p-0 ml-1 mt-[2.5px]">`);
3713
+ var _tmpl$12 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events class="fixed font-sans antialiased transition-opacity duration-300 ease-out"style=z-index:2147483647><div class="relative flex items-center gap-[5px] bg-white rounded-[3px]"style="box-shadow:#00000033 0px 2px 3px">`);
3714
+ var ARROW_HEIGHT = 8;
3715
+ var LABEL_GAP = 4;
3716
+ var TagBadge = (props) => {
3717
+ const [isHovered, setIsHovered] = createSignal(false);
3718
+ const handleMouseEnter = () => {
3719
+ setIsHovered(true);
3720
+ props.onHoverChange?.(true);
3721
+ };
3722
+ const handleMouseLeave = () => {
3723
+ setIsHovered(false);
3724
+ props.onHoverChange?.(false);
3725
+ };
3726
+ return (() => {
3727
+ var _el$ = _tmpl$8(), _el$2 = _el$.firstChild;
3728
+ addEventListener(_el$, "click", props.onClick);
3729
+ _el$.addEventListener("mouseleave", handleMouseLeave);
3730
+ _el$.addEventListener("mouseenter", handleMouseEnter);
3731
+ insert(_el$2, () => props.tagName);
3732
+ insert(_el$, createComponent(Show, {
3733
+ get when() {
3734
+ return props.isClickable;
3735
+ },
3736
+ get children() {
3737
+ return createComponent(IconOpen, {
3738
+ size: 10,
3739
+ get ["class"]() {
3740
+ return cn("text-label-tag-border transition-all duration-100", isHovered() ? "opacity-100 scale-100" : "opacity-0 scale-75 -ml-[5px] w-0");
3741
+ }
3742
+ });
3743
+ }
3744
+ }), null);
3745
+ createRenderEffect((_p$) => {
3746
+ var _v$ = cn("flex items-center px-1 py-px h-[18px] rounded-[1.5px] gap-[5px] border-[0.5px] border-solid border-label-tag-border", props.shrink && "shrink-0 w-fit", props.isClickable && "cursor-pointer"), _v$2 = cn("text-label-tag-text text-[12px] leading-4 font-medium tracking-[-0.04em]", props.showMono && "font-mono", props.shrink && "shrink-0 w-fit h-fit");
3747
+ _v$ !== _p$.e && className(_el$, _p$.e = _v$);
3748
+ _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
3749
+ return _p$;
3750
+ }, {
3751
+ e: void 0,
3752
+ t: void 0
3753
+ });
3754
+ return _el$;
3755
+ })();
3756
+ };
3757
+ var ActionPill = (props) => {
3758
+ const baseClass = cn("flex items-center h-[18px] rounded-[1.5px] gap-[3px] px-[5px] py-px border-[0.5px] border-solid border-label-gray-border", props.shrink && "shrink-0 w-fit", props.asButton && "cursor-pointer bg-transparent", props.dimmed && "opacity-50 hover:opacity-100 transition-opacity");
3759
+ const content = [memo(() => props.icon), (() => {
3760
+ var _el$3 = _tmpl$22();
3761
+ insert(_el$3, () => props.label);
3762
+ createRenderEffect(() => className(_el$3, cn("text-black text-[12px] leading-4 font-medium tracking-[-0.04em]", props.shrink && "shrink-0 w-fit h-fit")));
3763
+ return _el$3;
3764
+ })()];
3765
+ return props.asButton ? (() => {
3766
+ var _el$4 = _tmpl$32();
3767
+ addEventListener(_el$4, "click", props.onClick);
3768
+ className(_el$4, baseClass);
3769
+ insert(_el$4, content);
3770
+ return _el$4;
3771
+ })() : (() => {
3772
+ var _el$5 = _tmpl$42();
3773
+ addEventListener(_el$5, "click", props.onClick);
3774
+ className(_el$5, baseClass);
3775
+ insert(_el$5, content);
3776
+ createRenderEffect(() => setAttribute(_el$5, "role", props.onClick ? "button" : void 0));
3777
+ return _el$5;
3778
+ })();
3779
+ };
3780
+ var SuccessPill = (props) => (() => {
3781
+ var _el$6 = _tmpl$52(), _el$7 = _el$6.firstChild;
3782
+ insert(_el$6, createComponent(IconCheckmark, {
3783
+ size: 9,
3784
+ "class": "text-label-success-text shrink-0"
3785
+ }), _el$7);
3786
+ insert(_el$7, () => props.hasAgent ? "Completed" : "Copied");
3787
+ return _el$6;
3788
+ })();
3789
+ var Arrow = (props) => (() => {
3790
+ var _el$8 = _tmpl$62();
3791
+ createRenderEffect((_$p) => style(_el$8, {
3792
+ left: `${props.leftPx}px`,
3793
+ ...props.position === "bottom" ? {
3794
+ top: "0",
3795
+ transform: "translateX(-50%) translateY(-100%)"
3796
+ } : {
3797
+ bottom: "0",
3798
+ transform: "translateX(-50%) translateY(100%)"
3799
+ },
3800
+ ...props.position === "bottom" ? {
3801
+ "border-bottom": "8px solid white"
3802
+ } : {
3803
+ "border-top": "8px solid white"
3804
+ }
3805
+ }, _$p));
3806
+ return _el$8;
3807
+ })();
3808
+ var ClickToCopyPill = (props) => createComponent(ActionPill, {
3809
+ get icon() {
3810
+ return createComponent(IconCursorSimple, {
3811
+ size: 9,
3812
+ "class": "text-black shrink-0"
3813
+ });
3814
+ },
3815
+ label: "Click to copy",
3816
+ get onClick() {
3817
+ return props.onClick;
3818
+ },
3819
+ get asButton() {
3820
+ return props.asButton;
3821
+ },
3822
+ get dimmed() {
3823
+ return props.dimmed;
3824
+ },
3825
+ get shrink() {
3826
+ return props.shrink;
3827
+ }
3828
+ });
3829
+ var BottomSection = (props) => (() => {
3830
+ var _el$9 = _tmpl$72();
3831
+ insert(_el$9, () => props.children);
3832
+ return _el$9;
3833
+ })();
3834
+ var SelectionLabel = (props) => {
3766
3835
  let containerRef;
3767
3836
  let inputRef;
3768
- const position = useAnimatedPosition({
3769
- x: () => props.x,
3770
- y: () => props.y,
3771
- lerpFactor: 0.3
3837
+ let isTagCurrentlyHovered = false;
3838
+ const [measuredWidth, setMeasuredWidth] = createSignal(0);
3839
+ const [measuredHeight, setMeasuredHeight] = createSignal(0);
3840
+ const [arrowPosition, setArrowPosition] = createSignal("bottom");
3841
+ const [viewportVersion, setViewportVersion] = createSignal(0);
3842
+ const isNotProcessing = () => props.status !== "copying" && props.status !== "copied" && props.status !== "fading";
3843
+ const measureContainer = () => {
3844
+ if (containerRef && !isTagCurrentlyHovered) {
3845
+ const rect = containerRef.getBoundingClientRect();
3846
+ setMeasuredWidth(rect.width);
3847
+ setMeasuredHeight(rect.height);
3848
+ }
3849
+ };
3850
+ const handleTagHoverChange = (hovered) => {
3851
+ isTagCurrentlyHovered = hovered;
3852
+ };
3853
+ const handleViewportChange = () => {
3854
+ setViewportVersion((version) => version + 1);
3855
+ };
3856
+ onMount(() => {
3857
+ measureContainer();
3858
+ window.addEventListener("scroll", handleViewportChange, true);
3859
+ window.addEventListener("resize", handleViewportChange);
3860
+ });
3861
+ onCleanup(() => {
3862
+ window.removeEventListener("scroll", handleViewportChange, true);
3863
+ window.removeEventListener("resize", handleViewportChange);
3864
+ });
3865
+ createEffect(() => {
3866
+ if (props.visible) {
3867
+ requestAnimationFrame(measureContainer);
3868
+ }
3869
+ });
3870
+ createEffect(() => {
3871
+ void [props.status, props.isInputExpanded, props.inputValue];
3872
+ requestAnimationFrame(measureContainer);
3873
+ });
3874
+ createEffect(() => {
3875
+ if (props.isInputExpanded && inputRef) {
3876
+ setTimeout(() => {
3877
+ inputRef?.focus();
3878
+ }, 0);
3879
+ }
3772
3880
  });
3773
- const containerBoundingRect = () => containerRef?.getBoundingClientRect();
3774
3881
  const computedPosition = () => {
3775
- const boundingRect = containerBoundingRect();
3776
- if (!boundingRect) return {
3777
- left: position.x(),
3778
- top: position.y()
3779
- };
3882
+ viewportVersion();
3883
+ const bounds = props.selectionBounds;
3884
+ const labelWidth = measuredWidth();
3885
+ const labelHeight = measuredHeight();
3886
+ if (!bounds || labelWidth === 0 || labelHeight === 0) {
3887
+ return {
3888
+ left: -9999,
3889
+ top: -9999,
3890
+ arrowLeft: 0
3891
+ };
3892
+ }
3780
3893
  const viewportWidth = window.innerWidth;
3781
3894
  const viewportHeight = window.innerHeight;
3782
- const quadrants = getCursorQuadrants(position.x(), position.y(), boundingRect.width, boundingRect.height, CURSOR_OFFSET_PX);
3783
- for (const position2 of quadrants) {
3784
- const fitsHorizontally = position2.left >= VIEWPORT_MARGIN_PX && position2.left + boundingRect.width <= viewportWidth - VIEWPORT_MARGIN_PX;
3785
- const fitsVertically = position2.top >= VIEWPORT_MARGIN_PX && position2.top + boundingRect.height <= viewportHeight - VIEWPORT_MARGIN_PX;
3786
- if (fitsHorizontally && fitsVertically) {
3787
- return position2;
3788
- }
3895
+ const selectionCenterX = bounds.x + bounds.width / 2;
3896
+ const selectionBottom = bounds.y + bounds.height;
3897
+ const selectionTop = bounds.y;
3898
+ let positionLeft = selectionCenterX - labelWidth / 2;
3899
+ let positionTop = selectionBottom + ARROW_HEIGHT + LABEL_GAP;
3900
+ if (positionLeft + labelWidth > viewportWidth - VIEWPORT_MARGIN_PX) {
3901
+ positionLeft = viewportWidth - labelWidth - VIEWPORT_MARGIN_PX;
3902
+ }
3903
+ if (positionLeft < VIEWPORT_MARGIN_PX) {
3904
+ positionLeft = VIEWPORT_MARGIN_PX;
3905
+ }
3906
+ const totalHeightNeeded = labelHeight + ARROW_HEIGHT + LABEL_GAP;
3907
+ const fitsBelow = positionTop + labelHeight <= viewportHeight - VIEWPORT_MARGIN_PX;
3908
+ if (!fitsBelow) {
3909
+ positionTop = selectionTop - totalHeightNeeded;
3910
+ setArrowPosition("top");
3911
+ } else {
3912
+ setArrowPosition("bottom");
3789
3913
  }
3790
- const fallback = getClampedElementPosition(quadrants[0].left, quadrants[0].top, boundingRect.width, boundingRect.height);
3791
- fallback.left += INDICATOR_CLAMP_PADDING_PX;
3792
- fallback.top += INDICATOR_CLAMP_PADDING_PX;
3793
- return fallback;
3914
+ if (positionTop < VIEWPORT_MARGIN_PX) {
3915
+ positionTop = VIEWPORT_MARGIN_PX;
3916
+ }
3917
+ const arrowLeft = Math.max(12, Math.min(selectionCenterX - positionLeft, labelWidth - 12));
3918
+ return {
3919
+ left: positionLeft,
3920
+ top: positionTop,
3921
+ arrowLeft
3922
+ };
3794
3923
  };
3795
3924
  const handleKeyDown = (event) => {
3925
+ event.stopPropagation();
3796
3926
  if (event.code === "Enter" && !event.shiftKey) {
3797
3927
  event.preventDefault();
3798
- event.stopPropagation();
3799
- props.onSubmit();
3928
+ props.onSubmit?.();
3800
3929
  } else if (event.code === "Escape") {
3801
3930
  event.preventDefault();
3802
- event.stopPropagation();
3803
- props.onCancel();
3931
+ props.onCancel?.();
3804
3932
  }
3805
3933
  };
3806
3934
  const handleInput = (event) => {
3807
3935
  const target = event.target;
3808
- props.onInput(target.value);
3809
- target.style.height = "auto";
3810
- target.style.height = `${target.scrollHeight}px`;
3936
+ props.onInputChange?.(target.value);
3811
3937
  };
3812
- createEffect(() => {
3813
- if (props.visible && inputRef) {
3814
- inputRef.focus();
3815
- inputRef.style.height = "auto";
3816
- } else if (!props.visible && inputRef) {
3817
- inputRef.blur();
3938
+ const tagDisplay = () => props.tagName || "element";
3939
+ const handleTagClick = (event) => {
3940
+ event.stopPropagation();
3941
+ event.stopImmediatePropagation();
3942
+ if (props.filePath && props.onOpen) {
3943
+ props.onOpen();
3818
3944
  }
3819
- });
3820
- return (() => {
3821
- var _el$ = _tmpl$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
3822
- var _ref$ = containerRef;
3823
- typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
3824
- _el$3.$$keydown = handleKeyDown;
3825
- _el$3.$$input = handleInput;
3826
- var _ref$2 = inputRef;
3827
- typeof _ref$2 === "function" ? use(_ref$2, _el$3) : inputRef = _el$3;
3828
- createRenderEffect((_p$) => {
3829
- var _v$ = props.visible ? "block" : "none", _v$2 = `${computedPosition().top}px`, _v$3 = `${computedPosition().left}px`, _v$4 = props.zIndex?.toString() ?? "2147483647", _v$5 = props.visible ? "auto" : "none";
3830
- _v$ !== _p$.e && setStyleProperty(_el$, "display", _p$.e = _v$);
3831
- _v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
3832
- _v$3 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$3);
3833
- _v$4 !== _p$.o && setStyleProperty(_el$, "z-index", _p$.o = _v$4);
3834
- _v$5 !== _p$.i && setStyleProperty(_el$, "pointer-events", _p$.i = _v$5);
3835
- return _p$;
3836
- }, {
3837
- e: void 0,
3838
- t: void 0,
3839
- a: void 0,
3840
- o: void 0,
3841
- i: void 0
3842
- });
3843
- createRenderEffect(() => _el$3.value = props.value);
3844
- return _el$;
3845
- })();
3846
- };
3847
- delegateEvents(["input", "keydown"]);
3848
-
3849
- // src/components/renderer.tsx
3850
- var ReactGrabRenderer = (props) => {
3851
- return [createComponent(Show, {
3945
+ };
3946
+ const isTagClickable = () => Boolean(props.filePath && props.onOpen);
3947
+ const stopPropagation = (event) => {
3948
+ event.stopPropagation();
3949
+ event.stopImmediatePropagation();
3950
+ };
3951
+ const handleSubmit = () => props.onSubmit?.();
3952
+ return createComponent(Show, {
3852
3953
  get when() {
3853
- return memo(() => !!props.selectionVisible)() && props.selectionBounds;
3954
+ return memo(() => props.visible !== false)() && props.selectionBounds;
3854
3955
  },
3855
3956
  get children() {
3856
- return createComponent(SelectionBox, {
3857
- variant: "selection",
3858
- get bounds() {
3957
+ var _el$0 = _tmpl$12(), _el$1 = _el$0.firstChild;
3958
+ _el$0.$$click = stopPropagation;
3959
+ _el$0.$$mousedown = stopPropagation;
3960
+ var _ref$ = containerRef;
3961
+ typeof _ref$ === "function" ? use(_ref$, _el$0) : containerRef = _el$0;
3962
+ insert(_el$0, createComponent(Arrow, {
3963
+ get position() {
3964
+ return arrowPosition();
3965
+ },
3966
+ get leftPx() {
3967
+ return computedPosition().arrowLeft;
3968
+ }
3969
+ }), _el$1);
3970
+ insert(_el$1, createComponent(Show, {
3971
+ get when() {
3972
+ return props.status === "copied" || props.status === "fading";
3973
+ },
3974
+ get children() {
3975
+ var _el$10 = _tmpl$82();
3976
+ insert(_el$10, createComponent(TagBadge, {
3977
+ get tagName() {
3978
+ return tagDisplay();
3979
+ },
3980
+ get isClickable() {
3981
+ return isTagClickable();
3982
+ },
3983
+ onClick: handleTagClick,
3984
+ onHoverChange: handleTagHoverChange
3985
+ }), null);
3986
+ insert(_el$10, createComponent(SuccessPill, {
3987
+ get hasAgent() {
3988
+ return props.hasAgent;
3989
+ }
3990
+ }), null);
3991
+ return _el$10;
3992
+ }
3993
+ }), null);
3994
+ insert(_el$1, createComponent(Show, {
3995
+ get when() {
3996
+ return props.status === "copying";
3997
+ },
3998
+ get children() {
3999
+ var _el$11 = _tmpl$0();
4000
+ insert(_el$11, createComponent(TagBadge, {
4001
+ get tagName() {
4002
+ return tagDisplay();
4003
+ },
4004
+ get isClickable() {
4005
+ return isTagClickable();
4006
+ },
4007
+ onClick: handleTagClick,
4008
+ onHoverChange: handleTagHoverChange,
4009
+ showMono: true
4010
+ }), null);
4011
+ insert(_el$11, createComponent(ActionPill, {
4012
+ get icon() {
4013
+ return createComponent(IconCursorSimple, {
4014
+ size: 9,
4015
+ "class": "text-black shrink-0"
4016
+ });
4017
+ },
4018
+ get label() {
4019
+ return props.statusText ?? "Grabbing\u2026";
4020
+ }
4021
+ }), null);
4022
+ insert(_el$11, createComponent(Show, {
4023
+ get when() {
4024
+ return memo(() => !!props.hasAgent)() && props.onAbort;
4025
+ },
4026
+ get children() {
4027
+ var _el$12 = _tmpl$9();
4028
+ _el$12.$$click = (event) => {
4029
+ event.preventDefault();
4030
+ event.stopPropagation();
4031
+ event.stopImmediatePropagation();
4032
+ props.onAbort?.();
4033
+ };
4034
+ _el$12.$$mousedown = (event) => {
4035
+ event.preventDefault();
4036
+ event.stopPropagation();
4037
+ event.stopImmediatePropagation();
4038
+ };
4039
+ insert(_el$12, createComponent(IconStop, {
4040
+ size: 8,
4041
+ "class": "text-white"
4042
+ }));
4043
+ return _el$12;
4044
+ }
4045
+ }), null);
4046
+ return _el$11;
4047
+ }
4048
+ }), null);
4049
+ insert(_el$1, createComponent(Show, {
4050
+ get when() {
4051
+ return memo(() => !!isNotProcessing())() && !props.isInputExpanded;
4052
+ },
4053
+ get children() {
4054
+ var _el$13 = _tmpl$10(), _el$14 = _el$13.firstChild;
4055
+ insert(_el$14, createComponent(TagBadge, {
4056
+ get tagName() {
4057
+ return tagDisplay();
4058
+ },
4059
+ get isClickable() {
4060
+ return isTagClickable();
4061
+ },
4062
+ onClick: handleTagClick,
4063
+ onHoverChange: handleTagHoverChange,
4064
+ showMono: true,
4065
+ shrink: true
4066
+ }), null);
4067
+ insert(_el$14, createComponent(ClickToCopyPill, {
4068
+ onClick: handleSubmit,
4069
+ shrink: true
4070
+ }), null);
4071
+ insert(_el$13, createComponent(BottomSection, {
4072
+ get children() {
4073
+ var _el$15 = _tmpl$1(), _el$16 = _el$15.firstChild;
4074
+ insert(_el$15, createComponent(IconReturnKey, {
4075
+ size: 12,
4076
+ "class": "shrink-0 text-black opacity-[0.65]"
4077
+ }), _el$16);
4078
+ return _el$15;
4079
+ }
4080
+ }), null);
4081
+ return _el$13;
4082
+ }
4083
+ }), null);
4084
+ insert(_el$1, createComponent(Show, {
4085
+ get when() {
4086
+ return memo(() => !!isNotProcessing())() && props.isInputExpanded;
4087
+ },
4088
+ get children() {
4089
+ var _el$17 = _tmpl$10(), _el$18 = _el$17.firstChild;
4090
+ insert(_el$18, createComponent(TagBadge, {
4091
+ get tagName() {
4092
+ return tagDisplay();
4093
+ },
4094
+ get isClickable() {
4095
+ return isTagClickable();
4096
+ },
4097
+ onClick: handleTagClick,
4098
+ onHoverChange: handleTagHoverChange,
4099
+ showMono: true,
4100
+ shrink: true
4101
+ }), null);
4102
+ insert(_el$18, createComponent(ClickToCopyPill, {
4103
+ onClick: handleSubmit,
4104
+ dimmed: true,
4105
+ shrink: true
4106
+ }), null);
4107
+ insert(_el$17, createComponent(BottomSection, {
4108
+ get children() {
4109
+ var _el$19 = _tmpl$11(), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling;
4110
+ _el$20.$$keydown = handleKeyDown;
4111
+ _el$20.$$input = handleInput;
4112
+ var _ref$2 = inputRef;
4113
+ typeof _ref$2 === "function" ? use(_ref$2, _el$20) : inputRef = _el$20;
4114
+ _el$21.$$click = handleSubmit;
4115
+ insert(_el$21, createComponent(IconReturnKey, {
4116
+ size: 12,
4117
+ "class": "shrink-0 text-black"
4118
+ }));
4119
+ createRenderEffect(() => _el$20.value = props.inputValue ?? "");
4120
+ return _el$19;
4121
+ }
4122
+ }), null);
4123
+ return _el$17;
4124
+ }
4125
+ }), null);
4126
+ createRenderEffect((_p$) => {
4127
+ var _v$3 = `${computedPosition().top}px`, _v$4 = `${computedPosition().left}px`, _v$5 = props.visible ? "auto" : "none", _v$6 = props.status === "fading" ? 0 : 1, _v$7 = !isNotProcessing() ? "4px" : "0";
4128
+ _v$3 !== _p$.e && setStyleProperty(_el$0, "top", _p$.e = _v$3);
4129
+ _v$4 !== _p$.t && setStyleProperty(_el$0, "left", _p$.t = _v$4);
4130
+ _v$5 !== _p$.a && setStyleProperty(_el$0, "pointer-events", _p$.a = _v$5);
4131
+ _v$6 !== _p$.o && setStyleProperty(_el$0, "opacity", _p$.o = _v$6);
4132
+ _v$7 !== _p$.i && setStyleProperty(_el$1, "padding", _p$.i = _v$7);
4133
+ return _p$;
4134
+ }, {
4135
+ e: void 0,
4136
+ t: void 0,
4137
+ a: void 0,
4138
+ o: void 0,
4139
+ i: void 0
4140
+ });
4141
+ return _el$0;
4142
+ }
4143
+ });
4144
+ };
4145
+ delegateEvents(["click", "mousedown", "input", "keydown"]);
4146
+
4147
+ // src/components/selection-cursor.tsx
4148
+ var _tmpl$13 = /* @__PURE__ */ template(`<div class="fixed z-2147483647"><button data-react-grab-selection-cursor>`);
4149
+ var SelectionCursor = (props) => {
4150
+ const [isHovered, setIsHovered] = createSignal(false);
4151
+ const [debouncedVisible, setDebouncedVisible] = createSignal(false);
4152
+ createEffect(() => {
4153
+ const isVisible = props.visible !== false;
4154
+ void [props.x, props.y];
4155
+ setDebouncedVisible(false);
4156
+ if (isVisible) {
4157
+ const timeout = setTimeout(() => setDebouncedVisible(true), SELECTION_CURSOR_SETTLE_DELAY_MS);
4158
+ onCleanup(() => clearTimeout(timeout));
4159
+ }
4160
+ });
4161
+ const handleClick = (event) => {
4162
+ event.preventDefault();
4163
+ event.stopPropagation();
4164
+ props.onClick?.();
4165
+ };
4166
+ return createComponent(Show, {
4167
+ get when() {
4168
+ return debouncedVisible();
4169
+ },
4170
+ get children() {
4171
+ return [createComponent(Show, {
4172
+ get when() {
4173
+ return memo(() => !!isHovered())() && props.elementBounds;
4174
+ },
4175
+ get children() {
4176
+ return createComponent(SelectionBox, {
4177
+ variant: "selection",
4178
+ get bounds() {
4179
+ return props.elementBounds;
4180
+ },
4181
+ visible: true
4182
+ });
4183
+ }
4184
+ }), (() => {
4185
+ var _el$ = _tmpl$13(), _el$2 = _el$.firstChild;
4186
+ _el$.addEventListener("mouseleave", () => setIsHovered(false));
4187
+ _el$.addEventListener("mouseenter", () => setIsHovered(true));
4188
+ _el$2.$$click = handleClick;
4189
+ createRenderEffect((_p$) => {
4190
+ var _v$ = `${props.x}px`, _v$2 = `${props.y}px`, _v$3 = cn("absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 bg-grab-pink cursor-pointer rounded-full transition-[width,height] duration-150", isHovered() ? "w-1 h-5.5 brightness-125" : "w-0.5 h-5 animate-pulse");
4191
+ _v$ !== _p$.e && setStyleProperty(_el$, "left", _p$.e = _v$);
4192
+ _v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
4193
+ _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
4194
+ return _p$;
4195
+ }, {
4196
+ e: void 0,
4197
+ t: void 0,
4198
+ a: void 0
4199
+ });
4200
+ return _el$;
4201
+ })(), createComponent(Show, {
4202
+ get when() {
4203
+ return memo(() => !!isHovered())() && props.elementBounds;
4204
+ },
4205
+ get children() {
4206
+ return createComponent(SelectionLabel, {
4207
+ get tagName() {
4208
+ return props.tagName;
4209
+ },
4210
+ get selectionBounds() {
4211
+ return props.elementBounds;
4212
+ },
4213
+ visible: true,
4214
+ get onSubmit() {
4215
+ return props.onClick;
4216
+ }
4217
+ });
4218
+ }
4219
+ })];
4220
+ }
4221
+ });
4222
+ };
4223
+ delegateEvents(["click"]);
4224
+
4225
+ // src/components/renderer.tsx
4226
+ var truncateStatus = (status, maxLength = 30) => {
4227
+ if (status.length <= maxLength) return status;
4228
+ return `${status.slice(0, maxLength)}\u2026`;
4229
+ };
4230
+ var ReactGrabRenderer = (props) => {
4231
+ return [createComponent(Show, {
4232
+ get when() {
4233
+ return memo(() => !!props.selectionVisible)() && props.selectionBounds;
4234
+ },
4235
+ get children() {
4236
+ return createComponent(SelectionBox, {
4237
+ variant: "selection",
4238
+ get bounds() {
3859
4239
  return props.selectionBounds;
3860
4240
  },
3861
4241
  get visible() {
3862
4242
  return props.selectionVisible;
4243
+ },
4244
+ get isFading() {
4245
+ return props.selectionLabelStatus === "fading";
3863
4246
  }
3864
4247
  });
3865
4248
  }
@@ -3906,86 +4289,141 @@ var ReactGrabRenderer = (props) => {
3906
4289
  return box.createdAt;
3907
4290
  }
3908
4291
  })
4292
+ }), createComponent(For, {
4293
+ get each() {
4294
+ return memo(() => !!props.agentSessions)() ? Array.from(props.agentSessions.values()) : [];
4295
+ },
4296
+ children: (session) => [createComponent(Show, {
4297
+ get when() {
4298
+ return session.selectionBounds;
4299
+ },
4300
+ get children() {
4301
+ return createComponent(SelectionBox, {
4302
+ variant: "processing",
4303
+ get bounds() {
4304
+ return session.selectionBounds;
4305
+ },
4306
+ visible: true
4307
+ });
4308
+ }
4309
+ }), createComponent(SelectionLabel, {
4310
+ get tagName() {
4311
+ return session.tagName;
4312
+ },
4313
+ get selectionBounds() {
4314
+ return session.selectionBounds;
4315
+ },
4316
+ visible: true,
4317
+ hasAgent: true,
4318
+ get status() {
4319
+ return session.isStreaming ? "copying" : "copied";
4320
+ },
4321
+ get statusText() {
4322
+ return truncateStatus(session.lastStatus || "Please wait\u2026");
4323
+ },
4324
+ onAbort: () => props.onAbortSession?.(session.id)
4325
+ })]
3909
4326
  }), createComponent(Show, {
3910
4327
  get when() {
3911
- return props.labelVariant !== "processing";
4328
+ return memo(() => !!props.selectionLabelVisible)() && props.selectionBounds;
3912
4329
  },
3913
4330
  get children() {
3914
- return createComponent(For, {
3915
- get each() {
3916
- return props.successLabels ?? [];
4331
+ return createComponent(SelectionLabel, {
4332
+ get tagName() {
4333
+ return props.selectionTagName;
3917
4334
  },
3918
- children: (label) => createComponent(Label, {
3919
- variant: "success",
3920
- get content() {
3921
- return memo(() => label.text);
3922
- },
3923
- get x() {
3924
- return props.mouseX ?? 0;
3925
- },
3926
- get y() {
3927
- return props.mouseY ?? 0;
4335
+ get selectionBounds() {
4336
+ return props.selectionBounds;
4337
+ },
4338
+ get visible() {
4339
+ return props.selectionLabelVisible;
4340
+ },
4341
+ get isInputExpanded() {
4342
+ return props.isInputExpanded;
4343
+ },
4344
+ get inputValue() {
4345
+ return props.inputValue;
4346
+ },
4347
+ get hasAgent() {
4348
+ return props.hasAgent;
4349
+ },
4350
+ get status() {
4351
+ return props.selectionLabelStatus;
4352
+ },
4353
+ get filePath() {
4354
+ return props.selectionFilePath;
4355
+ },
4356
+ get lineNumber() {
4357
+ return props.selectionLineNumber;
4358
+ },
4359
+ get onInputChange() {
4360
+ return props.onInputChange;
4361
+ },
4362
+ get onSubmit() {
4363
+ return props.onInputSubmit;
4364
+ },
4365
+ get onCancel() {
4366
+ return props.onInputCancel;
4367
+ },
4368
+ get onToggleExpand() {
4369
+ return props.onToggleExpand;
4370
+ },
4371
+ onOpen: () => {
4372
+ if (props.selectionFilePath) {
4373
+ const openFileUrl = buildOpenFileUrl(props.selectionFilePath, props.selectionLineNumber);
4374
+ window.open(openFileUrl, "_blank");
3928
4375
  }
3929
- })
4376
+ }
3930
4377
  });
3931
4378
  }
4379
+ }), createComponent(For, {
4380
+ get each() {
4381
+ return props.labelInstances ?? [];
4382
+ },
4383
+ children: (instance) => createComponent(SelectionLabel, {
4384
+ get tagName() {
4385
+ return instance.tagName;
4386
+ },
4387
+ get selectionBounds() {
4388
+ return instance.bounds;
4389
+ },
4390
+ visible: true,
4391
+ get status() {
4392
+ return instance.status;
4393
+ }
4394
+ })
3932
4395
  }), createComponent(Show, {
3933
4396
  get when() {
3934
- return memo(() => !!(props.labelVisible && props.labelVariant && props.labelContent !== void 0 && props.labelX !== void 0))() && props.labelY !== void 0;
4397
+ return memo(() => !!(props.nativeSelectionCursorVisible && props.nativeSelectionCursorX !== void 0))() && props.nativeSelectionCursorY !== void 0;
3935
4398
  },
3936
4399
  get children() {
3937
- return createComponent(Label, {
3938
- get variant() {
3939
- return props.labelVariant;
3940
- },
3941
- get content() {
3942
- return props.labelContent;
3943
- },
4400
+ return createComponent(SelectionCursor, {
3944
4401
  get x() {
3945
- return props.labelX;
4402
+ return props.nativeSelectionCursorX;
3946
4403
  },
3947
4404
  get y() {
3948
- return props.labelY;
4405
+ return props.nativeSelectionCursorY;
3949
4406
  },
3950
- get visible() {
3951
- return props.labelVisible;
4407
+ get tagName() {
4408
+ return props.nativeSelectionTagName;
4409
+ },
4410
+ get componentName() {
4411
+ return props.nativeSelectionComponentName;
3952
4412
  },
3953
- get zIndex() {
3954
- return props.labelZIndex;
4413
+ get elementBounds() {
4414
+ return props.nativeSelectionBounds;
3955
4415
  },
3956
- get progress() {
3957
- return props.progress;
4416
+ get visible() {
4417
+ return props.nativeSelectionCursorVisible;
4418
+ },
4419
+ get onClick() {
4420
+ return props.onNativeSelectionCopy;
3958
4421
  },
3959
- get showHint() {
3960
- return props.labelShowHint;
4422
+ get onEnter() {
4423
+ return props.onNativeSelectionEnter;
3961
4424
  }
3962
4425
  });
3963
4426
  }
3964
- }), createComponent(InputOverlay, {
3965
- get x() {
3966
- return props.inputX ?? 0;
3967
- },
3968
- get y() {
3969
- return props.inputY ?? 0;
3970
- },
3971
- get zIndex() {
3972
- return props.labelZIndex;
3973
- },
3974
- get value() {
3975
- return props.inputValue ?? "";
3976
- },
3977
- get visible() {
3978
- return props.inputVisible ?? false;
3979
- },
3980
- get onInput() {
3981
- return props.onInputChange;
3982
- },
3983
- get onSubmit() {
3984
- return props.onInputSubmit;
3985
- },
3986
- get onCancel() {
3987
- return props.onInputCancel;
3988
- }
3989
4427
  })];
3990
4428
  };
3991
4429
 
@@ -4829,7 +5267,7 @@ var je2 = (e2) => {
4829
5267
  var isCapitalized = (value) => value.length > 0 && /^[A-Z]/.test(value);
4830
5268
 
4831
5269
  // src/instrumentation.ts
4832
- var NEXT_INTERNAL_COMPONENT_NAMES = [
5270
+ var NEXT_INTERNAL_COMPONENT_NAMES = /* @__PURE__ */ new Set([
4833
5271
  "InnerLayoutRouter",
4834
5272
  "RedirectErrorBoundary",
4835
5273
  "RedirectBoundary",
@@ -4843,28 +5281,23 @@ var NEXT_INTERNAL_COMPONENT_NAMES = [
4843
5281
  "OuterLayoutRouter",
4844
5282
  "body",
4845
5283
  "html",
4846
- "RedirectErrorBoundary",
4847
- "RedirectBoundary",
4848
- "HTTPAccessFallbackErrorBoundary",
4849
- "HTTPAccessFallbackBoundary",
4850
5284
  "DevRootHTTPAccessFallbackBoundary",
4851
5285
  "AppDevOverlayErrorBoundary",
4852
5286
  "AppDevOverlay",
4853
5287
  "HotReload",
4854
5288
  "Router",
4855
5289
  "ErrorBoundaryHandler",
4856
- "ErrorBoundary",
4857
5290
  "AppRouter",
4858
5291
  "ServerRoot",
4859
5292
  "SegmentStateProvider",
4860
5293
  "RootErrorBoundary"
4861
- ];
5294
+ ]);
4862
5295
  var checkIsNextProject = () => {
4863
5296
  return Boolean(document.getElementById("__NEXT_DATA__"));
4864
5297
  };
4865
5298
  var checkIsInternalComponentName = (name) => {
4866
5299
  if (name.startsWith("_")) return true;
4867
- if (NEXT_INTERNAL_COMPONENT_NAMES.includes(name)) return true;
5300
+ if (NEXT_INTERNAL_COMPONENT_NAMES.has(name)) return true;
4868
5301
  return false;
4869
5302
  };
4870
5303
  var checkIsSourceComponentName = (name) => {
@@ -4930,20 +5363,47 @@ var getStack = async (element) => {
4930
5363
  return [];
4931
5364
  }
4932
5365
  };
4933
- var formatStack = (stack) => {
5366
+ var formatElementInfo = async (element) => {
5367
+ const html = getHTMLPreview(element);
5368
+ const stack = await getStack(element);
4934
5369
  const isNextProject = checkIsNextProject();
4935
- return stack.map(({ name, source }) => {
4936
- if (!source) return ` at ${name}`;
4937
- if (source.fileName.startsWith("about://React/Server")) {
4938
- return ` at ${name} (Server)`;
4939
- }
4940
- if (!je2(source.fileName)) return ` at ${name}`;
4941
- const framePart = ` at ${name} in ${Q(source.fileName)}`;
4942
- if (isNextProject) {
4943
- return `${framePart}:${source.lineNumber}:${source.columnNumber}`;
4944
- }
4945
- return framePart;
4946
- }).join("\n");
5370
+ let serverBoundary = null;
5371
+ let componentName = null;
5372
+ let fileName = null;
5373
+ let lineNumber = null;
5374
+ let columnNumber = null;
5375
+ for (const frame of stack) {
5376
+ if (!frame.source) continue;
5377
+ if (frame.source.fileName.startsWith("about://React/Server")) {
5378
+ if (!serverBoundary) serverBoundary = frame.name;
5379
+ continue;
5380
+ }
5381
+ if (je2(frame.source.fileName)) {
5382
+ if (!fileName) {
5383
+ fileName = Q(frame.source.fileName);
5384
+ lineNumber = frame.source.lineNumber ?? null;
5385
+ columnNumber = frame.source.columnNumber ?? null;
5386
+ }
5387
+ if (!componentName && checkIsSourceComponentName(frame.name)) {
5388
+ componentName = frame.name;
5389
+ }
5390
+ if (fileName && componentName) {
5391
+ break;
5392
+ }
5393
+ }
5394
+ }
5395
+ if (!componentName || !fileName) {
5396
+ return html;
5397
+ }
5398
+ let result = `${html}
5399
+ in ${componentName} at ${fileName}`;
5400
+ if (isNextProject && lineNumber && columnNumber) {
5401
+ result += `:${lineNumber}:${columnNumber}`;
5402
+ }
5403
+ if (serverBoundary) {
5404
+ result += ` (via Server: ${serverBoundary})`;
5405
+ }
5406
+ return result;
4947
5407
  };
4948
5408
  var getFileName = (stack) => {
4949
5409
  for (const frame of stack) {
@@ -5298,6 +5758,53 @@ var isCLikeKey = (key, code) => {
5298
5758
  return C_LIKE_CHARACTERS.has(key);
5299
5759
  };
5300
5760
 
5761
+ // src/utils/hotkey.ts
5762
+ var keyMatchesCode = (targetKey, code) => {
5763
+ const normalizedTarget = targetKey.toLowerCase();
5764
+ if (code.startsWith("Key")) {
5765
+ return code.slice(3).toLowerCase() === normalizedTarget;
5766
+ }
5767
+ if (code.startsWith("Digit")) {
5768
+ return code.slice(5) === normalizedTarget;
5769
+ }
5770
+ return false;
5771
+ };
5772
+ var isTargetKeyCombination = (event, options) => {
5773
+ if (options.activationShortcut) {
5774
+ return options.activationShortcut(event);
5775
+ }
5776
+ if (options.activationKey) {
5777
+ const { key, metaKey, ctrlKey, shiftKey, altKey } = options.activationKey;
5778
+ const isModifierOnly = !key;
5779
+ if (isModifierOnly) {
5780
+ if (!MODIFIER_KEYS.includes(event.key)) return false;
5781
+ const metaMatches = metaKey ? event.metaKey || event.key === "Meta" : true;
5782
+ const ctrlMatches = ctrlKey ? event.ctrlKey || event.key === "Control" : true;
5783
+ const shiftMatches = shiftKey ? event.shiftKey || event.key === "Shift" : true;
5784
+ const altMatches = altKey ? event.altKey || event.key === "Alt" : true;
5785
+ const allRequiredModifiersPressed = metaMatches && ctrlMatches && shiftMatches && altMatches;
5786
+ const requiredModifierCount = [metaKey, ctrlKey, shiftKey, altKey].filter(Boolean).length;
5787
+ const pressedModifierCount = [
5788
+ event.metaKey || event.key === "Meta",
5789
+ event.ctrlKey || event.key === "Control",
5790
+ event.shiftKey || event.key === "Shift",
5791
+ event.altKey || event.key === "Alt"
5792
+ ].filter(Boolean).length;
5793
+ return allRequiredModifiersPressed && pressedModifierCount >= requiredModifierCount;
5794
+ }
5795
+ const keyMatches = event.key.toLowerCase() === key.toLowerCase() || keyMatchesCode(key, event.code);
5796
+ const hasModifier = metaKey || ctrlKey || shiftKey || altKey;
5797
+ const modifiersMatch = hasModifier ? (metaKey ? event.metaKey : true) && (ctrlKey ? event.ctrlKey : true) && (shiftKey ? event.shiftKey : true) && (altKey ? event.altKey : true) : event.metaKey || event.ctrlKey;
5798
+ return keyMatches && modifiersMatch;
5799
+ }
5800
+ return (event.metaKey || event.ctrlKey) && isCLikeKey(event.key, event.code);
5801
+ };
5802
+
5803
+ // src/utils/is-event-from-overlay.ts
5804
+ var isEventFromOverlay = (event, attribute) => event.composedPath().some(
5805
+ (target) => target instanceof HTMLElement && target.hasAttribute(attribute)
5806
+ );
5807
+
5301
5808
  // src/theme.ts
5302
5809
  var DEFAULT_THEME = {
5303
5810
  enabled: true,
@@ -5334,86 +5841,327 @@ var DEFAULT_THEME = {
5334
5841
  enabled: true
5335
5842
  }
5336
5843
  };
5337
- var mergeTheme = (userTheme) => {
5338
- if (!userTheme) return DEFAULT_THEME;
5339
- return {
5340
- enabled: userTheme.enabled ?? DEFAULT_THEME.enabled,
5341
- hue: userTheme.hue ?? DEFAULT_THEME.hue,
5342
- selectionBox: {
5343
- enabled: userTheme.selectionBox?.enabled ?? DEFAULT_THEME.selectionBox.enabled,
5344
- color: userTheme.selectionBox?.color ?? DEFAULT_THEME.selectionBox.color,
5345
- borderRadius: userTheme.selectionBox?.borderRadius ?? DEFAULT_THEME.selectionBox.borderRadius
5346
- },
5347
- dragBox: {
5348
- enabled: userTheme.dragBox?.enabled ?? DEFAULT_THEME.dragBox.enabled,
5349
- color: userTheme.dragBox?.color ?? DEFAULT_THEME.dragBox.color
5350
- },
5351
- grabbedBoxes: {
5352
- enabled: userTheme.grabbedBoxes?.enabled ?? DEFAULT_THEME.grabbedBoxes.enabled,
5353
- color: userTheme.grabbedBoxes?.color ?? DEFAULT_THEME.grabbedBoxes.color
5354
- },
5355
- elementLabel: {
5356
- enabled: userTheme.elementLabel?.enabled ?? DEFAULT_THEME.elementLabel.enabled,
5357
- backgroundColor: userTheme.elementLabel?.backgroundColor ?? DEFAULT_THEME.elementLabel.backgroundColor,
5358
- textColor: userTheme.elementLabel?.textColor ?? DEFAULT_THEME.elementLabel.textColor,
5359
- borderColor: userTheme.elementLabel?.borderColor ?? DEFAULT_THEME.elementLabel.borderColor,
5360
- padding: userTheme.elementLabel?.padding ?? DEFAULT_THEME.elementLabel.padding,
5361
- cursorOffset: userTheme.elementLabel?.cursorOffset ?? DEFAULT_THEME.elementLabel.cursorOffset
5362
- },
5363
- successLabels: {
5364
- enabled: userTheme.successLabels?.enabled ?? DEFAULT_THEME.successLabels.enabled
5365
- },
5366
- crosshair: {
5367
- enabled: userTheme.crosshair?.enabled ?? DEFAULT_THEME.crosshair.enabled,
5368
- color: userTheme.crosshair?.color ?? DEFAULT_THEME.crosshair.color
5369
- },
5370
- inputOverlay: {
5371
- enabled: userTheme.inputOverlay?.enabled ?? DEFAULT_THEME.inputOverlay.enabled
5844
+ var mergeThemeWithBase = (baseTheme, partialTheme) => ({
5845
+ enabled: partialTheme.enabled ?? baseTheme.enabled,
5846
+ hue: partialTheme.hue ?? baseTheme.hue,
5847
+ selectionBox: {
5848
+ enabled: partialTheme.selectionBox?.enabled ?? baseTheme.selectionBox.enabled,
5849
+ color: partialTheme.selectionBox?.color ?? baseTheme.selectionBox.color,
5850
+ borderRadius: partialTheme.selectionBox?.borderRadius ?? baseTheme.selectionBox.borderRadius
5851
+ },
5852
+ dragBox: {
5853
+ enabled: partialTheme.dragBox?.enabled ?? baseTheme.dragBox.enabled,
5854
+ color: partialTheme.dragBox?.color ?? baseTheme.dragBox.color
5855
+ },
5856
+ grabbedBoxes: {
5857
+ enabled: partialTheme.grabbedBoxes?.enabled ?? baseTheme.grabbedBoxes.enabled,
5858
+ color: partialTheme.grabbedBoxes?.color ?? baseTheme.grabbedBoxes.color
5859
+ },
5860
+ elementLabel: {
5861
+ enabled: partialTheme.elementLabel?.enabled ?? baseTheme.elementLabel.enabled,
5862
+ backgroundColor: partialTheme.elementLabel?.backgroundColor ?? baseTheme.elementLabel.backgroundColor,
5863
+ textColor: partialTheme.elementLabel?.textColor ?? baseTheme.elementLabel.textColor,
5864
+ borderColor: partialTheme.elementLabel?.borderColor ?? baseTheme.elementLabel.borderColor,
5865
+ padding: partialTheme.elementLabel?.padding ?? baseTheme.elementLabel.padding,
5866
+ cursorOffset: partialTheme.elementLabel?.cursorOffset ?? baseTheme.elementLabel.cursorOffset
5867
+ },
5868
+ successLabels: {
5869
+ enabled: partialTheme.successLabels?.enabled ?? baseTheme.successLabels.enabled
5870
+ },
5871
+ crosshair: {
5872
+ enabled: partialTheme.crosshair?.enabled ?? baseTheme.crosshair.enabled,
5873
+ color: partialTheme.crosshair?.color ?? baseTheme.crosshair.color
5874
+ },
5875
+ inputOverlay: {
5876
+ enabled: partialTheme.inputOverlay?.enabled ?? baseTheme.inputOverlay.enabled
5877
+ }
5878
+ });
5879
+ var mergeTheme = (userTheme) => userTheme ? mergeThemeWithBase(DEFAULT_THEME, userTheme) : DEFAULT_THEME;
5880
+ var deepMergeTheme = mergeThemeWithBase;
5881
+
5882
+ // src/utils/agent-session.ts
5883
+ var STORAGE_KEY = "react-grab:agent-sessions";
5884
+ var generateSessionId = () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
5885
+ var createSession = (context, position, selectionBounds, tagName) => ({
5886
+ id: generateSessionId(),
5887
+ context,
5888
+ lastStatus: "",
5889
+ isStreaming: true,
5890
+ createdAt: Date.now(),
5891
+ position,
5892
+ selectionBounds,
5893
+ tagName
5894
+ });
5895
+ var getStorage = (storage) => {
5896
+ if (!storage) return null;
5897
+ return storage;
5898
+ };
5899
+ var memorySessions = /* @__PURE__ */ new Map();
5900
+ var saveSessions = (sessions, storage) => {
5901
+ const resolvedStorage = getStorage(storage);
5902
+ if (!resolvedStorage) {
5903
+ memorySessions.clear();
5904
+ sessions.forEach((session, id) => memorySessions.set(id, session));
5905
+ return;
5906
+ }
5907
+ try {
5908
+ const sessionsObject = Object.fromEntries(sessions);
5909
+ resolvedStorage.setItem(STORAGE_KEY, JSON.stringify(sessionsObject));
5910
+ } catch {
5911
+ memorySessions.clear();
5912
+ sessions.forEach((session, id) => memorySessions.set(id, session));
5913
+ }
5914
+ };
5915
+ var saveSessionById = (session, storage) => {
5916
+ const sessions = loadSessions(storage);
5917
+ sessions.set(session.id, session);
5918
+ saveSessions(sessions, storage);
5919
+ };
5920
+ var loadSessions = (storage) => {
5921
+ const resolvedStorage = getStorage(storage);
5922
+ if (!resolvedStorage) {
5923
+ return new Map(memorySessions);
5924
+ }
5925
+ try {
5926
+ const data = resolvedStorage.getItem(STORAGE_KEY);
5927
+ if (!data) return /* @__PURE__ */ new Map();
5928
+ const sessionsObject = JSON.parse(data);
5929
+ return new Map(Object.entries(sessionsObject));
5930
+ } catch {
5931
+ return /* @__PURE__ */ new Map();
5932
+ }
5933
+ };
5934
+ var clearSessions = (storage) => {
5935
+ const resolvedStorage = getStorage(storage);
5936
+ if (!resolvedStorage) {
5937
+ memorySessions.clear();
5938
+ return;
5939
+ }
5940
+ try {
5941
+ resolvedStorage.removeItem(STORAGE_KEY);
5942
+ } catch {
5943
+ memorySessions.clear();
5944
+ }
5945
+ };
5946
+ var clearSessionById = (sessionId, storage) => {
5947
+ const sessions = loadSessions(storage);
5948
+ sessions.delete(sessionId);
5949
+ saveSessions(sessions, storage);
5950
+ };
5951
+ var updateSession = (session, updates, storage) => {
5952
+ const updatedSession = { ...session, ...updates };
5953
+ saveSessionById(updatedSession, storage);
5954
+ return updatedSession;
5955
+ };
5956
+
5957
+ // src/utils/generate-snippet.ts
5958
+ var generateSnippet = async (elements) => {
5959
+ const elementSnippetResults = await Promise.allSettled(
5960
+ elements.map((element) => formatElementInfo(element))
5961
+ );
5962
+ const elementSnippets = elementSnippetResults.map((result) => result.status === "fulfilled" ? result.value : "").filter((snippet) => snippet.trim());
5963
+ if (elementSnippets.length === 0) {
5964
+ return "";
5965
+ }
5966
+ return elementSnippets.join("\n\n");
5967
+ };
5968
+
5969
+ // src/agent.ts
5970
+ var createAgentManager = (agentOptions) => {
5971
+ const [sessions, setSessions] = createSignal(/* @__PURE__ */ new Map());
5972
+ const abortControllers = /* @__PURE__ */ new Map();
5973
+ const sessionElements = /* @__PURE__ */ new Map();
5974
+ const isProcessing = () => sessions().size > 0;
5975
+ const executeSessionStream = async (session, streamIterator) => {
5976
+ const storage = agentOptions?.storage;
5977
+ let didComplete = false;
5978
+ let wasAborted = false;
5979
+ let hadError = false;
5980
+ try {
5981
+ for await (const status of streamIterator) {
5982
+ const currentSessions = sessions();
5983
+ const currentSession = currentSessions.get(session.id);
5984
+ if (!currentSession) break;
5985
+ const updatedSession = updateSession(currentSession, { lastStatus: status }, storage);
5986
+ setSessions((prev) => new Map(prev).set(session.id, updatedSession));
5987
+ agentOptions?.onStatus?.(status, updatedSession);
5988
+ }
5989
+ didComplete = true;
5990
+ const finalSessions = sessions();
5991
+ const finalSession = finalSessions.get(session.id);
5992
+ if (finalSession) {
5993
+ const completedSession = updateSession(finalSession, { isStreaming: false }, storage);
5994
+ setSessions((prev) => new Map(prev).set(session.id, completedSession));
5995
+ agentOptions?.onComplete?.(completedSession);
5996
+ }
5997
+ } catch (error) {
5998
+ const currentSessions = sessions();
5999
+ const currentSession = currentSessions.get(session.id);
6000
+ if (error instanceof Error && error.name === "AbortError") {
6001
+ wasAborted = true;
6002
+ if (currentSession) {
6003
+ const element = sessionElements.get(session.id);
6004
+ agentOptions?.onAbort?.(currentSession, element);
6005
+ }
6006
+ } else {
6007
+ hadError = true;
6008
+ if (currentSession) {
6009
+ const errorMessage = error instanceof Error ? error.message : "Unknown error";
6010
+ const errorSession = updateSession(currentSession, {
6011
+ lastStatus: `Error: ${errorMessage}`,
6012
+ isStreaming: false
6013
+ }, storage);
6014
+ setSessions((prev) => new Map(prev).set(session.id, errorSession));
6015
+ if (error instanceof Error) {
6016
+ agentOptions?.onError?.(error, errorSession);
6017
+ }
6018
+ }
6019
+ }
6020
+ } finally {
6021
+ abortControllers.delete(session.id);
6022
+ const removeSession = () => {
6023
+ sessionElements.delete(session.id);
6024
+ clearSessionById(session.id, storage);
6025
+ setSessions((prev) => {
6026
+ const next = new Map(prev);
6027
+ next.delete(session.id);
6028
+ return next;
6029
+ });
6030
+ };
6031
+ if (wasAborted) {
6032
+ removeSession();
6033
+ } else if (didComplete || hadError) {
6034
+ setTimeout(removeSession, 1500);
6035
+ }
5372
6036
  }
5373
6037
  };
5374
- };
5375
- var deepMergeTheme = (baseTheme, partialTheme) => {
5376
- return {
5377
- enabled: partialTheme.enabled ?? baseTheme.enabled,
5378
- hue: partialTheme.hue ?? baseTheme.hue,
5379
- selectionBox: {
5380
- enabled: partialTheme.selectionBox?.enabled ?? baseTheme.selectionBox.enabled,
5381
- color: partialTheme.selectionBox?.color ?? baseTheme.selectionBox.color,
5382
- borderRadius: partialTheme.selectionBox?.borderRadius ?? baseTheme.selectionBox.borderRadius
5383
- },
5384
- dragBox: {
5385
- enabled: partialTheme.dragBox?.enabled ?? baseTheme.dragBox.enabled,
5386
- color: partialTheme.dragBox?.color ?? baseTheme.dragBox.color
5387
- },
5388
- grabbedBoxes: {
5389
- enabled: partialTheme.grabbedBoxes?.enabled ?? baseTheme.grabbedBoxes.enabled,
5390
- color: partialTheme.grabbedBoxes?.color ?? baseTheme.grabbedBoxes.color
5391
- },
5392
- elementLabel: {
5393
- enabled: partialTheme.elementLabel?.enabled ?? baseTheme.elementLabel.enabled,
5394
- backgroundColor: partialTheme.elementLabel?.backgroundColor ?? baseTheme.elementLabel.backgroundColor,
5395
- textColor: partialTheme.elementLabel?.textColor ?? baseTheme.elementLabel.textColor,
5396
- borderColor: partialTheme.elementLabel?.borderColor ?? baseTheme.elementLabel.borderColor,
5397
- padding: partialTheme.elementLabel?.padding ?? baseTheme.elementLabel.padding,
5398
- cursorOffset: partialTheme.elementLabel?.cursorOffset ?? baseTheme.elementLabel.cursorOffset
5399
- },
5400
- successLabels: {
5401
- enabled: partialTheme.successLabels?.enabled ?? baseTheme.successLabels.enabled
5402
- },
5403
- crosshair: {
5404
- enabled: partialTheme.crosshair?.enabled ?? baseTheme.crosshair.enabled,
5405
- color: partialTheme.crosshair?.color ?? baseTheme.crosshair.color
5406
- },
5407
- inputOverlay: {
5408
- enabled: partialTheme.inputOverlay?.enabled ?? baseTheme.inputOverlay.enabled
6038
+ const tryReacquireElement = (session) => {
6039
+ const { selectionBounds, tagName } = session;
6040
+ if (!selectionBounds) return void 0;
6041
+ const centerX = selectionBounds.x + selectionBounds.width / 2;
6042
+ const centerY = selectionBounds.y + selectionBounds.height / 2;
6043
+ const element = document.elementFromPoint(centerX, centerY);
6044
+ if (!element) return void 0;
6045
+ if (tagName && element.tagName.toLowerCase() !== tagName) {
6046
+ return void 0;
6047
+ }
6048
+ return element;
6049
+ };
6050
+ const tryResumeSessions = () => {
6051
+ const storage = agentOptions?.storage;
6052
+ const existingSessions = loadSessions(storage);
6053
+ const streamingSessions = Array.from(existingSessions.values()).filter(
6054
+ (session) => session.isStreaming
6055
+ );
6056
+ if (streamingSessions.length === 0) {
6057
+ clearSessions(storage);
6058
+ return;
6059
+ }
6060
+ if (!agentOptions?.provider?.supportsResume || !agentOptions.provider.resume) {
6061
+ clearSessions(storage);
6062
+ return;
6063
+ }
6064
+ const streamingSessionsMap = new Map(
6065
+ streamingSessions.map((session) => [session.id, session])
6066
+ );
6067
+ setSessions(streamingSessionsMap);
6068
+ saveSessions(streamingSessionsMap, storage);
6069
+ for (const existingSession of streamingSessions) {
6070
+ const reacquiredElement = tryReacquireElement(existingSession);
6071
+ if (reacquiredElement) {
6072
+ sessionElements.set(existingSession.id, reacquiredElement);
6073
+ }
6074
+ const sessionWithResumeStatus = {
6075
+ ...existingSession,
6076
+ lastStatus: existingSession.lastStatus || "Resuming...",
6077
+ position: existingSession.position ?? { x: window.innerWidth / 2, y: window.innerHeight / 2 }
6078
+ };
6079
+ setSessions((prev) => new Map(prev).set(existingSession.id, sessionWithResumeStatus));
6080
+ agentOptions?.onResume?.(sessionWithResumeStatus);
6081
+ const abortController = new AbortController();
6082
+ abortControllers.set(existingSession.id, abortController);
6083
+ const streamIterator = agentOptions.provider.resume(existingSession.id, abortController.signal);
6084
+ void executeSessionStream(existingSession, streamIterator);
6085
+ }
6086
+ };
6087
+ const startSession = async (params) => {
6088
+ const { element, prompt, position, selectionBounds } = params;
6089
+ const storage = agentOptions?.storage;
6090
+ if (!agentOptions?.provider) {
6091
+ return;
6092
+ }
6093
+ const elements = [element];
6094
+ const content = await generateSnippet(elements);
6095
+ const context = { content, prompt, options: agentOptions?.getOptions?.() };
6096
+ const tagName = (element.tagName || "").toLowerCase() || void 0;
6097
+ const session = createSession(context, position, selectionBounds, tagName);
6098
+ session.lastStatus = "Please wait\u2026";
6099
+ sessionElements.set(session.id, element);
6100
+ setSessions((prev) => new Map(prev).set(session.id, session));
6101
+ saveSessionById(session, storage);
6102
+ agentOptions.onStart?.(session);
6103
+ const abortController = new AbortController();
6104
+ abortControllers.set(session.id, abortController);
6105
+ const streamIterator = agentOptions.provider.send(context, abortController.signal);
6106
+ void executeSessionStream(session, streamIterator);
6107
+ };
6108
+ const abortSession = (sessionId) => {
6109
+ const controller = abortControllers.get(sessionId);
6110
+ if (controller) {
6111
+ controller.abort();
5409
6112
  }
5410
6113
  };
6114
+ const abortAllSessions = () => {
6115
+ abortControllers.forEach((controller) => controller.abort());
6116
+ abortControllers.clear();
6117
+ setSessions(/* @__PURE__ */ new Map());
6118
+ clearSessions(agentOptions?.storage);
6119
+ };
6120
+ const updateSessionBoundsOnViewportChange = () => {
6121
+ const currentSessions = sessions();
6122
+ if (currentSessions.size === 0) return;
6123
+ const updatedSessions = new Map(currentSessions);
6124
+ let didUpdate = false;
6125
+ for (const [sessionId, session] of currentSessions) {
6126
+ let element = sessionElements.get(sessionId);
6127
+ if (!element || !document.contains(element)) {
6128
+ const reacquiredElement = tryReacquireElement(session);
6129
+ if (reacquiredElement) {
6130
+ sessionElements.set(sessionId, reacquiredElement);
6131
+ element = reacquiredElement;
6132
+ }
6133
+ }
6134
+ if (element && document.contains(element)) {
6135
+ const newBounds = createElementBounds(element);
6136
+ if (newBounds) {
6137
+ updatedSessions.set(sessionId, { ...session, selectionBounds: newBounds });
6138
+ didUpdate = true;
6139
+ }
6140
+ }
6141
+ }
6142
+ if (didUpdate) {
6143
+ setSessions(updatedSessions);
6144
+ }
6145
+ };
6146
+ const getSessionElement = (sessionId) => {
6147
+ return sessionElements.get(sessionId);
6148
+ };
6149
+ return {
6150
+ sessions,
6151
+ isProcessing,
6152
+ tryResumeSessions,
6153
+ startSession,
6154
+ abortSession,
6155
+ abortAllSessions,
6156
+ updateSessionBoundsOnViewportChange,
6157
+ getSessionElement
6158
+ };
5411
6159
  };
5412
6160
 
5413
6161
  // src/core.tsx
5414
- var _tmpl$9 = /* @__PURE__ */ template(`<span class="font-mono tabular-nums align-middle">1 element`);
6162
+ var _tmpl$14 = /* @__PURE__ */ template(`<span class="tabular-nums align-middle">`);
5415
6163
  var _tmpl$23 = /* @__PURE__ */ template(`<span class="font-mono tabular-nums align-middle">&lt;<!>>`);
5416
- var _tmpl$33 = /* @__PURE__ */ template(`<span class="tabular-nums text-[10px] ml-1 align-middle"> in `);
6164
+ var _tmpl$33 = /* @__PURE__ */ template(`<span class="tabular-nums ml-1 align-middle"> in `);
5417
6165
  var hasInited = false;
5418
6166
  var getScriptOptions = () => {
5419
6167
  if (typeof window === "undefined") return null;
@@ -5463,9 +6211,8 @@ var init = (rawOptions) => {
5463
6211
  hasInited = true;
5464
6212
  const logIntro = () => {
5465
6213
  try {
5466
- const version = "0.0.54";
5467
- const logoSvg = `<svg width="294" height="294" viewBox="0 0 294 294" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_0_3)"><mask id="mask0_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="294" height="294"><path d="M294 0H0V294H294V0Z" fill="white"/></mask><g mask="url(#mask0_0_3)"><path d="M144.599 47.4924C169.712 27.3959 194.548 20.0265 212.132 30.1797C227.847 39.2555 234.881 60.3243 231.926 89.516C231.677 92.0069 231.328 94.5423 230.94 97.1058L228.526 110.14C228.517 110.136 228.505 110.132 228.495 110.127C228.486 110.165 228.479 110.203 228.468 110.24L216.255 105.741C216.256 105.736 216.248 105.728 216.248 105.723C207.915 103.125 199.421 101.075 190.82 99.5888L190.696 99.5588L173.526 97.2648L173.511 97.2631C173.492 97.236 173.467 97.2176 173.447 97.1905C163.862 96.2064 154.233 95.7166 144.599 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8624 138.391 86.939 147.193C90.8624 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245C115.749 197.245 115.758 197.246 115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.507 229.974L144.609 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.472 238.38C154.485 238.392 154.499 238.402 154.513 238.412L143.846 247.482L143.827 247.497C126.56 261.128 109.472 268.745 94.8019 268.745C88.5916 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3164 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3363 185.327 9.52301 167.51 9.52301 147.193C9.52301 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3164 60.3243 61.3496 39.2555 77.0657 30.1797C94.6494 20.0265 119.486 27.3959 144.599 47.4924ZM70.6423 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5176 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8516 207.742 83.0977 205.066 70.6423 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1787 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.9311 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.759 110.203C59.234 110.839 57.7378 111.475 56.27 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9104 147.193C67.822 135.23 63.7566 122.855 60.759 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.854 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.6291 47.6015 67.6975 64.5954 70.0424 87.9446L70.0416 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8263 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.773 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.29 38.512C183.321 38.512 169.34 44.4991 154.444 56.0153C163.93 64.9374 172.634 74.6557 180.462 85.064C193.375 86.6345 206.128 89.3102 218.584 93.0624C218.812 91.4325 219.003 89.8118 219.165 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.552 64.3097C138.104 70.2614 132.054 76.6306 126.443 83.3765C132.39 82.995 138.426 82.8046 144.552 82.8046C150.727 82.8046 156.778 83.0143 162.707 83.3765C157.08 76.6293 151.015 70.2596 144.552 64.3097Z" fill="white"/><path d="M144.598 47.4924C169.712 27.3959 194.547 20.0265 212.131 30.1797C227.847 39.2555 234.88 60.3243 231.926 89.516C231.677 92.0069 231.327 94.5423 230.941 97.1058L228.526 110.14L228.496 110.127C228.487 110.165 228.478 110.203 228.469 110.24L216.255 105.741L216.249 105.723C207.916 103.125 199.42 101.075 190.82 99.5888L190.696 99.5588L173.525 97.2648L173.511 97.263C173.492 97.236 173.468 97.2176 173.447 97.1905C163.863 96.2064 154.234 95.7166 144.598 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8622 138.391 86.939 147.193C90.8622 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245L115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.506 229.974L144.61 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.473 238.38L154.512 238.412L143.847 247.482L143.827 247.497C126.56 261.13 109.472 268.745 94.8018 268.745C88.5915 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3162 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3362 185.327 9.52298 167.51 9.52298 147.193C9.52298 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3162 60.3243 61.3496 39.2555 77.0657 30.1797C94.6493 20.0265 119.486 27.3959 144.598 47.4924ZM70.6422 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5175 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8515 207.742 83.0977 205.066 70.6422 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1786 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.931 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.7589 110.203C59.234 110.839 57.7378 111.475 56.2699 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9103 147.193C67.822 135.23 63.7566 122.855 60.7589 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.8539 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.629 47.6015 67.6975 64.5954 70.0424 87.9446L70.0415 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8262 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.772 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.291 38.512C183.321 38.512 169.34 44.4991 154.443 56.0153C163.929 64.9374 172.634 74.6557 180.462 85.064C193.374 86.6345 206.129 89.3102 218.584 93.0624C218.813 91.4325 219.003 89.8118 219.166 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.551 64.3097C138.103 70.2614 132.055 76.6306 126.443 83.3765C132.389 82.995 138.427 82.8046 144.551 82.8046C150.727 82.8046 156.779 83.0143 162.707 83.3765C157.079 76.6293 151.015 70.2596 144.551 64.3097Z" fill="#FF40E0"/></g><mask id="mask1_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="102" y="84" width="161" height="162"><path d="M235.282 84.827L102.261 112.259L129.693 245.28L262.714 217.848L235.282 84.827Z" fill="white"/></mask><g mask="url(#mask1_0_3)"><path d="M136.863 129.916L213.258 141.224C220.669 142.322 222.495 152.179 215.967 155.856L187.592 171.843L184.135 204.227C183.339 211.678 173.564 213.901 169.624 207.526L129.021 141.831C125.503 136.14 130.245 128.936 136.863 129.916Z" fill="#FF40E0" stroke="#FF40E0" stroke-width="0.817337" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="clip0_0_3"><rect width="294" height="294" fill="white"/></clipPath></defs></svg>`;
5468
- const logoDataUri = `data:image/svg+xml;base64,${btoa(logoSvg)}`;
6214
+ const version = "0.0.56";
6215
+ const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
5469
6216
  console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
5470
6217
  https://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;`, "");
5471
6218
  if (navigator.onLine && version) {
@@ -5483,9 +6230,7 @@ https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid
5483
6230
  } catch {
5484
6231
  }
5485
6232
  };
5486
- if (options.log !== false) {
5487
- logIntro();
5488
- }
6233
+ logIntro();
5489
6234
  return createRoot((dispose2) => {
5490
6235
  const [theme, setTheme] = createSignal(initialTheme);
5491
6236
  const [isHoldingKeys, setIsHoldingKeys] = createSignal(false);
@@ -5495,32 +6240,85 @@ https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid
5495
6240
  const [dragStartX, setDragStartX] = createSignal(OFFSCREEN_POSITION);
5496
6241
  const [dragStartY, setDragStartY] = createSignal(OFFSCREEN_POSITION);
5497
6242
  const [isCopying, setIsCopying] = createSignal(false);
6243
+ const [selectionLabelStatus, setSelectionLabelStatus] = createSignal("idle");
6244
+ const [labelInstances, setLabelInstances] = createSignal([]);
5498
6245
  const [lastGrabbedElement, setLastGrabbedElement] = createSignal(null);
5499
6246
  const [progressStartTime, setProgressStartTime] = createSignal(null);
5500
- const [progress, setProgress] = createSignal(0);
5501
6247
  const [grabbedBoxes, setGrabbedBoxes] = createSignal([]);
5502
6248
  const [successLabels, setSuccessLabels] = createSignal([]);
5503
6249
  const [isActivated, setIsActivated] = createSignal(false);
5504
6250
  const [isToggleMode, setIsToggleMode] = createSignal(false);
5505
- const [showProgressIndicator, setShowProgressIndicator] = createSignal(false);
5506
6251
  const [didJustDrag, setDidJustDrag] = createSignal(false);
5507
6252
  const [copyStartX, setCopyStartX] = createSignal(OFFSCREEN_POSITION);
5508
6253
  const [copyStartY, setCopyStartY] = createSignal(OFFSCREEN_POSITION);
5509
- const [mouseHasSettled, setMouseHasSettled] = createSignal(false);
5510
6254
  const [viewportVersion, setViewportVersion] = createSignal(0);
5511
6255
  const [isInputMode, setIsInputMode] = createSignal(false);
5512
6256
  const [inputText, setInputText] = createSignal("");
5513
6257
  const [isTouchMode, setIsTouchMode] = createSignal(false);
6258
+ const [selectionFilePath, setSelectionFilePath] = createSignal(void 0);
6259
+ const [selectionLineNumber, setSelectionLineNumber] = createSignal(void 0);
6260
+ const [isToggleFrozen, setIsToggleFrozen] = createSignal(false);
6261
+ const [isInputExpanded, setIsInputExpanded] = createSignal(false);
6262
+ const [frozenElement, setFrozenElement] = createSignal(null);
6263
+ const [nativeSelectionCursorX, setNativeSelectionCursorX] = createSignal(OFFSCREEN_POSITION);
6264
+ const [nativeSelectionCursorY, setNativeSelectionCursorY] = createSignal(OFFSCREEN_POSITION);
6265
+ const [hasNativeSelection, setHasNativeSelection] = createSignal(false);
6266
+ const [nativeSelectionElements, setNativeSelectionElements] = createSignal([]);
6267
+ const extractElementTagName = (element) => (element.tagName || "").toLowerCase();
6268
+ const nativeSelectionTagName = createMemo(() => {
6269
+ const elements = nativeSelectionElements();
6270
+ if (elements.length === 0 || !elements[0]) return void 0;
6271
+ return extractElementTagName(elements[0]) || void 0;
6272
+ });
6273
+ const nativeSelectionComponentName = createMemo(() => {
6274
+ const elements = nativeSelectionElements();
6275
+ if (elements.length === 0 || !elements[0]) return void 0;
6276
+ return getNearestComponentName(elements[0]) || void 0;
6277
+ });
6278
+ const clearNativeSelectionState = () => {
6279
+ setNativeSelectionCursorX(OFFSCREEN_POSITION);
6280
+ setNativeSelectionCursorY(OFFSCREEN_POSITION);
6281
+ setNativeSelectionElements([]);
6282
+ };
6283
+ const recalculateNativeSelectionCursor = () => {
6284
+ const currentSelection = window.getSelection();
6285
+ if (!currentSelection || currentSelection.isCollapsed || currentSelection.rangeCount === 0) {
6286
+ return;
6287
+ }
6288
+ const range = currentSelection.getRangeAt(0);
6289
+ const clientRects = range.getClientRects();
6290
+ if (clientRects.length === 0) return;
6291
+ const isBackward = (() => {
6292
+ if (!currentSelection.anchorNode || !currentSelection.focusNode) return false;
6293
+ const position = currentSelection.anchorNode.compareDocumentPosition(currentSelection.focusNode);
6294
+ if (position & Node.DOCUMENT_POSITION_FOLLOWING) return false;
6295
+ if (position & Node.DOCUMENT_POSITION_PRECEDING) return true;
6296
+ return currentSelection.anchorOffset > currentSelection.focusOffset;
6297
+ })();
6298
+ const cursorRect = isBackward ? clientRects[0] : clientRects[clientRects.length - 1];
6299
+ const cursorX = isBackward ? cursorRect.left : cursorRect.right;
6300
+ const cursorY = cursorRect.top + cursorRect.height / 2;
6301
+ setNativeSelectionCursorX(cursorX);
6302
+ setNativeSelectionCursorY(cursorY);
6303
+ };
6304
+ createEffect(on(() => viewportVersion(), () => {
6305
+ if (hasNativeSelection()) {
6306
+ recalculateNativeSelectionCursor();
6307
+ }
6308
+ }));
6309
+ const nativeSelectionBounds = createMemo(() => {
6310
+ viewportVersion();
6311
+ const elements = nativeSelectionElements();
6312
+ if (elements.length === 0 || !elements[0]) return void 0;
6313
+ return createElementBounds(elements[0]);
6314
+ });
5514
6315
  let holdTimerId = null;
6316
+ let activationTimestamp = null;
5515
6317
  let progressAnimationId = null;
5516
- let progressDelayTimerId = null;
5517
6318
  let keydownSpamTimerId = null;
5518
- let mouseSettleTimerId = null;
5519
6319
  let autoScrollAnimationId = null;
5520
6320
  let previouslyFocusedElement = null;
5521
6321
  const isRendererActive = createMemo(() => isActivated() && !isCopying());
5522
- const hasValidMousePosition = createMemo(() => mouseX() > OFFSCREEN_POSITION && mouseY() > OFFSCREEN_POSITION);
5523
- const isTargetKeyCombination = (event) => (event.metaKey || event.ctrlKey) && isCLikeKey(event.key, event.code);
5524
6322
  const getAutoScrollDirection = (clientX, clientY) => {
5525
6323
  return {
5526
6324
  top: clientY < AUTO_SCROLL_EDGE_THRESHOLD_PX,
@@ -5559,10 +6357,6 @@ https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid
5559
6357
  setSuccessLabels((previousLabels) => previousLabels.filter((label) => label.id !== labelId));
5560
6358
  }, SUCCESS_LABEL_DURATION_MS);
5561
6359
  };
5562
- const wrapInSelectedElementTags = (context) => `<selected_element>
5563
- ${context}
5564
- </selected_element>`;
5565
- const extractElementTagName = (element) => (element.tagName || "").toLowerCase();
5566
6360
  const extractElementTagNameForSuccess = (element) => {
5567
6361
  const tagName = extractElementTagName(element);
5568
6362
  return tagName ? `<${tagName}>` : "1 element";
@@ -5577,16 +6371,49 @@ ${context}
5577
6371
  }
5578
6372
  }));
5579
6373
  };
5580
- const executeCopyOperation = async (positionX, positionY, operation) => {
6374
+ const createLabelInstance = (bounds, tagName, status, element) => {
6375
+ const instanceId = `label-${Date.now()}-${Math.random().toString(36).slice(2)}`;
6376
+ setLabelInstances((prev) => [...prev, {
6377
+ id: instanceId,
6378
+ bounds,
6379
+ tagName,
6380
+ status,
6381
+ createdAt: Date.now(),
6382
+ element
6383
+ }]);
6384
+ return instanceId;
6385
+ };
6386
+ const updateLabelInstance = (instanceId, status) => {
6387
+ setLabelInstances((prev) => prev.map((instance) => instance.id === instanceId ? {
6388
+ ...instance,
6389
+ status
6390
+ } : instance));
6391
+ };
6392
+ const removeLabelInstance = (instanceId) => {
6393
+ setLabelInstances((prev) => prev.filter((instance) => instance.id !== instanceId));
6394
+ };
6395
+ const executeCopyOperation = async (positionX, positionY, operation, bounds, tagName, element) => {
5581
6396
  setCopyStartX(positionX);
5582
6397
  setCopyStartY(positionY);
5583
6398
  setIsCopying(true);
5584
6399
  startProgressAnimation();
6400
+ const instanceId = bounds && tagName ? createLabelInstance(bounds, tagName, "copying", element) : null;
5585
6401
  await operation().finally(() => {
5586
6402
  setIsCopying(false);
5587
6403
  stopProgressAnimation();
6404
+ if (instanceId) {
6405
+ updateLabelInstance(instanceId, "copied");
6406
+ setTimeout(() => {
6407
+ updateLabelInstance(instanceId, "fading");
6408
+ setTimeout(() => {
6409
+ removeLabelInstance(instanceId);
6410
+ }, 350);
6411
+ }, COPIED_LABEL_DURATION_MS);
6412
+ }
5588
6413
  if (isToggleMode()) {
5589
- deactivateRenderer();
6414
+ setTimeout(() => {
6415
+ deactivateRenderer();
6416
+ }, COPIED_LABEL_DURATION_MS + 350);
5590
6417
  }
5591
6418
  });
5592
6419
  };
@@ -5601,53 +6428,20 @@ ${context}
5601
6428
  const tryCopyWithFallback = async (elements, extraPrompt) => {
5602
6429
  let didCopy = false;
5603
6430
  let copiedContent = "";
5604
- const isReactProject = Ee();
5605
6431
  await options.onBeforeCopy?.(elements);
5606
- if (options.copyFileOnly && isReactProject) {
5607
- try {
5608
- const firstElement = elements[0];
5609
- if (firstElement) {
5610
- const stack = await getStack(firstElement);
5611
- const fileName = getFileName(stack);
5612
- if (fileName) {
5613
- copiedContent = `@${fileName}`;
5614
- didCopy = await copyContent(copiedContent);
5615
- if (didCopy) {
5616
- options.onCopySuccess?.(elements, copiedContent);
5617
- }
5618
- }
5619
- }
5620
- } catch (error) {
5621
- options.onCopyError?.(error);
5622
- }
5623
- options.onAfterCopy?.(elements, didCopy);
5624
- return didCopy;
5625
- }
5626
6432
  try {
5627
- const elementSnippetResults = await Promise.allSettled(elements.map(async (element) => {
5628
- const htmlPreview = getHTMLPreview(element);
5629
- if (!isReactProject) {
5630
- return `## HTML Frame:
5631
- ${htmlPreview}`;
5632
- }
5633
- const stack = await getStack(element);
5634
- const formattedStack = formatStack(stack);
5635
- if (formattedStack) {
5636
- return `## HTML Frame:
5637
- ${htmlPreview}
5638
-
5639
- ## Code Location:
5640
- ${formattedStack}`;
6433
+ const elementSnippetResults = await Promise.allSettled(elements.map((element) => formatElementInfo(element)));
6434
+ const elementSnippets = [];
6435
+ for (const result of elementSnippetResults) {
6436
+ if (result.status === "fulfilled" && result.value.trim()) {
6437
+ elementSnippets.push(result.value);
5641
6438
  }
5642
- return `## HTML Frame:
5643
- ${htmlPreview}`;
5644
- }));
5645
- const elementSnippets = elementSnippetResults.map((result) => result.status === "fulfilled" ? result.value : "").filter((snippet) => snippet.trim());
6439
+ }
5646
6440
  if (elementSnippets.length > 0) {
5647
- const wrappedSnippets = elementSnippets.map((snippet) => wrapInSelectedElementTags(snippet)).join("\n\n");
6441
+ const combinedSnippets = elementSnippets.join("\n\n");
5648
6442
  const plainTextContent = extraPrompt ? `${extraPrompt}
5649
6443
 
5650
- ${wrappedSnippets}` : wrappedSnippets;
6444
+ ${combinedSnippets}` : combinedSnippets;
5651
6445
  copiedContent = plainTextContent;
5652
6446
  didCopy = await copyContent(plainTextContent);
5653
6447
  }
@@ -5712,20 +6506,17 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5712
6506
  if (!isRendererActive() || isDragging()) return null;
5713
6507
  return getElementAtPosition(mouseX(), mouseY());
5714
6508
  });
6509
+ createEffect(() => {
6510
+ const element = targetElement();
6511
+ if (element) {
6512
+ setFrozenElement(element);
6513
+ }
6514
+ });
5715
6515
  const selectionBounds = createMemo(() => {
5716
6516
  viewportVersion();
5717
6517
  const element = targetElement();
5718
6518
  if (!element) return void 0;
5719
- const elementBounds = element.getBoundingClientRect();
5720
- const computedStyle = window.getComputedStyle(element);
5721
- return {
5722
- borderRadius: computedStyle.borderRadius || "0px",
5723
- height: elementBounds.height,
5724
- transform: stripTranslateFromTransform(element),
5725
- width: elementBounds.width,
5726
- x: elementBounds.left,
5727
- y: elementBounds.top
5728
- };
6519
+ return createElementBounds(element);
5729
6520
  });
5730
6521
  const calculateDragDistance = (endX, endY) => {
5731
6522
  const endPageX = endX + window.scrollX;
@@ -5768,7 +6559,14 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5768
6559
  });
5769
6560
  const labelContent = createMemo(() => {
5770
6561
  const element = targetElement();
5771
- if (!element) return _tmpl$9();
6562
+ const copying = isCopying();
6563
+ if (!element) {
6564
+ return (() => {
6565
+ var _el$ = _tmpl$14();
6566
+ insert(_el$, copying ? "Please wait\u2026" : "1 element");
6567
+ return _el$;
6568
+ })();
6569
+ }
5772
6570
  const tagName = extractElementTagName(element);
5773
6571
  const componentName = getNearestComponentName(element);
5774
6572
  if (tagName && componentName) {
@@ -5789,16 +6587,13 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5789
6587
  return _el$8;
5790
6588
  })();
5791
6589
  }
5792
- return _tmpl$9();
6590
+ return (() => {
6591
+ var _el$10 = _tmpl$14();
6592
+ insert(_el$10, copying ? "Please wait\u2026" : "1 element");
6593
+ return _el$10;
6594
+ })();
5793
6595
  });
5794
- const labelPosition = createMemo(() => isCopying() ? {
5795
- x: copyStartX(),
5796
- y: copyStartY()
5797
- } : {
5798
- x: mouseX(),
5799
- y: mouseY()
5800
- });
5801
- const progressPosition = createMemo(() => isCopying() ? {
6596
+ const cursorPosition = createMemo(() => isCopying() ? {
5802
6597
  x: copyStartX(),
5803
6598
  y: copyStartY()
5804
6599
  } : {
@@ -5813,6 +6608,26 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5813
6608
  options.onElementHover?.(currentElement);
5814
6609
  }
5815
6610
  }));
6611
+ createEffect(on(() => targetElement(), (element) => {
6612
+ const clearSource = () => {
6613
+ setSelectionFilePath(void 0);
6614
+ setSelectionLineNumber(void 0);
6615
+ };
6616
+ if (!element) {
6617
+ clearSource();
6618
+ return;
6619
+ }
6620
+ getStack(element).then((stack) => {
6621
+ for (const frame of stack) {
6622
+ if (frame.source && je2(frame.source.fileName)) {
6623
+ setSelectionFilePath(Q(frame.source.fileName));
6624
+ setSelectionLineNumber(frame.source.lineNumber);
6625
+ return;
6626
+ }
6627
+ }
6628
+ clearSource();
6629
+ }).catch(clearSource);
6630
+ }));
5816
6631
  createEffect(on(() => viewportVersion(), () => {
5817
6632
  const currentBoxes = grabbedBoxes();
5818
6633
  if (currentBoxes.length === 0) return;
@@ -5822,6 +6637,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5822
6637
  }));
5823
6638
  setGrabbedBoxes(updatedBoxes);
5824
6639
  }));
6640
+ createEffect(on(() => viewportVersion(), () => agentManager.updateSessionBoundsOnViewportChange()));
5825
6641
  createEffect(on(() => [isActivated(), isDragging(), isCopying(), isInputMode(), targetElement(), dragBounds()], ([active, dragging, copying, inputMode, target, drag]) => {
5826
6642
  options.onStateChange?.({
5827
6643
  isActive: active,
@@ -5856,7 +6672,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5856
6672
  y: y2
5857
6673
  });
5858
6674
  }));
5859
- createEffect(on(() => [labelVisible(), labelVariant(), labelContent(), labelPosition()], ([visible, variant, content, position]) => {
6675
+ createEffect(on(() => [labelVisible(), labelVariant(), labelContent(), cursorPosition()], ([visible, variant, content, position]) => {
5860
6676
  const contentString = typeof content === "string" ? content : "";
5861
6677
  options.onElementLabel?.(Boolean(visible), variant, {
5862
6678
  x: position.x,
@@ -5864,23 +6680,47 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5864
6680
  content: contentString
5865
6681
  });
5866
6682
  }));
5867
- const startProgressAnimation = () => {
6683
+ let cursorStyleElement = null;
6684
+ const setCursorOverride = (cursor) => {
6685
+ if (cursor) {
6686
+ if (!cursorStyleElement) {
6687
+ cursorStyleElement = document.createElement("style");
6688
+ cursorStyleElement.setAttribute("data-react-grab-cursor", "");
6689
+ document.head.appendChild(cursorStyleElement);
6690
+ }
6691
+ cursorStyleElement.textContent = `* { cursor: ${cursor} !important; }`;
6692
+ } else if (cursorStyleElement) {
6693
+ cursorStyleElement.remove();
6694
+ cursorStyleElement = null;
6695
+ }
6696
+ };
6697
+ createEffect(on(() => [isActivated(), isCopying(), isDragging(), isInputMode(), targetElement()], ([activated, copying, dragging, inputMode, target]) => {
6698
+ if (copying) {
6699
+ setCursorOverride("progress");
6700
+ } else if (inputMode) {
6701
+ setCursorOverride(null);
6702
+ } else if (activated && dragging) {
6703
+ setCursorOverride("crosshair");
6704
+ } else if (activated && target) {
6705
+ setCursorOverride("copy");
6706
+ } else if (activated) {
6707
+ setCursorOverride("crosshair");
6708
+ } else {
6709
+ setCursorOverride(null);
6710
+ }
6711
+ }));
6712
+ const startProgressAnimation = (duration) => {
5868
6713
  const startTime = Date.now();
6714
+ const animationDuration = options.keyHoldDuration;
5869
6715
  setProgressStartTime(startTime);
5870
- setShowProgressIndicator(false);
5871
- progressDelayTimerId = window.setTimeout(() => {
5872
- setShowProgressIndicator(true);
5873
- progressDelayTimerId = null;
5874
- }, PROGRESS_INDICATOR_DELAY_MS);
5875
6716
  const animateProgress = () => {
5876
6717
  const currentStartTime = progressStartTime();
5877
6718
  if (currentStartTime === null) return;
5878
6719
  const elapsedTime = Date.now() - currentStartTime;
5879
- const normalizedTime = elapsedTime / options.keyHoldDuration;
6720
+ const normalizedTime = elapsedTime / animationDuration;
5880
6721
  const easedProgress = 1 - Math.exp(-normalizedTime);
5881
6722
  const maxProgressBeforeCompletion = 0.95;
5882
6723
  const currentProgress = isCopying() ? Math.min(easedProgress, maxProgressBeforeCompletion) : 1;
5883
- setProgress(currentProgress);
5884
6724
  if (currentProgress < 1) {
5885
6725
  progressAnimationId = requestAnimationFrame(animateProgress);
5886
6726
  }
@@ -5892,13 +6732,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5892
6732
  cancelAnimationFrame(progressAnimationId);
5893
6733
  progressAnimationId = null;
5894
6734
  }
5895
- if (progressDelayTimerId !== null) {
5896
- window.clearTimeout(progressDelayTimerId);
5897
- progressDelayTimerId = null;
5898
- }
5899
6735
  setProgressStartTime(null);
5900
- setProgress(1);
5901
- setShowProgressIndicator(false);
5902
6736
  };
5903
6737
  const startAutoScroll = () => {
5904
6738
  const scroll = () => {
@@ -5928,8 +6762,8 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5928
6762
  const activateRenderer = () => {
5929
6763
  stopProgressAnimation();
5930
6764
  previouslyFocusedElement = document.activeElement;
6765
+ activationTimestamp = Date.now();
5931
6766
  setIsActivated(true);
5932
- document.body.style.cursor = "crosshair";
5933
6767
  options.onActivate?.();
5934
6768
  };
5935
6769
  const deactivateRenderer = () => {
@@ -5938,61 +6772,130 @@ ${plainTextContentOnly}` : plainTextContentOnly;
5938
6772
  setIsActivated(false);
5939
6773
  setIsInputMode(false);
5940
6774
  setInputText("");
5941
- document.body.style.cursor = "";
6775
+ setIsToggleFrozen(false);
6776
+ setIsInputExpanded(false);
6777
+ setFrozenElement(null);
6778
+ setSelectionLabelStatus("idle");
5942
6779
  if (isDragging()) {
5943
6780
  setIsDragging(false);
5944
6781
  document.body.style.userSelect = "";
5945
6782
  }
5946
6783
  if (holdTimerId) window.clearTimeout(holdTimerId);
5947
6784
  if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
5948
- if (mouseSettleTimerId) {
5949
- window.clearTimeout(mouseSettleTimerId);
5950
- mouseSettleTimerId = null;
5951
- }
5952
- setMouseHasSettled(false);
5953
6785
  stopAutoScroll();
5954
6786
  stopProgressAnimation();
6787
+ activationTimestamp = null;
5955
6788
  if (previouslyFocusedElement instanceof HTMLElement && document.contains(previouslyFocusedElement)) {
5956
6789
  previouslyFocusedElement.focus();
5957
6790
  }
5958
6791
  previouslyFocusedElement = null;
5959
6792
  options.onDeactivate?.();
5960
6793
  };
6794
+ const agentOptions = options.agent ? {
6795
+ ...options.agent,
6796
+ onAbort: (session, element) => {
6797
+ options.agent?.onAbort?.(session, element);
6798
+ if (element && document.contains(element)) {
6799
+ const rect = element.getBoundingClientRect();
6800
+ const centerX = rect.left + rect.width / 2;
6801
+ const centerY = rect.top + rect.height / 2;
6802
+ setMouseX(centerX);
6803
+ setMouseY(centerY);
6804
+ setFrozenElement(element);
6805
+ setInputText(session.context.prompt);
6806
+ setIsInputExpanded(true);
6807
+ setIsInputMode(true);
6808
+ setIsToggleMode(true);
6809
+ setIsToggleFrozen(true);
6810
+ if (!isActivated()) {
6811
+ activateRenderer();
6812
+ }
6813
+ }
6814
+ }
6815
+ } : void 0;
6816
+ const agentManager = createAgentManager(agentOptions);
5961
6817
  const handleInputChange = (value) => {
5962
6818
  setInputText(value);
5963
6819
  };
5964
6820
  const handleInputSubmit = () => {
5965
- if (!isInputMode()) return;
5966
- const element = targetElement();
5967
- const prompt = inputText().trim();
5968
- const currentX = mouseX();
5969
- const currentY = mouseY();
6821
+ const element = frozenElement() || targetElement();
6822
+ const prompt = isInputMode() ? inputText().trim() : "";
6823
+ if (!element) {
6824
+ deactivateRenderer();
6825
+ return;
6826
+ }
6827
+ const bounds = createElementBounds(element);
6828
+ const currentX = bounds.x + bounds.width / 2;
6829
+ const currentY = bounds.y + bounds.height / 2;
6830
+ setMouseX(currentX);
6831
+ setMouseY(currentY);
6832
+ if (options.agent?.provider && prompt) {
6833
+ deactivateRenderer();
6834
+ void agentManager.startSession({
6835
+ element,
6836
+ prompt,
6837
+ position: {
6838
+ x: currentX,
6839
+ y: currentY
6840
+ },
6841
+ selectionBounds: bounds
6842
+ });
6843
+ return;
6844
+ }
5970
6845
  setIsInputMode(false);
5971
6846
  setInputText("");
5972
- if (element) {
5973
- void executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(element, prompt || void 0)).then(() => {
5974
- deactivateRenderer();
5975
- });
5976
- } else {
6847
+ const tagName = extractElementTagName(element);
6848
+ void executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(element, prompt || void 0), bounds, tagName, element).then(() => {
5977
6849
  deactivateRenderer();
5978
- }
6850
+ });
5979
6851
  };
5980
6852
  const handleInputCancel = () => {
5981
6853
  if (!isInputMode()) return;
5982
6854
  deactivateRenderer();
5983
6855
  };
6856
+ const handleToggleExpand = () => {
6857
+ setIsToggleMode(true);
6858
+ setIsToggleFrozen(true);
6859
+ setIsInputExpanded(true);
6860
+ setIsInputMode(true);
6861
+ };
6862
+ const handleNativeSelectionCopy = async () => {
6863
+ const elements = nativeSelectionElements();
6864
+ if (elements.length === 0) return;
6865
+ const currentX = nativeSelectionCursorX();
6866
+ const currentY = nativeSelectionCursorY();
6867
+ const bounds = nativeSelectionBounds();
6868
+ const tagName = nativeSelectionTagName();
6869
+ setHasNativeSelection(false);
6870
+ clearNativeSelectionState();
6871
+ window.getSelection()?.removeAllRanges();
6872
+ if (elements.length === 1) {
6873
+ await executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(elements[0]), bounds, tagName);
6874
+ } else {
6875
+ await executeCopyOperation(currentX, currentY, () => copyMultipleElementsToClipboard(elements), bounds, tagName);
6876
+ }
6877
+ };
6878
+ const handleNativeSelectionEnter = () => {
6879
+ const elements = nativeSelectionElements();
6880
+ if (elements.length === 0) return;
6881
+ const bounds = nativeSelectionBounds();
6882
+ const currentX = bounds ? bounds.x + bounds.width / 2 : nativeSelectionCursorX();
6883
+ const currentY = bounds ? bounds.y + bounds.height / 2 : nativeSelectionCursorY();
6884
+ setHasNativeSelection(false);
6885
+ clearNativeSelectionState();
6886
+ window.getSelection()?.removeAllRanges();
6887
+ setMouseX(currentX);
6888
+ setMouseY(currentY);
6889
+ setIsToggleMode(true);
6890
+ setIsToggleFrozen(true);
6891
+ setIsInputExpanded(true);
6892
+ activateRenderer();
6893
+ setIsInputMode(true);
6894
+ };
5984
6895
  const handlePointerMove = (clientX, clientY) => {
5985
- if (isInputMode()) return;
6896
+ if (isInputMode() || isToggleFrozen()) return;
5986
6897
  setMouseX(clientX);
5987
6898
  setMouseY(clientY);
5988
- if (mouseSettleTimerId !== null) {
5989
- window.clearTimeout(mouseSettleTimerId);
5990
- }
5991
- setMouseHasSettled(false);
5992
- mouseSettleTimerId = window.setTimeout(() => {
5993
- setMouseHasSettled(true);
5994
- mouseSettleTimerId = null;
5995
- }, 300);
5996
6899
  if (isDragging()) {
5997
6900
  const direction = getAutoScrollDirection(clientX, clientY);
5998
6901
  const isNearEdge = direction.top || direction.bottom || direction.left || direction.right;
@@ -6025,37 +6928,68 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6025
6928
  setDidJustDrag(true);
6026
6929
  const dragRect = calculateDragRectangle(clientX, clientY);
6027
6930
  const elements = getElementsInDrag(dragRect, isValidGrabbableElement);
6028
- if (elements.length > 0) {
6029
- options.onDragEnd?.(elements, dragRect);
6030
- void executeCopyOperation(clientX, clientY, () => copyMultipleElementsToClipboard(elements));
6031
- } else {
6032
- const fallbackElements = getElementsInDragLoose(dragRect, isValidGrabbableElement);
6033
- if (fallbackElements.length > 0) {
6034
- options.onDragEnd?.(fallbackElements, dragRect);
6035
- void executeCopyOperation(clientX, clientY, () => copyMultipleElementsToClipboard(fallbackElements));
6931
+ const selectedElements = elements.length > 0 ? elements : getElementsInDragLoose(dragRect, isValidGrabbableElement);
6932
+ if (selectedElements.length > 0) {
6933
+ options.onDragEnd?.(selectedElements, dragRect);
6934
+ const firstElement = selectedElements[0];
6935
+ const firstElementRect = firstElement.getBoundingClientRect();
6936
+ const bounds = {
6937
+ x: firstElementRect.left,
6938
+ y: firstElementRect.top,
6939
+ width: firstElementRect.width,
6940
+ height: firstElementRect.height,
6941
+ borderRadius: "0px",
6942
+ transform: stripTranslateFromTransform(firstElement)
6943
+ };
6944
+ const tagName = extractElementTagName(firstElement);
6945
+ if (options.agent?.provider) {
6946
+ const centerX = bounds.x + bounds.width / 2;
6947
+ const centerY = bounds.y + bounds.height / 2;
6948
+ setMouseX(centerX);
6949
+ setMouseY(centerY);
6950
+ setFrozenElement(firstElement);
6951
+ setIsToggleMode(true);
6952
+ setIsToggleFrozen(true);
6953
+ setIsInputExpanded(true);
6954
+ setIsInputMode(true);
6955
+ } else {
6956
+ void executeCopyOperation(clientX, clientY, () => copyMultipleElementsToClipboard(selectedElements), bounds, tagName, firstElement);
6036
6957
  }
6037
6958
  }
6038
6959
  } else {
6039
6960
  const element = getElementAtPosition(clientX, clientY);
6040
6961
  if (!element) return;
6041
6962
  setLastGrabbedElement(element);
6042
- void executeCopyOperation(clientX, clientY, () => copySingleElementToClipboard(element));
6963
+ const bounds = createElementBounds(element);
6964
+ const tagName = extractElementTagName(element);
6965
+ void executeCopyOperation(clientX, clientY, () => copySingleElementToClipboard(element), bounds, tagName, element);
6043
6966
  }
6044
6967
  };
6045
6968
  const abortController = new AbortController();
6046
6969
  const eventListenerSignal = abortController.signal;
6047
6970
  window.addEventListener("keydown", (event) => {
6048
- if (event.key === "Escape" && isHoldingKeys()) {
6049
- if (isInputMode()) {
6050
- return;
6971
+ if (isInputMode() || isEventFromOverlay(event, "data-react-grab-ignore-events")) {
6972
+ if (event.key === "Escape" && agentManager.isProcessing()) {
6973
+ agentManager.abortAllSessions();
6051
6974
  }
6052
- deactivateRenderer();
6053
6975
  return;
6054
6976
  }
6977
+ if (event.key === "Escape") {
6978
+ if (agentManager.isProcessing()) {
6979
+ agentManager.abortAllSessions();
6980
+ return;
6981
+ }
6982
+ if (isHoldingKeys()) {
6983
+ deactivateRenderer();
6984
+ return;
6985
+ }
6986
+ }
6055
6987
  if (event.key === "Enter" && isHoldingKeys() && !isInputMode()) {
6056
6988
  event.preventDefault();
6057
6989
  event.stopPropagation();
6058
6990
  setIsToggleMode(true);
6991
+ setIsToggleFrozen(true);
6992
+ setIsInputExpanded(true);
6059
6993
  if (keydownSpamTimerId !== null) {
6060
6994
  window.clearTimeout(keydownSpamTimerId);
6061
6995
  keydownSpamTimerId = null;
@@ -6067,15 +7001,42 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6067
7001
  setIsInputMode(true);
6068
7002
  return;
6069
7003
  }
7004
+ if (event.key.toLowerCase() === "o" && !isInputMode()) {
7005
+ if (isActivated() && (event.metaKey || event.ctrlKey)) {
7006
+ const filePath = selectionFilePath();
7007
+ const lineNumber = selectionLineNumber();
7008
+ if (filePath) {
7009
+ event.preventDefault();
7010
+ event.stopPropagation();
7011
+ if (options.onOpenFile) {
7012
+ options.onOpenFile(filePath, lineNumber);
7013
+ } else {
7014
+ const url = buildOpenFileUrl(filePath, lineNumber);
7015
+ window.open(url, "_blank");
7016
+ }
7017
+ }
7018
+ return;
7019
+ }
7020
+ }
6070
7021
  if (!options.allowActivationInsideInput && isKeyboardEventTriggeredByInput(event)) {
6071
7022
  return;
6072
7023
  }
6073
- if (!isTargetKeyCombination(event)) return;
6074
- if (isActivated() || isHoldingKeys()) {
7024
+ if (!isTargetKeyCombination(event, options)) {
7025
+ if (isActivated() && !isToggleMode() && (event.metaKey || event.ctrlKey)) {
7026
+ if (!MODIFIER_KEYS.includes(event.key) && event.key !== "Enter") {
7027
+ deactivateRenderer();
7028
+ }
7029
+ }
7030
+ if (event.key !== "Enter") {
7031
+ return;
7032
+ }
7033
+ }
7034
+ if ((isActivated() || isHoldingKeys()) && !isInputMode()) {
6075
7035
  event.preventDefault();
6076
7036
  }
6077
7037
  if (isActivated()) {
6078
7038
  if (isToggleMode()) return;
7039
+ if (event.repeat) return;
6079
7040
  if (keydownSpamTimerId !== null) {
6080
7041
  window.clearTimeout(keydownSpamTimerId);
6081
7042
  }
@@ -6100,9 +7061,44 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6100
7061
  });
6101
7062
  window.addEventListener("keyup", (event) => {
6102
7063
  if (!isHoldingKeys() && !isActivated()) return;
6103
- const isReleasingModifier = !event.metaKey && !event.ctrlKey;
6104
- const isReleasingC = isCLikeKey(event.key, event.code);
6105
- if (isReleasingC || isReleasingModifier) {
7064
+ if (isInputMode()) return;
7065
+ const hasCustomShortcut = Boolean(options.activationShortcut || options.activationKey);
7066
+ const getRequiredModifiers = () => {
7067
+ if (options.activationKey) {
7068
+ const {
7069
+ metaKey,
7070
+ ctrlKey,
7071
+ shiftKey,
7072
+ altKey
7073
+ } = options.activationKey;
7074
+ return {
7075
+ metaKey: !!metaKey,
7076
+ ctrlKey: !!ctrlKey,
7077
+ shiftKey: !!shiftKey,
7078
+ altKey: !!altKey
7079
+ };
7080
+ }
7081
+ return {
7082
+ metaKey: true,
7083
+ ctrlKey: true,
7084
+ shiftKey: false,
7085
+ altKey: false
7086
+ };
7087
+ };
7088
+ const requiredModifiers = getRequiredModifiers();
7089
+ const isReleasingModifier = requiredModifiers.metaKey || requiredModifiers.ctrlKey ? !event.metaKey && !event.ctrlKey : requiredModifiers.shiftKey && !event.shiftKey || requiredModifiers.altKey && !event.altKey;
7090
+ const isReleasingActivationKey = options.activationShortcut ? !options.activationShortcut(event) : options.activationKey ? options.activationKey.key ? event.key.toLowerCase() === options.activationKey.key.toLowerCase() || keyMatchesCode(options.activationKey.key, event.code) : false : isCLikeKey(event.key, event.code);
7091
+ if (isActivated()) {
7092
+ if (isReleasingModifier) {
7093
+ if (isToggleMode()) return;
7094
+ deactivateRenderer();
7095
+ } else if (!hasCustomShortcut && isReleasingActivationKey && keydownSpamTimerId !== null) {
7096
+ window.clearTimeout(keydownSpamTimerId);
7097
+ keydownSpamTimerId = null;
7098
+ }
7099
+ return;
7100
+ }
7101
+ if (isReleasingActivationKey || isReleasingModifier) {
6106
7102
  if (isToggleMode()) return;
6107
7103
  deactivateRenderer();
6108
7104
  }
@@ -6112,17 +7108,15 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6112
7108
  });
6113
7109
  window.addEventListener("mousemove", (event) => {
6114
7110
  setIsTouchMode(false);
7111
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
6115
7112
  handlePointerMove(event.clientX, event.clientY);
6116
7113
  }, {
6117
7114
  signal: eventListenerSignal
6118
7115
  });
6119
7116
  window.addEventListener("mousedown", (event) => {
7117
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
6120
7118
  if (isInputMode()) {
6121
- const target = event.target;
6122
- const isClickingInput = target.closest("[data-react-grab-input]");
6123
- if (!isClickingInput) {
6124
- handleInputCancel();
6125
- }
7119
+ handleInputCancel();
6126
7120
  return;
6127
7121
  }
6128
7122
  const didHandle = handlePointerDown(event.clientX, event.clientY);
@@ -6135,6 +7129,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6135
7129
  });
6136
7130
  window.addEventListener("pointerdown", (event) => {
6137
7131
  if (!isRendererActive() || isCopying() || isInputMode()) return;
7132
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
6138
7133
  event.stopPropagation();
6139
7134
  }, {
6140
7135
  signal: eventListenerSignal,
@@ -6148,6 +7143,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6148
7143
  window.addEventListener("touchmove", (event) => {
6149
7144
  if (event.touches.length === 0) return;
6150
7145
  setIsTouchMode(true);
7146
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
6151
7147
  handlePointerMove(event.touches[0].clientX, event.touches[0].clientY);
6152
7148
  }, {
6153
7149
  signal: eventListenerSignal,
@@ -6156,12 +7152,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6156
7152
  window.addEventListener("touchstart", (event) => {
6157
7153
  if (event.touches.length === 0) return;
6158
7154
  setIsTouchMode(true);
7155
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
6159
7156
  if (isInputMode()) {
6160
- const target = event.target;
6161
- const isClickingInput = target.closest("[data-react-grab-input]");
6162
- if (!isClickingInput) {
6163
- handleInputCancel();
6164
- }
7157
+ handleInputCancel();
6165
7158
  return;
6166
7159
  }
6167
7160
  const didHandle = handlePointerDown(event.touches[0].clientX, event.touches[0].clientY);
@@ -6179,6 +7172,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6179
7172
  signal: eventListenerSignal
6180
7173
  });
6181
7174
  window.addEventListener("click", (event) => {
7175
+ if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
6182
7176
  if (isRendererActive() || isCopying() || didJustDrag()) {
6183
7177
  event.preventDefault();
6184
7178
  event.stopPropagation();
@@ -6201,6 +7195,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6201
7195
  document.addEventListener("visibilitychange", () => {
6202
7196
  if (document.hidden) {
6203
7197
  setGrabbedBoxes([]);
7198
+ if (isActivated() && !isInputMode() && activationTimestamp !== null && Date.now() - activationTimestamp > BLUR_DEACTIVATION_THRESHOLD_MS) {
7199
+ deactivateRenderer();
7200
+ }
6204
7201
  }
6205
7202
  }, {
6206
7203
  signal: eventListenerSignal
@@ -6217,6 +7214,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6217
7214
  signal: eventListenerSignal
6218
7215
  });
6219
7216
  document.addEventListener("copy", (event) => {
7217
+ if (isInputMode() || isEventFromOverlay(event, "data-react-grab-ignore-events")) {
7218
+ return;
7219
+ }
6220
7220
  if (isRendererActive() || isCopying()) {
6221
7221
  event.preventDefault();
6222
7222
  }
@@ -6224,18 +7224,97 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6224
7224
  signal: eventListenerSignal,
6225
7225
  capture: true
6226
7226
  });
7227
+ let selectionDebounceTimerId = null;
7228
+ document.addEventListener("selectionchange", () => {
7229
+ if (isRendererActive()) return;
7230
+ if (selectionDebounceTimerId !== null) {
7231
+ window.clearTimeout(selectionDebounceTimerId);
7232
+ }
7233
+ setHasNativeSelection(false);
7234
+ const selection = window.getSelection();
7235
+ if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
7236
+ clearNativeSelectionState();
7237
+ return;
7238
+ }
7239
+ selectionDebounceTimerId = window.setTimeout(() => {
7240
+ selectionDebounceTimerId = null;
7241
+ const currentSelection = window.getSelection();
7242
+ if (!currentSelection || currentSelection.isCollapsed || currentSelection.rangeCount === 0) {
7243
+ return;
7244
+ }
7245
+ const range = currentSelection.getRangeAt(0);
7246
+ const rangeRect = range.getBoundingClientRect();
7247
+ if (rangeRect.width === 0 && rangeRect.height === 0) {
7248
+ return;
7249
+ }
7250
+ const isBackward = (() => {
7251
+ if (!currentSelection.anchorNode || !currentSelection.focusNode) return false;
7252
+ const position = currentSelection.anchorNode.compareDocumentPosition(currentSelection.focusNode);
7253
+ if (position & Node.DOCUMENT_POSITION_FOLLOWING) return false;
7254
+ if (position & Node.DOCUMENT_POSITION_PRECEDING) return true;
7255
+ return currentSelection.anchorOffset > currentSelection.focusOffset;
7256
+ })();
7257
+ const clientRects = range.getClientRects();
7258
+ if (clientRects.length === 0) {
7259
+ return;
7260
+ }
7261
+ const cursorRect = isBackward ? clientRects[0] : clientRects[clientRects.length - 1];
7262
+ const cursorX = isBackward ? cursorRect.left : cursorRect.right;
7263
+ const cursorY = cursorRect.top + cursorRect.height / 2;
7264
+ if (isSelectionInsideEditableElement(cursorX, cursorY)) {
7265
+ clearNativeSelectionState();
7266
+ return;
7267
+ }
7268
+ setNativeSelectionCursorX(cursorX);
7269
+ setNativeSelectionCursorY(cursorY);
7270
+ const container = range.commonAncestorContainer;
7271
+ const element = container.nodeType === Node.ELEMENT_NODE ? container : container.parentElement;
7272
+ if (element && isValidGrabbableElement(element)) {
7273
+ setNativeSelectionElements([element]);
7274
+ setHasNativeSelection(true);
7275
+ } else {
7276
+ setNativeSelectionElements([]);
7277
+ }
7278
+ }, 150);
7279
+ }, {
7280
+ signal: eventListenerSignal
7281
+ });
6227
7282
  onCleanup(() => {
6228
7283
  abortController.abort();
6229
7284
  if (holdTimerId) window.clearTimeout(holdTimerId);
6230
7285
  if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
6231
- if (mouseSettleTimerId) window.clearTimeout(mouseSettleTimerId);
6232
7286
  stopAutoScroll();
6233
7287
  stopProgressAnimation();
6234
7288
  document.body.style.userSelect = "";
6235
- document.body.style.cursor = "";
7289
+ setCursorOverride(null);
6236
7290
  });
6237
7291
  const rendererRoot = mountRoot(styles_default);
6238
- const selectionVisible = createMemo(() => theme().selectionBox.enabled && isRendererActive() && !isDragging() && Boolean(targetElement()));
7292
+ const selectionVisible = createMemo(() => {
7293
+ if (!theme().selectionBox.enabled) return false;
7294
+ return isRendererActive() && !isDragging() && Boolean(targetElement());
7295
+ });
7296
+ const selectionTagName = createMemo(() => {
7297
+ const element = targetElement();
7298
+ if (!element) return void 0;
7299
+ return extractElementTagName(element) || void 0;
7300
+ });
7301
+ const selectionLabelVisible = createMemo(() => {
7302
+ if (!theme().elementLabel.enabled) return false;
7303
+ if (successLabels().length > 0) return false;
7304
+ return isRendererActive() && !isDragging() && Boolean(targetElement());
7305
+ });
7306
+ const computedLabelInstances = createMemo(() => {
7307
+ viewportVersion();
7308
+ return labelInstances().map((instance) => {
7309
+ if (!instance.element || !document.body.contains(instance.element)) {
7310
+ return instance;
7311
+ }
7312
+ return {
7313
+ ...instance,
7314
+ bounds: createElementBounds(instance.element)
7315
+ };
7316
+ });
7317
+ });
6239
7318
  const dragVisible = createMemo(() => theme().dragBox.enabled && isRendererActive() && isDraggingBeyondThreshold());
6240
7319
  const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
6241
7320
  const labelVisible = createMemo(() => {
@@ -6245,11 +7324,8 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6245
7324
  if (successLabels().length > 0) return false;
6246
7325
  return isRendererActive() && !isDragging() && Boolean(targetElement());
6247
7326
  });
6248
- const progressVisible = createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
6249
- const crosshairVisible = createMemo(() => theme().crosshair.enabled && isRendererActive() && !isDragging() && !isTouchMode());
6250
- const inputVisible = createMemo(() => theme().inputOverlay.enabled && isInputMode());
7327
+ const crosshairVisible = createMemo(() => theme().crosshair.enabled && isRendererActive() && !isDragging() && !isTouchMode() && !isToggleFrozen());
6251
7328
  const shouldShowGrabbedBoxes = createMemo(() => theme().grabbedBoxes.enabled);
6252
- const shouldShowSuccessLabels = createMemo(() => theme().successLabels.enabled);
6253
7329
  createEffect(on(theme, (currentTheme) => {
6254
7330
  if (currentTheme.hue !== 0) {
6255
7331
  rendererRoot.style.filter = `hue-rotate(${currentTheme.hue}deg)`;
@@ -6265,72 +7341,88 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6265
7341
  get selectionBounds() {
6266
7342
  return selectionBounds();
6267
7343
  },
6268
- get dragVisible() {
6269
- return dragVisible();
7344
+ get selectionFilePath() {
7345
+ return selectionFilePath();
6270
7346
  },
6271
- get dragBounds() {
6272
- return dragBounds();
7347
+ get selectionLineNumber() {
7348
+ return selectionLineNumber();
6273
7349
  },
6274
- get grabbedBoxes() {
6275
- return memo(() => !!shouldShowGrabbedBoxes())() ? grabbedBoxes() : [];
7350
+ get selectionTagName() {
7351
+ return selectionTagName();
6276
7352
  },
6277
- get successLabels() {
6278
- return memo(() => !!shouldShowSuccessLabels())() ? successLabels() : [];
7353
+ get selectionLabelVisible() {
7354
+ return selectionLabelVisible();
6279
7355
  },
6280
- get labelVariant() {
6281
- return labelVariant();
7356
+ get selectionLabelStatus() {
7357
+ return selectionLabelStatus();
6282
7358
  },
6283
- get labelContent() {
6284
- return labelContent();
7359
+ get labelInstances() {
7360
+ return computedLabelInstances();
6285
7361
  },
6286
- get labelX() {
6287
- return labelPosition().x;
7362
+ get dragVisible() {
7363
+ return dragVisible();
6288
7364
  },
6289
- get labelY() {
6290
- return labelPosition().y;
7365
+ get dragBounds() {
7366
+ return dragBounds();
6291
7367
  },
6292
- get labelVisible() {
6293
- return labelVisible();
7368
+ get grabbedBoxes() {
7369
+ return memo(() => !!shouldShowGrabbedBoxes())() ? grabbedBoxes() : [];
6294
7370
  },
6295
7371
  labelZIndex: Z_INDEX_LABEL,
6296
- get labelShowHint() {
6297
- return mouseHasSettled();
6298
- },
6299
- get progressVisible() {
6300
- return progressVisible();
6301
- },
6302
- get progress() {
6303
- return progress();
6304
- },
6305
7372
  get mouseX() {
6306
- return progressPosition().x;
7373
+ return cursorPosition().x;
6307
7374
  },
6308
7375
  get mouseY() {
6309
- return progressPosition().y;
7376
+ return cursorPosition().y;
6310
7377
  },
6311
7378
  get crosshairVisible() {
6312
7379
  return crosshairVisible();
6313
7380
  },
6314
- get inputVisible() {
6315
- return inputVisible();
7381
+ get inputValue() {
7382
+ return inputText();
6316
7383
  },
6317
- get inputX() {
6318
- return mouseX();
7384
+ get isInputExpanded() {
7385
+ return isInputExpanded();
6319
7386
  },
6320
- get inputY() {
6321
- return mouseY();
7387
+ get hasAgent() {
7388
+ return Boolean(options.agent?.provider);
6322
7389
  },
6323
- get inputValue() {
6324
- return inputText();
7390
+ get agentSessions() {
7391
+ return agentManager.sessions();
6325
7392
  },
7393
+ onAbortSession: (sessionId) => agentManager.abortSession(sessionId),
6326
7394
  onInputChange: handleInputChange,
6327
- onInputSubmit: handleInputSubmit,
7395
+ onInputSubmit: () => void handleInputSubmit(),
6328
7396
  onInputCancel: handleInputCancel,
7397
+ onToggleExpand: handleToggleExpand,
7398
+ get nativeSelectionCursorVisible() {
7399
+ return hasNativeSelection();
7400
+ },
7401
+ get nativeSelectionCursorX() {
7402
+ return nativeSelectionCursorX();
7403
+ },
7404
+ get nativeSelectionCursorY() {
7405
+ return nativeSelectionCursorY();
7406
+ },
7407
+ get nativeSelectionTagName() {
7408
+ return nativeSelectionTagName();
7409
+ },
7410
+ get nativeSelectionComponentName() {
7411
+ return nativeSelectionComponentName();
7412
+ },
7413
+ get nativeSelectionBounds() {
7414
+ return nativeSelectionBounds();
7415
+ },
7416
+ onNativeSelectionCopy: () => void handleNativeSelectionCopy(),
7417
+ onNativeSelectionEnter: handleNativeSelectionEnter,
6329
7418
  get theme() {
6330
7419
  return theme();
6331
7420
  }
6332
7421
  }), rendererRoot);
6333
7422
  }
7423
+ if (options.agent?.provider) {
7424
+ agentManager.tryResumeSessions();
7425
+ }
6334
7426
  const copyElementAPI = async (elements) => {
6335
7427
  const elementsArray = Array.isArray(elements) ? elements : [elements];
6336
7428
  if (elementsArray.length === 0) return false;
@@ -6355,6 +7447,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6355
7447
  return {
6356
7448
  activate: () => {
6357
7449
  if (!isActivated()) {
7450
+ setIsToggleMode(true);
6358
7451
  activateRenderer();
6359
7452
  }
6360
7453
  },
@@ -6367,11 +7460,15 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6367
7460
  if (isActivated()) {
6368
7461
  deactivateRenderer();
6369
7462
  } else {
7463
+ setIsToggleMode(true);
6370
7464
  activateRenderer();
6371
7465
  }
6372
7466
  },
6373
7467
  isActive: () => isActivated(),
6374
- dispose: dispose2,
7468
+ dispose: () => {
7469
+ hasInited = false;
7470
+ dispose2();
7471
+ },
6375
7472
  copyElement: copyElementAPI,
6376
7473
  getState: getStateAPI,
6377
7474
  updateTheme: (partialTheme) => {
@@ -6448,9 +7545,9 @@ bippy/dist/source.js:
6448
7545
 
6449
7546
  exports.DEFAULT_THEME = DEFAULT_THEME;
6450
7547
  exports.Ee = Ee;
6451
- exports.formatStack = formatStack;
7548
+ exports.formatElementInfo = formatElementInfo;
7549
+ exports.generateSnippet = generateSnippet;
6452
7550
  exports.getFileName = getFileName;
6453
- exports.getHTMLPreview = getHTMLPreview;
6454
7551
  exports.getNearestComponentName = getNearestComponentName;
6455
7552
  exports.getStack = getStack;
6456
7553
  exports.init = init;