react-grab 0.0.58 → 0.0.60

package/dist/{chunk-T7WUJ6UX.cjs → chunk-66O4TVGR.cjs}

@@ -890,7 +890,7 @@ function cleanChildren(parent, current, marker, replacement) {
 
 // dist/styles.css
 var styles_default = `/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-@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;--color-label-success-bg:#d9ffe4;--color-label-success-border:#00bb69;--color-label-success-text:#006e3b;--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}.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-1{gap:calc(var(--spacing)*1)}.gap-\\[2px\\]{gap:2px}.gap-\\[3px\\]{gap:3px}.gap-\\[5px\\]{gap:5px}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-\\[1\\.5px\\]{border-radius:1.5px}.rounded-\\[1px\\]{border-radius:1px}.rounded-\\[2px\\]{border-radius:2px}.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-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-white{border-color:var(--color-white)}.border-t-\\[\\#B6B6B6\\]{border-top-color:#b6b6b6}.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-label-success-bg{background-color:var(--color-label-success-bg)}.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-\\[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-\\[\\#47004A\\]{color:#47004a}.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-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}.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}}`;
+@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}}`;
 
 // src/utils/is-keyboard-event-triggered-by-input.ts
 var FORM_TAGS_AND_ROLES = [
@@ -3735,75 +3735,12 @@ var Crosshair = (props) => {
   });
 };
 
-// src/components/icon-checkmark.tsx
-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>`);
-var IconCheckmark = (props) => {
-  const size = () => props.size ?? 9;
-  return (() => {
-    var _el$ = _tmpl$3();
-    createRenderEffect((_p$) => {
-      var _v$ = size(), _v$2 = size(), _v$3 = props.class;
-      _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
-};
-
-// src/components/icon-cursor-simple.tsx
-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>`);
-var IconCursorSimple = (props) => {
-  const size = () => props.size ?? 9;
-  return (() => {
-    var _el$ = _tmpl$4();
-    createRenderEffect((_p$) => {
-      var _v$ = size(), _v$2 = size(), _v$3 = props.class;
-      _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
-};
-
 // src/components/icon-open.tsx
-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">`);
+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">`);
 var IconOpen = (props) => {
   const size = () => props.size ?? 12;
   return (() => {
-    var _el$ = _tmpl$5();
-    createRenderEffect((_p$) => {
-      var _v$ = size(), _v$2 = size(), _v$3 = props.class;
-      _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
-};
-
-// src/components/icon-stop.tsx
-var _tmpl$6 = /* @__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>`);
-var IconStop = (props) => {
-  const size = () => props.size ?? 9;
-  return (() => {
-    var _el$ = _tmpl$6();
+    var _el$ = _tmpl$3();
     createRenderEffect((_p$) => {
       var _v$ = size(), _v$2 = size(), _v$3 = props.class;
       _v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
@@ -3820,22 +3757,22 @@ var IconStop = (props) => {
 };
 
 // src/components/selection-label.tsx
-var _tmpl$7 = /* @__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>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<button>`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
-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]">`);
-var _tmpl$62 = /* @__PURE__ */ template(`<div class="absolute w-0 h-0"style="border-left:8px solid transparent;border-right:8px solid transparent">`);
-var _tmpl$72 = /* @__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">Click to copy`);
-var _tmpl$8 = /* @__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">`);
-var _tmpl$9 = /* @__PURE__ */ template(`<div class="flex items-center gap-[3px] pt-1 pb-1.5 px-1.5">`);
-var _tmpl$0 = /* @__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>`);
-var _tmpl$1 = /* @__PURE__ */ template(`<div class="flex items-center gap-[3px] react-grab-shimmer rounded-[3px] pt-1 pb-1.5 px-1.5">`);
-var _tmpl$10 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-1 w-fit h-fit"><span class="text-label-muted 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 p-0.5 rounded-[1px] bg-white [border-width:0.5px] border-solid border-white 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-label-muted text-[12px] leading-4 shrink-0 tracking-[-0.04em] font-sans font-medium w-fit h-fit">to edit`);
-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 w-fit h-fit pt-1 px-1.5"></div><div class="grid w-full transition-[grid-template-rows] duration-30 ease-out"><div class="overflow-hidden min-h-0">`);
-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 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)>`);
+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>`);
+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">`);
+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;`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class="absolute w-0 h-0"style="border-left:8px solid transparent;border-right:8px solid transparent">`);
+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">`);
+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%)">`);
+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">`);
+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">`);
+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>`);
+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">`);
+var _tmpl$1 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-px w-fit h-fit">`);
+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`);
+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">`);
+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)>`);
 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">`);
-var _tmpl$14 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events class="fixed font-sans antialiased transition-opacity duration-300 ease-out"style="z-index:2147483647;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2)) drop-shadow(0 2px 4px rgba(0,0,0,0.25))"><div class="[font-synthesis:none] contain-layout flex items-center gap-[5px] rounded-[2px] bg-white antialiased w-fit h-fit p-0">`);
+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">`);
 var ARROW_HEIGHT = 8;
 var LABEL_GAP = 4;
 var IDLE_TIMEOUT_MS = 400;
@@ -3850,7 +3787,7 @@ var TagBadge = (props) => {
     props.onHoverChange?.(false);
   };
   return (() => {
-    var _el$ = _tmpl$7(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild;
     addEventListener(_el$, "click", props.onClick);
     _el$.addEventListener("mouseleave", handleMouseLeave);
     _el$.addEventListener("mouseenter", handleMouseEnter);
@@ -3869,7 +3806,7 @@ var TagBadge = (props) => {
       }
     }), null);
     createRenderEffect((_p$) => {
-      var _v$ = cn("contain-layout flex items-center px-[3px] py-0 h-4 rounded-[1px] gap-[2px] [border-width:0.5px] border-solid border-label-tag-border", props.shrink && "shrink-0 w-fit", props.isClickable && "cursor-pointer"), _v$2 = cn("text-[#47004A] text-[11.5px] leading-3.5 shrink-0 w-fit h-fit", props.showMono ? "tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace]" : "tracking-[-0.04em] font-medium");
+      var _v$ = cn("contain-layout flex items-center px-[3px] py-0 h-4 rounded-[1px] gap-0.5 [border-width:0.5px] border-solid border-label-tag-border", props.shrink && "shrink-0 w-fit", props.isClickable && "cursor-pointer"), _v$2 = cn("text-[#47004A] text-[11.5px] leading-3.5 shrink-0 w-fit h-fit", props.showMono ? "tracking-[-0.08em] font-[ui-monospace,'SFMono-Regular','SF_Mono','Menlo','Consolas','Liberation_Mono',monospace]" : "tracking-[-0.04em] font-medium");
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       return _p$;
@@ -3880,67 +3817,45 @@ var TagBadge = (props) => {
     return _el$;
   })();
 };
-var ActionPill = (props) => {
-  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");
-  const content = [memo(() => props.icon), (() => {
-    var _el$3 = _tmpl$22();
-    insert(_el$3, () => props.label);
-    createRenderEffect(() => className(_el$3, cn("text-black text-[12px] leading-4 font-medium tracking-[-0.04em]", props.shrink && "shrink-0 w-fit h-fit")));
-    return _el$3;
-  })()];
-  return props.asButton ? (() => {
-    var _el$4 = _tmpl$32();
-    addEventListener(_el$4, "click", props.onClick);
-    className(_el$4, baseClass);
-    insert(_el$4, content);
-    return _el$4;
-  })() : (() => {
-    var _el$5 = _tmpl$42();
-    addEventListener(_el$5, "click", props.onClick);
-    className(_el$5, baseClass);
-    insert(_el$5, content);
-    createRenderEffect(() => setAttribute(_el$5, "role", props.onClick ? "button" : void 0));
-    return _el$5;
+var ParentBadge = (props) => (() => {
+  var _el$3 = _tmpl$22(), _el$4 = _el$3.firstChild;
+  insert(_el$4, () => props.name);
+  return _el$3;
+})();
+var ChevronSeparator = () => _tmpl$32();
+var Arrow = (props) => {
+  const arrowColor = () => props.color ?? "white";
+  return (() => {
+    var _el$6 = _tmpl$42();
+    createRenderEffect((_$p) => style(_el$6, {
+      left: `${props.leftPx}px`,
+      ...props.position === "bottom" ? {
+        top: "0",
+        transform: "translateX(-50%) translateY(-100%)"
+      } : {
+        bottom: "0",
+        transform: "translateX(-50%) translateY(100%)"
+      },
+      ...props.position === "bottom" ? {
+        "border-bottom": `8px solid ${arrowColor()}`
+      } : {
+        "border-top": `8px solid ${arrowColor()}`
+      }
+    }, _$p));
+    return _el$6;
   })();
 };
-var SuccessPill = (props) => (() => {
-  var _el$6 = _tmpl$52(), _el$7 = _el$6.firstChild;
-  insert(_el$6, createComponent(IconCheckmark, {
-    size: 9,
-    "class": "text-label-success-text shrink-0"
-  }), _el$7);
-  insert(_el$7, () => props.hasAgent ? "Completed" : "Copied");
-  return _el$6;
-})();
-var Arrow = (props) => (() => {
-  var _el$8 = _tmpl$62();
-  createRenderEffect((_$p) => style(_el$8, {
-    left: `${props.leftPx}px`,
-    ...props.position === "bottom" ? {
-      top: "0",
-      transform: "translateX(-50%) translateY(-100%)"
-    } : {
-      bottom: "0",
-      transform: "translateX(-50%) translateY(100%)"
-    },
-    ...props.position === "bottom" ? {
-      "border-bottom": "8px solid white"
-    } : {
-      "border-top": "8px solid white"
-    }
-  }, _$p));
-  return _el$8;
-})();
 var ClickToCopyPill = (props) => (() => {
-  var _el$9 = _tmpl$72();
-  addEventListener(_el$9, "click", props.onClick);
-  createRenderEffect(() => className(_el$9, 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")));
-  return _el$9;
+  var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild;
+  addEventListener(_el$7, "click", props.onClick);
+  insert(_el$8, () => props.hasParent ? "Copy" : "Click to copy");
+  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")));
+  return _el$7;
 })();
 var BottomSection = (props) => (() => {
-  var _el$0 = _tmpl$8();
-  insert(_el$0, () => props.children);
-  return _el$0;
+  var _el$9 = _tmpl$6();
+  insert(_el$9, () => props.children);
+  return _el$9;
 })();
 var SelectionLabel = (props) => {
   let containerRef;
@@ -4036,9 +3951,10 @@ var SelectionLabel = (props) => {
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
     const selectionCenterX = bounds.x + bounds.width / 2;
+    const cursorX = props.mouseX ?? selectionCenterX;
     const selectionBottom = bounds.y + bounds.height;
     const selectionTop = bounds.y;
-    let positionLeft = selectionCenterX - labelWidth / 2;
+    let positionLeft = cursorX - labelWidth / 2;
     let positionTop = selectionBottom + ARROW_HEIGHT + LABEL_GAP;
     if (positionLeft + labelWidth > viewportWidth - VIEWPORT_MARGIN_PX) {
       positionLeft = viewportWidth - labelWidth - VIEWPORT_MARGIN_PX;
@@ -4057,7 +3973,7 @@ var SelectionLabel = (props) => {
     if (positionTop < VIEWPORT_MARGIN_PX) {
       positionTop = VIEWPORT_MARGIN_PX;
     }
-    const arrowLeft = Math.max(12, Math.min(selectionCenterX - positionLeft, labelWidth - 12));
+    const arrowLeft = Math.max(12, Math.min(cursorX - positionLeft, labelWidth - 12));
     return {
       left: positionLeft,
       top: positionTop,
@@ -4097,187 +4013,221 @@ var SelectionLabel = (props) => {
       return memo(() => props.visible !== false)() && props.selectionBounds;
     },
     get children() {
-      var _el$1 = _tmpl$14(), _el$10 = _el$1.firstChild;
-      _el$1.$$click = stopPropagation;
-      _el$1.$$mousedown = stopPropagation;
+      var _el$0 = _tmpl$14(), _el$12 = _el$0.firstChild;
+      _el$0.$$click = stopPropagation;
+      _el$0.$$mousedown = stopPropagation;
       var _ref$ = containerRef;
-      typeof _ref$ === "function" ? use(_ref$, _el$1) : containerRef = _el$1;
-      insert(_el$1, createComponent(Arrow, {
+      typeof _ref$ === "function" ? use(_ref$, _el$0) : containerRef = _el$0;
+      insert(_el$0, createComponent(Arrow, {
         get position() {
           return arrowPosition();
         },
         get leftPx() {
           return computedPosition().arrowLeft;
         }
-      }), _el$10);
-      insert(_el$10, createComponent(Show, {
+      }), _el$12);
+      insert(_el$0, createComponent(Show, {
         get when() {
           return props.status === "copied" || props.status === "fading";
         },
         get children() {
-          var _el$11 = _tmpl$9();
-          insert(_el$11, createComponent(TagBadge, {
-            get tagName() {
-              return tagDisplay();
-            },
-            get isClickable() {
-              return isTagClickable();
-            },
-            onClick: handleTagClick,
-            onHoverChange: handleTagHoverChange,
-            showMono: true,
-            shrink: true
-          }), null);
-          insert(_el$11, createComponent(SuccessPill, {
-            get hasAgent() {
-              return props.hasAgent;
-            }
-          }), null);
-          return _el$11;
+          var _el$1 = _tmpl$7(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild;
+          insert(_el$11, () => props.hasAgent ? "Completed" : "Copied");
+          return _el$1;
         }
-      }), null);
-      insert(_el$10, createComponent(Show, {
+      }), _el$12);
+      insert(_el$12, createComponent(Show, {
         get when() {
           return props.status === "copying";
         },
         get children() {
-          var _el$12 = _tmpl$1();
-          insert(_el$12, createComponent(TagBadge, {
-            get tagName() {
-              return tagDisplay();
-            },
-            get isClickable() {
-              return isTagClickable();
-            },
-            onClick: handleTagClick,
-            onHoverChange: handleTagHoverChange,
-            showMono: true,
-            shrink: true
-          }), null);
-          insert(_el$12, createComponent(ActionPill, {
-            get icon() {
-              return createComponent(IconCursorSimple, {
-                size: 9,
-                "class": "text-black shrink-0"
-              });
-            },
-            get label() {
-              return props.statusText ?? "Grabbing\u2026";
-            }
-          }), null);
-          insert(_el$12, createComponent(Show, {
-            get when() {
-              return memo(() => !!props.hasAgent)() && props.onAbort;
-            },
+          var _el$13 = _tmpl$0(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild;
+          insert(_el$16, () => props.statusText ?? "Grabbing\u2026");
+          insert(_el$13, createComponent(BottomSection, {
             get children() {
-              var _el$13 = _tmpl$0();
-              _el$13.$$click = (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-                props.onAbort?.();
-              };
-              _el$13.$$mousedown = (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-              };
-              insert(_el$13, createComponent(IconStop, {
-                size: 8,
-                "class": "text-white"
-              }));
-              return _el$13;
+              var _el$17 = _tmpl$9(), _el$18 = _el$17.firstChild;
+              var _ref$2 = inputRef;
+              typeof _ref$2 === "function" ? use(_ref$2, _el$18) : inputRef = _el$18;
+              insert(_el$17, createComponent(Show, {
+                get when() {
+                  return props.onAbort;
+                },
+                get children() {
+                  var _el$19 = _tmpl$8();
+                  addEventListener(_el$19, "click", props.onAbort);
+                  return _el$19;
+                }
+              }), null);
+              createRenderEffect(() => _el$18.value = props.inputValue ?? "");
+              return _el$17;
             }
           }), null);
-          return _el$12;
+          return _el$13;
         }
       }), null);
-      insert(_el$10, createComponent(Show, {
+      insert(_el$12, createComponent(Show, {
         get when() {
           return memo(() => !!isNotProcessing())() && !props.isInputExpanded;
         },
         get children() {
-          var _el$14 = _tmpl$11(), _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild;
-          insert(_el$15, createComponent(ClickToCopyPill, {
+          var _el$20 = _tmpl$11(), _el$21 = _el$20.firstChild, _el$23 = _el$21.nextSibling, _el$24 = _el$23.firstChild;
+          insert(_el$21, createComponent(ClickToCopyPill, {
             onClick: handleSubmit,
-            shrink: true
+            shrink: true,
+            get hasParent() {
+              return !!props.componentName;
+            }
           }), null);
-          insert(_el$15, createComponent(TagBadge, {
-            get tagName() {
-              return tagDisplay();
+          insert(_el$21, createComponent(Show, {
+            get when() {
+              return props.componentName;
             },
-            get isClickable() {
-              return isTagClickable();
+            get children() {
+              var _el$22 = _tmpl$1();
+              insert(_el$22, createComponent(ParentBadge, {
+                get name() {
+                  return props.componentName;
+                }
+              }), null);
+              insert(_el$22, createComponent(ChevronSeparator, {}), null);
+              insert(_el$22, createComponent(TagBadge, {
+                get tagName() {
+                  return tagDisplay();
+                },
+                get isClickable() {
+                  return isTagClickable();
+                },
+                onClick: handleTagClick,
+                onHoverChange: handleTagHoverChange,
+                showMono: true,
+                shrink: true
+              }), null);
+              return _el$22;
+            }
+          }), null);
+          insert(_el$21, createComponent(Show, {
+            get when() {
+              return !props.componentName;
             },
-            onClick: handleTagClick,
-            onHoverChange: handleTagHoverChange,
-            showMono: true,
-            shrink: true
+            get children() {
+              return createComponent(TagBadge, {
+                get tagName() {
+                  return tagDisplay();
+                },
+                get isClickable() {
+                  return isTagClickable();
+                },
+                onClick: handleTagClick,
+                onHoverChange: handleTagHoverChange,
+                showMono: true,
+                shrink: true
+              });
+            }
           }), null);
-          insert(_el$17, createComponent(BottomSection, {
+          insert(_el$24, createComponent(BottomSection, {
             get children() {
-              var _el$18 = _tmpl$10(), _el$19 = _el$18.firstChild, _el$20 = _el$19.nextSibling; _el$20.firstChild;
-              return _el$18;
+              var _el$25 = _tmpl$10(), _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling; _el$27.firstChild;
+              return _el$25;
             }
           }));
-          createRenderEffect((_$p) => setStyleProperty(_el$16, "grid-template-rows", isIdle() ? "1fr" : "0fr"));
-          return _el$14;
+          createRenderEffect((_$p) => setStyleProperty(_el$23, "grid-template-rows", isIdle() ? "1fr" : "0fr"));
+          return _el$20;
         }
       }), null);
-      insert(_el$10, createComponent(Show, {
+      insert(_el$12, createComponent(Show, {
         get when() {
           return memo(() => !!isNotProcessing())() && props.isInputExpanded;
         },
         get children() {
-          var _el$22 = _tmpl$13(), _el$23 = _el$22.firstChild;
-          insert(_el$23, createComponent(ClickToCopyPill, {
+          var _el$29 = _tmpl$13(), _el$30 = _el$29.firstChild;
+          insert(_el$30, createComponent(ClickToCopyPill, {
             onClick: handleSubmit,
             dimmed: true,
-            shrink: true
+            shrink: true,
+            get hasParent() {
+              return !!props.componentName;
+            }
           }), null);
-          insert(_el$23, createComponent(TagBadge, {
-            get tagName() {
-              return tagDisplay();
+          insert(_el$30, createComponent(Show, {
+            get when() {
+              return props.componentName;
             },
-            get isClickable() {
-              return isTagClickable();
+            get children() {
+              var _el$31 = _tmpl$1();
+              insert(_el$31, createComponent(ParentBadge, {
+                get name() {
+                  return props.componentName;
+                }
+              }), null);
+              insert(_el$31, createComponent(ChevronSeparator, {}), null);
+              insert(_el$31, createComponent(TagBadge, {
+                get tagName() {
+                  return tagDisplay();
+                },
+                get isClickable() {
+                  return isTagClickable();
+                },
+                onClick: handleTagClick,
+                onHoverChange: handleTagHoverChange,
+                showMono: true,
+                shrink: true,
+                forceShowIcon: true
+              }), null);
+              return _el$31;
+            }
+          }), null);
+          insert(_el$30, createComponent(Show, {
+            get when() {
+              return !props.componentName;
             },
-            onClick: handleTagClick,
-            onHoverChange: handleTagHoverChange,
-            showMono: true,
-            shrink: true,
-            forceShowIcon: true
+            get children() {
+              return createComponent(TagBadge, {
+                get tagName() {
+                  return tagDisplay();
+                },
+                get isClickable() {
+                  return isTagClickable();
+                },
+                onClick: handleTagClick,
+                onHoverChange: handleTagHoverChange,
+                showMono: true,
+                shrink: true,
+                forceShowIcon: true
+              });
+            }
           }), null);
-          insert(_el$22, createComponent(BottomSection, {
+          insert(_el$29, createComponent(BottomSection, {
             get children() {
-              var _el$24 = _tmpl$12(), _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild;
-              _el$25.$$keydown = handleKeyDown;
-              _el$25.$$input = handleInput;
-              var _ref$2 = inputRef;
-              typeof _ref$2 === "function" ? use(_ref$2, _el$25) : inputRef = _el$25;
-              _el$26.$$click = handleSubmit;
-              createRenderEffect(() => className(_el$27, cn("w-2.5 h-[9px] shrink-0 bg-cover bg-center transition-opacity duration-100", props.inputValue ? "opacity-[0.99]" : "opacity-50")));
-              createRenderEffect(() => _el$25.value = props.inputValue ?? "");
-              return _el$24;
+              var _el$32 = _tmpl$12(), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling, _el$35 = _el$34.firstChild;
+              _el$33.$$keydown = handleKeyDown;
+              _el$33.$$input = handleInput;
+              var _ref$3 = inputRef;
+              typeof _ref$3 === "function" ? use(_ref$3, _el$33) : inputRef = _el$33;
+              _el$34.$$click = handleSubmit;
+              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")));
+              createRenderEffect(() => _el$33.value = props.inputValue ?? "");
+              return _el$32;
             }
           }), null);
-          return _el$22;
+          return _el$29;
         }
       }), null);
       createRenderEffect((_p$) => {
-        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$3 !== _p$.e && setStyleProperty(_el$1, "top", _p$.e = _v$3);
-        _v$4 !== _p$.t && setStyleProperty(_el$1, "left", _p$.t = _v$4);
-        _v$5 !== _p$.a && setStyleProperty(_el$1, "pointer-events", _p$.a = _v$5);
-        _v$6 !== _p$.o && setStyleProperty(_el$1, "opacity", _p$.o = _v$6);
+        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;
+        _v$3 !== _p$.e && setStyleProperty(_el$0, "top", _p$.e = _v$3);
+        _v$4 !== _p$.t && setStyleProperty(_el$0, "left", _p$.t = _v$4);
+        _v$5 !== _p$.a && setStyleProperty(_el$0, "pointer-events", _p$.a = _v$5);
+        _v$6 !== _p$.o && setStyleProperty(_el$0, "opacity", _p$.o = _v$6);
+        _v$7 !== _p$.i && setStyleProperty(_el$12, "display", _p$.i = _v$7);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0,
-        o: void 0
+        o: void 0,
+        i: void 0
       });
-      return _el$1;
+      return _el$0;
     }
   });
 };
@@ -4362,10 +4312,6 @@ var SelectionCursor = (props) => {
 delegateEvents(["click"]);
 
 // src/components/renderer.tsx
-var truncateStatus = (status, maxLength = 30) => {
-  if (status.length <= maxLength) return status;
-  return `${status.slice(0, maxLength)}\u2026`;
-};
 var ReactGrabRenderer = (props) => {
   return [createComponent(Show, {
     get when() {
@@ -4449,16 +4395,25 @@ var ReactGrabRenderer = (props) => {
       get tagName() {
         return session.tagName;
       },
+      get componentName() {
+        return session.componentName;
+      },
       get selectionBounds() {
         return session.selectionBounds;
       },
+      get mouseX() {
+        return session.position.x;
+      },
       visible: true,
       hasAgent: true,
       get status() {
         return session.isStreaming ? "copying" : "copied";
       },
       get statusText() {
-        return truncateStatus(session.lastStatus || "Please wait\u2026");
+        return session.lastStatus || "Please wait\u2026";
+      },
+      get inputValue() {
+        return session.context.prompt;
       },
       onAbort: () => props.onAbortSession?.(session.id)
     })]
@@ -4471,9 +4426,15 @@ var ReactGrabRenderer = (props) => {
         get tagName() {
           return props.selectionTagName;
         },
+        get componentName() {
+          return props.selectionComponentName;
+        },
         get selectionBounds() {
           return props.selectionBounds;
         },
+        get mouseX() {
+          return props.mouseX;
+        },
         get visible() {
           return props.selectionLabelVisible;
         },
@@ -4523,6 +4484,9 @@ var ReactGrabRenderer = (props) => {
       get tagName() {
         return instance.tagName;
       },
+      get componentName() {
+        return instance.componentName;
+      },
       get selectionBounds() {
         return instance.bounds;
       },
@@ -6014,7 +5978,7 @@ var deepMergeTheme = mergeThemeWithBase;
 // src/utils/agent-session.ts
 var STORAGE_KEY = "react-grab:agent-sessions";
 var generateSessionId = () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-var createSession = (context, position, selectionBounds, tagName) => ({
+var createSession = (context, position, selectionBounds, tagName, componentName) => ({
   id: generateSessionId(),
   context,
   lastStatus: "",
@@ -6022,7 +5986,8 @@ var createSession = (context, position, selectionBounds, tagName) => ({
   createdAt: Date.now(),
   position,
   selectionBounds,
-  tagName
+  tagName,
+  componentName
 });
 var getStorage = (storage) => {
   if (!storage) return null;
@@ -6233,7 +6198,8 @@ var createAgentManager = (initialAgentOptions) => {
     const content = await generateSnippet(elements);
     const context = { content, prompt, options: agentOptions?.getOptions?.() };
     const tagName = (element.tagName || "").toLowerCase() || void 0;
-    const session = createSession(context, position, selectionBounds, tagName);
+    const componentName = await getNearestComponentName(element) || void 0;
+    const session = createSession(context, position, selectionBounds, tagName, componentName);
     session.lastStatus = "Please wait\u2026";
     sessionElements.set(session.id, element);
     setSessions((prev) => new Map(prev).set(session.id, session));
@@ -6382,7 +6348,7 @@ var init = (rawOptions) => {
   hasInited = true;
   const logIntro = () => {
     try {
-      const version = "0.0.58";
+      const version = "0.0.60";
       const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
       console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
 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;`, "");
@@ -6546,12 +6512,13 @@ https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid
         }
       }));
     };
-    const createLabelInstance = (bounds, tagName, status, element) => {
+    const createLabelInstance = (bounds, tagName, componentName, status, element) => {
       const instanceId = `label-${Date.now()}-${Math.random().toString(36).slice(2)}`;
       setLabelInstances((prev) => [...prev, {
         id: instanceId,
         bounds,
         tagName,
+        componentName,
         status,
         createdAt: Date.now(),
         element
@@ -6567,12 +6534,12 @@ https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid
     const removeLabelInstance = (instanceId) => {
       setLabelInstances((prev) => prev.filter((instance) => instance.id !== instanceId));
     };
-    const executeCopyOperation = async (positionX, positionY, operation, bounds, tagName, element) => {
+    const executeCopyOperation = async (positionX, positionY, operation, bounds, tagName, componentName, element) => {
       setCopyStartX(positionX);
       setCopyStartY(positionY);
       setIsCopying(true);
       startProgressAnimation();
-      const instanceId = bounds && tagName ? createLabelInstance(bounds, tagName, "copying", element) : null;
+      const instanceId = bounds && tagName ? createLabelInstance(bounds, tagName, componentName, "copying", element) : null;
       await operation().finally(() => {
         setIsCopying(false);
         stopProgressAnimation();
@@ -6879,7 +6846,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
       } else if (activated && dragging) {
         setCursorOverride("crosshair");
       } else if (activated && target) {
-        setCursorOverride("copy");
+        setCursorOverride("default");
       } else if (activated) {
         setCursorOverride("crosshair");
       } else {
@@ -6974,9 +6941,8 @@ ${plainTextContentOnly}` : plainTextContentOnly;
         options.agent?.onAbort?.(session, element);
         if (element && document.contains(element)) {
           const rect = element.getBoundingClientRect();
-          const centerX = rect.left + rect.width / 2;
           const centerY = rect.top + rect.height / 2;
-          setMouseX(centerX);
+          setMouseX(session.position.x);
           setMouseY(centerY);
           setFrozenElement(element);
           setInputText(session.context.prompt);
@@ -7002,6 +6968,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
         return;
       }
       const bounds = createElementBounds(element);
+      const labelPositionX = mouseX();
       const currentX = bounds.x + bounds.width / 2;
       const currentY = bounds.y + bounds.height / 2;
       setMouseX(currentX);
@@ -7012,7 +6979,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
           element,
           prompt,
           position: {
-            x: currentX,
+            x: labelPositionX,
             y: currentY
           },
           selectionBounds: bounds
@@ -7022,8 +6989,10 @@ ${plainTextContentOnly}` : plainTextContentOnly;
       setIsInputMode(false);
       setInputText("");
       const tagName = extractElementTagName(element);
-      void executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(element, prompt || void 0), bounds, tagName, element).then(() => {
-        deactivateRenderer();
+      void getNearestComponentName(element).then((componentName) => {
+        void executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(element, prompt || void 0), bounds, tagName, componentName ?? void 0, element).then(() => {
+          deactivateRenderer();
+        });
       });
     };
     const handleInputCancel = () => {
@@ -7046,10 +7015,11 @@ ${plainTextContentOnly}` : plainTextContentOnly;
       setHasNativeSelection(false);
       clearNativeSelectionState();
       window.getSelection()?.removeAllRanges();
+      const componentName = nativeSelectionComponentName();
       if (elements.length === 1) {
-        await executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(elements[0]), bounds, tagName);
+        await executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(elements[0]), bounds, tagName, componentName);
       } else {
-        await executeCopyOperation(currentX, currentY, () => copyMultipleElementsToClipboard(elements), bounds, tagName);
+        await executeCopyOperation(currentX, currentY, () => copyMultipleElementsToClipboard(elements), bounds, tagName, componentName);
       }
     };
     const handleNativeSelectionEnter = () => {
@@ -7130,7 +7100,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
             setIsInputExpanded(true);
             setIsInputMode(true);
           } else {
-            void executeCopyOperation(clientX, clientY, () => copyMultipleElementsToClipboard(selectedElements), bounds, tagName, firstElement);
+            void getNearestComponentName(firstElement).then((componentName) => {
+              void executeCopyOperation(clientX, clientY, () => copyMultipleElementsToClipboard(selectedElements), bounds, tagName, componentName ?? void 0, firstElement);
+            });
           }
         }
       } else {
@@ -7139,7 +7111,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
         setLastGrabbedElement(element);
         const bounds = createElementBounds(element);
         const tagName = extractElementTagName(element);
-        void executeCopyOperation(clientX, clientY, () => copySingleElementToClipboard(element), bounds, tagName, element);
+        void getNearestComponentName(element).then((componentName) => {
+          void executeCopyOperation(clientX, clientY, () => copySingleElementToClipboard(element), bounds, tagName, componentName ?? void 0, element);
+        });
       }
     };
     const abortController = new AbortController();
@@ -7475,6 +7449,11 @@ ${plainTextContentOnly}` : plainTextContentOnly;
       if (!element) return void 0;
       return extractElementTagName(element) || void 0;
     });
+    const [selectionComponentName] = createResource(() => targetElement(), async (element) => {
+      if (!element) return void 0;
+      const name = await getNearestComponentName(element);
+      return name ?? void 0;
+    });
     const selectionLabelVisible = createMemo(() => {
       if (!theme().elementLabel.enabled) return false;
       if (successLabels().length > 0) return false;
@@ -7527,6 +7506,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
         get selectionTagName() {
           return selectionTagName();
         },
+        get selectionComponentName() {
+          return selectionComponentName();
+        },
         get selectionLabelVisible() {
           return selectionLabelVisible();
         },
@@ -7664,9 +7646,8 @@ ${plainTextContentOnly}` : plainTextContentOnly;
             newAgentOptions?.onAbort?.(session, element);
             if (element && document.contains(element)) {
               const rect = element.getBoundingClientRect();
-              const centerX = rect.left + rect.width / 2;
               const centerY = rect.top + rect.height / 2;
-              setMouseX(centerX);
+              setMouseX(session.position.x);
               setMouseY(centerY);
               setFrozenElement(element);
               setInputText(session.context.prompt);