react-grab 0.0.59 → 0.0.60

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.
@@ -888,7 +888,7 @@ function cleanChildren(parent, current, marker, replacement) {
888
888
 
889
889
  // dist/styles.css
890
890
  var styles_default = `/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
891
- @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;--tw-contain-size:initial;--tw-contain-layout:initial;--tw-contain-paint:initial;--tw-contain-style:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@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;--radius-xs:.125rem;--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-gray-border:#b0b0b0}}@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}.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)}.-ml-\\[2px\\]{margin-left:-2px}.ml-1{margin-left:calc(var(--spacing)*1)}.box-border{box-sizing:border-box}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-0{height:calc(var(--spacing)*0)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-5\\.5{height:calc(var(--spacing)*5.5)}.h-\\[9px\\]{height:9px}.h-\\[18px\\]{height:18px}.h-fit{height:fit-content}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-4{min-height:calc(var(--spacing)*4)}.w-0{width:calc(var(--spacing)*0)}.w-0\\.5{width:calc(var(--spacing)*.5)}.w-1{width:calc(var(--spacing)*1)}.w-2\\.5{width:calc(var(--spacing)*2.5)}.w-\\[18px\\]{width:18px}.w-auto{width:auto}.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-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-\\[3px\\]{gap:3px}.gap-\\[5px\\]{gap:5px}.gap-px{gap:1px}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-\\[1\\.5px\\]{border-radius:1.5px}.rounded-\\[1px\\]{border-radius:1px}.rounded-\\[3px\\]{border-radius:3px}.rounded-full{border-radius:3.40282e38px}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.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-width\\:0\\.5px\\]{border-width:.5px}.\\[border-top-width\\:0\\.5px\\]{border-top-width:.5px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-\\[\\#001D0E\\]{border-color:#001d0e}.border-\\[\\#00553269\\]{border-color:#00553269}.border-\\[\\#A3FFCA\\]{border-color:#a3ffca}.border-\\[\\#B3B3B3\\]{border-color:#b3b3b3}.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-tag-border{border-color:var(--color-label-tag-border)}.border-white{border-color:var(--color-white)}.border-t-\\[\\#B6B6B6\\]{border-top-color:#b6b6b6}.bg-\\[\\#A3FFCA\\]{background-color:#a3ffca}.bg-\\[\\#F2F2F2\\]{background-color:#f2f2f2}.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-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.p-0{padding:calc(var(--spacing)*0)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-\\[3px\\]{padding-inline:3px}.px-\\[5px\\]{padding-inline:5px}.py-0{padding-block:calc(var(--spacing)*0)}.py-1{padding-block:calc(var(--spacing)*1)}.py-\\[5px\\]{padding-block:5px}.py-px{padding-block:1px}.pt-1{padding-top:calc(var(--spacing)*1)}.pb-1\\.5{padding-bottom:calc(var(--spacing)*1.5)}.align-middle{vertical-align:middle}.font-\\[ui-monospace\\,\\'SFMono-Regular\\'\\,\\'SF_Mono\\'\\,\\'Menlo\\'\\,\\'Consolas\\'\\,\\'Liberation_Mono\\'\\,monospace\\]{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[11\\.5px\\]{font-size:11.5px}.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}.tracking-\\[-0\\.08em\\]{--tw-tracking:-.08em;letter-spacing:-.08em}.text-\\[\\#0C0C0C\\]{color:#0c0c0c}.text-\\[\\#00381F\\]{color:#00381f}.text-\\[\\#47004A\\]{color:#47004a}.text-\\[\\#767676\\]{color:#767676}.text-\\[\\#A3FFCA\\]{color:#a3ffca}.text-black{color:var(--color-black)}.text-label-tag-border{color:var(--color-label-tag-border)}.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\\.99\\]{opacity:.99}.\\[box-shadow\\:\\#00000033_0px_2px_3px\\]{box-shadow:0 2px 3px #0003}.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-\\[grid-template-rows\\]{transition-property:grid-template-rows;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))}.transition-none{transition-property:none}.duration-30{--tw-duration:30ms;transition-duration:30ms}.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}.contain-layout{--tw-contain-layout:layout;contain:var(--tw-contain-size,)var(--tw-contain-layout,)var(--tw-contain-paint,)var(--tw-contain-style,)}.outline-none{--tw-outline-style:none;outline-style:none}.\\[font-synthesis\\:none\\]{font-synthesis:none}@media (hover:hover){.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:opacity-80:hover{opacity:.8}.hover\\:opacity-100:hover{opacity:1}.hover\\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}}@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}@property --tw-contain-size{syntax:"*";inherits:false}@property --tw-contain-layout{syntax:"*";inherits:false}@property --tw-contain-paint{syntax:"*";inherits:false}@property --tw-contain-style{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes pulse{50%{opacity:.5}}`;
891
+ @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;--tw-contain-size:initial;--tw-contain-layout:initial;--tw-contain-paint:initial;--tw-contain-style: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;--radius-xs:.125rem;--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}}@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}.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)}.-ml-\\[2px\\]{margin-left:-2px}.ml-1{margin-left:calc(var(--spacing)*1)}.box-border{box-sizing:border-box}.flex{display:flex}.grid{display:grid}.hidden{display:none}.size-fit{width:fit-content;height:fit-content}.h-0{height:calc(var(--spacing)*0)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-5\\.5{height:calc(var(--spacing)*5.5)}.h-\\[7px\\]{height:7px}.h-\\[9px\\]{height:9px}.h-\\[18px\\]{height:18px}.h-fit{height:fit-content}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-4{min-height:calc(var(--spacing)*4)}.w-0{width:calc(var(--spacing)*0)}.w-0\\.5{width:calc(var(--spacing)*.5)}.w-1{width:calc(var(--spacing)*1)}.w-2\\.5{width:calc(var(--spacing)*2.5)}.w-\\[7px\\]{width:7px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.max-w-\\[280px\\]{max-width:280px}.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-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-\\[3px\\]{gap:3px}.gap-\\[5px\\]{gap:5px}.gap-px{gap:1px}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-\\[1\\.5px\\]{border-radius:1.5px}.rounded-\\[1px\\]{border-radius:1px}.rounded-full{border-radius:3.40282e38px}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-b-xs{border-bottom-right-radius:var(--radius-xs);border-bottom-left-radius:var(--radius-xs)}.border{border-style:var(--tw-border-style);border-width:1px}.\\[border-width\\:0\\.5px\\]{border-width:.5px}.\\[border-top-width\\:0\\.5px\\]{border-top-width:.5px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-\\[\\#B3B3B3\\]{border-color:#b3b3b3}.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-tag-border{border-color:var(--color-label-tag-border)}.border-white{border-color:var(--color-white)}.border-t-\\[\\#D9D9D9\\]{border-top-color:#d9d9d9}.bg-\\[\\#F7F7F7\\]{background-color:#f7f7f7}.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-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-\\[3px\\]{padding-inline:3px}.py-0{padding-block:calc(var(--spacing)*0)}.py-1{padding-block:calc(var(--spacing)*1)}.py-\\[3px\\]{padding-block:3px}.py-\\[5px\\]{padding-block:5px}.py-px{padding-block:1px}.pt-1{padding-top:calc(var(--spacing)*1)}.align-middle{vertical-align:middle}.font-\\[ui-monospace\\,\\'SFMono-Regular\\'\\,\\'SF_Mono\\'\\,\\'Menlo\\'\\,\\'Consolas\\'\\,\\'Liberation_Mono\\'\\,monospace\\]{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[11\\.5px\\]{font-size:11.5px}.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}.tracking-\\[-0\\.08em\\]{--tw-tracking:-.08em;letter-spacing:-.08em}.whitespace-normal{white-space:normal}.text-\\[\\#0C0C0C\\]{color:#0c0c0c}.text-\\[\\#47004A\\]{color:#47004a}.text-\\[\\#767676\\]{color:#767676}.text-black{color:var(--color-black)}.text-label-tag-border{color:var(--color-label-tag-border)}.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\\.99\\]{opacity:.99}.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\\:drop-shadow\\(0px_0px_4px_\\#51515180\\)\\]{filter:drop-shadow(0 0 4px #51515180)}.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-\\[grid-template-rows\\]{transition-property:grid-template-rows;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))}.transition-none{transition-property:none}.duration-30{--tw-duration:30ms;transition-duration:30ms}.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}.contain-layout{--tw-contain-layout:layout;contain:var(--tw-contain-size,)var(--tw-contain-layout,)var(--tw-contain-paint,)var(--tw-contain-style,)}.outline-none{--tw-outline-style:none;outline-style:none}.\\[font-synthesis\\:none\\]{font-synthesis:none}@media (hover:hover){.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.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}@property --tw-contain-size{syntax:"*";inherits:false}@property --tw-contain-layout{syntax:"*";inherits:false}@property --tw-contain-paint{syntax:"*";inherits:false}@property --tw-contain-style{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}`;
892
892
 
893
893
  // src/utils/is-keyboard-event-triggered-by-input.ts
894
894
  var FORM_TAGS_AND_ROLES = [
@@ -3733,54 +3733,12 @@ var Crosshair = (props) => {
3733
3733
  });
3734
3734
  };
3735
3735
 
3736
- // src/components/icon-cursor-simple.tsx
3737
- var _tmpl$3 = /* @__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>`);
3738
- var IconCursorSimple = (props) => {
3739
- const size = () => props.size ?? 9;
3740
- return (() => {
3741
- var _el$ = _tmpl$3();
3742
- createRenderEffect((_p$) => {
3743
- var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3744
- _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3745
- _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3746
- _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3747
- return _p$;
3748
- }, {
3749
- e: void 0,
3750
- t: void 0,
3751
- a: void 0
3752
- });
3753
- return _el$;
3754
- })();
3755
- };
3756
-
3757
3736
  // src/components/icon-open.tsx
3758
- var _tmpl$4 = /* @__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">`);
3737
+ var _tmpl$3 = /* @__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">`);
3759
3738
  var IconOpen = (props) => {
3760
3739
  const size = () => props.size ?? 12;
3761
3740
  return (() => {
3762
- var _el$ = _tmpl$4();
3763
- createRenderEffect((_p$) => {
3764
- var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3765
- _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
3766
- _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
3767
- _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
3768
- return _p$;
3769
- }, {
3770
- e: void 0,
3771
- t: void 0,
3772
- a: void 0
3773
- });
3774
- return _el$;
3775
- })();
3776
- };
3777
-
3778
- // src/components/icon-stop.tsx
3779
- var _tmpl$5 = /* @__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>`);
3780
- var IconStop = (props) => {
3781
- const size = () => props.size ?? 9;
3782
- return (() => {
3783
- var _el$ = _tmpl$5();
3741
+ var _el$ = _tmpl$3();
3784
3742
  createRenderEffect((_p$) => {
3785
3743
  var _v$ = size(), _v$2 = size(), _v$3 = props.class;
3786
3744
  _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -3797,27 +3755,22 @@ var IconStop = (props) => {
3797
3755
  };
3798
3756
 
3799
3757
  // src/components/selection-label.tsx
3800
- var _tmpl$6 = /* @__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>`);
3801
- var _tmpl$22 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-1 px-[3px] [border-width:0.5px] border-solid border-[#B3B3B3] py-0"><span class="text-[#0C0C0C] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">`);
3802
- var _tmpl$32 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-1 px-[3px] [border-width:0.5px] border-solid border-[#00553269] py-0"><span class="text-[#00381F] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">`);
3803
- var _tmpl$42 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-1 px-[3px] [border-width:0.5px] border-solid border-white py-0"><span class="text-[#0C0C0C] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">&gt;`);
3804
- var _tmpl$52 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-1 px-[3px] [border-width:0.5px] border-solid border-[#A3FFCA] py-0"><span class="text-[#00381F] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">&gt;`);
3805
- var _tmpl$62 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-0.5 px-[3px] [border-width:0.5px] border-solid border-[#001D0E] py-0"style="background-image:linear-gradient(in oklab 180deg, oklab(39.6% -0.086 0.036) 0%, oklab(33.9% -0.074 0.031) 100%)"><span class="text-[#A3FFCA] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">`);
3806
- var _tmpl$7 = /* @__PURE__ */ template(`<span>`);
3807
- var _tmpl$8 = /* @__PURE__ */ template(`<button>`);
3808
- var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
3809
- var _tmpl$0 = /* @__PURE__ */ template(`<div class="absolute w-0 h-0"style="border-left:8px solid transparent;border-right:8px solid transparent">`);
3810
- var _tmpl$1 = /* @__PURE__ */ template(`<div role=button><div class="text-black text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">Copy`);
3811
- var _tmpl$10 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col items-start px-2 py-[5px] w-auto h-fit rounded-bl-[3px] rounded-br-[3px] self-stretch bg-[#F2F2F2] [border-top-width:0.5px] border-t-solid border-t-[#B6B6B6] rounded-t-none">`);
3812
- var _tmpl$11 = /* @__PURE__ */ template(`<div class="[font-synthesis:none] contain-layout shrink-0 flex items-center gap-1 rounded-xs bg-[#A3FFCA] antialiased w-fit h-fit py-1 px-1.5"><div class="contain-layout shrink-0 flex items-center px-0 py-px w-fit h-[18px] rounded-[1.5px] gap-[3px]"><div class="text-[#00381F] text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit"></div></div><div class="contain-layout shrink-0 flex items-center gap-px w-fit h-fit">`);
3813
- var _tmpl$12 = /* @__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>`);
3814
- var _tmpl$13 = /* @__PURE__ */ template(`<div class="flex items-center gap-[3px] react-grab-shimmer rounded-[3px] pt-1 pb-1.5 px-1.5">`);
3815
- var _tmpl$14 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-px w-fit h-fit">`);
3816
- var _tmpl$15 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-1 w-fit h-fit"><span class="text-[#767676] text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">Press</span><div class="contain-layout shrink-0 flex flex-col items-start rounded-xs bg-white [border-width:0.5px] border-solid border-white p-0.5 w-fit h-fit"style="box-shadow:#0000008C 0px 0px 2px"><div class="w-2.5 h-[9px] shrink-0 opacity-[0.99] bg-cover bg-center"style=background-image:url(https://workers.paper.design/file-assets/01K8D51Q7E2ESJTN18XN2MT96X/01KBEJ7N5GQ0ZZ7K456R42AP4V.svg)></div></div><span class="text-[#767676] text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">to Edit`);
3817
- var _tmpl$16 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start gap-1 w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1 w-fit h-fit px-1.5"></div><div class="grid w-full transition-[grid-template-rows] duration-30 ease-out"><div class="overflow-hidden min-h-0">`);
3818
- var _tmpl$17 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea class="text-black text-[12px] leading-4 tracking-[-0.04em] font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0"placeholder="type to edit"rows=1 style=field-sizing:content;min-height:16px></textarea><button class="contain-layout shrink-0 flex flex-col items-start p-0.5 rounded-xs bg-white [border-width:0.5px] border-solid border-white w-fit h-fit cursor-pointer ml-1 transition-none hover:scale-105 hover:shadow-md"style="box-shadow:#0000008C 0px 0px 2px"><div style=background-image:url(https://workers.paper.design/file-assets/01K8D51Q7E2ESJTN18XN2MT96X/01KBEJ7N5GQ0ZZ7K456R42AP4V.svg)>`);
3819
- var _tmpl$18 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start gap-1 w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1 px-1.5 w-fit h-fit">`);
3820
- var _tmpl$19 = /* @__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="[font-synthesis:none] contain-layout flex items-center gap-[5px] rounded-xs bg-white [box-shadow:#00000033_0px_2px_3px] antialiased w-fit h-fit p-0">`);
3758
+ var _tmpl$4 = /* @__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>`);
3759
+ var _tmpl$22 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-1 px-[3px] [border-width:0.5px] border-solid border-[#B3B3B3] py-0 bg-[#F7F7F7]"><span class="text-[#0C0C0C] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">`);
3760
+ var _tmpl$32 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center w-fit h-4 rounded-[1px] gap-1 px-[3px] [border-width:0.5px] border-solid border-white py-0"><span class="text-[#0C0C0C] text-[11.5px] leading-3.5 shrink-0 tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace] w-fit h-fit">&gt;`);
3761
+ var _tmpl$42 = /* @__PURE__ */ template(`<div class="absolute w-0 h-0"style="border-left:8px solid transparent;border-right:8px solid transparent">`);
3762
+ var _tmpl$5 = /* @__PURE__ */ template(`<div role=button><div class="text-black text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">`);
3763
+ var _tmpl$6 = /* @__PURE__ */ template(`<div class="[font-synthesis:none] contain-layout shrink-0 flex flex-col items-start px-2 py-[5px] w-auto h-fit self-stretch [border-top-width:0.5px] border-t-solid border-t-[#D9D9D9] antialiased rounded-t-none rounded-b-xs"style="background-image:linear-gradient(in oklab 180deg, oklab(100% 0 0) 0%, oklab(96.1% 0 0) 5.92%)">`);
3764
+ var _tmpl$7 = /* @__PURE__ */ template(`<div class="[font-synthesis:none] contain-layout shrink-0 flex items-center gap-1 rounded-xs bg-white antialiased w-fit h-fit py-1 px-1.5"><div class="contain-layout shrink-0 flex items-center px-0 py-px w-fit h-[18px] rounded-[1.5px] gap-[3px]"><div class="text-black text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">`);
3765
+ var _tmpl$8 = /* @__PURE__ */ template(`<button class="contain-layout shrink-0 flex flex-col items-start rounded-xs bg-white [border-width:0.5px] border-solid border-[#B3B3B3] p-1 size-fit cursor-pointer ml-1 transition-none hover:scale-105"><div class="shrink-0 w-[7px] h-[7px] rounded-[1px] bg-black">`);
3766
+ var _tmpl$9 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea class="text-black text-[12px] leading-4 tracking-[-0.04em] font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0 opacity-50"placeholder="type to edit"rows=1 disabled style=field-sizing:content;min-height:16px>`);
3767
+ var _tmpl$0 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start gap-1 w-fit h-fit max-w-[280px]"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1 px-1.5 w-auto h-fit"><div class="contain-layout flex items-center px-0 py-px w-auto h-fit rounded-[1.5px] gap-[3px]"><div class="text-black text-[12px] leading-4 tracking-[-0.04em] font-sans font-medium w-auto h-fit whitespace-normal react-grab-shimmer">`);
3768
+ var _tmpl$1 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-px w-fit h-fit">`);
3769
+ var _tmpl$10 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-1 w-fit h-fit"><span class="text-[#767676] text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">Press</span><div class="contain-layout shrink-0 flex flex-col items-start px-[3px] py-[3px] rounded-xs bg-white [border-width:0.5px] border-solid border-[#B3B3B3] size-fit"><div class="w-2.5 h-[9px] shrink-0 opacity-[0.99] bg-cover bg-center"style=background-image:url(https://workers.paper.design/file-assets/01K8D51Q7E2ESJTN18XN2MT96X/01KBEJ7N5GQ0ZZ7K456R42AP4V.svg)></div></div><span class="text-[#767676] text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">to edit`);
3770
+ var _tmpl$11 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start gap-1 w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1 w-fit h-fit px-1.5"></div><div class="grid w-full transition-[grid-template-rows] duration-30 ease-out"><div class="overflow-hidden min-h-0">`);
3771
+ var _tmpl$12 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea class="text-black text-[12px] leading-4 tracking-[-0.04em] font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0"placeholder="type to edit"rows=1 style=field-sizing:content;min-height:16px></textarea><button class="contain-layout shrink-0 flex flex-col items-start px-[3px] py-[3px] rounded-xs bg-white [border-width:0.5px] border-solid border-[#B3B3B3] size-fit cursor-pointer ml-1 transition-none hover:scale-105"><div style=background-image:url(https://workers.paper.design/file-assets/01K8D51Q7E2ESJTN18XN2MT96X/01KBEJ7N5GQ0ZZ7K456R42AP4V.svg)>`);
3772
+ var _tmpl$13 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start gap-1 w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1 px-1.5 w-fit h-fit">`);
3773
+ var _tmpl$14 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events class="fixed font-sans antialiased transition-opacity duration-300 ease-out [filter:drop-shadow(0px_0px_4px_#51515180)]"style=z-index:2147483647><div class="[font-synthesis:none] contain-layout flex items-center gap-[5px] rounded-xs bg-white antialiased w-fit h-fit p-0">`);
3821
3774
  var ARROW_HEIGHT = 8;
3822
3775
  var LABEL_GAP = 4;
3823
3776
  var IDLE_TIMEOUT_MS = 400;
@@ -3832,7 +3785,7 @@ var TagBadge = (props) => {
3832
3785
  props.onHoverChange?.(false);
3833
3786
  };
3834
3787
  return (() => {
3835
- var _el$ = _tmpl$6(), _el$2 = _el$.firstChild;
3788
+ var _el$ = _tmpl$4(), _el$2 = _el$.firstChild;
3836
3789
  addEventListener(_el$, "click", props.onClick);
3837
3790
  _el$.addEventListener("mouseleave", handleMouseLeave);
3838
3791
  _el$.addEventListener("mouseenter", handleMouseEnter);
@@ -3867,46 +3820,12 @@ var ParentBadge = (props) => (() => {
3867
3820
  insert(_el$4, () => props.name);
3868
3821
  return _el$3;
3869
3822
  })();
3870
- var CopiedParentBadge = (props) => (() => {
3871
- var _el$5 = _tmpl$32(), _el$6 = _el$5.firstChild;
3872
- insert(_el$6, () => props.name);
3873
- return _el$5;
3874
- })();
3875
- var ChevronSeparator = () => _tmpl$42();
3876
- var CopiedChevronSeparator = () => _tmpl$52();
3877
- var CopiedTagBadge = (props) => (() => {
3878
- var _el$9 = _tmpl$62(), _el$0 = _el$9.firstChild;
3879
- insert(_el$0, () => props.tagName);
3880
- return _el$9;
3881
- })();
3882
- var ActionPill = (props) => {
3883
- 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");
3884
- const content = [memo(() => props.icon), (() => {
3885
- var _el$1 = _tmpl$7();
3886
- insert(_el$1, () => props.label);
3887
- createRenderEffect(() => className(_el$1, cn("text-black text-[12px] leading-4 font-medium tracking-[-0.04em]", props.shrink && "shrink-0 w-fit h-fit")));
3888
- return _el$1;
3889
- })()];
3890
- return props.asButton ? (() => {
3891
- var _el$10 = _tmpl$8();
3892
- addEventListener(_el$10, "click", props.onClick);
3893
- className(_el$10, baseClass);
3894
- insert(_el$10, content);
3895
- return _el$10;
3896
- })() : (() => {
3897
- var _el$11 = _tmpl$9();
3898
- addEventListener(_el$11, "click", props.onClick);
3899
- className(_el$11, baseClass);
3900
- insert(_el$11, content);
3901
- createRenderEffect(() => setAttribute(_el$11, "role", props.onClick ? "button" : void 0));
3902
- return _el$11;
3903
- })();
3904
- };
3823
+ var ChevronSeparator = () => _tmpl$32();
3905
3824
  var Arrow = (props) => {
3906
3825
  const arrowColor = () => props.color ?? "white";
3907
3826
  return (() => {
3908
- var _el$12 = _tmpl$0();
3909
- createRenderEffect((_$p) => style(_el$12, {
3827
+ var _el$6 = _tmpl$42();
3828
+ createRenderEffect((_$p) => style(_el$6, {
3910
3829
  left: `${props.leftPx}px`,
3911
3830
  ...props.position === "bottom" ? {
3912
3831
  top: "0",
@@ -3921,19 +3840,20 @@ var Arrow = (props) => {
3921
3840
  "border-top": `8px solid ${arrowColor()}`
3922
3841
  }
3923
3842
  }, _$p));
3924
- return _el$12;
3843
+ return _el$6;
3925
3844
  })();
3926
3845
  };
3927
3846
  var ClickToCopyPill = (props) => (() => {
3928
- var _el$13 = _tmpl$1();
3929
- addEventListener(_el$13, "click", props.onClick);
3930
- createRenderEffect(() => className(_el$13, cn("contain-layout shrink-0 flex items-center px-0 py-px w-fit h-[18px] rounded-[1.5px] gap-[3px]", props.asButton && "cursor-pointer", props.dimmed && "opacity-50 hover:opacity-100 transition-opacity")));
3931
- return _el$13;
3847
+ var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild;
3848
+ addEventListener(_el$7, "click", props.onClick);
3849
+ insert(_el$8, () => props.hasParent ? "Copy" : "Click to copy");
3850
+ createRenderEffect(() => className(_el$7, cn("contain-layout shrink-0 flex items-center px-0 py-px w-fit h-[18px] rounded-[1.5px] gap-[3px]", props.asButton && "cursor-pointer", props.dimmed && "opacity-50 hover:opacity-100 transition-opacity")));
3851
+ return _el$7;
3932
3852
  })();
3933
3853
  var BottomSection = (props) => (() => {
3934
- var _el$14 = _tmpl$10();
3935
- insert(_el$14, () => props.children);
3936
- return _el$14;
3854
+ var _el$9 = _tmpl$6();
3855
+ insert(_el$9, () => props.children);
3856
+ return _el$9;
3937
3857
  })();
3938
3858
  var SelectionLabel = (props) => {
3939
3859
  let containerRef;
@@ -4029,9 +3949,10 @@ var SelectionLabel = (props) => {
4029
3949
  const viewportWidth = window.innerWidth;
4030
3950
  const viewportHeight = window.innerHeight;
4031
3951
  const selectionCenterX = bounds.x + bounds.width / 2;
3952
+ const cursorX = props.mouseX ?? selectionCenterX;
4032
3953
  const selectionBottom = bounds.y + bounds.height;
4033
3954
  const selectionTop = bounds.y;
4034
- let positionLeft = selectionCenterX - labelWidth / 2;
3955
+ let positionLeft = cursorX - labelWidth / 2;
4035
3956
  let positionTop = selectionBottom + ARROW_HEIGHT + LABEL_GAP;
4036
3957
  if (positionLeft + labelWidth > viewportWidth - VIEWPORT_MARGIN_PX) {
4037
3958
  positionLeft = viewportWidth - labelWidth - VIEWPORT_MARGIN_PX;
@@ -4050,7 +3971,7 @@ var SelectionLabel = (props) => {
4050
3971
  if (positionTop < VIEWPORT_MARGIN_PX) {
4051
3972
  positionTop = VIEWPORT_MARGIN_PX;
4052
3973
  }
4053
- const arrowLeft = Math.max(12, Math.min(selectionCenterX - positionLeft, labelWidth - 12));
3974
+ const arrowLeft = Math.max(12, Math.min(cursorX - positionLeft, labelWidth - 12));
4054
3975
  return {
4055
3976
  left: positionLeft,
4056
3977
  top: positionTop,
@@ -4090,128 +4011,84 @@ var SelectionLabel = (props) => {
4090
4011
  return memo(() => props.visible !== false)() && props.selectionBounds;
4091
4012
  },
4092
4013
  get children() {
4093
- var _el$15 = _tmpl$19(), _el$20 = _el$15.firstChild;
4094
- _el$15.$$click = stopPropagation;
4095
- _el$15.$$mousedown = stopPropagation;
4014
+ var _el$0 = _tmpl$14(), _el$12 = _el$0.firstChild;
4015
+ _el$0.$$click = stopPropagation;
4016
+ _el$0.$$mousedown = stopPropagation;
4096
4017
  var _ref$ = containerRef;
4097
- typeof _ref$ === "function" ? use(_ref$, _el$15) : containerRef = _el$15;
4098
- insert(_el$15, createComponent(Arrow, {
4018
+ typeof _ref$ === "function" ? use(_ref$, _el$0) : containerRef = _el$0;
4019
+ insert(_el$0, createComponent(Arrow, {
4099
4020
  get position() {
4100
4021
  return arrowPosition();
4101
4022
  },
4102
4023
  get leftPx() {
4103
4024
  return computedPosition().arrowLeft;
4104
- },
4105
- get color() {
4106
- return props.status === "copied" || props.status === "fading" ? "#A3FFCA" : void 0;
4107
4025
  }
4108
- }), _el$20);
4109
- insert(_el$15, createComponent(Show, {
4026
+ }), _el$12);
4027
+ insert(_el$0, createComponent(Show, {
4110
4028
  get when() {
4111
4029
  return props.status === "copied" || props.status === "fading";
4112
4030
  },
4113
4031
  get children() {
4114
- var _el$16 = _tmpl$11(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling;
4115
- insert(_el$18, () => props.hasAgent ? "Completed" : "Copied");
4116
- insert(_el$19, createComponent(Show, {
4117
- get when() {
4118
- return props.componentName;
4119
- },
4120
- get children() {
4121
- return [createComponent(CopiedParentBadge, {
4122
- get name() {
4123
- return props.componentName;
4124
- }
4125
- }), createComponent(CopiedChevronSeparator, {})];
4126
- }
4127
- }), null);
4128
- insert(_el$19, createComponent(CopiedTagBadge, {
4129
- get tagName() {
4130
- return tagDisplay();
4131
- }
4132
- }), null);
4133
- return _el$16;
4032
+ var _el$1 = _tmpl$7(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild;
4033
+ insert(_el$11, () => props.hasAgent ? "Completed" : "Copied");
4034
+ return _el$1;
4134
4035
  }
4135
- }), _el$20);
4136
- insert(_el$20, createComponent(Show, {
4036
+ }), _el$12);
4037
+ insert(_el$12, createComponent(Show, {
4137
4038
  get when() {
4138
4039
  return props.status === "copying";
4139
4040
  },
4140
4041
  get children() {
4141
- var _el$21 = _tmpl$13();
4142
- insert(_el$21, createComponent(TagBadge, {
4143
- get tagName() {
4144
- return tagDisplay();
4145
- },
4146
- get isClickable() {
4147
- return isTagClickable();
4148
- },
4149
- onClick: handleTagClick,
4150
- onHoverChange: handleTagHoverChange,
4151
- showMono: true,
4152
- shrink: true
4153
- }), null);
4154
- insert(_el$21, createComponent(ActionPill, {
4155
- get icon() {
4156
- return createComponent(IconCursorSimple, {
4157
- size: 9,
4158
- "class": "text-black shrink-0"
4159
- });
4160
- },
4161
- get label() {
4162
- return props.statusText ?? "Grabbing\u2026";
4163
- }
4164
- }), null);
4165
- insert(_el$21, createComponent(Show, {
4166
- get when() {
4167
- return memo(() => !!props.hasAgent)() && props.onAbort;
4168
- },
4042
+ var _el$13 = _tmpl$0(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild;
4043
+ insert(_el$16, () => props.statusText ?? "Grabbing\u2026");
4044
+ insert(_el$13, createComponent(BottomSection, {
4169
4045
  get children() {
4170
- var _el$22 = _tmpl$12();
4171
- _el$22.$$click = (event) => {
4172
- event.preventDefault();
4173
- event.stopPropagation();
4174
- event.stopImmediatePropagation();
4175
- props.onAbort?.();
4176
- };
4177
- _el$22.$$mousedown = (event) => {
4178
- event.preventDefault();
4179
- event.stopPropagation();
4180
- event.stopImmediatePropagation();
4181
- };
4182
- insert(_el$22, createComponent(IconStop, {
4183
- size: 8,
4184
- "class": "text-white"
4185
- }));
4186
- return _el$22;
4046
+ var _el$17 = _tmpl$9(), _el$18 = _el$17.firstChild;
4047
+ var _ref$2 = inputRef;
4048
+ typeof _ref$2 === "function" ? use(_ref$2, _el$18) : inputRef = _el$18;
4049
+ insert(_el$17, createComponent(Show, {
4050
+ get when() {
4051
+ return props.onAbort;
4052
+ },
4053
+ get children() {
4054
+ var _el$19 = _tmpl$8();
4055
+ addEventListener(_el$19, "click", props.onAbort);
4056
+ return _el$19;
4057
+ }
4058
+ }), null);
4059
+ createRenderEffect(() => _el$18.value = props.inputValue ?? "");
4060
+ return _el$17;
4187
4061
  }
4188
4062
  }), null);
4189
- return _el$21;
4063
+ return _el$13;
4190
4064
  }
4191
4065
  }), null);
4192
- insert(_el$20, createComponent(Show, {
4066
+ insert(_el$12, createComponent(Show, {
4193
4067
  get when() {
4194
4068
  return memo(() => !!isNotProcessing())() && !props.isInputExpanded;
4195
4069
  },
4196
4070
  get children() {
4197
- var _el$23 = _tmpl$16(), _el$24 = _el$23.firstChild, _el$26 = _el$24.nextSibling, _el$27 = _el$26.firstChild;
4198
- insert(_el$24, createComponent(ClickToCopyPill, {
4071
+ var _el$20 = _tmpl$11(), _el$21 = _el$20.firstChild, _el$23 = _el$21.nextSibling, _el$24 = _el$23.firstChild;
4072
+ insert(_el$21, createComponent(ClickToCopyPill, {
4199
4073
  onClick: handleSubmit,
4200
- shrink: true
4074
+ shrink: true,
4075
+ get hasParent() {
4076
+ return !!props.componentName;
4077
+ }
4201
4078
  }), null);
4202
- insert(_el$24, createComponent(Show, {
4079
+ insert(_el$21, createComponent(Show, {
4203
4080
  get when() {
4204
4081
  return props.componentName;
4205
4082
  },
4206
4083
  get children() {
4207
- var _el$25 = _tmpl$14();
4208
- insert(_el$25, createComponent(ParentBadge, {
4084
+ var _el$22 = _tmpl$1();
4085
+ insert(_el$22, createComponent(ParentBadge, {
4209
4086
  get name() {
4210
4087
  return props.componentName;
4211
4088
  }
4212
4089
  }), null);
4213
- insert(_el$25, createComponent(ChevronSeparator, {}), null);
4214
- insert(_el$25, createComponent(TagBadge, {
4090
+ insert(_el$22, createComponent(ChevronSeparator, {}), null);
4091
+ insert(_el$22, createComponent(TagBadge, {
4215
4092
  get tagName() {
4216
4093
  return tagDisplay();
4217
4094
  },
@@ -4223,10 +4100,10 @@ var SelectionLabel = (props) => {
4223
4100
  showMono: true,
4224
4101
  shrink: true
4225
4102
  }), null);
4226
- return _el$25;
4103
+ return _el$22;
4227
4104
  }
4228
4105
  }), null);
4229
- insert(_el$24, createComponent(Show, {
4106
+ insert(_el$21, createComponent(Show, {
4230
4107
  get when() {
4231
4108
  return !props.componentName;
4232
4109
  },
@@ -4245,40 +4122,43 @@ var SelectionLabel = (props) => {
4245
4122
  });
4246
4123
  }
4247
4124
  }), null);
4248
- insert(_el$27, createComponent(BottomSection, {
4125
+ insert(_el$24, createComponent(BottomSection, {
4249
4126
  get children() {
4250
- var _el$28 = _tmpl$15(), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling; _el$30.firstChild;
4251
- return _el$28;
4127
+ var _el$25 = _tmpl$10(), _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling; _el$27.firstChild;
4128
+ return _el$25;
4252
4129
  }
4253
4130
  }));
4254
- createRenderEffect((_$p) => setStyleProperty(_el$26, "grid-template-rows", isIdle() ? "1fr" : "0fr"));
4255
- return _el$23;
4131
+ createRenderEffect((_$p) => setStyleProperty(_el$23, "grid-template-rows", isIdle() ? "1fr" : "0fr"));
4132
+ return _el$20;
4256
4133
  }
4257
4134
  }), null);
4258
- insert(_el$20, createComponent(Show, {
4135
+ insert(_el$12, createComponent(Show, {
4259
4136
  get when() {
4260
4137
  return memo(() => !!isNotProcessing())() && props.isInputExpanded;
4261
4138
  },
4262
4139
  get children() {
4263
- var _el$32 = _tmpl$18(), _el$33 = _el$32.firstChild;
4264
- insert(_el$33, createComponent(ClickToCopyPill, {
4140
+ var _el$29 = _tmpl$13(), _el$30 = _el$29.firstChild;
4141
+ insert(_el$30, createComponent(ClickToCopyPill, {
4265
4142
  onClick: handleSubmit,
4266
4143
  dimmed: true,
4267
- shrink: true
4144
+ shrink: true,
4145
+ get hasParent() {
4146
+ return !!props.componentName;
4147
+ }
4268
4148
  }), null);
4269
- insert(_el$33, createComponent(Show, {
4149
+ insert(_el$30, createComponent(Show, {
4270
4150
  get when() {
4271
4151
  return props.componentName;
4272
4152
  },
4273
4153
  get children() {
4274
- var _el$34 = _tmpl$14();
4275
- insert(_el$34, createComponent(ParentBadge, {
4154
+ var _el$31 = _tmpl$1();
4155
+ insert(_el$31, createComponent(ParentBadge, {
4276
4156
  get name() {
4277
4157
  return props.componentName;
4278
4158
  }
4279
4159
  }), null);
4280
- insert(_el$34, createComponent(ChevronSeparator, {}), null);
4281
- insert(_el$34, createComponent(TagBadge, {
4160
+ insert(_el$31, createComponent(ChevronSeparator, {}), null);
4161
+ insert(_el$31, createComponent(TagBadge, {
4282
4162
  get tagName() {
4283
4163
  return tagDisplay();
4284
4164
  },
@@ -4291,10 +4171,10 @@ var SelectionLabel = (props) => {
4291
4171
  shrink: true,
4292
4172
  forceShowIcon: true
4293
4173
  }), null);
4294
- return _el$34;
4174
+ return _el$31;
4295
4175
  }
4296
4176
  }), null);
4297
- insert(_el$33, createComponent(Show, {
4177
+ insert(_el$30, createComponent(Show, {
4298
4178
  get when() {
4299
4179
  return !props.componentName;
4300
4180
  },
@@ -4314,29 +4194,29 @@ var SelectionLabel = (props) => {
4314
4194
  });
4315
4195
  }
4316
4196
  }), null);
4317
- insert(_el$32, createComponent(BottomSection, {
4197
+ insert(_el$29, createComponent(BottomSection, {
4318
4198
  get children() {
4319
- var _el$35 = _tmpl$17(), _el$36 = _el$35.firstChild, _el$37 = _el$36.nextSibling, _el$38 = _el$37.firstChild;
4320
- _el$36.$$keydown = handleKeyDown;
4321
- _el$36.$$input = handleInput;
4322
- var _ref$2 = inputRef;
4323
- typeof _ref$2 === "function" ? use(_ref$2, _el$36) : inputRef = _el$36;
4324
- _el$37.$$click = handleSubmit;
4325
- createRenderEffect(() => className(_el$38, cn("w-2.5 h-[9px] shrink-0 bg-cover bg-center transition-opacity duration-100", props.inputValue ? "opacity-[0.99]" : "opacity-50")));
4326
- createRenderEffect(() => _el$36.value = props.inputValue ?? "");
4327
- return _el$35;
4199
+ var _el$32 = _tmpl$12(), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling, _el$35 = _el$34.firstChild;
4200
+ _el$33.$$keydown = handleKeyDown;
4201
+ _el$33.$$input = handleInput;
4202
+ var _ref$3 = inputRef;
4203
+ typeof _ref$3 === "function" ? use(_ref$3, _el$33) : inputRef = _el$33;
4204
+ _el$34.$$click = handleSubmit;
4205
+ createRenderEffect(() => className(_el$35, cn("w-2.5 h-[9px] shrink-0 bg-cover bg-center transition-opacity duration-100", props.inputValue ? "opacity-[0.99]" : "opacity-50")));
4206
+ createRenderEffect(() => _el$33.value = props.inputValue ?? "");
4207
+ return _el$32;
4328
4208
  }
4329
4209
  }), null);
4330
- return _el$32;
4210
+ return _el$29;
4331
4211
  }
4332
4212
  }), null);
4333
4213
  createRenderEffect((_p$) => {
4334
4214
  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 = props.status === "copied" || props.status === "fading" ? "none" : void 0;
4335
- _v$3 !== _p$.e && setStyleProperty(_el$15, "top", _p$.e = _v$3);
4336
- _v$4 !== _p$.t && setStyleProperty(_el$15, "left", _p$.t = _v$4);
4337
- _v$5 !== _p$.a && setStyleProperty(_el$15, "pointer-events", _p$.a = _v$5);
4338
- _v$6 !== _p$.o && setStyleProperty(_el$15, "opacity", _p$.o = _v$6);
4339
- _v$7 !== _p$.i && setStyleProperty(_el$20, "display", _p$.i = _v$7);
4215
+ _v$3 !== _p$.e && setStyleProperty(_el$0, "top", _p$.e = _v$3);
4216
+ _v$4 !== _p$.t && setStyleProperty(_el$0, "left", _p$.t = _v$4);
4217
+ _v$5 !== _p$.a && setStyleProperty(_el$0, "pointer-events", _p$.a = _v$5);
4218
+ _v$6 !== _p$.o && setStyleProperty(_el$0, "opacity", _p$.o = _v$6);
4219
+ _v$7 !== _p$.i && setStyleProperty(_el$12, "display", _p$.i = _v$7);
4340
4220
  return _p$;
4341
4221
  }, {
4342
4222
  e: void 0,
@@ -4345,14 +4225,14 @@ var SelectionLabel = (props) => {
4345
4225
  o: void 0,
4346
4226
  i: void 0
4347
4227
  });
4348
- return _el$15;
4228
+ return _el$0;
4349
4229
  }
4350
4230
  });
4351
4231
  };
4352
4232
  delegateEvents(["click", "mousedown", "input", "keydown"]);
4353
4233
 
4354
4234
  // src/components/selection-cursor.tsx
4355
- var _tmpl$20 = /* @__PURE__ */ template(`<div class="fixed z-2147483647"><button data-react-grab-selection-cursor>`);
4235
+ var _tmpl$15 = /* @__PURE__ */ template(`<div class="fixed z-2147483647"><button data-react-grab-selection-cursor>`);
4356
4236
  var SelectionCursor = (props) => {
4357
4237
  const [isHovered, setIsHovered] = createSignal(false);
4358
4238
  const [debouncedVisible, setDebouncedVisible] = createSignal(false);
@@ -4389,7 +4269,7 @@ var SelectionCursor = (props) => {
4389
4269
  });
4390
4270
  }
4391
4271
  }), (() => {
4392
- var _el$ = _tmpl$20(), _el$2 = _el$.firstChild;
4272
+ var _el$ = _tmpl$15(), _el$2 = _el$.firstChild;
4393
4273
  _el$.addEventListener("mouseleave", () => setIsHovered(false));
4394
4274
  _el$.addEventListener("mouseenter", () => setIsHovered(true));
4395
4275
  _el$2.$$click = handleClick;
@@ -4430,10 +4310,6 @@ var SelectionCursor = (props) => {
4430
4310
  delegateEvents(["click"]);
4431
4311
 
4432
4312
  // src/components/renderer.tsx
4433
- var truncateStatus = (status, maxLength = 30) => {
4434
- if (status.length <= maxLength) return status;
4435
- return `${status.slice(0, maxLength)}\u2026`;
4436
- };
4437
4313
  var ReactGrabRenderer = (props) => {
4438
4314
  return [createComponent(Show, {
4439
4315
  get when() {
@@ -4523,13 +4399,19 @@ var ReactGrabRenderer = (props) => {
4523
4399
  get selectionBounds() {
4524
4400
  return session.selectionBounds;
4525
4401
  },
4402
+ get mouseX() {
4403
+ return session.position.x;
4404
+ },
4526
4405
  visible: true,
4527
4406
  hasAgent: true,
4528
4407
  get status() {
4529
4408
  return session.isStreaming ? "copying" : "copied";
4530
4409
  },
4531
4410
  get statusText() {
4532
- return truncateStatus(session.lastStatus || "Please wait\u2026");
4411
+ return session.lastStatus || "Please wait\u2026";
4412
+ },
4413
+ get inputValue() {
4414
+ return session.context.prompt;
4533
4415
  },
4534
4416
  onAbort: () => props.onAbortSession?.(session.id)
4535
4417
  })]
@@ -4548,6 +4430,9 @@ var ReactGrabRenderer = (props) => {
4548
4430
  get selectionBounds() {
4549
4431
  return props.selectionBounds;
4550
4432
  },
4433
+ get mouseX() {
4434
+ return props.mouseX;
4435
+ },
4551
4436
  get visible() {
4552
4437
  return props.selectionLabelVisible;
4553
4438
  },
@@ -6311,7 +6196,7 @@ var createAgentManager = (initialAgentOptions) => {
6311
6196
  const content = await generateSnippet(elements);
6312
6197
  const context = { content, prompt, options: agentOptions?.getOptions?.() };
6313
6198
  const tagName = (element.tagName || "").toLowerCase() || void 0;
6314
- const componentName = getNearestComponentName(element) || void 0;
6199
+ const componentName = await getNearestComponentName(element) || void 0;
6315
6200
  const session = createSession(context, position, selectionBounds, tagName, componentName);
6316
6201
  session.lastStatus = "Please wait\u2026";
6317
6202
  sessionElements.set(session.id, element);
@@ -6379,7 +6264,7 @@ var createAgentManager = (initialAgentOptions) => {
6379
6264
  };
6380
6265
 
6381
6266
  // src/core.tsx
6382
- var _tmpl$21 = /* @__PURE__ */ template(`<span class="tabular-nums align-middle">`);
6267
+ var _tmpl$16 = /* @__PURE__ */ template(`<span class="tabular-nums align-middle">`);
6383
6268
  var _tmpl$23 = /* @__PURE__ */ template(`<span class="font-mono tabular-nums align-middle">&lt;<!>>`);
6384
6269
  var _tmpl$33 = /* @__PURE__ */ template(`<span class="tabular-nums ml-1 align-middle"> in `);
6385
6270
  var hasInited = false;
@@ -6461,7 +6346,7 @@ var init = (rawOptions) => {
6461
6346
  hasInited = true;
6462
6347
  const logIntro = () => {
6463
6348
  try {
6464
- const version = "0.0.59";
6349
+ const version = "0.0.60";
6465
6350
  const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
6466
6351
  console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
6467
6352
  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;`, "");
@@ -6819,7 +6704,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6819
6704
  const copying = isCopying();
6820
6705
  if (!element) {
6821
6706
  return (() => {
6822
- var _el$ = _tmpl$21();
6707
+ var _el$ = _tmpl$16();
6823
6708
  insert(_el$, copying ? "Please wait\u2026" : "1 element");
6824
6709
  return _el$;
6825
6710
  })();
@@ -6845,7 +6730,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6845
6730
  })();
6846
6731
  }
6847
6732
  return (() => {
6848
- var _el$10 = _tmpl$21();
6733
+ var _el$10 = _tmpl$16();
6849
6734
  insert(_el$10, copying ? "Please wait\u2026" : "1 element");
6850
6735
  return _el$10;
6851
6736
  })();
@@ -6959,7 +6844,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
6959
6844
  } else if (activated && dragging) {
6960
6845
  setCursorOverride("crosshair");
6961
6846
  } else if (activated && target) {
6962
- setCursorOverride("copy");
6847
+ setCursorOverride("default");
6963
6848
  } else if (activated) {
6964
6849
  setCursorOverride("crosshair");
6965
6850
  } else {
@@ -7054,9 +6939,8 @@ ${plainTextContentOnly}` : plainTextContentOnly;
7054
6939
  options.agent?.onAbort?.(session, element);
7055
6940
  if (element && document.contains(element)) {
7056
6941
  const rect = element.getBoundingClientRect();
7057
- const centerX = rect.left + rect.width / 2;
7058
6942
  const centerY = rect.top + rect.height / 2;
7059
- setMouseX(centerX);
6943
+ setMouseX(session.position.x);
7060
6944
  setMouseY(centerY);
7061
6945
  setFrozenElement(element);
7062
6946
  setInputText(session.context.prompt);
@@ -7082,6 +6966,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
7082
6966
  return;
7083
6967
  }
7084
6968
  const bounds = createElementBounds(element);
6969
+ const labelPositionX = mouseX();
7085
6970
  const currentX = bounds.x + bounds.width / 2;
7086
6971
  const currentY = bounds.y + bounds.height / 2;
7087
6972
  setMouseX(currentX);
@@ -7092,7 +6977,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
7092
6977
  element,
7093
6978
  prompt,
7094
6979
  position: {
7095
- x: currentX,
6980
+ x: labelPositionX,
7096
6981
  y: currentY
7097
6982
  },
7098
6983
  selectionBounds: bounds
@@ -7759,9 +7644,8 @@ ${plainTextContentOnly}` : plainTextContentOnly;
7759
7644
  newAgentOptions?.onAbort?.(session, element);
7760
7645
  if (element && document.contains(element)) {
7761
7646
  const rect = element.getBoundingClientRect();
7762
- const centerX = rect.left + rect.width / 2;
7763
7647
  const centerY = rect.top + rect.height / 2;
7764
- setMouseX(centerX);
7648
+ setMouseX(session.position.x);
7765
7649
  setMouseY(centerY);
7766
7650
  setFrozenElement(element);
7767
7651
  setInputText(session.context.prompt);